diff --git a/src/page-components/scheme/SchemeView.module.css b/src/page-components/scheme/SchemeView.module.css
new file mode 100644
index 0000000..a89a3eb
--- /dev/null
+++ b/src/page-components/scheme/SchemeView.module.css
@@ -0,0 +1,16 @@
+@layer pages {
+  .scheme_view_layout {
+    flex: 1 0;
+    width: 100%;
+    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+  }
+  .preview_switch_container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
+}
diff --git a/src/page-components/scheme/SchemeView.tsx b/src/page-components/scheme/SchemeView.tsx
new file mode 100644
index 0000000..9ee1f42
--- /dev/null
+++ b/src/page-components/scheme/SchemeView.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Switch } from '../../components/Switch';
+import { SchemeSet } from '../../stores/schemes';
+import { SchemeContent } from './SchemeContent';
+import styles from './SchemeView.module.css';
+
+type SchemeViewProps = {
+  scheme: SchemeSet['lightScheme' | 'darkScheme'];
+};
+
+export function SchemeView({ scheme }: SchemeViewProps) {
+  const [enablePreview, setEnablePreview] = useState(false);
+
+  return (
+    <div className={styles.scheme_view_layout}>
+      <div className={styles.preview_switch_container}>
+        <span>Preview scheme</span>
+        <Switch onChange={(checked) => setEnablePreview(checked)} />
+      </div>
+      {enablePreview ? <div>SVG Preview</div> : <SchemeContent scheme={scheme} />}
+    </div>
+  );
+}