diff --git a/content/2017-10-01_16:23.md b/content/2017-10-01_16:23.md
new file mode 100644
index 0000000..0b80c1f
--- /dev/null
+++ b/content/2017-10-01_16:23.md
@@ -0,0 +1,10 @@
+# dplogs : Behind the scenes
+
+<p>
+React
+Github Pages
+Azure Application Insights
+Visual Studio Code
+Ubuntu
+Git
+</p>
\ No newline at end of file
diff --git a/content/logs.json b/content/logs.json
new file mode 100644
index 0000000..03f0913
--- /dev/null
+++ b/content/logs.json
@@ -0,0 +1,16 @@
+[
+    {
+        "key":2,
+        "datetime":"2017-10-01T16:23:00.000Z",
+        "title":"dplogs_:_Behind_the_scenes",
+        "filename":"2017-10-01_16:23.md",
+        "tags":["react","ui","javascript","blog"]
+    },
+    {
+        "key":1,
+        "datetime":"2017-08-20T19:27:00.000Z",
+        "title":"Hello_World_!",
+        "filename":"2017-08-20_19:27.md",
+        "tags":["react","miscellaneous"]
+    }
+]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2e811f7..713c17d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9040,6 +9040,21 @@
       "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
+      "requires": {
+        "performance-now": "2.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+        }
+      }
+    },
     "randomatic": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
@@ -9113,9 +9128,9 @@
       }
     },
     "react": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-15.6.1.tgz",
-      "integrity": "sha1-uqhDTsZ4C96ZfNw4C3nNM7ljk98=",
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
+      "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
       "requires": {
         "create-react-class": "15.6.0",
         "fbjs": "0.8.12",
@@ -9156,6 +9171,14 @@
         "lodash": "4.17.4"
       }
     },
+    "react-collapse": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-collapse/-/react-collapse-4.0.3.tgz",
+      "integrity": "sha512-OO4NhtEqFtz+1ma31J1B7+ezdRnzHCZiTGSSd/Pxoks9hxrZYhzFEddeYt05A/1477xTtdrwo7xEa2FLJyWGCQ==",
+      "requires": {
+        "prop-types": "15.5.10"
+      }
+    },
     "react-dev-utils": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-3.0.0.tgz",
@@ -9333,6 +9356,16 @@
         "prop-types": "15.5.10"
       }
     },
+    "react-motion": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-motion/-/react-motion-0.5.2.tgz",
+      "integrity": "sha512-9q3YAvHoUiWlP3cK0v+w1N5Z23HXMj4IF4YuvjvWegWqNPfLXsOBE/V7UvQGpXxHFKRQQcNcVQE31g9SB/6qgQ==",
+      "requires": {
+        "performance-now": "0.2.0",
+        "prop-types": "15.5.10",
+        "raf": "3.4.0"
+      }
+    },
     "react-router": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-3.0.5.tgz",
diff --git a/package.json b/package.json
index 1c7e979..f358497 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,14 @@
     "npm-run-all": "^4.0.2",
     "prettier": "^1.5.2",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
+    "react": "^15.6.2",
     "react-appinsights": "^1.0.2",
     "react-burger-menu": "^2.1.5",
     "react-chronos": "^1.0.4",
+    "react-collapse": "^4.0.3",
     "react-dom": "^15.6.1",
     "react-markdown": "^2.5.0",
+    "react-motion": "^0.5.2",
     "react-router": "^3.0.5",
     "react-vertical-timeline": "^0.1.2",
     "source-map-explorer": "^1.4.0"
diff --git a/src/logs.jsx b/src/logs.jsx
index f789521..2ec984b 100644
--- a/src/logs.jsx
+++ b/src/logs.jsx
@@ -2,59 +2,129 @@ import React from 'react';
 import { TrackedComponent } from 'react-appinsights';
 import GitHub from 'github-api';
 import ReactMarkdown from 'react-markdown';
+import { Collapse } from 'react-collapse';
+import { presets } from 'react-motion';
 import './logs.css';
 
+let repo;
 const user = 'dparkar';
 const repoName = 'blog-react';
 const repoBranch = 'master';
