diff --git a/package.json b/package.json
index e88be3bc..58086849 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@types/debounce-promise": "^3.1.2",
     "@types/grafana": "github:CorpGlory/types-grafana.git",
     "@types/lodash": "^4.14.158",
+    "@types/prismjs": "1.26.0",
     "@typescript-eslint/eslint-plugin": "3.6.0",
     "@typescript-eslint/parser": "3.6.0",
     "chance": "^1.1.7",
@@ -37,6 +38,7 @@
     "emotion": "^11.0.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "monaco-editor": "0.17.0",
+    "prismjs": "1.29.0",
     "ts-jest": "^26.4.3"
   },
   "dependencies": {
diff --git a/src/components/QueryEditor/VisualQueryEditor.tsx b/src/components/QueryEditor/VisualQueryEditor.tsx
index ca6bf44c..43f4d0a9 100644
--- a/src/components/QueryEditor/VisualQueryEditor.tsx
+++ b/src/components/QueryEditor/VisualQueryEditor.tsx
@@ -12,6 +12,7 @@ import { AdxDataSourceOptions, AdxSchema, defaultQuery, KustoQuery } from 'types
 import FilterSection from './VisualQueryEditor/FilterSection';
 import AggregateSection from './VisualQueryEditor/AggregateSection';
 import GroupBySection from './VisualQueryEditor/GroupBySection';
+import KQLPreview from './VisualQueryEditor/KQLPreview';
 import Timeshift from './VisualQueryEditor/Timeshift';
 
 type Props = QueryEditorProps<AdxDataSource, KustoQuery, AdxDataSourceOptions>;
@@ -101,8 +102,7 @@ export const VisualQueryEditor: React.FC<VisualQueryEditorProps> = (props) => {
       <AggregateSection {...props} tableSchema={tableSchema} />
       <GroupBySection {...props} tableSchema={tableSchema} />
       <Timeshift {...props} tableSchema={tableSchema} />
-      {/* TODO: Use proper preview component */}
-      <pre>{query.query}</pre>
+      <KQLPreview query={props.query.query} />
     </EditorRows>
   );
 };
diff --git a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx
new file mode 100644
index 00000000..ca58a04a
--- /dev/null
+++ b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import KQLPreview from './KQLPreview';
+
+describe('KQLPreview', () => {
+  it('should render the query preview', () => {
+    render(<KQLPreview query="my query" />);
+    // hidden by default
+    expect(screen.queryByText('my query')).not.toBeVisible();
+    screen.getByText('show').click();
+    expect(screen.queryByText('my query')).toBeVisible();
+    // hide it again
+    screen.getByText('hide').click();
+    expect(screen.queryByText('my query')).not.toBeVisible();
+  });
+});
diff --git a/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx
new file mode 100644
index 00000000..d4f3f8c2
--- /dev/null
+++ b/src/components/QueryEditor/VisualQueryEditor/KQLPreview.tsx
@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import { EditorField, EditorFieldGroup, EditorRow } from '@grafana/experimental';
+import { Button, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-kusto';
+import 'prismjs/themes/prism-tomorrow.min.css';
+
+interface KQLPreviewProps {
+  query: string;
+}
+
+const KQLPreview: React.FC<KQLPreviewProps> = ({ query }) => {
+  const styles = useStyles2(getStyles);
+  const [hidden, setHidden] = useState(true);
+
+  useEffect(() => {
+    Prism.highlightAll();
+  }, [query]);
+
+  return (
+    <EditorRow>
+      <EditorFieldGroup>
+        <EditorField label="Query Preview">
+          <>
+            <Button hidden={!hidden} variant="secondary" onClick={() => setHidden(false)} size="sm">
+              show
+            </Button>
+            <div className={styles.codeBlock} hidden={hidden}>
+              <pre className={styles.code}>
+                <code className="language-kusto">{query}</code>
+              </pre>
+            </div>
+            <Button hidden={hidden} variant="secondary" onClick={() => setHidden(true)} size="sm">
+              hide
+            </Button>
+          </>
+        </EditorField>
+      </EditorFieldGroup>
+    </EditorRow>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    codeBlock: css({
+      width: '100%',
+      display: 'table',
+      tableLayout: 'fixed',
+    }),
+    code: css({
+      marginBottom: '4px',
+    }),
+  };
+};
+
+export default KQLPreview;
diff --git a/yarn.lock b/yarn.lock
index d04f4730..029c3e3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4271,6 +4271,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"
   integrity sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==
 
+"@types/prismjs@1.26.0":
+  version "1.26.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654"
+  integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==
+
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
@@ -12824,6 +12829,11 @@ prismjs@1.28.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
   integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 
+prismjs@1.29.0:
+  version "1.29.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
+  integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
+
 private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"