diff --git a/client/app/assets/less/inc/ant-variables.less b/client/app/assets/less/inc/ant-variables.less
index bbdf93ae3f..d1cd2234a4 100644
--- a/client/app/assets/less/inc/ant-variables.less
+++ b/client/app/assets/less/inc/ant-variables.less
@@ -12,8 +12,7 @@
 /* --------------------------------------------------------
     Font
 -----------------------------------------------------------*/
-@redash-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
-  sans-serif;
+@redash-font: "Inter", sans-serif;
 @font-family-no-number: @redash-font;
 @font-family: @redash-font;
 @code-family: @redash-font;
diff --git a/client/app/assets/less/inc/variables.less b/client/app/assets/less/inc/variables.less
index 0b8468b30f..4fbe64aa73 100755
--- a/client/app/assets/less/inc/variables.less
+++ b/client/app/assets/less/inc/variables.less
@@ -1,287 +1,296 @@
 /* --------------------------------------------------------
     Paths
 -----------------------------------------------------------*/
-@imgpath:                               ~'../img';
-@fontpath:                              ~'../fonts';
-
+@imgpath: ~"../img";
+@fontpath: ~"../fonts";
 
 /* --------------------------------------------------------
     Container
 -----------------------------------------------------------*/
-@container-tablet:                      100%;
-@container-desktop:                     100%;
-@container-large-desktop:               100%;
-
+@container-tablet: 100%;
+@container-desktop: 100%;
+@container-large-desktop: 100%;
 
 /* --------------------------------------------------------
     Template Variables
 -----------------------------------------------------------*/
-@header-height:                         60px;
-@sidebar-left-width:                    240px;
-@sidebar-left-mid-width:                64px;
-@logo-width:                            @sidebar-left-width;
-@logo-height:                           @header-height;
-@boxed-width:                           1170px;
-@body-bg:                               #edecec;
-@spacing:                               15px;
-@redash-radius:                         3px;
-
+@header-height: 60px;
+@sidebar-left-width: 240px;
+@sidebar-left-mid-width: 64px;
+@logo-width: @sidebar-left-width;
+@logo-height: @header-height;
+@boxed-width: 1170px;
+@body-bg: #edecec;
+@spacing: 15px;
+@redash-radius: 3px;
 
 /* --------------------------------------------------------
     Branding
 -----------------------------------------------------------*/
-@brand-bg:                              #191C22;
-@sidebar:                               @brand-bg;
-@sidebar-active-bg:                     #121419;
-@color-dark:                            #9BA1B1;
-
+@brand-bg: #191c22;
+@sidebar: @brand-bg;
+@sidebar-active-bg: #121419;
+@color-dark: #9ba1b1;
 
 /* --------------------------------------------------------
     Font
 -----------------------------------------------------------*/
-@font-icon:                             'Material-Design-Iconic-Font';
-@font-family-sans-serif:                'Roboto', sans-serif;
-@redash-font:                            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-@font-size-base:                        13px;
-
+@font-icon: "Material-Design-Iconic-Font";
+@font-family-sans-serif: "Inter", sans-serif;
+@redash-font: "Inter", sans-serif;
+@font-size-base: 13px;
 
 /* --------------------------------------------------------
     Typograpgy
 -----------------------------------------------------------*/
-@text-color:                            #767676;
-@link:                                  #02a4c4;
-@link-hover-decoration:                 none;
-@headings-color:                        #333;
-
+@text-color: #767676;
+@link: #02a4c4;
+@link-hover-decoration: none;
+@headings-color: #333;
 
 /* --------------------------------------------------------
     Form
 -----------------------------------------------------------*/
-@input-color:                           #595959;
-@input-color-placeholder:               #b4b4b4;
-@input-border:                          #e8e8e8;
-@input-border-radius:                   0;
-@input-border-radius-large:             0px;
-@redash-input-radius:                   2px;
-@input-height-large:                    40px;
-@input-height-base:                     35px;
-@input-height-small:                    30px;
-@input-border-focus:                    #79c2ff;
-@input-group-addon-bg:                  @light-gray;
+@input-color: #595959;
+@input-color-placeholder: #b4b4b4;
+@input-border: #e8e8e8;
+@input-border-radius: 0;
+@input-border-radius-large: 0px;
+@redash-input-radius: 2px;
+@input-height-large: 40px;
+@input-height-base: 35px;
+@input-height-small: 30px;
+@input-border-focus: #79c2ff;
+@input-group-addon-bg: @light-gray;
 
 /* --------------------------------------------------------
     Colors
 -----------------------------------------------------------*/
