diff --git a/app/assets/css/mixins.css b/app/assets/css/mixins.css
new file mode 100644
index 0000000..7956a55
--- /dev/null
+++ b/app/assets/css/mixins.css
@@ -0,0 +1,21 @@
+/* mixin example */
+@define-mixin text-underline $color {
+    &::after{
+        content: '';
+        display: block;
+        width: 0%;
+        height: 2px;
+
+        background-color: $color;
+        opacity: 0;
+
+        transition: width .3s var(--easing-authentic-motion), opacity .3s var(--easing-authentic-motion);
+    }
+
+    @media (--has-hover){
+        &:hover::after{
+            width: 100%;
+            opacity: 1;
+        }
+    }
+} 
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ef0bfd8..d60e54e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,16 +1,15 @@
 <template>
     <section class="page-home">
         Home page here
+        <button @click="toggleMenu()" class="button">
+            Toggle menu - test mixin
+        </button>
         <wp-image
             v-for="(item, index) in items"
             :key="index"
             :image="item"
         />
 
-        <global-hamburger
-            :menu-opened="siteStore.menuOpened"
-            @toggle-menu="toggleMenu()"
-        />
 
         <div
             v-html="data?.content"
@@ -48,8 +47,26 @@ const toggleMenu = () => {
 </script>
 
 <style scoped>
+/* TODO: figure out how to import mixins globally */
+@import "~/assets/css/mixins.css";
+
 .page-home {
-    min-height: var(--unit-100vh);
+    min-height: 200vh;
+
+    color: var(--color-black);
+
+
+    .button{
+        @mixin text-underline var(--color-black);
+    }
+
+    /* margin: 0 auto; */
+    /* min-height: var(--unit-100vh); */
+
+    /* Hover states */
+    /* @media #{$has-hover} {
+         Hover styles would go here
+    } */
 
     /* Hover */
     @media (--has-hover) {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 5e06aaf..2b625cb 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,11 +41,6 @@ export default defineNuxtConfig({
     },
 
     // CSS and fonts
-    css: [
-        '~/assets/css/vars.css',
-        '~/assets/css/main.css',
-        '~/assets/css/transitions.css'
-    ],
     vue: {
         // Required for @nuxtjs/storybook
         runtimeCompiler: process.env.STORYBOOK === 'true'
@@ -60,6 +55,13 @@ export default defineNuxtConfig({
     future: { compatibilityVersion: 4 },
     compatibilityDate: '2024-09-17',
 
+    // CSS and fonts
+    css: [
+        '~/assets/css/vars.css',
+        '~/assets/css/main.css',
+        '~/assets/css/transitions.css',
+        '~/assets/css/mixins.css', 
+    ],
     // Build configuration
     nitro: {
         routeRules: {
@@ -87,8 +89,9 @@ export default defineNuxtConfig({
     postcss: {
         plugins: {
             '@csstools/postcss-global-data': {
-                files: ['./app/assets/css/media.css']
+                files: ['./app/assets/css/media.css', './app/assets/css/mixins.css']
             },
+            'postcss-mixins': {},
             'postcss-nested': {},
             'postcss-custom-media': {}
         }
diff --git a/package-lock.json b/package-lock.json
index 7530c3e..605c7d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
                 "pinia": "^2.1.7",
                 "postcss": "^8.4.47",
                 "postcss-custom-media": "^11.0.1",
+                "postcss-mixins": "^12.1.2",
                 "postcss-nested": "^6.2.0",
                 "prettier": "^3.3.3",
                 "storybook": "9.0.5",
@@ -7522,6 +7523,16 @@
                 "node": ">=6"
             }
         },
+        "node_modules/camelcase-css": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+            "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/caniuse-api": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -14494,6 +14505,26 @@
                 "postcss": "^8.4.32"
             }
         },
+        "node_modules/postcss-js": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+            "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "camelcase-css": "^2.0.1"
+            },
+            "engines": {
+                "node": "^12 || ^14 || >= 16"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4.21"
+            }
+        },
         "node_modules/postcss-merge-longhand": {
             "version": "7.0.5",
             "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.5.tgz",
@@ -14619,6 +14650,35 @@
                 "node": ">=4"
             }
         },
+        "node_modules/postcss-mixins": {
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-12.1.2.tgz",
+            "integrity": "sha512-90pSxmZVfbX9e5xCv7tI5RV1mnjdf16y89CJKbf/hD7GyOz1FCxcYMl8ZYA8Hc56dbApTKKmU9HfvgfWdCxlwg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "postcss-js": "^4.0.1",
+                "postcss-simple-vars": "^7.0.1",
+                "sugarss": "^5.0.0",
+                "tinyglobby": "^0.2.14"
+            },
+            "engines": {
+                "node": "^20.0 || ^22.0 || >=24.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.14"
+            }
+        },
         "node_modules/postcss-nested": {
             "version": "6.2.0",
             "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
@@ -14839,6 +14899,23 @@
                 "node": ">=4"
             }
         },
+        "node_modules/postcss-simple-vars": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+            "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.1"
+            }
+        },
         "node_modules/postcss-svgo": {
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.0.tgz",
@@ -16694,6 +16771,29 @@
                 "node": ">=4"
             }
         },
+        "node_modules/sugarss": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-5.0.1.tgz",
+            "integrity": "sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw==",
+            "devOptional": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.3.3"
+            }
+        },
         "node_modules/superjson": {
             "version": "2.2.2",
             "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
diff --git a/package.json b/package.json
index 03842d9..0e84813 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
         "pinia": "^2.1.7",
         "postcss": "^8.4.47",
         "postcss-custom-media": "^11.0.1",
+        "postcss-mixins": "^12.1.2",
         "postcss-nested": "^6.2.0",
         "prettier": "^3.3.3",
         "storybook": "9.0.5",