diff --git a/README.md b/README.md
index c5031ea..c12a209 100644
--- a/README.md
+++ b/README.md
@@ -52,3 +52,4 @@ Inspiration, code snippets, icon, etc.
 - [Template Typescript](https://github.com/foxglove/template-typescript) by Foxglove.
 - [`shadcn` Vue](https://www.shadcn-vue.com/)
 - [`shadcn` UI Sidebar](https://github1s.com/salimi-my/shadcn-ui-sidebar) by Salimi
+- [Iconify](https://iconify.design/) by Vjacheslav Trushkin
diff --git a/package.json b/package.json
index 124f4da..a5a5f68 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,9 @@
     "component:add": "npx shadcn-vue@latest add"
   },
   "devDependencies": {
+    "@iconify-json/lucide": "^1.1.198",
+    "@iconify-json/radix-icons": "^1.1.14",
+    "@iconify/vue": "^4.1.2",
     "@playwright/test": "^1.42.1",
     "@rushstack/eslint-patch": "^1.10.1",
     "@types/jsdom": "^21.1.6",
@@ -42,9 +45,9 @@
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.11.0",
     "autoprefixer": "^10.4.19",
-    "cross-env": "^7.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-playwright": "^1.5.4",
@@ -53,7 +56,6 @@
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",
-    "lucide-vue-next": "^0.398.0",
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
diff --git a/public/data/sidebar.json b/public/data/sidebar.json
index 2c5faf1..fe4c8f3 100644
--- a/public/data/sidebar.json
+++ b/public/data/sidebar.json
@@ -2,7 +2,13 @@
   {
     "groupLabel": "",
     "menus": [
-      { "href": "/", "label": "Dashboard", "active": true, "icon": "LayoutGrid", "submenus": [] }
+      {
+        "href": "/",
+        "label": "Dashboard",
+        "active": true,
+        "icon": "lucide:layout-grid",
+        "submenus": []
+      }
     ]
   },
   {
@@ -12,21 +18,33 @@
         "href": "",
         "label": "Posts",
         "active": false,
-        "icon": "SquarePen",
+        "icon": "lucide:square-pen",
         "submenus": [
           { "href": "/", "label": "All Posts", "active": false },
           { "href": "/", "label": "New Post", "active": false }
         ]
       },
-      { "href": "/", "label": "Categories", "active": false, "icon": "Bookmark", "submenus": [] },
-      { "href": "/", "label": "Tags", "active": false, "icon": "Tag", "submenus": [] }
+      {
+        "href": "/",
+        "label": "Categories",
+        "active": false,
+        "icon": "lucide:bookmark",
+        "submenus": []
+      },
+      { "href": "/", "label": "Tags", "active": false, "icon": "lucide:tag", "submenus": [] }
     ]
   },
   {
     "groupLabel": "Settings",
     "menus": [
-      { "href": "/", "label": "Users", "active": false, "icon": "Users", "submenus": [] },
-      { "href": "/", "label": "Account", "active": false, "icon": "Settings", "submenus": [] }
+      { "href": "/", "label": "Users", "active": false, "icon": "lucide:users", "submenus": [] },
+      {
+        "href": "/",
+        "label": "Account",
+        "active": false,
+        "icon": "lucide:settings",
+        "submenus": []
+      }
     ]
   }
 ]
diff --git a/src/App.vue b/src/App.vue
index e2a175a..c03aa1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@ import { useGlobalStore } from "@/stores/use-global";
 const globalStore = useGlobalStore();
 onMounted(function () {
   globalStore.loadLocale();
-  globalStore.loadTheme();
+  globalStore.loadDarkMode();
 });
 </script>
 
diff --git a/src/components/LoginForm.vue b/src/components/LoginForm.vue
index 82755d8..ac8831d 100644
--- a/src/components/LoginForm.vue
+++ b/src/components/LoginForm.vue
@@ -4,7 +4,6 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { cn } from "@/utils/classname";
 import { ref } from "vue";
-import { Loader2 } from "lucide-vue-next";
 
 const isLoading = ref(false);
 async function onSubmit(event: Event) {
@@ -58,7 +57,7 @@ async function onSubmit(event: Event) {
       </div>
     </div>
     <Button variant="outline" type="button" class="justify-start" :disabled="isLoading">
-      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      <Icon icon="lucide:loader-circle" v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
       <img
         v-else
         src="https://cdn.worldvectorlogo.com/logos/github-icon-1.svg"
@@ -67,7 +66,7 @@ async function onSubmit(event: Event) {
       Continue with GitHub
     </Button>
     <Button variant="outline" type="button" class="justify-start" :disabled="isLoading">
-      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      <Icon icon="lucide:loader-circle" v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
       <img
         v-else
         src="https://www.svgrepo.com/show/303108/google-icon-logo.svg"
@@ -76,7 +75,7 @@ async function onSubmit(event: Event) {
       Continue with Google
     </Button>
     <Button variant="outline" type="button" class="justify-start" :disabled="isLoading">
-      <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+      <Icon icon="lucide:loader-circle" v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
       <img
         v-else
         src="https://cdn.worldvectorlogo.com/logos/microsoft-5.svg"
diff --git a/src/components/RegisterForm.vue b/src/components/RegisterForm.vue
index 48dac2b..aeddbd8 100644
--- a/src/components/RegisterForm.vue
+++ b/src/components/RegisterForm.vue
@@ -3,9 +3,8 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/utils/classname";
 import { ref } from "vue";
-
-import { Loader2, Github } from "lucide-vue-next";
 import { Label } from "@/components/ui/label";
+import { Icon } from "@iconify/vue";
 
 const isLoading = ref(false);
 async function onSubmit(event: Event) {
@@ -36,7 +35,7 @@ async function onSubmit(event: Event) {
           />
         </div>
         <Button :disabled="isLoading">
-          <Loader2 v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
+          <Icon icon="lucide:loader-circle" v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
           Register with Email
         </Button>
       </div>
diff --git a/src/components/ui/dark-mode/DarkModeToggle.vue b/src/components/ui/dark-mode/DarkModeToggle.vue
new file mode 100644
index 0000000..26946a7
--- /dev/null
+++ b/src/components/ui/dark-mode/DarkModeToggle.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useColorMode } from "@vueuse/core";
+import { Icon } from "@iconify/vue";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+const mode = useColorMode();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        <Icon
+          icon="radix-icons:moon"
+          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+        />
+        <Icon
+          icon="radix-icons:sun"
+          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+        />
+        <span class="sr-only">Toggle theme</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem @click="mode = 'light'"> Light </DropdownMenuItem>
+      <DropdownMenuItem @click="mode = 'dark'"> Dark </DropdownMenuItem>
+      <DropdownMenuItem @click="mode = 'auto'"> System </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
diff --git a/src/components/ui/dark-mode/index.ts b/src/components/ui/dark-mode/index.ts
new file mode 100644
index 0000000..dc99203
--- /dev/null
+++ b/src/components/ui/dark-mode/index.ts
@@ -0,0 +1 @@
+export { default as DarkModeToggle } from "./DarkModeToggle.vue";
diff --git a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index e4a2da4..7953d0a 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,38 +1,40 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue";
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
   type DropdownMenuCheckboxItemProps,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/utils/classname'
+} from "radix-vue";
+import { cn } from "@/utils/classname";
+import { Icon } from "@iconify/vue";
 
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DropdownMenuCheckboxItem
     v-bind="forwarded"
-    :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <Icon icon="lucide:check" class="w-4 h-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index d4d9e86..e408cfa 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,39 +1,41 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue";
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   type DropdownMenuRadioItemEmits,
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/utils/classname'
+} from "radix-vue";
+import { cn } from "@/utils/classname";
+import { Icon } from "@iconify/vue";
 
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>();
 
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DropdownMenuRadioItem
     v-bind="forwarded"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Circle class="h-2 w-2 fill-current" />
+        <Icon icon="lucide:circle" class="h-2 w-2 fill-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 3adeb06..f93763e 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue";
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
-} from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/utils/classname'
+} from "radix-vue";
+import { cn } from "@/utils/classname";
+import { Icon } from "@iconify/vue";
 
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"] }>();
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+  const { class: _, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
   <DropdownMenuSubTrigger
     v-bind="forwardedProps"
-    :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      props.class,
-    )"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        props.class,
+      )
+    "
   >
     <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
+    <Icon icon="lucide:chevron-right" class="ml-auto h-4 w-4" />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/src/components/ui/navbar/Navbar.vue b/src/components/ui/navbar/Navbar.vue
index 71f2dc9..80e230b 100644
--- a/src/components/ui/navbar/Navbar.vue
+++ b/src/components/ui/navbar/Navbar.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { Menu, PanelsTopLeft } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
+import { DarkModeToggle } from "@/components/ui/dark-mode";
 import { Sheet, SheetContent, SheetHeader, SheetTrigger } from "@/components/ui/sheet";
 import { default as SidebarMenu } from "@/components/ui/sidebar/SidebarMenu.vue";
+import { Icon } from "@iconify/vue";
 
 interface NavbarProps {
   title: string;
@@ -20,14 +21,14 @@ const props = defineProps<NavbarProps>();
         <Sheet>
           <SheetTrigger class="lg:hidden" as-child>
             <Button variant="outline" class="mr-3 p-3 lg:hidden">
-              <Menu class="w-5" />
+              <Icon icon="lucide:menu" class="w-5" />
             </Button>
           </SheetTrigger>
           <SheetContent class="sm:w-80 px-3 h-full flex flex-col" side="left">
             <SheetHeader>
               <Button class="flex justify-center items-center pb-2 pt-1" variant="link" as-child>
                 <RouterLink to="/" class="flex items-center gap-2">
-                  <PanelsTopLeft class="w-6 h-6 mr-1" />
+                  <Icon icon="lucide:panels-top-left" class="w-6 h-6 mr-1" />
                   <h1 class="font-bold text-lg">Brand</h1>
                 </RouterLink>
               </Button>
@@ -39,8 +40,7 @@ const props = defineProps<NavbarProps>();
         <h1 class="font-bold">{{ props.title }}</h1>
       </div>
       <div class="flex flex-1 items-center space-x-2 justify-end">
-        <!-- <ModeToggle />
-        <UserNav /> -->
+        <DarkModeToggle />
       </div>
     </div>
   </header>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 75c8ba5..b06f452 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { type HTMLAttributes, computed } from "vue";
 import {
   DialogClose,
   DialogContent,
@@ -8,37 +8,37 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { type SheetVariants, sheetVariants } from '.'
-import { cn } from '@/utils/classname'
+} from "radix-vue";
+import { type SheetVariants, sheetVariants } from ".";
+import { cn } from "@/utils/classname";
+import { Icon } from "@iconify/vue";
 
 interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes['class']
-  side?: SheetVariants['side']
+  class?: HTMLAttributes["class"];
+  side?: SheetVariants["side"];
 }
 
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-const props = defineProps<SheetContentProps>()
+const props = defineProps<SheetContentProps>();
 
-const emits = defineEmits<DialogContentEmits>()
+const emits = defineEmits<DialogContentEmits>();
 
 const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props
+  const { class: _, side, ...delegated } = props;
 
-  return delegated
-})
+  return delegated;
+});
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"
@@ -49,7 +49,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
       >