-@white:                                 #ffffff;
-@black:                                 #000000;
-@blue:                                  #2196F3;
-@red:                                   #F44336;
-@purple:                                #9C27B0;
-@deeppurple:                            #673AB7;
-@lightblue:                             #03A9F4;
-@cyan:                                  #00BCD4;
-@teal:                                  #009688;
-@green:                                 #4CAF50;
-@lightgreen:                            #8BC34A;
-@lime:                                  #CDDC39;
-@yellow:                                #FFEB3B;
-@yellow-darker:                         #fbd208;
-@amber:                                 #FFC107;
-@orange:                                #FF9800;
-@deeporange:                            #FF5722;
-@gray:                                  #9E9E9E;
-@bluegray:                              #607D8B;
-@indigo:                                #3F51B5;
-@pink:                                  #E91E63;
-@brown:                                 #795548;
-@light-gray:                            #FCFCFC;
-@gray-light:                            #828282;
-@ace:                                   #f8f8f8;
+@white: #ffffff;
+@white-100: #fbfdff;
+@white-200: #f2f7fb;
+@gray-50: #f2f3f6;
+@gray-100: #e5e7ee;
+@gray-200: #cad3e5;
+@gray-300: #95a3be;
+@gray-300A: #a6b5d3;
+@gray-400: #7e87a8;
+@gray-500: #596284;
+@gray-500A: #6a7290;
+@gray-600: #474e6a;
+@gray-700: #353b4f;
+@gray-800: #2d3142;
+@gray-900: #323643;
+@primary-100: #fbf6fe;
+@primary-200: #f7e8ff;
+@primary-300: #d8a2f3;
+@primary-400: #c87dee;
+@primary-500: #b045e6;
+@primary-500A: #aa00ff;
+@primary-600: #8d37b8;
+@primary-700: #7b1fa2;
+@secondary-100: #fdf8ff;
+@secondary-200: #fee6ee;
+@secondary-300: #f48caf;
+@secondary-400: #f06695;
+@secondary-500: #ec407a;
+@secondary-500B: #f50057;
+@secondary-600: #d43a6e;
+@secondary-700: #bd3362;
+
+@black: #000000;
+@blue: #2196f3;
+@red: #f44336;
+@purple: #9c27b0;
+@deeppurple: #673ab7;
+@lightblue: #03a9f4;
+@cyan: #00bcd4;
+@teal: #009688;
+@green: #4caf50;
+@lightgreen: #8bc34a;
+@lime: #cddc39;
+@yellow: #ffeb3b;
+@yellow-darker: #fbd208;
+@amber: #ffc107;
+@orange: #ff9800;
+@deeporange: #ff5722;
+@gray: #9e9e9e;
+@bluegray: #607d8b;
+@indigo: #3f51b5;
+@pink: #e91e63;
+@brown: #795548;
+@light-gray: #fcfcfc;
+@gray-light: #828282;
+@ace: #f8f8f8;
 
 @redash-gray: rgba(102, 136, 153, 1);
 @redash-orange: rgba(255, 120, 100, 1);
 @redash-black: rgba(0, 0, 0, 1);
 @redash-yellow: rgba(252, 252, 161, 0.75);
 
- /** Form States **/
-@state-success-text:                    @green;
-@state-info-text:                       @blue;
-@state-danger-text:                     lighten(@red, 5%);
-
+/** Form States **/
+@state-success-text: @green;
+@state-info-text: @blue;
+@state-danger-text: lighten(@red, 5%);
 
 /* --------------------------------------------------------
     Alert
 -----------------------------------------------------------*/
-@alert-success-border:                  transparent;
-@alert-info-border:                     transparent;
-@alert-danger-border:		 	        transparent;
-@alert-inverse-border:		 	        transparent;
-
-@alert-success-bg:                      fade(@green, 70%);
-@alert-info-bg:		 		            fade(@blue, 70%);
-@alert-danger-bg:                       fade(@red, 70%);
-@alert-inverse-bg:                      #333;
+@alert-success-border: transparent;
+@alert-info-border: transparent;
+@alert-danger-border: transparent;
+@alert-inverse-border: transparent;
 
