diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index b7007b5148b..8a14326c65c 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -87,7 +87,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   whiteBase = '201, 209, 217';
 
   border = {
-    weak: `rgba(${this.whiteBase}, 0.10)`,
+    weak: `rgba(${this.whiteBase}, 0.08)`,
     medium: `rgba(${this.whiteBase}, 0.15)`,
     strong: `rgba(${this.whiteBase}, 0.25)`,
   };
diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index 172b3c7f778..e81e695978e 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -43,8 +43,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
     padding: 1,
     headerHeight: 4,
     background: colors.background.primary,
-    borderColor: colors.background.primary,
-    boxShadow: shadows.z1,
+    borderColor: colors.border.weak,
+    boxShadow: 'none',
   };
 
   const input = {
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
index 10c00284762..74ba6177958 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
@@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       border-radius: ${theme.shape.borderRadius()};
       line-height: ${theme.components.height.md * theme.spacing.gridSize - 2}px;
       font-weight: ${theme.typography.fontWeightMedium};
-      border: 1px solid ${theme.colors.border.medium};
+      border: 1px solid ${theme.colors.border.weak};
       white-space: nowrap;
       transition: ${theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
         duration: theme.transitions.duration.short,
@@ -135,7 +135,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       }
 
       &:hover {
-        box-shadow: ${theme.shadows.z2};
+        box-shadow: ${theme.shadows.z1};
       }
 
       &[disabled],
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
index a69a98faa78..a1e9861c2f3 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@@ -1,38 +1,36 @@
 import React, { FormEvent, memo, useCallback } from 'react';
 import { css } from '@emotion/css';
 import Calendar from 'react-calendar/dist/entry.nostyle';
-import { dateTime, DateTime, dateTimeParse, GrafanaTheme, TimeZone } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../../themes';
+import { dateTime, DateTime, dateTimeParse, GrafanaThemeV2, TimeZone } from '@grafana/data';
+import { stylesFactory, useTheme2 } from '../../../themes';
 import { TimePickerTitle } from './TimePickerTitle';
 import { Button } from '../../Button';
 import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 
-const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
-  const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
-
+const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed = false) => {
   return {
     container: css`
       top: -1px;
       position: absolute;
       ${isReversed ? 'left' : 'right'}: 544px;
-      box-shadow: ${isReversed ? '10px' : '0px'} 0px 20px ${theme.colors.dropdownShadow};
-      background-color: ${theme.colors.bodyBg};
+      box-shadow: ${theme.shadows.z3};
+      background-color: ${theme.colors.background.primary};
       z-index: -1;
-      border: 1px solid ${containerBorder};
+      border: 1px solid ${theme.colors.border.weak};
       border-radius: 2px 0 0 2px;
 
       &:after {
         display: block;
-        background-color: ${theme.colors.bodyBg};
+        background-color: ${theme.colors.background.primary};
         width: 19px;
         height: 100%;
         content: ${!isReversed ? ' ' : ''};
         position: absolute;
         top: 0;
         right: -19px;
-        border-left: 1px solid ${theme.colors.border1};
+        border-left: 1px solid ${theme.colors.border.weak};
       }
     `,
     modal: css`
@@ -59,10 +57,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
   };
 });
 
-const getFooterStyles = stylesFactory((theme: GrafanaTheme) => {
+const getFooterStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     container: css`
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
       display: flex;
       justify-content: center;
       padding: 10px;
@@ -76,11 +74,11 @@ const getFooterStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
+const getBodyStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     title: css`
       color: ${theme.colors.text};
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
       font-size: ${theme.typography.size.md};
       border: 1px solid transparent;
 
@@ -90,7 +88,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     body: css`
       z-index: ${theme.zIndex.modal};
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
       width: 268px;
 
       .react-calendar__navigation__label,
@@ -100,13 +98,13 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
         background-color: inherit;
         color: ${theme.colors.text};
         border: 0;
-        font-weight: ${theme.typography.weight.semibold};
+        font-weight: ${theme.typography.fontWeightMedium};
       }
 
       .react-calendar__month-view__weekdays {
         background-color: inherit;
         text-align: center;
-        color: ${theme.palette.blue77};
+        color: ${theme.colors.primary.text};
 
         abbr {
           border: 0;
@@ -136,9 +134,9 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
 
       .react-calendar__tile--active,
       .react-calendar__tile--active:hover {
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.colors.primary.contrastText};
+        font-weight: ${theme.typography.fontWeightMedium};
+        background: ${theme.colors.primary.main};
         box-shadow: none;
         border: 0px;
       }
@@ -147,12 +145,12 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
       .react-calendar__tile--rangeStart {
         padding: 0;
         border: 0px;
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.colors.primary.contrastText};
+        font-weight: ${theme.typography.fontWeightMedium};
+        background: ${theme.colors.primary.main};
 
         abbr {
-          background-color: ${theme.palette.blue77};
+          background-color: ${theme.colors.primary.main};
           border-radius: 100px;
           display: block;
           padding-top: 2px;
@@ -173,10 +171,10 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
   };
 });
 