-        <X class="w-4 h-4 text-muted-foreground" />
+        <Icon icon="lucide:x" class="w-4 h-4 text-muted-foreground" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/src/components/ui/sidebar/Sidebar.vue b/src/components/ui/sidebar/Sidebar.vue
index e4e6393..3b67547 100644
--- a/src/components/ui/sidebar/Sidebar.vue
+++ b/src/components/ui/sidebar/Sidebar.vue
@@ -3,8 +3,8 @@ import { cn } from "@/utils/classname";
 import { Button } from "@/components/ui/button";
 import SidebarToggle from "./SidebarToggle.vue";
 import SidebarMenu from "./SidebarMenu.vue";
-import { PanelsTopLeft } from "lucide-vue-next";
 import { useSidebarStore } from "@/stores/use-sidebar";
+import { Icon } from "@iconify/vue";
 
 const sidebar = useSidebarStore();
 </script>
@@ -33,7 +33,7 @@ const sidebar = useSidebarStore();
         asChild
       >
         <RouterLink to="/" class="flex items-center gap-2">
-          <PanelsTopLeft class="w-6 h-6 mr-1" />
+          <Icon icon="lucide:panels-top-left" class="w-6 h-6 mr-1" />
           <h1
             :class="
               cn(
diff --git a/src/components/ui/sidebar/SidebarMenu.vue b/src/components/ui/sidebar/SidebarMenu.vue
index bca13af..26b6774 100644
--- a/src/components/ui/sidebar/SidebarMenu.vue
+++ b/src/components/ui/sidebar/SidebarMenu.vue
@@ -3,10 +3,10 @@ import { cn } from "@/utils/classname";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { Ellipsis, icons, LogOut } from "lucide-vue-next";
 import SidebarMenuCollapsible from "./SidebarMenuCollapsible.vue";
 import { useSidebarStore } from "@/stores/use-sidebar";
 import { onMounted } from "vue";
+import { Icon } from "@iconify/vue";
 
 type SidebarMenuProps = { isOpen: boolean };
 const props = defineProps<SidebarMenuProps>();
@@ -41,7 +41,7 @@ onMounted(function () {
             <Tooltip>
               <TooltipTrigger class="w-full">
                 <div class="w-full flex justify-center items-center">
-                  <Ellipsis class="h-5 w-5" />
+                  <Icon icon="lucide:ellipsis" class="h-5 w-5" />
                 </div>
               </TooltipTrigger>
               <TooltipContent side="right">
@@ -62,7 +62,7 @@ onMounted(function () {
                     >
                       <RouterLink :to="submenu.href">
                         <span :class="cn(props.isOpen === false ? '' : 'mr-4')">
-                          <component :is="icons[submenu.icon]" class="w-4" />
+                          <Icon :icon="submenu.icon" class="w-4" />
                         </span>
                         <p
                           :class="
@@ -110,7 +110,7 @@ onMounted(function () {
                   ]"
                 >
                   <span :class="cn(props.isOpen === false ? '' : 'mr-4')">
-                    <LogOut class="w-4" />
+                    <Icon icon="lucide:log-out" class="w-4" />
                   </span>
                   <p
                     :class="
diff --git a/src/components/ui/sidebar/SidebarMenuCollapsible.vue b/src/components/ui/sidebar/SidebarMenuCollapsible.vue
index 413d335..1859eaa 100644
--- a/src/components/ui/sidebar/SidebarMenuCollapsible.vue
+++ b/src/components/ui/sidebar/SidebarMenuCollapsible.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ChevronDown, Dot, icons } from "lucide-vue-next";
 import { computed, ref } from "vue";
 import { Button } from "@/components/ui/button";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
@@ -14,6 +13,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { DropdownMenuArrow } from "radix-vue";
 import { SidebarMenu } from ".";
+import { Icon } from "@iconify/vue";
 
 type SidebarMenuCollapsibleProps = SidebarMenu & { isOpen: boolean };
 
@@ -33,7 +33,7 @@ function setIsCollapsed(value: boolean) {
         <div class="w-full items-center flex justify-between">
           <div class="flex items-center">
             <span class="mr-4">
-              <component :is="icons[props.icon]" class="w-4" />
+              <Icon :icon="props.icon" class="w-4" />
             </span>
             <p
               :class="[
@@ -50,7 +50,7 @@ function setIsCollapsed(value: boolean) {
               props.isOpen ? 'translate-x-0 opacity-100' : '-translate-x-96 opacity-0',
             ]"
           >
-            <ChevronDown class="w-4 transition-transform duration-200" />
+            <Icon icon="lucide:chevron-down" class="w-4 transition-transform duration-200" />
           </div>
         </div>
       </Button>
@@ -66,7 +66,7 @@ function setIsCollapsed(value: boolean) {
         >
           <RouterLink :to="submenu.href">
             <span class="mr-4 ml-2">
-              <Dot class="w-4" />
+              <Icon icon="lucide:dot" class="w-4" />
             </span>
             <p
               :class="[
@@ -93,7 +93,7 @@ function setIsCollapsed(value: boolean) {
               <div class="w-full items-center flex justify-between">
                 <div class="flex items-center">
                   <span :class="[isOpen === false ? '' : 'mr-4']">
-                    <component :is="icons[props.icon]" class="w-4" />
+                    <Icon :icon="props.icon" class="w-4" />
                   </span>
                   <p
                     :class="[
diff --git a/src/components/ui/sidebar/SidebarToggle.vue b/src/components/ui/sidebar/SidebarToggle.vue
index 8e2de1d..be80b34 100644
--- a/src/components/ui/sidebar/SidebarToggle.vue
+++ b/src/components/ui/sidebar/SidebarToggle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ChevronLeft } from "lucide-vue-next";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/utils/classname";
+import { Icon } from "@iconify/vue";
 
 interface SidebarToggleProps {
   isOpen: boolean;
@@ -14,7 +14,8 @@ const props = defineProps<SidebarToggleProps>();
 <template>
   <div class="invisible lg:visible absolute top-[12px] -right-[16px] z-20">
     <Button @click="props.setIsOpen" class="rounded-md w-8 h-8" variant="outline" size="icon">
-      <ChevronLeft
+      <Icon
+        icon="lucide:chevron-left"
         :class="
           cn(
             'h-4 w-4 transition-transform ease-in-out duration-700',
diff --git a/src/layouts/LayoutAuth.vue b/src/layouts/LayoutAuth.vue
index 28d1fad..e9c20e6 100644
--- a/src/layouts/LayoutAuth.vue
+++ b/src/layouts/LayoutAuth.vue
@@ -44,5 +44,3 @@ import { baseURL } from "@/utils/baseurl";
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/src/stores/use-global.ts b/src/stores/use-global.ts
index 9688029..07e8999 100644
--- a/src/stores/use-global.ts
+++ b/src/stores/use-global.ts
@@ -1,4 +1,5 @@
 import { IsEmpty } from "@/utils/is-empty";
+import { useDark } from "@vueuse/core";
 import { defineStore } from "pinia";
 
 interface Locale {
@@ -7,8 +8,6 @@ interface Locale {
 }
 
 interface State {
-  theme: string;
-  themeList: string[];
   locale: Locale;
   localeList: Locale[];
 }
@@ -18,12 +17,9 @@ export const useGlobalStore = () => {
   const axios = window.axios;
   const i18n = window.i18n.global;
 
-  const defaultTheme = storage.getItem("theme") || "dark";
   return defineStore({
     id: "global",
     state: (): State => ({
-      theme: defaultTheme,
-      themeList: ["dark", "light"],
       locale: null,
       localeList: [
         {
@@ -37,10 +33,11 @@ export const useGlobalStore = () => {
       ],
     }),
     actions: {
-      loadTheme(theme?: string) {
-        this.theme = theme ? theme : defaultTheme;
-        storage.setItem("theme", this.theme);
-        document.querySelector("html").setAttribute("data-theme", this.theme);
+      async loadDarkMode() {
+        const isDarkMode = useDark();
+        if (isDarkMode.value) {
+          document.querySelector("html").setAttribute("class", "dark");
+        }
       },
 
       async loadLocale(localeCode?: string) {
@@ -65,8 +62,6 @@ export const useGlobalStore = () => {
       },
 
       setI18nHtmlAttribute(localeCode: string) {
-        const storage = window.storage;
-        const axios = window.axios;
         const i18n = window.i18n;
 
         i18n.global.locale = localeCode;
diff --git a/yarn.lock b/yarn.lock
index 7e1c994..30ad44f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -214,6 +214,32 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@iconify-json/lucide@^1.1.198":
+  version "1.1.198"
+  resolved "https://registry.yarnpkg.com/@iconify-json/lucide/-/lucide-1.1.198.tgz#73654712e886c562a2b7033d8d19a3ecfce83377"
+  integrity sha512-XFALR7z8cNMpoY6SGbw12GgqAdxhouAGE4KPYNUdwovcup6miwPZRrghyi2nSz15/E2xpwfZBpmwnUJUmdt6mQ==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify-json/radix-icons@^1.1.14":
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/@iconify-json/radix-icons/-/radix-icons-1.1.14.tgz#3cdab4e371e5dbabae8ab6fa433e2863b5e2ebd5"
+  integrity sha512-AYBOyhnJ2hXlg3aIn8Ekphrr7zHRyz1l8x6bidM3PDUuTL+aRt8r6cpCvN3GeuTHy2JOhmihbVJRF0bt2FF7Ag==
+  dependencies:
+    "@iconify/types" "*"
+
+"@iconify/types@*", "@iconify/types@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
+  integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
+
+"@iconify/vue@^4.1.2":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@iconify/vue/-/vue-4.1.2.tgz#b76135785ca366b29bf0736eee9cfefc1c2ef79e"
+  integrity sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==
+  dependencies:
+    "@iconify/types" "^2.0.0"
+
 "@internationalized/date@^3.5.4":
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.5.4.tgz#49ba11634fd4350b7a9308e297032267b4063c44"
@@ -2310,11 +2336,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lucide-vue-next@^0.398.0:
-  version "0.398.0"
-  resolved "https://registry.yarnpkg.com/lucide-vue-next/-/lucide-vue-next-0.398.0.tgz#1f261bb427610fb028e6a35ee31347e6e1c96f55"
-  integrity sha512-6aSaWm6SZju/ih+PNkgpJaH3vyyg9cmj4ixRXNGTkdJpolP0aQPMSXz3C0yAFbTCazKH0PHLpXr/flVbtWHS9A==
-
 magic-string@^0.30.10, magic-string@^0.30.5, magic-string@^0.30.8:
   version "0.30.10"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"