diff --git a/api.go b/api.go
index 453e714..d42c03c 100644
--- a/api.go
+++ b/api.go
@@ -6,6 +6,7 @@ import (
 	"errors"
 	"github.com/gorilla/mux"
 	"labix.org/v2/mgo"
+	"labix.org/v2/mgo/bson"
 	"net/http"
 	"strconv"
 )
@@ -141,6 +142,22 @@ func getDocumentByIndex(w http.ResponseWriter, request *http.Request) (interface
 	return vb.GetDocumentByIndex(index, nil)
 }
 
+func getDocumentById(w http.ResponseWriter, request *http.Request) (interface{}, error) {
+	vb, err := GetVultureBackend(request)
+	if err != nil {
+		return nil, err
+	}
+	vars := mux.Vars(request)
+	id, ok := vars["id"]
+	if !ok {
+		return nil, errors.New("id field not specified")
+	}
+	if !bson.IsObjectIdHex(id) {
+		return nil, errors.New("id field is not an object id")
+	}
+	return vb.GetDocumentByIndex(0, bson.M{"_id": bson.ObjectIdHex(id)})
+}
+
 func getDocumentByQueryAndIndex(w http.ResponseWriter, request *http.Request) (interface{}, error) {
 	vb, err := GetVultureBackend(request)
 	if err != nil {
diff --git a/client/coffee/controllers/documentCtrl.coffee b/client/coffee/controllers/documentCtrl.coffee
index 986090c..eecea16 100644
--- a/client/coffee/controllers/documentCtrl.coffee
+++ b/client/coffee/controllers/documentCtrl.coffee
@@ -65,14 +65,17 @@ testmongoJsToMongoJSON()
 root.controllers.controller('documentCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
     $scope.idx = $routeParams.idx
     $scope.doc = {}
-    $scope.idx = Number($routeParams.idx)
+    $scope.idx = Number($routeParams.idx) or 1
     $scope.meta = {}
     $scope.newQuery = $routeParams.query or ""
     
     url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     if $routeParams.query
         url = "#{url}/query/#{$routeParams.query}"
-    url = "#{ url }/idx/#{$routeParams.idx - 1}"
+    if $routeParams.idx
+        url = "#{ url }/idx/#{$routeParams.idx - 1}"
+    else if $routeParams.id
+        url = "#{ url }/_id/#{$routeParams.id}"
 
     $http.get(url).then((res) ->
          $scope.doc = res.data.document
diff --git a/client/coffee/controllers/fieldCtrl.coffee b/client/coffee/controllers/fieldCtrl.coffee
new file mode 100644
index 0000000..3de3058
--- /dev/null
+++ b/client/coffee/controllers/fieldCtrl.coffee
@@ -0,0 +1,28 @@
+root = this;
+
+
+root.controllers.controller('fieldCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+    $scope.idx = $routeParams.idx
+    $scope.field = $routeParams.field
+    $scope.fields = []
+    $scope._ = _
+    $scope.value = ""
+    $scope.doc = {}
+    $scope.meta = {}
+    
+    $scope.fieldUrl = (fieldName) ->
+        rt = $routeParams
+        return "#/#{ rt.server }/#{ rt.database }/#{ rt.collection }/_id/#{rt.id}/field/#{fieldName}"
+        
+    url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
+    url = "#{ url }/_id/#{$routeParams.id}"
+
+    $http.get(url).then((res) ->
+         $scope.doc = res.data.document
+         $scope.value = $scope.doc[$scope.field]
+         $scope.fields = _.keys($scope.doc)
+         $scope.meta = res.data.meta
+    )
+    
+])
+
diff --git a/client/coffee/controllers/geojsonmapCtrl.coffee b/client/coffee/controllers/geojsonmapCtrl.coffee
index 7701d65..36de54e 100644
--- a/client/coffee/controllers/geojsonmapCtrl.coffee
+++ b/client/coffee/controllers/geojsonmapCtrl.coffee
@@ -1,7 +1,7 @@
 root = this;
 
 
-root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http', ($scope, $routeParams, $http) ->
+root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$location', '$http', ($scope, $routeParams, $location, $http) ->
     $scope.geojson = {}
     $scope.geojsonData = {}
     $scope.idx = Number($routeParams.idx)
@@ -10,7 +10,7 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http'
         lng: -72.6169
         zoom: 7
         
-    url  = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
+    url = "/api/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }"
     if $routeParams.query
         url = "#{url}/query/#{$routeParams.query}"
     url = "#{ url }/idx/#{$routeParams.idx - 1}"
@@ -18,10 +18,11 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http'
         $scope.geojson = res.data.document[$routeParams.key]
         if not $scope.geojson.properties
             $scope.geojson.properties = {}
-        $scope.geojson.properties["_vulture_url_link"] = ""
+        url = "/#{ $routeParams.server }/#{ $routeParams.database }/#{ $routeParams.collection }/_id/#{ res.data.document._id }"
+        $scope.geojson.properties["_vulture_url_link"] = url
         $scope.meta = res.data.meta
         $scope.geojsonData =
-            data: $scope.geojson 
+            data: $scope.geojson
             style: undefined
             resetStyleOnMouseout: true
     )
@@ -42,8 +43,7 @@ root.controllers.controller('geojsonmapCtrl', ['$scope', '$routeParams', '$http'
         $scope.idx > 1
     
     $scope.$on "leafletDirectiveMap.geojsonClick", (ev, featureSelected, leafletEvent) ->
-        a = 90
-        b = 89
+        $location.url(featureSelected.properties._vulture_url_link);
             
 ])
 
diff --git a/client/coffee/controllers/topBarCtrl.coffee b/client/coffee/controllers/topBarCtrl.coffee
index e3fd069..fd9499f 100644
--- a/client/coffee/controllers/topBarCtrl.coffee
+++ b/client/coffee/controllers/topBarCtrl.coffee
@@ -11,7 +11,7 @@ root.controllers.controller('topBarCtrl', ['$scope', '$location', ($scope, $loca
             $scope.path = joinArray($scope.path[0...6], $scope.path[7...-1])
         $scope.getHistoryUrl = (idx) ->
             ret = "#/" + ($scope.path[i] for i in [0...idx]).join("/")
-            if _.indexOf(["idx", "geojson", "query"], $scope.path[idx]) != -1
+            if _.indexOf(["idx", "geojson", "query", "_id", "field"], $scope.path[idx]) != -1
                 return ""
             if idx == 0
                 ret += "servers"
diff --git a/client/coffee/directives/key.coffee b/client/coffee/directives/key.coffee
index 98d6066..7d55c84 100644
--- a/client/coffee/directives/key.coffee
+++ b/client/coffee/directives/key.coffee
@@ -23,8 +23,10 @@ directive = () ->
         restrict: 'E',
         scope:
             keyName: "="
+            value: "="
             indexes: "="
         controller:["$scope", "$routeParams", ($scope, $routeParams) ->
+                $scope.canMakeHistogram = _.isNumber($scope.value)
                 $scope.hasIndexDesc = hasIndexDesc($scope.keyName, $scope.indexes)
                 $scope.hasIndexAsc = hasIndexAsc($scope.keyName, $scope.indexes)
                 $scope.has2DIndex = has2dIndex($scope.keyName, $scope.indexes)
diff --git a/client/coffee/directives/value.coffee b/client/coffee/directives/value.coffee
index f176065..f436836 100644
--- a/client/coffee/directives/value.coffee
+++ b/client/coffee/directives/value.coffee
@@ -7,7 +7,30 @@ directive = () ->
         restrict: 'E',
         scope:
             value: "="
-        controller:["$scope", ($scope) ->
+            docId: "="
+            key: "="
+            expended: "="
+        controller:["$scope", "$routeParams", ($scope, $routeParams) ->
+                $scope.isSmallString = (str)->
+                    if not _.isString(str)
+                        return false
+                    rgx = str.match(/\n/g) or []
+                    return str.length < 1000 and rgx.length < 20
+                
+                $scope.isSmallObject = (obj) ->
+                    return $scope.isSmallString(JSON.stringify(obj, null, 4))
+
+                $scope.getSmallPrefix = (str) ->
+                    if _.isString(str)
+                        return str.substr(0, 500) + "..."
+                    return ""
+                $scope.url = ()->
+                    rp = $routeParams
+                    s = $scope
+                    return "#/#{rp.server}/#{rp.database}/#{rp.collection}/_id/#{s.docId}/field/#{s.key}"
+                
+                $scope.valueLength = if _.isObject($scope.value) then _.keys($scope.value).length else $scope.value.length
+
                 $scope.isString = _.isString($scope.value)
                 $scope.isNumber = _.isNumber($scope.value)
                 $scope.isObject = _.isObject($scope.value)
diff --git a/client/coffee/filters.coffee b/client/coffee/filters.coffee
index 137d60a..19bbc1c 100644
--- a/client/coffee/filters.coffee
+++ b/client/coffee/filters.coffee
@@ -14,4 +14,11 @@ root.filters.filter 'niceJSON', () ->
 
 root.filters.filter 'replaceReturnByBreak', () ->
     return (text) ->
-        return text.replace(new RegExp("\n","g"), "<br>")
\ No newline at end of file
+        return text.replace(new RegExp("\n","g"), "<br>")
+
+root.filters.filter 'onlyNthLines', () ->
+    return (text, n) ->
+        if not _.isString(text)
+            return ""
+        s = text.split("\n")
+        return s[0...n].join("\n")
\ No newline at end of file
diff --git a/client/coffee/vultureApp.coffee b/client/coffee/vultureApp.coffee
index 529537f..f7d02c2 100644
--- a/client/coffee/vultureApp.coffee
+++ b/client/coffee/vultureApp.coffee
@@ -14,6 +14,8 @@ config(['$routeProvider', ($routeProvider) ->
   $routeProvider.when('/about', {templateUrl: 'partials/about.html', controller: 'aboutCtrl'})
   $routeProvider.when('/:server/databases', {templateUrl: 'partials/databases.html', controller: 'databasesCtrl'})
   $routeProvider.when('/:server/:database/collections', {templateUrl: 'partials/collections.html', controller: 'collectionsCtrl'})
+  $routeProvider.when('/:server/:database/:collection/_id/:id', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
+  $routeProvider.when('/:server/:database/:collection/_id/:id/field/:field', {templateUrl: 'partials/field.html', controller: 'fieldCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx/query/:query', {templateUrl: 'partials/document.html', controller: 'documentCtrl'})
   $routeProvider.when('/:server/:database/:collection/idx/:idx/geojson/:key', {templateUrl: 'partials/geojsonmap.html', controller: 'geojsonmapCtrl'})
diff --git a/client/index.html b/client/index.html
index 6914de9..598a684 100644
--- a/client/index.html
+++ b/client/index.html
@@ -54,6 +54,7 @@
     <script src="js/controllers/collectionsCtrl.js"></script>
     <script src="js/controllers/documentCtrl.js"></script>
     <script src="js/controllers/geojsonmapCtrl.js"></script>
+    <script src="js/controllers/fieldCtrl.js"></script>
     
     <script src="js/directives/key.js"></script>
     <script src="js/directives/value.js"></script>
diff --git a/client/partials/directives/key.html b/client/partials/directives/key.html
index ae23d66..99872b7 100644
--- a/client/partials/directives/key.html
+++ b/client/partials/directives/key.html
@@ -3,6 +3,7 @@
     
     <span ng-style="{visibility: showTools ? 'inline': 'hidden'}">
         <!-- place to but some hoover information-->
+        <i class="fa fa-signal" ng-show="canMakeHistogram"></i> 
     </span>
     <span class="right" style="color:#008CBA;">
         <i class="fa fa-sort-numeric-asc" ng-show="hasIndexAsc"></i>
diff --git a/client/partials/directives/value.html b/client/partials/directives/value.html
index e8a9adf..c9db58c 100644
--- a/client/partials/directives/value.html
+++ b/client/partials/directives/value.html
@@ -1,12 +1,19 @@
 <span>
     <span ng-show="isString">
-        <pre> {{value}} </pre>
+        <pre ng-show="isSmallString(value)"> {{value}} </pre>
+        
+        <a ng-hide="isSmallString(value)" ng-href="{{ url() }}">
+            <pre> {{ getSmallPrefix(value) }} </pre>
+        </a>
+        
     </span>
     <span ng-show="isNumber">
         {{value | number | replaceAllCommasBySpaces}}
     </span>
     <span ng-show="isObject || isArray">
-        <pre>{{value | niceJSON}}</pre>
+        <pre ng-show="isSmallObject(value)" >{{value | niceJSON}}</pre>
+        <a ng-hide="isSmallObject(value)" ng-href="{{ url() }}">
+            <pre> {{value | niceJSON | onlyNthLines:5}} </pre>
+        </a>
     </span>
-    
 </span>
\ No newline at end of file
diff --git a/client/partials/document.html b/client/partials/document.html
index 018bdd4..8d6df95 100644
--- a/client/partials/document.html
+++ b/client/partials/document.html
@@ -34,10 +34,10 @@
             <tbody>
               <tr ng-repeat="(key, value) in doc">
                 <td style="vertical-align: top;">
-                    <vul-key key-name="key" indexes="meta.indexes" ></vul-key>
+                    <vul-key key-name="key" value="value" indexes="meta.indexes" ></vul-key>
                 </td>
                 <td>
-                    <vul-value value="value"></vul-value>
+                    <vul-value value="value" key="key" doc-id="doc._id"></vul-value>
                 </td>
               </tr>
             </tbody>
diff --git a/client/partials/field.html b/client/partials/field.html
new file mode 100644
index 0000000..b446876
--- /dev/null
+++ b/client/partials/field.html
@@ -0,0 +1,22 @@
+<div class="row">
+    <div class="large-12 columns" >
+        <dl class="sub-nav" >
+            <dd ng-repeat="f in fields" ng-class="{active: f == field}">
+                <a ng-href="{{ fieldUrl(f) }}">{{ f }}</a>
+            </dd>
+        </dl>
+    </div>
+</div>
+
+<div class="row">
+    <div class="large-12 columns">
+        <pre ng-show="!_.isObject(value)" style="overflow: initial;">
+            {{ value }}
+        </pre>
+        
+        <pre ng-show="_.isObject(value)" style="overflow: initial;">
+            {{ value | niceJSON }}
+        </pre>
+    </div>
+</div>
+
diff --git a/main.go b/main.go
index 05bb980..1a9140f 100644
--- a/main.go
+++ b/main.go
@@ -70,6 +70,7 @@ func serveApi(router *mux.Router) {
 	router.Handle("/{server}/databases", ApiHandler(getAvailableDataBases))
 	router.Handle("/{server}/{database}/collections", ApiHandler(getAvailableCollections))
 	router.Handle("/{server}/{database}/{collection}/idx/{index:[0-9]+}", ApiHandler(getDocumentByIndex))
+	router.Handle("/{server}/{database}/{collection}/_id/{id}", ApiHandler(getDocumentById))
 	router.Handle("/{server}/{database}/{collection}/query/{query}/idx/{index:[0-9]+}", ApiHandler(getDocumentByQueryAndIndex))
 }