diff --git a/apps/web/components/ui/color-mode-dropdown-menu.tsx b/apps/web/components/ui/color-mode-dropdown-menu.tsx
index 392f3b0..940e422 100644
--- a/apps/web/components/ui/color-mode-dropdown-menu.tsx
+++ b/apps/web/components/ui/color-mode-dropdown-menu.tsx
@@ -1,56 +1,39 @@
-"use client";
+'use client'
 
-import { Button } from "@ui/components/ui/button";
+import { useToolStore } from '@/store/toolStore'
+import { ColorMode } from '@/types/app'
+import { Button } from '@ui/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-} from "@ui/components/ui/dropdown-menu";
-import { useColorStore } from "@/store/store";
-import { ColorMode } from "@/types/app";
+} from '@ui/components/ui/dropdown-menu'
 function ColorModeDropdownMenu() {
-  const { colorMode, setColorMode } = useColorStore();
-  const handleChangeColorMode = async (mode: ColorMode) => {
-    setColorMode(mode);
-    // call server to set colormode cookie
-    await fetch("/api/color-mode", {
-      method: "POST",
-      body: JSON.stringify({ mode }),
-    });
-  };
+  const { colorMode, setColorMode } = useToolStore()
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className="flex items-center justify-center gap-1.5 text-sm uppercase"
-        >
+        <Button className="flex items-center justify-center gap-1.5 text-sm uppercase" variant="outline">
           <span>{colorMode}</span>
           {/* <ChevronDownIcon className="h-3.5 w-3.5" /> */}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-[8.75rem]">
-        <DropdownMenuRadioGroup
-          value={colorMode}
-          onValueChange={handleChangeColorMode}
-        >
+        <DropdownMenuRadioGroup onValueChange={setColorMode} value={colorMode}>
           {Object.values(ColorMode).map((mode) => {
             return (
-              <DropdownMenuRadioItem
-                value={mode}
-                key={mode}
-                className="uppercase"
-              >
+              <DropdownMenuRadioItem className="uppercase" key={mode} value={mode}>
                 {mode}
               </DropdownMenuRadioItem>
-            );
+            )
           })}
         </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
+  )
 }
 
-export default ColorModeDropdownMenu;
+export default ColorModeDropdownMenu
diff --git a/apps/web/components/ui/dark-mode-toggle.tsx b/apps/web/components/ui/dark-mode-toggle.tsx
index 014cfa3..0851570 100644
--- a/apps/web/components/ui/dark-mode-toggle.tsx
+++ b/apps/web/components/ui/dark-mode-toggle.tsx
@@ -1,8 +1,5 @@
 "use client";
 
-import { ChevronsUpDown, Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-
 import { Button } from "@ui/components/ui/button";
 import {
   DropdownMenu,
@@ -12,6 +9,8 @@ import {
   DropdownMenuTrigger,
 } from "@ui/components/ui/dropdown-menu";
 import { cn } from "@ui/lib/utils";
+import { ChevronsUpDown, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 
 export function ModeToggle({
   variant = "icon",
@@ -24,11 +23,11 @@ export function ModeToggle({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
-          variant="outline"
-          size={variant === "icon" ? "icon" : "default"}
           className={cn(
             variant === "list-item" && "flex h-12 items-center justify-start",
           )}
+          size={variant === "icon" ? "icon" : "default"}
+          variant="outline"
         >
           <Sun className="h-[1.2rem] w-[1.2rem] flex-shrink-0 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] flex-shrink-0 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
@@ -51,8 +50,8 @@ export function ModeToggle({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-[8.75rem]">
         <DropdownMenuRadioGroup
-          value={theme || "system"}
           onValueChange={setTheme}
+          value={theme || "system"}
         >
           <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
           <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
diff --git a/apps/web/components/ui/desktop-primary-toolbar-button.tsx b/apps/web/components/ui/desktop-primary-toolbar-button.tsx
index 6c267af..24bcbed 100644
--- a/apps/web/components/ui/desktop-primary-toolbar-button.tsx
+++ b/apps/web/components/ui/desktop-primary-toolbar-button.tsx
@@ -1,40 +1,32 @@
-"use client";
+'use client'
 
-import React from "react";
-import { Button } from "@ui/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@ui/components/tooltip";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@ui/components/tooltip'
+import { Button } from '@ui/components/ui/button'
+import React from 'react'
 
 const DesktopPreviewToolbarIcon = ({
-  title,
   description,
   icon: Icon,
+  title,
 }: {
-  title: string;
-  description: string;
-  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  description: string
+  icon: React.FC<React.SVGProps<SVGSVGElement>>
+  title: string
 }) => {
   return (
-    <TooltipProvider
-      key={`desktop-primary-toolbar-${title}`}
-      delayDuration={250}
-    >
+    <TooltipProvider delayDuration={250} key={`desktop-primary-toolbar-${title}`}>
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
-            variant="ghost"
             aria-label={title}
-            size="icon"
-            className="hidden h-8 w-8 select-none items-center rounded-sm px-1 py-1 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground lg:flex"
             asChild
+            className="hidden h-8 w-8 select-none items-center rounded-sm px-1 py-1 text-sm font-medium text-foreground/75 outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground lg:flex"
+            size="icon"
+            variant="ghost"
           >
             <div>
               <div className="sr-only">{title}</div>
-              <Icon className="h-5 w-5" />
+              <Icon className="size-5" />
             </div>
           </Button>
         </TooltipTrigger>
@@ -43,7 +35,7 @@ const DesktopPreviewToolbarIcon = ({
         </TooltipContent>
       </Tooltip>
     </TooltipProvider>
-  );
-};
+  )
+}
 
-export default DesktopPreviewToolbarIcon;
+export default DesktopPreviewToolbarIcon
diff --git a/apps/web/components/ui/desktop-primary-toolbar-buttons.tsx b/apps/web/components/ui/desktop-primary-toolbar-buttons.tsx
index 103c38b..037f96e 100644
--- a/apps/web/components/ui/desktop-primary-toolbar-buttons.tsx
+++ b/apps/web/components/ui/desktop-primary-toolbar-buttons.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Toolbar } from "../toolbar";
 import { cn } from "ui/lib/utils";
 
+import { Toolbar } from "../toolbar";
+
 function DesktopPreviewToolbarButtons() {
   return (
     <div