diff --git a/Gulpfile.js b/Gulpfile.js
index 597b426f..9c6dcc3a 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -37,21 +37,21 @@ gulp.task('vendor', function () {
 })
 
 gulp.task('styl', function () {
-  return gulp.src('src/**/app.styl')
+  return gulp.src('src/browser/main/styles/app.styl')
     .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
     .pipe(styl())
     .pipe(autoprefixer())
-    .pipe(gulp.dest('src'))
+    .pipe(gulp.dest('src/browser/main/styles/'))
     .pipe(livereload())
     .pipe(notify('Stylus!!'))
 })
 
 gulp.task('bs', function () {
-  return gulp.src('src/**/bootstrap.styl')
+  return gulp.src('src/browser/shared/styles/bootstrap.styl')
     .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
     .pipe(styl())
     .pipe(autoprefixer())
-    .pipe(gulp.dest('src'))
+    .pipe(gulp.dest('src/browser/shared/styles'))
     .pipe(notify('Bootstrap compiled!!'))
     .pipe(livereload())
 })
@@ -75,7 +75,8 @@ gulp.task('watch-main', function () {
   gulp.watch(
     ['src/browser/main/index.inject.html', 'src/browser/main/**/*.js', 'src/browser/main/**/*.css', 'src/browser/shared/**/*.js', 'src/browser/shared/**/*.css'], ['inject-main'])
 
-  gulp.watch('src/**/*.styl', ['styl'])
+  gulp.watch('src/browser/main/styles/**/*.styl', ['styl'])
+  gulp.watch('src/browser/shared/styles/**/*.styl', ['bs'])
   livereload.listen()
 })
 gulp.task('inject-popup', function () {
diff --git a/src/browser/main/controllers/modals/ExpandRecipeModalController.js b/src/browser/main/controllers/modals/ExpandRecipeModalController.js
new file mode 100644
index 00000000..9b59309f
--- /dev/null
+++ b/src/browser/main/controllers/modals/ExpandRecipeModalController.js
@@ -0,0 +1,23 @@
+/* global angular */
+angular.module('codexen')
+  .controller('ExpandRecipeModalController', function (recipe, $modalInstance, $scope, Modal) {
+    var vm = this
+    console.log(recipe)
+
+    vm.recipe = recipe
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+
+    vm.insert = function (type) {
+      $scope.$broadcast('insertRequested', type)
+    }
+
+    vm.insertSnippet = function () {
+      Modal.selectSnippet()
+        .then(function (snippet) {
+          $scope.$broadcast('insertSnippetRequested', snippet)
+        })
+    }
+  })
diff --git a/src/browser/main/controllers/modals/NewRecipeModalController.js b/src/browser/main/controllers/modals/NewRecipeModalController.js
index 5b1d072e..e1647964 100644
--- a/src/browser/main/controllers/modals/NewRecipeModalController.js
+++ b/src/browser/main/controllers/modals/NewRecipeModalController.js
@@ -3,13 +3,13 @@ angular.module('codexen')
   .controller('NewRecipeModalController', function (Recipe, Tag, $modalInstance) {
     var vm = this
 
-    vm.content = ''
+    vm.recipe = {}
 
     vm.submit = function () {
       var params = {
-        title: vm.title,
-        content: vm.content,
-        Tags: angular.isArray(vm.Tags) ? vm.Tags.map(function (tag) { return tag.name }) : []
+        title: vm.recipe.title,
+        content: vm.recipe.content,
+        Tags: angular.isArray(vm.recipe.Tags) ? vm.recipe.Tags.map(function (tag) { return tag.name }) : []
       }
 
       Recipe.create(params)
diff --git a/src/browser/main/controllers/modals/SelectSnippetModalController.js b/src/browser/main/controllers/modals/SelectSnippetModalController.js
new file mode 100644
index 00000000..be9b78e7
--- /dev/null
+++ b/src/browser/main/controllers/modals/SelectSnippetModalController.js
@@ -0,0 +1,18 @@
+/* global angular */
+angular.module('codexen')
+  .controller('SelectSnippetModalController', function (Snippet, $modalInstance) {
+    var vm = this
+
+    vm.select = function (snippet) {
+      $modalInstance.close(snippet)
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss('cancel')
+    }
+
+    Snippet.findMine()
+      .success(function (snippets) {
+        vm.snippets = snippets
+      })
+  })
diff --git a/src/browser/main/directives/btn-delete-snippet.js b/src/browser/main/directives/btn-delete-snippet.js
index 6ae530f6..83e2b0af 100644
--- a/src/browser/main/directives/btn-delete-snippet.js
+++ b/src/browser/main/directives/btn-delete-snippet.js
@@ -8,8 +8,8 @@ angular.module('codexen')
       link: function (scope, el) {
         el.on('click', function () {
           Modal.deleteSnippet(scope.snippet)
-            .result.then(function (snippet) {
-              $rootScope.$broadcast('snippetDeleted', snippet)
+            .then(function (snippet) {
+              console.log('deleted', snippet)
             }, function () {
               console.log('delete snippet modal dismissed')
             })
diff --git a/src/browser/main/directives/btn-expand-recipe.js b/src/browser/main/directives/btn-expand-recipe.js
new file mode 100644
index 00000000..41f3e2a0
--- /dev/null
+++ b/src/browser/main/directives/btn-expand-recipe.js
@@ -0,0 +1,15 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnExpandRecipe', function (Modal) {
+    return {
+      restrict: 'A',
+      scope: {
+        recipe: '=btnExpandRecipe'
+      },
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.expandRecipe(scope.recipe)
+        })
+      }
+    }
+  })
diff --git a/src/browser/main/services/Marked.js b/src/browser/main/filters/marked.js
similarity index 81%
rename from src/browser/main/services/Marked.js
rename to src/browser/main/filters/marked.js
index 7f3c6422..40b2c311 100644
--- a/src/browser/main/services/Marked.js
+++ b/src/browser/main/filters/marked.js
@@ -12,7 +12,8 @@ angular.module('codexen')
       smartypants: false
     })
 
-    return function(input) {
+    return function (input) {
+      if (!angular.isString(input)) input = ''
       return marked(input)
     }
   })
diff --git a/src/browser/main/index.html b/src/browser/main/index.html
index 66debe59..f968fea2 100644
--- a/src/browser/main/index.html
+++ b/src/browser/main/index.html
@@ -38,10 +38,12 @@
     <!-- inject:js -->
     <script src="app.js"></script>
     <script src="config/states.js"></script>
+    <script src="controllers/AppController.js"></script>
     <script src="directives/btn-delete-recipe.js"></script>
     <script src="directives/btn-delete-snippet.js"></script>
     <script src="directives/btn-edit-recipe.js"></script>
     <script src="directives/btn-edit-snippet.js"></script>
+    <script src="directives/btn-expand-recipe.js"></script>
     <script src="directives/btn-new-recipe.js"></script>
     <script src="directives/btn-new-snippet.js"></script>
     <script src="directives/recipe-item.js"></script>
@@ -49,22 +51,23 @@
     <script src="directives/snippet-item.js"></script>
     <script src="directives/tag-item.js"></script>
     <script src="directives/tag-list.js"></script>
-    <script src="controllers/AppController.js"></script>
-    <script src="filters/from-now.js"></script>
-    <script src="filters/search-snippets.js"></script>
-    <script src="services/Marked.js"></script>
     <script src="services/Modal.js"></script>
     <script src="services/Recipe.js"></script>
     <script src="services/Settings.js"></script>
     <script src="services/Tag.js"></script>
     <script src="services/User.js"></script>
+    <script src="filters/from-now.js"></script>
+    <script src="filters/marked.js"></script>
+    <script src="filters/search-snippets.js"></script>
     <script src="controllers/directives/SideNavController.js"></script>
     <script src="controllers/modals/DeleteRecipeModalController.js"></script>
     <script src="controllers/modals/DeleteSnippetModalController.js"></script>
     <script src="controllers/modals/EditRecipeModalController.js"></script>
     <script src="controllers/modals/EditSnippetModalController.js"></script>
+    <script src="controllers/modals/ExpandRecipeModalController.js"></script>
     <script src="controllers/modals/NewRecipeModalController.js"></script>
     <script src="controllers/modals/NewSnippetModalController.js"></script>
+    <script src="controllers/modals/SelectSnippetModalController.js"></script>
     <script src="controllers/states/AuthRegisterController.js"></script>
     <script src="controllers/states/AuthSignInController.js"></script>
     <script src="controllers/states/HomeController.js"></script>
diff --git a/src/browser/main/services/Modal.js b/src/browser/main/services/Modal.js
index c4eb1dc3..00252c64 100644
--- a/src/browser/main/services/Modal.js
+++ b/src/browser/main/services/Modal.js
@@ -25,6 +25,19 @@ angular.module('codexen')
       })
     }
 
