diff --git a/src/components/PomodoroModal.tsx b/src/components/PomodoroModal.tsx
index 47c83cf..538e148 100644
--- a/src/components/PomodoroModal.tsx
+++ b/src/components/PomodoroModal.tsx
@@ -1,18 +1,18 @@
+import { ReactNode } from "react";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { PomodoroTimer } from "./PomodoroTimer";
 
 interface PomodoroModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  onTimerStateChange?: (isRunning: boolean, timeLeft: number, mode: string) => void;
+  children: ReactNode;
 }
 
-export function PomodoroModal({ open, onOpenChange, onTimerStateChange }: PomodoroModalProps) {
+export function PomodoroModal({ open, onOpenChange, children }: PomodoroModalProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
@@ -20,7 +20,7 @@ export function PomodoroModal({ open, onOpenChange, onTimerStateChange }: Pomodo
           <DialogTitle className="text-2xl">Pomodoro Timer</DialogTitle>
         </DialogHeader>
         <div className="mt-4">
-          <PomodoroTimer onStateChange={onTimerStateChange} />
+          {children}
         </div>
       </DialogContent>
     </Dialog>
diff --git a/src/components/PomodoroTimer.tsx b/src/components/PomodoroTimer.tsx
index 351a055..0aaa4a8 100644
--- a/src/components/PomodoroTimer.tsx
+++ b/src/components/PomodoroTimer.tsx
@@ -20,12 +20,42 @@ interface PomodoroTimerProps {
 }
 
 export function PomodoroTimer({ onStateChange }: PomodoroTimerProps = {}) {
-  const [mode, setMode] = useState<TimerMode>('work');
-  const [timeLeft, setTimeLeft] = useState(TIMER_DURATIONS.work);
-  const [isRunning, setIsRunning] = useState(false);
-  const [sessionsCompleted, setSessionsCompleted] = useState(0);
+  // Load initial state from localStorage
+  const [mode, setMode] = useState<TimerMode>(() => {
+    const saved = localStorage.getItem('pomodoroMode');
+    return (saved as TimerMode) || 'work';
+  });
+  const [timeLeft, setTimeLeft] = useState(() => {
+    const saved = localStorage.getItem('pomodoroTimeLeft');
+    return saved ? parseInt(saved) : TIMER_DURATIONS.work;
+  });
+  const [isRunning, setIsRunning] = useState(() => {
+    const saved = localStorage.getItem('pomodoroIsRunning');
+    return saved === 'true';
+  });
+  const [sessionsCompleted, setSessionsCompleted] = useState(() => {
+    const saved = localStorage.getItem('pomodoroSessionsCompleted');
+    return saved ? parseInt(saved) : 0;
+  });
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
+  // Save state to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('pomodoroMode', mode);
+  }, [mode]);
+
+  useEffect(() => {
+    localStorage.setItem('pomodoroTimeLeft', timeLeft.toString());
+  }, [timeLeft]);
+
+  useEffect(() => {
+    localStorage.setItem('pomodoroIsRunning', isRunning.toString());
+  }, [isRunning]);
+
+  useEffect(() => {
+    localStorage.setItem('pomodoroSessionsCompleted', sessionsCompleted.toString());
+  }, [sessionsCompleted]);
+
   // Function to play notification sound using Web Audio API
   const playNotificationSound = () => {
     try {
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 677d175..ffef0e6 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState, useRef, useCallback } from "react";
+import { useEffect, useState, useRef, useCallback, useId } from "react";
+import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -38,6 +39,7 @@ import { TemplateSelector } from "@/components/TemplateSelector";
 import type { NoteTemplate } from "@/utils/noteTemplates";
 import { AdvancedSearch, type SearchFilters, type TagOption } from "@/components/AdvancedSearch";
 import { PomodoroModal } from "@/components/PomodoroModal";
+import { PomodoroTimer } from "@/components/PomodoroTimer";
 import { KanbanBoard } from "@/components/KanbanBoard";
 import { getSmartTagSuggestions } from "@/utils/smartTags";
 import { QuickCaptureWidget } from "@/components/QuickCaptureWidget";
@@ -3217,8 +3219,9 @@ const Index = () => {
       <PomodoroModal
         open={showPomodoroModal}
         onOpenChange={setShowPomodoroModal}
-        onTimerStateChange={handlePomodoroStateChange}
-      />
+      >
+        <PomodoroTimer onStateChange={handlePomodoroStateChange} />
+      </PomodoroModal>
 
       {/* Quick Capture Widget */}
       <QuickCaptureWidget onNoteCaptured={loadNotes} />