diff --git a/.betterer.results b/.betterer.results
index 87b8a31de53..e14d97f73cc 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -6134,10 +6134,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not re-export imported variable (\`./thirdArgAfterSearchQuery\`)", "4"],
       [0, 0, 0, "Do not re-export imported variable (\`./withinStringQuery\`)", "5"]
     ],
-    "public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
diff --git a/packages/grafana-prometheus/src/components/PromCheatSheet.tsx b/packages/grafana-prometheus/src/components/PromCheatSheet.tsx
index 7eaee0b0782..4e452244cce 100644
--- a/packages/grafana-prometheus/src/components/PromCheatSheet.tsx
+++ b/packages/grafana-prometheus/src/components/PromCheatSheet.tsx
@@ -1,7 +1,9 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromCheatSheet.tsx
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { QueryEditorHelpProps } from '@grafana/data';
+import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 
 import { PromQuery } from '../types';
 
@@ -29,23 +31,44 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => (
-  <div>
-    <h2>PromQL Cheat Sheet</h2>
-    {CHEAT_SHEET_ITEMS.map((item, index) => (
-      <div className="cheat-sheet-item" key={index}>
-        <div className="cheat-sheet-item__title">{item.title}</div>
-        {item.expression ? (
-          <button
-            type="button"
-            className="cheat-sheet-item__example"
-            onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
-          >
-            <code>{item.expression}</code>
-          </button>
-        ) : null}
-        <div className="cheat-sheet-item__label">{item.label}</div>
-      </div>
-    ))}
-  </div>
-);
+export const PromCheatSheet = (props: QueryEditorHelpProps<PromQuery>) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div>
+      <h2>PromQL Cheat Sheet</h2>
+      {CHEAT_SHEET_ITEMS.map((item, index) => (
+        <div className={styles.cheatSheetItem} key={index}>
+          <div className={styles.cheatSheetItemTitle}>{item.title}</div>
+          {item.expression ? (
+            <button
+              type="button"
+              className={styles.cheatSheetExample}
+              onClick={(e) => props.onClickExample({ refId: 'A', expr: item.expression })}
+            >
+              <code>{item.expression}</code>
+            </button>
+          ) : null}
+          {item.label}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  cheatSheetItem: css({
+    margin: theme.spacing(3, 0),
+  }),
+  cheatSheetItemTitle: css({
+    fontSize: theme.typography.h3.fontSize,
+  }),
+  cheatSheetExample: css({
+    margin: theme.spacing(0.5, 0),
+    // element is interactive, clear button styles
+    textAlign: 'left',
+    border: 'none',
+    background: 'transparent',
+    display: 'block',
+  }),
+});
diff --git a/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx b/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
index a202786e14a..bbff06629c5 100644
--- a/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
+++ b/packages/grafana-prometheus/src/components/PromExploreExtraField.tsx
@@ -4,7 +4,8 @@ import { isEqual } from 'lodash';
 import React, { memo, useCallback } from 'react';
 import { usePrevious } from 'react-use';
 
-import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { InlineFormLabel, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery } from '../types';
@@ -21,6 +22,7 @@ export interface PromExploreExtraFieldProps {
 export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQuery }: PromExploreExtraFieldProps) => {
   const rangeOptions = getQueryTypeOptions(true);
   const prevQuery = usePrevious(query);
+  const styles = useStyles2(getStyles);
 
   const onExemplarChange = useCallback(
     (exemplar: boolean) => {
@@ -59,7 +61,8 @@ export const PromExploreExtraField = memo(({ query, datasource, onChange, onRunQ
       <div
         data-testid={promExploreExtraFieldTestIds.queryTypeField}
         className={cx(
-          'gf-form explore-input-margin',
+          'gf-form',
+          styles.queryTypeField,
           css({
             flexWrap: 'nowrap',
           })
@@ -144,3 +147,9 @@ export const promExploreExtraFieldTestIds = {
   stepField: 'prom-editor-extra-field-step',
   queryTypeField: 'prom-editor-extra-field-query-type',
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  queryTypeField: css({
+    marginRight: theme.spacing(0.5),
+  }),
+});
diff --git a/packages/grafana-prometheus/src/components/PromQueryField.tsx b/packages/grafana-prometheus/src/components/PromQueryField.tsx
index ac648271d44..e4a83498aad 100644
--- a/packages/grafana-prometheus/src/components/PromQueryField.tsx
+++ b/packages/grafana-prometheus/src/components/PromQueryField.tsx
@@ -1,5 +1,5 @@
 // Core Grafana history https://github.com/grafana/grafana/blob/v11.0.0-preview/public/app/plugins/datasource/prometheus/components/PromQueryField.tsx
-import { cx } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { ReactNode } from 'react';
 
 import { isDataFrame, QueryEditorProps, QueryHint, TimeRange, toLegacyResponseData } from '@grafana/data';
@@ -265,8 +265,12 @@ class PromQueryFieldClass extends React.PureComponent<PromQueryFieldProps, PromQ
 
               {ExtraFieldElement}
               {hint ? (
-                <div className="query-row-break">
-                  <div className="prom-query-field-info text-warning">
+                <div
+                  className={css({
+                    flexBasis: '100%',
+                  })}
+                >
+                  <div className="text-warning">
                     {hint.label}{' '}
                     {hint.fix ? (
                       <button
diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
index 90e4d46f8c7..f2c1abb531d 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
+++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx
@@ -75,8 +75,12 @@ export const PromQueryBuilder = React.memo<PromQueryBuilderProps>((props) => {
         <MetricsLabelsSection query={query} onChange={onChange} datasource={datasource} />
       </EditorRow>
       {initHints.length ? (
-        <div className="query-row-break">
-          <div className="prom-query-field-info text-warning">
+        <div
+          className={css({
+            flexBasis: '100%',
+          })}
+        >
+          <div className="text-warning">
             {initHints[0].label}{' '}
             {initHints[0].fix ? (
               <button type="button" className={'text-warning'}>
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
index f8cddcb4de8..e8880ad6f5e 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
+++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
@@ -11,6 +11,7 @@ import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
 import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
+import { getJsonFormatterStyles } from './jsonFormatter';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
 import { getPageStyles } from './page';
@@ -31,6 +32,7 @@ export function GlobalStyles() {
         getExtraStyles(theme),
         getFontStyles(theme),
         getFormElementStyles(theme),
+        getJsonFormatterStyles(theme),
         getPageStyles(theme),
         getCardStyles(theme),
         getAgularPanelStyles(theme),
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/code.ts b/packages/grafana-ui/src/themes/GlobalStyles/code.ts
index 6ca7a03fa62..219bd089462 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/code.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/code.ts
@@ -4,7 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 export function getCodeStyles(theme: GrafanaTheme2) {
   return css({
-    'code, pre': {
+    'code, pre, kbd, samp': {
       ...theme.typography.code,
       fontSize: theme.typography.bodySmall.fontSize,
       backgroundColor: theme.colors.background.primary,
@@ -26,6 +26,7 @@ export function getCodeStyles(theme: GrafanaTheme2) {
       wordBreak: 'break-all',
       wordWrap: 'break-word',
       whiteSpace: 'pre-wrap',
+      overflow: 'auto',
       padding: '10px',
 
       code: {
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index a37f5561b25..9f8164559a5 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -40,6 +40,10 @@ export function getElementStyles(theme: GrafanaTheme2) {
       margin: theme.spacing(0, 0, 2),
     },
 
+    textarea: {
+      overflow: 'auto',
+    },
+
     button: {
       letterSpacing: theme.typography.body.letterSpacing,
 
@@ -67,6 +71,82 @@ export function getElementStyles(theme: GrafanaTheme2) {
       fontStyle: 'normal',
     },
 
+    'audio, canvas, progress, video': {
+      display: 'inline-block',
+      verticalAlign: 'baseline',
+    },
+
+    // Prevent modern browsers from displaying `audio` without controls.
+    // Remove excess height in iOS 5 devices.
+    'audio:not([controls])': {
+      display: 'none',
+      height: 0,
+    },
+
+    // Address styling not present in Safari.
+    'abbr[title]': {
+      borderBottom: '1px dotted',
+    },
+    dfn: {
+      fontStyle: 'italic',
+    },
+
+    // Prevent `sub` and `sup` affecting `line-height` in all browsers.
+    'sub, sup': {
+      fontSize: '75%',
+      lineHeight: 0,
+      position: 'relative',
+      verticalAlign: 'baseline',
+    },
+    sup: {
+      top: '-0.5em',
+    },
+    sub: {
+      bottom: '-0.25em',
+    },
+
+    // 1. Correct color not being inherited.
+    //    Known issue: affects color of disabled elements.
+    // 2. Correct font properties not being inherited.
+    // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+    'button, input, optgroup, select, textarea': {
+      color: 'inherit',
+      font: 'inherit',
+      margin: 0,
+    },
+
+    // Don't inherit the `font-weight` (applied by a rule above).
+    // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+    optgroup: {
+      fontWeight: 'bold',
+    },
+
+    // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+    //    and `video` controls.
+    // 2. Correct inability to style clickable `input` types in iOS.
+    // 3. Improve usability and consistency of cursor style between image-type
+    //    `input` and others.
+    'button, html input[type="button"], input[type="submit"]': {
+      WebkitAppearance: 'button',
+      cursor: 'pointer',
+    },
+
+    // Remove inner padding and search cancel button in Safari and Chrome on OS X.
+    // Safari (but not Chrome) clips the cancel button when the search input has
+    // padding (and `textfield` appearance).
+    'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration': {
+      WebkitAppearance: 'none',
+    },
+
+    table: {
+      borderCollapse: 'collapse',
+      borderSpacing: 0,
+    },
+
+    'td, th': {
+      padding: 0,
+    },
+
     // Utility classes
     '.muted': {
       color: theme.colors.text.secondary,
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/jsonFormatter.ts b/packages/grafana-ui/src/themes/GlobalStyles/jsonFormatter.ts
new file mode 100644
index 00000000000..24d2d3eea07
--- /dev/null
+++ b/packages/grafana-ui/src/themes/GlobalStyles/jsonFormatter.ts
@@ -0,0 +1,125 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getJsonFormatterStyles(theme: GrafanaTheme2) {
+  return css({
+    '.json-formatter-row': {
+      fontFamily: 'monospace',
+
+      '&, a, a:hover': {
+        color: theme.colors.text.primary,
+        textDecoration: 'none',
+      },
+
+      '.json-formatter-row': {
+        marginLeft: theme.spacing(2),
+      },
+
+      '.json-formatter-children': {
+        '&.json-formatter-empty': {
+          opacity: 0.5,
+          marginLeft: theme.spacing(2),
+
+          '&::after': {
+            display: 'none',
+          },
+          '&.json-formatter-object::after': {
+            content: "'No properties'",
+          },
+          '&.json-formatter-array::after': {
+            content: "'[]'",
+          },
+        },
+      },
+
+      '.json-formatter-string': {
+        color: theme.isDark ? '#23d662' : 'green',
+        whiteSpace: 'pre-wrap',
+        wordWrap: 'break-word',
+        wordBreak: 'break-all',
+      },
+
+      '.json-formatter-number': {
+        color: theme.isDark ? theme.colors.primary.text : theme.colors.primary.main,
+      },
+      '.json-formatter-boolean': {
+        color: theme.isDark ? theme.colors.primary.text : theme.colors.error.main,
+      },
+      '.json-formatter-null': {
+        color: theme.isDark ? '#eec97d' : '#855a00',
+      },
+      '.json-formatter-undefined': {
+        color: theme.isDark ? 'rgb(239, 143, 190)' : 'rgb(202, 11, 105)',
+      },
+      '.json-formatter-function': {
+        color: theme.isDark ? '#fd48cb' : '#ff20ed',
+      },
+      '.json-formatter-url': {
+        textDecoration: 'underline',
+        color: theme.isDark ? '#027bff' : theme.colors.primary.main,
+        cursor: 'pointer',
+      },
+
+      '.json-formatter-bracket': {
+        color: theme.isDark ? '#9494ff' : theme.colors.primary.main,
+      },
+      '.json-formatter-key': {
+        color: theme.isDark ? '#23a0db' : '#00008b',
+        cursor: 'pointer',
+        paddingRight: theme.spacing(0.25),
+        marginRight: theme.spacing(0.5),
+      },
+
+      '.json-formatter-constructor-name': {
+        cursor: 'pointer',
+      },
+
+      '.json-formatter-array-comma': {
+        marginRight: theme.spacing(0.5),
+      },
+
+      '.json-formatter-toggler': {
+        lineHeight: '16px',
+        fontSize: theme.typography.size.xs,
+        verticalAlign: 'middle',
+        opacity: 0.6,
+        cursor: 'pointer',
+        paddingRight: theme.spacing(0.25),
+
+        '&::after': {
+          display: 'inline-block',
+          transition: 'transform 100ms ease-in',
+          content: "'►'",
+        },
+      },
+
+      // Inline preview on hover (optional)
+      '> a > .json-formatter-preview-text': {
+        opacity: 0,
+        transition: 'opacity 0.15s ease-in',
+        fontStyle: 'italic',
+      },
+
+      '&:hover > a > .json-formatter-preview-text': {
+        opacity: 0.6,
+      },
+
+      // Open state
+      '&.json-formatter-open': {
+        '> .json-formatter-toggler-link .json-formatter-toggler::after': {
+          transform: 'rotate(90deg)',
+        },
+        '> .json-formatter-children::after': {
+          display: 'inline-block',
+        },
+        '> a > .json-formatter-preview-text': {
+          display: 'none',
+        },
+        '&.json-formatter-empty::after': {
+          display: 'block',
+        },
+      },
+    },
+  });
+}
diff --git a/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx b/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
index 7bd477ba0f0..f3f3155059a 100644
--- a/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/CheatSheet/LogsCheatSheet.tsx
@@ -3,7 +3,8 @@ import { stripIndent, stripIndents } from 'common-tags';
 import Prism from 'prismjs';
 import React, { useState } from 'react';
 
-import { Collapse } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Collapse, useStyles2 } from '@grafana/ui';
 import { flattenTokens } from '@grafana/ui/src/slate-plugins/slate-prism';
 
 import tokenizer from '../../language/cloudwatch-logs/syntax';
@@ -350,14 +351,6 @@ function renderHighlightedMarkup(code: string, keyPrefix: string) {
   return <div className="slate-query-field">{spans}</div>;
 }
 
-const exampleCategory = css`
-  margin-top: 5px;
-`;
-
-const link = css`
-  text-decoration: underline;
-`;
-
 type Props = {
   onClickExample: (query: CloudWatchQuery) => void;
   query: CloudWatchQuery;
@@ -366,6 +359,7 @@ type Props = {
 const LogsCheatSheet = (props: Props) => {
   const [isCommandsOpen, setIsCommandsOpen] = useState(false);
   const [isQueriesOpen, setIsQueriesOpen] = useState(false);
+  const styles = useStyles2(getStyles);
 
   return (
     <div>
@@ -385,7 +379,7 @@ const LogsCheatSheet = (props: Props) => {
                   <p>{item.description}</p>
                   <button
                     type="button"
-                    className="cheat-sheet-item__example"
+                    className={styles.cheatSheetExample}
                     key={item.expr}
                     onClick={() =>
                       props.onClickExample({
@@ -415,13 +409,13 @@ const LogsCheatSheet = (props: Props) => {
       >
         {QUERIES.map((cat, i) => (
           <div key={`cat-${i}`}>
-            <div className={`cheat-sheet-item__title ${cx(exampleCategory)}`}>{cat.category}</div>
+            <div className={cx(styles.cheatSheetItemTitle, styles.exampleCategory)}>{cat.category}</div>
             {cat.examples.map((item, j) => (
-              <div className="cheat-sheet-item" key={`item-${j}`}>
+              <div className={styles.cheatSheetItem} key={`item-${j}`}>
                 <h4>{item.title}</h4>
                 <button
                   type="button"
-                  className="cheat-sheet-item__example"
+                  className={styles.cheatSheetExample}
                   key={item.expr}
                   onClick={() =>
                     props.onClickExample({
@@ -445,7 +439,7 @@ const LogsCheatSheet = (props: Props) => {
       <div>
         Note: If you are seeing masked data, you may have CloudWatch logs data protection enabled.{' '}
         <a
-          className={cx(link)}
+          className={styles.link}
           href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/#cloudwatch-logs-data-protection"
           target="_blank"
           rel="noreferrer"
@@ -459,3 +453,26 @@ const LogsCheatSheet = (props: Props) => {
 };
 
 export default LogsCheatSheet;
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  exampleCategory: css({
+    marginTop: '5px',
+  }),
+  link: css({
+    textDecoration: 'underline',
+  }),
+  cheatSheetItem: css({
+    margin: theme.spacing(3, 0),
+  }),
+  cheatSheetItemTitle: css({
+    fontSize: theme.typography.h3.fontSize,
+  }),
+  cheatSheetExample: css({
+    margin: theme.spacing(0.5, 0),
+    // element is interactive, clear button styles
+    textAlign: 'left',
+    border: 'none',
+    background: 'transparent',
+    display: 'block',
+  }),
+});
diff --git a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx
index 04b573159c6..40f5731691f 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/query/influxql/InfluxCheatSheet.tsx
@@ -1,5 +1,9 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
 const CHEAT_SHEET_ITEMS = [
   {
     title: 'Getting started',
@@ -8,14 +12,27 @@ const CHEAT_SHEET_ITEMS = [
   },
 ];
 
-export const InfluxCheatSheet = () => (
-  <div>
-    <h2>InfluxDB Cheat Sheet</h2>
-    {CHEAT_SHEET_ITEMS.map((item) => (
-      <div className="cheat-sheet-item" key={item.title}>
-        <div className="cheat-sheet-item__title">{item.title}</div>
-        <div className="cheat-sheet-item__label">{item.label}</div>
-      </div>
-    ))}
-  </div>
-);
+export const InfluxCheatSheet = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div>
+      <h2>InfluxDB Cheat Sheet</h2>
+      {CHEAT_SHEET_ITEMS.map((item) => (
+        <div className={styles.cheatSheetItem} key={item.title}>
+          <div className={styles.cheatSheetItemTitle}>{item.title}</div>
+          {item.label}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  cheatSheetItem: css({
+    margin: theme.spacing(3, 0),
+  }),
+  cheatSheetItemTitle: css({
+    fontSize: theme.typography.h3.fontSize,
+  }),
+});
diff --git a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
index 689cef1fbdc..412d876658e 100644
--- a/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiCheatSheet.tsx
@@ -1,8 +1,10 @@
+import { css } from '@emotion/css';
 import { shuffle } from 'lodash';
 import React, { PureComponent } from 'react';
 
-import { QueryEditorHelpProps } from '@grafana/data';
+import { GrafanaTheme2, QueryEditorHelpProps } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
+import { Themeable2, withTheme2 } from '@grafana/ui';
 
 import LokiLanguageProvider from '../LanguageProvider';
 import { escapeLabelValueInExactSelector } from '../languageUtils';
@@ -37,7 +39,10 @@ const LOGQL_EXAMPLES = [
   },
 ];
 
-export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<LokiQuery>, { userExamples: string[] }> {
+class UnthemedLokiCheatSheet extends PureComponent<
+  QueryEditorHelpProps<LokiQuery> & Themeable2,
+  { userExamples: string[] }
+> {
   declare userLabelTimer: ReturnType<typeof setTimeout>;
   state = {
     userExamples: [],
@@ -75,7 +80,8 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
   };
 
   renderExpression(expr: string) {
-    const { onClickExample } = this.props;
+    const { onClickExample, theme } = this.props;
+    const styles = getStyles(theme);
     const onClick = (query: LokiQuery) => {
       onClickExample(query);
       reportInteraction('grafana_loki_cheatsheet_example_clicked', {});
@@ -84,7 +90,7 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
     return (
       <button
         type="button"
-        className="cheat-sheet-item__example"
+        className={styles.cheatSheetExample}
         key={expr}
         onClick={() => onClick({ refId: 'A', expr })}
       >
@@ -95,55 +101,72 @@ export default class LokiCheatSheet extends PureComponent<QueryEditorHelpProps<L
 
   render() {
     const { userExamples } = this.state;
+    const { theme } = this.props;
     const hasUserExamples = userExamples.length > 0;
+    const styles = getStyles(theme);
 
     return (
       <div>
         <h2>Loki Cheat Sheet</h2>
-        <div className="cheat-sheet-item">
-          <div className="cheat-sheet-item__title">See your logs</div>
-          <div className="cheat-sheet-item__label">
-            Start by selecting a log stream from the Label browser, or alternatively you can write a stream selector
-            into the query field.
-          </div>
+        <div className={styles.cheatSheetItem}>
+          <div className={styles.cheatSheetItemTitle}>See your logs</div>
+          Start by selecting a log stream from the Label browser, or alternatively you can write a stream selector into
+          the query field.
           {hasUserExamples ? (
             <div>
-              <div className="cheat-sheet-item__label">Here are some example streams from your logs:</div>
+              Here are some example streams from your logs:
               {userExamples.map((example) => this.renderExpression(example))}
             </div>
           ) : (
             <div>
-              <div className="cheat-sheet-item__label">Here is an example of a log stream:</div>
+              Here is an example of a log stream:
               {this.renderExpression(DEFAULT_EXAMPLES[0])}
             </div>
           )}
         </div>
-        <div className="cheat-sheet-item">
-          <div className="cheat-sheet-item__title">Combine stream selectors</div>
+        <div className={styles.cheatSheetItem}>
+          <div className={styles.cheatSheetItemTitle}>Combine stream selectors</div>
           {this.renderExpression('{app="cassandra",namespace="prod"}')}
-          <div className="cheat-sheet-item__label">Returns all log lines from streams that have both labels.</div>
+          Returns all log lines from streams that have both labels.
         </div>
 
-        <div className="cheat-sheet-item">
-          <div className="cheat-sheet-item__title">Filtering for search terms.</div>
+        <div className={styles.cheatSheetItem}>
+          <div className={styles.cheatSheetItemTitle}>Filtering for search terms.</div>
           {this.renderExpression('{app="cassandra"} |~ "(duration|latency)s*(=|is|of)s*[d.]+"')}
           {this.renderExpression('{app="cassandra"} |= "exact match"')}
           {this.renderExpression('{app="cassandra"} != "do not match"')}
-          <div className="cheat-sheet-item__label">
-            <a href="https://grafana.com/docs/loki/latest/logql/#log-pipeline" target="logql">
-              LogQL
-            </a>{' '}
-            supports exact and regular expression filters.
-          </div>
+          <a href="https://grafana.com/docs/loki/latest/logql/#log-pipeline" target="logql">
+            LogQL
+          </a>{' '}
+          supports exact and regular expression filters.
         </div>
         {LOGQL_EXAMPLES.map((item) => (
-          <div className="cheat-sheet-item" key={item.expression}>
-            <div className="cheat-sheet-item__title">{item.title}</div>
+          <div className={styles.cheatSheetItem} key={item.expression}>
+            <div className={styles.cheatSheetItemTitle}>{item.title}</div>
             {this.renderExpression(item.expression)}
-            <div className="cheat-sheet-item__label">{item.label}</div>
+            {item.label}
           </div>
         ))}
       </div>
     );
   }
 }
+
+export default withTheme2(UnthemedLokiCheatSheet);
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  cheatSheetItem: css({
+    margin: theme.spacing(3, 0),
+  }),
+  cheatSheetItemTitle: css({
+    fontSize: theme.typography.h3.fontSize,
+  }),
+  cheatSheetExample: css({
+    margin: theme.spacing(0.5, 0),
+    // element is interactive, clear button styles
+    textAlign: 'left',
+    border: 'none',
+    background: 'transparent',
+    display: 'block',
+  }),
+});
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index dbe49f7b96d..7745ac688b3 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -198,6 +198,7 @@ $doc-font-size: $font-size-sm;
 .graph-legend {
   display: flex;
   flex: 0 1 auto;
+  flex-wrap: wrap;
   max-height: 35%;
   margin: 0;
   text-align: center;
@@ -1846,3 +1847,20 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
   line-height: calc(3em / 4);
   vertical-align: -15%;
 }
+
+.cheat-sheet-item {
+  margin: $space-lg 0;
+}
+
+.cheat-sheet-item__title {
+  font-size: $font-size-h3;
+}
+
+.cheat-sheet-item__example {
+  margin: $space-xs 0;
+  // element is interactive, clear button styles
+  text-align: left;
+  border: none;
+  background: transparent;
+  display: block;
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 4137058f724..fa9ec6aec8b 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -8,7 +8,6 @@
 @import 'mixins/forms';
 
 // BASE
-@import 'base/normalize';
 @import 'base/reboot';
 @import 'base/type';
 @import 'base/forms';
@@ -31,7 +30,6 @@
 @import 'components/infobox';
 @import 'components/query_editor';
 @import 'components/query_part';
-@import 'components/json_explorer';
 @import 'components/dashboard_grid';
 @import 'components/add_data_source';
 @import 'components/panel_header';
@@ -40,7 +38,6 @@
 @import 'pages/dashboard';
 @import 'pages/alerting';
 @import 'pages/history';
-@import 'pages/explore';
 
 // ANGULAR
 @import 'angular';
diff --git a/public/sass/base/_normalize.scss b/public/sass/base/_normalize.scss
deleted file mode 100644
index d4ceaf01fdf..00000000000
--- a/public/sass/base/_normalize.scss
+++ /dev/null
@@ -1,424 +0,0 @@
-/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */
-
-//
-// 1. Set default font family to sans-serif.
-// 2. Prevent iOS and IE text size adjust after device orientation change,
-//    without disabling user zoom.
-//
-
-html {
-  font-family: sans-serif; // 1
-  -ms-text-size-adjust: 100%; // 2
-  -webkit-text-size-adjust: 100%; // 2
-}
-
-//
-// Remove default margin.
-//
-
-body {
-  margin: 0;
-}
-
-// HTML5 display definitions
-// ==========================================================================
-
-//
-// Correct `block` display not defined for any HTML5 element in IE 8/9.
-// Correct `block` display not defined for `details` or `summary` in IE 10/11
-// and Firefox.
-// Correct `block` display not defined for `main` in IE 11.
-//
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section {
-  display: block;
-}
-
-//
-// 1. Correct `inline-block` display not defined in IE 8/9.
-// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
-//
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block; // 1
-  vertical-align: baseline; // 2
-}
-
-//
-// Prevent modern browsers from displaying `audio` without controls.
-// Remove excess height in iOS 5 devices.
-//
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-//
-// Address `[hidden]` styling not present in IE 8/9/10.
-// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
-//
-
-[hidden],
-template {
-  display: none;
-}
-
-// Links
-// ==========================================================================
-
-//
-// Remove the gray background color from active links in IE 10.
-//
-
-a {
-  background-color: transparent;
-}
-
-//
-// Improve readability of focused elements when they are also in an
-// active/hover state.
-//
-
-a {
-  &:active {
-    outline: 0;
-  }
-  &:hover {
-    outline: 0;
-  }
-}
-
-// Text-level semantics
-// ==========================================================================
-
-//
-// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
-//
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-//
-// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
-//
-
-b,
-strong {
-  font-weight: bold;
-}
-
-//
-// Address styling not present in Safari and Chrome.
-//
-
-dfn {
-  font-style: italic;
-}
-
-//
-// Address variable `h1` font-size and margin within `section` and `article`
-// contexts in Firefox 4+, Safari, and Chrome.
-//
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-//
-// Address styling not present in IE 8/9.
-//
-
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-//
-// Address inconsistent and variable font size in all browsers.
-//
-
-small {
-  font-size: 80%;
-}
-
-//
-// Prevent `sub` and `sup` affecting `line-height` in all browsers.
-//
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-// Embedded content
-// ==========================================================================
-
-//
-// Remove border when inside `a` element in IE 8/9/10.
-//
-
-img {
-  border: 0;
-}
-
-//
-// Correct overflow not hidden in IE 9/10/11.
-//
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-// Grouping content
-// ==========================================================================
-
-//
-// Address margin not present in IE 8/9 and Safari.
-//
-
-figure {
-  margin: 1em 40px;
-}
-
-//
-// Address differences between Firefox and other browsers.
-//
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-//
-// Contain overflow in all browsers.
-//
-
-pre {
-  overflow: auto;
-}
-
-//
-// Address odd `em`-unit font size rendering in all browsers.
-//
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-// Forms
-// ==========================================================================
-
-//
-// Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `select`, unless a `border` property is set.
-//
-
-//
-// 1. Correct color not being inherited.
-//    Known issue: affects color of disabled elements.
-// 2. Correct font properties not being inherited.
-// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
-//
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit; // 1
-  font: inherit; // 2
-  margin: 0; // 3
-}
-
-//
-// Address `overflow` set to `hidden` in IE 8/9/10/11.
-//
-
-button {
-  overflow: visible;
-}
-
-//
-// Address inconsistent `text-transform` inheritance for `button` and `select`.
-// All other form control elements do not inherit `text-transform` values.
-// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
-// Correct `select` style inheritance in Firefox.
-//
-
-button,
-select {
-  text-transform: none;
-}
-
-//
-// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
-//    and `video` controls.
-// 2. Correct inability to style clickable `input` types in iOS.
-// 3. Improve usability and consistency of cursor style between image-type
-//    `input` and others.
-//
-
-button,
-html input[type='button'],
-// 1 input[type='reset'],
-input[type='submit'] {
-  -webkit-appearance: button; // 2
-  cursor: pointer; // 3
-}
-
-//
-// Re-set default cursor for disabled elements.
-//
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-//
-// Remove inner padding and border in Firefox 4+.
-//
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-//
-// Address Firefox 4+ setting `line-height` on `input` using `!important` in
-// the UA stylesheet.
-//
-
-input {
-  line-height: normal;
-}
-
-//
-// It's recommended that you don't attempt to style these elements.
-// Firefox's implementation doesn't respect box-sizing, padding, or width.
-//
-// 1. Address box sizing set to `content-box` in IE 8/9/10.
-// 2. Remove excess padding in IE 8/9/10.
-//
-
-input[type='checkbox'],
-input[type='radio'] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-//
-// Fix the cursor style for Chrome's increment/decrement buttons. For certain
-// `font-size` values of the `input`, it causes the cursor style of the
-// decrement button to change from `default` to `text`.
-//
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-//
-// Address `appearance` set to `searchfield` in Safari and Chrome.
-//
-
-input[type='search'] {
-  -webkit-appearance: textfield;
-}
-
-//
-// Remove inner padding and search cancel button in Safari and Chrome on OS X.
-// Safari (but not Chrome) clips the cancel button when the search input has
-// padding (and `textfield` appearance).
-//
-
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-//
-// Define consistent border, margin, and padding.
-//
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-//
-// 1. Correct `color` not being inherited in IE 8/9/10/11.
-// 2. Remove padding so people aren't caught out if they zero out fieldsets.
-//
-
-legend {
-  border: 0; // 1
-  padding: 0; // 2
-}
-
-//
-// Remove default vertical scrollbar in IE 8/9/10/11.
-//
-
-textarea {
-  overflow: auto;
-}
-
-//
-// Don't inherit the `font-weight` (applied by a rule above).
-// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
-//
-
-optgroup {
-  font-weight: bold;
-}
-
-// Tables
-// ==========================================================================
-
-//
-// Remove most spacing between table cells.
-//
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss
index 3831c28f6f7..f1580f77d84 100644
--- a/public/sass/base/_reboot.scss
+++ b/public/sass/base/_reboot.scss
@@ -292,7 +292,7 @@ legend {
   margin-bottom: $space-sm;
   font-size: $space-lg;
   line-height: inherit;
-  //  border: 0;
+  border: 0;
 }
 
 input[type='search'] {
diff --git a/public/sass/components/_json_explorer.scss b/public/sass/components/_json_explorer.scss
deleted file mode 100644
index 932a4607443..00000000000
--- a/public/sass/components/_json_explorer.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-.json-formatter-row {
-  font-family: monospace;
-
-  &,
-  a,
-  a:hover {
-    color: $json-explorer-default-color;
-    text-decoration: none;
-  }
-
-  .json-formatter-row {
-    margin-left: $space-md;
-  }
-
-  .json-formatter-children {
-    &.json-formatter-empty {
-      opacity: 0.5;
-      margin-left: $space-md;
-
-      &::after {
-        display: none;
-      }
-      &.json-formatter-object::after {
-        content: 'No properties';
-      }
-      &.json-formatter-array::after {
-        content: '[]';
-      }
-    }
-  }
-
-  .json-formatter-string {
-    color: $json-explorer-string-color;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    word-break: break-all;
-  }
-
-  .json-formatter-number {
-    color: $json-explorer-number-color;
-  }
-  .json-formatter-boolean {
-    color: $json-explorer-boolean-color;
-  }
-  .json-formatter-null {
-    color: $json-explorer-null-color;
-  }
-  .json-formatter-undefined {
-    color: $json-explorer-undefined-color;
-  }
-  .json-formatter-function {
-    color: $json-explorer-function-color;
-  }
-  .json-formatter-date {
-    background-color: fade($json-explorer-default-color, 5%);
-  }
-  .json-formatter-url {
-    text-decoration: underline;
-    color: $json-explorer-url-color;
-    cursor: pointer;
-  }
-
-  .json-formatter-bracket {
-    color: $json-explorer-bracket-color;
-  }
-  .json-formatter-key {
-    color: $json-explorer-key-color;
-    cursor: pointer;
-    padding-right: $space-xxs;
-    margin-right: 4px;
-  }
-
-  .json-formatter-constructor-name {
-    cursor: pointer;
-  }
-
-  .json-formatter-array-comma {
-    margin-right: 4px;
-  }
-
-  .json-formatter-toggler {
-    line-height: 16px;
-    font-size: $font-size-xs;
-    vertical-align: middle;
-    opacity: $json-explorer-toggler-opacity;
-    cursor: pointer;
-    padding-right: $space-xxs;
-
-    &::after {
-      display: inline-block;
-      transition: transform $json-explorer-rotate-time ease-in;
-      content: '►';
-    }
-  }
-
-  // Inline preview on hover (optional)
-  > a > .json-formatter-preview-text {
-    opacity: 0;
-    transition: opacity 0.15s ease-in;
-    font-style: italic;
-  }
-
-  &:hover > a > .json-formatter-preview-text {
-    opacity: 0.6;
-  }
-
-  // Open state
-  &.json-formatter-open {
-    > .json-formatter-toggler-link .json-formatter-toggler::after {
-      transform: rotate(90deg);
-    }
-    > .json-formatter-children::after {
-      display: inline-block;
-    }
-    > a > .json-formatter-preview-text {
-      display: none;
-    }
-    &.json-formatter-empty::after {
-      display: block;
-    }
-  }
-}
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
deleted file mode 100644
index 7c26ba4e21d..00000000000
--- a/public/sass/pages/_explore.scss
+++ /dev/null
@@ -1,155 +0,0 @@
-// TODO: this is used in Loki & Prometheus, move it
-.explore-input-margin {
-  margin-right: 4px;
-}
-
-.graph-legend {
-  flex-wrap: wrap;
-}
-
-// TODO: move to Loki and Prometheus
-.query-row-break {
-  flex-basis: 100%;
-}
-
-// TODO: Prometheus-specifics, to be extracted to datasource soon
-.explore {
-  .prom-query-field-info {
-    margin: 0.25em 0.5em 0.5em;
-    display: flex;
-
-    details {
-      margin-left: 1em;
-    }
-  }
-}
-
-// ReactTable basic overrides (does not include pivot/groups/filters)
-// When integrating ReactTable as new panel plugin, move to _panel_table.scss
-
-.ReactTable {
-  border: none;
-}
-
-.ReactTable .rt-table {
-  // Allow some space for the no-data text
-  min-height: 90px;
-}
-
-.ReactTable .rt-thead.-header {
-  box-shadow: none;
-  background: $list-item-bg;
-  border-top: 2px solid $body-bg;
-  border-bottom: 2px solid $body-bg;
-  height: 2em;
-}
-
-.ReactTable .rt-thead.-header .rt-th {
-  text-align: left;
-  color: $blue;
-  font-weight: $font-weight-semi-bold;
-}
-
-.ReactTable .rt-thead .rt-td,
-.ReactTable .rt-thead .rt-th {
-  padding: 0.45em 0 0.45em 1.1em;
-  border-right: none;
-  box-shadow: none;
-}
-
-.ReactTable .rt-tbody .rt-td {
-  padding: 0.45em 0 0.45em 1.1em;
-  border-bottom: 2px solid $body-bg;
-  border-right: 2px solid $body-bg;
-}
-
-.ReactTable .rt-tbody .rt-td:last-child {
-  border-right: none;
-}
-
-.ReactTable .-pagination {
-  border-top: none;
-  box-shadow: none;
-  margin-top: $space-sm;
-}
-
-.ReactTable .-pagination .-btn {
-  color: $blue;
-  background: $list-item-bg;
-}
-
-.ReactTable .-pagination input,
-.ReactTable .-pagination select {
-  color: $input-color;
-  background-color: $input-bg;
-}
-
-.ReactTable .-loading {
-  background: $input-bg;
-}
-
-.ReactTable .-loading.-active {
-  opacity: 0.8;
-}
-
-.ReactTable .-loading > div {
-  color: $input-color;
-}
-
-.ReactTable .rt-tr .rt-td:last-child {
-  text-align: right;
-}
-
-.ReactTable .rt-noData {
-  top: 60px;
-  z-index: inherit;
-}
-
-// React-component cascade fix: show "loading" when loading children
-.rc-cascader-menu-item-loading:after {
-  position: absolute;
-  right: 12px;
-  content: 'loading';
-  color: #767980;
-  font-style: italic;
-}
-
-// React-component cascade fix: vertical alignment issue with Safari
-.rc-cascader-menu {
-  vertical-align: top;
-  // To fix cascader button width issue in windows + firefox
-  scrollbar-width: thin;
-}
-
-// TODO Experimental
-
-.cheat-sheet-item {
-  margin: $space-lg 0;
-}
-
-.cheat-sheet-item__title {
-  font-size: $font-size-h3;
-}
-
-.cheat-sheet-item__example {
-  margin: $space-xs 0;
-  // element is interactive, clear button styles
-  text-align: left;
-  border: none;
-  background: transparent;
-  display: block;
-}
-
-.query-type-toggle {
-  margin-left: 5px;
-
-  .btn.active {
-    background-color: $input-bg;
-    background-image: none;
-    background-clip: padding-box;
-    border: $input-border;
-    border-radius: $input-border-radius;
-    @include box-shadow($input-box-shadow);
-    color: $input-color;
-  }
-}