-const getHeaderStyles = stylesFactory((theme: GrafanaTheme) => {
+const getHeaderStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     container: css`
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
       display: flex;
       justify-content: space-between;
       padding: 7px;
@@ -199,7 +197,7 @@ interface Props {
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();
 
 export const TimePickerCalendar = memo<Props>((props) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getStyles(theme, props.isReversed);
   const { isOpen, isFullscreen } = props;
 
@@ -234,7 +232,7 @@ export const TimePickerCalendar = memo<Props>((props) => {
 TimePickerCalendar.displayName = 'TimePickerCalendar';
 
 const Header = memo<Props>(({ onClose }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getHeaderStyles(theme);
 
   return (
@@ -249,7 +247,7 @@ Header.displayName = 'Header';
 
 const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
   const value = inputToValue(from, to);
-  const theme = useTheme();
+  const theme = useTheme2();
   const onCalendarChange = useOnCalendarChange(onChange, timeZone);
   const styles = getBodyStyles(theme);
 
@@ -272,7 +270,7 @@ const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
 Body.displayName = 'Body';
 
 const Footer = memo<Props>(({ onClose, onApply }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const styles = getFooterStyles(theme);
 
   return (
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index ea4edf0cd2d..792c9d77bd3 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -53,6 +53,10 @@ export function getElementStyles(theme: GrafanaThemeV2) {
 
     button {
       letter-spacing: ${theme.typography.body.letterSpacing};
+
+      &:focus {
+        outline: none;
+      }
     }
 
     // Ex: 14px base font * 85% = about 12px
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index f8cd252dcb9..262bc621b7c 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -227,10 +227,11 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.colors.background.secondary};
+$dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
+$dropdownShadow: ${theme.shadows.z3};
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 9e206e7b42f..b63aff96b60 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -222,10 +222,11 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.colors.background.secondary};
+$dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
+$dropdownShadow: ${theme.shadows.z3};
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index f2a02317aec..f9ab9abc765 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -126,7 +126,7 @@ $headings-line-height: ${theme.v1.typography.lineHeight.sm} !default;
 
 $border-width: ${theme.v1.border.width.sm} !default;
 
-$border-radius: ${theme.v1.border.radius.md} !default;
+$border-radius: ${theme.v1.border.radius.sm} !default;
 $border-radius-lg: ${theme.v1.border.radius.lg} !default;
 $border-radius-sm: ${theme.v1.border.radius.sm} !default;
 
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index b838ac1294c..6b1d73f8948 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
 
   return (
     <div className={styles.wrapper}>
-      <TabsBar className={styles.tabBar} hideBorder>
+      <TabsBar className={styles.tabBar}>
         {tabs.map((tab) => {
           return (
             <Tab
diff --git a/public/app/features/explore/ErrorContainer.tsx b/public/app/features/explore/ErrorContainer.tsx
index 9acd6f5efb9..675b2dcf6f7 100644
--- a/public/app/features/explore/ErrorContainer.tsx
+++ b/public/app/features/explore/ErrorContainer.tsx
@@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { DataQueryError } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Alert, useTheme2 } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { css } from '@emotion/css';
 
 export interface ErrorContainerProps {
   queryError?: DataQueryError;
@@ -9,22 +10,20 @@ export interface ErrorContainerProps {
 
 export const ErrorContainer: FunctionComponent<ErrorContainerProps> = (props) => {
   const { queryError } = props;
+  const theme = useTheme2();
   const showError = queryError ? true : false;
   const duration = showError ? 100 : 10;
-  const message = queryError?.message || queryError?.data?.message || 'Unknown error';
+  const title = queryError ? 'Query error' : 'Unknown error';
+  const message = queryError?.message || queryError?.data?.message || null;
+  const alertWithTopMargin = css`
+    margin-top: ${theme.spacing(2)};
+  `;
 
   return (
     <FadeIn in={showError} duration={duration}>
-      <div className="alert-container">
-        <div className="alert-error alert">
-          <div className="alert-icon">
-            <Icon name="exclamation-triangle" />
-          </div>
-          <div className="alert-body">
-            <div className="alert-title">{message}</div>
-          </div>
-        </div>
-      </div>
+      <Alert severity="error" title={title} className={alertWithTopMargin}>
+        {message}
+      </Alert>
     </FadeIn>
   );
 };
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 5e5285d464e..590a5f645e2 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -335,8 +335,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                 onClickRichHistoryButton={this.toggleShowRichHistory}
                 onClickQueryInspectorButton={this.toggleShowQueryInspector}
               />
+              <ResponseErrorContainer exploreId={exploreId} />
             </div>
-            <ResponseErrorContainer exploreId={exploreId} />
             <AutoSizer onResize={this.onResize} disableHeight>
               {({ width }) => {
                 if (width === 0) {
diff --git a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap b/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
index a7e0ccfff27..071c68f68e0 100644
--- a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap
@@ -5,29 +5,12 @@ exports[`ErrorContainer should render component 1`] = `
   duration={100}
   in={true}
 >
-  <div
-    className="alert-container"
+  <Alert
+    className="css-x7g5ai"
+    severity="error"
+    title="Query error"
   >
-    <div
-      className="alert-error alert"
-    >
-      <div
-        className="alert-icon"
-      >
-        <Icon
-          name="exclamation-triangle"
-        />
-      </div>
-      <div
-        className="alert-body"
-      >
-        <div
-          className="alert-title"
-        >
-          Error message
-        </div>
-      </div>
-    </div>
-  </div>
+    Error message
+  </Alert>
 </FadeIn>
 `;
diff --git a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
index abc9452ba4c..27e05fc8d03 100644
--- a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap
@@ -27,10 +27,10 @@ exports[`Explore should render component 1`] = `
         queryInspectorButtonActive={false}
         richHistoryButtonActive={false}
       />
+      <ResponseErrorContainer
+        exploreId="left"
+      />
     </div>
-    <ResponseErrorContainer
-      exploreId="left"
-    />
     <AutoSizer
       disableHeight={true}
       disableWidth={false}
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 8f62c9efee4..2cceca3206f 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -61,9 +61,9 @@ $layer0: #111217;
 $layer1: #181b1f;
 $layer2: #22252b;
 
-$divider: rgba(201, 209, 217, 0.10);
+$divider: rgba(201, 209, 217, 0.08);
 
-$border0: rgba(201, 209, 217, 0.10);
+$border0: rgba(201, 209, 217, 0.08);
 $border1: rgba(201, 209, 217, 0.15);
 
 // Accent colors
@@ -130,9 +130,9 @@ $hr-border-color: $dark-9;
 // Panel
 // -------------------------
 $panel-bg: #181b1f;
-$panel-border: 1px solid #181b1f;
+$panel-border: 1px solid rgba(201, 209, 217, 0.08);
 $panel-header-hover-bg: rgba(201, 209, 217, 0.08);
-$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.75);
+$panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
 // page header
@@ -230,10 +230,11 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #22252b;
-$dropdownBorder: rgba(201, 209, 217, 0.10);
-$dropdownDividerTop: rgba(201, 209, 217, 0.10);
-$dropdownDividerBottom: rgba(201, 209, 217, 0.10);
+$dropdownBackground: #181b1f;
+$dropdownBorder: rgba(201, 209, 217, 0.08);
+$dropdownDividerTop: rgba(201, 209, 217, 0.08);
+$dropdownDividerBottom: rgba(201, 209, 217, 0.08);
+$dropdownShadow: 0px 10px 20px rgb(20,20,20);
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@@ -294,7 +295,7 @@ $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);
 
 $popover-bg: #181b1f;
 $popover-color: rgb(201, 209, 217);