-@alert-success-text:                    #fff;
-@alert-info-text:                       #fff;
-@alert-danger-text:                     #fff;
-@alert-inverse-text:                    #fff;
+@alert-success-bg: fade(@green, 70%);
+@alert-info-bg: fade(@blue, 70%);
+@alert-danger-bg: fade(@red, 70%);
+@alert-inverse-bg: #333;
 
+@alert-success-text: #fff;
+@alert-info-text: #fff;
+@alert-danger-text: #fff;
+@alert-inverse-text: #fff;
 
 /* --------------------------------------------------------
     Bootstrap Brands
 -----------------------------------------------------------*/
-@brand-default:                         #eee;
-@brand-primary:                         @blue;
-@brand-info:                            @cyan;
-@brand-success:                         @green;
-@brand-warning:                         @orange;
-@brand-danger:                          @red;
-
+@brand-default: #eee;
+@brand-primary: @blue;
+@brand-info: @cyan;
+@brand-success: @green;
+@brand-warning: @orange;
+@brand-danger: @red;
 
 /* --------------------------------------------------------
     Border Radius
 -----------------------------------------------------------*/
-@border-radius-base:                    2px;
-@border-radius-large:                   2px;
-@border-radius-small:                   2px;
-
+@border-radius-base: 2px;
+@border-radius-large: 2px;
+@border-radius-small: 2px;
 
 /* --------------------------------------------------------
     Dropdown
 -----------------------------------------------------------*/
-@dropdown-fallback-border:              transparent;
-@dropdown-border:                       transparent;
-@dropdown-divider-bg:                   '';
-@dropdown-link-hover-bg:                rgba(0,0,0,0.075);
-@dropdown-link-color:                   #333;
-@dropdown-link-hover-color:             #333;
-@dropdown-link-disabled-color:          #e4e4e4;
-@dropdown-divider-bg:                   rgba(0,0,0,0.08);
-@dropdown-link-active-color:            #333;
-@dropdown-link-active-bg:               rgba(0, 0, 0, 0.075);
-@zindex-dropdown:                       9;
-@dropdown-shadow:                       0 2px 10px rgba(0, 0, 0, 0.2);
+@dropdown-fallback-border: transparent;
+@dropdown-border: transparent;
+@dropdown-divider-bg: "";
+@dropdown-link-hover-bg: rgba(0, 0, 0, 0.075);
+@dropdown-link-color: #333;
+@dropdown-link-hover-color: #333;
+@dropdown-link-disabled-color: #e4e4e4;
+@dropdown-divider-bg: rgba(0, 0, 0, 0.08);
+@dropdown-link-active-color: #333;
+@dropdown-link-active-bg: rgba(0, 0, 0, 0.075);
+@zindex-dropdown: 9;
+@dropdown-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 
 /* --------------------------------------------------------
     Page Header
 -----------------------------------------------------------*/
-@page-header-border-color:              transparent;
-
+@page-header-border-color: transparent;
 
 /* --------------------------------------------------------
     Buttons
 -----------------------------------------------------------*/
-@btn-default-border:                    @input-border;
-@btn-font-weight:				        400;
-
+@btn-default-border: @input-border;
+@btn-font-weight: 400;
 
 /* --------------------------------------------------------
     Tables
 -----------------------------------------------------------*/
-@table-bg:                              #fff;
-@table-border-color:                    #f0f0f0;
-@table-cell-padding:                    10px;
-@table-condensed-cell-padding:          7px;
-@table-bg-accent:                       @light-gray;
-@table-bg-active:                       #FFFCBE;
-@table-bg-hover:                        lighten(@light-gray, 2%);
-
+@table-bg: #fff;
+@table-border-color: #f0f0f0;
+@table-cell-padding: 10px;
+@table-condensed-cell-padding: 7px;
+@table-bg-accent: @light-gray;
+@table-bg-active: #fffcbe;
+@table-bg-hover: lighten(@light-gray, 2%);
 
 /* --------------------------------------------------------
     Pagination
 -----------------------------------------------------------*/