+    var expandRecipe = function (recipe) {
+      return $modal.open({
+        size: 'lg',
+        resolve: {
+          recipe: function () {
+            return recipe
+          }
+        },
+        templateUrl: 'tpls/modals/expand-recipe-modal.html',
+        controller: 'ExpandRecipeModalController as vm'
+      })
+    }
+
     var deleteRecipe = function (recipe) {
       return $modal.open({
         resolve: {
@@ -77,12 +90,21 @@ angular.module('codexen')
       })
     }
 
+    var selectSnippet = function (snippet) {
+      return $modal.open({
+        templateUrl: 'tpls/modals/select-snippet-modal.html',
+        controller: 'SelectSnippetModalController as vm'
+      }).result
+    }
+
     return {
       newRecipe: newRecipe,
       editRecipe: editRecipe,
       deleteRecipe: deleteRecipe,
+      expandRecipe: expandRecipe,
       newSnippet: newSnippet,
       editSnippet: editSnippet,
-      deleteSnippet: deleteSnippet
+      deleteSnippet: deleteSnippet,
+      selectSnippet: selectSnippet
     }
   })
diff --git a/src/browser/main/styles/app.css b/src/browser/main/styles/app.css
index 71f3d459..9fdebb3a 100644
--- a/src/browser/main/styles/app.css
+++ b/src/browser/main/styles/app.css
@@ -1,6 +1,31 @@
+.expand-recipe-modal .expand-editor .editor-pane {
+  height: 500px;
+}
+.expand-recipe-modal .expand-editor .editor-pane .ace_editor {
+  height: 500px;
+}
+.expand-recipe-modal .expand-editor .preview-pane {
+  height: 500px;
+  overflow-y: auto;
+}
 .new-snippet-modal .ace_editor {
   height: 200px;
 }
