diff --git a/web/package-lock.json b/web/package-lock.json
new file mode 100644
index 00000000..48e341a0
--- /dev/null
+++ b/web/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/web/package.json b/web/package.json
index a551af1d..05e127d3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,7 +33,8 @@
     "node-sass": "^4.5.3",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.1.0",
+    "sass-resources-loader": "^1.3.3",
     "style-loader": "^0.18.2",
     "uglifyjs-webpack-plugin": "^0.4.6",
     "url-loader": "^0.5.9",
diff --git a/web/pgadmin/browser/__init__.py b/web/pgadmin/browser/__init__.py
index 7bcf3648..5b5eedcd 100644
--- a/web/pgadmin/browser/__init__.py
+++ b/web/pgadmin/browser/__init__.py
@@ -67,11 +67,9 @@ class BrowserModule(PgAdminModule):
             ('static', 'vendor/codemirror/addon/dialog/dialog.css'),
             ('static', context_menu_file),
             ('static', wcdocker_file),
-            ('browser.static', 'css/browser.css'),
             ('browser.static', 'vendor/aciTree/css/aciTree.css')
         ]:
             stylesheets.append(url_for(endpoint, filename=filename))
-        stylesheets.append(url_for('browser.browser_css'))
         return stylesheets
 
     def get_own_javascripts(self):
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/templates/foreign_key/css/foreign_key.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/templates/foreign_key/css/foreign_key.css
index 7691d35d..35f6884d 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/templates/foreign_key/css/foreign_key.css
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/templates/foreign_key/css/foreign_key.css
@@ -13,6 +13,6 @@
   background-size: 20px !important;
   align-content: center;
   vertical-align: middle;
-  border-radius: 10px
+  border-radius: 10px;
   height: 1.3em;
 }
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.js
index bd0cbf46..1d84c36c 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.js
@@ -4,9 +4,7 @@ define('pgadmin.node.table_partition_utils', [
 ], function(gettext, $, _, Backbone, pgBrowser, Backform, Backgrid) {
 
   Backgrid.PartitionRow = Backgrid.Row.extend({
-    modelDuplicateColor: 'lightYellow',
-
-    modelUniqueColor: '#fff',
+    modelDuplicateClass: 'bg-model-duplicate',
 
     initialize: function () {
       Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -34,10 +32,10 @@ define('pgadmin.node.table_partition_utils', [
     },
     modelDuplicate: function() {
       $(this.el).removeClass('new');
-      this.el.style.backgroundColor = this.modelDuplicateColor;
+      $(this.el).addClass(this.modelDuplicateClass);
     },
     modelUnique: function() {
-      this.el.style.backgroundColor = this.modelUniqueColor;
+      $(this.el).removeClass(this.modelDuplicateClass);
     },
   });
 
diff --git a/web/pgadmin/browser/server_groups/servers/static/js/variable.js b/web/pgadmin/browser/server_groups/servers/static/js/variable.js
index 987c3bab..7a365cba 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/variable.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/variable.js
@@ -69,9 +69,7 @@ define([
        * variable name.
        */
     var VariableRow = Backgrid.Row.extend({
-      modelDuplicateColor: 'lightYellow',
-
-      modelUniqueColor: '#fff',
+      modelDuplicateClass: 'bg-model-duplicate',
 
       initialize: function () {
         Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -101,10 +99,10 @@ define([
       },
       modelDuplicate: function() {
         $(this.el).removeClass('new');
-        this.el.style.backgroundColor = this.modelDuplicateColor;
+        $(this.el).addClass(this.modelDuplicateClass);
       },
       modelUnique: function() {
-        this.el.style.backgroundColor = this.modelUniqueColor;
+        $(this.el).removeClass(this.modelDuplicateClass);
       },
 
     });
diff --git a/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss b/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
new file mode 100644
index 00000000..0059fc25
--- /dev/null
+++ b/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
@@ -0,0 +1,3 @@
+.bg-model-duplicate {
+  @extend .bg-warning-light;
+}
diff --git a/web/pgadmin/browser/static/css/browser.css b/web/pgadmin/browser/static/css/browser.css
index 26be9003..011c6334 100644
--- a/web/pgadmin/browser/static/css/browser.css
+++ b/web/pgadmin/browser/static/css/browser.css
@@ -23,12 +23,6 @@
     padding-bottom: 50px /* Offset the nav bar to ensure there's enough scroll space */
 }
 
-.browser-tab-bar {
-    padding-left: 5px;
-    padding-top: 5px;
-    background-color: #E6E6E6;
-}
-
 .browser-tab-panes {
     height: 100%;
 }
@@ -50,19 +44,6 @@
   display: table !important;
 }
 
-
-code,
-kbd,
-pre,
-samp,
-.CodeMirror pre {
-  font-family: 'Source Code Pro';
-}
-
-.sql-editor-grid-container {
-  font-family: 'Open Sans' !important;
-}
-
 .pg-login-icon {
   font-size: 16px;
 }
@@ -70,3 +51,12 @@ samp,
 .CodeMirror {
   font-size: 1em;
 }
+
+#pg-spinner .pg-sp-content {
+  position: absolute;
+  width: 100%;
+  top: 40%;
+}
+.pgadmin_header_logo {
+  cursor: default;
+}
diff --git a/web/pgadmin/browser/static/css/wizard.css b/web/pgadmin/browser/static/css/wizard.css
index 8d969715..b3843abf 100644
--- a/web/pgadmin/browser/static/css/wizard.css
+++ b/web/pgadmin/browser/static/css/wizard.css
@@ -3,19 +3,6 @@
   padding: 0px !important;
 }
 
-.wizard-header {
-  padding: 6px 10px!important;
-  min-height: 35px;
-  max-height: 35px;
-  border-bottom: 2px solid darkgray;
-  background-color: #2C76B4;
-  font-weight: bold;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
-  border-radius: 0;
-}
-
 .wizard-header h3 {
   font-size: 14px;
   display: inline-block;
@@ -70,19 +57,6 @@
 }
 
 /* Wizard Footer CSS */
-.pgadmin-wizard .footer {
-  background-color: #D2D2D2;
-  border-width: 2px 0px 0px 0px;
-  border-style: solid;
-  border-color: rgb(85, 85, 85);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-  padding: 0;
-}
-
 .pgadmin-wizard .footer .row {
   margin: 0 -6px 3px -6px;
 }
@@ -137,17 +111,6 @@ div.wizard-header.wizard-badge > div > div.col-sm-2 > button.ajs-maximized.ajs-m
   padding: 1.0em 0.1em;
 }
 
-/* Error message css */
-.pgadmin-wizard .error_msg_div {
-  background: #fff;
-  font-size: 13px;
-}
-
-.pgadmin-wizard .error_msg_div p {
-  background: #fff;
-  color: #b92c28;
-}
-
 /* In wizard select2 dropdown doesn't
  * popup because z-index of alertify
  * wizard is greater than the z-index
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index 7951f4ac..b955c592 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -348,7 +348,7 @@ define('pgadmin.browser', [
         '#dockerContainer', {
           allowContextMenu: true,
           allowCollapse: false,
-          themePath: '../static/css/',
+          themePath: '../static/css',
           theme: 'webcabin.overrides.css',
         });
       if (obj.docker) {
diff --git a/web/pgadmin/browser/static/js/menu.js b/web/pgadmin/browser/static/js/menu.js
index d236a897..985bc120 100644
--- a/web/pgadmin/browser/static/js/menu.js
+++ b/web/pgadmin/browser/static/js/menu.js
@@ -80,9 +80,9 @@ define([
       var icon = this.$el.find('i');
 
 
-      span.addClass('font-gray-4');
+      span.addClass('text-gray');
       span.removeClass('font-white');
-      icon.addClass('font-gray-4');
+      icon.addClass('text-gray');
       icon.removeClass('font-white');
     },
 
@@ -91,15 +91,15 @@ define([
       var span = this.$el.find('span');
 
       span.addClass('font-white');
-      span.removeClass('font-gray-4');
+      span.removeClass('text-gray');
       element.find('i').addClass('font-white');
-      element.find('i').removeClass('font-gray-4');
+      element.find('i').removeClass('text-gray');
 
       span.on('mouseover',() => {
-        element.addClass('bg-gray-5');
+        element.addClass('bg-gray-dark');
       });
       span.on('mouseout',() => {
-        element.removeClass('bg-gray-5');
+        element.removeClass('bg-gray-dark');
       });
     },
 
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index 24bf3064..3394696d 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -314,7 +314,7 @@ define('pgadmin.browser.node', [
 
           var onSessionInvalid = function(msg) {
             var alertMessage = '\
-              <div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">\
+              <div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">\
                 <div class="media-body media-middle">\
                   <div class="alert-icon error-icon">\
                     <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
@@ -1148,7 +1148,7 @@ define('pgadmin.browser.node', [
               },
             });
 
-            createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-2 border-gray-3');
+            createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light');
           }
           j.append(content);
         }.bind(panel),
@@ -1404,7 +1404,7 @@ define('pgadmin.browser.node', [
                   }, 0);
                 });
               },
-            }], 'footer', 'pg-prop-btn-group-below bg-gray-2 border-gray-3');
+            }], 'footer', 'pg-prop-btn-group-below bg-gray-lighter border-gray-light');
           }
 
           // Create status bar.
diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js
index 393394d2..abeee32b 100644
--- a/web/pgadmin/browser/static/js/node.ui.js
+++ b/web/pgadmin/browser/static/js/node.ui.js
@@ -38,7 +38,7 @@ define([
       ].join(''));
 
       let $btnContainer = $(
-        '<div style="padding: 3px 0px; background-color: #2C76B4; margin-bottom: 3px;">'
+        '<div style="">'
       ).append($selectAll).append($unselectAll);
 
       if (!this.$element.prop('multiple')) {
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index adbe9183..68579b59 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -106,7 +106,7 @@ define([
       '        </div>' +
       '      </div>' +
       '      <div class="col-sm-12 pg-prop-status-bar" style="visibility:hidden">' +
-      '        <div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">' +
+      '        <div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">' +
       '          <div class="media-body media-middle">' +
       '            <div class="alert-icon error-icon">' +
       '              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>' +
diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss
new file mode 100644
index 00000000..c1b9fccd
--- /dev/null
+++ b/web/pgadmin/browser/static/scss/_browser.scss
@@ -0,0 +1,45 @@
+.browser-tab-bar {
+    padding-left: 5px;
+    padding-top: 5px;
+    background-color: $color-gray-lighter;
+}
+
+code,
+kbd,
+pre,
+samp,
+.CodeMirror pre {
+  font-family: $font-family-editor;
+}
+
+.sql-editor-grid-container {
+  font-family: $font-family-primary !important;
+}
+
+.select2-btn-container {
+    padding: 3px 0px;
+    background-color: $color-primary;
+    margin-bottom: 3px;
+}
+
+#pg-spinner {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: $color-bg-inverse;
+  opacity: 0.6;
+  z-index: 1056;
+}
+
+#pg-spinner .pg-sp-icon {
+  font-size: 50px;
+  text-align: center;
+  color: $color-gray-light;
+}
+
+#pg-spinner .pg-sp-text {
+  font-size: 20px;
+  text-align: center;
+  color: $color-fg-inverse;
+}
diff --git a/web/pgadmin/browser/static/scss/_wizard.scss b/web/pgadmin/browser/static/scss/_wizard.scss
new file mode 100644
index 00000000..ee0899f4
--- /dev/null
+++ b/web/pgadmin/browser/static/scss/_wizard.scss
@@ -0,0 +1,36 @@
+.wizard-header {
+  padding: 6px 10px!important;
+  min-height: 35px;
+  max-height: 35px;
+  border-bottom: 2px solid $color-gray-light;
+  background-color: $color-primary;
+  font-weight: bold;
+  color: $color-fg-inverse;
+  font-size: 14px;
+  font-weight: bold;
+  border-radius: 0;
+}
+
+.pgadmin-wizard .footer {
+  background-color: $color-gray-lighter;
+  border-width: 2px 0px 0px 0px;
+  border-style: solid;
+  border-color:  $color-gray-dark;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Error message css */
+.pgadmin-wizard .error_msg_div {
+  background: $color-bg;
+  font-size: 13px;
+}
+
+.pgadmin-wizard .error_msg_div p {
+  background: $color-bg;
+  color: $color-danger;
+}
diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html
index 76c3e4c7..b1280422 100644
--- a/web/pgadmin/browser/templates/browser/index.html
+++ b/web/pgadmin/browser/templates/browser/index.html
@@ -91,35 +91,6 @@ window.onload = function(e){
 {% endblock %}
 
 {% block body %}
-<style>
-#pg-spinner {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  opacity: 0.6;
-  z-index: 1056;
-}
-#pg-spinner .pg-sp-content {
-  position: absolute;
-  width: 100%;
-  top: 40%;
-}
-#pg-spinner .pg-sp-icon {
-  font-size: 50px;
-  text-align: center;
-  color: #ccc;
-}
-#pg-spinner .pg-sp-text {
-  font-size: 20px;
-  text-align: center;
-  color: #fff;
-}
-.pgadmin_header_logo {
-  cursor: default;
-}
-</style>
 <div id="pg-spinner">
   <div class="pg-sp-content">
     <div class="row"><div class="col-xs-12 pg-sp-icon fa fa-spinner fa-pulse"></div></div>
diff --git a/web/pgadmin/dashboard/__init__.py b/web/pgadmin/dashboard/__init__.py
index ffd4a7bc..249a24da 100644
--- a/web/pgadmin/dashboard/__init__.py
+++ b/web/pgadmin/dashboard/__init__.py
@@ -44,9 +44,7 @@ class DashboardModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
-            url_for('dashboard.static', filename='css/dashboard.css')
-        ]
+        stylesheets = []
         return stylesheets
 
     def get_panels(self):
diff --git a/web/pgadmin/dashboard/static/css/dashboard.css b/web/pgadmin/dashboard/static/css/dashboard.css
index 61174f33..e0060203 100644
--- a/web/pgadmin/dashboard/static/css/dashboard.css
+++ b/web/pgadmin/dashboard/static/css/dashboard.css
@@ -14,16 +14,6 @@
     cursor: pointer;
 }
 
-.dashboard-icon {
-    color: black;
-}
-
-.dashboard-tab-container {
-    border-left: 1px solid #E2E2E2;
-    border-right: 1px solid #E2E2E2;
-    border-bottom: 1px solid #E2E2E2;
-}
-
 .dashboard-tab-panel > li > a {
     padding: 0px 15px !important;
 }
@@ -42,14 +32,6 @@
     line-height: 30px;
 }
 
-.dashboard-tab-btn-group {
-    background-color: #D2D2D2;
-    border: 2px solid #A9A9A9;
-    left: 0px;
-    right: 0px;
-    padding: 2px;
-}
-
 .dashboard-tab-btn-group button {
     padding: 5px;
 }
@@ -72,17 +54,6 @@
     height: 150px;
 }
 
-.graph-error {
-    background-color: #E2E2E2;
-    padding-top: 20px
-}
-
-.grid-error {
-    background-color: #E2E2E2;
-    padding-top: 20px;
-    padding-bottom: 40px;
-}
-
 .icon-postgres:before {
     height: 43px;
     margin-top: 13px;
@@ -114,47 +85,10 @@
   padding: 0px;
 }
 
-.dashboard-tab-container .subnode-dialog {
-  background-color: white;
-  border: 0px solid #e8e8e8;
-}
-
 .dashboard-tab-container .subnode-dialog .control-label {
   font-weight: inherit;
 }
 
-.dashboard-tab-container .sub-node-form {
-  padding: 0px 0px 0px 1px;
-  background-color: #f8f8f8;
-}
-
-.dashboard-tab-container .subnode-body {
-  background-color: #f8f8f8;
-}
-
-.dashboard-tab-container .sub-node-form > .nav-tabs {
-  background-color: #f8f8f8 !important;
-}
-
-.dashboard-tab-container .subnode-dialog .nav > li > a {
-  font-weight: bold;
-  border-color: #f8f8f8;
-}
-
-.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a,
-.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a:hover {
-  border-top: 1px solid #cccccc;
-  border-left: 1px solid #cccccc;
-  border-right: 1px solid #cccccc;
-  margin-bottom: -1px;
-  z-index: 10;
-}
-
-.dashboard-tab-container .backgrid .editor {
-  background-color: #f8f8f8 !important;
-  border-bottom-color: #f8f8f8;
-}
-
 .dashboard-tab-container .backgrid.presentation td.editable:not(.edit-cell) {
   padding-right: 25px
 }
@@ -163,10 +97,6 @@
   padding: 5px;
 }
 
-.dashboard-tab-container .subnode-dialog .tab-pane {
-  border: 1px solid #cccccc;
-}
-
 .dashboard-container .delete-cell .fa-times-circle:before {
   font-size: 14px;
 }
