diff --git a/app/App.tsx b/app/App.tsx
index 98b71aa..09b3a08 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -1,5 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import {
   Navbar,
   Link,
@@ -9,34 +11,24 @@ import {
   CardFooter,
 } from "@nextui-org/react";
 import { ChevronDown } from "@/public/assets/ChevronDown";
-import {
-  ImDeviantart,
-  ImDownload,
-  ImHammer,
-  ImNewspaper,
-} from "react-icons/im";
+import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im";
 import Footer from "@/components/ui/footer";
 import { useTheme } from "next-themes";
 import NavbarComponent from "./front-navbar";
 import ThemeProvider from "./provider";
-import Progressbar from "../components/progressbar/progressbar"
+import Progressbar from "../components/progressbar/progressbar";
 import { AnimatePresence, motion } from "framer-motion";
 import Preloader from "../components/Preloader";
-import BackToTop from "../components/BackToTop/BackToTop"
+import BackToTop from "../components/BackToTop/BackToTop";
+
 export default function App() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+ 
 
   const icons = {
-    chevron: (
-      <ChevronDown
-        fill="currentColor"
-        size={16}
-        height={undefined}
-        width={undefined}
-        className="some-class-name"
-      />
-    ),
+    chevron: <ChevronDown fill="currentColor" size={16} className="some-class-name" height={undefined} width={undefined} />,
     hammer: <ImHammer />,
     dev: <ImDeviantart />,
     slide: <ImNewspaper />,
@@ -54,261 +46,99 @@ export default function App() {
   ];
 
   const { systemTheme, theme } = useTheme();
-  const currentTheme = theme === "dark" ? systemTheme : theme;
-  const [darkMode, setDarkMode] = useState(false);
-
   useEffect(() => {
-    setDarkMode(currentTheme === "dark");
-  }, [currentTheme]);
+    setDarkMode((theme === "dark" ? systemTheme : theme) === "dark");
+  }, [systemTheme, theme]);
 
   return (
-    <>
-      <ThemeProvider>
-        <Progressbar/>
-        <NavbarComponent
-          isLoggedIn={isLoggedIn}
-          setIsMenuOpen={setIsMenuOpen}
-          isMenuOpen={isMenuOpen}
-        />
-        <Preloader />
+    <ThemeProvider>
+      <Progressbar />
+      <NavbarComponent isLoggedIn={isLoggedIn} setIsMenuOpen={setIsMenuOpen} isMenuOpen={isMenuOpen} />
+      <Preloader />
 
-        <div
-          className={`min-h-screen ${
-            darkMode
-              ? "bg-black text-white"
-              : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"
-          } font-sans`}
-        >
-          <div
-            className={`py-0 hidden md:block md:py-4 ${
-              darkMode
-                ? "bg-black"
-                : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"
-            }`}
-          >
-            <div className="flex justify-around items-center">
-              {menuItems.map((item, index) => (
-                <Link
-                  key={index}
-                  className="text-lg"
-                  href={`/${item.toLowerCase().replace(" ", "-")}`}
-                >
-                  {item}
-                </Link>
-              ))}
-            </div>
+      <div className={`min-h-screen ${darkMode ? "bg-black text-white" : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"} font-sans`}>
+        <div className={`py-0 hidden md:block md:py-4 ${darkMode ? "bg-black" : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"}`}>
+          <div className="flex justify-around items-center">
+            {menuItems.map((item, index) => (
+              <Link key={index} className="text-lg" href={`/${item.toLowerCase().replace(" ", "-")}`}>
+                {item}
+              </Link>
+            ))}
           </div>
+        </div>
 
-          <div className="flex flex-col lg:flex-row items-center justify-between px-20 py-0 md:my-40 my-0">
-            <div className="max-w-xl mb-10 lg:mb-0">
-              {/* Animated Text */}
-              <motion.h1
-                className="text-7xl font-medium leading-tight mb-6"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.8, ease: "easeOut" }}
-              >
-                <span>Think bigger.</span>
-                <br />
-                <span>Build faster.</span>
-              </motion.h1>
-
-              {/* Animated Subtext */}
-              <motion.p
-                className="text-xl mb-8 font-light"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}
-              >
-                DesignDesk helps design and development teams build great
-                products, together.
-              </motion.p>
+        <div className="flex flex-col lg:flex-row items-center justify-between px-20 py-0 md:my-40 my-0">
+          <div className="max-w-xl mb-10 lg:mb-0">
+            <motion.h1 className="text-7xl font-medium leading-tight mb-6" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, ease: "easeOut" }}>
+              <span>Think bigger.</span><br /><span>Build faster.</span>
+            </motion.h1>
 
-              {/* Animated Button */}
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ delay: 0.4, duration: 0.8, ease: "easeOut" }}
-              >
-                <Button color="secondary">
-                  <Link href="/workspace">Get started for free</Link>
-                </Button>
-              </motion.div>
-            </div>
+            <motion.p className="text-xl mb-8 font-light" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2, duration: 0.8, ease: "easeOut" }}>
+              DesignDesk helps design and development teams build great products, together.
+            </motion.p>
 
-            {/* Animated Colored Boxes */}
-            <div className="relative h-64 lg:h-auto w-full lg:w-1/2">
-              <motion.div
-                className="absolute inset-0 flex justify-center items-center"
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ delay: 0.6, duration: 0.8, ease: "easeOut" }}
-              >
-                <motion.div
-                  className="bg-yellow-300 w-72 h-48 transform rotate-6"
-                  initial={{ opacity: 0, rotate: 0 }}
-                  animate={{ opacity: 1, rotate: 6 }}
-                  transition={{ duration: 1, ease: "easeInOut" }}
-                />
-                <motion.div
-                  className="bg-purple-400 w-52 h-52 absolute top-4 right-4"
-                  initial={{ opacity: 0, scale: 0.8 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ delay: 0.2, duration: 1, ease: "easeInOut" }}
-                />
-                <motion.div
-                  className="bg-red-500 w-32 h-32 absolute bottom-4 left-4"
-                  initial={{ opacity: 0, y: -20 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: 0.4, duration: 1, ease: "easeInOut" }}
-                />
-                <motion.div
-                  className="bg-green-500 w-40 h-40 absolute bottom-0 right-8"
-                  initial={{ opacity: 0, x: 20 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: 0.6, duration: 1, ease: "easeInOut" }}
-                />
-              </motion.div>
-            </div>
+            <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.4, duration: 0.8, ease: "easeOut" }}>
+              <Button color="secondary"><Link href="/workspace">Get started for free</Link></Button>
+            </motion.div>
           </div>
 
