diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index 1079ade6..09619abf 100644
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -1,4 +1,9 @@
-import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState, SETTING_EXPERIMENTAL } from '../constants';
+import {
+  SETTING_DASHBOARD_OPENONSTART,
+  CONTEXT,
+  ExtensionState,
+  SETTING_EXPERIMENTAL
+} from '../constants';
 import { join } from 'path';
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
 import { Logger, Settings as SettingsHelper } from '../helpers';
@@ -221,7 +226,7 @@ export class Dashboard {
     const isBeta = ext.isBetaVersion();
 
     // Get experimental setting
-    const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL)
+    const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL);
 
     const csp = [
       `default-src 'none';`,
@@ -258,7 +263,7 @@ export class Dashboard {
       isBeta ? 'BETA' : 'main'
     }" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${
       version.usedVersion ? '' : `data-showWelcome="true"`
-    } ${experimental ? `data-experimental="${experimental}"` : ""} ></div>
+    } ${experimental ? `data-experimental="${experimental}"` : ''} ></div>
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
 
diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts
index 583fbfd0..4701040d 100644
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -4,7 +4,8 @@ import {
   SETTING_PREVIEW_PATHNAME,
   CONTEXT,
   TelemetryEvent,
-  PreviewCommands
+  PreviewCommands,
+  SETTING_EXPERIMENTAL
 } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from 'path';
@@ -165,6 +166,9 @@ export class Preview {
       scriptUri = `http://${localServerUrl}/${dashboardFile}`;
     }
 