-@pagination-bg:                         #E2E2E2;
-@pagination-border:                     #fff;
-@pagination-color:                      #7E7E7E;
-@pagination-active-bg:                  @lightblue;
-@pagination-active-border:              @pagination-border;
-@pagination-disabled-bg:                #E2E2E2;
-@pagination-disabled-border:            @pagination-border;
-@pagination-hover-color:                #333;
-@pagination-hover-bg:                   #d7d7d7;
-@pagination-hover-border:               @pagination-border;
-
+@pagination-bg: #e2e2e2;
+@pagination-border: #fff;
+@pagination-color: #7e7e7e;
+@pagination-active-bg: @lightblue;
+@pagination-active-border: @pagination-border;
+@pagination-disabled-bg: #e2e2e2;
+@pagination-disabled-border: @pagination-border;
+@pagination-hover-color: #333;
+@pagination-hover-bg: #d7d7d7;
+@pagination-hover-border: @pagination-border;
 
 /* --------------------------------------------------------
     Thumbnail
 -----------------------------------------------------------*/
-@thumbnail-bg:                          #fff;
-@thumbnail-border:                      #eee;
+@thumbnail-bg: #fff;
+@thumbnail-border: #eee;
 
 /* --------------------------------------------------------
     Carousel
 -----------------------------------------------------------*/
-@carousel-caption-color:                #fff;
-
+@carousel-caption-color: #fff;
 
 /* --------------------------------------------------------
     Modal
 -----------------------------------------------------------*/
-@modal-content-fallback-border-color:	transparent;
-@modal-content-border-color:			transparent;
-@modal-backdrop-bg:						#000;
-@modal-header-border-color:				transparent;
-@modal-title-line-height:				transparent;
-@modal-footer-border-color:				transparent;
-@zindex-modal-background: 				10;
-
+@modal-content-fallback-border-color: transparent;
+@modal-content-border-color: transparent;
+@modal-backdrop-bg: #000;
+@modal-header-border-color: transparent;
+@modal-title-line-height: transparent;
+@modal-footer-border-color: transparent;
+@zindex-modal-background: 10;
 
 /* --------------------------------------------------------
     Tooltips
 -----------------------------------------------------------*/
-@tooltip-bg:                            #333;
-@tooltip-opacity:                       1;
-
+@tooltip-bg: #333;
+@tooltip-opacity: 1;
 
 /* --------------------------------------------------------
     Popobver
 -----------------------------------------------------------*/
-@zindex-popover:                        9;
-@popover-title-bg:                      #fff;
-@popover-border-color:                  #fff;
-@popover-fallback-border-color:         #fff;
-
+@zindex-popover: 9;
+@popover-title-bg: #fff;
+@popover-border-color: #fff;
+@popover-fallback-border-color: #fff;
 
 /* --------------------------------------------------------
     Breacrumb
 -----------------------------------------------------------*/
-@breadcrumb-bg:                         transparent;
-@breadcrumb-padding-horizontal:         20px;
-@breadcrumb-active-color:               #7c7c7c;
-
+@breadcrumb-bg: transparent;
+@breadcrumb-padding-horizontal: 20px;
+@breadcrumb-active-color: #7c7c7c;
 
 /* --------------------------------------------------------
     Jumbotron
 -----------------------------------------------------------*/
-@jumbotron-bg:                          #F7F7F7;
-
+@jumbotron-bg: #f7f7f7;
 
 /* --------------------------------------------------------
     List Group
 -----------------------------------------------------------*/
-@list-group-border:                     #f4f4f4;
-@list-group-active-color:               #000;
-@list-group-active-bg:                  #f5f5f5;
-@list-group-active-border:              @list-group-border;
-@list-group-disabled-color:             #B5B4B4;
-@list-group-disabled-bg:                #fff;
-@list-group-disabled-text-color:        #B5B4B4;
-
+@list-group-border: #f4f4f4;
+@list-group-active-color: #000;
+@list-group-active-bg: #f5f5f5;
+@list-group-active-border: @list-group-border;
+@list-group-disabled-color: #b5b4b4;
+@list-group-disabled-bg: #fff;
+@list-group-disabled-text-color: #b5b4b4;
 
 /* --------------------------------------------------------
     Badges
 -----------------------------------------------------------*/