+.select-snippet-modal .snippet-list {
+  list-style: none;
+  padding: 0;
+}
+.select-snippet-modal .snippet-list li {
+  padding: 10px;
+  border: solid 1px #001a20;
+  background-color: #003b4a;
+  border-radius: 5px;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+.select-snippet-modal .snippet-list li:hover {
+  background-color: #004b5f;
+}
 #side-view .nav-control-group {
   margin: auto 10px;
 }
@@ -402,3 +427,102 @@ body > .ui-select-bootstrap.open {
   overflow-y: auto;
   background-color: $bgDarker;
 }
+.marked h1,
+.marked h2,
+.marked h3,
+.marked h4,
+.marked h5 {
+  margin: 0.75em 0;
+}
+.marked h1:nth-child(1),
+.marked h2:nth-child(1),
+.marked h3:nth-child(1),
+.marked h4:nth-child(1),
+.marked h5:nth-child(1) {
+  margin-top: 0;
+}
+.marked code {
+  background-color: #003644;
+  color: #fff;
+  border: 1px solid #001a20;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+  padding: 5px;
+  line-height: 200%;
+}
+.marked pre {
+  margin-bottom: 10px;
+  background-color: #003644;
+  color: #fff;
+  border: 1px solid #001a20;
+  border-radius: 5px;
+  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+  padding: 5px;
+}
+.marked pre >code {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+  line-height: inherit;
+}
+.marked blockquote {
+  font-size: 1em;
+  border-left: 5px solid #6494ed;
+}
+.marked a {
+  text-decoration: underline;
+  color: #6494ed;
+}
+.marked table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $line-height-computed;
+  border: 1px solid #001a20;
+  margin-bottom: 10px;
+}
+.marked table > thead > tr > th,
+.marked table > tbody > tr > th,
+.marked table > tfoot > tr > th,
+.marked table > thead > tr > td,
+.marked table > tbody > tr > td,
+.marked table > tfoot > tr > td {
+  padding: 10px;
+  line-height: $line-height-base;
+  vertical-align: top;
+  border-top: 1px solid #001a20;
+  border-right: 1px solid #001a20;
+}
+.marked table > thead > tr > th:nth-last-child(1),
+.marked table > tbody > tr > th:nth-last-child(1),
+.marked table > tfoot > tr > th:nth-last-child(1),
+.marked table > thead > tr > td:nth-last-child(1),
+.marked table > tbody > tr > td:nth-last-child(1),
+.marked table > tfoot > tr > td:nth-last-child(1) {
+  border-right: none;
+}
+.marked table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #001a20;
+}
+.marked table > caption + thead,
+.marked table > colgroup + thead,
+.marked table > thead:first-child {
+  background-color: #004b5f;
+}
+.marked table > caption + thead > tr:first-child > th,
+.marked table > colgroup + thead > tr:first-child > th,
+.marked table > thead:first-child > tr:first-child > th,
+.marked table > caption + thead > tr:first-child > td,
+.marked table > colgroup + thead > tr:first-child > td,
+.marked table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.marked table > tbody >tr:nth-child(odd) {
+  background-color: #002b36;
+}
+.marked table > tbody >tr:nth-child(even) {
+  background-color: #003644;
+}
diff --git a/src/browser/main/styles/app.styl b/src/browser/main/styles/app.styl
index 2091d773..09f953ca 100644
--- a/src/browser/main/styles/app.styl
+++ b/src/browser/main/styles/app.styl
@@ -25,3 +25,77 @@
   overflow-x: hidden
   overflow-y: auto
   background-color $bgDarker
