diff --git a/dashboard/app.vue b/dashboard/app.vue
index 826da4b..fe09205 100644
--- a/dashboard/app.vue
+++ b/dashboard/app.vue
@@ -13,7 +13,7 @@ const { showDialog, closeDialog, dialogComponent, dialogParams, dialogStyle, dia
 
 <template>
 
-  <div class="w-dvw h-dvh bg-[#151517] relative">
+  <div class="w-dvw h-dvh bg-lyx-background-light relative">
 
     <div class="fixed top-4 right-8 z-[999] flex flex-col gap-2" v-if="alerts.length > 0">
       <div v-for="alert of alerts"
diff --git a/dashboard/components/CVerticalNavigation.vue b/dashboard/components/CVerticalNavigation.vue
index c4bdce6..65e8892 100644
--- a/dashboard/components/CVerticalNavigation.vue
+++ b/dashboard/components/CVerticalNavigation.vue
@@ -50,10 +50,11 @@ function openSnapshotDialog() {
 </script>
 
 <template>
-    <div class="CVerticalNavigation h-full w-[20rem] bg-[#111111] flex shadow-[1px_0_10px_#000000] rounded-r-lg" :class="{
-        'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
-        'hidden lg:flex': !isOpen
-    }">
+    <div class="CVerticalNavigation h-full w-[20rem] bg-lyx-background flex shadow-[1px_0_10px_#000000] rounded-r-lg"
+        :class="{
+            'absolute top-0 w-full md:w-[20rem] z-[45] open': isOpen,
+            'hidden lg:flex': !isOpen
+        }">
         <div class="p-4 gap-6 flex flex-col w-full">
 
             <div class="flex items-center gap-2 ml-2">
@@ -117,9 +118,10 @@ function openSnapshotDialog() {
                     <div v-for="entry of section.entries">
 
                         <div v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))"
-                            class="bg-[#111111] text-gray-300 hover:bg-[#1b1b1b] py-2 px-4 rounded-lg" :class="{
+                            class="bg-lyx-background text-gray-300 py-2 px-4 rounded-lg" :class="{
                                 'text-gray-700 pointer-events-none': entry.disabled,
-                                'bg-[#1b1b1b]': route.path == (entry.to || '#')
+                                'bg-lyx-background-lighter': route.path == (entry.to || '#'),
+                                'hover:bg-lyx-background-light': route.path != (entry.to || '#')
                             }">
 
                             <NuxtLink @click="close() && entry.action?.()" :target="entry.external ? '_blank' : ''"
diff --git a/dashboard/components/CardTitled.vue b/dashboard/components/CardTitled.vue
index 477b9cc..3f8ae35 100644
--- a/dashboard/components/CardTitled.vue
+++ b/dashboard/components/CardTitled.vue
@@ -5,7 +5,7 @@ const props = defineProps<{ title: string, sub?: string }>();
 </script>
 
 <template>
-    <Card>
+    <LyxUiCard>
         <div class="flex flex-col gap-4">
             <div class="flex items-center">
                 <div class="flex flex-col grow">
@@ -23,5 +23,5 @@ const props = defineProps<{ title: string, sub?: string }>();
                 <slot></slot>
             </div>
         </div>
-    </Card>
+    </LyxUiCard>
 </template>
\ No newline at end of file
diff --git a/dashboard/components/dashboard/CountCard.vue b/dashboard/components/dashboard/CountCard.vue
index 32e24b1..9d3908c 100644
--- a/dashboard/components/dashboard/CountCard.vue
+++ b/dashboard/components/dashboard/CountCard.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 <template>
 
-    <Card class="flex flex-col overflow-hidden relative max-h-[12rem] aspect-[2/1] w-full">
+    <LyxUiCard class="flex !p-0 flex-col overflow-hidden relative max-h-[12rem] aspect-[2/1] w-full">
         <div v-if="ready" class="flex p-4 items-start">
             <div class="flex items-center mt-2 mr-4">
                 <i :style="`color: ${props.color}`" :class="icon" class="text-[1.6rem] 2xl:text-[2rem]"></i>
@@ -49,7 +49,7 @@ const props = defineProps<{
         <div v-if="!ready" class="flex justify-center items-center w-full h-full">
             <i class="fas fa-spinner text-[2rem] text-accent animate-[spin_1s_linear_infinite] duration-500"></i>
         </div>
-    </Card>
+    </LyxUiCard>
 
 
 </template>
\ No newline at end of file
diff --git a/dashboard/components/dashboard/TopSection.vue b/dashboard/components/dashboard/TopSection.vue
index e44ba0f..986f2df 100644
--- a/dashboard/components/dashboard/TopSection.vue
+++ b/dashboard/components/dashboard/TopSection.vue
@@ -22,23 +22,23 @@ function copyProjectId() {
 
         <div class="flex gap-2 items-center text-text/90 justify-center md:justify-start">
             <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
-            <div> {{ onlineUsers }} Online users</div>
+            <div class="poppins font-medium text-[1.2rem]"> {{ onlineUsers }} Online users</div>
         </div>
 
         <div class="grow"></div>
 
         <div class="flex md:gap-2 items-center md:justify-start flex-col md:flex-row">
-            <div>Project:</div>
-            <div class="text-text/90"> {{ activeProject?.name || 'Loading...' }} </div>
+            <div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project:</div>
+            <div class="text-lyx-text poppins font-medium text-[1.2rem]"> {{ activeProject?.name || 'Loading...' }} </div>
         </div>
         <div class="flex flex-col md:flex-row md:gap-2 items-center md:justify-start">
-            <div>Project id:</div>
+            <div class="poppins font-medium text-lyx-text-darker text-[1.2rem]">Project id:</div>
             <div class="flex gap-2">
-                <div class="text-text/90 text-[.9rem] lg:text-2xl">
+                <div class="text-lyx-text poppins font-medium text-[1.2rem]">
                     {{ activeProject?._id || 'Loading...' }}
                 </div>
                 <div class="flex items-center ml-3">
-                    <i @click="copyProjectId()" class="far fa-copy hover:text-text cursor-pointer text-[1.2rem]"></i>
+                    <i @click="copyProjectId()" class="far fa-copy text-lyx-text hover:text-lyx-primary cursor-pointer text-[1.2rem]"></i>
                 </div>
             </div>
         </div>
diff --git a/dashboard/layouts/dashboard.vue b/dashboard/layouts/dashboard.vue
index 14cd79f..0d26d13 100644
--- a/dashboard/layouts/dashboard.vue
+++ b/dashboard/layouts/dashboard.vue
@@ -92,7 +92,7 @@ const { isOpen, close, open } = useMenu();
             </CVerticalNavigation>
 
 
-            <div class="overflow-hidden w-full bg-bg relative h-full">
+            <div class="overflow-hidden w-full bg-lyx-background-light relative h-full">
 
                 <div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
                     <i
diff --git a/dashboard/nuxt.config.ts b/dashboard/nuxt.config.ts
index f01f5a8..563733a 100644
--- a/dashboard/nuxt.config.ts
+++ b/dashboard/nuxt.config.ts
@@ -64,4 +64,6 @@ export default defineNuxtConfig({
   devServer: {
     host: '0.0.0.0',
   },
+  components: true,
+  extends: ['../lyx-ui']
 })