diff --git a/web/pgadmin/dashboard/static/scss/_dashboard.scss b/web/pgadmin/dashboard/static/scss/_dashboard.scss
new file mode 100644
index 00000000..2bc71135
--- /dev/null
+++ b/web/pgadmin/dashboard/static/scss/_dashboard.scss
@@ -0,0 +1,69 @@
+.dashboard-icon {
+    color: $color-fg;
+}
+
+.dashboard-tab-container {
+    border-left: 1px solid $color-gray-lighter;
+    border-right: 1px solid $color-gray-lighter;
+    border-bottom: 1px solid $color-gray-lighter;
+}
+
+.dashboard-tab-btn-group {
+    background-color: $color-gray-light;
+    border: 2px solid  $color-gray;
+    left: 0px;
+    right: 0px;
+    padding: 2px;
+}
+
+.graph-error {
+    background-color: $color-gray-lighter;
+    padding-top: 20px
+}
+
+.grid-error {
+    background-color: $color-gray-lighter;
+    padding-top: 20px;
+    padding-bottom: 40px;
+}
+
+.dashboard-tab-container .subnode-dialog {
+  background-color: $color-bg;
+  border: 0px solid $color-gray-lighter;
+}
+
+.dashboard-tab-container .sub-node-form {
+  padding: 0px 0px 0px 1px;
+  background-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-body {
+  background-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .sub-node-form > .nav-tabs {
+  background-color: $color-gray-lighter !important;
+}
+
+.dashboard-tab-container .subnode-dialog .nav > li > a {
+  font-weight: bold;
+  border-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a,
+.dashboard-tab-container .subnode-dialog .nav-tabs > li.active > a:hover {
+  border-top: 1px solid $color-gray-lighter;
+  border-left: 1px solid $color-gray-lighter;
+  border-right: 1px solid $color-gray-lighter;
+  margin-bottom: -1px;
+  z-index: 10;
+}
+
+.dashboard-tab-container .backgrid .editor {
+  background-color: $color-gray-lighter !important;
+  border-bottom-color: $color-gray-lighter;
+}
+
+.dashboard-tab-container .subnode-dialog .tab-pane {
+  border: 1px solid $color-gray-lighter;
+}
diff --git a/web/pgadmin/misc/__init__.py b/web/pgadmin/misc/__init__.py
index ad4f9254..3fb3e1e4 100644
--- a/web/pgadmin/misc/__init__.py
+++ b/web/pgadmin/misc/__init__.py
@@ -39,9 +39,6 @@ class MiscModule(PgAdminModule):
 
     def get_own_stylesheets(self):
         stylesheets = []
-        stylesheets.append(
-            url_for('misc.static', filename='explain/css/explain.css')
-        )
         return stylesheets
 
     def register_preferences(self):
diff --git a/web/pgadmin/misc/bgprocess/__init__.py b/web/pgadmin/misc/bgprocess/__init__.py
index ce0d5390..9239cb6a 100644
--- a/web/pgadmin/misc/bgprocess/__init__.py
+++ b/web/pgadmin/misc/bgprocess/__init__.py
@@ -34,9 +34,7 @@ class BGProcessModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
-            url_for('bgprocess.static', filename='css/bgprocess.css')
-        ]
+        stylesheets = []
         return stylesheets
 
     def get_exposed_url_endpoints(self):
diff --git a/web/pgadmin/misc/bgprocess/static/css/bgprocess.css b/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
index 4fd1bd93..59ffc883 100644
--- a/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
+++ b/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
@@ -2,36 +2,11 @@
   padding: 0px !important;
 }
 
-.ajs-bg-bgprocess > .pg-bg-bgprocess {
-  background-color: #2C76B4;
-  color: #FFFFFF;
-  padding: 0px;
-  border-radius: 5px;
-  text-align: left;
-}
-
 .ajs-bg-bgprocess .col-xs-12 {
   padding-right: 5px;
   padding-left: 5px;
 }
 
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
-  background-color: #333;
-  margin-top: 0px;
-  margin-bottom: 5px;
-  padding: 5px;
-  padding-right: 20px;
-  white-space: pre-wrap;
-  text-align: center;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
-  font-family: "Source Code Pro";
-  white-space: nowrap;
-}
-
 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status {
   padding: 2px;
   margin: 5px;
@@ -50,61 +25,11 @@
   user-select: text;
 }
 
-.pg-bg-etime {
-  width: 100%;
-  display: block;
-  font-size: 95%;
-  padding: 5px;
-  font-weight: bold;
-  color: #000;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-  background-color: #E2E2E2;
-  margin-top: 10px;
-  margin-bottom: 5px;
-}
-
-.pg-bg-click {
-  color: #E2E2E2;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.pg-bg-click:hover {
-  color: #333;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-success,
-.bg-process-status .bg-bgprocess-success {
-  color: green;
-  font-weight: bold;
-}
-
-.bg-process-status .bg-bgprocess-failed {
-  color: red;
-  font-weight: bold;
-}
-
-.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
-  color: black;
-  background-color: #E99595;
-}
-
 .pg-bg-cmd {
   color: #4156CC;
   font-style: italic;
 }
 
-.pg-panel-content div.bg-process-watcher.col-xs-12 {
-  height: 100%;
-  padding: 0px 0px 0px 0px;
-  WebkitTransition: all 1s;
-  transition: all 1s;
-  background-color: #D9EDF7;
-}
-
 ol.pg-bg-process-logs {
   padding: 5px 10px 5px 60px;
   height: 100%;
@@ -119,21 +44,6 @@ ol.pg-bg-process-logs {
   white-space: pre-wrap;
 }
 
-.pg-bg-res-out {
-  color: #337AB7;
-}
-
-.pg-bg-res-err {
-  color: rgba(212, 27, 57, 0.81);
-}
-
-.pg-panel-content .bg-process-details {
-  padding: 10px 15px;
-  min-height: 70px;
-  color: #000;
-  background-color: #E2E2E2;
-}
-
 .pg-panel-content .bg-process-stats p{
   display: inline;
   padding-left: 5px;
@@ -141,24 +51,12 @@ ol.pg-bg-process-logs {
   font-size: 13px;
 }
 
-.pg-panel-content .bg-process-footer {
-  border-top: 1px solid #ccc;
-  padding: 10px 15px;
-  position: absolute;
-  bottom: 0;
-  background-color: #E2E2E2;
-}
-
 .pg-panel-content .bg-process-footer p {
   display: inline;
   padding-left: 5px;
   font-size: 13px;
 }
 
-.pg-panel-content .bg-process-footer b, .bg-process-stats span b {
-  color: #333;
-}
-
 .bg-process-footer .bg-process-status {
   padding-left: 0;
 }
@@ -173,21 +71,6 @@ ol.pg-bg-process-logs {
   opacity: 0.5;
 }
 
-.pg-bg-bgprocess .bg-close {
-  display: inline-block;
-  position: absolute;
-  height: 25px;
-  width: 25px;
-  right: -12px;
-  top: 3px;
-  padding: 2px;
-  border: 2px solid #1f5fa6;
-  border-radius: 4px;
-  opacity: 0.5;
-  background-color: white;
-  color: red;
-}
-
 .pg-bg-bgprocess:hover .bg-close {
   opacity: 0.95;
 }
diff --git a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
new file mode 100644
index 00000000..689a8d43
--- /dev/null
+++ b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
@@ -0,0 +1,117 @@
+.ajs-bg-bgprocess > .pg-bg-bgprocess {
+  background-color: $color-primary;
+  color: $color-fg-inverse;
+  padding: 0px;
+  border-radius: 5px;
+  text-align: left;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
+  background-color:  $color-gray-dark;
+  margin-top: 0px;
+  margin-bottom: 5px;
+  padding: 5px;
+  padding-right: 20px;
+  white-space: pre-wrap;
+  text-align: center;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
+  font-family: $font-family-editor;
+  white-space: nowrap;
+}
+
+.pg-bg-etime {
+  width: 100%;
+  display: block;
+  font-size: 95%;
+  padding: 5px;
+  font-weight: bold;
+  color: $color-fg;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+  background-color: $color-gray-lighter;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.pg-bg-click {
+  color: $color-gray-lighter;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.pg-bg-click:hover {
+  color:  $color-gray-dark;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-success,
+.bg-process-status .bg-bgprocess-success {
+  color: $color-success-light;
+  font-weight: bold;
+}
+
+.bg-process-status .bg-bgprocess-failed {
+  color: $color-danger;
+  font-weight: bold;
+}
+
+.ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
+  color: $color-fg;
+  background-color: $color-danger-light;
+}
+
+.pg-panel-content div.bg-process-watcher.col-xs-12 {
+  height: 100%;
+  padding: 0px 0px 0px 0px;
+  WebkitTransition: all 1s;
+  transition: all 1s;
+  background-color: $color-primary-lighter;
+}
+
+.pg-bg-res-out {
+  color: $color-primary;
+}
+
+.pg-bg-res-err {
+  color: rgba($color-danger, 0.81);
+}
+
+.pg-panel-content .bg-process-details {
+  padding: 10px 15px;
+  min-height: 70px;
+  color: $color-fg;
+  background-color: $color-gray-lighter;
+}
+
+
+.pg-panel-content .bg-process-footer {
+  border-top: 1px solid $color-gray-light;
+  padding: 10px 15px;
+  position: absolute;
+  bottom: 0;
+  background-color: $color-gray-lighter;
+}
+
+.pg-panel-content .bg-process-footer b, .bg-process-stats span b {
+  color:  $color-gray-dark;
+}
+
+.pg-bg-bgprocess .bg-close {
+  display: inline-block;
+  position: absolute;
+  height: 25px;
+  width: 25px;
+  right: -12px;
+  top: 3px;
+  padding: 2px;
+  border: 2px solid $color-primary;
+  border-radius: 4px;
+  opacity: 0.5;
+  background-color: $color-bg;
+  color: $color-danger;
+}
diff --git a/web/pgadmin/misc/file_manager/__init__.py b/web/pgadmin/misc/file_manager/__init__.py
index 32afb5e3..1cb7da80 100644
--- a/web/pgadmin/misc/file_manager/__init__.py
+++ b/web/pgadmin/misc/file_manager/__init__.py
@@ -137,8 +137,7 @@ class FileManagerModule(PgAdminModule):
 
     def get_own_stylesheets(self):
         return [
-            url_for('static', filename='vendor/jquery.dropzone/dropzone.css'),
-            url_for('file_manager.static', filename='css/file_manager.css')
+            url_for('static', filename='vendor/jquery.dropzone/dropzone.css')
         ]
 
     def get_own_menuitems(self):
diff --git a/web/pgadmin/misc/file_manager/static/css/file_manager.css b/web/pgadmin/misc/file_manager/static/css/file_manager.css
index 6e76795f..66ea7563 100644
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -28,11 +28,6 @@
   overflow: hidden;
 }
 
-#uploader h1 b {
-  font-weight: normal;
-  color: #999;
-}
-
 .uploadresponse {
   display: none;
 }
@@ -42,13 +37,6 @@
   overflow: auto;
   /* no margin or border allowed */
 }
-.file_listing #contents.grid li.selected {
-  border: 1px solid #D9EDF7;
-}
-
-.file_listing #contents.grid li.selected, .fileinfo #contents tbody tr.selected {
-  background: #D9EDF7 !important;
-}
 
 .fileinfo #contents li .fm_file_rename,
 .fileinfo table#contents tr td:first-child input.fm_file_rename {
@@ -75,10 +63,6 @@
   margin-bottom: 0;
 }
 
-.fileinfo table#contents tr td p {
-  font-family: "Open Sans";
-}
-
 .fileinfo > h1 {
   font-size: 16px;
   margin: 100px auto;
@@ -90,24 +74,10 @@
   margin: 50px auto;
 }
 
-.fm_folder {
-  font-size: xx-large !important;
-  color: rgb(255, 204, 0);
-}
-
-.fm_drive {
-  font-size: xx-large !important;
-  color: darkgray;
-}
-
 .fm_file {
   font-size: xx-large !important;
 }
 
-.file_manager button {
-  background-color: #C0C0C0;
-}
-
 .file_manager h1 {
   font-size: medium;
 }
@@ -133,37 +103,6 @@
 /** Opera hack */
 x:-o-prefocus, .file-input-container {top:16px;width:198px;}
 
-.newfile {
-  position: absolute;
-  top:0;
-  left: 3px;
-  right:0;
-  width: 152px;
-  height:23px;
-  opacity:0;  filter: alpha(opacity=0);
-  cursor: pointer;
-  border:1px solid blue;
-}
-
-.alt-fileinput {
-  display: inline;
-  wrap: no-wrap;
-}
-
-.filepath {
-  background-color: #F4F1ED;
-  border: 1px solid #dcdcdc;
-  margin: 0;
-  padding: 0.1em 0.3em;
-  line-height: 1.7em;
-  -webkit-border-top-left-radius: 6px;
-  -webkit-border-bottom-left-radius: 6px;
-  -moz-border-radius-topleft: 6px;
-  -moz-border-radius-bottomleft: 6px;
-  border-top-left-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-
 @-moz-document url-prefix() {
   .filepath {
     padding:0.2em 0.3em;
@@ -176,20 +115,6 @@ x:-o-prefocus, .file-input-container {top:16px;width:198px;}
   text-align: left;
 }
 
-.file_listing #contents.grid li {
-  display: block;
-  float: left;
-  width: 100px;
-  height: 80px;
-  text-align: center;
-  overflow: hidden;
-  margin-bottom: 10px;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  border-radius: 2px;
-  border: 1px solid #fff;
-}
-
 div.clip {
   width: 30px;
   height: 30px;
@@ -214,25 +139,6 @@ div.clip {
   white-space: nowrap;
 }
 
-.file_listing #contents.list thead {
-  background: rgb(244,241,237); /* Old browsers */
-  background: -moz-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%, rgba(44, 118, 180, 0.98) 100%); /* FF3.6+ */
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44, 118, 180, 0.71)), color-stop(100%,rgba(44, 118, 180, 0.98))); /* Chrome,Safari4+ */
-  background: -webkit-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Chrome10+,Safari5.1+ */
-  background: -o-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* Opera 11.10+ */
-  background: -ms-linear-gradient(top, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%); /* IE10+ */
-  background: linear-gradient(to bottom, rgba(44, 118, 180, 0.71) 0%,rgba(44, 118, 180, 0.98) 100%);
-  border-bottom: 1px solid #ccc;
-  display: inline-block;
-  width: 100%;
-}
-
-.file_listing #contents.list th {
-  font-weight: bold;
-  cursor: pointer;
-  color: #fff;
-}
-
 .file_listing #contents.list td:first-child {
   display: table-cell;
   padding-left: 0;
@@ -242,31 +148,10 @@ div.clip {
   background-position: 3px center;
 }
 
-.file_listing #contents.list td.tbl_folder:first-child:before {
-  margin-right: 5px;
-  color: rgb(255, 204, 0);
-}
-
 .file_listing #contents.list td.tbl_file:first-child:before {
   margin-right: 5px;
 }
 
-.file_listing #contents.list td.tbl_drive:first-child:before {
-  color: darkgray;
-  margin-right: 5px;
-}
-
-.file_listing #contents.list tbody tr:nth-child(even):hover {
-  background-color: #f5f5f5 !important;
-}
-
-.file_listing #contents.grid li:hover {
-  border: 1px solid #E5E5E5;
-  background-color: #F7F7F7;
-  cursor: pointer;
-  height: 80px;
-}
-
 .meta {
   display: none;
 }
@@ -322,39 +207,6 @@ button.list span {
   top: 0;
 }
 
-.btn-group.filemanager-btn-group .btn:not(:first-child):not(:last-child),
-.btn-group.filemanager-path-group .btn:not(:first-child):not(:last-child) {
-  border-left: 1px solid #A9A9A9;
-}
-
-.file_manager #uploader .filemanager-path-group {
-  padding: 0;
-  display: block;
-  border: 1px solid darkgrey;
-  height: 30px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  float: left;
-  margin-right: 10px;
-  background: #EEE;
-}
-
-.file_manager #uploader .btn-group .btn[disabled] {
-  color: #888;
-  background-color: #ccc;
-}
-
-.file_manager #uploader .filemanager-btn-group {
-  border: 1px solid darkgrey;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  width: auto;
-  float: left;
-  overflow: hidden;
-}
-
 .file_manager .btn-group {
   margin: 2px 3px;
 }
@@ -381,14 +233,6 @@ button.list span {
   width: 100%;
 }
 
-.file_manager .fileinfo #contents tbody tr:nth-child(even) {
-  background: #eee;
-}
-
-.file_manager .fileinfo #contents thead tr th:not(:first-child) {
-  border-left: 1px solid #fff;
-}
-
 .file_manager .fileinfo #contents thead tr th:nth-child(1),
 .file_manager .fileinfo #contents tbody tr td:nth-child(1) {
   position: relative;
@@ -437,45 +281,14 @@ button.list span {
   cursor: pointer;
 }
 
-.file_manager .upload_file {
-  display: none;
-  z-index: 1;
-  margin-bottom: auto;
-  top: 0;
-  margin-top: 0;
-  height: calc(100% - 5px);
-  width: 100%;
-  border: none;
-  position: absolute;
-  bottom: 0;
-  background-color: black;
-  padding: 0px;
-  padding-top: 22px;
-  padding-left: 10px;
-}
-
 .file_manager .upload_file #dropzone-container {
   height: 100%;
 }
 
-.file_manager .upload_file #multiple-uploads {
-  height: calc(100% - 20px);
-  background: #000;
-  color: #fff;
-  padding: 0px !important;
-  overflow: auto;
-  width: 100%;
-}
-
 .file_manager .upload_file #multiple-uploads .dz-message {
   text-align: center;
 }
 
-.fileinfo .prompt-info {
-  text-align: center;
-  color: #fff;
-}
-
 .file_manager #uploader .btn-group .show_selected_file {
   vertical-align: middle;
   text-align: left;
@@ -487,27 +300,6 @@ button.list span {
   white-space: nowrap;
 }
 