-          <div
-            className={` ${
-              darkMode ? " text-white " : " text-black"
-            } py-20 mx-10 `}
-          >
-            <div className="flex justify-center text-2xl m-4 pb-14">
-              Features
-            </div>
-            <div className="max-w-8xl max-h-full mx-auto grid grid-cols-1 md:grid-cols-3 gap-10 ">
-              <div
-                className={` ${
-                  darkMode ? " text-white " : " text-neutral-900"
-                } bg-none  shadow-2xl rounded-lg  text-center`}
-              >
-                <Card isFooterBlurred radius="lg" className="border-none ">
-                  <Image
-                    alt="Woman listing to music"
-                    className=" object-fill w-full h-full"
-                    height={370}
-                    src="five.webp"
-                    width={500}
-                  />
-                  <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[93%] mb-2 right-2 shadow-small  mr-2 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105 ">
-                    <p className="font-medium text-justify text-black ">
-                      Live Collaboration
-                    </p>
-                    <Button
-                      className="text-tiny text-white bg-black/60"
-                      variant="flat"
-                      color="default"
-                      radius="lg"
-                      size="sm"
-                    >
-                      Notify me
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </div>
-              <div className={`  bg-none shadow-2xl rounded-lg  text-center`}>
-                <Card isFooterBlurred radius="lg" className="border-none">
-                  <Image
-                    alt="Woman listing to music"
-                    className="object-cover w-full h-full"
-                    height={370}
-                    src="four.webp"
-                    width={500}
-                  />
-                  <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[93%] mb-2 right-2 shadow-small  mr-2 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">
-                    <p className=" font-light text-white text-justify">
-                      Real-Time Updates
-                    </p>
-                    <Button
-                      className="text-tiny text-white bg-black/20"
-                      variant="flat"
-                      color="default"
-                      radius="lg"
-                      size="sm"
-                    >
-                      <a href="/workspace">Notify me</a>
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </div>
+          <div className="relative h-64 lg:h-auto w-full lg:w-1/2">
+            {["bg-yellow-300", "bg-purple-400", "bg-red-500", "bg-green-500"].map((color, i) => (
+              <motion.div key={i} className={`${color} ${i === 0 ? "w-72 h-48 rotate-6" : i === 1 ? "w-52 h-52 top-4 right-4" : i === 2 ? "w-32 h-32 bottom-4 left-4" : "w-40 h-40 bottom-0 right-8"} absolute transform`}
+                initial={{ opacity: 0, ...(i % 2 ? { scale: 0.8 } : { rotate: 0 }) }}
+                animate={{ opacity: 1, ...(i % 2 ? { scale: 1 } : { rotate: 6 }) }}
+                transition={{ delay: i * 0.2, duration: 1, ease: "easeInOut" }}
+              />
+            ))}
+          </div>
+        </div>
 
-              <div
-                className={` ${
-                  darkMode ? " text-white " : " text-neutral-900"
-                } bg-none shadow-2xl rounded-lg  text-center`}
-              >
-                <Card isFooterBlurred radius="lg" className="border-none">
-                  <Image
-                    alt="Woman listing to music"
-                    className="  object-cover w-full h-full"
-                    height={370}
-                    src="two.webp"
-                    width={500}
-                  />
-                  <CardFooter className="justify-between before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[93%] mb-2 right-2 shadow-small  mr-2 z-10 transition-all duration-300 ease-in-out hover:bg-black/50 hover:scale-105">
-                    <p className="text-white text-md font-sans">
-                      Text Addition
-                    </p>
-                    <Button
-                      color="default"
-                      className="  text-tiny font-sans text-white bg-black/60"
-                      variant="flat"
-                      radius="lg"
-                      size="sm"
-                    >
-                      Notify Me
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </div>
-            </div>
+        <div className={`${darkMode ? "text-white" : "text-black"} py-20 mx-10`}>
+          <div className="flex justify-center text-2xl m-4 pb-14">Features</div>
+          <div className="max-w-8xl max-h-full mx-auto grid grid-cols-1 md:grid-cols-3 gap-10">
+            {[
+              { imgSrc: "five.webp", text: "Live Collaboration", onClick: () => toast("Live Collaboration notify me") },
+              { imgSrc: "four.webp", text: "Real-Time Updates", onClick: () => toast("Real-Time updates notify me") },
+              { imgSrc: "two.webp", text: "Text Addition", onClick: () => toast("Text addition notify me") },
+            ].map((feature, i) => (
+              <Card key={i} isFooterBlurred radius="lg" className="border-none shadow-2xl rounded-lg text-center bg-none">
+                <Image alt={feature.text} className="object-cover w-full h-full" height={370} src={feature.imgSrc} width={500} />
+                <CardFooter className="absolute bottom-1 w-[93%] mb-2 right-2 py-1 shadow-small mr-2 z-10 transition-all duration-300 ease-in-out bg-white/10 rounded-xl hover:bg-black/50 hover:scale-105 text-white font-medium">
+                  <p>{feature.text}</p>
+                  <Button onClick={feature.onClick} variant="flat" color="default" radius="lg" size="sm">Notify Me</Button>
+                </CardFooter>
+                <ToastContainer />
+              </Card>
+            ))}
           </div>
+        </div>
 
-          <div
-            className={` ${
-              darkMode
-                ? "bg-black text-white "
-                : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"
-            } py-20 px-10 my-40`}
-          >
-            <div className="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between items-center">
-              <div className="flex items-center">
-                <div className="text-yellow-700 text-9xl font-extrabold mr-6">
-                  &#8220;
-                </div>
-                <div className="text-3xl lg:text-5xl font-medium leading-snug max-w-lg">
-                  Nearly everything that designers and developers need is
-                  available in DesignDesk.
-                </div>
+        <div className={`${darkMode ? "bg-black text-white" : "bg-gradient-to-r from-gray-300 via-white to-gray-200 text-black"} py-20 px-10 my-40`}>
+          <div className="max-w-7xl mx-auto flex flex-col lg:flex-row justify-between items-center">
+            <div className="flex items-center">
+              <div className="text-yellow-700 text-9xl font-extrabold mr-6">&#8220;</div>
+              <div className="text-3xl lg:text-5xl font-medium leading-snug max-w-lg">
+                Nearly everything that designers and developers need is available in DesignDesk.
               </div>
-
-              <div className="flex items-center mt-10 lg:mt-0">
-                <div className="text-right mr-4 flex-col">
-                  <div className="text-2xl font-semibold justify-start">
-                    GitHub
-                  </div>
-
-                  <div className="flex flex-row">
-                    <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3"></div>
-                    <div className="flex flex-col justify-center items-center">
-                      <div className="text-lg text-gray-600">Diana Mounter</div>
-                      <div className="text-lg text-gray-600">
-                        Head of Design
-                      </div>
-                    </div>
+            </div>
+            <div className="flex items-center mt-10 lg:mt-0">
+              <div className="text-right mr-4">
+                <div className="text-2xl font-semibold">GitHub</div>
+                <div className="flex items-center mt-2">
+                  <div className="h-6 w-6 rounded-full bg-gradient-to-r from-green-400 to-yellow-400 p-8 m-3"></div>
+                  <div>
+                    <div className="text-lg text-gray-600">Diana Mounter</div>
+                    <div className="text-lg text-gray-600">Head of Design</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <Footer />
         </div>
