diff --git a/apps/web/app/(dash)/menu.tsx b/apps/web/app/(dash)/menu.tsx
index 5112eb4a..0b487e61 100644
--- a/apps/web/app/(dash)/menu.tsx
+++ b/apps/web/app/(dash)/menu.tsx
@@ -1,176 +1,176 @@
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { MemoriesIcon, CanvasIcon, AddIcon } from "@repo/ui/icons";
-import { DialogTrigger } from "@repo/ui/shadcn/dialog";
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { MemoriesIcon, CanvasIcon, AddIcon } from '@repo/ui/icons';
+import { DialogTrigger } from '@repo/ui/shadcn/dialog';
 
-import { HomeIcon } from "@heroicons/react/24/solid";
+import { HomeIcon } from '@heroicons/react/24/solid';
 import {
-	PencilSquareIcon,
-	PlusIcon,
-	PresentationChartLineIcon,
-	RectangleStackIcon,
-} from "@heroicons/react/24/solid";
+  PencilSquareIcon,
+  PlusIcon,
+  PresentationChartLineIcon,
+  RectangleStackIcon,
+} from '@heroicons/react/24/solid';
 import DialogTriggerWrapper, {
-	DialogDesktopTrigger,
-	DialogMobileTrigger,
-} from "./dialogTriggerWrapper";
+  DialogDesktopTrigger,
+  DialogMobileTrigger,
+} from './dialogTriggerWrapper';
 
 const menuItems = [
-	{
-		icon: MemoriesIcon,
-		text: "Memories",
-		url: "/memories",
-		disabled: false,
-	},
-	{
-		icon: CanvasIcon,
-		text: "Canvas",
-		url: "/canvas",
-		disabled: true,
-	},
+  {
+    icon: MemoriesIcon,
+    text: 'Memories',
+    url: '/memories',
+    disabled: false,
+  },
+  {
+    icon: CanvasIcon,
+    text: 'Canvas',
+    url: '/canvas',
+    disabled: true,
+  },
 ];
 
 const items = [
-	{
-		icon: <HomeIcon className="h-6 w-6" />,
-		name: "home",
-		url: "/home",
-		disabled: false,
-	},
-	{
-		icon: <RectangleStackIcon className="h-6 w-6" />,
-		name: "memories",
-		url: "/memories",
-		disabled: false,
-	},
-	{
-		icon: <PencilSquareIcon className="h-6 w-6" />,
-		name: "editor",
-		url: "/#",
-		disabled: true,
-	},
-	{
-		icon: <PresentationChartLineIcon className="h-6 w-6" />,
-		name: "thinkpad",
-		url: "/#",
-		disabled: true,
-	},
+  {
+    icon: <HomeIcon className="h-6 w-6" />,
+    name: 'home',
+    url: '/home',
+    disabled: false,
+  },
+  {
+    icon: <RectangleStackIcon className="h-6 w-6" />,
+    name: 'memories',
+    url: '/memories',
+    disabled: false,
+  },
+  {
+    icon: <PencilSquareIcon className="h-6 w-6" />,
+    name: 'editor',
+    url: '/#',
+    disabled: true,
+  },
+  {
+    icon: <PresentationChartLineIcon className="h-6 w-6" />,
+    name: 'thinkpad',
+    url: '/#',
+    disabled: true,
+  },
 ];
 
 function Menu() {
-	return (
-		<>
-			{/* Desktop Menu */}
-			<div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
-				<div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
-				<div className="pointer-events-auto flex flex-col gap-2">
-					<DialogDesktopTrigger />
-					<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
-						{items.map((v) => (
-							<NavItem {...v} />
-						))}
-					</div>
-				</div>
-			</div>
+  return (
+    <>
+      {/* Desktop Menu */}
+      <div className="hidden lg:flex items-center pointer-events-none z-[39] fixed left-2 top-0 h-screen flex-col justify-center px-2">
+        <div className="pointer-events-none z-10 absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-secondary blur-[300px] "></div>
+        <div className="pointer-events-auto flex flex-col gap-2">
+          <DialogDesktopTrigger />
+          <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-secondary px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+            {items.map((v) => (
+              <NavItem {...v} />
+            ))}
+          </div>
+        </div>
+      </div>
 
-			{/* Mobile Menu */}
-			<div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
-				<div className="flex justify-around items-center">
-					<Link
-						href={"/"}
-						className={`flex flex-col items-center text-white ${"cursor-pointer"}`}
-					>
-						<HomeIcon width={24} height={24} />
-						<p className="text-xs text-foreground-menu mt-2">Home</p>
-					</Link>
+      {/* Mobile Menu */}
+      <div className="lg:hidden fixed bottom-0 left-0 w-full p-4 bg-secondary z-50 border-t-2 border-border">
+        <div className="flex justify-around items-center">
+          <Link
+            href={'/'}
+            className={`flex flex-col items-center text-white ${'cursor-pointer'}`}
+          >
+            <HomeIcon width={24} height={24} />
+            <p className="text-xs text-foreground-menu mt-2">Home</p>
+          </Link>
 
-					<DialogMobileTrigger />
-					{menuItems.map((item) => (
-						<Link
-							aria-disabled={item.disabled}
-							href={item.disabled ? "#" : item.url}
-							key={item.url}
-							className={`flex flex-col items-center ${
-								item.disabled
-									? "opacity-50 pointer-events-none"
-									: "cursor-pointer"
-							}`}
-						>
-							<Image
-								src={item.icon}
-								alt={`${item.text} icon`}
-								width={24}
-								height={24}
-							/>
-							<p className="text-xs text-foreground-menu mt-2">{item.text}</p>
-						</Link>
-					))}
-				</div>
-			</div>
-		</>
-	);
+          <DialogMobileTrigger />
+          {menuItems.map((item) => (
+            <Link
+              aria-disabled={item.disabled}
+              href={item.disabled ? '#' : item.url}
+              key={item.url}
+              className={`flex flex-col items-center ${
+                item.disabled
+                  ? 'opacity-50 pointer-events-none'
+                  : 'cursor-pointer'
+              }`}
+            >
+              <Image
+                src={item.icon}
+                alt={`${item.text} icon`}
+                width={24}
+                height={24}
+              />
+              <p className="text-xs text-foreground-menu mt-2">{item.text}</p>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </>
+  );
 }
 
 export function Navbar() {
-	return (
-		<div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
-			<div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
-			<div className="pointer-events-auto">
-				<div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-[1px] border-gray-700/50 bg-[#1f24289b] px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
-					<Top />
-					{items.map((v) => (
-						<NavItem {...v} />
-					))}
-				</div>
-			</div>
-		</div>
-	);
+  return (
+    <div className="pointer-events-none fixed left-0 top-0 flex h-screen flex-col justify-center px-2">
+      <div className="pointer-events-none absolute top-1/2 h-1/3 w-full -translate-y-1/2 bg-blue-500/20 blur-[300px] "></div>
+      <div className="pointer-events-auto">
+        <div className="inline-flex w-14 flex-col items-start gap-6 rounded-2xl border-2 border-border px-3 py-4 text-[#b9b9b9] shadow-md shadow-[#1d1d1dc7]">
+          <Top />
+          {items.map((v) => (
+            <NavItem {...v} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
 }
 
 function Top() {
-	return (
-		<DialogTriggerWrapper>
-			<DialogTrigger>
-				<div className="space-y-4 group relative">
-					<div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
-						<PlusIcon className="h-6 w-6" />
-					</div>
-					<div className="h-[1px] w-full bg-[#323b41]"></div>
-					<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap -top-1  -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
-						Add Memories
-					</div>
-				</div>
-			</DialogTrigger>
-		</DialogTriggerWrapper>
-	);
+  return (
+    <DialogTriggerWrapper>
+      <DialogTrigger>
+        <div className="space-y-4 group relative">
+          <div className="cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90">
+            <PlusIcon className="h-6 w-6" />
+          </div>
+          <div className="h-[1px] w-full bg-[#323b41]"></div>
+          <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all  absolute whitespace-nowrap -top-1  -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-2xl px-2 py-1">
+            Add Memories
+          </div>
+        </div>
+      </DialogTrigger>
+    </DialogTriggerWrapper>
+  );
 }
 
 function NavItem({
-	disabled,
-	icon,
-	url,
-	name,
+  disabled,
+  icon,
+  url,
+  name,
 }: {
-	disabled: boolean;
-	icon: React.JSX.Element;
-	name: string;
-	url: string;
+  disabled: boolean;
+  icon: React.JSX.Element;
+  name: string;
+  url: string;
 }) {
-	return (
-		<div className="relative group">
-			<Link aria-disabled={disabled} href={disabled ? "#" : url}>
-				<div
-					className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && "opacity-50"}`}
-				>
-					{icon}
-				</div>
-			</Link>
-			<div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all   absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
-				{name}
-			</div>
-		</div>
-	);
+  return (
+    <div className="relative group">
+      <Link aria-disabled={disabled} href={disabled ? '#' : url}>
+        <div
+          className={`cursor-pointer px-1 hover:scale-105 hover:text-[#bfc4c9] active:scale-90 ${disabled && 'opacity-50'}`}
+        >
+          {icon}
+        </div>
+      </Link>
+      <div className="opacity-0 group-hover:opacity-100 scale-x-50 group-hover:scale-x-100 origin-left transition-all   absolute whitespace-nowrap top-1/2 -translate-y-1/2 left-[150%] pointer-events-none border-gray-700/50 border-[1px] bg-[#1F2428] shadow-md shadow-[#1d1d1dc7] rounded-xl px-2 py-1">
+        {name}
+      </div>
+    </div>
+  );
 }
 
 export default Menu;