From 5018c9b9f16f89a269e1e2d34c086731228d27a6 Mon Sep 17 00:00:00 2001
From: shiva raj badu <shivabadu5@gmail.com>
Date: Wed, 15 Apr 2026 23:30:18 +0545
Subject: [PATCH] refactor: Improve Presentation page, Present Mode & theme

---
 .../Components/DashboardSidebar.tsx           |  35 +-
 .../dashboard/components/DashboardPage.tsx    |  21 +-
 .../dashboard/components/Header.tsx           |  48 +-
 .../dashboard/components/PresentationCard.tsx |  52 +-
 .../dashboard/components/PresentationGrid.tsx |   2 +
 .../components/PresentationRender.tsx         |  45 +-
 .../components/V1ContentRender.tsx            |   6 +-
 .../presentation/components/Help.tsx          | 312 ------------
 .../presentation/components/LoadingState.tsx  |  35 +-
 .../components/PresentationHeader.tsx         |  44 +-
 .../components/PresentationMode.tsx           | 443 ++++++++++--------
 .../components/PresentationPage.tsx           |  41 +-
 .../presentation/components/SidePanel.tsx     |   6 +-
 .../presentation/components/SlideContent.tsx  |  15 +-
 .../presentation/components/SortableSlide.tsx |   9 -
 .../presentation/components/ThemeSelector.tsx |  81 +---
 .../presentation/hooks/usePresentationData.ts |  48 +-
 .../hooks/usePresentationStreaming.ts         | 170 +++++--
 .../presentation/page.tsx                     |   1 +
 .../app/presentation-templates/index.tsx      |   2 +-
 20 files changed, 682 insertions(+), 734 deletions(-)
 delete mode 100644 servers/nextjs/app/(presentation-generator)/presentation/components/Help.tsx

diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
index 7974bc1f..25535f3c 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import React from "react";
-import { LayoutDashboard, Star, Brain, Settings, Palette } from "lucide-react";
+import { LayoutDashboard, Star, Brain, Settings, Palette, HelpCircle } from "lucide-react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
+import { useSelector } from "react-redux";
+import { RootState } from "@/store/store";
+import { IMAGE_PROVIDERS, LLM_PROVIDERS } from "@/utils/providerConstants";
 
 
 
