diff --git a/messages/en.json b/messages/en.json
index 56b66cf..9241bb9 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -51,6 +51,8 @@
   "selectUnit": "Select a unit",
   "settingsButton": "Settings",
   "settingsHeading": "Settings",
+  "showBrowserSupport": "Show Browser Support",
+  "showBrowserSupportHint": "Toggle to hide or show Browser Details/Support",
   "skipLink": "Skip to content",
   "specification": "Specification",
   "theme": "Theme",
diff --git a/messages/sv.json b/messages/sv.json
index 28f7f8f..50a2f4d 100644
--- a/messages/sv.json
+++ b/messages/sv.json
@@ -43,7 +43,7 @@
   "notAvailableInBrowser": "Inte tillgänglig i {browserName}",
   "options": "Alternativ",
   "output": "Utdata",
-  "partialSupport": "Delvis stöd",
+  "partialSupport": "Delvist stöd",
   "resolvedOptions": "Alternativ som används",
   "secondaryFormatters": "Sekundära formatterare",
   "seeAlso": "Se också",
@@ -51,6 +51,8 @@
   "selectUnit": "Välj enhet",
   "settingsButton": "Inställningar",
   "settingsHeading": "Inställningar",
+  "showBrowserSupport": "Visa Webbläsarstöd",
+  "showBrowserSupportHint": "Visa eller dölj stöd för webbläsare",
   "skipLink": "Hoppa till innehåll",
   "specification": "Specifikation",
   "theme": "Tema",
diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte
index 4890d73..80db607 100644
--- a/src/lib/components/pages/Playground/Playground.svelte
+++ b/src/lib/components/pages/Playground/Playground.svelte
@@ -33,6 +33,7 @@
 	import BrowserSupport from '$lib/components/ui/BrowserSupport/BrowserSupport.svelte';
 	import Grid from '$lib/components/ui/Grid.svelte';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 
 	export let data: { [key: string]: BrowserSupportDataForMethod };
 	export let locale: string;
@@ -43,7 +44,9 @@
 	$: isDesktop = Boolean(matchMedia?.matches);
 
 	$: schema = validateAndUpdateSchema(numberFormatSchema);