-        <BackToTop/>
-      </ThemeProvider>
-    </>
+        
+        <Footer />
+      </div>
+      <BackToTop />
+    </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/app/front-navbar.tsx b/app/front-navbar.tsx
index f782057..8057949 100644
--- a/app/front-navbar.tsx
+++ b/app/front-navbar.tsx
@@ -1,4 +1,3 @@
-// NavbarComponent.tsx
 "use client"
 import React, { useEffect, useState } from "react";
 import {
@@ -24,16 +23,14 @@ import {
 } from "react-icons/im";
 import { useTheme } from "next-themes";
 import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
-import { useUser } from "@/context/UserContext";
 import Link from "next/link";
 import Logo from "@/public/assets/design-deck-logo.png";
 import Image from 'next/image';
 
-// Define props interface
 interface NavbarComponentProps {
-    isLoggedIn: boolean;
-    setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    isMenuOpen: boolean;
+  isLoggedIn: boolean;
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isMenuOpen: boolean;
 }
 
 const icons = {
@@ -42,189 +39,189 @@ const icons = {
   dev: <ImDeviantart />,
   slide: <ImNewspaper />,
   download: <ImDownload />,
-
 };
 
 const menuItems = [
-    { name: "Profile", href: "/profile" },
-    { name: "Dashboard", href: "/dashboard" },
-    { name: "WorkSpace", href: "/workspace" },
-    { name: "System", href: "/system" },
-    { name: "My Settings", href: "/settings" },
-    { name: "Help & Feedback", href: "/help" },
-    { name: "Log Out", href: "/logout" },
+  { name: "Profile", href: "/profile" },
+  { name: "Dashboard", href: "/dashboard" },
+  { name: "WorkSpace", href: "/workspace" },
+  { name: "System", href: "/system" },
+  { name: "My Settings", href: "/settings" },
+  { name: "Help & Feedback", href: "/help" },
+  { name: "Log Out", href: "/logout" },
 ];
- 
-const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) => {
 
+const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenuOpen, isMenuOpen }) => {
   const { systemTheme, theme } = useTheme();
   const currentTheme = theme === "dark" ? systemTheme : theme;
   const [darkMode, setDarkMode] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-            setDarkMode(currentTheme === 'dark');
-
-      const handleResize = () => {
-            setIsMobile(window.innerWidth < 768);
-      };
-
-          handleResize();
-          window.addEventListener('resize', handleResize);
-      
-      return () => {
-            window.removeEventListener('resize', handleResize);
-      };
+    setDarkMode(currentTheme === 'dark');
+
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   }, [currentTheme]);
 
   return (
-      <div className={`fixed top-0 left-0 right-0 z-50 ${darkMode ? "text-white" : "text-black"}`}>
-          <Navbar isBordered isMenuOpen={isMenuOpen} onMenuOpenChange={setIsMenuOpen} className="bg-neutral-900 text-white">
-
-          <NavbarBrand className="flex basis-0 flex-row flex-grow flex-nowrap justify-start bg-transparent" style={{ marginLeft: '-50px' }}>
-  <Image 
-      className="transition duration-300 ease-in-out" 
-      src={Logo.src} 
-      alt="DesignDeck Logo"  
-      width={276}  // Set the width prop
-      height={64}   // Set the height prop
-      style={{ marginLeft: '0', marginRight: '10px', background: 'none' }} 
-  /> 
-</NavbarBrand>
-
-              <NavbarContent justify="center" className="space-x-4"> {/* Adjusted spacing here */}
-                <NavbarItem className="flex items-center">
-                  <Link href="/" legacyBehavior passHref>
-                    <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
-                      Home
-                      <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+    <div className={`fixed top-0 left-0 right-0 z-50 ${darkMode ? "text-white" : "text-black"}`}>
+      <Navbar isBordered isMenuOpen={isMenuOpen} onMenuOpenChange={setIsMenuOpen} className="bg-neutral-900 text-white">
+        <NavbarContent justify="start">
+          {!isMobile && (
+            <NavbarBrand className="flex basis-0 flex-row flex-grow flex-nowrap justify-start bg-transparent" style={{ marginLeft: '-50px' }}>
+              <Image 
+                className="transition duration-300 ease-in-out" 
+                src={Logo.src} 
+                alt="DesignDeck Logo"  
+                width={276}
+                height={64}
+                style={{ marginLeft: '0', marginRight: '10px', background: 'none' }}
+              />
+            </NavbarBrand>
+          )}
+        </NavbarContent>
+
+        <NavbarContent justify="center" className="space-x-4">
+          <NavbarItem className="flex items-center">
+            <Link href="/" legacyBehavior passHref>
+              <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
+                Home
+                <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+              </a>
+            </Link>
+          </NavbarItem>
+
+          <NavbarItem className="flex items-center">
+            <Dropdown backdrop="blur">
+              <DropdownTrigger>
+                <Button disableRipple endContent={icons.chevron} radius="sm" variant="light" style={{ fontSize: '16px' }}>
+                  <p className="text-white">Open Menu</p>
+                </Button>
+              </DropdownTrigger>
+              <DropdownMenu aria-label="Static Actions">
+                <DropdownItem key="new" startContent={icons.hammer}>
+                  <Link href="/design-desk-jam" legacyBehavior passHref>
+                    <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300 group transform hover:scale-105`}>
+                      DesignDesk Jam
+                      <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
                     </a>
-
                   </Link>
-                </NavbarItem>
-                <NavbarItem className="flex items-center">
-                  <Dropdown backdrop="blur">
-                    <DropdownTrigger>
-                      <Button disableRipple endContent={icons.chevron} radius="sm" variant="light" style={{ fontSize: '16px' }}>
-                        <p className="text-white">Open Menu</p>
-                      </Button>
-                    </DropdownTrigger>
-                    <DropdownMenu aria-label="Static Actions">
-                      <DropdownItem key="new" startContent={icons.hammer}>
-                        <Link href="/design-desk-jam" legacyBehavior passHref>
-                          <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "}  transition-all duration-300  group transform hover:scale-105`}>
-                            DesignDesk Jam
-                            <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
-                          </a>
-                        </Link>
-                      </DropdownItem>
-                      <DropdownItem key="copy" startContent={icons.dev}>
-                        <Link href="/dev-mode" legacyBehavior passHref>
-                          <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300  group transform hover:scale-105`}>
-                            Dev Mode
-                            <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
-                          </a>
-                        </Link>
-                      </DropdownItem>
-                      <DropdownItem key="edit" startContent={icons.slide}>
-                        <Link href="/design-desk-slides" legacyBehavior passHref>
-                          <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300  group transform hover:scale-105`}>
-                            DesignDesk Slides
-                            <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
-                          </a>
-                        </Link>
-                      </DropdownItem>
-                      <DropdownItem key="delete" className="text-warning" startContent={icons.download}>
-                        <Link href="/download" legacyBehavior passHref>
-                          <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300  group transform hover:scale-105`}>
-                            Download
-                            <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
-                          </a>
-                        </Link>
-                      </DropdownItem>
-                    </DropdownMenu>
-                  </Dropdown>
-                </NavbarItem>
-                <NavbarItem>
-                  <Link href="/contact" legacyBehavior passHref>
-                    <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
-                      Contact
-                      <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+                </DropdownItem>
+                <DropdownItem key="copy" startContent={icons.dev}>
+                  <Link href="/dev-mode" legacyBehavior passHref>
+                    <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300 group transform hover:scale-105`}>
+                      Dev Mode
+                      <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
                     </a>
                   </Link>
