diff --git a/apps/frontend/src/App.scss b/apps/frontend/src/App.scss
index 60ff72a..4f61b80 100644
--- a/apps/frontend/src/App.scss
+++ b/apps/frontend/src/App.scss
@@ -40,3 +40,34 @@
     transform: rotate(360deg);
   }
 }
+
+// Fonts
+$gellix-font-family: "Gellix";
+$gellix-fonts-path: "./stories/assets/fonts/";
+$font-weight-thin: 100;
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-black: 900;
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-Light_R.woff2") format("woff2");
+  font-weight: $font-weight-light;
+}
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-Regular_R.woff2") format("woff2");
+  font-weight: $font-weight-regular;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: $gellix-font-family;
+  src: url("./stories/assets/fonts/Gellix-SemiBold_R.woff2") format("woff2");
+  font-weight: $font-weight-semibold;
+  font-style: normal;
+}
diff --git a/apps/frontend/src/App.tsx b/apps/frontend/src/App.tsx
index e3a5335..5f3309b 100644
--- a/apps/frontend/src/App.tsx
+++ b/apps/frontend/src/App.tsx
@@ -11,7 +11,7 @@ function App() {
           Edit <code>src/App.tsx</code> and save to reload.
         </p>
         <a
-          className="App-link"
+          className="App-link font-gellix"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
diff --git a/apps/frontend/src/stories/Configure.mdx b/apps/frontend/src/stories/Configure.mdx
index 5157090..ae983b8 100644
--- a/apps/frontend/src/stories/Configure.mdx
+++ b/apps/frontend/src/stories/Configure.mdx
@@ -1,19 +1,19 @@
 import { Meta } from "@storybook/blocks";
 
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
+import Github from "./assets/images/github.svg";
+import Discord from "./assets/images/discord.svg";
+import Youtube from "./assets/images/youtube.svg";
+import Tutorials from "./assets/images/tutorials.svg";
+import Styling from "./assets/images/styling.png";
+import Context from "./assets/images/context.png";
+import Assets from "./assets/images/assets.png";
+import Docs from "./assets/images/docs.png";
+import Share from "./assets/images/share.png";
+import FigmaPlugin from "./assets/images/figma-plugin.png";
+import Testing from "./assets/images/testing.png";
+import Accessibility from "./assets/images/accessibility.png";
+import Theming from "./assets/images/theming.png";
+import AddonLibrary from "./assets/images/addon-library.png";
 
 export const RightArrow = () => <svg 
     viewBox="0 0 14 14" 
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-LightItalic_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-LightItalic_R.woff2
new file mode 100644
index 0000000..d615977
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-LightItalic_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-Light_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-Light_R.woff2
new file mode 100644
index 0000000..78cdd51
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-Light_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-RegularItalic_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-RegularItalic_R.woff2
new file mode 100644
index 0000000..79f28b7
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-RegularItalic_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-Regular_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-Regular_R.woff2
new file mode 100644
index 0000000..3f4150f
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-Regular_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-SemiBoldItalic_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-SemiBoldItalic_R.woff2
new file mode 100644
index 0000000..5c3a492
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-SemiBoldItalic_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/fonts/Gellix-SemiBold_R.woff2 b/apps/frontend/src/stories/assets/fonts/Gellix-SemiBold_R.woff2
new file mode 100644
index 0000000..6c1e2a6
Binary files /dev/null and b/apps/frontend/src/stories/assets/fonts/Gellix-SemiBold_R.woff2 differ
diff --git a/apps/frontend/src/stories/assets/accessibility.png b/apps/frontend/src/stories/assets/images/accessibility.png
similarity index 100%
rename from apps/frontend/src/stories/assets/accessibility.png
rename to apps/frontend/src/stories/assets/images/accessibility.png
diff --git a/apps/frontend/src/stories/assets/accessibility.svg b/apps/frontend/src/stories/assets/images/accessibility.svg
similarity index 100%
rename from apps/frontend/src/stories/assets/accessibility.svg
rename to apps/frontend/src/stories/assets/images/accessibility.svg
diff --git a/apps/frontend/src/stories/assets/addon-library.png b/apps/frontend/src/stories/assets/images/addon-library.png
similarity index 100%
rename from apps/frontend/src/stories/assets/addon-library.png
rename to apps/frontend/src/stories/assets/images/addon-library.png
diff --git a/apps/frontend/src/stories/assets/assets.png b/apps/frontend/src/stories/assets/images/assets.png
similarity index 100%
rename from apps/frontend/src/stories/assets/assets.png
rename to apps/frontend/src/stories/assets/images/assets.png
diff --git a/apps/frontend/src/stories/assets/avif-test-image.avif b/apps/frontend/src/stories/assets/images/avif-test-image.avif
similarity index 100%
rename from apps/frontend/src/stories/assets/avif-test-image.avif
rename to apps/frontend/src/stories/assets/images/avif-test-image.avif
diff --git a/apps/frontend/src/stories/assets/context.png b/apps/frontend/src/stories/assets/images/context.png
similarity index 100%
rename from apps/frontend/src/stories/assets/context.png
rename to apps/frontend/src/stories/assets/images/context.png
diff --git a/apps/frontend/src/stories/assets/discord.svg b/apps/frontend/src/stories/assets/images/discord.svg
similarity index 100%
rename from apps/frontend/src/stories/assets/discord.svg
rename to apps/frontend/src/stories/assets/images/discord.svg
diff --git a/apps/frontend/src/stories/assets/docs.png b/apps/frontend/src/stories/assets/images/docs.png
similarity index 100%
rename from apps/frontend/src/stories/assets/docs.png
rename to apps/frontend/src/stories/assets/images/docs.png
diff --git a/apps/frontend/src/stories/assets/figma-plugin.png b/apps/frontend/src/stories/assets/images/figma-plugin.png
similarity index 100%
rename from apps/frontend/src/stories/assets/figma-plugin.png
rename to apps/frontend/src/stories/assets/images/figma-plugin.png
diff --git a/apps/frontend/src/stories/assets/github.svg b/apps/frontend/src/stories/assets/images/github.svg
similarity index 100%
rename from apps/frontend/src/stories/assets/github.svg
rename to apps/frontend/src/stories/assets/images/github.svg
diff --git a/apps/frontend/src/stories/assets/share.png b/apps/frontend/src/stories/assets/images/share.png
similarity index 100%
rename from apps/frontend/src/stories/assets/share.png
rename to apps/frontend/src/stories/assets/images/share.png
diff --git a/apps/frontend/src/stories/assets/styling.png b/apps/frontend/src/stories/assets/images/styling.png
similarity index 100%
rename from apps/frontend/src/stories/assets/styling.png
rename to apps/frontend/src/stories/assets/images/styling.png
diff --git a/apps/frontend/src/stories/assets/testing.png b/apps/frontend/src/stories/assets/images/testing.png
similarity index 100%
rename from apps/frontend/src/stories/assets/testing.png
rename to apps/frontend/src/stories/assets/images/testing.png
diff --git a/apps/frontend/src/stories/assets/theming.png b/apps/frontend/src/stories/assets/images/theming.png
similarity index 100%
rename from apps/frontend/src/stories/assets/theming.png
rename to apps/frontend/src/stories/assets/images/theming.png
diff --git a/apps/frontend/src/stories/assets/tutorials.svg b/apps/frontend/src/stories/assets/images/tutorials.svg
similarity index 100%
rename from apps/frontend/src/stories/assets/tutorials.svg
rename to apps/frontend/src/stories/assets/images/tutorials.svg
diff --git a/apps/frontend/src/stories/assets/youtube.svg b/apps/frontend/src/stories/assets/images/youtube.svg
similarity index 100%
rename from apps/frontend/src/stories/assets/youtube.svg
rename to apps/frontend/src/stories/assets/images/youtube.svg
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
index ae614ec..5e220f8 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.js
@@ -12,6 +12,9 @@ module.exports = {
       "fluorescent-blue": "#26EFE9",
       "waterspout": "#A8F9F6",
       "midnight-blue": "#000048",
+    },
+    fontFamily:{
+      gellix: ["Gellix", "sans-serif"],
     }
   },
   plugins: [],