-.fileinfo .file_listing {
-  display: block;
-  height: calc(100% - 35px);
-  border: 1px solid #ccc;
-  border-bottom: none;
-  font-size: 12px;
-}
-
-.fileinfo .allowed_file_types {
-  display: block;
-  height: 25px;
-  position: absolute;
-  right: 0;
-  border-top: 1px solid #ccc;
-  padding-top: 4px;
-  bottom: 4px;
-  width: 100%;
-  background: #fff;
-  white-space: nowrap;
-}
-
 .allowed_file_types .create_input {
   position: absolute;
   left: 5px;
@@ -546,27 +338,6 @@ button.list span {
   float: right;
 }
 
-.upload_file .file_upload_main {
-  position: relative;
-  height: 127px;;
-  width: 120px;
-  display: inline-block;
-  margin: 0 15px 15px 0 !important;
-  border: 1px solid white;
-  position: relative;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  background: #fff;
-  margin: 2px;
-  opacity: 1;
-}
-
-.upload_file .file_upload_main .show_error {
-  padding: 10px 0 0 10px;
-  color: #000;
-}
-
 .upload_file .file_upload_main .show_error p.size {
   text-align: center;
 }
@@ -582,112 +353,10 @@ button.list span {
   margin: 0;
 }
 
-.file_upload_main .dz-progress {
-  float: left;
-  width: 100%;
-  height: 21px !important;
-  border: 1px solid #8a6d3b;
-  border-radius: 0 !important;
-  -moz-border-radius: 0 !important;
-  -webkit-border-radius: 0 !important;
-}
-
-.file_upload_main .dz-progress .dz-upload {
-  background: #d9edf7 !important;
-  text-align: center;
-}
-
-.file_upload_main .dz-progress .dz-upload.success {
-  background: green !important;
-  float: left;
-  width: 100%;
-}
-
 a.dz-remove {
   display: none !important;
 }
 
-.upload_file .file_upload_main a.dz_file_remove {
-  position: absolute;
-  top: 0;
-  right: 0;
-  color: #FF0000;
-  cursor: pointer;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  font-size: large;
-}
-
-.upload_file .file_upload_main a.dz_file_remove:hover {
-  border: 1px solid black;
-}
-
-.fileinfo .fm_dimmer {
-  height: calc(100% - 32px);
-  display: none;
-  top: 0px;
-  background: black;
-  opacity: 0.5;
-  width: 100%;
-  position: absolute;
-  z-index: 3;
-}
-
-.fileinfo .delete_item, .fileinfo .replace_file {
-  display: none;
-  padding: 15px 15px;
-  opacity: 0.8;
-  color: #fff;
-  border: 1px solid darkgrey;
-  border-left: 0;
-  border-right: 0;
-  background: #000;
-  box-shadow: 1px 0px 3px 1px white;
-  font-weight: bold;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 4;
-}
-
-.fileinfo .delete_item span.pull-right .btn,
-.fileinfo .replace_file span.pull-right .btn {
-  padding: 0px 5px;
-  color: #000;
-  background: #fff;
-  font-size: 12px;
-  margin-right: 4px;
-}
-
-.upload_file .dz_cross_btn {
-  color: #fff;
-  font-size: x-large;
-  right: -4px;
-  position: absolute;
-  top: -1px;
-  background: transparent;
-  border: none;
-}
-
-.file_manager .fileinfo #contents .fm_lock_icon {
-  color: red;
-  position: absolute;
-  top: 6px;
-  right: 0;
-  left: 19px;
-  font-size: 16px;
-}
-
-.file_manager .fileinfo #contents .fa-lock.tbl_lock_icon {
-  color: red;
-  position: absolute;
-  left: 19px;
-  top: 5px;
-  font-size: 10px;
-}
-
 .fileinfo .activity {
   position: absolute;
   left: 50%;
@@ -696,11 +365,6 @@ a.dz-remove {
   z-index: 1;
 }
 
-.file_manager button.ON {
-  background: #F9F8F7;
-  border: 1px inset #ccc;
-}
-
 .file_listing .no_folder_found {
   text-align: center;
   position: absolute;
@@ -709,12 +373,6 @@ a.dz-remove {
   font-size: 14px;
 }
 
-.fileinfo .is_file_replace {
-  width: 100%;
-  height: 100%;
-  background: #ccc;
-}
-
 div.change_file_types span {
   padding-left:10px;
 }
@@ -722,39 +380,38 @@ div.change_file_types span {
 /* overall */
 .tablesorter .header,
 .tablesorter .tablesorter-header {
-	/* black (unsorted) double arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
-	background-repeat: no-repeat;
-	background-position: center right;
-	padding: 4px 18px 4px 4px;
-	white-space: normal;
-	cursor: pointer;
+    /* black (unsorted) double arrow */
+    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
+    background-repeat: no-repeat;
+    background-position: center right;
+    padding: 4px 18px 4px 4px;
+    white-space: normal;
+    cursor: pointer;
 }
 
 .tablesorter .headerSortUp,
 .tablesorter .tablesorter-headerSortUp,
 .tablesorter .tablesorter-headerAsc {
-	/* black asc arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
+    /* black asc arrow */
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
 }
 
 .tablesorter .headerSortDown,
 .tablesorter .tablesorter-headerSortDown,
 .tablesorter .tablesorter-headerDesc {
-	/* black desc arrow */
-	background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
+    /* black desc arrow */
+    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
 }
 
 .tablesorter thead .sorter-false {
-	background-image: none;
-	cursor: default;
-	padding: 4px;
+    background-image: none;
+    cursor: default;
+    padding: 4px;
 }
 
 /* table processing indicator */
 .tablesorter .tablesorter-processing {
-	background-position: center center !important;
-	background-repeat: no-repeat !important;
-	background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
+    background-position: center center !important;
+    background-repeat: no-repeat !important;
+    background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
 }
-
diff --git a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
new file mode 100644
index 00000000..ccd0b69e
--- /dev/null
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -0,0 +1,345 @@
+  #uploader h1 b {
+    font-weight: normal;
+    color:  $color-gray;
+  }
+
+  .file_listing #contents.grid li.selected {
+    border: 1px solid $color-primary-lighter;
+  }
+
+  .file_listing #contents.grid li.selected, .fileinfo #contents tbody tr.selected {
+    background: $color-primary-lighter !important;
+  }
+
+  .fileinfo table#contents tr td p {
+    font-family: $font-family-primary;
+  }
+
+  .fm_folder {
+    font-size: xx-large !important;
+    color: $color-warning;
+  }
+
+  .fm_drive {
+    font-size: xx-large !important;
+    color:  $color-gray;
+  }
+
+  .file_manager button {
+    background-color: $color-gray-light;
+  }
+
+  .newfile {
+    position: absolute;
+    top:0;
+    left: 3px;
+    right:0;
+    width: 152px;
+    height:23px;
+    opacity:0;  filter: alpha(opacity=0);
+    cursor: pointer;
+    border:1px solid $color-primary;
+  }
+
+  .alt-fileinput {
+    display: inline;
+    wrap: no-wrap;
+  }
+
+  .filepath {
+    background-color: $color-gray-lighter;
+    border: 1px solid $color-gray-lighter;
+    margin: 0;
+    padding: 0.1em 0.3em;
+    line-height: 1.7em;
+    -webkit-border-top-left-radius: 6px;
+    -webkit-border-bottom-left-radius: 6px;
+    -moz-border-radius-topleft: 6px;
+    -moz-border-radius-bottomleft: 6px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+
+  .file_listing #contents.grid li {
+    display: block;
+    float: left;
+    width: 100px;
+    height: 80px;
+    text-align: center;
+    overflow: hidden;
+    margin-bottom: 10px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+    border: 1px solid $color-bg;
+  }
+
+  .file_listing #contents.list thead {
+    background: $color-gray-lighter; /* Old browsers */
+    background: -moz-linear-gradient(top, rgba($color-primary, 0.71) 0%, rgba($color-primary, 0.98) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba($color-primary, 0.71)), color-stop(100%,rgba($color-primary, 0.98))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%); /* IE10+ */
+    background: linear-gradient(to bottom, rgba($color-primary, 0.71) 0%,rgba($color-primary, 0.98) 100%);
+    border-bottom: 1px solid $color-gray-lighter;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .file_listing #contents.list th {
+    font-weight: bold;
+    cursor: pointer;
+    color: $color-fg-inverse;
+  }
+
+
+  .file_listing #contents.list td.tbl_folder:first-child:before {
+    margin-right: 5px;
+    color: $color-warning;
+  }
+
+  .file_listing #contents.list td.tbl_drive:first-child:before {
+    color: $color-gray-light;
+    margin-right: 5px;
+  }
+
+  .file_listing #contents.list tbody tr:nth-child(even):hover {
+    background-color: $color-gray-lighter !important;
+  }
+
+  .file_listing #contents.grid li:hover {
+    border: 1px solid $color-gray-lighter;
+    background-color: $color-gray-lighter;
+    cursor: pointer;
+    height: 80px;
+  }
+
+
+  .btn-group.filemanager-btn-group .btn:not(:first-child):not(:last-child),
+  .btn-group.filemanager-path-group .btn:not(:first-child):not(:last-child) {
+    border-left: 1px solid $color-gray-light;
+  }
+
+  .file_manager #uploader .filemanager-path-group {
+    padding: 0;
+    display: block;
+    border: 1px solid  $color-gray;
+    height: 30px;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    float: left;
+    margin-right: 10px;
+    background: $color-gray-lighter;
+  }
+
+  .file_manager #uploader .btn-group .btn[disabled] {
+    color:  $color-gray-light;
+    background-color: $color-gray-lighter;
+  }
+
+  .file_manager #uploader .filemanager-btn-group {
+    border: 1px solid  $color-gray;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    width: auto;
+    float: left;
+    overflow: hidden;
+  }
+
+  .file_manager .fileinfo #contents tbody tr:nth-child(even) {
+    background: $color-gray-lighter;
+  }
+
+  .file_manager .fileinfo #contents thead tr th:not(:first-child) {
+    border-left: 1px solid $color-bg;
+  }
+
+  .file_manager .upload_file {
+    display: none;
+    z-index: 1;
+    margin-bottom: auto;
+    top: 0;
+    margin-top: 0;
+    height: calc(100% - 5px);
+    width: 100%;
+    border: none;
+    position: absolute;
+    bottom: 0;
+    background-color: $color-bg-inverse;
+    padding: 0px;
+    padding-top: 22px;
+    padding-left: 10px;
+  }
+
+
+  .file_manager .upload_file #multiple-uploads {
+    height: calc(100% - 20px);
+    background: $color-fg-inverse;
+    color: $color-fg-inverse;
+    padding: 0px !important;
+    overflow: auto;
+    width: 100%;
+  }
+
+  .fileinfo .prompt-info {
+    text-align: center;
+    color: $color-fg-inverse;
+  }
+
+  .fileinfo .file_listing {
+    display: block;
+    height: calc(100% - 35px);
+    border: 1px solid $color-gray-lighter;
+    border-bottom: none;
+    font-size: 12px;
+  }
+
+  .fileinfo .allowed_file_types {
+    display: block;
+    height: 25px;
+    position: absolute;
+    right: 0;
+    border-top: 1px solid $color-gray-lighter;
+    padding-top: 4px;
+    bottom: 4px;
+    width: 100%;
+    background: $color-bg;
+    white-space: nowrap;
+  }
+
+  .upload_file .file_upload_main {
+    position: relative;
+    height: 127px;;
+    width: 120px;
+    display: inline-block;
+    margin: 0 15px 15px 0 !important;
+    border: 1px solid $color-bg;
+    position: relative;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    background: $color-bg;
+    margin: 2px;
+    opacity: 1;
+  }
+
+  .upload_file .file_upload_main .show_error {
+    padding: 10px 0 0 10px;
+    color: $color-fg;
+  }
+
+  .file_upload_main .dz-progress {
+    float: left;
+    width: 100%;
+    height: 21px !important;
+    border: 1px solid  $color-gray-dark;
+    border-radius: 0 !important;
+    -moz-border-radius: 0 !important;
+    -webkit-border-radius: 0 !important;
+  }
+
+  .file_upload_main .dz-progress .dz-upload {
+    background: $color-primary-lighter !important;
+    text-align: center;
+  }
+
+  .file_upload_main .dz-progress .dz-upload.success {
+    background: $color-success-light !important;
+    float: left;
+    width: 100%;
+  }
+
+  .upload_file .file_upload_main a.dz_file_remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: $color-danger;
+    cursor: pointer;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    font-size: large;
+  }
+
+  .upload_file .file_upload_main a.dz_file_remove:hover {
+    border: 1px solid $color-fg;
+  }
+
+  .fileinfo .fm_dimmer {
+    height: calc(100% - 32px);
+    display: none;
+    top: 0px;
+    background:$color-fg;
+    opacity: 0.5;
+    width: 100%;
+    position: absolute;
+    z-index: 3;
+  }
+
+  .fileinfo .delete_item, .fileinfo .replace_file {
+    display: none;
+    padding: 15px 15px;
+    opacity: 0.8;
+    color: $color-fg-inverse;
+    border: 1px solid $color-gray-light;
+    border-left: 0;
+    border-right: 0;
+    background: $color-fg-inverse;
+    box-shadow: 1px 0px 3px 1px $color-bg;
+    font-weight: bold;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 4;
+  }
+
+  .fileinfo .delete_item span.pull-right .btn,
+  .fileinfo .replace_file span.pull-right .btn {
+    padding: 0px 5px;
+    color: $color-fg;
+    background: $color-bg;
+    font-size: 12px;
+    margin-right: 4px;
+  }
+
+  .upload_file .dz_cross_btn {
+    color: $color-fg-inverse;
+    font-size: x-large;
+    right: -4px;
+    position: absolute;
+    top: -1px;
+    background: transparent;
+    border: none;
+  }
+
+  .file_manager .fileinfo #contents .fm_lock_icon {
+    color: $color-danger-lighter;
+    position: absolute;
+    top: 6px;
+    right: 0;
+    left: 19px;
+    font-size: 16px;
+  }
+
+  .file_manager .fileinfo #contents .fa-lock.tbl_lock_icon {
+    color: $color-danger-lighter;
+    position: absolute;
+    left: 19px;
+    top: 5px;
+    font-size: 10px;
+  }
+
+  .file_manager button.ON {
+    background: $color-gray-lighter;
+    border: 1px inset $color-gray-lighter;
+  }
+
+  .fileinfo .is_file_replace {
+    width: 100%;
+    height: 100%;
+    background: $color-gray-lighter;
+  }
diff --git a/web/pgadmin/misc/static/explain/css/explain.css b/web/pgadmin/misc/static/explain/css/explain.css
index 98a07759..811426cb 100644
--- a/web/pgadmin/misc/static/explain/css/explain.css
+++ b/web/pgadmin/misc/static/explain/css/explain.css
@@ -53,13 +53,6 @@ td.explain-tooltip-val {
 
 }
 
-.pgadmin-explain-tooltip {
-  position: absolute;
-  opacity:0;
-  color: cornsilk;
-  background-color: #010125;
-}
-
 .pgadmin-tooltip-table {
   border-collapse: collapse;
   border-spacing: 1px;
diff --git a/web/pgadmin/misc/static/explain/scss/_explain.scss b/web/pgadmin/misc/static/explain/scss/_explain.scss
new file mode 100644
index 00000000..9b84d15b
--- /dev/null
+++ b/web/pgadmin/misc/static/explain/scss/_explain.scss
@@ -0,0 +1,6 @@
+.pgadmin-explain-tooltip {
+  position: absolute;
+  opacity:0;
+  color: $color-gray-lighter;
+  background-color:  $color-gray-dark;
+}
diff --git a/web/pgadmin/preferences/__init__.py b/web/pgadmin/preferences/__init__.py
index f27c5274..88772bef 100644
--- a/web/pgadmin/preferences/__init__.py
+++ b/web/pgadmin/preferences/__init__.py
@@ -42,7 +42,7 @@ class PreferencesModule(PgAdminModule):
         }]
 
     def get_own_stylesheets(self):
-        return [url_for('preferences.static', filename='css/preferences.css')]
+        return []
 
     def get_own_menuitems(self):
         return {
diff --git a/web/pgadmin/preferences/static/css/preferences.css b/web/pgadmin/preferences/static/css/preferences.css
index 26947998..408dd3dc 100644
--- a/web/pgadmin/preferences/static/css/preferences.css
+++ b/web/pgadmin/preferences/static/css/preferences.css
@@ -5,15 +5,6 @@
   padding-bottom: 39px;
 }
 
