diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
index 7974bc1f..1cb832f6 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/Components/DashboardSidebar.tsx
@@ -32,12 +32,12 @@ const DashboardSidebar = () => {
 
     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    ">
+                <div onClick={() => router.push("/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>
@@ -70,7 +70,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,7 +93,7 @@ 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 "
             >
                 {BelongingNavItems.map(({ key, label: itemLabel, icon: Icon }) => {
                     const isActive = activeTab === key;
diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/layout.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/layout.tsx
index a1b9172e..8d1654cf 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/layout.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/layout.tsx
@@ -3,7 +3,7 @@ import DashboardSidebar from './Components/DashboardSidebar'
 
 const layout = ({ children }: { children: React.ReactNode }) => {
     return (
-        <div className='flex pr-4 bg-white'>
+        <div className='flex pr-6 bg-white'>
             <DashboardSidebar />
             <div className='w-full'>
 
diff --git a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/components/ThemePanel/index.tsx b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/components/ThemePanel/index.tsx
index bd736a51..61be7627 100644
--- a/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/components/ThemePanel/index.tsx
+++ b/electron/servers/nextjs/app/(presentation-generator)/(dashboard)/theme/components/ThemePanel/index.tsx
@@ -845,7 +845,7 @@ const ThemePanel: React.FC = () => {
 
 
   return (
-    <div className="space-y-6 px-6 font-syne">
+    <div className="space-y-6 pl-6 font-syne mb-10">
       <div className='py-[28px] flex justify-between'>
 
         <h3 className=" text-[28px]  tracking-[-0.84px] font-unbounded font-normal text-[#101828] flex items-center gap-2">
@@ -867,11 +867,11 @@ const ThemePanel: React.FC = () => {
         </Link>
       </div>
       {/* Tabs */}
-      <div className='p-1 rounded-[40px] bg-[#F7F6F9] w-fit border border-[#F4F4F4] flex items-center justify-center '>
+      <div className='p-1 rounded-[40px] bg-[#ffffff] w-fit border border-[#EDEEEF] flex items-center justify-center '>
         <button className='px-5  py-2 text-xs font-medium text-[#3A3A3A] rounded-[70px]'
           onClick={() => setTab('custom')}
           style={{
-            background: tab === 'custom' ? 'linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)' : 'transparent'
+            background: tab === 'custom' ? '#F4F3FF' : 'transparent'
           }}
         >Custom</button>
         <svg xmlns="http://www.w3.org/2000/svg" className='mx-1' width="2" height="17" viewBox="0 0 2 17" fill="none">
@@ -880,13 +880,13 @@ const ThemePanel: React.FC = () => {
         <button className='px-5  py-2 text-xs font-medium text-[#3A3A3A] rounded-[70px]'
           onClick={() => setTab('default')}
           style={{
-            background: tab === 'default' ? 'linear-gradient(270deg, #D5CAFC 2.4%, #E3D2EB 27.88%, #F4DCD3 69.23%, #FDE4C2 100%)' : 'transparent'
+            background: tab === 'default' ? '#F4F3FF' : 'transparent'
           }}
         >Built-in</button>
       </div>
       {/* Built-in Themes */}
 
-      {tab === 'default' && <div className="flex flex-wrap gap-6">
+      {tab === 'default' && <div className="flex flex-wrap gap-x-5 gap-y-3.5">
         {
           defaultThemes.map((theme) => (
             <ThemeCard
@@ -904,7 +904,7 @@ const ThemePanel: React.FC = () => {
       {/* Custom Themes Section */}
       {tab === 'custom' && customThemes.length > 0 && (
 
-        <div className="flex flex-wrap gap-6">
+        <div className="flex flex-wrap gap-x-5 gap-y-3.5">
           {customThemes.map((theme) => (
             <ThemeCard
               key={theme.id}
diff --git a/electron/servers/nextjs/components/Home.tsx b/electron/servers/nextjs/components/Home.tsx
index bb5319c7..0061c4fb 100644
--- a/electron/servers/nextjs/components/Home.tsx
+++ b/electron/servers/nextjs/components/Home.tsx
@@ -31,49 +31,6 @@ interface ButtonState {
   status?: string;
 }
 
-const FINAL_STEP_CONFETTI_PIECES = [
-  // left: denser at top
-  { side: "left", offset: 1, top: 3, width: 28, height: 10, color: "#F59E0B", rotate: 12 },
-  { side: "left", offset: 7, top: 5, width: 18, height: 7, color: "#7C3AED", rotate: -10 },
-  { side: "left", offset: 12, top: 7, width: 20, height: 7, color: "#14B8A6", rotate: 22 },
-  { side: "left", offset: 3, top: 10, width: 22, height: 8, color: "#22C55E", rotate: -18 },
-  { side: "left", offset: 9, top: 12, width: 24, height: 8, color: "#E11D48", rotate: 18 },
-  { side: "left", offset: 14, top: 15, width: 18, height: 7, color: "#F43F5E", rotate: 23 },
-  { side: "left", offset: 5, top: 18, width: 20, height: 7, color: "#0EA5E9", rotate: -12 },
-  { side: "left", offset: 11, top: 21, width: 26, height: 9, color: "#2563EB", rotate: 20 },
-  { side: "left", offset: 2, top: 24, width: 19, height: 7, color: "#14B8A6", rotate: -16 },
-  { side: "left", offset: 8, top: 28, width: 21, height: 8, color: "#FB7185", rotate: 27 },
-  { side: "left", offset: 13, top: 32, width: 20, height: 7, color: "#06B6D4", rotate: 16 },
-  { side: "left", offset: 3, top: 36, width: 24, height: 9, color: "#EAB308", rotate: -22 },
-  { side: "left", offset: 10, top: 41, width: 18, height: 7, color: "#A855F7", rotate: -14 },
-  { side: "left", offset: 2, top: 50, width: 30, height: 10, color: "#EC4899", rotate: -28 },
-  { side: "left", offset: 13, top: 58, width: 19, height: 7, color: "#22C55E", rotate: 17 },
-  { side: "left", offset: 5, top: 66, width: 24, height: 8, color: "#8B5CF6", rotate: 14 },
-  { side: "left", offset: 11, top: 74, width: 18, height: 7, color: "#3B82F6", rotate: 12 },
-  { side: "left", offset: 4, top: 82, width: 20, height: 7, color: "#14B8A6", rotate: 21 },
-  { side: "left", offset: 7, top: 90, width: 24, height: 8, color: "#D946EF", rotate: -26 },
-
-  // right: denser at top
-  { side: "right", offset: 1, top: 4, width: 30, height: 10, color: "#F97316", rotate: -14 },
-  { side: "right", offset: 8, top: 6, width: 19, height: 7, color: "#0EA5E9", rotate: 12 },
-  { side: "right", offset: 13, top: 9, width: 20, height: 7, color: "#22C55E", rotate: -20 },
-  { side: "right", offset: 4, top: 12, width: 24, height: 8, color: "#EC4899", rotate: 20 },
-  { side: "right", offset: 10, top: 15, width: 22, height: 8, color: "#06B6D4", rotate: -18 },
-  { side: "right", offset: 15, top: 18, width: 20, height: 7, color: "#22C55E", rotate: -25 },
-  { side: "right", offset: 5, top: 21, width: 18, height: 7, color: "#8B5CF6", rotate: 19 },
-  { side: "right", offset: 12, top: 24, width: 21, height: 8, color: "#F43F5E", rotate: 14 },
-  { side: "right", offset: 2, top: 28, width: 26, height: 9, color: "#84CC16", rotate: 15 },
-  { side: "right", offset: 9, top: 33, width: 21, height: 8, color: "#F97316", rotate: -11 },
-  { side: "right", offset: 14, top: 38, width: 20, height: 7, color: "#A855F7", rotate: -19 },
-  { side: "right", offset: 4, top: 44, width: 19, height: 7, color: "#F43F5E", rotate: 20 },
-  { side: "right", offset: 2, top: 52, width: 28, height: 10, color: "#FACC15", rotate: 25 },
-  { side: "right", offset: 12, top: 60, width: 18, height: 7, color: "#14B8A6", rotate: -15 },
-  { side: "right", offset: 6, top: 68, width: 24, height: 8, color: "#22C55E", rotate: -17 },
-  { side: "right", offset: 1, top: 76, width: 20, height: 7, color: "#A855F7", rotate: 14 },
-  { side: "right", offset: 13, top: 84, width: 20, height: 7, color: "#3B82F6", rotate: -24 },
-  { side: "right", offset: 5, top: 92, width: 26, height: 9, color: "#EAB308", rotate: 18 },
-] as const;
-
 const getTaperedSideOffset = (offset: number, top: number) => {
   const taperMultiplier = Math.max(0.72, 1.85 - top * 0.012);
   return Math.min(29, Number((offset * taperMultiplier).toFixed(2)));
@@ -320,30 +277,20 @@ export default function Home() {
     //   </div>
     // </div>
     <div className="flex h-screen">
-      <OnBoardingSlidebar />
+      <OnBoardingSlidebar step={step} />
       <main className="w-full pl-20 pr-8 max-w-[1440px] mx-auto relative z-10">
         {step === 3 && (
-          <div className="pointer-events-none fixed inset-0 z-0 overflow-hidden" aria-hidden>
-            {FINAL_STEP_CONFETTI_PIECES.map((piece, index) => (
-              <span
-                key={`${piece.side}-${index}`}
-                className="absolute rounded-[3px]"
-                style={{
-                  top: `${piece.top}%`,
-                  ...(piece.side === "left"
-                    ? { left: `${getTaperedSideOffset(piece.offset, piece.top)}%` }
-                    : { right: `${getTaperedSideOffset(piece.offset, piece.top)}%` }),
-                  width: `${piece.width}px`,
-                  height: `${piece.height}px`,
-                  backgroundColor: piece.color,
-                  transform: `rotate(${piece.rotate}deg)`,
-                }}
-              />
-            ))}
+          <div className="pointer-events-none fixed left-0 top-0 z-0 overflow-hidden" aria-hidden>
+            <img src="/left-confetti.png" alt="presenton" className='w-full h-full object-contain' />
+          </div>
+        )}
+        {step === 3 && (
+          <div className="pointer-events-none fixed right-0 top-0 z-0 overflow-hidden" aria-hidden>
+            <img src="/right-confetti.png" alt="presenton" className='w-full h-full object-contain' />
           </div>
         )}
         <OnBoardingHeader currentStep={step} />
-        {step === 1 && <ModeSelectStep setStep={setStep} setSelectedMode={setSelectedMode} />}
+        {step === 1 && <ModeSelectStep selectedMode={selectedMode} setStep={setStep} setSelectedMode={setSelectedMode} />}
         {step === 2 && selectedMode === "presenton" && <PresentonMode currentStep={step} setStep={setStep} />}
         {step === 2 && selectedMode === "image" && <GenerationWithImage />}
         {step === 3 && <FinalStep />}
diff --git a/electron/servers/nextjs/components/OnBoarding/FinalStep.tsx b/electron/servers/nextjs/components/OnBoarding/FinalStep.tsx
index 10ad3acf..77854a2c 100644
--- a/electron/servers/nextjs/components/OnBoarding/FinalStep.tsx
+++ b/electron/servers/nextjs/components/OnBoarding/FinalStep.tsx
@@ -23,7 +23,7 @@ const FinalStep = () => {
                 <p className='text-[#000000CC] text-xl font-normal font-syne'>Your AI workspace is ready. Let’s create your first presentation.</p>
                 <button onClick={handleGoToUpload} className='bg-[#7C51F8] px-[23px] mt-14 py-[15px]  rounded-[70px] text-white text-lg font-syne font-semibold'>My First Presentation</button>
             </div>
-            <button onClick={handleGoToDashboard} className='absolute bottom-20 text-[#7A5AF8] flex items-center gap-2 right-10  text-xs font-normal font-syne'>Go to your dashboard <ArrowRight className='w-4 h-4 text-[#7A5AF8]' /></button>
+            <button onClick={handleGoToDashboard} className='absolute uppercase bottom-20 text-[#7A5AF8] flex items-center gap-2 right-10  text-xs font-normal font-syne'>Go to your dashboard <ArrowRight className='w-4 h-4 text-[#7A5AF8]' /></button>
         </div>
     )
 }
diff --git a/electron/servers/nextjs/components/OnBoarding/ModeSelectStep.tsx b/electron/servers/nextjs/components/OnBoarding/ModeSelectStep.tsx
index a2e87062..f2a46e4a 100644
--- a/electron/servers/nextjs/components/OnBoarding/ModeSelectStep.tsx
+++ b/electron/servers/nextjs/components/OnBoarding/ModeSelectStep.tsx
@@ -1,7 +1,7 @@
 import { ChevronRight } from 'lucide-react'
 import React from 'react'
 
-const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number) => void, setSelectedMode: (mode: string) => void }) => {
+const ModeSelectStep = ({ selectedMode, setStep, setSelectedMode }: { selectedMode: string, setStep: (step: number) => void, setSelectedMode: (mode: string) => void }) => {
     return (
         <div className='max-w-[650px]'>
             <div className='mb-[70px]'>
@@ -12,11 +12,11 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
             <div className='space-y-5'>
                 <div onClick={() => {
                     setSelectedMode("presenton")
-                    setStep(2)
-                }} className='border font-syne border-[#EDEEEF] rounded-[11px] p-3  flex items-center  justify-between gap-6 cursor-pointer'>
+
+                }} className={`border font-syne  rounded-[11px] p-3  flex items-center  justify-between gap-6 cursor-pointer ${selectedMode === "presenton" ? "border-[#a49cfc]" : "border-[#EDEEEF]"}`}>
                     <div className='flex items-center gap-6'>
-                        <div className='rounded-[4px] bg-[#F4F3FF]  p-[12px] w-[58px] h-[58px] flex items-center justify-center'>
-                            <img src='/logo-with-bg.png' alt='presenton' className='w-full h-full object-contain' />
+                        <div className='rounded-[4px] bg-[#F4F3FF]  pt-[16.8px] pl-[16.8px] pb-[15.8px] pr-[17.1px]  w-[74px] h-[74px] flex items-center justify-center'>
+                            <img src='/logo-with-bg.png' alt='presenton' className='w-[40px] h-[41.4px] object-contain' />
                         </div>
                         <div className=''>
                             <div className='flex items-start gap-2 relative '>
@@ -30,16 +30,11 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
                     <ChevronRight className='w-6 h-6 text-[#B3B3B3]' />
                 </div>
                 <div
-
-                    // onClick={() => {
-                    //     setSelectedMode("image")
-                    //     setStep(2)
-                    // }}
                     className='border font-syne border-[#EDEEEF]  cursor-not-allowed rounded-[11px] p-3  flex items-center  justify-between gap-6  relative'>
                     <p className='text-black absolute top-1/2 -translate-y-1/2 right-14 flex items-center justify-center text-[14px] font-normal bg-[#F4F3FF] px-3 py-1.5 rounded-[30px]'>Coming soon</p>
 
                     <div className='flex items-center gap-6'>
-                        <div className='rounded-[4px] bg-[#FFF6ED]  p-[12px] w-[58px] h-[58px] flex items-center justify-center'>
+                        <div className='rounded-[4px] bg-[#FFF6ED]  p-[12px] w-[74px] h-[74px] flex items-center justify-center'>
                             <img src='/image_mode.png' alt='presenton' className='w-full h-full object-contain' />
                         </div>
                         <div className=''>
@@ -48,12 +43,22 @@ const ModeSelectStep = ({ setStep, setSelectedMode }: { setStep: (step: number)
                                 <h3 className='text-black text-[18px] font-medium font-syne'>Generate with Image Model</h3>
 
                             </div>
-                            <p className='text-[#999999] text-[14px] font-normal font-syne'>Generate presentations with visual layouts and elements.</p>
+                            <p className='text-[#999999] text-[14px] font-normal font-syne'>Instantly generate presentation slides as images.</p>
                         </div>
                     </div>
                     <ChevronRight className='w-6 h-6 text-[#B3B3B3]' />
                 </div>
             </div>
+            <div className='absolute bottom-16 mr-8  max-w-[1440px]  right-0 flex justify-end items-center gap-2.5 '>
+
+                <button
+                    onClick={() => {
+                        setStep(2);
+                    }}
+                    className='border border-[#EDEEEF] bg-[#7C51F8]  rounded-[58px] px-5 py-2.5 text-white text-xs  font-semibold'>
+                    Start With {selectedMode === "presenton" ? "Presenton" : "Image Model"}
+                </button>
+            </div>
         </div>
     )
 }
diff --git a/electron/servers/nextjs/components/OnBoarding/OnBoardingSlidebar.tsx b/electron/servers/nextjs/components/OnBoarding/OnBoardingSlidebar.tsx
index 7e39b524..3fb72b1a 100644
--- a/electron/servers/nextjs/components/OnBoarding/OnBoardingSlidebar.tsx
+++ b/electron/servers/nextjs/components/OnBoarding/OnBoardingSlidebar.tsx
@@ -1,16 +1,16 @@
 import React from 'react'
 
-const OnBoardingSlidebar = () => {
+const OnBoardingSlidebar = ({ step }: { step: number }) => {
     return (
-        <div className='bg-[#F6F6F9] w-[300px] relative'>
+        <div className={`${step === 3 ? "bg-white" : "bg-[#F6F6F9]"} w-[300px] relative`}>
             <img src="/Logo.png" alt="Presenton logo" className="absolute top-0 left-0 w-[128px] m-6" />
-            <svg xmlns="http://www.w3.org/2000/svg" width="296" height="591" viewBox="0 0 296 591" fill="none">
+            {step !== 3 && <svg xmlns="http://www.w3.org/2000/svg" width="296" height="591" viewBox="0 0 296 591" fill="none">
                 <path d="M291.5 183.5C311.916 183.5 328.5 200.271 328.5 221C328.5 241.729 311.916 258.5 291.5 258.5C271.084 258.5 254.5 241.729 254.5 221C254.5 200.271 271.084 183.5 291.5 183.5Z" stroke="#EDEEEF" strokeWidth="3" />
                 <path d="M291.5 131.238C340.408 131.238 380.089 171.407 380.09 220.998C380.09 270.589 340.408 310.758 291.5 310.758C242.591 310.758 202.91 270.589 202.91 220.998C202.91 171.407 242.591 131.238 291.5 131.238Z" stroke="#EDEEEF" strokeWidth="3" />
                 <path d="M291.5 43.6289C388.173 43.6289 466.576 123.021 466.576 220.998C466.576 318.975 388.174 398.368 291.5 398.368C194.826 398.368 116.424 318.975 116.424 220.998C116.424 123.022 194.826 43.629 291.5 43.6289Z" stroke="#EDEEEF" strokeWidth="3" />
                 <path d="M287.5 -62.5C434.322 -62.5 553.5 64.115 553.5 220.5C553.5 376.885 434.322 503.5 287.5 503.5C140.678 503.5 21.5 376.885 21.5 220.5C21.5 64.115 140.678 -62.5 287.5 -62.5Z" stroke="#EDEEEF" strokeWidth="3" />
                 <path d="M291 -176.5C495.019 -176.5 660.5 -5.07604 660.5 206.5C660.5 418.076 495.019 589.5 291 589.5C86.9809 589.5 -78.5 418.076 -78.5 206.5C-78.5 -5.07604 86.9809 -176.5 291 -176.5Z" stroke="#EDEEEF" strokeWidth="3" />
-            </svg>
+            </svg>}
 
         </div>
     )
diff --git a/electron/servers/nextjs/components/OnBoarding/PresentonMode.tsx b/electron/servers/nextjs/components/OnBoarding/PresentonMode.tsx
index eea501da..b3aef192 100644
--- a/electron/servers/nextjs/components/OnBoarding/PresentonMode.tsx
+++ b/electron/servers/nextjs/components/OnBoarding/PresentonMode.tsx
@@ -329,8 +329,8 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
             </div>
             {/* Text Provider */}
             <div className='p-3 border border-[#EDEEEF] rounded-[11px] '>
-                <div className="flex items-center gap-6  mb-7">
-                    <div className='w-[60px] h-[60px] rounded-[4px] flex items-center justify-center'
+                <div className="flex items-center gap-[24.3px]  mb-[42px]">
+                    <div className='w-[74px] h-[74px] rounded-[4px] pt-[16.8px] pr-[17.15px] pb-[17.2px] pl-[16.85px] flex items-center justify-center'
                         style={{ backgroundColor: '#4C55541A' }}
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
@@ -362,7 +362,7 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
                                     variant="outline"
                                     role="combobox"
                                     aria-expanded={openProviderSelect}
-                                    className=" h-12 px-4 py-4 outline-none border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors hover:border-gray-400 justify-between"
+                                    className=" h-12 px-4 py-4 outline-none border border-[#E8E8E9] rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors hover:border-gray-400 justify-between"
                                 >
                                     <div className="flex gap-3 items-center">
                                         <span className="text-sm font-medium text-gray-900">
@@ -536,7 +536,7 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
                                     (llmConfig.LLM === 'anthropic' && !currentApiKey) ||
                                     (llmConfig.LLM === 'custom' && !llmConfig.CUSTOM_LLM_URL)
                                 }
-                                className={`mt-4 py-2.5 bg-[#EDEEEF] px-3.5 w-fit  rounded-[48px] text-xs font-semibold text-[#101323] transition-all duration-200 border ${modelsLoading
+                                className={`mt-4 py-2.5 bg-[#EDEEEF] disabled:opacity-50 disabled:cursor-not-allowed px-3.5 w-fit  rounded-[48px] text-xs font-semibold text-[#101323] transition-all duration-200 border ${modelsLoading
                                     ? " border-gray-300 cursor-not-allowed text-gray-500"
                                     : " border-[#EDEEEF] text-[#101323] hover:bg-[#E8F0FF]/90 focus:ring-2 focus:ring-blue-500/20"
                                     }`}
@@ -643,12 +643,12 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
                 </div>
             </div>
             {/* Image Provider */}
-            <div className='p-3 border border-[#EDEEEF] rounded-[11px] mt-5'>
-                <ToolTip content="Enable/Disable Image Generation" className='flex justify-end items-center'>
+            <div className={`p-3 border border-[#EDEEEF] rounded-[11px] relative mt-5 ${llmConfig.DISABLE_IMAGE_GENERATION ? "bg-[#F9FAFB]" : ""}`}>
+                <ToolTip content="Enable/Disable Image Generation" className='flex justify-end items-center absolute top-3 right-3'>
                     <div className='flex justify-end items-center'>
                         <Switch
                             checked={!llmConfig.DISABLE_IMAGE_GENERATION}
-                            className='data-[state=checked]:bg-[#4791FF] data-[state=unchecked]:bg-gray-400'
+                            className='data-[state=checked]:bg-[#4791FF] h-[22px] w-[36px] data-[state=unchecked]:bg-[#E2E0E1]'
                             onCheckedChange={(checked) => setLlmConfig(prev => ({
                                 ...prev,
                                 DISABLE_IMAGE_GENERATION: !checked
@@ -657,8 +657,8 @@ const PresentonMode = ({ currentStep, setStep }: { currentStep: number, setStep:
                     </div>
 
                 </ToolTip>
-                <div className=" mb-7 flex items-center gap-6">
-                    <div className='w-[60px] h-[60px] px-[13.5px] py-[14.2px] rounded-[4px] flex items-center justify-center'
+                <div className={` flex items-center gap-6 ${llmConfig.DISABLE_IMAGE_GENERATION ? "" : "mb-[42px]"}`}>
+                    <div className='w-[74px] h-[74px] px-[13.5px] py-[14.2px] rounded-[4px] flex items-center justify-center'
                         style={{ backgroundColor: '#F4F3FF' }}
                     >
                         <img src="/image-markup.svg" className='w-full h-full object-cover' alt='image-markup' />
diff --git a/electron/servers/nextjs/components/ui/select.tsx b/electron/servers/nextjs/components/ui/select.tsx
index ac2a8f2b..4fe867e9 100644
--- a/electron/servers/nextjs/components/ui/select.tsx
+++ b/electron/servers/nextjs/components/ui/select.tsx
@@ -31,7 +31,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      <ChevronUpIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -82,7 +82,7 @@ const SelectContent = React.forwardRef<
       className={cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       )}
       position={position}
@@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
diff --git a/electron/servers/nextjs/public/left-confetti.png b/electron/servers/nextjs/public/left-confetti.png
new file mode 100644
index 00000000..ec2ea12e
Binary files /dev/null and b/electron/servers/nextjs/public/left-confetti.png differ
diff --git a/electron/servers/nextjs/public/right-confetti.png b/electron/servers/nextjs/public/right-confetti.png
new file mode 100644
index 00000000..0a096e86
Binary files /dev/null and b/electron/servers/nextjs/public/right-confetti.png differ