diff --git a/docs/en_US/preferences.rst b/docs/en_US/preferences.rst
index 858ca7b..2e64097 100644
--- a/docs/en_US/preferences.rst
+++ b/docs/en_US/preferences.rst
@@ -185,6 +185,7 @@ Expand the *Miscellaneous* node to specify miscellaneous display preferences.
 * Use the *Themes* drop-down listbox to select the theme for pgAdmin. You'll also get a preview just below the
   drop down. Note that, to apply the theme you need to refresh the pgAdmin page. You can also submit your
   own themes, check `here <https://git.postgresql.org/gitweb/?p=pgadmin4.git;a=blob_plain;f=README>`_ how.
+  Currently we support Dark and High Contrast (Beta) Theme as well.
 
 The Paths Node
 **************
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 3d2b346..d69e22a 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
@@ -213,7 +213,7 @@ define('pgadmin.node.fts_configuration', [
           '   </div>',
           '   <div class="col-6" header="token"></div>',
           '   <div class="col-2">',
-          '     <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ><span class="sr-only">' + gettext('Add Token') + '</span></button>',
+          '     <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ><span class="sr-only">' + gettext('Add Token') + '</span></button>',
           '   </div>',
           '  </div>',
           ' </div>',
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 ba1566a..57d65d3 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
@@ -450,7 +450,7 @@ define('pgadmin.node.exclusion_constraint', [
           titleTmpl = _.template([
             '<div class="subnode-header">',
             '  <label class="control-label pg-el-sm-10"><%-label%></label>',
-            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
+            '  <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
             '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
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 0af5ca0..49b533c 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
@@ -385,7 +385,7 @@ define('pgadmin.node.foreign_key', [
           titleTmpl = _.template([
             '<div class="subnode-header">',
             '  <label class="control-label pg-el-sm-10"><%-label%></label>',
-            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
+            '  <button class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"></button>',
             '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
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 a289779..6d03a17 100644
--- a/web/pgadmin/browser/server_groups/servers/static/js/variable.js
+++ b/web/pgadmin/browser/server_groups/servers/static/js/variable.js
@@ -338,7 +338,7 @@ function(gettext, _, $, Backbone, Backform, Backgrid, Alertify, pgAdmin, pgNode)
             titleTmpl = _.template([
               '<div class=\'subnode-header\'>',
               '<span class=\'control-label\'><%-label%></span>',
-              '<button class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + gettext('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>><span class="sr-only">' + gettext('Add new row') + '</span></button>',
+              '<button class=\'btn btn-sm-sq btn-primary-icon add fa fa-plus\' title=\'' + gettext('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>><span class="sr-only">' + gettext('Add new row') + '</span></button>',
               '</div>'].join('\n')),
             $gridBody =
             $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
diff --git a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
index 9b4fe75..8e4db7e 100644
--- a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
+++ b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
@@ -190,7 +190,7 @@ define('pgadmin.node.tablespace', [
                   return {
                     buttons: [{
                       text: '', key: 112,
-                      className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                      className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                       attrs:{name:'dialog_help', type:'button', label: gettext('Users'),
                         url: url_for('help.static', {'filename': 'move_objects.html'})},
                     },{
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index dcf3cc0..c7f1b72 100644
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -603,7 +603,7 @@ define('pgadmin.browser', [
               return {
                 buttons:[{
                   text: '',
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js
index 3207f78..124817a 100644
--- a/web/pgadmin/browser/static/js/collection.js
+++ b/web/pgadmin/browser/static/js/collection.js
@@ -246,7 +246,7 @@ define([
           label: '',
           type: 'delete',
           tooltip: gettext('Delete/Drop'),
-          extraClasses: ['btn-secondary m-1', 'delete_multiple'],
+          extraClasses: ['btn-primary-icon m-1', 'delete_multiple'],
           icon: 'fa fa-lg fa-trash-o',
           disabled:  (_.isFunction(that.canDrop)) ? !(that.canDrop.apply(self, [data, item])) : (!that.canDrop),
           register: function(btn) {
@@ -260,7 +260,7 @@ define([
           label: '',
           type: 'delete',
           tooltip: gettext('Drop Cascade'),
-          extraClasses: ['btn-secondary m-1', 'delete_multiple_cascade'],
+          extraClasses: ['btn-primary-icon m-1', 'delete_multiple_cascade'],
           icon: 'pg-font-icon icon-drop-cascade',
           disabled: (_.isFunction(that.canDropCascade)) ? !(that.canDropCascade.apply(self, [data, item])) : (!that.canDropCascade),
           register: function(btn) {
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index fec65eb..93285fb 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -1245,7 +1245,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('SQL help for this object type.'),
-              extraClasses: ['btn-secondary', 'btn-secondary', 'm-1'],
+              extraClasses: ['btn-primary-icon', 'btn-primary-icon', 'm-1'],
               icon: 'fa fa-lg fa-info',
               disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
               register: function(btn) {
@@ -1498,7 +1498,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('SQL help for this object type.'),
-              extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
+              extraClasses: ['btn-primary-icon', 'pull-left', 'mx-1'],
               icon: 'fa fa-lg fa-info',
               disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
               register: function(btn) {
@@ -1510,7 +1510,7 @@ define('pgadmin.browser.node', [
               label: '',
               type: 'help',
               tooltip: gettext('Help for this dialog.'),
-              extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
+              extraClasses: ['btn-primary-icon', 'pull-left', 'mx-1'],
               icon: 'fa fa-lg fa-question',
               disabled: (that.dialogHelp == '') ? true : false,
               register: function(btn) {
diff --git a/web/pgadmin/browser/static/js/toolbar.js b/web/pgadmin/browser/static/js/toolbar.js
index 355354f..d0f6668 100644
--- a/web/pgadmin/browser/static/js/toolbar.js
+++ b/web/pgadmin/browser/static/js/toolbar.js
@@ -24,7 +24,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -34,7 +34,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -44,7 +44,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
   {
@@ -54,7 +54,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn btn-secondary',
+    parentClass: 'pg-toolbar-btn btn-primary-icon',
     enabled: false,
   },
 ];
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index 408b4ff..af4cd16 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -129,7 +129,7 @@ define([
       '        <div class="wizard-buttons d-flex">' +
       '          <div>' +
       '            <button tabindex="0" aria-label="' + gettext('Help') + '" title = "' + gettext('Help for this dialog.') + '"' +
-      '              class="btn btn-secondary pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
+      '              class="btn btn-primary-icon pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
       '              <span class="fa fa-lg fa-question" role="img"></span></button>' +
       '          </div>' +
       '          <div class="ml-auto">' +
diff --git a/web/pgadmin/browser/static/scss/_wizard.scss b/web/pgadmin/browser/static/scss/_wizard.scss
index 8a9c31d..67e2b8c 100644
--- a/web/pgadmin/browser/static/scss/_wizard.scss
+++ b/web/pgadmin/browser/static/scss/_wizard.scss
@@ -2,10 +2,10 @@
   padding: 6px!important;
   min-height: $title-height;
   max-height: $title-height;
-  background-color: $color-primary;
+  background-color: $alert-header-bg;
   font-size: $font-size-base;
   font-weight: bold;
-  color: $color-primary-fg;
+  color: $alert-header-fg;
   overflow: hidden;
   white-space: nowrap;
   border-radius: 0rem;
diff --git a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
index 5b19a64..0f9e7d8 100644
--- a/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/database_dashboard.html
@@ -85,7 +85,7 @@
                             </div>
                             <input type="search" class="form-control" id="txtGridSearch" placeholder="{{ _('Search') }}" aria-describedby="labelSearch" aria-labelledby="labelSearch">
                         </div>
-                        <button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
+                        <button id="btn_refresh" type="button" class="btn btn-primary-icon btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
                             <span class="fa fa-refresh" aria-hidden="true"></span>
                         </button>
                     </div>
diff --git a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
index 709bcce..08addc1 100644
--- a/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
+++ b/web/pgadmin/dashboard/templates/dashboard/server_dashboard.html
@@ -89,7 +89,7 @@
                             </div>
                             <input type="search" class="form-control" id="txtGridSearch" placeholder="{{ _('Search') }}" aria-label="{{ _('Search') }}" aria-describedby="labelSearch">
                         </div>
-                        <button id="btn_refresh" type="button" class="btn btn-secondary btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
+                        <button id="btn_refresh" type="button" class="btn btn-primary-icon btn-navtab-inline" title="{{ _('Refresh') }}" aria-label="{{ _('Refresh') }}">
                             <span class="fa fa-refresh" aria-hidden="true"></span>
                         </button>
                     </div>
diff --git a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
index daa51ef..c2b81e7 100644
--- a/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
+++ b/web/pgadmin/misc/bgprocess/static/js/bgprocess.js
@@ -38,21 +38,21 @@ define('misc.bgprocess', [
         <div class="pr-2">
           <i class="fa fa-check fa-lg text-success pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       failed_status_tpl: _.template(`
       <div class="d-flex px-2 py-1 bg-danger-lighter border border-danger rounded">
         <div class="pr-2">
           <i class="fa fa-close fa-lg text-danger pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       other_status_tpl: _.template(`
       <div class="d-flex px-2 py-1 bg-primary-light border border-primary rounded">
         <div class="pr-2">
           <i class="fa fa-info fa-lg text-primary pg-bg-status-icon" aria-hidden="true" role="img"></i>
         </div>
-        <div class="text-body mx-auto pg-bg-status-text"><%-status_text%></div>
+        <div class="mx-auto pg-bg-status-text alert-text-body"><%-status_text%></div>
       </div>`),
       initialize: function(info, notify) {
         _.extend(this, {
diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js
index c15a9d9..26fa239 100644
--- a/web/pgadmin/misc/file_manager/static/js/utility.js
+++ b/web/pgadmin/misc/file_manager/static/js/utility.js
@@ -1542,7 +1542,7 @@ define([
         // we remove simple file upload element
         $('.file-input-container').remove();
         $('.upload').remove();
-        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-secondary upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
+        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-primary-icon upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
 
         $('#uploader .upload').off().on('click', function() {
           // we create prompt
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 b259df9..d2682f6 100644
--- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -53,7 +53,8 @@
 .file_listing #contents.grid li.selected {
   cursor: pointer;
   border: $table-hover-border;
-  background: $table-hover-bg-color;
+  background: $grid-hover-bg-color;
+  color: $grid-hover-fg-color;
 }
 
 .fileinfo #contents li span.less_text {
@@ -317,6 +318,16 @@
   cursor: pointer;
 }
 
+.cap_select_file:hover {
+  color: $grid-hover-fg-color !important;
+  .fm_folder_list,
+  .fm_folder_grid,
+  .fm_file_grid,
+  .fm_file_list {
+    color: $grid-hover-fg-color !important;
+  }
+}
+
 .add-folder-icon {
   position: relative;
   top: -8px;
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 99ef0ac..b3766b2 100644
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -8,11 +8,11 @@
             <div class="flex-grow-1 mr-1">
                 <div class="input-group" role="group">
                     <div class="input-group-prepend">
-                        <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-secondary home"
+                        <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-primary-icon home"
                                 tabindex="0">
                             <span class="fa fa-home sql-icon-lg"></span>
                         </button>
-                        <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-secondary level-up"
+                        <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-primary-icon level-up"
                                 disabled tabindex="0">
                             <span class="fa fa-level-up sql-icon-lg"></span>
                         </button>
@@ -24,32 +24,32 @@
             <div>
                 <input class="mode" name="mode" type="hidden" value="add"/>
                 <input class="currentpath" name="currentpath" type="hidden"/>
-                <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-secondary refresh"
+                <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-primary-icon refresh"
                         tabindex="0">
                     <span class="fa fa-refresh sql-icon-lg"></span>
                 </button>
-                <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-secondary download"
+                <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-primary-icon download"
                         disabled>
                     <span class="fa fa-download sql-icon-lg"></span>
                 </button>
-                <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-secondary delete"
+                <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-primary-icon delete"
                         disabled>
                     <span class="fa fa-trash sql-icon-lg"></span>
                 </button>
-                <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-secondary rename"
+                <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-primary-icon rename"
                         tabindex="0">
                     <span class="fa fa-pencil-square-o sql-icon-lg"></span>
                 </button>
                 <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
-                        class="btn btn-sm btn-secondary create" tabindex="0">
+                        class="btn btn-sm btn-primary-icon create" tabindex="0">
                     <span class="fa fa-folder-open sql-icon-lg"></span>
                     <span class="fa fa-plus add-folder-icon"></span>
                 </button>
                 <div class="btn-group" role="group">
-                    <button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
+                    <button class="ON btn btn-primary-icon btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
                         <span class="fa fa-th sql-icon-lg"></span>
                     </button>
-                    <button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="0">
+                    <button type="button" class="btn btn-primary-icon btn-sm list" title="{{ _('View as table') }}" tabindex="0">
                         <span class="fa fa-list sql-icon-lg"></span>
                     </button>
                 </div>
@@ -67,14 +67,14 @@
         <div class='delete_item'>
             <span>{{ _('Are you sure you want to delete this item?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary-icon btn_no' tabindex="0">{{ _('No') }}</button>
                 <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>
         <div class='replace_file'>
             <span>{{ _('Are you sure you want to replace this file?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary-icon btn_no' tabindex="0">{{ _('No') }}</button>
                 <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>
diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index 935f281..83b6b90 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -1285,7 +1285,7 @@ define('pgadmin.misc.explain', [
           role: 'group',
         }).appendTo(graphicalContainer),
         zoomInBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom in'),
           'aria-label': gettext('Zoom in'),
           tabindex: 0,
@@ -1294,7 +1294,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-search-plus',
           })),
         zoomToNormal = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom to original'),
           'aria-label': gettext('Zoom to original'),
           tabindex: 0,
@@ -1303,7 +1303,7 @@ define('pgadmin.misc.explain', [
             class: 'fa fa-arrows-alt',
           })),
         zoomOutBtn = $('<button></button>', {
-          class: 'btn btn-secondary pg-explain-zoom-btn',
+          class: 'btn btn-primary-icon pg-explain-zoom-btn',
           title: gettext('Zoom out'),
           'aria-label': gettext('Zoom out'),
           tabindex: 0,
@@ -1318,7 +1318,7 @@ define('pgadmin.misc.explain', [
         }).appendTo(graphicalContainer),
         downloadBtn = $('<button></button>', {
           id: 'btn-explain-download',
-          class: 'btn btn-secondary pg-explain-download-btn',
+          class: 'btn btn-primary-icon pg-explain-download-btn',
           title: gettext('Download'),
           'aria-label': gettext('Download'),
           tabindex: 0,
@@ -1347,7 +1347,7 @@ define('pgadmin.misc.explain', [
 
       $('<button></button>', {
         id: 'btn-explain-stats',
-        class: 'btn btn-secondary pg-explain-stats-btn',
+        class: 'btn btn-primary-icon pg-explain-stats-btn',
         title: gettext('Statistics'),
         'aria-label': gettext('Statistics'),
         tabindex: 0,
diff --git a/web/pgadmin/misc/static/explain/scss/_explain.scss b/web/pgadmin/misc/static/explain/scss/_explain.scss
index ff32fb2..56518d0 100644
--- a/web/pgadmin/misc/static/explain/scss/_explain.scss
+++ b/web/pgadmin/misc/static/explain/scss/_explain.scss
@@ -49,6 +49,7 @@ div.tab-pane[data-explain-tabpanel=table] {
   td.pga-ex-inclusive-2,
   td.pga-ex-rowsx-2 {
     background-color: $explain-sev-2-bg;
+    color: $explain-sev-2-color;
   }
 
   td.pga-ex-exclusive-3,
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index dd96717..2afa9fe 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -420,7 +420,7 @@ define('pgadmin.preferences', [
               buttons: [{
                 text: '',
                 key: 112,
-                className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                 attrs: {
                   name: 'dialog_help',
                   type: 'button',
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 8b0f8ac..1ed7712 100644
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -442,7 +442,7 @@ define([
         <div class="pr-2">
           <i class="fa fa-check" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       return alertify.orig_success(alertMessage, timeout, callback);
     },
@@ -452,7 +452,7 @@ define([
         <div class="pr-2">
           <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       return alertify.orig_error(alertMessage, timeout, callback);
     },
@@ -462,7 +462,7 @@ define([
         <div class="mr-3">
           <i class="fa fa-info-circle" aria-hidden="true"></i>
         </div>
-        <div class="text-body" role="status">${message}</div>
+        <div class="alert-text-body" role="status">${message}</div>
       </div>`;
       var alert = alertify.notify(alertMessage, timeout);
       return alert;
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 9a259c6..6be16b7 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1298,7 +1298,7 @@ define([
         gridHeader = _.template([
           '<div class="subnode-header">',
           '  <span  class="control-label pg-el-sm-10" id="<%=cId%>"><%-label%></span>',
-          '  <button aria-label="' + gettext('Add new row') + '" class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"><%-add_label%></button>',
+          '  <button aria-label="' + gettext('Add new row') + '" class="btn btn-sm-sq btn-primary-icon add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + gettext('Add new row') + '"><%-add_label%></button>',
           '</div>',
         ].join('\n')),
         gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-12 object subnode "></div>').append(
@@ -1585,7 +1585,7 @@ define([
       var self = this,
         gridHeader = ['<div class=\'subnode-header\'>',
           '  <span class=\'control-label pg-el-sm-10\'>' + data.label + '</span>',
-          '  <button aria-label="' + gettext('Add') + '" class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + gettext('Add new row') + '\'></button>',
+          '  <button aria-label="' + gettext('Add') + '" class=\'btn btn-sm-sq btn-primary-icon add fa fa-plus\' title=\'' + gettext('Add new row') + '\'></button>',
           '</div>',
         ].join('\n'),
         gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-12 object subnode\'></div>').append(gridHeader);
@@ -2728,7 +2728,7 @@ define([
       '<div class="input-group">',
       '<input type="<%=type%>" id="<%=cId%>" class="form-control <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%> />',
       '<div class="input-group-append">',
-      '<button class="btn btn-secondary fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> aria-hidden="true" aria-label="' + gettext('Select file') + '" title="' + gettext('Select file') + '"></button>',
+      '<button class="btn btn-primary-icon fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> aria-hidden="true" aria-label="' + gettext('Select file') + '" title="' + gettext('Select file') + '"></button>',
       '</div>',
       '</div>',
       '<% if (helpMessage && helpMessage.length) { %>',
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 4263d42..b275b86 100644
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -65,7 +65,7 @@ let FilterDialog = {
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
diff --git a/web/pgadmin/static/scss/_aci_tree.overrides.scss b/web/pgadmin/static/scss/_aci_tree.overrides.scss
index 88e0d92..44ee7c6 100644
--- a/web/pgadmin/static/scss/_aci_tree.overrides.scss
+++ b/web/pgadmin/static/scss/_aci_tree.overrides.scss
@@ -10,7 +10,7 @@
 
 .aciTree, .aciTree.aciTreeFullRow {
     & .aciTreeButton, & .aciTreePush, & .aciTreeItem, & .aciTreeIcon, & .aciTreeText, & .aciTreeColumn {
-        color: $color-fg;
+        color: $tree-text-fg;
     }
 
     .aciTreeLi {
@@ -53,6 +53,15 @@
             border-radius: none !important;
             color: $tree-fg-selected;
         }
+
+        & .aciTreeText {
+          color: $tree-text-hover-fg;
+        }
+
+        & .aciTreePush {
+          color: $tree-text-hover-fg;
+        }
+
     }
 
     .aciTreeItem {
@@ -77,6 +86,15 @@
             border-radius: none !important;
             color: $tree-fg-hover;
         }
+
+        & .aciTreeText {
+          color: $tree-text-hover-fg;
+        }
+
+        & .aciTreePush {
+          color: $tree-text-hover-fg;
+        }
+
     }
 
     &.aciTreeFocus {
diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss
index 1df0812..dac552b 100644
--- a/web/pgadmin/static/scss/_alert.scss
+++ b/web/pgadmin/static/scss/_alert.scss
@@ -44,7 +44,7 @@
   align-self: center;
   // To make sure IE picks up the correct font
   font-family: $font-family-primary;
-  color: $color-fg;
+  color: $alert-color-fg;
 }
 
 .alert-info {
diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss
index 43747df..498965f 100644
--- a/web/pgadmin/static/scss/_alertify.overrides.scss
+++ b/web/pgadmin/static/scss/_alertify.overrides.scss
@@ -5,10 +5,10 @@
     //margin is calculated with -$alertify-borderremove-margin, adjust the header
     min-height: $title-height + $alertify-borderremove-margin !important;
     max-height: $title-height + $alertify-borderremove-margin !important;
-    background-color: $color-primary;
+    background-color: $alert-header-bg;
     font-size: $font-size-base;
     font-weight: bold;
-    color: $color-primary-fg;
+    color: $alert-header-fg;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -19,12 +19,12 @@
     margin: -24px - $alertify-borderremove-margin; //-24px is default by alertify
     margin-bottom: 0px;
     &:hover {
-      background-color: $color-primary;
+      background-color: $alert-header-bg;
     }
   }
 
   .ajs-body {
-    background-color: $color-bg !important;
+    background-color: $alert-dialog-body-bg !important;
     color: $color-fg !important;
   }
 
@@ -123,7 +123,7 @@
     border: $panel-border;
     border-radius: $panel-border-radius;
     box-shadow: $dialog-box-shadow;
-    background-color: $color-bg !important;
+    background-color: $alert-dialog-body-bg !important;
     color: $color-fg !important;
   }
   .ajs-content {
@@ -146,7 +146,7 @@
   width: 20px;
   height: 20px;
   border: $input-btn-border-width solid $btn-secondary-border !important;
-  background-color: $color-secondary !important;
+  background-color: $alert-action-bg !important;
   font-size: 12px;
   border-radius: $btn-border-radius;
   position: relative;
@@ -157,7 +157,7 @@
 }
 
 .ajs-pin:hover, .ajs-maximize:hover, .ajs-close:hover {
-  background-color: $btn-secondary-hover-bg !important;
+  background-color: $alert-action-hover-bg !important;
 }
 
 .alertify.ajs-modeless.ajs-pinnable .ajs-commands button.ajs-pin {
@@ -280,6 +280,9 @@
   }
 }
 
+.alert-text-body {
+  color: $alert-color-fg;
+}
 
 .ajs-commands, .ajs-close {
   button {
diff --git a/web/pgadmin/static/scss/_backgrid.overrides.scss b/web/pgadmin/static/scss/_backgrid.overrides.scss
index 9bb383d..4fc1f5f 100644
--- a/web/pgadmin/static/scss/_backgrid.overrides.scss
+++ b/web/pgadmin/static/scss/_backgrid.overrides.scss
@@ -169,6 +169,12 @@ table.backgrid {
   font-weight: normal;
 }
 
+.backgrid tr:hover {
+  .label {
+    color: $grid-hover-fg-color;
+  }
+}
+
 .subnode {
   border: $panel-border;
   background: $color-bg;
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 00fe2f1..1314eb5 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -100,17 +100,84 @@ legend {
  * Refer file : bootstrap/scss/mixins/_buttons.scss
  */
 .btn-secondary {
-	@include button-variant($color-secondary, $btn-secondary-border, $btn-secondary-hover-bg);
+	@include button-variant($btn-secondary-bg, $btn-secondary-border, $btn-secondary-hover-bg, $hover-border: $btn-secondary-border-hover-bg);
+	@include hover() {
+	  color: $btn-secondary-hover-fg !important;
+	} &.disabled, &:disabled {
+	  color: $btn-secondary-disabled-fg !important;
+	  border-color: $btn-secondary-disabled-bg !important;
+	}
+	color: $btn-secondary-fg !important;
+
 }
 
-/** Overriding secondary button of bootstrap **/
+/** Overriding ternary button of bootstrap **/
 /* Used Bootstrap 4 Mixin button-variant
  * Refer file : bootstrap/scss/mixins/_buttons.scss
  */
-.btn-ternary {
-	@include button-variant($color-ternary, $btn-ternary-border, $btn-ternary-hover-bg);
+ .btn-ternary {
+    @include button-variant($color-ternary, $color-fg);
+    border-color: $color-ternary;
+ }
+
+.btn-ternary[disabled] {
+  background-color: $btn-ternary-disabled-bg !important;
+  color: $btn-ternary-disabled-fg !important;
+  border-color: btn-ternary-disabled-border-color !important;
+
+  label {
+    background-color: $btn-ternary-disabled-bg !important;
+    color: $btn-ternary-disabled-fg !important;
+    border-color: btn-ternary-disabled-border-color !important;
+  }
+
+}
+
+.btn-primary {
+  @include button-variant($color-primary, $color-primary, $hover-background: $btn-primary-hover-bg, $hover-border: $btn-primary-border-hover-bg);
+  & .disabled,
+  &:disabled {
+    background-color: $btn-primary-disabled-bg;
+    border-color: $btn-primary-disabled-bg;
+  }
+}
+
+.btn-primary-icon {
+  @include button-variant($btn-primary-icon-bg, $btn-primary-icon-border-color);
+  @include hover() {
+	  background-color: $btn-primary-icon-hover-bg;
+	  color: $btn-primary-icon-hover-fg;
+	} &.disabled, &:disabled {
+	  color: $btn-primary-icon-disable-fg !important;
+	  border-color: $btn-primary-icon-border-disable-bg !important;
+	  background-color: $btn-primary-icon-disable-bg;
+	}
+
+	border-color: $btn-primary-icon-border-color;
+}
+
+.btn-success {
+  @include button-variant($color-success, $color-fg);
+  border-color: $color-success;
+  @include hover() {
+    color: $color-success-hover-fg !important;
+    border-color: $color-success !important;
+  }
 }
 
+.btn-success[disabled] {
+    background-color: $color-success-disabled-bg !important;
+    border-color: $color-success-disabled-bg !important;
+    color: $color-success-disabled-fg !important;
+
+    label {
+      background-color: $color-success-disabled-bg !important;
+      border-color: $color-success-disabled-bg !important;
+      color: $color-success-disabled-fg !important;
+    }
+}
+
+
 .form-group fieldset {
 	background-color: $color-gray-lighter;
 	border-color: $color-gray-lighter;
@@ -167,6 +234,9 @@ legend {
 .card-header {
 	padding: $card-header-padding;
 	font-weight: bold;
+	background-color: $card-header-bg;
+	color: $card-header-fg;
+	border-color: $card-header-border-color;
 }
 
 .table {
@@ -228,6 +298,7 @@ legend {
 	& > tbody {
 		& > tr:not(.nohover):not(.empty):hover, tr.selected {
 			background-color: $table-hover-bg-color;
+			color: $grid-hover-fg-color;
 			& > td {
 				border-top: $table-hover-border;
 				border-bottom: $table-hover-border;
@@ -236,6 +307,7 @@ legend {
 
 		& > tr.nohover {
 			background-color: transparent;
+			color: $input-color;
 		}
 	}
 }
@@ -330,6 +402,10 @@ td.switch-cell > div.toggle {
   &:focus:checked ~ .custom-control-label::before {
     border-color: $custom-control-indicator-focus-border-color;
   }
+
+  &:hover {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
 }
 
 @media (max-width: 992px) {
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index b2d3900..90a8c4c 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -168,7 +168,7 @@
 }
 
 .CodeMirror .CodeMirror-selected {
-  background: $color-primary-light !important;
+  background: $sql-editor-selection-bg !important;
 }
 
 .CodeMirror-activeline-background {
@@ -200,3 +200,7 @@
         }
     }
 }
+
+.bg-gray-lighter {
+  background-color: $sql-editor-disable-bg !important;
+}
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 53e0916..0a2b1b6 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -368,7 +368,7 @@
   display: block;
   text-align: left;
   cursor: pointer;
-  background-color: $header-bg;
+  background-color: $badge-header-bg;
   padding: 7px;
   font-size: inherit;
   border-bottom: $panel-border;
@@ -866,7 +866,7 @@ body {
 }
 
 .editor-toolbar {
-  background: $sql-gutters-bg;
+  background: $editor-toolbar-bg;
   padding: 0.05rem 0.25rem;
 }
 
diff --git a/web/pgadmin/static/scss/_select2.overrides.scss b/web/pgadmin/static/scss/_select2.overrides.scss
index 31cf90c..c17225b 100644
--- a/web/pgadmin/static/scss/_select2.overrides.scss
+++ b/web/pgadmin/static/scss/_select2.overrides.scss
@@ -4,13 +4,13 @@
 }
 
 .select2-container--default .select2-results__option[aria-selected=true] {
-  background-color: $tree-bg-selected;
-  color: $tree-fg-selected;
+  background-color: $select2-container-bg-selected;
+  color: $select2-container-fg-selected;
 }
 
 .select2-container--default .select2-results__option--highlighted {
-  background-color: $tree-bg-hover !important;
-  color: $tree-fg-hover !important;
+  background-color: $select2-container-hover-bg !important;
+  color: $select2-container-hover-fg !important;
 }
 
 .select2-container--default .select2-selection--multiple {
@@ -27,7 +27,7 @@
   line-height: 2;
 
   & .select2-selection__choice__remove {
-    color: $dropdown-link-hover-bg;
+    color: $dropdown-link-remove-color;
     margin-right: 0.25rem;
   }
 }
diff --git a/web/pgadmin/static/scss/_webcabin.pgadmin.scss b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
index 5cf5c05..291135e 100644
--- a/web/pgadmin/static/scss/_webcabin.pgadmin.scss
+++ b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
@@ -38,7 +38,7 @@
 
 /* darken % taken from bootstrap - button_variant */
 .wcFrameButton:hover, .wcFrameButtonHover,  .wcFrameButton:focus {
-  background-color: $btn-secondary-hover-bg;
+  background-color: $btn-frame-close-bg;
 }
 
 .wcFrameButton.disabled {
@@ -74,7 +74,7 @@
 }
 
 .wcPanelTab, .wcFrameTitle{
-  color: $color-fg;
+  color: $panel-color-fg;
   padding: $tabs-padding;
   margin: 0px;
 }
diff --git a/web/pgadmin/static/scss/resources/_default.style.scss b/web/pgadmin/static/scss/resources/_default.style.scss
index 4603071..186f200 100644
--- a/web/pgadmin/static/scss/resources/_default.style.scss
+++ b/web/pgadmin/static/scss/resources/_default.style.scss
@@ -113,15 +113,15 @@
 }
 
 .text-danger {
-  color: $color-danger;
+  color: $color-danger-fg;
 }
 
 .text-primary {
-  color: $color-primary;
+  color: $color-primary-fg;
 }
 
 .text-success {
-  color: $color-success;
+  color: $color-success-fg;
 }
 
 .text-bold {
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 670e6ec..a854cc3 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -18,6 +18,7 @@ $color-ternary: #5b6d7c !default;
 $color-ternary-fg: $white !default;
 
 $color-danger: #e53935 !default;
+$color-danger-icon-fg: $color-danger !default;
 $color-danger-fg: $white !default;
 $color-danger-light: #F39999 !default;
 $color-danger-lighter: #FAECEC !default;
@@ -26,6 +27,10 @@ $color-success: #26852B !default;
 $color-success-fg: $black !default;
 $color-success-light: #D9ECDA !default;
 
+$color-success-disabled-fg: $color-bg !default;
+$color-success-disabled-bg: $color-success !default;
+$color-success-hover-fg: $white !default;
+
 $color-warning: #eea236 !default;
 $color-warning-fg: $black !default;
 $color-warning-light: #fce5c5 !default;
@@ -61,6 +66,7 @@ $border-radius: 0.25rem;
 
 $text-muted: #667185 !default;
 $header-bg: $color-bg !default;
+$badge-header-bg: $header-bg !default;
 
 $tree-font-size: 0.815rem;
 
@@ -71,14 +77,14 @@ $alert-danger-color: $color-danger !default;
 $alert-success-bg: $color-success-light !default;
 $alert-success-color: $color-success !default;
 
-$navbar-bg: $color-primary;
+$navbar-bg: $color-primary !default;
 $navbar-font-size: 0.925rem;
 $navbar-height: 32px;
 $navbar-dropdown-top: 100%;
-$navbar-dark-color: $color-primary-fg;
+$navbar-dark-color: $color-primary-fg !default;
 $navbar-dark-hover-color: $color-primary-fg;
-$navbar-dark-active-color: $color-primary-fg;
-$navbar-dark-disabled-color: $color-gray;
+$navbar-dark-active-color: $color-primary-fg !default;
+$navbar-dark-disabled-color: $color-gray !default;
 
 $navbar-toggler-padding-y: 0.25rem; //no-change
 
@@ -92,6 +98,7 @@ $dropdown-color: $color-fg;
 $dropdown-link-color: $color-fg;
 $dropdown-link-hover-color: $color-primary-fg;
 $dropdown-link-hover-bg: $color-primary;
+$dropdown-link-remove-color: $color-primary !default;
 $dropdown-border-color: $border-color;
 $dropdown-box-shadow: 0 0.125rem 0.5rem rgba($shadow-base-color, .275);
 $dropdown-divider-bg: $dropdown-border-color;
@@ -113,9 +120,9 @@ $btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, bord
 $card-spacer-y: 0rem;
 $card-spacer-x: 0rem;
 $card-border-radius: $border-radius;
-$card-border-color: $border-color;
-$card-cap-bg: $header-bg;
-$card-bg: $color-bg;
+$card-border-color: $border-color !default;
+$card-cap-bg: $header-bg !default;
+$card-bg: $color-bg !default;
 
 $navbar-padding-y: 0rem;
 $navbar-padding-x: 0rem;
@@ -135,9 +142,9 @@ $nav-tabs-link-active-border-color: none;
 
 $table-cell-padding: 0.25rem;
 $table-header-cell-padding: 0.75rem;
-$table-hover-bg: none; //we will use our own classes
+$table-hover-bg: none !default; //we will use our own classes
 $table-hover-color: #000 !default;
-$table-active-bg: $color-primary-light;
+$table-active-bg: $color-primary-light !default;
 $table-border-width: $border-width;
 $table-border-color: $border-color;
 $table-head-bg: $color-primary;
@@ -162,9 +169,10 @@ $btn-danger-color: $color-danger-fg;
 $component-active-bg: $color-primary;
 $input-btn-focus-width: .2rem;
 $input-btn-focus-color: rgba($component-active-bg, .25);
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+$input-btn-focus-shadow-color: $input-btn-focus-color !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-shadow-color;
 $input-focus-bg: $input-bg;
-$input-focus-border-color: lighten($component-active-bg, 25%);
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
 $input-focus-color: $input-color;
 $input-focus-width: $input-btn-focus-width;
 $input-focus-box-shadow: $input-btn-focus-box-shadow;
@@ -186,12 +194,13 @@ $color-editor-foldmarker: #0000FF !default;
 $color-editor-activeline: #50B0F0 !default;
 
 $active-color: $color-primary !default;
-$active-border: 3px solid $active-color;
+$active-border: 3px solid $active-color !default;
 $panel-border-width: $border-width;
-$panel-border-color: $border-color;
+$panel-border-color: $border-color !default;
 $panel-border-radius: $border-radius;
 $panel-border: $panel-border-width solid $panel-border-color !important;
 $panel-border-dark: $panel-border-width solid $border-color-dark !important;
+$panel-color-fg: $color-fg !default;
 $tabs-padding: 5px 10px 2px;
 $title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
 $footer-padding: 0.5rem;
@@ -207,13 +216,16 @@ $table-bg: $color-bg !default;
 $table-bg-selected: $color-primary-light;
 $table-hover-border-color: $color-primary;
 $table-hover-border: $panel-border-width solid $color-primary !important;
-$table-hover-bg-color: $color-primary-light;
-$datagrid-bg: $color-gray-light;
+$table-hover-bg-color: $color-primary-light !default;
+$datagrid-bg: $color-gray-light !default;
+$datagrid-selected-color : $color-primary-fg !default;
 
-$tree-fg-hover: $color-fg;
-$tree-bg-hover: $color-gray-light;
-$tree-fg-selected: $color-fg;
-$tree-bg-selected: $color-primary-light;
+$tree-text-fg: $color-fg !default;
+$tree-text-hover-fg: $color-fg !default;
+$tree-fg-hover: $color-fg !default;
+$tree-bg-hover: $color-gray-light !default;
+$tree-fg-selected: $color-fg !default;
+$tree-bg-selected: $color-primary-light !default;
 
 $sql-grid-data-cell-fg: $input-color;
 $sql-grid-data-cell-bg: $input-bg;
@@ -221,19 +233,21 @@ $sql-grid-title-cell-fg: $input-color;
 $sql-grid-title-cell-bg: $input-bg;
 
 $sql-title-padding: 3px;
-$sql-title-bg: $color-ternary;
-$sql-title-fg: $color-ternary-fg;
+$sql-title-bg: $color-ternary !default;
+$sql-title-fg: $color-ternary-fg !default;
 // Toolbar + editor title heights + title bottom border
 $sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width - 0.5px;
-$sql-gutters-bg: $datagrid-bg;
-$sql-history-detail-bg: $color-gray-lighter;
+$sql-editor-disable-bg: $color-gray-lighter !default;
+$sql-editor-selection-bg: $color-primary-light !default;
+$sql-gutters-bg: $datagrid-bg !default;
+$sql-history-detail-bg: $color-gray-lighter !default;
 $sql-history-success-bg: $color-primary-light;
-$sql-history-success-fg: $active-color;
+$sql-history-success-fg: $active-color !default;
 $sql-history-error-bg: $color-danger-lighter;
 $sql-history-error-fg: $color-danger;
 $sql-hint-bg: $color-bg;
 $sql-hint-active-bg: $color-primary;
-$sql-hint-active-fg: $white;
+$sql-hint-active-fg: $white !default;
 $sql-bracket-match-fg: #5b6d7c;
 $sql-bracket-match-bg: #f5d2af;
 
@@ -243,19 +257,45 @@ $explain-sev-3-bg: #EE8800 !default;
 $explain-sev-4-bg: #880000 !default;
 $explain-sev-3-color: #FFFFFF !default;
 $explain-sev-4-color: #FFFFFF !default;
+$explain-sev-2-color: $black !default;
 
 $dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;
 
 $alert-icon-color: $white;
+$alert-header-bg: $color-primary !default;
+$alert-header-fg: $white !default;
+$alert-action-bg: $color-secondary !default;
+$alert-action-hover-bg: $color-gray-light !default;
 $alertify-borderremove-margin: $panel-border-width;
+$alert-color-fg: $color-fg !default;
+$alert-dialog-body-bg: $color-bg !default;
+
+$btn-primary-hover-bg: darken($color-primary, 7.5%) !default;
+$btn-primary-border-hover-bg: darken($color-primary, 7.5%) !default;
+$btn-primary-disabled-bg: $color-primary !default;
+
+$btn-secondary-bg: $color-secondary !default;
+$btn-secondary-border-hover-bg: $color-gray !default;
+$btn-secondary-fg: $color-fg !default;
+$btn-secondary-hover-fg: $color-fg !default;
+$btn-secondary-border: $color-gray !default;
+$btn-secondary-hover-bg: $color-gray-light !default;
+$btn-secondary-disabled-bg: $color-gray !default;
+$btn-secondary-disabled-fg: $color-fg !default;
 
-$btn-secondary-border: $color-gray;
-$btn-secondary-hover-bg: $color-gray-light;
+$btn-frame-close-bg:$btn-secondary-hover-bg !default;
 
 $btn-ternary-border: $color-ternary !default;
 $btn-ternary-hover-bg: darken($color-ternary, 7.5%) !default;
 
+$btn-ternary-disabled-bg: $color-ternary !default;
+$btn-ternary-disabled-fg: $color-bg !default;
+$btn-ternary-disabled-border-color: $btn-ternary-disabled-bg !default;
+
 $card-header-padding : 0.25rem 0.5rem;
+$card-header-bg: $color-bg !default;
+$card-header-fg: $color-fg !default;
+$card-header-border-color: $border-color !default;
 $no-border-radius: 0px !important;
 
 $btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
@@ -278,8 +318,30 @@ $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='ut
 $schemadiff-diff-row-color: #fff9c4 !default;
 $schemadiff-source-row-color: #ffebee !default;
 $schemadiff-target-row-color: #fbe3bf !default;
+$schema-diff-color-fg: $input-color !default;
 
 /* Custom controls bootstrap changes */
-$custom-forms-transition: none;
-$custom-control-indicator-focus-border-color: $input-focus-border-color;
-$custom-control-indicator-border-color: $input-border-color;
+$custom-forms-transition: none !default;
+$custom-control-indicator-focus-border-color: $input-focus-border-color !default;
+$custom-control-indicator-border-color: $input-border-color !default;
+
+$select2-container-hover-bg: $tree-bg-hover !default;
+$select2-container-hover-fg: $tree-fg-hover !default;
+$select2-container-bg-selected: $tree-bg-selected !default;
+$select2-container-fg-selected: $tree-fg-selected !default;
+
+$btn-primary-icon-bg: $color-bg !default;
+$btn-primary-icon-fg: $color-fg !default;
+$btn-primary-icon-hover-fg: $color-fg !default;
+$btn-primary-icon-hover-bg: $color-gray-light !default;
+$btn-primary-icon-border-color: $color-gray !default;
+$btn-primary-icon-border-disable-bg: $color-gray !default;
+$btn-primary-icon-disable-fg: $color-fg !default;
+$btn-primary-icon-disable-bg: $color-bg !default;
+
+$editor-toolbar-bg: $sql-gutters-bg !default;
+$grid-hover-bg-color: $table-hover-bg-color !default;
+$grid-hover-fg-color: $color-fg !default;
+
+$btn-copied-color-fg: $active-color !default;
+
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index 8a9fb7a..ad85c84 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -20,6 +20,9 @@ $color-success: #26852B;
 $color-success-fg: $black;
 $color-success-light: #2B472C;
 
+$color-success-disabled-fg: $color-fg;
+$color-success-disabled-bg: $color-success;
+
 $color-warning: #eea236;
 $color-warning-fg: $black;
 $color-warning-light: #b18d5a;
@@ -56,6 +59,7 @@ $alert-danger-bg: $color-bg;
 $alert-danger-color: $color-danger;
 $alert-success-bg: $color-bg;
 $alert-success-color: $color-success;
+$alert-header-fg: $color-fg;
 
 $table-bg: $color-gray-lighter;
 
@@ -77,6 +81,7 @@ $explain-sev-3-bg: #c2812b;
 $explain-sev-4-bg: #880000;
 $explain-sev-3-color: $color-fg;
 $explain-sev-4-color: $color-fg;
+$explain-sev-2-color: $black;
 
 $negative-bg: $color-bg;
 
@@ -88,3 +93,24 @@ $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='ut
 $schemadiff-diff-row-color: #807a48 !default;
 $schemadiff-source-row-color: #402025 !default;
 $schemadiff-target-row-color: #6b5438 !default;
+
+$btn-secondary-fg: $white;
+$btn-secondary-border-hover-bg: $color-gray-light;
+$btn-secondary-hover-fg: $white;
+
+$card-header-bg: $color-gray-lighter;
+$card-header-fg: $color-fg;
+$card-header-border-color: $border-color;
+
+
+$btn-primary-icon-bg: $color-secondary;
+$btn-primary-icon-fg: $white;
+$btn-primary-icon-hover-fg: $white;
+$btn-primary-icon-hover-bg: $color-gray-light;
+$btn-primary-icon-border-color: $color-gray;
+$btn-primary-icon-border-disable-bg: $color-gray;
+$btn-primary-icon-disable-fg: $white;
+$btn-primary-icon-disable-bg: $color-secondary;
+
+$btn-ternary-disabled-fg: $color-fg;
+$color-success-hover-fg: $color-fg;
diff --git a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
new file mode 100644
index 0000000..18edcc9
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
@@ -0,0 +1,201 @@
+$white: #FFFFFF;
+$color-bg: #010B15;
+$color-fg: $white;
+
+$color-primary: #84D6FF;
+$color-primary-fg: $color-bg;
+$color-primary-light: #84D6FF;
+$color-primary-light-fg: $color-bg;
+$color-secondary: #6B6B6B;
+
+$color-ternary: #c9d0d7;
+$color-ternary-fg: $color-bg;
+
+$color-danger: #EE7A55;
+$color-danger-icon-fg: $color-bg;
+$color-danger-fg: $color-bg;
+$color-danger-light: #EE7A55;
+$color-danger-lighter: #EE7A55;
+
+$color-success: #45D48A;
+$color-success-fg: $color-bg;
+$color-success-light: #45D48A;
+
+$color-success-disabled-fg: $color-fg;
+$color-success-disabled-bg: $color-bg;
+$color-success-hover-fg: #010B15;
+
+$color-warning: #F4D35E;
+$color-warning-fg: $color-bg;
+$color-warning-light: #F4D35E;
+
+
+$color-gray-dark: #010B15;
+$color-gray: #1F2932;
+$color-gray-light: #2D3A48;
+$color-gray-lighter: #8B9CAD;
+
+$sql-gutters-bg: $color-gray-light;
+$sql-title-bg: #1F2932;
+$sql-title-fg: $color-fg;
+$sql-editor-disable-bg: $color-gray;
+$sql-editor-selection-bg: $color-gray;
+$sql-history-detail-bg: $color-gray;
+$sql-history-success-fg: #010B15;
+
+$color-brand: $color-primary;
+
+$border-color: #A6B7C8;
+
+// $shadow-base-color: #C9D0D7;
+$shadow-base-color: transparent;
+
+$text-muted: #8b9cad;
+
+$header-bg: $color-bg;
+$card-cap-bg: $color-bg;
+$badge-header-bg: $color-bg;
+
+$alert-primary-bg: $color-primary;
+$alert-primary-color: $color-bg;
+$alert-danger-bg: $color-danger;
+$alert-danger-color: $color-bg !important;
+$alert-success-bg̰: $color-success;
+$alert-success-color: $color-bg;
+
+$alert-color-fg: $color-bg;
+
+$negative-bg: $color-bg;
+
+$popover-bg: $color-gray-dark;
+$popover-body-color: $color-fg;
+
+$table-hover-color: $color-bg;
+$table-hover-bg: $color-fg !important;
+$table-hover-bg-color: $color-primary-light;
+
+$input-bg: $color-bg;
+$input-color: $color-fg;
+$input-border-color: $border-color;
+$input-disabled-bg: $color-gray;
+$input-focus-border-color: $color-primary;
+$input-btn-focus-shadow-color: none;
+
+$color-editor-fg: $white;
+$color-editor-keyword: #F8845F;
+$color-editor-number: #45D48A;
+$color-editor-string: #EAEA43;
+$color-editor-variable: #7DC9F1;
+$color-editor-variable-2: #7DC9F1;
+$color-editor-builtin: #B394FC;
+$color-editor-comment: #FFAD65;
+$color-editor-bracket: #D6AAAA;
+$color-editor-operator: $color-fg;
+$color-editor-foldmarker: #FFFFFF;
+$color-editor-activeline: #50B0F0;
+
+$active-color: $color-fg;
+$active-border: 3px solid $color-primary;
+
+$table-bg: $color-bg;
+
+$explain-sev-2-bg: #EAEA43;
+$explain-sev-3-bg: #FFAD65;
+$explain-sev-4-bg: #EE7A55;
+$explain-sev-3-color: #010B15;
+$explain-sev-4-color: #010B15;
+$explain-sev-2-color: #010B15;
+
+$btn-ternary-border: $color-ternary;
+$btn-ternary-hover-bg: #a6b7c8;
+$btn-ternary-disabled-bg: $color-bg;
+$btn-ternary-disabled-fg: $color-fg;
+$btn-ternary-disabled-border-color: $btn-ternary-disabled-fg;
+
+$scrollbar-base-color: #C9D0D7;
+
+$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
+$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+
+$schemadiff-diff-row-color: #CFC56E;
+$schemadiff-source-row-color: #EE97A5;
+$schemadiff-target-row-color: #FFAD65;
+$schema-diff-color-fg: #010B15;
+
+$tree-text-fg: $color-fg;
+$tree-text-hover-fg: $color-bg;
+$tree-fg-hover: $color-bg;
+$tree-bg-hover: $color-fg;
+$tree-fg-selected: $color-fg;
+$tree-bg-selected: $color-primary-light;
+
+$select2-container-hover-bg: $color-primary;
+$select2-container-hover-fg: $color-bg;
+$select2-container-bg-selected: $color-fg;
+$select2-container-fg-selected: $color-bg;
+
+$sql-hint-active-fg: $color-bg;
+
+$btn-primary-hover-bg: $color-fg;
+$btn-primary-border-hover-bg: $color-fg;
+$btn-primary-disabled-bg: $color-gray-lighter;
+
+$btn-secondary-hover-bg: transparent;
+$btn-secondary-border-hover-bg: $color-fg;
+$btn-secondary-bg: transparent;
+$btn-secondary-fg: $color-primary;
+$btn-secondary-hover-fg: $color-fg;
+$btn-secondary-border: $color-primary;
+$btn-secondary-disabled-bg: $color-gray-lighter;
+$btn-secondary-disabled-fg: $color-gray-lighter;
+
+$btn-frame-close-bg: $color-gray-light;
+// $dialog-box-shadow: 0rem 0rem transparent !important;
+
+$navbar-bg: #062F57;
+$navbar-dark-color: $color-fg;
+$navbar-dark-active-color: $color-fg;
+// $navbar-dark-disabled-color: $color-gray !important;
+
+$alert-header-bg: #062F57 !important;
+$alert-header-fg: $color-fg;
+$alert-action-bg: $alert-header-fg;
+$alert-action-hover-bg: $color-fg;
+$alert-dialog-body-bg: $color-gray;
+
+$datagrid-bg: $color-bg;
+$datagrid-selected-color : $color-primary-fg;
+
+$card-header-bg: #062F57 !important;
+$card-header-fg: $color-fg !important;
+$card-header-border-color: $card-header-bg;
+$card-border-color: transparent;
+$card-bg: $color-gray;
+
+
+$custom-forms-transition: none;
+$custom-control-indicator-focus-border-color: #FFFFFF !important;
+$custom-control-indicator-border-color: $color-gray-lighter;
+
+$panel-color-fg: $color-ternary;
+$panel-border-color: $color-gray;
+
+$btn-primary-icon-bg: $color-bg;
+$btn-primary-icon-border-color: $color-fg;
+$btn-primary-icon-border-disable-bg: $color-gray-lighter;
+$btn-primary-icon-fg: $color-fg;
+$btn-primary-icon-hover-bg: $color-fg;
+$btn-primary-icon-hover-fg: $color-bg;
+$btn-primary-icon-disable-fg: $color-gray-lighter;
+$btn-primary-icon-disable-bg: $color-gray;
+
+$dropdown-link-remove-color: $color-bg;
+
+$editor-toolbar-bg: $color-bg;
+
+$grid-hover-bg-color: $white;
+$grid-hover-fg-color: #010B15;
+
+$btn-copied-color-fg: #010B15;
+
+
diff --git a/web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png b/web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png
new file mode 100644
index 0000000000000000000000000000000000000000..76347b40d694ea44459500738f0e5d44863b4ab9
GIT binary patch
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 a45af72..c3610cf 100644
--- a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
+++ b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
@@ -38,7 +38,7 @@ export class BackupDialogWrapper extends DialogWrapper {
     return {
       buttons: [{
         text: '',
-        className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -49,7 +49,7 @@ export class BackupDialogWrapper extends DialogWrapper {
       }, {
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',
diff --git a/web/pgadmin/tools/datagrid/static/js/show_data.js b/web/pgadmin/tools/datagrid/static/js/show_data.js
index 04a2b46..8a5071d 100644
--- a/web/pgadmin/tools/datagrid/static/js/show_data.js
+++ b/web/pgadmin/tools/datagrid/static/js/show_data.js
@@ -125,7 +125,7 @@ function initFilterDialog(alertify, pgBrowser) {
             buttons:[{
               text: '',
               key: 112,
-              className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+              className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
               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 21c3852..88b3c55 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -15,19 +15,19 @@
     <div class="sql-editor">
         <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-load-file" type="button" class="btn btn-sm btn-secondary btn-load-file"
+                <button id="btn-load-file" type="button" class="btn btn-sm btn-primary-icon btn-load-file"
                         title=""
                         accesskey=""
                         tabindex="0">
                     <i class="fa fa-folder-open-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-save-file" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-save-file" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         disabled>
                     <i class="fa fa-floppy-o sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                 </button>
-                <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
                         tabindex="0">
                 </button>
@@ -45,7 +45,7 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-save-data" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-save-data" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -53,10 +53,10 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-find" type="button" class="btn btn-sm btn-secondary" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
+                <button id="btn-find" type="button" class="btn btn-sm btn-primary-icon" aria-label="{{ _('Find') }}" title="{{ _('Find (Ctrl/Cmd+F)') }}">
                     <i class="fa fa-search sql-icon-lg" aria-hidden="true" tabindex="0" role="img"></i>
                 </button>
-                <button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-find-menu-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -115,13 +115,13 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-copy-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-copy-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-files-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         tabindex="0">
                 </button>
@@ -133,7 +133,7 @@
                         </a>
                     </li>
                 </ul>
-                <button id="btn-paste-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-paste-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -141,7 +141,7 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-delete-row" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-delete-row" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
@@ -149,7 +149,7 @@
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
+                <button id="btn-edit-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         aria-label="{{ _('Edit') }}" title="{{ _('Edit') }}" tabindex="0">
                     <i class="fa fa-pencil-square-o sql-icon-lg" aria-hidden="true" role="img"></i>
@@ -232,18 +232,18 @@
             </div>
 
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-cancel-query" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-cancel-query" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled >
                     <i class="fa fa-stop sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-secondary" style="width: 32px;"
+                <button id="btn-flash" data-test-selector="execute-refresh-button" type="button" class="btn btn-sm btn-primary-icon" style="width: 32px;"
                         title=""
                         tabindex="0" data-click-counter="0" disabled>
                     <i class="fa fa-play sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-query-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-query-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         accesskey=""
                         title=""
@@ -265,18 +265,18 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-explain" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-explain" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="fa fa-hand-pointer-o sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-explain-analyze" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-explain-analyze" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey="" disabled>
                     <i class="fa fa-list-alt sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         tabindex="0">
                 </button>
@@ -320,20 +320,20 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-commit" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-commit" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
                     <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
-                <button id="btn-rollback" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-rollback" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         tabindex="0" disabled>
                     <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true" role="img"></i>
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-clear-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle"
+                <button id="btn-clear-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
@@ -354,7 +354,7 @@
                 </ul>
             </div>
             <div class="btn-group" role="group" aria-label="">
-                <button id="btn-download" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-download" type="button" class="btn btn-sm btn-primary-icon"
                         title=""
                         tabindex="0">
                     <i class="fa fa-download sql-icon-lg" aria-hidden="true" role="img"></i>
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index 3aee4f1..473a9e1 100644
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -270,7 +270,7 @@ define([
               return {
                 buttons: [{
                   text: '',
-                  className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
                   attrs: {
                     name: 'object_help',
                     type: 'button',
@@ -281,7 +281,7 @@ define([
                 }, {
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
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 be5bbb4..5bc5068 100644
--- a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
+++ b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
@@ -32,7 +32,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
     return {
       buttons: [{
         text: '',
-        className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-info pg-alertify-icon-button',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -43,7 +43,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
       }, {
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',
diff --git a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
index a8b1006..10e7515 100644
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
@@ -318,16 +318,16 @@ let SchemaDiffHeaderView = Backform.Form.extend({
       <div class="col-5 target-buttons">
           <div class="action-btns d-flex">
               <button class="btn btn-primary mr-auto"><i class="icon-schema-diff-white"></i>&nbsp;` + gettext('Compare') + `</button>
-              <button id="generate-script" class="btn btn-secondary mr-1" disabled><i class="fa fa-file-code-o sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
+              <button id="generate-script" class="btn btn-primary-icon mr-1" disabled><i class="fa fa-file-code-o sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
               <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-filter" type="button" class="btn btn-secondary"
+                <button id="btn-filter" type="button" class="btn btn-primary-icon"
                         title=""
                         accesskey=""
                         tabindex="0"
                         style="pointer-events: none;">
                     <i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i>&nbsp;` + gettext('Filter') + `
                 </button>
-                <button id="btn-filter-dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-filter-dropdown" type="button" class="btn btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""
diff --git a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
index 6778f26..2675591 100644
--- a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
+++ b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
@@ -24,7 +24,7 @@
   font-size: $tree-font-size;
   .ui-widget-content {
     background-color: $input-bg;
-    color: $input-color;
+    color: $schema-diff-color-fg;
   }
 
   .ui-state-default {
@@ -114,3 +114,15 @@
   font-size: 0.7rem;
   margin-left: 0rem;
 }
+
+.slick-group {
+  color: $input-color !important;
+}
+
+.slick-group:hover {
+  color: $schema-diff-color-fg !important;
+}
+
+.slick-group.active {
+  color: $schema-diff-color-fg !important;
+}
diff --git a/web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js b/web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js
index 8f052a8..5cfd4df 100644
--- a/web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js
+++ b/web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js
@@ -510,7 +510,7 @@ export default class SearchObjectsDialogWrapper extends DialogWrapper {
       buttons: [{
         text: '',
         key: 112,
-        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+        className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_history.scss b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
index b292263..fe9ef8e 100644
--- a/web/pgadmin/tools/sqleditor/static/scss/_history.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
@@ -179,7 +179,7 @@
     .was-copied {
       background-color: $color-primary-light;
       border-color: $color-primary-light;
-      color: $active-color;
+      color: $btn-copied-color-fg;
     }
 
     .CodeMirror-scroll {
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
index 94dac6a..6556508 100644
--- a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
@@ -149,7 +149,7 @@ li.CodeMirror-hint-active {
 
 #datagrid .slick-header .slick-header-column.selected {
   background-color: $color-primary;
-  color: $color-primary-fg;
+  color: $datagrid-selected-color;
 }
 .slick-row .slick-cell {
   border-bottom: $panel-border;
@@ -211,6 +211,7 @@ li.CodeMirror-hint-active {
 /* Override selected row color */
 #datagrid .slick-row .slick-cell.selected {
     background-color: $table-bg-selected;
+    color: $datagrid-selected-color;
 }
 
 /* color the first column */
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 1de5abb..c93de53 100644
--- a/web/pgadmin/tools/user_management/static/js/user_management.js
+++ b/web/pgadmin/tools/user_management/static/js/user_management.js
@@ -106,7 +106,7 @@ define([
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
@@ -686,7 +686,7 @@ define([
                 buttons: [{
                   text: '',
                   key: 112,
-                  className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
+                  className: 'btn btn-primary-icon pull-left fa fa-question pg-alertify-icon-button',
                   attrs: {
                     name: 'dialog_help',
                     type: 'button',
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 3237e5e..bca99a9 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -167,9 +167,16 @@ fs.readdirSync(all_themes_dir).map(function(curr_dir) {
   if(stats.isDirectory()) {
     /* Theme directory found */
     let cssfile = 'pgadmin.theme.'+curr_dir;
+
+    let disp_name = curr_dir;
+
+    if(curr_dir == 'high_contrast') {
+      disp_name = curr_dir + ' (Beta)';
+    }
+
     pgadminThemes[curr_dir] = {
       /* For now lets keep it as beta release */
-      disp_name: curr_dir,
+      disp_name: disp_name,
       cssfile: cssfile,
       preview_img: curr_dir + '_preview.png',
     };