-.preferences_tree{
-  padding: 0px;
-  padding-top: 2px;
-  height: 100%;
-  overflow: auto;
-  border-right: 2px solid #999999;
-  background-image: #FAFAFA;
-}
-
 .preferences_content {
   padding-top: 10px;
   height: 100%;
diff --git a/web/pgadmin/preferences/static/scss/_preferences.scss b/web/pgadmin/preferences/static/scss/_preferences.scss
new file mode 100644
index 00000000..6bd0f928
--- /dev/null
+++ b/web/pgadmin/preferences/static/scss/_preferences.scss
@@ -0,0 +1,8 @@
+.preferences_tree{
+  padding: 0px;
+  padding-top: 2px;
+  height: 100%;
+  overflow: auto;
+  border-right: 2px solid $color-gray-light;
+  background-image: $color-gray-lighter;
+}
diff --git a/web/pgadmin/static/css/pgadmin.style.css b/web/pgadmin/static/css/pgadmin.style.css
deleted file mode 100644
index d8bda691..00000000
--- a/web/pgadmin/static/css/pgadmin.style.css
+++ /dev/null
@@ -1,110 +0,0 @@
-.alert-box {
-  padding: 15px; }
-
-.alert-icon {
-  display: table-cell; }
-
-.alert-text {
-  display: table-cell;
-  padding-left: 10px; }
-
-.alert-info {
-  border-color: #84acdd; }
-
-.color-chip {
-  align-items: center;
-  border-radius: 3px;
-  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
-  color: rgba(0, 0, 0, 0.65);
-  display: flex;
-  font-size: 1.25em;
-  height: 100px;
-  justify-content: center;
-  margin: 0 0 1em;
-  width: 100%; }
-
-.bg-gray-1 {
-  background-color: #f9f9f9; }
-
-.bg-gray-2 {
-  background-color: #e8e8e8; }
-
-.bg-gray-3 {
-  background-color: #cccccc; }
-
-.bg-gray-4 {
-  background-color: #888888; }
-
-.bg-gray-5 {
-  background-color: #555555; }
-
-.bg-gray-6 {
-  background-color: #333333; }
-
-.font-white {
-  color: #FFFFFF; }
-
-.font-gray-3 {
-  color: #cccccc; }
-
-.font-gray-4 {
-  color: #888888; }
-
-.border-gray-3 {
-  border: 2px solid #cccccc; }
-
-.text-bold {
-  font-weight: bold; }
-
-.text-14 {
-  font-family: 'Open Sans';
-  font-size: 14px; }
-
-.text-13 {
-  font-family: 'Open Sans';
-  font-size: 13px; }
-
-.text-12 {
-  font-family: 'Open Sans';
-  font-size: 12px; }
-
-.text-11 {
-  font-family: 'Open Sans';
-  font-size: 11px; }
-
-.bg-primary-blue {
-  background-color: #2c76b4; }
-
-.bg-highlight {
-  background-color: #e7f2ff; }
-
-.bg-border {
-  background-color: #84acdd; }
-
-.bg-red-1 {
-  background-color: #f2dede; }
-
-.bg-red-2 {
-  background-color: #ecccd1; }
-
-.bg-red-3 {
-  background-color: #d0021b; }
-
-.bg-green-1 {
-  background-color: #dff0d7; }
-
-.bg-green-2 {
-  background-color: #d6eac5; }
-
-.bg-green-3 {
-  background-color: #3a773a; }
-
-.font-white {
-  color: #FFFFFF; }
-
-.opacity-5 {
-  opacity: 0.5;  }
-
-.alertify .ajs-header,
-.alertify .ajs-body {
-  font-family: 'Open Sans'; }
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index ed88eabc..6b7bea39 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -1,7 +1,6 @@
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~alertifyjs/build/css/alertify.css';
 @import '~alertifyjs/build/css/themes/bootstrap.css';
-@import '~bootstrap/dist/css/bootstrap-theme.css';
 @import '~font-awesome/css/font-awesome.css';
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker3.css';
 @import '~eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css';
@@ -22,16 +21,3 @@
 @import '~slickgrid/slick.grid.css';
 @import '~slickgrid/slick-default-theme.css';
 @import '~slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css';
-
-@import '../../preferences/static/css/preferences.css';
-@import '../../browser/static/css/browser.css';
-@import '../../dashboard/static/css/dashboard.css';
-@import '../../browser/static/css/wizard.css';
-@import '../../tools/debugger/static/css/debugger.css';
-
-@import '../../tools/grant_wizard/static/css/grant_wizard.css';
-@import '../../tools/maintenance/static/css/maintenance.css';
-@import '../../tools/sqleditor/static/css/sqleditor.css';
-@import '../../misc/static/explain/css/explain.css';
-@import '../../misc/bgprocess/static/css/bgprocess.css';
-@import '../../misc/static/explain/css/explain.css';
diff --git a/web/pgadmin/static/css/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css
index 18d89f84..e69de29b 100644
--- a/web/pgadmin/static/css/webcabin.overrides.css
+++ b/web/pgadmin/static/css/webcabin.overrides.css
@@ -1,401 +0,0 @@
-.wcDocker {
-  background-color: #ffffff;
-}
-
-.wcPanelBackground {
-  background-color: #ffffff;
-}
-
-.wcPanelBackground .wcCenter {
-  background-color: #cccccc;
-}
-
-.wcFrameFlasher {
-  background-color: red;
-}
-
-.wcFrameShadower {
-  background-color: #dddddd;
-}
-
-.wcFrameTitle {
-  font-size: 13px;
-  padding-left: 8px;
-  vertical-align: middle;
-  text-align: left;
-  border-bottom: 1px none;
-  height: 100%;
-  padding-top: 10px;
-  background-color: #e8e8e8;
-}
-
-.wcFrameCenter {
-  top: 35px;
-}
-
-.wcFrameButton {
-  width: 20px;
-  height: 20px;
-  border: 2px solid #9E9E9E;
-  background-color: #ddd;
-  font-size: 12px;
-  border-radius: 5px 5px 5px 5px;
-  margin-right: 2px;
-}
-
-.wcFrameMiniButton {
-  width: 8px;
-}
-
-.wcFrameButton.wcFrameButtonLeft {
-  right: 10px;
-}
-.wcFrameButton.wcFrameButtonRight {
-  right: 10px;
-}
-
-.wcFrameButton:hover {
-  border: 2px solid #CCCCCC;
-}
-
-.wcFrameButton:active {
-  border: 2px solid #DDDDDD;
-}
-
-.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
-  border-style: inset;
-}
-
-.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
-  border: 1px solid #555555;
-}
-
-.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
-  background-color: rgba(200, 150, 150, 0.2) !important;
-}
-
-.wcFrameEdge {
-  border: 1px solid #dddddd;
-  background-color: #dddddd;
-}
-.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
-  box-shadow: 3px 6px 3px 1px #888888 !important;
-}
-
-.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
-  box-shadow: 1px 0px 0px 0px #888888;
-}
-
-.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
-  box-shadow: 2px 3px 3px 2px #888888 !important;
-}
-
-.wcFrame > .wcFrameEdgeH {
-  box-shadow: 1px 0px 0px 0px #888888;
-}
-
-.wcFrameEdgeH {
-  height: 6px;
-}
-
-.wcFrameEdgeV {
-  width: 6px;
-}
-.wcFrameCornerNW,
-.wcFrameCornerNE {
-  height: 6px;
-  width: 6px;
-}
-
-.wcSplitterBar {
-  border: 1px solid #aaaaaa;
-  background-color: #dddddd;
-}
-
-.wcSplitterBarV {
-  border-left: 3px solid #dddddd;
-  height: 100% !important;
-}
-
-.wcSplitterBarH {
-  border-top: 3px solid #dddddd;
-  width: 100% !important;
-}
-
-.wcPanelTab {
-  color: #337ab7;
-  background-color: #e6e6e6;
-  border: 0px;
-  border-radius: 4px 4px 0px 0px;
-  border-bottom: 0px;
-  margin-right: 1px;
-  margin-top: 10px;
-  font-size: 13px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-.wcPanelTab:hover {
-  background-color: #eeeeee;
-  padding-bottom: 10px;
-}
-
-.wcPanelTabActive {
-  background-color: #ffffff;
-  color: #000000;
-  margin-top: 5px;
-  line-height: 30px;
-  font-weight: normal;
-}
-
-.wcFloating .wcPanelTabActive {
-  background-color: #2C76B4;
-  margin-top: -2px;
-  font-weight: bold;
-  color: white;
-}
-
-.wcFloating .wcPanelTabActive:hover {
-  background-color: #74B5ED;
-}
-
-.wcGhost {
-  background-color: #74B5ED;
-  border-radius: 6px;
-}
-
-/*
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-corner {
-}
-
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
-}
-*/
-
-.wcMenuList, .context-menu-list {
-  border: 1px solid #dddddd;
-  z-index: 999 !important;
-  background: #dddddd;
-}
-
-.wcMenuItem, .context-menu-item {
-  background-color: #dddddd;
-}
-
-.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover {
-  background-color: #bbbbbb;
-}
-
-.wcMenuItem.disabled, .context-menu-item.disabled {
-  color: #311;
-  background-color: #aaaaaa;
-}
-
-.wcMenuSeparator, .context-menu-separator {
-  border: 2px solid #dddddd;
-  background-color: #eeeeee;
-}
-
-.wcInput, input {
-  background-color: transparent;
-}
-
-.wcSelect, select {
-  background-color: transparent;
-}
-
-.wcButton, button {
-  border: 1px outset #A44;
-  background-color: #A44;
-}
-
-.wcButtonHover, .wcButton:hover {
-  border: 1px outset #B66;
-  background-color: #B66;
-}
-
-.wcButtonActive, .wcButton:active {
-  border: 1px inset #B66;
-  background-color: #B66;
-}
-
-.wcButtonActive.wcButtonHover, .wcButton:hover.wcButtonActive, .wcButton:active.wcButtonHover, .wcButton:active:hover {
-  border: 1px inset #C88;
-  background-color: #C88;
-}
-
-.wcButtonDisabled, .wcButton.disabled {
-  border: 1px outset #933 !important;
-  background-color: #933 !important;
-  color: #533 !important;
-}
-
-.wcLayout, .wcLayout tr, .wcLayout td {
-  vertical-align: top;
-}
-
-.wcPanelTab > div > .wcTabIcon {
-  display: inline-block;
-  text-align: center;
-  padding-left: 20px;
-  margin-top: -5px;
-  margin-right: 5px;
-}
-
-.wcPanelTab > div .wcTabIcon.fa {
-  padding-left: 0px !important;
-  color: black;
-}
-
-.wcTabIcon.fa {
-  margin-right: 5px;
-}
-
-.wcFrameTitleBar {
-  background-color: #e8e8e8;
-  height: 35px;
-  border-bottom: #cccccc;
-}
-
-.wcFloating .wcFrameTitleBar {
-  border-bottom: 2px solid darkgray;
-  background-color: #2C76B4;
-}
-
-.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
-  color: white;
-}
-
-.wcFrameButtonBar {
-  top: 5px;
-  right: 5px;
-}
-.context-menu-list {
-font-family: 'Open Sans';;
-font-size: 13px;
-}
-
-.context-menu-icon:before {
-  color: #222;
-  font-size: 13px;
-}
-
-.context-menu-icon-fa:before {
-  font-family: 'FontAwesome'
-}
-
-.context-menu-item {
-  display:block;
-  font-family: 'Open Sans';
-  font-size: 13px;
-  font-weight: normal;
-}
-
-.context-menu-list {
-    padding: 2px 0;
-    width: initial !important;
-}
-
-.context-menu-list > .context-menu-item {
-    display:block !important;
-}
-
-.context-menu-list > .context-menu-separator {
-    margin: 0;
-    border: 1px solid #fff;
-}
-
-.context-menu-icon-wcTabIcon {
-  text-align: left;
-  padding: 3px 28px;
-  height: auto;
-  background-position: 5px 50%;
-}
-
-ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
-  width: 14px;
-}
-
-.wcFrameButton .fa.fa-close {
-  margin-top: 3.5px;
-  padding-left: 1px;
-}
-
-span.fa.fa-arrow-left, .fa-arrow-right {
-  margin-top: 4px;
-  width: 14px;
-}
-
-.wcMenuSubMenu {
-  visibility: hidden;
-}
-
-i.wcTabIcon {
-  min-width: 20px;
-}
-
-.wcLoadingBackground {
-  background: black;
-  opacity: 0.6 !important;
-}
-
-.wcLoadingIcon.fa-spinner {
-  position: absolute;
-  top: 34%;
-  left: 48%;
-  font-size: 50px;
-  color: #ccc;
-  height: 49px !important;
-}
-
-.wcLoadingLabel {
-  top: 40%;
-  left: 0;
-  color: #fff;
-  width: 100%;
-  font-size: 20px;
-  position: absolute;
-  text-align: center;
-}
-
-.wcPanelTab > div {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  max-width: 125px;
-}
-
-.wcPanelTabActive > div {
-  width: auto !important;
-  max-width: 100%;
-}
-
-.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
-  right: 30px !important;
-}
-
-.wcFloating .wcPanelTab .wcTabIcon {
-  display: block;
-  float: left;
-  margin-top: 8px;
-  border-radius: 2px;
-  padding: 0px 13px 5px 5px;
-  background-color: white;
-  background-size: 18px !important;
-  height: 18px;
-}
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 91350baa..f6dcee0c 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -108,7 +108,7 @@ define([
             var alertMessage = promptmsg;
             if (type === 'error') {
               alertMessage = '\
-                  <div class="media font-red-3 text-14">\
+                  <div class="media text-danger text-14">\
                     <div class="media-body media-middle">\
                       <div class="alert-text">' + promptmsg + '</div><br/>\
                       <div class="alert-text">' + gettext('Click for details.') + '</div>\
@@ -153,7 +153,7 @@ define([
         }
         if (contentType.indexOf('text/html') >= 0) {
           var alertMessage = '\
-                <div class="media font-red-3 text-14">\
+                <div class="media text-danger text-14">\
                   <div class="media-body media-middle">\
                     <div class="alert-text">' + gettext('INTERNAL SERVER ERROR') + '</div><br/>\
                     <div class="alert-text">' + gettext('Click for details.') + '</div>\
@@ -377,7 +377,7 @@ define([
   _.extend(alertify, {
     success: function(message, timeout, callback) {
       var alertMessage = '\
-      <div class="media font-green-3 text-14">\
+      <div class="media text-success text-14">\
         <div class="media-body media-middle">\
           <div class="alert-icon success-icon">\
             <i class="fa fa-check" aria-hidden="true"></i>\
@@ -389,7 +389,7 @@ define([
     },
     error: function(message, timeout, callback) {
       var alertMessage = '\
-      <div class="media font-red-3 text-14">\
+      <div class="media text-danger text-14">\
         <div class="media-body media-middle">\
           <div class="alert-icon error-icon">\
             <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 52c566b7..56f49bda 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -113,7 +113,7 @@ let FilterDialog = {
 
             // Status bar
             this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
-              '  <div class=\'media error-in-footer bg-red-1 border-red-2 font-red-3 text-14\'>' +
+              '  <div class=\'media error-in-footer bg-danger-lighter border-danger-light text-danger text-14\'>' +
               '    <div class=\'media-body media-middle\'>' +
               '      <div class=\'alert-icon error-icon\'>' +
               '        <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
diff --git a/web/pgadmin/static/css/aci_tree.overrides.css b/web/pgadmin/static/scss/_aci_tree.overrides.scss
similarity index 63%
rename from web/pgadmin/static/css/aci_tree.overrides.css
rename to web/pgadmin/static/scss/_aci_tree.overrides.scss
index 921d711b..dc390d0f 100644
--- a/web/pgadmin/static/css/aci_tree.overrides.css
+++ b/web/pgadmin/static/scss/_aci_tree.overrides.scss
@@ -1,31 +1,31 @@
 .aciTree .aciTreeText {
-    font-family: 'Open Sans';
+    font-family: $font-family-primary;
     font-size: 12px;
 }
 
 /* Hover over an element */
 .aciTree .aciTreeLine.aciTreeHover .aciTreeItem  {
-    background-color: #e7f2ff;
-    border-color: #84acdd;
+    background-color: $color-primary-lighter;
+    border-color: $color-primary-light;
 }
 
 .aciTree .aciTreeLine.aciTreeHover .aciTreeText  {
-    color: black;
+    color: $color-fg;
 }
 
 /* Selected element and in focus*/
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeItem {
-    background-color: #e7f2ff;
+    background-color: $color-primary-lighter;
 }
 
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeText {
-    color: black;
+    color: $color-fg;
 }
 
 /* Selected element but not in focus */
 .aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem {
-    background-color: #e7f2ff;
-    border-color: #84acdd;
+    background-color: $color-primary-lighter;
+    border-color: $color-primary-light;
 }
 
 .aciTree .aciTreeItem {
diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss
index 64e56172..4f4fd455 100644
--- a/web/pgadmin/static/scss/_alert.scss
+++ b/web/pgadmin/static/scss/_alert.scss
@@ -1,7 +1,7 @@
 .alert-icon {
   display: flex;
   align-items: center;
-  color: white;
+  color: $color-fg-inverse;
   padding: 15px 15px 15px 17px;
   width: 50px;
   min-height: 50px;
@@ -26,15 +26,15 @@
 }
 
 .success-icon {
-  background: $color-green-3;
+  background: $color-success;
 }
 
 .error-icon {
-  background: $color-red-3;
+  background: $color-danger;
 }
 
 .info-icon {
-  background: #2c76b4;
+  background: $color-primary;
 }
 
 .alert-text {
@@ -42,11 +42,13 @@
   padding: 0 12px 0 10px;
   align-self: center;
   // To make sure IE picks up the correct font
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
 }
 
 .alert-info {
-  border-color: $color-blue-2;
+  border-color: $color-primary-light;
+  background-color: $color-primary-lighter;
+  color : $color-primary;
   background-image: none;
 }
 
@@ -103,7 +105,7 @@
 
   .alert-text {
     flex-grow: 1;
-    border: 1px solid $color-red-2;
+    border: 1px solid $color-danger-light;
     padding: 7px 12px 6px 10px;
     border-left: none;
     -moz-user-select: text;
@@ -117,7 +119,7 @@
     border-radius: 4px;
 
     .alert-text {
-      border-color: $color-red-2;
+      border-color: $color-danger-light;
     }
   }
 
@@ -125,12 +127,12 @@
     border-radius: 4px;
 
     .alert-text {
-      border-color: $color-green-2;
+      border-color: $color-success-light;
     }
   }
 
   .info-in-footer {
-    border: 1px solid $primary-blue;
+    border: 1px solid $color-primary;
     border-radius: 4px;
     height: 35px;
 
diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss
index 321fc7b4..24a58460 100644
--- a/web/pgadmin/static/scss/_alertify.overrides.scss
+++ b/web/pgadmin/static/scss/_alertify.overrides.scss
@@ -4,10 +4,10 @@
     padding: 6px 10px !important;
     min-height: 35px;
     max-height: 35px;
-    border-bottom: 2px solid darkgray;
-    background-color: #2C76B4;
+    border-bottom: 2px solid $color-gray-lighter;
+    background-color: $color-primary;
     font-weight: bold;
-    color: white;
+    color: $color-fg-inverse;
     font-size: 14px;
     font-weight: bold;
     border-radius: 0;
@@ -17,7 +17,7 @@
 
   /* Overrides alertify js headers hovering behaviour*/
   .ajs-header:hover {
-    background-color: #2C76B4;
+    background-color: $color-primary;
   }
 
   /* Removes padding from alertify footer */
@@ -28,10 +28,10 @@
 
   /* Restyling alertify buttons */
   .ajs-footer .ajs-buttons {
-    background-color: #D2D2D2;
+    background-color: $color-gray-light;
     border-width: 2px 0px 0px 0px;
     border-style: solid;
-    border-color: rgb(85, 85, 85);
+    border-color:  $color-gray-dark;
   }
 
   .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button,
@@ -73,7 +73,7 @@
 
   /* Restyling alertify dialogue panel boundaries */
   .ajs-dialog {
-    border: 3px solid #DDDDDD;
+    border: 3px solid $color-gray-lighter;
     border-radius: 0;
   }
   .ajs-content {
@@ -100,8 +100,8 @@
 .ajs-pin, .ajs-maximize, .ajs-close {
   width: 20px;
   height: 20px;
-  border: 2px solid #9E9E9E !important;
-  background-color: #ddd !important;
+  border: 2px solid $color-gray-light !important;
+  background-color: $color-gray-lighter !important;
   font-size: 12px;
   border-radius: 5px 5px 5px 5px;
   position: relative;
@@ -113,7 +113,7 @@
 }
 
 .ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
-  border: 2px solid #CCCCCC !important;
+  border: 2px solid $color-gray-lighter !important;
 }
 
 .alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
@@ -145,7 +145,7 @@
 }
 
 button.pg-alertify-button {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 14px;
   -webkit-font-smoothing: auto;
 }
@@ -161,20 +161,20 @@ button.pg-alertify-button {
 }
 
 .ajs-message.ajs-error.ajs-visible {
-  @extend .bg-red-1;
-  @extend .border-red-2;
+  @extend .bg-danger-lighter;
+  @extend .border-danger;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-success.ajs-visible {
-  @extend .bg-green-1;
-  @extend .border-green-2;
+  @extend .bg-success-lighter;
+  @extend .border-success;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-visible {
-  @extend .bg-blue-1;
-  @extend .border-blue-2;
+  @extend .bg-primary-lighter;
+  @extend .border-primary;
   @extend .ajs-text-smoothing;
 }
 
diff --git a/web/pgadmin/static/scss/_backform.overrides.scss b/web/pgadmin/static/scss/_backform.overrides.scss
index b22c55a1..96a13c1b 100644
--- a/web/pgadmin/static/scss/_backform.overrides.scss
+++ b/web/pgadmin/static/scss/_backform.overrides.scss
@@ -1,11 +1,11 @@
 .has-error {
   .pgadmin-controls > .form-control {
-    border-color: #d0021b;
+    border-color: $color-danger;
     position: relative;
   }
 
   .control-label {
-    color: #d0021b;
+    color: $color-danger;
   }
 
   .control-label:before {
@@ -13,7 +13,7 @@
     content: "\f071";
     text-decoration: inherit;
     position: absolute;
-    color: #d0021b;
+    color: $color-danger;
     right: 6px;
     padding-top: 6px;
     z-index: 1;
diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/scss/_bootstrap.overrides.scss
similarity index 85%
rename from web/pgadmin/static/css/bootstrap.overrides.css
rename to web/pgadmin/static/scss/_bootstrap.overrides.scss
index 2ab44f0e..050a7856 100644
--- a/web/pgadmin/static/css/bootstrap.overrides.css
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -2,7 +2,7 @@
 
 /* Ensure simple forms don't hit the top of the screen */
 body {
-    font-family: 'Open Sans';
+    font-family: $font-family-primary;
     padding-top: 50px;
     padding-bottom: 20px;
 }
@@ -63,7 +63,7 @@ iframe {
 
 /* Disabled menu items */
 .mnu-disabled {
-    color: #999999 !important;
+    color:  $color-gray !important;
 }
 
 /*
@@ -98,13 +98,13 @@ iframe {
     border-color: transparent;
     border-style: solid;
     border-width: 5px 0 5px 5px;
-    border-left-color: #cccccc;
+    border-left-color: $color-gray-light;
     margin-top: 5px;
     margin-right: -10px;
 }
 
 .dropdown-submenu:hover>a:after {
-    border-left-color: #ffffff;
+    border-left-color: $color-bg;
 }
 
 .dropdown-submenu.pull-left {
@@ -121,26 +121,26 @@ iframe {
 
 .navbar-inverse > li > a,
 .navbar-inverse .navbar-nav > li > a {
-    color: #FFF;
+    color: $color-fg-inverse;
 }
 
 .navbar-inverse .navbar-brand {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .navbar-inverse .navbar-brand:hover {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .navbar-inverse .navbar-brand:focus {
-    color: #009DCF;
+    color: $color-brand;
 }
 
 .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;
+    background:  $color-gray-dark none;
 }
 
 .dropdown-menu > hr {
@@ -164,18 +164,18 @@ iframe {
 
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
-    color: #FFFFFF;
-    background: #555 none;
+    color: $color-fg-inverse;
+    background:  $color-gray-dark none;
 }
 
 .form-group fieldset {
-    background-color: #F2F2F2;
+    background-color: $color-gray-lighter;
     padding: 0px 0px 0px 5px;
     border-width: 1px;
     margin-left: 2px;
     margin-right: 2px;
     margin-bottom: 2px;
-    border-color: #DDD;
+    border-color: $color-gray-lighter;
 }
 
 .form-group legend {
@@ -263,10 +263,6 @@ iframe {
     padding: 2px 0px;
 }
 
-.fieldset-content .pgadmin-control-group:nth-child(even): {
-    background-color: #FF0000;
-}
-
 .control-label {
     margin: 0px;
     padding: 5px 25px 5px 5px;
@@ -313,7 +309,7 @@ iframe {
 .obj_properties fieldset > .fieldset-content {
   border-radius:5px;
   padding: 5px 10px;
-  border-color: #92AFC8;
+  border-color: $color-primary-lighter;
   border-width: 2px;
   border-style: ridge;
 }
@@ -323,7 +319,7 @@ iframe {
   text-align: left;
   cursor: pointer;
   margin-bottom: 1px;
-  background-color: #2C76B4;
+  background-color: $color-primary;
   border-radius:5px;
   padding: 5px 7px;
 }
@@ -355,12 +351,12 @@ iframe {
 }
 
 .obj_properties table tr {
-    border: 0px white solid;
+    border: 0px $color-bg solid;
     margin: 1em;
 }
 
 .obj_properties .pgadmin-properties {
-    border: 1px rgb(105, 78, 72) solid;
+    border: 1px  $color-gray-dark solid;
     border-radius: 6px;
     padding: 5px;
     margin: 0.2px 2px 2px 2px;
@@ -374,11 +370,6 @@ iframe {
     vertical-align: middle;
 }
 
-button.btn:disabled {
-    pointer-events: auto;
-    cursor: default;
-}
-
 .pg-prop-btn-group {
   left: 0px;
   right: 0px;
@@ -391,7 +382,7 @@ button.btn:disabled {
 
 .pg-prop-btn-group-below {
     text-align: right;
-    border-color: #A9A9A9;
+    border-color: $color-gray-light;
     border-width: 2px 1px 0px;
     border-style: inset;
     border-left-style: solid
@@ -483,21 +474,21 @@ button.btn:disabled {
 }
 
 .form-control {
-    color: #333333;
+    color:  $color-gray-dark;
     padding: 3px 6px;
 }
 
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-    color: #666666;
+    color:  $color-gray-dark;
 }
 
 .highlight {
     padding: 5px;
     margin-bottom: 5px;
-    background-color: #F7F7F9;
-    border: 1px solid #E1E1E8;
+    background-color: $color-gray-lighter;
+    border: 1px solid $color-gray-lighter;
     border-radius: 3px;
 }
 
@@ -528,7 +519,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid > thead th{
-    background-color: #2C76B4;
+    background-color: $color-primary;
 }
 
 .backgrid > thead > th, .backgrid > tbody > td {
@@ -547,7 +538,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid > thead th a {
-    color: white;
+    color: $color-fg-inverse;
     font-size: 12px;
 }
 
@@ -562,7 +553,7 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid.presentation {
-    background-color: #EEEEEE;
+    background-color: $color-gray-lighter;
 }
 
 .backgrid.presentation td.renderable {
@@ -571,11 +562,11 @@ fieldset[disabled] .form-control {
 }
 
 .backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
-    background-color: #F1F1F1;
+    background-color: $color-gray-lighter;
 }
 
 .backgrid tr.header td.renderable:not(.editable):not(.delete-cell) {
-    background-color: #AAA;
+    background-color: $color-gray-light;
 }
 
 .sql-editor-grid-container .backgrid > thead > th.renderable,
@@ -584,9 +575,9 @@ fieldset[disabled] .form-control {
 }
 
 .subnode-header {
-    background-color: #2C76B4;
+    background-color: $color-primary;
     height: 35px;
-    color: #FFFFFF;
+    color: $color-fg-inverse;
     border-radius: 3px 3px 0px 0px;
     padding-top: 3px;
 }
@@ -615,9 +606,9 @@ fieldset[disabled] .form-control {
     right: 0;
     height: auto;
     margin-left: 23px;
-    background-color: #dadada;
+    background-color: $color-gray-lighter;
     margin-top: 0px;
-    border: 1px solid #a9a9a9;
+    border: 1px solid $color-gray-light;
 }
 .subnode-body {
     height: auto;
@@ -637,19 +628,19 @@ fieldset[disabled] .form-control {
 }
 
 .sub-node-form > .nav-tabs {
-    background-color: #DADADA;
+    background-color: $color-gray-lighter;
 }
 
 .sub-node-form > ul.tab-content{
-    background-color: #FFFFFF;
+    background-color: $color-bg;
     padding-left: 15px;
     left: 1px;
 }
 
 table.backgrid tr.new {
-    background-color: rgba(82, 168, 236, 0.1) !important;
+    background-color: rgba($color-primary, 0.1) !important;
     box-sizing: border-box;
-    outline: 1px solid rgba(82, 168, 236, 0.8);
+    outline: 1px solid rgba($color-primary, 0.8);
     outline-offset: -1px;
   }
 
@@ -668,7 +659,7 @@ table.backgrid tr.new {
     width: 0px;
     margin: 0px;
     padding: 0px;
-    border: 0px solid black;
+    border: 0px solid $color-fg;
 }
 
 .switch-cell {
@@ -718,10 +709,10 @@ td.switch-cell > div.bootstrap-switch {
     z-index: 4;
 }
 .subnode-header-form {
-    background-color: #EEEEEE;
+    background-color: $color-gray-lighter;
     color: black;
     padding: 3px 0 10px 0;
-    border-top: solid 1.5px white;
+    border-top: solid 1.5px $color-bg;
     font-size: 12px;
 }
 
@@ -731,7 +722,7 @@ td.switch-cell > div.bootstrap-switch {
 }
 
 .subnode-error .help-block {
-    color: #a94442;
+    color: $color-danger;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {
@@ -754,7 +745,7 @@ fieldset.inline-fieldset {
     margin: 0px; margin-left: 2px; margin-right: 2px;
     padding-right: 10px; padding-left: 10px; padding-top: 6px; padding-bottom: 12px;
     border: 1px solid; border-radius: 5px;
-    border-color: #C3C3C3; box-shadow: 0.1px 0.1px 0.1px #C3C3C3;
+    border-color: $color-gray-lighter; box-shadow: 0.1px 0.1px 0.1px $color-gray-lighter;
 }
 
 fieldset.inline-fieldset-without-border {
@@ -764,7 +755,7 @@ fieldset.inline-fieldset-without-border {
 }
 
 fieldset.inline-fieldset > legend {
-    display: block; border: 0px solid black; box-shadow: none;
+    display: block; border: 0px solid $color-fg; box-shadow: none;
     box-sizing: content-box; top: auto; bottom: auto; left: auto;
     font-size: 14px; font-style: normal; font-weight: 600;
     height: 20px; line-height: 20px; margin: 0px; padding-bottom: 0px;
@@ -811,7 +802,7 @@ div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
 }
 
 div.inline-tab-panel > ul.tab-content {
-  padding-left: 5px; padding-right: 5px; border-color: #DDD;
+  padding-left: 5px; padding-right: 5px; border-color: $color-gray-lighter;
   border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
   border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px; border-style: solid solid;
@@ -847,11 +838,11 @@ td.edit-cell.editable.sortable.renderable.editor {
 }
 
 .subnode > table.backgrid > thead > tr > th:first-child{
-  border-left-color: #2C76B4;
+  border-left-color: $color-primary;
 }
 
 .subnode > table.backgrid > thead > tr > th:last-child{
-  border-right-color: #2C76B4;
+  border-right-color: $color-primary;
 }
 
 .select2-container .select2-selection--single .select2-selection__rendered{
@@ -878,20 +869,20 @@ td.edit-cell.editable.sortable.renderable.editor {
 
 .select2-container--default.select2-container--focus
 .select2-selection--multiple {
-  border: 1px solid #aaa !important;
+  border: 1px solid $color-gray-light !important;
   outline: 0 none;
 }
 
 .select2-container--default.select2-container--focus {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
 }
 
 /* CSS for SqlField control */
 .sql_field_layout {
-    border: 1px solid rgba(184, 184, 184, 1) !important;
+    border: 1px solid rgba($color-gray-light, 1) !important;
     border-radius: 4px;
     padding: 0px;
 }
@@ -916,20 +907,22 @@ td.edit-cell.editable.sortable.renderable.editor {
 }
 
 .nav-tabs>li>a{
-    border-radius: 5px 5px 0 0;
+  border-radius: 5px 5px 0 0;
 	margin-right:1px;
 	border:0px;
+	color: $color-primary;
 }
 
 .nav-tabs>li > a:hover , .nav-tabs>li > a:focus{
 	border:0px;
 	margin-bottom:0px;
-	color:black;
+	color:$color-fg;
 	padding-bottom: 4px!important;
+	background-color: $color-gray-white;
 }
 .nav-tabs>li.active>a ,.nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover ,.nav-tabs>li.active>a:active{
 	border:0px;
-	color:black;
+	color:$color-fg;
 	margin-top: 0px;
 	padding-top: 7px!important;
 	padding-bottom: 4px!important;
@@ -941,26 +934,27 @@ td.edit-cell.editable.sortable.renderable.editor {
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 4px;
-	padding-bottom:0px;
-	margin-top:3px;
+    padding-bottom:0px;
+    margin-top:3px;
 }
 
 .obj_properties .backform-tab > .nav-tabs {
-	background-color: #E2E2E2;
+	background-color: $color-gray-lighter;
 }
 
 ul.nav.nav-tabs {
-    background-color: #E2E2E2;
+  background-color: $color-gray-lighter;
 	padding-top: 4px;
 }
 
+
 .pg-panel-depends-container >table.backgrid.table-bordered {
   border: 0px;
 }
 
 .pg-panel-depends-container > table > thead > tr > th {
   padding: 2px;
-  border: 1px solid #ddd;
+  border: 1px $color-gray-lighter solid;
 }
 
 .pg-panel-depends-container > table > thead > tr > th:first-child {
@@ -987,27 +981,27 @@ ul.nav.nav-tabs {
 
 /* Alert info panel */
 .alert-info-panel {
-  border: 2px solid #a1a1a1;
+  border: 2px solid $color-gray-light;
   margin-top: 2em;
   padding: 5px 5px;
-  background: #dddddd;
+  background: $color-gray-lighter;
   border-radius: 5px;
   height: 8em;
   overflow: scroll;
 }
 
 span.button-label {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: initial;
 }
 
 .backform_control_notes {
-  background-color: #f5f5f5;
-  border: 1px solid #ccc;
+  background-color: $color-gray-lighter;
+  border: 1px solid $color-gray-light;
   border-radius: 3px;
-  color: #333;
+  color:  $color-gray-dark;
   display: block;
-  font-family: 'Source Code Pro';
+  font-family: $font-family-editor;
   font-size: 12px;
   line-height: 1.42857;
   margin: 0 0 10px;
@@ -1021,7 +1015,7 @@ div.backform_control_notes label.control-label {
 }
 
 form[name="change_password_form"] .help-block {
-    color: #A94442 !important;
+    color: $color-danger !important;
 }
 
 .file_selection_ctrl .create_input span {
@@ -1044,12 +1038,12 @@ form[name="change_password_form"] .help-block {
 
 .file_selection_ctrl button.select_item {
   display: inline;
-  background: #777;
-  background: -webkit-linear-gradient(#777, #999999);
-  background: -o-linear-gradient(#777, #999);
-  background: -moz-linear-gradient(#777, #999);
-  background: linear-gradient(#777, #999);
-  color: #fff;
+  background:  $color-gray;
+  background: -webkit-linear-gradient( $color-gray,  $color-gray);
+  background: -o-linear-gradient( $color-gray, $color-gray-light);
+  background: -moz-linear-gradient( $color-gray, $color-gray-light);
+  background: linear-gradient( $color-gray, $color-gray-light);
+  color: $color-fg-inverse;
   padding: 9px 0px 9px 0px;
   margin-left: 0px;
   margin-right: -7px;
@@ -1159,7 +1153,7 @@ form[name="change_password_form"] .help-block {
 
 .subnode-footer {
   text-align: right;
-  border-color: #a9a9a9;
+  border-color: $color-gray-light;
   border-style: inset inset inset solid;
   border-width: 2px 1px 0;
   margin-top: -10px;
@@ -1177,12 +1171,12 @@ form[name="change_password_form"] .help-block {
 }
 
 .close-error-bar {
-  background: #d0021b;
+  background: $color-danger;
   padding: 5px;
 }
 
 .close-error-bar a {
-  color: #FFFFFF;
+  color: $color-fg-inverse;
   cursor: pointer;
 }
 
@@ -1234,7 +1228,7 @@ height: calc(100% - 35px);
 
 .pg-panel-statistics-container > table > thead > tr > th {
   padding: 2px;
-  border: 1px solid #ddd;
+  border: 1px solid $color-gray-lighter;
 }
 
 .pg-panel-statistics-container > table > thead > tr > th:first-child {
@@ -1267,10 +1261,10 @@ table.backgrid {
 }
 
 .pgadmin-controls.focused {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
 }
 
 .bootstrap-datetimepicker-widget td,
@@ -1331,13 +1325,13 @@ body {
 .backgrid tr th button {
   background: none;
   border: none;
-  color: #fff;
+  color: $color-fg-inverse;
   padding: 0;
 }
 
 /* Latest backgrid adds column name like `label` to td element, override color*/
 .backgrid td.label {
-  color: #333;
+  color:  $color-gray-dark;
   font-size: 14px;
   font-weight: normal;
 }
@@ -1354,17 +1348,17 @@ body {
 
 /* Override CSS for Colour Picker to match it with pgAdmin4 style */
 .sp-replacer {
-  background: #fff;
-  border: solid 1px #ccc;
+  background: $color-bg;
+  border: solid 1px $color-gray-light;
   border-radius: 3px;
 }
 
 .sp-replacer:hover {
-  border-color: #ccc;
+  border-color: $color-gray-light;
 }
 
 .sp-replacer.sp-active {
-  border-color: #66afe9;
+  border-color: $color-primary-light;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -1374,40 +1368,40 @@ body {
 }
 
 .sp-replacer.sp-disabled {
-    background-color: #eee;
+    background-color: $color-gray-lighter;
 }
 
 .sp-container {
-  background-color: #fff;
-  border: solid 1px #ccc;
+  background-color: $color-bg;
+  border: solid 1px $color-gray-light;
   border-radius: 3px !important;
 }
 
 .sp-palette-button-container button,
 .sp-palette-button-container button:hover {
   padding: 5px;
-  background-color: #2c76b4;
+  background-color: $color-primary;
   background-image: none;
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 12px;
-  color: #fff;
+  color: $color-fg-inverse;
   text-shadow: none;
   -webkit-font-smoothing: auto;
 }
 
 .sp-container button:active {
-    border: 1px solid #84acdd;
+    border: 1px solid $color-primary;
     border-bottom: none;
-    -webkit-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
-    -moz-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
-    -ms-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
-    -o-box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
-    box-shadow: inset 0 0 5px 2px #84acdd, 0 1px 0 0 #84acdd;
+    -webkit-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
+    -moz-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
+    -ms-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
+    -o-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
+    box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
 }
 
 .sp-dd {
   font-size: 8px;
-  color: #888888;
+  color:  $color-gray;
 }
 
 /* CSS for custom checkbox editor in SlickGrid */
@@ -1416,7 +1410,7 @@ body {
   vertical-align: top;
   width: 16px;
   height: 16px;
-  border: 1px solid #333;
+  border: 1px solid  $color-gray-dark;
   margin: 3px;
   text-align: center;
   line-height: 16px;
@@ -1424,11 +1418,11 @@ body {
 
 .multi-checkbox .check.checked,
 .multi-checkbox .check.unchecked {
-  background: #fff;
+  background: $color-bg;
 }
 
 .multi-checkbox .check.partial {
-  background: #e8e8e8;
+  background: $color-gray-lighter;
 }
 
 .multi-checkbox .check.checked:after {
@@ -1441,6 +1435,11 @@ body {
 
 /* Override default bootstrap popover fonts & size */
 .popover-content {
-  font-family: 'Open Sans';
+  font-family: $font-family-primary;
   font-size: 13px;
 }
+
+
+.btn.btn-default[disabled] {
+  color: $color-gray;
+}
diff --git a/web/pgadmin/static/css/codemirror.overrides.css b/web/pgadmin/static/scss/_codemirror.overrides.scss
similarity index 60%
rename from web/pgadmin/static/css/codemirror.overrides.css
rename to web/pgadmin/static/scss/_codemirror.overrides.scss
index cdfbc862..3468c3e2 100644
--- a/web/pgadmin/static/css/codemirror.overrides.css
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -1,7 +1,10 @@
+.cm-s-default .CodeMirror {
+  background: $color-editor-bg;
+}
 /* To override inbuilt Green color for matchingbracket */
 .cm-s-default .CodeMirror-matchingbracket {
-    color: #333333 !important;
-    background-color: #e8e8e8 !important;
+    color:  $color-gray-dark !important;
+    background-color: $color-gray-lighter !important;
 }
 
 /* Ensure the codemirror editor displays full height gutters when resized */
@@ -12,7 +15,7 @@
 
 /*
  * Remove border right from "CodeMirror-gutters"
- * class becuase its height doesn't increase
+ * class because its height doesn't increase
  * with every new line added, instead add border
  * right to ".CodeMirror-linenumber" class which
  * adds a new div for every new line added
@@ -22,45 +25,45 @@
 }
 
 .sql_field_layout .CodeMirror-linenumber {
-    border-right: 1px solid #ddd;
-    background-color: #f7f7f7;
+    border-right: 1px solid $color-gray-lighter;
+    background-color: $color-gray-lighter;
 }
 
 /* class to disable Codemirror editor */
 .cm_disabled {
-  background: #EEEEEE;
+  background: $color-gray-lighter;
 }
 
 /* make syntax-highlighting bold */
 .cm-s-default .cm-keyword {
   font-weight: 600;
-  color: #908;
+  color: $color-editor-keyword;
 }
 
 .cm-s-default .cm-number {
   font-weight: 600;
-  color: #964;
+  color: $color-editor-number;
 }
 
 /* Codemirror buttons */
 .CodeMirror-dialog button {
-    font-family: 'Open Sans';
-    color: white;
+    font-family: $font-family-primary;
+    color: $color-fg-inverse;
     font-size: 70%;
-    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
-    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
-    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+    background-image: -webkit-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
+    background-image: -o-linear-gradient(top, $color-primary-light 0%, $color-primary 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from($color-primary-light), to($color-primary));
+    background-image: linear-gradient(to bottom, $color-primary-light 0%, $color-primary 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color-primary-light}', endColorstr='#{$color-primary}', GradientType=0);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
     background-repeat: repeat-x;
-    border-color: #245580;
+    border-color: $color-primary;
     border-radius: 4px;
 }
 
 #history-detail-query .CodeMirror {
-  border: 1px solid #CCCCCC;
-  background-color: #F7F7F7;
+  border: 1px solid $color-gray-light;
+  background-color: $color-gray-lighter;
   width: 100%;
   padding-left: 5px;
   position: absolute;
diff --git a/web/pgadmin/static/scss/_colorsgrey.scss b/web/pgadmin/static/scss/_colorsgrey.scss
deleted file mode 100644
index d27d7042..00000000
--- a/web/pgadmin/static/scss/_colorsgrey.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-$color-gray-1: #f9f9f9;
-$color-gray-2: #e8e8e8;
-$color-gray-3: #cccccc;
-$color-gray-4: #888888;
-$color-gray-5: #555555;
-$color-gray-6: #333333;
-
-.bg-gray-1 {
-  background-color: $color-gray-1;
-}
-
-.bg-gray-2 {
-  background-color: $color-gray-2;
-}
-
-.bg-gray-3 {
-  background-color: $color-gray-3;
-}
-
-.bg-gray-4 {
-  background-color: $color-gray-4;
-}
-
-.bg-gray-5 {
-  background-color: $color-gray-5;
-}
-
-.bg-gray-6 {
-  background-color: $color-gray-6;
-}
-
-.border-gray-1 {
-  border-color: $color-gray-1;
-}
-
-.border-gray-2 {
-  border-color: $color-gray-2;
-}
-
-.border-gray-3 {
-  border-color: $color-gray-3;
-}
-
-.border-gray-4 {
-  border-color: $color-gray-4;
-}
-
-.border-gray-5 {
-  border-color: $color-gray-5;
-}
-
-.border-gray-6 {
-  border-color: $color-gray-6;
-}
-
-.font-gray-4 {
-  color: $color-gray-4;
-}
-
-.font-gray-6 {
-  color: $color-gray-6;
-}
diff --git a/web/pgadmin/static/scss/_othercolors.scss b/web/pgadmin/static/scss/_othercolors.scss
deleted file mode 100644
index 5144217a..00000000
--- a/web/pgadmin/static/scss/_othercolors.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-$color-blue-1: #e7f2ff;
-$color-blue-2: #84acdd;
-$color-red-1: #f2dede;
-$color-red-2: #de8585;
-$color-red-3: #d0021b;
-$color-green-1: #dff0d7;
-$color-green-2: #a2c189;
-$color-green-3: #3a773a;
-
-.bg-white-1 {
-  background-color: #ffffff;
-}
-
-.bg-blue-1 {
-  background-color: $color-blue-1;
-}
-
-.bg-blue-2 {
-  background-color: $color-blue-2;
-}
-
-.bg-red-1 {
-  background-color: $color-red-1;
-}
-
-.bg-red-2 {
-  background-color: $color-red-2;
-}
-
-.bg-red-3 {
-  background-color: $color-red-3;
-}
-
-.bg-green-1 {
-  background-color: $color-green-1;
-}
-
-.bg-green-2 {
-  background-color: $color-green-2;
-}
-
-.bg-green-3 {
-  background-color: $color-green-3;
-}
-
-.border-blue-1 {
-  border-color: $color-blue-1;
-}
-
-.border-blue-2 {
-  border-color: $color-blue-2;
-}
-
-.border-red-1 {
-  border-color: $color-red-1;
-}
-
-.border-red-2 {
-  border-color: $color-red-2;
-}
-
-.border-red-3 {
-  border-color: $color-red-3;
-}
-
-.border-green-1 {
-  border-color: $color-green-1;
-}
-
-.border-green-2 {
-  border-color: $color-green-2;
-}
-
-.border-green-3 {
-  border-color: $color-green-3;
-}
-
-.font-red-3 {
-  color: $color-red-3;
-}
-
-.font-green-3 {
-  color: $color-green-3;
-}
diff --git a/web/pgadmin/static/scss/_primaryblue.scss b/web/pgadmin/static/scss/_primaryblue.scss
deleted file mode 100644
index 49d62a34..00000000
--- a/web/pgadmin/static/scss/_primaryblue.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$primary-blue: #2c76b4;
-
-.bg-primary-blue {
-  background-color: $primary-blue;
-}
-
-.border-primary-blue {
-  border-color: $primary-blue;
-}
-
-.font-primary-blue {
-  color: $primary-blue;
-}
\ No newline at end of file
diff --git a/web/pgadmin/static/css/select2.overrides.css b/web/pgadmin/static/scss/_select2.overrides.scss
similarity index 52%
rename from web/pgadmin/static/css/select2.overrides.css
rename to web/pgadmin/static/scss/_select2.overrides.scss
index 3c27314a..aaec51b9 100644
--- a/web/pgadmin/static/css/select2.overrides.css
+++ b/web/pgadmin/static/scss/_select2.overrides.scss
@@ -1,4 +1,4 @@
 .select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: #e7f2ff;
-  color: #333333;
-}
\ No newline at end of file
+  background-color: $color-primary-lighter;
+  color:  $color-gray-dark;
+}
diff --git a/web/pgadmin/static/scss/_typography.scss b/web/pgadmin/static/scss/_typography.scss
deleted file mode 100644
index e68cff17..00000000
--- a/web/pgadmin/static/scss/_typography.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-$font-family-1: "Open Sans";
-
-.text-bold {
-  font-weight: bold;
-}
-
-.text-14 {
-  font-family: $font-family-1;
-  font-size: 14px;
-}
-
-.text-13 {
-  font-family: $font-family-1;
-  font-size: 13px;
-}
-
-.text-12 {
-  font-family: $font-family-1;
-  font-size: 12px;
-}
-
-.text-11 {
-  font-family: $font-family-1;
-  font-size: 11px;
-}
diff --git a/web/pgadmin/static/scss/_webcabin.overrides.scss b/web/pgadmin/static/scss/_webcabin.overrides.scss
new file mode 100644
index 00000000..3d2c8b16
--- /dev/null
+++ b/web/pgadmin/static/scss/_webcabin.overrides.scss
@@ -0,0 +1,360 @@
+.wcDocker {
+  background-color: $color-bg;
+}
+
+.wcPanelBackground {
+  background-color: $color-bg;
+}
+
+.wcPanelBackground .wcCenter {
+  background-color: $color-gray-lighter;
+}
+
+.wcFrameFlasher {
+  background-color: $color-danger;
+}
+
+.wcFrameShadower {
+  background-color: $color-gray-light;
+}
+
+.wcFrameTitle {
+  font-size: 13px;
+  padding-left: 8px;
+  vertical-align: middle;
+  text-align: left;
+  border-bottom: 1px none;
+  height: 100%;
+  padding-top: 10px;
+  background-color: $color-gray-lighter;
+}
+
+.wcFrameCenter {
+  top: 35px;
+}
+
+.wcFrameButton {
+  width: 20px;
+  height: 20px;
+  border: 2px solid $color-gray;
+  background-color: $color-gray-lighter;
+  font-size: 12px;
+  border-radius: 5px 5px 5px 5px;
+  margin-right: 2px;
+}
+
+.wcFrameMiniButton {
+  width: 8px;
+}
+
+.wcFrameButton.wcFrameButtonLeft {
+  right: 10px;
+}
+.wcFrameButton.wcFrameButtonRight {
+  right: 10px;
+}
+
+.wcFrameButton:hover {
+  border: 2px solid $color-gray-light;
+}
+
+.wcFrameButton:active {
+  border: 2px solid $color-gray-lighter;
+}
+
+.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
+  border-style: inset;
+}
+
+.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
+  border: 1px solid  $color-gray;
+}
+
+.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
+  background-color: rgba($color-danger-light, 0.2) !important;
+}
+
+.wcFrameEdge {
+  border: 1px solid $color-gray-lighter;
+  background-color: $color-gray-lighter;
+}
+
+.wcFrame > .wcFrameEdgeV ~ .wcFrameEdgeV {
+  box-shadow: 3px 6px 3px 1px  $color-gray !important;
+}
+
+.wcFrame > .wcFrameEdge ~ .wcFrameEdgeV {
+  box-shadow: 1px 0px 0px 0px  $color-gray;
+}
+
+.wcFrame > .wcFrameEdgeH ~ .wcFrameEdgeH {
+  box-shadow: 2px 3px 3px 2px  $color-gray !important;
+}
+
+.wcFrame > .wcFrameEdgeH {
+  box-shadow: 1px 0px 0px 0px  $color-gray;
+}
+
+.wcFrameEdgeH {
+  height: 6px;
+}
+
+.wcFrameEdgeV {
+  width: 6px;
+}
+.wcFrameCornerNW,
+.wcFrameCornerNE {
+  height: 6px;
+  width: 6px;
+}
+
+.wcSplitterBar {
+  border: 1px solid  $color-gray;
+  background-color: $color-gray-light;
+}
+
+.wcSplitterBarV {
+  border-left: 3px solid $color-gray-light;
+  height: 100% !important;
+}
+
+.wcSplitterBarH {
+  border-top: 3px solid $color-gray-light;
+  width: 100% !important;
+}
+
+.wcPanelTab {
+  color: $color-primary;
+  background-color: $color-gray-lighter;
+  border: 0px;
+  border-radius: 4px 4px 0px 0px;
+  border-bottom: 0px;
+  margin-right: 1px;
+  margin-top: 10px;
+  font-size: 13px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.wcPanelTab:hover {
+  background-color: $color-gray-white;
+  padding-bottom: 10px;
+}
+
+.wcPanelTabActive {
+  background-color: $color-bg;
+  color: $color-fg;
+  margin-top: 5px;
+  line-height: 30px;
+  font-weight: normal;
+}
+
+.wcFloating .wcPanelTabActive {
+  background-color: $color-primary;
+  margin-top: -2px;
+  font-weight: bold;
+  color: $color-fg-inverse;
+}
+
+.wcFloating .wcPanelTabActive:hover {
+  background-color: $color-primary-light;
+}
+
+.wcGhost {
+  background-color: $color-primary-light;
+  border-radius: 6px;
+}
+
+.wcMenuList, .context-menu-list {
+  border: 1px solid $color-gray-lighter;
+  z-index: 999 !important;
+  background: $color-gray-lighter;
+}
+
+.wcMenuItem, .context-menu-item {
+  background-color: $color-gray-lighter;
+}
+
+.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover, .context-menu-item:hover {
+  background-color: $color-primary !important;
+}
+
+.wcMenuItem.disabled, .context-menu-item.disabled {
+  color: $color-gray-dark;
+  background-color:  $color-gray;
+}
+
+.wcMenuSeparator, .context-menu-separator {
+  border: 2px solid $color-gray-light;
+  background-color: $color-gray-lighter;
+}
+
+.wcInput, input {
+  background-color: transparent;
+}
+
+.wcSelect, select {
+  background-color: transparent;
+}
+
+.wcLayout, .wcLayout tr, .wcLayout td {
+  vertical-align: top;
+}
+
+.wcPanelTab > div > .wcTabIcon {
+  display: inline-block;
+  text-align: center;
+  padding-left: 20px;
+  margin-top: -5px;
+  margin-right: 5px;
+}
+
+.wcPanelTab > div .wcTabIcon.fa {
+  padding-left: 0px !important;
+  color: $color-fg;
+}
+
+.wcTabIcon.fa {
+  margin-right: 5px;
+}
+
+.wcFrameTitleBar {
+  background-color: $color-gray-lighter;
+  height: 35px;
+  border-bottom: $color-gray;
+}
+
+.wcFloating .wcFrameTitleBar {
+  border-bottom: 2px solid  $color-gray;
+  background-color: $color-primary;
+}
+
+.wcFloating .wcFrameTitleBar > div .wcTabIcon.fa {
+  color: $color-fg-inverse;
+}
+
+.wcFrame .wcFrameTitleBar a:hover {
+  color: $color-primary-dark;
+}
+
+.wcFrameButtonBar {
+  top: 5px;
+  right: 5px;
+}
+.context-menu-list {
+font-family: $font-family-primary;
+font-size: 13px;
+}
+
+.context-menu-icon:before {
+  color:  $color-gray-darker;
+  font-size: 13px;
+}
+
+.context-menu-icon-fa:before {
+  font-family: 'FontAwesome'
+}
+
+.context-menu-item {
+  display:block;
+  font-family: $font-family-primary;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.context-menu-list {
+    padding: 2px 0;
+    width: initial !important;
+}
+
+.context-menu-list > .context-menu-item {
+    display:block !important;
+}
+
+.context-menu-list > .context-menu-separator {
+    margin: 0;
+    border: 1px solid $color-bg;
+}
+
+.context-menu-icon-wcTabIcon {
+  text-align: left;
+  padding: 3px 28px;
+  height: auto;
+  background-position: 5px 50%;
+}
+
+ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
+  width: 14px;
+}
+
+.wcFrameButton .fa.fa-close {
+  margin-top: 3.5px;
+  padding-left: 1px;
+}
+
+span.fa.fa-arrow-left, .fa-arrow-right {
+  margin-top: 4px;
+  width: 14px;
+}
+
+.wcMenuSubMenu {
+  visibility: hidden;
+}
+
+i.wcTabIcon {
+  min-width: 20px;
+}
+
+.wcLoadingBackground {
+  background: $color-bg-inverse;
+  opacity: 0.6 !important;
+}
+
+.wcLoadingIcon.fa-spinner {
+  position: absolute;
+  top: 34%;
+  left: 48%;
+  font-size: 50px;
+  color: $color-gray-light;
+  height: 49px !important;
+}
+
+.wcLoadingLabel {
+  top: 40%;
+  left: 0;
+  color: $color-fg-inverse;
+  width: 100%;
+  font-size: 20px;
+  position: absolute;
+  text-align: center;
+}
+
+.wcPanelTab > div {
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 125px;
+}
+
+.wcPanelTabActive > div {
+  width: auto !important;
+  max-width: 100%;
+}
+
+.wcFrameTitleBar.wcTabTop .wcFrameButtonBar {
+  right: 30px !important;
+}
+
+.wcFloating .wcPanelTab .wcTabIcon {
+  display: block;
+  float: left;
+  margin-top: 8px;
+  border-radius: 2px;
+  padding: 0px 13px 5px 5px;
+  background-color: $color-bg;
+  background-size: 18px !important;
+  height: 18px;
+}
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index 42f04d2a..1cde7584 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -1,20 +1,9 @@
-$enable-flex: true;
-@import '../css/webcabin.overrides.css';
-@import '../css/bootstrap.overrides.css';
-@import '../css/aci_tree.overrides.css';
-@import '../css/select2.overrides.css';
-@import '../css/pgadmin.css';
-@import '../css/pgadmin.style.css';
-@import '../css/codemirror.overrides.css';
-
-@import 'primaryblue';
-@import 'colorsgrey';
-@import 'othercolors';
-@import 'typography';
-
-@import 'utils';
+@import 'webcabin.overrides';
+@import 'bootstrap.overrides';
+@import 'aci_tree.overrides';
+@import 'select2.overrides';
+@import 'codemirror.overrides';
 
 @import 'alert';
 @import 'alertify.overrides';
 @import 'backform.overrides';
-@import 'sqleditor/history';
diff --git a/web/pgadmin/static/scss/resources/_default.style.scss b/web/pgadmin/static/scss/resources/_default.style.scss
new file mode 100644
index 00000000..fb459861
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/_default.style.scss
@@ -0,0 +1,243 @@
+/* Background color */
+
+.bg-white {
+  background-color: $color-bg;
+}
+
+.bg-primary {
+  background-color: $color-primary;
+
+  &-lighter {
+    background-color: $color-primary-lighter;
+  }
+
+  &-light{
+    background-color: $color-primary-light;
+  }
+
+  &-dark{
+    background-color: $color-primary-dark;
+  }
+
+  &-darker{
+    background-color: $color-primary-darker;
+  }
+}
+
+.bg-danger {
+  background-color: $color-danger;
+
+  &-lighter {
+    background-color: $color-danger-lighter;
+  }
+
+  &-light {
+    background-color: $color-danger-light;
+  }
+
+  &-dark{
+    background-color: $color-danger-dark;
+  }
+
+  &-darker{
+    background-color: $color-danger-darker;
+  }
+}
+
+.bg-success {
+  background-color: $color-success;
+
+  &-lighter {
+    background-color: $color-success-lighter;
+  }
+
+  &-light {
+    background-color: $color-success-light;
+  }
+
+  &-dark{
+    background-color: $color-success-dark;
+  }
+
+  &-darker{
+    background-color: $color-success-darker;
+  }
+}
+
+
+.bg-warning {
+  background-color: $color-warning;
+
+  &-lighter {
+    background-color: $color-warning-lighter;
+  }
+
+  &-light {
+    background-color: $color-warning-light;
+  }
+
+  &-dark{
+    background-color: $color-warning-dark;
+  }
+
+  &-darker{
+    background-color: $color-warning-darker;
+  }
+}
+
+
+.bg-gray {
+  background-color:  $color-gray;
+
+  &-lighter {
+    background-color: $color-gray-lighter;
+  }
+
+  &-light {
+    background-color: $color-gray-light;
+  }
+
+  &-dark {
+    background-color:  $color-gray-dark;
+  }
+
+  &-darker {
+    background-color:  $color-gray-darker;
+  }
+}
+
+/* Borders */
+.border-primary {
+  border-color: $color-primary;
+
+  &-lighter {
+    border-color: $color-primary-lighter;
+  }
+
+  &-light {
+    border-color: $color-primary-light;
+  }
+
+  &-dark {
+    border-color: $color-primary-dark;
+  }
+
+  &-darker {
+    border-color: $color-primary-darker;
+  }
+}
+
+.border-danger {
+  border-color: $color-danger;
+
+  &-lighter{
+    border-color: $color-danger-lighter;
+  }
+
+  &-light {
+    border-color: $color-danger-light;
+  }
+
+  &-dark {
+    border-color: $color-danger-dark;
+  }
+
+  &-darker {
+    border-color: $color-danger-darker;
+  }
+}
+
+.border-success {
+  border-color: $color-success-light;
+
+  &-lighter {
+    border-color: $color-success-lighter;
+  }
+
+  &-light {
+    border-color: $color-success-light;
+  }
+
+  &-dark {
+    border-color: $color-success-dark;
+  }
+
+  &-darker {
+    border-color: $color-success-darker;
+  }
+}
+
+.border-gray {
+  border: 2px solid $color-gray;
+
+  &-lighter {
+    border: 2px solid $color-gray-lighter;
+  }
+
+  &-light {
+    border: 2px solid $color-gray-light;
+  }
+
+  &-dark {
+    border: 2px solid $color-gray-dark;
+  }
+
+  &-darker {
+    border: 2px solid $color-gray-darker;
+  }
+
+  &-white {
+    border: 2px solid $color-gray-white;
+  }
+}
+
+/* Typography */
+
+
+.font-white {
+  color: $color-fg-inverse;
+}
+
+.text-gray {
+  color:  $color-gray;
+
+  &-dark {
+    color:  $color-gray-dark;
+  }
+}
+
+.text-danger {
+  color: $color-danger;
+}
+
+.text-primary {
+  color: $color-primary;
+}
+
+.text-success {
+  color: $color-success;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-14 {
+  font-family: $font-family-primary;
+  font-size: 14px;
+}
+
+.text-13 {
+  font-family: $font-family-primary;
+  font-size: 13px;
+}
+
+.text-12 {
+  font-family: $font-family-primary;
+  font-size: 12px;
+}
+
+.text-11 {
+  font-family: $font-family-primary;
+  font-size: 11px;
+}
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
new file mode 100644
index 00000000..b7a3b30e
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -0,0 +1,63 @@
+$enable-flex: true !default;
+
+$color-bg: #fff !default;
+$color-fg: #000 !default;
+
+$color-bg-inverse: $color-fg;
+$color-fg-inverse: $color-bg;
+
+$color-primary: #2c76b4 !default;
+$color-primary-fg: $color-fg !default;
+
+$color-danger: #d63a35 !default;
+$color-danger-fg: $color-fg !default;
+
+$color-success: #3a773a !default;
+$color-success-fg: $color-fg !default;
+
+$color-warning: #eea236 !default;
+$color-warning-fg: $color-fg !default;
+
+$color-brand: #009dcf !default;
+$color-editor-bg: $color-bg !default;
+$color-editor-keyword: #908 !default;
+$color-editor-number: #964 !default;
+$color-editor-foldmarker: #0000FF !default;
+$color-editor-activeline: #50B0F0 !default;
+
+$gray-base: #000 !default;
+
+$color-gray-darker: #333333;
+$color-gray-dark: #555555;
+$color-gray: #888888;
+$color-gray-light: #cccccc;
+$color-gray-lighter: #e8e8e8;
+$color-gray-white: #f9f9f9;
+
+$color-primary-light: lighten($color-primary, 25%);
+$color-primary-lighter: lighten($color-primary, 50%);
+$color-primary-dark: darken($color-primary, 10%);
+$color-primary-darker: darken($color-primary, 25%);
+
+$color-danger-light: lighten($color-danger, 25%);
+$color-danger-lighter: lighten($color-danger, 40%);
+$color-danger-dark: darken($color-danger, 10%);
+$color-danger-darker: darken($color-danger, 25%);
+
+$color-success-light: lighten($color-success, 30%);
+$color-success-lighter: lighten($color-success, 50%);
+$color-success-dark: darken($color-success, 10%);
+$color-success-darker: darken($color-success, 25%);
+
+$color-warning-light: lighten($color-warning, 25%);
+$color-warning-lighter: lighten($color-warning, 40%);
+$color-warning-dark: darken($color-warning, 25%);
+$color-warning-darker: darken($color-warning, 40%);
+
+/* Typography */
+/* Use absolute path as this will be used in different directories */
+$font-family-primary: "Open Sans" !default;
+$font-url-primary: '~top/static/fonts/OpenSans-Regular.ttf' !default;
+
+$font-family-editor: 'Source Code Pro' !default;
+$font-url-editor: '~top/static/fonts/SourceCodePro-Regular.ttf' !default;
diff --git a/web/pgadmin/static/css/pgadmin.css b/web/pgadmin/static/scss/resources/_pgadmin.style.scss
similarity index 97%
rename from web/pgadmin/static/css/pgadmin.css
rename to web/pgadmin/static/scss/resources/_pgadmin.style.scss
index 666140e2..a44f69a1 100644
--- a/web/pgadmin/static/css/pgadmin.css
+++ b/web/pgadmin/static/scss/resources/_pgadmin.style.scss
@@ -786,7 +786,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 }
 
 .Resizer {
-  background: #dddddd;
+  background: $color-gray-lighter;
   z-index: 1;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -800,13 +800,14 @@ lgg-el-container[el=md] .pg-el-lg-8,
   width: 100%;
   height: 4px;
   cursor: ew-resize;
-  border-bottom: 1px solid #aaaaaa;
+  border-bottom: 1px solid $color-gray-light;
 }
 
+
 .Resizer.vertical {
   width: 4px;
   cursor: ew-resize;
-  border-right: 1px solid #aaaaaa;
+  border-right: 1px solid $color-gray-light;
 }
 
 .Resizer.disabled {
@@ -818,15 +819,15 @@ lgg-el-container[el=md] .pg-el-lg-8,
 }
 
 @font-face {
-  font-family: 'Open Sans';
-  src: url('../fonts/OpenSans-Regular.ttf');
+  font-family: $font-family-primary;
+  src: url($font-url-primary);
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Source Code Pro';
-  src: url('../fonts/SourceCodePro-Regular.ttf');
+  font-family: $font-family-editor;
+  src: url($font-url-editor);
   font-weight: normal;
   font-style: normal;
 }
@@ -869,3 +870,42 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: initial !important;
 }
+
+
+.alert-box {
+  padding: 15px; }
+
+.alert-icon {
+  display: table-cell; }
+
+.alert-text {
+  display: table-cell;
+  padding-left: 10px; }
+
+.alert-info {
+  border-color: $color-primary-light; }
+
+.color-chip {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  font-size: 1.25em;
+  height: 70px;
+  justify-content: center;
+  margin: 0 0 0.5em;
+  width: 100%; }
+
+.bg-highlight {
+  background-color: $color-primary-lighter; }
+
+.bg-border {
+  background-color: $color-primary-light; }
+
+.opacity-5 {
+  opacity: 0.5;  }
+
+.alertify .ajs-header,
+.alertify .ajs-body {
+  font-family: $font-family-primary; }
diff --git a/web/pgadmin/static/scss/resources/_pgadmin.variables.scss b/web/pgadmin/static/scss/resources/_pgadmin.variables.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/web/pgadmin/static/scss/_utils.scss b/web/pgadmin/static/scss/resources/_utils.scss
similarity index 100%
rename from web/pgadmin/static/scss/_utils.scss
rename to web/pgadmin/static/scss/resources/_utils.scss
diff --git a/web/pgadmin/static/scss/resources/pgadmin.resources.scss b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
new file mode 100644
index 00000000..c0555ef9
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
@@ -0,0 +1,6 @@
+/* All the global variables, mixins goes here */
+@import 'pgadmin.variables.scss';
+@import 'default.variables.scss';
+@import 'default.style.scss';
+@import 'pgadmin.style.scss';
+@import 'utils.scss';
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 37187e45..f9a51213 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -18,7 +18,7 @@
         <span class="sql-editor-busy-text wcLoadingLabel"></span>
     </div>
     <div class="sql-editor">
-        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-lighter border-gray-light" 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=""
@@ -338,7 +338,7 @@
                 </i>
             </div>
             <div class="editor-title"
-                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% else %}{{ bgcolor or '#2C76B4' }}{% endif %}; color: {{ fgcolor or 'white' }};"></div>
+                 style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};"></div>
         </div>
         <div id="editor-panel" tabindex="0"></div>
         <iframe id="download-csv" style="display:none"></iframe>
diff --git a/web/pgadmin/tools/debugger/__init__.py b/web/pgadmin/tools/debugger/__init__.py
index 4479f85c..250efa47 100644
--- a/web/pgadmin/tools/debugger/__init__.py
+++ b/web/pgadmin/tools/debugger/__init__.py
@@ -561,7 +561,6 @@ def direct_new(trans_id):
         is_desktop_mode=current_app.PGADMIN_RUNTIME,
         is_linux=is_linux_platform,
         client_platform=user_agent.platform,
-        stylesheets=[url_for('debugger.static', filename='css/debugger.css')],
     )
 
 
diff --git a/web/pgadmin/tools/debugger/static/css/debugger.css b/web/pgadmin/tools/debugger/static/css/debugger.css
index 54a5a842..47171577 100644
--- a/web/pgadmin/tools/debugger/static/css/debugger.css
+++ b/web/pgadmin/tools/debugger/static/css/debugger.css
@@ -35,18 +35,6 @@
   width: 0.9em;
 }
 
-.debugger-container .CodeMirror-activeline-background {
-  background: #50B0F0;
-}
-
-.CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: "Open Sans";
-  line-height: .3;
-  cursor: pointer;
-}
-
 .CodeMirror, .CodeMirror-gutters {
   min-height: 100%;
 }
@@ -67,18 +55,3 @@
 .CodeMirror-foldgutter-folded:after {
   content: "\25B6";
 }
-
-/* To make font same as Query tool in messages tab */
-.messages {
-    white-space: pre-wrap;
-    font-family: "Source Code Pro";
-    padding-top: 5px;
-    padding-left: 10px;
-    overflow: auto;
-    height: 100%;
-    font-size: 0.925em;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-}
diff --git a/web/pgadmin/tools/debugger/static/js/direct.js b/web/pgadmin/tools/debugger/static/js/direct.js
index 35a6970e..b7dd2b71 100644
--- a/web/pgadmin/tools/debugger/static/js/direct.js
+++ b/web/pgadmin/tools/debugger/static/js/direct.js
@@ -1062,8 +1062,6 @@ define([
         var stack_grid = this.stack_grid = new Backgrid.Grid({
           columns: stackGridCols,
           row: Backgrid.Row.extend({
-            highlightColor: '#D9EDF7',
-            disabledColor: '#F1F1F1',
             events: {
               click: 'rowClick',
             },
diff --git a/web/pgadmin/tools/debugger/static/scss/_debugger.scss b/web/pgadmin/tools/debugger/static/scss/_debugger.scss
new file mode 100644
index 00000000..91e182ec
--- /dev/null
+++ b/web/pgadmin/tools/debugger/static/scss/_debugger.scss
@@ -0,0 +1,26 @@
+.debugger-container .CodeMirror-activeline-background {
+  background: $color-editor-activeline;
+}
+
+.CodeMirror-foldmarker {
+  color: $color-editor-foldmarker;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: $font-family-primary;
+  line-height: .3;
+  cursor: pointer;
+}
+
+/* To make font same as Query tool in messages tab */
+.messages {
+    white-space: pre-wrap;
+    font-family: $font-family-editor;
+    padding-top: 5px;
+    padding-left: 10px;
+    overflow: auto;
+    height: 100%;
+    font-size: 0.925em;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
diff --git a/web/pgadmin/tools/debugger/templates/debugger/direct.html b/web/pgadmin/tools/debugger/templates/debugger/direct.html
index 08412698..f1a64032 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/direct.html
+++ b/web/pgadmin/tools/debugger/templates/debugger/direct.html
@@ -37,7 +37,7 @@ try {
 {% endif %}
 <div class="debugger_main_container" tabindex="0">
     <nav class="navbar-inverse navbar-fixed-top">
-        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-lighter border-gray-light" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button type="button" class="btn btn-default btn-step-into" id="btn-step-into"
                         title=""
diff --git a/web/pgadmin/tools/grant_wizard/__init__.py b/web/pgadmin/tools/grant_wizard/__init__.py
index 47191dee..213ffc42 100644
--- a/web/pgadmin/tools/grant_wizard/__init__.py
+++ b/web/pgadmin/tools/grant_wizard/__init__.py
@@ -51,10 +51,7 @@ class GrantWizardModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
-            url_for('browser.static', filename='css/wizard.css'),
-            url_for('grant_wizard.static', filename='css/grant_wizard.css')
-        ]
+        stylesheets = []
         return stylesheets
 
     def get_own_javascripts(self):
diff --git a/web/pgadmin/tools/grant_wizard/static/css/grant_wizard.css b/web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
similarity index 100%
rename from web/pgadmin/tools/grant_wizard/static/css/grant_wizard.css
rename to web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
diff --git a/web/pgadmin/tools/maintenance/__init__.py b/web/pgadmin/tools/maintenance/__init__.py
index 8e1eb2fe..d9f44b83 100644
--- a/web/pgadmin/tools/maintenance/__init__.py
+++ b/web/pgadmin/tools/maintenance/__init__.py
@@ -60,9 +60,7 @@ class MaintenanceModule(PgAdminModule):
         Returns:
             list: the stylesheets used by this module.
         """
-        stylesheets = [
-            url_for('maintenance.static', filename='css/maintenance.css')
-        ]
+        stylesheets = []
         return stylesheets
 
     def get_exposed_url_endpoints(self):
diff --git a/web/pgadmin/tools/maintenance/static/css/maintenance.css b/web/pgadmin/tools/maintenance/static/css/maintenance.css
deleted file mode 100644
index 3cdba37c..00000000
--- a/web/pgadmin/tools/maintenance/static/css/maintenance.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.btn-group.pg-maintenance-op label.btn.btn-primary.active {
-  background-color: aliceblue;
-  color: #3174AF;
-}
diff --git a/web/pgadmin/tools/maintenance/static/scss/_maintenance.scss b/web/pgadmin/tools/maintenance/static/scss/_maintenance.scss
new file mode 100644
index 00000000..40487dfe
--- /dev/null
+++ b/web/pgadmin/tools/maintenance/static/scss/_maintenance.scss
@@ -0,0 +1,4 @@
+.btn-group.pg-maintenance-op label.btn.btn-primary.active {
+  background-color: $color-primary-lighter;
+  color: $color-primary;
+}
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 75ead263..f47da8cd 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -42,18 +42,6 @@
   height: 100%;
 }
 
-.filter-container {
-  position: relative;
-  background-color: white;
-  border: 1px solid black;
-  box-shadow: 0.5px 0.5px 5px #000;
-  padding-bottom: 30px;
-  top: 10px;
-  z-index: 1;
-  margin: auto;
-  width: 60%;
-}
-
 .filter-container .CodeMirror-scroll {
   min-height: 120px;
 }
@@ -63,13 +51,6 @@
   margin-bottom: 5px;
 }
 
-.filter-title {
-  background-color: #2C76B4;
-  padding: 2px;
-  color: white;
-  font-size: 13px;
-}
-
 #filter .btn-group {
   margin-right: 2px;
   float: right;
@@ -104,10 +85,6 @@
   user-select: text;
 }
 
-.limit-enabled {
-  background-color: white;
-}
-
 .sql-editor-history-container {
   height: 100%;
   overflow: auto;
@@ -137,18 +114,6 @@
   border-bottom: 2px dotted red;
 }
 
-#editor-panel .CodeMirror-activeline-background {
-  background: #D9EDF7;
-}
-
-.CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: "Open Sans";
-  line-height: .3;
-  cursor: pointer;
-}
-
 .CodeMirror {
   min-height: 100%;
   height: 100%;
@@ -205,21 +170,6 @@
   overflow-y: auto;
 }
 
-.CodeMirror-hint {
-  margin: 0;
-  padding: 0 4px;
-  border-radius: 2px;
-  overflow: hidden;
-  white-space: pre;
-  color: black;
-  cursor: pointer;
-}
-
-li.CodeMirror-hint-active {
-  background: #08f;
-  color: white;
-}
-
 .sqleditor-hint {
   padding-left: 20px;
 }
@@ -267,35 +217,10 @@ li {
   border-color: transparent;
 }
 
-.grid-header .ui-icon.ui-state-hover {
-  background-color: white;
-}
-
-.slick-cell.cell-move-handle {
-  font-weight: bold;
-  text-align: right;
-  border-right: solid gray;
-  background: #efefef;
-  cursor: move;
-}
-
-.cell-move-handle:hover {
-  background: #b6b9bd;
-}
-
-.slick-row.selected .cell-move-handle {
-  background: #D5DC8D;
-}
-
 .slick-row .cell-actions {
   text-align: left;
 }
 
-.slick-row.complete {
-  background-color: #DFD;
-  color: #555;
-}
-
 /* Slick.Editors.Text, Slick.Editors.Date */
 #datagrid .slick-header > input.editor-text {
   width: 100%;
@@ -315,15 +240,6 @@ li {
   border: 0;
 }
 
-.cell-selection {
-  border-right-color: #ccc;
-  border-right-style: solid;
-  background: #f5f5f5;
-  color: gray;
-  text-align: right;
-  font-size: 10px;
-}
-
 .slick-row.selected .cell-selection {
   background-color: transparent; /* show default selected row background */
 }
@@ -334,25 +250,6 @@ li {
   background: none;
 }
 
-#datagrid .slick-header .slick-header-columns {
-  background: #ffffff;
-  height: 40px;
-  border-bottom: none;
-}
-
-#datagrid .slick-header .slick-header-column.ui-state-default {
-  color: #333333;
-  padding: 4px 0 3px 6px;
-  background-color: #E8E8E8;
-  border-bottom: 1px solid #CCCCCC !important;
-  border-right: 1px solid #CCCCCC !important;
-}
-
-#datagrid .slick-header .slick-header-column.selected {
-  background-color: #2C76B4;
-  color: #FFFFFF;
-}
-
 #datagrid .slick-header .slick-header-column .column-name {
   font-weight: bold;
   display: block;
@@ -407,68 +304,11 @@ input.editor-checkbox:focus {
   outline: none;
 }
 
-/* Remove active cell border */
-.slick-cell.active {
-  border: 1px solid transparent;
-  border-right: 1px solid #ccc;
-  border-bottom-color: #ccc;
-}
-
-/* To highlight all newly inserted rows */
-.grid-canvas .new_row {
-  background: #dff0d7 !important;
-}
-
-/* To highlight all the updated rows */
-.grid-canvas .updated_row {
-  background: #ccc;
-}
-
-/* To highlight row at fault */
-.grid-canvas .new_row.error, .grid-canvas .updated_row.error {
-  background: #f2dede !important;
-}
-
-/* Disabled row */
-.grid-canvas .disabled_row {
-  background: #eeeeee;
-}
-
-/* Disabled cell */
-.grid-canvas .disabled_cell {
-  color: #999999;
-}
-
-/* Override selected row color */
-#datagrid .slick-row .slick-cell.selected {
-    background-color: #DEE8F1;
-}
-
-/* color the first column */
-#datagrid .slick-row .slick-cell.l0.r0 {
-  background-color: #e8e8e8;
-}
-
-#datagrid .slick-row .slick-cell.l0.r0.selected {
-  background-color: #2C76B4;
-}
-
 .slick-cell span[data-cell-type="row-header-selector"] {
   display: block;
   text-align: center;
 }
 
-.slick-cell.selected span[data-cell-type="row-header-selector"] {
-  color: white;
-}
-
-#datagrid div.slick-header.ui-state-default {
-  background: #ffffff;
-  border-bottom: none;
-  border-right: none;
-  border-top: 1px solid #888;
-}
-
 /*
   SlickGrid, To fix the issue of width misalignment between Column Header &
   actual Column in Mozilla Firefox browser
@@ -496,15 +336,6 @@ input.editor-checkbox:focus {
 }
 
 /* Style for text editor */
-.pg_text_editor {
-  z-index:10000;
-  position:absolute;
-  background: #fff;
-  padding: 7px 5px 5px 1px;
-  border:2px solid #888;
-  -moz-border-radius:10px;
-  border-radius:10px;
-}
 .pg_textarea {
   backround:#fff;
   width:250px;
@@ -525,11 +356,6 @@ input.editor-checkbox:focus {
   border-top: 1px solid #ddd;
 }
 
-.connection_status_wrapper {
-  width: 100%;
-  background-color: #f7f7f7;
-}
-
 .editor-title {
   padding: 4px 5px;
   font-size: 13px;
@@ -550,16 +376,6 @@ input.editor-checkbox:focus {
   margin-left: 2px;
 }
 
-.connection_status .fa-clock-o,
-.connection_status .fa-hourglass-half {
-  color: #e8a735;
-}
-
-.connection_status .fa-exclamation-circle,
-.connection_status .fa-exclamation-triangle {
-  color: #d0021b;
-}
-
 .connection_status .fa-custom {
   margin-bottom: -4px;
   height: 18px;
@@ -582,12 +398,6 @@ input.editor-checkbox:focus {
   outline: 5px auto -webkit-focus-ring-color;
 }
 
-.ajs-body .warn-icon {
-  color:#f1c40f;
-  font-size: 2em;
-  margin-right: 20px;
-  padding-top: 10px;
-}
 .ajs-body .warn-header {
   font-size: 13px;
   font-weight: bold;
@@ -630,10 +440,6 @@ input.editor-checkbox:focus {
   width:100%;
 }
 
-.editor-title-connection {
-  width:calc(100% - 43px);
-}
-
 .connection-status-show {
   display: inline-block;
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index 0fd89c5f..04f3b260 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -1992,7 +1992,7 @@ define('tools.querytool', [
           self.gridView.query_tool_obj.setOption('readOnly', true);
           var cm = self.gridView.query_tool_obj.getWrapperElement();
           if (cm) {
-            cm.className += ' bg-gray-1 opacity-5 hide-cursor-workaround';
+            cm.className += ' bg-gray-lighter opacity-5 hide-cursor-workaround';
           }
           self.disable_tool_buttons(true);
           self.execute_data_query();
diff --git a/web/pgadmin/static/scss/sqleditor/_history.scss b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
similarity index 72%
rename from web/pgadmin/static/scss/sqleditor/_history.scss
rename to web/pgadmin/tools/sqleditor/static/scss/_history.scss
index 086c194e..37bd060b 100644
--- a/web/pgadmin/static/scss/sqleditor/_history.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
@@ -1,21 +1,21 @@
 .query-history {
   height: 100%;
   .list-item {
-    border-bottom: 1px solid $color-gray-3;
+    border-bottom: 1px solid $color-gray-light;
   }
 
   .entry {
     @extend .text-14;
-    @extend .bg-white-1;
-    font-family: 'Source Code Pro';
+    @extend .bg-white;
+    font-family: $font-family-editor;
     border: 2px solid transparent;
     margin-left: 1px;
     padding: 0 8px 0 5px;
 
     .other-info {
       @extend .text-13;
-      @extend .font-gray-4;
-      font-family: 'Source Code Pro';
+      @extend .text-gray;
+      font-family: $font-family-editor;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -34,32 +34,32 @@
   }
 
   .date-label {
-    font-family: 'Source Code Pro';
-    background: #e8e8e8;
+    font-family: $font-family-editor;
+    background: $color-gray-lighter;
     padding: 2px 9px;
     font-size: 11px;
     font-weight: bold;
-    color: #888888;
-    border-bottom: 1px solid #cccccc;
+    color:  $color-gray;
+    border-bottom: 1px solid $color-gray-light;
   }
 
   .entry.error {
-    @extend .bg-red-1;
+    @extend .bg-danger-lighter;
   }
 
   .entry.selected.error {
-    background-color: #d7d0d9;
+    background-color: $color-danger-lighter;
   }
 
   .entry.selected {
-    @extend .font-primary-blue;
-    @extend .border-primary-blue;
-    @extend .bg-blue-1;
+    @extend .text-primary;
+    @extend .border-primary;
+    @extend .bg-primary-lighter;
     font-weight: bold;
     border: 2px solid;
 
     .other-info {
-      @extend .font-primary-blue;
+      @extend .text-primary;
       font-weight: bold;
     }
   }
@@ -67,7 +67,7 @@
 
 .header-label {
   @extend .text-12;
-  @extend .font-gray-4;
+  @extend .text-gray;
   display: block;
 }
 
@@ -77,7 +77,7 @@
   flex-direction: column;
 
   .error-message-block {
-    @extend .bg-red-1;
+    @extend .bg-danger-lighter;
     flex: 0.3;
     padding-left: 20px;
 
@@ -86,7 +86,7 @@
       padding: 7px 0;
 
       span {
-        @extend .font-red-3;
+        @extend .text-danger;
         font-weight: 500;
         margin-right: 8px;
       }
@@ -129,22 +129,22 @@
       float: left;
       position: relative;
       z-index: 10;
-      border: 1px solid $color-gray-3;
-      color: $primary-blue;
+      border: 1px solid $color-gray-light;
+      color: $color-primary;
       font-size: 12px;
-      box-shadow: 1px 2px 4px 0px $color-gray-3;
+      box-shadow: 1px 2px 4px 0px $color-gray-light;
       padding: 3px 12px 3px 10px;
       font-weight: 500;
       min-width: 75px;
     }
 
     .copy-all {
-      background-color: #ffffff;
+      background-color: $color-bg;
     }
 
     .was-copied {
-      background-color: $color-blue-1;
-      border-color: $color-blue-2;
+      background-color: $color-primary-lighter;
+      border-color: $color-primary-light;
     }
 
     .CodeMirror-scroll {
@@ -153,7 +153,7 @@
   }
 
   .block-divider {
-    @extend .border-gray-3;
+    @extend .border-gray-light;
     margin-top: 11px;
     margin-bottom: 8px;
   }
@@ -181,9 +181,9 @@
         height: 100%;
 
         .content-value {
-          @extend .bg-white-1;
+          @extend .bg-white;
           @extend .text-13;
-          font-family: 'Source Code Pro';
+          font-family: $font-family-editor;
           border: 0;
           padding-left: 0;
           position: absolute;
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
new file mode 100644
index 00000000..0b9c07a4
--- /dev/null
+++ b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
@@ -0,0 +1,197 @@
+.filter-title {
+  background-color: $color-primary;
+  padding: 2px;
+  color: $color-fg-inverse;
+  font-size: 13px;
+}
+
+#editor-panel .CodeMirror-activeline-background {
+  background: $color-primary-lighter;
+}
+
+.ajs-body .warn-icon {
+  color: $color-warning;
+  font-size: 2em;
+  margin-right: 20px;
+  padding-top: 10px;
+}
+
+.connection_status_wrapper {
+  width: 100%;
+  background-color: $color-gray-white;
+}
+
+.connection_status .fa-clock-o,
+.connection_status .fa-hourglass-half {
+  color: $color-warning;
+}
+
+.connection_status .fa-exclamation-circle,
+.connection_status .fa-exclamation-triangle {
+  color: $color-danger;
+}
+
+li.CodeMirror-hint-active {
+  background: $color-primary-light;
+  color: $color-primary-fg;
+}
+
+.filter-container {
+  position: relative;
+  background-color: $color-bg;
+  border: 1px solid black;
+  box-shadow: 0.5px 0.5px 5px #000;
+  padding-bottom: 30px;
+  top: 10px;
+  z-index: 1;
+  margin: auto;
+  width: 60%;
+}
+
+.limit-enabled {
+  background-color: $color-bg;
+}
+
+.CodeMirror-hint {
+  margin: 0;
+  padding: 0 4px;
+  border-radius: 2px;
+  overflow: hidden;
+  white-space: pre;
+  color: $color-fg;
+  cursor: pointer;
+}
+
+.grid-header .ui-icon.ui-state-hover {
+  background-color: $color-bg;
+}
+
+.slick-cell.selected span[data-cell-type="row-header-selector"] {
+  color: $color-fg-inverse;
+}
+
+.slick-cell.cell-move-handle {
+  font-weight: bold;
+  text-align: right;
+  border-right: solid  $color-gray;
+  background: $color-gray-white;
+  cursor: move;
+}
+
+.cell-move-handle:hover {
+  background: $color-gray-light;
+}
+
+.slick-row.selected .cell-move-handle {
+  background: $color-warning-light;
+}
+
+.slick-row.complete {
+  background-color: $color-success-lighter;
+  color:  $color-gray-dark;
+}
+
+.cell-selection {
+  border-right-color: $color-gray-light;
+  border-right-style: solid;
+  background: $color-gray-lighter;
+  color:  $color-gray;
+  text-align: right;
+  font-size: 10px;
+}
+
+#datagrid .slick-header .slick-header-columns {
+  background: $color-bg;
+  height: 40px;
+  border-bottom: none;
+}
+
+#datagrid .slick-header .slick-header-column.ui-state-default {
+  color:  $color-gray-dark;
+  padding: 4px 0 3px 6px;
+  background-color: $color-gray-lighter;
+  border-bottom: 1px solid $color-gray-light !important;
+  border-right: 1px solid $color-gray-light !important;
+}
+
+#datagrid .slick-header .slick-header-column.selected {
+  background-color: $color-primary;
+  color: $color-fg-inverse;
+}
+
+/* Remove active cell border */
+.slick-cell.active {
+  border: 1px solid transparent;
+  border-right: 1px solid $color-gray-light;
+  border-bottom-color: $color-gray-light;
+}
+
+/* To highlight all newly inserted rows */
+.grid-canvas .new_row {
+  background: $color-success-lighter !important;
+}
+
+/* To highlight all the updated rows */
+.grid-canvas .updated_row {
+  background: $color-gray-lighter;
+}
+
+/* To highlight row at fault */
+.grid-canvas .new_row.error, .grid-canvas .updated_row.error {
+  background: $color-danger-lighter !important;
+}
+
+/* Disabled row */
+.grid-canvas .disabled_row {
+  background: $color-gray-lighter;
+}
+
+/* Disabled cell */
+.grid-canvas .disabled_cell {
+  color: $color-gray-light;
+}
+
+/* Override selected row color */
+#datagrid .slick-row .slick-cell.selected {
+    background-color: $color-primary-lighter;
+}
+
+/* color the first column */
+#datagrid .slick-row .slick-cell.l0.r0 {
+  background-color: $color-gray-lighter;
+}
+
+#datagrid .slick-row .slick-cell.l0.r0.selected {
+  background-color: $color-primary;
+}
+
+#datagrid div.slick-header.ui-state-default {
+  background: $color-bg;
+  border-bottom: none;
+  border-right: none;
+  border-top: 1px solid  $color-gray;
+}
+
+.pg_text_editor {
+  z-index:10000;
+  position:absolute;
+  background: $color-bg;
+  padding: 7px 5px 5px 1px;
+  border:2px solid  $color-gray;
+  -moz-border-radius:10px;
+  border-radius:10px;
+}
+
+.CodeMirror-foldmarker {
+  color: $color-primary;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: "Open Sans";
+  line-height: .3;
+  cursor: pointer;
+}
+
+.editor-title-connection {
+  width:calc(100% - 43px);
+  color: $color-fg-inverse;
+  background-color: $color-primary;
+}
diff --git a/web/pgadmin/tools/user_management/static/js/user_management.js b/web/pgadmin/tools/user_management/static/js/user_management.js
index 0b5fe3aa..c0a31006 100644
--- a/web/pgadmin/tools/user_management/static/js/user_management.js
+++ b/web/pgadmin/tools/user_management/static/js/user_management.js
@@ -630,7 +630,7 @@ define([
               var footerTpl = _.template([
                   '<div class="pg-prop-footer" style="visibility:hidden;">',
                   '<div class="pg-prop-status-bar">',
-                  '<div class="media error-in-footer bg-red-1 border-red-2 font-red-3 text-14">',
+                  '<div class="media error-in-footer bg-danger-lighter border-danger-light text-danger text-14">',
                   '<div class="media-body media-middle">',
                   '<div class="alert-icon error-icon">',
                   '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>',
@@ -645,9 +645,7 @@ define([
                 ].join('\n')),
                 $statusBar = $(footerTpl()),
                 UserRow = Backgrid.Row.extend({
-                  userInvalidColor: 'lightYellow',
-
-                  userValidColor: '#fff',
+                  userInvalidClass: 'bg-user-invalid',
 
                   initialize: function() {
                     Backgrid.Row.prototype.initialize.apply(this, arguments);
@@ -656,10 +654,10 @@ define([
                   },
                   userInvalid: function() {
                     $(this.el).removeClass('new');
-                    this.el.style.backgroundColor = this.userInvalidColor;
+                    $(this.el).addClass(this.userInvalidClass);
                   },
                   userValid: function() {
-                    this.el.style.backgroundColor = this.userValidColor;
+                    $(this.el).removeClass(this.userInvalidClass);
                   },
                 }),
                 UserCollection = Backbone.Collection.extend({
diff --git a/web/pgadmin/tools/user_management/static/scss/_user_management.scss b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
new file mode 100644
index 00000000..ac22f0b9
--- /dev/null
+++ b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
@@ -0,0 +1,3 @@
+.bg-user-invalid {
+  @extend .bg-warning-lighter;
+}
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 4dbf1357..362eb662 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -2,6 +2,7 @@
 // Import file, libraries and plugins
 const path = require('path');
 const webpack = require('webpack');
+const fs = require('fs');
 const sourceDir = __dirname + '/pgadmin/static';
 // webpack.shim.js contains path references for resolve > alias configuration
 // and other util function used in CommonsChunksPlugin.
@@ -10,8 +11,7 @@ const PRODUCTION = process.env.NODE_ENV === 'production';
 const envType = PRODUCTION ? 'production': 'development';
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const extractStyle = new ExtractTextPlugin('style.css');
-const extractSass = new ExtractTextPlugin('pgadmin.css');
+const extractStyle = new ExtractTextPlugin('[name].css');
 const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 
 // Extract vendor related libraries(node_modules/lib/lib.js) from bundles
@@ -100,6 +100,30 @@ const sourceMapDevToolPlugin = new webpack.SourceMapDevToolPlugin({
   columns: false,
 });
 
+/* Get all the style files recursively and store in array to
+ * give input to webpack. We are skipping pgadmin/static directory
+ * and adding it to array manually
+ */
+let pgadminStyles = [path.join(__dirname, './pgadmin/static/scss/pgadmin.scss')];
+function pushPgadminStyles(curr_path) {
+  if(path.join(__dirname, './pgadmin/static') === curr_path ||
+      curr_path.indexOf('template') > -1) {
+    return;
+  }
+
+  fs.readdirSync(curr_path).map(function(curr_file) {
+    let stats = fs.statSync(path.join(curr_path, curr_file));
+    /* if directory, dig further */
+    if(stats.isDirectory()) {
+      pushPgadminStyles(path.join(curr_path, curr_file));
+    }
+    else if(stats.isFile() && (curr_file.endsWith('.scss') || curr_file.endsWith('.css'))) {
+      pgadminStyles.push(path.join(curr_path, curr_file));
+    }
+  });
+}
+pushPgadminStyles(path.join(__dirname,'./pgadmin'));
+
 module.exports = {
   stats: { children: false },
   // The base directory, an absolute path, for resolving entry points and loaders
@@ -112,8 +136,8 @@ module.exports = {
     sqleditor: './pgadmin/tools/sqleditor/static/js/sqleditor.js',
     debugger_direct: './pgadmin/tools/debugger/static/js/direct.js',
     file_utils: './pgadmin/misc/file_manager/static/js/utility.js',
-    pgadmin_css: './pgadmin/static/scss/pgadmin.scss',
-    style_css: './pgadmin/static/css/style.css',
+    pgadmin: pgadminStyles,
+    style: './pgadmin/static/css/style.css',
   },
   // path: The output directory for generated bundles(defined in entry)
   // Ref: https://webpack.js.org/configuration/output/#output-library
@@ -252,31 +276,42 @@ module.exports = {
       },
     }, {
       test: /\.(jpe?g|png|gif|svg)$/i,
-      loaders: [
-        'file-loader?hash=sha512&digest=hex&name=img/[name].[ext]', {
-          loader: 'image-webpack-loader',
-          query: {
-            bypassOnDebug: true,
-            mozjpeg: {
-              progressive: true,
-            },
-            gifsicle: {
-              interlaced: false,
-            },
-            optipng: {
-              optimizationLevel: 7,
-            },
-            pngquant: {
-              quality: '75-90',
-              speed: 3,
-            },
+      loaders: [{
+        loader: 'url-loader',
+        options: {
+          emitFile: true,
+          name: 'img/[name].[ext]',
+          limit: 4096,
+        },
+      }, {
+        loader: 'image-webpack-loader',
+        query: {
+          bypassOnDebug: true,
+          mozjpeg: {
+            progressive: true,
+          },
+          gifsicle: {
+            interlaced: false,
+          },
+          optipng: {
+            optimizationLevel: 7,
+          },
+          pngquant: {
+            quality: '75-90',
+            speed: 3,
           },
         },
-      ],
+      }],
       exclude: /vendor/,
     }, {
       test: /\.(eot|svg|ttf|woff|woff2)$/,
-      loader: 'file-loader?name=fonts/[name].[ext]',
+      loaders: [{
+        loader: 'file-loader',
+        options: {
+          name: 'fonts/[name].[ext]',
+          emitFile: true,
+        },
+      }],
       include: [
         /node_modules/,
         path.join(sourceDir, '/css/'),
@@ -286,13 +321,18 @@ module.exports = {
       exclude: /vendor/,
     }, {
       test: /\.scss$/,
-      use: extractSass.extract({
+      use: extractStyle.extract({
         use: [{
           loader: 'css-loader',
         }, {
           loader: 'sass-loader', // compiles Sass to CSS
+        }, {
+          /* This will @import with below resources to all scss files */
+          loader: 'sass-resources-loader',
           options: {
-            includePaths: ['./pgadmin/static/scss/'],
+            resources: [
+              './pgadmin/static/scss/resources/pgadmin.resources.scss',
+            ],
           },
         }],
       }),
@@ -325,7 +365,6 @@ module.exports = {
   // Define list of Plugins used in Production or development mode
   // Ref:https://webpack.js.org/concepts/plugins/#components/sidebar/sidebar.jsx
   plugins: PRODUCTION ? [
-    extractSass,
     extractStyle,
     vendorChunks,
     pgAdminCommonChunks,
@@ -335,7 +374,6 @@ module.exports = {
     definePlugin,
     sourceMapDevToolPlugin,
   ]: [
-    extractSass,
     extractStyle,
     vendorChunks,
     pgAdminCommonChunks,