diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
index 3026da00..ac2386ef 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
@@ -58,7 +58,7 @@ const DashboardPage: React.FC = () => {
 
 
             <Link
-              href="/generate"
+              href="/upload"
               className="inline-flex items-center gap-2 rounded-xl px-4 py-2.5 text-black text-sm font-semibold font-syne shadow-sm hover:shadow-md"
               aria-label="Create new presentation"
               style={{
@@ -71,21 +71,7 @@ const DashboardPage: React.FC = () => {
               <span className="md:hidden">New</span>
               <ChevronRight className="w-4 h-4" />
             </Link>
-            {/* {
-              <Link
-                href="/theme?tab=new-theme"
-                className="inline-flex items-center font-inter font-normal gap-2 rounded-xl px-4 py-2.5 text-black text-sm  shadow-sm hover:shadow-md"
-                aria-label="Create new themes"
-                style={{
-                  borderRadius: "48px",
-                  background: "linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)",
-                }}
-              >
-                <span className="hidden md:inline">New Themes</span>
-                <span className="md:hidden">New</span>
-                <ChevronRight className="w-4 h-4" />
-              </Link>
-            } */}
+
           </div>
         </div>
       </div>
diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
index ea71b7ff..fca4e5ce 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/templates/components/TemplatePanel.tsx
@@ -35,7 +35,7 @@ export const CustomTemplateCard = React.memo(function CustomTemplateCard({ templ
 
             <img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
             <span className="text-xs font-syne absolute top-2 flex gap-1 capitalize  items-center left-2 rounded-[100px]  px-2.5 py-1 bg-[#3A3A3AF5] text-white font-semibold  z-40">
-                Layouts- {totalLayouts}
+                {totalLayouts} {totalLayouts === 1 ? 'Layout' : 'Layouts'}
             </span>
             <div className="p-5">
 
@@ -206,10 +206,6 @@ const LayoutPreview = () => {
                         Templates
                     </h3>
                     <div className="flex  gap-2.5 max-sm:w-full max-md:justify-center max-sm:flex-wrap">
-
-
-
-
                         <Link
                             href="/custom-template"
                             className="inline-flex items-center font-syne font-semibold gap-2 rounded-xl px-4 py-2.5 text-black text-sm  shadow-sm hover:shadow-md"
diff --git a/electron/servers/nextjs/app/(presentation-generator)/outline/components/TemplateSelection.tsx b/electron/servers/nextjs/app/(presentation-generator)/outline/components/TemplateSelection.tsx
index e4405228..5afe9425 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/outline/components/TemplateSelection.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/outline/components/TemplateSelection.tsx
@@ -49,7 +49,7 @@ const BuiltInTemplateCard = memo(({ template, isSelected, onSelect }: {
       onClick={handleClick}
     >
       <span className="text-xs font-syne absolute top-2 flex gap-1 capitalize items-center left-2 rounded-[100px] px-2.5 py-1 bg-[#3A3A3AF5] text-white font-semibold z-40">
-        Layouts- {template.layouts.length}
+        {template.layouts.length} {template.layouts.length === 1 ? 'Layout' : 'Layouts'}
       </span>
       <img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
       <div className="p-5">
diff --git a/electron/servers/nextjs/components/ui/sonner.tsx b/electron/servers/nextjs/components/ui/sonner.tsx
index 357596f2..45a73990 100644
--- a/electron/servers/nextjs/components/ui/sonner.tsx
+++ b/electron/servers/nextjs/components/ui/sonner.tsx
@@ -1,162 +1,209 @@
 "use client"
 
-import { useTheme } from "next-themes"
+import type React from "react"
+import { BadgeCheck, Loader2, ShieldAlert } from "lucide-react"
 import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+const Toaster = ({ icons, ...props }: ToasterProps) => {
+  const defaultIcons: NonNullable<ToasterProps["icons"]> = {
+    success: <BadgeCheck aria-hidden="true" />,
+    error: <ShieldAlert aria-hidden="true" />,
+    info: <ShieldAlert aria-hidden="true" />,
+    warning: <ShieldAlert aria-hidden="true" />,
+    loading: <Loader2 aria-hidden="true" className="animate-spin" />,
+    close: <span aria-hidden="true">Got it!</span>,
+  }
 
   return (
     <>
       <style jsx global>{`
-        /* Base toast styling */
-        [data-sonner-toast] {
-          border-radius: 12px !important;
-          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
-          backdrop-filter: blur(8px) !important;
-        }
-        /* Success Toast */
-        [data-sonner-toast][data-type="success"] {
-          background: rgb(248 250 252) !important; /* slate-50 */
-          border: 1px solid rgb(28, 138, 68) !important; /* green-500 border */
-          border-left: 4px solid rgb(28, 138, 68) !important; /* green-500 left accent */
-        }
-        [data-sonner-toast][data-type="success"] [data-title] {
-          color: rgb(15 23 42) !important; /* slate-900 */
-          font-weight: 500 !important;
-        }
-        [data-sonner-toast][data-type="success"] [data-description] {
-          color: rgb(71 85 105) !important; /* slate-600 */
+        /* Constrain toast width similar to the design mock */
+       
+        /* Neutral "card" toast container */
+        [data-sonner-toast][data-styled="true"] {
+          border-radius: 10px !important;
+         
+          border: 1px solid #E1E1E5 !important;
+          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06) !important;
+          padding: 8px !important;
+          gap: 10px !important;
+          backdrop-filter: blur(6px) !important;
+          background: white !important;
         }
 
-        /* Error Toast */
-        [data-sonner-toast][data-type="error"] {
-          background: rgb(248 250 252) !important; /* slate-50 */
-          border: 1px solid rgb(186, 48, 48) !important; /* red-500 border */
-          border-left: 4px solid rgb(186, 48, 48) !important; /* red-500 left accent */
-        }
-        [data-sonner-toast][data-type="error"] [data-title] {
-          color: rgb(15 23 42) !important; /* slate-900 */
+        /* Typography */
+        [data-sonner-toast][data-styled="true"] [data-title] {
+          font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
+            BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+            "Noto Sans", sans-serif !important;
+          font-size: 12px !important;
           font-weight: 500 !important;
-        }
-        [data-sonner-toast][data-type="error"] [data-description] {
-          color: rgb(71 85 105) !important; /* slate-600 */
+          line-height: 14px !important;
+          letter-spacing: 0.04em !important;
+          color: rgb(15 23 42) !important; /* slate-900 */
+          text-transform: none !important;
         }
 
-        /* Info Toast */
-        [data-sonner-toast][data-type="info"] {
-          background: rgb(248 250 252) !important; /* slate-50 */
-          border: 1px solid rgb(59 130 246) !important; /* blue-500 border */
-          border-left: 4px solid rgb(59 130 246) !important; /* blue-500 left accent */
-        }
-        [data-sonner-toast][data-type="info"] [data-title] {
-          color: rgb(15 23 42) !important; /* slate-900 */
-          font-weight: 500 !important;
-        }
-        [data-sonner-toast][data-type="info"] [data-description] {
-          color: rgb(71 85 105) !important; /* slate-600 */
+        [data-sonner-toast][data-styled="true"] [data-description] {
+          font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
+            BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+            "Noto Sans", sans-serif !important;
+          font-size: 10px !important;
+          font-weight: 400 !important;
+          line-height: 10px !important; /* 100% */
+          letter-spacing: 0.03em !important;
+          color: rgb(100 116 139) !important; /* slate-500 */
         }
 
-        /* Warning Toast */
-        [data-sonner-toast][data-type="warning"] {
-          background: rgb(248 250 252) !important; /* slate-50 */
-          border: 1px solid rgb(245 158 11) !important; /* amber-500 border */
-          border-left: 4px solid rgb(245 158 11) !important; /* amber-500 left accent */
-        }
-        [data-sonner-toast][data-type="warning"] [data-title] {
-          color: rgb(15 23 42) !important; /* slate-900 */
-          font-weight: 500 !important;
-        }
-        [data-sonner-toast][data-type="warning"] [data-description] {
-          color: rgb(71 85 105) !important; /* slate-600 */
+        [data-sonner-toast][data-styled="true"] [data-content] {
+          gap: 2px !important;
+          flex: 1 1 auto !important;
+          min-width: 0 !important;
         }
 
-        /* Loading Toast */
-        [data-sonner-toast][data-type="loading"] {
+        /* Left icon badge */
+        [data-sonner-toast][data-styled="true"] [data-icon] {
+          width: 20px !important;
+          height: 20px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+          margin: 0 !important;
+          color: rgb(51 65 85) !important; /* slate-700 */
+        }
+
+        [data-sonner-toast][data-styled="true"] [data-icon] svg {
+          width: 20px !important;
+          height: 20px !important;
+        }
+
+        /* Per-type icon colors */
+        [data-sonner-toast][data-type="success"] [data-icon] {
+          color: rgb(22, 163, 74) !important;
+        }
+
+        [data-sonner-toast][data-type="error"] [data-icon] {
+          color: rgb(220, 38, 38) !important;
+        }
+
+        [data-sonner-toast][data-type="info"] [data-icon] {
+          color: rgb(37, 99, 235) !important;
+        }
+
+        [data-sonner-toast][data-type="warning"] [data-icon] {
+          color: rgb(217, 119, 6) !important;
+        }
+
+        [data-sonner-toast][data-type="loading"] [data-icon] {
+          color: rgb(124, 58, 237) !important;
+        }
+
+        /* Outline buttons like the mock ("Got it!") */
+        [data-sonner-toast][data-styled="true"] [data-button] {
+          height: auto !important;
+          padding: 4px 8px !important;
+          border-radius: 6px !important;
+          font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
+            BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+            "Noto Sans", sans-serif !important;
+          font-size: 10px !important;
+          font-weight: 400 !important;
+          background: rgb(255 255 255) !important;
+          color: #3F3F3F !important;
+          border: 1px solid #EDEEEF !important;
+          box-shadow: none !important;
+        }
+
+        /* Always-present "Got it!" button (styled close button) */
+        [data-sonner-toast][data-styled="true"] [data-close-button] {
+          position: static !important;
+          inset: auto !important;
+          transform: none !important;
+          order: 9999 !important;
+          flex: 0 0 auto !important;
+          flex-shrink: 0 !important;
+          white-space: nowrap !important;
+          width: auto !important;
+          height: auto !important;
+          padding: 4px 8px !important;
+          border-radius: 6px !important;
+          margin-left: auto !important;
+          margin-right: 0 !important;
+          align-self: center !important;
+          background: rgb(255 255 255) !important;
+          color: #3F3F3F !important;
+          border: 1px solid #EDEEEF !important;
+          box-shadow: none !important;
+          font-family: var(--font-syne), ui-sans-serif, system-ui, -apple-system,
+            BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+            "Noto Sans", sans-serif !important;
+          font-size: 10px !important;
+          font-weight: 400 !important;
+          line-height: 14px !important;
+          letter-spacing: 0.02em !important;
+        }
+
+        [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
           background: rgb(248 250 252) !important; /* slate-50 */
-          border: 1px solid rgb(139 92 246) !important; /* violet-500 border */
-          border-left: 4px solid rgb(139 92 246) !important; /* violet-500 left accent */
         }
-        [data-sonner-toast][data-type="loading"] [data-title] {
-          color: rgb(15 23 42) !important; /* slate-900 */
-          font-weight: 500 !important;
-        }
-        [data-sonner-toast][data-type="loading"] [data-description] {
-          color: rgb(71 85 105) !important; /* slate-600 */
+
+        [data-sonner-toast][data-styled="true"] [data-button]:hover {
+          background: rgb(248 250 252) !important; /* slate-50 */
         }
 
         /* Dark mode */
-        .dark [data-sonner-toast][data-type="success"] {
-          background: rgb(15 23 42) !important; /* slate-900 */
-          border: 1px solid rgb(34 197 94) !important;
-          border-left: 4px solid rgb(34 197 94) !important;
+        .dark [data-sonner-toast][data-styled="true"] {
+          background: rgb(2 6 23) !important; /* slate-950 */
+          border: 1px solid rgba(148, 163, 184, 0.22) !important; /* slate-400 @ 22% */
+          box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important;
         }
-        .dark [data-sonner-toast][data-type="success"] [data-title] {
+
+        .dark [data-sonner-toast][data-styled="true"] [data-title] {
           color: rgb(248 250 252) !important; /* slate-50 */
         }
-        .dark [data-sonner-toast][data-type="success"] [data-description] {
+
+        .dark [data-sonner-toast][data-styled="true"] [data-description] {
           color: rgb(148 163 184) !important; /* slate-400 */
         }
 
-        .dark [data-sonner-toast][data-type="error"] {
-          background: rgb(15 23 42) !important; /* slate-900 */
-          border: 1px solid rgb(239 68 68) !important;
-          border-left: 4px solid rgb(239 68 68) !important;
-        }
-        .dark [data-sonner-toast][data-type="error"] [data-title] {
-          color: rgb(248 250 252) !important; /* slate-50 */
-        }
-        .dark [data-sonner-toast][data-type="error"] [data-description] {
-          color: rgb(148 163 184) !important; /* slate-400 */
+        .dark [data-sonner-toast][data-styled="true"] [data-button] {
+          background: rgb(2 6 23) !important;
+          color: rgb(248 250 252) !important;
+          border: 1px solid rgba(148, 163, 184, 0.26) !important;
         }
 
-        .dark [data-sonner-toast][data-type="info"] {
-          background: rgb(15 23 42) !important; /* slate-900 */
-          border: 1px solid rgb(59 130 246) !important;
-          border-left: 4px solid rgb(59 130 246) !important;
-        }
-        .dark [data-sonner-toast][data-type="info"] [data-title] {
-          color: rgb(248 250 252) !important; /* slate-50 */
-        }
-        .dark [data-sonner-toast][data-type="info"] [data-description] {
-          color: rgb(148 163 184) !important; /* slate-400 */
+        .dark [data-sonner-toast][data-styled="true"] [data-close-button] {
+          background: rgb(2 6 23) !important;
+          color: rgb(248 250 252) !important;
+          border: 1px solid rgba(148, 163, 184, 0.26) !important;
         }
 
-        .dark [data-sonner-toast][data-type="warning"] {
+        .dark [data-sonner-toast][data-styled="true"] [data-button]:hover {
           background: rgb(15 23 42) !important; /* slate-900 */
-          border: 1px solid rgb(245 158 11) !important;
-          border-left: 4px solid rgb(245 158 11) !important;
-        }
-        .dark [data-sonner-toast][data-type="warning"] [data-title] {
-          color: rgb(248 250 252) !important; /* slate-50 */
-        }
-        .dark [data-sonner-toast][data-type="warning"] [data-description] {
-          color: rgb(148 163 184) !important; /* slate-400 */
         }
 
-        .dark [data-sonner-toast][data-type="loading"] {
+        .dark [data-sonner-toast][data-styled="true"] [data-close-button]:hover {
           background: rgb(15 23 42) !important; /* slate-900 */
-          border: 1px solid rgb(139 92 246) !important;
-          border-left: 4px solid rgb(139 92 246) !important;
-        }
-        .dark [data-sonner-toast][data-type="loading"] [data-title] {
-          color: rgb(248 250 252) !important; /* slate-50 */
-        }
-        .dark [data-sonner-toast][data-type="loading"] [data-description] {
-          color: rgb(148 163 184) !important; /* slate-400 */
         }
       `}</style>
       <Sonner
-        theme={theme as ToasterProps["theme"]}
-        className="toaster group"
+        style={{
+          zIndex: 999999999,
+          background: 'red',
+        }}
+        className="toaster group z-50 bg-white"
+        icons={{ ...defaultIcons, ...(icons ?? {}) }}
         toastOptions={{
+          closeButtonAriaLabel: "Dismiss notification",
           classNames: {
             toast: "group toast",
             description: "group-[.toast]:text-muted-foreground",
-            actionButton: "group-[.toast]:bg-slate-900 group-[.toast]:text-white hover:group-[.toast]:bg-slate-800 group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5",
-            cancelButton: "group-[.toast]:bg-slate-200 group-[.toast]:text-slate-700 hover:group-[.toast]:bg-slate-300 group-[.toast]:rounded-lg group-[.toast]:px-3 group-[.toast]:py-1.5",
+            actionButton:
+              "group-[.toast]:rounded-2xl group-[.toast]:border group-[.toast]:border-slate-200 group-[.toast]:bg-white group-[.toast]:text-slate-900 hover:group-[.toast]:bg-slate-50",
+            cancelButton:
+              "group-[.toast]:rounded-2xl group-[.toast]:border group-[.toast]:border-slate-200 group-[.toast]:bg-white group-[.toast]:text-slate-700 hover:group-[.toast]:bg-slate-50",
           },
         }}
         {...props}