diff --git a/js/apps/system/aardvark/frontend/css/graphView.css b/js/apps/system/aardvark/frontend/css/graphView.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/js/apps/system/aardvark/frontend/css/graphlayout.css b/js/apps/system/aardvark/frontend/css/graphlayout.css
index 045f640dc9..805e736310 100644
--- a/js/apps/system/aardvark/frontend/css/graphlayout.css
+++ b/js/apps/system/aardvark/frontend/css/graphlayout.css
@@ -1,146 +1,25 @@
-.gv_manageButtonContainer {
-  margin-top: 10px;
-}
-
 input.gv_searchInput {
   border: 1px solid #cccccc;
 }
 
-.btn-group {
-  border-radius: 2px 2px 2px 2px !important;
-}
-svg.graphViewer {
-  position: absolute;
-  left: 74px;
-  background-color: white;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(0,0,0,0.125);
-  z-index: 0;
-}
-
 div.gv_background {
   position: relative;
   height: 685px;
 }
 
-img.searchSubmit {
-  height: 16px;
-  margin-left: -18px;
-  margin-top: 11px;
-  opacity: 0.2;
-  position: absolute;
-  width: 16px;
-  background-image:url("../img/enter_icon.png");
-}
 
-.link > line{
-  cursor: pointer;
-  stroke-width: 2; 
-}
-
-.node {
-  cursor: pointer;
-}
 .searchSubmit:hover {
   opacity: 0.8;
   cursor: pointer;
 }
 
-.toolbox {
-  position: absolute;
-  margin-right: 5px;
-  border-radius: 0px !important;  
-  -webkit-border-radius: 0px !important;
-  -moz-border-radius: 0px !important;
-  border-style: solid;
-  border-width: 3px;
-  border-color: rgb(51, 51, 51);
-}
-
-.toolbox > .btn {
-  width: 50px;
-  height: 50px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-  background-color: rgb(51, 51, 51);
-  background-size: 50px 50px;
-}
-
-.btn-icon {
-  padding: 4px 4px;
-  background-color: rgb(56, 52, 52);
-}
-
 .searchByAttribute, .searchEqualsLabel {
   margin-right: 6px;
   margin-left: 6px;
 }
 