-@badge-color:                           #fff;
-@badge-bg:                              @brand-primary;
-@badge-border-radius:                   2px;
-@badge-font-weight:                     400;
-@badge-active-color:                    #fff;
-@badge-active-bg:                       @brand-primary;
-
+@badge-color: #fff;
+@badge-bg: @brand-primary;
+@badge-border-radius: 2px;
+@badge-font-weight: 400;
+@badge-active-color: #fff;
+@badge-active-bg: @brand-primary;
 
 /* --------------------------------------------------------
     Misc
 -----------------------------------------------------------*/
-@code-bg:                               transparent;
-@tile-shadow:                           0 1px 1px rgba(0,0,0,0.07);
+@code-bg: transparent;
+@tile-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
diff --git a/client/app/components/QueryLink.less b/client/app/components/QueryLink.less
index 386241ce73..faa33a2678 100644
--- a/client/app/components/QueryLink.less
+++ b/client/app/components/QueryLink.less
@@ -1,7 +1,4 @@
 .query-link {
   .visualization-name {
-    font-size: 15px;
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.8);
   }
-}
\ No newline at end of file
+}
diff --git a/client/app/components/dashboards/dashboard-grid.less b/client/app/components/dashboards/dashboard-grid.less
index 1f5d0b39bf..e854a2c90b 100644
--- a/client/app/components/dashboards/dashboard-grid.less
+++ b/client/app/components/dashboards/dashboard-grid.less
@@ -1,3 +1,5 @@
+@import (reference, less) "~@/assets/less/inc/variables";
+
 .dashboard-wrapper {
   flex-grow: 1;
   margin-bottom: 70px;
@@ -18,6 +20,9 @@
     overflow: hidden;
     margin: 0;
     padding: 0;
+    border-radius: 16px;
+    background-color: @white-100;
+    box-shadow: none !important;
   }
 
   .pivot-table-visualization-container > table,
@@ -182,3 +187,27 @@
     }
   }
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite !important;
+  color: @primary-500;
+}
+.widget-main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding-inline: 24px;
+}
+.spinner-container {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
index 9a021cc8bd..fceb9c249e 100644
--- a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
@@ -302,15 +302,20 @@ class VisualizationWidget extends React.Component {
         );
       default:
         return (
-          <div
-            className="body-row-auto spinner-container"
-            role="status"
-            aria-live="polite"
-            aria-relevant="additions removals">
-            <div className="spinner">
-              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" aria-hidden="true" />
-              <span className="sr-only">Loading...</span>
-            </div>
+          <div className="spinner-container">
+            <svg
+              className="animate-spin"
+              height={64}
+              width={64}
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24">
+              <circle opacity={0.25} cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path
+                opacity={0.75}
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
           </div>
         );
     }
diff --git a/client/app/components/dashboards/dashboard-widget/Widget.jsx b/client/app/components/dashboards/dashboard-widget/Widget.jsx
index 69734b36e7..40854552cb 100644
--- a/client/app/components/dashboards/dashboard-widget/Widget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/Widget.jsx
@@ -125,7 +125,7 @@ class Widget extends React.Component {
             {canEdit && <WidgetDeleteButton onClick={this.deleteWidget} />}
           </div>
           <div className="body-row widget-header">{header}</div>
-          {children}
+          <div className='widget-main'>{children}</div>
           {footer && <div className="body-row tile__bottom-control">{footer}</div>}
         </div>
       </div>
diff --git a/client/app/components/dashboards/dashboard-widget/Widget.less b/client/app/components/dashboards/dashboard-widget/Widget.less
index d7603c405c..c2ad5b87dd 100644
--- a/client/app/components/dashboards/dashboard-widget/Widget.less
+++ b/client/app/components/dashboards/dashboard-widget/Widget.less
@@ -4,9 +4,10 @@
   .widget-actions {
     display: flex;
     position: absolute;
-    top: 0;
+    top: 17px;
     right: 0;
     z-index: 1;
+    color: @gray-500A;
 
     .action {
       font-size: 24px;
@@ -16,12 +17,13 @@
       padding: 4px 10px 3px;
 
       &:focus {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: transparent;
+        color: @primary-500;
       }
 
       &:hover {
         background-color: transparent;
-        color: @blue;
+        color: @primary-300;
       }
 
       &:active {
@@ -196,12 +198,13 @@
       }
 
       .query-link {
-        color: fade(@redash-black, 80%);
-        font-size: 15px;
-        font-weight: 500;
+        color: @gray-700;
+        font-size: 18px;
+        font-weight: 300;
+        line-height: 22px;
 
         &:not(.visualization-name) {
-          color: fade(@redash-black, 50%);
+          color: @gray-700;
         }
       }
     }
@@ -218,7 +221,7 @@
   }
 
   .t-header.widget {
-    padding: 15px;
+    padding: 24px 24px 10px 24px;
   }
 
   &:hover,
@@ -254,12 +257,16 @@
 
     a,
     .plain-button {
-      color: fade(@redash-black, 65%);
+      color: @gray-500A;
 
       &:hover,
       &:focus {
-        color: fade(@redash-black, 95%);
+        color: @primary-300;
       }
     }
+
+    .plain-button.ant-dropdown-open {
+      color: @primary-500;
+    }
   }
 }