-$popover-border-color: rgba(201, 209, 217, 0.10);
+$popover-border-color: rgba(201, 209, 217, 0.08);
 $popover-header-bg: #22252b;
 $popover-shadow: 0px 10px 20px rgb(20,20,20);
 
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index c83a8805ef4..c1dbcf8814d 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -129,7 +129,7 @@ $headings-line-height: 1.5 !default;
 
 $border-width: 1px !default;
 
-$border-radius: 4px !default;
+$border-radius: 2px !default;
 $border-radius-lg: 6px !default;
 $border-radius-sm: 2px !default;
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index ba53168b798..3efc5ca6bda 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -124,9 +124,9 @@ $hr-border-color: $gray-4 !default;
 // Panel
 // -------------------------
 $panel-bg: #fff;
-$panel-border: 1px solid #fff;
+$panel-border: 1px solid rgba(36, 41, 46, 0.12);
 $panel-header-hover-bg: rgba(36, 41, 46, 0.04);
-$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.2);
+$panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
 // Page header
@@ -224,10 +224,11 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #F4F5F5;
+$dropdownBackground: #fff;
 $dropdownBorder: rgba(36, 41, 46, 0.12);
 $dropdownDividerTop: rgba(36, 41, 46, 0.12);
 $dropdownDividerBottom: rgba(36, 41, 46, 0.12);
+$dropdownShadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index d8b78d73fd6..60d63d0c007 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -8,7 +8,6 @@
 .alert {
   padding: 15px 20px;
   margin-bottom: $space-xs;
-  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
   border-left: 3px solid $alert-error-bg;
   background: $layer2;
   position: relative;
diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss
index be15ab83ab1..b9c8d3afc73 100644
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@@ -25,7 +25,7 @@
     padding-left: 8px;
   }
 
-  .gf-form-inline .gf-form {
+  .gf-form {
     margin-bottom: 0;
   }
 }
@@ -54,14 +54,14 @@
 
 .variable-value-dropdown {
   position: absolute;
-  top: 47px;
+  top: $input-height;
   min-width: 150px;
   max-height: 400px;
   min-height: 150px;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: $dropdownBackground;
-  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: $dropdownShadow;
   z-index: $zindex-typeahead;
   font-size: $font-size-base;
   border-radius: 3px 3px 0 0;