+
+.marked
+  h1, h2, h3, h4, h5
+    margin 0.75em 0
+    &:nth-child(1)
+      margin-top 0
+  code
+    background-color lighten($baseBackgroundColor, 3%)
+    color $textColorSelected
+    border 1px solid $baseBorderColor
+    border-radius 5px
+    box-shadow 0 1px 1px rgba(0, 0, 0, .05)
+    padding 5px
+    line-height 200%
+  pre
+    margin-bottom 10px
+    background-color lighten($baseBackgroundColor, 3%)
+    color $textColorSelected
+    border 1px solid $baseBorderColor
+    border-radius 5px
+    box-shadow 0 1px 1px rgba(0, 0, 0, .05)
+    padding 5px
+    >code
+      background-color transparent
+      color inherit
+      border none
+      border-radius 0
+      box-shadow none
+      padding 0
+      line-height inherit
+  blockquote
+    font-size 1em
+    border-left 5px solid $textColorInfo
+  a
+    text-decoration underline
+    color $textColorInfo
+  table
+    width 100%
+    max-width 100%
+    margin-bottom $line-height-computed
+    border 1px solid $table-border-color
+    margin-bottom 10px
+
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot
+      > tr
+        > th,
+        > td
+          padding 10px
+          line-height $line-height-base
+          vertical-align top
+          border-top 1px solid $table-border-color
+          border-right 1px solid $table-border-color
+          &:nth-last-child(1)
+            border-right none
+    > thead > tr > th
+      vertical-align bottom
+      border-bottom 2px solid $table-border-color
+    > caption + thead,
+    > colgroup + thead,
+    > thead:first-child
+      background-color $backgroundColorSelected
+      > tr:first-child
+        > th,
+        > td
+          border-top 0
+    > tbody
+      >tr
+        &:nth-child(odd)
+          background-color $baseBackgroundColor
+        &:nth-child(even)
+          background-color lighten($baseBackgroundColor, 3%)
diff --git a/src/browser/main/styles/modals/expand-recipe-modal.styl b/src/browser/main/styles/modals/expand-recipe-modal.styl
new file mode 100644
index 00000000..922114c4
--- /dev/null
+++ b/src/browser/main/styles/modals/expand-recipe-modal.styl
@@ -0,0 +1,9 @@
+.expand-recipe-modal
+  .expand-editor
+    .editor-pane
+      height 500px
+      .ace_editor
+        height 500px
+    .preview-pane
+      height 500px
+      overflow-y auto
diff --git a/src/browser/main/styles/modals/select-snippet-modal.styl b/src/browser/main/styles/modals/select-snippet-modal.styl
new file mode 100644
index 00000000..d127539b
--- /dev/null
+++ b/src/browser/main/styles/modals/select-snippet-modal.styl
@@ -0,0 +1,13 @@
+.select-snippet-modal
+  .snippet-list
+    list-style none
+    padding 0
+    li
+      padding 10px
+      border solid 1px $baseBorderColor
+      background-color $backgroundColorHighlight
+      border-radius 5px
+      margin-bottom 5px
+      cursor pointer
+      &:hover
+        background-color $backgroundColorSelected
diff --git a/src/browser/main/tpls/directives/snippet-view.html b/src/browser/main/tpls/directives/snippet-view.html
new file mode 100644
index 00000000..c8cfb83b
--- /dev/null
+++ b/src/browser/main/tpls/directives/snippet-view.html
@@ -0,0 +1,14 @@
+<div
+  ui-ace="{
+    showGutter: false,
+    useWrapMode : true,
+    mode:snippet.mode.toLowerCase(),
+    maxLines: -1,
+    theme:'solarized_dark',
+    rendererOptions: {
+        maxLinks: Infinity
+      }
+    }"
+  readonly
+  ng-model="snippet.content"
+  ></div>
diff --git a/src/browser/main/tpls/modals/edit-recipe-modal.html b/src/browser/main/tpls/modals/edit-recipe-modal.html
index b6020748..5fc51c8b 100644
--- a/src/browser/main/tpls/modals/edit-recipe-modal.html
+++ b/src/browser/main/tpls/modals/edit-recipe-modal.html
@@ -14,12 +14,6 @@
         <i class="glyphicon glyphicon-bell"></i> Markdown
       </tab-heading>
 
