diff --git a/pickleglass_web/app/personalize/page.tsx b/pickleglass_web/app/personalize/page.tsx
index c24398b6..0f91209d 100644
--- a/pickleglass_web/app/personalize/page.tsx
+++ b/pickleglass_web/app/personalize/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { ChevronDown, Plus, Copy } from 'lucide-react'
 import { getPresets, updatePreset, createPreset, PromptPreset } from '@/utils/api'
+import Modal from '@/components/Modal'
 
 export default function PersonalizePage() {
   const [allPresets, setAllPresets] = useState<PromptPreset[]>([]);
@@ -13,6 +14,13 @@ export default function PersonalizePage() {
   const [saving, setSaving] = useState(false);
   const [isDirty, setIsDirty] = useState(false);
 
+  // Modal state management
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalPreset, setModalPreset] = useState<PromptPreset | null>(null);
+  const [modalContent, setModalContent] = useState('');
+  const [modalTitle, setModalTitle] = useState('');
+  const [modalIsDirty, setModalIsDirty] = useState(false);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -147,6 +155,113 @@ export default function PersonalizePage() {
     }
   };
 
+  const openModalWithPreset = (preset: PromptPreset) => {
+    setModalPreset(preset);
+    setModalContent(preset.prompt);
+    setModalTitle(preset.title);
+    setModalIsDirty(false);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    if (modalIsDirty) {
+      const shouldClose = window.confirm(
+        'You have unsaved changes in the modal editor. Are you sure you want to close without saving?'
+      );
+      if (!shouldClose) {
+        return;
+      }
+    }
+    setIsModalOpen(false);
+    setModalPreset(null);
+    setModalContent('');
+    setModalTitle('');
+    setModalIsDirty(false);
+  };
+
+  const handleModalContentChange = (newContent: string) => {
+    setModalContent(newContent);
+    setModalIsDirty(
+      newContent !== modalPreset?.prompt || modalTitle !== modalPreset?.title
+    );
+  };
+
+  const handleModalTitleChange = (newTitle: string) => {
+    setModalTitle(newTitle);
+    setModalIsDirty(
+      newTitle !== modalPreset?.title || modalContent !== modalPreset?.prompt
+    );
+  };
+
+  const saveModalChanges = async () => {
+    if (!modalPreset || !modalIsDirty) return;
+    
+    if (modalPreset.is_default === 1) {
+      alert('Default presets cannot be modified.');
+      return;
+    }
+
+    if (!modalTitle.trim()) {
+      alert('Preset title cannot be empty.');
+      return;
+    }
+
+    try {
+      setSaving(true);
+      await updatePreset(modalPreset.id, {
+        title: modalTitle.trim(),
+        prompt: modalContent,
+      });
+
+      // Create the updated preset object
+      const updatedPreset = { ...modalPreset, title: modalTitle.trim(), prompt: modalContent };
+      
+      // Update the preset in the main list
+      setAllPresets(prev => prev.map(p => 
+        p.id === modalPreset.id ? updatedPreset : p
+      ));
+      
+      // Update selected preset if it's the same one
+      if (selectedPreset?.id === modalPreset.id) {
+        setSelectedPreset(updatedPreset);
+        setEditorContent(modalContent);
+        setIsDirty(false);
+      }
+      
+      // Update modal preset state to reflect the saved changes
+      setModalPreset(updatedPreset);
+      
+      // Reset modal states and close
+      setModalIsDirty(false);
+      setIsModalOpen(false);
+    } catch (error) {
+      console.error('Failed to save modal changes:', error);
+      
+      // Enhanced error handling with specific error types
+      let errorMessage = 'Failed to save preset. Please try again.';
+      
+      if (error instanceof Error) {
+        // Check for specific error types
+        if (error.message.includes('network') || error.message.includes('fetch')) {
+          errorMessage = 'Network error. Please check your connection and try again.';
+        } else if (error.message.includes('401') || error.message.includes('unauthorized')) {
+          errorMessage = 'Authentication error. Please log in again.';
+        } else if (error.message.includes('403') || error.message.includes('forbidden')) {
+          errorMessage = 'You do not have permission to edit this preset.';
+        } else if (error.message.includes('404')) {
+          errorMessage = 'Preset not found. It may have been deleted.';
+        } else if (error.message.includes('500')) {
+          errorMessage = 'Server error. Please try again later.';
+        }
+      }
+      
+      alert(errorMessage);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
   if (loading) {
     return (
       <div className="flex items-center justify-center h-full">
@@ -201,8 +316,8 @@ export default function PersonalizePage() {
         </div>
       </div>
 
-      <div className={`transition-colors duration-300 ${showPresets ? 'bg-gray-50' : 'bg-white'}`}>
-        <div className="px-8 py-6">
+      <div className={`flex-1 transition-colors duration-300 ${showPresets ? 'bg-gray-50' : 'bg-white'}`}>
+        <div className="h-full flex flex-col px-8 py-6">
           <div className="mb-6">
             <button
               onClick={() => setShowPresets(!showPresets)}
@@ -221,6 +336,7 @@ export default function PersonalizePage() {
                 <div
                   key={preset.id}
                   onClick={() => handlePresetClick(preset)}
+                  onDoubleClick={() => openModalWithPreset(preset)}
                   className={`
                     p-4 rounded-lg cursor-pointer transition-all duration-200 bg-white
                     h-48 flex flex-col shadow-sm hover:shadow-md relative
@@ -248,28 +364,81 @@ export default function PersonalizePage() {
         </div>
       </div>
 
-      <div className="flex-1 bg-white">
-        <div className="h-full px-8 py-6 flex flex-col">
-          {selectedPreset?.is_default === 1 && (
-            <div className="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
-              <div className="flex items-center gap-2">
-                <div className="w-4 h-4 bg-yellow-400 rounded-full"></div>
-                <p className="text-sm text-yellow-800">
-                  <strong>This is a default preset and cannot be edited.</strong> 
-                  Use the "Duplicate" button above to create an editable copy, or create a new preset.
-                </p>
-              </div>
+      
+      
+      {/* Preset Editor Modal */}
+      <Modal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        title={`Edit Preset${modalPreset?.is_default === 1 ? ' (Read-only)' : ''}`}
+        footer={
+          <>
+            <button 
+              className="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors w-full sm:w-auto"
+              onClick={closeModal}
+            >
+              Cancel
+            </button>
+            <button 
+              className={`px-4 py-2 rounded-md transition-colors w-full sm:w-auto ${
+                modalIsDirty 
+                  ? 'bg-blue-600 text-white hover:bg-blue-700' 
+                  : 'bg-gray-400 text-white cursor-not-allowed'
+              }`}
+              onClick={saveModalChanges}
+              disabled={!modalIsDirty || saving}
+            >
+              {saving ? 'Saving...' : 'Save Changes'}
+            </button>
+          </>
+        }
+        className="w-[95%] sm:w-[90%] md:w-[85%] lg:w-[80%] max-w-4xl"
+      >
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+            {modalIsDirty && (
+              <span className="text-sm text-orange-600 bg-orange-100 px-2 py-1 rounded inline-block">
+                Unsaved changes
+              </span>
+            )}
+            {modalPreset?.is_default === 1 && (
+              <span className="text-sm text-yellow-600 bg-yellow-100 px-2 py-1 rounded inline-block">
+                Read-only (Default preset)
+              </span>
+            )}
+          </div>
+          
+          <div className="space-y-3">
+            <div>
+              <input
+                type="text"
+                value={modalTitle}
+                onChange={(e) => handleModalTitleChange(e.target.value)}
+                className="w-full p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
+                placeholder="Enter preset title..."
+                readOnly={modalPreset?.is_default === 1}
+              />
+            </div>
+            
+            <div>
+              <textarea
+                value={modalContent}
+                onChange={(e) => handleModalContentChange(e.target.value)}
+                className="w-full h-64 sm:h-72 md:h-80 lg:h-96 p-3 sm:p-4 border border-gray-300 rounded-md resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm leading-relaxed"
+                placeholder="Enter your prompt content here..."
+                readOnly={modalPreset?.is_default === 1}
+              />
+            </div>
+          </div>
+          
+          {modalPreset?.is_default === 1 && (
+            <div className="text-xs text-yellow-600">
+              Default presets cannot be modified
             </div>
           )}
-          <textarea
-            value={editorContent}
-            onChange={handleEditorChange}
-            className="w-full flex-1 text-sm text-gray-900 border-0 resize-none focus:outline-none bg-transparent font-mono leading-relaxed"
-            placeholder="Select a preset or type directly..."
-            readOnly={selectedPreset?.is_default === 1}
-          />
         </div>
-      </div>
+      </Modal>
+     
     </div>
   );
 } 
\ No newline at end of file
diff --git a/pickleglass_web/components/Modal.tsx b/pickleglass_web/components/Modal.tsx
new file mode 100644
index 00000000..5cfd89dd
--- /dev/null
+++ b/pickleglass_web/components/Modal.tsx
@@ -0,0 +1,184 @@
+import React, { useRef, useEffect, useState } from 'react';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    className?: string;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, footer, className = '' }) => {
+    const modalRef = useRef<HTMLDivElement>(null);
+    const previousFocusRef = useRef<HTMLElement | null>(null);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const [shouldRender, setShouldRender] = useState(false);
+
+    // Get all focusable elements within the modal
+    const getFocusableElements = (): NodeListOf<HTMLElement> | null => {
+        if (!modalRef.current) return null;
+        return modalRef.current.querySelectorAll(
+            'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])'
+        );
+    };
+
+    // Handle tab key for focus trapping
+    const handleTabKey = (event: KeyboardEvent) => {
+        if (event.key !== 'Tab') return;
+
+        const focusableElements = getFocusableElements();
+        if (!focusableElements || focusableElements.length === 0) return;
+
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (event.shiftKey) {
+            // Shift + Tab: moving backwards
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        } else {
+            // Tab: moving forwards
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    };
+
+    // Handle keyboard events
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                onClose();
+            } else if (event.key === 'Tab') {
+                handleTabKey(event);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            // Prevent body scroll when modal is open
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, onClose, handleTabKey]);
+
+    // Handle click outside modal (only on larger screens where modal doesn't fill screen)
+    const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
+        // Check if we're on a small screen (mobile) by checking window width
+        const isSmallScreen = window.innerWidth < 640; // 640px is Tailwind's 'sm' breakpoint
+        
+        // Only close on outside click if not on mobile (where modal is full-screen)
+        if (!isSmallScreen && modalRef.current && !modalRef.current.contains(event.target as Node)) {
+            onClose();
+        }
+    };
+
+    // Animation and render management
+    useEffect(() => {
+        if (isOpen) {
+            setShouldRender(true);
+            // Small delay to ensure DOM is ready before starting animation
+            setTimeout(() => setIsAnimating(true), 10);
+        } else {
+            setIsAnimating(false);
+            // Wait for animation to complete before unmounting
+            const timer = setTimeout(() => setShouldRender(false), 200);
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+
+    // Focus management
+    useEffect(() => {
+        if (isOpen && isAnimating) {
+            // Store the previously focused element
+            previousFocusRef.current = document.activeElement as HTMLElement;
+            
+            // Focus the first focusable element in the modal
+            const focusableElements = getFocusableElements();
+            if (focusableElements && focusableElements.length > 0) {
+                focusableElements[0].focus();
+            } else if (modalRef.current) {
+                // Fallback: focus the modal container itself
+                modalRef.current.focus();
+            }
+        } else if (!isOpen && previousFocusRef.current) {
+            // Restore focus to the previously focused element when modal closes
+            try {
+                previousFocusRef.current.focus();
+            } catch (error) {
+                // Element might no longer exist, focus body as fallback
+                document.body.focus();
+            }
+            previousFocusRef.current = null;
+        }
+    }, [isOpen, isAnimating]);
+
+    if (!shouldRender) return null;
+
+    return (
+        <div 
+            className={`fixed inset-0 bg-black z-50 transition-opacity duration-200 ${
+                isAnimating ? 'bg-opacity-70' : 'bg-opacity-0'
+            } 
+                /* Full screen on mobile, centered on larger screens */
+                flex sm:justify-center sm:items-center
+            `} 
+            onClick={handleOverlayClick}
+        >
+            <div
+                ref={modalRef}
+                className={`bg-white flex flex-col overflow-hidden transition-all duration-200 transform ${
+                    isAnimating 
+                        ? 'scale-100 opacity-100 translate-y-0' 
+                        : 'scale-95 opacity-0 translate-y-4'
+                } 
+                    /* Full screen on mobile */
+                    w-full h-full
+                    /* Modal style on larger screens */
+                    sm:w-[95%] sm:h-auto sm:max-h-[90vh] sm:rounded-lg sm:shadow-xl
+                    md:w-[90%] md:max-h-[90vh]
+                    lg:w-[85%] lg:max-h-[85vh]
+                    /* Allow custom sizing via className prop */
+                    ${className}`}
+                tabIndex={-1}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="modal-title"
+            >
+                {/* Modal Header */}
+                <div className="flex justify-between items-center p-4 sm:p-6 border-b border-gray-200">
+                    <h2 id="modal-title" className="text-lg sm:text-xl font-semibold text-gray-900 truncate pr-4">
+                        {title}
+                    </h2>
+                    <button 
+                        className="text-gray-400 hover:text-gray-600 text-2xl leading-none p-2 -m-2 flex-shrink-0" 
+                        onClick={onClose} 
+                        aria-label="Close modal"
+                    >
+                        ×
+                    </button>
+                </div>
+
+                {/* Modal Content */}
+                <div className="flex-1 px-4 pb-4 sm:px-6 sm:pb-6 overflow-y-auto">{children}</div>
+
+                {/* Modal Footer */}
+                {footer && (
+                    <div className="flex flex-col-reverse sm:flex-row justify-end gap-2 sm:gap-3 p-4 sm:p-6 border-t border-gray-200">
+                        {footer}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Modal;