diff --git a/.gitignore b/.gitignore
index 1cc2ea4e8..c1e62bc38 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ runtime/pgAdmin4_resource.rc
 runtime/release/
 runtime/ui_BrowserWindow.h
 web/config_local.py
+web/pgadmin.themes.json
 web/geckodriver.log
 web/regression/test_config.json
 node_modules/
diff --git a/README b/README
index e1045703d..f095c139c 100644
--- a/README
+++ b/README
@@ -219,6 +219,19 @@ can be used:
     C:\$PGADMIN4_SRC\web> yarn install
     C:\$PGADMIN4_SRC\web> yarn run bundle
 
+Creating pgAdmin themes
+-----------------------
+
+To create a pgAdmin theme, you need to create a directory under web/pgadmin/static/scss/resources.
+Copy the sample file _theme.variables.scss.sample to the new directory and rename it to _theme.variables.scss.
+Change the desired hexadecimal values of the colors and bundle pgAdmin. You can also add a preview image in the 
+theme directory with the name as <dir name>_preview.png. It is recommended that the preview image should not be
+larger in size as it may take time to load on slow networks. Run the yarn run bundle and you're good to go.
+No other changes are required, pgAdmin bundle will read the directory and create other required entries to make them
+available in preferences.
+The name of the theme is derived from the directory name. Underscores (_) and hyphens (-) will be replaced with 
+spaces and the result will be camel cased.
+
 Configuring the Runtime
 -----------------------
 
diff --git a/docs/en_US/images/preferences_misc_themes.png b/docs/en_US/images/preferences_misc_themes.png
new file mode 100644
index 0000000000000000000000000000000000000000..460998d45e48278e582a77034d13583e9f83ff08
GIT binary patch
diff --git a/docs/en_US/images/preferences_misc_user_language.png b/docs/en_US/images/preferences_misc_user_language.png
old mode 100755
new mode 100644
index 14a9b5670b9cb00fc8c746f4a60f00aaeb1ef583..3382a59d7de137b8f292a26db27786bf6eb415e4
GIT binary patch
diff --git a/docs/en_US/preferences.rst b/docs/en_US/preferences.rst
index 5a85fe0d2..08c9512f1 100644
--- a/docs/en_US/preferences.rst
+++ b/docs/en_US/preferences.rst
@@ -178,6 +178,14 @@ Expand the *Miscellaneous* node to specify miscellaneous display preferences.
 * Use the *User language* drop-down listbox to select the display language for
   the client.
 
+.. image:: images/preferences_misc_themes.png
+    :alt: Preferences dialog themes section
+    :align: center
+
+* 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.
+
 The Paths Node
 **************
 
diff --git a/web/config.py b/web/config.py
index c67f240b2..f992cc487 100644
--- a/web/config.py
+++ b/web/config.py
@@ -14,6 +14,7 @@
 import logging
 import os
 import sys
+import json
 
 if sys.version_info[0] >= 3:
     import builtins
@@ -486,6 +487,26 @@ try:
 except ImportError:
     pass
 
+THEMES = {
+    "standard": {
+        "disp_name": "Standard",
+        "cssfile": "pgadmin",
+        "preview_img": "standard_preview.png"
+    }
+}
+
+OTHER_THEMES = {}
+try:
+    extra_themes = json.load(open('pgadmin.themes.json'))
+    OTHER_THEMES.update(extra_themes)
+except Exception:
+    pass
+
+# Set OTHER_THEMES to None here to disable all other themes
+
+if OTHER_THEMES is not None:
+    THEMES.update(OTHER_THEMES)
+
 # SUPPORT_SSH_TUNNEL can be override in local config file and if that
 # setting is False in local config then we should not check the Python version.
 if (SUPPORT_SSH_TUNNEL is True and
diff --git a/web/package.json b/web/package.json
index 52352348f..4e82aa7f7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,14 +9,17 @@
   "devDependencies": {
     "@babel/core": "~7.6.0",
     "@babel/preset-env": "~7.6.0",
+    "autoprefixer": "^9.6.4",
     "axios-mock-adapter": "^1.17.0",
     "babel-loader": "~8.0.5",
     "babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3",
+    "copy-webpack-plugin": "^5.0.4",
     "core-js": "^3.2.1",
     "cross-env": "^5.2.0",
     "eclint": "^2.8.1",
     "eslint": "5.15.1",
     "file-loader": "^3.0.1",
+    "iconfont-webpack-plugin": "^4.2.1",
     "image-webpack-loader": "^4.6.0",
     "is-docker": "^1.1.0",
     "jasmine-core": "~3.3.0",
@@ -34,6 +37,7 @@
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "popper.js": "^1.14.7",
+    "postcss-loader": "^3.0.0",
     "raw-loader": "^1.0.0",
     "sass-loader": "^7.1.0",
     "sass-resources-loader": "^2.0.0",
diff --git a/web/pgadmin/__init__.py b/web/pgadmin/__init__.py
index de365eadd..41ca051f1 100644
--- a/web/pgadmin/__init__.py
+++ b/web/pgadmin/__init__.py
@@ -713,10 +713,26 @@ def create_app(app_name=None):
 
     @app.context_processor
     def inject_blueprint():
-        """Inject a reference to the current blueprint, if any."""
+        """
+        Inject a reference to the current blueprint, if any.
+        Also the get_theme_css func.
+        """
+
+        def get_theme_css():
+            misc_preference = Preferences.module('misc')
+            theme = misc_preference.preference('theme').get()
+            theme_css = config.THEMES['standard']['cssfile'] + '.css'
+
+            if theme not in config.THEMES:
+                pass
+            else:
+                theme_css = config.THEMES[theme]['cssfile'] + '.css'
+            return theme_css
+
         return {
             'current_app': current_app,
-            'current_blueprint': current_blueprint
+            'current_blueprint': current_blueprint,
+            'get_theme_css': get_theme_css,
         }
 
     @app.errorhandler(Exception)
diff --git a/web/pgadmin/browser/server_groups/servers/static/css/servers.css b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
index 65f9f53db..61536428a 100644
--- a/web/pgadmin/browser/server_groups/servers/static/css/servers.css
+++ b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
@@ -1,12 +1,3 @@
-.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;
-}
-
 .change_password {
   padding-left: 7px;
-}
\ No newline at end of file
+}
diff --git a/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss b/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
index 0059fc259..6b83f891c 100644
--- a/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
+++ b/web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
@@ -1,3 +1,12 @@
 .bg-model-duplicate {
   @extend .bg-warning-light;
 }
+
+.icon-server-connecting {
+  background-image: $loader-icon-small !important;
+  background-repeat: no-repeat;
+  background-size: 18px !important;
+  align-content: center;
+  vertical-align: middle;
+  height: 1.3em;
+}
diff --git a/web/pgadmin/browser/static/js/toolbar.js b/web/pgadmin/browser/static/js/toolbar.js
index 1a951d272..f491bfdbc 100644
--- a/web/pgadmin/browser/static/js/toolbar.js
+++ b/web/pgadmin/browser/static/js/toolbar.js
@@ -22,7 +22,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn',
+    parentClass: 'pg-toolbar-btn btn-secondary',
     enabled: false,
   },
   {
@@ -31,7 +31,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn',
+    parentClass: 'pg-toolbar-btn btn-secondary',
     enabled: false,
   },
   {
@@ -40,7 +40,7 @@ let _defaultToolBarButtons = [
     text: '',
     toggled: false,
     toggleClass: '',
-    parentClass: 'pg-toolbar-btn',
+    parentClass: 'pg-toolbar-btn btn-secondary',
     enabled: false,
   },
 ];
diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss
index 53de6f93a..f35ca48e4 100644
--- a/web/pgadmin/browser/static/scss/_browser.scss
+++ b/web/pgadmin/browser/static/scss/_browser.scss
@@ -49,5 +49,4 @@ samp,
 
 .pg-toolbar-btn {
   margin-left: 0.25rem;
-  border: $input-btn-border-width solid $btn-secondary-border;
 }
diff --git a/web/pgadmin/dashboard/static/css/dashboard.css b/web/pgadmin/dashboard/static/css/dashboard.css
index 93a0e1471..91ab75b62 100644
--- a/web/pgadmin/dashboard/static/css/dashboard.css
+++ b/web/pgadmin/dashboard/static/css/dashboard.css
@@ -24,23 +24,6 @@
     line-height: 30px;
 }
 
-.dashboard-tab-btn-group button {
-    padding: 5px;
-}
-
-.dashboard-tab-btn-group > button {
-    margin: 2px 3px 2px 0px;
-    min-width: 40px;
-}
-
-.dashboard-tab-btn-group > button:first-child {
-    margin-left: 3px;
-}
-
-.dashboard-tab-btn-group > button:last-child {
-    margin-right: 3px;
-}
-
 .graph-container {
     margin-top: 10px;
     height: 150px;
diff --git a/web/pgadmin/dashboard/static/scss/_dashboard.scss b/web/pgadmin/dashboard/static/scss/_dashboard.scss
index eeac9c4f5..7cddfb6c5 100644
--- a/web/pgadmin/dashboard/static/scss/_dashboard.scss
+++ b/web/pgadmin/dashboard/static/scss/_dashboard.scss
@@ -16,14 +16,6 @@
     margin-bottom: $grid-gutter-width/2;
 }
 