-      <div class="form-group">
-        <span>
-          <button class="btn btn-default">Add Snippet</button>
-        </span>
-      </div>
-
       <div class="form-group">
         <div
           ui-ace="{
@@ -37,12 +31,17 @@
       </tab-heading>
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.recipe.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </tab>
   </tabset>
 
+  <div class="form-group">
+      <button ng-click="vm.insertSnippet()" class="btn btn-default">Add Snippet</button>
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
     <div class="form-group">
       <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.recipe.Tags" theme="bootstrap">
         <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
diff --git a/src/browser/main/tpls/modals/expand-recipe-modal.html b/src/browser/main/tpls/modals/expand-recipe-modal.html
new file mode 100644
index 00000000..e2d64a31
--- /dev/null
+++ b/src/browser/main/tpls/modals/expand-recipe-modal.html
@@ -0,0 +1,37 @@
+<div class="expand-recipe-modal">
+  <div class="modal-header">
+    <button ng-click="vm.insert('h1')" class="btn btn-default"><i class="fa fa-header fa-fw"></i></button>
+    <button ng-click="vm.insert('ul')" class="btn btn-default"><i class="fa fa-list-ul fa-fw"></i></button>
+    <button ng-click="vm.insert('ol')" class="btn btn-default"><i class="fa fa-list-ol fa-fw"></i></button>
+    <button ng-click="vm.insert('a')" class="btn btn-default"><i class="fa fa-link fa-fw"></i></button>
+    <button ng-click="vm.insert('table')" class="btn btn-default"><i class="fa fa-table fa-fw"></i></button>
+    <button ng-click="vm.insertSnippet()" class="btn btn-default">Insert Snippet</button>
+  </div>
+  <div class="modal-body">
+    <div class="container-fluid expand-editor">
+      <div class="row">
+        <div class="col-xs-6 editor-pane">
+          <div
+            ui-ace="{
+              mode: 'Markdown',
+              theme: 'solarized_dark',
+              useWrapMode: true
+            }"
+            ng-model="vm.recipe.content"
+          ></div>
+        </div>
+
+        <div class="col-xs-6">
+          <div class="panel panel-default preview-pane">
+            <div class="panel-body">
+              <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" ng-click="vm.cancel()">Close</button>
+  </div>
+</div>
diff --git a/src/browser/main/tpls/modals/new-recipe-modal.html b/src/browser/main/tpls/modals/new-recipe-modal.html
index e10c12a0..5fc51c8b 100644
--- a/src/browser/main/tpls/modals/new-recipe-modal.html
+++ b/src/browser/main/tpls/modals/new-recipe-modal.html
@@ -5,7 +5,7 @@
 
   <div class="modal-body">
     <div class="form-group">
-      <input ng-model="vm.title" type="text" class="form-control" placeholder="Title">
+      <input ng-model="vm.recipe.title" type="text" class="form-control" placeholder="Title">
     </div>
 
   <tabset>
@@ -14,12 +14,6 @@
         <i class="glyphicon glyphicon-bell"></i> Markdown
       </tab-heading>
 
-      <div class="form-group">
-        <span>
-          <button class="btn btn-default">Add Snippet</button>
-        </span>
-      </div>
-
       <div class="form-group">
         <div
           ui-ace="{
