diff --git a/web/karma.conf.js b/web/karma.conf.js
index 95613f77..e7e26081 100644
--- a/web/karma.conf.js
+++ b/web/karma.conf.js
@@ -18,13 +18,13 @@ module.exports = function(config) {
       'regression/javascript/test-main.js',
       {pattern: 'regression/javascript/**/*.js', included: false},
       {pattern: 'pgadmin/static/vendor/**/*.js', included: false},
-      {pattern: 'pgadmin/static/js/**/*.js', included: false}
+      {pattern: 'pgadmin/static/js/**/*.js', included: false},
+      {pattern: 'pgadmin/browser/static/js/**/*.js', included: false}
     ],
 
 
     // list of files to exclude
     exclude: [
-      'pgadmin/static/js/pgadmin.js',
       'pgadmin/static/vendor/**/*[Tt]est.js',
       'pgadmin/static/vendor/**/*[Ss]pec.js'
     ],
diff --git a/web/pgadmin/browser/static/js/menu.js b/web/pgadmin/browser/static/js/menu.js
index 913e074f..d1b48811 100644
--- a/web/pgadmin/browser/static/js/menu.js
+++ b/web/pgadmin/browser/static/js/menu.js
@@ -57,15 +57,51 @@ function(_, S, pgAdmin, $) {
           data: this.data
         }).addClass('menu-link');
 
+      this.is_disabled = this.disabled(node, item);
       if (this.icon) {
         url.append($('<i></i>', {'class': this.icon}));
       }
-      url.append($('<span></span>').text('  ' + this.label));
 
-      this.is_disabled = this.disabled(node, item);
+      var textSpan = $('<span data-test="menu-item-text"></span>').text('  ' + this.label);
+
+      url.append(textSpan);
+
       this.$el = $('<li/>')
         .addClass('menu-item' + (this.is_disabled ? ' disabled' : ''))
         .append(url);
