diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts
index 5c75e86b912..24a4535a2f6 100644
--- a/packages/grafana-data/src/types/theme.ts
+++ b/packages/grafana-data/src/types/theme.ts
@@ -229,6 +229,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     formFocusOutline: string;
     formInputText: string;
     formInputDisabledText: string;
+    formInputPlaceholderText: string;
     formInputTextStrong: string;
     formInputTextWhite: string;
     formValidationMessageText: string;
diff --git a/packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss b/packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss
index c3c4dfcf517..8793c831678 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss
+++ b/packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss
@@ -4,7 +4,7 @@
   &-menus {
     font-size: 12px;
     overflow: hidden;
-    background: $panel-bg;
+    background: $page-bg;
     position: absolute;
     border: $panel-border;
     border-radius: $border-radius;
diff --git a/packages/grafana-ui/src/components/Forms/Input/Input.tsx b/packages/grafana-ui/src/components/Forms/Input/Input.tsx
index a3749ef4c88..de7c7969883 100644
--- a/packages/grafana-ui/src/components/Forms/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Forms/Input/Input.tsx
@@ -47,6 +47,11 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
     height: 100%;
     /* Min width specified for prefix/suffix classes used outside React component*/
     min-width: ${prefixSuffixStaticWidth};
+    // Hack to fix font awesome icons
+    > .fa {
+      position: relative;
+      top: 2px;
+    }
   `;
 
   return {
diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx
index 208907f6c21..e47c523f2ba 100644
--- a/packages/grafana-ui/src/components/Forms/Label.tsx
+++ b/packages/grafana-ui/src/components/Forms/Label.tsx
@@ -20,7 +20,7 @@ export const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
       max-width: 480px;
     `,
     description: css`
-      color: ${theme.colors.formLabel};
+      color: ${theme.colors.formDescription};
       font-size: ${theme.typography.size.sm};
       font-weight: ${theme.typography.weight.regular};
       display: block;
diff --git a/packages/grafana-ui/src/components/Forms/Select/IndicatorsContainer.tsx b/packages/grafana-ui/src/components/Forms/Select/IndicatorsContainer.tsx
index 38db9ac9984..e52ee021185 100644
--- a/packages/grafana-ui/src/components/Forms/Select/IndicatorsContainer.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/IndicatorsContainer.tsx
@@ -14,7 +14,7 @@ export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsW
         styles.suffix,
         css`
           position: relative;
-          top: auto;
+          top: 1px;
         `
       )}
       ref={ref}
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
index 218cde897e4..995d03541f0 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
@@ -212,7 +212,7 @@ export function SelectBase<T>({
                 css(props.getStyles('placeholder', props)),
                 css`
                   display: inline-block;
-                  color: hsl(0, 0%, 50%);
+                  color: ${theme.colors.formInputPlaceholderText};
                   position: absolute;
                   top: 50%;
                   transform: translateY(-50%);
diff --git a/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
index 6e981f750a2..078f7512a57 100644
--- a/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
@@ -5,6 +5,7 @@ import { cx } from 'emotion';
 import { SelectableValue } from '@grafana/data';
 import { Icon } from '../../Icon/Icon';
 import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
+
 interface SelectMenuProps {
   maxHeight: number;
   innerRef: React.Ref<any>;
diff --git a/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
index 30ef70f2db9..a29abeb6208 100644
--- a/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
@@ -4,7 +4,7 @@ import { css } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 
 export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = stv({ light: theme.colors.white, dark: theme.colors.gray15 }, theme.type);
+  const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
   const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
   const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
   const multiValueContainerBg = stv({ light: theme.colors.gray6, dark: theme.colors.gray05 }, theme.type);
diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts
index 48e64dc60ae..1f061c2188f 100644
--- a/packages/grafana-ui/src/components/Forms/commonStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts
@@ -51,6 +51,11 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
       background-color: ${colors.formInputBgDisabled};
       color: ${colors.formInputDisabledText};
     }
+
+    &::placeholder {
+      color: ${colors.formInputPlaceholderText};
+      opacity: 1;
+    }
   `;
 };
 
diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
index 1f53e1a633c..ff04197f51f 100644
--- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
@@ -102,15 +102,16 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
                   "formCheckboxCheckmark": "#343b40",
-                  "formDescription": "#9fa7b3",
+                  "formDescription": "#7B8087",
                   "formFocusOutline": "#1f60c4",
-                  "formInputBg": "#202226",
+                  "formInputBg": "#0b0c0e",
                   "formInputBgDisabled": "#141619",
                   "formInputBorder": "#343b40",
                   "formInputBorderActive": "#5794f2",
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
+                  "formInputPlaceholderText": "#464c54",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",
@@ -135,6 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   "gray4": "#d8d9da",
                   "gray5": "#ececec",
                   "gray6": "#f4f5f8",
+                  "gray60": "#7B8087",
                   "gray7": "#fbfbfb",
                   "gray70": "#9fa7b3",
                   "gray85": "#c7d0d9",
@@ -409,15 +411,16 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "formCheckboxBgChecked": "#5794f2",
                   "formCheckboxBgCheckedHover": "#3274d9",
                   "formCheckboxCheckmark": "#343b40",
-                  "formDescription": "#9fa7b3",
+                  "formDescription": "#7B8087",
                   "formFocusOutline": "#1f60c4",
-                  "formInputBg": "#202226",
+                  "formInputBg": "#0b0c0e",
                   "formInputBgDisabled": "#141619",
                   "formInputBorder": "#343b40",
                   "formInputBorderActive": "#5794f2",
                   "formInputBorderHover": "#464c54",
                   "formInputBorderInvalid": "#e02f44",
                   "formInputDisabledText": "#9fa7b3",
+                  "formInputPlaceholderText": "#464c54",
                   "formInputText": "#c7d0d9",
                   "formInputTextStrong": "#c7d0d9",
                   "formInputTextWhite": "#ffffff",
@@ -442,6 +445,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   "gray4": "#d8d9da",
                   "gray5": "#ececec",
                   "gray6": "#f4f5f8",
+                  "gray60": "#7B8087",
                   "gray7": "#fbfbfb",
                   "gray70": "#9fa7b3",
                   "gray85": "#c7d0d9",
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 58e5a78716e..8cc1b6cf4ef 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -43,7 +43,7 @@ $gray-5: ${theme.colors.gray5};
 $gray-6: ${theme.colors.gray6};
 
 $gray-blue: ${theme.colors.grayBlue};
-$input-black: #09090b;
+$input-black: ${theme.colors.formInputBg};
 
 $white: ${theme.colors.white};
 
@@ -194,12 +194,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 
-$input-color: $gray-4;
+$input-color: ${theme.colors.formInputText};
 $input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-1 !default;
+$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index 84ab4bed341..3e27996f23f 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -79,14 +79,15 @@ const darkTheme: GrafanaTheme = {
 
     // Next-gen forms functional colors
     formLabel: basicColors.gray70,
-    formDescription: basicColors.gray70,
+    formDescription: basicColors.gray60,
     formLegend: basicColors.gray85,
-    formInputBg: basicColors.gray15,
+    formInputBg: basicColors.gray05,
     formInputBgDisabled: basicColors.gray10,
     formInputBorder: basicColors.gray25,
     formInputBorderHover: basicColors.gray33,
     formInputBorderActive: basicColors.blue95,
     formInputBorderInvalid: basicColors.red88,
+    formInputPlaceholderText: basicColors.gray33,
     formInputText: basicColors.gray85,
     formInputDisabledText: basicColors.gray70,
     formInputTextStrong: basicColors.gray85,
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index 33d5ba290ec..c702996e403 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -6,6 +6,7 @@ export const commonColorsPalette = {
   gray95: '#e9edf2',
   gray85: '#c7d0d9',
   gray70: '#9fa7b3',
+  gray60: '#7B8087',
   gray33: '#464c54',
   gray25: '#343b40',
   gray15: '#202226',
diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts
index 271e7052687..697556d13a7 100644
--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -95,6 +95,7 @@ const lightTheme: GrafanaTheme = {
     formInputBorderActive: basicColors.blue77,
     formInputBorderInvalid: basicColors.red88,
     formInputText: basicColors.gray25,
+    formInputPlaceholderText: basicColors.gray70,
     formInputDisabledText: basicColors.gray33,
     formInputTextStrong: basicColors.gray25,
     formInputTextWhite: basicColors.white,
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index a2073e8c14a..26d593b0586 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -46,7 +46,7 @@ $gray-5: #ececec;
 $gray-6: #f4f5f8;
 
 $gray-blue: #212327;
-$input-black: #09090b;
+$input-black: #0b0c0e;
 
 $white: #ffffff;
 
@@ -197,12 +197,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 
-$input-color: $gray-4;
+$input-color: #c7d0d9;
 $input-border-color: $dark-6;
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
 $input-border-focus: $dark-6 !default;
 $input-box-shadow-focus: $blue-light !default;
-$input-color-placeholder: $gray-1 !default;
+$input-color-placeholder: #464c54;
 $input-label-bg: $gray-blue;
 $input-label-border-color: $dark-6;
 $input-color-select-arrow: $white;