diff --git a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
index dcfd31e8..1c95bc44 100644
--- a/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
+++ b/servers/nextjs/app/(presentation-generator)/pdf-maker/PdfMakerPage.tsx
@@ -122,7 +122,7 @@ const PresentationPage = ({ presentation_id }: { presentation_id: string }) => {
                   presentationData.slides.length > 0 &&
                   presentationData.slides.map((slide: any, index: number) => (
                     // [data-speaker-note] is used to extract the speaker note from the slide for export to pptx
-                    <div key={index} className="w-full" data-speaker-note={slide.note}>
+                    <div key={index} className="w-full" data-speaker-note={slide.speaker_note}>
                       {renderSlideContent(slide, true)}
                     </div>
                   ))}
diff --git a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
index 342e7be1..689840f3 100644
--- a/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
+++ b/servers/nextjs/app/(presentation-generator)/presentation/components/SlideContent.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo } from "react";
-import { Loader2, PlusIcon, Trash2, WandSparkles } from "lucide-react";
+import { Loader2, PlusIcon, Trash2, WandSparkles, StickyNote } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -174,6 +174,7 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
               presentationId={presentationId}
             />
           )}
+         
           {!isStreaming && !loading && (
             <ToolTip content="Delete slide">
               <div
@@ -245,6 +246,28 @@ const SlideContent = ({ slide, index, presentationId }: SlideContentProps) => {
               </Popover>
             </div>
           )}
+          {/* Speaker Notes */}
+          {!isStreaming && slide?.speaker_note && (
+            <div className="absolute top-2 z-20 sm:top-4 right-8 sm:right-12 hidden md:block transition-transform">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <div className=" cursor-pointer ">
+                    <ToolTip content="Show speaker notes">
+                      <StickyNote className="text-xl text-gray-500" />
+                    </ToolTip>
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent side="left" align="start" sideOffset={10} className="w-[320px] z-30">
+                  <div className="space-y-2">
+                    <p className="text-xs font-semibold text-gray-600">Speaker notes</p>
+                    <div className="text-sm text-gray-800 whitespace-pre-wrap max-h-64 overflow-auto">
+                      {slide.speaker_note}
+                    </div>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </div>
+          )}
         </div>
       </div>
     </>
diff --git a/servers/nextjs/app/(presentation-generator)/types/slide.ts b/servers/nextjs/app/(presentation-generator)/types/slide.ts
index c5dd82b5..05dd38df 100644
--- a/servers/nextjs/app/(presentation-generator)/types/slide.ts
+++ b/servers/nextjs/app/(presentation-generator)/types/slide.ts
@@ -32,5 +32,7 @@ export interface Slide {
   icons: string[] | null;
   graph_id: string | null;
   presentation?: string;
+  speaker_note?: string;
+
   content: SlideContent;
 }