diff --git a/client/app/components/visualizations/VisualizationName.less b/client/app/components/visualizations/VisualizationName.less
index 853ba7e807..6d200297fe 100644
--- a/client/app/components/visualizations/VisualizationName.less
+++ b/client/app/components/visualizations/VisualizationName.less
@@ -1,5 +1,7 @@
+@import (reference, less) "~@/assets/less/inc/variables";
+
 .visualization-name:empty + span {
-  color: rgba(0, 0, 0, 0.8);
+  color: @gray-700;
 }
 
 .visualization-name {
diff --git a/client/app/config/dashboard-grid-options.js b/client/app/config/dashboard-grid-options.js
index a07c5691bb..f06c6805fb 100644
--- a/client/app/config/dashboard-grid-options.js
+++ b/client/app/config/dashboard-grid-options.js
@@ -1,7 +1,7 @@
 export default {
   columns: 6, // grid columns count
   rowHeight: 50, // grid row height (incl. bottom padding)
-  margins: 15, // widget margins
+  margins: 24, // widget margins
   mobileBreakPoint: 800,
   // defaults for widgets
   defaultSizeX: 3,
diff --git a/client/app/index.html b/client/app/index.html
index a7e0d40e2a..4ef1ba6b8c 100644
--- a/client/app/index.html
+++ b/client/app/index.html
@@ -5,6 +5,9 @@
     <meta charset="UTF-8" />
     <base href="<%= htmlWebpackPlugin.options.baseHref %>" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
     <script src="<%= htmlWebpackPlugin.options.staticPath %>unsupportedRedirect.js" async></script>
 
     <link
@@ -30,7 +33,7 @@
   <body>
     <section>
       <div id="application-root"></div>
-      <div class="loading-indicator">
+      <!-- <div class="loading-indicator">
         <div id="css-logo">
           <div id="circle">
             <div></div>
@@ -44,7 +47,7 @@
             <div class="bar"></div>
             <div class="bar"></div>
           </div>
-        </div>
+        </div> -->
         <div id="shadow"></div>
       </div>
     </section>
diff --git a/client/app/unsupported.html b/client/app/unsupported.html
index 2e6fac7fad..dc6473f4e7 100644
--- a/client/app/unsupported.html
+++ b/client/app/unsupported.html
@@ -9,7 +9,7 @@
       background: #F6F8F9;
       text-align: center;
       color: #333;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      font-family: 'Inter', sans-serif;
     }
 
     a {
diff --git a/viz-lib/src/visualizations/ColorPalette.ts b/viz-lib/src/visualizations/ColorPalette.ts
index 3663a68218..1d6b370c60 100644
--- a/viz-lib/src/visualizations/ColorPalette.ts
+++ b/viz-lib/src/visualizations/ColorPalette.ts
@@ -2,20 +2,29 @@ import { values } from "lodash";
 
 // The following colors will be used if you pick "Automatic" color
 export const BaseColors = {
-  Blue: "#356AFF",
-  Red: "#E92828",
-  Green: "#3BD973",
-  Purple: "#604FE9",
-  Cyan: "#50F5ED",
-  Orange: "#FB8D3D",
-  "Light Blue": "#799CFF",
-  Lilac: "#B554FF",
-  "Light Green": "#8CFFB4",
-  Brown: "#A55F2A",
-  Black: "#000000",
-  Gray: "#494949",
-  Pink: "#FF7DE3",
-  "Dark Blue": "#002FB4",
+  // Primary700: "#7B1FA2",
+  // Primary500: "#B045E6",
+  // Primary300: "#D8A2F3",
+  // Primary100: "#FBF6FE",
+  // Secondary700: "#BD3362",
+  // Secondary500: "#EC407A",
+  // Secondary300: "#F48CAF",
+  // Secondary100: "#FDF8FF",
+  Purple: "#B045E6",
+  Red: "#EC407A",
+  Yellow: "#FFD600",
+  Cyan: "#00BCD4",
+  Blue: "#0091EA",
+  // Green: "#3BD973",
+  // Orange: "#FB8D3D",
+  // "Light Blue": "#799CFF",
+  // Lilac: "#B554FF",
+  // "Light Green": "#8CFFB4",
+  // Brown: "#A55F2A",
+  // Black: "#000000",
+  // Gray: "#494949",
+  // Pink: "#FF7DE3",
+  // "Dark Blue": "#002FB4",
 };
 
 // Additional colors for the user to choose from
diff --git a/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts b/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts
index f79912a2fd..3f9f43409b 100644
--- a/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts
+++ b/viz-lib/src/visualizations/chart/plotly/prepareLayout.ts
@@ -21,6 +21,8 @@ function prepareXAxis(axisOptions: any, additionalOptions: any) {
     title: getAxisTitle(axisOptions),
     type: getAxisScaleType(axisOptions),
     automargin: true,
+    showgrid: false,
+    showline: false,
   };
 
   if (additionalOptions.sortX && axis.type === "category") {
@@ -48,6 +50,8 @@ function prepareYAxis(axisOptions: any) {
     automargin: true,
     autorange: true,
     range: null,
+    showgrid: false,
+    showline: false,
   };
 }
 
@@ -108,7 +112,7 @@ function prepareBoxLayout(layout: any, options: any, data: any) {
 
 export default function prepareLayout(element: any, options: any, data: any) {
   const layout = {
-    margin: { l: 10, r: 10, b: 5, t: 20, pad: 4 },
+    margin: { l: 0, r: 0, b: 10, t: 20 },
     // plot size should be at least 5x5px
     width: Math.max(5, Math.floor(element.offsetWidth)),
     height: Math.max(5, Math.floor(element.offsetHeight)),
@@ -120,6 +124,9 @@ export default function prepareLayout(element: any, options: any, data: any) {
     hoverlabel: {
       namelength: -1,
     },
+    plot_bgcolor: "#FBFDFF",
+    paper_bgcolor: "#FBFDFF",
+    font: { family: "'Inter', sans-serif", color: "#474E6A" },
   };
 
   switch (options.globalSeriesType) {
diff --git a/viz-lib/src/visualizations/choropleth/getOptions.ts b/viz-lib/src/visualizations/choropleth/getOptions.ts
index d9be2af082..f08dd10fe8 100644
--- a/viz-lib/src/visualizations/choropleth/getOptions.ts
+++ b/viz-lib/src/visualizations/choropleth/getOptions.ts
@@ -16,8 +16,8 @@ const DEFAULT_OPTIONS = {
   valueFormat: "0,0.00",
   noValuePlaceholder: "N/A",
   colors: {
-    min: ColorPalette["Light Blue"],
-    max: ColorPalette["Dark Blue"],
+    min: ColorPalette["Cyan"],
+    max: ColorPalette["Blue"],
     background: ColorPalette.White,
     borders: ColorPalette.White,
     noValue: ColorPalette["Light Gray"],
diff --git a/viz-lib/src/visualizations/cohort/getOptions.ts b/viz-lib/src/visualizations/cohort/getOptions.ts
index 4efe2abb51..2e6f7f9b86 100644
--- a/viz-lib/src/visualizations/cohort/getOptions.ts
+++ b/viz-lib/src/visualizations/cohort/getOptions.ts
@@ -22,7 +22,7 @@ const DEFAULT_OPTIONS = {
 
   colors: {
     min: "#ffffff",
-    max: ColorPalette["Dark Blue"],
+    max: ColorPalette["Blue"],
     steps: 7,
   },
 };
diff --git a/viz-lib/src/visualizations/counter/render.less b/viz-lib/src/visualizations/counter/render.less
index db19ccb723..972260dae1 100755
--- a/viz-lib/src/visualizations/counter/render.less
+++ b/viz-lib/src/visualizations/counter/render.less
@@ -1,7 +1,9 @@
+@import (reference, less) "~@/assets/less/inc/variables";
+
 .counter-visualization-container {
   display: block;
   text-align: center;
-  padding: 15px 10px;
+  padding: 15px 24px;
   overflow: hidden;
   position: relative;
 
@@ -15,16 +17,20 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    color: @gray-400;
+    font-weight: 300;
 
     .counter-visualization-value,
     .counter-visualization-target {
       font-size: 1em;
       display: block;
+      color: inherit;
     }
 
     .counter-visualization-label {
       font-size: 0.5em;
       display: block;
+      color: inherit;
     }
 
     .counter-visualization-target {
diff --git a/viz-lib/src/visualizations/sankey/initSankey.ts b/viz-lib/src/visualizations/sankey/initSankey.ts
index b0d47b880d..bfd1d5cac4 100644
--- a/viz-lib/src/visualizations/sankey/initSankey.ts
+++ b/viz-lib/src/visualizations/sankey/initSankey.ts
@@ -100,7 +100,7 @@ function graph(data: ExtendedSankeyDataType["rows"]) {
   });
 
   // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
-  const color = d3.scale.category20();
+  const color = d3.scale.category20().range(["#00BCD4", "#B045E6", "#EC407A", "#FFD600", "#0091EA"]);
 
   return {
     nodes: map(nodes, d => extend(d, { color: color(d.name.replace(/ .*/, "")) })),
diff --git a/viz-lib/src/visualizations/sankey/renderer.less b/viz-lib/src/visualizations/sankey/renderer.less
index ea11ad1b20..0e5d6bf263 100644
--- a/viz-lib/src/visualizations/sankey/renderer.less
+++ b/viz-lib/src/visualizations/sankey/renderer.less
@@ -1,6 +1,6 @@
 /* Sankey Visualization */
 .sankey .node rect {
-  fill-opacity: .9;
+  fill-opacity: 0.9;
   shape-rendering: crispEdges;
   stroke-width: 0;
 }
@@ -10,7 +10,7 @@
 .sankey .link {
   fill: none;
   stroke: #000;
-  stroke-opacity: .2;
+  stroke-opacity: 0.2;
 }
 
 .sankey-visualization-container {
diff --git a/viz-lib/src/visualizations/sunburst/initSunburst.ts b/viz-lib/src/visualizations/sunburst/initSunburst.ts
index b44c59de04..e981c59880 100644
--- a/viz-lib/src/visualizations/sunburst/initSunburst.ts
+++ b/viz-lib/src/visualizations/sunburst/initSunburst.ts
@@ -7,7 +7,7 @@ import { has, map, keys, groupBy, sortBy, filter, find, compact, first, every, i
 
 const exitNode = "<<<Exit>>>";
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'typeof im... Remove this comment to see the full error message
-const colors = d3.scale.category10();
+const colors = d3.scale.category10().range(["#00BCD4", "#B045E6", "#EC407A", "#FFD600", "#0091EA"]);
 
 // helper function colorMap - color gray if "end" is detected
 function colorMap(d: any) {
diff --git a/viz-lib/src/visualizations/variables.less b/viz-lib/src/visualizations/variables.less
index f34ba53f1c..cdc15e133a 100644
--- a/viz-lib/src/visualizations/variables.less
+++ b/viz-lib/src/visualizations/variables.less
@@ -11,8 +11,7 @@
     Font
 -----------------------------------------------------------*/
 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
-@visualizations-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-  "Helvetica Neue", sans-serif;
+@visualizations-font: "Inter", sans-serif;
 
 /* --------------------------------------------------------
     Borders
diff --git a/webpack.config.js b/webpack.config.js
index 5aa2a49afc..61830fa14b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -34,7 +34,7 @@ const isDevelopment = !isProduction;
 const isHotReloadingEnabled =
   isDevelopment && process.env.HOT_RELOAD === "true";
 
-const redashBackend = process.env.REDASH_BACKEND || "http://localhost:5001";
+const redashBackend = process.env.REDASH_BACKEND || "http://[::1]:5001";
 const baseHref = CONFIG.baseHref || "/";
 const staticPath = CONFIG.staticPath || "/static/";
 const htmlTitle = CONFIG.title || "Redash";
@@ -258,7 +258,7 @@ const config = {
           "/oauth"
         ],
         target: redashBackend + "/",
-        changeOrigin: false,
+        changeOrigin: true,
         secure: false
       },
       {