diff --git a/src/browser/main/controllers/states/RecipesListController.js b/src/browser/main/controllers/states/RecipesListController.js
index e1c38603..c5d10714 100644
--- a/src/browser/main/controllers/states/RecipesListController.js
+++ b/src/browser/main/controllers/states/RecipesListController.js
@@ -89,7 +89,7 @@ angular.module('codexen')
     }
 
     function searchRecipes () {
-      vm.filtered = $filter('filter')(myRecipes, vm.search)
+      vm.filtered = $filter('searchSnippets')(myRecipes, vm.search)
       if (vm.search && vm.filtered && vm.filtered[0] && (!vm.recipeId || vm.recipeId !== vm.filtered[0].id)) {
         $state.go('recipes.detail', {id: vm.filtered[0].id})
       }
diff --git a/src/browser/main/index.html b/src/browser/main/index.html
index f968fea2..7fa946a6 100644
--- a/src/browser/main/index.html
+++ b/src/browser/main/index.html
@@ -51,23 +51,15 @@
     <script src="directives/snippet-item.js"></script>
     <script src="directives/tag-item.js"></script>
     <script src="directives/tag-list.js"></script>
+    <script src="filters/from-now.js"></script>
+    <script src="filters/marked.js"></script>
+    <script src="filters/search-snippets.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>
@@ -76,6 +68,14 @@
     <script src="controllers/states/SettingsController.js"></script>
     <script src="controllers/states/SnippetsDetailController.js"></script>
     <script src="controllers/states/SnippetsListController.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="../shared/shared.js"></script>
     <script src="../shared/config/ace.js"></script>
     <script src="../shared/config/env.js"></script>
diff --git a/src/browser/main/styles/app.css b/src/browser/main/styles/app.css
index 9fdebb3a..5c078945 100644
--- a/src/browser/main/styles/app.css
+++ b/src/browser/main/styles/app.css
@@ -26,6 +26,12 @@
 .select-snippet-modal .snippet-list li:hover {
   background-color: #004b5f;
 }
+.select-snippet-modal .snippet-list li .ace_editor {
+  height: 150px;
+}
+.select-snippet-modal .snippet-list li .call-sign {
+  color: #d5dfe2;
+}
 #side-view .nav-control-group {
   margin: auto 10px;
 }
diff --git a/src/browser/main/styles/modals/select-snippet-modal.styl b/src/browser/main/styles/modals/select-snippet-modal.styl
index d127539b..4054f19b 100644
--- a/src/browser/main/styles/modals/select-snippet-modal.styl
+++ b/src/browser/main/styles/modals/select-snippet-modal.styl
@@ -11,3 +11,7 @@
       cursor pointer
       &:hover
         background-color $backgroundColorSelected
+      .ace_editor
+        height 150px
+      .call-sign
+        color $textColorHighlight
diff --git a/src/browser/main/tpls/modals/edit-recipe-modal.html b/src/browser/main/tpls/modals/edit-recipe-modal.html
index 5fc51c8b..c7fc3211 100644
--- a/src/browser/main/tpls/modals/edit-recipe-modal.html
+++ b/src/browser/main/tpls/modals/edit-recipe-modal.html
@@ -38,7 +38,6 @@
   </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>
 
diff --git a/src/browser/main/tpls/modals/new-recipe-modal.html b/src/browser/main/tpls/modals/new-recipe-modal.html
index 5fc51c8b..c7fc3211 100644
--- a/src/browser/main/tpls/modals/new-recipe-modal.html
+++ b/src/browser/main/tpls/modals/new-recipe-modal.html
@@ -38,7 +38,6 @@
   </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>
 
diff --git a/src/browser/main/tpls/modals/select-snippet-modal.html b/src/browser/main/tpls/modals/select-snippet-modal.html
index 372f7b20..2fa0c419 100644
--- a/src/browser/main/tpls/modals/select-snippet-modal.html
+++ b/src/browser/main/tpls/modals/select-snippet-modal.html
@@ -5,11 +5,17 @@
   <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><small>callsign</small> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.updatedAt|fromNow" class="call-sign"></small></p>
         <p ng-bind="snippet.description"></p>
-        <p class="created-at">
-          <span ng-bind="snippet.updatedAt|fromNow"></span>
-        </p>
+
+        <div ui-ace="{
+          showGutter: true,
+          useWrapMode : true,
+          mode:snippet.mode.toLowerCase(),
+          theme:'solarized_dark'
+        }"
+        readonly
+        ng-model="snippet.content"></div>
       </li>
     </ul>
   </div>
diff --git a/src/browser/popup/index.html b/src/browser/popup/index.html
index 7f3cc7ec..86808488 100644
--- a/src/browser/popup/index.html
+++ b/src/browser/popup/index.html
@@ -57,10 +57,10 @@
     <script src="popup.js"></script>
     <script src="services/snippet.js"></script>
     <script src="../shared/shared.js"></script>
+    <script src="../shared/directives/ui-ace.js"></script>
     <script src="../shared/config/ace.js"></script>
     <script src="../shared/config/env.js"></script>
     <script src="../shared/config/satellizer.js"></script>
-    <script src="../shared/directives/ui-ace.js"></script>
     <script src="../shared/services/Snippet.js"></script>
     <!-- endinject -->
   </body>
diff --git a/src/browser/shared/directives/ui-ace.js b/src/browser/shared/directives/ui-ace.js
index 79a4202e..72f49e9e 100644
--- a/src/browser/shared/directives/ui-ace.js
+++ b/src/browser/shared/directives/ui-ace.js
@@ -374,7 +374,7 @@ angular.module('ui.ace', [])
           var str = ''
           if (cursor.column > 0) str += '\n\n'
 
-          acee.insert(str + '```\n' + snippet.content + '\n```\n[snippet:' + snippet.id + '](#/snippets/' + snippet.id + ')\n')
+          acee.insert(str + '```\n' + snippet.content + '\n```\n> [snippet#' + snippet.id + '](#/snippets/' + snippet.id + ')\n\n')
 
           scope.$evalAsync(function () {
             ngModel.$setViewValue(session.getValue())