diff --git a/realms/static/css/style.css b/realms/static/css/style.css
index ea37b84..73478f7 100644
--- a/realms/static/css/style.css
+++ b/realms/static/css/style.css
@@ -10,6 +10,11 @@
   background: #242628;
 }
 
+.navbar-collapse.in .nav, .navbar-collapse.in, .navbar-collapse.collapsing {
+  z-index: 1000;
+  position: relative;
+}
+
 .navbar-toggle {
   margin-top: 8px;
   margin-bottom: 8px;
@@ -28,6 +33,10 @@
   color: #FFF !important;
 }
 
+.navbar .fa {
+  margin-right: 5px;
+}
+
 .navbar .nav li {
   font-size: 1em;
   position: relative;
@@ -59,6 +68,7 @@
   margin:0;
 }
 
+/*
 #preview {
   overflow: auto;
   position: absolute;
@@ -96,7 +106,7 @@
   font-size: 1.1em;
   line-height: 1.3em;
 }
-
+*/
 .ace_gutter-cell {
   font-size: 1em;
   line-height: 1em;
@@ -136,8 +146,6 @@
   color: #aaa9a2;
   background-color: #000;
   border: 1px solid #000;
-  /* background-image: -webkit-linear-gradient(top, #fff 0%,#fff 25%,rgba(255,255,255,0.9) 100%); */
-  /* background-image: linear-gradient(to bottom,#fff 0%,#fff 25%,rgba(255,255,255,0.9) 100%); */
   font-size: 10px;
 }
 