@@ -27,7 +21,7 @@
             theme: 'solarized_dark',
             useWrapMode: true
           }"
-          ng-model="vm.content"
+          ng-model="vm.recipe.content"
         ></div>
       </div>
     </tab>
@@ -37,14 +31,19 @@
       </tab-heading>
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </tab>
   </tabset>
 
+  <div class="form-group">
+      <button ng-click="vm.insertSnippet()" class="btn btn-default">Add Snippet</button>
+      <button btn-expand-recipe="vm.recipe" class="btn btn-default">Expand Editor</button>
+  </div>
+
     <div class="form-group">
-      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.Tags" theme="bootstrap">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.recipe.Tags" theme="bootstrap">
         <ui-select-match placeholder="Tags...">{{$item.name}}</ui-select-match>
         <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
          refresh-delay="100">
diff --git a/src/browser/main/tpls/modals/select-snippet-modal.html b/src/browser/main/tpls/modals/select-snippet-modal.html
new file mode 100644
index 00000000..372f7b20
--- /dev/null
+++ b/src/browser/main/tpls/modals/select-snippet-modal.html
@@ -0,0 +1,19 @@
+<div class="select-snippet-modal">
+  <div class="modal-header">
+    Select a snippet
+  </div>
+  <div class="modal-body">
+    <ul class="snippet-list">
+      <li ng-repeat="snippet in vm.snippets" ng-click="vm.select(snippet)">
+        <p ng-bind="snippet.callSign"></p>
+        <p ng-bind="snippet.description"></p>
+        <p class="created-at">
+          <span ng-bind="snippet.updatedAt|fromNow"></span>
+        </p>
+      </li>
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <button ng-click="vm.cancel()" class="btn btn-default">Cancel</button>
+  </div>
+</div>
diff --git a/src/browser/main/tpls/states/recipes.detail.html b/src/browser/main/tpls/states/recipes.detail.html
index 1aa405a4..cafc6c44 100644
--- a/src/browser/main/tpls/states/recipes.detail.html
+++ b/src/browser/main/tpls/states/recipes.detail.html
@@ -25,7 +25,7 @@
 
       <div class="panel panel-default">
         <div class="panel-body">
-          <div ng-bind-html="vm.recipe.content | marked"></div>
+          <div ng-bind-html="vm.recipe.content | marked" class="marked"></div>
         </div>
       </div>
     </div>
diff --git a/src/browser/shared/directives/ui-ace.js b/src/browser/shared/directives/ui-ace.js
index a4d68bb2..79a4202e 100644
--- a/src/browser/shared/directives/ui-ace.js
+++ b/src/browser/shared/directives/ui-ace.js
@@ -338,6 +338,49 @@ angular.module('ui.ace', [])
           acee.focus()
         })
 
+        scope.$on('insertRequested', function (e, req) {
+          var cursor = acee.selection.getCursor()
+          var str = ''
+          if (cursor.column > 0) str += '\n\n'
+
+          switch (req) {
+            case 'h1':
+              acee.insert(str + '# some heading\n\n')
+              break
+            case 'ul':
+              acee.insert(str + '- item1\n- item2\n- item3')
+              break
+            case 'ol':
+              acee.insert(str + '1. item1\n2. item2\n3. item3')
+              break
+            case 'a':
+              acee.insert(str + '[example.com](http://example.com)')
+              break
+            case 'table':
+              acee.insert(str +
+                'First Header  | Second Header\n' +
+                '------------- | -------------\n' +
+                'Content Cell  | Content Cell\n' +
+                'Content Cell  | Content Cell\n')
+          }
+
+          scope.$evalAsync(function () {
+            ngModel.$setViewValue(session.getValue())
+          })
+        })
+
+        scope.$on('insertSnippetRequested', function (e, snippet) {
+          var cursor = acee.selection.getCursor()
+          var str = ''
+          if (cursor.column > 0) str += '\n\n'
+
+          acee.insert(str + '```\n' + snippet.content + '\n```\n[snippet:' + snippet.id + '](#/snippets/' + snippet.id + ')\n')
+
+          scope.$evalAsync(function () {
+            ngModel.$setViewValue(session.getValue())
+          })
+        })
+
       }
     }
   }])
