diff --git a/client/app/index.jsx b/client/app/index.jsx
index f740758..b702615 100644
--- a/client/app/index.jsx
+++ b/client/app/index.jsx
@@ -7,6 +7,7 @@ import Home from './static/home.jsx';
 import Login from './static/login.jsx';
 import About from './static/about.jsx';
 import Product from './static/product.jsx';
+import Article from './static/article.jsx';
 
 render(
   <Router history={browserHistory}>
@@ -15,7 +16,7 @@ render(
       <Route path="home" component={Home}/>
       <Route path="about" component={About}/>
       <Route path="product" component={Product}/>
-
+      <Route path="article/:articleId" component={Article}/>
     </Route>
   </Router>
 , document.body);
diff --git a/client/app/static/app.jsx b/client/app/static/app.jsx
index 32c79e4..7e4d7c2 100644
--- a/client/app/static/app.jsx
+++ b/client/app/static/app.jsx
@@ -4,9 +4,27 @@ import {Link} from 'react-router';
 const App = React.createClass({
   render () {
     return(<div>
-      <center>
-        <img src="../assets/logo.png" className="primary-logo"></img>
-      </center>
+      <nav className="navbar container">
+        <div className="container-fluid">
+          <div className="navbar-header">
+            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+              <span className="sr-only">Toggle navigation</span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+              <span className="icon-bar"></span>
+            </button>
+            <a className="navbar-brand" href="/s">
+              <img src="../assets/logo.png"></img>
+            </a>
+          </div>
+
+          <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul className="nav navbar-nav navbar-right">
+              <button type="button" className="btn btn-default navbar-btn">Logout</button>
+            </ul>
+          </div>
+        </div>
+      </nav>
         <div className="content container">
             {this.props.children}
           </div>
diff --git a/client/app/static/article.jsx b/client/app/static/article.jsx
new file mode 100644
index 0000000..db31abe
--- /dev/null
+++ b/client/app/static/article.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Error from './error.jsx';
+
+class ViewArticle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {error: "", article: {}};
+  }
+  componentDidMount(){
+    console.log("Component Mounted!");
+    console.log(this.props.params.articleId);
+    var myHeaders = new Headers({
+        "Content-Type": "application/x-www-form-urlencoded",
+        "x-access-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InNoaXZhbUBtYXR0ZXJ3aWtpLmNvbSIsImlkIjoyLCJuYW1lIjoiU2hpdmFtIiwicGFzc3dvcmQiOiIkMmEkMTAkYlJpVlRNSE9Lb2JCbTlGNktIR1RVT3hPMEswWWZvbTRYNHRiYUg4aHZSV3J5bFZRTHNqcUsiLCJhYm91dCI6Im5vIGlkZWEiLCJjcmVhdGVkX2F0IjoiMjAxNi0wOS0yNCAxMTozMjowMCIsInVwZGF0ZWRfYXQiOiIyMDE2LTA5LTI0IDExOjMyOjAwIiwiaWF0IjoxNDgyNTY3NTIxLCJleHAiOjE0ODI2NTM5MjF9.88UVanC8JG-qpDOKW5Bu1Dgk6aJfuu0F28KnxPO6vFM"
+    });
+    var myInit = { method: 'GET',
+               headers: myHeaders,
+               };
+    var that = this;
+    fetch('/api/articles/'+this.props.params.articleId,myInit)
+    .then(function(response) {
+      console.log(response);
+      return response.json();
+    })
+    .then(function(response) {
+      if(response.error.error)
+        that.setState({error: response.error.message})
+      else {
+        that.setState({article: response.data})
+        console.log(that.state.article);
+      }
+      console.log(response);
+    });
+  }
+  render () {
+    if(this.state.error) {
+      return <Error error={this.state.error} />
+    }
+    if(this.state.article) {
+      return(<div>
+        <div className="article-heading">
+            <h1 className="single-article-title">{this.state.article.title}
+            </h1>
+            <div className="single-article-meta">
+              Last updated on {new Date(this.state.article.updated_at).toDateString()}
+            </div>
+          </div>
+            <div className="single-article-body">
+            {this.state.article.body}
+            </div>
+            </div>
+            );
+    }
+    else {
+      return <div>There are no articles</div>;
+    }
+  }
+}
+
+export default ViewArticle;
diff --git a/client/app/static/browse_articles.jsx b/client/app/static/browse_articles.jsx
index 8a3a117..1db66d3 100644
--- a/client/app/static/browse_articles.jsx
+++ b/client/app/static/browse_articles.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Error from './error.jsx';
-
+import {Link, browserHistory} from 'react-router';
 class BrowseArticles extends React.Component {
   constructor(props) {
     super(props);
@@ -10,7 +10,7 @@ class BrowseArticles extends React.Component {
     console.log("Component Mounted!");
     var myHeaders = new Headers({
         "Content-Type": "application/x-www-form-urlencoded",
-        "x-access-token": ""
+        "x-access-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InNoaXZhbUBtYXR0ZXJ3aWtpLmNvbSIsImlkIjoyLCJuYW1lIjoiU2hpdmFtIiwicGFzc3dvcmQiOiIkMmEkMTAkYlJpVlRNSE9Lb2JCbTlGNktIR1RVT3hPMEswWWZvbTRYNHRiYUg4aHZSV3J5bFZRTHNqcUsiLCJhYm91dCI6Im5vIGlkZWEiLCJjcmVhdGVkX2F0IjoiMjAxNi0wOS0yNCAxMTozMjowMCIsInVwZGF0ZWRfYXQiOiIyMDE2LTA5LTI0IDExOjMyOjAwIiwiaWF0IjoxNDgyNTY3NTIxLCJleHAiOjE0ODI2NTM5MjF9.88UVanC8JG-qpDOKW5Bu1Dgk6aJfuu0F28KnxPO6vFM"
     });
     var myInit = { method: 'GET',
                headers: myHeaders,
@@ -44,7 +44,7 @@ class BrowseArticles extends React.Component {
             {this.state.articles.map(article => (
             <div key={article.id} className="article-item">
               <div className="article-item-title">
-                {article.title}
+                <Link to={"/article/"+article.id} >{article.title}</Link>
               </div>
               <div className="article-item-description">
                 {article.body}
diff --git a/client/app/static/browse_topics.jsx b/client/app/static/browse_topics.jsx
index e76e7e6..09731a5 100644
--- a/client/app/static/browse_topics.jsx
+++ b/client/app/static/browse_topics.jsx
@@ -10,7 +10,7 @@ class BrowseTopics extends React.Component {
     console.log("Component Mounted!");
     var myHeaders = new Headers({
         "Content-Type": "application/x-www-form-urlencoded",
-        "x-access-token": ""
+        "x-access-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InNoaXZhbUBtYXR0ZXJ3aWtpLmNvbSIsImlkIjoyLCJuYW1lIjoiU2hpdmFtIiwicGFzc3dvcmQiOiIkMmEkMTAkYlJpVlRNSE9Lb2JCbTlGNktIR1RVT3hPMEswWWZvbTRYNHRiYUg4aHZSV3J5bFZRTHNqcUsiLCJhYm91dCI6Im5vIGlkZWEiLCJjcmVhdGVkX2F0IjoiMjAxNi0wOS0yNCAxMTozMjowMCIsInVwZGF0ZWRfYXQiOiIyMDE2LTA5LTI0IDExOjMyOjAwIiwiaWF0IjoxNDgyNTY3NTIxLCJleHAiOjE0ODI2NTM5MjF9.88UVanC8JG-qpDOKW5Bu1Dgk6aJfuu0F28KnxPO6vFM"
     });
     var myInit = { method: 'GET',
                headers: myHeaders,
@@ -49,6 +49,7 @@ class BrowseTopics extends React.Component {
               <div className="topic-item-description">
                 {topic.description}
               </div>
+              <hr/>
             </div>
 
           ))}</div>
diff --git a/client/app/static/home.jsx b/client/app/static/home.jsx
index 4f5fb2c..1d75cb7 100644
--- a/client/app/static/home.jsx
+++ b/client/app/static/home.jsx
@@ -5,14 +5,11 @@ import BrowseArticles from './browse_articles.jsx';
 const Home = React.createClass({
   render () {
     return(<div className="row container">
-    <div className="page-title">
-      Browse Articles
-      
-    </div>
-      <div className="col-md-4">
+
+      <div className="col-md-3">
           <BrowseTopics />
       </div>
-      <div className="col-md-8">
+      <div className="col-md-9">
           <BrowseArticles />
       </div>
     </div>);
diff --git a/client/assets/bootstrap.css b/client/assets/bootstrap.css
index 349f15b..fe794cf 100644
--- a/client/assets/bootstrap.css
+++ b/client/assets/bootstrap.css
@@ -1100,13 +1100,13 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #337ab7;
+  color: #ff0066;
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #23527c;
-  text-decoration: underline;
+  color: #ff0066;
+  text-decoration: none;
 }
 a:focus {
   outline: 5px auto -webkit-focus-ring-color;
@@ -1151,7 +1151,6 @@ hr {
   margin-bottom: 2em;
   border: 0;
   border-top: 1px solid #ccc;
-  max-width: 500px;
   margin-left: 0px;
 }
 .sr-only {
@@ -3045,25 +3044,25 @@ fieldset[disabled] a.btn {
   pointer-events: none;
 }
 .btn-default {
-  color: #eca100;
+  color: #ff0066;
   background-color: #fff;
-  border: 1px solid #eca100;
+  border: 1px solid #ff0066;
 }
 .btn-default:focus,
 .btn-default.focus {
   color: #fff;
-  background-color: #eca100;
+  background-color: #ff0066;
 }
 
 .btn-default:hover {
   color: #fff;
-  background-color: #eca100;
+  background-color: #ff0066;
 }
 .btn-default:active,
 .btn-default.active,
 .open > .dropdown-toggle.btn-default {
   color: #fff;
-  background-color: #eca100;
+  background-color: #ff0066;
 }
 .btn-default:active:hover,
 .btn-default.active:hover,
@@ -3075,7 +3074,7 @@ fieldset[disabled] a.btn {
 .btn-default.active.focus,
 .open > .dropdown-toggle.btn-default.focus {
   color: #fff;
-  background-color: #eca100;
+  background-color: #ff0066;
 }
 .btn-default:active,
 .btn-default.active,
@@ -3091,7 +3090,7 @@ fieldset[disabled] .btn-default:focus,
 .btn-default.disabled.focus,
 .btn-default[disabled].focus,
 fieldset[disabled] .btn-default.focus {
-  background-color: #eca100;
+  background-color: #ff0066;
 }
 .btn-default .badge {
   color: #fff;
@@ -4134,8 +4133,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar {
   position: relative;
-  min-height: 50px;
+  min-height: 60px;
   margin-bottom: 20px;
+  margin-top: 10px;
   border: 1px solid transparent;
 }
 @media (min-width: 768px) {
@@ -4241,8 +4241,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand {
   float: left;
-  height: 50px;
-  padding: 15px 15px;
+  height: 60px;
+  padding: 10px 10px;
   font-size: 18px;
   line-height: 20px;
 }
@@ -4252,6 +4252,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand > img {
   display: block;
+  height: 100%;
 }
 @media (min-width: 768px) {
   .navbar > .container .navbar-brand,
@@ -4290,8 +4291,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin: 7.5px -15px;
 }
 .navbar-nav > li > a {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 20px;
+  padding-bottom: 20px;
   line-height: 20px;
 }
 @media (max-width: 767px) {
@@ -4326,8 +4327,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     float: left;
   }
   .navbar-nav > li > a {
-    padding-top: 15px;
-    padding-bottom: 15px;
+    padding-top: 20px;
+    padding-bottom: 20px;
   }
 }
 .navbar-form {
@@ -4424,7 +4425,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   border-bottom-left-radius: 0;
 }
 .navbar-btn {
-  margin-top: 8px;
+  margin-top: 12px;
   margin-bottom: 8px;
 }
 .navbar-btn.btn-sm {
diff --git a/client/assets/logo.png b/client/assets/logo.png
index ab5e547..446db6e 100644
Binary files a/client/assets/logo.png and b/client/assets/logo.png differ
diff --git a/client/assets/style.css b/client/assets/style.css
index 2f7294c..b17e139 100644
--- a/client/assets/style.css
+++ b/client/assets/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Montserrat');
+@import url('https://fonts.googleapis.com/css?family=Vollkorn');
 
 .primary-logo {
   height: 4em;
@@ -8,10 +8,11 @@
 body{
   background-color: #ffffff;
   color: #4d4d4d;
+  letter-spacing: 1px;
 }
 
 .content {
-  margin-top: 1em;
+  margin-top: 3em;
 }
 
 .login-box {
@@ -42,16 +43,26 @@ body{
 }
 
 .article-list {
-  background-color: #fff;
-  border: 1px solid #a0a0a0c;
+  border-left: 1px solid #ccc;
+border-right: 1px solid #ccc;
+padding: 0em 2em;
 }
 
 .article-item {
-  margin-bottom: 1.5em;
+  margin-bottom: 2.5em;
 }
 
 .article-item-title {
   font-size: 2em;
+  font-weight: 700;
+}
+
+.article-item-title a {
+  color: #4d4d4d;
+}
+
+.article-item-title a:hover {
+  color: #ff0066;
 }
 
 .article-item-description {
@@ -68,6 +79,24 @@ body{
 .page-title {
   margin-bottom: 2em;
   font-size: 1.5em;
-  border-bottom: 1px solid #eca100;
-  color: #eca100;
+  border-bottom: 1px solid #ff0066;
+  color: #ff0066;
+}
+
+.single-article-title {
+  font-weight: 700;
+  font-size: 4em;
+  margin-bottom: 10px;
+}
+.single-article-meta {
+  color: #a0a0a0;
+}
+
+.article-heading {
+  margin-bottom: 2em;
+}
+
+.single-article-body {
+  font-family: "Vollkorn", sans-serif;
+  font-size: 1.5em;
 }
diff --git a/db/matterwiki.sqlite b/db/matterwiki.sqlite
index ea72287..3342557 100644
Binary files a/db/matterwiki.sqlite and b/db/matterwiki.sqlite differ
diff --git a/package.json b/package.json
index b5ffd2a..0c5ea05 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack -d --watch",
+    "webpack-server": "webpack-dev-server --content-base client/",
     "build": "webpack -p"
   },
   "bin": {
@@ -36,5 +37,8 @@
     "react-router": "^2.6.1",
     "sqlite3": "^3.1.4",
     "webpack": "^1.13.2"
+  },
+  "devDependencies": {
+    "webpack-dev-server": "^1.16.2"
   }
 }