-                </NavbarItem>
-                <NavbarItem>
-                  <Link href="/faq" legacyBehavior passHref>
-                    <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
-                      FAQ
-                      <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+                </DropdownItem>
+                <DropdownItem key="edit" startContent={icons.slide}>
+                  <Link href="/design-desk-slides" legacyBehavior passHref>
+                    <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300 group transform hover:scale-105`}>
+                      DesignDesk Slides
+                      <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
                     </a>
                   </Link>
-                </NavbarItem>
-              </NavbarContent>
-
-              <NavbarContent justify="end">
-                {!isLoggedIn && (
-                  <>
-                    <NavbarItem>
-                      <Link href="/login" legacyBehavior passHref>
-                        <a className="hover:text-gray-300 transition duration-300">
-                          Login
-                          <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
-                        </a>
-                      </Link>
-                    </NavbarItem>
-                    <NavbarItem>
-                      {/* <Button as={Link} href="/signup" className="bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
-                                   Sign Up
-                              </Button> */}
-                      <Button
-                        as={Link}
-                        href="/signup"
-                        className="relative inline-flex items-center justify-center px-6 py-3 overflow-hidden text-lg font-medium text-white bg-gradient-to-r from-blue-400 to-purple-600 rounded-lg shadow-lg group">
-                        <span className="absolute inset-0 w-full h-full transition-transform duration-300 transform scale-x-0 bg-white group-hover:scale-x-100"></span>
-                        <span className="relative z-10">Sign Up</span>
-                        <svg
-                          className="absolute w-5 h-5 transition-transform duration-300 transform -translate-x-10 group-hover:translate-x-0"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                          xmlns="http://www.w3.org/2000/svg">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12H8m0 0l4 4m-4-4l4-4" />
-                        </svg>
-                      </Button>
-                    </NavbarItem>
-                  </>
-                )}
-                <NavbarItem>
-                  <ThemeSwitcher />
-                </NavbarItem>
-              </NavbarContent>
-
-              {/* Mobile Menu */}
-              <NavbarMenu>
-                <NavbarMenuToggle onClick={() => setIsMenuOpen(!isMenuOpen)}>
-                  <span className="material-icons">menu</span>
-                </NavbarMenuToggle>
-
-                {isMenuOpen && (
-                  <div className="absolute top-3 right-0 left-0 bg-white shadow-lg z-50">
-                    {menuItems.map((item, index) => (
-                      <NavbarMenuItem key={`${item.name}-${index}`} onClick={() => setIsMenuOpen(false)}>
-                        <Link href={item.href} legacyBehavior passHref>
-                          <a className="block py-2 text-gray-800 hover:bg-gray-200 transition duration-300">{item.name}</a>
-                        </Link>
-                      </NavbarMenuItem>
-                    ))}
-                  </div>
-                )}
-              </NavbarMenu>
-
-          </Navbar>
-      </div>
+                </DropdownItem>
+                <DropdownItem key="delete" className="text-warning" startContent={icons.download}>
+                  <Link href="/download" legacyBehavior passHref>
+                    <a className={`relative inline-block text-md ${darkMode ? "text-white " : "text-neutral-600 "} transition-all duration-300 group transform hover:scale-105`}>
+                      Download
+                      <span className="absolute block h-[2px] w-full bg-neutral-600 dark:text-white bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+                    </a>
+                  </Link>
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </NavbarItem>
+
+          <NavbarItem>
+            <Link href="/contact" legacyBehavior passHref>
+              <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
+                Contact
+                <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+              </a>
+            </Link>
+          </NavbarItem>
+
+          <NavbarItem>
+            <Link href="/faq" legacyBehavior passHref>
+              <a className="relative inline-block text-lg text-white transition-all duration-300 hover:text-gray-300 group transform hover:scale-105">
+                FAQ
+                <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+              </a>
+            </Link>
+          </NavbarItem>
+        </NavbarContent>
+
+        <NavbarContent justify="end">
+          {!isLoggedIn && (
+            <>
+              <NavbarItem>
+                <Link href="/login" legacyBehavior passHref>
+                  <a className="hover:text-gray-300 transition duration-300">
+                    Login
+                    <span className="absolute block h-[2px] w-full bg-gray-300 bottom-0 left-0 scale-x-0 transition-transform duration-300 group-hover:scale-x-100" />
+                  </a>
+                </Link>
+              </NavbarItem>
+              <NavbarItem>
+                <Button
+                  as={Link}
+                  href="/signup"
+                  className="relative inline-flex items-center justify-center px-6 py-3 overflow-hidden text-lg font-medium text-white bg-gradient-to-r from-blue-400 to-purple-600 rounded-lg shadow-lg group"
+                >
+                  <span className="absolute inset-0 w-full h-full transition-transform duration-300 transform scale-x-0 bg-white group-hover:scale-x-100"></span>
+                  <span className="relative z-10">Sign Up</span>
+                  <svg
+                    className="absolute w-5 h-5 transition-transform duration-300 transform -translate-x-10 group-hover:translate-x-0"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12H8m0 0l4 4m-4-4l4-4" />
+                  </svg>
+                </Button>
+              </NavbarItem>
+            </>
+          )}
+          <NavbarItem>
+            <ThemeSwitcher />
+          </NavbarItem>
+        </NavbarContent>
+
+        <NavbarMenu>
+          <NavbarMenuToggle onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <span className="material-icons">menu</span>
+          </NavbarMenuToggle>
+
+          {isMenuOpen && (
+            <div className="absolute top-3 right-0 left-0 bg-white shadow-lg z-50">
+              {menuItems.map((item, index) => (
+                <NavbarMenuItem key={`${item.name}-${index}`} onClick={() => setIsMenuOpen(false)}>
+                  <Link href={item.href} legacyBehavior passHref>
+                    <a className="block py-2 text-gray-800 hover:bg-gray-200 transition duration-300">
+                      {item.name}
+                    </a>
+                  </Link>
+                </NavbarMenuItem>
+              ))}
+            </div>
+          )}
+        </NavbarMenu>
+      </Navbar>
+    </div>
   );
-
 };
 
 export default NavbarComponent;
- 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 527bc91..7478057 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "bcrypt": "^5.1.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "DesignDeck": "file:",
         "fabric": "^5.3.0",
         "framer-motion": "^11.11.9",
         "jsonwebtoken": "^9.0.2",
@@ -39,12 +40,14 @@
         "lucide-react": "^0.321.0",
         "next": "^14.2.15",
         "next-themes": "^0.3.0",
+        "notification": "^0.0.6",
         "react": "^18",
         "react-animated-cursor": "^2.11.2",
         "react-color": "^2.19.3",
         "react-dom": "^18",
         "react-error-boundary": "^4.0.13",
         "react-icons": "^5.3.0",
+        "react-toastify": "^10.0.6",
         "tailwind-merge": "^2.2.1",
         "uuid": "^9.0.1"
       },
@@ -80,9 +83,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz",
-      "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
       "license": "MIT",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -214,25 +217,28 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.11.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.11.1.tgz",
-      "integrity": "sha512-m4DVN9ZqskZoLU5GlWZadwDnYo3vAEydiUayB9widCl9ffWx2IvPnp6n3on5rJmziJSw9Bv+Z3ChDVdMwXCY8Q==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.0.tgz",
+      "integrity": "sha512-gh7PdNombP8ftL8TinYC8Xd7WEypB8EKV4PI2h0eMzndKjPCXuo2zUiZtD2Hu+MSPt02Ty2MdS788ADl9ai1rA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -312,85 +318,55 @@
       "license": "MIT"
     },
     "node_modules/@formatjs/ecma402-abstract": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.0.tgz",
-      "integrity": "sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.1.tgz",
+      "integrity": "sha512-O4ywpkdJybrjFc9zyL8qK5aklleIAi5O4nYhBVJaOFtCkNrnU+lKFeJOFC48zpsZQmR8Aok2V79hGpHnzbmFpg==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/fast-memoize": "2.2.1",
-        "@formatjs/intl-localematcher": "0.5.5",
-        "tslib": "^2.7.0"
+        "@formatjs/fast-memoize": "2.2.2",
+        "@formatjs/intl-localematcher": "0.5.6",
+        "tslib": "2"
       }
     },
-    "node_modules/@formatjs/ecma402-abstract/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/@formatjs/fast-memoize": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.1.tgz",
-      "integrity": "sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.2.tgz",
+      "integrity": "sha512-mzxZcS0g1pOzwZTslJOBTmLzDXseMLLvnh25ymRilCm8QLMObsQ7x/rj9GNrH0iUhZMlFisVOD6J1n6WQqpKPQ==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "^2.7.0"
+        "tslib": "2"
       }
     },
-    "node_modules/@formatjs/fast-memoize/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.8.0.tgz",
-      "integrity": "sha512-r2un3fmF9oJv3mOkH+wwQZ037VpqmdfahbcCZ9Lh+p6Sx+sNsonI7Zcr6jNMm1s+Si7ejQORS4Ezlh05mMPAXA==",
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.9.1.tgz",
+      "integrity": "sha512-7AYk4tjnLi5wBkxst2w7qFj38JLMJoqzj7BhdEl7oTlsWMlqwgx4p9oMmmvpXWTSDGNwOKBRc1SfwMh5MOHeNg==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.2.0",
-        "@formatjs/icu-skeleton-parser": "1.8.4",
-        "tslib": "^2.7.0"
+        "@formatjs/ecma402-abstract": "2.2.1",
+        "@formatjs/icu-skeleton-parser": "1.8.5",
+        "tslib": "2"
       }
     },
-    "node_modules/@formatjs/icu-messageformat-parser/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.4.tgz",
-      "integrity": "sha512-LMQ1+Wk1QSzU4zpd5aSu7+w5oeYhupRwZnMQckLPRYhSjf2/8JWQ882BauY9NyHxs5igpuQIXZDgfkaH3PoATg==",
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.5.tgz",
+      "integrity": "sha512-zRZ/e3B5qY2+JCLs7puTzWS1Jb+t/K+8Jur/gEZpA2EjWeLDE17nsx8thyo9P48Mno7UmafnPupV2NCJXX17Dg==",
       "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.2.0",
-        "tslib": "^2.7.0"
+        "@formatjs/ecma402-abstract": "2.2.1",
+        "tslib": "2"
       }
     },
-    "node_modules/@formatjs/icu-skeleton-parser/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/@formatjs/intl-localematcher": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.5.tgz",
-      "integrity": "sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==",
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.6.tgz",
+      "integrity": "sha512-roz1+Ba5e23AHX6KUAWmLEyTRZegM5YDuxuvkHCyK3RJddf/UXB2f+s7pOMm9ktfPGla0g+mQXOn5vsuYirnaA==",
       "license": "MIT",
       "dependencies": {
-        "tslib": "^2.7.0"
+        "tslib": "2"
       }
     },
-    "node_modules/@formatjs/intl-localematcher/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
@@ -5167,9 +5143,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "20.17.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.0.tgz",
-      "integrity": "sha512-a7zRo0f0eLo9K5X9Wp5cAqTUNGzuFLDG2R7C4HY2BhcMAsxgSPuRvAC1ZB6QkuUQXf0YZAgfOX2ZyrBa2n4nHQ==",
+      "version": "20.17.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.1.tgz",
+      "integrity": "sha512-j2VlPv1NnwPJbaCNv69FO/1z4lId0QmGvpT41YxitRtWlg96g/j8qcv2RKsLKe2F6OJgyXhupN1Xo17b2m139Q==",
       "devOptional": true,
       "license": "MIT",
       "dependencies": {
@@ -5395,9 +5371,9 @@
       "license": "ISC"
     },
     "node_modules/acorn": {
-      "version": "8.13.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
-      "integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "devOptional": true,
       "license": "MIT",
       "bin": {
@@ -5480,6 +5456,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "license": "BSD-3-Clause OR MIT",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -5746,6 +5731,95 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ast-parents": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/ast-parents/-/ast-parents-0.0.1.tgz",
+      "integrity": "sha512-XHusKxKz3zoYk1ic8Un640joHbFMhbqneyoZfoKnEGtf2ey9Uh/IdpcQplODdO/kENaMIWsD0nJm4+wX3UNLHA==",
+      "license": "MIT"
+    },
+    "node_modules/ast-transform": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/ast-transform/-/ast-transform-0.0.0.tgz",
+      "integrity": "sha512-e/JfLiSoakfmL4wmTGPjv0HpTICVmxwXgYOB8x+mzozHL8v+dSfCbrJ8J8hJ0YBP0XcYu1aLZ6b/3TnxNK3P2A==",
+      "license": "MIT",
+      "dependencies": {
+        "escodegen": "~1.2.0",
+        "esprima": "~1.0.4",
+        "through": "~2.3.4"
+      }
+    },
+    "node_modules/ast-transform/node_modules/escodegen": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.2.0.tgz",
+      "integrity": "sha512-yLy3Cc+zAC0WSmoT2fig3J87TpQ8UaZGx8ahCAs9FL8qNbyV7CVyPKS74DG4bsHiL5ew9sxdYx131OkBQMFnvA==",
+      "dependencies": {
+        "esprima": "~1.0.4",
+        "estraverse": "~1.5.0",
+        "esutils": "~1.0.0"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.1.30"
+      }
+    },
+    "node_modules/ast-transform/node_modules/esprima": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-1.0.4.tgz",
+      "integrity": "sha512-rp5dMKN8zEs9dfi9g0X1ClLmV//WRyk/R15mppFNICIFRG5P92VP7Z04p8pk++gABo9W2tY+kHyu6P1mEHgmTA==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ast-transform/node_modules/estraverse": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.5.1.tgz",
+      "integrity": "sha512-FpCjJDfmo3vsc/1zKSeqR5k42tcIhxFIlvq+h9j0fO2q/h2uLKyweq7rYJ+0CoVvrGQOxIS5wyBrW/+vF58BUQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ast-transform/node_modules/esutils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-1.0.0.tgz",
+      "integrity": "sha512-x/iYH53X3quDwfHRz4y8rn4XcEwwCJeWsul9pF1zldMbGtgOtMNBEOuYWwB1EQlK2LRa1fev3YAgym/RElp5Cg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ast-transform/node_modules/source-map": {
+      "version": "0.1.43",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+      "integrity": "sha512-VtCvB9SIQhk3aF6h+N85EaqIaBFIAfZ9Cu+NJHHVvc8BbEcnvDcFw6sqQ2dQrT6SlOrZq3tIvyD9+EGq/lJryQ==",
+      "optional": true,
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.3.38",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.3.38.tgz",
+      "integrity": "sha512-nR0mF2vtJBVlYc2BB1+n61zPitCUTWNFoQJ8qdA/R4z8NkT11X9eqW5TvoiYLNzi3NomWXw3N7+2AM4Iy7zS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "private": "~0.1.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -6019,9 +6093,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001669",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
-      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
+      "version": "1.0.30001672",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001672.tgz",
+      "integrity": "sha512-XhW1vRo1ob6aeK2w3rTohwTPBLse/rvjq+s3RTSBwnlZqoFFjx9cHsShJjAIbLsLjyoacaTxpLZy9v3gg6zypw==",
       "funding": [
         {
           "type": "opencollective",
@@ -6170,6 +6244,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cls": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/cls/-/cls-0.1.5.tgz",
+      "integrity": "sha512-l5BPpQaNDud5DtmzvPrs6/XmsK0Rsp+xhhNTGLtUPb2x3zrEYOb2alBkVw3YyzKMf3v6py+i9LBE22b2vgGO7Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -6257,6 +6340,145 @@
         "node": ">= 6"
       }
     },
+    "node_modules/component-classes": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.3.tgz",
+      "integrity": "sha512-fUMP8dpWuaYk774Nvy0uVRARWi04tcUrpYIXCc8ARAZi8BFdAJliNitmrzBPgL3VQjm0lJvzn9QCWBX2kzjA9w==",
+      "license": "MIT",
+      "dependencies": {
+        "component-indexof": "0.0.3"
+      }
+    },
+    "node_modules/component-closest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/component-closest/-/component-closest-1.0.1.tgz",
+      "integrity": "sha512-1rpXfxA9UK1zChrPxhvBUBfpPKxMRh/YkE4k0W4VaVCyqc7+r0p59kUjA5UBH+yN/LNOrzYqN49MshTccuR+9w==",
+      "license": "MIT",
+      "dependencies": {
+        "component-matches-selector": "~0.1.6"
+      }
+    },
+    "node_modules/component-css": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/component-css/-/component-css-0.0.6.tgz",
+      "integrity": "sha512-S9ogyRYrP8XxJHNSmhG5qe+FPuh1wxBwaJWTSnix/IZ8Gj8wVPHYGjCXztRnfq8qHMInK/aZnZ3uHa1uDMPcdw==",
+      "license": "MIT",
+      "dependencies": {
+        "component-each": "~0.2.2",
+        "debug": "*",
+        "to-camel-case": "0.2.1",
+        "within-document": "0.0.1"
+      }
+    },
+    "node_modules/component-delegate": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/component-delegate/-/component-delegate-0.2.3.tgz",
+      "integrity": "sha512-+PKvQsLtAvLqWnOh0J+AawJoVc3Q1gZa1i+JvG/kbNBEDpAlSXwiICAO+4a2SxylJc77tMy/WukvAxXtXOmQpQ==",
+      "dependencies": {
+        "component-closest": "*",
+        "component-event": "*"
+      }
+    },
+    "node_modules/component-dom": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/component-dom/-/component-dom-1.0.7.tgz",
+      "integrity": "sha512-Q3Nb0ngr6fQrWDNbNF9IXJWRJEadgFYM3inFCDp6INQ9BLmuk759zUwtUF26e49w3fhZIN2JVKmoy7xs8XhwxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "component-classes": "1.2.3",
+        "component-css": "0.0.6",
+        "component-delegate": "0.2.3",
+        "component-each": "0.2.5",
+        "component-event": "0.1.4",
+        "component-query": "0.0.3",
+        "component-value": "1.1.0",
+        "domify": "1.3.2",
+        "matches-selector": "1.0.0",
+        "object-keys": "1.0.3",
+        "text-content": "0.0.3",
+        "to-function": "2.0.6",
+        "trim": "0.0.1",
+        "yields-traverse": "0.1.1"
+      }
+    },
+    "node_modules/component-dom/node_modules/object-keys": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.3.tgz",
+      "integrity": "sha512-C9AHglIN4DeikXJitZAmcls7Ics4QJr0QnVXFtK4wVly8zo0udlW96Hfw0kLQ0LqiE21Z2HgBMIS7C6/s4L2Tg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/component-each": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/component-each/-/component-each-0.2.5.tgz",
+      "integrity": "sha512-OUh5vamhrITVmrEdpMdnwoXfIOp3N7tLhoXv5a0qpO55bnWqK6f1G3QUoXdxw4vPvcQOG7vUMIr4sGxYE+fb6A==",
+      "dependencies": {
+        "component-type": "1.0.0",
+        "to-function": "2.0.5"
+      }
+    },
+    "node_modules/component-each/node_modules/to-function": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/to-function/-/to-function-2.0.5.tgz",
+      "integrity": "sha512-AkKFEMgChoei2QkoDtryuSI9Ge2Hnf6Ho+hsn3lXvqeq8fg8qZihXOn9krnm6k9QE6t13CNSivNgtpQdbNlmIg==",
+      "dependencies": {
+        "component-props": "*",
+        "remove-try-require": "0.0.0"
+      }
+    },
+    "node_modules/component-emitter": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.0.tgz",
+      "integrity": "sha512-U8EviusIm8Fc5vMbs9opNX8r/hAz8PFYOu003AR1OVkCnDSTaBHB8inMn97yIbkGlI+dcdsItTBjgiZkVVzxYg==",
+      "license": "MIT"
+    },
+    "node_modules/component-event": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/component-event/-/component-event-0.1.4.tgz",
+      "integrity": "sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw=="
+    },
+    "node_modules/component-indexof": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz",
+      "integrity": "sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw=="
+    },
+    "node_modules/component-matches-selector": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/component-matches-selector/-/component-matches-selector-0.1.7.tgz",
+      "integrity": "sha512-Yb2+pVBvrqkQVpPaDBF0DYXRreBveXJNrpJs9FnFu8PF6/5IIcz5oDZqiH9nB5hbD2/TmFVN5ZCxBzqu7yFFYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "component-query": "*",
+        "global-object": "^1.0.0"
+      }
+    },
+    "node_modules/component-props": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/component-props/-/component-props-1.1.1.tgz",
+      "integrity": "sha512-69pIRJs9fCCHRqCz3390YF2LV1Lu6iEMZ5zuVqqUn+G20V9BNXlMs0cWawWeW9g4Ynmg29JmkG6R7/lUJoGd1Q=="
+    },
+    "node_modules/component-query": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-query/-/component-query-0.0.3.tgz",
+      "integrity": "sha512-VgebQseT1hz1Ps7vVp2uaSg+N/gsI5ts3AZUSnN6GMA2M82JH7o+qYifWhmVE/e8w/H48SJuA3nA9uX8zRe95Q==",
+      "license": "MIT"
+    },
+    "node_modules/component-type": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/component-type/-/component-type-1.0.0.tgz",
+      "integrity": "sha512-qzUg4SGDH6KFYlcklmeZwucbtosh/XGwuIffqXAhC1dZyjO7Xu1UuaxwKRY29EncuBj/DH+h6Zot3AdZS6xdFw=="
+    },
+    "node_modules/component-value": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/component-value/-/component-value-1.1.0.tgz",
+      "integrity": "sha512-WNrFqq9qIliaZ5H18D26yY7GttwETXcOqHKWrUC/m4d/6GXf0XwTQTOrPhrRng3lkuqAwhKEWBvVy5aafkKSkA==",
+      "license": "MIT",
+      "dependencies": {
+        "component-type": "*"
+      }
+    },
     "node_modules/compute-scroll-into-view": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
@@ -6573,6 +6795,10 @@
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
       "license": "MIT"
     },
+    "node_modules/DesignDeck": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -6663,6 +6889,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/domify": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/domify/-/domify-1.3.2.tgz",
+      "integrity": "sha512-n+2DdXJdDkXPuR4a8m4gePUXl2lNT8fY7B1cgjC/B+w/kOn1zz7ZC0O1QiNxaadN5th7olGOJfDbxqgRKSHbYw=="
+    },
     "node_modules/dompurify": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
@@ -6696,9 +6927,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.45",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.45.tgz",
-      "integrity": "sha512-vOzZS6uZwhhbkZbcRyiy99Wg+pYFV5hk+5YaECvx0+Z31NR3Tt5zS6dze2OepT6PCTzVzT0dIJItti+uAW5zmw==",
+      "version": "1.5.47",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.47.tgz",
+      "integrity": "sha512-zS5Yer0MOYw4rtK2iq43cJagHZ8sXN0jDHDKzB+86gSBSAI4v07S97mcq+Gs2vclAxSh1j7vOAHxSVgduiiuVQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -7171,9 +7402,9 @@
       }
     },
     "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.1.tgz",
-      "integrity": "sha512-zHByM9WTUMnfsDTafGXRiqxp6lFtNoSOWBY6FonVRn3A+BUwN1L/tdBXT40BcBJi0cZjOGTXZ0eD/rTG9fEJ0g==",
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+      "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7185,7 +7416,6 @@
         "axobject-query": "^4.1.0",
         "damerau-levenshtein": "^1.0.8",
         "emoji-regex": "^9.2.2",
-        "es-iterator-helpers": "^1.1.0",
         "hasown": "^2.0.2",
         "jsx-ast-utils": "^3.3.5",
         "language-tags": "^1.0.9",
@@ -7608,9 +7838,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.11.9",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
-      "integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
+      "version": "11.11.10",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.10.tgz",
+      "integrity": "sha512-061Bt1jL/vIm+diYIiA4dP/Yld7vD47ROextS7ESBW5hr4wQFhxB5D5T5zAc3c/5me3cOa+iO5LqhA38WDln/A==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
@@ -7885,6 +8115,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/global-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-object/-/global-object-1.0.0.tgz",
+      "integrity": "sha512-mSPSkY6UsHv6hgW0V2dfWBWTS8TnPnLx3ECVNoWp6rBI2Bg66VYoqGoTFlH/l7XhAZ/l+StYlntXlt87BEeCcg==",
+      "license": "WTFPL"
+    },
     "node_modules/globals": {
       "version": "13.24.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
@@ -8206,23 +8442,17 @@
       }
     },
     "node_modules/intl-messageformat": {
-      "version": "10.7.1",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.1.tgz",
-      "integrity": "sha512-xQuJW2WcyzNJZWUu5xTVPOmNSA1Sowuu/NKFdUid5Fxx/Yl6/s4DefTU/y7zy+irZLDmFGmTLtnM8FqpN05wlA==",
+      "version": "10.7.3",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.3.tgz",
+      "integrity": "sha512-AAo/3oyh7ROfPhDuh7DxTTydh97OC+lv7h1Eq5LuHWuLsUMKOhtzTYuyXlUReuwZ9vANDHo4CS1bGRrn7TZRtg==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "2.2.0",
-        "@formatjs/fast-memoize": "2.2.1",
-        "@formatjs/icu-messageformat-parser": "2.8.0",
-        "tslib": "^2.7.0"
+        "@formatjs/ecma402-abstract": "2.2.1",
+        "@formatjs/fast-memoize": "2.2.2",
+        "@formatjs/icu-messageformat-parser": "2.9.1",
+        "tslib": "2"
       }
     },
-    "node_modules/intl-messageformat/node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "license": "0BSD"
-    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -9156,6 +9386,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/matches-selector": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.0.0.tgz",
+      "integrity": "sha512-H8IDNW9GpMMYbYslt87uSmBaccnrN/jvCCSHlUnU8dsYykpvNXu6aoJV6es/PfBa9U7OV0tP4Zpg8sBeI7kp/w==",
+      "license": "MIT"
+    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -9534,6 +9770,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/notification": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/notification/-/notification-0.0.6.tgz",
+      "integrity": "sha512-DY46KX68nrff+YK/+aDJSLc+T2Ok7BHDfuOfle7sxxEm36lS2Y2jdOBqROpQ1kcQ3l5LOVVpbdfMRXyhtN9PEA==",
+      "license": "MIT",
+      "dependencies": {
+        "component-dom": "1.0.7",
+        "component-emitter": "1.2.0",
+        "on-body": "0.0.1"
+      }
+    },
     "node_modules/npmlog": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
@@ -9681,6 +9928,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/on-body": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/on-body/-/on-body-0.0.1.tgz",
+      "integrity": "sha512-SP5tYKB0FpS13zQ3pWqGtHYgqnT3Q3WDZ3UdiXVnTzPq85nW/m1V6bn+xvDJ7U5sDoVH4gDOKyWF5/WDseoRBA==",
+      "license": "MIT",
+      "dependencies": {
+        "component-each": "*"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -10058,6 +10314,15 @@
         "fsevents": "2.3.3"
       }
     },
+    "node_modules/private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -10290,6 +10555,19 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.6",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
+      "integrity": "sha512-yYjp+omCDf9lhZcrZHKbSq7YMuK0zcYkDFTzfRFgTXkTFHZ1ToxwAonzA4JI5CxA91JpjFLmwEsZEgfYfOqI1A==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/react-virtuoso": {
       "version": "4.12.0",
       "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.12.0.tgz",
@@ -10347,6 +10625,44 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recast": {
+      "version": "0.5.27",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.5.27.tgz",
+      "integrity": "sha512-VQy2LbyCvGeo3R3huduWwpgo7ELlyklGQjT7KzE2t2IBhDDdrtNGUSM9hfxI3bF0bUxH1VpueKKw6qxF6qUC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "~0.3.35",
+        "cls": "~0.1.3",
+        "esprima": "git+https://github.com/ariya/esprima.git#harmony",
+        "private": "~0.1.4",
+        "source-map": "0.1.32"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/recast/node_modules/esprima": {
+      "version": "1.1.0-dev-harmony",
+      "resolved": "git+ssh://git@github.com/ariya/esprima.git#a65a3eb93b9a5dce9a1184ca2d1bd0b184c6b8fd",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.1.32",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
+      "integrity": "sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -10394,6 +10710,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-try-require": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/remove-try-require/-/remove-try-require-0.0.0.tgz",
+      "integrity": "sha512-zHsp8/a5hsPAUklV8hPMgrZsK68XcRFRxIV72lsqZ1rs9r/Sp1nXG1OgdKux/RLBs7GBaadBKffSmwZHTaZj8w==",
+      "license": "MIT",
+      "dependencies": {
+        "ast-parents": "0.0.1",
+        "ast-transform": "0.0.0",
+        "replace-method": "0.0.0"
+      }
+    },
+    "node_modules/replace-method": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/replace-method/-/replace-method-0.0.0.tgz",
+      "integrity": "sha512-EnFmtCN4d1HxEbZOcT3QcHqS1jWX19hr8bAh62liHBEBnl8X+3/X6mw8NsZYFQcuXKHpt2+JtZMDPcbfobT8+g==",
+      "license": "MIT",
+      "dependencies": {
+        "recast": "~0.5.7"
+      }
+    },
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
@@ -11354,6 +11690,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-content": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/text-content/-/text-content-0.0.3.tgz",
+      "integrity": "sha512-xOXK9JnadK9E9TjCAWL3dJ/NL5RKXDmLRkI/4HfMHTNem7cXR9fpHXWNzevG/CUB7JVyl4/ngun9778vzcQ8VA==",
+      "license": "MIT"
+    },
     "node_modules/text-segmentation": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
@@ -11392,6 +11734,12 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==",
+      "license": "MIT"
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
@@ -11410,6 +11758,29 @@
       "integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
       "license": "MIT"
     },
+    "node_modules/to-camel-case": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-0.2.1.tgz",
+      "integrity": "sha512-4mHiOYZ6OiXZtJEG3rpn1wfk9nVK9Ki+Kn53zzAtDmtg/sKky/FxMQxjB0AaRiZqe4Gt4ptEW8mRKO2+DtQNmg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-space-case": "0.1.2"
+      }
+    },
+    "node_modules/to-function": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/to-function/-/to-function-2.0.6.tgz",
+      "integrity": "sha512-LWfUmW851x5T8+78Nl82CA2j6w0trhoFj4rpS6pFUMgfUMUySDAKPgTvQkUqlWuH3Lihlk5sPyDHSVwmKDSc5Q==",
+      "dependencies": {
+        "component-props": "*"
+      }
+    },
+    "node_modules/to-no-case": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-0.1.1.tgz",
+      "integrity": "sha512-XNChsa36ssNQibYbv/kBSLb0jEfPuePdnbX1tBpHypUbtjBSR8ihaDRRYPZLMstjSpPM+onSgxeDjg+lgfIzZQ==",
+      "license": "MIT"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -11422,6 +11793,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/to-space-case": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-0.1.2.tgz",
+      "integrity": "sha512-DtF9QZwx8W6WMhrCuvUZJYX9sT74/VOdVxi68EkEu3gt0SUQHhJG+UYbQI0559XcchsX7gziPlWuV4dEGC59dA==",
+      "license": "MIT",
+      "dependencies": {
+        "to-no-case": "0.1.1"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -11451,6 +11831,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==",
+      "deprecated": "Use String.prototype.trim() instead"
+    },
     "node_modules/ts-api-utils": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
@@ -12081,6 +12467,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/within-document": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/within-document/-/within-document-0.0.1.tgz",
+      "integrity": "sha512-rsgv0IELa4R2+TcqqBHPo+wwZLgw/OVoBZE5S2atMdN+kNUMgfxdl5xIQTku4LquD4LrzqJLlr85xZLj+CLspw=="
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -12248,6 +12639,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/yields-traverse": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/yields-traverse/-/yields-traverse-0.1.1.tgz",
+      "integrity": "sha512-Vxyx1K/VDNR9IOgZ66k06q3nloaK/28vGfC/RhkGxfhqMXGD7yNFyIkfUZhTHpyfmBaJc8eDku46eFIWUXf6TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "matches-selector": "*"
+      }
+    },
     "node_modules/yn": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
diff --git a/package.json b/package.json
index 7344262..a62d5e3 100644
--- a/package.json
+++ b/package.json
@@ -34,19 +34,22 @@
     "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "DesignDeck": "file:",
     "fabric": "^5.3.0",
-    "jsonwebtoken": "^9.0.2",
     "framer-motion": "^11.11.9",
+    "jsonwebtoken": "^9.0.2",
     "jspdf": "^2.5.1",
     "lucide-react": "^0.321.0",
     "next": "^14.2.15",
     "next-themes": "^0.3.0",
+    "notification": "^0.0.6",
     "react": "^18",
     "react-animated-cursor": "^2.11.2",
     "react-color": "^2.19.3",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.13",
     "react-icons": "^5.3.0",
+    "react-toastify": "^10.0.6",
     "tailwind-merge": "^2.2.1",
     "uuid": "^9.0.1"
   },
diff --git a/tsconfig.json b/tsconfig.json
index 6a76a17..8327b46 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,7 +33,7 @@
     "**/*.tsx",
     ".next/types/**/*.ts",
     "app/api/liveblocks-auth/route.js"
-  ],
+, "app/front-navbar.tsx"  ],
   "exclude": [
     "node_modules"
   ]