-	$: browserSupportData = schema ? { ...data[schema.method] } : { ...data.NumberFormat };
+	$: browserSupportData = schema
+		? { ...data[schema.method] }
+		: { optionsSupport: undefined, formattersSupport: undefined };
 
 	onMount(() => {
 		if (getSchemaParam()) {
@@ -123,7 +126,9 @@
 		<div class="main">
 			<Header header="Playground" link={schema.method} />
 			<Grid>
-				<BrowserSupport bind:data={browserSupportData} />
+				{#if $settings.showBrowserSupport}
+					<BrowserSupport bind:data={browserSupportData} />	
+				{/if}
 				<Button onClick={copySchema}>{m.copySchemaUrl()} <CopyToClipboard /></Button>
 			</Grid>
 			<Spacing />
diff --git a/src/lib/components/pages/Playground/PlaygroundOptions.svelte b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
index 3c6b737..257673f 100644
--- a/src/lib/components/pages/Playground/PlaygroundOptions.svelte
+++ b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
@@ -13,6 +13,7 @@
 	import Radio from '$lib/components/ui/Radio.svelte';
 	import { optionIsActive } from '$lib/playground/validate';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 
 	export let schema: PlaygroundSchema<'NumberFormat'>;
 	export let support: BrowserSupportDataForOptions | undefined;
@@ -29,7 +30,7 @@
 			option={option.name}
 			onChange={onChangeOption}
 			hideFullSupport
-			support={support?.[option.name]?.coverage}
+			support={$settings.showBrowserSupport ? support?.[option.name]?.coverage : undefined}
 		>
 			{#if option.inputType === 'select'}
 				<Select
@@ -67,7 +68,7 @@
 					{/each}
 				</div>
 			{/if}
-			{#if support?.[option.name]?.support}
+			{#if support?.[option.name]?.support && $settings.showBrowserSupport}
 				<Spacing />
 				<Details>
 					<p slot="summary">{m.browserDetails()}</p>
diff --git a/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte b/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte
index da80c2f..aee4bfd 100644
--- a/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte
+++ b/src/lib/components/pages/Playground/PlaygroundSecondaryFormatters.svelte
@@ -6,6 +6,7 @@
 	import type { BrowserSupportDataForOptions } from '$lib/types/BrowserSupport.types';
 	import Card from '$lib/components/ui/Card.svelte';
 	import { getMessages } from '$lib/i18n/util';
+	import { settings } from '$lib/store/settings';
 	
 	export let secondaryFormatters: { name: string; output: string }[];
 	export let support: BrowserSupportDataForOptions | undefined = undefined;
@@ -17,7 +18,11 @@
 	<Spacing />
 	{#each secondaryFormatters as formatter}
 	<Card>
-		<OptionSection header={formatter.name} support={support?.[formatter.name]} hideFullSupport={false}>
+		<OptionSection
+			header={formatter.name}
+			support={$settings.showBrowserSupport ?  support?.[formatter.name] : undefined}
+			hideFullSupport={false}
+		>
 			<Spacing />
 			<Highlight language={typescript} code={formatter.output} />
 		</OptionSection>
diff --git a/src/lib/components/ui/BrowserSupport/BrowserSupport.svelte b/src/lib/components/ui/BrowserSupport/BrowserSupport.svelte
index 863b6c7..811e98b 100644
--- a/src/lib/components/ui/BrowserSupport/BrowserSupport.svelte
+++ b/src/lib/components/ui/BrowserSupport/BrowserSupport.svelte
@@ -5,7 +5,7 @@
 	import SupportLabel from './SupportLabel.svelte';
 	import { getMessages } from '$lib/i18n/util';
 
-	export let data: BrowserSupportForOption | null;
+	export let data: BrowserSupportForOption | undefined;
 	export let hideFullSupport: boolean | undefined = undefined;
 	const m = getMessages();
 </script>
diff --git a/src/lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte b/src/lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte
index 94583b4..ae04abf 100644
--- a/src/lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte
+++ b/src/lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte
@@ -4,7 +4,7 @@
 	import { getMessages } from '$lib/i18n/util';
 	import type { VersionValue } from '@mdn/browser-compat-data';
 
-	export let data: Record<string, BrowserReleaseData> | null;
+	export let data: Record<string, BrowserReleaseData> | undefined;
 	const m = getMessages();
 	const getAriaLabel = (browserName: string, versionAdded: VersionValue): string => {
   	if (!versionAdded) return m.notAvailableInBrowser({ browserName })
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte
index f5c85d3..ee817b6 100644
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -9,7 +9,6 @@
 	export let onClick: MouseEventHandler<HTMLButtonElement> | undefined = undefined;
   export let onKeyDown: KeyboardEventHandler<HTMLButtonElement> | undefined = undefined;
   export let id: HTMLButtonAttributes["id"] | undefined = undefined;
-  export let className: string | undefined = undefined;
   export let type: HTMLButtonAttributes["type"] | undefined = undefined;
   export let ariaLabel: AriaAttributes["aria-label"] = undefined;
   export let ariaControls: AriaAttributes["aria-controls"] = undefined;
@@ -18,20 +17,33 @@
   export let textTransform: "uppercase" | undefined = undefined;
   export let href: string | undefined = undefined;
   export let hrefLang: string | undefined = undefined;
+  export let noBackground: boolean | undefined = undefined;
+  export let bold: boolean | undefined = undefined;
 </script>
 
 {#if href}
-  <a href={href} hreflang={hrefLang}><slot/></a>
+  <a
+    {id}
+    href={href}
+    class="button"
+    class:no-background={noBackground}
+    class:uppercase={textTransform === "uppercase"}
+    class:bold={bold}
+    hreflang={hrefLang}>
+      <slot/>
+  </a>
 {:else}
   <button
     on:click={onClick}
     {id}
     {type}
-    class={className}
+    class="button"
     aria-label={ariaLabel}
     aria-controls={ariaControls}
     aria-expanded={ariaExpanded}
     class:uppercase={textTransform === "uppercase"}
+    class:no-background={noBackground}
+    class:bold={bold}
     on:keydown={onKeyDown}
     bind:this={ref}
   >
@@ -40,13 +52,13 @@
 {/if}
 
 <style>
-	button, a {
-    background-color: inherit;
-		border: 1px solid var(--border-color);
+	.button {
+    background-color: var(--button-background-color);
+		border: 1px solid var(--button-border-color);
     border-radius: 4px;
 		padding: var(--spacing-2) var(--spacing-3);
 		cursor: pointer;
-		color: var(--text-color);
+		color: var(--button-text-color);
     text-align: center;
     display: inline-flex;
     justify-content: center;
@@ -56,8 +68,19 @@
   .uppercase {
     text-transform: uppercase;
   }
-  button:hover, a:hover {
-    background-color: var(--accent-background-color);
-    border: 1px solid var(--text-color);
+  .bold {
+    font-weight: bold;
+  }
+  .no-background {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--button-no-background-text-color);
+  }
+  .button.no-background:hover {
+    background-color: transparent;
+    border-color: var(--button-background-hover-color);
+  }
+  .button:hover {
+    background-color: var(--button-background-hover-color);
   }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/ui/Checkbox.svelte b/src/lib/components/ui/Checkbox.svelte
index b473be5..d85b5f1 100644
--- a/src/lib/components/ui/Checkbox.svelte
+++ b/src/lib/components/ui/Checkbox.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+	import type { ChangeEventHandler } from "svelte/elements";
+
 	export let id: string;
 	export let name: string;
 	export let checked: boolean = false;
 	export let label: string;
-	export let onChange: (event: Event) => void;
+	export let srOnlyLabel: boolean | undefined = undefined;
+	export let onChange: ChangeEventHandler<HTMLInputElement>;
 </script>
 
 <div class="wrapper">
@@ -15,7 +18,7 @@
 		{checked}
 		on:change={onChange}
 	/>
-	<label for={id} class="sr-only">{label}</label>
+	<label for={id} class:sr-only={srOnlyLabel}>{label}</label>
 </div>
 
 <style>
@@ -25,7 +28,7 @@
 	input[type='checkbox'] {
 		width: var(--spacing-4);
 		height: var(--spacing-4);
-    color: var(--white);
-		accent-color: var(--purple);
+    color: var(--text-color);
+		accent-color: var(--purple4);
 	}
 </style>
diff --git a/src/lib/components/ui/CopyButton.svelte b/src/lib/components/ui/CopyButton.svelte
deleted file mode 100644
index e8b3cc6..0000000
--- a/src/lib/components/ui/CopyButton.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="ts">
-	import CopyToClipboard from '$lib/components/ui/icons/CopyToClipboard.svelte';
-	export let label: string;
-	export let onClick: () => void;
-</script>
-
-<button class="copy" aria-label={label} on:click={onClick}><CopyToClipboard /></button>
-
-<style>
-	.copy {
-		background-color: transparent;
-		border: none;
-		border-top-right-radius: 0.5rem;
-		border-bottom-left-radius: 0.5rem;
-		padding: var(--spacing-4);
-		cursor: pointer;
-		color: var(--white);
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		right: 0;
-	}
-	.copy:hover {
-		background-color: var(--purple);
-	}
-</style>
diff --git a/src/lib/components/ui/HamburgerMenu.svelte b/src/lib/components/ui/HamburgerMenu.svelte
deleted file mode 100644
index cfdbfeb..0000000
--- a/src/lib/components/ui/HamburgerMenu.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<div class="sidebar-toggle">
-	<span />
-	<span />
-	<span />
-</div>
-
-<style>
-	.sidebar-toggle {
-		width: 2rem;
-		height: 2rem;
-		padding: var(--spacing-2) var(--spacing-4);
-		display: flex;
-		flex-direction: column;
-		justify-content: space-evenly;
-		cursor: pointer;
-		background-color: var(--background-color);
-		border-radius: 4px;
-		border: 1px solid var(--light-purple);
-		box-shadow: 4px 4px 8px 2px hsla(276, 100%, 20%, 0.1);
-	}
-	.sidebar-toggle span {
-		height: 0.125rem;
-		width: 100%;
-		background-color: var(--text-color);
-	}
-</style>
diff --git a/src/lib/components/ui/Navigation.svelte b/src/lib/components/ui/Navigation.svelte
index 8d02384..bc44289 100644
--- a/src/lib/components/ui/Navigation.svelte
+++ b/src/lib/components/ui/Navigation.svelte
@@ -88,11 +88,17 @@
 			onClick={openDrawer}
 			bind:ref={openButton}
 			textTransform="uppercase"
+			noBackground
 		>
 			{m.menu()}
 		</Button>
 		<div class="settings">
-			<Button onClick={() => (showSettings = true)} ariaLabel="Settings" textTransform="uppercase">
+			<Button
+				onClick={() => (showSettings = true)}
+				ariaLabel="Settings"
+				textTransform="uppercase"
+				noBackground
+			>
 				<span class="mr-2">{m.settingsButton()}</span> <Settings />
 			</Button>
 		</div>
@@ -107,6 +113,7 @@
 				bind:ref={closeButton}
 				onKeyDown={onCloseButtonShiftTab}
 				textTransform="uppercase"
+				noBackground
 			>
 				{m.close()}
 			</Button>
diff --git a/src/lib/components/ui/OptionCard.svelte b/src/lib/components/ui/OptionCard.svelte
index 68f3971..bb8c89e 100644
--- a/src/lib/components/ui/OptionCard.svelte
+++ b/src/lib/components/ui/OptionCard.svelte
@@ -19,6 +19,7 @@
 				label="{option} active"
 				name="{option}_active"
 				id="{option}_active"
+				srOnlyLabel
 				{checked}
 				{onChange}
 			/>
diff --git a/src/lib/components/ui/ProgressBar.svelte b/src/lib/components/ui/ProgressBar.svelte
index 02e9b32..f616015 100644
--- a/src/lib/components/ui/ProgressBar.svelte
+++ b/src/lib/components/ui/ProgressBar.svelte
@@ -8,7 +8,7 @@
   height: 4px;
 	width: 100%;
 	display: block;
-  background-color: var(--purple);
+  background-color: var(--progress-bar-color);
   background-image: linear-gradient(
     -45deg,
     rgba(255, 255, 255, 0.2) 25%,
diff --git a/src/lib/components/ui/Radio.svelte b/src/lib/components/ui/Radio.svelte
index 61cf419..25d8f90 100644
--- a/src/lib/components/ui/Radio.svelte
+++ b/src/lib/components/ui/Radio.svelte
@@ -16,7 +16,7 @@
 <style>
   :root {
   --radio-border-color: var(--border-color);
-  --radio-checked-color: var(--purple);
+  --radio-checked-color: var(--radio-checked-color);
   --radio-hover-color: var(--lightergray);
   --radio-disabled-bg-color: var(--lightergray);
   }
diff --git a/src/lib/components/ui/SettingsDialog.svelte b/src/lib/components/ui/SettingsDialog.svelte
index 247914e..8b349b2 100644
--- a/src/lib/components/ui/SettingsDialog.svelte
+++ b/src/lib/components/ui/SettingsDialog.svelte
@@ -6,7 +6,10 @@
     settings,
     settingsConfiguration,
     settingsKeys,
-    type Settings
+    type Settings,
+
+		type DarkMode
+
   } from '$lib/store/settings';
 	
   import { availableLanguageTags, languageTag } from "$paraglide/runtime";
@@ -22,6 +25,7 @@
 	import { selectedLocale } from "$lib/store/selected-locale";
 	import { getLocaleForSSR } from "$lib/utils/get-locale";
 	import Button from "./Button.svelte";
+	import Checkbox from "./Checkbox.svelte";
 
   export let show: boolean;
 
@@ -32,9 +36,11 @@
 
   const onChange = (event: Event) => {
     const target = event.target as HTMLInputElement
+    const isCheckBox = target.type === 'checkbox';
+    const value = isCheckBox ? target.checked : target.value;
     settings.update((s) => ({
       ...s,
-      [target.name]: target.value,
+      [target.name]: value,
     }))
   }
 
@@ -44,6 +50,20 @@
     return m[hintKey]()
   }
 
+  const getLabel = (value: boolean | DarkMode) => {
+    if(typeof value === "boolean") {
+      return "";
+    }
+    return m[value]()
+  }
+
+  export const getValue = (value: boolean | DarkMode) => {
+    if(typeof value === "boolean") {
+      return ""
+    }
+    return value;
+  }
+
   const formatTag = (tag: string) => {
     try {
       return  new Intl.DisplayNames(tag, { type: "language" }).of(tag)
@@ -70,15 +90,24 @@
             {#each settingsConfiguration[key].values as option}
               <Radio
                 onChange={onChange}
-                label={m[option]()}
+                label={getLabel(option)}
                 id={key + option}
                 name={key}
-                value={option}
+                value={getValue(option)}
                 bind:group={$settings[key]}
               />
             {/each}
           </Fieldset>
         {/if}
+        {#if settingsConfiguration[key].type === "checkbox"}
+          <Checkbox
+            id={key}
+            onChange={onChange}
+            checked={Boolean($settings[key])}
+            label={m[key]()}
+            name={key}
+          />
+        {/if}
         {#if settingsConfiguration[key].hint}
           <Spacing size={2} />
           <p>{getHint(key)}</p>
diff --git a/src/lib/store/settings.ts b/src/lib/store/settings.ts
index d2025e3..895dd2f 100644
--- a/src/lib/store/settings.ts
+++ b/src/lib/store/settings.ts
@@ -1,12 +1,12 @@
 import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
 
-type DarkMode = "dark" | "light";
+export type DarkMode = "dark" | "light";
 
-type HintKeys = "codeThemeHint" | "themeHint";
+type HintKeys = "codeThemeHint" | "themeHint" | "showBrowserSupportHint";
 
 type Setting<Value> = {
-  type: "radio",
+  type: "radio" | "checkbox",
   values: Value[],
   hint?: HintKeys;
 }
@@ -14,6 +14,7 @@ type Setting<Value> = {
 type SettingsConfiguration = {
   codeTheme: Setting<DarkMode>
   theme: Setting<DarkMode>
+  showBrowserSupport: Setting<boolean>;
 }
 
 export const settingsConfiguration: SettingsConfiguration = {
@@ -26,17 +27,24 @@ export const settingsConfiguration: SettingsConfiguration = {
     type: 'radio',
     values: ["dark", "light"],
     hint: "themeHint",
+  },
+  showBrowserSupport: {
+    type: 'checkbox',
+    values: [true],
+    hint: "showBrowserSupportHint",
   }
 }
 
 export type Settings = {
   codeTheme: DarkMode;
   theme: DarkMode;
+  showBrowserSupport: boolean;
 }
 
 const defaultSettings: Settings  = {
   codeTheme: "dark",
-  theme: 'light'
+  theme: 'light',
+  showBrowserSupport: true
 }
 
 export const settingsKeys = Object.keys(defaultSettings) as (keyof Settings)[]
diff --git a/src/lib/types/BrowserSupport.types.ts b/src/lib/types/BrowserSupport.types.ts
index b8f3fcf..36b4e37 100644
--- a/src/lib/types/BrowserSupport.types.ts
+++ b/src/lib/types/BrowserSupport.types.ts
@@ -9,8 +9,8 @@ export type BrowserReleaseData = {
 };
 
 export type BrowserSupportForOption = {
-	coverage: BrowserCoverage;
-	support: Record<string, BrowserReleaseData>
+	coverage?: BrowserCoverage;
+	support?: Record<string, BrowserReleaseData>
 }
 
 export type BrowserSupportDataForOptions = Record<string, BrowserSupportForOption>;
@@ -18,8 +18,8 @@ export type BrowserSupportDataForOptions = Record<string, BrowserSupportForOptio
 export type BrowserSupportDataForMethod = {
 	specUrl?: string | string[];
 	mdnUrl?: string;
-	support: Record<string, BrowserReleaseData>;
-	coverage: BrowserCoverage;
+	support?: Record<string, BrowserReleaseData>;
+	coverage?: BrowserCoverage;
 	optionsSupport?: BrowserSupportDataForOptions;
 	formattersSupport?: BrowserSupportDataForOptions;
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c6d549a..8b84f3c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -54,6 +54,7 @@
 <!-- Ignore -->
 <style global>
 	:root {
+		--blue-black: hsl(202, 32%, 15%);
 		--dark-black: hsl(0, 100%, 2%);
 		--black: hsl(276, 100%, 12%);
 		--white: hsl(0, 100%, 100%);
@@ -64,7 +65,6 @@
 		--gray: hsl(0, 0%, 60%);
 		--lightgray: hsl(0, 0%, 80%);
 		--lightergray: hsl(0, 0%, 90%);
-		--purple: hsl(276, 67%, 74%);
 		--teal: hsl(169, 56%, 68%);
 		--green: hsl(114, 31%, 68%);
 		--darkgreen: hsl(114, 31%, 39%);
@@ -74,23 +74,37 @@
 		--lighteryellow: #fac863;
 		--lightyellow: hsl(40, 94%, 50%);
 		--yellow: hsl(40, 94%, 32%);
-		--light-purple: hsl(276, 100%, 98%);
-		--highlight: #0066ff;
+		--highlight: hsl(216, 100%, 50%);
+		--purple1: hsl(276, 100%, 98%);
+		--purple2: hsl(276, 50%, 92%);
+		--purple3: hsl(276, 50%, 89%);
+		--purple4: hsl(276, 50%, 80%);
+		--purple5: hsl(276, 67%, 74%);
 
 		--text-color: var(--black);
-		--accent-background-color: var(--light-purple);
+		--accent-background-color: var(--purple1);
+		--link-underline-color: var(--purple5);
 		--background-color: var(--white);
-		--link-underline-color: var(--purple);
 		--border-color: var(--lightgray);
 		--divider-color: var(--lightergray);
 		--card-color: var(--background-color);
 
+		--button-background-color: var(--purple2);
+		--button-border-color: var(--purple3);
+		--button-background-hover-color: var(--purple3);
+		--button-text-color: var(--black);
+		--button-no-background-text-color: var(--black);
+
+		--radio-checked-color: var(--purple4);
+
+		--progress-bar-color: var(--purple4);
+
 		--code-comment-color: var(--gray);
 		--code-text-color: var(--white);
-		--code-block-background: #1b2b34;
+		--code-block-background: var(--blue-black);
 
 		--comment: var(--gray);
-		--punctuation: var(--purple);
+		--punctuation: var(--purple5);
 		--operator: var(--teal);
 		--key: var(--white);
 		--function: var(--light-blue);
@@ -128,6 +142,12 @@
 			--card-color: var(--darkergray);
 			--yellow: var(--lightyellow);
 			--darkgreen: var(--green);
+
+			--button-no-background-text-color: var(--white);
+			--button-background-color: var(--purple2);
+			--button-border-color: var(--purple3);
+			--button-background-hover-color: var(--purple3);
+			--button-text-color: var(--black);
 		}
 	}
 	[data-dark-mode] {
@@ -140,6 +160,12 @@
 		--card-color: var(--dark-black);
 		--yellow: var(--lightyellow);
 		--darkgreen: var(--green);
+
+		--button-no-background-text-color: var(--white);
+		--button-background-color: var(--blue-black);
+		--button-border-color: var(--darkgray);
+		--button-background-hover-color: var(--blue-black);
+		--button-text-color: var(--white);
 	}
 	[data-code-light-mode] {
 		--code-text-color: var(--black);
diff --git a/src/routes/Collator/+page.svelte b/src/routes/Collator/+page.svelte
index 9c919c5..2dcc876 100644
--- a/src/routes/Collator/+page.svelte
+++ b/src/routes/Collator/+page.svelte
@@ -7,19 +7,23 @@
   import Spacing from '$lib/components/ui/Spacing.svelte';
 
 	import { selectedLocale } from '$lib/store/selected-locale';
+	import { settings } from '$lib/store/settings';
 	import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<Collator browserCompatData={data} bind:locale={$selectedLocale} />
+	<Collator {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<Collator browserCompatData={data} {locale} />
+	<Collator {browserCompatData} {locale} />
 {/if}
diff --git a/src/routes/DateTimeFormat/+page.svelte b/src/routes/DateTimeFormat/+page.svelte
index 7e2932e..3d3a053 100644
--- a/src/routes/DateTimeFormat/+page.svelte
+++ b/src/routes/DateTimeFormat/+page.svelte
@@ -7,6 +7,7 @@
   import Spacing from '$lib/components/ui/Spacing.svelte';
 
   import { selectedLocale } from '$lib/store/selected-locale';
+	import { settings } from '$lib/store/settings';
   import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
@@ -14,14 +15,18 @@
 
 	const locale = getLocaleForSSR($page);
 
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<DateTimeFormat browserCompatData={data}  bind:locale={$selectedLocale} />
+	<DateTimeFormat {browserCompatData}  bind:locale={$selectedLocale} />
 {:else}
-	<DateTimeFormat browserCompatData={data} {locale} />
+	<DateTimeFormat {browserCompatData} {locale} />
 {/if}
 
diff --git a/src/routes/DisplayNames/+page.svelte b/src/routes/DisplayNames/+page.svelte
index 264dce8..6ab5b39 100644
--- a/src/routes/DisplayNames/+page.svelte
+++ b/src/routes/DisplayNames/+page.svelte
@@ -10,14 +10,17 @@
 
 	import type { PageData } from './$types';
   import DisplayNames from '$lib/components/pages/DisplayNames.svelte';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
 
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
 	<DisplayNames bind:locale={$selectedLocale} />
diff --git a/src/routes/DurationFormat/+page.svelte b/src/routes/DurationFormat/+page.svelte
index 7a158c6..f8b0dee 100644
--- a/src/routes/DurationFormat/+page.svelte
+++ b/src/routes/DurationFormat/+page.svelte
@@ -10,18 +10,23 @@
 
 	import type { PageData } from './$types';
 	import DurationFormat from '$lib/components/pages/DurationFormat.svelte';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
 
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<DurationFormat browserCompatData={data} bind:locale={$selectedLocale} />
+	<DurationFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<DurationFormat browserCompatData={data} {locale} />
+	<DurationFormat {browserCompatData} {locale} />
 {/if}
 
diff --git a/src/routes/ListFormat/+page.svelte b/src/routes/ListFormat/+page.svelte
index cf7d43a..6586838 100644
--- a/src/routes/ListFormat/+page.svelte
+++ b/src/routes/ListFormat/+page.svelte
@@ -10,16 +10,21 @@
 	import { selectedLocale } from '$lib/store/selected-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<ListFormat browserCompatData={data} bind:locale={$selectedLocale} />
+	<ListFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<ListFormat browserCompatData={data} {locale} />
+	<ListFormat {browserCompatData} {locale} />
 {/if}
diff --git a/src/routes/NumberFormat/+page.svelte b/src/routes/NumberFormat/+page.svelte
index 4618525..c837910 100644
--- a/src/routes/NumberFormat/+page.svelte
+++ b/src/routes/NumberFormat/+page.svelte
@@ -12,20 +12,25 @@
   import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 <p>
 	{m.seeAlso()} <a href="NumberFormat/Currency">Currency</a> {m.and()} <a href="/NumberFormat/Unit">Unit</a>.
 </p>
 <Spacing />
 {#if browser}
-	<NumberFormat browserCompatData={data} bind:locale={$selectedLocale} />
+	<NumberFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<NumberFormat browserCompatData={data} {locale} />
+	<NumberFormat {browserCompatData} {locale} />
 {/if}
 
diff --git a/src/routes/NumberFormat/Currency/+page.svelte b/src/routes/NumberFormat/Currency/+page.svelte
index b1f1792..72220de 100644
--- a/src/routes/NumberFormat/Currency/+page.svelte
+++ b/src/routes/NumberFormat/Currency/+page.svelte
@@ -7,19 +7,25 @@
   import Spacing from '$lib/components/ui/Spacing.svelte';
 
 	import { selectedLocale } from '$lib/store/selected-locale';
+	import { settings } from '$lib/store/settings';
 	import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<NumberFormat browserCompatData={data}  bind:locale={$selectedLocale} />
+	<NumberFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<NumberFormat browserCompatData={data} {locale} />
+	<NumberFormat {browserCompatData} {locale} />
 {/if}
diff --git a/src/routes/NumberFormat/Unit/+page.svelte b/src/routes/NumberFormat/Unit/+page.svelte
index f6ad1a7..202c8c0 100644
--- a/src/routes/NumberFormat/Unit/+page.svelte
+++ b/src/routes/NumberFormat/Unit/+page.svelte
@@ -10,17 +10,23 @@
   import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<NumberFormat browserCompatData={data} bind:locale={$selectedLocale} />
+	<NumberFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<NumberFormat browserCompatData={data} {locale} />
+	<NumberFormat {browserCompatData} {locale} />
 {/if}
 
diff --git a/src/routes/Playground/+page.svelte b/src/routes/Playground/+page.svelte
index 5ecca4e..c29dc8b 100644
--- a/src/routes/Playground/+page.svelte
+++ b/src/routes/Playground/+page.svelte
@@ -10,6 +10,7 @@
 	import { settings } from '$lib/store/settings';
 
 	export let data: Record<string, BrowserSupportDataForMethod>;
+	
 </script>
 
 <svelte:head>
diff --git a/src/routes/PluralRules/+page.svelte b/src/routes/PluralRules/+page.svelte
index b7d4ba5..02630fd 100644
--- a/src/routes/PluralRules/+page.svelte
+++ b/src/routes/PluralRules/+page.svelte
@@ -10,18 +10,22 @@
   import { selectedLocale } from '$lib/store/selected-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
 
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<PluralRules browserCompatData={data}  bind:locale={$selectedLocale} />
+	<PluralRules {browserCompatData}  bind:locale={$selectedLocale} />
 {:else}
-	<PluralRules browserCompatData={data} {locale} />
+	<PluralRules {browserCompatData} {locale} />
 {/if}
 
diff --git a/src/routes/RelativeTimeFormat/+page.svelte b/src/routes/RelativeTimeFormat/+page.svelte
index 7196afe..5a657de 100644
--- a/src/routes/RelativeTimeFormat/+page.svelte
+++ b/src/routes/RelativeTimeFormat/+page.svelte
@@ -10,16 +10,21 @@
 	import { selectedLocale } from '$lib/store/selected-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
+	
 </script>
 
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<RelativeTimeFormat browserCompatData={data}  bind:locale={$selectedLocale} />
+	<RelativeTimeFormat {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<RelativeTimeFormat browserCompatData={data}  {locale} />
+	<RelativeTimeFormat {browserCompatData} {locale} />
 {/if}
diff --git a/src/routes/Segmenter/+page.svelte b/src/routes/Segmenter/+page.svelte
index b6946bf..ce0967d 100644
--- a/src/routes/Segmenter/+page.svelte
+++ b/src/routes/Segmenter/+page.svelte
@@ -9,17 +9,20 @@
   import { getLocaleForSSR } from '$lib/utils/get-locale';
 
 	import type { PageData } from './$types';
+	import { settings } from '$lib/store/settings';
 	export let data: PageData;
 
 	const locale = getLocaleForSSR($page);
+	let browserCompatData = $settings.showBrowserSupport ? data : null;
 
 </script>
-
-<BrowserSupport {data} />
-<Spacing />
+{#if $settings.showBrowserSupport}
+	<BrowserSupport {data} />
+	<Spacing />
+{/if}
 
 {#if browser}
-	<Segmenter browserCompatData={data} bind:locale={$selectedLocale} />
+	<Segmenter {browserCompatData} bind:locale={$selectedLocale} />
 {:else}
-	<Segmenter browserCompatData={data} {locale} />
+	<Segmenter {browserCompatData} {locale} />
 {/if}