-.dashboard-tab-btn-group {
-    background-color: $color-gray-light;
-    border: 2px solid  $color-gray;
-    left: 0px;
-    right: 0px;
-    padding: 2px;
-}
-
 .graph-error {
     background-color: $color-gray-lighter;
     padding-top: 20px
@@ -44,5 +36,5 @@
 
 .dashboard-link a {
     cursor: pointer;
-    color: $color-fg-theme;
+    color: $color-fg;
 }
diff --git a/web/pgadmin/misc/__init__.py b/web/pgadmin/misc/__init__.py
index 0041e4a98..68d4381af 100644
--- a/web/pgadmin/misc/__init__.py
+++ b/web/pgadmin/misc/__init__.py
@@ -23,6 +23,8 @@ MODULE_NAME = 'misc'
 
 
 class MiscModule(PgAdminModule):
+    LABEL = gettext('Miscellaneous')
+
     def get_own_javascripts(self):
         return [
             {
@@ -47,10 +49,6 @@ class MiscModule(PgAdminModule):
         """
         Register preferences for this module.
         """
-        self.misc_preference = Preferences(
-            'miscellaneous', gettext('Miscellaneous')
-        )
-
         lang_options = []
         for lang in config.LANGUAGES:
             lang_options.append(
@@ -61,13 +59,39 @@ class MiscModule(PgAdminModule):
             )
 
         # Register options for the User language settings
-        self.misc_preference.register(
-            'miscellaneous', 'user_language',
+        self.preference.register(
+            'user_language', 'user_language',
             gettext("User language"), 'options', 'en',
             category_label=gettext('User language'),
             options=lang_options
         )
 
+        theme_options = []
+
+        for theme in config.THEMES:
+            theme_options.append({
+                'label': config.THEMES[theme]['disp_name']
+                .replace('_', ' ')
+                .replace('-', ' ')
+                .title(),
+                'value': theme,
+                'preview_src': url_for(
+                    'static', filename='js/generated/img/' +
+                    config.THEMES[theme]['preview_img']
+                )
+            })
+
+        self.preference.register(
+            'themes', 'theme',
+            gettext("Theme"), 'options', 'standard',
+            category_label=gettext('Themes'),
+            options=theme_options,
+            help_str=gettext(
+                'A refresh is required to apply the theme. Below is the '
+                'preview of the theme'
+            )
+        )
+
     def get_exposed_url_endpoints(self):
         """
         Returns:
diff --git a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
index 7821853e3..63f716135 100644
--- a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
+++ b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
@@ -5,7 +5,7 @@ $bgproc-container-pad: 2px;
   border: none;
   padding: 0px !important;
   text-align: left;
-  color: $color-fg-theme;
+  color: $color-fg;
   min-width: 500px;
   max-width: 500px;
   .card {
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 669bca71d..1fc5bd374 100644
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -56,12 +56,6 @@
 /** Opera hack */
 x:-o-prefocus, .file-input-container {top:16px;width:198px;}
 
-@-moz-document url-prefix() {
-  .filepath {
-    padding:0.2em 0.3em;
-  }
-}
-
 /** Input file Replacement - end */
 .file_listing #contents.grid {
   text-align: left;
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 f85bced82..6bd173dc9 100644
--- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -105,7 +105,7 @@
 .fm_folder_grid,
 .fm_file_grid,
 .fm_file_list {
-  color: $color-gray-darker;
+  color: $color-fg;
 }
 
 .fm_drive {
@@ -130,20 +130,6 @@
   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;
@@ -158,24 +144,6 @@
   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%;
-}
-
-.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 {
   position: absolute;
   top: 0px;
@@ -191,7 +159,7 @@
 .file_manager #uploader .filemanager-path-group {
   padding: 0;
   display: block;
-  border: 1px solid  $color-gray;
+  border: 1px solid  $border-color;
   height: 30px;
   border-radius: 5px;
   -webkit-border-radius: 5px;
@@ -207,7 +175,7 @@
 }
 
 .file_manager #uploader .filemanager-btn-group {
-  border: 1px solid  $color-gray;
+  border: 1px solid  $border-color;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
@@ -222,12 +190,12 @@
 
 .fileinfo .prompt-info {
   text-align: center;
-  color: $color-fg-theme;
+  color: $color-fg;
 }
 
 .allowed_file_types {
   border-top: $panel-border;
-  background: $color-bg-theme;
+  background: $color-bg;
   z-index: 5;
   padding: 0.25rem;
 }
@@ -261,7 +229,7 @@
   float: left;
   width: 100%;
   height: 21px !important;
-  border: 1px solid  $color-gray-dark;
+  border: 1px solid  $border-color;
   border-radius: 0 !important;
   -moz-border-radius: 0 !important;
   -webkit-border-radius: 0 !important;
@@ -313,7 +281,7 @@
   display: none;
   padding: 1rem;
   border-bottom: $panel-border;
-  background: $color-bg-theme;
+  background: $color-bg;
   position: absolute;
   top: 0;
   left: 0;
@@ -322,7 +290,7 @@
 }
 
 .upload_file .dz_cross_btn {
-  color: $color-fg-theme;
+  color: $color-fg;
   right: 0px;
   position: absolute;
   background: transparent;
@@ -359,7 +327,7 @@
 
 .file_selection_ctrl button.select_item {
   display: inline;
-  background:  $color-bg-theme;
+  background:  $color-bg;
   padding: 9px 0px 9px 0px;
   margin-left: 0px;
   margin-right: -7px;
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index b047b13a1..3344ed388 100644
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -242,10 +242,17 @@ define('pgadmin.preferences', [
                 // Convert the array to SelectControl understandable options.
               _.each(p.options, function(o) {
                 if ('label' in o && 'value' in o) {
-                  opts.push({
+                  let push_var = {
                     'label': o.label,
                     'value': o.value,
-                  });
+                  };
+                  push_var['label'] = o.label;
+                  push_var['value'] = o.value;
+
+                  if('preview_src' in o) {
+                    push_var['preview_src'] = o.preview_src;
+                  }
+                  opts.push(push_var);
                   if (o.value == p.value)
                     has_value = true;
                 } else {
@@ -454,6 +461,7 @@ define('pgadmin.preferences', [
             }
 
             if (e.button.text == gettext('Save')) {
+              let requires_refresh = false;
               preferences.updateAll();
 
               /* Find the modules changed */
@@ -463,8 +471,27 @@ define('pgadmin.preferences', [
                 if(!modulesChanged[pref.module]) {
                   modulesChanged[pref.module] = true;
                 }
+
+                if(pref.name == 'theme') {
+                  requires_refresh = true;
+                }
               });
 
+              if(requires_refresh) {
+                Alertify.confirm(
+                  gettext('Refresh required'),
+                  gettext('A page refresh is required to apply the theme. Do you wish to refresh the page now ?'),
+                  function() {
+                    /* If user clicks Yes */
+                    location.reload();
+                    return true;
+                  },
+                  function() {/* If user clicks No */ return true;}
+                ).set('labels', {
+                  ok: gettext('Refresh'),
+                  cancel: gettext('Later'),
+                });
+              }
               // Refresh preferences cache
               pgBrowser.cache_preferences(modulesChanged);
             }
diff --git a/web/pgadmin/static/img/load-node.gif b/web/pgadmin/static/img/load-node.gif
deleted file mode 100644
index 500fa0860e2eb9883f86c30da579008475f596c4..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/web/pgadmin/static/img/loader-small.svg b/web/pgadmin/static/img/loader-small.svg
new file mode 100644
index 000000000..dc5faaf40
--- /dev/null
+++ b/web/pgadmin/static/img/loader-small.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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">
+<style type="text/css">
+	.st0{fill:none;stroke:#EBEEF3;stroke-width:5;}
+	.st1{fill:none;stroke:#326690;stroke-width:5;}
+</style>
+<g>
+	<g transform="translate(1 1)">
+		<circle class="st0" cx="18" cy="18" r="16"/>
+		<path class="st1" d="M34,18c0-8.8-7.2-16-16-16		">
+<animateTransform  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">
+				</animateTransform>
+		</path>
+	</g>
+</g>
+</svg>
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index a03ac7cac..4d9aa9155 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2065,6 +2065,11 @@ define([
         $(this.$sel).append($element);
         $(this.$sel).trigger('change');
       }
+
+      let new_value = _.findWhere(this.field.get('options'), {value: evt.params.data.id});
+      if(new_value.preview_src) {
+        this.$el.find('.preview-img img').attr('src', new_value.preview_src);
+      }
     },
 
     formatter: Select2Formatter,
@@ -2090,6 +2095,14 @@ define([
       ' <% if (helpMessage && helpMessage.length) { %>',
       ' <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       ' <% } %>',
+      ' <% for (var i=0; i < options.length; i++) {%>',
+      '   <% var option = options[i]; %>',
+      '     <% if (option.preview_src && option.value === rawValue) { %>',
+      '       <div class="preview-img mt-2">',
+      '         <img src="<%=option.preview_src%>" class="img-fluid mx-auto d-block w-50 border" alt="'+gettext('Preview not available...')+'">',
+      '       </div>',
+      '    <%}%>',
+      ' <%}%>',
       '</div>',
     ].join('\n')),
     render: function() {
diff --git a/web/pgadmin/static/js/sqleditor_utils.js b/web/pgadmin/static/js/sqleditor_utils.js
index fde7283b0..d305f4779 100644
--- a/web/pgadmin/static/js/sqleditor_utils.js
+++ b/web/pgadmin/static/js/sqleditor_utils.js
@@ -135,7 +135,7 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
                 if(sqlEditorUtils.previousStatus != status &&
                         !$status_el.hasClass('fa-query_tool_connected')) {
                   $status_el.removeClass()
-                    .addClass('fa-custom fa-query-tool-connected');
+                    .addClass('pg-font-icon icon-query-tool-connected');
                   is_status_changed = true;
                 }
               }
@@ -153,10 +153,10 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
               msg = gettext('An unexpected error occurred - ' +
                           'ensure you are logged into the application.');
               $el.attr('data-content', msg);
-              if(!$status_el.hasClass('fa-query-tool-disconnected')) {
+              if(!$status_el.hasClass('icon-query-tool-disconnected')) {
                 $el.popover('hide');
                 $status_el.removeClass()
-                  .addClass('fa-custom fa-query-tool-disconnected');
+                  .addClass('pg-icon-font icon-query-tool-disconnected');
               }
             }
           })
@@ -173,10 +173,10 @@ define(['jquery', 'underscore', 'sources/gettext', 'sources/url_for'],
             // Set bootstrap popover
             $el.attr('data-content', msg);
             // Add error class
-            if(!$status_el.hasClass('fa-query-tool-disconnected')) {
+            if(!$status_el.hasClass('icon-query-tool-disconnected')) {
               $el.popover('hide');
               $status_el.removeClass()
-                .addClass('fa-custom fa-query-tool-disconnected');
+                .addClass('pg-font-icon icon-query-tool-disconnected');
             }
           });
       },
diff --git a/web/pgadmin/static/scss/_aci_tree.overrides.scss b/web/pgadmin/static/scss/_aci_tree.overrides.scss
index 8b7b6683b..806798065 100644
--- a/web/pgadmin/static/scss/_aci_tree.overrides.scss
+++ b/web/pgadmin/static/scss/_aci_tree.overrides.scss
@@ -1,3 +1,19 @@
+.tree-icon-right:before {
+  font-family: $font-family-icon;
+  content: "\f054" !important;
+  right: 15px;
+  top: 3px;
+  font-size: 0.6rem;
+  line-height: 2;
+  border-style: none;
+}
+
+.aciTree {
+    & .aciTreeButton, & .aciTreePush, & .aciTreeItem, & .aciTreeIcon, & .aciTreeText, & .aciTreeColumn {
+        color: $color-fg;
+    }
+}
+
 .aciTree .aciTreeLi {
   display: grid !important;
   cursor: pointer;
@@ -6,13 +22,9 @@
 	font-family: $font-family-primary;
 	font-size: 0.815rem;
 }
-.aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine  {
-  background-color: $color-primary-light !important;
-	border-right: $active-border !important;
-}
 
 .aciTree .aciTreeSelected > .aciTreeLine {
-  background-color: $color-primary-light !important;
+  background-color: $tree-bg-selected !important;
 	border-color: $color-primary-light;
 	border-right: $active-border !important;
 	border-left: none !important;
@@ -21,13 +33,15 @@
   -webkit-border-radius: none !important;
   -moz-border-radius: none !important;
   border-radius: none !important;
-}
-.aciTree .aciTreeSelected > .aciTreeLine .aciTreeItem {
-  background-color: $color-primary-light;
-  border: 1px solid transparent;
-  -webkit-border-radius: none !important;
-  -moz-border-radius: none !important;
-  border-radius: none !important;
+
+  & .aciTreeItem {
+      background-color: $tree-bg-selected;
+      border: 1px solid transparent;
+      -webkit-border-radius: none !important;
+      -moz-border-radius: none !important;
+      border-radius: none !important;
+      color: $tree-fg-selected;
+  }
 }
 .aciTree .aciTreeItem {
 	white-space: nowrap !important;
@@ -36,31 +50,45 @@
 	background: none;
 }
 .aciTree .aciTreeLine.aciTreeHover {
-  background-color: $color-gray-light;
-  -webkit-border-radius: none !important;
-  -moz-border-radius: none !important;
-  border-radius: none !important;
-}
-.aciTree .aciTreeLine.aciTreeHover .aciTreeItem {
-  background-color: $color-gray-light;
-  border: 1px solid transparent;
+  background-color: $tree-bg-hover;
   -webkit-border-radius: none !important;
   -moz-border-radius: none !important;
   border-radius: none !important;
+    & .aciTreeItem {
+        background-color: inherit;
+        border: 1px solid transparent;
+        -webkit-border-radius: none !important;
+        -moz-border-radius: none !important;
+        border-radius: none !important;
+        color: $tree-fg-hover;
+    }
 }
-.aciTree.aciTreeFocus .aciTreeSelected >.aciTreeLine .aciTreeItem {
-  background-color: $color-primary-light;
-}
-.aciTree.aciTreeFocus .aciTreeFocus >.aciTreeLine .aciTreeItem,
-.aciTree.aciTreeFocus .aciTreeSelected.aciTreeFocus >.aciTreeLine .aciTreeItem {
-  border: 1px solid transparent;
+
+.aciTree.aciTreeFocus {
+
+    & .aciTreeFocus > .aciTreeLine  {
+      background-color: $tree-bg-selected !important;
+        border-right: $active-border !important;
+    }
+
+    & .aciTreeSelected >.aciTreeLine .aciTreeItem {
+      background-color: $tree-bg-selected;
+    }
+
+    & .aciTreeFocus >.aciTreeLine .aciTreeItem,
+    & .aciTreeSelected.aciTreeFocus >.aciTreeLine .aciTreeItem {
+      border: 1px solid transparent;
+      color: $tree-fg-selected;
+    }
 }
+
 .aciTree .aciTreeButton {
   background: none;
 }
 .aciTree .aciTreePush {
-  width: 30px;
-  background: url(../img/collapse_expand.svg) 12px 7px no-repeat;
+  background: none;
+  text-align: center;
+  font-size: 0.85em;
 }
 .aciTree .aciTreeEntry,
 .aciTree .aciTreeBranch,
@@ -68,11 +96,41 @@
     overflow:hidden;
     background: none !important;
 }
-.aciTree .aciTreeInode >.aciTreeLine .aciTreePush,
-.aciTree .aciTreeInode >.aciTreeLine .aciTreePush.aciTreeHover {
-  background-position: 6px center !important;
+
+
+.aciTree .aciTreeInode>.aciTreeLine .aciTreePush {
+    &:before,
+    &.aciTreeHover:before {
+      background-position: 6px center !important;
+      font-family: $font-family-icon;
+      content: "\f054" !important;
+      border-style: none;
+      margin-left: 5px;
+    }
+}
+
+.aciTree .aciTreeLoad>.aciTreeLine .aciTreePush {
+    &:before,
+    &.aciTreeHover:before {
+      content: " " !important;
+    }
 }
-.aciTree .aciTreeOpen >.aciTreeLine .aciTreePush,
-.aciTree .aciTreeOpen >.aciTreeLine .aciTreePush.aciTreeHover {
-  background-position: -14px center !important;
+
+.aciTree .aciTreeOpen >.aciTreeLine .aciTreePush {
+    &:before,
+    &.aciTreeHover:before {
+      background-position: -14px center !important;
+      font-family: $font-family-icon;
+      content: "\f078" !important;
+      border-style: none;
+      margin-left: 5px;
+    }
+}
+
+.aciTree .aciTreePush>span {
+    width: 15px;
+    height: 15px;
+    left: 2px;
+    background: $loader-icon-small 0 0 no-repeat;
+    background-color: inherit!important;
 }
diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss
index f5082c37b..3f2e561e3 100644
--- a/web/pgadmin/static/scss/_alert.scss
+++ b/web/pgadmin/static/scss/_alert.scss
@@ -49,7 +49,7 @@
 .alert-info {
   border-color: $color-primary;
   background-color: $color-primary-light;
-  color : $color-fg-theme;
+  color : $color-fg;
   background-image: none;
 }
 
diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss
index 0c579dd6a..0063d565f 100644
--- a/web/pgadmin/static/scss/_alertify.overrides.scss
+++ b/web/pgadmin/static/scss/_alertify.overrides.scss
@@ -23,6 +23,11 @@
     }
   }
 
+  .ajs-body {
+    background-color: $color-bg !important;
+    color: $color-fg !important;
+  }
+
   &.ajs-resizable,
   &.ajs-maximized {
     & .ajs-body {
@@ -64,6 +69,8 @@
     padding: 0;
     min-height: $footer-min-height;
     border-top: $panel-border;
+    background-color: $color-bg !important;
+    color: $color-fg !important;
     & .ajs-buttons {
       border: none;
       border-radius: 0rem;
@@ -115,6 +122,8 @@
     border: $panel-border;
     border-radius: $panel-border-radius;
     box-shadow: $dialog-box-shadow;
+    background-color: $color-bg !important;
+    color: $color-fg !important;
   }
   .ajs-content {
     padding-left: 0 !important;
diff --git a/web/pgadmin/static/scss/_backgrid.overrides.scss b/web/pgadmin/static/scss/_backgrid.overrides.scss
index 47915bb8e..c929ddd45 100644
--- a/web/pgadmin/static/scss/_backgrid.overrides.scss
+++ b/web/pgadmin/static/scss/_backgrid.overrides.scss
@@ -80,8 +80,8 @@
 
 .backgrid thead td,
 .backgrid thead th{
-  background: $color-bg-theme;
-  background-color: $color-bg-theme !important;
+  background: $color-bg;
+  background-color: $color-bg !important;
   text-align: left;
 }
 
@@ -147,7 +147,7 @@ span.form-control:disabled {
 
 .subnode {
   border: $panel-border;
-  background: $color-bg-theme;
+  background: $color-bg;
 }
 
 .subnode-noouter-border {
@@ -203,8 +203,8 @@ span.form-control:disabled {
 }
 
 .subnode-header {
-    background-color: $color-bg-theme;
-    color: $color-fg-theme;
+    background-color: $color-bg;
+    color: $color-fg;
     border-bottom: $panel-border;
 }
 
@@ -240,7 +240,7 @@ span.form-control:disabled {
     }
 
     fieldset.inline-fieldset {
-      background: $color-bg-theme;
+      background: $color-bg;
     }
 }
 .subnode-footer {
@@ -289,7 +289,7 @@ table.backgrid {
   }
 
   & td.editor {
-    background-color: $color-bg-theme !important;
+    background-color: $color-bg !important;
   }
 
   & td.edit-cell.editor:focus {
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index 3b2df9fd6..3ab687f23 100644
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -226,12 +226,6 @@ legend {
 	}
 }
 
-/* Override default bootstrap popover fonts & size */
-.popover-content {
-	font-family: $font-family-primary;
-	font-size: 13px;
-}
-
 .switch-cell {
 	height: 0px;
 	width: 0px;
@@ -252,10 +246,10 @@ td.switch-cell > div.toggle {
 		& .nav-link {
 			border: none !important;
 			padding: $tabs-padding;
-			color: $color-fg-theme;
+			color: $color-fg;
 			&.active {
 				border-bottom: $active-border !important;
-				color: $color-primary;
+				color: $active-color;
 			}
 		}
 	}
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 27e028b75..2857455be 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -1,6 +1,3 @@
-.cm-s-default .CodeMirror {
-  background: $color-editor-bg;
-}
 /* To override inbuilt Green color for matchingbracket */
 .cm-s-default .CodeMirror-matchingbracket {
     color:  $sql-bracket-match-fg !important;
@@ -10,6 +7,8 @@
 .CodeMirror {
   font-size: 1em;
   font-family: monospace, monospace;
+  background-color: $color-editor-bg;
+  color: $color-editor-fg;
 }
 
 /* Ensure the codemirror editor displays full height gutters when resized */
@@ -39,14 +38,34 @@
 }
 
 /* make syntax-highlighting bold */
-.cm-s-default .cm-keyword {
-  font-weight: 600;
-  color: $color-editor-keyword;
-}
-
-.cm-s-default .cm-number {
-  font-weight: 600;
-  color: $color-editor-number;
+.cm-s-default {
+  & .cm-quote {color: #090;}
+  & .cm-keyword {color: $color-editor-keyword; font-weight: 600;}
+  & .cm-atom {color: $color-editor-fg;}
+  & .cm-number {color: $color-editor-number; font-weight: 600;}
+  & .cm-def {color: $color-editor-fg;}
+  & .cm-punctuation,
+  & .cm-property,
+  & .cm-operator { color: $color-editor-operator; }
+  & .cm-variable {color: $color-editor-variable; }
+  & .cm-variable-2,
+  & .cm-variable-3,
+  & .cm-type {color: $color-editor-variable-2;}
+  & .cm-comment {color: $color-editor-comment;}
+  & .cm-string {color: $color-editor-string;}
+  & .cm-string-2 {color: $color-editor-string;}
+  & .cm-meta {color: $color-editor-fg;}
+  & .cm-qualifier {color: $color-editor-fg;}
+  & .cm-builtin {color: $color-editor-builtin;}
+  & .cm-bracket {color: $color-editor-bracket;}
+  & .cm-tag {color: $color-editor-fg;}
+  & .cm-attribute {color: $color-editor-fg;}
+  & .cm-hr {color: $color-editor-fg;}
+  & .cm-link {color: $color-editor-fg;}
+
+  & .CodeMirror-cursor {
+    border-color: $color-editor-fg;
+  }
 }
 
 /* Codemirror buttons */
@@ -84,7 +103,7 @@
 }
 
 .CodeMirror-linenumber {
-  color: $color-fg-theme;
+  color: $color-fg;
 }
 
 .debugger-container .breakpoints {
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 7a6768b8d..39f1fb4e3 100644
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -90,6 +90,7 @@
 
 .panel-link-heading:hover {
   text-decoration: none;
+  color: inherit;
 }
 
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
@@ -97,7 +98,7 @@
 }
 
 #navbar-user {
-  font-size: $navbar-user-font-size;
+  font-size: 0.9em;
 }
 
 
@@ -143,19 +144,12 @@
 
 .pg-navbar {
   font-size: $navbar-font-size;
-  background-color: $navbar-color-bg;
+  background-color: $navbar-bg;
   padding-left: 0rem;
   padding-right: 0.5rem;
   & .nav-item .nav-link{
     line-height: 1;
   }
-
-  .pg-navbar-brand-arrow {
-    border: $navbar-height/2 solid $navbar-brand-arrow-bg;
-    border-right-color: transparent;
-    border-bottom-color: transparent;
-    border-top-color: transparent;
-  }
 }
 
 
@@ -192,7 +186,7 @@
     &.pg-prop-btn-group-below {
       text-align: right;
       padding: $footer-padding;
-      background: $color-bg-theme;
+      background: $color-bg;
       border-top: $panel-border;
     }
   }
@@ -407,9 +401,9 @@
   padding: 0rem;
   border: $panel-border;
   border-radius: $card-border-radius;
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
   fieldset.inline-fieldset {
-    background: $color-bg-theme;
+    background: $color-bg;
   }
 }
 
@@ -548,7 +542,8 @@ fieldset.inline-fieldset > div {
 
 .dashboard-tab-container,
 .pg-panel-statistics-container,
-.pg-panel-depends-container,
+.pg-panel-dependencies-container,
+.pg-panel-dependents-container
 .pg-prop-coll-container, {
     width: 100%;
     overflow: auto;
@@ -561,7 +556,7 @@ fieldset.inline-fieldset > div {
     left: 0px;
     right: 0px;
     top : 0px;
-    background-color: $color-bg-theme;
+    background-color: $color-bg;
 }
 
 /* Overrides/fixes for pgAdmin specific styling */
@@ -733,7 +728,7 @@ table tr th {
   & button {
     background: none;
     border: none;
-    color: $color-fg-theme;
+    color: $color-fg;
     padding: 0;
   }
   & button:focus {
@@ -843,11 +838,11 @@ body {
 }
 
 .pg-el-container {
-  background-color: $color-gray-lighter;
+  background-color: $negative-bg;
 }
 
 .nav-tabs {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .editor-toolbar {
@@ -1031,3 +1026,18 @@ table.table-empty-rows{
   border-radius: $input-border-radius;
   padding: $input-btn-padding-y $input-btn-padding-x;
 }
+
+::placeholder {
+  color: $input-placeholder-color;
+}
+
+.pg-font-icon {
+  &:before {
+    font-style: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    font-size: 100%;
+    line-height: 1;
+    vertical-align: middle;
+  }
+}
diff --git a/web/pgadmin/static/scss/_select2.overrides.scss b/web/pgadmin/static/scss/_select2.overrides.scss
index f0e4e7e68..d94d064af 100644
--- a/web/pgadmin/static/scss/_select2.overrides.scss
+++ b/web/pgadmin/static/scss/_select2.overrides.scss
@@ -1,6 +1,22 @@
-.select2-container--default .select2-results__option--highlighted[aria-selected] {
-  background-color: $color-primary-light;
-  color:  $color-gray-dark;
+.select2-dropdown {
+    background-color: $input-bg;
+    color: $input-color;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected],
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: $dropdown-link-hover-bg;
+  color:  $dropdown-link-hover-color;
+}
+
+.select2-container--default .select2-selection--multiple {
+    background-color: $input-bg;
+    color: $input-color;
+}
+
+.select2-container--default .select2-selection--multiple .select2-selection__choice {
+  background-color: $dropdown-link-hover-bg;
+  color:  $dropdown-link-hover-color;
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {
@@ -11,6 +27,11 @@
     width: 100% !important;
 }
 
+.select2-container--default .select2-search__field {
+    background-color: $input-bg;
+    color: $input-color;
+}
+
 .renderable > .select2-container {
     width: 100% !important;
 }
@@ -18,10 +39,12 @@
 .select2-container .select2-selection--single  {
   height: auto;
   min-height: 28px;
+  background-color: $input-bg;
   & .select2-selection__rendered{
     line-height: inherit;
     padding: $input-padding-y $input-padding-x;
     padding-right: 1.5rem;
+    color: $input-color;
   }
 }
 
diff --git a/web/pgadmin/static/scss/_webcabin.pgadmin.scss b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
index 5c0ff69a8..7560bc050 100644
--- a/web/pgadmin/static/scss/_webcabin.pgadmin.scss
+++ b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
@@ -1,30 +1,30 @@
 .wcDocker {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcModalBlocker {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcPanelBackground {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcPanelBackground .wcCenter {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcFrameFlasher {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcFrameShadower {
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
 }
 
 .wcFrameTitleBar {
   height: $title-height;
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
   border-bottom: $panel-border;
 }
 
@@ -43,7 +43,7 @@
 
 .wcFrameButton.disabled {
   pointer-events: none;
-  color: $color-gray;
+  opacity: $btn-disabled-opacity;
 }
 
 .wcFrameButton .fa {
@@ -52,7 +52,7 @@
 
 .wcFrameButtonBar {
   height: $title-height;
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
   border-bottom: $panel-border;
   padding: 0rem 0.25rem;
 
@@ -80,7 +80,7 @@
 }
 
 .wcPanelTab, .wcFrameTitle{
-  color: $color-fg-theme;
+  color: $color-fg;
   padding: $tabs-padding;
   margin: 0px;
 }
@@ -152,7 +152,7 @@
 
 .wcFloating .wcPanelTabActive {
   border-bottom: none;
-  color: $color-fg-theme;
+  color: $color-fg;
   font-weight: bold;
 }
 
@@ -162,7 +162,7 @@
 
 .wcFloating .wcFrameTitleBar {
   height: $title-height;
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
   border-bottom: $panel-border;
 }
 
@@ -182,7 +182,7 @@
 
 .wcPanelTabActive {
   border-bottom: $active-border;
-  color: $color-primary;
+  color: $active-color;
 }
 
 .wcFrameEdge {
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index d2d5e9022..890f5082b 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -1,6 +1,3 @@
-@import './resources/pgadmin.resources.scss';
-
-
 $theme-colors: (
   "primary": $color-primary,
   "danger": $color-danger,
diff --git a/web/pgadmin/static/scss/resources/_default.style.scss b/web/pgadmin/static/scss/resources/_default.style.scss
index f90fe47ad..4a0bd9192 100644
--- a/web/pgadmin/static/scss/resources/_default.style.scss
+++ b/web/pgadmin/static/scss/resources/_default.style.scss
@@ -60,10 +60,6 @@
   &-dark {
     background-color:  $color-gray-dark;
   }
-
-  &-darker {
-    background-color:  $color-gray-darker;
-  }
 }
 
 /* Borders */
@@ -113,10 +109,6 @@
   &-dark {
     border: 2px solid $color-gray-dark;
   }
-
-  &-darker {
-    border: 2px solid $color-gray-darker;
-  }
 }
 
 /* Typography */
@@ -167,3 +159,13 @@
 .text-semibold {
   font-family: $font-family-semibold;
 }
+
+.not-selectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  ms-user-select: none;
+  user-select: none;
+  cursor: default;
+}
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 55507a33d..10fa13b4c 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -1,5 +1,5 @@
 /** Dividing a pixel var with 1px or rem var with 1rem removes the unit px/rem **/
-$enable-flex: true !default;
+$enable-flex: true ;
 
 $white: #fff;
 $black: #000;
@@ -7,9 +7,6 @@ $black: #000;
 $color-bg: $white !default;
 $color-fg: #222222 !default;
 
-$color-bg-theme: $white !default;
-$color-fg-theme: #222222 !default;
-
 $color-primary: #326690 !default;
 $color-primary-fg: $white !default;
 $color-primary-light: #d6effc !default;
@@ -19,60 +16,55 @@ $color-secondary: $white !default;
 
 $color-danger: #e53935 !default;
 $color-danger-fg: $white !default;
-$color-danger-light: #F39999;
-$color-danger-lighter: #FAECEC;
+$color-danger-light: #F39999 !default;
+$color-danger-lighter: #F39999 !default;
 
 $color-success: #43a047 !default;
 $color-success-fg: $black !default;
-$color-success-light: #DDF1DE;
+$color-success-light: #DDF1DE !default;
 
 $color-warning: #eea236 !default;
 $color-warning-fg: $black !default;
-$color-warning-light: #fce5c5;
+$color-warning-light: #fce5c5 !default;;
 
-$color-gray-darker: #5b6d7c;
-$color-gray-dark: #848ea0;
-$color-gray: #bac1cd;
-$color-gray-light: #ebeef3;
-$color-gray-lighter: #f3f5f9;
+$color-gray-dark: #848ea0 !default;
+$color-gray: #bac1cd !default;
+$color-gray-light: #ebeef3 !default;
+$color-gray-lighter: #f3f5f9 !default;
 
 $color-brand: $white !default;
 
-$color-editor-bg: $color-bg !default;
-$color-editor-keyword: #908 !default;
-$color-editor-number: #964 !default;
-$color-editor-foldmarker: #0000FF !default;
-$color-editor-activeline: #50B0F0 !default;
 
 /* Typography */
-$font-family-primary: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-semibold: "Roboto Medium" !default;
-$font-family-editor: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-$font-family-icon: "FontAwesome" !default;
+$font-family-primary: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-semibold: "Roboto Medium";
+$font-family-editor: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-icon: "FontAwesome";
 
 $border-width: 1px;
-$border-color: #dde0e6;
+$border-color: #dde0e6 !default;
 $border-color-dark: $color-gray;
-$box-shadow: 0 0.5rem 3rem $color-gray-dark;
-
-/** Bootstrap Variable Changes **/
-$font-family-monospace: $font-family-editor !default;
-$font-family-base:      $font-family-primary !default;
-$gray-600: $color-gray-dark;
-$gray-900: $color-fg-theme;
-$body-color: $color-fg-theme;
+$box-shadow-base-color: $color-gray-dark !default;
+$box-shadow: 0 0.5rem 3rem $box-shadow-base-color;
+
+$font-family-monospace: $font-family-editor;
+$font-family-base:      $font-family-primary;
+$body-color: $color-fg;
 $font-size-base: 0.875rem;
-$line-height-base: 1.5; // no change
+$line-height-base: 1.5;
 $text-height-calc: $line-height-base*$font-size-base/1rem;
 $grid-gutter-width: 15px;
-$border-radius: 0.25rem; //no change
+$border-radius: 0.25rem;
 
-$text-color: $color-fg-theme;
-$text-muted: $color-gray-dark;
+$text-muted: $color-gray-dark !default;
 
-$navbar-dark-color: #fff;
-$navbar-dark-hover-color: #fff;
-$navbar-dark-active-color: #fff;
+$navbar-bg: $color-primary;
+$navbar-font-size: 0.925rem;
+$navbar-height: 32px;
+$navbar-dropdown-top: 100%;
+$navbar-dark-color: $color-primary-fg;
+$navbar-dark-hover-color: $color-primary-fg;
+$navbar-dark-active-color: $color-primary-fg;
 $navbar-dark-disabled-color: $color-gray;
 
 $navbar-toggler-padding-y: 0.25rem; //no-change
@@ -80,7 +72,10 @@ $navbar-toggler-padding-y: 0.25rem; //no-change
 $form-group-margin-bottom:  0.5rem;
 $btn-active-box-shadow: none;
 
-$dropdown-link-hover-color: $white;
+$dropdown-bg: $color-bg;
+$dropdown-color: $color-fg;
+$dropdown-link-color: $color-fg;
+$dropdown-link-hover-color: $color-primary-fg;
 $dropdown-link-hover-bg: $color-primary;
 $dropdown-border-color: $border-color;
 $dropdown-box-shadow: 0 0.125rem 0.5rem rgba($color-gray-dark, .175);
@@ -88,8 +83,14 @@ $dropdown-divider-bg: $dropdown-border-color;
 $dropdown-padding-y: 0.25rem;
 $dropdown-item-padding-x: 1rem;
 $dropdown-spacer: .125rem; //no-change
+$dropdown-link-disabled-color: $text-muted;
 $nav-divider-margin-y: .25rem;
 
+$popover-bg: $color-bg;
+$popover-body-color: $color-fg;
+$popover-border-color: $dropdown-border-color;
+$popover-box-shadow: $dropdown-box-shadow;
+
 $input-btn-focus-width: 0.1rem;
 $btn-disabled-opacity: 0.5;
 $btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
@@ -98,9 +99,8 @@ $card-spacer-y: 0rem;
 $card-spacer-x: 0rem;
 $card-border-radius: $border-radius;
 $card-border-color: $border-color;
-$card-cap-bg: $color-bg-theme;
-$card-bg: $color-bg-theme;
-
+$card-cap-bg: $color-bg;
+$card-bg: $color-bg;
 
 $navbar-padding-y: 0rem;
 $navbar-padding-x: 0rem;
@@ -122,36 +122,50 @@ $table-cell-padding: 0.25rem;
 $table-header-cell-padding: 0.75rem;
 $table-hover-bg: none; //we will use our own classes
 $table-active-bg: $color-primary-light;
-$table-border-width: $border-width !default;
-$table-border-color: $border-color !default;
-$table-head-bg: $color-primary !default;
-$table-head-color: $color-primary-fg !default;
-
-$input-bg: $white; //no change
-$input-color: $color-fg-theme;
+$table-border-width: $border-width;
+$table-border-color: $border-color;
+$table-head-bg: $color-primary;
+$table-head-color: $color-primary-fg;
+
+$input-bg: $white !default;
+$input-color: $color-fg !default;
+$input-placeholder-color: $text-muted;
 $input-border-color: $border-color;
-$input-border-radius: $border-radius; //no change
-$input-disabled-bg: $color-gray-lighter;
-$input-btn-border-width: $border-width; //no change
-$input-border-width: $input-btn-border-width; //no change
+$input-border-radius: $border-radius;
+$input-disabled-bg: $color-gray-lighter !default;
+$input-btn-border-width: $border-width;
+$input-border-width: $input-btn-border-width;
 $input-btn-padding-y: .25rem;
-$input-btn-padding-x: .75rem; //no change
-
-$component-active-bg: $color-primary; //no change
-$input-btn-focus-width: .2rem !default; //no change
-$input-btn-focus-color: rgba($component-active-bg, .25) !default; //no change
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; //no change
-$input-focus-bg: $input-bg !default; //no change
-$input-focus-border-color: lighten($component-active-bg, 25%) !default; //no change
-$input-focus-color: $input-color !default; //no change
-$input-focus-width: $input-btn-focus-width !default; //no change
-$input-focus-box-shadow: $input-btn-focus-box-shadow !default; //no change
-
-$btn-border-radius: $border-radius; //no change
-
-/***************/
+$input-btn-padding-x: .75rem;
+
+$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-focus-bg: $input-bg;
+$input-focus-border-color: lighten($component-active-bg, 25%);
+$input-focus-color: $input-color;
+$input-focus-width: $input-btn-focus-width;
+$input-focus-box-shadow: $input-btn-focus-box-shadow;
+
+$btn-border-radius: $border-radius;
+
+$color-editor-fg: $input-color;
+$color-editor-bg: $input-bg;
+$color-editor-keyword: #908 !default;
+$color-editor-number: #964 !default;
+$color-editor-string: #a11 !default;
+$color-editor-variable: $color-fg !default;
+$color-editor-variable-2: #05a !default;
+$color-editor-builtin: #30a !default;
+$color-editor-comment: #a50 !default;
+$color-editor-bracket: #997 !default;
+$color-editor-operator: $color-fg !default;
+$color-editor-foldmarker: #0000FF !default;
+$color-editor-activeline: #50B0F0 !default;
 
-$active-border: 3px solid $color-primary;
+$active-color: $color-primary !default;
+$active-border: 3px solid $active-color;
 $panel-border-width: $border-width;
 $panel-border-color: $border-color;
 $panel-border-radius: $border-radius;
@@ -166,25 +180,27 @@ $footer-height-calc: $footer-min-height+$footer-padding*2;
 // ($splitter-hover-width - $panel-border-width) should be even number to split evenly.
 $splitter-hover-width: 7px;
 
-$navbar-brand-bg: #222222; //place image url if image
-$navbar-brand-arrow-bg: #222222;
-$navbar-color-bg: $color-primary;
-$navbar-font-size: 0.925rem;
-$navbar-user-font-size: 0.875rem;
-
-$navbar-height: 32px;
-$navbar-dropdown-top: 100%;
 $dropdown-submenu-top: -$dropdown-spacer;
 
-$table-bg: $color-bg-theme;
+$table-bg: $color-bg;
 $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;
 
+$tree-fg-hover: $color-fg;
+$tree-bg-hover: $color-gray-lighter;
+$tree-fg-selected: $color-fg;
+$tree-bg-selected: $color-primary-light;
+
+$sql-grid-data-cell-fg: $input-color;
+$sql-grid-data-cell-bg: $input-bg;
+$sql-grid-title-cell-fg: $input-color;
+$sql-grid-title-cell-bg: $input-bg;
+
 $sql-title-padding: 3px;
-$sql-title-bg: $color-gray-darker;
+$sql-title-bg: #5b6d7c;
 $sql-title-fg: $white;
 // Toolbar + editor title heights + title bottom border
 $sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width;
@@ -194,13 +210,13 @@ $sql-history-success-bg: $color-primary-light;
 $sql-history-success-fg: $color-primary;
 $sql-history-error-bg: $color-danger-lighter;
 $sql-history-error-fg: $color-danger;
-$sql-hint-bg: $color-bg-theme;
+$sql-hint-bg: $color-bg;
 $sql-hint-active-bg: $color-primary;
 $sql-hint-active-fg: $white;
-$sql-bracket-match-fg: $color-gray-darker;
+$sql-bracket-match-fg: #5b6d7c;
 $sql-bracket-match-bg: #f5d2af;
 
-$negative-bg: $color-gray-light;
+$negative-bg: $color-gray-light !default;
 $dialog-box-shadow: $box-shadow;
 
 $alert-icon-color: $white;
@@ -221,3 +237,4 @@ $loading-bg : rgba($black,0.6);
 $loading-fg : $white;
 
 $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 ") !default;
+$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") !default;
diff --git a/web/pgadmin/static/scss/resources/_pgadmin.variables.scss b/web/pgadmin/static/scss/resources/_pgadmin.variables.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/web/pgadmin/static/scss/resources/_theme.variables.scss.sample b/web/pgadmin/static/scss/resources/_theme.variables.scss.sample
new file mode 100644
index 000000000..3168f1a6a
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/_theme.variables.scss.sample
@@ -0,0 +1,61 @@
+$color-bg: $white;
+$color-fg: #222222;
+
+$color-primary: #326690;
+$color-primary-fg: $white;
+$color-primary-light: #d6effc;
+$color-primary-dark: #295c85;
+
+$color-secondary: $white;
+
+$color-danger: #e53935;
+$color-danger-fg: $white;
+$color-danger-light: #F39999;
+$color-danger-lighter: #F39999;
+
+$color-success: #43a047;
+$color-success-fg: $black;
+$color-success-light: #DDF1DE;
+
+$color-warning: #eea236;
+$color-warning-fg: $black;
+$color-warning-light: #fce5c5;;
+
+/* Used at highest level in places like tooltip backgroud */
+$color-gray-dark: #848ea0;
+/* Used for text colors at certain places */
+$color-gray: #bac1cd;
+/* Used mostly for panel background empty spaces */
+$color-gray-light: #ebeef3;
+/* Used mostly for disabled input backgrounds */
+$color-gray-lighter: #f3f5f9;
+
+$color-brand: $white;
+
+$border-color: #dde0e6;
+$box-shadow-base-color: $color-gray;
+
+$text-muted: $color-gray-dark;
+$input-bg: $white;
+$input-color: $color-fg;
+$input-disabled-bg: $color-gray-lighter;
+
+$color-editor-keyword: #908;
+$color-editor-number: #964;
+$color-editor-string: #a11;
+$color-editor-variable: $color-fg;
+$color-editor-variable-2: #05a;
+$color-editor-builtin: #30a;
+$color-editor-comment: #a50;
+$color-editor-bracket: #997;
+$color-editor-operator: $color-fg;
+$color-editor-foldmarker: #0000FF;
+$color-editor-activeline: #50B0F0;
+
+$active-color: $color-primary;
+
+$negative-bg: $color-gray-light;
+
+$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 ") !default;
+$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:%23222222;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") !default;
+
diff --git a/web/pgadmin/static/scss/resources/_utils.scss b/web/pgadmin/static/scss/resources/_utils.scss
deleted file mode 100644
index ed749243d..000000000
--- a/web/pgadmin/static/scss/resources/_utils.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.not-selectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  ms-user-select: none;
-  user-select: none;
-  cursor: default;
-}
\ No newline at end of file
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
new file mode 100644
index 000000000..b5513e7f6
--- /dev/null
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -0,0 +1,63 @@
+$white: #fff;
+$black: #000;
+
+$color-bg: #4d4d4d;
+$color-fg: #fff;
+
+$color-primary: #40617d;
+$color-primary-fg: $white;
+$color-primary-light: #536270;
+$color-primary-dark: #15354f;
+
+$color-secondary: #424242;
+
+$color-danger: #c7262d;
+$color-danger-fg: $white;
+$color-danger-light: #914649;
+$color-danger-lighter: #8f8282;
+
+$color-success: #6baa7f;
+$color-success-fg: $black;
+$color-success-light: #5a7863;
+
+$color-warning: #eea236;
+$color-warning-fg: $black;
+$color-warning-light: #fce5c5;
+
+/* For dark theme - colors are in reverse order
+ * gray-dark is lighter then gray-light
+ */
+$color-gray-dark: #595959;
+$color-gray: #424242;
+$color-gray-light: #303030;
+$color-gray-lighter: #212121;
+
+$color-brand: $white;
+
+$border-color: $color-gray;
+$box-shadow-base-color: $color-gray-lighter;
+
+$text-muted: #9d9fa1;
+
+$input-bg: $color-gray-lighter;
+$input-color: $color-fg;
+$input-disabled-bg: $color-bg;
+
+$active-color: $color-fg;
+
+$color-editor-keyword: #C792EA;
+$color-editor-number: #FF5370;
+$color-editor-string: #C3E88D;
+$color-editor-variable: $color-fg;
+$color-editor-variable-2: #EEFFFF;
+$color-editor-builtin: #FFCB6B;
+$color-editor-comment: #848ea0;
+$color-editor-bracket: $color-fg;
+$color-editor-operator: $color-fg;
+$color-editor-foldmarker: #0000FF !default;
+$color-editor-activeline: #50B0F0 !default;
+
+$negative-bg: $color-bg;
+
+$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:%2340617d;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 ") !default;
+$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:%2340617d;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") !default;
diff --git a/web/pgadmin/static/scss/resources/dark/dark_preview.png b/web/pgadmin/static/scss/resources/dark/dark_preview.png
new file mode 100644
index 0000000000000000000000000000000000000000..09cc988c1072ed12628d8cce47f735937e937d05
GIT binary patch
diff --git a/web/pgadmin/static/scss/resources/pgadmin.resources.scss b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
index 4b6ba733d..787f83663 100644
--- a/web/pgadmin/static/scss/resources/pgadmin.resources.scss
+++ b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
@@ -1,5 +1,3 @@
 /* All the global variables, mixins goes here */
-@import 'pgadmin.variables.scss';
 @import 'default.variables.scss';
 @import 'default.style.scss';
-@import 'utils.scss';
diff --git a/web/pgadmin/static/scss/resources/standard_preview.png b/web/pgadmin/static/scss/resources/standard_preview.png
new file mode 100644
index 0000000000000000000000000000000000000000..64b5eb5079d300f80bb06f8a4edc545fab0b18e3
GIT binary patch
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index ad9e75d5b..781a09246 100644
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -20,7 +20,8 @@
 
     <!-- Base template stylesheets -->
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/style.css')}}"/>
-    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/pgadmin.css')}}"/>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='js/generated/pgadmin.style.css')}}"/>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename=('js/generated/'+get_theme_css())) }}"/>
 
      <!--View specified stylesheets-->
     {% block css_link %}{% endblock %}
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 0f12665e5..71adfec85 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -49,7 +49,7 @@
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
-                    <i class="icon-save-data-changes sql-icon-lg" aria-hidden="true"></i>
+                    <i class="pg-font-icon icon-save-data-changes sql-icon-lg" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
@@ -324,12 +324,12 @@
                         title=""
                         accesskey=""
                         tabindex="0" disabled>
-                    <i class="icon-commit sql-icon-lg" aria-hidden="true"></i>
+                    <i class="pg-font-icon icon-commit sql-icon-lg" aria-hidden="true"></i>
                 </button>
                 <button id="btn-rollback" type="button" class="btn btn-sm btn-secondary"
                         title=""
                         tabindex="0" disabled>
-                    <i class="icon-rollback sql-icon-lg" aria-hidden="true"></i>
+                    <i class="pg-font-icon icon-rollback sql-icon-lg" aria-hidden="true"></i>
                 </button>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
@@ -370,7 +370,7 @@
                  data-panel-visible="visible"
                  accesskey=""
                  tabindex="0">
-                <i class="fa-custom fa-query-tool-disconnected obtaining-conn" aria-hidden="true"
+                <i class="pg-font-icon icon-query-tool-disconnected obtaining-conn d-flex m-auto" aria-hidden="true"
                     title="">
                 </i>
             </div>
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 8831d5023..62c0f2c56 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -14,30 +14,6 @@
   bottom: 0;
 }
 
-.sql-scratch {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  overflow-y: hidden;
-}
-
-.sql-scratch textarea {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border: none;
-  resize: none;
-}
-
-.sql-editor-grid-container {
-  height: 100%;
-  overflow: auto;
-}
-
-.sql-editor-grid-container.has-no-footer {
-  height: 100%;
-}
-
 .filter-container .CodeMirror-scroll {
   min-height: 120px;
 }
@@ -274,53 +250,32 @@ input.editor-checkbox:focus {
   white-space: pre;
 }
 
-/* CSS for connection status icon */
-.connection_status .fa-custom {
-  height: 18px;
-  width: 18px;
-  display: block;
-  background-repeat: no-repeat;
-  content: '';
+.connection_status {
+  font-size: 1rem;
 }
 
-.connection_status .fa-query-tool-connected {
-  background-image: url('../img/connect.svg');
+.icon-query-tool-connected:before {
+  font-icon: url('../img/connect.svg');
 }
 
-.connection_status .fa-query-tool-disconnected {
-  background-image: url('../img/disconnect.svg');
-}
-
-.connection_status .obtaining-conn {
-  background-image: url('../img/loading.gif') !important;
-}
-
-.icon-commit, .icon-rollback, .icon-save-data-changes, .icon-view-data {
-  display: inline-block;
-  align-content: center;
-  vertical-align: middle;
-  height: 18px;
-  width: 18px;
-  background-size: 22px !important;
-  background-repeat: no-repeat;
-  background-position-x: center;
-  background-position-y: center;
+.icon-query-tool-disconnected:before {
+  font-icon: url('../img/disconnect.svg');
 }
 
-.icon-commit {
-  background-image: url('../img/commit.svg') !important;
+.icon-commit:before {
+  font-icon: url('../img/commit.svg');
 }
 
-.icon-rollback {
-  background-image: url('../img/rollback.svg') !important;
+.icon-rollback:before {
+  font-icon: url('../img/rollback.svg');
 }
 
-.icon-save-data-changes {
-  background-image: url('../img/save_data_changes.svg') !important;
+.icon-save-data-changes:before {
+  font-icon: url('../img/save_data_changes.svg');
 }
 
-.icon-view-data {
-  background-image: url('../img/view_data.svg') !important;
+.icon-view-data:before {
+  font-icon: url('../img/view_data.svg');
 }
 
 .ajs-body .warn-header {
diff --git a/web/pgadmin/tools/sqleditor/static/img/commit.svg b/web/pgadmin/tools/sqleditor/static/img/commit.svg
index 7fd36e8b8..5047ac3e6 100644
--- a/web/pgadmin/tools/sqleditor/static/img/commit.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/commit.svg
@@ -1 +1,22 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#222222;}</style></defs><title>commit</title><path class="cls-1" d="M51.89,28.51a21.22,21.22,0,0,0-6.3-2.1,45.22,45.22,0,0,0-8.67-.78,45.12,45.12,0,0,0-8.66.78,21.22,21.22,0,0,0-6.3,2.1c-1.54.89-2.32,1.85-2.32,2.88v2.88c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V31.39Q54.2,29.85,51.89,28.51Z"/><path class="cls-1" d="M36.92,51.56a49.08,49.08,0,0,1-10-1,19.79,19.79,0,0,1-7.32-2.86v3.82c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V47.74a19.67,19.67,0,0,1-7.31,2.86A49.11,49.11,0,0,1,36.92,51.56Z"/><path class="cls-1" d="M36.92,42.92a49.08,49.08,0,0,1-10-1,19.79,19.79,0,0,1-7.32-2.86v3.82c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V39.1A19.67,19.67,0,0,1,46.89,42,49.11,49.11,0,0,1,36.92,42.92Z"/><path class="cls-1" d="M25.67,12.44a11.28,11.28,0,0,1,4.23.8,11.13,11.13,0,0,1,3.6,2.28l-3.08,3.1a1.29,1.29,0,0,0-.31,1.56,1.33,1.33,0,0,0,1.32.9H41.51a1.43,1.43,0,0,0,1-.43,1.4,1.4,0,0,0,.42-1V9.56a1.34,1.34,0,0,0-.9-1.33,1.28,1.28,0,0,0-1.55.31l-2.92,2.91a17.34,17.34,0,0,0-5.51-3.52A17,17,0,0,0,19,8.05a19.15,19.15,0,0,0-3,1.6h0c-.43.3-.85.61-1.25.94l-.4.34h0a16.91,16.91,0,0,0-4.49,6,.8.8,0,0,0,0,.53.65.65,0,0,0,.31.39L14,20a.82.82,0,0,0,.6.05.72.72,0,0,0,.42-.4,11.46,11.46,0,0,1,1.12-2.11h0l.39-.54.24-.3c.18-.22.37-.44.57-.65L17.4,16l.45-.44.09-.09c.16-.15.33-.29.5-.43l.27-.2.21-.16a11.84,11.84,0,0,1,2.29-1.28A11.12,11.12,0,0,1,25.67,12.44Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 877.4 1000" style="enable-background:new 0 0 877.4 1000;" xml:space="preserve">
+<title>commit</title>
+<path d="M877.4,488.3v56.9c0,20.6-15.2,39.5-45.7,56.9c-39,20.4-81.1,34.5-124.5,41.7c-56.5,10.5-113.9,15.6-171.4,15.2
+	c-57.4,0.3-114.7-4.8-171.2-15.2c-43.2-7.3-85-21.3-123.7-41.7c-30.4-17.4-45.9-36.4-45.9-56.9v-56.9c0-19.8,15.4-39.5,45.9-56.9
+	c39.1-20.3,81.1-34.3,124.5-41.5c56.4-10.6,113.7-15.8,171.2-15.4c57.5-0.4,114.9,4.8,171.4,15.4c43.4,7.2,85.4,21.2,124.5,41.5
+	C862.4,449,877.4,468,877.4,488.3z M535.7,887c-66.4,0.2-132.6-6.4-197.7-19.8c-51.5-9-100.7-28.2-144.7-56.5v75.5
+	c0,19.8,15.4,39.5,45.9,56.9c39,20.4,81.1,34.5,124.5,41.7c56.4,10.5,113.8,15.6,171.2,15.2c57.5,0.3,114.9-4.7,171.4-15.2
+	c43.5-7.2,85.5-21.3,124.5-41.7c30.4-17.4,45.7-36.4,45.7-56.9v-74.7c-43.9,28.4-93,47.6-144.5,56.5
+	C667.5,881,601.6,887.4,535.7,887z M535.7,716.3c-66.4,0.2-132.6-6.4-197.7-19.8c-51.5-9-100.7-28.2-144.7-56.5v75.5
+	c0,19.8,15.4,39.5,45.9,56.9c39,20.4,81.1,34.5,124.5,41.7c56.4,10.5,113.8,15.6,171.2,15.2c57.5,0.3,114.9-4.7,171.4-15.2
+	c43.5-7.2,85.5-21.3,124.5-41.7c30.4-17.4,45.7-36.4,45.7-56.9v-74.7c-43.6,28.5-92.4,48-143.7,57.3
+	C668,710.8,601.9,716.9,535.7,716.3z M313.4,113.7c28.6-0.1,57,5.2,83.6,15.8c26.4,10.3,50.6,25.6,71.2,45.1l-60.9,61.3
+	c-8.9,7.6-11.4,20.4-6.1,30.8c3.8,11.1,14.4,18.3,26.1,17.8h199.2c7.5-0.1,14.6-3.2,19.8-8.5c5.3-5.2,8.3-12.3,8.3-19.8V56.8
+	c0.6-11.7-6.7-22.4-17.8-26.3c-10.4-5.3-23.1-2.7-30.6,6.1l-57.7,57.5C516.9,64.2,480,40.6,439.6,24.5C356.6-9,263.8-8.1,181.5,26.9
+	c-20.7,8.8-40.5,19.3-59.3,31.6l0,0c-8.5,5.9-16.8,12.1-24.7,18.6l-7.9,6.7l0,0c-38.1,32.4-68.4,72.9-88.7,118.6
+	c-1.2,3.4-1.2,7.1,0,10.5c0.9,3.3,3.1,6.1,6.1,7.7l75.7,42.5c3.7,1.8,7.9,2.2,11.9,1c3.8-1.4,6.8-4.2,8.3-7.9
+	c5.9-14.6,13.3-28.6,22.1-41.7l0,0l7.7-10.7l4.7-5.9c3.6-4.3,7.3-8.7,11.3-12.8l1.2-1l8.9-8.7l1.8-1.8c3.2-3,6.5-5.7,9.9-8.5l5.3-4
+	l4.2-3.2c14.1-10.1,29.3-18.6,45.3-25.3C253,120.3,283,113.9,313.4,113.7z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/img/connect.svg b/web/pgadmin/tools/sqleditor/static/img/connect.svg
index 9170fc9b5..c311f2868 100644
--- a/web/pgadmin/tools/sqleditor/static/img/connect.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/connect.svg
@@ -1 +1,23 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#2c76b4;}</style></defs><title>connect</title><path class="cls-1" d="M21.27,4.25c.12-.12.12-.18,0-.29-.32-.3-.63-.61-.92-.93-.12-.13-.19-.13-.31,0-.69.71-1.4,1.4-2.1,2.11L17.7,4.9a4.22,4.22,0,0,0-5.26-.82,9.75,9.75,0,0,0-1.69,1.46l-.58.55c-.18-.18-.36-.35-.53-.53s-.14-.1-.23,0c-.31.33-.63.65-1,1-.12.12-.13.18,0,.3.69.67,1.36,1.37,2.05,2,.15.14.13.21,0,.34l-2.05,2c-.12.12-.12.18,0,.29.32.3.63.61.92.93.12.13.19.13.31,0l2-2.05c.12-.13.19-.15.33,0,.61.63,1.24,1.25,1.87,1.87.13.12.12.19,0,.31l-2.07,2.06c-.11.11-.13.17,0,.29q.47.44.91.91c.13.14.2.16.35,0,.67-.69,1.36-1.36,2-2.05.12-.13.19-.12.31,0l2.08,2.09c.09.1.15.12.25,0,.32-.34.66-.67,1-1,.1-.1.07-.15,0-.23l-.61-.6c.48-.45,1-.86,1.41-1.32a4.13,4.13,0,0,0,1.2-3.67,4,4,0,0,0-1.42-2.55c-.14-.12-.14-.19,0-.32C20,5.56,20.61,4.9,21.27,4.25Zm-3.05,7.41c-.43.39-.81.83-1.2,1.23L11.37,7.25l1.42-1.34a2.52,2.52,0,0,1,3.48-.06C17,6.55,17.74,7.27,18.43,8A2.51,2.51,0,0,1,18.22,11.67Z"/><path class="cls-1" d="M15.52,17.16c-2-1.95-8-8-9-9C6.4,8,6.34,8,6.22,8.14c-.3.32-.62.64-.94.94-.11.11-.14.17,0,.28s.35.33.6.57c-.49.45-1,.88-1.42,1.34a4.16,4.16,0,0,0-1.12,4,4.37,4.37,0,0,0,1.33,2.22c.13.13.13.2,0,.33-.65.63-1.28,1.28-1.93,1.91-.13.13-.12.19,0,.31.32.3.62.61.92.92.11.12.18.12.29,0,.53-.55,1.07-1.08,1.62-1.62.15-.15.29-.42.47-.41s.31.25.47.39a4.21,4.21,0,0,0,5.81,0c.5-.47.94-1,1.43-1.53.25.26.43.44.6.63s.14.11.24,0c.3-.32.61-.63.93-.92C15.67,17.38,15.68,17.31,15.52,17.16Zm-3-.38c-.43.43-.84.87-1.27,1.29a2.53,2.53,0,0,1-3.74-.17c-.53-.57-1.1-1.11-1.66-1.64a2.58,2.58,0,0,1,0-3.93c.41-.41.79-.84,1.19-1.27l5.52,5.52C12.57,16.66,12.58,16.7,12.49,16.78Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 1033.2 1000" style="enable-background:new 0 0 1033.2 1000;" xml:space="preserve">
+<title>connect</title>
+<path d="M1029.1,70.6c5.5-5.5,5.5-11.1,0-16.6c-16.6-11.1-38.8-33.2-55.4-49.9c-5.5-5.5-11.1-5.5-16.6,0
+	c-38.8,38.8-77.6,77.6-116.3,116.3l-11.1-11.1C757.6,26.3,635.7,9.7,536,65.1c-33.2,22.2-66.5,49.9-94.2,83.1l-33.2,27.7
+	c-5.5-11.1-16.6-22.2-27.7-27.7c-11.1-11.1-5.5-5.5-11.1,0c-16.6,16.6-33.2,33.2-55.4,55.4c-5.5,5.5-5.5,11.1,0,16.6
+	C353.2,259,392,297.8,430.7,331c5.5,5.5,5.5,11.1,0,16.6l-83.1,77.6c-66.5-60.9-116.3-116.3-138.5-133c-5.5-11.1-11.1-11.1-16.6-5.5
+	c-16.6,22.2-33.2,38.8-49.9,55.4c-5.5,5.5-5.5,11.1,0,16.6s16.6,16.6,33.2,33.2c-27.7,27.7-55.4,49.9-77.6,72
+	c-60.9,55.4-83.1,144-60.9,221.6c11.1,49.9,38.8,88.6,72,121.9c5.5,5.5,5.5,11.1,0,16.6c-33.2,33.2-72,72-105.3,105.3
+	c-5.5,5.5-5.5,11.1,0,16.6c16.6,16.6,33.2,33.2,49.9,49.9c5.5,5.5,11.1,5.5,16.6,0c27.7-27.7,60.9-60.9,88.6-88.6
+	c5.5-5.5,16.6-22.2,27.7-22.2s16.6,11.1,27.7,22.2c88.6,88.6,232.7,88.6,321.3,0c27.7-27.7,49.9-55.4,77.6-83.1
+	c11.1,16.6,22.2,22.2,33.2,33.2c11.1,11.1,5.5,5.5,11.1,0c16.6-16.6,33.2-33.2,49.9-49.9c5.5-5.5,11.1-11.1,0-16.6
+	c-27.7-27.7-66.5-60.9-105.3-105.3c27.7-27.7,55.4-55.4,77.6-83.1c5.5-5.5,11.1-5.5,16.6,0L813,718.8c5.5,5.5,11.1,5.5,11.1,0
+	c16.6-16.6,38.8-38.8,55.4-55.4c5.5-5.5,5.5-5.5,0-11.1l-27.7-38.8c27.7-22.2,55.4-49.9,77.6-72c55.4-49.9,77.6-127.4,66.5-205
+	c-5.5-55.4-33.2-105.3-77.6-138.5c-5.5-5.5-5.5-11.1,0-16.6C957.1,148.2,990.3,109.4,1029.1,70.6z M541.6,768.7
+	c-22.2,22.2-44.3,49.9-72,72c-55.4,55.4-144,55.4-199.4,0c-33.2-27.8-48.6-44.9-99.7-99.7c-57.2-53.5-66.5-144-16.6-199.4
+	c5.5-5.5,11.1-11.1,16.6-16.6c22.2-22.2,44.3-44.3,66.5-72l304.7,304.7C547.1,763.2,547.1,763.2,541.6,768.7L541.6,768.7z
+	 M613.6,530.5L536,613.6c-38.8-38.8-83.1-83.1-121.9-121.9l77.6-83.1c5.5-5.5,11.1-11.1,16.6,0c33.2,33.2,66.5,66.5,105.3,105.3
+	C624.7,524.9,624.7,524.9,613.6,530.5z M868.4,475.1l-5.5,5.5l0,0c-22.2,22.2-44.3,44.3-66.5,66.5L480.6,236.8l77.6-72
+	c55.4-49.9,138.5-55.4,193.9-5.5c38.8,38.8,77.6,83.1,116.3,121.9C923.8,336.6,923.8,425.2,868.4,475.1z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/img/disconnect.svg b/web/pgadmin/tools/sqleditor/static/img/disconnect.svg
index 113b7588d..1fe248042 100644
--- a/web/pgadmin/tools/sqleditor/static/img/disconnect.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/disconnect.svg
@@ -1 +1,24 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#d0021b;}</style></defs><title>disconnect</title><path class="cls-1" d="M22.49,2.73c.12-.11.12-.18,0-.29-.31-.3-.62-.6-.91-.91-.12-.13-.18-.13-.31,0-.68.69-1.37,1.38-2.07,2.07L19,3.36a4.15,4.15,0,0,0-5.18-.81A9.59,9.59,0,0,0,12.14,4l-.57.54c-.18-.17-.36-.34-.53-.52s-.13-.09-.22,0c-.31.32-.62.64-.95.94-.12.11-.13.18,0,.3.68.66,1.34,1.34,2,2,.14.14.12.21,0,.34l-2,2c-.12.11-.12.18,0,.29.31.29.62.6.91.91.12.13.18.12.3,0l2-2c.12-.13.19-.15.32,0,.6.62,1.22,1.23,1.84,1.84.12.12.12.18,0,.3l-2,2c-.11.11-.13.17,0,.29q.46.43.89.89c.13.13.2.15.34,0,.66-.68,1.34-1.34,2-2,.12-.13.18-.12.3,0l2,2.05c.09.09.14.11.24,0,.32-.33.65-.66,1-1,.1-.09.07-.14,0-.22l-.6-.59c.47-.44.95-.85,1.38-1.3A4.06,4.06,0,0,0,22,7.47,4,4,0,0,0,20.56,5c-.14-.12-.14-.18,0-.31C21.2,4,21.84,3.36,22.49,2.73Zm-3,7.29c-.42.38-.8.81-1.18,1.21L12.75,5.68l1.39-1.32a2.48,2.48,0,0,1,3.42-.06C18.3,5,19,5.7,19.69,6.44A2.47,2.47,0,0,1,19.48,10Z"/><path class="cls-1" d="M14.1,18.75c-1.93-1.92-7.84-7.83-8.87-8.87-.11-.11-.16-.13-.28,0-.3.32-.61.63-.93.93-.11.1-.14.17,0,.28s.35.33.59.56c-.48.45-1,.86-1.4,1.32a4.09,4.09,0,0,0-1.1,3.93,4.3,4.3,0,0,0,1.31,2.19c.13.13.13.2,0,.33-.64.62-1.26,1.26-1.9,1.88-.13.12-.12.19,0,.3.31.29.61.6.91.91.11.12.17.12.29,0,.52-.54,1.06-1.07,1.59-1.59.15-.15.28-.41.46-.41s.31.24.46.38a4.14,4.14,0,0,0,5.72,0c.5-.46.92-1,1.4-1.51.25.26.42.43.59.62s.14.11.24,0c.3-.31.6-.62.91-.91C14.24,19,14.25,18.9,14.1,18.75Zm-3-.37c-.42.42-.82.86-1.25,1.27a2.49,2.49,0,0,1-3.68-.17c-.52-.56-1.08-1.09-1.64-1.62a2.54,2.54,0,0,1,0-3.87c.4-.4.78-.83,1.17-1.25l5.43,5.43C11.2,18.25,11.21,18.29,11.12,18.38Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 995.3 1000" style="enable-background:new 0 0 995.3 1000;" xml:space="preserve">
+<title>disconnect</title>
+<path d="M991.7,60.3c4.7-4.7,4.7-9.5,0-14.2c-14.2-14.2-28.4-28.4-42.6-42.6c-4.7-4.7-9.5-4.7-14.2,0
+	c-33.1,33.1-66.2,66.2-99.3,99.3l-9.5-9.5C764.8,22.5,660.8,8.3,580.4,55.6C552,74.5,523.6,98.1,500,121.7l-28.4,23.6
+	c-4.7-4.7-14.2-14.2-23.6-23.6c-9.5-9.5-4.7-4.7-9.5,0c-14.2,14.2-28.4,28.4-47.3,42.6c-4.7,4.7-4.7,9.5,0,14.2
+	c33.1,33.1,61.5,61.5,94.6,94.6c4.7,4.7,4.7,9.5,0,14.2l-94.6,94.6c-4.7,4.7-4.7,9.5,0,14.2c14.2,14.2,28.4,28.4,42.6,42.6
+	c4.7,4.7,9.5,4.7,14.2,0l94.6-94.6c4.7-4.7,9.5-9.5,14.2,0c28.4,28.4,56.7,56.7,85.1,85.1c4.7,4.7,4.7,9.5,0,14.2l-94.6,94.6
+	c-4.7,4.7-4.7,9.5,0,14.2c14.2,14.2,28.4,28.4,42.6,42.6c4.7,4.7,9.5,4.7,14.2,0c33.1-33.1,61.5-61.5,94.6-94.6
+	c4.7-4.7,9.5-4.7,14.2,0l94.6,94.6c4.7,4.7,4.7,4.7,9.5,0c14.2-14.2,28.4-33.1,47.3-47.3c4.7-4.7,4.7-4.7,0-9.5l-28.4-28.4
+	c23.6-18.9,47.3-37.8,66.2-61.5c47.3-42.6,66.2-108.7,56.7-170.2c-9.5-47.3-33.1-89.8-66.2-118.2c-4.7-4.7-4.7-9.5,0-14.2
+	C930.3,121.7,958.6,93.4,991.7,60.3z M854.6,400.7C849.9,405.4,849.9,405.4,854.6,400.7L854.6,400.7c-23.6,23.6-42.6,42.6-56.7,61.5
+	l-264.8-260l66.2-61.5c42.6-42.6,113.5-47.3,160.8-4.7c33.1,33.1,66.2,66.2,99.3,99.3C901.9,282.5,901.9,358.2,854.6,400.7z
+	 M173.8,400.7c-4.7-4.7-4.7-4.7-9.5,0c-14.2,14.2-28.4,28.4-42.6,42.6c-4.7,4.7-4.7,9.5,0,14.2s14.2,14.2,28.4,28.4
+	c-23.6,23.6-47.3,42.6-66.2,61.5c-47.3,47.3-70.9,118.2-52,184.4c9.5,37.8,33.1,75.7,61.5,104c4.7,4.7,4.7,9.5,0,14.2
+	C65,878.3,31.9,911.3,3.5,939.7c-4.7,4.7-4.7,9.5,0,14.2c14.2,14.2,28.4,28.4,42.6,42.6c4.7,4.7,9.5,4.7,14.2,0
+	c23.6-23.6,52-52,75.7-75.7c9.5-9.5,14.2-18.9,23.6-18.9c9.5,0,14.2,9.5,23.6,18.9c75.7,70.9,193.9,70.9,269.5,0
+	c23.6-23.6,42.6-47.3,66.2-70.9c9.5,14.2,18.9,18.9,28.4,28.4c9.5,9.5,4.7,4.7,9.5,0c14.2-14.2,28.4-28.4,42.6-42.6
+	c4.7-4.7,9.5-9.5,0-14.2C504.7,727,225.8,448,173.8,400.7z M452.7,802.6L452.7,802.6c-18.9,18.9-37.8,42.6-61.5,61.5
+	c-47.3,47.3-118.2,47.3-165.5,0c-4.7-4.7-4.7-4.7-9.5-9.5c-23.6-28.4-52-52-75.7-75.7c-52-42.6-56.7-118.2-14.2-170.2
+	c4.7-4.7,9.5-9.5,14.2-14.2c18.9-18.9,37.8-37.8,56.7-56.7l255.3,255.3C457.4,793.1,457.4,797.9,452.7,802.6z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/img/rollback.svg b/web/pgadmin/tools/sqleditor/static/img/rollback.svg
index 89713cdf4..c0566447f 100644
--- a/web/pgadmin/tools/sqleditor/static/img/rollback.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/rollback.svg
@@ -1 +1,22 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#222222;}</style></defs><title>rollback</title><path class="cls-1" d="M53.89,28.51a21.22,21.22,0,0,0-6.3-2.1,45.22,45.22,0,0,0-8.67-.78,45.12,45.12,0,0,0-8.66.78,21.22,21.22,0,0,0-6.3,2.1c-1.54.89-2.32,1.85-2.32,2.88v2.88c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V31.39Q56.2,29.85,53.89,28.51Z"/><path class="cls-1" d="M38.92,51.56a49.08,49.08,0,0,1-10-1,19.79,19.79,0,0,1-7.32-2.86v3.82c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V47.74a19.67,19.67,0,0,1-7.31,2.86A49.11,49.11,0,0,1,38.92,51.56Z"/><path class="cls-1" d="M38.92,42.92a49.08,49.08,0,0,1-10-1,19.79,19.79,0,0,1-7.32-2.86v3.82c0,1,.78,2,2.32,2.88a20.92,20.92,0,0,0,6.3,2.11,46,46,0,0,0,8.66.77,46.07,46.07,0,0,0,8.67-.77,20.92,20.92,0,0,0,6.3-2.11q2.31-1.32,2.31-2.88V39.1A19.67,19.67,0,0,1,48.89,42,49.11,49.11,0,0,1,38.92,42.92Z"/><path class="cls-1" d="M25.08,12.44a11.28,11.28,0,0,0-4.23.8,11.13,11.13,0,0,0-3.6,2.28l3.08,3.1a1.29,1.29,0,0,1,.31,1.56,1.33,1.33,0,0,1-1.32.9H9.24a1.43,1.43,0,0,1-1-.43,1.4,1.4,0,0,1-.42-1V9.56a1.34,1.34,0,0,1,.9-1.33,1.28,1.28,0,0,1,1.55.31l2.92,2.91a17.34,17.34,0,0,1,5.51-3.52,17,17,0,0,1,13.1.12,19.15,19.15,0,0,1,3,1.6h0c.43.3.85.61,1.25.94l.4.34h0a16.91,16.91,0,0,1,4.49,6,.8.8,0,0,1,0,.53.65.65,0,0,1-.31.39L36.8,20a.82.82,0,0,1-.6.05.72.72,0,0,1-.42-.4,11.46,11.46,0,0,0-1.12-2.11h0q-.19-.28-.39-.54l-.24-.3c-.18-.22-.37-.44-.57-.65L33.35,16l-.45-.44-.09-.09c-.16-.15-.33-.29-.5-.43l-.27-.2-.21-.16a11.84,11.84,0,0,0-2.29-1.28A11.12,11.12,0,0,0,25.08,12.44Z"/></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 956.7 1000" style="enable-background:new 0 0 956.7 1000;" xml:space="preserve">
+<title>rollback</title>
+<path d="M956.7,488.3v56.9c0,20.6-15.2,39.5-45.7,56.9c-39,20.4-81.1,34.5-124.5,41.7C730,654.3,672.6,659.4,615.1,659
+	c-57.4,0.3-114.7-4.8-171.2-15.2c-43.2-7.3-85-21.3-123.7-41.7c-30.4-17.4-45.9-36.4-45.9-56.9v-56.9c0-19.8,15.4-39.5,45.9-56.9
+	c39.1-20.3,81.1-34.3,124.5-41.5c56.4-10.6,113.7-15.8,171.2-15.4c57.5-0.4,114.9,4.8,171.4,15.4c43.4,7.2,85.4,21.2,124.5,41.5
+	C941.7,449,956.7,468,956.7,488.3z M615.1,886.9c-66.4,0.2-132.6-6.4-197.7-19.8c-51.5-9-100.7-28.2-144.7-56.5v75.5
+	c0,19.8,15.4,39.5,45.9,56.9c39,20.4,81.1,34.5,124.5,41.7c56.4,10.5,113.8,15.6,171.2,15.2c57.5,0.3,114.9-4.7,171.4-15.2
+	c43.5-7.2,85.5-21.3,124.5-41.7c30.4-17.4,45.7-36.4,45.7-56.9v-74.7c-43.9,28.4-93,47.6-144.5,56.5
+	C746.8,880.9,681,887.3,615.1,886.9z M615.1,716.2c-66.4,0.2-132.6-6.4-197.7-19.8c-51.5-9-100.7-28.2-144.7-56.5v75.5
+	c0,19.8,15.4,39.5,45.9,56.9c39,20.4,81.1,34.5,124.5,41.7c56.4,10.5,113.8,15.6,171.2,15.2c57.5,0.3,114.9-4.7,171.4-15.2
+	c43.5-7.2,85.5-21.3,124.5-41.7c30.4-17.4,45.7-36.4,45.7-56.9v-74.7c-43.6,28.5-92.4,48-143.7,57.3
+	C747.3,710.7,681.3,716.8,615.1,716.2z M429.7,131.7c16,6.7,31.2,15.2,45.3,25.3l4.2,3.2l5.3,4c3.4,2.8,6.7,5.5,9.9,8.5l1.8,1.8
+	l8.9,8.7l2.2,2.4c4,4.2,7.7,8.5,11.3,12.8l4.7,5.9c2.5,3.4,5.1,7,7.7,10.7l0,0c8.8,13.1,16.2,27.1,22.1,41.7
+	c1.5,3.7,4.5,6.6,8.3,7.9c3.9,1.2,8.2,0.8,11.9-1l75.1-42.7c3-1.7,5.2-4.4,6.1-7.7c1.2-3.4,1.2-7.1,0-10.5
+	c-20.3-45.7-50.7-86.2-88.7-118.6l0,0l-7.9-6.7c-7.9-6.5-16.2-12.6-24.7-18.6l0,0c-18.8-12.3-38.6-22.9-59.3-31.6
+	C391.3-8.2,298-9.1,214.9,24.8C174.5,40.8,137.5,64.5,106,94.3L48.5,36.6c-7.6-8.9-20.2-11.4-30.6-6.1C6.7,34.3-0.5,45.1,0,56.8V256
+	c0,7.4,3,14.6,8.3,19.8c5.2,5.3,12.3,8.4,19.8,8.5h199.6c11.7,0.5,22.3-6.7,26.1-17.8c5.3-10.5,2.8-23.2-6.1-30.8l-60.9-61.3
+	c20.6-19.5,44.8-34.8,71.2-45.1c26.6-10.6,55-16,83.6-15.8C371.9,113.4,401.9,119.6,429.7,131.7z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg b/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg
index 09ead9286..1b1140237 100644
--- a/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/save_data_changes.svg
@@ -1,12 +1,32 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 1792 1792;" xml:space="preserve" width="1792" height="1792"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 1181.8 1000" style="enable-background:new 0 0 1181.8 1000;" xml:space="preserve">
 <style type="text/css">
 	.st0{fill:#222222;}
-	.st1{fill:#FFFFFF;}
 </style>
 <title>save_data_changes</title>
-
-
-<g class="currentLayer" style=""><title>Layer 1</title><path class="st0 selected" d="M614.0211181640625,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,1389.2831683158875 614.0211181640625,1381.039882183075 zM614.0211181640625,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,1048.918300151825 614.0211181640625,1040.6748919487 zM1069.7584228515625,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,1389.2831683158875 1069.7584228515625,1381.039882183075 zM614.0211181640625,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,708.5541033744812 614.0211181640625,700.3109393119812 zM1069.7584228515625,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,1048.918300151825 1069.7584228515625,1040.6748919487 zM1525.49560546875,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,1389.2831683158875 1525.49560546875,1381.039882183075 zM1069.7584228515625,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,708.5541033744812 1069.7584228515625,700.3109393119812 zM1525.49560546875,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,1048.918300151825 1525.49560546875,1040.6748919487 zM1525.49560546875,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,708.5541033744812 1525.49560546875,700.3109393119812 zM1639.4296875,416.6754412651062 v964.3636474609375 c0,39 -13.974724769592285,72.41590881347656 -41.835166931152344,100.15908813476562 s-61.41758346557617,41.65909194946289 -100.5824203491211,41.65909194946289 H300.70343017578125 c-39.16483688354492,0 -72.72197723388672,-13.915908813476562 -100.5824203491211,-41.65909194946289 s-41.835166931152344,-61.15909194946289 -41.835166931152344,-100.15908813476562 V416.6754412651062 c0,-39 13.974724769592285,-72.41590881347656 41.835166931152344,-100.15908813476562 s61.41758346557617,-41.65909194946289 100.5824203491211,-41.65909194946289 h1196.3077392578125 c39.16483688354492,0 72.72197723388672,13.915908813476562 100.5824203491211,41.65909194946289 S1639.4296875,377.6754412651062 1639.4296875,416.6754412651062 z" id="svg_1"/><g id="svg_2" class="selected">
-	<path class="st0" d="M898.8562622070312,1342.7491106987 c-22.69780158996582,0 -43.081321716308594,-8.331817626953125 -58.92527389526367,-24.19772720336914 l-289.4637451171875,-288.6886291503906 c-16.378021240234375,-15.51136302947998 -25.012088775634766,-35.897727966308594 -25.012088775634766,-58.943180084228516 c0,-22.868181228637695 8.278021812438965,-42.72272872924805 24.656044006347656,-59.03181457519531 l32.84505844116211,-33.150001525878906 c0.17802198231220245,-0.1772727221250534 0.44505494832992554,-0.4431818127632141 0.6230769157409668,-0.6204545497894287 c16.46703338623047,-15.51136302947998 36.761539459228516,-23.665908813476562 58.83626174926758,-23.665908813476562 c22.69780158996582,0 43.081321716308594,8.331817626953125 58.92527389526367,24.19772720336914 l85.27252960205078,84.91363525390625 V715.5564227104187 c0,-22.247726440429688 8.545055389404297,-42.54545593261719 24.745054244995117,-58.677268981933594 s36.58351516723633,-24.640907287597656 58.92527389526367,-24.640907287597656 h56.96703338623047 c22.341758728027344,0 42.72527313232422,8.5090913772583 58.92527389526367,24.640907287597656 s24.745054244995117,36.429542541503906 24.745054244995117,58.677268981933594 v247.8272705078125 l85.27252960205078,-84.91363525390625 c15.932967185974121,-15.8659086227417 36.227474212646484,-24.19772720336914 58.92527389526367,-24.19772720336914 c22.074724197387695,0 42.45824432373047,8.154544830322266 58.83626174926758,23.665908813476562 c0.17802198231220245,0.1772727221250534 0.3560439646244049,0.3545454442501068 0.5340659618377686,0.5318182110786438 l33.379119873046875,33.2386360168457 c0.17802198231220245,0.1772727221250534 0.3560439646244049,0.3545454442501068 0.5340659618377686,0.5318182110786438 c15.576923370361328,16.397727966308594 23.765933990478516,36.606815338134766 23.765933990478516,58.5886344909668 c0,22.602272033691406 -8.367033004760742,42.900001525878906 -24.299999237060547,58.677268981933594 l-289.73077392578125,288.95452880859375 c-0.17802198231220245,0.1772727221250534 -0.3560439646244049,0.3545454442501068 -0.5340659618377686,0.5318182110786438 C941.3145141601562,1334.5058245658875 920.9309692382812,1342.7491106987 898.8562622070312,1342.7491106987 z" id="svg_3"/>
-	<path class="st1" d="M927.3397827148438,658.8291277885437 c15.398900985717773,0 28.75054931640625,5.5840911865234375 40.05494689941406,16.84090805053711 s16.91208839416504,24.55227279663086 16.91208839416504,39.8863639831543 v312 l130.84616088867188,-130.2954559326172 c10.948351860046387,-10.902273178100586 24.299999237060547,-16.397727966308594 40.05494689941406,-16.397727966308594 c15.398900985717773,0 28.928571701049805,5.49545431137085 40.5,16.397727966308594 l33.379119873046875,33.2386360168457 c10.948351860046387,11.522727012634277 16.46703338623047,24.995454788208008 16.46703338623047,40.32954406738281 c0,15.688636779785156 -5.518681049346924,28.98409080505371 -16.46703338623047,39.8863639831543 l-289.73077392578125,288.95452880859375 c-11.571428298950195,10.902273178100586 -25.101099014282227,16.397727966308594 -40.5,16.397727966308594 c-15.754945755004883,0 -29.10659408569336,-5.49545431137085 -40.05494689941406,-16.397727966308594 l-289.73077392578125,-288.95452880859375 c-11.30439567565918,-10.636363983154297 -16.91208839416504,-23.93181800842285 -16.91208839416504,-39.8863639831543 c0,-15.688636779785156 5.607692718505859,-29.072725296020508 16.91208839416504,-40.32954406738281 l32.93406677246094,-33.2386360168457 c11.571428298950195,-10.902273178100586 25.101099014282227,-16.397727966308594 40.5,-16.397727966308594 c15.754945755004883,0 29.10659408569336,5.49545431137085 40.05494689941406,16.397727966308594 l130.84616088867188,130.2954559326172 v-312 c0,-15.334090232849121 5.607692718505859,-28.629545211791992 16.91208839416504,-39.8863639831543 s24.656044006347656,-16.84090805053711 40.05494689941406,-16.84090805053711 L927.3397827148438,658.8291277885437 M927.3397827148438,605.647304058075 h-56.96703338623047 c-29.64065933227539,0 -56.52198028564453,11.168182373046875 -77.79560852050781,32.4409065246582 c-21.36263656616211,21.272727966308594 -32.57802200317383,48.04090881347656 -32.57802200317383,77.46818542480469 v183.56591796875 l-39.69889831542969,-39.53181457519531 c-21.006593704223633,-20.918182373046875 -47.88791275024414,-31.997726440429688 -77.79560852050781,-31.997726440429688 c-29.017581939697266,0 -55.72087860107422,10.725000381469727 -77.17252349853516,30.934091567993164 c-0.44505494832992554,0.4431818127632141 -0.8901098966598511,0.8863636255264282 -1.3351647853851318,1.2409090995788574 l-32.84505844116211,33.150001525878906 c-21.184614181518555,21.18408966064453 -32.400001525878906,48.04090881347656 -32.400001525878906,77.8227310180664 c0,30.402271270751953 11.393406867980957,57.259090423583984 33.023075103759766,77.91136169433594 l289.28570556640625,288.5113525390625 c21.006593704223633,20.918182373046875 47.976924896240234,31.997726440429688 77.88461303710938,31.997726440429688 c29.017581939697266,0 55.72087860107422,-10.725000381469727 77.17252349853516,-30.934091567993164 c0.3560439646244049,-0.3545454442501068 0.7120879292488098,-0.7090908885002136 1.068131923675537,-1.0636364221572876 l289.73077392578125,-288.95452880859375 c21.006593704223633,-20.918182373046875 32.0439567565918,-47.686363220214844 32.0439567565918,-77.46818542480469 c0,-28.89545249938965 -10.770330429077148,-55.48636245727539 -31.064836502075195,-76.84772491455078 c-0.3560439646244049,-0.3545454442501068 -0.7120879292488098,-0.7090908885002136 -1.068131923675537,-1.0636364221572876 l-33.379119873046875,-33.2386360168457 c-0.3560439646244049,-0.3545454442501068 -0.7120879292488098,-0.7090908885002136 -1.068131923675537,-1.0636364221572876 c-21.451648712158203,-20.209089279174805 -48.154945373535156,-30.934091567993164 -77.17252349853516,-30.934091567993164 c-29.907691955566406,0 -56.78900909423828,11.079545021057129 -77.79560852050781,31.997726440429688 l-39.69889831542969,39.53181457519531 V715.5564227104187 c0,-29.515907287597656 -11.215385437011719,-56.28409194946289 -32.57802200317383,-77.46818542480469 C983.8617553710938,616.904139995575 956.98046875,605.647304058075 927.3397827148438,605.647304058075 L927.3397827148438,605.647304058075 z" id="svg_4"/>
-</g></g></svg>
\ No newline at end of file
+<path class="st0" d="M869.8,510.7c12.4,13.1,19,29.3,19,46.9c0,18.1-6.7,34.4-19.4,47L638.2,836.2c-0.1,0.1-0.3,0.3-0.4,0.4
+	c-13,12.4-29.3,19-46.9,19c-18.1,0-34.4-6.7-47-19.4L312.9,605c-13.1-12.4-20-28.8-20-47.2c0-18.3,6.6-34.2,19.7-47.3l26.2-26.6
+	c0.1-0.1,0.4-0.4,0.5-0.5c13.1-12.4,29.3-19,46.9-19c18.1,0,34.4,6.7,47,19.4l68,68V353.1c0-17.8,6.8-34.1,19.7-47
+	c12.9-12.9,29.2-19.7,47-19.7h45.5c17.8,0,34.1,6.8,47,19.7c12.9,12.9,19.7,29.2,19.7,47v198.6l68-68c12.7-12.7,28.9-19.4,47-19.4
+	c17.6,0,33.9,6.5,46.9,19c0.1,0.1,0.3,0.3,0.4,0.4l26.6,26.6C869.5,510.4,869.7,510.6,869.8,510.7z M1181.8,113.6v772.7
+	c0,31.2-11.2,58-33.4,80.3c-22.2,22.2-49,33.4-80.3,33.4H113.6c-31.2,0-58-11.2-80.3-33.4S0,917.6,0,886.4V113.6
+	c0-31.2,11.2-58,33.4-80.3S82.4,0,113.6,0h954.5c31.2,0,58,11.2,80.3,33.4C1170.7,55.6,1181.8,82.4,1181.8,113.6z M90.9,340.9
+	c0,6.6,2.1,12.1,6.4,16.3c4.3,4.3,9.7,6.4,16.3,6.4h227.3c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3V204.5
+	c0-6.6-2.1-12.1-6.4-16.3c-4.3-4.3-9.7-6.4-16.3-6.4H113.6c-6.6,0-12.1,2.1-16.3,6.4c-4.3,4.3-6.4,9.7-6.4,16.3V340.9z M363.6,750
+	c0-6.6-2.1-12.1-6.4-16.3c-4.3-4.3-9.7-6.4-16.3-6.4H113.6c-6.6,0-12.1,2.1-16.3,6.4c-4.3,4.3-6.4,9.7-6.4,16.3v136.4
+	c0,6.6,2.1,12.1,6.4,16.3c4.3,4.3,9.7,6.4,16.3,6.4h227.3c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3V750z M1090.9,750
+	c0-6.6-2.1-12.1-6.4-16.3c-4.3-4.3-9.7-6.4-16.3-6.4H840.9c-6.6,0-12.1,2.1-16.3,6.4c-4.3,4.3-6.4,9.7-6.4,16.3v136.4
+	c0,6.6,2.1,12.1,6.4,16.3s9.7,6.4,16.3,6.4h227.3c6.6,0,12.1-2.1,16.3-6.4s6.4-9.7,6.4-16.3V750z M1090.9,477.3
+	c0-6.6-2.1-12.1-6.4-16.3s-9.7-6.4-16.3-6.4H840.9c-0.5,0-0.9,0-1.4,0.1c-13.4-7.7-28.3-11.7-44-11.7c-23.9,0-45.3,8.9-62.1,25.6
+	l-6.2,6.2c-0.5-5.5-2.6-10.1-6.3-13.8c-4.3-4.3-9.7-6.4-16.3-6.4h-2.8v-90.9h2.8c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3
+	V204.5c0-6.6-2.1-12.1-6.4-16.3c-4.3-4.3-9.7-6.4-16.3-6.4H477.3c-6.6,0-12.1,2.1-16.3,6.4c-4.3,4.3-6.4,9.7-6.4,16.3v136.4
+	c0,6.6,2.1,12.1,6.4,16.3c4.3,4.3,9.7,6.4,16.3,6.4h2.8v90.9h-2.8c-6.6,0-12.1,2.1-16.3,6.4c-3.7,3.7-5.8,8.3-6.2,13.8l-6.2-6.2
+	c-16.8-16.8-38.2-25.6-62.1-25.6c-15.8,0-30.8,4-44,11.7c-0.4,0-0.9-0.1-1.4-0.1H113.6c-6.6,0-12.1,2.1-16.3,6.4
+	c-4.3,4.3-6.4,9.7-6.4,16.3v136.4c0,6.6,2.1,12.1,6.4,16.3c4.3,4.3,9.7,6.4,16.3,6.4h200.7l140.2,140.4v109.6
+	c0,6.6,2.1,12.1,6.4,16.3s9.7,6.4,16.3,6.4h227.3c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3V777.2l140.6-140.8h200.3
+	c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3V477.3z M1090.9,204.5c0-6.6-2.1-12.1-6.4-16.3c-4.3-4.3-9.7-6.4-16.3-6.4H840.9
+	c-6.6,0-12.1,2.1-16.3,6.4c-4.3,4.3-6.4,9.7-6.4,16.3v136.4c0,6.6,2.1,12.1,6.4,16.3c4.3,4.3,9.7,6.4,16.3,6.4h227.3
+	c6.6,0,12.1-2.1,16.3-6.4c4.3-4.3,6.4-9.7,6.4-16.3V204.5z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/img/view_data.svg b/web/pgadmin/tools/sqleditor/static/img/view_data.svg
index 8a1a382b4..803d12cb5 100644
--- a/web/pgadmin/tools/sqleditor/static/img/view_data.svg
+++ b/web/pgadmin/tools/sqleditor/static/img/view_data.svg
@@ -1,9 +1,26 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 1792 1792;" xml:space="preserve" width="1792" height="1792"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
-<style type="text/css">
-	.st0{fill:#222222;}
-	.st1{fill:#FFFFFF;}
-</style>
-<title>save_data_changes</title>
-
-
-<g class="currentLayer" style=""><title>Layer 1</title><path class="st0" d="M614.0211181640625,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,1389.2831683158875 614.0211181640625,1381.039882183075 zM614.0211181640625,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,1048.918300151825 614.0211181640625,1040.6748919487 zM1069.7584228515625,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,1389.2831683158875 1069.7584228515625,1381.039882183075 zM614.0211181640625,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H300.70343017578125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S614.0211181640625,708.5541033744812 614.0211181640625,700.3109393119812 zM1069.7584228515625,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,1048.918300151825 1069.7584228515625,1040.6748919487 zM1525.49560546875,1381.039882183075 v-170.18182373046875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,1389.2831683158875 1525.49560546875,1381.039882183075 zM1069.7584228515625,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 H756.438720703125 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1069.7584228515625,708.5541033744812 1069.7584228515625,700.3109393119812 zM1525.49560546875,1040.6748919487 V870.49276304245 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,1048.918300151825 1525.49560546875,1040.6748919487 zM1525.49560546875,700.3109393119812 V530.1298480033875 c0,-8.243182182312012 -2.6703295707702637,-15.068181991577148 -8.01098918914795,-20.386363983154297 s-12.19450569152832,-7.9772725105285645 -20.4725284576416,-7.9772725105285645 h-284.8351745605469 c-8.278021812438965,0 -15.131868362426758,2.659090995788574 -20.4725284576416,7.9772725105285645 s-8.01098918914795,12.143181800842285 -8.01098918914795,20.386363983154297 v170.18182373046875 c0,8.243182182312012 2.6703295707702637,15.068181991577148 8.01098918914795,20.386363983154297 s12.19450569152832,7.9772725105285645 20.4725284576416,7.9772725105285645 h284.8351745605469 c8.278021812438965,0 15.131868362426758,-2.659090995788574 20.4725284576416,-7.9772725105285645 S1525.49560546875,708.5541033744812 1525.49560546875,700.3109393119812 zM1639.4296875,416.6754412651062 v964.3636474609375 c0,39 -13.974724769592285,72.41590881347656 -41.835166931152344,100.15908813476562 s-61.41758346557617,41.65909194946289 -100.5824203491211,41.65909194946289 H300.70343017578125 c-39.16483688354492,0 -72.72197723388672,-13.915908813476562 -100.5824203491211,-41.65909194946289 s-41.835166931152344,-61.15909194946289 -41.835166931152344,-100.15908813476562 V416.6754412651062 c0,-39 13.974724769592285,-72.41590881347656 41.835166931152344,-100.15908813476562 s61.41758346557617,-41.65909194946289 100.5824203491211,-41.65909194946289 h1196.3077392578125 c39.16483688354492,0 72.72197723388672,13.915908813476562 100.5824203491211,41.65909194946289 S1639.4296875,377.6754412651062 1639.4296875,416.6754412651062 z" id="svg_1"/></g></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg 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 1181.8 1000" style="enable-background:new 0 0 1181.8 1000;" xml:space="preserve">
+<path d="M1148.4,33.4c-22.3-22.3-49-33.4-80.3-33.4H113.6c-31.2,0-58,11.1-80.3,33.4C11.1,55.6,0,82.4,0,113.6v772.7
+	c0,31.2,11.1,58,33.4,80.3c22.3,22.3,49,33.4,80.3,33.4h954.5c31.2,0,58-11.1,80.3-33.4c22.3-22.3,33.4-49,33.4-80.3V113.6
+	C1181.8,82.4,1170.7,55.6,1148.4,33.4z M363.6,886.4c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H113.6
+	c-6.6,0-12.1-2.1-16.3-6.4s-6.4-9.7-6.4-16.3V750c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V886.4z M363.6,613.6c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H113.6c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V477.3c0-6.6,2.1-12.1,6.4-16.3s9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V613.6z M363.6,340.9c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H113.6c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V204.5c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V340.9z M727.3,886.4c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H477.3c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V750c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V886.4z M727.3,613.6c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H477.3c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V477.3c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V613.6z M727.3,340.9c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H477.3c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V204.5c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V340.9z M1090.9,886.4c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H840.9c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V750c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V886.4z M1090.9,613.6c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H840.9c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V477.3c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V613.6z M1090.9,340.9c0,6.6-2.1,12.1-6.4,16.3c-4.3,4.3-9.7,6.4-16.3,6.4H840.9c-6.6,0-12.1-2.1-16.3-6.4
+	c-4.3-4.3-6.4-9.7-6.4-16.3V204.5c0-6.6,2.1-12.1,6.4-16.3c4.3-4.3,9.7-6.4,16.3-6.4h227.3c6.6,0,12.1,2.1,16.3,6.4
+	c4.3,4.3,6.4,9.7,6.4,16.3V340.9z"/>
+</svg>
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_history.scss b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
index 68f7fcd2c..aef96a20a 100644
--- a/web/pgadmin/tools/sqleditor/static/scss/_history.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_history.scss
@@ -3,7 +3,7 @@
 
   .list-item {
     border-bottom: $panel-border;
-    background-color: $color-bg-theme;
+    background-color: $color-bg;
   }
 
   .entry {
@@ -98,7 +98,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: $color-bg-theme;
+  background-color: $color-bg;
   .error-message-block {
     background: $sql-history-error-bg;
     flex: 0.3;
@@ -163,7 +163,7 @@
       float: left;
       position: relative;
       z-index: 10;
-      border: 1px solid $color-gray-light;
+      border: 1px solid $border-color;
       color: $color-primary;
       font-size: 12px;
       box-shadow: 1px 2px 4px 0px $color-gray-light;
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
index 2742f3204..a7cf63c10 100644
--- a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
@@ -110,7 +110,7 @@ li.CodeMirror-hint-active {
 .slick-cell.cell-move-handle {
   font-weight: bold;
   text-align: right;
-  border-right: solid  $color-gray;
+  border-right: solid  $border-color;
   background: $color-gray-lighter;
   cursor: move;
 }
@@ -129,7 +129,7 @@ li.CodeMirror-hint-active {
 }
 
 .cell-selection {
-  border-right-color: $color-gray-light;
+  border-right-color: $border-color;
   border-right-style: solid;
   background: $color-gray-lighter;
   color:  $color-gray;
@@ -138,7 +138,8 @@ li.CodeMirror-hint-active {
 }
 
 #datagrid .slick-header .slick-header-columns {
-  background: $color-bg;
+  background: $sql-grid-title-cell-bg;
+  color: $sql-grid-title-cell-fg;
   height: 40px;
   border-bottom: $panel-border;
 }
@@ -222,6 +223,27 @@ li.CodeMirror-hint-active {
 }
 
 /* color the first column */
+
+#datagrid .slick-row {
+    .slick-cell {
+        background-color: $sql-grid-data-cell-bg;
+        color: $sql-grid-data-cell-fg;
+    }
+
+    .slick-cell.l0.r0 {
+        background-color: $sql-grid-title-cell-bg;
+        color: $sql-grid-title-cell-fg;
+    }
+}
+
+#datagrid div.slick-header.ui-state-default {
+  background-color: $sql-grid-title-cell-bg;
+  color: $sql-grid-title-cell-fg;
+  border-bottom: none;
+  border-right: none;
+  border-top: none;
+}
+
 #datagrid .slick-row .slick-cell.l0.r0.selected {
   background-color: $color-primary;
   color: $color-primary-fg;
@@ -233,17 +255,10 @@ li.CodeMirror-hint-active {
   border-bottom: $table-hover-border;
 }
 
-#datagrid div.slick-header.ui-state-default {
-  background: $color-bg;
-  border-bottom: none;
-  border-right: none;
-  border-top: none;
-}
-
 .pg-text-editor {
   z-index:10000;
   position:absolute;
-  background: $color-bg-theme;
+  background: $color-bg;
   padding: 0.25rem;
   border: $panel-border;
   box-shadow: $dropdown-box-shadow;
@@ -299,3 +314,57 @@ div.strikeout:after {
   content: "\00B7";
   font-size: 1px;
 }
+
+.sql-scratch {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow-y: hidden;
+
+  textarea {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: none;
+    resize: none;
+    color: $color-editor-fg;
+    background-color: $color-editor-bg;
+  }
+}
+
+.icon-query-tool-connected {
+  color: $color-primary;
+}
+
+.icon-query-tool-disconnected {
+  color: $color-danger;
+}
+
+.connection_status .obtaining-conn {
+  background-image: $loader-icon-small !important;
+  background-position: center center;
+  background-repeat: no-repeat;
+  &:before {
+    content:'';
+  }
+  min-width: 50%;
+  min-height: 100%;
+}
+
+.sql-editor-grid-container {
+  height: 100%;
+  overflow: auto;
+
+  .ui-widget-content {
+    background-color: $input-bg;
+    color: $input-color;
+  }
+
+  .ui-state-default {
+    color: $color-fg;
+  }
+}
+
+.sql-editor-grid-container.has-no-footer {
+  height: 100%;
+}
diff --git a/web/webpack.config.js b/web/webpack.config.js
index bc64081e2..cce5cad9a 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -22,15 +22,20 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const extractStyle = new MiniCssExtractPlugin({
   filename: '[name].css',
+  chunkFilename: '[name].css',
   allChunks: true,
 });
 const WebpackRequireFromPlugin = require('webpack-require-from');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const CopyPlugin = require('copy-webpack-plugin');
+const IconfontWebpackPlugin = require('iconfont-webpack-plugin');
 
 const envType = PRODUCTION ? 'production': 'development';
 const devToolVal = PRODUCTION ? false : 'eval';
 const analyzerMode = process.env.ANALYZE=='true' ? 'static' : 'disabled';
 
+const outputPath = __dirname + '/pgadmin/static/js/generated';
+
 // Expose libraries in app context so they need not to
 // require('libname') when used in a module
 const providePlugin = new webpack.ProvidePlugin({
@@ -62,7 +67,7 @@ const optimizeAssetsPlugin = new OptimizeCssAssetsPlugin({
 // Reference: https://webpack.js.org/plugins/source-map-dev-tool-plugin/#components/sidebar/sidebar.jsx
 const sourceMapDevToolPlugin = new webpack.SourceMapDevToolPlugin({
   filename: '[name].js.map',
-  exclude: /(vendor|codemirror|slickgrid|pgadmin\.js|style\.js|popper)/,
+  exclude: /(vendor|codemirror|slickgrid|pgadmin\.js|pgadmin.theme|pgadmin.static|style\.js|popper)/,
   columns: false,
 });
 
@@ -79,6 +84,16 @@ const bundleAnalyzer = new BundleAnalyzerPlugin({
   reportFilename: 'analyze_report.html',
 });
 
+let pgadminThemesJson = 'pgadmin.themes.json';
+const copyFiles = new CopyPlugin([
+  pgadminThemesJson,
+  {
+    from: './pgadmin/static/scss/resources/**/*.png',
+    to: outputPath + '/img',
+    flatten: true,
+  },
+]);
+
 function cssToBeSkiped(curr_path) {
   /** Skip all templates **/
   if(curr_path.indexOf('template') > -1) {
@@ -96,7 +111,7 @@ function cssToBeSkiped(curr_path) {
 /* Get all the style files recursively and store in array to
  * give input to webpack.
  */
-function pushModulesCss(curr_path, pgadminStyles) {
+function pushModulesStyles(curr_path, pgadminStyles, extn) {
   /** Skip Directories */
   if(cssToBeSkiped(curr_path)) {
     return;
@@ -111,22 +126,223 @@ function pushModulesCss(curr_path, pgadminStyles) {
     let stats = fs.statSync(path.join(curr_path, curr_file));
     /* if directory, dig further */
     if(stats.isDirectory()) {
-      pushModulesCss(path.join(curr_path, curr_file), pgadminStyles);
+      pushModulesStyles(path.join(curr_path, curr_file), pgadminStyles, extn);
     }
-    else if(stats.isFile() && (curr_file.endsWith('.scss') || curr_file.endsWith('.css'))) {
+    else if(stats.isFile() && (curr_file.endsWith(extn))) {
       pgadminStyles.push(path.join(curr_path, curr_file));
     }
   });
 }
 
-let pgadminStyles = [];
+let pgadminScssStyles = [];
+let pgadminCssStyles = [];
+
 /* 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]));
+  if(webpackShimConfig.css_bundle_include[i].endsWith('.scss')) {
+    pgadminScssStyles.push(path.join(__dirname, webpackShimConfig.css_bundle_include[i]));
+  } else if(webpackShimConfig.css_bundle_include[i].endsWith('.css')){
+    pgadminCssStyles.push(path.join(__dirname, webpackShimConfig.css_bundle_include[i]));
+  }
 }
-pushModulesCss(path.join(__dirname,'./pgadmin'), pgadminStyles);
 
-module.exports = {
+pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminScssStyles, '.scss');
+pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminCssStyles, '.css');
+
+/* Get all the themes */
+
+let all_themes_dir = path.join(__dirname,'./pgadmin/static/scss/resources');
+let pgadminThemes = {};
+/* Read all the theme dirs */
+/* Theme format
+    "theme_name": {
+        "disp_name": "theme_name",
+        "cssfile": "pgadmin.theme.theme_name",
+        "preview_img": "theme_name_preview.png"
+    }
+*/
+fs.readdirSync(all_themes_dir).map(function(curr_dir) {
+  let stats = fs.statSync(path.join(all_themes_dir, curr_dir));
+
+  if(stats.isDirectory()) {
+    /* Theme directory found */
+    let cssfile = 'pgadmin.theme.'+curr_dir;
+    pgadminThemes[curr_dir] = {
+      /* For now lets keep it as beta release */
+      disp_name: curr_dir + '_beta',
+      cssfile: cssfile,
+      preview_img: curr_dir + '_preview.png',
+    };
+  }
+});
+
+fs.writeFileSync(pgadminThemesJson, JSON.stringify(pgadminThemes, null, 4));
+
+var themeCssRules = function(theme_name) {
+  return [{
+    test: /\.(jpe?g|png|gif|svg)$/i,
+    loaders: [{
+      loader: 'url-loader',
+      options: {
+        emitFile: true,
+        name: 'img/[name].[ext]',
+        limit: 4096,
+      },
+    }, {
+      loader: 'image-webpack-loader',
+      query: {
+        bypassOnDebug: true,
+        mozjpeg: {
+          progressive: true,
+        },
+        gifsicle: {
+          interlaced: false,
+        },
+        optipng: {
+          optimizationLevel: 7,
+        },
+        pngquant: {
+          quality: '75-90',
+          speed: 3,
+        },
+      },
+    }],
+    exclude: /vendor/,
+  }, {
+    test: /\.(eot|svg|ttf|woff|woff2)$/,
+    loaders: [{
+      loader: 'file-loader',
+      options: {
+        name: 'fonts/[name].[ext]',
+        emitFile: true,
+      },
+    }],
+    include: [
+      /node_modules/,
+      path.join(sourceDir, '/css/'),
+      path.join(sourceDir, '/scss/'),
+      path.join(sourceDir, '/fonts/'),
+    ],
+    exclude: /vendor/,
+  }, {
+    test: /\.scss$/,
+    use: [
+      {loader: MiniCssExtractPlugin.loader},
+      {loader: 'css-loader'},
+      {
+        loader: 'postcss-loader',
+        options: {
+          plugins: (loader) => [
+            require('autoprefixer')(),
+            new IconfontWebpackPlugin(loader),
+          ],
+        },
+      },
+      {loader: 'sass-loader'},
+      {
+        loader: 'sass-resources-loader',
+        options: {
+          resources: function(theme_name){
+            let ret_res = [
+              './pgadmin/static/scss/resources/' + theme_name + '/_theme.variables.scss',
+              './pgadmin/static/scss/resources/pgadmin.resources.scss',
+            ];
+            if(theme_name!='standard') {
+              ret_res.unshift('./pgadmin/static/scss/resources/' + theme_name + '/_theme.variables.scss');
+            }
+            return ret_res;
+          }(theme_name),
+        },
+      },
+    ],
+  }, {
+    test: /\.css$/,
+    use: [
+      MiniCssExtractPlugin.loader,
+      'css-loader',
+      {
+        loader: 'postcss-loader',
+        options: {
+          plugins: (loader) => [
+            require('autoprefixer')(),
+            new IconfontWebpackPlugin(loader),
+          ],
+        },
+      },
+    ],
+  }];
+};
+
+var getThemeWebpackConfig = function(theme_name) {
+  return {
+    mode: envType,
+    devtool: devToolVal,
+    stats: { children: false },
+    // The base directory, an absolute path, for resolving entry points and loaders
+    // from configuration.
+    context: __dirname,
+    // Specify entry points of application
+    entry: {
+      [pgadminThemes[theme_name].cssfile]: pgadminScssStyles,
+    },
+    // path: The output directory for generated bundles(defined in entry)
+    // Ref: https://webpack.js.org/configuration/output/#output-library
+    output: {
+      libraryTarget: 'amd',
+      path: outputPath,
+      filename: '[name].js',
+      libraryExport: 'default',
+    },
+    // Templates files which contains python code needs to load dynamically
+    // Such files specified in externals are loaded at first and defined in
+    // the start of generated bundle within define(['libname'],fn) etc.
+    externals: webpackShimConfig.externals,
+    module: {
+      // References:
+      // Module and Rules: https://webpack.js.org/configuration/module/
+      // Loaders: https://webpack.js.org/loaders/
+      //
+      // imports-loader: it adds dependent modules(use:imports-loader?module1)
+      // at the beginning of module it is dependency of like:
+      // var jQuery = require('jquery'); var browser = require('pgadmin.browser')
+      // It solves number of problems
+      // Ref: http:/github.com/webpack-contrib/imports-loader/
+      rules: themeCssRules(theme_name),
+    },
+    resolve: {
+      alias: webpackShimConfig.resolveAlias,
+      modules: ['node_modules', '.'],
+      extensions: ['.js'],
+      unsafeCache: true,
+    },
+    // Watch mode Configuration: After initial build, webpack will watch for
+    // changes in files and compiles only files which are changed,
+    // if watch is set to True
+    // Reference: https://webpack.js.org/configuration/watch/#components/sidebar/sidebar.jsx
+    watchOptions: {
+      aggregateTimeout: 300,
+      poll: 1000,
+      ignored: /node_modules/,
+    },
+    // Define list of Plugins used in Production or development mode
+    // Ref:https://webpack.js.org/concepts/plugins/#components/sidebar/sidebar.jsx
+    plugins: PRODUCTION ? [
+      extractStyle,
+      optimizeAssetsPlugin,
+      sourceMapDevToolPlugin,
+    ]: [
+      extractStyle,
+      sourceMapDevToolPlugin,
+    ],
+  };
+};
+
+var pgadminThemesWebpack = [];
+Object.keys(pgadminThemes).map((theme_name)=>{
+  pgadminThemesWebpack.push(getThemeWebpackConfig(theme_name));
+});
+
+module.exports = [{
   mode: envType,
   devtool: devToolVal,
   stats: { children: false },
@@ -141,14 +357,15 @@ module.exports = {
     sqleditor: './pgadmin/tools/sqleditor/static/js/sqleditor.js',
     debugger_direct: './pgadmin/tools/debugger/static/js/direct.js',
     file_utils: './pgadmin/misc/file_manager/static/js/utility.js',
-    pgadmin: pgadminStyles,
+    'pgadmin.style': pgadminCssStyles,
+    pgadmin: pgadminScssStyles,
     style: './pgadmin/static/css/style.css',
   },
   // path: The output directory for generated bundles(defined in entry)
   // Ref: https://webpack.js.org/configuration/output/#output-library
   output: {
     libraryTarget: 'amd',
-    path: __dirname + '/pgadmin/static/js/generated',
+    path: outputPath,
     filename: '[name].js',
     chunkFilename: '[name].chunk.js',
     libraryExport: 'default',
@@ -282,73 +499,7 @@ module.exports = {
       use: {
         loader: 'imports-loader?this=>window,fix=>module.exports=0',
       },
-    }, {
-      test: /\.(jpe?g|png|gif|svg)$/i,
-      loaders: [{
-        loader: 'url-loader',
-        options: {
-          emitFile: true,
-          name: 'img/[name].[ext]',
-          limit: 4096,
-        },
-      }, {
-        loader: 'image-webpack-loader',
-        query: {
-          bypassOnDebug: true,
-          mozjpeg: {
-            progressive: true,
-          },
-          gifsicle: {
-            interlaced: false,
-          },
-          optipng: {
-            optimizationLevel: 7,
-          },
-          pngquant: {
-            quality: '75-90',
-            speed: 3,
-          },
-        },
-      }],
-      exclude: /vendor/,
-    }, {
-      test: /\.(eot|svg|ttf|woff|woff2)$/,
-      loaders: [{
-        loader: 'file-loader',
-        options: {
-          name: 'fonts/[name].[ext]',
-          emitFile: true,
-        },
-      }],
-      include: [
-        /node_modules/,
-        path.join(sourceDir, '/css/'),
-        path.join(sourceDir, '/scss/'),
-        path.join(sourceDir, '/fonts/'),
-      ],
-      exclude: /vendor/,
-    }, {
-      test: /\.scss$/,
-      use: [
-        {loader: MiniCssExtractPlugin.loader},
-        {loader: 'css-loader'},
-        {loader: 'sass-loader'},
-        {
-          loader: 'sass-resources-loader',
-          options: {
-            resources: [
-              './pgadmin/static/scss/resources/pgadmin.resources.scss',
-            ],
-          },
-        },
-      ],
-    }, {
-      test: /\.css$/,
-      use: [
-        MiniCssExtractPlugin.loader,
-        'css-loader',
-      ],
-    }],
+    }].concat(themeCssRules('standard')),
     // Prevent module from parsing through webpack, helps in reducing build time
     noParse: [/moment.js/],
   },
@@ -466,10 +617,12 @@ module.exports = {
     sourceMapDevToolPlugin,
     webpackRequireFrom,
     bundleAnalyzer,
+    copyFiles,
   ]: [
     extractStyle,
     providePlugin,
     sourceMapDevToolPlugin,
     webpackRequireFrom,
+    copyFiles,
   ],
-};
+}].concat(pgadminThemesWebpack);
diff --git a/web/yarn.lock b/web/yarn.lock
index 8f325cf2b..9066fa4ae 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1030,7 +1030,7 @@ are-we-there-yet@~1.1.2:
     delegates "^1.0.0"
     readable-stream "^2.0.6"
 
-argparse@^1.0.7:
+argparse@^1.0.6, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -1188,6 +1188,19 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autoprefixer@^9.6.4:
+  version "9.6.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.4.tgz#e6453be47af316b2923eaeaed87860f52ad4b7eb"
+  integrity sha512-Koz2cJU9dKOxG8P1f8uVaBntOv9lP4yz9ffWvWaicv9gHBPhpQB22nGijwd8gqW9CNT+UdkbQOQNLVI8jN1ZfQ==
+  dependencies:
+    browserslist "^4.7.0"
+    caniuse-lite "^1.0.30000998"
+    chalk "^2.4.2"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^7.0.18"
+    postcss-value-parser "^4.0.2"
+
 aws-sign2@~0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
@@ -2039,7 +2052,7 @@ browserify@^16.1.0, browserify@~16.2.3:
     vm-browserify "^1.0.0"
     xtend "^4.0.0"
 
-browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.7.1:
+browserslist@^4.0.0, browserslist@^4.6.0, browserslist@^4.7.0, browserslist@^4.7.1:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
   integrity sha512-uZavT/gZXJd2UTi9Ov7/Z340WOSQ3+m1iBVRUknf+okKxonL9P83S3ctiBDtuRmRu8PiCHjqyueqQ9HYlJhxiw==
@@ -2132,6 +2145,26 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
+cacache@^11.3.3:
+  version "11.3.3"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.3.tgz#8bd29df8c6a718a6ebd2d010da4d7972ae3bbadc"
+  integrity sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==
+  dependencies:
+    bluebird "^3.5.5"
+    chownr "^1.1.1"
+    figgy-pudding "^3.5.1"
+    glob "^7.1.4"
+    graceful-fs "^4.1.15"
+    lru-cache "^5.1.1"
+    mississippi "^3.0.0"
+    mkdirp "^0.5.1"
+    move-concurrently "^1.0.1"
+    promise-inflight "^1.0.1"
+    rimraf "^2.6.3"
+    ssri "^6.0.1"
+    unique-filename "^1.1.1"
+    y18n "^4.0.0"
+
 cacache@^12.0.2:
   version "12.0.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
@@ -2253,6 +2286,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001004:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001004.tgz#d879b73981b255488316da946c39327d8c00a586"
   integrity sha512-3nfOR4O8Wa2RWoYfJkMtwRVOsK96TQ+eq57wd0iKaEWl8dwG4hKZ/g0MVBfCvysFvMLi9fQGR/DvozMdkEPl3g==
 
+caniuse-lite@^1.0.30000998:
+  version "1.0.30000999"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43"
+  integrity sha512-1CUyKyecPeksKwXZvYw0tEoaMCo/RwBlXmEtN5vVnabvO0KPd9RQLcaAuR9/1F+KDMv6esmOFWlsXuzDk+8rxg==
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -2543,7 +2581,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
+commander@^2.12.2, commander@^2.18.0, commander@^2.19.0, commander@^2.20.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -2691,6 +2729,24 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-webpack-plugin@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.0.4.tgz#c78126f604e24f194c6ec2f43a64e232b5d43655"
+  integrity sha512-YBuYGpSzoCHSSDGyHy6VJ7SHojKp6WHT4D7ItcQFNAYx2hrwkMe56e97xfVR0/ovDuMTrMffXUiltvQljtAGeg==
+  dependencies:
+    cacache "^11.3.3"
+    find-cache-dir "^2.1.0"
+    glob-parent "^3.1.0"
+    globby "^7.1.1"
+    is-glob "^4.0.1"
+    loader-utils "^1.2.3"
+    minimatch "^3.0.4"
+    normalize-path "^3.0.0"
+    p-limit "^2.2.0"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.7.0"
+    webpack-log "^2.0.0"
+
 core-js-compat@^3.1.1:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.3.3.tgz#82642808cf484a35292b2f8e83ef9376884e760f"
@@ -2970,6 +3026,11 @@ csso@^3.5.1:
   dependencies:
     css-tree "1.0.0-alpha.29"
 
+cubic2quad@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/cubic2quad/-/cubic2quad-1.1.1.tgz#69b19c61a3f5b41ecf2f1d5fae8fb03415aa8b15"
+  integrity sha1-abGcYaP1tB7PLx1fro+wNBWqixU=
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -3248,6 +3309,13 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dir-glob@^2.0.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
+  dependencies:
+    path-type "^3.0.0"
+
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -4296,6 +4364,11 @@ gaze@^1.0.0:
   dependencies:
     globule "^1.0.0"
 
+geometry-interfaces@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/geometry-interfaces/-/geometry-interfaces-1.1.4.tgz#9e82af6700ca639a675299f08e1f5fbc4a79d48d"
+  integrity sha512-qD6OdkT6NcES9l4Xx3auTpwraQruU7dARbQPVO71MKvkGYw5/z/oIiGymuFXrRaEQa5Y67EIojUpaLeGEa5hGA==
+
 get-assigned-identifiers@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz#6dbf411de648cbaf8d9169ebb0d2d576191e2ff1"
@@ -4465,6 +4538,18 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  integrity sha1-+yzP+UAfhgCUXfral0QMypcrhoA=
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
 globule@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.2.1.tgz#5dffb1b191f22d20797a9369b49eab4e9839696d"
@@ -4814,6 +4899,17 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+iconfont-webpack-plugin@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/iconfont-webpack-plugin/-/iconfont-webpack-plugin-4.2.1.tgz#bd1b1ab2960affd602b207d1523d79dea4f21aea"
+  integrity sha512-OIBHTSgir7uGwM0nw+UbCsfDXg/OEfn9ixrgsRygKm2nY8JGTy9zHxOWbQE6xDaP92/jYzQL3GjCy3kiBvBYtw==
+  dependencies:
+    loader-utils "1.2.3"
+    postcss "6.0.23"
+    svg2ttf "4.3.0"
+    svgicons2svgfont "9.1.1"
+    ttf2woff "2.0.1"
+
 iconv-lite@0.4.24, iconv-lite@^0.4.15, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -4850,6 +4946,11 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+ignore@^3.3.5:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -4943,6 +5044,13 @@ immutability-helper@^3.0.0:
   dependencies:
     invariant "^2.2.4"
 
+import-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
+  dependencies:
+    import-from "^2.1.0"
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -4959,6 +5067,13 @@ import-fresh@^3.0.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-from@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
+  dependencies:
+    resolve-from "^3.0.0"
+
 import-lazy@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-3.1.0.tgz#891279202c8a2280fdbd6674dbd8da1a1dfc67cc"
@@ -5463,6 +5578,11 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -6156,6 +6276,11 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
+microbuffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/microbuffer/-/microbuffer-1.0.0.tgz#8b3832ed40c87d51f47bb234913a698a756d19d2"
+  integrity sha1-izgy7UDIfVH0e7I0kTppinVtGdI=
+
 micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
@@ -6435,6 +6560,13 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
+neatequal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/neatequal/-/neatequal-1.0.0.tgz#2ee1211bc9fa6e4c55715fd210bb05602eb1ae3b"
+  integrity sha1-LuEhG8n6bkxVcV/SELsFYC6xrjs=
+  dependencies:
+    varstream "^0.3.2"
+
 needle@^2.2.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.0.tgz#ce3fea21197267bacb310705a7bbe24f2a3a3492"
@@ -6589,6 +6721,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 normalize-url@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-2.0.1.tgz#835a9da1551fa26f70e92329069a23aa6574d7e6"
@@ -6660,6 +6797,11 @@ null-check@^1.0.0:
   resolved "https://registry.yarnpkg.com/null-check/-/null-check-1.0.0.tgz#977dffd7176012b9ec30d2a39db5cf72a0439edd"
   integrity sha1-l33/1xdgErnsMNKjnbXPcqBDnt0=
 
+num2fraction@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
+
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -6918,7 +7060,7 @@ p-is-promise@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
   integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
-p-limit@^2.0.0:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.1.tgz#aa07a788cc3151c939b5131f63570f0dd2009537"
   integrity sha512-85Tk+90UCVWvbDavCLKPOLC9vvY8OwEX/RtKF+/1OADJMVlFfEHOiMTPVyxg7mk/dKa+ipdHm0OUkTvCpMTuwg==
@@ -6968,7 +7110,7 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-pako@~1.0.5:
+pako@^1.0.0, pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
   integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
@@ -7118,6 +7260,13 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
 pbkdf2@^3.0.3:
   version "3.0.17"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@@ -7276,6 +7425,24 @@ postcss-discard-overridden@^4.0.1:
   dependencies:
     postcss "^7.0.0"
 
+postcss-load-config@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
+  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
+  dependencies:
+    cosmiconfig "^5.0.0"
+    import-cwd "^2.0.0"
+
+postcss-loader@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
+  dependencies:
+    loader-utils "^1.1.0"
+    postcss "^7.0.0"
+    postcss-load-config "^2.0.0"
+    schema-utils "^1.0.0"
+
 postcss-merge-longhand@^4.0.11:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
@@ -7531,10 +7698,24 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.20"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.20.tgz#a107b68ef1ad1c5e6e214ebb3c5ede2799322837"
-  integrity sha512-VOdO3a5nHVftPSEbG1zaG320b4mH5KAflH+pIeVAF5/hlw6YumELSgHZQBekjg29Oj4qw7XAyp9tIEBpeNWcyg==
+postcss-value-parser@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+  integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ==
+
+postcss@6.0.23:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+  integrity sha512-uIFtJElxJo29QC753JzhidoAhvp/e/Exezkdhfmt8AymWT6/5B7W1WmponYWkHk2eg6sONyTch0A3nkMPun3SQ==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -7789,6 +7970,16 @@ read-pkg@^1.0.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^1.0.33:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
+  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -8371,6 +8562,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
 slice-ansi@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-1.0.0.tgz#044f1a49d8842ff307aad6b505ed178bd950134d"
@@ -8765,6 +8961,16 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string.fromcodepoint@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string.fromcodepoint/-/string.fromcodepoint-0.2.1.tgz#8d978333c0bc92538f50f383e4888f3e5619d653"
+  integrity sha1-jZeDM8C8klOPUPOD5IiPPlYZ1lM=
+
+string.prototype.codepointat@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz#004ad44c8afc727527b108cd462b4d971cd469bc"
+  integrity sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==
+
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
@@ -8788,6 +8994,11 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -8890,13 +9101,46 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
+svg-pathdata@^5.0.0:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/svg-pathdata/-/svg-pathdata-5.0.2.tgz#e667b94a6071b60c5b123df04f9d6c9fe2f4850e"
+  integrity sha512-tmfwioGZZaSMZnAGCFiWd30O2sVbA5/wVP/CS8Pcf9s1ptd6J26bZUFwkIRZy+GYmD+uCECdiAP7bPpLszj+1w==
+
+svg2ttf@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/svg2ttf/-/svg2ttf-4.3.0.tgz#433440c7e9062f8fdcec3cad721cd08a2c7e51e3"
+  integrity sha512-LZ0B7zzHWLWbzLzwaKGHQvPOuxCXLReIb3LSxFSGUy1gMw2Utk6KGNbTmbmRL6Rk1qDSmTixnDrQgnXaL9n0CA==
+  dependencies:
+    argparse "^1.0.6"
+    cubic2quad "^1.0.0"
+    lodash "^4.17.10"
+    microbuffer "^1.0.0"
+    svgpath "^2.1.5"
+    xmldom "~0.1.22"
+
+svgicons2svgfont@9.1.1:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/svgicons2svgfont/-/svgicons2svgfont-9.1.1.tgz#655d30c256176f6e29c96058609ef0a9b0ebf2df"
+  integrity sha512-iOj7lqHP/oMrLg7S2Iv89LOJUfmIuePefXcs5ul4IsKwcYvL/T/Buahz+nQQJygyuvEMBBXqnCRmnvJggHeJzA==
+  dependencies:
+    commander "^2.12.2"
+    geometry-interfaces "^1.1.4"
+    glob "^7.1.2"
+    neatequal "^1.0.0"
+    readable-stream "^2.3.3"
+    sax "^1.2.4"
+    string.fromcodepoint "^0.2.1"
+    string.prototype.codepointat "^0.2.0"
+    svg-pathdata "^5.0.0"
+    transformation-matrix-js "^2.7.1"
+
 svgo@^1.0.0, svgo@^1.0.5:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.0.tgz#bae51ba95ded9a33a36b7c46ce9c359ae9154313"
@@ -8916,6 +9160,11 @@ svgo@^1.0.0, svgo@^1.0.5:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+svgpath@^2.1.5:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.2.2.tgz#1c70d44e27f7b6bd42a74ed3c960be93e411def3"
+  integrity sha512-7cXFbkZvPkZpKLC+3QIfyUd3/Un/CvJONjTD3Gz5qLuEa73StPOt8kZjTi9apxO6zwCaza0bPNnmzTyrQ4qQlw==
+
 syntax-error@^1.1.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/syntax-error/-/syntax-error-1.4.0.tgz#2d9d4ff5c064acb711594a3e3b95054ad51d907c"
@@ -9205,6 +9454,11 @@ tough-cookie@~2.4.3:
     psl "^1.1.24"
     punycode "^1.4.1"
 
+transformation-matrix-js@^2.7.1:
+  version "2.7.6"
+  resolved "https://registry.yarnpkg.com/transformation-matrix-js/-/transformation-matrix-js-2.7.6.tgz#25c7ff055c99b8528ffbd4c4a2684be6c9d5ef60"
+  integrity sha512-1CxDIZmCQ3vA0GGnkdMQqxUXVm3xXAFmglPYRS1hr37LzSg22TC7QAWOT38OmdUvMEs/rqcnkFoAsqvzdiluDg==
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -9234,6 +9488,15 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
 
+ttf2woff@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/ttf2woff/-/ttf2woff-2.0.1.tgz#871832240024b09db9570904c7c1928b8057c969"
+  integrity sha1-hxgyJAAksJ25VwkEx8GSi4BXyWk=
+  dependencies:
+    argparse "^1.0.6"
+    microbuffer "^1.0.0"
+    pako "^1.0.0"
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -9554,6 +9817,13 @@ value-or-function@^3.0.0:
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"
   integrity sha1-HCQ6ULWVwb5Up1S/7OhWO5/42BM=
 
+varstream@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/varstream/-/varstream-0.3.2.tgz#18ac6494765f3ff1a35ad9a4be053bec188a5de1"
+  integrity sha1-GKxklHZfP/GjWtmkvgU77BiKXeE=
+  dependencies:
+    readable-stream "^1.0.33"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -9870,6 +10140,11 @@ xmlbuilder@^10.0.0:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-10.1.1.tgz#8cae6688cc9b38d850b7c8d3c0a4161dcaf475b0"
   integrity sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==
 
+xmldom@~0.1.22:
+  version "0.1.27"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"
+  integrity sha1-1QH5ezvbQDr4757MIFcxh6rawOk=
+
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"