-const repoLogsFolder = 'content';
+const repoContentPath = 'content';
+const repoLogsMetadataFile = 'logs.json';
 
 export default class Logs extends TrackedComponent {
   constructor(props) {
     super(props);
     var gh = new GitHub();
     // get the repo
-    var repo = gh.getRepo(user, repoName);
-    // get the folder contents
-    repo.getContents(repoBranch, repoLogsFolder, true, (err1, files) => {
-      if (err1) {
-        console.log(err1); // we can't get the data, for some reason
-        return;
-      }
-      // go through each file in the folder
-      files.forEach(function(file) {
+    repo = gh.getRepo(user, repoName);
+    // get the logs metadata
+    repo.getContents(
+      repoBranch,
+      repoContentPath + '/' + repoLogsMetadataFile,
+      true,
+      (err, logs) => {
+        if (err) {
+          console.log(err); // we can't get the data, for some reason
+          return;
+        }
+        logs.forEach(function(log) {
+          log['selected'] = false;
+          log['content'] = '';
+        }, this);
+        logs[0]['selected'] = true;
         repo.getContents(
           repoBranch,
-          repoLogsFolder + '/' + file.name,
+          repoContentPath + '/' + logs[0].filename,
           true,
-          (err2, content) => {
-            if (err2) {
-              console.log(err2); // we can't have the data, for some reason
+          (err, content) => {
+            if (err) {
+              console.log(err); // we can't have the data, for some reason
               return;
             }
-            console.log(content);
-            this.setState({ logs: content });
+            logs[0].content = content;
+            this.setState({ logs: logs });
           }
         );
-      }, this);
-    });
-    // Update state
+        this.setState({ logs: logs });
+      }
+    );
+    // Intialize state
     this.state = {
-      //repoName: repoName,
-      id: 'fetching id ...',
-      logs: 'fetching logs ...'
+      logs: []
     };
   }
-
+  handleClick = e => {
+    var logIndex = this.state.logs.findIndex(
+      log => log.datetime === e.currentTarget.dataset.id
+    );
+    var logs = this.state.logs;
+    logs.forEach(function(log) {
+      log['selected'] = false;
+    }, this);
+    var log = this.state.logs[logIndex];
+    if (log.content === '') {
+      repo.getContents(
+        repoBranch,
+        repoContentPath + '/' + log.filename,
+        true,
+        (err, content) => {
+          if (err) {
+            console.log(err); // we can't have the data, for some reason
+            return;
+          }
+          log.content = content;
+          log.selected = true;
+          logs[logIndex] = log;
+          this.setState({ logs: logs });
+        }
+      );
+    } else {
+      log.selected = true;
+      logs[logIndex] = log;
+      this.setState({ logs: logs });
+    }
+  };
   render() {
+    let logTitles;
+    if (this.state.logs.length === 0) {
+      logTitles = <p>retrieving logs ...</p>;
+    } else {
+      logTitles = this.state.logs.map(log => {
+        if (log.selected) {
+          return (
+            <Collapse
+              key={log.datetime}
+              isOpened={true}
+              onClick={this.handleClick}
+              data-id={log.datetime}
+              springConfig={presets.wobbly}
+            >
+              {log.datetime + '_' + log.title} {'[' + log.tags + ']'}
+              <ReactMarkdown source={log.content} />
+            </Collapse>
+          );
+        } else {
+          return (
+            <Collapse
+              key={log.datetime}
+              isOpened={true}
+              onClick={this.handleClick}
+              data-id={log.datetime}
+              springConfig={presets.wobbly}
+            >
+              {log.datetime + '_' + log.title} {'[' + log.tags + ']'}
+            </Collapse>
+          );
+        }
+      });
+    }
+
     return (
       <div className="Logs">
-        <ReactMarkdown source={this.state.logs} />
+        {logTitles}
         <p>work in progress ...</p>
-        <img
-          src="https://i.makeagif.com/media/10-27-2015/_jDzHB.gif"
-          alt="work in progress"
-        />
         <p>
           See code here : {' '}
           <a href="https://github.com/dparkar/blog-react">
diff --git a/src/logs.scss b/src/logs.scss
index e69de29..c97c92d 100644
--- a/src/logs.scss
+++ b/src/logs.scss
@@ -0,0 +1,15 @@
+.ReactCollapse--collapse {
+    max-width: auto;
+    border: 1px solid rgba(3, 169, 244, 0.3);
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.5);
+    margin-left: auto ;
+    margin-right: auto ;
+    margin-top: 1%;
+    margin-left: 1%;
+    margin-right: 1%;
+    cursor: pointer;
+  }
+  .ReactCollapse--collapse:hover {
+      border-color: cyan;
+  }
\ No newline at end of file