diff --git a/src/App.vue b/src/App.vue
index c1bfde6..9cd89ba 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,26 @@
 <template>
-    <div class="bg-white font-roboto" id="app">
-        <header-component></header-component>
-        <main-component></main-component>
+    <div :class="darkMode ? 'dark' : ''">
+        <div class="bg-white dark:bg-gray-900 font-roboto" id="app">
+            <header-component></header-component>
+            <main-component></main-component>
 
-        <back-to-top visibleoffset="800">
-            <app-button class="bg-gray-800 hover:bg-gray-900 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
-                <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
+            <back-to-top visibleoffset="800">
+                <app-button class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
+                    <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
+                    </svg>
+                </app-button>
+            </back-to-top>
+
+            <app-button @click="darkMode = !darkMode" class="bg-gray-800 hover:bg-gray-900 dark:hover:bg-gray-700 text-white fixed bottom-0 right-0 my-24 mx-10 p-2 rounded-md focus:outline-none" aria-label="Color Mode">
+                <svg v-if="darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
+                </svg>
+                <svg v-if="!darkMode" class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                 </svg>
             </app-button>
-        </back-to-top>
+        </div>
     </div>
 </template>
 
@@ -25,6 +36,7 @@ export default {
     data() {
         return {
             og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
+            darkMode: false,
         };
     },
 
diff --git a/src/components/Header.vue b/src/components/Header.vue
index ab71288..a8f44d1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-    <header class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-700 border-b-4 border-blue-500">
+    <header class="bg-gray-800 dark:bg-gray-900 border-b-4 border-blue-500">
         <nav>
             <div class="container mx-auto px-6 py-4">
                 <div class="flex justify-between items-center">
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 8c85502..5a93018 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -1,23 +1,23 @@
 <template>
     <div class="container mx-auto px-6 pb-12">
         <div class="py-16 text-center">
-            <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
+            <h1 class="text-xl md:text-3xl text-gray-800 dark:text-white font-medium">Discover new components. Build amazing things 🔥</h1>
             <div class="max-w-2xl mx-auto">
                 <div class="flex items-center justify-center mt-5 ">
                     <div class="mt-2 md:mt-0">
                         <span v-for="category in categories" :key="category.name">
-                            <app-button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</app-button>
+                            <app-button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200' : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'">{{ category.name }}</app-button>
                         </span> 
                     </div>
                 </div>
             </div>
 
-            <p class="mt-8 text-gray-700 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 hover:underline"> configuration</a></p>
+            <p class="mt-8 text-gray-700 dark:text-gray-300 text-center"> Heros components require simple <span class="font-semibold">- don't panic please 😎 -</span><a href="https://gist.github.com/khatabwedaa/352573904a5b2d5ff3598bcd54ce9f04" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline"> configuration</a></p>
         </div>
 
         <div class="w-full max-w-6xl mx-auto">
             <div class="mb-16" v-for="category in list" :key="category.name">
-                <h1 class="text-2xl text-gray-800 font-semibold mb-6 capitalize" v-text="category.name"></h1>
+                <h1 class="text-2xl text-gray-800 dark:text-white font-semibold mb-6 capitalize" v-text="category.name"></h1>
 
                 <div v-for="component in category.components" :key="component.name" :name="component.name">
                     <component :is="category.name + component.name"></component>
diff --git a/src/components/ui/Alerts/ErrorPop.vue b/src/components/ui/Alerts/ErrorPop.vue
index 8009797..582c614 100644
--- a/src/components/ui/Alerts/ErrorPop.vue
+++ b/src/components/ui/Alerts/ErrorPop.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
                 <div class="flex justify-center items-center w-12 bg-red-500">
                     <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
@@ -10,8 +10,8 @@
                 
                 <div class="-mx-3 py-2 px-4">
                     <div class="mx-3">
-                        <span class="text-red-500 font-semibold">Error</span>
-                        <p class="text-gray-600 text-sm">Your email is already used!</p>
+                        <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
+                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
                     </div>
                 </div>
             </div>
@@ -25,7 +25,7 @@
             return {
                 name: 'Error Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
             <div class="flex justify-center items-center w-12 bg-red-500">
                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
@@ -34,8 +34,8 @@
             
             <div class="-mx-3 py-2 px-4">
                 <div class="mx-3">
-                    <span class="text-red-500 font-semibold">Error</span>
-                    <p class="text-gray-600 text-sm">Your email is already used!</p>
+                    <span class="text-red-500 dark:text-red-400 font-semibold">Error</span>
+                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your email is already used!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Alerts/InfoPop.vue b/src/components/ui/Alerts/InfoPop.vue
index 6102c18..b0def8b 100644
--- a/src/components/ui/Alerts/InfoPop.vue
+++ b/src/components/ui/Alerts/InfoPop.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
                 <div class="flex justify-center items-center w-12 bg-blue-500">
                     <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@@ -10,8 +10,8 @@
                 
                 <div class="-mx-3 py-2 px-4">
                     <div class="mx-3">
-                        <span class="text-blue-500 font-semibold">Info</span>
-                        <p class="text-gray-600 text-sm">This channel archived by the owner!</p>
+                        <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
+                        <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
                     </div>
                 </div>
             </div>
@@ -25,7 +25,7 @@
             return {
                 name: 'Info Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
             <div class="flex justify-center items-center w-12 bg-blue-500">
                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@@ -34,8 +34,8 @@
             
             <div class="-mx-3 py-2 px-4">
                 <div class="mx-3">
-                    <span class="text-blue-500 font-semibold">Info</span>
-                    <p class="text-gray-600 text-sm">This channel archived by the owner!</p>
+                    <span class="text-blue-500 dark:text-blue-400 font-semibold">Info</span>
+                    <p class="text-gray-600 dark:text-gray-200 text-sm">This channel archived by the owner!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Alerts/NotificationPop.vue b/src/components/ui/Alerts/NotificationPop.vue
index e50a8ef..4bc62a8 100644
--- a/src/components/ui/Alerts/NotificationPop.vue
+++ b/src/components/ui/Alerts/NotificationPop.vue
@@ -1,14 +1,14 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
-                <div class="w-2 bg-gray-800"></div>
+            <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
+                <div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
                 
                 <div class="flex items-center px-2 py-3">
                     <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
                     
                     <div class="mx-3">
-                        <p class="text-gray-600">Sara has replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
+                        <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
                     </div>
                 </div>
             </div>
@@ -22,14 +22,14 @@
             return {
                 name: 'Notification Pop',
                 code: `
-        <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
-            <div class="w-2 bg-gray-800"></div>
+        <div class="flex max-w-sm w-full bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden mx-auto">
+            <div class="w-2 bg-gray-800 dark:bg-gray-900"></div>
 
             <div class="flex items-center px-2 py-3">
                 <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
                 
                 <div class="mx-3">
-                    <p class="text-gray-600">Sara has replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
+                    <p class="text-gray-600 dark:text-gray-200">Sara has replied on the <a class="text-blue-500 dark:text-blue-300 hover:text-blue-400 hover:underline">uploaded image</a>.</p>
                 </div>
             </div>
         </div>`,
diff --git a/src/components/ui/Alerts/SuccessPop.vue b/src/components/ui/Alerts/SuccessPop.vue
index af95e9d..bba8be0 100644
--- a/src/components/ui/Alerts/SuccessPop.vue
+++ b/src/components/ui/Alerts/SuccessPop.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
                 <div class="flex justify-center items-center w-12 bg-green-500">
                     <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
@@ -10,8 +10,8 @@
                 
                 <div class="-mx-3 py-2 px-4">
                     <div class="mx-3">
-                        <span class="text-green-500 font-semibold">Success</span>
-                        <p class="text-gray-600 text-sm">Your account was registered!</p>
+                        <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
+                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
                     </div>
                 </div>
             </div>
@@ -25,7 +25,7 @@
             return {
                 name: 'Success Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
             <div class="flex justify-center items-center w-12 bg-green-500">
                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
@@ -34,8 +34,8 @@
             
             <div class="-mx-3 py-2 px-4">
                 <div class="mx-3">
-                    <span class="text-green-500 font-semibold">Success</span>
-                    <p class="text-gray-600 text-sm">Your account was registered!</p>
+                    <span class="text-green-500 dark:text-green-400 font-semibold">Success</span>
+                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your account was registered!</p>
                 </div>
             </div>
         </div>
diff --git a/src/components/ui/Alerts/WarningPop.vue b/src/components/ui/Alerts/WarningPop.vue
index d988fda..0a0211c 100644
--- a/src/components/ui/Alerts/WarningPop.vue
+++ b/src/components/ui/Alerts/WarningPop.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
                 <div class="flex justify-center items-center w-12 bg-yellow-400">
                     <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                         <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@@ -10,8 +10,8 @@
                 
                 <div class="-mx-3 py-2 px-4">
                     <div class="mx-3">
-                        <span class="text-yellow-400 font-semibold">Warning</span>
-                        <p class="text-gray-600 text-sm">Your image size is too large!</p>
+                        <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
+                        <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
                     </div>
                 </div>
             </div>
@@ -25,7 +25,7 @@
             return {
                 name: 'Warning Pop',
                 code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+        <div class="flex max-w-sm w-full mx-auto bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
             <div class="flex justify-center items-center w-12 bg-yellow-400">
                  <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                     <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
@@ -34,8 +34,8 @@
             
             <div class="-mx-3 py-2 px-4">
                 <div class="mx-3">
-                    <span class="text-yellow-400 font-semibold">Warning</span>
-                    <p class="text-gray-600 text-sm">Your image size is too large!</p>
+                    <span class="text-yellow-400 dark:text-yellow-300 font-semibold">Warning</span>
+                    <p class="text-gray-600 dark:text-gray-200 text-sm">Your image size is too large!</p>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Authentication/LoginWithSideImage.vue b/src/components/ui/Authentication/LoginWithSideImage.vue
index f77d90f..ccd3512 100644
--- a/src/components/ui/Authentication/LoginWithSideImage.vue
+++ b/src/components/ui/Authentication/LoginWithSideImage.vue
@@ -1,15 +1,15 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
-                <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
+            <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
+                <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80')"></div>
                 
                 <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
-                    <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+                    <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
 
-                    <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+                    <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
 
-                    <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                    <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
                         <div class="px-4 py-3">
                             <svg class="h-6 w-6" viewBox="0 0 40 40">
                                 <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
@@ -19,43 +19,43 @@
                             </svg>
                         </div>
 
-                        <span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
+                        <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
                     </a>
 
                     <div class="mt-4 flex items-center justify-between">
-                        <span class="border-b w-1/5 lg:w-1/4"></span>
+                        <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
 
-                        <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
+                        <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
 
-                        <span class="border-b w-1/5 lg:w-1/4"></span>
+                        <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
                     </div>
 
                     <div class="mt-4">
-                        <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                        <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
+                        <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                     </div>
 
                     <div class="mt-4">
                         <div class="flex justify-between">
-                            <label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label>
-                            <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
+                            <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
+                            <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
                         </div>
 
-                        <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
+                        <input id="loggingPassword" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
                     </div>
 
                     <div class="mt-8">
-                        <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                        <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                             Login
                         </button>
                     </div>
                     
                     <div class="mt-4 flex items-center justify-between">
-                        <span class="border-b w-1/5 md:w-1/4"></span>
+                        <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
 
-                        <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
+                        <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
                         
-                        <span class="border-b w-1/5 md:w-1/4"></span>
+                        <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
                     </div>
                 </div>
             </div>
@@ -69,15 +69,15 @@
             return {
                 name: 'Login With Side Image',
                 code: `
-        <div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
+        <div class="flex max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
             <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1602610411365-76e8c2a88e18?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=333&q=80')"></div>
             
             <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
-                <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+                <h2 class="text-2xl font-semibold text-gray-700 dark:text-white text-center">Brand</h2>
 
-                <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+                <p class="text-xl text-gray-600 dark:text-gray-200 text-center">Welcome back!</p>
 
-                <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                <a href="#" class="flex items-center justify-center mt-4 text-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg shadow-md hover:bg-gray-100 dark:hover:bg-gray-600">
                     <div class="px-4 py-3">
                         <svg class="h-6 w-6" viewBox="0 0 40 40">
                             <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
@@ -87,43 +87,43 @@
                         </svg>
                     </div>
 
-                    <span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
+                    <span class="px-4 py-3 w-5/6 text-center font-bold">Sign in with Google</span>
                 </a>
 
                 <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b w-1/5 lg:w-1/4"></span>
+                    <span class="border-b dark:border-gray-600 w-1/5 lg:w-1/4"></span>
 
-                    <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
+                    <a href="#" class="text-xs text-center text-gray-500 dark:text-gray-400 uppercase hover:underline">or login with email</a>
 
-                    <span class="border-b w-1/5 lg:w-1/4"></span>
+                    <span class="border-b dark:border-gray-400 w-1/5 lg:w-1/4"></span>
                 </div>
 
                 <div class="mt-4">
-                    <label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
-                    <input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="email">
+                    <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
+                    <input id="LoggingEmailAddress" class="bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email">
                 </div>
 
                 <div class="mt-4">
                     <div class="flex justify-between">
-                        <label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label>
-                        <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
+                        <label class="block text-gray-600 dark:text-gray-200 text-sm font-medium mb-2" for="loggingPassword">Password</label>
+                        <a href="#" class="text-xs text-gray-500 dark:text-gray-300 hover:underline">Forget Password?</a>
                     </div>
 
-                    <input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:ring" type="password">
+                    <input id="loggingPassword" class="bg-wbg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password">
                 </div>
 
                 <div class="mt-8">
-                    <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                    <button class="bg-gray-700 text-white py-2 px-4 w-full tracking-wide rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
                         Login
                     </button>
                 </div>
                 
                 <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b w-1/5 md:w-1/4"></span>
+                    <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
 
-                    <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
+                    <a href="#" class="text-xs text-gray-500 dark:text-gray-400 uppercase hover:underline">or sign up</a>
                     
-                    <span class="border-b w-1/5 md:w-1/4"></span>
+                    <span class="border-b dark:border-gray-600 w-1/5 md:w-1/4"></span>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Authentication/SimpleLogin.vue b/src/components/ui/Authentication/SimpleLogin.vue
index 41ffe14..bd551c8 100644
--- a/src/components/ui/Authentication/SimpleLogin.vue
+++ b/src/components/ui/Authentication/SimpleLogin.vue
@@ -1,25 +1,25 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
+            <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
                 <div class="py-4 px-6">
-                    <h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
+                    <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
 
-                    <h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3>
+                    <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
 
-                    <p class="mt-1 text-center text-gray-500">Login or create account</p>
+                    <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
 
                     <form>
                         <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
+                            <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                         </div>
 
                         <div class="mt-4 w-full">
-                            <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                            <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                         </div>
 
                         <div class="flex justify-between items-center mt-4">
-                            <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
+                            <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:text-gray-500">Forget Password?</a>
 
                             <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
                                 Login
@@ -28,10 +28,10 @@
                     </form>
                 </div>
 
-                <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
-                    <span class="text-gray-600 text-sm">Don't have an account? </span>
+                <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
+                    <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
                     
-                    <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+                    <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
                 </div>
             </div>
         </div>
@@ -44,25 +44,25 @@
             return {
                 name: 'Simple Login',
                 code: `
-        <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
+        <div class="bg-white dark:bg-gray-800 w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
             <div class="py-4 px-6">
-                <h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
+                <h2 class="text-center font-bold text-gray-700 dark:text-white text-3xl">Brand</h2>
 
-                <h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3>
+                <h3 class="mt-1 text-center font-medium text-gray-600 dark:text-gray-200 text-xl">Welcome Back</h3>
 
-                <p class="mt-1 text-center text-gray-500">Login or create account</p>
+                <p class="mt-1 text-center text-gray-500 dark:text-gray-400">Login or create account</p>
 
                 <form>
                     <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
+                        <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email Address" aria-label="Email Address">
                     </div>
 
                     <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
+                        <input class="w-full mt-2 py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                     </div>
 
                     <div class="flex justify-between items-center mt-4">
-                        <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
+                        <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:text-gray-500">Forget Password?</a>
 
                         <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
                             Login
@@ -71,10 +71,10 @@
                 </form>
             </div>
 
-            <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
-                <span class="text-gray-600 text-sm">Don't have an account? </span>
+            <div class="flex items-center justify-center py-4 bg-gray-100 dark:bg-gray-700 text-center">
+                <span class="text-gray-600 dark:text-gray-200 text-sm">Don't have an account? </span>
                 
-                <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+                <a href="#" class="text-blue-600 dark:text-blue-400 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
             </div>
         </div>`
             }
diff --git a/src/components/ui/Buttons/Primary.vue b/src/components/ui/Buttons/Primary.vue
index 6b9ef89..296e87f 100644
--- a/src/components/ui/Buttons/Primary.vue
+++ b/src/components/ui/Buttons/Primary.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-8 flex items-center justify-center" slot="component">
-            <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+            <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 Primary
             </button>
         </div>
@@ -14,7 +14,7 @@
             return {
                 name: 'Primary',
                 code: `
-        <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+        <button class="flex items-center py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
             Primary
         </button>`
             }
diff --git a/src/components/ui/Buttons/WithIcon.vue b/src/components/ui/Buttons/WithIcon.vue
index 5290ccd..16ba2ff 100644
--- a/src/components/ui/Buttons/WithIcon.vue
+++ b/src/components/ui/Buttons/WithIcon.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6 flex items-center justify-center" slot="component">
-            <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+            <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                 <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                 </svg>
@@ -17,7 +17,7 @@
             return {
                 name: 'With Icon',
                 code: `
-        <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+        <button class="flex items-center py-2 px-2 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
             <svg class="h-5 w-5 mx-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
             </svg>
diff --git a/src/components/ui/Buttons/WithMenu.vue b/src/components/ui/Buttons/WithMenu.vue
index 8668f2d..30cca53 100644
--- a/src/components/ui/Buttons/WithMenu.vue
+++ b/src/components/ui/Buttons/WithMenu.vue
@@ -2,21 +2,21 @@
     <view-component :name="name" :code="code">
         <div class="px-3 pt-6 pb-40 flex justify-center" slot="component">
             <div class="flex items-center">
-                <button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
+                <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
                 
-                <span class="border"></span>
+                <span class="border border-transparent"></span>
 
                 <div class="relative">
-                    <button @click="menuOpen = !menuOpen" class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                    <button @click="menuOpen = !menuOpen" class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                         <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                         </svg>
                     </button>
 
-                    <div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
-                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
+                    <div v-show="menuOpen" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
+                        <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
                     </div>
                 </div>
             </div>
@@ -31,23 +31,23 @@
                 name: 'With Menu',
                 code: `
         <div class="flex items-center">
-            <button class="py-2 px-4 capitalize tracking-wide bg-gray-800 text-white font-medium rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Download</button>
+            <button class="py-2 px-4 capitalize tracking-wide bg-blue-600 dark:bg-gray-800 text-white font-medium rounded hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">Download</button>
             
-            <span class="border"></span>
+            <span class="border border-transparent"></span>
 
             <div class="relative">
                 <!-- Menu toggle button --> 
-                <button class="relative z-10 block bg-gray-800 rounded p-2 hover:bg-gray-700 focus:outline-none focus:bg-gray-700">
+                <button class="relative z-10 block bg-blue-600 dark:bg-gray-800 rounded p-2 hover:bg-blue-500 dark:hover:bg-gray-700 focus:outline-none focus:bg-blue-500 dark:focus:bg-gray-700">
                     <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                     </svg>
                 </button>
 
                 <!-- Menu list -->
-                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md overflow-hidden shadow-xl z-20">
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">small <span class="text-gray-600">(640x426)</span></a>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">medium <span class="text-gray-600">(1920x1280)</span></a>
-                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 border-b hover:bg-gray-200">large <span class="text-gray-600">(2400x1600)</span></a>
+                <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-md overflow-hidden shadow-xl z-20">
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">small <span class="text-gray-600 dark:text-gray-400">(640x426)</span></a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 border-b dark:border-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600">medium <span class="text-gray-600 dark:text-gray-400">(1920x1280)</span></a>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">large <span class="text-gray-600 dark:text-gray-400">(2400x1600)</span></a>
                 </div>
             </div>
         </div>`,
diff --git a/src/components/ui/Cards/Article.vue b/src/components/ui/Cards/Article.vue
index b37237f..614f3d8 100644
--- a/src/components/ui/Cards/Article.vue
+++ b/src/components/ui/Cards/Article.vue
@@ -1,23 +1,23 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+            <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
                 <div class="flex justify-between items-center">
-                    <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                    <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
                     <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
                 </div>
 
                 <div class="mt-2">
-                    <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
-                    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+                    <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
+                    <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
                 </div>
                 
                 <div class="flex justify-between items-center mt-4">
-                    <a href="#" class="text-blue-600 hover:underline">Read more</a>
+                    <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
 
                     <div class="flex items-center">
                         <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
-                        <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                        <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
                     </div>
                 </div>
             </div>
@@ -31,23 +31,23 @@
             return {
                 name: 'Article',
                 code: `
-        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+        <div class="max-w-2xl mx-auto px-8 py-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
             <div class="flex justify-between items-center">
-                <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                <span class="font-light text-gray-600 dark:text-gray-400 text-sm">Mar 10, 2019</span>
                 <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
             </div>
 
             <div class="mt-2">
-                <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+                <a href="#" class="text-2xl text-gray-700 dark:text-white font-bold hover:text-gray-600 dark:hover:text-gray-200 hover:underline">Accessibility tools for designers and developers</a>
+                <p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
             </div>
             
             <div class="flex justify-between items-center mt-4">
-                <a href="#" class="text-blue-600 hover:underline">Read more</a>
+                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
 
                 <div class="flex items-center">
                     <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
-                    <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                    <a class="text-gray-700 dark:text-gray-200 font-bold cursor-pointer">Khatab wedaa</a>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/ArticleWithImage.vue b/src/components/ui/Cards/ArticleWithImage.vue
index e21ff6c..e677562 100644
--- a/src/components/ui/Cards/ArticleWithImage.vue
+++ b/src/components/ui/Cards/ArticleWithImage.vue
@@ -1,23 +1,23 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
+            <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
                 <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
 
                 <div class="p-6">
                     <div>
-                        <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
-                        <a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
-                        <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                        <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
+                        <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                        <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
                     </div>
 
                     <div class="mt-4">
                         <div class="flex items-center">
                             <div class="flex items-center">
                                 <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
-                                <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
+                                <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
                             </div>
-                            <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
+                            <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
                         </div>
                     </div>
                 </div>
@@ -32,23 +32,23 @@
             return {
                 name: 'Article With Image',
                 code: `
-        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
+        <div class="max-w-2xl mx-auto bg-white dark:bg-gray-800 overflow-hidden shadow-md rounded-lg">
             <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
 
             <div class="p-6">
                 <div>
-                    <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
-                    <a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
-                    <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                    <span class="text-blue-600 dark:text-blue-400 text-xs font-medium uppercase">Product</span>
+                    <a href="#" class="block text-gray-800 dark:text-white font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
                 </div>
 
                 <div class="mt-4">
                     <div class="flex items-center">
                         <div class="flex items-center">
                             <img class="h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
-                            <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
+                            <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 font-semibold">Jone Doe</a>
                         </div>
-                        <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
+                        <span class="mx-1 text-gray-600 dark:text-gray-300 text-xs">21 SEP 2015</span>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Cards/ArticleWithSMIcons.vue b/src/components/ui/Cards/ArticleWithSMIcons.vue
index a7af8cd..bc494e5 100644
--- a/src/components/ui/Cards/ArticleWithSMIcons.vue
+++ b/src/components/ui/Cards/ArticleWithSMIcons.vue
@@ -1,33 +1,33 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-md">
+            <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
                 <div class="flex justify-between items-center">
-                    <span class="text-sm font-light text-gray-800">Courses and MOOCs</span>
-                    <span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
+                    <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
+                    <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
                 </div>
 
                 <div>
-                    <h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
-                    <p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
+                    <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
                 </div>
 
                 <div>
-                    <div class="flex items-center mt-2 text-gray-700">
+                    <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
                         <span>Visit on:</span>
-                        <a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a>
+                        <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
                         <span>or</span>
-                        <a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                        <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
                     </div>
 
                     <div class="flex items-center justify-center mt-4">
-                        <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                        <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
                             <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                 <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                             </svg>
                         </a>
 
-                        <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                        <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
                             <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
                                 <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
@@ -47,33 +47,33 @@
             return {
                 name: 'Article With SM icons',
                 code: `
-        <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white shadow-md rounded-md">
+        <div class="max-w-sm mx-auto w-full px-4 py-3 bg-white dark:bg-gray-800 shadow-md rounded-md">
             <div class="flex justify-between items-center">
-                <span class="text-sm font-light text-gray-800">Courses and MOOCs</span>
-                <span class="bg-indigo-200 text-indigo-800 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
+                <span class="text-sm font-light text-gray-800 dark:text-gray-400">Courses and MOOCs</span>
+                <span class="bg-indigo-200 dark:bg-indigo-300 text-indigo-800 dark:text-indigo-900 px-3 py-1 rounded-full uppercase text-xs">psychology</span>
             </div>
 
             <div>
-                <h1 class="text-lg font-semibold text-gray-800 mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
-                <p class="text-gray-600 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
+                <h1 class="text-lg font-semibold text-gray-800 dark:text-white mt-2">AP® Psychology - Course 5: Health and Behavior</h1>
+                <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi similique exercitationem optio libero vitae accusamus cupiditate laborum eos.</p>
             </div>
 
             <div>
-                <div class="flex items-center mt-2 text-gray-700">
+                <div class="flex items-center mt-2 text-gray-700 dark:text-gray-200">
                     <span>Visit on:</span>
-                    <a class="text-blue-600 cursor-pointer mx-2 hover:underline">edx.org</a>
+                    <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">edx.org</a>
                     <span>or</span>
-                    <a class="text-blue-600 cursor-pointer mx-2 hover:underline">classcentral.com</a>
+                    <a class="text-blue-600 dark:text-blue-400 cursor-pointer mx-2 hover:underline">classcentral.com</a>
                 </div>
 
                 <div class="flex items-center justify-center mt-4">
-                    <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                    <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
                         <svg class="h-5 w-5 fill-current" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                             <path d='M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z'/>
                         </svg>
                     </a>
 
-                    <a class="mr-2 text-gray-800 hover:text-gray-700 cursor-pointer">
+                    <a class="mr-2 text-gray-800 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 cursor-pointer">
                         <svg class="h-5 w-5 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14.8283 12L16.2426 13.4142L19.071 10.5858C20.6331 9.02365 20.6331 6.49099 19.071 4.9289C17.5089 3.3668 14.9762 3.3668 13.4141 4.9289L10.5857 7.75732L11.9999 9.17154L14.8283 6.34311C15.6094 5.56206 16.8757 5.56206 17.6568 6.34311C18.4378 7.12416 18.4378 8.39049 17.6568 9.17154L14.8283 12Z"/>
                             <path d="M12 14.8285L13.4142 16.2427L10.5858 19.0711C9.02365 20.6332 6.49099 20.6332 4.9289 19.0711C3.3668 17.509 3.3668 14.9764 4.9289 13.4143L7.75732 10.5858L9.17154 12L6.34311 14.8285C5.56206 15.6095 5.56206 16.8758 6.34311 17.6569C7.12416 18.4379 8.39049 18.4379 9.17154 17.6569L12 14.8285Z"/>
diff --git a/src/components/ui/Cards/Product.vue b/src/components/ui/Cards/Product.vue
index cbae8a7..3191ce4 100644
--- a/src/components/ui/Cards/Product.vue
+++ b/src/components/ui/Cards/Product.vue
@@ -1,10 +1,10 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                 <div class="px-4 py-2">
-                    <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
-                    <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                    <h1 class="text-gray-800 dark:text-white  font-bold text-3xl uppercase">NIKE AIR</h1>
+                    <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
                 </div>
 
                 <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
@@ -24,10 +24,10 @@
             return {
                 name: 'Product',
                 code: `
-        <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+        <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
             <div class="px-4 py-2">
-                <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
-                <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                <h1 class="text-gray-800 dark:text-white  font-bold text-3xl uppercase">NIKE AIR</h1>
+                <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
             </div>
 
             <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
diff --git a/src/components/ui/Cards/ProductWithEvaluation.vue b/src/components/ui/Cards/ProductWithEvaluation.vue
index 5b86ed2..0b09479 100644
--- a/src/components/ui/Cards/ProductWithEvaluation.vue
+++ b/src/components/ui/Cards/ProductWithEvaluation.vue
@@ -1,24 +1,24 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                 <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
 
                 <div class="w-2/3 p-4 md:p-4">
-                    <h1 class="text-gray-800 font-bold text-2xl">Backpack</h1>
+                    <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
 
-                    <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
 
                     <div class="flex item-center mt-2">
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
-                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                             <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                         </svg>
 
@@ -32,8 +32,8 @@
                     </div>
 
                     <div class="flex item-center justify-between mt-3">
-                        <h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
-                        <button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
+                        <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
+                        <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
                     </div>
                 </div>
             </div>
@@ -48,24 +48,24 @@
             return {
                 name: 'Product With Evaluation',
                 code:`
-        <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+        <div class="flex max-w-md mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
             <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
 
             <div class="w-2/3 p-4 md:p-4">
-                <h1 class="text-gray-800 font-bold text-2xl">Backpack</h1>
-                
-                <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+                <h1 class="text-gray-800 dark:text-white font-bold text-2xl">Backpack</h1>
+
+                <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
 
                 <div class="flex item-center mt-2">
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                    <svg class="w-5 h-5 fill-current text-gray-700 dark:text-gray-300" viewBox="0 0 24 24">
                         <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
                     </svg>
 
@@ -79,8 +79,8 @@
                 </div>
 
                 <div class="flex item-center justify-between mt-3">
-                    <h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
-                    <button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
+                    <h1 class="text-gray-700 dark:text-gray-200 font-bold text-lg md:text-xl">$220</h1>
+                    <button class="px-2 py-1 bg-gray-800 dark:bg-gray-700 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:bg-gray-700 dark:focus:bg-gray-600 ">Add to Cart</button>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/SimpleProduct.vue b/src/components/ui/Cards/SimpleProduct.vue
index 99aab54..a4d075a 100644
--- a/src/components/ui/Cards/SimpleProduct.vue
+++ b/src/components/ui/Cards/SimpleProduct.vue
@@ -4,12 +4,12 @@
             <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
                 <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
 
-                <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
-                    <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
+                <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
+                    <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
                     
-                    <div class="flex items-center justify-between py-2 px-3 bg-gray-200">
-                        <span class="text-gray-800 font-bold ">$129</span>
-                        <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
+                    <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
+                        <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
+                        <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
                     </div>
                 </div>
             </div>
@@ -26,12 +26,12 @@
         <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
             <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1521903062400-b80f2cb8cb9d?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80)"></div>
 
-            <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
-                <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
+            <div class="w-56 md:w-64 bg-white dark:bg-gray-800 -mt-10 shadow-lg rounded-lg overflow-hidden">
+                <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800 dark:text-white">Nike Revolt</h3>
                 
-                <div class="flex items-center justify-between py-2 px-3 bg-gray-200">
-                    <span class="text-gray-800 font-bold ">$129</span>
-                    <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
+                <div class="flex items-center justify-between py-2 px-3 bg-gray-200 dark:bg-gray-700">
+                    <span class="text-gray-800 dark:text-gray-200 font-bold">$129</span>
+                    <button class="bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700 dark:hover:bg-gray-600 focus:bg-gray-700 dark:focus:bg-gray-600 focus:outline-none">Add to cart</button>
                 </div>
             </div>
         </div>`
diff --git a/src/components/ui/Cards/Testimonial.vue b/src/components/ui/Cards/Testimonial.vue
index fc76450..368b146 100644
--- a/src/components/ui/Cards/Testimonial.vue
+++ b/src/components/ui/Cards/Testimonial.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 pb-6 pt-16" slot="component">
-            <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
+            <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
                 <div class="flex justify-center md:justify-end -mt-16">
-                    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+                    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
                 </div>
 
-                <h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+                <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
 
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+                <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
                 
                 <div class="flex justify-end mt-4">
-                    <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+                    <a href="#" class="text-xl font-medium text-indigo-500 dark:text-indigo-300">John Doe</a>
                 </div>
             </div>
         </div>
@@ -24,17 +24,17 @@
             return {
                 name: 'Testimonial',
                 code: `
-        <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
+        <div class="max-w-md mx-auto py-4 px-8 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
             <div class="flex justify-center md:justify-end -mt-16">
-                <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+                <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500 dark:border-indigo-400" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
             </div>
 
-            <h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+            <h2 class="text-gray-800 dark:text-white text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
 
-            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
             
             <div class="flex justify-end mt-4">
-                <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+                <a href="#" class="text-xl font-medium text-indigo-500 dark:text-indigo-300">John Doe</a>
             </div>
         </div>`
             }
diff --git a/src/components/ui/Cards/User.vue b/src/components/ui/Cards/User.vue
index 38e23ef..d0a091b 100644
--- a/src/components/ui/Cards/User.vue
+++ b/src/components/ui/Cards/User.vue
@@ -1,12 +1,12 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+            <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
                 <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
                 
                 <div class="py-5 text-center">
-                    <a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
-                    <span class="text-sm text-gray-700">Software Engineer</span>
+                    <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
+                    <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
                 </div>
             </div>
         </div>
@@ -19,12 +19,12 @@
             return {
                 name: 'User',
                 code: `
-        <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+        <div class="max-w-xs bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden mx-auto">
             <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
             
             <div class="py-5 text-center">
-                <a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
-                <span class="text-sm text-gray-700">Software Engineer</span>
+                <a href="#" class="block text-2xl text-gray-800 dark:text-white font-bold">John Doe</a>
+                <span class="text-sm text-gray-700 dark:text-gray-200">Software Engineer</span>
             </div>
         </div>`
             }
diff --git a/src/components/ui/Cards/UserWithDetails.vue b/src/components/ui/Cards/UserWithDetails.vue
index 0238ed3..ce4eb79 100644
--- a/src/components/ui/Cards/UserWithDetails.vue
+++ b/src/components/ui/Cards/UserWithDetails.vue
@@ -1,7 +1,7 @@
 <template>
    <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                 <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
                 
                 <div class="flex items-center px-6 py-3 bg-gray-900">
@@ -13,11 +13,11 @@
                 </div>
 
                 <div class="py-4 px-6">
-                    <h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
+                    <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
 
-                    <p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                    <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
                    
-                    <div class="flex items-center mt-4 text-gray-700">
+                    <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
                         </svg>
@@ -25,7 +25,7 @@
                         <h1 class="px-2 text-sm">Meraki UI</h1>
                     </div>
 
-                    <div class="flex items-center mt-4 text-gray-700">
+                    <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
                         </svg>
@@ -33,7 +33,7 @@
                         <h1 class="px-2 text-sm">California</h1>
                     </div>
 
-                    <div class="flex items-center mt-4 text-gray-700">
+                    <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
                         </svg>
@@ -52,7 +52,7 @@ export default {
         return {
             name: 'User With Details',
             code: `
-        <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+        <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
             <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
             
             <div class="flex items-center px-6 py-3 bg-gray-900">
@@ -64,11 +64,11 @@ export default {
             </div>
 
             <div class="py-4 px-6">
-                <h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
+                <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1>
 
-                <p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
                 
-                <div class="flex items-center mt-4 text-gray-700">
+                <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                     <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
                     </svg>
@@ -76,7 +76,7 @@ export default {
                     <h1 class="px-2 text-sm">Meraki UI</h1>
                 </div>
 
-                <div class="flex items-center mt-4 text-gray-700">
+                <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                     <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
                     </svg>
@@ -84,7 +84,7 @@ export default {
                     <h1 class="px-2 text-sm">California</h1>
                 </div>
 
-                <div class="flex items-center mt-4 text-gray-700">
+                <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200">
                     <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
                     </svg>
diff --git a/src/components/ui/Dropdowns/Notification.vue b/src/components/ui/Dropdowns/Notification.vue
index 486912e..8b71428 100644
--- a/src/components/ui/Dropdowns/Notification.vue
+++ b/src/components/ui/Dropdowns/Notification.vue
@@ -3,41 +3,41 @@
         <div class="px-3 pt-6 pb-96 flex justify-end md:justify-center" slot="component">
             <div class="relative">
                 <!-- Dropdown toggle button -->
-                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
-                    <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
+                    <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                     </svg>
                 </button>
 
                 <!-- Dropdown menu -->
-                <div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20">
+                <div v-show="dropdownOpen" class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20">
                     <div class="py-2">
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                             <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                            <p class="text-gray-600 text-sm mx-2">
+                            <p class="text-gray-600 dark:text-white text-sm mx-2">
                                 <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                             <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                            <p class="text-gray-600 text-sm mx-2">
+                            <p class="text-gray-600 dark:text-white text-sm mx-2">
                                 <span class="font-bold" href="#">Slick Net</span> start following you . 45m
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                             <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                            <p class="text-gray-600 text-sm mx-2">
+                            <p class="text-gray-600 dark:text-white text-sm mx-2">
                                 <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
                             </p>
                         </a>
-                        <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
+                        <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
                             <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
-                            <p class="text-gray-600 text-sm mx-2">
+                            <p class="text-gray-600 dark:text-white text-sm mx-2">
                                 <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
                             </p>
                         </a>
                     </div>
-                    <a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
+                    <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
                 </div>
             </div>
         </div>
@@ -52,41 +52,41 @@
                 code: `
         <div class="relative">
             <!-- Dropdown toggle button -->
-            <button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
-                <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
+                <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                 </svg>
             </button>
 
             <!-- Dropdown menu -->
-            <div class="absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
+            <div class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg overflow-hidden z-20" style="width:20rem;">
                 <div class="py-2">
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                         <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                        <p class="text-gray-600 text-sm mx-2">
+                        <p class="text-gray-600 dark:text-white text-sm mx-2">
                             <span class="font-bold" href="#">Sara Salah</span> replied on the <span class="font-bold text-blue-500" href="#">Upload Image</span> artical . 2m
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                         <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="avatar">
-                        <p class="text-gray-600 text-sm mx-2">
+                        <p class="text-gray-600 dark:text-white text-sm mx-2">
                             <span class="font-bold" href="#">Slick Net</span> start following you . 45m
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 -mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 -mx-2">
                         <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1450297350677-623de575f31c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-                        <p class="text-gray-600 text-sm mx-2">
+                        <p class="text-gray-600 dark:text-white text-sm mx-2">
                             <span class="font-bold" href="#">Jane Doe</span> Like Your reply on <span class="font-bold text-blue-500" href="#">Test with TDD</span> artical . 1h
                         </p>
                     </a>
-                    <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 -mx-2">
+                    <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700 -mx-2">
                         <img class="h-8 w-8 rounded-full object-cover mx-1" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=398&q=80" alt="avatar">
-                        <p class="text-gray-600 text-sm mx-2">
+                        <p class="text-gray-600 dark:text-white text-sm mx-2">
                             <span class="font-bold" href="#">Abigail Bennett</span> start following you . 3h
                         </p>
                     </a>
                 </div>
-                <a href="#" class="block bg-gray-800 text-white text-center font-bold py-2">See all notifications</a>
+                <a href="#" class="block bg-gray-800 dark:bg-gray-700 text-white text-center hover:underline font-bold py-2">See all notifications</a>
             </div>
         </div>`,
                 dropdownOpen: true
diff --git a/src/components/ui/Dropdowns/Simple.vue b/src/components/ui/Dropdowns/Simple.vue
index bc1cfe0..c15eedf 100644
--- a/src/components/ui/Dropdowns/Simple.vue
+++ b/src/components/ui/Dropdowns/Simple.vue
@@ -3,27 +3,27 @@
         <div class="px-3 pt-6 pb-56 flex justify-end sm:justify-center" slot="component">
             <div class="relative">
                 <!-- Dropdown toggle button -->
-                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
-                    <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <button @click="dropdownOpen = !dropdownOpen" class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
+                    <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                     </svg>
                 </button>
 
                 <!-- Dropdown menu -->
-                <div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                <div v-show="dropdownOpen" class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         your profile
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Your projects
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Help
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Settings
                     </a>
-                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                    <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                         Sign Out
                     </a>
                 </div>
@@ -40,27 +40,27 @@
                 code: `
         <div class="relative">
             <!-- Dropdown toggle button -->
-            <button class="relative z-10 block rounded-md bg-white p-2 focus:outline-none">
-                <svg class="h-5 w-5 text-gray-800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <button class="relative z-10 block rounded-md bg-white dark:bg-gray-800 p-2 focus:outline-none">
+                <svg class="h-5 w-5 text-gray-800 dark:text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                 </svg>
             </button>
 
             <!-- Dropdown menu -->
-            <div class="absolute right-0 mt-2 py-2 w-48 bg-white rounded-md shadow-xl z-20">
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+            <div class="absolute right-0 mt-2 py-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-xl z-20">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     your profile
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Your projects
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Help
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Settings
                 </a>
-                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 hover:bg-blue-500 hover:text-white">
+                <a href="#" class="block px-4 py-2 text-sm capitalize text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white dark:hover:text-white">
                     Sign Out
                 </a>
             </div>
diff --git a/src/components/ui/Footers/Simple.vue b/src/components/ui/Footers/Simple.vue
index 4522ffb..bee662f 100644
--- a/src/components/ui/Footers/Simple.vue
+++ b/src/components/ui/Footers/Simple.vue
@@ -1,25 +1,25 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
-                <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
+                <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                 
-                <p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
+                <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
 
                 <div class="flex -mx-2">
-                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                    <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                             <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                         </svg>
                     </a>
 
-                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                    <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                             <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                         </svg>
                     </a>
 
-                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                    <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                             <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                         </svg>
@@ -36,25 +36,25 @@
             return {
                 name: 'Simple',
                 code: `
-        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
-            <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-white dark:bg-gray-800 sm:flex-row">
+            <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
             
-            <p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
+            <p class="py-2 text-gray-800 dark:text-white sm:py-0">All rights reserved</p>
 
             <div class="flex -mx-2">
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Linkden">
                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                         <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                     </svg>
                 </a>
 
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Facebook">
                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                         <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                     </svg>
                 </a>
 
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                <a href="#" class="mx-2 text-gray-700 dark:text-white hover:text-gray-600 dark:hover:text-gray-300" aria-label="Twitter">
                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                         <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                     </svg>
diff --git a/src/components/ui/Footers/WithDetails.vue b/src/components/ui/Footers/WithDetails.vue
index 41f9043..178e0fc 100644
--- a/src/components/ui/Footers/WithDetails.vue
+++ b/src/components/ui/Footers/WithDetails.vue
@@ -1,31 +1,31 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="bg-gray-800">
+            <footer class="bg-white dark:bg-gray-800">
                 <div class="container mx-auto px-6 py-4">
                     <div class="lg:flex">
                         <div class="w-full lg:w-2/5 -mx-6">
                             <div class="px-6">
                                 <div>
-                                    <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                                    <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                                 </div>
                                 
-                                <p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                                <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
                                 
                                 <div class="flex mt-4 -mx-2">
-                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                                    <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
                                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                                         </svg>
                                     </a>
 
-                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                                    <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
                                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                                         </svg>
                                     </a>
 
-                                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                                    <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
                                         <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                             <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                                         </svg>
@@ -37,39 +37,39 @@
                         <div class="mt-6 lg:mt-0 lg:flex-1">
                             <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
                                 <div>
-                                    <h3 class="text-gray-100 uppercase">About</h3>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Company</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">community</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Careers</a>
+                                    <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-100 uppercase">Blog</h3>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Tec</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Music</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Videos</a>
+                                    <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-100 uppercase">Products</h3>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a>
-                                    <a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a>
+                                    <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
+                                    <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
                                 </div>
 
                                 <div>
-                                    <h3 class="text-gray-100 uppercase">Contact</h3>
-                                    <span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span>
-                                    <span class="block mt-2 text-sm text-gray-400">example@email.com</span>
+                                    <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
+                                    <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
+                                    <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
                                 </div>
                             </div>
                         </div>
                     </div>
 
-                    <hr class="h-px my-6 bg-gray-700 border-none">
+                    <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
 
                     <div>
-                        <p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p>
+                        <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
                     </div>
                 </div>
             </footer>
@@ -83,31 +83,31 @@
             return {
                 name: 'With Details',
                 code: `
-        <footer class="bg-gray-800">
+        <footer class="bg-white dark:bg-gray-800">
             <div class="container mx-auto px-6 py-4">
                 <div class="lg:flex">
                     <div class="w-full lg:w-2/5 -mx-6">
                         <div class="px-6">
                             <div>
-                                <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                                <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                             </div>
                             
-                            <p class="mt-2 text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
+                            <p class="mt-2 text-gray-500 dark:text-gray-400 max-w-md">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
                             
                             <div class="flex mt-4 -mx-2">
-                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                                <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">
                                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
                                     </svg>
                                 </a>
 
-                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                                <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Facebook">
                                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
                                     </svg>
                                 </a>
 
-                                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                                <a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Twitter">
                                     <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
                                         <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
                                     </svg>
@@ -119,39 +119,39 @@
                     <div class="mt-6 lg:mt-0 lg:flex-1">
                         <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4">
                             <div>
-                                <h3 class="text-gray-100 uppercase">About</h3>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Company</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">community</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Careers</a>
+                                <h3 class="text-gray-700 dark:text-white uppercase">About</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Company</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">community</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Careers</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-100 uppercase">Blog</h3>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Tec</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Music</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Videos</a>
+                                <h3 class="text-gray-700 dark:text-white uppercase">Blog</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Tec</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Music</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Videos</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-100 uppercase">Products</h3>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Mega cloud</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Aperion UI</a>
-                                <a href="#" class="block mt-2 text-sm text-gray-400">Meraki UI</a>
+                                <h3 class="text-gray-700 dark:text-white uppercase">Products</h3>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Mega cloud</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Aperion UI</a>
+                                <a href="#" class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">Meraki UI</a>
                             </div>
 
                             <div>
-                                <h3 class="text-gray-100 uppercase">Contact</h3>
-                                <span class="block mt-2 text-sm text-gray-400">+1 526 654 8965</span>
-                                <span class="block mt-2 text-sm text-gray-400">example@email.com</span>
+                                <h3 class="text-gray-700 dark:text-white uppercase">Contact</h3>
+                                <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">+1 526 654 8965</span>
+                                <span class="block mt-2 text-sm text-gray-600 dark:text-gray-400 hover:underline">example@email.com</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <hr class="h-px my-6 bg-gray-700 border-none">
+                <hr class="h-px my-6 bg-gray-300 dark:bg-gray-700 border-none">
 
                 <div>
-                    <p class="text-center text-gray-100">© Brand 2020 - All rights reserved</p>
+                    <p class="text-center text-gray-800 dark:text-white">© Brand 2020 - All rights reserved</p>
                 </div>
             </div>
         </footer>`
diff --git a/src/components/ui/Footers/WithSubscribeForm.vue b/src/components/ui/Footers/WithSubscribeForm.vue
index 11c094c..2768755 100644
--- a/src/components/ui/Footers/WithSubscribeForm.vue
+++ b/src/components/ui/Footers/WithSubscribeForm.vue
@@ -1,34 +1,34 @@
 <template>
      <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
+            <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
                 <div class="container py-6">
                     <h1 class="text-center text-lg font-bold lg:text-2xl">
                         Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
                     </h1>
 
                     <div class="flex justify-center mt-6">
-                        <div class="bg-white rounded-md">
+                        <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
                             <div class="flex flex-wrap justify-between md:flex-row">
                                 <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
-                                <button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                                <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
                             </div>
                         </div>
                     </div>
 
-                    <hr class="h-px mt-6 bg-gray-700 border-none">
+                    <hr class="h-px mt-6 bg-gray-200 dark:bg-gray-700 border-none">
 
                     <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                         <div>
-                            <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                            <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                         </div>
 
                         <div class="flex mt-4 md:m-0">
                             <div class="-mx-4">
-                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
-                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
-                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
-                                <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
+                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                                <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
                             </div>
                         </div>
                     </div>
@@ -44,34 +44,34 @@
             return {
                 name: 'With Subscribe Form',
                 code: `
-        <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
+        <footer class="flex justify-center px-4 text-gray-800 dark:text-white bg-white dark:bg-gray-800">
             <div class="container py-6">
                 <h1 class="text-center text-lg font-bold lg:text-2xl">
                     Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
                 </h1>
 
                 <div class="flex justify-center mt-6">
-                    <div class="bg-white rounded-md">
+                    <div class="bg-white border focus-within:ring focus-within:border-blue-500 rounded-md">
                         <div class="flex flex-wrap justify-between md:flex-row">
                             <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-transparent" placeholder="Enter your email" aria-label="Enter your email">
-                            <button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                            <button class="w-full m-1 p-2 text-sm text-white bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
                         </div>
                     </div>
                 </div>
 
-                <hr class="h-px mt-6 bg-gray-700 border-none">
+                <hr class="h-px mt-6 border-gray-300 dark:bg-gray-700 border-none">
 
                 <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
                     <div>
-                        <a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
+                        <a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
                     </div>
 
                     <div class="flex mt-4 md:m-0">
                         <div class="-mx-4">
-                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
-                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
-                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
-                            <a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
+                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">About</a>
+                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Blog</a>
+                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">News</a>
+                            <a href="#" class="px-4 text-sm text-gray-800 dark:text-gray-200 font-medium hover:text-gray-700 dark:hover:text-gray-400 hover:underline">Contact</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Forms/Newsletter.vue b/src/components/ui/Forms/Newsletter.vue
index 724454e..85a226a 100644
--- a/src/components/ui/Forms/Newsletter.vue
+++ b/src/components/ui/Forms/Newsletter.vue
@@ -1,21 +1,21 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
-                <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
+            <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+                <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                     <div class="py-6 px-6 md:px-8 md:py-0">
-                        <h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
+                        <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
                         
-                        <p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                        <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
                     </div>
                 </div>
 
-                <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+                <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
                     <form>
-                        <div class="flex flex-col rounded-lg border overflow-hidden lg:flex-row">
-                            <input class="py-3 px-6 bg-white text-gray-700 outline-none placeholder-gray-500 focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                        <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
+                            <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
                             
-                            <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                            <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
                         </div>
                     </form>
                 </div>
@@ -30,21 +30,21 @@
             return {
                 name: 'Newsletter',
                 code: `
-        <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
-            <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
+        <div class="flex flex-col max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+            <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700 md:dark:bg-gray-800">
                 <div class="py-6 px-6 md:px-8 md:py-0">
-                    <h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
+                    <h2 class="text-gray-700 dark:text-white text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 dark:text-blue-400 md:text-blue-300">Project</span> Updates</h2>
                     
-                    <p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                    <p class="mt-2 text-gray-600 dark:text-gray-400 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
                 </div>
             </div>
 
-            <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+            <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2">
                 <form>
-                    <div class="flex flex-col rounded-lg border overflow-hidden lg:flex-row">
-                        <input class="py-3 px-6 bg-white text-gray-700 outline-none placeholder-gray-500 focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                    <div class="flex flex-col rounded-lg border dark:border-gray-600 overflow-hidden lg:flex-row">
+                        <input class="py-3 px-6 bg-white dark:bg-gray-800 text-gray-700 outline-none placeholder-gray-500 dark:placeholder-gray-400 focus:placeholder-transparent dark:focus:placeholder-transparent" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
                         
-                        <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                        <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-medium tracking-wider uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
                     </div>
                 </form>
             </div>
diff --git a/src/components/ui/Forms/Simple.vue b/src/components/ui/Forms/Simple.vue
index 47ca897..9b27405 100644
--- a/src/components/ui/Forms/Simple.vue
+++ b/src/components/ui/Forms/Simple.vue
@@ -1,34 +1,34 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="px-3 py-6" slot="component">
-            <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
-                <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
+            <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+                <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
                 
                 <form>
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                         <div>
-                            <label class="text-gray-700" for="username">Username</label>
-                            <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                            <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
+                            <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
-                            <label class="text-gray-700" for="emailAddress">Email Address</label>
-                            <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                            <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
+                            <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
-                            <label class="text-gray-700" for="password">Password</label>
-                            <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                            <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
+                            <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
 
                         <div>
-                            <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                            <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                            <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
+                            <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                         </div>
                     </div>
 
                     <div class="flex justify-end mt-6">
-                        <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Update Account Information</button>
+                        <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                     </div>
                 </form>
             </div>
@@ -42,34 +42,34 @@
             return {
                 name: 'Simple',
                 code: `
-        <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
-            <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
+        <div class="max-w-4xl p-6 mx-auto bg-white dark:bg-gray-800 rounded-md shadow-md">
+            <h2 class="text-lg text-gray-700 dark:text-white font-semibold capitalize">Account settings</h2>
             
             <form>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
                     <div>
-                        <label class="text-gray-700" for="username">Username</label>
-                        <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                        <label class="text-gray-700 dark:text-gray-200" for="username">Username</label>
+                        <input id="username" type="text" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
-                        <label class="text-gray-700" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                        <label class="text-gray-700 dark:text-gray-200" for="emailAddress">Email Address</label>
+                        <input id="emailAddress" type="email" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
-                        <label class="text-gray-700" for="password">Password</label>
-                        <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                        <label class="text-gray-700 dark:text-gray-200" for="password">Password</label>
+                        <input id="password" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
 
                     <div>
-                        <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:ring">
+                        <label class="text-gray-700 dark:text-gray-200" for="passwordConfirmation">Password Confirmation</label>
+                        <input id="passwordConfirmation" type="password" class="mt-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded py-2 px-4 block w-full focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
                     </div>
                 </div>
 
                 <div class="flex justify-end mt-6">
-                    <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Update Account Information</button>
+                    <button class="bg-gray-700 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Update Account Information</button>
                 </div>
             </form>
         </div>`
diff --git a/src/components/ui/Heros/ECommerce.vue b/src/components/ui/Heros/ECommerce.vue
index 6565e1a..d8917d0 100644
--- a/src/components/ui/Heros/ECommerce.vue
+++ b/src/components/ui/Heros/ECommerce.vue
@@ -1,16 +1,16 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <header class="bg-white">
+            <header class="bg-white dark:bg-gray-800">
                 <nav class="shadow">
                     <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
                         <div class="flex justify-between items-center">
                             <div>
-                                <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
-                            
-                            <div @click="isOpen = !isOpen" class="flex md:hidden">
-                                <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+
+                            <div class="flex md:hidden">
+                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
@@ -18,16 +18,16 @@
                             </div>
                         </div>
 
-                        <div :class="isOpen ? 'block' : 'hidden'" class="md:flex items-center">
+                        <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
                             <div class="flex flex-col md:flex-row md:mx-6">
-                                <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
-                                <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
-                                <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
-                                <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                             </div>
 
                             <div class="flex justify-center md:block">
-                                <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                                <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
                                     <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     </svg>
@@ -43,8 +43,8 @@
                     <div class="md:flex items-center">
                         <div class="w-full md:w-1/2">
                             <div class="max-w-lg">
-                                <h1 class="text-gray-800 text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
-                                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
+                                <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
+                                <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
                                 <button class="mt-6 px-3 py-2 bg-indigo-600 text-white text-xs uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                             </div>
                         </div>
@@ -66,17 +66,17 @@
                 name: 'E-commerce',
                 isOpen: false,
                 code: `
-        <header class="bg-white">
+        <header class="bg-white dark:bg-gray-800">
             <nav class="shadow">
                 <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
                     <div class="flex justify-between items-center">
                         <div>
-                            <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
-
+                        
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
-                            <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -87,14 +87,14 @@
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div class="md:flex items-center">
                         <div class="flex flex-col md:flex-row md:mx-6">
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                         </div>
 
                         <div class="flex justify-center md:block">
-                            <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                            <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
                                 <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
@@ -110,8 +110,8 @@
                 <div class="md:flex items-center">
                     <div class="w-full md:w-1/2">
                         <div class="max-w-lg">
-                            <h1 class="text-gray-800 text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
-                            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
+                            <h1 class="text-gray-800 dark:text-white text-2xl font-semibold uppercase md:text-3xl">Best Place To Choose Your Clothes</h1>
+                            <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro beatae error laborum ab amet sunt recusandae? Reiciendis natus perspiciatis optio.</p>
                             <button class="mt-4 px-3 py-2 bg-indigo-600 text-white text-sm uppercase font-medium rounded hover:bg-indigo-500 focus:outline-none focus:bg-indigo-500">Shop Now</button>
                         </div>
                     </div>
diff --git a/src/components/ui/Heros/WithBGImage.vue b/src/components/ui/Heros/WithBGImage.vue
index 1bdc9e5..16421cb 100644
--- a/src/components/ui/Heros/WithBGImage.vue
+++ b/src/components/ui/Heros/WithBGImage.vue
@@ -2,16 +2,16 @@
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
             <header>
-                <nav class="bg-white shadow">
+                <nav class="bg-white dark:bg-gray-800 shadow">
                     <div class="container mx-auto px-6 py-3 ">
                         <div class="md:flex md:items-center md:justify-between">
                             <div class="flex justify-between items-center">
                                 <div class="text-xl font-semibold text-gray-700">
-                                    <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                                    <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                                 </div>
 
-                                <div @click="isOpen = !isOpen" class="flex md:hidden">
-                                    <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <div class="flex md:hidden">
+                                    <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                         <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                             <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                         </svg>
@@ -20,10 +20,10 @@
                             </div>
 
                             <div :class="!isOpen ? 'hidden' : ''" class="-mx-4 md:flex md:items-center">
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
-                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
+                                <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
                             </div>
                         </div>
                     </div>
@@ -50,17 +50,17 @@
                 isOpen: false,
                 code: `
         <header>
-            <nav class="bg-white shadow">
+            <nav class="bg-white dark:bg-gray-800 shadow">
                 <div class="container mx-auto px-6 py-3 ">
                     <div class="md:flex md:items-center md:justify-between">
                         <div class="flex justify-between items-center">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
-                                <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
@@ -70,10 +70,10 @@
 
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                         <div class="hidden -mx-4 md:flex md:items-center">
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web developers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Web Designers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">UI/UX Designers</a>
-                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 capitalize hover:text-blue-600">Contact</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web developers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Web Designers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">UI/UX Designers</a>
+                            <a href="#" class="block mx-4 mt-2 md:mt-0 text-sm text-gray-700 dark:text-gray-200 capitalize hover:text-blue-600 dark:hover:text-indigo-400">Contact</a>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Heros/WithImage.vue b/src/components/ui/Heros/WithImage.vue
index b726b7d..e89137f 100644
--- a/src/components/ui/Heros/WithImage.vue
+++ b/src/components/ui/Heros/WithImage.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <header class="bg-white">
+            <header class="bg-white dark:bg-gray-800">
                 <nav class="px-6 py-3 shadow">
                     <div class="md:flex items-center justify-between">
                         <div class="flex justify-between items-center">
                             <div>
-                                <a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
                     
                             <!-- Mobile menu button -->
                             <div class="md:hidden">
-                                <button type="button" @click="isOpen = !isOpen" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
+                                <button type="button" @click="isOpen = !isOpen" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
@@ -21,9 +21,9 @@
                     
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                         <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
                         </div>
                     </div>
                 </nav>
@@ -31,12 +31,12 @@
                 <div class="md:flex">
                     <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
                         <div class="max-w-xl">
-                            <h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
+                            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                                 
-                            <p class="mt-2 text-sm text-gray-500 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
                             <div class="flex mt-6">
-                                <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-800">Get Started</a>
+                                <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
                                 <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
                             </div>
                         </div>
@@ -60,17 +60,17 @@
                 name: 'With Image',
                 isOpen: false,
                 code: `
-        <header class="bg-white">
+        <header class="bg-white dark:bg-gray-800">
             <nav class="px-6 py-3 shadow">
                 <div class="md:flex items-center justify-between">
                     <div class="flex justify-between items-center">
                         <div>
-                            <a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                 
                         <!-- Mobile menu button -->
                         <div class="md:hidden">
-                            <button type="button" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
+                            <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="Toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -80,9 +80,9 @@
                 
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 dark:text-gray-200 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
                     </div>
                 </div>
             </nav>
@@ -90,12 +90,12 @@
             <div class="md:flex">
                 <div class="flex items-center justify-center px-6 py-8 md:h-128 w-full md:w-1/2">
                     <div class="max-w-xl">
-                        <h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
+                        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
                             
-                        <p class="mt-2 text-sm text-gray-500 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
+                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 md:text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.</p>
 
                         <div class="flex mt-6">
-                            <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-800">Get Started</a>
+                            <a href="#" class="px-3 py-2 block bg-gray-900 text-white text-xs font-semibold rounded hover:bg-gray-700">Get Started</a>
                             <a href="#" class="mx-4 px-3 py-2 block bg-gray-200 text-gray-700 text-xs font-semibold rounded hover:bg-gray-300">Learn More</a>
                         </div>
                     </div>
diff --git a/src/components/ui/Heros/WithPattern.vue b/src/components/ui/Heros/WithPattern.vue
index 640701f..336b2e6 100644
--- a/src/components/ui/Heros/WithPattern.vue
+++ b/src/components/ui/Heros/WithPattern.vue
@@ -26,20 +26,20 @@
                         </div>
 
                         <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
-                            <div class="max-w-sm bg-white rounded-lg">
+                            <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
                                 <div class="p-5 text-center">
-                                    <h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
+                                    <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
 
                                     <form action="#">
                                         <div class="mt-4">
-                                            <input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
-                                            <input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
+                                            <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
+                                            <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                                         </div>
 
                                         <div class="mt-4 flex items-center justify-between">
-                                            <a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
+                                            <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
 
-                                            <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
+                                            <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
                                         </div>
                                     </form>
                                 </div>
@@ -83,20 +83,20 @@
                     </div>
 
                     <div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
-                        <div class="max-w-sm bg-white rounded-lg">
+                        <div class="max-w-sm bg-white dark:bg-gray-800 rounded-lg">
                             <div class="p-5 text-center">
-                                <h2 class="text-2xl font-semibold text-gray-700 fo">Sign In</h2>
+                                <h2 class="text-2xl font-semibold text-gray-700 dark:text-white fo">Sign In</h2>
 
                                 <form action="#">
                                     <div class="mt-4">
-                                        <input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address" aria-label="Email address">
-                                        <input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
+                                        <input class="w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="email" placeholder="Email address" aria-label="Email address">
+                                        <input class="mt-4 w-full py-2 px-4 bg-white dark:bg-gray-800 text-gray-700 border border-gray-300 dark:border-gray-600 rounded block placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring" type="password" placeholder="Password" aria-label="Password">
                                     </div>
 
                                     <div class="mt-4 flex items-center justify-between">
-                                        <a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
+                                        <a href="#" class="text-gray-600 dark:text-gray-200 text-sm hover:underline">Forget Password?</a>
 
-                                        <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
+                                        <button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:bg-gray-800 dark:focus:bg-gray-700">Login</button>
                                     </div>
                                 </form>
                             </div>
diff --git a/src/components/ui/Navbars/ECommerce.vue b/src/components/ui/Navbars/ECommerce.vue
index 4311215..a40d148 100644
--- a/src/components/ui/Navbars/ECommerce.vue
+++ b/src/components/ui/Navbars/ECommerce.vue
@@ -1,15 +1,15 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white shadow">
+            <nav class="bg-white dark:bg-gray-800 shadow">
                 <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
                     <div class="flex justify-between items-center">
                         <div>
-                            <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <div class="flex md:hidden">
-                            <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -19,14 +19,14 @@
 
                     <div :class="isOpen ? '' : 'hidden'" class="md:flex items-center">
                         <div class="flex flex-col md:flex-row md:mx-6">
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
-                            <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                         </div>
 
                         <div class="flex justify-center md:block">
-                            <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                            <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
                                 <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
@@ -48,16 +48,16 @@
                 name: 'E-Commerce',
                 isOpen: false,
                 code: `
-        <nav class="bg-white shadow">
+        <nav class="bg-white dark:bg-gray-800 shadow">
             <div class="container mx-auto px-6 py-3 md:flex md:justify-between md:items-center">
                 <div class="flex justify-between items-center">
                     <div>
-                        <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
                     <div class="flex md:hidden">
-                        <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                        <button type="button" class=""text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                             <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                 <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                             </svg>
@@ -68,14 +68,14 @@
                 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                 <div class="md:flex items-center">
                     <div class="flex flex-col md:flex-row md:mx-6">
-                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Home</a>
-                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Shop</a>
-                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">Contact</a>
-                        <a class="my-1 text-sm text-gray-700 font-medium hover:text-indigo-500 md:mx-4 md:my-0" href="#">About</a>
+                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Home</a>
+                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Shop</a>
+                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">Contact</a>
+                        <a class="my-1 text-sm text-gray-700 dark:text-gray-200 font-medium hover:text-indigo-500 dark:hover:text-indigo-400 md:mx-4 md:my-0" href="#">About</a>
                     </div>
 
                     <div class="flex justify-center md:block">
-                        <a class="relative text-gray-700 hover:text-gray-600" href="#">
+                        <a class="relative text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300" href="#">
                             <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.70711 15.2929C4.07714 15.9229 4.52331 17 5.41421 17H17M17 17C15.8954 17 15 17.8954 15 19C15 20.1046 15.8954 21 17 21C18.1046 21 19 20.1046 19 19C19 17.8954 18.1046 17 17 17ZM9 19C9 20.1046 8.10457 21 7 21C5.89543 21 5 20.1046 5 19C5 17.8954 5.89543 17 7 17C8.10457 17 9 17.8954 9 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                             </svg>
diff --git a/src/components/ui/Navbars/WithAvatar.vue b/src/components/ui/Navbars/WithAvatar.vue
index 3ea11e9..fefb666 100644
--- a/src/components/ui/Navbars/WithAvatar.vue
+++ b/src/components/ui/Navbars/WithAvatar.vue
@@ -1,17 +1,17 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white shadow">
+            <nav class="bg-white dark:bg-gray-800 shadow">
                 <div class="container mx-auto px-6 py-3">
                     <div class="md:flex md:items-center md:justify-between">
                         <div class="flex justify-between items-center">
                             <div class="text-xl font-semibold text-gray-700">
-                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                             </div>
 
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
-                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
@@ -22,14 +22,14 @@
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                         <div :class="!isOpen ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1">
                             <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
-                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
                             </div>
 
                             <div class="flex items-center mt-4 md:mt-0">
-                                <button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
+                                <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
                                     <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                         <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                     </svg>
@@ -40,7 +40,7 @@
                                         <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
                                     </div>
 
-                                    <h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
+                                    <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
                                 </button>
                             </div>
                         </div>
@@ -58,17 +58,17 @@
                 name: 'With Avatar',
                 isOpen: false,
                 code: `
-        <nav class="bg-white shadow">
+        <nav class="bg-white dark:bg-gray-800 shadow">
             <div class="container mx-auto px-6 py-3">
                 <div class="md:flex md:items-center md:justify-between">
                     <div class="flex justify-between items-center">
                         <div class="text-xl font-semibold text-gray-700">
-                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
 
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
-                            <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -79,14 +79,14 @@
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div class="hidden md:flex md:items-center md:justify-between flex-1">
                         <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Join Slack</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Browse Topics</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Random Item</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 dark:text-gray-200 font-medium rounded-md hover:bg-gray-300 dark:hover:bg-gray-700">Experts</a>
                         </div>
 
                         <div class="flex items-center mt-4 md:mt-0">
-                            <button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
+                            <button class="mx-4 hidden md:block text-gray-600 dark:text-gray-200 hover:text-gray-700 dark:hover:text-gray-400 focus:text-gray-700 dark:focus:text-gray-400 focus:outline-none" aria-label="show notifications">
                                 <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                     <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                 </svg>
@@ -97,7 +97,7 @@
                                     <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
                                 </div>
 
-                                <h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
+                                <h3 class="mx-2 text-sm text-gray-700 dark:text-gray-200 font-medium md:hidden">Khatab wedaa</h3>
                             </button>
                         </div>
                     </div>
diff --git a/src/components/ui/Navbars/WithCategories.vue b/src/components/ui/Navbars/WithCategories.vue
index 27bc65e..fef38c5 100644
--- a/src/components/ui/Navbars/WithCategories.vue
+++ b/src/components/ui/Navbars/WithCategories.vue
@@ -1,22 +1,22 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white shadow">
+            <nav class="bg-white dark:bg-gray-800 shadow">
                 <div class="container mx-auto px-6 py-3">
                     <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                         <div class="flex justify-between items-center">
                             <div class="flex items-center">
-                                <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                                <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                                 <!-- Search input on desktop screen -->
                                 <div class="mx-10 hidden md:block">
-                                    <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
+                                    <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
                                 </div>
                             </div>
 
                             <!-- Mobile menu button -->
                             <div class="flex md:hidden">
-                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                                <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                     <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                         <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                     </svg>
@@ -27,10 +27,10 @@
                         <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                         <div class="md:flex items-center" :class="isOpen ? 'block' : 'hidden'">
                             <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
-                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
-                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
-                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
-                                <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                                <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
                             </div>
 
                             <div class="flex items-center py-2 -mx-1 md:mx-0">
@@ -46,26 +46,26 @@
                     </div>
 
                     <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
-                        <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
+                        <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
                     </div>
                 </div>
             </nav>
@@ -88,22 +88,22 @@
         }
         </style>
 
-        <nav class="bg-white shadow">
+        <nav class="bg-white dark:bg-gray-800 shadow">
             <div class="container mx-auto px-6 py-3">
                 <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                     <div class="flex justify-between items-center">
                         <div class="flex items-center">
-                            <a class="text-gray-800 text-xl font-bold md:text-2xl hover:text-gray-700" href="#">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
 
                             <!-- Search input on desktop screen -->
                             <div class="mx-10 hidden md:block">
-                                <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 bg-gray-100 rounded-md placeholder-gray-500 border border-transparent focus:outline-none focus:bg-white focus:shadow-outline focus:border-blue-400" placeholder="Search" aria-label="Search">
+                                <input type="text" class="w-32 lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
                             </div>
                         </div>
 
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
-                            <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -114,10 +114,10 @@
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div class="hidden md:flex items-center">
                         <div class="flex flex-col mt-2 md:flex-row md:mt-0 md:mx-1">
-                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Home</a>
-                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
-                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
-                            <a class="my-1 text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Home</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Blog</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Compoents</a>
+                            <a class="my-1 text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline md:mx-4 md:my-0" href="#">Courses</a>
                         </div>
 
                         <div class="flex items-center py-2 -mx-1 md:mx-0">
@@ -133,26 +133,26 @@
                 </div>
 
                 <div class="mt-3 py-3 -mx-3 overflow-y-auto whitespace-nowrap scroll-hidden">
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">News</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Articles</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Videos</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tricks</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHP</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Laravel</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Vue</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">React</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">CPP</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Ruby</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Mysql</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Pest</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Netlify</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">VS Code</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
-                    <a class="text-sm text-gray-700 leading-5 hover:text-blue-600 hover:underline mx-4 md:my-0" href="#">Sublime</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">News</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Articles</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Videos</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tricks</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHP</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Laravel</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Vue</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">React</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Tailwindcss</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Meraki UI</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">CPP</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">JavaScript</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Ruby</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Mysql</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Pest</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPUnit</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Netlify</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">VS Code</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">PHPStorm</a>
+                    <a class="text-sm text-gray-700 dark:text-gray-200 leading-5 hover:text-blue-600 dark:hover:text-indigo-400 hover:underline mx-4 md:my-0" href="#">Sublime</a>
                 </div>
             </div>
         </nav>`,
diff --git a/src/components/ui/Navbars/WithSearch.vue b/src/components/ui/Navbars/WithSearch.vue
index 308be90..678bc33 100644
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -1,16 +1,16 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <nav class="bg-white shadow">
+            <nav class="bg-white dark:bg-gray-800 shadow">
                 <div class="container mx-auto px-6 py-3 md:flex">
                     <div class="flex justify-between items-center">
                         <div>
-                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                            <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                         </div>
                         
                         <!-- Mobile menu button -->
                         <div class="flex md:hidden">
-                            <button @click="isOpen = !isOpen" type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                            <button @click="isOpen = !isOpen" type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                                 <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                     <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                                 </svg>
@@ -21,13 +21,13 @@
                     <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                     <div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between">
                         <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
-                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
-                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
-                            <a href="#" class="py-1 px-2 text-gray-700 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                            <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                         </div>
                         
                         <div>
-                            <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
+                            <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
                         </div>
                     </div>
                 </div>
@@ -43,16 +43,16 @@
                 name: 'With Search',
                 isOpen: false,
                 code: `
-        <nav class="bg-white shadow">
+        <nav class="bg-white dark:bg-gray-800 shadow">
             <div class="container mx-auto px-6 py-3 md:flex">
                 <div class="flex justify-between items-center">
                     <div>
-                        <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                        <a class="text-gray-800 dark:text-white text-xl font-bold md:text-2xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
                     </div>
                     
                     <!-- Mobile menu button -->
                     <div class="flex md:hidden">
-                        <button type="button" class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600" aria-label="toggle menu">
+                        <button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" aria-label="toggle menu">
                             <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                                 <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"></path>
                             </svg>
@@ -63,13 +63,13 @@
                 <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
                 <div class="w-full hidden md:flex md:items-center md:justify-between">
                     <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Home</a>
+                        <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">About</a>
+                        <a href="#" class="py-1 px-2 text-gray-700 dark:text-gray-200 rounded text-sm font-medium hover:bg-gray-900 hover:text-gray-100 md:mx-2">Contact</a>
                     </div>
                     
                     <div>
-                        <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
+                        <input type="text" class="w-full lg:w-64 px-4 py-3 leading-tight text-sm text-gray-700 dark:text-gray-200 bg-gray-200 dark:bg-gray-900 rounded-md placeholder-gray-500 dark:placeholder-gray-200 border border-transparent focus:outline-none focus:bg-white focus:ring focus:border-blue-400" placeholder="Search" aria-label="Search">
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Paginations/Simple.vue b/src/components/ui/Paginations/Simple.vue
index 3a73cec..8c869cc 100644
--- a/src/components/ui/Paginations/Simple.vue
+++ b/src/components/ui/Paginations/Simple.vue
@@ -3,23 +3,23 @@
         <div class="px-3 py-6" slot="component">
             <div class="flex justify-center items-center">
                 <div class="flex">
-                    <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-500 rounded-md cursor-not-allowed">
+                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
                         previous
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                         1
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                         2
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                         3
                     </a>
 
-                    <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+                    <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                         Next
                     </a>
                 </div>
@@ -35,23 +35,23 @@
                 name: 'Pagination',
                 code: `
         <div class="flex">
-            <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-500 rounded-md cursor-not-allowed">
+            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-600 rounded-md cursor-not-allowed">
                 previous
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                 1
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                 2
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                 3
             </a>
 
-            <a href="#" class="mx-1 px-3 py-2 bg-white text-gray-700 hover:bg-indigo-600 hover:text-white rounded-md">
+            <a href="#" class="mx-1 px-3 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 hover:bg-indigo-600 dark:hover:bg-indigo-500 hover:text-white dark:hover:text-gray-200 rounded-md">
                 Next
             </a>
         </div>`
diff --git a/src/components/ui/Sections/AboutMe.vue b/src/components/ui/Sections/AboutMe.vue
index 641c7d7..cd3df3b 100644
--- a/src/components/ui/Sections/AboutMe.vue
+++ b/src/components/ui/Sections/AboutMe.vue
@@ -1,37 +1,37 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <section class="bg-gray-800">
+            <section class="bg-white dark:bg-gray-800">
                 <div class="container mx-auto px-6 py-8">
                     <div class="lg:flex items-center">
                         <div class="lg:w-1/2">
-                            <h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
+                            <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
 
-                            <p class="text-gray-400 lg:max-w-md mt-4">
-                                Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                            <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
+                                Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
                             </p>
 
                             <div class="flex items-center -mx-2 mt-6">
                                 <a class="mx-2" href="#" aria-label="Twitter">
-                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Facebook">
-                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Linkden">
-                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
                                     </svg>
                                 </a>
                             
                                 <a class="mx-2" href="#" aria-label="Github">
-                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                         <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
                                     </svg>
                                 </a>
@@ -41,7 +41,7 @@
                         <div class="mt-8 lg:mt-0 lg:w-1/2">
                             <div class="flex items-center justify-center lg:justify-end">
                                 <div class="max-w-lg">
-                                    <img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
+                                    <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
                                 </div>
                             </div>
                         </div>
@@ -58,37 +58,37 @@
             return {
                 name: 'About Me',
                 code: `
-        <section class="bg-gray-800">
+        <section class="bg-white dark:bg-gray-800">
             <div class="container mx-auto px-6 py-8">
                 <div class="lg:flex items-center">
                     <div class="lg:w-1/2">
-                        <h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
+                        <h2 class="text-gray-800 dark:text-gray-100 text-3xl font-bold">Who I am</h2>
 
-                        <p class="text-gray-400 lg:max-w-md mt-4">
-                            Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                        <p class="text-gray-500 dark:text-gray-400 lg:max-w-md mt-4">
+                            Hi I am jane , software engineer <a class="text-indigo-600 dark:text-indigo-400 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
                         </p>
 
                         <div class="flex items-center -mx-2 mt-6">
                             <a class="mx-2" href="#" aria-label="Twitter">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Facebook">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Linkden">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
                                 </svg>
                             </a>
                         
                             <a class="mx-2" href="#" aria-label="Github">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                <svg class="fill-current text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                     <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
                                 </svg>
                             </a>
@@ -98,7 +98,7 @@
                     <div class="mt-8 lg:mt-0 lg:w-1/2">
                         <div class="flex items-center justify-center lg:justify-end">
                             <div class="max-w-lg">
-                                <img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
+                                <img class="w-full h-64 object-cover object-center rounded-md shadow" src="https://images.unsplash.com/photo-1484399172022-72a90b12e3c1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="">
                             </div>
                         </div>
                     </div>
diff --git a/src/components/ui/Sections/Feature.vue b/src/components/ui/Sections/Feature.vue
index 78c6a57..faf5ea5 100644
--- a/src/components/ui/Sections/Feature.vue
+++ b/src/components/ui/Sections/Feature.vue
@@ -1,7 +1,7 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <section class="bg-white">
+            <section class="bg-white dark:bg-gray-800">
                 <div class="container mx-auto px-6 py-8">
                     <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                         <div>
@@ -9,9 +9,9 @@
                                 <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
                             </svg>
             
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1>
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
             
-                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                            <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
             
                         <div>
@@ -19,9 +19,9 @@
                                 <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
                             </svg>    
             
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1>
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
                             
-                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                            <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
                         
                         <div>
@@ -29,9 +29,9 @@
                                 <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
                             </svg>
                         
-                            <h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1>
+                            <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
                         
-                            <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                            <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                         </div>
                     </div>
                 </div>
@@ -46,7 +46,7 @@
             return {
                 name: 'Feature',
                 code:  `
-        <section class="bg-white">
+        <section class="bg-white dark:bg-gray-800">
             <div class="container mx-auto px-6 py-8">
                 <div class="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                     <div>
@@ -54,9 +54,9 @@
                             <path d="M29.6931 14.2283L22.7556 6.87823C22.3292 6.426 21.6175 6.40538 21.1652 6.83212C20.7137 7.25851 20.6927 7.9706 21.1195 8.42248L27.3284 15L21.1195 21.5783C20.6927 22.0302 20.7137 22.7419 21.1652 23.1687C21.3827 23.3738 21.6606 23.4754 21.9374 23.4754C22.2363 23.4754 22.5348 23.3569 22.7557 23.1233L29.6932 15.7729C30.1022 15.339 30.1023 14.6618 29.6931 14.2283Z" fill="#2D3748"/><path d="M8.88087 21.578L2.67236 15L8.88087 8.42215C9.30726 7.97028 9.28664 7.25812 8.83476 6.83179C8.38323 6.4054 7.67073 6.42603 7.2444 6.87791L0.306858 14.2279C-0.102245 14.6614 -0.102245 15.3391 0.306858 15.7726L7.24475 23.123C7.466 23.3574 7.76413 23.4755 8.06302 23.4755C8.33976 23.4755 8.61767 23.3735 8.83476 23.1684C9.28705 22.742 9.30726 22.0299 8.88087 21.578Z" fill="#2D3748"/><path d="M16.8201 3.08774C16.2062 2.99476 15.6317 3.41622 15.5379 4.03011L12.2379 25.6302C12.1441 26.2445 12.566 26.8186 13.1803 26.9124C13.238 26.921 13.295 26.9252 13.3516 26.9252C13.898 26.9252 14.3773 26.5266 14.4624 25.97L17.7624 4.3699C17.8562 3.7556 17.4343 3.1815 16.8201 3.08774Z" fill="#4299E1"/>
                         </svg>
         
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800">Default Taiwindcss Config</h1>
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Default Taiwindcss Config</h1>
         
-                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
         
                     <div>
@@ -64,9 +64,9 @@
                             <path d="M27.3633 7.08984H26.4844V6.21094C26.4844 4.75705 25.3015 3.57422 23.8477 3.57422H4.39453C2.94064 3.57422 1.75781 4.75705 1.75781 6.21094V21.1523H0.878906C0.393516 21.1523 0 21.5459 0 22.0312V23.7891C0 25.2429 1.18283 26.4258 2.63672 26.4258H27.3633C28.8172 26.4258 30 25.2429 30 23.7891V9.72656C30 8.27268 28.8172 7.08984 27.3633 7.08984ZM3.51562 6.21094C3.51562 5.72631 3.9099 5.33203 4.39453 5.33203H23.8477C24.3323 5.33203 24.7266 5.72631 24.7266 6.21094V7.08984H20.332C18.8781 7.08984 17.6953 8.27268 17.6953 9.72656V21.1523H3.51562V6.21094ZM1.75781 23.7891V22.9102H17.6953V23.7891C17.6953 24.0971 17.7489 24.3929 17.8465 24.668H2.63672C2.15209 24.668 1.75781 24.2737 1.75781 23.7891ZM28.2422 23.7891C28.2422 24.2737 27.8479 24.668 27.3633 24.668H20.332C19.8474 24.668 19.4531 24.2737 19.4531 23.7891V9.72656C19.4531 9.24193 19.8474 8.84766 20.332 8.84766H27.3633C27.8479 8.84766 28.2422 9.24193 28.2422 9.72656V23.7891Z" fill="#2D3748"/><path d="M24.7266 21.1523H22.9688C22.4834 21.1523 22.0898 21.5459 22.0898 22.0312C22.0898 22.5166 22.4834 22.9102 22.9688 22.9102H24.7266C25.212 22.9102 25.6055 22.5166 25.6055 22.0312C25.6055 21.5459 25.212 21.1523 24.7266 21.1523Z" fill="#4299E1"/><path d="M23.8477 12.3633C24.3331 12.3633 24.7266 11.9698 24.7266 11.4844C24.7266 10.999 24.3331 10.6055 23.8477 10.6055C23.3622 10.6055 22.9688 10.999 22.9688 11.4844C22.9688 11.9698 23.3622 12.3633 23.8477 12.3633Z" fill="#4299E1"/>
                         </svg>    
         
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800">Fully Responsive Components</h1>
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">Fully Responsive Components</h1>
                         
-                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
                     
                     <div>
@@ -74,9 +74,9 @@
                             <g clip-path="url(#clip0)"><path d="M26.599 4.339a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM7.151 25.661a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zM23.486 13.163a8.636 8.636 0 00-1.19-2.873l1.123-1.123-2.592-2.59L19.705 7.7a8.636 8.636 0 00-2.873-1.19V4.921h-3.664v1.586a8.634 8.634 0 00-2.873 1.19l-1.122-1.12-2.592 2.589 1.123 1.123a8.636 8.636 0 00-1.19 2.873H4.922l-.002 3.663h1.592A8.626 8.626 0 007.704 19.7l-1.127 1.127 2.59 2.591 1.128-1.127a8.623 8.623 0 002.873 1.19v1.597h3.664v-1.597a8.628 8.628 0 002.873-1.19l1.128 1.128 2.59-2.592-1.127-1.127a8.627 8.627 0 001.19-2.873h1.593v-3.664h-1.593zM15 19.256a4.255 4.255 0 110-8.511 4.255 4.255 0 010 8.51z" fill="#4299E1"/><path d="M5.276 23.2c-.42 0-.823.105-1.182.302A13.853 13.853 0 011.172 15C1.172 7.375 7.375 1.172 15 1.172c.927 0 1.854.092 2.754.274a.586.586 0 00.232-1.149A15.111 15.111 0 0015 0C10.993 0 7.226 1.56 4.393 4.393A14.902 14.902 0 000 15c0 3.37 1.144 6.66 3.228 9.296-.268.4-.413.872-.413 1.365 0 .657.257 1.275.721 1.74a2.444 2.444 0 001.74.721c.658 0 1.276-.256 1.74-.721.465-.465.721-1.083.721-1.74s-.256-1.276-.72-1.74a2.445 2.445 0 00-1.74-.72zm.912 3.373a1.28 1.28 0 01-.912.377 1.28 1.28 0 01-.911-.377 1.28 1.28 0 01-.378-.912c0-.344.134-.668.378-.912a1.28 1.28 0 01.911-.377c.345 0 .668.134.912.378.243.243.377.567.377.911 0 .344-.134.668-.377.912zM26.772 5.703a2.465 2.465 0 00-.308-3.104 2.446 2.446 0 00-1.74-.721c-.658 0-1.276.256-1.74.72a2.445 2.445 0 00-.721 1.74c0 .658.256 1.276.72 1.741.465.465 1.083.72 1.74.72.42 0 .824-.104 1.183-.3A13.854 13.854 0 0128.828 15c0 7.625-6.203 13.828-13.828 13.828-.918 0-1.836-.09-2.728-.269a.586.586 0 00-.23 1.15c.968.193 1.963.291 2.958.291 4.007 0 7.773-1.56 10.607-4.393A14.902 14.902 0 0030 15c0-3.37-1.145-6.66-3.228-9.297zm-2.96-.452a1.28 1.28 0 01-.377-.912c0-.344.134-.668.377-.911a1.28 1.28 0 01.912-.378 1.29 1.29 0 010 2.578 1.28 1.28 0 01-.912-.377z" fill="#2D3748"/><path d="M12.582 25.078c0 .324.263.586.586.586h3.664a.586.586 0 00.586-.586v-1.136a9.179 9.179 0 002.199-.911l.802.802a.586.586 0 00.829 0l2.59-2.592a.586.586 0 000-.828l-.802-.802a9.169 9.169 0 00.911-2.199h1.132a.586.586 0 00.586-.585v-3.664a.586.586 0 00-.586-.586h-1.132a9.17 9.17 0 00-.911-2.199l.797-.797a.587.587 0 000-.829l-2.592-2.59a.586.586 0 00-.829 0l-.795.797a9.177 9.177 0 00-2.2-.912V4.922a.586.586 0 00-.585-.586h-3.664a.586.586 0 00-.586.586v1.126a9.169 9.169 0 00-2.199.91l-.796-.795a.586.586 0 00-.828 0l-2.592 2.59a.585.585 0 000 .828l.797.797a9.173 9.173 0 00-.911 2.199h-1.13a.586.586 0 00-.586.585l-.002 3.664a.585.585 0 00.586.586h1.132c.207.77.512 1.507.911 2.2l-.801.8a.586.586 0 000 .83l2.59 2.59a.586.586 0 00.829 0l.801-.801a9.185 9.185 0 002.2.911v1.136zm-1.97-3.28a.586.586 0 00-.732.078l-.713.714-1.761-1.763.712-.713a.586.586 0 00.078-.732 8.02 8.02 0 01-1.11-2.679.586.586 0 00-.572-.462H5.507l.002-2.492h1.005a.586.586 0 00.572-.463 8.022 8.022 0 011.11-2.678.586.586 0 00-.078-.733l-.708-.708 1.763-1.761.707.707c.196.196.5.228.733.078a8.016 8.016 0 012.678-1.11.586.586 0 00.463-.573v-1h2.492v1c0 .277.193.515.463.573a8.024 8.024 0 012.678 1.11c.232.15.537.118.732-.078l.708-.707 1.762 1.761-.708.708a.586.586 0 00-.078.732 8.027 8.027 0 011.11 2.679c.058.27.297.463.573.463h1.007v2.492h-1.007a.586.586 0 00-.573.462 8.02 8.02 0 01-1.11 2.679.586.586 0 00.078.732l.713.713-1.761 1.762-.714-.713a.586.586 0 00-.732-.078 8.027 8.027 0 01-2.678 1.11.586.586 0 00-.463.573v1.011h-2.492v-1.01a.586.586 0 00-.463-.574 8.021 8.021 0 01-2.678-1.11z" fill="#2D3748"/><path d="M19.841 15A4.847 4.847 0 0015 10.158 4.847 4.847 0 0010.158 15 4.847 4.847 0 0015 19.841 4.847 4.847 0 0019.841 15zm-8.51 0A3.674 3.674 0 0115 11.33 3.674 3.674 0 0118.67 15 3.674 3.674 0 0115 18.67 3.674 3.674 0 0111.33 15z" fill="#2D3748"/><path d="M20.395 2.216a.59.59 0 00.415-.172.593.593 0 00.171-.415.59.59 0 00-.586-.586.589.589 0 00-.586.586.589.589 0 00.586.587zM9.63 27.794a.59.59 0 00-.586.586.59.59 0 00.586.586.59.59 0 00.586-.586.59.59 0 00-.586-.585z" fill="#4299E1"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h30v30H0z"/></clipPath></defs>
                         </svg>
                     
-                        <h1 class="mt-4 font-semibold text-xl text-gray-800">RTL Languages Support</h1>
+                        <h1 class="mt-4 font-semibold text-xl text-gray-800 dark:text-white">RTL Languages Support</h1>
                     
-                        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
+                        <p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim fusce tortor, ac sed malesuada blandit. Et mi gravida sem feugiat.</p>
                     </div>
                 </div>
             </div>
diff --git a/src/components/ui/Sections/OurTeam.vue b/src/components/ui/Sections/OurTeam.vue
index f5d605e..3a24073 100644
--- a/src/components/ui/Sections/OurTeam.vue
+++ b/src/components/ui/Sections/OurTeam.vue
@@ -1,8 +1,8 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <section class="bg-white container mx-auto p-6">
-                <h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+            <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
+                <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
 
                 <div class="flex items-center justify-center">
                     <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
@@ -10,8 +10,8 @@
                             <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
 
                             <div class="mt-2">
-                                <h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
-                                <span class="mt-1 font-medium text-gray-600">CEO</span>
+                                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
+                                <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
                             </div>
                         </div>
 
@@ -19,8 +19,8 @@
                             <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                             <div class="mt-2">
-                                <h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
-                                <span class="mt-1 font-medium text-gray-600">Co-founder</span>
+                                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
+                                <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
                             </div>
                         </div>
 
@@ -28,8 +28,8 @@
                             <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
 
                             <div class="mt-2">
-                                <h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
-                                <span class="mt-1 font-medium text-gray-600">UI/UX</span>
+                                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
+                                <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
                             </div>
                         </div>
 
@@ -37,8 +37,8 @@
                             <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                             <div class="mt-2">
-                                <h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
-                                <span class="mt-1 font-medium text-gray-600">Software Engineer</span>
+                                <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
+                                <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
                             </div>
                         </div>
                     </div>
@@ -54,8 +54,8 @@
             return {
                 name: 'Our Team',
                 code: `
-        <section class="bg-white container mx-auto p-6">
-            <h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+        <section class="bg-white dark:bg-gray-800 container mx-auto p-6">
+            <h2 class="text-gray-800 dark:text-white font-medium capitalize text-xl md:text-2xl">Our Team</h2>
 
             <div class="flex items-center justify-center">
                 <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
@@ -63,8 +63,8 @@
                         <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
 
                         <div class="mt-2">
-                            <h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
-                            <span class="mt-1 font-medium text-gray-600">CEO</span>
+                            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Ahmed Omer</h3>
+                            <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">CEO</span>
                         </div>
                     </div>
 
@@ -72,8 +72,8 @@
                         <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                         <div class="mt-2">
-                            <h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
-                            <span class="mt-1 font-medium text-gray-600">Co-founder</span>
+                            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Jane Doe</h3>
+                            <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Co-founder</span>
                         </div>
                     </div>
 
@@ -81,8 +81,8 @@
                         <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
 
                         <div class="mt-2">
-                            <h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
-                            <span class="mt-1 font-medium text-gray-600">UI/UX</span>
+                            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Steve Ben</h3>
+                            <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">UI/UX</span>
                         </div>
                     </div>
 
@@ -90,8 +90,8 @@
                         <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
 
                         <div class="mt-2">
-                            <h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
-                            <span class="mt-1 font-medium text-gray-600">Software Engineer</span>
+                            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200">Patterson Johnson</h3>
+                            <span class="mt-1 font-medium text-gray-600 dark:text-gray-300">Software Engineer</span>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/Sections/ParagraphWithImage.vue b/src/components/ui/Sections/ParagraphWithImage.vue
index 1ca25c5..93c42a7 100644
--- a/src/components/ui/Sections/ParagraphWithImage.vue
+++ b/src/components/ui/Sections/ParagraphWithImage.vue
@@ -1,18 +1,18 @@
 <template>
     <view-component :name="name" :code="code">
         <div class="py-6" slot="component">
-            <section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
-                <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+            <section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
+                <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
                     <div class="lg:w-1/2">
-                        <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
+                        <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
                     </div>
 
                     <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-                        <h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
-                        <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
+                        <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                        <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                         
                         <div class="mt-8">
-                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
+                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-700">Start Now</a>
                         </div>
                     </div>
                 </div>
@@ -27,15 +27,15 @@
             return {
                 name: 'Paragraph With Image',
                 code:  `
-        <section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
-            <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+        <section class="bg-gray-100 dark:bg-gray-900 lg:py-12 lg:flex lg:justify-center">
+            <div class="bg-white dark:bg-gray-800 lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
                 <div class="lg:w-1/2">
-                    <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
+                    <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=750&q=80')"></div>
                 </div>
 
                 <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-                    <h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
-                    <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
+                    <h2 class="text-2xl text-gray-800 dark:text-white font-bold md:text-3xl">Build Your New <span class="text-indigo-600 dark:text-indigo-400">Idea</span></h2>
+                    <p class="mt-4 text-gray-600 dark:text-gray-400">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
                     
                     <div class="mt-8">
                         <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
diff --git a/src/components/utilities/ViewComponent.vue b/src/components/utilities/ViewComponent.vue
index c1fa043..560fbbb 100644
--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -1,26 +1,26 @@
 <template>
-    <div class="bg-gray-300 border rounded-md overflow-hidden mb-12">
-        <div class="bg-white px-4 py-2 border-b">
+    <div class="bg-gray-300 dark:bg-gray-600 border dark:border-gray-600 rounded-md overflow-hidden mb-12">
+        <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b dark:border-gray-600">
             <div class="flex flex-col md:flex-row justify-between items-center">
                 <div class="flex items-center">
-                    <h3 class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</h3>
+                    <h3 class="text-gray-700 dark:text-gray-200 font-medium capitalize md:text-lg">{{ name }}</h3>
                 </div>
 
                 <div class="mt-4 md:mt-0">
-                    <app-button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="Rtl">
+                    <app-button @click="rtl =! rtl" class="rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
                         <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none">
                             <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
                             <path d="M8 17V15.5H14V13.5H8V12L5 14.5L8 17Z" fill="currentColor" />
                         </svg>
                     </app-button>
 
-                    <app-button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700' : 'bg-gray-200 text-gray-600'" aria-label="View code snippet">
+                    <app-button @click="viewCode =! viewCode" class="mx-4 rounded-md p-1 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                         </svg>
                     </app-button>
 
-                    <app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 focus:outline-none" aria-label="Copy">
+                    <app-button v-clipboard:success="onCopy" v-clipboard:copy="code" class="bg-gray-200 dark:bg-gray-700 dark:text-gray-200 rounded-md p-1 text-gray-600 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="Copy">
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                         </svg>
@@ -36,8 +36,8 @@
                 <transition name="fade">
                     <div v-if="copied">
                         <div class="w-full h-full absolute top-0 left-0 z-50">
-                            <div class="bg-gray-300 h-full flex items-center justify-center">
-                                <p class="text-gray-700 text-2xl">Copied!</p>
+                            <div class="bg-gray-300 dark:bg-gray-700 h-full flex items-center justify-center">
+                                <p class="text-gray-700 dark:text-gray-200 text-2xl">Copied!</p>
                             </div>
                         </div>
                     </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 375fd8f..1f5f3c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
     purge: ["./src/**/*.vue"],
+    darkMode: "class",
     theme: {
         extend: {
             fontFamily: {