diff --git a/src/stories/Styleguide.mdx b/src/stories/Styleguide.mdx
new file mode 100644
index 00000000..ba830304
--- /dev/null
+++ b/src/stories/Styleguide.mdx
@@ -0,0 +1,114 @@
+# Welcome to the GreenwoodJS style guide
+
+  {`
+    :root {
+      --size: 50px;
+    }
+
+    h2 {
+      text-decoration: underline;
+    }
+
+    .palette-box {
+      width: var(--size);
+      height: var(--size);
+      display: block;
+      margin: 0 auto;
+    }
+
+    .palette-primary {
+      background-color: var(--color-primary);
+    }
+
+    .palette-secondary {
+      background-color: var(--color-secondary);
+    }
+
+    .palette-accent {
+      background-color: var(--color-accent);
+    }
+
+    .palette-tertiary {
+      background-color: var(--color-tertiary);
+    }
+
+    .palette-white {
+      background-color: var(--color-white);
+    }
+
+    .palette-black {
+      background-color: var(--color-black);
+    }
+
+    .typography {
+      font-size: 1.4rem;
+    }
+
+    .typography-primary {
+      font-family: var(--font-primary);
+      color: var(--color-primary);
+    }
+
+    .typography-secondary {
+      font-family: var(--font-secondary);
+      color: var(--color-primary);
+    }
+  `}
+
+
+
+
+
+
+
+
+### The GreenwoodJS website styleguide breaks down into the following sections:
+
+1. Colors
+2. Typography
+3. Spacing
+4. Components
+
+
+
+## Colors
+The following theme colors available are:
+
+`--color-primary`
+
+`--color-secondary`
+
+`--color-tertiary`
+
+`--color-accent`
+
+`--color-gray`
+
+`--color-text`
+
+`--color-white`
+
+
+
+## Typography
+The whole website uses Vercel's **Geist** font in the following sizes:
+
+
+
+
+
+## Spacing
+The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px
+
+`--spacing-unit`
+
+
+
+## Components
+👈 All available components can be found on the left sidebar of the Storybook site.
+
+
+
+
+
+
diff --git a/src/stories/styleguide.mdx b/src/stories/styleguide.mdx
deleted file mode 100644
index aeb684a4..00000000
--- a/src/stories/styleguide.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
-# Welcome to the GreenwoodJS style guide
-
-### The GreenwoodJS website styleguide breaks down into the following sections:
-
-1. Colors
-2. Typography
-3. Spacing
-4. Components
-
-
-
-## Colors
-The following theme colors available are:
-
-`--color-primary`
-
-`--color-secondary`
-
-`--color-tertiary`
-
-`--color-accent`
-
-`--color-gray`
-
-`--color-text`
-
-`--color-white`
-
-
-
-## Typography
-The whole website uses Vercel's **Geist** font in the following sizes:
-
-
-
-
-
-## Spacing
-The whole website is built on an 8pt Grid, and spacing is always in multiples of 8px
-
-`--spacing-unit`
-
-
-
-## Components
-👈 All available components can be found on the left sidebar of the Storybook site.
-
-
-
-
-
-