diff --git a/src/browser/shared/styles/_vars.styl b/src/browser/shared/styles/_vars.styl
index 100c59b2..ce0e2591 100644
--- a/src/browser/shared/styles/_vars.styl
+++ b/src/browser/shared/styles/_vars.styl
@@ -84,3 +84,16 @@ $alert-warning-text= $textColorSelected
 
 $panel-bg= $baseBackgroundColor
 $panel-default-border= $baseBorderColor
+
+
+$nav-tabs-border-color= $baseBorderColor
+
+$nav-tabs-link-hover-border-color= $baseBorderColor
+$nav-tabs-active-link-hover-bg= transparent           $backgroundColorSelected
+$nav-tabs-active-link-hover-color= $textColorSelected
+$nav-tabs-active-link-hover-border-color= $baseBorderColor
+
+$nav-tabs-justified-link-border-color= $baseBorderColor
+$nav-tabs-justified-active-link-border-color= $baseBorderColor
+
+$table-border-color= $baseBorderColor
diff --git a/src/browser/shared/styles/bootstrap.css b/src/browser/shared/styles/bootstrap.css
index 571ce794..e90d2ea8 100644
--- a/src/browser/shared/styles/bootstrap.css
+++ b/src/browser/shared/styles/bootstrap.css
@@ -1768,11 +1768,11 @@ th {
   padding: 8px;
   line-height: 1.428571429;
   vertical-align: top;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #001a20;
 }
 .table > thead > tr > th {
   vertical-align: bottom;
-  border-bottom: 2px solid #ddd;
+  border-bottom: 2px solid #001a20;
 }
 .table > caption + thead > tr:first-child > th,
 .table > colgroup + thead > tr:first-child > th,
@@ -1783,7 +1783,7 @@ th {
   border-top: 0;
 }
 .table > tbody + tbody {
-  border-top: 2px solid #ddd;
+  border-top: 2px solid #001a20;
 }
 .table .table {
   background-color: #fff;
@@ -1797,7 +1797,7 @@ th {
   padding: 5px;
 }
 .table-bordered {
-  border: 1px solid #ddd;
+  border: 1px solid #001a20;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > tbody > tr > th,
@@ -1805,7 +1805,7 @@ th {
 .table-bordered > thead > tr > td,
 .table-bordered > tbody > tr > td,
 .table-bordered > tfoot > tr > td {
-  border: 1px solid #ddd;
+  border: 1px solid #001a20;
 }
 .table-bordered > thead > tr > th,
 .table-bordered > thead > tr > td {
@@ -1943,7 +1943,7 @@ table th[class*="col-"] {
     margin-bottom: 15px;
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #ddd;
+    border: 1px solid #001a20;
   }
   .table-responsive > .table {
     margin-bottom: 0;
@@ -3405,7 +3405,7 @@ tbody.collapse.in {
   max-width: none;
 }
 .nav-tabs {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid #001a20;
 }
 .nav-tabs > li {
   float: left;
@@ -3418,14 +3418,14 @@ tbody.collapse.in {
   border-radius: 4px 4px 0 0;
 }
 .nav-tabs > li > a:hover {
-  border-color: #eee #eee #ddd;
+  border-color: #001a20 #001a20 #001a20;
 }
 .nav-tabs > li.active > a,
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
-  color: #808080;
-  background-color: #fff;
-  border: 1px solid #ddd;
+  color: #fff;
+  background-color: transparent #004b5f;
+  border: 1px solid #001a20;
   border-bottom-color: transparent;
   cursor: default;
 }
@@ -3495,12 +3495,12 @@ tbody.collapse.in {
 .nav-tabs.nav-justified > .active > a:hover,
 .nav-tabs-justified > .active > a:focus,
 .nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #ddd;
+  border: 1px solid #001a20;
 }
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a,
   .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid #001a20;
     border-radius: 4px 4px 0 0;
   }
   .nav-tabs-justified > .active > a,
@@ -3509,7 +3509,7 @@ tbody.collapse.in {
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs-justified > .active > a:focus,
   .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #fff;
+    border-bottom-color: #001a20;
   }
 }
 .tab-content > .tab-pane {
@@ -4683,7 +4683,7 @@ a.list-group-item-danger.active:focus {
 .panel > .panel-body + .table-responsive,
 .panel > .table + .panel-body,
 .panel > .table-responsive + .panel-body {
-  border-top: 1px solid #ddd;
+  border-top: 1px solid #001a20;
 }
 .panel > .table > tbody:first-child > tr:first-child th,
 .panel > .table > tbody:first-child > tr:first-child td {