@@ -27,21 +31,24 @@ const DashboardSidebar = () => {
     const activeTab = pathname.split("?")[0].split("/").pop();
     const router = useRouter();
 
+    const { llm_config } = useSelector((state: RootState) => state.userConfig)
+
+
 
 
 
     return (
         <aside
-            className="sticky top-0 h-screen w-[115px] flex flex-col justify-between bg-[#F6F6F9] backdrop-blur border-r border-slate-200/60 px-4  py-8"
+            className="sticky top-0 h-screen w-[115px] flex flex-col justify-between bg-[#F6F6F9] backdrop-blur border-r border-[#E1E1E5] px-4  py-8"
             aria-label="Dashboard sidebar"
         >
             <div>
 
-                <div onClick={() => router.push("/dashboard")} className="flex items-center  pb-6 border-b border-slate-200/60   gap-2    ">
+                <Link href={`/dashboard`} className="flex items-center  pb-6 border-b border-[#E1E1E5]   gap-2    ">
                     <div className="bg-[#7C51F8] rounded-full cursor-pointer p-1 flex justify-center items-center mx-auto">
                         <img src="/logo-with-bg.png" alt="Presenton logo" className="h-[40px] object-contain w-full" />
                     </div>
-                </div>
+                </Link>
                 <nav className="pt-6 font-syne" aria-label="Dashboard sections">
                     <div className="  space-y-6">
 
@@ -70,7 +77,7 @@ const DashboardSidebar = () => {
                             title="Templates"
                         >
                             <div className="flex flex-col cursor-pointer tex-center items-center gap-2  transition-colors">
-                                <Star className={`h-4 w-4 ${pathname === "/templates" ? "text-[#5146E5]" : "text-slate-600"}`} />
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={`${pathname === "/templates" ? "#5146E5" : "#475569"}`} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4"><path d="M4 14h6" /><path d="M4 2h10" /><rect x="4" y="18" width="16" height="4" rx="1" /><rect x="4" y="6" width="16" height="4" rx="1" /></svg>
                                 <span className="text-[11px] text-slate-800">Templates</span>
                             </div>
                         </Link>
@@ -93,8 +100,18 @@ const DashboardSidebar = () => {
                 </nav>
             </div>
 
-            <div className=" pt-5 border-t border-slate-200/60  font-syne "
+            <div className=" pt-5 border-t border-[#E1E1E5]  font-syne "
             >
+                <div className="mb-4">
+
+                    <Link href="https://docs.presenton.ai/help" target="_blank" className="flex flex-col tex-center items-center gap-2  transition-colors"><HelpCircle className="w-4 h-4" /><span className="text-[11px] text-slate-800">Help</span></Link>
+                </div>
+                <div className="mb-4">
+
+                    <Link href="https://discord.com/invite/9ZsKKxudNE" target="_blank" className="flex flex-col tex-center items-center gap-2  transition-colors"><img src="/discord.png" alt="Discord" className="w-5 h-5 rounded-full object-cover border border-[#EDEEEF]" /><span className="text-[11px] text-slate-800">Community</span></Link>
+                </div>
+
+
                 {BelongingNavItems.map(({ key, label: itemLabel, icon: Icon }) => {
                     const isActive = activeTab === key;
                     return (
@@ -109,7 +126,11 @@ const DashboardSidebar = () => {
                             aria-label={itemLabel}
                             title={itemLabel}
                         >
-                            <Icon className={["h-4 w-4", isActive ? "text-[#5146E5]" : "text-slate-600"].join(" ")} />
+                            {/* <div className="flex items-center  ">
+                                <img src={imageProviderIcon} alt="image provider" className="w-5 h-5 rounded-full object-cover border border-[#EDEEEF]" />
+                                <img src={textProviderIcon} alt="text provider" className="w-5 h-5 rounded-full object-cover border border-[#EDEEEF]" />
+                            </div> */}
+                            <Settings className={`h-4 w-4 ${isActive ? "text-[#5146E5]" : "text-slate-600"}`} />
                             <span className="text-[11px] text-slate-800">{itemLabel}</span>
                         </Link>
                     );
diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
index 3026da00..25b0024d 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/DashboardPage.tsx
@@ -6,6 +6,7 @@ import { DashboardApi } from "@/app/(presentation-generator)/services/api/dashbo
 import { PresentationGrid } from "@/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationGrid";
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
+import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
 
 
 
@@ -15,6 +16,7 @@ const DashboardPage: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    trackEvent(MixpanelEvent.Dashboard_Page_Viewed);
     const loadData = async () => {
       await fetchPresentations();
     };
@@ -58,7 +60,8 @@ const DashboardPage: React.FC = () => {
 
 
             <Link
-              href="/generate"
+              href="/upload"
+              onClick={() => trackEvent(MixpanelEvent.Dashboard_New_Presentation_Clicked)}
               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 +74,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/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx
index 7177698b..b971755e 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/Header.tsx
@@ -5,14 +5,44 @@ import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
+import { ArrowLeft } from "lucide-react";
+
+const PATHS_WITH_HEADER_BACK = [
+  "/upload",
+  "/outline",
+  "/documents-preview",
+  "/template-preview",
+] as const;
+
+function pathMatches(pathname: string | null, base: string) {
+  return pathname === base || pathname?.startsWith(`${base}/`) === true;
+}
+
 const Header = () => {
   const pathname = usePathname();
+  const showHeaderBack = PATHS_WITH_HEADER_BACK.some((p) => pathMatches(pathname, p));
+
+  const backToUpload =
+    pathMatches(pathname, "/outline") || pathMatches(pathname, "/documents-preview");
+  const backToTemplates = pathMatches(pathname, "/template-preview");
+
+  const backHref = backToUpload ? "/upload" : backToTemplates ? "/templates" : "/dashboard";
+  const backLabel = backToUpload
+    ? "BACK"
+    : backToTemplates
+      ? "BACK"
+      : "BACK";
+
   return (
-    <div className="w-full  sticky top-0 z-50 py-7 ">
+    <div className="w-full   sticky top-0 z-50 py-7 "
+      style={{
+        background: "linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 110.67%)",
+
+      }}
+    >
       <Wrapper className="px-5 sm:px-10 lg:px-20">
         <div className="flex items-center justify-between py-1">
           <div className="flex items-center gap-3">
-            {/* {(pathname !== "/upload" && pathname !== "/dashboard") && <BackBtn />} */}
             <Link href="/dashboard" onClick={() => trackEvent(MixpanelEvent.Navigation, { from: pathname, to: "/dashboard" })}>
               <img
                 src="/logo-with-bg.png"
@@ -21,6 +51,20 @@ const Header = () => {
               />
             </Link>
           </div>
+          {showHeaderBack ? (
+            <div>
+              <Link
+                href={backHref}
+                className="text-[#333333] text-xs font-syne font-semibold flex items-center gap-2"
+                onClick={() =>
+                  trackEvent(MixpanelEvent.Navigation, { from: pathname, to: backHref })
+                }
+              >
+                <ArrowLeft className="w-4 h-4 shrink-0 text-[#333333]" aria-hidden />
+                <span>{backLabel}</span>
+              </Link>
+            </div>
+          ) : null}
 
         </div>
       </Wrapper>
diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationCard.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationCard.tsx
index 0f6a3cc7..3155efc2 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationCard.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationCard.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React from "react";
+import React, { useEffect } from "react";
 
 import { Card } from "@/components/ui/card";
 import { DashboardApi } from "@/app/(presentation-generator)/services/api/dashboard";
@@ -15,6 +15,7 @@ import { toast } from "sonner";
 import { useFontLoader } from "@/app/(presentation-generator)/hooks/useFontLoad";
 import SlideScale from "@/app/(presentation-generator)/components/PresentationRender";
 import MarkdownRenderer from "@/components/MarkDownRender";
+import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
 
 export const PresentationCard = ({
   id,
@@ -33,6 +34,47 @@ export const PresentationCard = ({
     e.preventDefault();
     router.push(`/presentation?id=${id}&type=standard`);
   };
+  useEffect(() => {
+    applyTheme(presentation.theme)
+  }, [])
+  const applyTheme = async (theme: any) => {
+    const element = document.getElementById(`dashboard-presentation-card-${id}`)
+    if (!element) return;
+
+    if (!theme || !theme.data || !theme.data.colors['graph_0']) { return; }
+    const cssVariables = {
+      '--primary-color': theme.data.colors['primary'],
+      '--background-color': theme.data.colors['background'],
+      '--card-color': theme.data.colors['card'],
+      '--stroke': theme.data.colors['stroke'],
+      '--primary-text': theme.data.colors['primary_text'],
+      '--background-text': theme.data.colors['background_text'],
+      '--graph-0': theme.data.colors['graph_0'],
+      '--graph-1': theme.data.colors['graph_1'],
+      '--graph-2': theme.data.colors['graph_2'],
+      '--graph-3': theme.data.colors['graph_3'],
+      '--graph-4': theme.data.colors['graph_4'],
+      '--graph-5': theme.data.colors['graph_5'],
+      '--graph-6': theme.data.colors['graph_6'],
+      '--graph-7': theme.data.colors['graph_7'],
+      '--graph-8': theme.data.colors['graph_8'],
+      '--graph-9': theme.data.colors['graph_9'],
+    }
+    Object.entries(cssVariables).forEach(([key, value]) => {
+      element.style.setProperty(key, value)
+    })
+    // 
+    if (theme.data.fonts.textFont.url && theme.data.fonts.textFont.name) {
+      useFontLoader({ [theme.data.fonts.textFont.name]: theme.data.fonts.textFont.url })
+    }
+
+    // Apply fonts to preview container
+    element.style.setProperty('font-family', `"${theme.data.fonts.textFont.name}"`)
+    element.style.setProperty('--heading-font-family', `"${theme.data.fonts.textFont.name}"`)
+    element.style.setProperty('--body-font-family', `"${theme.data.fonts.textFont.name}"`)
+
+
+  }
 
   const handleDelete = async (e: React.MouseEvent) => {
     e.preventDefault();
@@ -59,7 +101,9 @@ export const PresentationCard = ({
       onClick={handlePreview}
       className="bg-[#F8FBFB] font-syne shadow-none sm:shadow-none  presentation-card rounded-[12px] p-0 group hover:shadow-md transition-all duration-500 slide-theme cursor-pointer overflow-hidden flex flex-col"
     >
-      <div suppressHydrationWarning={true} className="flex flex-col flex-1 relative z-40">
+      <div
+        id={`dashboard-presentation-card-${id}`}
+        suppressHydrationWarning={true} className="flex flex-col flex-1 relative z-40">
         {/* <p 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 ">
 
           {presentation.type}
@@ -68,14 +112,14 @@ export const PresentationCard = ({
         <img src="/card_bg.svg" alt="" className="absolute top-0 left-0 w-full h-full object-cover" />
         <div className="scale-[0.75] mt-4  border border-gray-300 rounded-lg overflow-hidden">
 
-          <SlideScale slide={firstSlide} />
+          <SlideScale slide={firstSlide} isClickable={false} />
         </div>
 
         <div className="w-full py-3 px-5 mt-auto z-40 relative bg-white  border-t border-[#EDEEEF]">
           <div className="flex items-center justify-between gap-7 w-full">
             <div className="flex flex-col items-start gap-1">
               <div className="text-sm text-[#191919] font-semibold  overflow-hidden line-clamp-1">
-                <MarkdownRenderer content={title} className="text-sm mb-0  text-[#191919] font-semibold  overflow-hidden line-clamp-1" />
+                <MarkdownRenderer content={title} className="text-sm mb-0  font-syne text-[#191919] font-semibold  overflow-hidden line-clamp-1" />
               </div>
               <p className="text-[#808080] text-sm font-syne">
                 {new Date(presentation?.created_at).toLocaleDateString()}
diff --git a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationGrid.tsx b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationGrid.tsx
index 0edad0fb..dd73c520 100644
--- a/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationGrid.tsx
+++ b/servers/nextjs/app/(presentation-generator)/(dashboard)/dashboard/components/PresentationGrid.tsx
@@ -4,6 +4,7 @@ import { PlusIcon } from "@radix-ui/react-icons";
 import { useRouter } from "next/navigation";
 import { PresentationResponse } from "@/app/(presentation-generator)/services/api/dashboard";
 import { ArrowRight } from "lucide-react";
+import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
 
 interface PresentationGridProps {
   presentations: PresentationResponse[];
@@ -22,6 +23,7 @@ export const PresentationGrid = ({
 }: PresentationGridProps) => {
   const router = useRouter();
   const handleCreateNewPresentation = () => {
+    trackEvent(MixpanelEvent.Dashboard_Create_New_Card_Clicked, { type });
     if (type === "slide") {
       router.push("/upload");
     } else {
diff --git a/servers/nextjs/app/(presentation-generator)/components/PresentationRender.tsx b/servers/nextjs/app/(presentation-generator)/components/PresentationRender.tsx
index 4361845a..fc37153d 100644
--- a/servers/nextjs/app/(presentation-generator)/components/PresentationRender.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/PresentationRender.tsx
@@ -6,40 +6,55 @@ import { V1ContentRender } from '../../(presentation-generator)/components/V1Con
 const BASE_WIDTH = 1280;
 const BASE_HEIGHT = 720;
 
-const SlideScale = ({ slide }: { slide: any }) => {
+const SlideScale = ({
+    slide,
+    theme,
+    isEditMode = true,
+    /** Fill viewport; scale may exceed 1 so slides appear larger in present mode */
+    presentMode = false,
+    isClickable = true,
+}: { slide: any; theme?: any; isEditMode?: boolean; presentMode?: boolean; isClickable?: boolean }) => {
 
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const [containerWidth, setContainerWidth] = useState<number>(0);
+    const [box, setBox] = useState({ w: 0, h: 0 });
 
     const scale = useMemo(() => {
-        // Slight padding to avoid overflow due to borders/scrollbars
-        const safeWidth = Math.max(0, containerWidth + 20);
+        if (presentMode) {
+            const { w, h } = box;
+            if (w < 1 || h < 1) return 1;
+            const sx = (w / BASE_WIDTH) * 0.995;
+            const sy = (h / BASE_HEIGHT) * 0.995;
+            return Math.min(sx, sy);
+        }
+        const safeWidth = Math.max(0, box.w + 20);
         if (!safeWidth) return 1;
         return Math.min((safeWidth / BASE_WIDTH) * 0.98, 1);
-    }, [containerWidth]);
+    }, [presentMode, box.w, box.h]);
 
     useEffect(() => {
         if (!containerRef.current) return;
 
         const el = containerRef.current;
         const ro = new ResizeObserver(() => {
-            // Use clientWidth so we match the actual available column width
-            setContainerWidth(el.clientWidth);
+            setBox({ w: el.clientWidth, h: el.clientHeight });
         });
 
         ro.observe(el);
-        // Initial measure
-        setContainerWidth(el.clientWidth);
+        setBox({ w: el.clientWidth, h: el.clientHeight });
 
         return () => ro.disconnect();
     }, []);
     return (<div
         ref={containerRef}
-        className="relative w-full  shadow-md"
+        className={`relative w-full ${presentMode ? "flex h-full min-h-0 items-center justify-center shadow-none" : "shadow-md"}`}
     >
         <div
-            className="relative mx-auto max-w-[1280px] "
-            style={{ height: `${BASE_HEIGHT * scale}px`, overflow: "hidden" }}
+            className={presentMode ? "relative mx-auto shrink-0" : "relative mx-auto max-w-[1280px]"}
+            style={{
+                width: presentMode ? `${BASE_WIDTH * scale}px` : undefined,
+                height: `${BASE_HEIGHT * scale}px`,
+                overflow: "hidden",
+            }}
         >
             <div
                 className="absolute top-0 left-0"
@@ -62,12 +77,12 @@ const SlideScale = ({ slide }: { slide: any }) => {
                     } as React.CSSProperties}
                 >
 
-                    <div
+                    {!isClickable && <div
                         className="absolute inset-0 bg-transparent z-30 w-full h-full  select-none"
                         aria-hidden="true"
 
-                    />
-                    <V1ContentRender slide={slide} isEditMode={true} />
+                    />}
+                    <V1ContentRender slide={slide} isEditMode={isEditMode} theme={theme} />
                 </div>
 
 
diff --git a/servers/nextjs/app/(presentation-generator)/components/V1ContentRender.tsx b/servers/nextjs/app/(presentation-generator)/components/V1ContentRender.tsx
index 0278d805..c380f49d 100644
--- a/servers/nextjs/app/(presentation-generator)/components/V1ContentRender.tsx
+++ b/servers/nextjs/app/(presentation-generator)/components/V1ContentRender.tsx
@@ -23,14 +23,12 @@ export const V1ContentRender = ({ slide, isEditMode, theme }: { slide: any, isEd
     const isCustomTemplate = uuidValidate(customTemplateId) || slide.layout_group.startsWith("custom-");
 
     // Always call the hook (React hooks rule), but with empty id when not a custom template
-    const { template: customTemplate, loading: customLoading, fonts } = useCustomTemplateDetails({
+    const { template: customTemplate, loading: customLoading } = useCustomTemplateDetails({
         id: isCustomTemplate ? customTemplateId : "",
         name: isCustomTemplate ? slide.layout_group : "",
         description: ""
     });
-    if (fonts && typeof fonts === 'object') {
-        // useFontLoader(fonts as unknown as Record<string, string>);
-    }
+
 
     // Memoize layout resolution to prevent unnecessary recalculations
     const Layout = useMemo(() => {
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/Help.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/Help.tsx
deleted file mode 100644
index d69ef3cb..00000000
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/Help.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { HelpCircle, X, Search } from "lucide-react";
-import React, { useState, useEffect, useRef } from "react";
-
-const helpQuestions = [
-  {
-    id: 1,
-    category: "Images",
-    question: "How do I change an image?",
-    answer:
-      "Click on any image to reveal the image toolbar. You'll see options to Edit, Adjust position, and change how the image fits within its container. The Edit option allows you to replace or modify the current image.",
-  },
-  {
-    id: 2,
-    category: "Images",
-    question: "Can I generate new images with AI?",
-    answer:
-      "Yes! Click on any image and select the Edit option from the toolbar. In the side panel that appears, you'll find the AI Generate tab. Enter your prompt describing the image you want, and our AI will generate an image based on your description.",
-  },
-  {
-    id: 3,
-    category: "Images",
-    question: "How do I upload my own images?",
-    answer:
-      "Click on any image, then select Edit from the toolbar. In the side panel, click on the Upload tab at the top. You can browse your files to select one. Once uploaded, you can apply it to your design.",
-  },
-  {
-    id: 11,
-    category: "AI Prompts",
-    question: "Can I change slide layout through prompt?",
-    answer:
-      "Yes you can! Click on the WandSparkles icon on the top left of each slide and it will give you a prompt input box. Describe your layout requirements and the AI will change the slide layout accordingly.",
-  },
-  {
-    id: 12,
-    category: "AI Prompts",
-    question: "Can I change slide image through prompt?",
-    answer:
-      "Yes you can! Click on the WandSparkles icon on the top left of each slide and it will give you a prompt input box. Describe the image you want and the AI will update the slide image based on your requirements.",
-  },
-
-  {
-    id: 14,
-    category: "AI Prompts",
-    question: "Can I change content through prompt?",
-    answer:
-      "Yes you can! Click on the WandSparkles icon on the top left of each slide and it will give you a prompt input box. Describe what content you want and the AI will update the slide's text and content based on your description.",
-  },
-  {
-    id: 4,
-    category: "Text",
-    question: "How can I format and highlight text?",
-    answer:
-      "Select any text to see the formatting toolbar appear. You'll have options for Bold, Italic, Underline, Strikethrough,and more.",
-  },
-  {
-    id: 5,
-    category: "Icons",
-    question: "How do I change icons?",
-    answer:
-      "Click on any existing icon to modify it. In the icon selector panel, you can browse icos or use the search function to find specific icons. We offer thousands of icons in various styles.",
-  },
-  {
-    id: 16,
-    category: "Layout",
-    question: "Can I change the position of slide?",
-    answer:
-      "Of course, On side panel you can drag the slide and place wherever you want.",
-  },
-  {
-    id: 15,
-    category: "Layout",
-    question: "Can I add new slide between the slide?",
-    answer:
-      "Yes you can just click on the plus icon below each slide.It will display the all the layouts and choose required one.",
-  },
-  {
-    id: 6,
-    category: "Layout",
-    question: "Can I add more sections to my slides?",
-    answer:
-      "Absolutely! Hover near the bottom of any text box or content block, and you'll see a + icon appear. Click this button to add a new section below the current one. You can also use the Insert menu to add specific section types.",
-  },
-
-  {
-    id: 8,
-    category: "Export",
-    question: "How do I download or export my presentation?",
-    answer:
-      "Click the Export button in the top right menu. You can choose to download as PDF, PowerPoint.",
-  },
-];
-
-const Help = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [filteredQuestions, setFilteredQuestions] = useState(helpQuestions);
-  const [categories, setCategories] = useState<string[]>([]);
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  // Extract unique categories and create "All" category list
-  useEffect(() => {
-    const uniqueCategories = Array.from(
-      new Set(helpQuestions.map((q) => q.category))
-    );
-    setCategories(["All", ...uniqueCategories]);
-  }, []);
-
-  // Filter questions based on search query and selected category
-  useEffect(() => {
-    let results = helpQuestions;
-
-    // Filter by category if not "All"
-    if (selectedCategory !== "All") {
-      results = results.filter((q) => q.category === selectedCategory);
-    }
-
-    // Filter by search query
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      results = results.filter(
-        (q) =>
-          q.question.toLowerCase().includes(query) ||
-          q.answer.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredQuestions(results);
-  }, [searchQuery, selectedCategory]);
-
-  // Close modal when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: any) => {
-      if (
-        modalRef.current &&
-        !modalRef.current.contains(event.target) &&
-        !event.target.closest(".help-button")
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-
-  const handleOpenClose = () => {
-    setIsOpen(!isOpen);
-  };
-
-  // Animation helpers
-  const modalClass = isOpen
-    ? "opacity-100 scale-100"
-    : "opacity-0 scale-95 pointer-events-none";
-
-  return (
-    <>
-      {/* Help Button */}
-      <button
-        onClick={handleOpenClose}
-        className="help-button hidden fixed bottom-6 right-6 h-12 w-12 z-50 bg-emerald-600 hover:bg-emerald-700 rounded-full md:flex justify-center items-center cursor-pointer shadow-lg transition-all duration-300 hover:shadow-xl"
-        aria-label="Help Center"
-      >
-        {isOpen ? (
-          <X className="text-white h-5 w-5" />
-        ) : (
-          <HelpCircle className="text-white h-5 w-5" />
-        )}
-      </button>
-
-      {/* Help Modal */}
-      <div
-        className={`fixed bottom-20 right-6 z-50 max-w-md w-full transition-all duration-300 transform ${modalClass}`}
-        ref={modalRef}
-      >
-        <div className="bg-white rounded-lg shadow-2xl border border-gray-200 overflow-hidden">
-          {/* Header */}
-          <div className="bg-emerald-600 text-white px-6 py-4 flex justify-between items-center">
-            <h2 className="text-lg font-medium">Help Center</h2>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="hover:bg-emerald-700 p-1 rounded"
-            >
-              <X className="h-5 w-5" />
-            </button>
-          </div>
-
-          {/* Search */}
-          <div className="px-6 pt-4 pb-2">
-            <div className="relative">
-              <input
-                type="text"
-                placeholder="Search help topics..."
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent"
-              />
-              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-            </div>
-          </div>
-
-          {/* Category Pills */}
-          <div className="px-6 pb-3 flex gap-2 overflow-x-auto hide-scrollbar">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                className={`px-3 py-1 rounded-full text-sm whitespace-nowrap ${selectedCategory === category
-                    ? "bg-emerald-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                  }`}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-
-          {/* FAQ Accordion */}
-          <div className="max-h-96 overflow-y-auto px-6 pb-6">
-            {filteredQuestions.length > 0 ? (
-              <Accordion type="single" collapsible className="w-full">
-                {filteredQuestions.map((faq, index) => (
-                  <AccordionItem
-                    key={index}
-                    value={`item-${index}`}
-                    className="border-b border-gray-200 last:border-b-0"
-                  >
-                    <AccordionTrigger className="hover:no-underline py-3 px-1 text-left flex">
-                      <div className="flex-1 pr-2">
-                        <span className="text-gray-900 font-medium text-sm md:text-base">
-                          {faq.question}
-                        </span>
-                        <span className="block text-xs text-emerald-600 mt-0.5">
-                          {faq.category}
-                        </span>
-                      </div>
-                    </AccordionTrigger>
-                    <AccordionContent className="px-1 pb-3">
-                      <div className="text-sm text-gray-600 leading-relaxed rounded bg-gray-50 p-3">
-                        {faq.answer}
-                      </div>
-                    </AccordionContent>
-                  </AccordionItem>
-                ))}
-              </Accordion>
-            ) : (
-              <div className="py-8 text-center text-gray-500">
-                <p>No results found for "{searchQuery}"</p>
-                <button
-                  onClick={() => {
-                    setSearchQuery("");
-                    setSelectedCategory("All");
-                  }}
-                  className="mt-2 text-emerald-600 hover:underline text-sm"
-                >
-                  Clear search
-                </button>
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="bg-gray-50 px-6 py-3 border-t border-gray-200 text-xs text-gray-500 text-center">
-            Still need help?{" "}
-            <a href="/contact" className="text-emerald-600 hover:underline">
-              Contact Support
-            </a>
-          </div>
-        </div>
-      </div>
-
-      {/* Custom AccordionTrigger implementation (since shadcn's might not be available) */}
-      {!AccordionTrigger && (
-        <style jsx>{`
-          .accordion-trigger {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.75rem 0;
-            text-align: left;
-            transition: all 0.2s;
-          }
-          .accordion-trigger:hover {
-            background-color: rgba(0, 0, 0, 0.02);
-          }
-          .accordion-content {
-            overflow: hidden;
-            height: 0;
-            transition: height 0.2s ease;
-          }
-          .accordion-content[data-state="open"] {
-            height: auto;
-          }
-        `}</style>
-      )}
-    </>
-  );
-};
-
-export default Help;
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/LoadingState.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/LoadingState.tsx
index 78a7d147..c2de1b9f 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/LoadingState.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/LoadingState.tsx
@@ -23,9 +23,15 @@ const LoadingState = () => {
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mx-auto w-[500px] flex flex-col items-center justify-center p-8">
             <div className="w-full bg-white rounded-xl p-[2px] ">
                 <div className="bg-white rounded-xl p-6 w-full">
-                    <div className="flex items-center justify-center space-x-4 ">
-
-                        <h2 className="text-2xl font-semibold text-gray-800">Creating Your Presentation</h2>
+                    <div className="flex flex-col items-center justify-center gap-4">
+                        <div
+                            className="presentation-loader-dots shrink-0"
+                            role="status"
+                            aria-label="Loading"
+                        />
+                        <h2 className="text-2xl font-semibold text-gray-800">
+                            Creating Your Presentation
+                        </h2>
                     </div>
                     <div className="w-full max-w-md bg-white/80 backdrop-blur-sm rounded-xl shadow-sm p-6 mb-4">
                         <div className="min-h-[120px] flex items-center justify-center">
@@ -42,6 +48,29 @@ const LoadingState = () => {
                     </div>
                 </div>
             </div>
+            <style jsx>{`
+                .presentation-loader-dots {
+                    width: 50px;
+                    aspect-ratio: 1;
+                    --_c: no-repeat radial-gradient(
+                        farthest-side,
+                        #7a5af8 92%,
+                        #0000
+                    );
+                    background:
+                        var(--_c) top,
+                        var(--_c) left,
+                        var(--_c) right,
+                        var(--_c) bottom;
+                    background-size: 12px 12px;
+                    animation: presentation-loader-l7 1s infinite;
+                }
+                @keyframes presentation-loader-l7 {
+                    to {
+                        transform: rotate(0.5turn);
+                    }
+                }
+            `}</style>
         </div>
     );
 };
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationHeader.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationHeader.tsx
index e50a21ce..3a9687c3 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationHeader.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationHeader.tsx
@@ -41,7 +41,6 @@ import ThemeApi from "../../services/api/theme";
 import { Theme } from "../../services/api/types";
 import MarkdownRenderer from "@/components/MarkDownRender";
 import { cn } from "@/lib/utils";
-import { getApiUrl } from "@/utils/api";
 
 const PresentationHeader = ({
   presentation_id,
@@ -140,13 +139,30 @@ const PresentationHeader = ({
   };
 
   const get_presentation_pptx_model = async (id: string): Promise<PptxPresentationModel> => {
-    const response = await fetch(
-      getApiUrl(`/api/presentation_to_pptx_model?id=${encodeURIComponent(id)}`)
-    );
+    const response = await fetch(`/api/presentation_to_pptx_model?id=${id}`);
     const pptx_model = await response.json();
     return pptx_model;
   };
 
+  const exportViaIpc = async (format: "pptx" | "pdf"): Promise<boolean> => {
+    if (typeof window === 'undefined') return false;
+    if (!(window as any).electron?.exportPresentation) return false;
+    trackEvent(
+      format === "pptx"
+        ? MixpanelEvent.Header_ExportAsPPTX_API_Call
+        : MixpanelEvent.Header_ExportAsPDF_API_Call
+    );
+    const result = await (window as any).electron.exportPresentation(
+      presentation_id,
+      presentationData?.title || 'presentation',
+      format
+    );
+    if (!result?.success) {
+      throw new Error(result?.message || 'Export failed');
+    }
+    return true;
+  };
+
   const handleExportPptx = async () => {
     if (isStreaming) return;
 
@@ -157,6 +173,11 @@ const PresentationHeader = ({
       trackEvent(MixpanelEvent.Header_UpdatePresentationContent_API_Call);
       await PresentationGenerationApi.updatePresentationContent(presentationData);
 
+      if (await exportViaIpc("pptx")) {
+        toast.success("PPTX exported successfully!");
+        return;
+      }
+
       trackEvent(MixpanelEvent.Header_GetPptxModel_API_Call);
       const pptx_model = await get_presentation_pptx_model(presentation_id);
       if (!pptx_model) {
@@ -192,7 +213,11 @@ const PresentationHeader = ({
       await PresentationGenerationApi.updatePresentationContent(presentationData);
 
       trackEvent(MixpanelEvent.Header_ExportAsPDF_API_Call);
-      const response = await fetch(getApiUrl("/api/export-as-pdf"), {
+      if (await exportViaIpc("pdf")) {
+        toast.success("PDF exported successfully!");
+        return;
+      }
+      const response = await fetch('/api/export-as-pdf', {
         method: 'POST',
         body: JSON.stringify({
           id: presentation_id,
@@ -370,14 +395,7 @@ const PresentationHeader = ({
           {isPresentationSaving && <div className="flex items-center gap-2">
             <Loader2 className="w-3.5 h-3.5 animate-spin" />
           </div>}
-          {presentationData?.slides?.[0]?.layout &&
-            !presentationData.slides[0].layout.includes("custom") && (
-              <ThemeSelector
-                presentation_id={presentation_id}
-                current_theme={presentationData?.theme || {}}
-                themes={themes}
-              />
-            )}
+          {presentationData && presentationData.slides && !presentationData.slides[0].layout.includes("custom") && <ThemeSelector current_theme={presentationData?.theme || {}} themes={themes} />}
 
           <div className="flex items-center gap-2 bg-[#F6F6F9] px-3.5 h-[38px] border border-[#EDECEC] rounded-[80px]">
 
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationMode.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationMode.tsx
index 41b8d913..44aab9e5 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationMode.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationMode.tsx
@@ -1,5 +1,6 @@
 "use client";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   ChevronLeft,
   ChevronRight,
@@ -8,297 +9,367 @@ import {
   Maximize2,
   StickyNote,
   EyeOff,
+  Keyboard,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Slide } from "../../types/slide";
-import { V1ContentRender } from "../../components/V1ContentRender";
-
-
+import SlideScale from "../../components/PresentationRender";
+import type { Theme } from "../../services/api/types";
+import { applyPresentationThemeToElement } from "../utils/applyPresentationThemeDom";
 
 interface PresentationModeProps {
   slides: Slide[];
   currentSlide: number;
-
+  theme?: Theme | null;
   isFullscreen: boolean;
   onFullscreenToggle: () => void;
   onExit: () => void;
   onSlideChange: (slideNumber: number) => void;
 }
 
-const PresentationMode: React.FC<PresentationModeProps> = ({
+const CHROME_HIDE_MS = 800;
 
+const PresentationMode: React.FC<PresentationModeProps> = ({
   slides,
   currentSlide,
-
+  theme,
   isFullscreen,
   onFullscreenToggle,
   onExit,
   onSlideChange,
-
-
 }) => {
-  if (slides === undefined || slides === null || slides.length === 0) {
-    return null;
-  }
-
+  const rootRef = useRef<HTMLDivElement>(null);
+  const hideChromeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [showSpeakerNotes, setShowSpeakerNotes] = useState(true);
+  const [chromeVisible, setChromeVisible] = useState(true);
+
   const currentSpeakerNote = useMemo(
     () => slides[currentSlide]?.speaker_note?.trim() || "",
     [slides, currentSlide]
   );
 
+  const activeSlide = slides[currentSlide];
 
-  const recomputeScale = useCallback(() => {
-    if (typeof window === "undefined") return;
-    const padding = isFullscreen ? 0 : 64; // match p-8 when not fullscreen
-    const fullscreenMargin = isFullscreen ? 16 : 0; // small safety margin to prevent clipping
-    const availableWidth = Math.max(window.innerWidth - padding - fullscreenMargin, 0);
-    const availableHeight = Math.max(window.innerHeight - padding - fullscreenMargin, 0);
-    const baseW = 1280;
-    const baseH = 720;
-    const s = Math.min(availableWidth / baseW, availableHeight / baseH);
-
+  const bumpChromeVisibility = useCallback(() => {
+    setChromeVisible(true);
+    if (hideChromeTimerRef.current) clearTimeout(hideChromeTimerRef.current);
+    hideChromeTimerRef.current = setTimeout(() => {
+      if (isFullscreen) setChromeVisible(false);
+    }, CHROME_HIDE_MS);
   }, [isFullscreen]);
 
   useEffect(() => {
-    recomputeScale();
-    window.addEventListener("resize", recomputeScale);
-    return () => window.removeEventListener("resize", recomputeScale);
-  }, [recomputeScale]);
+    rootRef.current?.focus({ preventScroll: true });
+  }, []);
 
+  useEffect(() => {
+    if (!isFullscreen) {
+      setChromeVisible(true);
+      if (hideChromeTimerRef.current) {
+        clearTimeout(hideChromeTimerRef.current);
+        hideChromeTimerRef.current = null;
+      }
+      return;
+    }
+    bumpChromeVisibility();
+    return () => {
+      if (hideChromeTimerRef.current) clearTimeout(hideChromeTimerRef.current);
+    };
+  }, [isFullscreen, bumpChromeVisibility]);
 
-  // Modify the handleKeyPress to prevent default behavior
-  const handleKeyPress = useCallback(
+  useLayoutEffect(() => {
+    if (!theme || !rootRef.current) return;
+    applyPresentationThemeToElement(rootRef.current, theme);
+  }, [theme]);
+
+  const handlePointerActivity = useCallback(() => {
+    bumpChromeVisibility();
+  }, [bumpChromeVisibility]);
+
+  const goNext = useCallback(() => {
+    if (currentSlide < slides.length - 1) onSlideChange(currentSlide + 1);
+  }, [currentSlide, slides.length, onSlideChange]);
+
+  const goPrev = useCallback(() => {
+    if (currentSlide > 0) onSlideChange(currentSlide - 1);
+  }, [currentSlide, onSlideChange]);
+
+  const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
-      event.preventDefault(); // Prevent default scroll behavior
+      const navKeys = [
+        "ArrowRight",
+        "ArrowLeft",
+        "ArrowUp",
+        "ArrowDown",
+        " ",
+        "Home",
+        "End",
+        "PageDown",
+        "PageUp",
+      ];
+      if (navKeys.includes(event.key)) {
+        event.preventDefault();
+      }
+
+      if (event.repeat) {
+        if (event.key === " " || event.key === "ArrowRight" || event.key === "ArrowLeft") {
+          return;
+        }
+      }
 
       switch (event.key) {
         case "ArrowRight":
         case "ArrowDown":
-        case " ": // Space key
-          if (currentSlide < slides.length - 1) {
-            onSlideChange(currentSlide + 1);
-          }
+        case " ":
+        case "PageDown":
+          goNext();
           break;
         case "ArrowLeft":
         case "ArrowUp":
-          if (currentSlide > 0) {
-            onSlideChange(currentSlide - 1);
+        case "PageUp":
+          goPrev();
+          break;
+        case "Home":
+          if (currentSlide !== 0) onSlideChange(0);
+          break;
+        case "End":
+          if (slides.length > 0 && currentSlide !== slides.length - 1) {
+            onSlideChange(slides.length - 1);
           }
           break;
         case "Escape":
-          // If fullscreen is active, only exit fullscreen on first ESC. Second ESC exits present mode.
           if (document.fullscreenElement) {
-            try { document.exitFullscreen(); } catch (_) { }
+            try {
+              document.exitFullscreen();
+            } catch {
+              /* ignore */
+            }
             return;
           }
           onExit();
           break;
         case "f":
         case "F":
-          onFullscreenToggle();
+          if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+            onFullscreenToggle();
+          }
           break;
         case "n":
         case "N":
-          setShowSpeakerNotes((prev) => !prev);
+          if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+            setShowSpeakerNotes((prev) => !prev);
+          }
+          break;
+        default:
           break;
       }
     },
-    [currentSlide, slides.length, onSlideChange, onExit, onFullscreenToggle, isFullscreen]
+    [currentSlide, slides.length, onSlideChange, onExit, onFullscreenToggle, goNext, goPrev]
   );
 
-  // Add both keydown and keyup listeners
   useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Prevent default behavior for arrow keys and space
-      if (
-        ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown", " "].includes(e.key)
-      ) {
-        e.preventDefault();
-      }
-      handleKeyPress(e);
-    };
-
     window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleKeyPress]);
-
-  // Add click handlers for the slide area
-  const handleSlideClick = (e: React.MouseEvent) => {
-    // Don't trigger navigation if clicking on controls
-    if ((e.target as HTMLElement).closest(".presentation-controls")) {
-      return;
-    }
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
 
+  const handleSlideAreaClick = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest(".presentation-controls")) return;
     const clickX = e.clientX;
-    const windowWidth = window.innerWidth;
-
-    if (clickX < windowWidth / 3) {
-      if (currentSlide > 0) {
-        onSlideChange(currentSlide - 1);
-      }
-    } else if (clickX > (windowWidth * 2) / 3) {
-      if (currentSlide < slides.length - 1) {
-        onSlideChange(currentSlide + 1);
-      }
-    }
+    const w = window.innerWidth;
+    if (clickX < w / 5) goPrev();
+    else if (clickX > (w * 4) / 5) goNext();
   };
 
-  // Handle Escape key separately
-  useEffect(() => {
-    const handleEscKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isFullscreen) {
-        onFullscreenToggle(); // Just toggle fullscreen, don't exit presentation
-      }
-    };
+  const progress = slides.length > 0 ? ((currentSlide + 1) / slides.length) * 100 : 0;
 
-    document.addEventListener("keydown", handleEscKey);
-    return () => document.removeEventListener("keydown", handleEscKey);
-  }, [isFullscreen, onFullscreenToggle]);
+  if (slides === undefined || slides === null || slides.length === 0) {
+    return null;
+  }
 
   return (
     <div
-      className="fixed inset-0  flex flex-col"
-      style={{ backgroundColor: "var(--page-background-color,#c8c7c9)" }}
+      id="presentation-mode-wrapper"
+      ref={rootRef}
+      role="application"
+      aria-label="Presentation"
+      className="fixed inset-0 z-[100] flex flex-col outline-none select-none"
+      style={{ backgroundColor: "var(--page-background-color, #c8c7c9)" }}
       tabIndex={0}
-      onClick={handleSlideClick}
+      onMouseMove={handlePointerActivity}
+      onClick={handleSlideAreaClick}
     >
-      {/* Controls - Only show when not in fullscreen */}
-      {!isFullscreen && (
-        <>
-          <div className="presentation-controls absolute top-4 right-4 flex items-center gap-2 z-50">
-            <Button
-              variant="ghost"
-              style={{ color: "var(--text-body-color,#000000)" }}
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                onFullscreenToggle();
-              }}
-              className="text-white hover:bg-white/20"
-            >
-              {isFullscreen ? (
-                <Minimize2 className="h-5 w-5" />
-              ) : (
-                <Maximize2 className="h-5 w-5" />
-              )}
-            </Button>
-            <Button
-              variant="ghost"
-              style={{ color: "var(--text-body-color,#000000)" }}
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                onExit();
-              }}
-              className="text-white hover:bg-white/20"
-            >
-              <X className="h-5 w-5" />
-            </Button>
-          </div>
+      <span className="sr-only">
+        Slide {currentSlide + 1} of {slides.length}
+      </span>
 
-          <div className="presentation-controls absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-4 z-50">
-            <Button
-              variant="ghost"
-              style={{ color: "var(--text-body-color,#000000)" }}
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                onSlideChange(currentSlide - 1);
-              }}
-              disabled={currentSlide === 0}
-              className="text-white hover:bg-white/20"
-            >
-              <ChevronLeft className="h-5 w-5" style={{ color: "var(--text-body-color,#000000)" }} />
-            </Button>
-            <span className="text-white"
-              style={{ color: "var(--text-body-color,#000000)" }}
-            >
-              {currentSlide + 1} / {slides.length}
-            </span>
-            <Button
-              variant="ghost"
-              style={{ color: "var(--text-body-color,#000000)" }}
-              size="icon"
-              onClick={(e) => {
-                e.stopPropagation();
-                onSlideChange(currentSlide + 1);
-              }}
-              disabled={currentSlide === slides.length - 1}
-              className="text-white hover:bg-white/20"
-            >
-              <ChevronRight className="h-5 w-5" style={{ color: "var(--text-body-color,#000000)" }} />
-            </Button>
-          </div>
-        </>
-      )}
-
-      {/* Centered 16:9 stage for consistent alignment in normal + fullscreen modes */}
-      <div className={`flex-1 min-h-0 flex items-center justify-center ${isFullscreen ? "px-6 py-8 md:px-10 md:py-12" : "p-8"}`}>
-        <div
-          className="relative rounded-sm font-inter"
-          style={{
-            aspectRatio: "16 / 9",
-            width: isFullscreen
-              ? "min(90vw, calc(88vh * 16 / 9))"
-              : "min(calc(100vw - 4rem), calc((100vh - 4rem) * 16 / 9))",
-            maxHeight: isFullscreen ? "88vh" : "calc(100vh - 4rem)",
-          }}
-        >
-          {slides.length > 0 && slides.map((slide, index) => (
-            <div
-              key={slide.id}
-              className={index === currentSlide ? "h-full w-full" : "hidden h-full w-full"}
-            >
-              <V1ContentRender slide={slide} isEditMode={true} />
-            </div>
-          ))}
+      {/* Top bar — fullscreen: auto-hide */}
+      <div
+        className={`presentation-controls absolute left-0 right-0 top-0 z-50 flex justify-end gap-2 px-3 py-3 transition-opacity duration-300 md:px-4 ${isFullscreen && !chromeVisible ? "pointer-events-none opacity-0" : "opacity-100"
+          }`}
+      >
+        <div className="flex items-center gap-1 rounded-full  bg-white/95 px-1 py-1  backdrop-blur-sm">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            title="Fullscreen (F)"
+            onClick={(e) => {
+              e.stopPropagation();
+              onFullscreenToggle();
+            }}
+            className="h-9 w-9 text-gray-800 hover:bg-gray-100"
+          >
+            {isFullscreen ? <Minimize2 className="h-5 w-5" /> : <Maximize2 className="h-5 w-5" />}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            title="Exit presentation (Esc)"
+            onClick={(e) => {
+              e.stopPropagation();
+              onExit();
+            }}
+            className="h-9 w-9 text-gray-800 hover:bg-gray-100"
+          >
+            <X className="h-5 w-5" />
+          </Button>
         </div>
       </div>
 
-      {currentSpeakerNote && (
-        <div className="presentation-controls absolute bottom-4 right-4 z-50">
+      {/* Slide stage — large viewport; SlideScale uses width+height so slides scale up */}
+      <div
+        className={`flex min-h-0 flex-1 items-stretch justify-stretch ${isFullscreen ? "px-2 pb-9 pt-12 sm:px-3" : "px-3 pb-24 pt-14 sm:px-4 md:pb-28 md:pt-16"
+          }`}
+      >
+        <div
+          className={`min-h-0 w-full flex-1 overflow-hidden rounded-sm `}
+        >
+          {activeSlide ? (
+            <SlideScale
+              key={activeSlide.id ?? `slide-${currentSlide}`}
+              slide={activeSlide}
+              theme={theme ?? undefined}
+              isEditMode={false}
+              presentMode
+            />
+          ) : null}
+        </div>
+      </div>
+
+      {/* Progress */}
+      <div
+        className={`absolute bottom-0 left-0 right-0 z-40 h-1 bg-gray-200 ${isFullscreen && !chromeVisible ? "opacity-70" : "opacity-100"
+          }`}
+        aria-hidden
+      >
+        <div
+          className="h-full bg-[#5141e5] transition-[width] duration-300 ease-out"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      {/* Bottom controls */}
+      <div
+        className={`presentation-controls absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-full border border-gray-200/90 bg-white/95 px-2 py-2 shadow-md backdrop-blur-sm transition-all duration-300 md:gap-4 md:px-3 ${isFullscreen && !chromeVisible
+          ? "pointer-events-none translate-y-4 opacity-0"
+          : "translate-y-0 opacity-100"
+          }`}
+      >
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          title="Previous slide"
+          onClick={(e) => {
+            e.stopPropagation();
+            goPrev();
+          }}
+          disabled={currentSlide === 0}
+          className="h-10 w-10 text-gray-800 hover:bg-gray-100 disabled:opacity-35"
+        >
+          <ChevronLeft className="h-6 w-6" />
+        </Button>
+        <div
+          className="min-w-22 text-center text-sm font-medium tabular-nums text-gray-800"
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+        >
+          {currentSlide + 1} / {slides.length}
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          title="Next slide"
+          onClick={(e) => {
+            e.stopPropagation();
+            goNext();
+          }}
+          disabled={currentSlide === slides.length - 1}
+          className="h-10 w-10 text-gray-800 hover:bg-gray-100 disabled:opacity-35"
+        >
+          <ChevronRight className="h-6 w-6" />
+        </Button>
+        <div className="mx-1 hidden h-6 w-px bg-gray-200 sm:block" />
+        <div
+          className="hidden max-w-[200px] items-center gap-1.5 text-[11px] leading-tight text-gray-500 sm:flex"
+          title="Keyboard shortcuts"
+        >
+          <Keyboard className="h-3.5 w-3.5 shrink-0" />
+          <span>
+            ← → space · Home/End · F fullscreen · N notes · Esc exit
+          </span>
+        </div>
+      </div>
+
+      {currentSpeakerNote ? (
+        <div
+          className={`presentation-controls absolute bottom-16 right-3 z-50 max-w-[min(380px,46vw)] md:bottom-20 md:right-6 ${isFullscreen && !chromeVisible ? "opacity-90" : ""
+            }`}
+        >
           {showSpeakerNotes ? (
-            <div className="w-[360px] max-w-[50vw] rounded-xl border border-black/10 bg-white/95 shadow-xl backdrop-blur-sm">
-              <div className="flex items-center justify-between border-b border-black/10 px-3 py-2">
+            <div className="rounded-xl border border-gray-200/90 bg-white/95 shadow-lg backdrop-blur-sm">
+              <div className="flex items-center justify-between border-b border-gray-100 px-3 py-2">
                 <div className="flex items-center gap-2 text-sm font-medium text-gray-800">
-                  <StickyNote className="h-4 w-4" />
+                  <StickyNote className="h-4 w-4 text-amber-600" />
                   Speaker notes
                 </div>
                 <Button
+                  type="button"
                   variant="ghost"
                   size="sm"
                   onClick={(e) => {
                     e.stopPropagation();
                     setShowSpeakerNotes(false);
                   }}
-                  className="h-8 px-2 text-gray-600 hover:bg-black/5 hover:text-gray-800"
+                  className="h-8 px-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900"
                 >
                   <EyeOff className="mr-1 h-4 w-4" />
                   Hide
                 </Button>
               </div>
-              <div className="max-h-[28vh] overflow-auto whitespace-pre-wrap px-3 py-2 text-sm text-gray-700">
+              <div className="max-h-[min(28vh,220px)] overflow-auto whitespace-pre-wrap px-3 py-2.5 text-sm leading-relaxed text-gray-700">
                 {currentSpeakerNote}
               </div>
             </div>
           ) : (
             <Button
+              type="button"
               variant="secondary"
               onClick={(e) => {
                 e.stopPropagation();
                 setShowSpeakerNotes(true);
               }}
-              className="h-9 rounded-full border border-black/10 bg-white/95 px-3 text-gray-800 shadow-md hover:bg-white"
+              className="h-9 rounded-full border border-gray-200 bg-white/95 px-3 text-gray-800 shadow-md backdrop-blur-sm hover:bg-gray-50"
             >
-              <StickyNote className="mr-2 h-4 w-4" />
+              <StickyNote className="mr-2 h-4 w-4 text-amber-600" />
               Show notes
             </Button>
           )}
         </div>
-      )}
+      ) : null}
     </div>
   );
 };
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationPage.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationPage.tsx
index bc03b7b8..c5a996a3 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/PresentationPage.tsx
@@ -1,13 +1,14 @@
 "use client";
-import React, { useState } from "react";
+import React, { useLayoutEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store/store";
+import "../../utils/prism-languages";
 import { Skeleton } from "@/components/ui/skeleton";
 import PresentationMode from "./PresentationMode";
 import SidePanel from "./SidePanel";
 import SlideContent from "./SlideContent";
 import { Button } from "@/components/ui/button";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
 import { AlertCircle } from "lucide-react";
 import {
@@ -18,6 +19,7 @@ import {
 } from "../hooks";
 import { PresentationPageProps } from "../types";
 import LoadingState from "./LoadingState";
+import { applyPresentationThemeToElement } from "../utils/applyPresentationThemeDom";
 
 import { usePresentationUndoRedo } from "../hooks/PresentationUndoRedo";
 import PresentationHeader from "./PresentationHeader";
@@ -31,6 +33,8 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
   const [selectedSlide, setSelectedSlide] = useState(0);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [error, setError] = useState(false);
+  const router = useRouter();
+
 
 
   const { presentationData, isStreaming } = useSelector(
@@ -53,6 +57,7 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
   const {
     isPresentMode,
     stream,
+    currentSlide: presentSlideFromUrl,
     handleSlideClick,
     toggleFullscreen,
     handlePresentExit,
@@ -75,24 +80,27 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
 
   usePresentationUndoRedo();
 
+  /** Editor tree unmounts in present mode; remount loses inline theme CSS — re-apply from Redux. */
+  useLayoutEffect(() => {
+    if (isPresentMode) return;
+    const theme = presentationData?.theme;
+    if (!theme) return;
+    const el = document.getElementById("presentation-slides-wrapper");
+    applyPresentationThemeToElement(el, theme);
+  }, [isPresentMode, presentationData?.theme]);
+
   const onSlideChange = (newSlide: number) => {
     handleSlideChange(newSlide, presentationData);
   };
 
-  // useEffect(() => {
-  //   if(!loading && !isStreaming && presentationData?.slides && presentationData?.slides.length > 0){  
-  //     const presentation_id = presentationData?.slides[0].layout.split(":")[0].split("custom-")[1];
-  //   const fonts = getCustomTemplateFonts(presentation_id);
 
-  //   useFontLoader(fonts || []);
-  // }
-  // }, [presentationData,loading,isStreaming]);
   // Presentation Mode View
   if (isPresentMode) {
     return (
       <PresentationMode
         slides={presentationData?.slides!}
-        currentSlide={selectedSlide}
+        currentSlide={presentSlideFromUrl}
+        theme={presentationData?.theme ?? undefined}
         isFullscreen={isFullscreen}
         onFullscreenToggle={toggleFullscreen}
         onExit={handlePresentExit}
@@ -113,7 +121,11 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
           <p className="text-center mb-4">
             We couldn't load your presentation. Please try again.
           </p>
-          <Button onClick={() => { trackEvent(MixpanelEvent.PresentationPage_Refresh_Page_Button_Clicked, { pathname }); window.location.reload(); }}>Refresh Page</Button>
+          <div className="flex gap-2 justify-center items-center">
+
+            <Button onClick={() => { trackEvent(MixpanelEvent.PresentationPage_Refresh_Page_Button_Clicked, { pathname }); window.location.reload(); }}>Refresh Page</Button>
+            <Button onClick={() => { trackEvent(MixpanelEvent.Navigation, { from: pathname, to: "/upload" }); router.push("/upload"); }}>Go to Upload</Button>
+          </div>
         </div>
       </div>
     );
@@ -125,6 +137,7 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
         style={{
           background: "#ffffff",
         }}
+        id="presentation-slides-wrapper"
         className="flex  gap-6 relative "
       >
         <div className="w-[200px]">
@@ -136,15 +149,15 @@ const PresentationPage: React.FC<PresentationPageProps> = ({
 
           />
         </div>
-        <div className=" w-full h-[calc(100vh-20px)] hide-scrollbar pr-[25px] overflow-y-auto">
+        <div className=" w-full h-[calc(100vh-20px)]  pr-[25px] overflow-y-auto">
           <PresentationHeader presentation_id={presentation_id} isPresentationSaving={isSaving} currentSlide={selectedSlide} />
           <div
-            id="presentation-slides-wrapper"
+
             style={{
               background: "rgba(255, 255, 255, 0.10)",
               boxShadow: "0 0 20.01px 0 rgba(122, 90, 248, 0.16) inset",
             }}
-            className="p-6 rounded-[20px] flex flex-col items-center overflow-hidden justify-center  border border-[#EDECEC] "
+            className="p-6 rounded-[20px] font-inter flex flex-col items-center overflow-hidden justify-center  border border-[#EDECEC] "
           >
             <div className="w-full max-w-[1280px] h-full">
 
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SidePanel.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SidePanel.tsx
index 957653f5..1e2fb263 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SidePanel.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SidePanel.tsx
@@ -132,7 +132,7 @@ const SidePanel = ({
       <Separator orientation="horizontal" className="my-6 " />
       <div
         className={`
-          fixed xl:relative h-full z-50 xl:z-auto 
+          relative bg-[#F6F6F9] h-full z-50 xl:z-auto 
           transition-all duration-300 ease-in-out
         `}
       >
@@ -141,14 +141,14 @@ const SidePanel = ({
           className="w-full h-[calc(100vh-120px)]   hide-scrollbar overflow-hidden slide-theme "
         >
 
-          <p className="text-xl font-normal pb-3.5 text-[#000000]">Slides</p>
+          <p className="text-xl font-normal font-syne pb-3.5 text-[#000000]">Slides ({presentationData?.slides?.length})</p>
 
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
             onDragEnd={handleDragEnd}
           >
-            <div className=" overflow-y-auto hide-scrollbar h-[calc(100%-140px)] space-y-3.5">
+            <div className=" overflow-y-auto w-full hide-scrollbar h-[calc(100%-140px)] space-y-3.5">
               {isStreaming ? (
                 presentationData &&
                 presentationData?.slides.map((slide: any, index: number) => (
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
index eb18871c..d1d1261a 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
@@ -21,6 +21,7 @@ import { trackEvent, MixpanelEvent } from "@/utils/mixpanel";
 import { addToHistory } from "@/store/slices/undoRedoSlice";
 import { V1ContentRender } from "../../components/V1ContentRender";
 import NewSlide from "./NewSlide";
+import SlideScale from "../../components/PresentationRender";
 
 interface SlideContentProps {
   slide: any;
@@ -145,7 +146,8 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
           data-group={slide.layout_group}
           className={` w-full  group font-syne  `}
         >
-          <V1ContentRender slide={slide} isEditMode={true} theme={null} />
+          {/* <V1ContentRender slide={slide} isEditMode={true} theme={null} /> */}
+          <SlideScale slide={slide} theme={presentationData?.theme || null} />
           {!showNewSlideSelection && (
             <div className="group-hover:opacity-100 hidden md:block opacity-0 transition-opacity my-4 duration-300">
               <ToolTip content="Add new slide below">
@@ -219,6 +221,11 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
                       className="min-h-[110px] max-h-[180px] w-full resize-none rounded-xl border border-gray-200 p-3 text-sm focus-visible:ring-1 focus-visible:ring-[#5141e5]"
                       disabled={isUpdating}
                       onChange={(e) => setEditPrompt(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key !== "Enter" || e.shiftKey || isUpdating) return;
+                        e.preventDefault();
+                        handleSubmit();
+                      }}
                       rows={5}
                       wrap="soft"
                     />
@@ -234,7 +241,7 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
                 </PopoverContent>
               </Popover>
 
-              <Popover open={isSpeakerPopoverOpen} onOpenChange={setIsSpeakerPopoverOpen}>
+              {slide?.speaker_note && <Popover open={isSpeakerPopoverOpen} onOpenChange={setIsSpeakerPopoverOpen}>
                 <PopoverTrigger asChild>
                   <button
                     type="button"
@@ -268,11 +275,11 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
                   </div>
                   <div className="space-y-3 p-4">
                     <div className="max-h-[220px] min-h-[100px] overflow-auto whitespace-pre-wrap rounded-xl border border-gray-200 bg-gray-50 p-3 text-sm text-gray-800">
-                      {slide?.speaker_note?.trim() || "No speaker notes for this slide."}
+                      {slide?.speaker_note?.trim()}
                     </div>
                   </div>
                 </PopoverContent>
-              </Popover>
+              </Popover>}
 
               <button
                 type="button"
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SortableSlide.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SortableSlide.tsx
index 12ec0f4e..f189e66d 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SortableSlide.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SortableSlide.tsx
@@ -13,8 +13,6 @@ interface SortableSlideProps {
 const SCALE = 0.125;
 
 export function SortableSlide({ slide, index, selectedSlide, onSlideClick }: SortableSlideProps) {
-    const searchParams = useSearchParams();
-    const type = searchParams.get("type") as 'standard' | 'smart';
     const lastClickTime = useRef(0);
     const {
         attributes,
@@ -75,14 +73,7 @@ export function SortableSlide({ slide, index, selectedSlide, onSlideClick }: Sor
                     <V1ContentRender slide={slide} isEditMode={true} />
                 </div>
             </div>
-            {/* <div className=" slide-box relative z-50  overflow-hidden aspect-video">
-                <div className="absolute bg-transparent z-50 top-0 left-0 w-full h-full" />
-                <div className="transform scale-[0.2] flex  pointer-events-none justify-center items-center origin-top-left  w-[500%] h-[500%]"
 
-                >
-                    <ContentRender slide={slide} isEditMode={true} />
-                </div>
-            </div> */}
         </div>
     );
 } 
\ No newline at end of file
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/ThemeSelector.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/ThemeSelector.tsx
index a31f9bfc..46e20aec 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/ThemeSelector.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/ThemeSelector.tsx
@@ -3,78 +3,35 @@ import React, { useState } from 'react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { Palette } from 'lucide-react';
 
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { updateTheme } from '@/store/slices/presentationGeneration';
 import { useRouter } from 'next/navigation';
-import { useFontLoader } from '../../hooks/useFontLoad';
-import { RootState } from '@/store/store';
-const ThemeSelector = ({ presentation_id, current_theme, themes: allThemes }: { presentation_id: string, current_theme: any, themes: any[] }) => {
+import {
+    applyPresentationThemeToElement,
+    clearPresentationThemeFromElement,
+} from "../utils/applyPresentationThemeDom";
+
+const ThemeSelector = ({ current_theme, themes: allThemes }: { current_theme: any, themes: any[] }) => {
     const [currentTheme, setCurrentTheme] = useState<any>(current_theme)
     const dispatch = useDispatch()
     const [isOpen, setIsOpen] = useState(false)
     const router = useRouter()
     const applyTheme = async (theme: any) => {
-        const element = document.getElementById('presentation-slides-wrapper')
+        const element = document.getElementById("presentation-slides-wrapper");
         if (!element) return;
         if (allThemes.length === 0) return;
-        setCurrentTheme(theme)
-        clearTheme()
-        if (!theme.data.colors['graph_0']) { return; }
-        const cssVariables = {
-            '--primary-color': theme.data.colors['primary'],
-            '--background-color': theme.data.colors['background'],
-            '--card-color': theme.data.colors['card'],
-            '--stroke': theme.data.colors['stroke'],
-            '--primary-text': theme.data.colors['primary_text'],
-            '--background-text': theme.data.colors['background_text'],
-            '--graph-0': theme.data.colors['graph_0'],
-            '--graph-1': theme.data.colors['graph_1'],
-            '--graph-2': theme.data.colors['graph_2'],
-            '--graph-3': theme.data.colors['graph_3'],
-            '--graph-4': theme.data.colors['graph_4'],
-            '--graph-5': theme.data.colors['graph_5'],
-            '--graph-6': theme.data.colors['graph_6'],
-            '--graph-7': theme.data.colors['graph_7'],
-            '--graph-8': theme.data.colors['graph_8'],
-            '--graph-9': theme.data.colors['graph_9'],
-        }
-        Object.entries(cssVariables).forEach(([key, value]) => {
-            element.style.setProperty(key, value)
-        })
-        useFontLoader({ [theme.data.fonts.textFont.name]: theme.data.fonts.textFont.url })
-
-        // Apply fonts to preview container
-        element.style.setProperty('font-family', `"${theme.data.fonts.textFont.name}"`)
-        element.style.setProperty('--heading-font-family', `"${theme.data.fonts.textFont.name}"`)
-        element.style.setProperty('--body-font-family', `"${theme.data.fonts.textFont.name}"`)
-
-        dispatch(updateTheme(theme))
-    }
-    const clearTheme = () => {
-        const element = document.getElementById('presentation-slides-wrapper')
-        if (!element) return;
-        element.style.removeProperty('--primary-color');
-        element.style.removeProperty('--background-color');
-        element.style.removeProperty('--card-color');
-        element.style.removeProperty('--stroke');
-        element.style.removeProperty('--primary-text');
-        element.style.removeProperty('--background-text');
-        element.style.removeProperty('--graph-0');
-        element.style.removeProperty('--graph-1');
-        element.style.removeProperty('--graph-2');
-        element.style.removeProperty('--graph-3');
-        element.style.removeProperty('--graph-4');
-        element.style.removeProperty('--graph-5');
-        element.style.removeProperty('--graph-6');
-        element.style.removeProperty('--graph-7');
-        element.style.removeProperty('--graph-8');
-        element.style.removeProperty('--graph-9');
-    }
+        setCurrentTheme(theme);
+        clearPresentationThemeFromElement(element);
+        if (!theme.data?.colors?.["graph_0"]) return;
+        applyPresentationThemeToElement(element, theme);
+        dispatch(updateTheme(theme));
+    };
     const resetTheme = async () => {
-        clearTheme();
-
-        dispatch(updateTheme(null))
-    }
+        dispatch(updateTheme(null));
+        clearPresentationThemeFromElement(
+            document.getElementById("presentation-slides-wrapper")
+        );
+    };
 
 
     return (
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
index e9ec5172..91f9da3b 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationData.ts
@@ -4,8 +4,10 @@ import { toast } from "sonner";
 import { setPresentationData } from "@/store/slices/presentationGeneration";
 import { DashboardApi } from '../../services/api/dashboard';
 import { clearHistory } from "@/store/slices/undoRedoSlice";
+import { applyPresentationThemeToElement } from "../utils/applyPresentationThemeDom";
+import { resolveBackendAssetUrl } from "@/utils/api";
 import { useFontLoader } from "../../hooks/useFontLoad";
-import { Theme } from "../../services/api/types";
+
 
 
 export const usePresentationData = (
@@ -15,55 +17,23 @@ export const usePresentationData = (
 ) => {
   const dispatch = useDispatch();
 
-  const applyTheme = async (theme: Theme) => {
-    const element = document.getElementById('presentation-slides-wrapper')
-    if (!element) return;
-    if (!theme || !theme.data) { return; }
-    if (!theme.data.colors['graph_0']) { return; }
-    const cssVariables = {
-      '--primary-color': theme.data.colors['primary'],
-      '--background-color': theme.data.colors['background'],
-      '--card-color': theme.data.colors['card'],
-      '--stroke': theme.data.colors['stroke'],
-      '--primary-text': theme.data.colors['primary_text'],
-      '--background-text': theme.data.colors['background_text'],
-      '--graph-0': theme.data.colors['graph_0'],
-      '--graph-1': theme.data.colors['graph_1'],
-      '--graph-2': theme.data.colors['graph_2'],
-      '--graph-3': theme.data.colors['graph_3'],
-      '--graph-4': theme.data.colors['graph_4'],
-      '--graph-5': theme.data.colors['graph_5'],
-      '--graph-6': theme.data.colors['graph_6'],
-      '--graph-7': theme.data.colors['graph_7'],
-      '--graph-8': theme.data.colors['graph_8'],
-      '--graph-9': theme.data.colors['graph_9'],
-    }
-    Object.entries(cssVariables).forEach(([key, value]) => {
-      element.style.setProperty(key, value)
-    })
-    useFontLoader({ [theme.data.fonts.textFont.name]: theme.data.fonts.textFont.url })
-
-    // Apply fonts to preview container
-    element.style.setProperty('font-family', `"${theme.data.fonts.textFont.name}"`)
-    element.style.setProperty('--heading-font-family', `"${theme.data.fonts.textFont.name}"`)
-    element.style.setProperty('--body-font-family', `"${theme.data.fonts.textFont.name}"`)
-    // Update the Presentation content with theme
-  }
-
   const fetchUserSlides = useCallback(async () => {
     try {
       const data = await DashboardApi.getPresentation(presentationId);
+
+
       if (data) {
         dispatch(setPresentationData(data));
         dispatch(clearHistory());
         setLoading(false);
       }
-      if (data?.theme) {
-        applyTheme(data.theme);
-      }
       if (data.fonts) {
         useFontLoader(data.fonts);
       }
+      if (data?.theme) {
+        const el = document.getElementById("presentation-slides-wrapper");
+        applyPresentationThemeToElement(el, data.theme);
+      }
     } catch (error) {
       setError(true);
       toast.error("Failed to load presentation");
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationStreaming.ts b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationStreaming.ts
index ea946228..dc4cb380 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationStreaming.ts
+++ b/servers/nextjs/app/(presentation-generator)/presentation/hooks/usePresentationStreaming.ts
@@ -8,7 +8,30 @@ import {
 import { jsonrepair } from "jsonrepair";
 import { toast } from "sonner";
 import { MixpanelEvent, trackEvent } from "@/utils/mixpanel";
-import { getApiUrl } from "@/utils/api";
+import { getFastAPIUrl, resolveBackendAssetUrl } from "@/utils/api";
+
+const MAX_STREAM_RETRIES = 3;
+const STREAM_RETRY_DELAY_MS = 1_000;
+
+const normalizePresentationAssets = <T,>(input: T): T => {
+  if (Array.isArray(input)) {
+    return input.map((item) => normalizePresentationAssets(item)) as T;
+  }
+
+  if (input && typeof input === "object") {
+    const normalized: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+      if (typeof value === "string") {
+        normalized[key] = resolveBackendAssetUrl(value);
+      } else {
+        normalized[key] = normalizePresentationAssets(value);
+      }
+    }
+    return normalized as T;
+  }
+
+  return input;
+};
 
 export const usePresentationStreaming = (
   presentationId: string,
@@ -21,21 +44,81 @@ export const usePresentationStreaming = (
   const previousSlidesLength = useRef(0);
 
   useEffect(() => {
-    let eventSource: EventSource;
+    if (!stream) {
+      fetchUserSlides();
+      return;
+    }
+
+    let eventSource: EventSource | null = null;
     let accumulatedChunks = "";
+    let retryCount = 0;
+    let isClosed = false;
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;
 
-    const initializeStream = async () => {
-      dispatch(setStreaming(true));
-      dispatch(clearPresentationData());
+    const closeEventSource = () => {
+      if (eventSource) {
+        eventSource.close();
+        eventSource = null;
+      }
+    };
 
-      trackEvent(MixpanelEvent.Presentation_Stream_API_Call);
+    const clearRetryTimer = () => {
+      if (retryTimer) {
+        clearTimeout(retryTimer);
+        retryTimer = null;
+      }
+    };
 
+    const finalizeFailure = (description: string) => {
+      closeEventSource();
+      clearRetryTimer();
+      setLoading(false);
+      dispatch(setStreaming(false));
+      setError(true);
+      toast.error("Presentation streaming failed", { description });
+    };
+
+    const scheduleRetry = (reason: string): boolean => {
+      if (retryCount >= MAX_STREAM_RETRIES || isClosed) {
+        return false;
+      }
+
+      retryCount += 1;
+      const retryDelay = STREAM_RETRY_DELAY_MS * retryCount;
+      console.warn(
+        `Presentation stream retry ${retryCount}/${MAX_STREAM_RETRIES}: ${reason}`
+      );
+
+      closeEventSource();
+      clearRetryTimer();
+      accumulatedChunks = "";
+      previousSlidesLength.current = 0;
+
+      retryTimer = setTimeout(() => {
+        if (!isClosed) {
+          openStream();
+        }
+      }, retryDelay);
+
+      return true;
+    };
+
+    const openStream = () => {
+      closeEventSource();
       eventSource = new EventSource(
-        getApiUrl(`/api/v1/ppt/presentation/stream/${presentationId}`)
+        `${getFastAPIUrl()}/api/v1/ppt/presentation/stream/${presentationId}`
       );
 
       eventSource.addEventListener("response", (event) => {
-        const data = JSON.parse(event.data);
+        let data: any;
+        try {
+          data = JSON.parse(event.data);
+        } catch {
+          if (!scheduleRetry("invalid SSE payload")) {
+            finalizeFailure("Failed to parse stream response.");
+          }
+          return;
+        }
 
         switch (data.type) {
           case "chunk":
@@ -43,19 +126,20 @@ export const usePresentationStreaming = (
             try {
               const repairedJson = jsonrepair(accumulatedChunks);
               const partialData = JSON.parse(repairedJson);
+              const normalizedPartialData = normalizePresentationAssets(partialData);
 
-              if (partialData.slides) {
+              if (normalizedPartialData.slides) {
                 if (
-                  partialData.slides.length !== previousSlidesLength.current &&
-                  partialData.slides.length > 0
+                  normalizedPartialData.slides.length !== previousSlidesLength.current &&
+                  normalizedPartialData.slides.length > 0
                 ) {
                   dispatch(
                     setPresentationData({
-                      ...partialData,
-                      slides: partialData.slides,
+                      ...normalizedPartialData,
+                      slides: normalizedPartialData.slides,
                     })
                   );
-                  previousSlidesLength.current = partialData.slides.length;
+                  previousSlidesLength.current = normalizedPartialData.slides.length;
                   setLoading(false);
                 }
               }
@@ -66,27 +150,34 @@ export const usePresentationStreaming = (
 
           case "complete":
             try {
-              dispatch(setPresentationData(data.presentation));
+              dispatch(setPresentationData(normalizePresentationAssets(data.presentation)));
               dispatch(setStreaming(false));
               setLoading(false);
-              eventSource.close();
+              isClosed = true;
+              closeEventSource();
+              clearRetryTimer();
+              retryCount = 0;
 
               // Remove stream parameter from URL
               const newUrl = new URL(window.location.href);
               newUrl.searchParams.delete("stream");
               window.history.replaceState({}, "", newUrl.toString());
             } catch (error) {
-              eventSource.close();
-              console.error("Error parsing accumulated chunks:", error);
+              if (!scheduleRetry("failed to parse complete payload")) {
+                finalizeFailure("Failed to parse final presentation payload.");
+              }
             }
             accumulatedChunks = "";
             break;
 
           case "closing":
-            dispatch(setPresentationData(data.presentation));
+            dispatch(setPresentationData(normalizePresentationAssets(data.presentation)));
             setLoading(false);
             dispatch(setStreaming(false));
-            eventSource.close();
+            isClosed = true;
+            closeEventSource();
+            clearRetryTimer();
+            retryCount = 0;
 
             // Remove stream parameter from URL
             const newUrl = new URL(window.location.href);
@@ -94,38 +185,37 @@ export const usePresentationStreaming = (
             window.history.replaceState({}, "", newUrl.toString());
             break;
           case "error":
-            eventSource.close();
-            toast.error("Error in outline streaming", {
-              description:
+            if (
+              !scheduleRetry(
+                data.detail || "server returned stream error response"
+              )
+            ) {
+              finalizeFailure(
                 data.detail ||
-                "Failed to connect to the server. Please try again.",
-            });
-            setLoading(false);
-            dispatch(setStreaming(false));
-            setError(true);
+                  "Failed to connect to the server. Please try again."
+              );
+            }
             break;
         }
       });
 
       eventSource.onerror = (error) => {
         console.error("EventSource failed:", error);
-        setLoading(false);
-        dispatch(setStreaming(false));
-        setError(true);
-        eventSource.close();
+        if (!scheduleRetry("connection lost")) {
+          finalizeFailure("Failed to connect to the server. Please try again.");
+        }
       };
     };
 
-    if (stream) {
-      initializeStream();
-    } else {
-      fetchUserSlides();
-    }
+    dispatch(setStreaming(true));
+    dispatch(clearPresentationData());
+    trackEvent(MixpanelEvent.Presentation_Stream_API_Call);
+    openStream();
 
     return () => {
-      if (eventSource) {
-        eventSource.close();
-      }
+      isClosed = true;
+      closeEventSource();
+      clearRetryTimer();
     };
   }, [presentationId, stream, dispatch, setLoading, setError, fetchUserSlides]);
 };
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/page.tsx b/servers/nextjs/app/(presentation-generator)/presentation/page.tsx
index 522a3bbf..552309da 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/page.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/page.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import PresentationPage from "./components/PresentationPage";
 import { Button } from "@/components/ui/button";
 import { useRouter, useSearchParams } from "next/navigation";
+import "../utils/prism-languages";
 const page = () => {
 
   const router = useRouter();
diff --git a/servers/nextjs/app/presentation-templates/index.tsx b/servers/nextjs/app/presentation-templates/index.tsx
index a195904a..443f1432 100644
--- a/servers/nextjs/app/presentation-templates/index.tsx
+++ b/servers/nextjs/app/presentation-templates/index.tsx
@@ -600,8 +600,8 @@ export function getTemplateByLayoutId(layoutId: string): TemplateWithData | unde
 export function getLayoutByLayoutId(layout: string): TemplateWithData | undefined {
     const templateName = layout.split(':')[0]
 
-
     const template = templates.find((t) => t.id === templateName)
+
     if (template) {
         return template.layouts.find((t) => t.layoutId === layout);
     }