diff --git a/src/page-components/scheme/m3-scheme/Preview.module.css b/src/page-components/scheme/m3-scheme/Preview.module.css
new file mode 100644
index 0000000..b7d43be
--- /dev/null
+++ b/src/page-components/scheme/m3-scheme/Preview.module.css
@@ -0,0 +1,88 @@
+@layer pages {
+  .preview_layout {
+    padding: var(--spacing-s) var(--spacing-m);
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-m);
+  }
+  .preview_block {
+    width: inherit;
+    padding: var(--spacing-m) var(--spacing-m);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-m);
+    font-size: var(--font-size-xs);
+    line-height: 1.1em;
+    .main_grid {
+      display: grid;
+      grid-template-columns: 3fr 1fr;
+      gap: var(--spacing-m);
+      .main_color_sets {
+        grid-column: 1;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        align-items: stretch;
+        gap: var(--spacing-xs);
+      }
+      .surface_sets {
+        grid-column: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--spacing-xs);
+        .surface_basics {
+          flex-grow: 1;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 0;
+        }
+        .surface_levels {
+          flex-grow: 1;
+          display: grid;
+          grid-template-columns: repeat(5, 1fr);
+          gap: 0;
+        }
+        .surface_variants {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 0;
+        }
+      }
+      .additional_sets {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--spacing-xs);
+        .constants {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: var(--spacing-s);
+        }
+      }
+    }
+    h4 {
+      font-size: var(--font-size-m);
+      font-weight: bold;
+      line-height: 1.7em;
+    }
+  }
+  .vertical_set {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .horizontal_set {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: stretch;
+    gap: 0;
+  }
+  .color_block {
+    padding: var(--spacing-s) var(--spacing-xs);
+  }
+}
diff --git a/src/page-components/scheme/m3-scheme/Preview.tsx b/src/page-components/scheme/m3-scheme/Preview.tsx
new file mode 100644
index 0000000..2672506
--- /dev/null
+++ b/src/page-components/scheme/m3-scheme/Preview.tsx
@@ -0,0 +1,272 @@
+import { ScrollArea } from '../../../components/ScrollArea';
+import {
+  Baseline,
+  ColorSet,
+  MaterialDesign3SchemeStorage,
+  Surface,
+} from '../../../material-3-scheme';
+import { SchemeContent } from '../../../models';
+import styles from './Preview.module.css';
+
+type ColorSetProps = {
+  name: string;
+  set: ColorSet;
+};
+
+function VerticalColorSet({ name, set }: ColorSetProps) {
+  return (
+    <div className={styles.vertical_set}>
+      <div
+        className={styles.color_block}
+        style={{ backgroundColor: `#${set.root}`, color: `#${set.on_root}` }}>
+        {name}
+      </div>
+      <div
+        className={styles.color_block}
+        style={{ backgroundColor: `#${set.on_root}`, color: `#${set.root}` }}>
+        On {name}
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${set.container}`,
+          color: `#${set.on_container}`,
+        }}>
+        {name} Container
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${set.on_container}`,
+          color: `#${set.container}`,
+        }}>
+        On {name} Container
+      </div>
+    </div>
+  );
+}
+
+function HorizontalColorSet({ name, set }: ColorSetProps) {
+  return (
+    <div className={styles.horizontal_set}>
+      <div
+        className={styles.color_block}
+        style={{ backgroundColor: `#${set.root}`, color: `#${set.on_root}` }}>
+        {name}
+      </div>
+      <div
+        className={styles.color_block}
+        style={{ backgroundColor: `#${set.on_root}`, color: `#${set.root}` }}>
+        On {name}
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${set.container}`,
+          color: `#${set.on_container}`,
+        }}>
+        {name} Container
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${set.on_container}`,
+          color: `#${set.container}`,
+        }}>
+        On {name} Container
+      </div>
+    </div>
+  );
+}
+
+type SurfaceColorSetProps = {
+  surface: Surface;
+  outline: string;
+  outlineVariant: string;
+};
+
+function SurfaceColorSet({ surface, outline, outlineVariant }: SurfaceColorSetProps) {
+  return (
+    <div className={styles.surface_sets}>
+      <div className={styles.surface_basics}>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.dim}`, color: `#${surface.on_root}` }}>
+          Surface Dim
+        </div>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.root}`, color: `#${surface.on_root}` }}>
+          Surface
+        </div>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.bright}`, color: `#${surface.on_root}` }}>
+          Surface Bright
+        </div>
+      </div>
+      <div className={styles.surface_levels}>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.container_lowest}`, color: `#${surface.on_root}` }}>
+          Surf. Container Lowest
+        </div>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.container_low}`, color: `#${surface.on_root}` }}>
+          Surf. Container Low
+        </div>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.container}`, color: `#${surface.on_root}` }}>
+          Surf. Container
+        </div>
+        <div
+          className={styles.color_block}
+          style={{ backgroundColor: `#${surface.container_high}`, color: `#${surface.on_root}` }}>
+          Surf. Container High
+        </div>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${surface.container_highest}`,
+            color: `#${surface.on_root}`,
+          }}>
+          Surf. Container Highest
+        </div>
+      </div>
+      <div className={styles.surface_variants}>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${surface.on_root}`,
+            color: `#${surface.root}`,
+          }}>
+          On Surface
+        </div>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${surface.on_root_variant}`,
+            color: `#${surface.root}`,
+          }}>
+          On Surface Var.
+        </div>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${outline}`,
+            color: `#${surface.surface}`,
+          }}>
+          Outline
+        </div>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${outlineVariant}`,
+            color: `#${surface.on_root}`,
+          }}>
+          Outline Variant
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AdditionalColorSetsProps = {
+  baseline: Baseline;
+};
+
+function AdditionalColorSets({ baseline }: AdditionalColorSetsProps) {
+  return (
+    <div className={styles.additional_sets}>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${baseline.surface.inverse}`,
+          color: `#${baseline.surface.on_inverse}`,
+        }}>
+        Inverse Surface
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${baseline.surface.on_inverse}`,
+          color: `#${baseline.surface.inverse}`,
+        }}>
+        Inverse On Surface
+      </div>
+      <div
+        className={styles.color_block}
+        style={{
+          backgroundColor: `#${baseline.primary.inverse}`,
+          color: `#${baseline.surface.on_root}`,
+        }}>
+        Inverse Primary
+      </div>
+      <div className={styles.constants}>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${baseline.scrim}`,
+            color: `#ffffff`,
+          }}>
+          Scrim
+        </div>
+        <div
+          className={styles.color_block}
+          style={{
+            backgroundColor: `#${baseline.shadow}`,
+            color: `#ffffff`,
+          }}>
+          Shadow
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type PreviewBlockProps = {
+  title: string;
+  baseline: Baseline;
+};
+
+function PreviewBlock({ title, baseline }: PreviewBlockProps) {
+  return (
+    <div className={styles.preview_block} style={{ backgroundColor: `#${baseline.surface.root}` }}>
+      <h4 style={{ color: `#${baseline.surface.on_root}` }}>{title}</h4>
+      <div className={styles.main_grid}>
+        <div className={styles.main_color_sets}>
+          <VerticalColorSet name="Primary" set={baseline.primary} />
+          <VerticalColorSet name="Secondary" set={baseline.secondary} />
+          <VerticalColorSet name="Tertiary" set={baseline.tertiary} />
+        </div>
+        <VerticalColorSet name="Error" set={baseline.error} />
+        <SurfaceColorSet
+          surface={baseline.surface}
+          outline={baseline.outline}
+          outlineVariant={baseline.outlineVariant}
+        />
+        <AdditionalColorSets baseline={baseline} />
+      </div>
+      {Object.entries(baseline.customs).map(([name, set], index) => (
+        <HorizontalColorSet key={index} name={name} set={set} />
+      ))}
+    </div>
+  );
+}
+
+type M3SchemePreviewProps = {
+  scheme: SchemeContent<MaterialDesign3SchemeStorage>;
+};
+
+export function M3SchemePreview({ scheme }: M3SchemePreviewProps) {
+  return (
+    <ScrollArea enableY>
+      <div className={styles.preview_layout}>
+        <PreviewBlock title="Light Scheme" baseline={scheme.schemeStorage.scheme?.light_baseline} />
+        <PreviewBlock title="Dark Scheme" baseline={scheme.schemeStorage.scheme?.dark_baseline} />
+      </div>
+    </ScrollArea>
+  );
+}