@@ -185,4 +193,130 @@ a.label {
 .diff {
   font-size: 14px !important;
   margin-bottom: 10px;
-}
\ No newline at end of file
+}
+
+.entry-markdown.active {
+  z-index: 2;
+}
+
+.entry-markdown, .entry-preview {
+  width: 50%;
+  padding: 15px;
+  position: absolute;
+  bottom: 0;
+  top: 40px;
+  background: #FFF;
+  box-shadow: rgba(0,0,0,0.05) 0 1px 5px;
+}
+
+.entry-markdown {
+  left: 0;
+  border-right: #edece4 2px solid;
+}
+
+.entry-preview {
+  right: 0;
+  border-left: #edece4 2px solid;
+}
+
+.entry-preview-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 40px 10px 10px 10px;
+  overflow: auto;
+  //word-break: break-word;
+  cursor: default;
+}
+
+.ace_editor {
+  height: auto;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  font-family: Inconsolata, monospace !important;
+  font-size: 1.4em !important;
+  line-height: 1.3em;
+}
+
+.ace_content {
+  padding: 40px 3px;
+}
+
+.floatingheader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  height: 40px;
+  padding: 8px 15px 12px;
+  text-transform: uppercase;
+  color: #333;
+  background-color: #eee;
+}
+
+@media (max-width:1000px) {
+  .ace_content {
+    padding: 3px;
+  }
+
+  .entry-markdown, .entry-preview {
+    top: 80px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    border: none;
+    min-height: 380px;
+    z-index: 1;
+  }
+
+  .entry-markdown.active .entry-markdown-content {
+    display: block;
+  }
+  .entry-markdown-content {
+    display: none;
+  }
+
+  .entry-preview.active .entry-preview-content {
+    display: block;
+  }
+
+  .entry-preview-content {
+    display: none;
+    padding: 10px;
+  }
+
+  .entry-markdown .floatingheader, .entry-preview .floatingheader {
+    cursor: pointer;
+    width: 50%;
+    border-right: #fff 2px solid;
+    color: #333;
+    font-weight: normal;
+    background: #EEE;
+    position: absolute;
+    top: -40px;
+    left: 0;
+    box-shadow: rgba(0,0,0,0.1) 0 -2px 3px inset;
+  }
+
+  .entry-preview .floatingheader {
+    right: 0;
+    left: auto;
+    border-right: none;
+    border-left: #fff 2px solid;
+  }
+
+  .entry-markdown.active header, .entry-preview.active header {
+    cursor: auto;
+    box-shadow: none;
+    background-color: #3498db;
+    color: #fff;
+  }
+
+}
+
diff --git a/realms/static/js/editor.js b/realms/static/js/editor.js
index 9185ff7..9015209 100644
--- a/realms/static/js/editor.js
+++ b/realms/static/js/editor.js
@@ -12,6 +12,21 @@ $(function () {
     , $wordcounter = $('#wordcounter')
     , $pagename = $("#page-name");
 
+  var $entry_markdown_header = $("#entry-markdown-header");
+  var $entry_preview_header = $("#entry-preview-header");
+
+  // Tabs
+  $entry_markdown_header.click(function(){
+    $("section.entry-markdown").addClass('active');
+    $("section.entry-preview").removeClass('active');
+  });
+
+  $entry_preview_header.click(function(){
+    $("section.entry-preview").addClass('active');
+    $("section.entry-markdown").removeClass('active');
+  });
+
+
   var editor
     , autoInterval
     , profile =
diff --git a/realms/templates/layout.html b/realms/templates/layout.html
index d518d3e..586bf02 100644
--- a/realms/templates/layout.html
+++ b/realms/templates/layout.html
@@ -6,7 +6,7 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <title>Realms</title>
+    <title>{{ config.SITE_TITLE }}</title>
     <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
 
     {% for bundle in g.assets['css'] %}
@@ -38,10 +38,10 @@
         </div>
         <div class="navbar-collapse collapse navbar-inverse-collapse">
           <ul class="nav navbar-nav">
-            <li><a href="{{ url_for('wiki.create') }}">New</a></li>
+            <li><a href="{{ url_for('wiki.create') }}"><i class="fa fa-plus"></i> New</a></li>
             {% if name %}
-              <li><a href="{{ url_for('wiki.edit', name=name) }}">Edit</a></li>
-              <li><a href="{{ url_for('wiki.history', name=name) }}">History</a></li>
+              <li><a href="{{ url_for('wiki.edit', name=name) }}"><i class="fa fa-pencil"></i> Edit</a></li>
+              <li><a href="{{ url_for('wiki.history', name=name) }}"><i class="fa fa-clock-o"></i> History</a></li>
             {% endif %}
           </ul>
           <ul class="nav navbar-nav navbar-right">
@@ -54,14 +54,14 @@
                 </span>
                 </a>
                 <ul class="dropdown-menu">
-                    <li><a href="{{ url_for('auth.settings') }}">Settings</a></li>
-                    <li><a href="{{ url_for('auth.logout') }}">Logout</a></li>
+                    <li><a href="{{ url_for('auth.settings') }}"><i class="fa fa-gear"></i> Settings</a></li>
+                    <li><a href="{{ url_for('auth.logout') }}"><i class="fa fa-power-off"></i> Logout</a></li>
                 </ul>
                 </li>
             {% else %}
               <li><a href="{{ url_for('auth.login') }}"><i class="fa fa-user"></i> &nbsp;Login</a></li>
               {% if config.REGISTRATION_ENABLED %}
-                <li><a href="{{ url_for('auth.register') }}"><i class="fa fa-pencil"></i> &nbsp;Register</a></li>
+                <li><a href="{{ url_for('auth.register') }}"><i class="fa fa-users"></i> &nbsp;Register</a></li>
               {% endif %}
             {% endif %}
           </ul>
diff --git a/realms/templates/wiki/edit.html b/realms/templates/wiki/edit.html
index c2d5e95..01f9556 100644
--- a/realms/templates/wiki/edit.html
+++ b/realms/templates/wiki/edit.html
@@ -38,7 +38,6 @@
         MDR.sanitize = false;
         $("#start-togetherjs").removeClass('btn-danger').html('Collaborate').prop('disabled', false);
     };
-
 </script>
 <script src="https://togetherjs.com/togetherjs-min.js"></script>
 {% endblock %}
@@ -46,22 +45,27 @@
 {% block body %}
   <div id="app-wrap">
     <div id="app-controls" class="row">
-      <div class="col-xs-3">
+      <div class="col-xs-4 col-md-3">
         <input id="page-name" type="text" class="form-control input-sm" name="name" placeholder="Name" value="{{- name -}}" />
       </div>
-      <div class="col-xs-3">
+      <div class="col-xs-4 col-md-3">
         <input id="page-message" type="text" class="form-control input-sm" name="page-message" placeholder="Comment" value="" />
       </div>
 
-      <div class="col-xs-6">
+      <div class="col-md-6  col-xs-4">
         <div class="pull-right">
 
-          <button class="btn btn-success btn-sm" id="start-togetherjs" type="button"
+          <button class="btn btn-default btn-sm" id="start-togetherjs" type="button"
                   onclick="TogetherJS(this); return false">
-            Collaborate
+
+            <i class="fa fa-comments-o visible-xs"></i>
+            <span class="hidden-xs">Collaborate</span>
           </button>
 
-          <a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">Theme <b class="caret"></b></a>
+          <a href="#" id="drop6" role="button" class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown">
+            <i class="fa fa-paint-brush visible-xs"></i>
+            <span class="hidden-xs">Theme <i class="fa fa-caret-down"></i></span>
+          </a>
           <ul id="theme-list" class="dropdown-menu" role="menu" aria-labelledby="drop6">
             <li><a tabindex="-1" href="#" data-value="ace/theme/chrome" >Chrome</a></li>
             <li><a tabindex="-1" href="#" data-value="ace/theme/clouds" >Clouds</a></li>
@@ -98,14 +102,25 @@
       </div>
     </div>
 
-    <div class="row" style="position: relative; height: 100%; margin-left: 15px; margin-right: 15px;">
-      <div class="col-xs-6" style="position: absolute; bottom: 20px; top: 10px; left:0;border-right: 2px solid transparent;">
-        <div id="editor">{{ content }}</div>
-      </div>
-      <div class="col-xs-6" style="position: absolute; bottom: 20px; top: 10px; right:0; border-left: 2px solid transparent;">
-        <div id="preview"></div>
-      </div>
-    </div>
+  <section class="entry-markdown active">
+    <header class="floatingheader" id="entry-markdown-header">
+        <small>Markdown</small>
+        <a class="markdown-help" href=""><span class="hidden">What is Markdown?</span></a>
+    </header>
+    <section id="entry-markdown-content" class="entry-markdown-content">
+      <div id="editor" class="ace-editor">{{ content }}</div>
+    </section>
+  </section>
+
+  <section class="entry-preview">
+    <header class="floatingheader" id="entry-preview-header">
+        <small>Preview</small>
+    </header>
+    <section class="entry-preview-content">
+      <div id="preview"></div>
+     </section>
+  </section>
+
   </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/setup.py b/setup.py
index eade28f..2c0f542 100644
--- a/setup.py
+++ b/setup.py
@@ -8,7 +8,7 @@ with open('README.md') as f:
 with open('requirements.txt') as f:
     required = f.read().splitlines()
 
-VERSION = '0.1.10'
+VERSION = '0.2.0'
 
 CLASSIFIERS = [
     'Intended Audience :: Developers',