diff --git a/packages/dashboard/src/main.ts b/packages/dashboard/src/main.ts
index 9bb1ad24..8a04c8a2 100644
--- a/packages/dashboard/src/main.ts
+++ b/packages/dashboard/src/main.ts
@@ -8,6 +8,8 @@ import { createVuetify } from "vuetify";
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
+import './scss/index.scss'
+
 const app = createApp(App);
 
 app.use(createPinia());
diff --git a/packages/dashboard/src/scss/_variables.scss b/packages/dashboard/src/scss/_variables.scss
new file mode 100644
index 00000000..f15480b5
--- /dev/null
+++ b/packages/dashboard/src/scss/_variables.scss
@@ -0,0 +1,54 @@
+/*
+  TODO: Add docs on when to use placeholder vs when to use SASS variable
+
+  Placeholder
+    - When we want to keep customization to our self between templates use it
+
+  Variables
+    - When we want to allow customization from both user and our side
+    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
+*/
+
+// @forward "@layouts/styles/variables" with (
+//   // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
+//   $layout-vertical-nav-z-index: 1004,
+//   $layout-overlay-z-index: 1003,
+// );
+// @use "@layouts/styles/variables" as *;
+
+$css-vars: (
+  /*
+    - Skins
+      - CSS var
+        - Theme
+  */
+  "default": (
+    "--v-theme-background": (
+      "light": (244 ,245, 250),
+      "dark": (40 ,36, 61),
+    ),
+    "--v-theme-surface": (
+      "light": (255, 255, 255),
+      "dark": (49, 45, 75),
+    ),
+  ),
+  "bordered": (
+    "--v-theme-background": (
+      "light": (255 ,255, 255),
+      "dark": (49, 45, 75),
+    ),
+    "--v-theme-surface": (
+      "light": (255, 255, 255),
+      "dark": (49, 45, 75),
+    ),
+  ),
+) !default;
+$theme-colors-name: (
+  "primary",
+  "secondary",
+  "error",
+  "info",
+  "success",
+  "warning"
+) !default;
+
diff --git a/packages/dashboard/src/scss/index.scss b/packages/dashboard/src/scss/index.scss
index 065bad14..f6890421 100644
--- a/packages/dashboard/src/scss/index.scss
+++ b/packages/dashboard/src/scss/index.scss
@@ -1,4 +1,7 @@
-@use 'vuetify' with (
-  $utilities: true,
-  $color-pack: true,
-);
+// main.scss
+@use '_variables';
+
+@use 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false,
+);
\ No newline at end of file
diff --git a/packages/dashboard/src/views/DashboardLayout.vue b/packages/dashboard/src/views/DashboardLayout.vue
index 9cb198ef..51abd7c8 100644
--- a/packages/dashboard/src/views/DashboardLayout.vue
+++ b/packages/dashboard/src/views/DashboardLayout.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const theme = 'dark'
+const theme = 'light' 
 </script>
 
 <template>
diff --git a/packages/dashboard/vite.config.ts b/packages/dashboard/vite.config.ts
index 4d60b3a5..e21098c6 100644
--- a/packages/dashboard/vite.config.ts
+++ b/packages/dashboard/vite.config.ts
@@ -11,4 +11,17 @@ export default defineConfig({
       "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
+  css: {
+    preprocessorOptions: {
+      sass: {
+        additionalData: [
+          // Make the variables defined in these files available to all components, without requiring an explicit
+          // @import of the files themselves
+          '@import "./src/scss/index"',
+          '@import "vuetify/src/styles/settings/_variables"',
+          '', // end with newline
+        ].join('\n'),
+      },
+    },
+  },
 });