+    // Get experimental setting
+    const experimental = Settings.get(SETTING_EXPERIMENTAL);
+
     webView.webview.html = `
       <!DOCTYPE html>
       <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
@@ -181,9 +185,9 @@ export class Preview {
             slug || ''
           )}" data-isProd="${isProd}" data-environment="${
       isBeta ? 'BETA' : 'main'
-    }" data-version="${
-      version.usedVersion
-    }" style="width:100%;height:100%;margin:0;padding:0;"></div>
+    }" data-version="${version.usedVersion}" ${
+      experimental ? `data-experimental="${experimental}"` : ''
+    } style="width:100%;height:100%;margin:0;padding:0;"></div>
 
           <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
         </body>
diff --git a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
index 48dc5c58..c9945c49 100644
--- a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
 import { DotsVerticalIcon } from '@heroicons/react/outline';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IActionMenuButtonProps {
   title: string;
@@ -13,11 +14,18 @@ export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> =
   disabled,
   ref
 }: React.PropsWithChildren<IActionMenuButtonProps>) => {
+  const { getColors } = useThemeColors();
+
   return (
     <Menu.Button
       ref={ref || null}
       disabled={disabled}
-      className={`group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600 ${
+      className={`group inline-flex justify-center text-sm font-medium ${
+        getColors(
+          'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
+          'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
+        )
+      } ${
         disabled ? 'opacity-50' : ''
       }`}
     >
diff --git a/src/dashboardWebView/components/Menu/MenuButton.tsx b/src/dashboardWebView/components/Menu/MenuButton.tsx
index 4323cc75..24d73d2d 100644
--- a/src/dashboardWebView/components/Menu/MenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/MenuButton.tsx
@@ -1,6 +1,7 @@
 import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IMenuButtonProps {
   label: string | JSX.Element;
@@ -13,17 +14,29 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
   title,
   disabled
 }: React.PropsWithChildren<IMenuButtonProps>) => {
+  const { getColors } = useThemeColors();
+  
   return (
-    <div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
-      <span className={`text-gray-500 dark:text-whisper-700 mr-2 font-medium`}>{label}:</span>
+    <div className={`groupinline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
+      <span className={`mr-2 font-medium ${getColors('text-gray-500 dark:text-whisper-700', 'text-[var(--vscode-tab-inactiveForeground)]')}`}>{label}:</span>
 
       <Menu.Button
         disabled={disabled}
-        className="group inline-flex justify-center text-sm font-medium text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600"
+        className={`group inline-flex justify-center text-sm font-medium ${
+          getColors(
+            'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600',
+            'text-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-highlightForeground)]'
+          )
+        }`}
       >
         {title}
         <ChevronDownIcon
-          className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700"
+          className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${
+            getColors(
+              'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
+              'text-[var(--vscode-list-activeSelectionForeground)] group-hover:text-[var(--vscode-list-highlightForeground)]'
+            )
+          }`}
           aria-hidden="true"
         />
       </Menu.Button>
diff --git a/src/dashboardWebView/components/Modals/FormDialog.tsx b/src/dashboardWebView/components/Modals/FormDialog.tsx
index 65b5e128..40136075 100644
--- a/src/dashboardWebView/components/Modals/FormDialog.tsx
+++ b/src/dashboardWebView/components/Modals/FormDialog.tsx
@@ -91,7 +91,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
                 <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                   <button
                     type="button"
-                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${
+                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${
                       getColors(
                         'bg-teal-600 focus:ring-teal-500 text-white hover:bg-teal-700 dark:hover:bg-teal-900 ',
                         'bg-[var(--vscode-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]'
@@ -105,7 +105,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
                   
                   <button
                     type="button"
-                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${
+                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${
                       getColors(
                         'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
                         'bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
diff --git a/src/dashboardWebView/components/Modals/InfoDialog.tsx b/src/dashboardWebView/components/Modals/InfoDialog.tsx
index dde42eb9..bf9f919d 100644
--- a/src/dashboardWebView/components/Modals/InfoDialog.tsx
+++ b/src/dashboardWebView/components/Modals/InfoDialog.tsx
@@ -54,7 +54,7 @@ export const InfoDialog: React.FunctionComponent<IInfoDialogProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={`inline-block align-bottom  rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2  ${
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2  ${
               getColors(
                 `bg-white dark:bg-vulcan-500 border-whisper-900`,
                 `bg-[var(--vscode-editor-background)] border-[var(--vscode-panel-border)]`
diff --git a/src/dashboardWebView/components/Preview/Preview.tsx b/src/dashboardWebView/components/Preview/Preview.tsx
index 8fcf058f..cc13ad8c 100644
--- a/src/dashboardWebView/components/Preview/Preview.tsx
+++ b/src/dashboardWebView/components/Preview/Preview.tsx
@@ -3,6 +3,7 @@ import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { PreviewCommands } from '../../../constants';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IPreviewProps {
   url: string | null;
@@ -12,7 +13,8 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   url
 }: React.PropsWithChildren<IPreviewProps>) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [ crntUrl, setCrntUrl ] = useState<string | null>(null);
+  const [crntUrl, setCrntUrl] = useState<string | null>(null);
+  const { getColors } = useThemeColors();
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
@@ -40,7 +42,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   return (
     <div className="w-full h-full bg-white">
       <div
-        className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-focusBorder)]"
+        className="slug fixed h-[30px] w-full top-0 flex items-center bg-[var(--vscode-editor-background)] text-[color:var(--vscode-editor-background)] border-b border-b-[var(--vscode-panel-border)]"
       >
         <input
           type="text"
@@ -51,27 +53,23 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
               navigateToUrl();
             }
           }}
-          className="w-full m-[1px] h-full border-1 border-transparent bg-transparent text-xs py-1 px-2 focus:border-color-blue-500 focus:outline-none"
-          style={{
-            color: 'var(--vscode-editor-foreground)'
-          }}
+          placeholder="Enter a URL"
+          className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
         />
 
         <div
-          className="actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 text-gray-400 dark:text-whisper-900"
-          style={{
-            background: 'var(--vscode-editor-background)'
-          }}
+          className={`actions absolute right-[1px] top-[1px] bottom-[1px] flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
+            }`}
         >
-          <button title="Navigate" onClick={navigateToUrl} className={`hover:text-vulcan-500 dark:hover:text-whisper-100`}>
+          <button title="Navigate" onClick={navigateToUrl} className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
             <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
           </button>
 
-          <button title="Refresh" onClick={onRefresh} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
+          <button title="Refresh" onClick={onRefresh} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
             <RefreshIcon className="w-4 h-4" aria-hidden="true" />
           </button>
 
-          <button title="Open" onClick={openInBrowser} className={`hover:text-vulcan-500 dark:hover:text-whisper-100 mr-2`}>
+          <button title="Open" onClick={openInBrowser} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
             <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
           </button>
         </div>
diff --git a/src/dashboardWebView/index.tsx b/src/dashboardWebView/index.tsx
index de985d40..4c17e145 100644
--- a/src/dashboardWebView/index.tsx
+++ b/src/dashboardWebView/index.tsx
@@ -54,7 +54,10 @@ if (elm) {
   }
 
   if (type === 'preview') {
-    render(<Preview url={url} />, elm);
+    render(
+      <SettingsProvider experimental={experimental === 'true'} version={version || ""}>
+        <Preview url={url} />
+      </SettingsProvider>, elm);
   } else {
     render(
       <RecoilRoot>
