diff --git a/web/package.json b/web/package.json
index bb756dc2..b5c643ce 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,7 @@
     "karma-webpack": "~2.0.13",
     "node-sass": "^4.5.3",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
+    "popper.js": "^1.14.4",
     "raw-loader": "^0.5.1",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^1.3.3",
@@ -56,7 +57,7 @@
     "backgrid-select-all": "^0.3.5",
     "backgrid-sizeable-columns": "^0.1.1",
     "bignumber.js": "^6.0.0",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^4.1.3",
     "bootstrap-datepicker": "^1.7.0",
     "bootstrap-switch": "3.3.4",
     "bowser": "1.6.1",
diff --git a/web/pgadmin/about/templates/about/index.html b/web/pgadmin/about/templates/about/index.html
index 61576cc7..f2c338f2 100644
--- a/web/pgadmin/about/templates/about/index.html
+++ b/web/pgadmin/about/templates/about/index.html
@@ -24,7 +24,7 @@
         <div class="col-sm-9">{{ info.current_user }}</div>
     </div>
     <div class="row">
-        <div class="col-xs-12 text-right"><img
+        <div class="col-12 text-right"><img
             src="{{ url_for('static', filename='img/logo-right-128.png') }}"
             alt="{{ config.APP_NAME }} {{ _('logo') }}"
         ></div>
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js
index 935cc84c..9f43b34e 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js
@@ -197,12 +197,12 @@ define('pgadmin.node.fts_configuration', [
           '<div class="subnode-header-form">',
           ' <div class="container-fluid">',
           '  <div class="row">',
-          '   <div class="col-xs-3">',
+          '   <div class="col-3">',
           '    <label class="control-label"><%-token_label%></label>',
           '   </div>',
-          '   <div class="col-xs-6" header="token"></div>',
-          '   <div class="col-xs-2">',
-          '     <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
+          '   <div class="col-6" header="token"></div>',
+          '   <div class="col-2">',
+          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
           '   </div>',
           '  </div>',
           ' </div>',
@@ -257,7 +257,7 @@ define('pgadmin.node.fts_configuration', [
         var self = this,
           titleTmpl = _.template('<div class=\'subnode-header\'></div>'),
           $gridBody = $('<div></div>', {
-            class:'pgadmin-control-group backgrid form-group col-xs-12 object subnode',
+            class:'pgadmin-control-group backgrid form-group col-12 object subnode',
           }).append(
                titleTmpl({label: data.label})
           );
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
index 43f9cfda..d616f0cc 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
@@ -64,7 +64,7 @@ define('pgadmin.node.schema', [
             '<div class="subnode-header">',
             '  <label class="control-label col-sm-4"><%-label%></label>',
             '</div>'].join('\n')),
-          gridBody = $('<div class="pgadmin-control-group backgrid form-group col-xs-12 object subnode"></div>').append(
+          gridBody = $('<div class="pgadmin-control-group backgrid form-group col-12 object subnode"></div>').append(
               gridHeader(attributes)
               );
 
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js
index 1befc999..b8b46a63 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js
@@ -391,12 +391,12 @@ define('pgadmin.node.exclusion_constraint', [
           '<div class="subnode-header-form">',
           ' <div class="container-fluid">',
           '  <div class="row">',
-          '   <div class="col-xs-4">',
+          '   <div class="col-4">',
           '    <label class="control-label"><%-column_label%></label>',
           '   </div>',
-          '   <div class="col-xs-4" header="column"></div>',
-          '   <div class="col-xs-4">',
-          '     <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
+          '   <div class="col-4" header="column"></div>',
+          '   <div class="col-4">',
+          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
           '   </div>',
           '  </div>',
           ' </div>',
@@ -443,7 +443,7 @@ define('pgadmin.node.exclusion_constraint', [
         var self = this,
           titleTmpl = _.template('<div class=\'subnode-header\'></div>'),
           $gridBody =
-          $('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>').append(
+          $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
             // Append titleTmpl only if create/edit mode
             data.mode !== 'properties' ? titleTmpl({label: data.label}) : ''
           );
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js
index e3dd9dcb..efbabc22 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js
@@ -309,7 +309,7 @@ define('pgadmin.node.foreign_key', [
           '   </div>',
           '   <div class="col-md-6" header="local_column"></div>',
           '   <div class="col-md-2">',
-          '     <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
+          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
           '   </div>',
           '  </div>',
           '  <div class="row">',
@@ -374,7 +374,7 @@ define('pgadmin.node.foreign_key', [
             '<label class=\'control-label\'><%-label%></label>',
             '</div>'].join('\n')),
           $gridBody =
-          $('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>').append(
+          $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
             // Append titleTmpl only if create/edit mode
             data.mode !== 'properties' ? titleTmpl({label: data.label}) : ''
           );
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
index 95dcc968..bf0bb8dd 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/triggers/static/js/trigger.js
@@ -25,7 +25,7 @@ define('pgadmin.node.trigger', [
       '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '<% } %>',
     ].join('\n')),
-    className: 'pgadmin-control-group form-group col-xs-6',
+    className: 'pgadmin-control-group form-group col-6',
   });
 
   if (!pgBrowser.Nodes['coll-trigger']) {
diff --git a/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js b/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js
index 1cfa38c9..a8884edc 100644
--- a/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js
+++ b/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js
@@ -343,7 +343,7 @@ define('pgadmin.node.pga_schedule', [
               );
 
               this.$el.prepend(
-                '<div class="set-group pg-el-xs-12 ' +
+                '<div class="set-group c ' +
                   Backform.helpMessageClassName + '">' +
                   gettext('Schedules are specified using a <b>cron-style</b> format.<br/><ul><li>For each selected time or date element, the schedule will execute.<br/>e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.<br/></li><li>Values from more than one field may be specified in order to further control the schedule.<br/>e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.</li><li>For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.</li></ul>') +
                   '</div>'
diff --git a/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css b/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css
index d26e218b..ef46fc42 100644
--- a/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css
+++ b/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css
@@ -25,6 +25,6 @@
   margin: 5px;
 }
 
-div[role=tabpanel] > .pgadmin-control-group.form-group.pg-el-xs-12.jscexceptions {
+div[role=tabpanel] > .pgadmin-control-group.form-group.c.jscexceptions {
   min-height: 400px;
 }
diff --git a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
index 55fd4fe1..09f0f4e2 100644
--- a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
+++ b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
@@ -66,8 +66,8 @@ define('pgadmin.node.role', [
 
   var RoleCustomSwitchControl = Backform.SwitchControl.extend({
     template: _.template([
-      '<label class="control-label pg-el-sm-9 pg-el-xs-12"><%=label%></label>',
-      '<div class="pgadmin-controls pg-el-sm-3 pg-el-xs-12">',
+      '<label class="control-label"><%=label%></label>',
+      '<div class="pgadmin-controls">',
       '  <div class="checkbox" style="float:right">',
       '    <label>',
       '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
@@ -82,7 +82,7 @@ define('pgadmin.node.role', [
 
   var RoleMembersControl = Backform.Control.extend({
     defaults: _.defaults(
-      {extraClasses: ['col-xs-12 col-sm-12 col-md-12']},
+      {extraClasses: ['col-12 col-sm-12 col-md-12']},
       Backform.NodeListByNameControl.prototype.defaults
     ),
     initialize: function() {
diff --git a/web/pgadmin/browser/server_groups/servers/static/css/servers.css b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
new file mode 100644
index 00000000..996275a8
--- /dev/null
+++ b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
@@ -0,0 +1,8 @@
+.icon-server-connecting {
+  background-image: url('~top/static/img/load-node.gif') !important;
+  background-repeat: no-repeat;
+  background-size: 20px !important;
+  align-content: center;
+  vertical-align: middle;
+  height: 1.3em;
+}
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 7a365cba..ab128a0c 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/variable.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/variable.js
@@ -328,10 +328,10 @@ define([
             titleTmpl = _.template([
               '<div class=\'subnode-header\'>',
               '<label class=\'control-label\'><%-label%></label>',
-              '<button class=\'btn-sm btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
+              '<button class=\'btn btn-sm-sq btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
               '</div>'].join('\n')),
             $gridBody =
-            $('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>').append(
+            $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
               titleTmpl(data)
             );
 
diff --git a/web/pgadmin/browser/server_groups/servers/templates/css/servers.css b/web/pgadmin/browser/server_groups/servers/templates/css/servers.css
index f12b2188..b8f785f2 100644
--- a/web/pgadmin/browser/server_groups/servers/templates/css/servers.css
+++ b/web/pgadmin/browser/server_groups/servers/templates/css/servers.css
@@ -16,15 +16,6 @@
   height: 1.3em;
 }
 
-.icon-server-connecting {
-  background-image: url('{{ url_for('static', filename='js/generated/img/load-node.gif')}}') !important;
-  background-repeat: no-repeat;
-  background-size: 20px !important;
-  align-content: center;
-  vertical-align: middle;
-  height: 1.3em;
-}
-
 .change_password {
   padding-left: 7px;
 }
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index f1fd3b2a..b1e95adb 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -146,7 +146,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div><div class="alert alert-info pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container hidden"></div></div>',
+        content: '<div><div class="alert alert-info pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container d-none"></div></div>',
         events: panelEvents,
       }),
       // Reversed engineered SQL for the object
@@ -167,7 +167,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container hidden"></div></div>',
+        content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
         events: panelEvents,
       }),
       // Dependents of the object
@@ -178,7 +178,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container hidden"></div></div>',
+        content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
         events: panelEvents,
       }),
     },
@@ -279,7 +279,7 @@ define('pgadmin.browser', [
         // menu navigation bar
         navbar = $('#navbar-menu > ul').first(),
         // Drop down menu for objects
-        $obj_mnu = navbar.find('li#mnu_obj > ul.dropdown-menu').first(),
+        $obj_mnu = navbar.find('li#mnu_obj .dropdown-menu').first(),
         // data for current selected object
         d = obj.tree.itemData(item),
         update_menuitem = function(m) {
@@ -320,7 +320,7 @@ define('pgadmin.browser', [
         // Create a dummy 'no object seleted' menu
         var create_submenu = pgAdmin.Browser.MenuGroup(
           obj.menu_categories['create'], [{
-            $el: $('<li class="menu-item disabled"><a href="#">' + gettext('No object selected') + '</a></li>'),
+            $el: $('<li><a class="dropdown-item text-white disabled" href="#">' + gettext('No object selected') + '</a></li>'),
             priority: 1,
             category: 'create',
             update: function() {},
@@ -611,11 +611,11 @@ define('pgadmin.browser', [
           if (pgAdmin.Browser.MenuCreator(
             $dropdown, obj.menus[o.menu], obj.menu_categories
           )) {
-            $mnu.removeClass('hide');
+            $mnu.removeClass('d-none');
           }
         });
 
-      navbar.children('#mnu_obj').removeClass('hide');
+      navbar.children('#mnu_obj').removeClass('d-none');
       obj.enable_disable_menus();
     },
     // General function to handle callbacks for object or dialog help.
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index 67e44214..4cf33da3 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -59,7 +59,7 @@ define([
           j = panel.$container.find('.obj_properties').first(),
           view = j.data('obj-view'),
           content = $('<div></div>')
-          .addClass('pg-prop-content col-xs-12'),
+          .addClass('pg-prop-content col-12'),
           node = pgBrowser.Nodes[that.node],
           // This will be the URL, used for object manipulation.
           urlBase = this.generate_url(item, 'properties', data),
diff --git a/web/pgadmin/browser/static/js/error.js b/web/pgadmin/browser/static/js/error.js
index 31b7444a..347d040e 100644
--- a/web/pgadmin/browser/static/js/error.js
+++ b/web/pgadmin/browser/static/js/error.js
@@ -13,7 +13,7 @@ function(gettext, _, alertify, pgAdmin) {
            ' + gettext('Error message') + '</a>\
         </h4>\
         </div>\
-        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">\
+        <div id="collapseOne" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="headingOne">\
         <div class="panel-body" style="overflow: auto;">' + unescape(message) + '</div>\
         </div>\
         </div>';
diff --git a/web/pgadmin/browser/static/js/keyboard.js b/web/pgadmin/browser/static/js/keyboard.js
index 371faa5d..dc12659d 100644
--- a/web/pgadmin/browser/static/js/keyboard.js
+++ b/web/pgadmin/browser/static/js/keyboard.js
@@ -4,6 +4,7 @@ import $ from 'jquery';
 import Mousetrap from 'mousetrap';
 import * as commonUtils from '../../../static/js/utils';
 import dialogTabNavigator from '../../../static/js/dialog_tab_navigator';
+import {default as keyboardFunc} from 'sources/keyboard_shortcuts';
 
 const pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
 
@@ -37,9 +38,7 @@ _.extend(pgBrowser.keyboardNavigation, {
             this.keyboardShortcut.help_shortcut],
         }, // Main menu
         'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward]}, // Main window panels
-        'bindMainMenuLeft': {'shortcuts': 'left', 'bindElem': '.pg-navbar'}, // Main menu
-        'bindMainMenuRight': {'shortcuts': 'right', 'bindElem': '.pg-navbar'}, // Main menu
-        'bindMainMenuUpDown': {'shortcuts': ['up', 'down']}, // Main menu
+        'bindSubMenuClose': {'shortcuts': ['esc','enter']},
         'bindLeftTree': {'shortcuts': this.keyboardShortcut.left_tree_shortcut}, // Main menu,
         'bindSubMenuQueryTool': {'shortcuts': this.keyboardShortcut.sub_menu_query_tool}, // Sub menu - Open Query Tool,
         'bindSubMenuViewData': {'shortcuts': this.keyboardShortcut.sub_menu_view_data}, // Sub menu - Open View Data,
@@ -58,9 +57,37 @@ _.extend(pgBrowser.keyboardNavigation, {
     _.each(self.shortcutMethods, (keyCombo, callback) => {
       self._bindWithMousetrap(keyCombo.shortcuts, self[callback], keyCombo.bindElem);
     });
+
+
+    /* Dropdown submenu was not working properly for up/down arrow keys.
+     * So up/down/right/left events for dropdown were removed from Mousetrap and were
+     * handled manually.
+     */
+    const LEFT_KEY = 37,
+      UP_KEY = 38,
+      RIGHT_KEY = 39,
+      DOWN_KEY = 40;
+
+    $('.pg-navbar').on('keydown', (event)=> {
+      switch(event.keyCode) {
+      case LEFT_KEY:
+        self.bindMainMenuLeft(event);
+        break;
+      case UP_KEY:
+        self.bindMainMenuUpDown(event, 'up');
+        break;
+      case RIGHT_KEY:
+        self.bindMainMenuRight(event);
+        break;
+      case DOWN_KEY:
+        self.bindMainMenuUpDown(event, 'down');
+        break;
+      }
+    });
   },
   _bindWithMousetrap: function(shortcuts, callback, bindElem) {
     const self = this;
+    Mousetrap.unbind(shortcuts);
     if (bindElem) {
       const elem = document.querySelector(bindElem);
       Mousetrap(elem).bind(shortcuts, function() {
@@ -72,6 +99,15 @@ _.extend(pgBrowser.keyboardNavigation, {
       });
     }
   },
+  unbindShortcuts: function() {
+    // Reset previous events on each instance
+    const self = this;
+    _.each(self.mousetrapInstances, (obj) => {
+      obj['instance'].reset();
+    });
+    // Clear already processed events
+    self.mousetrapInstances = [];
+  },
   bindMainMenu: function(event, combo) {
     const shortcut_obj = this.keyboardShortcut;
     if (combo === shortcut_obj.file_shortcut) $('#mnu_file a.dropdown-toggle').dropdown('toggle');
@@ -106,48 +142,85 @@ _.extend(pgBrowser.keyboardNavigation, {
     }, 1000);
   },
   bindMainMenuLeft: function(event) {
-    let prevMenu;
-    if ($(event.target).hasClass('menu-link')) { // Menu items
-      prevMenu = $(event.target).parent().parent().parent().prev('.dropdown');
-    }
-    else if ($(event.target).parent().hasClass('dropdown-submenu')) { // Sub menu
-      $(event.target).parent().toggleClass('open');
-      return;
-    }
-    else { //Menu headers
-      prevMenu = $(event.target).parent().prev('.dropdown');
-    }
+    if ($(event.target).hasClass('nav-link')) { // Menu items
+      let currNavMenu = $(event.target).closest('.nav-item');
+      keyboardFunc._stopEventPropagation(event);
 
-    if (prevMenu.hasClass('hide')) prevMenu = prevMenu.prev('.dropdown'); // Skip hidden menus
+      currNavMenu = currNavMenu.prev('.nav-item');
+      // Skip hidden menus
+      while(currNavMenu.hasClass('d-none')) {
+        currNavMenu = currNavMenu.prev('.nav-item');
+      }
+
+      currNavMenu.find('.dropdown-toggle').first().dropdown('toggle');
 
-    prevMenu.find('a:first').dropdown('toggle');
+    } else if($(event.target).closest('.dropdown-menu').length > 0) {
+      let currLi = $(event.target).closest('li');
+      keyboardFunc._stopEventPropagation(event);
+      /*close submenu*/
+      let currMenu = currLi.closest('.dropdown-menu');
+      if(currMenu.closest('.dropdown-submenu').length > 0) {
+        currMenu.removeClass('show');
+        currLi = currMenu.closest('.dropdown-submenu');
+        currLi.find('.dropdown-item').trigger('focus');
+      }
+    }
   },
   bindMainMenuRight: function(event) {
-    let nextMenu;
-    if ($(event.target).hasClass('menu-link')) { // Menu items
-      nextMenu = $(event.target).parent().parent().parent().next('.dropdown');
-    }
-    else if ($(event.target).parent().hasClass('dropdown-submenu')) { // Sub menu
-      $(event.target).parent().toggleClass('open');
-      return;
-    }
-    else { //Menu headers
-      nextMenu = $(event.target).parent().next('.dropdown');
-    }
+    if ($(event.target).hasClass('nav-link')) { // Menu items
+      let currNavMenu = $(event.target).closest('.nav-item');
+      keyboardFunc._stopEventPropagation(event);
 
-    if (nextMenu.hasClass('hide')) nextMenu = nextMenu.next('.dropdown'); // Skip hidden menus
+      currNavMenu = currNavMenu.next('.nav-item');
+      // Skip hidden menus
+      while(currNavMenu.hasClass('d-none')) {
+        currNavMenu = currNavMenu.next('.nav-item');
+      }
+
+      currNavMenu.find('.dropdown-toggle').first().dropdown('toggle');
+    } else if($(event.target).closest('.dropdown-menu').length > 0) {
+      let currLi = $(event.target).closest('li');
+      keyboardFunc._stopEventPropagation(event);
 
-    nextMenu.find('a:first').dropdown('toggle');
+      /*open submenu if any*/
+      if(currLi.hasClass('dropdown-submenu')){
+        currLi.find('.dropdown-menu').addClass('show');
+        currLi = currLi.find('.dropdown-menu .dropdown-item').first().trigger('focus');
+      }
+    }
   },
   bindMainMenuUpDown: function(event, combo) {
     // Handle Sub-menus
-    if (combo === 'up' && $(event.target).parent().prev().prev('.dropdown-submenu').length > 0) {
-      $(event.target).parent().prev().prev('.dropdown-submenu').find('a:first').trigger('focus');
-    } else {
-      if ($(event.target).parent().hasClass('dropdown-submenu')) {
-        $(event.target).parent().parent().parent().find('a:first').dropdown('toggle');
-        $(event.target).parent().parent().children().eq(2).find('a:first').trigger('focus');
+    if($(event.target).closest('.dropdown-menu').length > 0) {
+      keyboardFunc._stopEventPropagation(event);
+      let currLi = $(event.target).closest('li');
+      /*close all the submenus on movement*/
+      $(event.target).closest('.dropdown-menu').find('.show').removeClass('show');
+
+      if(combo === 'up') {
+        currLi = currLi.prev();
       }
+      else if(combo === 'down'){
+        currLi = currLi.next();
+      }
+
+      /*do not focus on divider and disabled */
+      while(currLi.hasClass('dropdown-divider')
+        || currLi.find('.dropdown-item').first().hasClass('disabled')) {
+        if(combo === 'up') {
+          currLi = currLi.prev();
+        }
+        else if(combo === 'down'){
+          currLi = currLi.next();
+        }
+      }
+      currLi.find('.dropdown-item').trigger('focus');
+    }
+  },
+  bindSubMenuClose: function() {
+    if($(event.target).hasClass('dropdown-item')
+        && $(event.target).closest('.dropdown-submenu').length > 0) {
+      $(event.target).closest('.dropdown').find('.dropdown-submenu .dropdown-menu').removeClass('show');
     }
   },
   bindLeftTree: function() {
diff --git a/web/pgadmin/browser/static/js/menu.js b/web/pgadmin/browser/static/js/menu.js
index 45520c65..df56305f 100644
--- a/web/pgadmin/browser/static/js/menu.js
+++ b/web/pgadmin/browser/static/js/menu.js
@@ -55,7 +55,7 @@ define([
         module: this.module || pgAdmin.Browser,
         cb: this.callback,
         data: this.data,
-      }).addClass('menu-link');
+      }).addClass('dropdown-item');
 
       this.is_disabled = this.disabled(node, item);
       if (this.icon) {
@@ -64,53 +64,14 @@ define([
         }));
       }
 
+      url.addClass((this.is_disabled ? ' disabled' : ''));
+
       var textSpan = $('<span data-test="menu-item-text"></span>').text('  ' + this.label);
 
       url.append(textSpan);
 
-      this.$el = $('<li/>')
-        .addClass('menu-item' + (this.is_disabled ? ' disabled' : ''))
-        .append(url);
-
-      this.applyStyle();
-    },
-
-    applyDisabledStyle: function() {
-      var span = this.$el.find('span');
-      var icon = this.$el.find('i');
-
-
-      span.addClass('text-gray');
-      span.removeClass('text-fg-inverse');
-      icon.addClass('text-gray');
-      icon.removeClass('text-fg-inverse');
+      this.$el = $('<li/>').append(url);
     },
-
-    applyEnabledStyle: function() {
-      var element = this.$el;
-      var span = this.$el.find('span');
-
-      span.addClass('text-fg-inverse');
-      span.removeClass('text-gray');
-      element.find('i').addClass('text-fg-inverse');
-      element.find('i').removeClass('text-gray');
-
-      span.on('mouseover',() => {
-        element.addClass('bg-gray-dark');
-      });
-      span.on('mouseout',() => {
-        element.removeClass('bg-gray-dark');
-      });
-    },
-
-    applyStyle: function() {
-      if (this.is_disabled) {
-        this.applyDisabledStyle();
-      } else {
-        this.applyEnabledStyle();
-      }
-    },
-
     /*
      * Updates the enable/disable state of the menu-item based on the current
      * selection using the disabled function. This also creates a object
@@ -118,17 +79,13 @@ define([
      */
     update: function(node, item) {
 
-      if (this.$el && !this.$el.hasClass('disabled')) {
-        this.$el.addClass('disabled');
+      if (this.$el && !this.$el.find('.dropdown-item').hasClass('disabled')) {
+        this.$el.find('.dropdown-item').addClass('disabled');
       }
 
       this.is_disabled = this.disabled(node, item);
       if (this.$el && !this.is_disabled) {
-        this.$el.removeClass('disabled');
-      }
-
-      if (this.$el) {
-        this.applyStyle();
+        this.$el.find('.dropdown-item').removeClass('disabled');
       }
 
       this.context = {
@@ -208,16 +165,16 @@ define([
 
   pgAdmin.Browser.MenuGroup = function(opts, items, prev, ctx) {
     var template = _.template([
-        '<% if (above) { %><hr><% } %>',
-        '<li class="menu-item dropdown dropdown-submenu">',
-        ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">',
+        '<% if (above) { %><li class="dropdown-divider"></li><% } %>',
+        '<li class="dropdown-submenu">',
+        ' <a href="#" class="dropdown-item">',
         '  <% if (icon) { %><i class="<%= icon %>"></i><% } %>',
-        '  <span><%= label %></span>',
+        '  <span class="text-white"><%= label %></span>',
         ' </a>',
-        ' <ul class="dropdown-menu navbar-inverse">',
+        ' <ul class="dropdown-menu bg-dark">',
         ' </ul>',
         '</li>',
-        '<% if (below) { %><hr><% } %>',
+        '<% if (below) { %><li class="dropdown-divider"></li><% } %>',
       ].join('\n')),
       data = {
         'label': opts.label,
@@ -393,7 +350,7 @@ define([
   Menu.DEFAULTS = {};
 
   Menu.prototype.toggle = function(ev) {
-    var $parent = this.$element.closest('.menu-item');
+    var $parent = this.$element.closest('.dropdown-item');
     if ($parent.hasClass('disabled')) {
       ev.preventDefault();
       return false;
@@ -446,8 +403,8 @@ define([
   $(document)
     .on('click.pg.menu.data-api', '[data-toggle^="pg-menu"]', function(ev) {
       var $menu = $(ev.target);
-      if (!$menu.hasClass('menu-link'))
-        $menu = $menu.closest('.menu-link');
+      if (!$menu.hasClass('dropdown-item'))
+        $menu = $menu.closest('.dropdown-item');
       Plugin.call($menu, 'toggle', ev);
     })
     .on(
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index 223fcb77..a7f43974 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -983,7 +983,7 @@ define('pgadmin.browser.node', [
         j = panel.$container.find('.obj_properties').first(),
         view = j.data('obj-view'),
         content = $('<div tabindex="1"></div>')
-        .addClass('pg-prop-content col-xs-12');
+        .addClass('pg-prop-content col-12');
 
       // Handle key press events for Cancel, save and help button
       var handleKeyDown = function(event, context) {
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index 68579b59..953b370a 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -101,7 +101,7 @@ define([
       '          <div class="wizard-progress-bar"><% if (show_progress_bar) { %>' +
       '            <p class="alert alert-info col-sm-12"><%= show_progress_bar %></p><% } %>' +
       '          </div>' +
-      '          <div class="wizard-right-panel_content col-xs-12">' +
+      '          <div class="wizard-right-panel_content col-12">' +
       '          </div>' +
       '        </div>' +
       '      </div>' +
diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss
index b15c5fd5..894112aa 100644
--- a/web/pgadmin/browser/static/scss/_browser.scss
+++ b/web/pgadmin/browser/static/scss/_browser.scss
@@ -45,8 +45,8 @@ samp,
 }
 
 .pg-toolbar-btn:hover {
-  border: 1px solid $color-gray-light !important;
-  background-color: $color-gray-lighter !important;
+  border: none;
+  background-color: $color-bg !important;
 }
 
 .pg-toolbar-btn {
@@ -55,5 +55,5 @@ samp,
   background-color: $color-bg !important;
   font-size: 14px !important;
   color: $color-gray-darker !important;
-  border: 1px solid $color-gray-light !important;
+  border: none;
 }
diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html
index b1280422..ca1de70b 100644
--- a/web/pgadmin/browser/templates/browser/index.html
+++ b/web/pgadmin/browser/templates/browser/index.html
@@ -34,7 +34,7 @@ require.onResourceLoad = function (context, map, depMaps) {
   if (loadingStatusEl) {
     if (!context) {
       // we will call onResourceLoad(false) by ourselves when requirejs
-      // is not loading anything hide the indicator and exit
+      // is not loading anything d-none the indicator and exit
       setTimeout(function() {
         if (panel != null) {
             try{
@@ -80,10 +80,9 @@ window.onload = function(e){
  setTimeout(function() {
    var gravatarImg = {{ IMG.PREPARE_HTML()|safe }}
    //$('#navbar-menu .navbar-right > li > a').html(gravatarImg);
-   var navbarRight = document.getElementById("navbar-menu").getElementsByClassName("navbar-right")[0];
-   if (navbarRight) {
-     var list = navbarRight.getElementsByTagName("LI")[0];
-     list.getElementsByTagName("a")[0].innerHTML = gravatarImg;
+   var navbarUser = document.getElementById("navbar-user");
+   if (navbarUser) {
+     navbarUser.innerHTML = gravatarImg;
    }
  }, 1000);
 };
@@ -93,85 +92,77 @@ window.onload = function(e){
 {% block body %}
 <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>
-    <div class="row"><div class="col-xs-12 pg-sp-text">{{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}</div></div>
+    <div class="row"><div class="col-12 pg-sp-icon fa fa-spinner fa-pulse"></div></div>
+    <div class="row"><div class="col-12 pg-sp-text">{{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}</div></div>
   </div>
 </div>
-<nav class="navbar-inverse navbar-fixed-top pg-navbar">
-    <div class="container-fluid">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
-                <span class="sr-only">{{ _('Toggle navigation') }}</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand pgadmin_header_logo" onClick="return false;" href="{{ '#' }}"
-               title="{{ config.APP_NAME }} {{ _('logo') }}">
-                <i class="app-icon {{ config.APP_ICON }}"></i>
-                <span>&nbsp;{{ config.APP_NAME }}</span>
-            </a>
-        </div>
-
-        <div class="collapse navbar-collapse" id="navbar-menu" role="navigation">
-
-            <ul class="nav navbar-nav">
-
-                <li id="mnu_file" class="dropdown hide">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('File') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-                <li id="mnu_edit" class="dropdown hide">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('Edit') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-                <li id="mnu_obj" class="dropdown ">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('Object') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-                <li id="mnu_management" class="dropdown hide">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('Management') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-                <li id="mnu_tools" class="dropdown hide">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('Tools') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-                <li id="mnu_help" class="dropdown hide">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
-                        _('Help') }} <span class="caret"></span></a>
-                    <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
-                </li>
-            </ul>
-            {% if config.SERVER_MODE %}
-            <ul class="nav navbar-nav navbar-right">
-                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"></a>
-                    <ul class="dropdown-menu navbar-inverse">
-                        <li>
-                            <a href="#" onclick="pgAdmin.Browser.UserManagement.change_password(
-                              '{{ url_for('browser.change_password') }}'
-                            )">
-                                {{ _('Change Password') }}
-                            </a>
-                        </li>
-                        <li class="divider"></li>
-                        {% if is_admin %}
-                        <li><a href="#" onclick="pgAdmin.Browser.UserManagement.show_users()">{{ _('Users') }}</a></li>
-                        <li class="divider"></li>
-                        {% endif %}
-                        <li><a href="{{ url_for('security.logout') }}?next={{url_for('browser.index')}}">{{ _('Logout') }}</a></li>
-                    </ul>
-                </li>
-            </ul>
-            {% endif %}
-        </div>
+<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark pg-navbar">
+    <a class="navbar-brand pgadmin_header_logo" onClick="return false;" href="{{ '#' }}"
+       title="{{ config.APP_NAME }} {{ _('logo') }}">
+        <i class="app-icon {{ config.APP_ICON }}"></i>
+        <span>&nbsp;{{ config.APP_NAME }}</span>
+    </a>
+    <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-controls="navbar-menu">
+        <span class="sr-only">{{ _('Toggle navigation') }}</span>
+        <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbar-menu" role="navigation">
 
+        <ul class="navbar-nav mr-auto">
+            <li id="mnu_file" class="nav-item active dropdown d-none">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('File') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+            <li id="mnu_edit" class="nav-item active dropdown d-none">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('Edit') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+            <li id="mnu_obj" class="nav-item active dropdown ">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('Object') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+            <li id="mnu_management" class="nav-item active dropdown d-none">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('Management') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+            <li id="mnu_tools" class="nav-item active dropdown d-none">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('Tools') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+            <li id="mnu_help" class="nav-item active dropdown d-none">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
+                    _('Help') }} <span class="caret"></span></a>
+                <ul class="dropdown-menu" role="menu"></ul>
+            </li>
+        </ul>
+        {% if config.SERVER_MODE %}
+        <ul class="navbar-nav mx-2">
+            <li class="nav-item active dropdown">
+                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"
+                   role="button" aria-expanded="false" id="navbar-user"></a>
+                <ul class="dropdown-menu dropdown-menu-right" role="menu">
+                    <li>
+                        <a class="dropdown-item" href="#" onclick="pgAdmin.Browser.UserManagement.change_password(
+                          '{{ url_for('browser.change_password') }}'
+                        )">
+                            {{ _('Change Password') }}
+                        </a>
+                    </li>
+                    <li class="dropdown-divider"></li>
+                    {% if is_admin %}
+                    <li><a class="dropdown-item" href="#" onclick="pgAdmin.Browser.UserManagement.show_users()">{{ _('Users') }}</a></li>
+                    <li class="dropdown-divider"></li>
+                    {% endif %}
+                    <li><a class="dropdown-item" href="{{ url_for('security.logout') }}?next={{url_for('browser.index')}}">{{ _('Logout') }}</a></li>
+                </ul>
+            </li>
+        </ul>
+        {% endif %}
     </div>
 </nav>
 
diff --git a/web/pgadmin/dashboard/static/css/dashboard.css b/web/pgadmin/dashboard/static/css/dashboard.css
index e0060203..67861749 100644
--- a/web/pgadmin/dashboard/static/css/dashboard.css
+++ b/web/pgadmin/dashboard/static/css/dashboard.css
@@ -1,5 +1,6 @@
 .dashboard-container {
-    padding: 15px;
+    padding-top: 15px;
+    padding-bottom: 15px;
 }
 
 .dashboard-row {
diff --git a/web/pgadmin/dashboard/static/scss/_dashboard.scss b/web/pgadmin/dashboard/static/scss/_dashboard.scss
index 2bc71135..df34dcef 100644
--- a/web/pgadmin/dashboard/static/scss/_dashboard.scss
+++ b/web/pgadmin/dashboard/static/scss/_dashboard.scss
@@ -27,27 +27,13 @@
     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,
@@ -63,7 +49,3 @@
   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/dashboard/templates/dashboard/database_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
index 26cde01a..30c02dfa 100644
--- a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
@@ -1,38 +1,39 @@
-<div class="dashboard-container">
+<div class="container-fluid">
+    <div class="dashboard-container">
     <div id="dashboard-graphs" class="dashboard-hidden">
         <div class="row">
-            <div class="col-xs-6">
+            <div class="col-6">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Database sessions') }}</legend>
                 </div>
             </div>
-            <div class="col-xs-6">
+            <div class="col-6">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Transactions per second') }}</legend>
                 </div>
             </div>
         </div>
         <div class="row dashboard-row">
-            <div class="col-xs-6">
+            <div class="col-6">
                 <div id="graph-sessions" class="graph-container"></div>
             </div>
-            <div class="col-xs-6">
+            <div class="col-6">
                 <div id="graph-tps" class="graph-container"></div>
             </div>
         </div>
 
         <div class="row">
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Tuples in') }}</legend>
                 </div>
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Tuples out') }}</legend>
                 </div>
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Block I/O') }}</legend>
                 </div>
@@ -40,27 +41,27 @@
         </div>
 
         <div class="row dashboard-row">
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div id="graph-ti" class="graph-container"></div>
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div id="graph-to" class="graph-container"></div>
             </div>
-            <div class="col-xs-4">
+            <div class="col-4">
                 <div id="graph-bio" class="graph-container"></div>
             </div>
         </div>
     </div>
     <div id="dashboard-activity" class="dashboard-hidden">
         <div class="row">
-            <div class="col-xs-12">
+            <div class="col-12">
                 <div class="obj_properties">
                     <legend class="badge">{{ _('Database activity') }}</legend>
                 </div>
             </div>
         </div>
         <div class="row dashboard-row">
-            <div class="col-xs-12">
+            <div class="col-12">
                 <div class="dashboard-tab-container">
                     <!-- Nav tabs -->
                     <ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
@@ -108,3 +109,4 @@
         {{ _('All Dashboard elements are currently disabled.') }}
     </div>
 </div>
+</div>
diff --git a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
index 5a4df66a..57e0b47b 100644
--- a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
@@ -1,120 +1,122 @@
-<div class="dashboard-container">
-    <div id="dashboard-graphs" class="dashboard-hidden">
-        <div class="row">
-            <div class="col-xs-6">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Server sessions') }}</legend>
+<div class="container-fluid">
+    <div class="dashboard-container">
+        <div id="dashboard-graphs" class="dashboard-hidden">
+            <div class="row">
+                <div class="col-6">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Server sessions') }}</legend>
+                    </div>
                 </div>
-            </div>
-            <div class="col-xs-6">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Transactions per second') }}</legend>
+                <div class="col-6">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Transactions per second') }}</legend>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="row dashboard-row">
-            <div class="col-xs-6">
-                <div id="graph-sessions" class="graph-container"></div>
-            </div>
-            <div class="col-xs-6">
-                <div id="graph-tps" class="graph-container"></div>
+            <div class="row dashboard-row">
+                <div class="col-6">
+                    <div id="graph-sessions" class="graph-container"></div>
+                </div>
+                <div class="col-6">
+                    <div id="graph-tps" class="graph-container"></div>
+                </div>
             </div>
-        </div>
 
-        <div class="row">
-            <div class="col-xs-4">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Tuples in') }}</legend>
+            <div class="row">
+                <div class="col-4">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Tuples in') }}</legend>
+                    </div>
                 </div>
-            </div>
-            <div class="col-xs-4">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Tuples out') }}</legend>
+                <div class="col-4">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Tuples out') }}</legend>
+                    </div>
                 </div>
-            </div>
-            <div class="col-xs-4">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Block I/O') }}</legend>
+                <div class="col-4">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Block I/O') }}</legend>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="row dashboard-row">
-            <div class="col-xs-4">
-                <div id="graph-ti" class="graph-container"></div>
-            </div>
-            <div class="col-xs-4">
-                <div id="graph-to" class="graph-container"></div>
-            </div>
-            <div class="col-xs-4">
-                <div id="graph-bio" class="graph-container"></div>
+            <div class="row dashboard-row">
+                <div class="col-4">
+                    <div id="graph-ti" class="graph-container"></div>
+                </div>
+                <div class="col-4">
+                    <div id="graph-to" class="graph-container"></div>
+                </div>
+                <div class="col-4">
+                    <div id="graph-bio" class="graph-container"></div>
+                </div>
             </div>
         </div>
-    </div>
-    <div id="dashboard-activity" class="dashboard-hidden">
-        <div class="row">
-            <div class="col-xs-12">
-                <div class="obj_properties">
-                    <legend class="badge">{{ _('Server activity') }}</legend>
+        <div id="dashboard-activity" class="dashboard-hidden">
+            <div class="row">
+                <div class="col-12">
+                    <div class="obj_properties">
+                        <legend class="badge">{{ _('Server activity') }}</legend>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="row dashboard-row">
-            <div class="col-xs-12">
-                <div class="dashboard-tab-container">
-                    <!-- Nav tabs -->
-                    <ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
-                        <li role="presentation" class="active dashboard-tab"><a href="#tab_panel_server_activity"
-                                                                                aria-controls="tab_server_activity"
-                                                                                role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
-                        </li>
-                        <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_locks"
-                                                                         aria-controls="tab_server_locks" role="tab"
-                                                                         data-toggle="tab">{{ _('Locks') }}</a></li>
-                        <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_prepared"
-                                                                         aria-controls="tab_server_prepared" role="tab"
-                                                                         data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
-                        <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_config"
-                                                                         aria-controls="tab_server_config" role="tab"
-                                                                         data-toggle="tab">{{ _('Configuration') }}</a></li>
-                    </ul>
+            <div class="row dashboard-row">
+                <div class="col-12">
+                    <div class="dashboard-tab-container">
+                        <!-- Nav tabs -->
+                        <ul class="nav nav-tabs dashboard-tab-panel" role="tablist">
+                            <li role="presentation" class="active dashboard-tab"><a href="#tab_panel_server_activity"
+                                                                                    aria-controls="tab_server_activity"
+                                                                                    role="tab" data-toggle="tab">{{ _('Sessions') }}</a>
+                            </li>
+                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_locks"
+                                                                             aria-controls="tab_server_locks" role="tab"
+                                                                             data-toggle="tab">{{ _('Locks') }}</a></li>
+                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_prepared"
+                                                                             aria-controls="tab_server_prepared" role="tab"
+                                                                             data-toggle="tab">{{ _('Prepared Transactions') }}</a></li>
+                            <li role="presentation" class="dashboard-tab"><a href="#tab_panel_server_config"
+                                                                             aria-controls="tab_server_config" role="tab"
+                                                                             data-toggle="tab">{{ _('Configuration') }}</a></li>
+                        </ul>
 
-                    <!-- Tab panes -->
-                    <div class="tab-content">
-                        <div role="tabpanel" class="tab-pane active" id="tab_panel_server_activity">
-                            <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
-                                <button id="btn_server_activity_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
-                                <div id="server_activity_filter"></div>
+                        <!-- Tab panes -->
+                        <div class="tab-content">
+                            <div role="tabpanel" class="tab-pane active" id="tab_panel_server_activity">
+                                <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
+                                    <button id="btn_server_activity_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
+                                    <div id="server_activity_filter"></div>
+                                </div>
+                                <div id="server_activity" class="grid-container"></div>
                             </div>
-                            <div id="server_activity" class="grid-container"></div>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="tab_panel_server_locks">
-                            <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
-                                <button id="btn_server_locks_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
-                                <div id="server_locks_filter"></div>
+                            <div role="tabpanel" class="tab-pane" id="tab_panel_server_locks">
+                                <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
+                                    <button id="btn_server_locks_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
+                                    <div id="server_locks_filter"></div>
+                                </div>
+                                <div id="server_locks" class="grid-container"></div>
                             </div>
-                            <div id="server_locks" class="grid-container"></div>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="tab_panel_server_prepared">
-                            <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
-                                <button id="btn_server_prepared_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
-                                <div id="server_prepared_filter"></div>
+                            <div role="tabpanel" class="tab-pane" id="tab_panel_server_prepared">
+                                <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
+                                    <button id="btn_server_prepared_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
+                                    <div id="server_prepared_filter"></div>
+                                </div>
+                                <div id="server_prepared" class="grid-container"></div>
                             </div>
-                            <div id="server_prepared" class="grid-container"></div>
-                        </div>
-                        <div role="tabpanel" class="tab-pane" id="tab_panel_server_config">
-                            <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
-                                <button id="btn_server_config_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
-                                <div id="server_config_filter"></div>
+                            <div role="tabpanel" class="tab-pane" id="tab_panel_server_config">
+                                <div class="dashboard-tab-btn-group pg-prop-btn-group-above">
+                                    <button id="btn_server_config_refresh" type="button" class="btn btn-default" title="{{ _('Refresh') }}"> <span class="fa fa-lg fa-refresh"></span></button>
+                                    <div id="server_config_filter"></div>
+                                </div>
+                                <div id="server_config" class="grid-container"></div>
                             </div>
-                            <div id="server_config" class="grid-container"></div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div id="dashboard-none-show" class="alert alert-info pg-panel-message dashboard-hidden" role="alert">
-        {{ _('All Dashboard elements are currently disabled.') }}
+        <div id="dashboard-none-show" class="alert alert-info pg-panel-message dashboard-hidden" role="alert">
+            {{ _('All Dashboard elements are currently disabled.') }}
+        </div>
     </div>
 </div>
diff --git a/web/pgadmin/dashboard/templates/dashboard/welcome_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/welcome_dashboard.html
index e41b77d7..2aa4b945 100644
--- a/web/pgadmin/dashboard/templates/dashboard/welcome_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/welcome_dashboard.html
@@ -1,76 +1,84 @@
-<div class="dashboard-container">
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="obj_properties">
-                <legend class="badge">{{ _('Welcome') }}</legend>
-            </div>
-            <div class="well well-lg">
-                <img src="{{ url_for('dashboard.static', filename='img/welcome_logo.png') }}"
-                     alt="{{ config.APP_NAME }} {{ _('logo') }}">
-                <h4>{{ _('Feature rich') }} | {{ _('Maximises PostgreSQL') }} | {{ _('Open Source') }} </h4>
-                <p>
-                    {{ _('pgAdmin is an Open Source administration and management tool for the PostgreSQL database. It includes a graphical administration interface, an SQL query tool, a procedural code debugger and much more. The tool is designed to answer the needs of developers, DBAs and system administrators alike.') }}
-                </p>
+<div class="container-fluid">
+    <div class="dashboard-container">
+        <div class="row mb-2">
+            <div class="col-12">
+                <div class="obj_properties">
+                    <legend class="badge">{{ _('Welcome') }}</legend>
+                </div>
+                <div class="card bg-light">
+                    <div class="card-body">
+                        <img src="{{ url_for('dashboard.static', filename='img/welcome_logo.png') }}"
+                             alt="{{ config.APP_NAME }} {{ _('logo') }}">
+                        <h4>{{ _('Feature rich') }} | {{ _('Maximises PostgreSQL') }} | {{ _('Open Source') }} </h4>
+                        <p>
+                            {{ _('pgAdmin is an Open Source administration and management tool for the PostgreSQL database. It includes a graphical administration interface, an SQL query tool, a procedural code debugger and much more. The tool is designed to answer the needs of developers, DBAs and system administrators alike.') }}
+                        </p>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="obj_properties">
-                <legend class="badge">{{ _('Quick Links') }}</legend>
-            </div>
-            <div class="well well-lg">
-                <div class="row">
-                    <div class="col-xs-6 dashboard-link">
-                        <a onclick="pgAdmin.Dashboard.add_new_server()">
-                            <span class="fa fa-4x dashboard-icon fa-server" aria-hidden="true"></span><br/>
-                            {{ _('Add New Server') }}
-                        </a>
-                    </div>
-                    <div class="col-xs-6 dashboard-link">
-                        <a onclick="pgAdmin.Preferences.show()">
-                            <span id="mnu_preferences" class="fa fa-4x dashboard-icon fa-cogs"
-                                  aria-hidden="true"></span><br/>
-                            {{ _('Configure pgAdmin') }}
-                        </a>
+        <div class="row mb-2">
+            <div class="col-12">
+                <div class="obj_properties">
+                    <legend class="badge">{{ _('Quick Links') }}</legend>
+                </div>
+                <div class="card bg-light">
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-6 dashboard-link">
+                                <a onclick="pgAdmin.Dashboard.add_new_server()">
+                                    <span class="fa fa-4x dashboard-icon fa-server" aria-hidden="true"></span><br/>
+                                    {{ _('Add New Server') }}
+                                </a>
+                            </div>
+                            <div class="col-6 dashboard-link">
+                                <a onclick="pgAdmin.Preferences.show()">
+                                    <span id="mnu_preferences" class="fa fa-4x dashboard-icon fa-cogs"
+                                          aria-hidden="true"></span><br/>
+                                    {{ _('Configure pgAdmin') }}
+                                </a>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <div class="row">
-        <div class="col-xs-12">
-            <div class="obj_properties">
-                <legend class="badge">{{ _('Getting Started') }}</legend>
-            </div>
-            <div class="well well-lg">
-                <div class="row">
-                    <div class="col-xs-3 dashboard-link">
-                        <a href="http://www.postgresql.org/docs" target="_blank">
-                            <span class="fa fa-4x dashboard-icon dashboard-pg-doc" aria-hidden="true"></span><br/>
-                            {{ _('PostgreSQL Documentation') }}
-                        </a>
-                    </div>
-                    <div class="col-xs-3 dashboard-link">
-                        <a href="https://www.pgadmin.org" target="_blank">
-                            <span class="fa fa-4x dashboard-icon fa-globe" aria-hidden="true"></span><br/>
-                            {{ _('pgAdmin Website') }}
-                        </a>
-                    </div>
-                    <div class="col-xs-3 dashboard-link">
-                        <a href="http://planet.postgresql.org" target="_blank">
-                            <span class="fa fa-4x dashboard-icon fa-book" aria-hidden="true"></span><br/>
-                            {{ _('Planet PostgreSQL') }}
-                        </a>
+        <div class="row mb-2">
+            <div class="col-12">
+                <div class="obj_properties">
+                    <legend class="badge">{{ _('Getting Started') }}</legend>
+                </div>
+                <div class="card bg-light">
+                    <div class="card-body">
+                        <div class="row">
+                        <div class="col-3 dashboard-link">
+                            <a href="http://www.postgresql.org/docs" target="_blank">
+                                <span class="fa fa-4x dashboard-icon dashboard-pg-doc" aria-hidden="true"></span><br/>
+                                {{ _('PostgreSQL Documentation') }}
+                            </a>
+                        </div>
+                        <div class="col-3 dashboard-link">
+                            <a href="https://www.pgadmin.org" target="_blank">
+                                <span class="fa fa-4x dashboard-icon fa-globe" aria-hidden="true"></span><br/>
+                                {{ _('pgAdmin Website') }}
+                            </a>
+                        </div>
+                        <div class="col-3 dashboard-link">
+                            <a href="http://planet.postgresql.org" target="_blank">
+                                <span class="fa fa-4x dashboard-icon fa-book" aria-hidden="true"></span><br/>
+                                {{ _('Planet PostgreSQL') }}
+                            </a>
+                        </div>
+                        <div class="col-3 dashboard-link">
+                            <a href="http://www.postgresql.org/community" target="_blank">
+                                <span class="fa fa-4x dashboard-icon fa-users" aria-hidden="true"></span><br/>
+                                {{ _('Community Support') }}
+                            </a>
+                        </div>
                     </div>
-                    <div class="col-xs-3 dashboard-link">
-                        <a href="http://www.postgresql.org/community" target="_blank">
-                            <span class="fa fa-4x dashboard-icon fa-users" aria-hidden="true"></span><br/>
-                            {{ _('Community Support') }}
-                        </a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+</div>
diff --git a/web/pgadmin/misc/bgprocess/static/css/bgprocess.css b/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
index 59ffc883..f267bac0 100644
--- a/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
+++ b/web/pgadmin/misc/bgprocess/static/css/bgprocess.css
@@ -9,8 +9,7 @@
 
 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status {
   padding: 2px;
-  margin: 5px;
-  width: calc(100% - 10px);
+  margin: 0px 5px;
   text-align: center;
   border-radius: 2px;
   -moz-border-radius: 2px;
@@ -25,11 +24,6 @@
   user-select: text;
 }
 
-.pg-bg-cmd {
-  color: #4156CC;
-  font-style: italic;
-}
-
 ol.pg-bg-process-logs {
   padding: 5px 10px 5px 60px;
   height: 100%;
diff --git a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
index 986a5401..d14c3d1f 100644
--- a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
+++ b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
@@ -247,16 +247,16 @@ define('misc.bgprocess', [
         if (self.notify && !self.details) {
           if (!self.notifier) {
             var header = $('<div></div>', {
-                class: 'h5 pg-bg-notify-header',
+                class: 'pg-bg-notify-header',
               }).append($('<span></span>').text(_.unescape(self.desc))),
-              content = $('<div class="pg-bg-bgprocess row"></div>').append(
+              content = $('<div class="pg-bg-bgprocess"></div>').append(
                 header
               ).append(
                 $('<div></div>', {
-                  class: 'pg-bg-notify-body h6',
+                  class: 'pg-bg-notify-body',
                 }).append(
                   $('<div></div>', {
-                    class: 'pg-bg-start col-xs-12',
+                    class: 'pg-bg-start',
                   }).append(
                     $('<div></div>').text(self.stime.toString())
                   ).append(
@@ -265,7 +265,7 @@ define('misc.bgprocess', [
                 )
               ),
               for_details = $('<div></div>', {
-                class: 'col-xs-12 text-center pg-bg-click h6',
+                class: 'text-center pg-bg-click',
               }).append(
                 $('<span></span>').text(gettext('Click here for details.'))
               ).appendTo(content),
@@ -274,11 +274,13 @@ define('misc.bgprocess', [
               ).appendTo(header);
 
             $('<div></div>', {
-              class: 'pg-bg-status col-xs-12 h5 ' + ((self.exit_code === 0) ?
+              class: 'pg-bg-status ' + ((self.exit_code === 0) ?
                 'bg-success' : (self.exit_code == 1) ?
                 'bg-failed' : ''),
             }).appendTo(content);
 
+            $('<div></div>').appendTo(content);
+
             self.container = content;
             self.notifier = Alertify.notify(
               content.get(0), 'bg-bgprocess', 0, null
@@ -534,23 +536,23 @@ define('misc.bgprocess', [
           showTitle: true,
           isCloseable: true,
           isPrivate: true,
-          content: '<div class="bg-process-details col-xs-12">' +
+          content: '<div class="bg-process-details">' +
             '<p class="bg-detailed-desc"></p>' +
             '<div class="bg-process-stats">' +
             '<span><b>' + gettext('Start time') + ': </b>' +
             '<span class="bgprocess-start-time"></span>' +
             '</span></div>' +
             '</div>' +
-            '<div class="bg-process-watcher col-xs-12">' +
-            '</div>' +
-            '<div class="bg-process-footer col-xs-12">' +
-            '<div class="bg-process-status col-xs-6">' +
-            '<span><b>' + gettext('Status') + ':</b></span><p></p>' +
-            '</div>' +
-            '<div class="bg-process-exec-time col-xs-6">' +
-            '<div class="exec-div pull-right">' +
-            '<span><b>' + gettext('Execution time') + ':</b></span><p></p>' +
+            '<div class="bg-process-watcher">' +
             '</div>' +
+            '<div class="bg-process-footer row">' +
+              '<div class="bg-process-status col-6">' +
+              '<span><b>' + gettext('Status') + ':</b></span><p></p>' +
+              '</div>' +
+              '<div class="bg-process-exec-time col-6">' +
+              '<div class="exec-div pull-right">' +
+              '<span><b>' + gettext('Execution time') + ':</b></span><p></p>' +
+              '</div>' +
             '</div>' +
             '</div>',
           onCreate: function(myPanel, $container) {
diff --git a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
index 689a8d43..44ddf747 100644
--- a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
+++ b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
@@ -1,15 +1,16 @@
+$bgproc-container-pad: 2px;
+
 .ajs-bg-bgprocess > .pg-bg-bgprocess {
   background-color: $color-primary;
   color: $color-fg-inverse;
-  padding: 0px;
-  border-radius: 5px;
+  padding: $bgproc-container-pad;
   text-align: left;
+  font-size: 0.9em;
 }
 
 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-header {
   background-color:  $color-gray-dark;
-  margin-top: 0px;
-  margin-bottom: 5px;
+  margin: (-$bgproc-container-pad) (-$bgproc-container-pad) 5px;
   padding: 5px;
   padding-right: 20px;
   white-space: pre-wrap;
@@ -21,6 +22,7 @@
 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-notify-body {
   font-family: $font-family-editor;
   white-space: nowrap;
+  padding: 5px 0px;
 }
 
 .pg-bg-etime {
@@ -43,6 +45,7 @@
   color: $color-gray-lighter;
   text-decoration: underline;
   cursor: pointer;
+  padding: 5px 0px;
 }
 
 .pg-bg-click:hover {
@@ -65,7 +68,7 @@
   background-color: $color-danger-light;
 }
 
-.pg-panel-content div.bg-process-watcher.col-xs-12 {
+.pg-panel-content div.bg-process-watcher {
   height: 100%;
   padding: 0px 0px 0px 0px;
   WebkitTransition: all 1s;
@@ -91,10 +94,12 @@
 
 .pg-panel-content .bg-process-footer {
   border-top: 1px solid $color-gray-light;
-  padding: 10px 15px;
+  padding: 10px 25px;
   position: absolute;
   bottom: 0;
   background-color: $color-gray-lighter;
+  right: 0px;
+  left: 0px;
 }
 
 .pg-panel-content .bg-process-footer b, .bg-process-stats span b {
@@ -103,11 +108,10 @@
 
 .pg-bg-bgprocess .bg-close {
   display: inline-block;
-  position: absolute;
+  position: relative;
   height: 25px;
   width: 25px;
   right: -12px;
-  top: 3px;
   padding: 2px;
   border: 2px solid $color-primary;
   border-radius: 4px;
diff --git a/web/pgadmin/misc/depends/static/js/depends.js b/web/pgadmin/misc/depends/static/js/depends.js
index 278b33ec..54de1f3d 100644
--- a/web/pgadmin/misc/depends/static/js/depends.js
+++ b/web/pgadmin/misc/depends/static/js/depends.js
@@ -213,9 +213,9 @@ define('misc.depends', [
       $(panel[0]).data('node-prop', cache_flag);
 
       // Hide the grid container and show the default message container
-      if (!$gridContainer.hasClass('hidden'))
-        $gridContainer.addClass('hidden');
-      $msgContainer.removeClass('hidden');
+      if (!$gridContainer.hasClass('d-none'))
+        $gridContainer.addClass('d-none');
+      $msgContainer.removeClass('d-none');
 
       if (node) {
         msg = messages[1];
@@ -248,16 +248,16 @@ define('misc.depends', [
           }
 
           // Hide message container and show grid container.
-          $msgContainer.addClass('hidden');
-          $gridContainer.removeClass('hidden');
+          $msgContainer.addClass('d-none');
+          $gridContainer.removeClass('d-none');
 
           var timer = setTimeout(function() {
             // notify user if request is taking longer than 1 second
 
             $msgContainer.text(gettext('Retrieving data from the server...'));
-            $msgContainer.removeClass('hidden');
+            $msgContainer.removeClass('d-none');
             if ($gridContainer) {
-              $gridContainer.addClass('hidden');
+              $gridContainer.addClass('d-none');
             }
           }, 1000);
 
@@ -267,9 +267,9 @@ define('misc.depends', [
             reset: true,
             success: function() {
               clearTimeout(timer);
-              $gridContainer.removeClass('hidden');
-              if (!$msgContainer.hasClass('hidden')) {
-                $msgContainer.addClass('hidden');
+              $gridContainer.removeClass('d-none');
+              if (!$msgContainer.hasClass('d-none')) {
+                $msgContainer.addClass('d-none');
               }
             },
             error: function(coll, xhr, error, message) {
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 66ea7563..45544f8c 100644
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -5,14 +5,11 @@
 .file_manager #uploader {
   padding: 2px 4px;
   border-width: 1px;
-  display: block;
-  text-align: right;
   height: auto;
   min-height:30px;
   max-height: 80px;
   overflow: hidden;
   border-bottom: 1px;
-  top: 35px;
 }
 
 #uploader .input-path {
@@ -207,15 +204,10 @@ button.list span {
   top: 0;
 }
 
-.file_manager .btn-group {
-  margin: 2px 3px;
-}
-
 .file_manager .fileinfo {
-  height: calc(100% - 109px);
+  height: calc(100% - 90px);
   overflow: hidden;
   position: relative;
-  top: 35px;
 }
 
 .file_manager .fileinfo #contents{
@@ -224,7 +216,7 @@ button.list span {
   display: inline-block;
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .file_manager .fileinfo #contents thead tr{
@@ -368,7 +360,7 @@ a.dz-remove {
 .file_listing .no_folder_found {
   text-align: center;
   position: absolute;
-  top: 35px;
+  top: 50px;
   width: 100%;
   font-size: 14px;
 }
@@ -415,3 +407,45 @@ div.change_file_types span {
     background-repeat: no-repeat !important;
     background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=') !important;
 }
+
+.file_selection_ctrl .create_input span {
+  padding-right: 10px;
+  font-weight: bold;
+}
+
+.file_selection_ctrl .create_input input[type="text"] {
+  height: 23px;
+  padding: 2px;
+  width: 194px;
+  border-radius: 2px;
+}
+
+.file_selection_ctrl .browse_file_input {
+  display: inline-block;
+  width: 220px;
+  margin-right: 0;
+}
+
+.file_selection_ctrl button.select_item:focus,
+.file_selection_ctrl button.select_item:active {
+  outline: none;
+  box-shadow: none;
+}
+
+.file_selection_ctrl input[type="text"] {
+  width: calc(100% - 17px);
+  border: none;
+  margin-left: -6px;
+  margin-top: -3px;
+  height: 32px;
+  padding-left: 5px;
+}
+
+/* Overriding the css for the dropzone */
+.dropzone .dz-preview .dz-progress {
+  height: initial;
+}
+
+.dropzone .dz-preview .dz-progress .dz-upload {
+  bottom: initial;
+}
diff --git a/web/pgadmin/misc/file_manager/static/js/create_dialogue.js b/web/pgadmin/misc/file_manager/static/js/create_dialogue.js
index c640473a..027f9cc3 100644
--- a/web/pgadmin/misc/file_manager/static/js/create_dialogue.js
+++ b/web/pgadmin/misc/file_manager/static/js/create_dialogue.js
@@ -30,6 +30,13 @@ module.exports =  Alertify.dialog('createModeDlg', function() {
           maximizable: false,
           closable: false,
           movable: true,
+          padding: !1,
+          overflow: !1,
+          model: 0,
+          resizable: true,
+          pinnable: false,
+          modal: false,
+          autoReset: false,
         },
       };
     },
diff --git a/web/pgadmin/misc/file_manager/static/js/select_dialogue.js b/web/pgadmin/misc/file_manager/static/js/select_dialogue.js
index 5d24d8fb..84e3f115 100644
--- a/web/pgadmin/misc/file_manager/static/js/select_dialogue.js
+++ b/web/pgadmin/misc/file_manager/static/js/select_dialogue.js
@@ -48,12 +48,16 @@ module.exports =  Alertify.dialog('fileSelectionDlg', function() {
     },
     prepare: function() {
       var self = this;
+
       self.$container.find('.storage_content').remove();
       self.$container.append('<div class=\'storage_content\'></div>');
 
       var content = self.$container.find('.storage_content');
       content.empty();
 
+      // Add our class to alertify
+      $(this.elements.body.childNodes[0]).addClass('alertify_tools_dialog_properties');
+
       $.get(url_for('file_manager.index'), function(data) {
         content.append(data);
       });
@@ -93,6 +97,13 @@ module.exports =  Alertify.dialog('fileSelectionDlg', function() {
           maximizable: false,
           closable: false,
           movable: true,
+          padding: !1,
+          overflow: !1,
+          model: 0,
+          resizable: true,
+          pinnable: false,
+          modal: false,
+          autoReset: false,
         },
       };
     },
@@ -124,10 +135,11 @@ module.exports =  Alertify.dialog('fileSelectionDlg', function() {
     build: function() {
       this.$container = $('<div class="storage_dialog file_selection_dlg"></div>');
       this.elements.content.appendChild(this.$container.get(0));
+      Alertify.pgDialogBuild.apply(this);
     },
     hooks: {
       onshow: function() {
-        $(this.elements.body).addClass('pgadmin-storage-body');
+//        $(this.elements.body).addClass('pgadmin-storage-body');
       },
     },
   };
diff --git a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
index ccd0b69e..b30c1dd3 100644
--- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -1,345 +1,362 @@
-  #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;
-  }
+#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;
+}
+
+.file_selection_ctrl button.select_item {
+  display: inline;
+  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;
+  margin-top: -4px;
+  min-width: 30px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/web/pgadmin/misc/file_manager/templates/file_manager/index.html b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
index 980f5afb..e1e79c7b 100644
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -1,38 +1,46 @@
 ﻿<html>
 <head>
-    <link type="text/css" rel="stylesheet" href="{{ url_for('file_manager.static', filename='css/file_manager.css')}}"/>
 </head>
 <body>
-<div class="file_manager">
-    <div id="uploader" class='col-xs-12'>
-        <div class="btn-group filemanager-path-group col-sm-7 col-xs-12" role="group">
-            <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="fa fa-home btn home"
-                    tabindex="1"><span></span>
-            </button>
-            <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn fa fa-level-up level-up"
-                    disabled tabindex="2"><span></span></button>
-            <input id='file-input-path' class='input-path' title='' type="text" tabindex="3" autofocus/>
-
+<div class="file_manager container-fluid">
+    <div id="uploader" class="row">
+        <div class="col-sm-7">
+            <div class="input-group" role="group">
+                <div class="input-group-prepend">
+                    <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn fa fa-home home"
+                            tabindex="1">
+                    </button>
+                    <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn fa fa-level-up level-up"
+                            disabled tabindex="2">
+                    </button>
+                </div>
+                <input id="file-input-path" class="form-control input-path" title="" type="text" tabindex="3" autofocus/>
+            </div>
         </div>
-        <div class="btn-group filemanager-btn-group" role="group">
-            <div class="uploadresponse"></div>
-            <input class="mode" name="mode" type="hidden" value="add"/>
-            <input class="currentpath" name="currentpath" type="hidden"/>
-            <button type="button" title="{{ _('Refresh') }}" class="btn fa fa-refresh refresh"
-                    tabindex="4"></button>
-            <button type="button" title="{{ _('Download File') }}" class="btn fa fa-download download"
-                    disabled><span></span>
-            </button>
-            <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn fa fa-trash delete"
-                    disabled>
-                <span></span></button>
-            <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn fa fa-pencil-square-o rename"
-                    tabindex="5">
-                <span></span></button>
-            <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
-                    class="btn fa fa-folder-open create" tabindex="8"><span></span></button>
-            <button class="ON fa fa-th btn grid" type="button" title="{{ _('View as grid') }}" tabindex="9"><span></span></button>
-            <button type="button" class="btn fa fa-list list" title="{{ _('View as table') }}" tabindex="10"><span></span></button>
+        <div class="col-sm-5">
+                <div class="uploadresponse"></div>
+                <input class="mode" name="mode" type="hidden" value="add"/>
+                <input class="currentpath" name="currentpath" type="hidden"/>
+                <div class="btn-group" role="group">
+                    <button type="button" title="{{ _('Refresh') }}" class="btn fa fa-refresh refresh"
+                            tabindex="4"></button>
+                    <button type="button" title="{{ _('Download File') }}" class="btn fa fa-download download"
+                            disabled>
+                    </button>
+                    <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn fa fa-trash delete"
+                            disabled>
+                    </button>
+                    <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn fa fa-pencil-square-o rename"
+                            tabindex="5">
+                    </button>
+                    <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
+                            class="btn fa fa-folder-open create" tabindex="8">
+                    </button>
+                    <button class="ON fa fa-th btn grid" type="button" title="{{ _('View as grid') }}" tabindex="9">
+                    </button>
+                    <button type="button" class="btn fa fa-list list" title="{{ _('View as table') }}" tabindex="10">
+                    </button>
+                </div>
         </div>
     </div>
     <div class="fileinfo">
diff --git a/web/pgadmin/misc/static/explain/css/explain.css b/web/pgadmin/misc/static/explain/css/explain.css
index 811426cb..6bc974fa 100644
--- a/web/pgadmin/misc/static/explain/css/explain.css
+++ b/web/pgadmin/misc/static/explain/css/explain.css
@@ -11,6 +11,7 @@
     min-width: 25px;
     cursor: pointer;
     border: 1px solid transparent;
+    font-size: 0.75rem;
 }
 
 .pg-explain-zoom-area:hover {
@@ -29,6 +30,7 @@
   min-width: 25px;
   border: 1px solid transparent;
   pointer-events: none;
+  font-size: 0.75rem;
 }
 
 .pg-explain-stats-area:hover {
diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index e27d810d..9ee2d6ea 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -779,7 +779,7 @@ define('pgadmin.misc.explain', [
           role: 'group',
         }).appendTo(container),
         zoomInBtn = $('<button></button>', {
-          class: 'btn pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn badge',
           title: 'Zoom in',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -787,7 +787,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-search-plus',
           })),
         zoomToNormal = $('<button></button>', {
-          class: 'btn pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn badge',
           title: 'Zoom to original',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -795,7 +795,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-arrows-alt',
           })),
         zoomOutBtn = $('<button></button>', {
-          class: 'btn pg-explain-zoom-btn badge',
+          class: 'btn btn-secondary pg-explain-zoom-btn badge',
           title: 'Zoom out',
           tabindex: 0,
         }).appendTo(zoomArea).append(
@@ -804,13 +804,13 @@ define('pgadmin.misc.explain', [
           }));
 
       var statsArea = $('<div></div>', {
-        class: 'pg-explain-stats-area btn-group hidden',
+        class: 'pg-explain-stats-area d-none',
         role: 'group',
       }).appendTo(container);
 
       $('<button></button>', {
         id: 'btn-explain-stats',
-        class: 'btn pg-explain-stats-btn badge',
+        class: 'btn btn-secondary pg-explain-stats-btn badge',
         title: 'Statistics',
         tabindex: 0,
       }).appendTo(statsArea).append(
diff --git a/web/pgadmin/misc/static/explain/js/explain_statistics.js b/web/pgadmin/misc/static/explain/js/explain_statistics.js
index 369a6717..6ae455ff 100644
--- a/web/pgadmin/misc/static/explain/js/explain_statistics.js
+++ b/web/pgadmin/misc/static/explain/js/explain_statistics.js
@@ -14,7 +14,7 @@ let StatisticsModel = Backbone.Model.extend({
 
     if (Object.keys(jit_stats).length > 0 ||
         Object.keys(triggers_stats).length > 0) {
-      $('.pg-explain-stats-area').removeClass('hidden');
+      $('.pg-explain-stats-area').removeClass('d-none');
     }
 
     $('.pg-explain-stats-area').on('mouseover', () => {
diff --git a/web/pgadmin/misc/statistics/static/js/statistics.js b/web/pgadmin/misc/statistics/static/js/statistics.js
index 4e69788a..1e638742 100644
--- a/web/pgadmin/misc/statistics/static/js/statistics.js
+++ b/web/pgadmin/misc/statistics/static/js/statistics.js
@@ -232,7 +232,7 @@ define('misc.statistics', [
                 // notify user if request is taking longer than 1 second
 
                 $msgContainer.text(gettext('Retrieving data from the server...'));
-                $msgContainer.removeClass('hidden');
+                $msgContainer.removeClass('d-none');
                 if (self.grid) {
                   self.grid.remove();
                 }
@@ -265,17 +265,17 @@ define('misc.statistics', [
               $gridContainer.empty();
               $gridContainer.append(self.grid.$el);
 
-              if (!$msgContainer.hasClass('hidden')) {
-                $msgContainer.addClass('hidden');
+              if (!$msgContainer.hasClass('d-none')) {
+                $msgContainer.addClass('d-none');
               }
-              $gridContainer.removeClass('hidden');
+              $gridContainer.removeClass('d-none');
 
             } else if (res.info) {
-              if (!$gridContainer.hasClass('hidden')) {
-                $gridContainer.addClass('hidden');
+              if (!$gridContainer.hasClass('d-none')) {
+                $gridContainer.addClass('d-none');
               }
               $msgContainer.text(res.info);
-              $msgContainer.removeClass('hidden');
+              $msgContainer.removeClass('d-none');
             }
           })
           .fail(function(xhr, error, message) {
@@ -302,9 +302,9 @@ define('misc.statistics', [
       }
       if (msg != '') {
         // Hide the grid container and show the default message container
-        if (!$gridContainer.hasClass('hidden'))
-          $gridContainer.addClass('hidden');
-        $msgContainer.removeClass('hidden');
+        if (!$gridContainer.hasClass('d-none'))
+          $gridContainer.addClass('d-none');
+        $msgContainer.removeClass('d-none');
 
         $msgContainer.text(msg);
       }
diff --git a/web/pgadmin/static/css/pgadmin.css b/web/pgadmin/static/css/pgadmin.css
new file mode 100644
index 00000000..a728fba7
--- /dev/null
+++ b/web/pgadmin/static/css/pgadmin.css
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: "Open Sans";
+  src: url("~top/static/fonts/OpenSans-Regular.ttf");
+  font-weight: normal;
+  font-style: normal; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("~top/static/fonts/SourceCodePro-Regular.ttf");
+  font-weight: normal;
+  font-style: normal; }
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index 5586b6d1..8a113f00 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -1,4 +1,3 @@
-@import '~bootstrap/dist/css/bootstrap.css';
 @import '~alertifyjs/build/css/alertify.css';
 @import '~alertifyjs/build/css/themes/bootstrap.css';
 @import '~font-awesome/css/font-awesome.css';
diff --git a/web/pgadmin/static/img/load-node.gif b/web/pgadmin/static/img/load-node.gif
new file mode 100644
index 0000000000000000000000000000000000000000..500fa0860e2eb9883f86c30da579008475f596c4
GIT binary patch
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index e0575cc8..7bfbcb90 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -146,7 +146,7 @@ define([
     template: _.template([
       '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=Backform.controlsClassName%>">',
-      '  <span class="<%=Backform.controlClassName%> uneditable-input" <%=disabled ? "disabled" : ""%>>',
+      '  <span class="<%=Backform.controlClassName%> uneditable-input" <%=disabled ? "disabled readonly" : ""%>>',
       '    <%-value%>',
       '  </span>',
       '</div>',
@@ -358,7 +358,7 @@ define([
       '<% for (var i=0; i < options.length; i++) { %>',
       ' <% var option = options[i]; %>',
       ' <% if (option.value === rawValue) { %>',
-      ' <span class="<%=Backform.controlClassName%> uneditable-input" disabled><%-option.label%></span>',
+      ' <span class="<%=Backform.controlClassName%> uneditable-input" disabled readonly><%-option.label%></span>',
       ' <% } %>',
       '<% } %>',
       '<% if (helpMessage && helpMessage.length) { %>',
@@ -506,8 +506,8 @@ define([
     },
     template: {
       'header': _.template([
-        '<li role="presentation" <%=disabled ? "disabled" : ""%>>',
-        ' <a data-toggle="tab" tabindex="-1" data-tab-index="<%=tabIndex%>" href="#<%=cId%>"',
+        '<li class="nav-item" role="presentation" <%=disabled ? "disabled" : ""%>>',
+        ' <a class="nav-link" data-toggle="tab" tabindex="-1" data-tab-index="<%=tabIndex%>" href="#<%=cId%>"',
         '  id="<%=hId%>" aria-controls="<%=cId%>">',
         '<%=label%></a></li>',
       ].join(' ')),
@@ -538,7 +538,7 @@ define([
 
       var tabHead = $('<ul class="nav nav-tabs" role="tablist"></ul>')
         .appendTo(this.$el);
-      var tabContent = $('<ul class="tab-content pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-xs-12"></ul>')
+      var tabContent = $('<div class="tab-content pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-xs-12"></div>')
         .appendTo(this.$el);
 
       _.each(this.schema, function(o) {
@@ -584,12 +584,12 @@ define([
 
       var makeActive = tabHead.find('[id="' + c + '"]').first();
       if (makeActive.length == 1) {
-        makeActive.parent().addClass('active');
+        makeActive.addClass('active show');
         tabContent.find('#' + makeActive.attr('aria-controls'))
-          .addClass('in active');
+          .addClass('active show');
       } else {
-        tabHead.find('[role="presentation"]').first().addClass('active');
-        tabContent.find('[role="tabpanel"]').first().addClass('in active');
+        tabHead.find('.nav-link').first().addClass('active show');
+        tabContent.find('.tab-pane').first().addClass('active show');
       }
 
       return this;
@@ -634,7 +634,7 @@ define([
     },
     fieldsetClass: Backform.setGroupClassName,
     legendClass: 'badge',
-    contentClass: Backform.setGroupContentClassName + ' collapse in',
+    contentClass: Backform.setGroupContentClassName + ' collapse show',
     template: {
       'header': _.template([
         '<fieldset class="<%=fieldsetClass%>" <%=disabled ? "disabled" : ""%>>',
@@ -990,7 +990,7 @@ define([
         gridHeader = _.template([
           '<div class="subnode-header">',
           '  <label class="control-label pg-el-sm-10"><%-label%></label>',
-          '  <button class="btn-sm btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
+          '  <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
           '</div>',
         ].join('\n')),
         gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode"></div>').append(
@@ -1258,7 +1258,7 @@ define([
       var self = this,
         gridHeader = ['<div class=\'subnode-header\'>',
           '  <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>',
-          '  <button class=\'btn-sm btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
+          '  <button class=\'btn btn-sm-sq btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
           '</div>',
         ].join('\n'),
         gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode\'></div>').append(gridHeader);
@@ -2261,14 +2261,16 @@ define([
     template: _.template([
       '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=Backform.controlsClassName%>">',
-      '<div class="file_selection_ctrl form-control">',
-      '<input type="<%=type%>" class="browse_file_input form-control <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '<button class="btn fa fa-ellipsis-h select_item pull-right" <%=disabled ? "disabled" : ""%> ></button>',
+      '<div class="input-group">',
+      '<input type="<%=type%>" class="form-control <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+      '<div class="input-group-append">',
+      '<button class="btn btn-outline-secondary fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> ></button>',
+      '</div>',
+      '</div>',
       '<% if (helpMessage && helpMessage.length) { %>',
       '<span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '<% } %>',
       '</div>',
-      '</div>',
     ].join('\n')),
     events: function() {
       // Inherit all default events of InputControl
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 2e87fbf2..e9cd9757 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -825,7 +825,7 @@ define([
             headerCell: Backgrid.Extension.CustomHeaderIconCell,
             cellHeaderClasses: 'width_percent_100',
           }],
-          gridBody = $('<div class=\'pgadmin-control-group backgrid form-group col-xs-12 object subnode\'></div>');
+          gridBody = $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>');
 
         this.$el.attr('tabindex', '1');
 
diff --git a/web/pgadmin/static/js/keyboard_shortcuts.js b/web/pgadmin/static/js/keyboard_shortcuts.js
index 667129dd..c4187687 100644
--- a/web/pgadmin/static/js/keyboard_shortcuts.js
+++ b/web/pgadmin/static/js/keyboard_shortcuts.js
@@ -217,6 +217,11 @@ function keyboardShortcutsQueryTool(
     queryToolActions.uncommentLineCode(sqlEditorController);
   }  else if (keyCode == ESC_KEY) {
     queryToolActions.focusOut(sqlEditorController);
+    /*Apply only for sub-dropdown*/
+    if($(event.target).hasClass('dropdown-item')
+        && $(event.target).closest('.dropdown-submenu').length > 0) {
+      $(event.target).closest('.dropdown-submenu').find('.dropdown-menu').removeClass('show');
+    }
   } else if(this.validateShortcutKeys(nextPanelKeys, event)) {
     this._stopEventPropagation(event);
     panel_id = this.getInnerPanel(sqlEditorController.container, 'right');
@@ -229,22 +234,26 @@ function keyboardShortcutsQueryTool(
       this._stopEventPropagation(event);
       let currLi = $(event.target).closest('li');
       /*close all the submenus on movement*/
-      $(event.target).closest('.dropdown-menu').find('.open').removeClass('open');
+      $(event.target).closest('.dropdown-menu').find('.show').removeClass('show');
+
+      if(keyCode === UP_KEY) {
+        currLi = currLi.prev();
+      }
+      else if(keyCode === DOWN_KEY){
+        currLi = currLi.next();
+      }
 
-      /*do not focus on divider*/
-      let isDivider = true;
-      while(isDivider) {
+      /*do not focus on divider and disabled */
+      while(currLi.hasClass('dropdown-divider')
+        || currLi.find('.dropdown-item').first().hasClass('disabled')) {
         if(keyCode === UP_KEY) {
           currLi = currLi.prev();
         }
         else if(keyCode === DOWN_KEY){
           currLi = currLi.next();
         }
-        if(!currLi.hasClass('divider')) {
-          isDivider = false;
-        }
       }
-      currLi.find('a:first').trigger('focus');
+      currLi.find('.dropdown-item').trigger('focus');
     }
   } else if(keyCode === LEFT_KEY || keyCode === RIGHT_KEY) {
     /*Apply only for dropdown*/
@@ -255,22 +264,21 @@ function keyboardShortcutsQueryTool(
       if(keyCode === RIGHT_KEY) {
         /*open submenu if any*/
         if(currLi.hasClass('dropdown-submenu')){
-          currLi.addClass('open');
-          currLi = currLi.find('.dropdown-menu li:first-child');
+          currLi.find('.dropdown-menu').addClass('show');
+          currLi = currLi.find('.dropdown-menu .dropdown-item').first().trigger('focus');
         }
       } else if(keyCode === LEFT_KEY) {
         /*close submenu*/
-        let currLiMenu = currLi.closest('.dropdown-menu');
-        if(currLiMenu.closest('.dropdown-submenu').length > 0) {
-          currLiMenu.closest('.dropdown-submenu').removeClass('open');
-          currLi = currLiMenu.closest('.dropdown-submenu');
+        let currMenu = currLi.closest('.dropdown-menu');
+        if(currMenu.closest('.dropdown-submenu').length > 0) {
+          currMenu.removeClass('show');
+          currLi = currMenu.closest('.dropdown-submenu');
+          currLi.find('.dropdown-item').trigger('focus');
         }
       }
-      currLi.find('a:first').trigger('focus');
     }
   }
 
-
   return panel_id;
 }
 
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 7f86a254..da59e86d 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -112,7 +112,7 @@ let FilterDialog = {
             this.__internal.buttons[1].element.disabled = true;
 
             // Status bar
-            this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 hide\'>' +
+            this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 d-none\'>' +
               '  <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\'>' +
@@ -128,7 +128,7 @@ let FilterDialog = {
 
             // To show progress on filter Saving/Updating on AJAX
             this.showFilterProgress = $(
-              '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching hidden">' +
+              '<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching d-none">' +
               '<div class="wcLoadingBackground"></div>' +
               '<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
               '<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
@@ -136,7 +136,7 @@ let FilterDialog = {
 
             $(
               self.showFilterProgress[0]
-            ).removeClass('hidden');
+            ).removeClass('d-none');
 
             self.filterCollectionModel = filterDialogModel(response);
 
@@ -159,14 +159,14 @@ let FilterDialog = {
             // Enable/disable save button and show/hide statusbar based on session
             view.listenTo(view.model, 'pgadmin-session:start', function() {
               view.listenTo(view.model, 'pgadmin-session:invalid', function(msg) {
-                self.statusBar.removeClass('hide');
+                self.statusBar.removeClass('d-none');
                 $(self.statusBar.find('.alert-text')).html(msg);
                 // Disable Okay button
                 self.__internal.buttons[1].element.disabled = true;
               });
 
               view.listenTo(view.model, 'pgadmin-session:valid', function() {
-                self.statusBar.addClass('hide');
+                self.statusBar.addClass('d-none');
                 $(self.statusBar.find('.alert-text')).html('');
                 // Enable Okay button
                 self.__internal.buttons[1].element.disabled = false;
@@ -188,7 +188,7 @@ let FilterDialog = {
             // Hide Progress ...
             $(
               self.showFilterProgress[0]
-            ).addClass('hidden');
+            ).addClass('d-none');
 
           },
           // Callback functions when click on the buttons of the Alertify dialogs
@@ -208,7 +208,7 @@ let FilterDialog = {
               // Show Progress ...
               $(
                 self.showFilterProgress[0]
-              ).removeClass('hidden');
+              ).removeClass('d-none');
 
               axios.put(
                 url_for('sqleditor.set_filter_data', {
@@ -219,7 +219,7 @@ let FilterDialog = {
                 // Hide Progress ...
                 $(
                   self.showFilterProgress[0]
-                ).addClass('hidden');
+                ).addClass('d-none');
 
                 let response = result.data.data;
 
@@ -242,7 +242,7 @@ let FilterDialog = {
                 // Hide Progress ...
                 $(
                   self.showFilterProgress[0]
-                ).addClass('hidden');
+                ).addClass('d-none');
                 handler.onExecuteHTTPError(error);
 
                 setTimeout(
diff --git a/web/pgadmin/static/scss/_aci_tree.overrides.scss b/web/pgadmin/static/scss/_aci_tree.overrides.scss
index dc390d0f..1cd70a2c 100644
--- a/web/pgadmin/static/scss/_aci_tree.overrides.scss
+++ b/web/pgadmin/static/scss/_aci_tree.overrides.scss
@@ -1,33 +1,27 @@
 .aciTree .aciTreeText {
-    font-family: $font-family-primary;
-    font-size: 12px;
+	font-family: $font-family-primary;
+	font-size: 12px;
 }
-
-/* Hover over an element */
-.aciTree .aciTreeLine.aciTreeHover .aciTreeItem  {
-    background-color: $color-primary-lighter;
-    border-color: $color-primary-light;
+.aciTree .aciTreeLine.aciTreeHover .aciTreeItem {
+	background-color: $color-primary-lighter;
+	border-color: $color-primary-light;
 }
-
-.aciTree .aciTreeLine.aciTreeHover .aciTreeText  {
-    color: $color-fg;
+.aciTree .aciTreeLine.aciTreeHover .aciTreeText {
+	color: $color-fg;
 }
-
-/* Selected element and in focus*/
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeItem {
-    background-color: $color-primary-lighter;
+	background-color: $color-primary-lighter;
 }
-
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine .aciTreeText {
-    color: $color-fg;
+	color: $color-fg;
 }
-
-/* Selected element but not in focus */
 .aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem {
-    background-color: $color-primary-lighter;
-    border-color: $color-primary-light;
+	background-color: $color-primary-lighter;
+	border-color: $color-primary-light;
 }
-
 .aciTree .aciTreeItem {
-    white-space: nowrap !important;
+	white-space: nowrap !important;
+}
+.aciTree.aciTreeLoad {
+	background: none;
 }
diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss
index 4f4fd455..d5e51a6e 100644
--- a/web/pgadmin/static/scss/_alert.scss
+++ b/web/pgadmin/static/scss/_alert.scss
@@ -106,7 +106,7 @@
   .alert-text {
     flex-grow: 1;
     border: 1px solid $color-danger-light;
-    padding: 7px 12px 6px 10px;
+    padding: 6px 12px 6px 10px;
     border-left: none;
     -moz-user-select: text;
     -khtml-user-select: text;
@@ -162,3 +162,18 @@
     width: 90%;
   }
 }
+
+/* To align 'X' in alert on login page */
+.alert-dismissable, .alert-dismissible {
+  padding-right: 35px !important;
+}
+
+.alert-info-panel {
+  border: 2px solid $color-gray-light;
+  margin-top: 2em;
+  padding: 5px 5px;
+  background: $color-gray-lighter;
+  border-radius: 5px;
+  height: 8em;
+  overflow: scroll;
+}
diff --git a/web/pgadmin/static/scss/_backform.overrides.scss b/web/pgadmin/static/scss/_backform.overrides.scss
index 96a13c1b..d004e265 100644
--- a/web/pgadmin/static/scss/_backform.overrides.scss
+++ b/web/pgadmin/static/scss/_backform.overrides.scss
@@ -1,7 +1,10 @@
 .has-error {
-  .pgadmin-controls > .form-control {
+  .pgadmin-controls .form-control {
+    border-color: $color-danger;
+  }
+
+  .form-control {
     border-color: $color-danger;
-    position: relative;
   }
 
   .control-label {
@@ -32,3 +35,28 @@
     z-index: 3;
   }
 }
+.backform-tab .tab-pane {
+	padding: 7px;
+	&.SQL {
+    height: 100%;
+    padding: 0px 7px 0px 0px;
+	}
+}
+
+.backform_control_notes {
+	background-color: $color-gray-lighter;
+	border: 1px solid $color-gray-light;
+	border-radius: 3px;
+	color: $color-gray-dark;
+	display: block;
+	font-family: $font-family-editor;
+	font-size: 12px;
+	line-height: 1.42857;
+	margin: 0 0 10px;
+	overflow: auto;
+	padding: 5px 10px;
+	word-wrap: break-word;
+}
+div.backform_control_notes label.control-label {
+	min-width: 0px;
+}
diff --git a/web/pgadmin/static/scss/_backgrid.overrides.scss b/web/pgadmin/static/scss/_backgrid.overrides.scss
new file mode 100644
index 00000000..126b6f06
--- /dev/null
+++ b/web/pgadmin/static/scss/_backgrid.overrides.scss
@@ -0,0 +1,181 @@
+.backgrid > th, .backgrid > td {
+  padding: 2px;
+  font-weight: normal!important;
+}
+
+.subnode > table.backgrid > thead > tr > th:first-child{
+  border-left-color: $color-primary;
+}
+
+.subnode > table.backgrid > thead > tr > th:last-child{
+  border-right-color: $color-primary;
+}
+
+.backgrid .textarea-cell {
+    text-align: left;
+}
+
+.backgrid .textarea-cell.editor textarea {
+    width: 100%;
+    height: auto;
+}
+
+/* Override Backgrid's default z-index */
+.dashboard-tab-container .backgrid-filter .search {
+  z-index: 10 !important;
+}
+
+.dashboard-tab-container .backgrid-filter .clear {
+  z-index: 10 !important;
+}
+
+.backgrid .string-cell.editor input[type=password] {
+  text-align: left;
+}
+
+.backgrid > tbody > td.editor input[type=password] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0 5px;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
+
+.subnode > table.backgrid{
+    width: 100%;
+    margin: 0px;
+    padding: 0;
+    margin-bottom: 15px;
+}
+
+.backgrid > thead th{
+    background-color: $color-primary;
+}
+
+.backgrid > thead > th, .backgrid > tbody > td {
+  line-height: 18px;
+}
+
+.backgrid > thead > th {
+    letter-spacing:0.5px
+}
+
+.backgrid > tbody > td {
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+
+.backgrid > thead th a {
+    color: $color-fg-inverse;
+    font-size: 12px;
+}
+
+.backgrid > th.object {
+    width: 30px;
+}
+
+.backgrid.presentation {
+    background-color: $color-gray-lighter;
+}
+
+.backgrid.presentation td.renderable {
+    padding: 6px 3px 3px 3px;
+    font-size: 12px;
+}
+
+.backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
+    background-color: $color-gray-lighter;
+}
+
+.backgrid tr.header td.renderable:not(.editable):not(.delete-cell) {
+    background-color: $color-gray-light;
+}
+
+.sql-editor-grid-container .backgrid > thead > th.renderable,
+.sql-editor-grid-container .backgrid > tbody > td.renderable {
+    white-space: pre-wrap;
+}
+
+table.backgrid tr.new {
+  background-color: rgba($color-primary, 0.1) !important;
+  box-sizing: border-box;
+  outline: 1px solid rgba($color-primary, 0.8);
+  outline-offset: -1px;
+}
+
+.pg-panel-depends-container >table.backgrid.table-bordered {
+  border: 0px;
+}
+
+.alertify_tools_dialog_backgrid_properties {
+  top: 43px !important;
+}
+
+.pg-panel-statistics-container >table.backgrid.table-bordered {
+  border: 0px;
+}
+
+table.backgrid {
+  overflow: auto;
+}
+
+.backgrid td.editor input[type=password] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  padding: 0 5px;
+  margin: 0;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  -webkit-box-shadow: none;
+     -moz-box-shadow: none;
+          box-shadow: none;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
+
+.backgrid td.editor input[type=password]::-ms-clear {
+  display: none;
+}
+
+.enable-selection, .form-control, .backgrid td, .ajs-content {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+
+.backgrid tr th button {
+  background: none;
+  border: none;
+  color: $color-fg-inverse;
+  padding: 0;
+}
+
+/* Latest backgrid adds column name like `label` to td element, override color*/
+.backgrid td.label {
+  color:  $color-gray-dark;
+  font-size: 14px;
+  font-weight: normal;
+}
+
+span.form-control:disabled {
+  @extend .form-control:disabled
+}
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 35f9260b..078053bc 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -1,1452 +1,252 @@
-/* Overrides/fixes for pgAdmin specific styling */
+.dropdown-menu > .dropdown-item > span {
+	padding-left: 3px;
+}
+.dropdown-menu > .dropdown-item > .has-icon {
+	padding-left: 0px;
+}
 
 /* Ensure simple forms don't hit the top of the screen */
 body {
-    font-family: $font-family-primary;
-    padding-top: 50px;
-    padding-bottom: 20px;
-}
-
-@media (min-width: 768px) {
-  .pg-navbar {
-    height: 40px;
-  }
-
-  .pg-navbar .navbar-brand {
-    padding: 10px 15px;
-    height: 40px;
-  }
-
-  .pg-navbar .navbar-nav > li > a {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  .pg-docker {
-    top: 40px !important;
-  }
+	font-family: $font-family-primary;
+	padding-bottom: 20px;
+	padding-top: 50px;
 }
 
-.pg-navbar {
-  z-index: 10;
+.app-icon {
+	font-size: 25px;
+	vertical-align: middle;
 }
 
-.pg-docker {
-  position:absolute;
-  left:0px;
-  right:0px;
-  top:50px;
-  bottom:0px;
-}
 
-.app-icon {
-    vertical-align: middle;
-    font-size: 25px;
-}
 
 /* Use the full width of the screen */
 .container {
-    width: 100% !important;
+	width: 100% !important;
 }
 
-.pg-panel-content {
-  position:absolute;
-  top:0px;
-  left:0px;
-  right:0px;
-  bottom:0px;
-  height: 100%!important;
-}
 
 /* iFrames should have no border */
 iframe {
-    border-width: 0;
+	border-width: 0;
 }
 
+
+
 /* Padding for the treeview */
 .browser-browser-pane {
-    padding-left: 0;
+	padding-left: 0;
 }
 
+
+
 /* Disabled menu items */
 .mnu-disabled {
-    color:  $color-gray !important;
+	color: $color-gray !important;
 }
 
+
+.dropdown-divider {
+  margin: 0px;
+}
 /*
  * Bootstrap 3 remove submenus as they don't work overly well on Mobile. The
  * following CSS adds them back in - for our purposes they actually work fine
  * on Mobile and are perfectly responsive
  */
 .dropdown-submenu {
-    position:relative;
+	position: relative;
 }
-
 .dropdown-submenu>.dropdown-menu {
-    top: 0;
-    left: 100%;
-    margin-top: -6px;
-    margin-left: -1px;
-    -webkit-border-radius: 0 6px 6px 6px;
-    -moz-border-radius: 0 6px 6px 6px;
-    border-radius: 0 6px 6px 6px;
+	-moz-border-radius: 0 6px 6px 6px;
+	-webkit-border-radius: 0 6px 6px 6px;
+	border-radius: 0 6px 6px 6px;
+	left: 100%;
+	margin-left: -1px;
+	top: 2px;
 }
-
 .dropdown-submenu:hover>.dropdown-menu {
-    display: block;
+	display: block;
 }
-
 .dropdown-submenu>a:after {
-    display: block;
-    content:" ";
-    float: right;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 5px 0 5px 5px;
-    border-left-color: $color-gray-light;
-    margin-top: 5px;
-    margin-right: -10px;
+	border-color: transparent;
+	border-left-color: $color-gray-light;
+	border-style: solid;
+	border-width: 5px 0 5px 5px;
+	content: " ";
+	display: block;
+	float: right;
+	height: 0;
+	margin-right: -10px;
+	margin-top: 5px;
+	width: 0;
 }
-
 .dropdown-submenu:hover>a:after {
-    border-left-color: $color-bg;
+	border-left-color: $color-bg;
 }
-
 .dropdown-submenu.pull-left {
-    float: none;
+	float: none;
 }
-
 .dropdown-submenu.pull-left>.dropdown-menu {
-    left: -100%;
-    margin-left: 10px;
-    -webkit-border-radius: 6px 0 6px 6px;
-    -moz-border-radius: 6px 0 6px 6px;
-    border-radius: 6px 0 6px 6px;
-}
-
-.navbar-inverse > li > a,
-.navbar-inverse .navbar-nav > li > a {
-    color: $color-fg-inverse;
-}
-
-.navbar-inverse .navbar-brand {
-    color: $color-brand;
-}
-
-.navbar-inverse .navbar-brand:hover {
-    color: $color-brand;
-}
-
-.navbar-inverse .navbar-brand:focus {
-    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:  $color-gray-dark none;
-}
-
-.dropdown-menu > hr {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.dropdown-menu > li > a > i {
-    margin-left: -17px;
-    width: 13px;
-}
-
-.dropdown-menu > li > a > span {
-    padding-left: 3px;
-    cursor:pointer;
-}
-
-.dropdown-menu > li > a > .has-icon {
-    padding-left: 0px;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-    color: $color-fg-inverse;
-    background:  $color-gray-dark none;
+	-moz-border-radius: 6px 0 6px 6px;
+	-webkit-border-radius: 6px 0 6px 6px;
+	border-radius: 6px 0 6px 6px;
+	left: -100%;
+	margin-left: 10px;
 }
 
 .form-group fieldset {
-    background-color: $color-gray-lighter;
-    padding: 0px 0px 0px 5px;
-    border-width: 1px;
-    margin-left: 2px;
-    margin-right: 2px;
-    margin-bottom: 2px;
-    border-color: $color-gray-lighter;
+	background-color: $color-gray-lighter;
+	border-color: $color-gray-lighter;
+	border-width: 1px;
+	margin-bottom: 2px;
+	margin-left: 2px;
+	margin-right: 2px;
+	padding: 0px 0px 0px 5px;
 }
-
 .form-group legend {
-    padding: 0.1em 0.5em;
-    margin-bottom: 0px;
-    margin-left: 0;
-    text-align: left;
-    width: 95%;
-    font-size: 105%;
+	font-size: 105%;
+	margin-bottom: 0px;
+	margin-left: 0;
+	padding: 0.1em 0.5em;
+	text-align: left;
+	width: 95%;
 }
-
 .form-group .fieldset-content {
-    width: 100%;
-}
-
-.obj_properties .backform-tab {
-    position: absolute;
-    margin: 0px 0px 75px;
-    padding: 0px;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-}
-
-.obj_properties .backform-tab > .tab-content {
-    padding: 0px;
-    overflow-y: auto;
-    max-height: 100%;
-}
-
-.backform-tab .tab-pane {
-    padding: 7px;
+	width: 100%;
 }
-
 .form-group fieldset .caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: 2px;
-    margin-top: -2px;
-    vertical-align: middle;
-    border-top: 5px solid;
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid;
+	display: inline-block;
+	height: 0;
+	margin-left: 2px;
+	margin-top: -2px;
+	vertical-align: middle;
+	width: 0;
 }
-
 .form-group fieldset .collapsed .caret {
-    border-bottom: 5px solid transparent;
-    border-top: 5px solid transparent;
-    border-left: 5px solid;
-}
-
-.pgadmin-control {
-    padding: 0px 15px 5px 15px;
-    margin-bottom: 0px;
-    display: inline-block;
-    height: 30px;
+	border-bottom: 5px solid transparent;
+	border-left: 5px solid;
+	border-top: 5px solid transparent;
 }
-
-.obj_properties {
-    padding: 0px;
-}
-
-.obj_properties .pgadmin-control .uneditable-input {
-    border: 0px !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-    -webkit-transition: none !important;
-    -o-transition: none !important;
-    transition: none !important;
-    background-color: transparent !important;
-    height: 20px;
-    padding: 0px;
-    margin-top: 2px;
-    vertical-align: middle;
-}
-
-.obj_properties .set-group {
-    margin-bottom: 10px;
-}
-
-.pgadmin-control-group {
-    margin: 0px;
-    padding: 2px 0px;
-}
-
 .control-label {
-    margin: 0px;
-    padding: 5px 25px 5px 5px;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.pgadmin-controls {
-    padding-right: 3px;
-    padding-left: 3px;
-}
-.pgadmin-controls.SQL {
-  padding-right: 3px;
-  padding-left: 1px;
-  height: 100%;
-}
-.pgadmin-controls > textarea.form-control,
-.pgadmin-controls > textarea.form-control[disabled] {
-   min-width: 100%;
-   max-width: 100%;
-}
-.pgadmin-controls > div.checkbox, .pgadmin-controls > div.checkbox[disabled] {
-    height: 28px;
-}
-
-.pgadmin-controls > .uneditable-input, .pgadmin-controls > .pgadmin-node-select,
-.pgadmin-controls > input.form-control, .pgadmin-controls > select.form-control,
-.pgadmin-controls > .uneditable-input[disabled],
-.pgadmin-controls > .pgadmin-node-select[disabled],
-.pgadmin-controls > input.form-control[disabled],
-.pgadmin-controls > select.form-control[disabled] {
-    min-height: 28px;
-    padding: 3px 6px !important;
+	display: inline-block;
+	margin: 0px;
+	padding: 5px 25px 5px 5px;
+	vertical-align: middle;
 }
-
-.pgadmin-controls > span.select2 {
-    width: 100%;
-}
-
-.obj_properties fieldset > div > .pgadmin-control-group > label {
-    min-height: 28px;
-}
-
-.obj_properties fieldset > .fieldset-content {
-  border-radius:5px;
-  padding: 5px 10px;
-  border-color: $color-primary-lighter;
-  border-width: 2px;
-  border-style: ridge;
-}
-
-.obj_properties .badge {
-  display: block;
-  text-align: left;
-  cursor: pointer;
-  margin-bottom: 1px;
-  background-color: $color-primary;
-  border-radius:5px;
-  padding: 5px 7px;
-}
-
-.obj_properties .badge .caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    margin-left: 2px;
-    vertical-align: middle;
-    border-top: 5px solid;
-    border-right: 5px solid transparent;
-    border-left: 5px solid transparent;
-    margin-top: -2px;
-    margin-right: 4px;
-}
-
-.obj_properties .collapsed .caret {
-    border-bottom: 5px solid transparent;
-    border-top: 5px solid transparent;
-    border-left: 5px solid;
-    vertical-align: middle;
-    margin-top: -2.5px;
-    padding-right: 0px;
-}
-
-.obj_properties table {
-  display: table !important;
-}
-
-.obj_properties table tr {
-    border: 0px $color-bg solid;
-    margin: 1em;
-}
-
-.obj_properties .pgadmin-properties {
-    border: 1px  $color-gray-dark solid;
-    border-radius: 6px;
-    padding: 5px;
-    margin: 0.2px 2px 2px 2px;
-}
-
-.obj_properties table .spacer {
-    height: 2em;
-}
-
-.obj_properties table td {
-    vertical-align: middle;
-}
-
-.pg-prop-btn-group {
-  left: 0px;
-  right: 0px;
-  padding: 2px;
-}
-
-.pg-prop-btn-group button {
-  padding: 5px;
-}
-
-.pg-prop-btn-group-below {
-    text-align: right;
-    border-color: $color-gray-light;
-    border-width: 2px 1px 0px;
-    border-style: inset;
-    border-left-style: solid
-}
-
-.pg-prop-btn-group > button {
-  margin: 2px 3px 2px 0px;
-}
-
-.pg-prop-btn-group > button:first-child {
-    margin-left: 3px;
-}
-
-.pg-prop-btn-group > button:last-child {
-    margin-right: 3px;
-}
-.btn-group-sm>.btn, .btn-sm{
-  font-size: 11px;
-  padding: 3px 3px;
-}
-
-.pg-prop-btn-group > .btn {
-  min-width: 40px;
-}
-
-.pg-prop-btn-group > .btn-group > .btn {
-  min-width: 40px;
-}
-
-.pg-prop-btn-group > .btn-group > .btn + .dropdown-toggle {
-  min-width: 20px;
-}
-
-.pg-prop-btn-group button.dropdown-toggle {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-}
-
-.pg-prop-btn-group .dropdown-menu {
-  min-width: initial;
-}
-
-.pg-prop-btn-group .backgrid-filter.form-search {
-  position: relative;
-  width: 248px;
-  height: 30px;
-  float: right;
-  margin-top: 2px;
-  margin-right: 10px;
-}
-
-.pg-prop-content {
-    position: absolute;
-    overflow: auto;
-    padding-bottom: 7px;
-    padding-top: 0;
-    padding-right: 0;
-    padding-left: 0;
-    height: 100%;
-}
-
-/* A generic class to make the overflow hidden of a DOM element */
-.pg-no-overflow {
-    overflow: hidden;
-}
-
-
-.pg-prop-has-btn-group-below {
-    margin-bottom: 33px;
-}
-
-.has-pg-prop-btn-group {
-    top: 39px;
-    padding-top: 8px;
-    height: calc(100% - 39px);
-}
-
-.pg-prop-content > div {
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
-
-.pg-prop-content .uneditable-input {
-    white-space: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -o-text-overow: ellipsis;
-    height: auto !important;
-}
-
 .form-control {
-    color:  $color-gray-dark;
-    padding: 3px 6px;
-}
-
-.form-control[disabled],
-.form-control[readonly],
-fieldset[disabled] .form-control {
-    color:  $color-gray-dark;
-}
-
-.highlight {
-    padding: 5px;
-    margin-bottom: 5px;
-    background-color: $color-gray-lighter;
-    border: 1px solid $color-gray-lighter;
-    border-radius: 3px;
-}
-
-.icon-fa::before {
-    font: normal normal normal 14px/1 FontAwesome;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    transform: translate(0, 0);
-    display: inline-block;
-    margin-left: -18px;
-    margin-right: 9px;
-}
-
-
-/* Sub-Node */
-
-.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
-    border-bottom-width: 1px;
-    padding: 3px;
-}
-
-.subnode > table.backgrid{
-    width: 100%;
-    margin: 0px;
-    padding: 0;
-    margin-bottom: 15px;
-}
-
-.backgrid > thead th{
-    background-color: $color-primary;
-}
-
-.backgrid > thead > th, .backgrid > tbody > td {
-  line-height: 18px;
-}
-
-.backgrid > thead > th {
-    letter-spacing:0.5px
-}
-
-.backgrid > tbody > td {
-    padding-top: 0px;
-    padding-bottom: 0px;
-    padding-left: 2px;
-    padding-right: 2px;
+	color: $color-gray-dark;
+	padding: 3px 6px;
 }
-
-.backgrid > thead th a {
-    color: $color-fg-inverse;
-    font-size: 12px;
-}
-
-.backgrid > th.object {
-    width: 30px;
-}
-
-.edit-cell, .delete-cell {
-    text-align:center !important;
-    width:25px;
-    height:29px !important;
-}
-
-.backgrid.presentation {
-    background-color: $color-gray-lighter;
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+	color: $color-gray-dark;
 }
 
-.backgrid.presentation td.renderable {
-    padding: 6px 3px 3px 3px;
-    font-size: 12px;
-}
-
-.backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
-    background-color: $color-gray-lighter;
-}
 
-.backgrid tr.header td.renderable:not(.editable):not(.delete-cell) {
-    background-color: $color-gray-light;
-}
 
-.sql-editor-grid-container .backgrid > thead > th.renderable,
-.sql-editor-grid-container .backgrid > tbody > td.renderable {
-    white-space: pre-wrap;
-}
-
-.subnode-header {
-    background-color: $color-primary;
-    height: 35px;
-    color: $color-fg-inverse;
-    border-radius: 3px 3px 0px 0px;
-    padding-top: 3px;
-}
 
-.subnode-header .control-label {
-    font-size: 13px;
-    font-weight: normal !important;
-}
-
-.subnode-header > button.add {
-    float: right;
-    margin-right: 3px;
-    margin-bottom: 3px;
-    margin-top: 5px;
-}
-
-.subnode {
-    padding-top: 0px;
-}
-
-.subnode-dialog {
-    bottom: 0;
-    left: 0;
-    overflow-x: auto;
-    overflow-y: auto;
-    right: 0;
-    height: auto;
-    margin-left: 23px;
-    background-color: $color-gray-lighter;
-    margin-top: 0px;
-    border: 1px solid $color-gray-light;
-}
-.subnode-body {
-    height: auto;
-    overflow: inherit;
-
-}
-.subnode-footer {
-    height: 38px;
-    margin: 0px, 15px;
-    min-height: 40px;
-    vertical-align: bottom;
-}
-
-.sub-node-form {
-    height: auto;
-    padding: 1px;
+/* Override default bootstrap popover fonts & size */
+.popover-content {
+	font-family: $font-family-primary;
+	font-size: 13px;
 }
 
-.sub-node-form > .nav-tabs {
-    background-color: $color-gray-lighter;
+.navbar .dropdown-menu {
+	padding-top: 0;
 }
 
-.sub-node-form > ul.tab-content{
-    background-color: $color-bg;
-    padding-left: 15px;
-    left: 1px;
-}
 
-table.backgrid tr.new {
-    background-color: rgba($color-primary, 0.1) !important;
-    box-sizing: border-box;
-    outline: 1px solid rgba($color-primary, 0.8);
-    outline-offset: -1px;
-  }
 
 /* Remove default left padding from checkbox for bootstrap-switch */
 .checkbox {
-    margin-top: 0px !important;
-    margin-bottom: 0px !important;
+	margin-bottom: 0px !important;
+	margin-top: 0px !important;
 }
-
 .checkbox label {
-    padding-left: 0px !important;
+	padding-left: 0px !important;
 }
-
 .bootstrap-switch > .bootstrap-switch-container > input {
-    height: 0px;
-    width: 0px;
-    margin: 0px;
-    padding: 0px;
-    border: 0px solid $color-fg;
+	border: 0px solid $color-fg;
+	height: 0px;
+	margin: 0px;
+	padding: 0px;
+	width: 0px;
 }
-
 .switch-cell {
-    height: 0px; width: 0px;
-}
-
-/* Center align the switch in backgrid */
-td.switch-cell > div.bootstrap-switch {
-  display: block;
-  margin: auto;
+	height: 0px;
+	width: 0px;
 }
 
-.width_percent_5 { width: 5%; }
-.width_percent_10 { width: 10%; }
-.width_percent_15 { width: 15%; }
-.width_percent_20 { width: 20%; }
-.width_percent_25 { width: 25%; }
-.width_percent_30 { width: 30%; }
-.width_percent_35 { width: 35%; }
-.width_percent_40 { width: 40%; }
-.width_percent_45 { width: 45%; }
-.width_percent_50 { width: 50%; }
-.width_percent_55 { width: 55%; }
-.width_percent_60 { width: 60%; }
-.width_percent_65 { width: 65%; }
-.width_percent_70 { width: 70%; }
-.width_percent_75 { width: 75%; }
-.width_percent_80 { width: 80%; }
-.width_percent_85 { width: 85%; }
-.width_percent_90 { width: 90%; }
-.width_percent_95 { width: 95%; }
-.width_percent_99 { width: 99%; }
-.width_percent_100 { width: 100%; }
-
-.pg-prop-header {
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top : 0;
-}
-
-.pg-prop-footer{
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    bottom : 0;
-    z-index: 4;
-}
-.subnode-header-form {
-    background-color: $color-gray-lighter;
-    color: black;
-    padding: 3px 0 10px 0;
-    border-top: solid 1.5px $color-bg;
-    font-size: 12px;
-}
 
-.subnode-header-form button.add {
-    float: right;
-    margin-right: 0px;
-}
-
-.subnode-error .help-block {
-    color: $color-danger;
-}
-
-.select2-container--default .select2-search--inline .select2-search__field {
-    background: transparent none repeat scroll 0% 0%;
-    border: medium none;
-    outline: 0px none;
-    box-shadow: none;
-    width: 100% !important;
-}
-
-.renderable > .select2-container {
-    width: 100% !important;
-}
-
-div.rolmembership {
-    margin-top: 15px;
-}
-
-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: $color-gray-lighter; box-shadow: 0.1px 0.1px 0.1px $color-gray-lighter;
-}
-
-fieldset.inline-fieldset-without-border {
-    margin: 0px; margin-left: 0px; margin-right: 0px;
-    padding-right: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;
-    border: 0px solid; border-radius: 0px; display: inline-block;
-}
 
-fieldset.inline-fieldset > legend {
-    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;
-    padding-left: 5px; padding-right: 5px; padding-top: 0px;
-    vertical-align: middle; width: auto;
-}
-
-fieldset.inline-fieldset-without-border legend {
-    border: none; margin-bottom: 0px !important;
- }
-
-fieldset.inline-fieldset > div {
-    padding: 0px; margin: 0px; border: 0px;
-}
-
-div.inline-tab-panel {
-    float: left; width: 100%;
-}
-
-div.inline-tab-panel > ul.nav-tabs > li {
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-}
-
-div.inline-tab-panel > ul.nav-tabs > li:first-child {
-    border-top-left-radius: 3px; border-top-right-radius: 10px;
-}
-
-div.inline-tab-panel > ul.nav-tabs > li > a,
-div.inline-tab-panel > ul.nav-tabs > li > a:active,
-div.inline-tab-panel > ul.nav-tabs > li > a:hover,
-div.inline-tab-panel > ul.nav-tabs > li > a:focus {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-div.inline-tab-panel > ul.nav-tabs > li:first-child > a,
-div.inline-tab-panel > ul.nav-tabs > li:first-child > a:active,
-div.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover,
-div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  margin-left: 1px;
-}
-
-div.inline-tab-panel > ul.tab-content {
-  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;
-}
-
-div.inline-tab-panel > ul.tab-content > div.tab-pane {
-  min-height: 150px; padding: 0px !important;
-}
-
-div.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child {
-  margin-top: 5px;
-}
-
-div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
-  margin-bottom: 5px;
-}
-
-.pgadmin-control-error-message{
-  padding-left: 4px;
-}
-
-td.edit-cell.editable.sortable.renderable.editor {
-  outline: 0px;
-}
-
-.privilege_label{
-  font-size: 10px!important;
-}
-
-.backgrid > th, .backgrid > td {
-  padding: 2px;
-  font-weight: normal!important;
-}
-
-.subnode > table.backgrid > thead > tr > th:first-child{
-  border-left-color: $color-primary;
-}
-
-.subnode > table.backgrid > thead > tr > th:last-child{
-  border-right-color: $color-primary;
-}
-
-.select2-container .select2-selection--single .select2-selection__rendered{
-  padding-left: 5px;
-}
-
-/* Message panel shown on browser tabs */
-.pg-panel-message {
-    margin-top: 25px !important;
-    width: 80%;
-    margin: 0 auto;
-    position: relative;
-    text-align: center;
-}
-
-.backgrid .textarea-cell {
-    text-align: left;
-}
-
-.backgrid .textarea-cell.editor textarea {
-    width: 100%;
-    height: auto;
-}
-
-.select2-container--default.select2-container--focus
-.select2-selection--multiple {
-  border: 1px solid $color-gray-light !important;
-  outline: 0 none;
-}
-
-.select2-container--default.select2-container--focus {
-  border-color: $color-primary-light;
-  outline: 0;
-  -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($color-gray-light, 1) !important;
-    border-radius: 4px;
-    padding: 0px;
-}
-
-.tab-pane.SQL {
-  padding: 0px 7px 0px 0px;
-  height: 100%;
-}
-
-.pgadmin-control-group.sql {
-  margin: 0px;
-  padding: 0px;
-  height: 100%;
-}
-
-.nav-tabs{
-	border-bottom:0px;
-}
-
-.nav-tabs>li {
-	margin-bottom:0px;
-}
-
-.nav-tabs>li>a{
-  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:$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:$color-fg;
-	margin-top: 0px;
-	padding-top: 7px!important;
-	padding-bottom: 4px!important;
-	margin-top:0px!important;
-}
-
-.obj_properties .nav>li>a {
-    font-size: 13px;
-    padding-left: 8px;
-    padding-right: 8px;
-    padding-top: 4px;
-    padding-bottom:0px;
-    margin-top:3px;
-}
-
-.obj_properties .backform-tab > .nav-tabs {
-	background-color: $color-gray-lighter;
-}
-
-ul.nav.nav-tabs {
-  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 $color-gray-lighter solid;
-}
-
-.pg-panel-depends-container > table > thead > tr > th:first-child {
-  border-left: 0px;
-}
-
-.pg-panel-depends-container > table > thead > tr > th:last-child {
-  border-right: 0px;
-}
-
-.pgadmin-control-group span.wcTabIcon {
-  padding-left: 20px;
-}
-
-.select2-results span.wcTabIcon {
-  padding-left: 20px;
-  background-position: 0px 2px;
-}
-
-/* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */
-*:focus {
-  outline: none;
-}
-
-/* Alert info panel */
-.alert-info-panel {
-  border: 2px solid $color-gray-light;
-  margin-top: 2em;
-  padding: 5px 5px;
-  background: $color-gray-lighter;
-  border-radius: 5px;
-  height: 8em;
-  overflow: scroll;
-}
-
-span.button-label {
-  font-family: $font-family-primary;
-  font-size: initial;
-}
-
-.backform_control_notes {
-  background-color: $color-gray-lighter;
-  border: 1px solid $color-gray-light;
-  border-radius: 3px;
-  color:  $color-gray-dark;
-  display: block;
-  font-family: $font-family-editor;
-  font-size: 12px;
-  line-height: 1.42857;
-  margin: 0 0 10px;
-  overflow: auto;
-  padding: 5px 10px;
-  word-wrap: break-word;
-}
-
-div.backform_control_notes label.control-label {
-  min-width: 0px;
-}
-
-form[name="change_password_form"] .help-block {
-    color: $color-danger !important;
-}
-
-.file_selection_ctrl .create_input span {
-  padding-right: 10px;
-  font-weight: bold;
-}
-
-.file_selection_ctrl .create_input input[type="text"] {
-  height: 23px;
-  padding: 2px;
-  width: 194px;
-  border-radius: 2px;
-}
-
-.file_selection_ctrl .browse_file_input {
-  display: inline-block;
-  width: 220px;
-  margin-right: 0;
-}
-
-.file_selection_ctrl button.select_item {
-  display: inline;
-  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;
-  margin-top: -4px;
-  min-width: 30px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.file_selection_ctrl button.select_item:focus,
-.file_selection_ctrl button.select_item:active {
-  outline: none;
-  box-shadow: none;
-}
-
-.file_selection_ctrl input[type="text"] {
-  width: calc(100% - 17px);
-  border: none;
-  margin-left: -6px;
-  margin-top: -3px;
-  height: 32px;
-  padding-left: 5px;
+/* Center align the switch in backgrid */
+td.switch-cell > div.bootstrap-switch {
+	display: block;
+	margin: auto;
 }
 
-/* Overriding the css for the dropzone */
-.dropzone .dz-preview .dz-progress {
-  height: initial;
+.dropdown-menu > hr {
+	margin-bottom: 0;
+	margin-top: 0;
 }
-
-.dropzone .dz-preview .dz-progress .dz-upload {
-  bottom: initial;
+.dropdown-menu > li > a > i {
+	margin-left: -17px;
+	width: 13px;
 }
-
-/* Fix Alertify dialog alignment for Backform controls */
-.alertify_tools_dialog_properties {
-  bottom: 0 !important;
-  left: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 35px !important;
+.dropdown-menu > li > a > span {
+	cursor: pointer;
+	padding-left: 3px;
 }
-
-/* For Backup & Restore Dialog */
-.custom_switch_label_class {
-  min-width: 0px !important;
-  padding-bottom: 10px !important;
-  font-size: 13px !important;
-  font-weight: normal !important;
+.dropdown-menu > li > a > .has-icon {
+	padding-left: 0px;
 }
-
-.custom_switch_control_class {
-  min-width: 0px !important;
-  padding-bottom: 10px !important;
+.dropdown-menu > li > a:not(.disabled):hover, .dropdown-menu > li > a:not(.disabled):focus {
+	background: $color-gray-dark none;
+	color: $color-fg-inverse;
 }
 
-/* animate blink */
-.blink {
-  animation: blink-animation 1s steps(5, start) infinite;
-  -webkit-animation: blink-animation 1s steps(5, start) infinite;
+.navbar-nav .nav-item .dropdown-menu {
+  @extend .bg-dark;
+  margin-top: -0.2rem;
 
-}
-
-@keyframes blink-animation {
-  to {
-    visibility: hidden;
-  }
-}
+  & .dropdown-item {
+    @extend .text-white;
 
-@-webkit-keyframes blink-animation {
-  to {
-    visibility: hidden;
+    &.disabled {
+      @extend .text-muted;
+    }
   }
 }
 
-
-/* Override Backgrid's default z-index */
-.dashboard-tab-container .backgrid-filter .search {
-  z-index: 10 !important;
-}
-
-.dashboard-tab-container .backgrid-filter .clear {
-  z-index: 10 !important;
-}
-
-.backgrid .string-cell.editor input[type=password] {
-  text-align: left;
-}
-
-.backgrid > tbody > td.editor input[type=password] {
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0 5px;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-  outline: 0;
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-}
-
-.subnode-footer {
-  text-align: right;
-  border-color: $color-gray-light;
-  border-style: inset inset inset solid;
-  border-width: 2px 1px 0;
-  margin-top: -10px;
-}
-
-.subnode-footer .ajs-button {
-  margin: 2px 2px 0;
-}
-
-.user_management {
-  margin: 0 10px !important;
-  width: calc(100% - 20px);
-  height: 100%;
-  overflow: hidden;
-}
-
-.close-error-bar {
-  background: $color-danger;
-  padding: 5px;
-}
-
-.close-error-bar a {
-  color: $color-fg-inverse;
-  cursor: pointer;
-}
-
-.user_management .search_users form {
-  margin: 0;
-}
-
-.user_management table {
-  display: block;
-  height: 100%;
-  overflow: auto;
-  border: 0 none;
-}
-
-.user_management .backform-tab {
-  height: calc(100% - 75px);
-}
-
-.user_management .search_users {
-  float:right;
-  margin-right: 5px;
-  padding:0 !important;
-}
-
-.user_management .search_users input{
-  height:15px;
-  margin-top: 3px;
-}
-
-.user_management .user_container {
-height: calc(100% - 35px);
-}
-
-.user_management input[placeholder] {
-  font-size: 12px;
-}
-
-.alertify_tools_dialog_backgrid_properties {
-  top: 43px !important;
-}
-
-.user_management_pg-alertify-button {
-  line-height: 16px;
-}
-
-.pg-panel-statistics-container >table.backgrid.table-bordered {
-  border: 0px;
-}
-
-.pg-panel-statistics-container > table > thead > tr > th {
-  padding: 2px;
-  border: 1px solid $color-gray-lighter;
-}
-
-.pg-panel-statistics-container > table > thead > tr > th:first-child {
-  border-left: 0px;
-}
-
-.pg-panel-statistics-container > table > thead > tr > th:last-child {
-  border-right: 0px;
+.nav-tabs>.nav-item>.nav-link.active {
+	color: $color-fg;
 }
 
-.pgadmin-controls input[type="checkbox"]{
-  margin-left: 0 !important;
-  margin-top: 10px !important;
+.bootstrap-datetimepicker-widget td, .bootstrap-datetimepicker-widget th {
+	display: table-cell;
+	white-space: normal;
 }
 
-/* Ensure query tool results can horizontal scroll */
-table.backgrid {
-  overflow: auto;
+.navbar-brand {
+	color: $color-brand !important;
 }
 
-.aciTree.aciTreeLoad {
-  background: none;
+.navbar-brand:hover {
+	color: $color-brand !important;
 }
-
-.pgadmin-controls.sql_field_layout {
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  z-index: 1;
-}
-
-.pgadmin-controls.focused {
-  border-color: $color-primary-light;
-  outline: 0;
-  -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,
-.bootstrap-datetimepicker-widget th {
-  display: table-cell;
-  white-space: normal;
-}
-
-.help-block {
-  white-space: normal;
-}
-
-.backgrid td.editor input[type=password] {
-  display: block;
-  width: 100%;
-  height: 100%;
-  padding: 0 5px;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-  outline: 0;
-  -webkit-box-shadow: none;
-     -moz-box-shadow: none;
-          box-shadow: none;
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-}
-
-.backgrid td.editor input[type=password]::-ms-clear {
-  display: none;
-}
-
-/* Disable text selection where not wanted */
-body {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.enable-selection, .form-control, .backgrid td, .ajs-content {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.dashboard-tab-container table,
-.pg-panel-statistics-container table,
-.pg-panel-depends-container table,
-.pg-panel-depends-container table {
-    font-size: 12px !important;
-}
-
-.backgrid tr th button {
-  background: none;
-  border: none;
-  color: $color-fg-inverse;
-  padding: 0;
-}
-
-/* Latest backgrid adds column name like `label` to td element, override color*/
-.backgrid td.label {
-  color:  $color-gray-dark;
-  font-size: 14px;
-  font-weight: normal;
-}
-
-/* Security label's label column font size */
-.override_label_class_font_size {
-  font-size: inherit !important;
-}
-
-/* To align 'X' in alert on login page */
-.alert-dismissable, .alert-dismissible {
-  padding-right: 35px !important;
-}
-
-/* Override CSS for Colour Picker to match it with pgAdmin4 style */
-.sp-replacer {
-  background: $color-bg;
-  border: solid 1px $color-gray-light;
-  border-radius: 3px;
-}
-
-.sp-replacer:hover {
-  border-color: $color-gray-light;
-}
-
-.sp-replacer.sp-active {
-  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);
-  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-
-.sp-replacer.sp-disabled {
-    background-color: $color-gray-lighter;
+.navbar-brand:focus {
+	color: $color-brand !important;
 }
 
-.sp-container {
-  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: $color-primary;
-  background-image: none;
-  font-family: $font-family-primary;
-  font-size: 12px;
-  color: $color-fg-inverse;
-  text-shadow: none;
-  -webkit-font-smoothing: auto;
-}
-
-.sp-container button:active {
-    border: 1px solid $color-primary;
-    border-bottom: none;
-    -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:  $color-gray;
-}
-
-/* CSS for custom checkbox editor in SlickGrid */
-.multi-checkbox .check {
-  display: inline-block;
-  vertical-align: top;
-  width: 16px;
-  height: 16px;
-  border: 1px solid  $color-gray-dark;
-  margin: 3px;
-  text-align: center;
-  line-height: 16px;
-}
-
-.multi-checkbox .check.checked,
-.multi-checkbox .check.unchecked {
-  background: $color-bg;
-}
-
-.multi-checkbox .check.partial {
-  background: $color-gray-lighter;
-}
-
-.multi-checkbox .check.checked:after {
-  content: "\2713";
-}
-
-.multi-checkbox .check.partial:after {
-  content: "\003F";
-}
-
-/* Override default bootstrap popover fonts & size */
-.popover-content {
-  font-family: $font-family-primary;
-  font-size: 13px;
+.btn-sm-sq {
+  @extend .btn-sm;
+  line-height: 0.7rem;
 }
 
 
-.btn.btn-default[disabled] {
-  color: $color-gray;
+.bootstrap-switch.bootstrap-switch-disabled, .bootstrap-switch.bootstrap-switch-readonly {
+  background-color: $input-disabled-bg !important;
+  opacity: 1;
 }
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 3468c3e2..c03d2ea9 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -26,12 +26,15 @@
 
 .sql_field_layout .CodeMirror-linenumber {
     border-right: 1px solid $color-gray-lighter;
-    background-color: $color-gray-lighter;
+}
+
+.CodeMirror-linenumber {
+    font-size: $font-size-base;
 }
 
 /* class to disable Codemirror editor */
 .cm_disabled {
-  background: $color-gray-lighter;
+  background: $input-disabled-bg;
 }
 
 /* make syntax-highlighting bold */
diff --git a/web/pgadmin/static/scss/resources/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
similarity index 69%
rename from web/pgadmin/static/scss/resources/_pgadmin.style.scss
rename to web/pgadmin/static/scss/_pgadmin.style.scss
index a44f69a1..92cdf46a 100644
--- a/web/pgadmin/static/scss/resources/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -737,6 +737,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
   vertical-align: middle;
   min-height: 28px;
 }
+/*
 .pgadmin-controls {
   padding-right: 3px;
   padding-left: 3px;
@@ -764,7 +765,7 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .pgadmin-controls > select.form-control,
 .pgadmin-controls > textarea.form-control {
   padding: 3px 6px;
-}
+}*/
 .pg-panel-properties-message {
   margin-top: 50px !important;
 }
@@ -818,20 +819,6 @@ lgg-el-container[el=md] .pg-el-lg-8,
   border-color: transparent;
 }
 
-@font-face {
-  font-family: $font-family-primary;
-  src: url($font-url-primary);
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: $font-family-editor;
-  src: url($font-url-editor);
-  font-weight: normal;
-  font-style: normal;
-}
-
 .pg-icon {
   display: inline-block;
   width: 25px;
@@ -909,3 +896,829 @@ lgg-el-container[el=md] .pg-el-lg-8,
 .alertify .ajs-header,
 .alertify .ajs-body {
   font-family: $font-family-primary; }
+
+
+@media (min-width: 768px) {
+  .pg-navbar {
+    height: 40px;
+  }
+
+  .pg-navbar .navbar-brand {
+    padding: 10px 15px;
+  }
+
+  .pg-navbar .navbar-nav > li > a {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .pg-docker {
+    top: 40px !important;
+  }
+}
+
+.pg-docker {
+  position:absolute;
+  left:0px;
+  right:0px;
+  top:50px;
+  bottom:0px;
+}
+
+.pg-panel-content {
+  position:absolute;
+  top:0px;
+  left:0px;
+  right:0px;
+  bottom:0px;
+  height: 100%!important;
+}
+
+.pg-prop-btn-group {
+  left: 0px;
+  right: 0px;
+  padding: 2px;
+}
+
+.pg-prop-btn-group button {
+  padding: 5px;
+}
+
+.pg-prop-btn-group-below {
+    text-align: right;
+    border-color: $color-gray-light;
+    border-width: 2px 1px 0px;
+    border-style: inset;
+    border-left-style: solid
+}
+
+.pg-prop-btn-group > button {
+  margin: 2px 3px 2px 0px;
+}
+
+.pg-prop-btn-group > button:first-child {
+    margin-left: 3px;
+}
+
+.pg-prop-btn-group > button:last-child {
+    margin-right: 3px;
+}
+.btn-group-sm>.btn, .btn-sm{
+  font-size: 11px;
+  padding: 3px 3px;
+}
+
+.pg-prop-btn-group > .btn {
+  min-width: 40px;
+}
+
+.pg-prop-btn-group > .btn-group > .btn {
+  min-width: 40px;
+}
+
+.pg-prop-btn-group > .btn-group > .btn + .dropdown-toggle {
+  min-width: 20px;
+}
+
+.pg-prop-btn-group button.dropdown-toggle {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+
+.pg-prop-btn-group .dropdown-menu {
+  min-width: initial;
+}
+
+.pg-prop-btn-group .backgrid-filter.form-search {
+  position: relative;
+  width: 248px;
+  height: 30px;
+  float: right;
+  margin-top: 2px;
+  margin-right: 10px;
+}
+
+.pg-prop-content {
+    position: absolute;
+    overflow: auto;
+    min-width: 100%;
+    padding-bottom: 7px;
+    padding-top: 0;
+    padding-right: 0;
+    padding-left: 0;
+    height: 100%;
+}
+
+/* A generic class to make the overflow hidden of a DOM element */
+.pg-no-overflow {
+    overflow: hidden;
+}
+
+
+.pg-prop-has-btn-group-below {
+    margin-bottom: 33px;
+}
+
+.has-pg-prop-btn-group {
+    top: 39px;
+    padding-top: 8px;
+    height: calc(100% - 39px);
+}
+
+.pg-prop-content > div {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.pg-prop-content .uneditable-input {
+    white-space: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -o-text-overow: ellipsis;
+    height: auto !important;
+}
+
+.obj_properties .backform-tab {
+    position: absolute;
+    margin: 0px 0px 75px;
+    padding: 0px;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+.obj_properties .backform-tab > .tab-content {
+    padding: 0px;
+    overflow-y: auto;
+    max-height: 100%;
+}
+
+.obj_properties {
+    padding: 0px;
+}
+
+.obj_properties .pgadmin-control .uneditable-input {
+    border: 0px !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    -webkit-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+    background-color: transparent !important;
+    height: 20px;
+    padding: 0px;
+    margin-top: 2px;
+    vertical-align: middle;
+}
+
+.obj_properties .set-group {
+    margin-bottom: 10px;
+}
+
+/* Message panel shown on browser tabs */
+.pg-panel-message {
+    margin-top: 25px !important;
+    width: 80%;
+    margin: 0 auto;
+    position: relative;
+    text-align: center;
+}
+
+.pgadmin-control {
+    padding: 0px 15px 5px 15px;
+    margin-bottom: 0px;
+    display: inline-block;
+    height: 30px;
+}
+
+
+.pgadmin-control-group {
+    margin: 0px;
+    padding: 2px 0px;
+}
+
+.pgadmin-controls {
+    padding-right: 3px;
+    padding-left: 3px;
+}
+.pgadmin-controls.SQL {
+  padding-right: 3px;
+  padding-left: 1px;
+  height: 100%;
+}
+.pgadmin-controls > textarea.form-control,
+.pgadmin-controls > textarea.form-control:disabled {
+   min-width: 100%;
+   max-width: 100%;
+}
+.pgadmin-controls > div.checkbox, .pgadmin-controls > div.checkbox[disabled] {
+    height: 28px;
+}
+
+.pgadmin-controls > .uneditable-input, .pgadmin-controls > .pgadmin-node-select,
+.pgadmin-controls > input.form-control, .pgadmin-controls > select.form-control,
+.pgadmin-controls > .uneditable-input:disabled,
+.pgadmin-controls > .pgadmin-node-select:disabled,
+.pgadmin-controls > input.form-control:disabled,
+.pgadmin-controls > select.form-control:disabled {
+    min-height: 28px;
+    padding: 3px 6px !important;
+}
+
+.pgadmin-controls > span.select2 {
+    width: 100%;
+}
+
+.obj_properties fieldset > div > .pgadmin-control-group > label {
+    min-height: 28px;
+}
+
+.obj_properties fieldset > .fieldset-content {
+  border-radius:5px;
+  padding: 5px 10px;
+  border-color: $color-primary-lighter;
+  border-width: 2px;
+  border-style: ridge;
+}
+
+.obj_properties .badge {
+  display: block;
+  text-align: left;
+  cursor: pointer;
+  margin-bottom: 1px;
+  background-color: $color-primary;
+  border-radius:5px;
+  padding: 5px 7px;
+  color: $color-primary-fg;
+  font-size: 0.9em;
+}
+
+.obj_properties .badge .caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    margin-top: -2px;
+    margin-right: 4px;
+    color: $color-primary-fg;
+}
+
+.obj_properties .collapsed .caret {
+    border-bottom: 5px solid transparent;
+    border-top: 5px solid transparent;
+    border-left: 5px solid;
+    vertical-align: middle;
+    margin-top: -2.5px;
+    padding-right: 0px;
+}
+
+.obj_properties table {
+  display: table !important;
+}
+
+.obj_properties table tr {
+    border: 0px $color-bg solid;
+    margin: 1em;
+}
+
+.obj_properties .pgadmin-properties {
+    border: 1px  $color-gray-dark solid;
+    border-radius: 6px;
+    padding: 5px;
+    margin: 0.2px 2px 2px 2px;
+}
+
+.obj_properties table .spacer {
+    height: 2em;
+}
+
+.obj_properties table td {
+    vertical-align: middle;
+}
+
+
+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: $color-gray-light; box-shadow: 0.1px 0.1px 0.1px $color-gray-lighter;
+}
+
+fieldset.inline-fieldset-without-border {
+    margin: 0px; margin-left: 0px; margin-right: 0px;
+    padding-right: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;
+    border: 0px solid; border-radius: 0px; display: inline-block;
+}
+
+fieldset.inline-fieldset > legend {
+    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;
+    padding-left: 5px; padding-right: 5px; padding-top: 0px;
+    vertical-align: middle; width: auto;
+}
+
+fieldset.inline-fieldset-without-border legend {
+    border: none; margin-bottom: 0px !important;
+ }
+
+fieldset.inline-fieldset > div {
+    padding: 0px; margin: 0px; border: 0px;
+}
+
+/* Override CSS for Colour Picker to match it with pgAdmin4 style */
+.sp-replacer {
+  background: $color-bg;
+  border: solid 1px $color-gray-light;
+  border-radius: 3px;
+}
+
+.sp-replacer:hover {
+  border-color: $color-gray-light;
+}
+
+.sp-replacer.sp-active {
+  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);
+  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.sp-replacer.sp-disabled {
+    background-color: $color-gray-lighter;
+}
+
+.sp-container {
+  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: $color-primary;
+  background-image: none;
+  font-family: $font-family-primary;
+  font-size: 12px;
+  color: $color-fg-inverse;
+  text-shadow: none;
+  -webkit-font-smoothing: auto;
+}
+
+.sp-container button:active {
+    border: 1px solid $color-primary;
+    border-bottom: none;
+    -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:  $color-gray;
+}
+
+.pgadmin-control-error-message{
+  padding-left: 4px;
+}
+
+.pgadmin-control-group.sql {
+  margin: 0px;
+  padding: 0px;
+  height: 100%;
+}
+
+.pgadmin-control-group span.wcTabIcon {
+  padding-left: 20px;
+}
+
+.pgadmin-controls input[type="checkbox"]{
+  margin-left: 0 !important;
+  margin-top: 10px !important;
+}
+
+.pgadmin-controls.sql_field_layout {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.pgadmin-controls.focused {
+  border-color: $color-primary-light;
+  outline: 0;
+  -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);
+}
+
+.dashboard-tab-container table,
+.pg-panel-statistics-container table,
+.pg-panel-depends-container table,
+.pg-panel-depends-container table {
+    font-size: 12px !important;
+}
+
+.pg-panel-statistics-container > table > thead > tr > th {
+  padding: 2px;
+  border: 1px solid $color-gray-lighter;
+}
+
+.pg-panel-statistics-container > table > thead > tr > th:first-child {
+  border-left: 0px;
+}
+
+.pg-panel-statistics-container > table > thead > tr > th:last-child {
+  border-right: 0px;
+}
+
+.pg-prop-header {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top : 0;
+}
+
+.pg-prop-footer{
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom : 0;
+    z-index: 4;
+}
+
+.pg-panel-depends-container > table > thead > tr > th {
+  padding: 2px;
+  border: 1px $color-gray-lighter solid;
+}
+
+.pg-panel-depends-container > table > thead > tr > th:first-child {
+  border-left: 0px;
+}
+
+.pg-panel-depends-container > table > thead > tr > th:last-child {
+  border-right: 0px;
+}
+
+/* Overrides/fixes for pgAdmin specific styling */
+
+.highlight {
+    padding: 5px;
+    margin-bottom: 5px;
+    background-color: $color-gray-lighter;
+    border: 1px solid $color-gray-lighter;
+    border-radius: 3px;
+}
+
+.icon-fa::before {
+    font: normal normal normal 14px/1 FontAwesome;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    transform: translate(0, 0);
+    display: inline-block;
+    margin-left: -18px;
+    margin-right: 9px;
+}
+
+
+/* Sub-Node */
+
+.table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
+    border-bottom-width: 1px;
+    padding: 3px;
+}
+
+.edit-cell, .delete-cell {
+    text-align:center !important;
+    width:25px;
+    height:29px !important;
+}
+
+.subnode-header {
+    background-color: $color-primary;
+    height: 35px;
+    color: $color-fg-inverse;
+    border-radius: 3px 3px 0px 0px;
+    padding-top: 3px;
+}
+
+.subnode-header .control-label {
+    font-size: 13px;
+    font-weight: normal !important;
+}
+
+.subnode-header > button.add {
+    float: right;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    margin-top: 5px;
+}
+
+.subnode {
+    padding-top: 0px;
+}
+
+.subnode-dialog {
+    bottom: 0;
+    left: 0;
+    overflow-x: auto;
+    overflow-y: auto;
+    right: 0;
+    height: auto;
+    margin-left: 23px;
+    background-color: $color-gray-lighter;
+    margin-top: 0px;
+    border: 1px solid $color-gray-lighter;
+}
+.subnode-body {
+    height: auto;
+    overflow: inherit;
+    background-color: $color-bg;
+}
+.subnode-footer {
+    height: 38px;
+    margin: 0px, 15px;
+    min-height: 40px;
+    vertical-align: bottom;
+}
+
+.sub-node-form {
+    height: auto;
+    padding: 0px;
+}
+
+.sub-node-form > .nav-tabs {
+    background-color: $color-gray-lighter;
+}
+
+.sub-node-form > ul.tab-content{
+    background-color: $color-bg;
+    padding-left: 15px;
+    left: 1px;
+}
+
+.width_percent_5 { width: 5%; }
+.width_percent_10 { width: 10%; }
+.width_percent_15 { width: 15%; }
+.width_percent_20 { width: 20%; }
+.width_percent_25 { width: 25%; }
+.width_percent_30 { width: 30%; }
+.width_percent_35 { width: 35%; }
+.width_percent_40 { width: 40%; }
+.width_percent_45 { width: 45%; }
+.width_percent_50 { width: 50%; }
+.width_percent_55 { width: 55%; }
+.width_percent_60 { width: 60%; }
+.width_percent_65 { width: 65%; }
+.width_percent_70 { width: 70%; }
+.width_percent_75 { width: 75%; }
+.width_percent_80 { width: 80%; }
+.width_percent_85 { width: 85%; }
+.width_percent_90 { width: 90%; }
+.width_percent_95 { width: 95%; }
+.width_percent_99 { width: 99%; }
+.width_percent_100 { width: 100%; }
+
+.subnode-header-form {
+    background-color: $color-gray-lighter;
+    color: black;
+    padding: 3px 0 10px 0;
+    border-top: solid 1.5px $color-bg;
+    font-size: 12px;
+}
+
+.subnode-header-form button.add {
+    float: right;
+    margin-right: 0px;
+}
+
+.subnode-error .help-block {
+    color: $color-danger;
+}
+
+.obj_properties .nav>li>a {
+    font-size: 13px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom:0px;
+    margin-top:3px;
+}
+
+.obj_properties .backform-tab > .nav-tabs {
+	background-color: $color-gray-lighter;
+}
+
+.sql_field_layout {
+    border: 1px solid rgba($color-gray-light, 1) !important;
+    border-radius: 4px;
+    padding: 0px;
+}
+
+/* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */
+*:focus {
+  outline: none;
+}
+
+div.rolmembership {
+    margin-top: 15px;
+}
+
+div.inline-tab-panel {
+    float: left; width: 100%;
+}
+
+div.inline-tab-panel > ul.nav-tabs > li {
+	border-top-left-radius: 10px;
+	border-top-right-radius: 10px;
+}
+
+div.inline-tab-panel > ul.nav-tabs > li:first-child {
+    border-top-left-radius: 3px; border-top-right-radius: 10px;
+}
+
+div.inline-tab-panel > ul.nav-tabs > li > a,
+div.inline-tab-panel > ul.nav-tabs > li > a:active,
+div.inline-tab-panel > ul.nav-tabs > li > a:hover,
+div.inline-tab-panel > ul.nav-tabs > li > a:focus {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+div.inline-tab-panel > ul.nav-tabs > li:first-child > a,
+div.inline-tab-panel > ul.nav-tabs > li:first-child > a:active,
+div.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover,
+div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  margin-left: 1px;
+}
+
+div.inline-tab-panel > ul.tab-content {
+  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;
+}
+
+div.inline-tab-panel > ul.tab-content > div.tab-pane {
+  min-height: 150px; padding: 0px !important;
+}
+
+div.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child {
+  margin-top: 5px;
+}
+
+div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
+  margin-bottom: 5px;
+}
+
+td.edit-cell.editable.sortable.renderable.editor {
+  outline: 0px;
+}
+
+.privilege_label{
+  font-size: 10px!important;
+}
+
+span.button-label {
+  font-family: $font-family-primary;
+  font-size: initial;
+}
+
+form[name="change_password_form"] .help-block {
+    color: $color-danger !important;
+}
+
+
+/* Fix Alertify dialog alignment for Backform controls */
+.alertify_tools_dialog_properties {
+  bottom: 0 !important;
+  left: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 35px !important;
+}
+
+/* For Backup & Restore Dialog */
+.custom_switch_label_class {
+  min-width: 0px !important;
+  padding-bottom: 10px !important;
+  font-size: 13px !important;
+  font-weight: normal !important;
+}
+
+.custom_switch_control_class {
+  min-width: 0px !important;
+  padding-bottom: 10px !important;
+}
+
+/* animate blink */
+.blink {
+  animation: blink-animation 1s steps(5, start) infinite;
+  -webkit-animation: blink-animation 1s steps(5, start) infinite;
+
+}
+
+@keyframes blink-animation {
+  to {
+    visibility: hidden;
+  }
+}
+
+@-webkit-keyframes blink-animation {
+  to {
+    visibility: hidden;
+  }
+}
+
+
+.subnode-footer {
+  text-align: right;
+  border-color: $color-gray-light;
+  border-style: inset inset inset solid;
+  border-width: 2px 1px 0;
+  margin-top: -10px;
+}
+
+.subnode-footer .ajs-button {
+  margin: 2px 2px 0;
+}
+
+.close-error-bar {
+  background: $color-danger;
+  padding: 5px;
+  border-radius: 0px 5px 5px 0px;
+}
+
+.close-error-bar a {
+  color: $color-danger-fg !important;
+  cursor: pointer;
+}
+
+.help-block {
+  white-space: normal;
+}
+
+/* Disable text selection where not wanted */
+body {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Security label's label column font size */
+.override_label_class_font_size {
+  font-size: inherit !important;
+}
+
+/* CSS for custom checkbox editor in SlickGrid */
+.multi-checkbox .check {
+  display: inline-block;
+  vertical-align: top;
+  width: 16px;
+  height: 16px;
+  border: 1px solid  $color-gray-dark;
+  margin: 3px;
+  text-align: center;
+  line-height: 16px;
+}
+
+.multi-checkbox .check.checked,
+.multi-checkbox .check.unchecked {
+  background: $color-bg;
+}
+
+.multi-checkbox .check.partial {
+  background: $color-gray-lighter;
+}
+
+.multi-checkbox .check.checked:after {
+  content: "\2713";
+}
+
+.multi-checkbox .check.partial:after {
+  content: "\003F";
+}
+
+/* This is to be changed */
+/*.navbar-nav > .nav-item > a, .navbar-inverse .navbar-nav > li > a {
+	color: $color-fg-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: $color-gray-dark none;
+}*/
diff --git a/web/pgadmin/static/scss/_select2.overrides.scss b/web/pgadmin/static/scss/_select2.overrides.scss
index 55f07fa2..2cdee1a8 100644
--- a/web/pgadmin/static/scss/_select2.overrides.scss
+++ b/web/pgadmin/static/scss/_select2.overrides.scss
@@ -3,8 +3,61 @@
   color:  $color-gray-dark;
 }
 
+.select2-container--default .select2-search--inline .select2-search__field {
+    background: transparent none repeat scroll 0% 0%;
+    border: medium none;
+    outline: 0px none;
+    box-shadow: none;
+    width: 100% !important;
+}
+
+.renderable > .select2-container {
+    width: 100% !important;
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered{
+  padding-left: 5px;
+}
+
+
+.select2-container--default.select2-container--focus
+.select2-selection--multiple {
+  border: 1px solid $color-gray-light !important;
+  outline: 0 none;
+}
+
+.select2-container--default.select2-container--focus {
+  border-color: $color-primary-light;
+  outline: 0;
+  -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);
+}
+
+
+.select2-results span.wcTabIcon {
+  padding-left: 20px;
+  background-position: 0px 2px;
+}
+
+.select2-selection {
+  color: $input-color;
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color !important;
+}
+
+.select2-container--default.select2-container--disabled .select2-selection--multiple {
+    background-color: $input-disabled-bg !important;
+    opacity: 1;
+}
+
+.select2-container--default.select2-container--disabled .select2-selection--single {
+    background-color: $input-disabled-bg !important;
+    opacity: 1;
+}
+
 .select2-select-all-adapter-container {
   padding: 3px 0px;
   background-color: $color-primary;
   margin-bottom: 3px;
-}
\ No newline at end of file
+}
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index 1cde7584..3f2b7260 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -1,9 +1,25 @@
+$font-size-base: 0.875rem;
+$navbar-padding-y: 0 rem;
+$form-group-margin-bottom:  0.5rem;
+$btn-active-box-shadow: none;
+
+$theme-colors: (
+  "primary": $color-primary,
+  "danger": $color-danger,
+  "success": $color-success,
+  "warning": $color-warning,
+  "dark": #000
+);
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
 @import 'webcabin.overrides';
 @import 'bootstrap.overrides';
+@import 'backgrid.overrides';
 @import 'aci_tree.overrides';
 @import 'select2.overrides';
 @import 'codemirror.overrides';
-
 @import 'alert';
 @import 'alertify.overrides';
 @import 'backform.overrides';
+@import 'pgadmin.style';
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index b7a3b30e..77b3d47e 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -7,10 +7,10 @@ $color-bg-inverse: $color-fg;
 $color-fg-inverse: $color-bg;
 
 $color-primary: #2c76b4 !default;
-$color-primary-fg: $color-fg !default;
+$color-primary-fg: #fff !default;
 
 $color-danger: #d63a35 !default;
-$color-danger-fg: $color-fg !default;
+$color-danger-fg: #fff !default;
 
 $color-success: #3a773a !default;
 $color-success-fg: $color-fg !default;
@@ -55,9 +55,5 @@ $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/scss/resources/pgadmin.resources.scss b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
index c0555ef9..4b6ba733 100644
--- a/web/pgadmin/static/scss/resources/pgadmin.resources.scss
+++ b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
@@ -2,5 +2,4 @@
 @import 'pgadmin.variables.scss';
 @import 'default.variables.scss';
 @import 'default.style.scss';
-@import 'pgadmin.style.scss';
 @import 'utils.scss';
diff --git a/web/pgadmin/templates/security/change_password.html b/web/pgadmin/templates/security/change_password.html
index e7b39450..a8052a70 100644
--- a/web/pgadmin/templates/security/change_password.html
+++ b/web/pgadmin/templates/security/change_password.html
@@ -8,7 +8,7 @@
         {{ render_field_with_errors(change_password_form.password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password, "password") }}
         {{ render_field_with_errors(change_password_form.new_password_confirm, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Change Password') }}"
+        <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Change Password') }}"
                title="{{ _('Change Password') }}">
     </fieldset>
 </form>
diff --git a/web/pgadmin/templates/security/fields.html b/web/pgadmin/templates/security/fields.html
index 14a39b9e..a07971aa 100644
--- a/web/pgadmin/templates/security/fields.html
+++ b/web/pgadmin/templates/security/fields.html
@@ -1,11 +1,11 @@
 {% macro render_field_with_errors(field, type) %}
-<div class="form-group{% if field.errors %} has-error{% endif %}">
+<div class="form-group mb-3 {% if field.errors %} has-error{% endif %}">
     <input class="form-control" placeholder="{{ field.label.text }}" name="{{ field.name }}"
            type="{% if type %}{{ type }}{% else %}{{ field.type }}{% endif %}" autofocus>
+    {% if field.errors %}
+    {% for error in field.errors %}
+    <span class="form-text text-danger">{{ error }}</span>
+    {% endfor %}
+    {% endif %}
 </div>
-{% if field.errors %}
-{% for error in field.errors %}
-<span class="help-block">{{ error }}</span>
-{% endfor %}
-{% endif %}
 {% endmacro %}
diff --git a/web/pgadmin/templates/security/forgot_password.html b/web/pgadmin/templates/security/forgot_password.html
index 3f0a0872..ae5ec293 100644
--- a/web/pgadmin/templates/security/forgot_password.html
+++ b/web/pgadmin/templates/security/forgot_password.html
@@ -7,7 +7,7 @@
     {{ forgot_password_form.hidden_tag() }}
     <fieldset>
         {{ render_field_with_errors(forgot_password_form.email, "text") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Recover Password') }}"
+        <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Recover Password') }}"
                title="{{ _('Recover Password') }}">
     </fieldset>
 </form>
diff --git a/web/pgadmin/templates/security/login_user.html b/web/pgadmin/templates/security/login_user.html
index 246fdf73..8a333588 100644
--- a/web/pgadmin/templates/security/login_user.html
+++ b/web/pgadmin/templates/security/login_user.html
@@ -5,23 +5,22 @@
 <form action="{{ url_for_security('login') }}" method="POST" name="login_user_form">
     {{ login_user_form.hidden_tag() }}
     {% set user_language = request.cookies.get('PGADMIN_LANGUAGE') or 'en' %}
-    <fieldset>
-        {{ render_field_with_errors(login_user_form.email, "text") }}
-        {{ render_field_with_errors(login_user_form.password, "password") }}
-        <input class="btn btn-lg btn-success btn-block" type="submit" value="{{ _('Login') }}"
-               title="{{ _('Login') }}">
-        <div class="pgadmin-control-group form-group pg-el-xs-12 user-language">
-            <label class="help-block pg-el-sm-3">{{ _("Language") }}</label>
-            <div class="pgadmin-controls pg-el-sm-9">
-                <select class="form-control" name="language" value="{{user_language}}">
-                    {% for key, lang in config.LANGUAGES.items() %}
-                    <option value="{{key}}" {% if user_language == key %}selected{% endif %}>{{lang}}</option>
-                    {% endfor %}
-                 </select>
-            </div>
+    {{ render_field_with_errors(login_user_form.email, "text") }}
+    {{ render_field_with_errors(login_user_form.password, "password") }}
+    <button class="btn btn-lg btn-primary btn-block" type="submit" value="{{ _('Login') }}">{{ _('Login') }}</button>
+    <div class="form-group row mb-3 c user-language">
+        <label class="help-block col-sm-3">{{ _("Language") }}</label>
+        <div class="col-sm-9">
+            <select class="form-control" name="language" value="{{user_language}}">
+                {% for key, lang in config.LANGUAGES.items() %}
+                <option value="{{key}}" {% if user_language == key %}selected{% endif %}>{{lang}}</option>
+                {% endfor %}
+             </select>
         </div>
-    </fieldset>
+    </div>
 </form>
-<span class="help-block">{{ _('Forgotten your <a href="%(url)s">password</a>?', url=url_for('browser.forgot_password')) }}</span>
+<div>
+    <span class="help-block">{{ _('Forgotten your <a href="%(url)s">password</a>?', url=url_for('browser.forgot_password')) }}</span>
+</div>
 {% endif %}
 {% endblock %}
diff --git a/web/pgadmin/templates/security/messages.html b/web/pgadmin/templates/security/messages.html
index f52f1a71..6c662674 100644
--- a/web/pgadmin/templates/security/messages.html
+++ b/web/pgadmin/templates/security/messages.html
@@ -2,10 +2,10 @@
 {% if messages %}
 <div style="position: fixed; top: 20px; right: 20px; width: 400px; z-index: 9999">
     {% for category, message in messages %}
-    <div class="alert alert-{{ category }} alert-dismissible" role="alert">
+    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+        {{ message }}
         <button type="button" class="close" data-dismiss="alert" aria-label="{{ _('Close') }}"><span
                 aria-hidden="true">&times;</span></button>
-        {{ message }}
     </div>
     {% endfor %}
 </div>
diff --git a/web/pgadmin/templates/security/panel.html b/web/pgadmin/templates/security/panel.html
index fbc22bb7..f1e89bfc 100644
--- a/web/pgadmin/templates/security/panel.html
+++ b/web/pgadmin/templates/security/panel.html
@@ -1,20 +1,22 @@
 {% extends "base.html" %}
 {% from "security/fields.html" import render_field_with_errors %}
 {% block body %}
-<div class="container" style="position:relative;z-index:1;">
+<div class="container-fluid" style="position:relative;z-index:1;">
     {% include "security/messages.html" %}
     <div class="row">
-        <div class="col-md-4 col-md-offset-4">
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">{% block panel_title %}{% endblock %}</h3>
+        <div class="col-md-4"></div>
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-header bg-primary text-white">
+                    <span class="panel-title h5">{% block panel_title %}{% endblock %}</span>
                 </div>
-                <div class="panel-body">
+                <div class="card-body">
                     {% block panel_body %}
                     {% endblock %}
                 </div>
             </div>
         </div>
+        <div class="col-md-4"></div>
     </div>
 </div>
 {% include 'security/watermark.html' %}
diff --git a/web/pgadmin/tools/backup/__init__.py b/web/pgadmin/tools/backup/__init__.py
index bebe62aa..9548bd45 100644
--- a/web/pgadmin/tools/backup/__init__.py
+++ b/web/pgadmin/tools/backup/__init__.py
@@ -158,7 +158,7 @@ class BackupMessage(IProcessDesc):
     def details(self, cmd, args):
         name, host, port = self.get_server_details()
 
-        res = '<div class="h5">'
+        res = '<div>'
 
         if self.backup_type == BACKUP.OBJECT:
             res += _(
@@ -193,7 +193,7 @@ class BackupMessage(IProcessDesc):
             # It should never reach here.
             res += "Backup"
 
-        res += '</div><div class="h5">'
+        res += '</div><div>'
         res += _("Running command:")
         res += '</b><br><span class="pg-bg-cmd enable-selection">'
         res += html.safe_str(cmd + self.cmd)
diff --git a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
index 2cebe3d1..92de82f7 100644
--- a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
+++ b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
@@ -29,8 +29,8 @@ export class BackupDialogWrapper extends DialogWrapper {
   setup() {
     return {
       buttons: [{
-        text: '',
-        className: 'btn btn-default pull-left fa fa-lg fa-info',
+        text: '<span class="fa fa-lg fa-info"></span>',
+        className: 'btn btn-default pull-left',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -38,9 +38,9 @@ export class BackupDialogWrapper extends DialogWrapper {
           label: gettext('Backup'),
         },
       }, {
-        text: '',
+        text: '<span class="fa fa-lg fa-question"></span>',
         key: 112,
-        className: 'btn btn-default pull-left fa fa-lg fa-question',
+        className: 'btn btn-default pull-left',
         attrs: {
           name: 'dialog_help',
           type: 'button',
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index f9a51213..6e201b9f 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -12,7 +12,7 @@
     {% endif %}
 </style>
 <div id="main-editor_panel">
-    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
+    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching d-none">
         <div class="wcLoadingBackground"></div>
         <span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></span>
         <span class="sql-editor-busy-text wcLoadingLabel"></span>
@@ -32,19 +32,19 @@
                         disabled>
                     <i class="fa fa-floppy-o" aria-hidden="true" tabindex="0"></i>
                 </button>
-                <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                <button id="btn-file-menu-dropdown" type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
                         tabindex="0">
                     <span class="caret"></span> <span class="sr-only">{{ _('Toggle Dropdown') }}</span>
                 </button>
                 <ul class="dropdown-menu">
                     <li>
-                        <a id="btn-file-menu-save" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-file-menu-save" href="#" tabindex="0">
                             <span>{{ _('Save') }}</span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-file-menu-save-as" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-file-menu-save-as" href="#" tabindex="0">
                             <span>{{ _('Save As') }}</span>
                         </a>
                     </li>
@@ -54,7 +54,7 @@
                 <button id="btn-find" type="button" class="btn btn-default" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                     <i class="fa fa-search" aria-hidden="true" tabindex="0"></i>
                 </button>
-                <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                <button id="btn-find-menu-dropdown" type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -63,7 +63,7 @@
                 </button>
                 <ul class="dropdown-menu">
                     <li>
-                        <a id="btn-find-menu-find" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-find" href="#" tabindex="0">
                             <span> {{ _('Find') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+F)') }}
                             {% else %}
@@ -71,7 +71,7 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-find-menu-find-next" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-find-next" href="#" tabindex="0">
                             <span> {{ _('Find Next') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+G)') }}
                             {% else %}
@@ -79,7 +79,7 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-find-menu-find-previous" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-find-previous" href="#" tabindex="0">
                             <span> {{ _('Find Previous') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+Shift+G)') }}
                             {% else %}
@@ -87,13 +87,13 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-find-menu-find-persistent" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-find-persistent" href="#" tabindex="0">
                             <span>{{ _('Persistent Find') }}</span>
                         </a>
                     </li>
-                    <li class="divider"></li>
+                    <li class="dropdown-divider"></li>
                     <li>
-                        <a id="btn-find-menu-replace" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-replace" href="#" tabindex="0">
                             <span> {{ _('Replace') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+Shift+F)') }}
                             {% else %}
@@ -101,13 +101,13 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-find-menu-replace-all" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-replace-all" href="#" tabindex="0">
                             <span>{{ _('Replace All') }}</span>
                         </a>
                     </li>
-                    <li class="divider"></li>
+                    <li class="dropdown-divider"></li>
                     <li>
-                        <a id="btn-find-menu-jump" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-find-menu-jump" href="#" tabindex="0">
                             <span>{{ _('Jump (Alt+G)') }}</span>
                         </a>
                     </li>
@@ -144,17 +144,17 @@
                 </button>
                 <ul class="dropdown-menu">
                     <li>
-                        <a id="btn-indent-code" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-indent-code" href="#" tabindex="0">
                             <span> {{ _('Indent Selection (Tab)') }} </span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-unindent-code" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-unindent-code" href="#" tabindex="0">
                             <span> {{ _('Unindent Selection (Shift+Tab)') }} </span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-comment-line" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-comment-line" href="#" tabindex="0">
                             <span> {{ _('Inline Comment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+/)') }}
                             {% else %}
@@ -162,7 +162,7 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-uncomment-line" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-uncomment-line" href="#" tabindex="0">
                             <span> {{ _('Inline Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Cmd+.)') }}
                             {% else %}
@@ -170,7 +170,7 @@
                         </a>
                     </li>
                     <li>
-                        <a id="btn-toggle-comment-block" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-toggle-comment-block" href="#" tabindex="0">
                             <span> {{ _('Block Comment/Uncomment Selection') }}{% if client_platform == 'macos' -%}
                                  {{ _(' (Shift+Cmd+/)') }}
                             {% else %}
@@ -214,13 +214,13 @@
                 </select>
             </div>
 
-            <div class="btn-group" role="group" aria-label="">
+            <div class="btn-group dropdown" role="group" aria-label="">
                 <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-default" style="width: 40px;"
                         title=""
                         tabindex="0">
                     <i class="fa fa-bolt" aria-hidden="true"></i>
                 </button>
-                <button id="btn-query-dropdown" type="button" class="btn btn-default dropdown-toggle"
+                <button id="btn-query-dropdown" type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         accesskey=""
                         title=""
@@ -229,59 +229,59 @@
                 </button>
                 <ul class="dropdown-menu" role="menu">
                     <li>
-                        <a id="btn-flash-menu" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-flash-menu" href="#" tabindex="0">
                             <span></span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-explain" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-explain" href="#" tabindex="0">
                             <span></span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-explain-analyze" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-explain-analyze" href="#" tabindex="0">
                             <span></span>
                         </a>
                     </li>
-                    <li class="divider"></li>
+                    <li class="dropdown-divider"></li>
                     <li class="dropdown-submenu">
-                        <a href="#" tabindex="0">{{ _('Explain Options') }}</a>
+                        <a class="dropdown-item" href="#" tabindex="0">{{ _('Explain Options') }}</a>
                         <ul class="dropdown-menu">
                             <li>
-                                <a id="btn-explain-verbose" href="#" class="noclose" tabindex="0">
+                                <a class="dropdown-item" id="btn-explain-verbose" href="#" class="noclose" tabindex="0">
                                     <i class="explain-verbose fa fa-check visibility-hidden" aria-hidden="true"></i>
                                     <span> {{ _('Verbose') }} </span>
                                 </a>
                             </li>
                             <li>
-                                <a id="btn-explain-costs" href="#" class="noclose" tabindex="0">
+                                <a class="dropdown-item" id="btn-explain-costs" href="#" class="noclose" tabindex="0">
                                     <i class="explain-costs fa fa-check visibility-hidden" aria-hidden="true"></i>
                                     <span> {{ _('Costs') }} </span>
                                 </a>
                             </li>
                             <li>
-                                <a id="btn-explain-buffers" href="#" class="noclose" tabindex="0">
+                                <a class="dropdown-item" id="btn-explain-buffers" href="#" class="noclose" tabindex="0">
                                     <i class="explain-buffers fa fa-check visibility-hidden" aria-hidden="true"></i>
                                     <span> {{ _('Buffers') }} </span>
                                 </a>
                             </li>
                             <li>
-                                <a id="btn-explain-timing" href="#" class="noclose" tabindex="0">
+                                <a class="dropdown-item" id="btn-explain-timing" href="#" class="noclose" tabindex="0">
                                     <i class="explain-timing fa fa-check visibility-hidden" aria-hidden="true"></i>
                                     <span> {{ _('Timing') }} </span>
                                 </a>
                             </li>
                         </ul>
                     </li>
-                    <li class="divider"></li>
+                    <li class="dropdown-divider"></li>
                     <li>
-                        <a id="btn-auto-commit" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-auto-commit" href="#" tabindex="0">
                             <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true"></i>
                             <span> {{ _('Auto commit?') }} </span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-auto-rollback" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-auto-rollback" href="#" tabindex="0">
                             <i class="auto-rollback fa fa-check visibility-hidden" aria-hidden="true"></i>
                             <span> {{ _('Auto rollback?') }} </span>
                         </a>
@@ -305,12 +305,12 @@
                 </button>
                 <ul class="dropdown-menu">
                     <li>
-                        <a id="btn-clear" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-clear" href="#" tabindex="0">
                             <span> {{ _('Clear Query Window') }} </span>
                         </a>
                     </li>
                     <li>
-                        <a id="btn-clear-history" href="#" tabindex="0">
+                        <a class="dropdown-item" id="btn-clear-history" href="#" tabindex="0">
                             <span> {{ _('Clear History') }} </span>
                         </a>
                     </li>
@@ -369,12 +369,10 @@
     sqlEditorController.on('pgadmin-sqleditor:loading-icon:message', function(msg) {
       msgDiv.text(msg);
       }).on('pgadmin-sqleditor:loading-icon:show', function(msg) {
-        loadingDiv.removeClass('hide');
+        loadingDiv.removeClass('d-none');
         msgDiv.text(msg);
         }).on('pgadmin-sqleditor:loading-icon:hide', function() {
-          if (!loadingDiv.hasClass('hide')) {
-          loadingDiv.addClass('hide');
-          }
+            loadingDiv.addClass('d-none');
           });
     {% if script_type_url %}
         var script_type_url = '{{ script_type_url }}';
diff --git a/web/pgadmin/tools/import_export/__init__.py b/web/pgadmin/tools/import_export/__init__.py
index 9160a8e0..fddcfc06 100644
--- a/web/pgadmin/tools/import_export/__init__.py
+++ b/web/pgadmin/tools/import_export/__init__.py
@@ -125,7 +125,7 @@ class IEMessage(IProcessDesc):
             id=self.sid, user_id=current_user.id
         ).first()
 
-        res = '<div class="h5">'
+        res = '<div>'
         res += _(
             "Copying table data '{0}.{1}' on database '{2}' "
             "for the server '{3}'..."
@@ -140,7 +140,7 @@ class IEMessage(IProcessDesc):
             )
         )
 
-        res += '</div><div class="h5">'
+        res += '</div><div>'
         res += _("Running command:")
         res += '</b><br><span class="pg-bg-cmd enable-selection">'
         res += html.safe_str(self._cmd)
diff --git a/web/pgadmin/tools/maintenance/__init__.py b/web/pgadmin/tools/maintenance/__init__.py
index d9f44b83..f7fbdb05 100644
--- a/web/pgadmin/tools/maintenance/__init__.py
+++ b/web/pgadmin/tools/maintenance/__init__.py
@@ -128,9 +128,9 @@ class Message(IProcessDesc):
         if self.data['op'] == "CLUSTER":
             res = _('CLUSTER')
 
-        res = '<div class="h5">' + html.safe_str(res)
+        res = '<div>' + html.safe_str(res)
 
-        res += '</div><div class="h5">'
+        res += '</div><div>'
         res += html.safe_str(
             _("Running Query:")
         )
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index a9c70752..e92deac8 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -34,7 +34,7 @@ define([
       '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '<% } %>',
     ].join('\n')),
-    className: 'pgadmin-control-group form-group col-xs-6',
+    className: 'pgadmin-control-group form-group col-6',
   });
 
   // Main model for Maintenance functionality
@@ -80,8 +80,8 @@ define([
       ],
       control: Backform.RadioControl.extend({
         template: _.template([
-          '<label class="control-label col-sm-4 col-xs-12"><%=label%></label>',
-          '<div class="pgadmin-controls col-xs-12 col-sm-8 btn-group pg-maintenance-op" data-toggle="buttons">',
+          '<label class="control-label col-sm-4 col-12"><%=label%></label>',
+          '<div class="pgadmin-controls col-12 col-sm-8 btn-group pg-maintenance-op" data-toggle="buttons">',
           ' <% for (var i=0; i < options.length; i++) { %>',
           ' <% var option = options[i]; %>',
           ' <label class="btn btn-primary<% if (i == 0) { %> active<%}%>">',
@@ -283,8 +283,8 @@ define([
             setup: function() {
               return {
                 buttons: [{
-                  text: '',
-                  className: 'btn btn-default pull-left fa fa-lg fa-info',
+                  text: '<span class="fa fa-lg fa-info"></span>',
+                  className: 'btn btn-default pull-left',
                   attrs: {
                     name: 'object_help',
                     type: 'button',
@@ -292,9 +292,9 @@ define([
                     label: gettext('Maintenance'),
                   },
                 }, {
-                  text: '',
+                  text: '<span class="fa fa-lg fa-question"></span>',
                   key: 112,
-                  className: 'btn btn-default pull-left fa fa-lg fa-question',
+                  className: 'btn btn-default pull-left',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
diff --git a/web/pgadmin/tools/restore/__init__.py b/web/pgadmin/tools/restore/__init__.py
index ae747739..f639e198 100644
--- a/web/pgadmin/tools/restore/__init__.py
+++ b/web/pgadmin/tools/restore/__init__.py
@@ -111,7 +111,7 @@ class RestoreMessage(IProcessDesc):
 
     def details(self, cmd, args):
         name, host, port = self.get_server_details()
-        res = '<div class="h5">'
+        res = '<div>'
 
         res += html.safe_str(
             _(
@@ -121,7 +121,7 @@ class RestoreMessage(IProcessDesc):
             )
         )
 
-        res += '</div><div class="h5"><b>'
+        res += '</div><div><b>'
         res += html.safe_str(
             _("Running command:")
         )
diff --git a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
index 845da7a3..7b12232a 100644
--- a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
+++ b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
@@ -22,8 +22,8 @@ export class RestoreDialogWrapper extends DialogWrapper {
   setup() {
     return {
       buttons: [{
-        text: '',
-        className: 'btn btn-default pull-left fa fa-lg fa-info',
+        text: '<span class="fa fa-lg fa-info"></span>',
+        className: 'btn btn-default pull-left',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -31,9 +31,9 @@ export class RestoreDialogWrapper extends DialogWrapper {
           label: gettext('Restore'),
         },
       }, {
-        text: '',
+        text: '<span class="fa fa-lg fa-question"></span>',
         key: 112,
-        className: 'btn btn-default pull-left fa fa-lg fa-question',
+        className: 'btn btn-default pull-left',
         attrs: {
           name: 'dialog_help',
           type: 'button',
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index da71c9a3..a37ff32d 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -1306,7 +1306,7 @@ define('tools.querytool', [
     _closeDropDown: function(ev) {
       var target = ev && (ev.currentTarget || ev.target);
       if (target) {
-        $(target).closest('.open').removeClass('open').find('.dropdown-backdrop').remove();
+        $(target).closest('.show').removeClass('show').find('.dropdown-backdrop').remove();
       }
     },
 
@@ -1480,7 +1480,7 @@ define('tools.querytool', [
 
     // Callback function for cancel button click.
     on_cancel: function() {
-      $('#filter').addClass('hidden');
+      $('#filter').addClass('d-none');
       $('#editor-panel').removeClass('sql-editor-busy-fetching');
     },
 
@@ -3279,7 +3279,7 @@ define('tools.querytool', [
           setTimeout(
             function() {
               if (res.data.status) {
-                $('#filter').addClass('hidden');
+                $('#filter').addClass('d-none');
                 $('#editor-panel').removeClass('sql-editor-busy-fetching');
                 // Refresh the sql grid
                 queryToolActions.executeQuery(self);
diff --git a/web/pgadmin/tools/user_management/static/css/user_management.css b/web/pgadmin/tools/user_management/static/css/user_management.css
new file mode 100644
index 00000000..96686ad9
--- /dev/null
+++ b/web/pgadmin/tools/user_management/static/css/user_management.css
@@ -0,0 +1,37 @@
+.user_management .search_users form {
+  margin: 0;
+}
+
+.user_management table {
+  display: block;
+  height: 100%;
+  overflow: auto;
+  border: 0 none;
+}
+
+.user_management .backform-tab {
+  height: calc(100% - 75px);
+}
+
+.user_management .search_users {
+  float:right;
+  margin-right: 5px;
+  padding:0 !important;
+}
+
+.user_management .search_users input{
+  height:15px;
+  margin-top: 3px;
+}
+
+.user_management .user_container {
+height: calc(100% - 35px);
+}
+
+.user_management input[placeholder] {
+  font-size: 12px;
+}
+
+.user_management_pg-alertify-button {
+  line-height: 16px;
+}
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 c0a31006..9bbabce7 100644
--- a/web/pgadmin/tools/user_management/static/js/user_management.js
+++ b/web/pgadmin/tools/user_management/static/js/user_management.js
@@ -60,9 +60,9 @@ define([
             setup: function() {
               return {
                 buttons: [{
-                  text: '',
+                  text: '<span class="fa fa-lg fa-question"></span>',
                   key: 112,
-                  className: 'btn btn-default pull-left fa fa-lg fa-question',
+                  className: 'btn btn-default pull-left',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
@@ -576,9 +576,9 @@ define([
             setup: function() {
               return {
                 buttons: [{
-                  text: '',
+                  text: '<span class="fa fa-lg fa-question"></span>',
                   key: 112,
-                  className: 'btn btn-default pull-left fa fa-lg fa-question',
+                  className: 'btn btn-default pull-left',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
@@ -757,7 +757,7 @@ define([
                 userCollection = this.userCollection = new UserCollection(),
                 header = [
                   '<div class="subnode-header">',
-                  '  <button class="btn-sm btn-default add fa fa-plus" title="<%-add_title%>" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
+                  '  <button class="btn btn-sm-sq btn-default add fa fa-plus" title="<%-add_title%>" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
                   '  <div class="control-label search_users"></div>',
                   '</div>',
                 ].join('\n'),
diff --git a/web/pgadmin/tools/user_management/static/scss/_user_management.scss b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
index ac22f0b9..29314f9c 100644
--- a/web/pgadmin/tools/user_management/static/scss/_user_management.scss
+++ b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
@@ -1,3 +1,48 @@
 .bg-user-invalid {
   @extend .bg-warning-lighter;
 }
+
+.user_management {
+  margin: 0 10px !important;
+  width: calc(100% - 20px);
+  height: 100%;
+  overflow: hidden;
+}
+
+.user_management .search_users form {
+  margin: 0;
+}
+
+.user_management table {
+  display: block;
+  height: 100%;
+  overflow: auto;
+  border: 0 none;
+}
+
+.user_management .backform-tab {
+  height: calc(100% - 75px);
+}
+
+.user_management .search_users {
+  float:right;
+  margin-right: 5px;
+  padding:0 !important;
+}
+
+.user_management .search_users input{
+  height:15px;
+  margin-top: 3px;
+}
+
+.user_management .user_container {
+height: calc(100% - 35px);
+}
+
+.user_management input[placeholder] {
+  font-size: 12px;
+}
+
+.user_management_pg-alertify-button {
+  line-height: 16px;
+}
diff --git a/web/regression/javascript/browser/menu_spec.js b/web/regression/javascript/browser/menu_spec.js
deleted file mode 100644
index ce1bf027..00000000
--- a/web/regression/javascript/browser/menu_spec.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2018, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-define([
-  'pgadmin',
-  'browser/menu',
-], function (pgAdmin) {
-  describe('MenuItem', function () {
-    var MenuItem = pgAdmin.Browser.MenuItem;
-    var menuItem;
-
-    describe('when we create a menu item', function () {
-      describe('and it is disabled', function () {
-        beforeEach(function () {
-          menuItem = new MenuItem({enable: false, icon: 'fa fa-car'});
-          menuItem.create_el({}, {});
-        });
-
-        it('should change the text color to gray', function () {
-          expect(menuItem.$el.find('span').hasClass('text-gray')).toBeTruthy();
-        });
-
-        describe('when becomes enabled', function () {
-          beforeEach(function () {
-            menuItem.enable = true;
-            menuItem.update({},{});
-          });
-
-          it('should change the text color to white', function () {
-            expect(menuItem.$el.find('span').hasClass('text-gray')).toBeFalsy();
-            expect(menuItem.$el.find('span').hasClass('text-fg-inverse')).toBeTruthy();
-          });
-        });
-      });
-
-      describe('and it is enabled', function () {
-        beforeEach(function () {
-          menuItem = new MenuItem({enable: true, icon: 'fa fa-car'});
-          menuItem.create_el({}, {});
-        });
-
-        it('should change the text color to white', function () {
-          expect(menuItem.$el.find('span').hasClass('text-fg-inverse')).toBeTruthy();
-        });
-
-        describe('when becomes disabled', function () {
-          beforeEach(function () {
-            menuItem.enable = false;
-            menuItem.update({},{});
-          });
-
-          it('should change the text color to gray', function () {
-            expect(menuItem.$el.find('span').hasClass('text-gray')).toBeTruthy();
-            expect(menuItem.$el.find('span').hasClass('text-fg-inverse')).toBeFalsy();
-          });
-        });
-      });
-    });
-
-  });
-});
diff --git a/web/regression/javascript/misc/explain/explain_statistics_spec.js b/web/regression/javascript/misc/explain/explain_statistics_spec.js
index 0b2ec67c..3af5a5c7 100644
--- a/web/regression/javascript/misc/explain/explain_statistics_spec.js
+++ b/web/regression/javascript/misc/explain/explain_statistics_spec.js
@@ -8,7 +8,7 @@ describe('ExplainStatistics', () => {
 
   beforeEach(function() {
     statsModel = new StatisticsModel();
-    statsDiv = '<div class="pg-explain-stats-area btn-group hidden"></div>';
+    statsDiv = '<div class="pg-explain-stats-area btn-group d-none"></div>';
     tooltipContainer = $('<div></div>', {
       id: 'toolTip',
       class: 'pgadmin-explain-tooltip',
@@ -23,7 +23,7 @@ describe('ExplainStatistics', () => {
       statsModel.set('Triggers', []);
       statsModel.set_statistics(tooltipContainer);
 
-      expect($('.pg-explain-stats-area').hasClass('hidden')).toBe(true);
+      expect($('.pg-explain-stats-area').hasClass('d-none')).toBe(true);
     });
   });
 
@@ -36,7 +36,7 @@ describe('ExplainStatistics', () => {
     });
 
     it('Statistics button should be visible', () => {
-      expect($('.pg-explain-stats-area').hasClass('hidden')).toBe(false);
+      expect($('.pg-explain-stats-area').hasClass('d-none')).toBe(false);
     });
 
     it('Mouse over event should be trigger', () => {
@@ -65,7 +65,7 @@ describe('ExplainStatistics', () => {
     });
 
     it('Statistics button should be visible', () => {
-      expect($('.pg-explain-stats-area').hasClass('hidden')).toBe(false);
+      expect($('.pg-explain-stats-area').hasClass('d-none')).toBe(false);
     });
 
     it('Mouse over event should be trigger', () => {
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 47cd73a0..30581c45 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -100,29 +100,54 @@ const sourceMapDevToolPlugin = new webpack.SourceMapDevToolPlugin({
   columns: false,
 });
 
+
+
+function cssToBeSkiped(curr_path) {
+  /** Skip all templates **/
+  if(curr_path.indexOf('template') > -1) {
+    return true;
+  }
+
+  for(let i=0; i< webpackShimConfig.css_bundle_skip.length; i++) {
+    if(path.join(__dirname, webpackShimConfig.css_bundle_skip[i]) === curr_path){
+      return true;
+    }
+  }
+  return 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
+ * give input to webpack.
  */
-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) {
+function pushModulesCss(curr_path, pgadminStyles) {
+  /** Skip Directories */
+  if(cssToBeSkiped(curr_path)) {
     return;
   }
 
   fs.readdirSync(curr_path).map(function(curr_file) {
+    /** Skip Files */
+    if(cssToBeSkiped(path.join(curr_path, curr_file))) {
+      return;
+    }
+
     let stats = fs.statSync(path.join(curr_path, curr_file));
     /* if directory, dig further */
     if(stats.isDirectory()) {
-      pushPgadminStyles(path.join(curr_path, curr_file));
+      pushModulesCss(path.join(curr_path, curr_file), pgadminStyles);
     }
     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'));
+
+let pgadminStyles = [];
+/* Include what is given in shim config */
+for(let i=0; i<webpackShimConfig.css_bundle_include.length; i++) {
+  pgadminStyles.push(path.join(__dirname, webpackShimConfig.css_bundle_include[i]));
+}
+pushModulesCss(path.join(__dirname,'./pgadmin'), pgadminStyles);
 
 module.exports = {
   stats: { children: false },
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index c2711036..c6217fde 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -303,5 +303,15 @@ var webpackShimConfig = {
     if (module.rawRequest === undefined) { return false; }
     return this.pgLibs.indexOf(module.rawRequest) !== -1;
   },
+  /* These will be skipped when webpack picks css/scss files recursively to bundle */
+  css_bundle_skip: [
+    './pgadmin/static',
+  ],
+
+  /* These will be included in array formed by recursive traversing for css/scss files */
+  css_bundle_include: [
+    './pgadmin/static/scss/pgadmin.scss',
+    './pgadmin/static/css/pgadmin.css',
+  ],
 };
 module.exports = webpackShimConfig;
diff --git a/web/yarn.lock b/web/yarn.lock
index addd2e41..7cf6ae9a 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1412,10 +1412,14 @@ bootstrap-switch@3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz#70e0aeb2a877c0dc766991de108e2170fc29a2ff"
 
-bootstrap@^3.3, bootstrap@^3.3.7:
+bootstrap@^3.3:
   version "3.3.7"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
 
+bootstrap@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.3.tgz#0eb371af2c8448e8c210411d0cb824a6409a12be"
+
 bowser@1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.6.1.tgz#9157e9498f456e937173a2918f3b2161e5353eb3"
@@ -7128,6 +7132,10 @@ pngquant-bin@^4.0.0:
     execa "^0.10.0"
     logalot "^2.0.0"
 
+popper.js@^1.14.4:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
