diff --git a/client/bower.json b/client/bower.json
index cc6e582..f656683 100644
--- a/client/bower.json
+++ b/client/bower.json
@@ -18,6 +18,8 @@
     "zepto": "~1.1.3",
     "fontawesome": "~4.0.3",
     "angular-leaflet-directive": "~0.7.7",
-    "leaflet": "~0.7.2"
+    "leaflet": "~0.7.2",
+    "codemirror": "~3.19.0",
+    "angular-ui-codemirror": "~0.1.1"
   }
 }
diff --git a/client/coffee/controllers/documentCtrl.coffee b/client/coffee/controllers/documentCtrl.coffee
index eecea16..e440996 100644
--- a/client/coffee/controllers/documentCtrl.coffee
+++ b/client/coffee/controllers/documentCtrl.coffee
@@ -68,6 +68,12 @@ root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http',
     $scope.idx = Number($routeParams.idx) or 1
     $scope.meta = {}
     $scope.newQuery = $routeParams.query or ""
+    $scope.notfound = false
+    $scope.error = ""
+    $scope.codeMirrorOptions =
+        lineWrapping : true
+        lineNumbers: true
+        mode: 'text/typescript'
     
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     if $routeParams.query
@@ -80,6 +86,11 @@ root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http',
     $http.get(url).then((res) ->
          $scope.doc = res.data.document
          $scope.meta = res.data.meta
+    ).catch( (res) ->
+        if res.data.error == "not found"
+            $scope.notfound = true
+        else
+            $scope.error = res.data.error
     )
     
     $scope.parseQueryToJSON = (query) ->
diff --git a/client/coffee/vultureApp.coffee b/client/coffee/vultureApp.coffee
index f7d02c2..ebeca96 100644
--- a/client/coffee/vultureApp.coffee
+++ b/client/coffee/vultureApp.coffee
@@ -3,6 +3,7 @@ root = this;
 
 angular.module('vulture', [
   'ngRoute'
+  'ui.codemirror'
   'leaflet-directive'
   'vulture.filters'
   'vulture.services'
diff --git a/client/index.html b/client/index.html
index 598a684..c0f86b2 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="bower_components/foundation/css/normalize.css">
     <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css">
     <link rel="stylesheet" href="bower_components/leaflet-dist/leaflet.css">
+    <link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
         
   
     <!-- If you are using the gem version, you need this only -->
@@ -39,11 +40,15 @@
     <div ng-view></div>
   
     <script src="bower_components/leaflet-dist/leaflet.js"></script>
+    <script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
+    <script type="text/javascript" src="bower_components/codemirror/mode/javascript/javascript.js"></script>
     <script src="bower_components/underscore/underscore.js"></script>
     <script src="bower_components/jquery/dist/jquery.js"></script>
     <script src="bower_components/foundation/js/foundation.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
+    <script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
+
     
       
     <script src="js/vultureApp.js"></script>
diff --git a/client/partials/document.html b/client/partials/document.html
index 8d6df95..d68728a 100644
--- a/client/partials/document.html
+++ b/client/partials/document.html
@@ -9,11 +9,25 @@
                     Query <i class="fa fa-thumbs-o-down" style="color:red;" ng-show="getQueryPath()=='' && newQuery != ''"></i>
                 </a>
             </li>
-            <li><a class="button tiny" ng-click="newQuery=''" ng-class="{disabled: newQuery=='' }">Clear</a></li>
+            <li>
+                <a class="button tiny" ng-click="newQuery=''" ng-class="{disabled: newQuery=='' }">Clear</a>
+            </li>
+            <li>
+                <a class="button tiny" ng-click="bigInput = !bigInput" >
+                    <i class="fa fa-pencil-square-o" ng-show="!bigInput"></i>
+                    <i class="fa fa-minus-square-o" ng-show="bigInput"></i>
+                </a>
+            </li>
         </ul>
     </div>
 </div>
 
+<div class="row" ng-show="bigInput">
+    <div class="large-12 columns">
+        <ui-codemirror ng-model="newQuery" ui-codemirror="codeMirrorOptions"  ></ui-codemirror>
+    </div>
+</div>
+
 <div class="row">
     <div class="large-12 columns" style="text-align: center;">
             <a class="fa fa-chevron-left" ng-href="{{ previousDocumentUrl() }}" ng-show="{{ hasPreviousDocument() }}"></a>
@@ -22,6 +36,15 @@
     </div>
 </div>
 
+<div class="row">
+    <div class="large-12 columns" style="text-align: center;" ng-show="!closeAlert && notfound">
+            <div class="alert-box">
+                No document Found!
+                <a class="close" ng-click="closeAlert=true">&times;</a>
+            </div>
+    </div>
+</div>
+
 <div class="row">
     <div class="large-12 columns">
         <table style="width: 100%;">
diff --git a/handlerWrapper.go b/handlerWrapper.go
index a392658..b676133 100644
--- a/handlerWrapper.go
+++ b/handlerWrapper.go
@@ -7,7 +7,7 @@ import (
 )
 
 type errorWrapper struct {
-	Error error `json:"error"`
+	Error string `json:"error"`
 }
 
 type ApiHandler func(w http.ResponseWriter, request *http.Request) (interface{}, error)
@@ -16,7 +16,7 @@ func (this ApiHandler) ServeHTTP(w http.ResponseWriter, request *http.Request) {
 	ret, err := this(w, request)
 	if err != nil {
 		log.Println(err)
-		ret = &errorWrapper{err}
+		ret = &errorWrapper{err.Error()}
 		w.WriteHeader(500)
 	} else {
 		w.WriteHeader(200)