diff --git a/app/components/MobileMenu.tsx b/app/components/MobileMenu.tsx
index f0edcc44..eec7889a 100644
--- a/app/components/MobileMenu.tsx
+++ b/app/components/MobileMenu.tsx
@@ -12,6 +12,7 @@ import {
   AccordionIcon,
   AccordionPanel,
   AccordionTitle,
+  Button,
   Drawer,
   DrawerContent,
   DrawerOverlay,
@@ -78,11 +79,11 @@ const MobileMenu = () => {
         <button onClick={() => setShowDrawer(!showDrawer)}>
           {active ? (
             <span>
-              <X size={24} color="#455468" />
+              <X size={24} className="text-metal-900 dark:text-white" />
             </span>
           ) : (
             <span>
-              <List size={24} color="#455468" />
+              <List size={24} className="text-metal-900 dark:text-white" />
             </span>
           )}
         </button>
@@ -91,11 +92,9 @@ const MobileMenu = () => {
       <Drawer onClose={() => setShowDrawer(!showDrawer)} isOpen={showDrawer} position="right">
         <DrawerOverlay />
         <DrawerContent className="space-y-3 rounded-none p-6">
-          <button
-            onClick={() => setShowDrawer(!showDrawer)}
-            className="mb-4 max-w-max rounded-lg bg-metal-900 p-3 dark:bg-metal-800">
-            <ArrowLeft className="size-5 text-white dark:text-white" />
-          </button>
+          <Button onClick={() => setShowDrawer(!showDrawer)} color="secondary" className="mb-4 max-w-max p-3">
+            <ArrowLeft className="size-5 text-white dark:text-metal-900" />
+          </Button>
           <Accordion flush openFirstPanel>
             <AccordionPanel className="!border-b-0">
               <AccordionContainer className="p-0">
diff --git a/app/docs/components/datePicker/variant/DateRangePicker.tsx b/app/docs/components/datePicker/variant/DateRangePicker.tsx
index 5681e9e4..3ba3ef63 100644
--- a/app/docs/components/datePicker/variant/DateRangePicker.tsx
+++ b/app/docs/components/datePicker/variant/DateRangePicker.tsx
@@ -44,7 +44,7 @@ export const DatePickerComponent = () => {
     <Popover showArrow={false} placement="bottom-start">
       <PopoverTrigger asChild>
         <Button
-           className="w-[286px] justify-start gap-2 rounded-xl border border-metal-50 px-4 text-left text-body-4 font-normal text-metal-600 hover:bg-white active:focus:scale-100 dark:border-metal-900 dark:bg-metal-900 dark:text-white dark:hover:bg-metal-800"
+          className="w-[286px] justify-start gap-2 rounded-xl border border-metal-50 px-4 text-left text-body-4 font-normal text-metal-600 hover:bg-white active:focus:scale-100 dark:border-metal-900 dark:bg-metal-900 dark:text-white dark:hover:bg-metal-800"
           variant="outline"
           color="secondary">
           <Calendar size={20} className="text-metal-400 dark:text-white" />
diff --git a/app/docs/components/drawer/variant/DefaultDrawer.tsx b/app/docs/components/drawer/variant/DefaultDrawer.tsx
index f013bc40..8c761ed1 100644
--- a/app/docs/components/drawer/variant/DefaultDrawer.tsx
+++ b/app/docs/components/drawer/variant/DefaultDrawer.tsx
@@ -18,7 +18,7 @@ const DefaultDrawer = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
@@ -49,7 +49,7 @@ export const DrawerComponent = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
diff --git a/app/docs/components/drawer/variant/DrawerPosition.tsx b/app/docs/components/drawer/variant/DrawerPosition.tsx
index 99082e67..fe0505dd 100644
--- a/app/docs/components/drawer/variant/DrawerPosition.tsx
+++ b/app/docs/components/drawer/variant/DrawerPosition.tsx
@@ -30,7 +30,7 @@ const DrawerPosition = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+            <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
@@ -73,7 +73,7 @@ export const DrawerComponent = () => {
               Elevate your web projects with Keep React&apos;s 40+ customizable components. Access open-source resources
               for efficient development and bring your ideas to life with ease.
             </p>
-            <Button onClick={() => setIsOpen(false)} className="bg-metal-900 dark:bg-metal-800" color="secondary">
+           <Button onClick={() => setIsOpen(false)} color="secondary">
               Explore Now
             </Button>
           </div>
diff --git a/app/docs/components/dropdown/variant/CustomDropdown.tsx b/app/docs/components/dropdown/variant/CustomDropdown.tsx
index 3646583a..7a96ddb5 100644
--- a/app/docs/components/dropdown/variant/CustomDropdown.tsx
+++ b/app/docs/components/dropdown/variant/CustomDropdown.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Button, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const dropdownData = [
   {
@@ -36,11 +36,7 @@ const dropdownData = [
 const CustomDropdown = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           {dropdownData.map((data) => (
@@ -61,16 +57,12 @@ const CustomDropdown = () => {
 }
 
 const CustomDropdownCode = `
-import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList ,Button } from 'keep-react'
+import { Avatar, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           {dropdownData.map((data) => (
diff --git a/app/docs/components/dropdown/variant/DefaultDropdown.tsx b/app/docs/components/dropdown/variant/DefaultDropdown.tsx
index 0f13a8c6..5d2896a7 100644
--- a/app/docs/components/dropdown/variant/DefaultDropdown.tsx
+++ b/app/docs/components/dropdown/variant/DefaultDropdown.tsx
@@ -1,13 +1,9 @@
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DefaultDropdown = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>Contacts</DropdownItem>
@@ -26,16 +22,12 @@ const DefaultDropdown = () => {
 }
 
 const DefaultDropdownCode = `
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button }  from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList }  from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>Contacts</DropdownItem>
diff --git a/app/docs/components/dropdown/variant/DropdownTrigger.tsx b/app/docs/components/dropdown/variant/DropdownTrigger.tsx
index 3a641eb9..4dd2ab57 100644
--- a/app/docs/components/dropdown/variant/DropdownTrigger.tsx
+++ b/app/docs/components/dropdown/variant/DropdownTrigger.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DropdownTrigger = () => {
   return (
     <Dropdown trigger="hover">
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
@@ -51,16 +47,12 @@ const DropdownTrigger = () => {
 const DropdownTriggerCode = `
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button } from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown trigger="hover">
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+     <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
diff --git a/app/docs/components/dropdown/variant/DropdownWithIcon.tsx b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx
index ee005af4..738c0e83 100644
--- a/app/docs/components/dropdown/variant/DropdownWithIcon.tsx
+++ b/app/docs/components/dropdown/variant/DropdownWithIcon.tsx
@@ -1,15 +1,11 @@
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Button, Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList } from '../../../../src'
 
 const DropdownWithIcon = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
@@ -51,16 +47,12 @@ const DropdownWithIcon = () => {
 const DropdownWithIconCode = `
 'use client'
 import { ChartPieSlice, Copy, Pen, Phone, SignOut, UserCircle, Users } from 'phosphor-react'
-import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList, Button} from 'keep-react'
+import { Divider, Dropdown, DropdownAction, DropdownContent, DropdownItem, DropdownList} from 'keep-react'
 
 export const DropdownComponent = () => {
   return (
     <Dropdown>
-      <DropdownAction asChild>
-        <Button color="secondary" size="xs">
-          Dropdown
-        </Button>
-      </DropdownAction>
+      <DropdownAction>Dropdown</DropdownAction>
       <DropdownContent>
         <DropdownList>
           <DropdownItem>
diff --git a/app/docs/components/sidebar/variant/SidebarWithIcon.tsx b/app/docs/components/sidebar/variant/SidebarWithIcon.tsx
index 3e25d4e4..5d1cec88 100644
--- a/app/docs/components/sidebar/variant/SidebarWithIcon.tsx
+++ b/app/docs/components/sidebar/variant/SidebarWithIcon.tsx
@@ -38,7 +38,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <HouseLine size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Home</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Home
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -46,7 +48,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <PresentationChart size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Dashboard</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Dashboard
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -54,7 +58,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <Stack size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Projects</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Projects
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -62,7 +68,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <CheckSquare size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Tasks</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Tasks
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -70,7 +78,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <ChartPie size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Reporting</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Reporting
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -78,7 +88,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <Users size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Users</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Users
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -86,7 +98,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <Lifebuoy size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Support</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Support
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
             <SidebarItem>
@@ -94,7 +108,9 @@ const SidebarWithIcon = () => {
                 <TooltipAction asChild>
                   <Gear size={20} />
                 </TooltipAction>
-                <TooltipContent className="rounded-none text-body-5 font-normal text-white">Settings</TooltipContent>
+                <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                  Settings
+                </TooltipContent>
               </Tooltip>
             </SidebarItem>
           </SidebarList>
@@ -105,7 +121,9 @@ const SidebarWithIcon = () => {
               <TooltipAction asChild>
                 <SignOut size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Log Out</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">
+                Log Out
+              </TooltipContent>
             </Tooltip>
           </SidebarItem>
         </SidebarFooter>
@@ -154,7 +172,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <HouseLine size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Home</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Home</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -162,7 +180,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <PresentationChart size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Dashboard</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Dashboard</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -170,7 +188,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <Stack size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Projects</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Projects</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -178,7 +196,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <CheckSquare size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Tasks</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Tasks</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -186,7 +204,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <ChartPie size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Reporting</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Reporting</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -194,7 +212,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <Users size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Users</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Users</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -202,7 +220,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <Lifebuoy size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Support</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Support</TooltipContent>
             </Tooltip>
           </SidebarItem>
           <SidebarItem>
@@ -210,7 +228,7 @@ export const SidebarComponent = () => {
               <TooltipAction asChild>
                 <Gear size={20} />
               </TooltipAction>
-              <TooltipContent className="rounded-none text-body-5 font-normal text-white">Settings</TooltipContent>
+              <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Settings</TooltipContent>
             </Tooltip>
           </SidebarItem>
         </SidebarList>
@@ -221,7 +239,7 @@ export const SidebarComponent = () => {
             <TooltipAction asChild>
               <SignOut size={20} />
             </TooltipAction>
-            <TooltipContent className="rounded-none text-body-5 font-normal text-white">Log Out</TooltipContent>
+            <TooltipContent className="rounded-none text-body-5 font-normal text-white dark:text-metal-900">Log Out</TooltipContent>
           </Tooltip>
         </SidebarItem>
       </SidebarFooter>
diff --git a/app/docs/components/tooltip/variant/DefaultTooltip.tsx b/app/docs/components/tooltip/variant/DefaultTooltip.tsx
index 3d8eb5a2..0ddd3a40 100644
--- a/app/docs/components/tooltip/variant/DefaultTooltip.tsx
+++ b/app/docs/components/tooltip/variant/DefaultTooltip.tsx
@@ -6,7 +6,7 @@ const DefaultTooltip = () => {
       <Tooltip>
         <TooltipAction>Tooltip</TooltipAction>
         <TooltipContent>
-          <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+          <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
         </TooltipContent>
       </Tooltip>
     </div>
@@ -21,7 +21,7 @@ export const TooltipComponent = () => {
     <Tooltip>
       <TooltipAction>Tooltip</TooltipAction>
       <TooltipContent>
-        <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+        <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
       </TooltipContent>
     </Tooltip>
   )
diff --git a/app/docs/components/tooltip/variant/TooltipPlacement.tsx b/app/docs/components/tooltip/variant/TooltipPlacement.tsx
index c70d31c5..0b2ddedc 100644
--- a/app/docs/components/tooltip/variant/TooltipPlacement.tsx
+++ b/app/docs/components/tooltip/variant/TooltipPlacement.tsx
@@ -7,7 +7,7 @@ const TooltipPlacement = () => {
         <Tooltip placement={position as 'bottom' | 'top' | 'left' | 'right'} key={position}>
           <TooltipAction>Tooltip</TooltipAction>
           <TooltipContent>
-            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+            <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
           </TooltipContent>
         </Tooltip>
       ))}
@@ -25,7 +25,7 @@ export const TooltipComponent = () => {
         <Tooltip placement={position} key={position}>
           <TooltipAction>Tooltip</TooltipAction>
           <TooltipContent>
-            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+            <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
           </TooltipContent>
         </Tooltip>
       ))}
diff --git a/app/docs/components/tooltip/variant/TooltipTriggering.tsx b/app/docs/components/tooltip/variant/TooltipTriggering.tsx
index ebbdf4fd..dc5f4555 100644
--- a/app/docs/components/tooltip/variant/TooltipTriggering.tsx
+++ b/app/docs/components/tooltip/variant/TooltipTriggering.tsx
@@ -7,7 +7,7 @@ const TooltipTriggering = () => {
         <Tooltip trigger={trigger as 'click' | 'hover' | 'focus'} key={trigger}>
           <TooltipAction>{trigger}</TooltipAction>
           <TooltipContent>
-            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+            <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
           </TooltipContent>
         </Tooltip>
       ))}
@@ -25,7 +25,7 @@ export const TooltipComponent = () => {
         <Tooltip trigger={trigger} key={trigger}>
           <TooltipAction>{trigger}</TooltipAction>
           <TooltipContent>
-            <p className="text-body-5 font-medium text-white">Tooltips - Title here</p>
+            <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
           </TooltipContent>
         </Tooltip>
       ))}
diff --git a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx
index 306adf01..89cd3f32 100644
--- a/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx
+++ b/app/docs/components/tooltip/variant/TooltipWithLargeText.tsx
@@ -6,8 +6,8 @@ const TooltipWithLargeText = () => {
       <Tooltip>
         <TooltipAction>Tooltip</TooltipAction>
         <TooltipContent className="px-4 py-3">
-          <p className="mb-1 text-body-3 font-medium text-white">Tooltips - Title here</p>
-          <p className="text-body-5 font-normal text-white/80">
+          <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
+          <p className="text-body-5 font-normal text-white/80 dark:text-metal-600">
             Lorem Ipsum is simply dummy text of the printing and typesetting industry.
           </p>
         </TooltipContent>
@@ -24,8 +24,8 @@ export const TooltipComponent = () => {
     <Tooltip>
       <TooltipAction>Tooltip</TooltipAction>
       <TooltipContent className="px-4 py-3">
-        <p className="mb-1 text-body-3 font-medium text-white">Tooltips - Title here</p>
-        <p className="text-body-5 font-normal text-white/80">
+        <p className="text-body-5 font-medium text-white dark:text-metal-900">Tooltips - Title here</p>
+        <p className="text-body-5 font-normal text-white/80 dark:text-metal-600">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         </p>
       </TooltipContent>
diff --git a/app/docs/getting-started/dark-mode/Code/index.ts b/app/docs/getting-started/dark-mode/Code/index.ts
index d15d5162..e8b9a7cd 100644
--- a/app/docs/getting-started/dark-mode/Code/index.ts
+++ b/app/docs/getting-started/dark-mode/Code/index.ts
@@ -182,7 +182,7 @@ const ThemeSwitcher = () => {
   }, [])
 
   return client ? (
-    <Dropdown placement="bottom-end">
+    <Dropdown placement="bottom-start">
       <DropdownAction asChild>
         <button className="rounded-lg bg-primary-25 p-2.5 dark:bg-white">
           <MoonStars size={20} color="#1C222B" className="hidden dark:block" />
diff --git a/app/docs/getting-started/dark-mode/ViteThemeSwitch.tsx b/app/docs/getting-started/dark-mode/ViteThemeSwitch.tsx
index a3288d25..51bdd4f5 100644
--- a/app/docs/getting-started/dark-mode/ViteThemeSwitch.tsx
+++ b/app/docs/getting-started/dark-mode/ViteThemeSwitch.tsx
@@ -19,7 +19,7 @@ const ViteThemeSwitcher = () => {
   }, [])
 
   return client ? (
-    <Dropdown placement="bottom-end">
+    <Dropdown placement="bottom-start">
       <DropdownAction asChild>
         <button className="rounded-lg bg-primary-25 p-2.5 dark:bg-white">
           <MoonStars size={20} color="#1C222B" className="hidden dark:block" />
diff --git a/app/src/components/Charts/CustomTooltip.tsx b/app/src/components/Charts/CustomTooltip.tsx
index 9b93b08c..d89bfffb 100644
--- a/app/src/components/Charts/CustomTooltip.tsx
+++ b/app/src/components/Charts/CustomTooltip.tsx
@@ -10,7 +10,7 @@ const CustomTooltip = ({
   labelClassName,
   wrapperClassName,
 }: TooltipProps<ValueType, NameType>) => {
-  if (active && payload && payload.length) {
+  if (active && payload?.length) {
     return (
       <div className={cn('max-w-max rounded-md bg-primary-500 p-3', wrapperClassName)}>
         <p className={cn('text-body-3 font-semibold capitalize text-white', labelClassName)}>{label}</p>
diff --git a/app/src/components/Checkbox/Checkbox.tsx b/app/src/components/Checkbox/Checkbox.tsx
index 92932610..99e13d2c 100644
--- a/app/src/components/Checkbox/Checkbox.tsx
+++ b/app/src/components/Checkbox/Checkbox.tsx
@@ -12,22 +12,28 @@ const Checkbox = forwardRef<HTMLInputElement, InputProps>(({ className, variant
   if (variant === 'rounded' || variant === 'circle') {
     btnClass = cn(checkboxTheme.button.shape.base, checkboxTheme.button.shape[variant], className)
   }
-
+  if (variant === 'dashed' || variant === 'checked') {
+    btnClass = cn(checkboxTheme.button.base, checkboxTheme.button.shape[variant], className)
+  }
   return (
     <span>
       <input ref={ref} {...props} type="checkbox" className={cn(checkboxTheme.input.base)} />
-      <button className={btnClass}>
-        {variant === 'checked' && (
-          <svg width={12} height={12} className="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+      <button className={btnClass}></button>
+      {/* {variant === 'checked' && (
+          <svg
+            width={12}
+            height={12}
+            className="fill-white opacity-0 peer-checked:opacity-100"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256">
             <path d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"></path>
           </svg>
         )}
         {variant === 'dashed' && (
-          <svg xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 256 256">
+          <svg className="fill-white opacity-0 peer-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" width={12} height={12} viewBox="0 0 256 256">
             <path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z"></path>
           </svg>
-        )}
-      </button>
+        )} */}
     </span>
   )
 })
diff --git a/app/src/components/Checkbox/theme.ts b/app/src/components/Checkbox/theme.ts
index ba4a66ec..4dd1e009 100644
--- a/app/src/components/Checkbox/theme.ts
+++ b/app/src/components/Checkbox/theme.ts
@@ -8,6 +8,8 @@ interface KeepCheckboxTheme {
       base: string
       rounded: string
       circle: string
+      checked: string
+      dashed: string
     }
   }
 }
@@ -17,11 +19,15 @@ export const checkboxTheme: KeepCheckboxTheme = {
     base: 'peer absolute h-5 w-5 cursor-pointer opacity-0 peer-checked:before:h-2.5 peer-checked:before:w-2.5',
   },
   button: {
-    base: 'flex h-5 w-5 items-center justify-center rounded border fill-white peer-checked:bg-metal-900 peer-disabled:opacity-50',
+    base: 'flex h-5 w-5 items-center justify-center rounded border fill-white peer-disabled:opacity-50',
     shape: {
       base: 'pointer-events-none relative flex h-5 w-5 cursor-pointer items-center justify-center border border-metal-200 dark:border-metal-25 opacity-100 peer-checked:border-metal-900 dark:peer-checked:border-metal-25 peer-checked:before:h-2.5 peer-checked:before:w-2.5 peer-checked:before:bg-metal-900 dark:peer-checked:before:bg-metal-25 peer-disabled:opacity-50',
       rounded: 'before:rounded-sm rounded',
       circle: 'before:rounded-full rounded-full',
+      checked:
+        'pointer-events-none relative flex h-5 w-5 cursor-pointer items-center justify-center border border-metal-200 dark:border-metal-25 opacity-100 peer-checked:border-metal-900 dark:peer-checked:border-metal-25 peer-checked:before:content-checkedLight dark:peer-checked:before:content-checkedDark peer-disabled:opacity-50',
+      dashed:
+        'pointer-events-none relative flex h-5 w-5 cursor-pointer items-center justify-center border border-metal-200 dark:border-metal-25 opacity-100 peer-checked:border-metal-900 dark:peer-checked:border-metal-25 peer-checked:before:content-dashedLight dark:peer-checked:before:content-dashedDark peer-disabled:opacity-50',
     },
   },
 }
diff --git a/app/src/components/DatePicker/DatePicker.tsx b/app/src/components/DatePicker/DatePicker.tsx
index 825f4abc..4725e2b6 100644
--- a/app/src/components/DatePicker/DatePicker.tsx
+++ b/app/src/components/DatePicker/DatePicker.tsx
@@ -10,14 +10,14 @@ const DatePicker = ({ className, classNames, showOutsideDays = true, ...props }:
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        'flex max-w-min rounded-xl border border-metal-50 bg-white p-5 dark:border-metal-900 dark:bg-metal-900',
+        'flex max-w-min rounded-xl border border-metal-50 bg-white p-5 dark:border-metal-800 dark:bg-metal-900',
         className,
       )}
       classNames={{
         months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
         month: 'space-y-4',
         caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-body-3 font-semibold text-metal-900',
+        caption_label: 'text-body-3 font-semibold text-metal-900 dark:text-white',
         nav: 'space-x-1 flex items-center',
         nav_button:
           'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 inline-flex items-center justify-center whitespace-nowrap rounded-lg text-body-4 font-medium ring-offset-1 transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-metal-50 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50 hover:bg-metal-25 hover:text-metal-900 border border-metal-200 dark:border-metal-700 dark:fill-white dark:hover:bg-metal-800 dark:hover:border-metal-800',
@@ -33,30 +33,23 @@ const DatePicker = ({ className, classNames, showOutsideDays = true, ...props }:
             ? '[&:has(>.day-range-end)]:rounded-r-xl [&:has(>.day-range-start)]:rounded-l-xl first:[&:has([aria-selected])]:rounded-l-xl last:[&:has([aria-selected])]:rounded-r-xl'
             : '[&:has([aria-selected])]:rounded-xl',
         ),
-        day: 'h-10 w-10 p-0 font-normal aria-selected:opacity-100 inline-flex items-center justify-center whitespace-nowrap rounded-lg text-body-4 font-medium ring-offset-metal-50` transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-metal-50 focus-visible:ring-offset-1 disabled:pointer-events-none day-outside disabled:opacity-50 hover:bg-metal-50 dark:hover:bg-metal-800',
+        day: 'h-10 w-10 p-0 font-normal aria-selected:opacity-100 inline-flex items-center justify-center whitespace-nowrap rounded-lg text-body-4 font-medium ring-offset-metal-50 transition-colors focus-visible:outline-none focus-visible:ring focus-visible:ring-metal-50 focus-visible:ring-offset-1 disabled:pointer-events-none day-outside disabled:opacity-50 hover:bg-metal-50 dark:hover:bg-metal-800 text-metal-900 dark:text-white dark:aria-selected:text-metal-900',
         day_range_end: 'day-range-end',
         day_range_start: 'day-range-start',
         day_selected:
-          'bg-metal-900 dark:bg-metal-800 text-white hover:bg-metal-800 hover:text-white focus:bg-metal-900 focus:text-white',
-        day_today: 'bg-metal-50 dark:bg-metal-800 dark:text-white text-metal-900',
+          'bg-metal-900 dark:bg-white text-white hover:bg-metal-800 dark:hover:bg-white dark:text-metal-900 hover:text-white focus:bg-metal-900 focus:text-white ',
+        day_today: 'bg-metal-50 dark:bg-metal-800 dark:text-white text-metal-900 dark:aria-selected:text-metal-900',
         day_outside:
-          'day-outside text-metal-300 aria-selected:text-metal-400 aria-selected:bg-metal-100 aria-selected:text-metal-400 dark:text-metal-600 dark:aria-selected:text-metal-400 dark:aria-selected:bg-metal-700',
+          'day-outside !text-metal-300 aria-selected:text-metal-400 aria-selected:bg-metal-100 aria-selected:text-metal-400 dark:!text-metal-600 dark:aria-selected:!text-metal-300 dark:aria-selected:bg-metal-700',
         day_disabled: 'text-metal-100 opacity-50',
-        day_range_middle: 'aria-selected:bg-metal-50 aria-selected:text-metal-500 dark:aria-selected:bg-metal-700',
+        day_range_middle:
+          'aria-selected:bg-metal-50 aria-selected:text-metal-500 dark:aria-selected:bg-metal-700 dark:aria-selected:!text-white',
         day_hidden: 'invisible',
         ...classNames,
       }}
       components={{
-        IconLeft: () => (
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 256 256">
-            <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
-          </svg>
-        ),
-        IconRight: () => (
-          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 256 256">
-            <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
-          </svg>
-        ),
+        IconLeft: LeftIcon,
+        IconRight: RightIcon,
       }}
       {...props}
     />
@@ -64,4 +57,19 @@ const DatePicker = ({ className, classNames, showOutsideDays = true, ...props }:
 }
 DatePicker.displayName = 'DatePicker'
 
+const RightIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 256 256">
+      <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
+    </svg>
+  )
+}
+const LeftIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" viewBox="0 0 256 256">
+      <path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path>
+    </svg>
+  )
+}
+
 export { DatePicker }
diff --git a/app/src/components/Dropdown/Action.tsx b/app/src/components/Dropdown/Action.tsx
index 5bd846a6..02f446bb 100644
--- a/app/src/components/Dropdown/Action.tsx
+++ b/app/src/components/Dropdown/Action.tsx
@@ -2,8 +2,8 @@
 import { useMergeRefs } from '@floating-ui/react'
 import { HTMLAttributes, cloneElement, forwardRef, isValidElement } from 'react'
 import { cn } from '../../helpers/cn'
+import { Button } from '../Button'
 import { useDropdownContext } from './Context'
-import { dropdownTheme } from './theme'
 
 export interface DropdownActionProps extends HTMLAttributes<HTMLButtonElement> {
   asChild?: boolean
@@ -28,9 +28,14 @@ export const DropdownAction = forwardRef<HTMLButtonElement, DropdownActionProps>
       )
     }
     return (
-      <button ref={refs.setReference || ref} {...getReferenceProps()} className={cn(dropdownTheme.action, className)}>
+      <Button
+        color="secondary"
+        size="xs"
+        ref={refs.setReference || ref}
+        {...getReferenceProps()}
+        className={cn(className)}>
         {children}
-      </button>
+      </Button>
     )
   },
 )
diff --git a/app/src/components/Dropdown/theme.ts b/app/src/components/Dropdown/theme.ts
index 2aac36d4..af99fe72 100644
--- a/app/src/components/Dropdown/theme.ts
+++ b/app/src/components/Dropdown/theme.ts
@@ -1,12 +1,9 @@
 interface DropdownInterface {
-  action: string
   root: string
   item: string
 }
 
 export const dropdownTheme: DropdownInterface = {
-  action:
-    'inline-block cursor-pointer select-none rounded-lg border border-metal-200 dark:border-metal-900 dark:bg-metal-900 bg-metal-900 py-2 px-3.5 text-body-5 font-normal text-white',
   root: 'w-[16rem] rounded-xl border border-metal-100 dark:border-metal-800 bg-white dark:bg-metal-900 p-5 z-50 outline-none',
   item: 'flex cursor-pointer items-center gap-2 rounded p-2 text-body-4 font-medium text-metal-600 hover:bg-metal-25 dark:text-white dark:hover:bg-metal-800 transition-all duration-200',
 }
diff --git a/app/src/components/Tooltip/Action.tsx b/app/src/components/Tooltip/Action.tsx
index e70f5c5e..4081c79f 100644
--- a/app/src/components/Tooltip/Action.tsx
+++ b/app/src/components/Tooltip/Action.tsx
@@ -1,7 +1,7 @@
 'use client'
 import { useMergeRefs } from '@floating-ui/react'
 import { HTMLAttributes, cloneElement, forwardRef, isValidElement } from 'react'
-import { cn } from '../../helpers/cn'
+import { Button } from '../Button'
 import { useTooltipContext } from './Context'
 
 export interface TooltipActionProps extends HTMLAttributes<HTMLButtonElement> {
@@ -27,12 +27,9 @@ export const TooltipAction = forwardRef<HTMLButtonElement, TooltipActionProps>(
       )
     }
     return (
-      <button
-        ref={refs.setReference || ref}
-        {...getReferenceProps()}
-        className={cn('rounded-lg bg-metal-900 px-3.5 py-2 text-body-5 capitalize text-white', className)}>
+      <Button ref={refs.setReference || ref} {...getReferenceProps()} color="secondary" size="sm">
         {children}
-      </button>
+      </Button>
     )
   },
 )
diff --git a/app/src/components/Tooltip/Content.tsx b/app/src/components/Tooltip/Content.tsx
index d680aa33..ed95bbf3 100644
--- a/app/src/components/Tooltip/Content.tsx
+++ b/app/src/components/Tooltip/Content.tsx
@@ -15,11 +15,25 @@ export interface floatingArrow extends HTMLAttributes<HTMLDivElement> {
   strokeWidth?: number
   children?: ReactNode
   className?: string
+  arrowClassName?: string
 }
 
 export const TooltipContent = forwardRef<HTMLDivElement, floatingArrow>(
   (
-    { children, className, width, height, tipRadius, staticOffset, fill = '#1C222B', stroke, strokeWidth, d, ...props },
+    {
+      children,
+      className,
+      width,
+      height,
+      tipRadius,
+      staticOffset,
+      fill = '#1C222B',
+      stroke,
+      strokeWidth,
+      d,
+      arrowClassName,
+      ...props
+    },
     ref: Ref<HTMLDivElement>,
   ) => {
     const { refs, floatingStyles, arrowRef, context, getFloatingProps, isOpen, showArrow } = useTooltipContext()
@@ -27,7 +41,10 @@ export const TooltipContent = forwardRef<HTMLDivElement, floatingArrow>(
       isOpen && (
         <div
           {...props}
-          className={cn('max-w-[263px] rounded-xl border border-metal-900 bg-metal-900 px-2.5 py-2', className)}
+          className={cn(
+            'max-w-[263px] rounded-xl border border-metal-900 bg-metal-900 px-2.5 py-2 dark:border-white dark:bg-white',
+            className,
+          )}
           ref={refs.setFloating || ref}
           {...getFloatingProps()}
           style={floatingStyles}>
@@ -40,9 +57,9 @@ export const TooltipContent = forwardRef<HTMLDivElement, floatingArrow>(
               tipRadius={tipRadius}
               staticOffset={staticOffset}
               d={d}
-              fill={fill}
               stroke={stroke}
               strokeWidth={strokeWidth}
+              className={cn('fill-metal-900 dark:fill-white', arrowClassName)}
             />
           )}
           {children}
diff --git a/app/src/theme/keep-preset.ts b/app/src/theme/keep-preset.ts
index b0c4ca52..c93652e8 100644
--- a/app/src/theme/keep-preset.ts
+++ b/app/src/theme/keep-preset.ts
@@ -214,7 +214,11 @@ module.exports = {
         'keep-slide-up-back': 'slide-up-back 0.4s',
       },
       content: {
-        img: 'url("/images/avatar/verify.svg")',
+        img: 'url("https://res.cloudinary.com/arif5577/image/upload/v1719144077/verify_uaqa85.svg")',
+        checkedLight: 'url("https://res.cloudinary.com/arif5577/image/upload/v1719146139/checkedLight_xwegqy.svg")',
+        checkedDark: 'url("https://res.cloudinary.com/arif5577/image/upload/v1719146139/checkedDark_g8gcjk.svg")',
+        dashedLight: 'url("https://res.cloudinary.com/arif5577/image/upload/v1719146139/dashedLight_whvevx.svg")',
+        dashedDark: 'url("https://res.cloudinary.com/arif5577/image/upload/v1719146139/dashedDark_vx3paq.svg")',
       },
     },
   },
diff --git a/data/blogs/keep-react-v1.4.0.md b/data/blogs/keep-react-v1.4.0.md
index 6832c83e..20834aee 100644
--- a/data/blogs/keep-react-v1.4.0.md
+++ b/data/blogs/keep-react-v1.4.0.md
@@ -1,6 +1,6 @@
 ---
 title: 'Keep React V1.4.0'
-date: 'June 14, 2024'
+date: 'June 24, 2024'
 description: 'Most of the component structures are changed but the UI looks the same as before. In v1.3.0, we used components with a (.) syntax, but now we can use components with detailed JSX tags like `AlertContainer`.'
 author: Md Ariful Islam
 slug: keep-react-v1.4.0
diff --git a/public/images/icon/checkedDark.svg b/public/images/icon/checkedDark.svg
new file mode 100644
index 00000000..2fae91d5
--- /dev/null
+++ b/public/images/icon/checkedDark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#ffffff" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>
\ No newline at end of file
diff --git a/public/images/icon/checkedLight.svg b/public/images/icon/checkedLight.svg
new file mode 100644
index 00000000..844bad53
--- /dev/null
+++ b/public/images/icon/checkedLight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#1c222b" viewBox="0 0 256 256"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg>
\ No newline at end of file
diff --git a/public/images/icon/dashedDark.svg b/public/images/icon/dashedDark.svg
new file mode 100644
index 00000000..542e0d6d
--- /dev/null
+++ b/public/images/icon/dashedDark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#ffffff" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z"></path></svg>
\ No newline at end of file
diff --git a/public/images/icon/dashedLight.svg b/public/images/icon/dashedLight.svg
new file mode 100644
index 00000000..8c77a83a
--- /dev/null
+++ b/public/images/icon/dashedLight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="#1c222b" viewBox="0 0 256 256"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z"></path></svg>
\ No newline at end of file
diff --git a/routes/routes.ts b/routes/routes.ts
index ae1590fd..1ae5c111 100644
--- a/routes/routes.ts
+++ b/routes/routes.ts
@@ -465,6 +465,12 @@ export const quickAccessRoute: routerPath[] = [
     href: '/docs/layout/column',
     target: '_self',
   },
+  {
+    id: generatedID(),
+    name: 'Dark Mode',
+    href: '/docs/getting-started/dark-mode',
+    target: '_self',
+  },
 ]
 
 export const layoutRoutes: routerPath[] = [