diff --git a/dashboard/app.vue b/dashboard/app.vue
index 3e27854..cdb2a85 100644
--- a/dashboard/app.vue
+++ b/dashboard/app.vue
@@ -56,8 +56,8 @@ const { drawerVisible, hideDrawer, drawerClasses } = useDrawer();
     </div>
 
     <div v-if="showDialog"
-      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] bg-black/50">
-      <div :style="dialogStyle" class="bg-lyx-widget rounded-xl relative outline outline-1 outline-lyx-widget-lighter">
+      class="custom-dialog w-full h-full flex items-center justify-center lg:pl-32 lg:p-20 p-4 absolute left-0 top-0 z-[100] backdrop-blur-[2px] dark:bg-black/50">
+      <div :style="dialogStyle" class="bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget dark:bg-lyx-widget dark:outline-lyx-widget-lighter rounded-xl relative outline outline-1">
         <div v-if="dialogClosable" class="flex justify-end absolute z-[100] right-8 top-8">
           <i @click="closeDialog()" class="fas fa-close text-[1.6rem] hover:text-gray-500 cursor-pointer"></i>
         </div>
diff --git a/dashboard/components/BarCard/Base.vue b/dashboard/components/BarCard/Base.vue
index 5c875da..b248bf8 100644
--- a/dashboard/components/BarCard/Base.vue
+++ b/dashboard/components/BarCard/Base.vue
@@ -54,7 +54,7 @@ function openExternalLink(link: string) {
         <div class="flex justify-between mb-3">
             <div class="flex flex-col gap-1">
                 <div class="flex gap-4 items-center">
-                    <div class="poppins font-semibold text-[1.4rem] text-text">
+                    <div class="poppins font-semibold text-[1.4rem] text-lyx-lightmode-text dark:text-lyx-text">
                         {{ label }}
                     </div>
                     <div class="flex items-center">
@@ -63,7 +63,7 @@ function openExternalLink(link: string) {
 
                     </div>
                 </div>
-                <div class="poppins text-[1rem] text-text-sub/90">
+                <div class="poppins text-[1rem] text-lyx-ligtmode-text-darker dark:text-text-sub/90">
                     {{ desc }}
                 </div>
             </div>
@@ -81,7 +81,8 @@ function openExternalLink(link: string) {
         </div>
 
         <div class="h-full flex flex-col">
-            <div class="flex justify-between font-bold text-text-sub/80 text-[1.1rem] mb-4">
+            <div
+                class="flex justify-between font-bold lyx-text-lightmode-text-dark dark:text-text-sub/80 text-[1.1rem] mb-4">
                 <div class="flex items-center gap-2">
                     <div v-if="isDetailView" class="flex items-center justify-center">
                         <i @click="$emit('showGeneral')"
@@ -107,7 +108,7 @@ function openExternalLink(link: string) {
                         <div class="flex gap-1 items-center" @click="showDetails(element._id)"
                             :class="{ 'cursor-pointer line-active': interactive }">
 
-                            <div class="absolute rounded-sm w-full h-full bg-[#92abcf38]"
+                            <div class="absolute rounded-sm w-full h-full bg-[#6f829c38] dark:bg-[#92abcf38]"
                                 :style="'width:' + 100 / maxData * element.count + '%;'"></div>
 
                             <div class="flex px-2 py-1 relative items-center gap-4">
@@ -119,24 +120,28 @@ function openExternalLink(link: string) {
 
                                     <i v-else :class="iconProvider(element)?.[1]"></i>
                                 </div>
-                                <span class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-text/70">
+                                <span
+                                    class="text-ellipsis line-clamp-1 ui-font z-[20] text-[.95rem] text-lyx-lightmode-text-dark dark:text-text/70">
                                     {{ elementTextTransformer?.(element._id) || element._id }}
                                 </span>
                             </div>
                         </div>
                     </div>
-                    <div class="text-text font-semibold text-[.9rem] md:text-[1rem] manrope"> {{
-                        formatNumberK(element.count) }} </div>
+                    <div
+                        class="text-lyx-lightmode-text dark:text-lyx-text font-semibold text-[.9rem] md:text-[1rem] manrope">
+                        {{
+                            formatNumberK(element.count) }} </div>
                 </div>
                 <div v-if="props.data.length == 0" class="flex justify-center text-text-sub font-light text-[1.1rem]">
                     No data yet
                 </div>
             </div>
             <div v-if="!hideShowMore" class="flex justify-center mt-4 text-text-sub/90 items-end grow">
-                <div @click="$emit('showMore')"
-                    class="poppins hover:bg-black cursor-pointer w-fit px-6 py-1 rounded-lg border-[1px] border-text-sub text-[.9rem]">
+
+                <LyxUiButton type="outline" @click="$emit('showMore')">
                     Show more
-                </div>
+                </LyxUiButton>
+
             </div>
         </div>
 
diff --git a/dashboard/components/CardTitled.vue b/dashboard/components/CardTitled.vue
index adacf37..89c22f5 100644
--- a/dashboard/components/CardTitled.vue
+++ b/dashboard/components/CardTitled.vue
@@ -9,10 +9,10 @@ const props = defineProps<{ title: string, sub?: string }>();
         <div class="flex flex-col gap-4 h-full">
             <div class="flex items-center">
                 <div class="flex flex-col grow">
-                    <div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-text">
+                    <div class="poppins font-semibold text-[1rem] md:text-[1.3rem] text-lyx-lightmode-text-dark dark:text-text">
                         {{ props.title }}
                     </div>
-                    <div v-if="props.sub" class="poppins text-[.7rem] md:text-[1rem] text-text-sub">
+                    <div v-if="props.sub" class="poppins text-[.7rem] md:text-[1rem] text-lyx-lightmode-text-darker dark:text-text-sub">
                         {{ props.sub }}
                     </div>
                 </div>
diff --git a/dashboard/components/CustomTab.vue b/dashboard/components/CustomTab.vue
index 93a5590..5c9ca1a 100644
--- a/dashboard/components/CustomTab.vue
+++ b/dashboard/components/CustomTab.vue
@@ -11,9 +11,9 @@ const activeTabIndex = ref<number>(0);
     <div>
         <div class="flex">
             <div v-for="(tab, index) of items" @click="activeTabIndex = index"
-                class="px-6 pb-3 poppins font-medium text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
+                class="px-6 pb-3 poppins font-medium text-lyx-lightmode-text dark:text-lyx-text-darker border-b-[1px] border-lyx-text-darker" :class="{
                     '!border-[#88A7FF] !text-[#88A7FF]': activeTabIndex === index,
-                    'hover:border-lyx-text-dark hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
+                    'hover:border-lyx-lightmode-text-dark hover:text-lyx-lightmode-text-dark/60 dark:hover:border-lyx-text-dark dark:hover:text-lyx-text-dark cursor-pointer': activeTabIndex !== index
                 }">
                 {{ tab.label }}
             </div>
diff --git a/dashboard/components/FirstInteraction.vue b/dashboard/components/FirstInteraction.vue
index e224c9f..5bab86a 100644
--- a/dashboard/components/FirstInteraction.vue
+++ b/dashboard/components/FirstInteraction.vue
@@ -67,7 +67,7 @@ function reloadPage() {
         <div class="flex items-center justify-center">
 
             <div class="mr-4 animate-pulse w-[1rem] h-[1rem] bg-accent rounded-full"> </div>
-            <div class="text-text/90 poppins text-[1.1rem] font-medium">
+            <div class="text-lyx-lightmode-text dark:text-text/90 poppins text-[1.1rem] font-medium">
                 Waiting for your first visit
             </div>
             <LyxUiButton class="ml-6" type="secondary" @click="reloadPage()">
diff --git a/dashboard/components/LyxUi/Button.vue b/dashboard/components/LyxUi/Button.vue
index 7b9eb91..f2b3c95 100644
--- a/dashboard/components/LyxUi/Button.vue
+++ b/dashboard/components/LyxUi/Button.vue
@@ -8,14 +8,18 @@ const props = defineProps<{ type: ButtonType, link?: string, target?: string, di
 
 <template>
     <NuxtLink tag="div" :to="disabled ? '' : link" :target="target"
-        class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-lyx-lightmode-text dark:text-lyx-text" :class="{
-            'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
-            'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
+        class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-lyx-lightmode-text dark:text-lyx-text"
+        :class="{
+
+            'bg-[#85a3ff] hover:bg-[#9db5fc] outline-lyx-lightmode-widget-light dark:bg-lyx-primary-dark dark:outline-lyx-primary dark:hover:bg-lyx-primary-hover': type === 'primary',
+
+            'bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget dark:bg-lyx-widget-lighter hover:bg-lyx-lightmode-widget dark:outline-lyx-widget-lighter dark:hover:bg-lyx-widget-light': type === 'secondary',
 
             'bg-lyx-transparent outline-lyx-lightmode-widget hover:bg-lyx-lightmode-widget-light dark:outline-lyx-widget-lighter dark:hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
-          
-            'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
-            '!bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
+
+            'bg-[#fcd1cb] hover:bg-[#f8c5be] dark:bg-lyx-danger-dark outline-lyx-danger dark:hover:bg-lyx-danger': type === 'danger',
+
+            'text-lyx-text !bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
         }">
         <slot></slot>
     </NuxtLink>
diff --git a/dashboard/components/LyxUi/Card.vue b/dashboard/components/LyxUi/Card.vue
index 9e59af5..0a4bf3b 100644
--- a/dashboard/components/LyxUi/Card.vue
+++ b/dashboard/components/LyxUi/Card.vue
@@ -4,7 +4,7 @@
 </script>
 
 <template>
-    <div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
+    <div class="w-fit h-fit rounded-md bg-lyx-lightmode-background outline-lyx-lightmode-widget dark:bg-lyx-widget dark:outline-lyx-background-lighter p-4 outline outline-[1px] ">
         <slot></slot>
     </div>
 </template>
\ No newline at end of file
diff --git a/dashboard/components/LyxUi/Input.vue b/dashboard/components/LyxUi/Input.vue
index 54655b8..b31b209 100644
--- a/dashboard/components/LyxUi/Input.vue
+++ b/dashboard/components/LyxUi/Input.vue
@@ -19,6 +19,6 @@ const handleChange = (event: Event) => {
 
 <template>
     <input
-        class="bg-lyx-widget-light text-lyx-text-dark poppins rounded-md outline outline-[1px] outline-lyx-widget-lighter"
+        class="bg-lyx-lightmode-widget-light outline-lyx-lightmode-widget text-lyx-lightmode-text dark:bg-lyx-widget-light dark:text-lyx-text-dark poppins rounded-md outline outline-[1px] dark:outline-lyx-widget-lighter"
         :type="props.type ?? 'text'" :placeholder="props.placeholder" :value="props.modelValue" @input="handleChange">
 </template>
\ No newline at end of file
diff --git a/dashboard/components/SelectButton.vue b/dashboard/components/SelectButton.vue
index 5a2bab5..1d2bcd0 100644
--- a/dashboard/components/SelectButton.vue
+++ b/dashboard/components/SelectButton.vue
@@ -16,12 +16,12 @@ const emits = defineEmits<{
 
 <template>
 
-    <div class="flex gap-2 border-[1px] border-lyx-widget-lighter p-1 md:p-2 rounded-xl bg-lyx-widget">
+    <div class="flex gap-2 border-[1px] p-1 md:p-2 rounded-xl bg-lyx-lightmode-widget-light border-lyx-lightmode-widget dark:bg-lyx-widget dark:border-lyx-widget-lighter">
         <div @click="opt.disabled ? ()=>{}: $emit('changeIndex', index)" v-for="(opt, index) of options"
-            class="hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
+            class="hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget-lighter/60 select-btn-animated cursor-pointer rounded-lg poppins font-regular px-2 md:px-3 py-1 text-[.8rem] md:text-[1rem]"
             :class="{
-                'bg-lyx-widget-lighter hover:!bg-lyx-widget-lighter': currentIndex == index && !opt.disabled,
-                'hover:!bg-lyx-widget !cursor-not-allowed text-lyx-widget-lighter': opt.disabled
+                'bg-lyx-lightmode-widget hover:!bg-lyx-lightmode-widget dark:bg-lyx-widget-lighter dark:hover:!bg-lyx-widget-lighter': currentIndex == index && !opt.disabled,
+                'hover:!bg-lyx-lightmode-widget-light text-lyx-lightmode-widget dark:hover:!bg-lyx-widget !cursor-not-allowed dark:!text-lyx-widget-lighter': opt.disabled
             }">
             {{ opt.label }}
         </div>
diff --git a/dashboard/components/dashboard/ActionableChart.vue b/dashboard/components/dashboard/ActionableChart.vue
index 1a4e489..9af026a 100644
--- a/dashboard/components/dashboard/ActionableChart.vue
+++ b/dashboard/components/dashboard/ActionableChart.vue
@@ -333,8 +333,8 @@ const legendClasses = ref<string[]>([
         <div class="flex gap-6 w-full justify-between lg:flex-row flex-col">
             <LyxUiButton type="secondary" :to="isLiveDemo ? '#' : '/analyst'" :disabled="isLiveDemo">
                 <div class="flex items-center gap-2 px-10">
-                    <i class="far fa-sparkles text-yellow-400"></i>
-                    <div class="poppins text-lyx-text"> Ask AI </div>
+                    <i class="far fa-sparkles text-yellow-600 dark:text-yellow-400"></i>
+                    <div class="poppins text-lyx-lightmode-text dark:text-lyx-text"> Ask AI </div>
                 </div>
             </LyxUiButton>
             <div class="flex gap-6">
@@ -352,7 +352,7 @@ const legendClasses = ref<string[]>([
 
 
         <div id='external-tooltip' ref="externalTooltipElement" class="z-[400]">
-            <LyxUiCard>
+            <LyxUiCard class="text-lyx-lightmode-text dark:text-lyx-text">
                 <div class="flex gap-2 items-center">
                     <div> Date: </div>
                     <div v-if="currentTooltipData"> {{ currentTooltipData.date }}</div>
diff --git a/dashboard/components/dashboard/CountCard.vue b/dashboard/components/dashboard/CountCard.vue
index 9dec9d6..6278925 100644
--- a/dashboard/components/dashboard/CountCard.vue
+++ b/dashboard/components/dashboard/CountCard.vue
@@ -29,12 +29,12 @@ const { showDrawer } = useDrawer();
             </div>
             <div class="flex flex-col grow">
                 <div class="flex items-center gap-2">
-                    <div class="brockmann text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
+                    <div class="brockmann text-lyx-lightmode-text-dark dark:text-text-dirty text-[1.2rem] 2xl:text-[1.4rem]">
                         {{ value }}
                     </div>
-                    <div class="poppins text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
+                    <div class="poppins text-lyx-lightmode-darker dark:text-text-sub text-[.65rem] 2xl:text-[.8rem]"> {{ avg }} </div>
                 </div>
-                <div class="poppins text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
+                <div class="poppins text-lyx-lightmode-darker dark:text-text-sub text-[.9rem] 2xl:text-[1rem]"> {{ text }} </div>
             </div>
 
             <div class="flex flex-col items-center gap-1">
diff --git a/dashboard/components/dashboard/DialogBarCard.vue b/dashboard/components/dashboard/DialogBarCard.vue
index ead6a9d..48abfa8 100644
--- a/dashboard/components/dashboard/DialogBarCard.vue
+++ b/dashboard/components/dashboard/DialogBarCard.vue
@@ -13,8 +13,8 @@ const columns = [
 
 <template>
 
-    <div class="w-full h-full bg-bg rounded-xl p-8">
-        <div class="full h-full overflow-y-auto">
+    <div class="w-full h-full bg-lyx-lightmode-background dark:bg-lyx-background-light rounded-xl p-8">
+        <div class="full h-full overflow-y-auto text-lyx-lightmode-text dark:text-lyx-text">
             <UTable :columns="columns" :rows="dialogBarData" :loading="isDataLoading" v-if="dialogBarData">
                 <template #count-data="{ row }">
                     <div class="font-bold"> {{ formatNumberK(row.count) }} </div>
diff --git a/dashboard/components/dialog/CreateSnapshot.vue b/dashboard/components/dialog/CreateSnapshot.vue
index d66fda5..f6be51d 100644
--- a/dashboard/components/dialog/CreateSnapshot.vue
+++ b/dashboard/components/dialog/CreateSnapshot.vue
@@ -61,7 +61,7 @@ async function confirmSnapshot() {
 <template>
     <div class="w-full h-full flex flex-col">
 
-        <div class="poppins text-center">
+        <div class="poppins text-center text-lyx-lightmode-text dark:text-lyx-text">
             Create a snapshot
         </div>
 
diff --git a/dashboard/components/dialog/Feedback.vue b/dashboard/components/dialog/Feedback.vue
index 9b107dd..673b9be 100644
--- a/dashboard/components/dialog/Feedback.vue
+++ b/dashboard/components/dialog/Feedback.vue
@@ -35,7 +35,7 @@ async function sendFeedback() {
         overlay: {
             background: 'bg-lyx-background/85'
         },
-        background: 'bg-lyx-widget',
+        background: 'dark:bg-lyx-widget bg-lyx-lightmode-widget-light',
         ring: 'border-solid border-[1px] border-[#262626]'
     }">
         <div class="h-full flex flex-col gap-2 p-4">
@@ -43,7 +43,7 @@ async function sendFeedback() {
             <div class="flex flex-col gap-3">
                 <div> Share everything with us. </div>
                 <textarea v-model="text" placeholder="Leave your feedback"
-                    class="p-2 w-full h-[8rem] resize-none rounded-md outline outline-[2px] outline-[#3a3f47]"></textarea>
+                    class="p-2 w-full h-[8rem] dark:bg-lyx-widget bg-lyx-lightmode-widget-light resize-none rounded-md outline outline-[2px] outline-[#3a3f47]"></textarea>
                 <div class="flex justify-between items-center">
                     <div>Need help ? Check the docs <a href="https://docs.litlyx.com" target="_blank"
                             class="text-blue-500">here</a> </div>
diff --git a/dashboard/components/events/EventsMetadataAnalyzer.vue b/dashboard/components/events/EventsMetadataAnalyzer.vue
index da5620c..011447b 100644
--- a/dashboard/components/events/EventsMetadataAnalyzer.vue
+++ b/dashboard/components/events/EventsMetadataAnalyzer.vue
@@ -81,11 +81,11 @@ const canSearch = computed(() => {
                 <div class="flex-[2]">
                     <div class="flex flex-col gap-2">
                         <USelectMenu :uiMenu="{
-                            select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                            base: '!bg-lyx-widget',
+                            select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                            base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
                             option: {
-                                base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                                active: '!bg-lyx-widget-lighter'
+                                base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                                active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                             }
                         }" searchable searchable-placeholder="Search an event..." class="w-full"
                             placeholder="Select an event" :options="eventNames.data.value || []"
@@ -93,11 +93,11 @@ const canSearch = computed(() => {
                         </USelectMenu>
 
                         <USelectMenu :uiMenu="{
-                            select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                            base: '!bg-lyx-widget',
+                            select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                            base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
                             option: {
-                                base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                                active: '!bg-lyx-widget-lighter'
+                                base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                                active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                             }
                         }" searchable searchable-placeholder="Search a field..." class="w-full"
                             placeholder="Select a field" :options="metadataFields" v-model="selectedMetadataField">
diff --git a/dashboard/components/events/EventsUserFlow.vue b/dashboard/components/events/EventsUserFlow.vue
index c5c48ec..5797544 100644
--- a/dashboard/components/events/EventsUserFlow.vue
+++ b/dashboard/components/events/EventsUserFlow.vue
@@ -46,12 +46,12 @@ async function analyzeEvent() {
 
             <div class="py-2 flex items-center gap-3">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
-                    option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
-                    }
+                    select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                        base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
+                        option: {
+                            base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                            active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
+                        }
                 }" searchable searchable-placeholder="Search an event..." class="w-full" placeholder="Select an event"
                     :options="eventNames.data.value || []" v-model="selectedEventName">
                 </USelectMenu>
diff --git a/dashboard/components/home/BgGrid.vue b/dashboard/components/home/BgGrid.vue
index 2e72a75..4c54161 100644
--- a/dashboard/components/home/BgGrid.vue
+++ b/dashboard/components/home/BgGrid.vue
@@ -22,86 +22,27 @@ const widthHeight = computed(() => {
     return 9 + props.size * props.spacing;
 });
 
+
+
+const colorMode = useColorMode();
+
+
 </script>
 
 
 <template>
     <div class="w-fit h-fit">
 
+
         <svg xmlns="http://www.w3.org/2000/svg" :width="widthHeight" :height="widthHeight" :style="`opacity: ${props.opacity};`"
             fill="none">
 
             <template v-for="(p, x) of sizeArr">
                 <template v-for="(p, y) of sizeArr">
-                    <circle :cx="9 + (spacing * x)" :cy="9 + (spacing * y)" r="1" fill="#fff"
+                    <circle :cx="9 + (spacing * x)" :cy="9 + (spacing * y)" r="1" :fill="colorMode.value === 'light' ? '#000' : '#FFF'"
                         :fill-opacity="calculateOpacity(x, y)" />
                 </template>
             </template>
-
-            <!-- <circle cx="27" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="9" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="27" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="45" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="63" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="81" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="99" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="117" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="9" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="27" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="45" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="63" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="81" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="99" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="117" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            <circle cx="135" cy="135" r="1" fill="#fff" fill-opacity=".9" />
-            -->
         </svg>
 
     </div>
diff --git a/dashboard/components/settings/Account.vue b/dashboard/components/settings/Account.vue
index 05c1bef..7f4cbf8 100644
--- a/dashboard/components/settings/Account.vue
+++ b/dashboard/components/settings/Account.vue
@@ -79,10 +79,10 @@ async function changePassword() {
         </template>
         <template #delete>
             <div
-                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
+                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-lyx-lightmode-widget-light dark:bg-[#1e1412]">
                 <div class="poppins font-semibold"> Deleting this account will also remove its projects </div>
                 <div @click="deleteAccount()"
-                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
+                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-lyx-lightmode-widget-light dark:bg-[#291415]">
                     Delete account
                 </div>
             </div>
diff --git a/dashboard/components/settings/Data.vue b/dashboard/components/settings/Data.vue
index 46d8250..702fd00 100644
--- a/dashboard/components/settings/Data.vue
+++ b/dashboard/components/settings/Data.vue
@@ -106,12 +106,12 @@ const sessionsLabel = computed(() => {
 
                 <!-- <div class="text-[.9rem] text-lyx-text-darker"> Select a domain </div> -->
                 <USelectMenu placeholder="Select a domain" :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
-                    option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
-                    }
+                     select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                        base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
+                        option: {
+                            base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                            active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
+                        }
                 }" :options="domains.data.value ?? []" v-model="selectedDomain"></USelectMenu>
 
                 <div v-if="selectedDomain" class="flex flex-col gap-2 mt-4">
@@ -140,15 +140,17 @@ const sessionsLabel = computed(() => {
             </div>
         </template>
         <template #delete_data>
+
             <div
-                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-[#1e1412]">
+                class="outline rounded-lg w-full px-8 py-4 flex flex-col gap-4 outline-[1px] outline-[#541c15] bg-lyx-lightmode-widget-light dark:bg-[#1e1412]">
                 <div class="poppins font-semibold"> This operation will reset this project to it's initial state (0
-                    visits 0 events 0 sessions)</div>
+                    visits 0 events 0 sessions) </div>
                 <div @click="openDeleteAllDomainDataDialog()"
-                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-[#291415]">
+                    class="text-[#e95b61] poppins font-semibold cursor-pointer hover:text-black hover:bg-red-700 outline rounded-lg w-fit px-8 py-2 outline-[1px] outline-[#532b26] bg-lyx-lightmode-widget-light dark:bg-[#291415]">
                     Delete all data
                 </div>
             </div>
+
         </template>
     </SettingsTemplate>
 </template>
diff --git a/dashboard/components/settings/Template.vue b/dashboard/components/settings/Template.vue
index 923a8b6..c696cf2 100644
--- a/dashboard/components/settings/Template.vue
+++ b/dashboard/components/settings/Template.vue
@@ -20,10 +20,10 @@ const props = defineProps<SettingsTemplateProp>();
         <div v-for="(entry, index) of props.entries" class="flex flex-col">
             <div class="flex xl:flex-row flex-col gap-4 xl:gap-0">
                 <div class="xl:flex-[2]">
-                    <div class="poppins font-medium text-lyx-text">
+                    <div class="poppins font-medium text-lyx-lightmode-text dark:text-lyx-text">
                         {{ entry.title }}
                     </div>
-                    <div class="poppins font-regular text-lyx-text-dark whitespace-pre-wrap">
+                    <div class="poppins font-regular text-lyx-lightmode-text-dark dark:text-lyx-text-dark whitespace-pre-wrap">
                         {{ entry.text }}
                     </div>
                 </div>
@@ -31,7 +31,7 @@ const props = defineProps<SettingsTemplateProp>();
                     <slot :name="entry.id"></slot>
                 </div>
             </div>
-            <div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-widget-lighter w-full my-10"></div>
+            <div v-if="index < props.entries.length - 1" class="h-[2px] bg-lyx-lightmode-widget dark:bg-lyx-widget-lighter w-full my-10"></div>
         </div>
     </div>
 </template>
diff --git a/dashboard/components/settings/billing.vue b/dashboard/components/settings/billing.vue
index b3334b6..5bd7f80 100644
--- a/dashboard/components/settings/billing.vue
+++ b/dashboard/components/settings/billing.vue
@@ -68,7 +68,7 @@ function getPremiumPrice(type: number) {
 }
 
 const entries: SettingsTemplateEntry[] = [
-    { id: 'plan', title: 'Current plan', text: 'Manage current plat for this project' },
+    { id: 'plan', title: 'Current plan', text: 'Manage current plan for this project' },
     { id: 'usage', title: 'Usage', text: 'Show usage of current project' },
     { id: 'info', title: 'Billing address', text: 'This will be reflected in every upcoming invoice,\npast invoices are not affected' },
     { id: 'invoices', title: 'Invoices', text: 'Manage invoices of current project' },
@@ -127,25 +127,25 @@ const { showDrawer } = useDrawer();
             <template #info>
                 <div v-if="!isGuest">
                     <div class="flex flex-col gap-4">
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 1"
+                        <LyxUiInput class="px-2 py-2 dark:!bg-[#161616]" placeholder="Address line 1"
                             v-model="currentBillingInfo.line1">
                         </LyxUiInput>
-                        <LyxUiInput class="px-2 py-2 !bg-[#161616]" placeholder="Address line 2"
+                        <LyxUiInput class="px-2 py-2 dark:!bg-[#161616]" placeholder="Address line 2"
                             v-model="currentBillingInfo.line2">
                         </LyxUiInput>
                         <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Country"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="Country"
                                 v-model="currentBillingInfo.country">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="Postal code"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="Postal code"
                                 v-model="currentBillingInfo.postal_code">
                             </LyxUiInput>
                         </div>
                         <div class="flex gap-4 w-full">
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="City"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="City"
                                 v-model="currentBillingInfo.city">
                             </LyxUiInput>
-                            <LyxUiInput class="px-2 py-2 w-full !bg-[#161616]" placeholder="State"
+                            <LyxUiInput class="px-2 py-2 w-full dark:!bg-[#161616]" placeholder="State"
                                 v-model="currentBillingInfo.state">
                             </LyxUiInput>
                         </div>
@@ -175,7 +175,7 @@ const { showDrawer } = useDrawer();
                             <div class="flex items-center gap-1">
                                 <div class="poppins font-semibold text-[2rem]"> €
                                     {{ getPremiumPrice(planData.premium_type) }} </div>
-                                <div class="poppins text-text-sub mt-2"> per month </div>
+                                <div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub mt-2"> per month </div>
                             </div>
                         </div>
                         <div class="flex flex-col">
@@ -194,7 +194,7 @@ const { showDrawer } = useDrawer();
                     <div class="my-4 w-full bg-gray-400/30 h-[1px]">
                     </div>
                     <div class="flex justify-between px-8 flex-col lg:flex-row gap-2 lg:gap-0 items-center">
-                        <div class="flex gap-2 text-text-sub text-[.9rem]">
+                        <div class="flex gap-2 text-lyx-lightmode-text-dark dark:text-text-sub text-[.9rem]">
                             <div class="poppins"> Expire date:</div>
                             <div> {{ prettyExpireDate }}</div>
                         </div>
@@ -212,7 +212,7 @@ const { showDrawer } = useDrawer();
                                 <div class="poppins font-semibold text-[1.1rem]">
                                     Usage
                                 </div>
-                                <div class="poppins text-text-sub text-[.9rem]">
+                                <div class="poppins text-lyx-lightmode-text-dark dark:text-text-sub text-[.9rem]">
                                     Check the usage limits of your project.
                                 </div>
                             </div>
@@ -240,7 +240,7 @@ const { showDrawer } = useDrawer();
 
                     <div class="flex flex-col gap-2">
 
-                        <div class="flex justify-between items-center bg-[#161616] p-4 rounded-lg"
+                        <div class="flex justify-between items-center outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none bg-lyx-lightmode-widget-light dark:bg-[#161616] p-4 rounded-lg"
                             v-for="invoice of invoices">
 
                             <div> <i class="fal fa-file-invoice"></i> </div>
diff --git a/dashboard/layouts/dashboard.vue b/dashboard/layouts/dashboard.vue
index 7559018..07b405a 100644
--- a/dashboard/layouts/dashboard.vue
+++ b/dashboard/layouts/dashboard.vue
@@ -96,7 +96,7 @@ const { isOpen, close, open } = useMenu();
 
                 <div v-if="showDialog" class="barrier w-full h-full z-[34] absolute bg-black/50 backdrop-blur-[2px]">
                     <i
-                        class="z-[40] absolute right-12 top-8 fas fa-times text-text-sub text-[1.8rem] lg:text-[3rem]"></i>
+                        class="z-[40] absolute right-12 top-8 fas fa-times text-lyx-lightmode-text-dark dark:text-text-sub text-[1.8rem] lg:text-[3rem]"></i>
                 </div>
 
                 <div @click="closeDialog()" class="w-full h-full z-[35] absolute top-0 left-0 px-4 lg:px-60 py-20"
diff --git a/dashboard/pages/analyst.vue b/dashboard/pages/analyst.vue
index b67f1b1..75ea3b8 100644
--- a/dashboard/pages/analyst.vue
+++ b/dashboard/pages/analyst.vue
@@ -268,7 +268,9 @@ async function clearAllChats() {
                     </div>
                     <div class="flex flex-col xl:grid xl:grid-cols-2 gap-4 mt-6">
                         <div v-for="prompt of defaultPrompts" @click="currentText = prompt"
-                            class="bg-lyx-widget-light hover:bg-lyx-widget-lighter cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
+                            class="
+                            bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none
+                            cursor-pointer p-4 rounded-lg poppins text-center whitespace-pre-wrap flex items-center justify-center text-[.9rem]">
                             {{ prompt }}
                         </div>
                     </div>
@@ -280,7 +282,7 @@ async function clearAllChats() {
                     <div class="flex w-full flex-col" v-for="(message, messageIndex) of currentChatMessages">
 
                         <div v-if="message.role === 'user'" class="flex justify-end w-full poppins text-[1.1rem]">
-                            <div class="bg-lyx-widget-light px-5 py-3 rounded-lg">
+                            <div class="bg-lyx-lightmode-widget dark:bg-lyx-widget-light px-5 py-3 rounded-lg">
                                 {{ message.content }}
                             </div>
                         </div>
@@ -290,7 +292,7 @@ async function clearAllChats() {
                             <div class="flex items-center justify-center shrink-0">
                                 <img class="h-[3.5rem] w-auto" :src="'analyst.png'">
                             </div>
-                            <div class="max-w-[70%] text-text/90 ai-message">
+                            <div class="max-w-[70%] text-lyx-lightmode-text dark:text-text/90 ai-message">
 
                                 <vue-markdown v-if="message.content" :source="message.content" :options="{
                                     html: true,
@@ -364,9 +366,9 @@ async function clearAllChats() {
 
                 <div class="flex gap-2 items-center md:absolute fixed bottom-8 left-0 w-full px-10 xl:px-28">
                     <input @keydown="onKeyDown" v-model="currentText"
-                        class="bg-lyx-widget-light w-full focus:outline-none px-4 py-2 rounded-lg" type="text">
+                        class="bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light w-full dark:focus:outline-none px-4 py-2 rounded-lg outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none" type="text">
                     <div @click="sendMessage()"
-                        class="bg-lyx-widget-light hhover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
+                        class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light dark:hover:bg-lyx-widget-light cursor-pointer px-4 py-2 rounded-full">
                         <i class="far fa-arrow-up"></i>
                     </div>
                     <div @click="menuOpen = !menuOpen"
@@ -381,7 +383,8 @@ async function clearAllChats() {
             <div :class="{
                 'absolute top-0 left-0 w-full': menuOpen,
                 'hidden xl:flex': !menuOpen
-            }" class="flex-[2] bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
+            }"
+                class="flex-[2] bg-lyx-lightmode-background border-l-[1px] dark:bg-lyx-background-light p-6 flex flex-col gap-4 h-full overflow-hidden">
 
                 <div class="gap-2 flex flex-col">
                     <div class="xl:hidden absolute right-6 top-2 text-[1.5rem]">
@@ -396,7 +399,8 @@ async function clearAllChats() {
                     <div class="flex items-center gap-2">
                         <div class="bg-accent w-5 h-5 rounded-full animate-pulse">
                         </div>
-                        <div class="manrope font-semibold text-text-dirty"> {{ chatsRemaining }} remaining requests
+                        <div class="manrope font-semibold text-lyx-lightmode-text dark:text-text-dirty"> {{
+                            chatsRemaining }} remaining requests
                         </div>
                     </div>
                     <LyxUiButton type="primary" class="text-[.9rem] text-center " @click="showDrawer('PRICING')">
@@ -414,7 +418,7 @@ async function clearAllChats() {
 
                 <div class="px-2">
                     <div @click="openChat()"
-                        class="bg-lyx-widget-light cursor-pointer hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center">
+                        class="bg-lyx-lightmode-widget-light hover:bg-lyx-lightmode-widget dark:bg-lyx-widget-light cursor-pointer dark:hover:bg-lyx-widget rounded-lg px-4 py-3 poppins flex gap-4 items-center outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none">
                         <div> <i class="fas fa-plus"></i> </div>
                         <div> New chat </div>
                     </div>
@@ -424,7 +428,7 @@ async function clearAllChats() {
                 <div class="overflow-y-auto">
                     <div class="flex flex-col gap-2 px-2">
                         <div :class="{ '!bg-accent/60': chat._id.toString() === currentChatId }"
-                            class="flex text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-widget-light hover:bg-lyx-widget"
+                            class="flex text-lyx-lightmode-text-dark dark:text-lyx-text-dark text-[.9rem] font-light rounded-lg items-center gap-4 w-full px-4 bg-lyx-lightmode-widget-light dark:bg-lyx-widget-light hover:bg-lyx-lightmode-widget dark:hover:bg-lyx-widget outline-[1px] outline outline-lyx-lightmode-widget dark:outline-none"
                             v-for="chat of viewChatsList">
                             <i @click="deleteChat(chat._id.toString())"
                                 class="far fa-trash hover:text-gray-300 cursor-pointer"></i>
diff --git a/dashboard/pages/dashboard/events.vue b/dashboard/pages/dashboard/events.vue
index 4d988fd..5777ad2 100644
--- a/dashboard/pages/dashboard/events.vue
+++ b/dashboard/pages/dashboard/events.vue
@@ -73,7 +73,7 @@ const showWarning = computed(() => {
 const { showDrawer } = useDrawer();
 
 function goToUpgrade() {
-   showDrawer('PRICING');
+    showDrawer('PRICING');
 }
 </script>
 
@@ -86,7 +86,7 @@ function goToUpgrade() {
     <div class="w-full h-dvh flex flex-col">
 
         <div v-if="creatingCsv"
-            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
+            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
             <div class="poppins text-[2rem]">
                 Creating csv...
             </div>
@@ -101,11 +101,11 @@ function goToUpgrade() {
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
+                    select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                    base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
                     option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
+                        base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                     }
                 }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
@@ -125,14 +125,14 @@ function goToUpgrade() {
 
 
         <UTable v-if="tableData" class="utable px-8" :ui="{
-            wrapper: 'overflow-auto w-full h-full',
-            thead: 'sticky top-0 bg-menu',
+             wrapper: 'overflow-auto w-full h-full',
+            thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
             td: {
-                color: 'text-[#ffffffb3]',
-                base: 'border-r border-l border-gray-300/20'
+                color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
+                base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
             },
-            th: { color: 'text-text-sub' },
-            tbody: 'divide-y divide-gray-300/20',
+            th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
+            tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
             divide: '',
         }" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">
 
diff --git a/dashboard/pages/dashboard/visits.vue b/dashboard/pages/dashboard/visits.vue
index da7a570..1a3307b 100644
--- a/dashboard/pages/dashboard/visits.vue
+++ b/dashboard/pages/dashboard/visits.vue
@@ -91,7 +91,7 @@ function goToUpgrade() {
     <div class="w-full h-dvh flex flex-col">
 
         <div v-if="creatingCsv"
-            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-black/60 backdrop-blur-[4px]">
+            class="fixed z-[100] flex items-center justify-center left-0 top-0 w-full h-full bg-lyx-lightmode-background-light dark:bg-black/60 backdrop-blur-[4px]">
             <div class="poppins text-[2rem]">
                 Creating csv...
             </div>
@@ -106,11 +106,11 @@ function goToUpgrade() {
             </div>
             <div class="w-[15rem] flex flex-col gap-0">
                 <USelectMenu :uiMenu="{
-                    select: '!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter !ring-lyx-widget-lighter',
-                    base: '!bg-lyx-widget',
+                    select: 'bg-lyx-lightmode-widget-light !ring-lyx-lightmode-widget dark:!bg-lyx-widget-light !shadow-none focus:!ring-lyx-widget-lighter dark:!ring-lyx-widget-lighter',
+                    base: '!bg-lyx-lightmode-widget dark:!bg-lyx-widget',
                     option: {
-                        base: 'hover:!bg-lyx-widget-lighter cursor-pointer',
-                        active: '!bg-lyx-widget-lighter'
+                        base: 'hover:!bg-lyx-lightmode-widget-light dark:hover:!bg-lyx-widget-lighter cursor-pointer',
+                        active: '!bg-lyx-lightmode-widget-light dark:!bg-lyx-widget-lighter'
                     }
                 }" v-model="selectedTimeFrom" :options="options"></USelectMenu>
             </div>
@@ -131,13 +131,13 @@ function goToUpgrade() {
 
         <UTable v-if="tableData" class="utable px-8" :ui="{
             wrapper: 'overflow-auto w-full h-full',
-            thead: 'sticky top-0 bg-menu',
+            thead: 'sticky top-0 bg-lyx-lightmode-background-light dark:bg-menu',
             td: {
-                color: 'text-[#ffffffb3]',
-                base: 'border-r border-l border-gray-300/20'
+                color: 'text-lyx-lightmode-text dark:text-[#ffffffb3]',
+                base: 'border-r border-l border-lyx-lightmode-widget dark:border-gray-300/20'
             },
-            th: { color: 'text-text-sub' },
-            tbody: 'divide-y divide-gray-300/20',
+            th: { color: 'text-lyx-lightmode-text dark:text-text-sub' },
+            tbody: 'divide-y divide-lyx-lightmode-widget dark:divide-gray-300/20',
             divide: '',
         }" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">
 
diff --git a/dashboard/pages/project_creation.vue b/dashboard/pages/project_creation.vue
index 70a28ba..b29c38c 100644
--- a/dashboard/pages/project_creation.vue
+++ b/dashboard/pages/project_creation.vue
@@ -56,6 +56,7 @@ async function createProject() {
 
 }
 
+
 </script>
 
 
@@ -69,7 +70,7 @@ async function createProject() {
 
         <div class="flex flex-col items-center justify-center pt-[12rem] gap-12 relative z-[10]">
 
-            <div class="text-[3rem] font-semibold text-center">
+            <div class="text-[3rem] font-semibold text-center text-lyx-lightmode-text dark:text-lyx-text">
                 Create your {{ isFirstProject ? 'first' : '' }} project
             </div>
 
@@ -78,15 +79,20 @@ async function createProject() {
             </div>
 
             <div class="w-[20rem] flex flex-col gap-2">
-                <div class="text-lg text-text-sub font-semibold">
+                <div class="text-lg text-lyx-lightmode-text-dark dark:text-text-sub font-semibold">
                     {{ isFirstProject ? 'Choose a name' : 'Project name' }}
                 </div>
-                <CInput placeholder="ProjectName" :readonly="creating" v-model="projectName"></CInput>
+                <!-- <CInput placeholder="ProjectName" :readonly="creating" v-model="projectName"></CInput> -->
+                <LyxUiInput class="py-2 px-2" placeholder="Insert" :readonly="creating" v-model="projectName">
+                </LyxUiInput>
             </div>
 
             <div>
-                <CButton :loading="creating" @click="createProject()" :disabled="projectName.length < 2"
-                    class="rounded-lg w-[10rem] text-md font-semibold" label="Create"></CButton>
+
+                <LyxUiButton type="primary" @click="createProject()" :disabled="projectName.length < 2">
+                    Create
+                </LyxUiButton>
+
             </div>
 
         </div>
diff --git a/dashboard/pages/security.vue b/dashboard/pages/security.vue
index 485d652..7edf346 100644
--- a/dashboard/pages/security.vue
+++ b/dashboard/pages/security.vue
@@ -33,7 +33,7 @@ const columns = [
 
     <div class="home w-full h-full px-10 pt-6 overflow-y-auto">
 
-        <div class="flex gap-2 items-center text-text/90 justify-end">
+        <div class="flex gap-2 items-center text-lyx-lightmode-text dark:text-text/90 justify-end">
             <div class="animate-pulse w-[1rem] h-[1rem] bg-green-400 rounded-full"> </div>
             <div class="poppins font-regular text-[1rem]"> AI Anomaly Detector </div>
             <div class="flex items-center">
@@ -47,7 +47,7 @@ const columns = [
 
 
                 <template #scan-data="{ row }">
-                    <div class="text-lyx-text-dark">
+                    <div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
                         {{ new Date(row.data.created_at).toLocaleString() }}
                     </div>
                 </template>
@@ -59,7 +59,7 @@ const columns = [
                 </template>
 
                 <template #data-data="{ row }">
-                    <div class="text-lyx-text-dark">
+                    <div class="text-lyx-lightmode-text dark:text-lyx-text-dark">
                         <div v-if="row.type === 'domain'">
                             {{ row.data.domain }}
                         </div>