+
+      this.applyStyle();
+    },
+
+    applyDisabledStyle: function () {
+      var span = this.$el.find('span');
+      var icon = this.$el.find('i');
+
+      span.addClass('font-gray-4');
+      span.removeClass('font-white');
+      icon.addClass('font-gray-4');
+      icon.removeClass('font-white');
+    },
+
+    applyEnabledStyle: function () {
+      var element = this.$el;
+      var span = this.$el.find('span');
+
+      span.addClass('font-white');
+      span.removeClass('font-gray-4');
+      element.find('i').addClass('font-white');
+      element.find('i').removeClass('font-gray-4');
+
+      span.mouseover(function () { element.addClass('bg-gray-5'); });
+      span.mouseout(function () { element.removeClass('bg-gray-5'); });
+    },
+
+    applyStyle: function () {
+      if (this.is_disabled) {
+        this.applyDisabledStyle();
+      } else {
+        this.applyEnabledStyle();
+      }
     },
 
     /*
@@ -84,6 +120,8 @@ function(_, S, pgAdmin, $) {
         this.$el.removeClass('disabled');
       }
 
+      this.applyStyle();
+
       this.context = {
         name: this.label,
         icon: this.icon || (this.module && this.module.type),
diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/css/bootstrap.overrides.css
index fd3ed6f3..7bf4fb87 100755
--- a/web/pgadmin/static/css/bootstrap.overrides.css
+++ b/web/pgadmin/static/css/bootstrap.overrides.css
@@ -131,7 +131,7 @@ iframe {
 
 .navbar-inverse > li > a,
 .navbar-inverse .navbar-nav > li > a {
-    color: #CACACA;
+    color: #FFF;
 }
 
 .navbar-inverse .navbar-brand {
@@ -146,6 +146,13 @@ iframe {
     color: #009DCF;
 }
 
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+    background: #555 none;
+}
+
 .dropdown-menu > hr {
     margin-top: 0;
     margin-bottom: 0;
@@ -165,6 +172,12 @@ iframe {
     padding-left: 0px;
 }
 
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+    color: #FFFFFF;
+    background: #555 none;
+}
+
 .form-group fieldset {
     background-color: #F2F2F2;
     padding: 0px 0px 0px 5px;
@@ -377,8 +390,6 @@ button.btn:disabled {
 }
 
 .pg-prop-btn-group {
-  background-color: #D2D2D2;
-  border: 2px solid #A9A9A9;
   left: 0px;
   right: 0px;
   padding: 2px;
diff --git a/web/pgadmin/static/css/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css
index 91ae2000..9c9b81a0 100644
--- a/web/pgadmin/static/css/webcabin.overrides.css
+++ b/web/pgadmin/static/css/webcabin.overrides.css
@@ -26,7 +26,7 @@
   border-bottom: 1px none;
   height: 100%;
   padding-top: 10px;
-  background-color: #E2E2E2;
+  background-color: #e8e8e8;
 }
 
 .wcFrameCenter {
@@ -266,7 +266,7 @@
 }
 
 .wcFrameTitleBar {
-  background-color: #E2E2E2;
+  background-color: #e8e8e8;
   height: 35px;
 }
 
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index 375b39d7..9cbe2b9d 100755
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -61,6 +61,7 @@
 
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.overrides.css') }}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pgadmin.css') }}"/>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pgadmin.style.css') }}"/>
     {% block css_link %}{% endblock %}
 
     <!-- Base template scripts -->
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index f098c726..4bb38c47 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -21,7 +21,7 @@
         <span class="sql-editor-busy-text wcLoadingLabel"></span>
     </div>
     <div class="sql-editor" data-trans-id="{{ uniqueId }}">
-        <div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
                         title="{{ _('Open File') }}">
diff --git a/web/pgadmin/tools/debugger/templates/debugger/direct.html b/web/pgadmin/tools/debugger/templates/debugger/direct.html
index d82df0bb..3e7bf2be 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/direct.html
+++ b/web/pgadmin/tools/debugger/templates/debugger/direct.html
@@ -34,7 +34,7 @@ try {
 </style>
 {% endif %}
 <nav class="navbar-inverse navbar-fixed-top">
-    <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group" role="toolbar" aria-label="">
+    <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
         <div class="btn-group" role="group" aria-label="">
             <button type="button" class="btn btn-default btn-step-into" title="{{ _('Step into') }}">
                 <i class="fa fa-indent"></i>
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 54e3688d..76654d33 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -349,9 +349,9 @@ li {
 }
 
 #datagrid .slick-header .slick-header-column.ui-state-default {
-  color: #ffffff;
+  color: #222222;
   padding: 4px 0 4px 6px;
-  background-color: #2c76b4;
+  background-color: #e8e8e8;
   border-bottom: 1px solid black;
 }
 
@@ -432,7 +432,7 @@ input.editor-checkbox:focus {
 
 /* color the first column */
 .sr .sc:first-child {
-    background-color: #2c76b4;
+    background-color: #e8e8e8;
 }
 
 #datagrid div.slick-header.ui-state-default {
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 597c4367..dcd4226f 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -1716,7 +1716,7 @@ define(
             self.gridView.query_tool_obj.setOption("readOnly", 'nocursor');
             var cm = self.gridView.query_tool_obj.getWrapperElement();
             if (cm) {
-              cm.className += ' cm_disabled';
+              cm.className += ' bg-gray-1 opacity-5';
             }
             self.disable_tool_buttons(true);
             self._execute_data_query();
diff --git a/web/regression/javascript/browser/menu_spec.js b/web/regression/javascript/browser/menu_spec.js
new file mode 100644
index 00000000..09f136fb
--- /dev/null
+++ b/web/regression/javascript/browser/menu_spec.js
@@ -0,0 +1,83 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2017, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+define(["browser/menu"
+], function () {
+  describe("MenuItem", function () {
+    var MenuItem = pgAdmin.Browser.MenuItem;
+    var menuItem;
+
+    describe("when we create a menu item", function () {
+      describe('and it is disabled', function () {
+        beforeEach(function () {
+          menuItem = new MenuItem({enable: false, icon: 'fa fa-car'});
+          menuItem.create_el({}, {});
+        });
+
+        it('should change the text color to gray', function () {
+          expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeTruthy();
+        });
+
+        it('should change the icon to gray', function () {
+          expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeTruthy();
+        });
+
+        describe('when becomes enabled', function () {
+          beforeEach(function () {
+            menuItem.enable = true;
+            menuItem.update({},{});
+          });
+
+          it('should change the text color to white', function () {
+            expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeFalsy();
+            expect(menuItem.$el.find('span').hasClass('font-white')).toBeTruthy();
+          });
+
+          it('should change the icon color to white', function () {
+            expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeFalsy();
+            expect(menuItem.$el.find('i').hasClass('font-white')).toBeTruthy();
+          });
+        });
+      });
+
+      describe('and it is enabled', function () {
+        beforeEach(function () {
+          menuItem = new MenuItem({enable: true, icon: 'fa fa-car'});
+          menuItem.create_el({}, {});
+        });
+
+        it('should change the text color to white', function () {
+          expect(menuItem.$el.find('span').hasClass('font-white')).toBeTruthy();
+        });
+
+        it('should change the icon to white', function () {
+          expect(menuItem.$el.find('i').hasClass('font-white')).toBeTruthy();
+        });
+
+        describe('when becomes disabled', function () {
+          beforeEach(function () {
+            menuItem.enable = false;
+            menuItem.update({},{});
+          });
+
+          it('should change the text color to gray', function () {
+            expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeTruthy();
+            expect(menuItem.$el.find('span').hasClass('font-white')).toBeFalsy();
+          });
+
+          it('should change the icon color to gray', function () {
+            expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeTruthy();
+            expect(menuItem.$el.find('i').hasClass('font-white')).toBeFalsy();
+          });
+        });
+      });
+    });
+
+  });
+});
diff --git a/web/regression/javascript/test-main.js b/web/regression/javascript/test-main.js
index fe28a5f8..421bb178 100644
--- a/web/regression/javascript/test-main.js
+++ b/web/regression/javascript/test-main.js
@@ -27,6 +27,7 @@ require.config({
   baseUrl: '/base',
 
   paths: {
+    'pgadmin': sourcesDir + 'js/pgadmin',
     'alertify': sourcesDir + 'vendor/alertifyjs/alertify',
     'jquery': sourcesDir + 'vendor/jquery/jquery-1.11.2',
     'jquery.ui': sourcesDir + 'vendor/jquery-ui/jquery-ui-1.11.3',
@@ -37,7 +38,8 @@ require.config({
     'slickgrid/slick.grid': sourcesDir + 'vendor/slickgrid/slick.grid',
     'slickgrid/slick.rowselectionmodel': sourcesDir + 'vendor/slickgrid/plugins/slick.rowselectionmodel',
     'translations': '/base/regression/javascript/fake_translations',
-    'sources': sourcesDir + 'js'
+    'sources': sourcesDir + 'js',
+    'browser': '/base/pgadmin/browser/static/js'
   },
 
   shim: {