-svg.graphViewer text {
-  font: 16px Arial;
-  pointer-events: none;
-}
-
 .capitalize {
-  text-transform:capitalize;
-}
-
-
-div.mousepointer {
-  position: absolute;
-  margin: 0;
-  padding: 5px;  
-}
-
-.modal-body th.actionCell {
-  width: 30px;
-  text-align: center;
-}
-
-.modal-body th.keyCell {
-  width: 170px;
-  text-align: center;
-}
-
-.modal-body th.valueCell {
-  width: 300px;
-  text-align: center;
-}
-
-.modal-body th.keyCell input {
-  width: 150px;
-}
-
-.modal-body th.valueCell input {
-  width: 290px;
-}
-
-div.gv_zoom_widget {
-  position: absolute;
-  z-index: 1;
-  left: 95px;
-  top: 20px;
-  width: 40px;
-  height: 300px;
-}
-
-div.gv_zoom_slider {
-  margin: 0px 17px;
-  width: 4px;
-  height: 200px;
-}
-
-div.gv_zoom_slider > .ui-slider-handle {
-  height:0.5em;
-  left:-0.55em;
-}
-
-div.gv_zoom_buttons_bg {
-  height: 40px;
-  margin-bottom:20px;
-  background-image: url("../img/gv_button_bg_reverse.png");
-  background-size: contain;
+  text-transform: capitalize;
 }
 
 img.gv-throbber {
@@ -158,58 +37,10 @@ input.gv_radio_button {
   margin-top: 3px;
 }
 
-/*Overriding the slider UI*/
-.ui-slider {
-  background: #333333;
-}
-
-.ui-slider-handle {
-  outline: none;
-  border-color: #686766;
-  background: white;
-}
-
-.ui-slider-handle.ui-state-focus {
-  outline: none;
-  border-color: #686766;
-  background: white;
-}
-
-.ui-slider-handle.ui-state-hover {
-  outline-color: #333333;
-  border-color: #686766;
-  background: white;
-}
-
-div.input-append button.gv_example_toggle {
-  background-color:#8F8D8C;
-  height: 30px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 12px;
-  margin-left: -1px;
-  vertical-align: top;
-  -webkit-border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-          border-radius: 0 4px 4px 0;
-
-}
-
-.gv_example_toggle:hover {
-  background-color:#8AA051;
-}
-
 legend.gv_inner {
   font-size: 16px;
 }
 
-.gv_zoom_widget .ui-state-default,
-.gv_zoom_widget .ui-widget-content .ui-state-default,
-.gv_zoom_widget .ui-widget-header .ui-state-default {
-  background: #F6F6F6;
-}
-
-
 ul.gv_configure_menu {
   position: absolute;
   left: auto;
@@ -220,20 +51,3 @@ ul.gv_configure_menu {
 span.gv_caret {
   margin-top: 2px !important;
 }
-
-div.gv_colour_list {
-  position: absolute;
-  right: 26px;
-  top: 20px;
-  text-align: right;
-  max-height: 680px;
-  overflow: auto;
-  float: right;
-  z-index: 1;
-}
-
-div.gv_colour_list li {
-  background-color: transparent;
-  padding: 2px 6px;
-  float:none;
-}
diff --git a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerPreview.js b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerPreview.js
index ff2798f235..620aed8968 100644
--- a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerPreview.js
+++ b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerPreview.js
@@ -58,7 +58,7 @@ function GraphViewerPreview(container, viewerConfig) {
         .attr("id", "graphViewerSVG")
         .attr("width",width)
         .attr("height",height)
-        .attr("class", "graphViewer")
+        .attr("class", "graph-viewer")
         .attr("style", "width:" + width + "px;height:" + height + ";");
     },
     
diff --git a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerUI.js b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerUI.js
index c6d68afc41..8e2a67ce46 100644
--- a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerUI.js
+++ b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerUI.js
@@ -130,7 +130,7 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
       searchValueField.type = "text";
       searchValueField.placeholder = "Attribute value";
       searchStart.id = "loadnode";
-      searchStart.className = "searchSubmit";
+      searchStart.className = "gv-search-submit-icon";
       equalsField.className = "searchEqualsLabel";
       equalsField.appendChild(document.createTextNode("=="));
 
@@ -246,7 +246,7 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
         .attr("id", "graphViewerSVG")
         .attr("width",width)
         .attr("height",height)
-        .attr("class", "graphViewer")
+        .attr("class", "graph-viewer")
         .style("width", width + "px")
         .style("height", height + "px");
     },
@@ -413,12 +413,12 @@ function GraphViewerUI(container, adapterConfig, optWidth, optHeight, viewerConf
     
     createColourList = function() {
       colourList = nodeShaperUI.createColourMappingList();
-      colourList.className = "gv_colour_list";
+      colourList.className = "gv-colour-list";
       background.insertBefore(colourList, svg[0][0]);
     };
   container.appendChild(menubar);
   container.appendChild(background);
-  background.className = "contentDiv gv_background ";
+  background.className = "contentDiv gv-background ";
   background.id = "background";
   
   viewerConfig = viewerConfig || {};
diff --git a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerWidget.js b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerWidget.js
index 5702736717..5eb9bc14a7 100644
--- a/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerWidget.js
+++ b/js/apps/system/aardvark/frontend/js/graphViewer/ui/graphViewerWidget.js
@@ -59,7 +59,7 @@ function GraphViewerWidget(viewerConfig, startNode) {
         .attr("id", "graphViewerSVG")
         .attr("width",width)
         .attr("height",height)
-        .attr("class", "graphViewer")
+        .attr("class", "graph-viewer")
         .attr("style", "width:" + width + "px;height:" + height + "px;");
     },
     
diff --git a/js/apps/system/aardvark/frontend/js/lib/ColVis.js b/js/apps/system/aardvark/frontend/js/lib/ColVis.js
old mode 100755
new mode 100644
diff --git a/js/apps/system/aardvark/frontend/js/templates/collectionsView.ejs b/js/apps/system/aardvark/frontend/js/templates/collectionsView.ejs
index e2bc240190..7713730221 100644
--- a/js/apps/system/aardvark/frontend/js/templates/collectionsView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/collectionsView.ejs
@@ -13,10 +13,8 @@
     <div class="pull-left">
       <a class="arangoHeader">Collections</a>
     </div>
-    <div class="searchField pull-left">
-      <input type="text" id="searchInput" class="search-input" placeholder="Search..."/><img id="searchSubmit" width="16"
-                                                                                            height="16"
-                                                                                            src="img/enter_icon.png"
+    <div class="search-field">
+      <input type="text" id="searchInput" class="search-input" placeholder="Search..."/><img id="searchSubmit"
                                                                                             class="search-submit-icon"/>
     </div>
   </div>
diff --git a/js/apps/system/aardvark/frontend/js/templates/databaseView.ejs b/js/apps/system/aardvark/frontend/js/templates/databaseView.ejs
index 56adafd948..3639ce77e0 100644
--- a/js/apps/system/aardvark/frontend/js/templates/databaseView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/databaseView.ejs
@@ -13,10 +13,8 @@
     <div class="pull-left">
       <a class="arangoHeader">Databases</a>
     </div>
-    <div class="searchField pull-left">
-      <input type="text" value="<%=searchString%>" id="databaseSearchInput" class="search-input" placeholder="Search..."/><img id="databaseSearchSubmit"
-                                                                                                                                    width="16" height="16"
-                                                                                                                                    src="img/enter_icon.png" class="search-submit-icon">
+    <div class="search-field">
+      <input type="text" value="<%=searchString%>" id="databaseSearchInput" class="search-input" placeholder="Search..."/><img id="databaseSearchSubmit" class="search-submit-icon">
     </div>
   </div>
 
diff --git a/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs b/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs
index f44d57d9c0..75809ab2a3 100644
--- a/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/graphManagementView.ejs
@@ -12,10 +12,8 @@
     <div class="pull-left">
       <a class="arangoHeader">Graph Management</a>
     </div>
-    <div class="searchField pull-left">
-      <input type="text" value="<%=searchString%>" id="graphManagementSearchInput" class="search-input" placeholder="Search..."/><img id="graphManagementSearchSubmit"
-                                                                                                                                    width="16" height="16"
-                                                                                                                                    src="img/enter_icon.png" class="search-submit-icon">
+    <div class="search-field">
+      <input type="text" value="<%=searchString%>" id="graphManagementSearchInput" class="search-input" placeholder="Search..."/><img id="graphManagementSearchSubmit" class="search-submit-icon">
     </div>
   </div>
 
diff --git a/js/apps/system/aardvark/frontend/js/templates/graphView.ejs b/js/apps/system/aardvark/frontend/js/templates/graphView.ejs
index 73b9d5856f..a1b59821d7 100644
--- a/js/apps/system/aardvark/frontend/js/templates/graphView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/graphView.ejs
@@ -74,7 +74,7 @@ gs = _.sortBy(gs, sortF);
                 </select>
               </div>
             </div>
-            <div class="controls gv_manageButtonContainer">
+            <div class="controls gv-manage-button-container">
               <button type="submit" class="button-primary" id="manageGraphs">Manage Graphs</button>
             </div>
           </fieldset>
diff --git a/js/apps/system/aardvark/frontend/js/templates/userManagementView.ejs b/js/apps/system/aardvark/frontend/js/templates/userManagementView.ejs
index e6d4895713..12dbc4f3a3 100644
--- a/js/apps/system/aardvark/frontend/js/templates/userManagementView.ejs
+++ b/js/apps/system/aardvark/frontend/js/templates/userManagementView.ejs
@@ -13,10 +13,8 @@
   <div class="pull-left">
     <a class="arangoHeader">User Management</a>
   </div>
-  <div class="searchField pull-left">
-    <input type="text" value="<%=searchString%>" id="userManagementSearchInput" class="search-input" placeholder="Search..."/><img id="userManagementSearchSubmit"
-                                                                                                                                  width="16" height="16"
-                                                                                                                                  src="img/enter_icon.png" class="search-submit-icon">
+  <div class="search-field">
+    <input type="text" value="<%=searchString%>" id="userManagementSearchInput" class="search-input" placeholder="Search..."/><img id="userManagementSearchSubmit" class="search-submit-icon">
   </div>
 </div>
 
diff --git a/js/apps/system/aardvark/frontend/scss/_buttons.scss b/js/apps/system/aardvark/frontend/scss/_buttons.scss
index 346c1dbfec..4908b235e2 100644
--- a/js/apps/system/aardvark/frontend/scss/_buttons.scss
+++ b/js/apps/system/aardvark/frontend/scss/_buttons.scss
@@ -163,7 +163,11 @@ a.headerButton {
 
 //Graph Viewer
 
-div.toolbox > {
+div.toolbox {
+  @include border-radius(2px);
+  border: 3px solid $c-nav-bg;
+  margin-right: 5px;
+  position: absolute;
 
   div.gv_action_button {
     @extend %clickable;
@@ -354,10 +358,6 @@ button {
   padding-top: 4px !important;
 }
 
-.btn-group.open .btn-inverse.dropdown-toggle {
-  background-color: $c-btn-inverse;
-}
-
 // Cluster View
 
 button.btn-overview,
diff --git a/js/apps/system/aardvark/frontend/scss/_colors.scss b/js/apps/system/aardvark/frontend/scss/_colors.scss
index 79fc421660..b429d4c4aa 100644
--- a/js/apps/system/aardvark/frontend/scss/_colors.scss
+++ b/js/apps/system/aardvark/frontend/scss/_colors.scss
@@ -65,6 +65,8 @@ $c-shell-losing-focus: #c4cccc;
 
 $c-shell-prompt: #b91;
 $c-shell-old-prompt: #f60;
+
+$c-slider-bg: #f6f6f6;
 $c-shell-input: #dd0;
 $c-shell-old-input: #bb0;
 
@@ -113,4 +115,6 @@ $c-api-docs-bg-input: #8f8d8c;
 $c-breadcrumb-bg: #f5f5f5;
 $c-breadcrumb-a-active-bread: #b9d375;
 
-$c-logs-table-id-thead-bg: #f9f9f9;
\ No newline at end of file
+$c-logs-table-id-thead-bg: #f9f9f9;
+
+$c-viewer-border: rgba(0, 0, 0, .125);
diff --git a/js/apps/system/aardvark/frontend/scss/_dialogs.scss b/js/apps/system/aardvark/frontend/scss/_dialogs.scss
new file mode 100644
index 0000000000..9363493f53
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/_dialogs.scss
@@ -0,0 +1,3 @@
+div.gv-manage-button-container {
+  margin-top: 10px;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_dropdowns.scss b/js/apps/system/aardvark/frontend/scss/_dropdowns.scss
index e5a5537092..375e0883c0 100644
--- a/js/apps/system/aardvark/frontend/scss/_dropdowns.scss
+++ b/js/apps/system/aardvark/frontend/scss/_dropdowns.scss
@@ -135,3 +135,20 @@ select.filterSelect {
   margin-top: 1px;
 }
 
+div.input-append button.gv_example_toggle {
+  background-color:#8F8D8C;
+  height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 12px;
+  margin-left: -1px;
+  vertical-align: top;
+  -webkit-border-radius: 0 4px 4px 0;
+     -moz-border-radius: 0 4px 4px 0;
+          border-radius: 0 4px 4px 0;
+
+}
+
+.gv_example_toggle:hover {
+  background-color:#8AA051;
+}
diff --git a/js/apps/system/aardvark/frontend/scss/_graphViewer.scss b/js/apps/system/aardvark/frontend/scss/_graphViewer.scss
new file mode 100644
index 0000000000..0fd5b8299d
--- /dev/null
+++ b/js/apps/system/aardvark/frontend/scss/_graphViewer.scss
@@ -0,0 +1,100 @@
+div.gv_zoom_widget {
+  height: 300px;
+  left: 95px;
+  position: absolute;
+  top: 20px;
+  width: 40px;
+  z-index: 1;
+
+  div.gv_zoom_buttons_bg {
+    background-image: url('../img/gv_button_bg_reverse.png');
+    background-size: contain;
+    height: 40px;
+    margin-bottom: 20px;
+  }
+
+  div.gv_zoom_slider {
+    background: $c-nav-bg;
+    height: 200px;
+    margin: 0 17px;
+    width: 4px;
+  }
+
+  a.ui-slider-handle {
+    background: $c-white;
+    border-color: $c-bar-bg;
+    height: .5em;
+    left: -.55em;
+    outline: none;
+
+    &.ui-state-hover {
+      outline-color: $c-nav-bg;
+    }
+  }
+
+  .ui-state-default, {
+    background: $c-slider-bg;
+  }
+
+}
+
+div.gv_colour_list {
+  @extend %pull-right;
+  max-height: 680px;
+  overflow: auto;
+  position: absolute;
+  right: 26px;
+  text-align: right;
+  top: 20px;
+  z-index: 1;
+
+  li {
+    background-color: $c-transp;
+    float: none;
+    padding: 2px 6px;
+  }
+}
+
+svg.graph-viewer {
+  background-color: $c-white;
+  border: 1px solid $c-viewer-border;
+  left: 74px;
+  position: absolute;
+  top: 12px;
+  z-index: 0;
+
+  text {
+    font-size: 16px;
+    pointer-events: none;
+  }
+}
+
+div.gv-background {
+  height: 685px;
+  position: relative;
+}
+
+.link > line {
+  @extend %clickable;
+  stroke-width: 2; 
+}
+
+.node {
+  @extend %clickable;
+}
+
+div.gv-colour-list {
+  max-height: 680px;
+  overflow: auto;
+  position: absolute;
+  right: 26px;
+  text-align: right;
+  top: 20px;
+  z-index: 1;
+
+  li {
+    float: none;
+    padding: 2px 6px;
+  }
+}
+
diff --git a/js/apps/system/aardvark/frontend/scss/_headerBar.scss b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
index 23202a014a..795259b5f2 100644
--- a/js/apps/system/aardvark/frontend/scss/_headerBar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_headerBar.scss
@@ -1,4 +1,5 @@
 input.search-input {
+  @include border-radius(0px);
   border: 0;
   height: 18px;
   line-height: 18px;
@@ -12,11 +13,17 @@ input.search-input {
   }
 }
 
-.search-submit-icon {
+.search-field {
+  @extend %pull-left;
+  margin-left: 15px;
+}
+
+%search-submit-icon {
   @extend %clickable;
+  background-image: url('../img/enter_icon.png');
+  background-size: 14px;
   height: 14px;
   margin-left: -18px;
-  margin-top: 11px;
   opacity: .2;
   position: absolute;
   width: 14px;
@@ -26,6 +33,16 @@ input.search-input {
   }
 }
 
+.search-submit-icon {
+  @extend %search-submit-icon;
+  margin-top: 11px;
+}
+
+.gv-search-submit-icon {
+  @extend %search-submit-icon;
+  margin-top: 6px;
+}
+
 // To be cleaned up from here on!
 
 // The bar on top of each page
diff --git a/js/apps/system/aardvark/frontend/scss/_modals.scss b/js/apps/system/aardvark/frontend/scss/_modals.scss
index 8de267a094..af05982e2d 100644
--- a/js/apps/system/aardvark/frontend/scss/_modals.scss
+++ b/js/apps/system/aardvark/frontend/scss/_modals.scss
@@ -1,6 +1,36 @@
 .modal-body {
   color: $c-btn-inverse;
   font-size: 14px;
+
+  //TODO Check if this might be removed
+  th {
+    %cell-centered {
+      text-align: center;
+    }
+
+    &.actionCell {
+      @extend %cell-centered;
+      width: 30px;
+    }
+
+    &.keyCell {
+      @extend %cell-centered;
+      width: 170px;
+
+      input {
+        width: 150px;
+      }
+    }
+
+    .valueCell {
+      @extend %cell-centered;
+      width: 300px;
+
+      input {
+        width: 290px;
+      }
+    }
+  }
 }
 
 .modal-backdrop,
diff --git a/js/apps/system/aardvark/frontend/scss/_searchBar.scss b/js/apps/system/aardvark/frontend/scss/_searchBar.scss
index 55113419a6..e69de29bb2 100644
--- a/js/apps/system/aardvark/frontend/scss/_searchBar.scss
+++ b/js/apps/system/aardvark/frontend/scss/_searchBar.scss
@@ -1,14 +0,0 @@
-div {
-  img.searchSubmitIcon {
-    height: 14px;
-    margin-left: -18px;
-    margin-top: 11px;
-    opacity: .2;
-    position: absolute;
-    width: 14px;
-  }
-}
-
-.searchField {
-  margin-left: 15px;
-}
diff --git a/js/apps/system/aardvark/frontend/scss/generated.css b/js/apps/system/aardvark/frontend/scss/generated.css
index cddb2533f3..801df4456c 100644
--- a/js/apps/system/aardvark/frontend/scss/generated.css
+++ b/js/apps/system/aardvark/frontend/scss/generated.css
@@ -1369,10 +1369,10 @@ textarea,
 .fa-plus-square-o:before {
   content: "\f196"; }
 
-ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal, .pagination-line li a {
+ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu, div.navlogo, ul.navlist li, div.footer-left, div.footer-left p, a.headerButton, a.button-gui, div .tile, div .bigtile, div .tile a span.add-Icon, div .bigtile a span.add-Icon, div.centralContent, .contentDiv li, div.dropdownInner ul, .search-field, .fixedDropdown .notificationItemContent, .fixedDropdown .notificationItem i, .innerDropdownInnerUL, .dashboardModal, .pagination-line li a {
   float: left; }
 
-div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, .docsThirdCol {
+div.navmenu, div.footer-right, div.footer-right p, ul.headerButtonList li, div .tile div.iconSet span, div .bigtile div.iconSet span, div.headerBar > div.headerButtonBar, .fixedDropdown button, .query-button, .arango-tab li, .show-save-state, div.gv_colour_list, .docsThirdCol {
   float: right; }
 
 div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonBar:after, #distributionChartDiv:after, .lineChartDiv:after, .arango-tab:after, .pagination-line li:after {
@@ -1383,7 +1383,7 @@ div.tileList:after, div.resizecontainer:after, div.headerBar > div.headerButtonB
   height: 0;
   visibility: hidden; }
 
-.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox > div.gv_action_button, .clusterDownBtn button, div .tile a span.icon, div .bigtile a span.icon, div .tile a svg, div .bigtile a svg, div .tile div.iconSet span, div .bigtile div.iconSet span, div .bigtile, .contentDiv .icon, .icon-info-sign, .arangoicon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li, .pagination-line li a, .edit-index-table .icon_arangodb_roundminus {
+.addButton, .deleteButton, a.headerButton, a.button-gui, div.toolbox div.gv_action_button, .clusterDownBtn button, div .tile a span.icon, div .bigtile a span.icon, div .tile a svg, div .bigtile a svg, div .tile div.iconSet span, div .bigtile div.iconSet span, div .bigtile, .contentDiv .icon, .icon-info-sign, .arangoicon, div.headerDropdown.headerDropdown input[type=checkbox].css-checkbox + label.css-label, .search-submit-icon, .gv-search-submit-icon, .fixedDropdown .notificationItem i, .fullNotification:hover, .contentTables tr.contentRowInactive a, .arango-tab a, .arango-tab li, .pagination-line li a, .link > line, .node, .edit-index-table .icon_arangodb_roundminus {
   cursor: pointer; }
 
 nav.navbar, footer.footer {
@@ -1444,9 +1444,9 @@ nav.navbar, footer.footer {
     background-color: #f87c0f; }
 
 .button-inactive {
-  background-color: lightgray; }
+  background-color: lightgrey; }
   .button-inactive:hover {
-    background-color: gray; }
+    background-color: grey; }
 
 ul.link-dropdown-menu, ul.user-dropdown-menu, ul.gv-dropdown-menu {
   -moz-border-radius: 3px;
@@ -1733,21 +1733,28 @@ a.headerButton {
       background-color: white;
       color: #788f3d; }
 
-div.toolbox > div.gv_action_button {
-  background-color: #333232;
-  color: white;
-  height: 50px;
-  margin-bottom: 2px;
-  margin-top: 2px;
-  position: relative;
-  text-align: center;
-  width: 50px; }
-  div.toolbox > div.gv_action_button.active {
-    background-color: #8aa051; }
-  div.toolbox > div.gv_action_button:first-child {
-    margin-top: 0; }
-  div.toolbox > div.gv_action_button:last-child {
-    margin-bottom: 0; }
+div.toolbox {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  border: 3px solid #333232;
+  margin-right: 5px;
+  position: absolute; }
+  div.toolbox div.gv_action_button {
+    background-color: #333232;
+    color: white;
+    height: 50px;
+    margin-bottom: 2px;
+    margin-top: 2px;
+    position: relative;
+    text-align: center;
+    width: 50px; }
+    div.toolbox div.gv_action_button.active {
+      background-color: #8aa051; }
+    div.toolbox div.gv_action_button:first-child {
+      margin-top: 0; }
+    div.toolbox div.gv_action_button:last-child {
+      margin-bottom: 0; }
 
 h6.gv_icon_icon, h6.gv_button_title {
   left: 0;
@@ -1880,9 +1887,6 @@ button {
   padding-bottom: 4px !important;
   padding-top: 4px !important; }
 
-.btn-group.open .btn-inverse.dropdown-toggle {
-  background-color: #736b68; }
-
 button.btn-overview,
 button.btn-server {
   margin: 5px; }
@@ -2318,7 +2322,25 @@ select.filterSelect {
   margin-left: 10px !important;
   margin-top: 1px; }
 
+div.input-append button.gv_example_toggle {
+  background-color: #8F8D8C;
+  height: 30px;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 12px;
+  margin-left: -1px;
+  vertical-align: top;
+  -webkit-border-radius: 0 4px 4px 0;
+  -moz-border-radius: 0 4px 4px 0;
+  border-radius: 0 4px 4px 0; }
+
+.gv_example_toggle:hover {
+  background-color: #8AA051; }
+
 input.search-input {
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
   border: 0;
   height: 18px;
   line-height: 18px;
@@ -2331,16 +2353,26 @@ input.search-input {
     border-color: #8aa051;
     outline: none; }
 
-.search-submit-icon {
+.search-field {
+  margin-left: 15px; }
+
+.search-submit-icon, .gv-search-submit-icon {
+  background-image: url("../img/enter_icon.png");
+  background-size: 14px;
   height: 14px;
   margin-left: -18px;
-  margin-top: 11px;
   opacity: .2;
   position: absolute;
   width: 14px; }
-  .search-submit-icon:hover {
+  .search-submit-icon:hover, .gv-search-submit-icon:hover {
     opacity: .8; }
 
+.search-submit-icon {
+  margin-top: 11px; }
+
+.gv-search-submit-icon {
+  margin-top: 6px; }
+
 div.headerBar {
   background-color: #686766;
   color: white;
@@ -2544,7 +2576,7 @@ div.breadcrumb a.disabledBread {
   width: 100%; }
 
 .user-menu-img {
-  background-color: lightgray;
+  background-color: lightgrey;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2650,6 +2682,18 @@ div.breadcrumb a.disabledBread {
 .modal-body {
   color: #736b68;
   font-size: 14px; }
+  .modal-body th th.actionCell, .modal-body th th.keyCell, .modal-body th .valueCell {
+    text-align: center; }
+  .modal-body th.actionCell {
+    width: 30px; }
+  .modal-body th.keyCell {
+    width: 170px; }
+    .modal-body th.keyCell input {
+      width: 150px; }
+  .modal-body th .valueCell {
+    width: 300px; }
+    .modal-body th .valueCell input {
+      width: 290px; }
 
 .modal-backdrop,
 .modal-backdrop.fade.in {
@@ -2706,17 +2750,6 @@ div.breadcrumb a.disabledBread {
 .show-collection .tab-content {
   min-height: 200px; }
 
-div img.searchSubmitIcon {
-  height: 14px;
-  margin-left: -18px;
-  margin-top: 11px;
-  opacity: .2;
-  position: absolute;
-  width: 14px; }
-
-.searchField {
-  margin-left: 15px; }
-
 .shortcuts {
   font-size: 11px;
   font-weight: 200; }
@@ -3121,7 +3154,7 @@ div img.searchSubmitIcon {
   color: #66ff00; }
 
 .jqconsole-cursor {
-  background-color: gray; }
+  background-color: grey; }
 
 .jqconsole-blurred .jqconsole-header .jqconsole-cursor {
   color: #c4cccc; }
@@ -3296,6 +3329,77 @@ textarea,
 .dataTables_info {
   display: none; }
 
+div.gv_zoom_widget {
+  height: 300px;
+  left: 95px;
+  position: absolute;
+  top: 20px;
+  width: 40px;
+  z-index: 1; }
+  div.gv_zoom_widget div.gv_zoom_buttons_bg {
+    background-image: url("../img/gv_button_bg_reverse.png");
+    background-size: contain;
+    height: 40px;
+    margin-bottom: 20px; }
+  div.gv_zoom_widget div.gv_zoom_slider {
+    background: #333232;
+    height: 200px;
+    margin: 0 17px;
+    width: 4px; }
+  div.gv_zoom_widget a.ui-slider-handle {
+    background: white;
+    border-color: #686766;
+    height: .5em;
+    left: -.55em;
+    outline: none; }
+    div.gv_zoom_widget a.ui-slider-handle.ui-state-hover {
+      outline-color: #333232; }
+  div.gv_zoom_widget .ui-state-default {
+    background: #f6f6f6; }
+
+div.gv_colour_list {
+  max-height: 680px;
+  overflow: auto;
+  position: absolute;
+  right: 26px;
+  text-align: right;
+  top: 20px;
+  z-index: 1; }
+  div.gv_colour_list li {
+    background-color: transparent;
+    float: none;
+    padding: 2px 6px; }
+
+svg.graph-viewer {
+  background-color: white;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  left: 74px;
+  position: absolute;
+  top: 12px;
+  z-index: 0; }
+  svg.graph-viewer text {
+    font-size: 16px;
+    pointer-events: none; }
+
+div.gv-background {
+  height: 685px;
+  position: relative; }
+
+.link > line {
+  stroke-width: 2; }
+
+div.gv-colour-list {
+  max-height: 680px;
+  overflow: auto;
+  position: absolute;
+  right: 26px;
+  text-align: right;
+  top: 20px;
+  z-index: 1; }
+  div.gv-colour-list li {
+    float: none;
+    padding: 2px 6px; }
+
 table.dataTable thead th {
   font-weight: 400 !important;
   padding: 10px 14px; }
diff --git a/js/apps/system/aardvark/frontend/scss/style.scss b/js/apps/system/aardvark/frontend/scss/style.scss
index 9d13861444..5ae9fda9ff 100644
--- a/js/apps/system/aardvark/frontend/scss/style.scss
+++ b/js/apps/system/aardvark/frontend/scss/style.scss
@@ -51,6 +51,8 @@
 @import 'alert';
 // logs
 @import 'logs';
+// Graph Viewer
+@import 'graphViewer';
 
 
 // Data Tables, TODO: might all be superflous
diff --git a/js/apps/system/aardvark/manifest.json b/js/apps/system/aardvark/manifest.json
index d12316baf7..31058a04be 100644
--- a/js/apps/system/aardvark/manifest.json
+++ b/js/apps/system/aardvark/manifest.json
@@ -125,10 +125,7 @@
         "frontend/css/select2.css",
         "frontend/css/jquery.dataTables.css",
         "frontend/css/nv.d3.css",
-        "frontend/css/documentsView.css",
-        "frontend/css/documentView.css",
         "frontend/css/swaggerView.css",
-        "frontend/css/graphView.css",
         "frontend/css/jquery.snippet.css",
         "frontend/css/modal.css",
         "frontend/css/ansi.css",