diff --git a/css/base.css b/css/base.css
index ab529b53..ed3d3df6 100644
--- a/css/base.css
+++ b/css/base.css
@@ -2,36 +2,96 @@ html, body {
   margin:0;
   padding:0;
   height:100%;
+  width:100%;
+  overflow-x: hidden;
 }
 
 .fullScreen {
-  width: 100%!important;
-  height: 100%!important;
+  height:100%;
+  width:100%;
 }
 
-.menuContainer {
-  width: 30em;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  height: 100%;
+/* Top-level layout style: sidebar + main view */
+#mountPoint {
+    padding-left: 0;
+    transition: all 0.5s ease;
+    height: 100%;
 }
 
-.messagesContainer {
-  margin-left: 30em;
+#mountPoint.toggled {
+    padding-left: 30em;
 }
 
-.messagesContainer {
-  width: auto;
-  height: 100%;
+#sidebar-wrapper {
+    position: fixed;
+    left: 30em;
+    width: 0;
+    height: 100%;
+    margin-left: -30em;
+    overflow-y: auto;
+    transition: all 0.5s ease;
 }
 
+#mountPoint.toggled #sidebar-wrapper {
+    width: 30em;
+}
+
+#page-content-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: #CCF
+}
+
+#mountPoint.toggled #page-content-wrapper {
+    position: absolute;
+    margin-right: -30em;
+}
+
+.sidebar-nav {
+    position: absolute;
+    top: 0;
+    width: 30em;
+    margin: 0;
+    padding: 0;
+}
+
+@media(min-width:768px) {
+    #mountPoint {
+        padding-left: 30em;
+    }
+
+    #mountPoint.toggled {
+        padding-left: 0;
+    }
+
+    #sidebar-wrapper {
+        width: 30em;
+    }
+
+    #mountPoint.toggled #sidebar-wrapper {
+        width: 0;
+    }
+
+    #page-content-wrapper {
+        position: relative;
+        height: 100%;
+    }
+
+    #mountPoint.toggled #page-content-wrapper {
+        position: relative;
+        margin-right: 0;
+    }
+}
+/* END of top-level layout */
+
 .avatar {
   width: 32pt;
   height: auto;
 }
 
 .navbar {
+  height: 64px;
   margin-bottom: 0.2em;
 }
 
@@ -73,6 +133,47 @@ html, body {
   color: #999;
 }
 
+.fullHeight {
+  height: 100%;
+  overflow: hidden;
+}
+
+.fullViewPort {
+  height: 98vh;
+  overflow-y: hidden;
+}
+
+.col-lg-12 {
+  padding: 0;
+  margin: 0;
+}
+
+#chatTitle {
+  z-index: 2;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 64px;
+  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+#messagesPanel {
+  overflow-y: scroll;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+#messagesView {
+  padding-top: 70px;
+}
+
+#sendMessagePanel {
+  position: absolute;
+  bottom: 0;
+  box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.15);
+}
+
 .chatBox {
   list-style: none;
   padding: 1.5em 0 1.5em;
@@ -82,6 +183,7 @@ html, body {
 .chatBox > li {
   margin-bottom: 1em;
   position: relative;
+  x-white-space: pre;
 }
 
 .chatBox > li:before,
@@ -160,8 +262,3 @@ html, body {
 .chatBox-body > p + p {
   margin-top: 0.5em;
 }
-
-footer {
-  position: fixed;
-  bottom: 0;
-}
diff --git a/index.html b/index.html
index 911bd3a3..6ceb134c 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
   </head>
   </head>
   <body>
-    <div id="mountPoint" class="fullScreen"></div>
+    <div id="mountPoint"></div>
     <script type="text/babel">
     function shortDateFormat(then) {
 	    var now = new Date();
@@ -144,13 +144,19 @@ eleifend fringilla urna euismod tristique. Nullam at magna vel mauris rutrum fin
 Nulla vitae est aliquam, egestas nunc dapibus, dapibus risus.\
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
 Nullam vitae condimentum lectus, quis maximus elit.\
-<br />\
+\
 Nunc ac nisi risus. Integer eget augue vel risus commodo blandit. Nulla faucibus convallis neque sed eleifend. Vestibulum\
 dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac habitasse platea dictumst.",
         timestamp: new Date(2016, 0, 1, 2, 3, 4, 567),
         response: true
       },
-      {id: 3, content: "OK!", timestamp: new Date(2016, 0, 2, 15, 16, 17, 567), response: false}
+      {id: 3, content: "Ooga chaka ooga ooga!", timestamp: new Date(2016, 0, 2, 16, 17, 18, 567), response: false},
+      {id: 4, content: "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. \
+      Nullam vitae condimentum lectus, quis maximus elit.", timestamp: new Date(2016, 0, 3, 1, 2, 3, 567), response: true},
+      {id: 5, content: "Integer sodales accumsan sem, ut malesuada velit egestas vel. Aenean consequat consectetur justo eget venenatis.",
+        timestamp: new Date(2016, 0, 3, 4, 5, 6, 567), response: true},
+      {id: 6, content: "No way.", timestamp: new Date(2016, 0, 3, 15, 16, 17, 567), response: false},
+      {id: 7, content: "OK!", timestamp: new Date(2016, 0, 3, 18, 19, 20, 567), response: true}
     ];
 
     var Contact = React.createClass({
@@ -320,27 +326,34 @@ dignissim a diam a hendrerit. Nulla vel est ut quam rhoncus pulvinar. In hac hab
       },
       render: function() {
         return (
-          <div className="container-fluid fullScreen">
-          <div className="row fullScreen">
-            <div className="menuContainer">
+          <div className="fullScreen">
+
+          <div id="sidebar-wrapper">
+            <div className="sidebar-nav">
               {this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
             </div>
-            <div className="col-md-12 messagesContainer">
-              <div className="row fullScreen">
-              <div className="panel panel-default fullScreen">
-                <div className="panel-heading">
-                  <h3 className="panel-title">{this.state.chatTitle}</h3>
+          </div>
+
+          <div id="page-content-wrapper">
+            <div className="container-fluid fullHeight">
+              <div className="row fullHeight">
+                <div className="col-lg-12 fullHeight">
+                  <div className="panel panel-default fullViewPort" id="messagesPanel">
+                    <div className="panel-heading" id="chatTitle">
+                      <h3 className="panel-title">{this.state.chatTitle}</h3>
+                    </div>
+                    <div className="panel-body" id="messagesView">
+                      <MessagesView />
+                    </div>
+                    <div className="panel-footer" id="sendMessagePanel">
+                      <Message.Send />
+                    </div>
+                  </div>
                 </div>
-                <div className="panel-body">
-                  <MessagesView />
-                </div>
-                <div className="panel-footer">
-                  <Message.Send />
-                </div>
-              </div>
               </div>
             </div>
           </div>
+
           </div>
         );
       }