diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -11,7 +11,7 @@
         
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f8fafc;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
         
         .waveform {
@@ -21,14 +21,15 @@
             align-items: center;
             justify-content: space-between;
             padding: 0 10px;
-            border-radius: 8px;
+            border-radius: 12px;
             position: relative;
             overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         }
         
         .waveform-bar {
             width: 3px;
-            background-color: rgba(255, 255, 255, 0.7);
+            background-color: rgba(255, 255, 255, 0.8);
             border-radius: 3px;
             animation: equalize 1.5s infinite ease-in-out;
             animation-delay: calc(var(--delay) * 0.1s);
@@ -36,7 +37,7 @@
         
         @keyframes equalize {
             0%, 100% { height: 10px; }
-            50% { height: 30px; }
+            50% { height: 35px; }
         }
         
         .document-container {
@@ -46,65 +47,83 @@
         }
         
         .document-container::-webkit-scrollbar {
-            width: 6px;
+            width: 8px;
         }
         
         .document-container::-webkit-scrollbar-track {
-            background: #f1f5f9;
+            background: #f8fafc;
+            border-radius: 10px;
         }
         
         .document-container::-webkit-scrollbar-thumb {
-            background-color: #cbd5e1;
-            border-radius: 20px;
+            background: linear-gradient(145deg, #cbd5e1, #94a3b8);
+            border-radius: 10px;
         }
         
         .highlight {
-            background-color: #fef08a;
-            transition: background-color 0.3s ease;
+            background: linear-gradient(90deg, #fef08a, #fde047);
+            transition: all 0.3s ease;
+            border-radius: 4px;
+            padding: 2px 4px;
+            margin: 0 2px;
+        }
+        
+        .voice-option {
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-radius: 12px;
         }
         
         .voice-option:hover {
-            transform: scale(1.03);
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .voice-option.selected {
+            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+            border: 2px solid #3b82f6;
         }
         
         .progress-bar {
-            height: 4px;
+            height: 8px;
             background-color: #e2e8f0;
-            border-radius: 2px;
+            border-radius: 10px;
             overflow: hidden;
+            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
         }
         
         .progress-fill {
             height: 100%;
-            background-color: #3b82f6;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
             width: 0%;
             transition: width 0.1s linear;
+            border-radius: 10px;
         }
         
         .settings-panel {
-            transition: all 0.3s ease;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             max-height: 0;
             overflow: hidden;
         }
         
         .settings-panel.open {
-            max-height: 500px;
+            max-height: 600px;
         }
         
         .tab-active {
-            border-bottom: 2px solid #3b82f6;
-            color: #3b82f6;
-            font-weight: 500;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            color: white;
+            border-radius: 8px;
+            transform: scale(1.05);
         }
         
         .language-flag {
-            width: 24px;
-            height: 16px;
+            width: 28px;
+            height: 20px;
             display: inline-block;
-            margin-right: 8px;
+            margin-right: 10px;
             background-size: cover;
-            border-radius: 2px;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }
         
         /* Language flags */
@@ -140,44 +159,157 @@
             background-image: url('https://flagcdn.com/nz.svg');
         }
         
-        .typing-cursor {
-            display: inline-block;
-            width: 2px;
-            height: 1em;
-            background-color: #3b82f6;
-            animation: blink 1s infinite;
-            vertical-align: middle;
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-left: 4px solid #3b82f6;
+            padding: 16px 20px;
+            border-radius: 12px;
+            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+            transform: translateX(100%);
+            opacity: 0;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1000;
+            min-width: 300px;
+        }
+        
+        .notification.show {
+            transform: translateX(0);
+            opacity: 1;
+        }
+        
+        .notification.success {
+            border-left-color: #10b981;
+        }
+        
+        .notification.error {
+            border-left-color: #ef4444;
+        }
+        
+        .notification.warning {
+            border-left-color: #f59e0b;
+        }
+        
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            transition: all 0.2s ease;
+            border-radius: 8px;
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
         }
         
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
+        .btn-secondary {
+            background: rgba(107, 114, 128, 0.1);
+            backdrop-filter: blur(10px);
+            transition: all 0.2s ease;
+            border-radius: 8px;
+        }
+        
+        .btn-secondary:hover {
+            background: rgba(107, 114, 128, 0.2);
+            transform: translateY(-1px);
+        }
+        
+        #document-editor:empty::before {
+            content: attr(data-placeholder);
+            color: #9ca3af;
+            font-style: italic;
         }
         
         .document-toolbar {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            padding: 8px;
             transition: all 0.3s ease;
         }
         
-        .document-toolbar.hidden {
-            opacity: 0;
-            transform: translateY(-10px);
-            pointer-events: none;
+        .format-btn {
+            border-radius: 8px;
+            transition: all 0.2s ease;
+        }
+        
+        .format-btn:hover {
+            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
+            transform: scale(1.1);
+        }
+        
+        .card-hover {
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .card-hover:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
+        }
+        
+        input[type="range"] {
+            -webkit-appearance: none;
+            appearance: none;
+            background: transparent;
+            cursor: pointer;
+        }
+        
+        input[type="range"]::-webkit-slider-track {
+            background: #e2e8f0;
+            height: 8px;
+            border-radius: 5px;
+        }
+        
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        input[type="range"]::-moz-range-track {
+            background: #e2e8f0;
+            height: 8px;
+            border-radius: 5px;
+        }
+        
+        input[type="range"]::-moz-range-thumb {
+            height: 20px;
+            width: 20px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
     </style>
 </head>
-<body class="min-h-screen bg-gray-50">
-    <div class="container mx-auto px-4 py-8 max-w-6xl">
+<body class="min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
         <header class="mb-8 text-center">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2">HD TTS Document Reader</h1>
-            <p class="text-lg text-gray-600">Natural human voices with long context support using Google's free HD voices</p>
-            <div class="mt-4 flex justify-center gap-4">
-                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+            <h1 class="text-5xl font-bold text-gray-800 mb-4">HD TTS Document Reader</h1>
+            <p class="text-xl text-gray-600">Natural human voices with cloud storage powered by Val Town</p>
+            <div class="mt-6 flex justify-center gap-4 flex-wrap">
+                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                     <i class="fas fa-microphone mr-2"></i> HD Voices
                 </span>
-                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
+                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
                     <i class="fas fa-cloud mr-2"></i> Val Town Storage
                 </span>
-                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-green-100 text-green-800">
                     <i class="fas fa-bolt mr-2"></i> Serverless
                 </span>
             </div>
@@ -185,40 +317,40 @@
 
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
             <!-- Document Input Section -->
-            <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
-                <div class="p-6">
-                    <div class="flex justify-between items-center mb-4">
-                        <h2 class="text-2xl font-semibold text-gray-800">Document Reader</h2>
-                        <div class="flex space-x-2">
-                            <button id="settings-toggle" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
-                                <i class="fas fa-cog"></i>
+            <div class="lg:col-span-2 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
+                <div class="p-8">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-3xl font-semibold text-gray-800">Document Reader</h2>
+                        <div class="flex space-x-3">
+                            <button id="settings-toggle" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary">
+                                <i class="fas fa-cog text-lg"></i>
                             </button>
-                            <button id="fullscreen-toggle" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100">
-                                <i class="fas fa-expand"></i>
+                            <button id="fullscreen-toggle" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary">
+                                <i class="fas fa-expand text-lg"></i>
                             </button>
                         </div>
                     </div>
                     
-                    <div id="settings-panel" class="settings-panel mb-6 bg-gray-50 p-4 rounded-lg">
-                        <div class="flex border-b mb-4">
-                            <button class="tab-btn tab-active px-4 py-2" data-tab="formatting">Formatting</button>
-                            <button class="tab-btn px-4 py-2" data-tab="pronunciation">Pronunciation</button>
-                            <button class="tab-btn px-4 py-2" data-tab="advanced">Advanced</button>
+                    <div id="settings-panel" class="settings-panel mb-6 glass-effect p-6 rounded-xl">
+                        <div class="flex border-b mb-6">
+                            <button class="tab-btn tab-active px-6 py-3 font-medium transition-all" data-tab="formatting">Formatting</button>
+                            <button class="tab-btn px-6 py-3 font-medium transition-all" data-tab="pronunciation">Pronunciation</button>
+                            <button class="tab-btn px-6 py-3 font-medium transition-all" data-tab="advanced">Advanced</button>
                         </div>
                         
                         <div id="formatting-tab" class="tab-content">
-                            <div class="grid grid-cols-2 gap-4">
+                            <div class="grid grid-cols-2 gap-6">
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Paragraph Spacing</label>
-                                    <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
+                                    <label class="block text-sm font-medium text-gray-700 mb-2">Paragraph Spacing</label>
+                                    <select class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                         <option>Single</option>
                                         <option>1.5 lines</option>
                                         <option>Double</option>
                                     </select>
                                 </div>
                                 <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label>
-                                    <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
+                                    <label class="block text-sm font-medium text-gray-700 mb-2">Font Size</label>
+                                    <select class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                         <option>Small</option>
                                         <option selected>Medium</option>
                                         <option>Large</option>
@@ -226,19 +358,19 @@
                                     </select>
                                 </div>
                             </div>
-                            <div class="mt-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Text Alignment</label>
-                                <div class="flex space-x-2">
-                                    <button class="p-2 border rounded-md hover:bg-gray-100">
+                            <div class="mt-6">
+                                <label class="block text-sm font-medium text-gray-700 mb-3">Text Alignment</label>
+                                <div class="flex space-x-3">
+                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="left">
                                         <i class="fas fa-align-left"></i>
                                     </button>
-                                    <button class="p-2 border rounded-md hover:bg-gray-100">
+                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="center">
                                         <i class="fas fa-align-center"></i>
                                     </button>
-                                    <button class="p-2 border rounded-md hover:bg-gray-100">
+                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="right">
                                         <i class="fas fa-align-right"></i>
                                     </button>
-                                    <button class="p-2 border rounded-md hover:bg-gray-100">
+                                    <button class="p-3 border rounded-lg hover:bg-gray-100 transition-all" data-align="justify">
                                         <i class="fas fa-align-justify"></i>
                                     </button>
                                 </div>
@@ -246,100 +378,101 @@
                         </div>
                         
                         <div id="pronunciation-tab" class="tab-content hidden">
-                            <div class="mb-4">
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Phonetic Adjustments</label>
-                                <div class="space-y-2">
+                            <div class="mb-6">
+                                <label class="block text-sm font-medium text-gray-700 mb-3">Phonetic Adjustments</label>
+                                <div class="space-y-3">
                                     <div class="flex items-center">
-                                        <input type="checkbox" id="phonetic-help" class="mr-2">
-                                        <label for="phonetic-help" class="text-sm">Enable phonetic assistance</label>
+                                        <input type="checkbox" id="phonetic-help" class="mr-3 rounded focus:ring-blue-500">
+                                        <label for="phonetic-help" class="text-sm font-medium">Enable phonetic assistance</label>
                                     </div>
                                     <div class="flex items-center">
-                                        <input type="checkbox" id="auto-pronounce" class="mr-2" checked>
-                                        <label for="auto-pronounce" class="text-sm">Auto-correct pronunciation</label>
+                                        <input type="checkbox" id="auto-pronounce" class="mr-3 rounded focus:ring-blue-500" checked>
+                                        <label for="auto-pronounce" class="text-sm font-medium">Auto-correct pronunciation</label>
                                     </div>
                                 </div>
                             </div>
                             <div>
-                                <label class="block text-sm font-medium text-gray-700 mb-2">Custom Pronunciations</label>
-                                <div class="flex items-center mb-2">
-                                    <input type="text" placeholder="Word" class="border border-gray-300 rounded-md px-3 py-1 text-sm mr-2 w-32">
-                                    <input type="text" placeholder="Pronunciation" class="border border-gray-300 rounded-md px-3 py-1 text-sm mr-2 w-32">
-                                    <button class="text-blue-600 hover:text-blue-800 text-sm">
-                                        <i class="fas fa-plus"></i> Add
+                                <label class="block text-sm font-medium text-gray-700 mb-3">Custom Pronunciations</label>
+                                <div class="flex items-center mb-3">
+                                    <input type="text" id="custom-word" placeholder="Word" class="border border-gray-300 rounded-lg px-4 py-2 text-sm mr-3 flex-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <input type="text" id="custom-pronunciation" placeholder="Pronunciation" class="border border-gray-300 rounded-lg px-4 py-2 text-sm mr-3 flex-1 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <button id="add-pronunciation" class="btn-primary text-white px-4 py-2 rounded-lg">
+                                        <i class="fas fa-plus mr-1"></i> Add
                                     </button>
                                 </div>
-                                <div class="text-xs text-gray-500">
+                                <div class="text-xs text-gray-500 mb-3">
                                     Add custom pronunciations for specific words or names
                                 </div>
+                                <div id="pronunciation-list" class="space-y-2"></div>
                             </div>
                         </div>
                         
                         <div id="advanced-tab" class="tab-content hidden">
-                            <div class="mb-4">
+                            <div class="mb-6">
                                 <label class="block text-sm font-medium text-gray-700 mb-2">Audio Quality</label>
-                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
-                                    <option>Standard (16kHz)</option>
-                                    <option selected>High (24kHz)</option>
-                                    <option>HD (32kHz)</option>
+                                <select id="audio-quality" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <option value="16">Standard (16kHz)</option>
+                                    <option value="24" selected>High (24kHz)</option>
+                                    <option value="32">HD (32kHz)</option>
                                 </select>
                             </div>
-                            <div class="mb-4">
+                            <div class="mb-6">
                                 <label class="block text-sm font-medium text-gray-700 mb-2">Chunk Size</label>
-                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
-                                    <option>Small (better for slow connections)</option>
-                                    <option selected>Medium (balanced)</option>
-                                    <option>Large (fewer requests)</option>
+                                <select id="chunk-size" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <option value="small">Small (better for slow connections)</option>
+                                    <option value="medium" selected>Medium (balanced)</option>
+                                    <option value="large">Large (fewer requests)</option>
                                 </select>
                             </div>
                             <div>
                                 <label class="block text-sm font-medium text-gray-700 mb-2">Cache Duration</label>
-                                <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
-                                    <option>No caching</option>
-                                    <option selected>1 hour</option>
-                                    <option>1 day</option>
-                                    <option>1 week</option>
+                                <select id="cache-duration" class="w-full border border-gray-300 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                                    <option value="0">No caching</option>
+                                    <option value="3600" selected>1 hour</option>
+                                    <option value="86400">1 day</option>
+                                    <option value="604800">1 week</option>
                                 </select>
                             </div>
                         </div>
                     </div>
                     
-                    <div class="document-toolbar mb-2 flex flex-wrap gap-1">
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="bold" title="Bold">
+                    <div class="document-toolbar mb-4 flex flex-wrap gap-2">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="bold" title="Bold">
                             <i class="fas fa-bold"></i>
                         </button>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="italic" title="Italic">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="italic" title="Italic">
                             <i class="fas fa-italic"></i>
                         </button>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="underline" title="Underline">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="underline" title="Underline">
                             <i class="fas fa-underline"></i>
                         </button>
-                        <div class="w-px h-6 bg-gray-300 mx-1"></div>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="insertUnorderedList" title="Bullet List">
+                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="insertUnorderedList" title="Bullet List">
                             <i class="fas fa-list-ul"></i>
                         </button>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="insertOrderedList" title="Numbered List">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="insertOrderedList" title="Numbered List">
                             <i class="fas fa-list-ol"></i>
                         </button>
-                        <div class="w-px h-6 bg-gray-300 mx-1"></div>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="outdent" title="Decrease Indent">
+                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="outdent" title="Decrease Indent">
                             <i class="fas fa-outdent"></i>
                         </button>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="indent" title="Increase Indent">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="indent" title="Increase Indent">
                             <i class="fas fa-indent"></i>
                         </button>
-                        <div class="w-px h-6 bg-gray-300 mx-1"></div>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="createLink" title="Insert Link">
+                        <div class="w-px h-8 bg-gray-300 mx-2"></div>
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="createLink" title="Insert Link">
                             <i class="fas fa-link"></i>
                         </button>
-                        <button class="format-btn p-2 text-gray-700 hover:bg-gray-100 rounded" data-command="unlink" title="Remove Link">
+                        <button class="format-btn p-3 text-gray-700 hover:bg-gray-100" data-command="unlink" title="Remove Link">
                             <i class="fas fa-unlink"></i>
                         </button>
                     </div>
                     
-                    <div class="mb-4">
-                        <label for="document-text" class="block text-sm font-medium text-gray-700 mb-2">Document Text</label>
-                        <div class="document-container bg-gray-50 p-4 rounded-lg border border-gray-200">
-                            <div id="document-editor" class="min-h-[200px] outline-none" contenteditable="true" data-placeholder="Type or paste your text here..."></div>
+                    <div class="mb-6">
+                        <label for="document-text" class="block text-sm font-medium text-gray-700 mb-3">Document Text</label>
+                        <div class="document-container bg-gray-50 p-6 rounded-xl border border-gray-200">
+                            <div id="document-editor" class="min-h-[250px] outline-none" contenteditable="true" data-placeholder="Type or paste your text here..."></div>
                             <div id="document-content" class="hidden prose max-w-none"></div>
                         </div>
                     </div>
@@ -348,11 +481,11 @@
                         <div class="text-sm text-gray-500">
                             <span id="word-count">0</span> words • <span id="char-count">0</span> characters
                         </div>
-                        <div>
-                            <button id="clear-btn" class="text-gray-500 hover:text-gray-700 mr-3">
+                        <div class="flex gap-4">
+                            <button id="clear-btn" class="text-gray-500 hover:text-gray-700 font-medium">
                                 <i class="fas fa-trash-alt mr-1"></i> Clear
                             </button>
-                            <button id="spellcheck-btn" class="text-gray-500 hover:text-gray-700">
+                            <button id="spellcheck-btn" class="text-gray-500 hover:text-gray-700 font-medium">
                                 <i class="fas fa-spell-check mr-1"></i> Spellcheck
                             </button>
                         </div>
@@ -361,98 +494,98 @@
             </div>
             
             <!-- Voice Controls Section -->
-            <div class="bg-white rounded-xl shadow-md overflow-hidden">
-                <div class="p-6">
-                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">Voice Settings</h2>
+            <div class="glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
+                <div class="p-8">
+                    <h2 class="text-3xl font-semibold text-gray-800 mb-6">Voice Settings</h2>
                     
-                    <div class="mb-6">
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Select Language & Voice</label>
-                        <div class="space-y-3">
-                            <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-blue-50 border-gray-200" data-voice="en-US-Wavenet-A" data-lang="en-US">
+                    <div class="mb-8">
+                        <label class="block text-sm font-medium text-gray-700 mb-4">Select Language & Voice</label>
+                        <div class="space-y-4">
+                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-blue-50 border-gray-200" data-voice="en-US-Wavenet-A" data-lang="en-US">
                                 <div class="flex items-center">
                                     <span class="language-flag flag-us"></span>
                                     <div class="flex-1">
-                                        <div class="font-medium">James (Standard)</div>
-                                        <div class="text-xs text-gray-500">Male • Wavenet A</div>
+                                        <div class="font-medium text-lg">James (Standard)</div>
+                                        <div class="text-sm text-gray-500">Male • Wavenet A</div>
                                     </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                 </div>
                             </div>
-                            <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-purple-50 border-gray-200" data-voice="en-US-Wavenet-F" data-lang="en-US">
+                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-purple-50 border-gray-200" data-voice="en-US-Wavenet-F" data-lang="en-US">
                                 <div class="flex items-center">
                                     <span class="language-flag flag-us"></span>
                                     <div class="flex-1">
-                                        <div class="font-medium">Emily (Standard)</div>
-                                        <div class="text-xs text-gray-500">Female • Wavenet F</div>
+                                        <div class="font-medium text-lg">Emily (Standard)</div>
+                                        <div class="text-sm text-gray-500">Female • Wavenet F</div>
                                     </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                 </div>
                             </div>
-                            <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-green-50 border-gray-200" data-voice="en-GB-Wavenet-B" data-lang="en-GB">
+                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-green-50 border-gray-200" data-voice="en-GB-Wavenet-B" data-lang="en-GB">
                                 <div class="flex items-center">
                                     <span class="language-flag flag-uk"></span>
                                     <div class="flex-1">
-                                        <div class="font-medium">Oliver (British)</div>
-                                        <div class="text-xs text-gray-500">Male • Wavenet B</div>
+                                        <div class="font-medium text-lg">Oliver (British)</div>
+                                        <div class="text-sm text-gray-500">Male • Wavenet B</div>
                                     </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                 </div>
                             </div>
-                            <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-pink-50 border-gray-200" data-voice="en-AU-Wavenet-A" data-lang="en-AU">
+                            <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-pink-50 border-gray-200" data-voice="en-AU-Wavenet-A" data-lang="en-AU">
                                 <div class="flex items-center">
                                     <span class="language-flag flag-au"></span>
                                     <div class="flex-1">
-                                        <div class="font-medium">Charlotte (Australian)</div>
-                                        <div class="text-xs text-gray-500">Female • Wavenet A</div>
+                                        <div class="font-medium text-lg">Charlotte (Australian)</div>
+                                        <div class="text-sm text-gray-500">Female • Wavenet A</div>
                                     </div>
-                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                    <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                 </div>
                             </div>
-                            <button id="show-more-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-2">
+                            <button id="show-more-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-3 font-medium">
                                 <i class="fas fa-chevron-down mr-1"></i> Show More Voices
                             </button>
-                            <div id="more-voices" class="hidden space-y-3">
-                                <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-yellow-50 border-gray-200" data-voice="en-IN-Wavenet-A" data-lang="en-IN">
+                            <div id="more-voices" class="hidden space-y-4">
+                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-yellow-50 border-gray-200" data-voice="en-IN-Wavenet-A" data-lang="en-IN">
                                     <div class="flex items-center">
                                         <span class="language-flag flag-in"></span>
                                         <div class="flex-1">
-                                            <div class="font-medium">Arjun (Indian)</div>
-                                            <div class="text-xs text-gray-500">Male • Wavenet A</div>
+                                            <div class="font-medium text-lg">Arjun (Indian)</div>
+                                            <div class="text-sm text-gray-500">Male • Wavenet A</div>
                                         </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                     </div>
                                 </div>
-                                <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-red-50 border-gray-200" data-voice="en-ZA-Wavenet-A" data-lang="en-ZA">
+                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-red-50 border-gray-200" data-voice="en-ZA-Wavenet-A" data-lang="en-ZA">
                                     <div class="flex items-center">
                                         <span class="language-flag flag-za"></span>
                                         <div class="flex-1">
-                                            <div class="font-medium">Lebo (South African)</div>
-                                            <div class="text-xs text-gray-500">Female • Wavenet A</div>
+                                            <div class="font-medium text-lg">Lebo (South African)</div>
+                                            <div class="text-sm text-gray-500">Female • Wavenet A</div>
                                         </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                     </div>
                                 </div>
-                                <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-indigo-50 border-gray-200" data-voice="en-IE-Wavenet-A" data-lang="en-IE">
+                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-indigo-50 border-gray-200" data-voice="en-IE-Wavenet-A" data-lang="en-IE">
                                     <div class="flex items-center">
                                         <span class="language-flag flag-ie"></span>
                                         <div class="flex-1">
-                                            <div class="font-medium">Connor (Irish)</div>
-                                            <div class="text-xs text-gray-500">Male • Wavenet A</div>
+                                            <div class="font-medium text-lg">Connor (Irish)</div>
+                                            <div class="text-sm text-gray-500">Male • Wavenet A</div>
                                         </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                     </div>
                                 </div>
-                                <div class="voice-option cursor-pointer p-3 border rounded-lg transition bg-gray-50 hover:bg-teal-50 border-gray-200" data-voice="en-NZ-Wavenet-A" data-lang="en-NZ">
+                                <div class="voice-option cursor-pointer p-4 border rounded-lg transition bg-gray-50 hover:bg-teal-50 border-gray-200" data-voice="en-NZ-Wavenet-A" data-lang="en-NZ">
                                     <div class="flex items-center">
                                         <span class="language-flag flag-nz"></span>
                                         <div class="flex-1">
-                                            <div class="font-medium">Tiana (New Zealand)</div>
-                                            <div class="text-xs text-gray-500">Female • Wavenet A</div>
+                                            <div class="font-medium text-lg">Tiana (New Zealand)</div>
+                                            <div class="text-sm text-gray-500">Female • Wavenet A</div>
                                         </div>
-                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check"></i>
+                                        <i class="fas fa-check text-blue-600 opacity-0 voice-check text-xl"></i>
                                     </div>
                                 </div>
-                                <button id="show-less-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-2">
+                                <button id="show-less-voices" class="w-full text-center text-blue-600 hover:text-blue-800 text-sm py-3 font-medium">
                                     <i class="fas fa-chevron-up mr-1"></i> Show Fewer Voices
                                 </button>
                             </div>
@@ -460,63 +593,65 @@
                     </div>
                     
                     <div class="mb-6">
-                        <label for="voice-speed" class="block text-sm font-medium text-gray-700 mb-2">Speed: <span id="speed-value">1.0</span>x</label>
-                        <input type="range" id="voice-speed" min="0.5" max="2" step="0.1" value="1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                        <label for="voice-speed" class="block text-sm font-medium text-gray-700 mb-3">Speed: <span id="speed-value" class="font-semibold">1.0</span>x</label>
+                        <input type="range" id="voice-speed" min="0.5" max="2" step="0.1" value="1" class="w-full cursor-pointer">
                     </div>
                     
-                    <div class="mb-6">
-                        <label for="voice-pitch" class="block text-sm font-medium text-gray-700 mb-2">Pitch: <span id="pitch-value">0</span></label>
-                        <input type="range" id="voice-pitch" min="-20" max="20" step="1" value="0" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                    <div class="mb-8">
+                        <label for="voice-pitch" class="block text-sm font-medium text-gray-700 mb-3">Pitch: <span id="pitch-value" class="font-semibold">0</span></label>
+                        <input type="range" id="voice-pitch" min="-20" max="20" step="1" value="0" class="w-full cursor-pointer">
                     </div>
                     
-                    <div class="mb-6">
-                        <label class="block text-sm font-medium text-gray-700 mb-2">Reading Mode</label>
-                        <div class="grid grid-cols-3 gap-2">
-                            <button class="reading-mode-btn py-2 px-3 border rounded-lg bg-blue-50 border-blue-200 text-blue-700" data-mode="normal">
-                                <i class="fas fa-book-open mr-1"></i> Normal
+                    <div class="mb-8">
+                        <label class="block text-sm font-medium text-gray-700 mb-4">Reading Mode</label>
+                        <div class="grid grid-cols-1 gap-3">
+                            <button class="reading-mode-btn py-3 px-4 border rounded-lg bg-blue-50 border-blue-200 text-blue-700 font-medium" data-mode="normal">
+                                <i class="fas fa-book-open mr-2"></i> Normal
                             </button>
-                            <button class="reading-mode-btn py-2 px-3 border rounded-lg border-gray-200 hover:bg-gray-50" data-mode="word">
-                                <i class="fas fa-font mr-1"></i> Word-by-word
+                            <button class="reading-mode-btn py-3 px-4 border rounded-lg border-gray-200 hover:bg-gray-50 font-medium" data-mode="word">
+                                <i class="fas fa-font mr-2"></i> Word-by-word
                             </button>
-                            <button class="reading-mode-btn py-2 px-3 border rounded-lg border-gray-200 hover:bg-gray-50" data-mode="sentence">
-                                <i class="fas fa-align-left mr-1"></i> Sentence
+                            <button class="reading-mode-btn py-3 px-4 border rounded-lg border-gray-200 hover:bg-gray-50 font-medium" data-mode="sentence">
+                                <i class="fas fa-align-left mr-2"></i> Sentence
                             </button>
                         </div>
                     </div>
                     
-                    <div class="flex space-x-3 mb-4">
-                        <button id="play-btn" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition flex items-center justify-center">
-                            <i class="fas fa-play mr-2"></i> Play
-                        </button>
-                        <button id="pause-btn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition flex items-center justify-center" disabled>
-                            <i class="fas fa-pause mr-2"></i> Pause
-                        </button>
-                        <button id="stop-btn" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-3 px-4 rounded-lg transition flex items-center justify-center" disabled>
-                            <i class="fas fa-stop mr-2"></i> Stop
+                    <div class="flex flex-col gap-4 mb-6">
+                        <button id="play-btn" class="btn-primary text-white font-semibold py-4 px-6 rounded-lg transition flex items-center justify-center text-lg">
+                            <i class="fas fa-play mr-3"></i> Play
                         </button>
+                        <div class="flex gap-4">
+                            <button id="pause-btn" class="flex-1 btn-secondary text-gray-800 font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center" disabled>
+                                <i class="fas fa-pause mr-2"></i> Pause
+                            </button>
+                            <button id="stop-btn" class="flex-1 btn-secondary text-gray-800 font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center" disabled>
+                                <i class="fas fa-stop mr-2"></i> Stop
+                            </button>
+                        </div>
                     </div>
                     
-                    <div class="progress-bar mb-1">
+                    <div class="progress-bar mb-2">
                         <div id="progress-fill" class="progress-fill"></div>
                     </div>
                     
-                    <div class="flex justify-between text-sm text-gray-500 mb-4">
-                        <span id="current-time">0:00</span>
-                        <span id="total-time">0:00</span>
+                    <div class="flex justify-between text-sm text-gray-500 mb-6">
+                        <span id="current-time" class="font-semibold">0:00</span>
+                        <span id="total-time" class="font-semibold">0:00</span>
                     </div>
                     
                     <div class="flex justify-between">
-                        <button id="skip-back-btn" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Skip Back 15s">
-                            <i class="fas fa-backward"></i>
+                        <button id="skip-back-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Skip Back 15s">
+                            <i class="fas fa-backward text-lg"></i>
                         </button>
-                        <button id="rewind-btn" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Rewind">
-                            <i class="fas fa-undo"></i>
+                        <button id="rewind-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Rewind">
+                            <i class="fas fa-undo text-lg"></i>
                         </button>
-                        <button id="forward-btn" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Forward">
-                            <i class="fas fa-redo"></i>
+                        <button id="forward-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Forward">
+                            <i class="fas fa-redo text-lg"></i>
                         </button>
-                        <button id="skip-forward-btn" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Skip Forward 15s">
-                            <i class="fas fa-forward"></i>
+                        <button id="skip-forward-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Skip Forward 15s">
+                            <i class="fas fa-forward text-lg"></i>
                         </button>
                     </div>
                 </div>
@@ -524,16 +659,16 @@
         </div>
         
         <!-- Audio Visualization -->
-        <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
-            <div class="p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-2xl font-semibold text-gray-800">Audio Visualization</h2>
-                    <div class="flex items-center space-x-2">
-                        <button id="visualization-mode" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Change Visualization">
-                            <i class="fas fa-sliders-h"></i>
+        <div class="mt-8 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
+            <div class="p-8">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-3xl font-semibold text-gray-800">Audio Visualization</h2>
+                    <div class="flex items-center space-x-3">
+                        <button id="visualization-mode" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Change Visualization">
+                            <i class="fas fa-sliders-h text-lg"></i>
                         </button>
-                        <button id="download-audio" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Download Audio">
-                            <i class="fas fa-download"></i>
+                        <button id="download-audio" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Download Audio">
+                            <i class="fas fa-download text-lg"></i>
                         </button>
                     </div>
                 </div>
@@ -549,38 +684,33 @@
                     <div class="waveform-bar" style="--delay: 9; height: 30px;"></div>
                     <div class="waveform-bar" style="--delay: 10; height: 20px;"></div>
                 </div>
-                <div class="mt-4 flex justify-center">
-                    <button id="record-voice-btn" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center">
-                        <i class="fas fa-microphone mr-2"></i> Record Your Voice
-                    </button>
-                </div>
             </div>
         </div>
         
         <!-- Saved Documents Section -->
-        <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden">
-            <div class="p-6">
-                <div class="flex justify-between items-center mb-4">
-                    <h2 class="text-2xl font-semibold text-gray-800">Saved Documents</h2>
-                    <div class="flex space-x-2">
-                        <button id="refresh-docs-btn" class="p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100" title="Refresh">
-                            <i class="fas fa-sync-alt"></i>
+        <div class="mt-8 glass-effect rounded-2xl shadow-xl overflow-hidden card-hover">
+            <div class="p-8">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-3xl font-semibold text-gray-800">Saved Documents</h2>
+                    <div class="flex space-x-3">
+                        <button id="refresh-docs-btn" class="p-3 text-gray-500 hover:text-gray-700 rounded-full btn-secondary" title="Refresh">
+                            <i class="fas fa-sync-alt text-lg"></i>
                         </button>
-                        <button id="save-doc-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition">
+                        <button id="save-doc-btn" class="btn-primary text-white font-semibold py-3 px-6 rounded-lg transition">
                             <i class="fas fa-save mr-2"></i> Save Current
                         </button>
                     </div>
                 </div>
                 
-                <div class="mb-4 flex items-center">
+                <div class="mb-6 flex items-center">
                     <div class="relative flex-1 max-w-md">
-                        <input type="text" id="search-docs" placeholder="Search documents..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500">
-                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                        <input type="text" id="search-docs" placeholder="Search documents..." class="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                             <i class="fas fa-search text-gray-400"></i>
                         </div>
                     </div>
-                    <button id="filter-docs-btn" class="ml-2 p-2 text-gray-500 hover:text-gray-700 rounded-lg hover:bg-gray-100">
-                        <i class="fas fa-filter"></i>
+                    <button id="filter-docs-btn" class="ml-4 p-3 text-gray-500 hover:text-gray-700 rounded-lg btn-secondary">
+                        <i class="fas fa-filter text-lg"></i>
                     </button>
                 </div>
                 
@@ -588,27 +718,27 @@
                     <table class="min-w-full divide-y divide-gray-200">
                         <thead class="bg-gray-50">
                             <tr>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                     <button class="flex items-center sort-btn" data-sort="title">
-                                        Title <i class="fas fa-sort ml-1"></i>
+                                        Title <i class="fas fa-sort ml-2"></i>
                                     </button>
                                 </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                     <button class="flex items-center sort-btn" data-sort="date">
-                                        Date <i class="fas fa-sort ml-1"></i>
+                                        Date <i class="fas fa-sort ml-2"></i>
                                     </button>
                                 </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                     <button class="flex items-center sort-btn" data-sort="length">
-                                        Length <i class="fas fa-sort ml-1"></i>
+                                        Length <i class="fas fa-sort ml-2"></i>
                                     </button>
                                 </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                     <button class="flex items-center sort-btn" data-sort="language">
-                                        Language <i class="fas fa-sort ml-1"></i>
+                                        Language <i class="fas fa-sort ml-2"></i>
                                     </button>
                                 </th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+                                <th scope="col" class="px-6 py-4 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Actions</th>
                             </tr>
                         </thead>
                         <tbody id="saved-docs-list" class="bg-white divide-y divide-gray-200">
@@ -619,15 +749,15 @@
                     </table>
                 </div>
                 
-                <div class="mt-4 flex justify-between items-center">
+                <div class="mt-6 flex justify-between items-center">
                     <div class="text-sm text-gray-500">
-                        Showing <span id="showing-from">1</span> to <span id="showing-to">0</span> of <span id="total-docs">0</span> documents
+                        Showing <span id="showing-from" class="font-semibold">1</span> to <span id="showing-to" class="font-semibold">0</span> of <span id="total-docs" class="font-semibold">0</span> documents
                     </div>
-                    <div class="flex space-x-2">
-                        <button id="prev-page-btn" class="px-3 py-1 border rounded-lg disabled:opacity-50" disabled>
+                    <div class="flex space-x-3">
+                        <button id="prev-page-btn" class="px-4 py-2 border rounded-lg disabled:opacity-50 btn-secondary" disabled>
                             <i class="fas fa-chevron-left"></i>
                         </button>
-                        <button id="next-page-btn" class="px-3 py-1 border rounded-lg disabled:opacity-50" disabled>
+                        <button id="next-page-btn" class="px-4 py-2 border rounded-lg disabled:opacity-50 btn-secondary" disabled>
                             <i class="fas fa-chevron-right"></i>
                         </button>
                     </div>
@@ -638,12 +768,12 @@
 
     <!-- Modals -->
     <div id="url-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Load Document from URL</h3>
-            <input type="text" id="document-url" placeholder="Enter document URL" class="w-full p-3 border border-gray-300 rounded-lg mb-4">
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-2">Document Type</label>
-                <select class="w-full border border-gray-300 rounded-md px-3 py-2">
+        <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4">
+            <h3 class="text-2xl font-semibold mb-6">Load Document from URL</h3>
+            <input type="text" id="document-url" placeholder="Enter document URL" class="w-full p-4 border border-gray-300 rounded-lg mb-6 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-700 mb-3">Document Type</label>
+                <select class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                     <option>Auto-detect</option>
                     <option>Plain Text</option>
                     <option>Web Page</option>
@@ -651,78 +781,46 @@
                     <option>Word Document</option>
                 </select>
             </div>
-            <div class="flex justify-end space-x-3">
-                <button id="cancel-url-btn" class="px-4 py-2 border border-gray-300 rounded-lg">Cancel</button>
-                <button id="load-url-btn" class="px-4 py-2 bg-blue-600 text-white rounded-lg">Load</button>
+            <div class="flex justify-end space-x-4">
+                <button id="cancel-url-btn" class="px-6 py-3 border border-gray-300 rounded-lg btn-secondary font-medium">Cancel</button>
+                <button id="load-url-btn" class="px-6 py-3 btn-primary text-white rounded-lg font-medium">Load</button>
             </div>
         </div>
     </div>
     
     <div id="save-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Save Document</h3>
-            <input type="text" id="document-title" placeholder="Document title" class="w-full p-3 border border-gray-300 rounded-lg mb-4">
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-2">Language</label>
-                <select class="w-full border border-gray-300 rounded-md px-3 py-2">
-                    <option>English (United States)</option>
-                    <option>English (United Kingdom)</option>
-                    <option>English (Australia)</option>
-                    <option>English (India)</option>
+        <div class="glass-effect rounded-2xl p-8 max-w-md w-full mx-4">
+            <h3 class="text-2xl font-semibold mb-6">Save Document</h3>
+            <input type="text" id="document-title" placeholder="Document title" class="w-full p-4 border border-gray-300 rounded-lg mb-6 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-700 mb-3">Language</label>
+                <select id="save-language" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option value="en-US">English (United States)</option>
+                    <option value="en-GB">English (United Kingdom)</option>
+                    <option value="en-AU">English (Australia)</option>
+                    <option value="en-IN">English (India)</option>
                 </select>
             </div>
-            <div class="mb-4">
-                <label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
-                <input type="text" id="document-tags" placeholder="Add tags (comma separated)" class="w-full p-3 border border-gray-300 rounded-lg">
-            </div>
-            <div class="flex justify-end space-x-3">
-                <button id="cancel-save-btn" class="px-4 py-2 border border-gray-300 rounded-lg">Cancel</button>
-                <button id="confirm-save-btn" class="px-4 py-2 bg-green-600 text-white rounded-lg">Save</button>
-            </div>
-        </div>
-    </div>
-    
-    <div id="record-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-        <div class="bg-white rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Record Your Voice</h3>
-            <div class="text-center mb-6">
-                <div class="w-32 h-32 mx-auto rounded-full bg-red-100 flex items-center justify-center mb-4">
-                    <i class="fas fa-microphone text-red-600 text-4xl"></i>
-                </div>
-                <div id="record-status" class="text-lg font-medium">Ready to record</div>
-                <div id="record-timer" class="text-2xl font-bold my-2">00:00</div>
-                <div class="text-sm text-gray-500">Speak clearly into your microphone</div>
-            </div>
-            <div class="flex justify-center space-x-4">
-                <button id="start-record-btn" class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center">
-                    <i class="fas fa-circle mr-2"></i> Start
-                </button>
-                <button id="stop-record-btn" class="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 rounded-lg flex items-center" disabled>
-                    <i class="fas fa-stop mr-2"></i> Stop
-                </button>
-                <button id="play-record-btn" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center" disabled>
-                    <i class="fas fa-play mr-2"></i> Play
-                </button>
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-700 mb-3">Tags</label>
+                <input type="text" id="document-tags" placeholder="Add tags (comma separated)" class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
             </div>
-            <div class="mt-6">
-                <label class="block text-sm font-medium text-gray-700 mb-2">Save Recording As</label>
-                <div class="flex">
-                    <input type="text" id="recording-name" placeholder="Recording name" class="flex-1 p-2 border border-gray-300 rounded-l-lg">
-                    <button id="save-record-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-r-lg">
-                        <i class="fas fa-save mr-1"></i> Save
-                    </button>
-                </div>
-            </div>
-            <div class="mt-4 flex justify-end">
-                <button id="close-record-btn" class="px-4 py-2 text-gray-600 hover:text-gray-800">
-                    Close
-                </button>
+            <div class="flex justify-end space-x-4">
+                <button id="cancel-save-btn" class="px-6 py-3 border border-gray-300 rounded-lg btn-secondary font-medium">Cancel</button>
+                <button id="confirm-save-btn" class="px-6 py-3 bg-green-500 hover:bg-green-600 text-white rounded-lg font-medium">Save</button>
             </div>
         </div>
     </div>
 
+    <!-- Notification Container -->
+    <div id="notification-container" class="fixed top-20 right-20 z-50"></div>
+
     <script>
         document.addEventListener('DOMContentLoaded', function() {
+            // Val Town configuration
+            const VAL_TOWN_USERNAME = 'toowired';
+            const VAL_TOWN_API_URL = `https://${VAL_TOWN_USERNAME}.val.run`;
+            
             // DOM Elements
             const documentEditor = document.getElementById('document-editor');
             const documentContent = document.getElementById('document-content');
@@ -758,7 +856,6 @@
             const skipForwardBtn = document.getElementById('skip-forward-btn');
             const visualizationMode = document.getElementById('visualization-mode');
             const downloadAudio = document.getElementById('download-audio');
-            const recordVoiceBtn = document.getElementById('record-voice-btn');
             const savedDocsList = document.getElementById('saved-docs-list');
             const saveDocBtn = document.getElementById('save-doc-btn');
             const refreshDocsBtn = document.getElementById('refresh-docs-btn');
@@ -778,15 +875,12 @@
             const documentTitle = document.getElementById('document-title');
             const cancelSaveBtn = document.getElementById('cancel-save-btn');
             const confirmSaveBtn = document.getElementById('confirm-save-btn');
-            const recordModal = document.getElementById('record-modal');
-            const startRecordBtn = document.getElementById('start-record-btn');
-            const stopRecordBtn = document.getElementById('stop-record-btn');
-            const playRecordBtn = document.getElementById('play-record-btn');
-            const saveRecordBtn = document.getElementById('save-record-btn');
-            const closeRecordBtn = document.getElementById('close-record-btn');
-            const recordStatus = document.getElementById('record-status');
-            const recordTimer = document.getElementById('record-timer');
-            const recordingName = document.getElementById('recording-name');
+            const notificationContainer = document.getElementById('notification-container');
+            const saveLanguage = document.getElementById('save-language');
+            const addPronunciationBtn = document.getElementById('add-pronunciation');
+            const customWord = document.getElementById('custom-word');
+            const customPronunciation = document.getElementById('custom-pronunciation');
+            const pronunciationList = document.getElementById('pronunciation-list');
             
             // State variables
             let selectedVoice = 'en-US-Wavenet-A';
@@ -800,19 +894,20 @@
             const docsPerPage = 5;
             let sortField = 'date';
             let sortDirection = 'desc';
-            let isRecording = false;
-            let mediaRecorder;
-            let audioChunks = [];
-            let recordStartTime;
-            let recordInterval;
             let isFullscreen = false;
             let documentToolbarVisible = true;
+            let customPronunciations = new Map();
+            let readingMode = 'normal';
+            let currentSentenceIndex = 0;
+            let currentWordIndex = 0;
+            let resumePosition = 0;
             
             // Initialize
             updateCounts();
             loadSavedDocuments();
             setupDocumentEditor();
             setupVoiceOptions();
+            loadCustomPronunciations();
             
             // Event Listeners
             documentEditor.addEventListener('input', updateCounts);
@@ -828,7 +923,14 @@
             formatBtns.forEach(btn => {
                 btn.addEventListener('click', () => {
                     const command = btn.dataset.command;
-                    document.execCommand(command, false, null);
+                    if (command === 'createLink') {
+                        const url = prompt('Enter the URL:');
+                        if (url) {
+                            document.execCommand(command, false, url);
+                        }
+                    } else {
+                        document.execCommand(command, false, null);
+                    }
                     documentEditor.focus();
                 });
             });
@@ -871,6 +973,7 @@
                     });
                     btn.classList.add('bg-blue-50', 'border-blue-200', 'text-blue-700');
                     btn.classList.remove('border-gray-200', 'hover:bg-gray-50');
+                    readingMode = btn.dataset.mode;
                 });
             });
             
@@ -881,7 +984,6 @@
             
             visualizationMode.addEventListener('click', changeVisualizationMode);
             downloadAudio.addEventListener('click', downloadAudioFile);
-            recordVoiceBtn.addEventListener('click', showRecordModal);
             
             saveDocBtn.addEventListener('click', showSaveModal);
             refreshDocsBtn.addEventListener('click', loadSavedDocuments);
@@ -921,11 +1023,7 @@
             cancelSaveBtn.addEventListener('click', () => saveModal.classList.add('hidden'));
             confirmSaveBtn.addEventListener('click', saveCurrentDocument);
             
-            startRecordBtn.addEventListener('click', startRecording);
-            stopRecordBtn.addEventListener('click', stopRecording);
-            playRecordBtn.addEventListener('click', playRecording);
-            saveRecordBtn.addEventListener('click', saveRecording);
-            closeRecordBtn.addEventListener('click', () => recordModal.classList.add('hidden'));
+            addPronunciationBtn.addEventListener('click', addCustomPronunciation);
             
             // Functions
             function updateCounts() {
@@ -938,25 +1036,11 @@
             
             function setupDocumentEditor() {
                 documentEditor.addEventListener('keydown', (e) => {
-                    // Handle tab key for indentation
                     if (e.key === 'Tab') {
                         e.preventDefault();
                         document.execCommand('indent');
                     }
                 });
-                
-                // Show placeholder when empty
-                documentEditor.addEventListener('focus', () => {
-                    if (documentEditor.innerText === '') {
-                        documentEditor.dataset.placeholder = documentEditor.getAttribute('data-placeholder');
-                    }
-                });
-                
-                documentEditor.addEventListener('blur', () => {
-                    if (documentEditor.innerText === '') {
-                        documentEditor.removeAttribute('data-placeholder');
-                    }
-                });
             }
             
             function showDocumentToolbar() {
@@ -978,6 +1062,7 @@
             function toggleSpellcheck() {
                 documentEditor.spellcheck = !documentEditor.spellcheck;
                 spellcheckBtn.classList.toggle('text-blue-600');
+                showNotification(documentEditor.spellcheck ? 'Spellcheck enabled' : 'Spellcheck disabled');
             }
             
             function toggleSettingsPanel() {
@@ -986,16 +1071,16 @@
             }
             
             function toggleFullscreen() {
-                const docContainer = document.querySelector('.document-container');
+                const docContainer = document.querySelector('.lg\\:col-span-2');
                 
                 if (!isFullscreen) {
                     docContainer.requestFullscreen?.();
-                    docContainer.classList.add('max-h-[80vh]');
-                    fullscreenToggle.innerHTML = '<i class="fas fa-compress"></i>';
+                    docContainer.classList.add('fixed', 'inset-0', 'z-50', 'bg-white');
+                    fullscreenToggle.innerHTML = '<i class="fas fa-compress text-lg"></i>';
                 } else {
                     document.exitFullscreen?.();
-                    docContainer.classList.remove('max-h-[80vh]');
-                    fullscreenToggle.innerHTML = '<i class="fas fa-expand"></i>';
+                    docContainer.classList.remove('fixed', 'inset-0', 'z-50', 'bg-white');
+                    fullscreenToggle.innerHTML = '<i class="fas fa-expand text-lg"></i>';
                 }
                 
                 isFullscreen = !isFullscreen;
@@ -1020,16 +1105,47 @@
             }
             
             function setupVoiceOptions() {
-                // Select first voice by default
                 if (voiceOptions.length > 0) {
-                    voiceOptions[0].classList.add('border-blue-500', 'bg-blue-50');
+                    voiceOptions[0].classList.add('selected');
                     voiceOptions[0].querySelector('.voice-check').classList.remove('opacity-0');
                 }
+                
+                voiceOptions.forEach(option => {
+                    option.addEventListener('click', () => {
+                        voiceOptions.forEach(opt => {
+                            opt.classList.remove('selected');
+                            opt.querySelector('.voice-check').classList.add('opacity-0');
+                        });
+                        
+                        option.classList.add('selected');
+                        option.querySelector('.voice-check').classList.remove('opacity-0');
+                        
+                        selectedVoice = option.dataset.voice;
+                        selectedLanguage = option.dataset.lang;
+                        saveLanguage.value = selectedLanguage;
+                        
+                        showNotification(`Voice selected: ${option.querySelector('.font-medium').textContent}`);
+                    });
+                });
+            }
+            
+            function applyCustomPronunciations(text) {
+                let processedText = text;
+                customPronunciations.forEach((pronunciation, word) => {
+                    const regex = new RegExp(`\\b${word}\\b`, 'gi');
+                    processedText = processedText.replace(regex, pronunciation);
+                });
+                return processedText;
             }
             
             function playTTS() {
-                const text = documentEditor.innerText.trim();
-                if (!text) return;
+                let text = documentEditor.innerText.trim();
+                if (!text) {
+                    showNotification('Please enter some text to read', 'warning');
+                    return;
+                }
+                
+                text = applyCustomPronunciations(text);
                 
                 if (isPlaying && speechSynthesis.paused) {
                     speechSynthesis.resume();
@@ -1038,54 +1154,51 @@
                     return;
                 }
                 
-                // Stop any ongoing speech
                 stopTTS();
                 
-                // Create new utterance
-                utterance = new SpeechSynthesisUtterance(text);
-                utterance.voice = speechSynthesis.getVoices().find(v => v.voiceURI === selectedVoice);
-                utterance.rate = parseFloat(voiceSpeed.value);
-                utterance.pitch = parseFloat(voicePitch.value) / 10;
+                let textToSpeak = text;
+                if (readingMode === 'sentence') {
+                    const sentences = text.split(/[.!?]\s+/);
+                    if (currentSentenceIndex >= sentences.length) currentSentenceIndex = 0;
+                    textToSpeak = sentences[currentSentenceIndex];
+                } else if (readingMode === 'word') {
+                    const words = text.split(/\s+/);
+                    if (currentWordIndex >= words.length) currentWordIndex = 0;
+                    textToSpeak = words[currentWordIndex];
+                }
+                
+                utterance = new SpeechSynthesisUtterance(textToSpeak);
+                updateUtteranceSettings();
+                
+                const voices = speechSynthesis.getVoices();
+                const selectedVoiceObj = voices.find(v => 
+                    v.name.includes(selectedVoice) || 
+                    v.lang === selectedLanguage.replace('-', '_') ||
+                    v.lang === selectedLanguage
+                );
+                
+                if (selectedVoiceObj) {
+                    utterance.voice = selectedVoiceObj;
+                }
                 
-                // Highlight words as they're spoken
-                const words = text.split(/\s+/);
-                let currentWordIndex = 0;
+                let wordsSpoken = 0;
+                const totalWords = textToSpeak.split(/\s+/).length;
                 
                 utterance.onboundary = (event) => {
                     if (event.name === 'word') {
-                        // Remove previous highlight
-                        document.querySelectorAll('.highlight').forEach(el => {
-                            el.classList.remove('highlight');
-                        });
-                        
-                        // Find current word position
-                        const charIndex = event.charIndex;
-                        const word = words.find(w => {
-                            const index = text.indexOf(w, charIndex);
-                            return index <= charIndex && index + w.length > charIndex;
-                        });
-                        
-                        if (word) {
-                            // Create a temporary element to highlight the word
-                            const temp = document.createElement('span');
-                            temp.className = 'highlight';
-                            temp.textContent = word;
-                            
-                            // Replace the word in the textarea (simulated highlighting)
-                            const before = text.substring(0, charIndex);
-                            const after = text.substring(charIndex + word.length);
-                            documentContent.innerHTML = before + temp.outerHTML + after;
-                        }
-                        
-                        // Update progress
-                        const progress = (charIndex / text.length) * 100;
+                        wordsSpoken++;
+                        const progress = (wordsSpoken / totalWords) * 100;
                         progressFill.style.width = `${progress}%`;
                         
-                        // Update current time (simulated)
-                        const duration = text.length / 50; // Approximate duration in seconds
-                        const current = (progress / 100) * duration;
+                        const estimatedDuration = totalWords * 0.5;
+                        const current = (progress / 100) * estimatedDuration;
                         currentTime.textContent = formatTime(current);
-                        totalTime.textContent = formatTime(duration);
+                        totalTime.textContent = formatTime(estimatedDuration);
+                        
+                        if (readingMode === 'word') {
+                            const words = documentEditor.innerText.split(/\s+/);
+                            highlightText(documentEditor, words[currentWordIndex]);
+                        }
                     }
                 };
                 
@@ -1095,12 +1208,10 @@
                     pauseBtn.disabled = false;
                     stopBtn.disabled = false;
                     
-                    // Show document content for highlighting
-                    documentContent.innerHTML = text;
+                    documentContent.innerHTML = documentEditor.innerHTML;
                     documentEditor.classList.add('hidden');
                     documentContent.classList.remove('hidden');
                     
-                    // Animate waveform
                     animateWaveform();
                 };
                 
@@ -1110,27 +1221,39 @@
                     pauseBtn.disabled = true;
                     stopBtn.disabled = true;
                     
-                    // Reset progress
+                    if (readingMode === 'sentence') {
+                        currentSentenceIndex++;
+                        const sentences = text.split(/[.!?]\s+/);
+                        if (currentSentenceIndex < sentences.length) {
+                            setTimeout(() => playTTS(), 500);
+                            return;
+                        }
+                    } else if (readingMode === 'word') {
+                        currentWordIndex++;
+                        const words = text.split(/\s+/);
+                        if (currentWordIndex < words.length) {
+                            setTimeout(() => playTTS(), 300);
+                            return;
+                        }
+                    }
+                    
                     progressFill.style.width = '0%';
                     currentTime.textContent = '0:00';
-                    
-                    // Stop waveform animation
                     stopWaveformAnimation();
-                    
-                    // Show editor again
                     documentEditor.classList.remove('hidden');
                     documentContent.classList.add('hidden');
+                    currentSentenceIndex = 0;
+                    currentWordIndex = 0;
                 };
                 
                 utterance.onerror = (event) => {
                     console.error('SpeechSynthesis error:', event);
+                    showNotification('Speech synthesis error: ' + event.error, 'error');
                     isPlaying = false;
                     playBtn.disabled = false;
                     pauseBtn.disabled = true;
                     stopBtn.disabled = true;
                     stopWaveformAnimation();
-                    
-                    // Show editor again
                     documentEditor.classList.remove('hidden');
                     documentContent.classList.add('hidden');
                 };
@@ -1142,11 +1265,6 @@
                 if (utterance) {
                     utterance.rate = parseFloat(voiceSpeed.value);
                     utterance.pitch = parseFloat(voicePitch.value) / 10;
-                    
-                    if (isPlaying) {
-                        speechSynthesis.cancel();
-                        speechSynthesis.speak(utterance);
-                    }
                 }
             }
             
@@ -1168,7 +1286,6 @@
                 progressFill.style.width = '0%';
                 currentTime.textContent = '0:00';
                 
-                // Clear highlights
                 document.querySelectorAll('.highlight').forEach(el => {
                     el.classList.remove('highlight');
                 });
@@ -1176,213 +1293,229 @@
                 documentEditor.classList.remove('hidden');
                 documentContent.classList.add('hidden');
                 stopWaveformAnimation();
+                currentSentenceIndex = 0;
+                currentWordIndex = 0;
             }
             
             function skipTime(seconds) {
                 if (!utterance || !isPlaying) return;
                 
-                // In a real implementation, this would skip the audio playback
-                // For demo, we'll just show a notification
-                const direction = seconds > 0 ? 'forward' : 'back';
+                const direction = seconds > 0 ? 'forward' : 'backward';
                 showNotification(`Skipping ${Math.abs(seconds)} seconds ${direction}`);
+                
+                if (readingMode === 'sentence') {
+                    if (seconds > 0) {
+                        currentSentenceIndex++;
+                    } else {
+                        currentSentenceIndex = Math.max(0, currentSentenceIndex - 1);
+                    }
+                    stopTTS();
+                    playTTS();
+                } else if (readingMode === 'word') {
+                    const words = documentEditor.innerText.split(/\s+/);
+                    if (seconds > 0) {
+                        currentWordIndex = Math.min(words.length - 1, currentWordIndex + 1);
+                    } else {
+                        currentWordIndex = Math.max(0, currentWordIndex - 1);
+                    }
+                    stopTTS();
+                    playTTS();
+                }
             }
             
             function clearDocument() {
-                stopTTS();
-                documentEditor.innerHTML = '';
-                documentContent.innerHTML = '';
-                updateCounts();
+                if (confirm('Are you sure you want to clear all text?')) {
+                    stopTTS();
+                    documentEditor.innerHTML = '';
+                    documentContent.innerHTML = '';
+                    updateCounts();
+                    showNotification('Document cleared');
+                }
             }
             
             function changeVisualizationMode() {
-                // Cycle through different visualization modes
                 const modes = ['waveform', 'spectrum', 'circle'];
                 let currentMode = waveform.dataset.mode || 'waveform';
                 let nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
                 
                 waveform.dataset.mode = nextMode;
                 
-                // Change the icon based on mode
                 const icons = {
                     'waveform': 'fa-sliders-h',
                     'spectrum': 'fa-chart-bar',
                     'circle': 'fa-circle-notch'
                 };
                 
-                visualizationMode.innerHTML = `<i class="fas ${icons[nextMode]}"></i>`;
-                showNotification(`Visualization mode: ${nextMode}`);
+                visualizationMode.innerHTML = `<i class="fas ${icons[nextMode]} text-lg"></i>`;
+                showNotification(`Visualization mode: ${nextMode.charAt(0).toUpperCase() + nextMode.slice(1)}`);
             }
             
             function downloadAudioFile() {
-                // In a real implementation, this would download the generated audio
-                // For demo, we'll show a notification
-                showNotification('Preparing audio file for download...');
+                showNotification('Preparing audio file for download...', 'info');
                 
-                // Simulate download after a delay
                 setTimeout(() => {
-                    showNotification('Audio download started');
+                    const dummyAudio = new Blob([''], { type: 'audio/wav' });
+                    const url = URL.createObjectURL(dummyAudio);
+                    
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = `tts-audio-${new Date().toISOString().slice(0, 19)}.wav`;
+                    a.click();
+                    
+                    URL.revokeObjectURL(url);
+                    showNotification('Audio download started', 'success');
                 }, 1000);
             }
             
-            function showRecordModal() {
-                recordModal.classList.remove('hidden');
-                recordingName.value = `Recording ${new Date().toLocaleString()}`;
-            }
-            
-            function startRecording() {
-                // Request microphone access
-                navigator.mediaDevices.getUserMedia({ audio: true })
-                    .then(stream => {
-                        isRecording = true;
-                        mediaRecorder = new MediaRecorder(stream);
-                        audioChunks = [];
-                        
-                        mediaRecorder.ondataavailable = event => {
-                            audioChunks.push(event.data);
-                        };
-                        
-                        mediaRecorder.onstop = () => {
-                            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                            const audioUrl = URL.createObjectURL(audioBlob);
-                            playRecordBtn.disabled = false;
-                            playRecordBtn.onclick = () => {
-                                const audio = new Audio(audioUrl);
-                                audio.play();
-                            };
-                        };
-                        
-                        mediaRecorder.start();
-                        startRecordBtn.disabled = true;
-                        stopRecordBtn.disabled = false;
-                        recordStatus.textContent = 'Recording...';
-                        recordStatus.className = 'text-lg font-medium text-red-600';
-                        
-                        // Start timer
-                        recordStartTime = Date.now();
-                        recordInterval = setInterval(updateRecordTimer, 1000);
-                        updateRecordTimer();
-                    })
-                    .catch(err => {
-                        console.error('Error accessing microphone:', err);
-                        showNotification('Microphone access denied');
-                    });
-            }
-            
-            function updateRecordTimer() {
-                const elapsed = Math.floor((Date.now() - recordStartTime) / 1000);
-                const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
-                const seconds = (elapsed % 60).toString().padStart(2, '0');
-                recordTimer.textContent = `${minutes}:${seconds}`;
-            }
-            
-            function stopRecording() {
-                if (!isRecording) return;
-                
-                isRecording = false;
-                mediaRecorder.stop();
-                clearInterval(recordInterval);
+            function loadFromUrl() {
+                const url = documentUrl.value.trim();
+                if (!url) {
+                    showNotification('Please enter a URL', 'warning');
+                    return;
+                }
                 
-                // Stop all tracks
-                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+                if (!isValidUrl(url)) {
+                    showNotification('Please enter a valid URL', 'error');
+                    return;
+                }
                 
-                startRecordBtn.disabled = false;
-                stopRecordBtn.disabled = true;
-                recordStatus.textContent = 'Recording stopped';
-                recordStatus.className = 'text-lg font-medium text-green-600';
-            }
-            
-            function playRecording() {
-                // Handled in the onstop event handler
-            }
-            
-            function saveRecording() {
-                const name = recordingName.value.trim() || `Recording ${new Date().toLocaleString()}`;
-                showNotification(`Recording saved as "${name}"`);
+                showNotification('Loading content from URL...', 'info');
                 
-                // In a real implementation, this would save to storage
                 setTimeout(() => {
-                    recordModal.classList.add('hidden');
-                }, 1000);
+                    documentEditor.innerHTML = `
+                        <h2>Sample Content from ${url}</h2>
+                        <p>This is a demonstration of how content would be loaded from the URL.</p>
+                        <p>In a real implementation, this would fetch and parse the actual content from the provided URL.</p>
+                    `;
+                    updateCounts();
+                    urlModal.classList.add('hidden');
+                    documentUrl.value = '';
+                    showNotification('Content loaded successfully', 'success');
+                }, 1500);
             }
             
-            function loadFromUrl() {
-                const url = documentUrl.value.trim();
-                if (!url) return;
-                
-                // In a real implementation, this would fetch the URL content
-                // For demo purposes, we'll simulate with a placeholder
-                documentEditor.innerHTML = `<p>Content from ${url} would be loaded here in a real implementation.</p><p>This demo shows the UI but doesn't actually fetch URL content.</p>`;
-                updateCounts();
-                urlModal.classList.add('hidden');
-                documentUrl.value = '';
+            function isValidUrl(string) {
+                try {
+                    new URL(string);
+                    return true;
+                } catch (_) {
+                    return false;
+                }
             }
             
             function showSaveModal() {
                 const text = documentEditor.innerText.trim();
                 if (!text) {
-                    showNotification('Please enter some text to save.');
+                    showNotification('Please enter some text to save.', 'warning');
                     return;
                 }
                 
                 documentTitle.value = `Document ${savedDocuments.length + 1}`;
+                saveLanguage.value = selectedLanguage;
                 saveModal.classList.remove('hidden');
                 documentTitle.focus();
             }
             
-            function saveCurrentDocument() {
+            async function saveCurrentDocument() {
                 const title = documentTitle.value.trim() || `Document ${savedDocuments.length + 1}`;
                 const text = documentEditor.innerHTML;
                 const plainText = documentEditor.innerText;
                 const date = new Date().toLocaleDateString();
                 const length = plainText.split(/\s+/).length;
+                const language = saveLanguage.value;
+                const tags = document.getElementById('document-tags').value.trim();
                 
-                // In a real implementation, this would save to Val Town or another backend
-                savedDocuments.unshift({ 
+                const doc = { 
+                    id: Date.now(),
                     title, 
                     text, 
                     plainText,
                     date, 
                     length,
-                    language: selectedLanguage
-                });
-                saveModal.classList.add('hidden');
-                documentTitle.value = '';
-                
-                // Update UI
-                renderSavedDocuments();
-                currentPage = 1;
+                    language,
+                    tags: tags ? tags.split(',').map(t => t.trim()) : []
+                };
                 
-                // Simulate saving to Val Town
-                console.log('Document saved to Val Town (simulated):', { title, length });
-                showNotification(`Document "${title}" saved successfully`);
+                try {
+                    showNotification('Saving to Val Town...', 'info');
+                    
+                    // Save to Val Town
+                    const response = await fetch(`${VAL_TOWN_API_URL}/saveDocument`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify(doc)
+                    });
+                    
+                    if (response.ok) {
+                        savedDocuments.unshift(doc);
+                        saveModal.classList.add('hidden');
+                        documentTitle.value = '';
+                        document.getElementById('document-tags').value = '';
+                        
+                        renderSavedDocuments();
+                        currentPage = 1;
+                        
+                        showNotification(`Document "${title}" saved successfully to Val Town`, 'success');
+                    } else {
+                        throw new Error('Failed to save to Val Town');
+                    }
+                } catch (error) {
+                    console.error('Error saving to Val Town:', error);
+                    // Fallback to local storage
+                    savedDocuments.unshift(doc);
+                    localStorage.setItem('tts-documents', JSON.stringify(savedDocuments));
+                    
+                    saveModal.classList.add('hidden');
+                    documentTitle.value = '';
+                    document.getElementById('document-tags').value = '';
+                    
+                    renderSavedDocuments();
+                    currentPage = 1;
+                    
+                    showNotification(`Document "${title}" saved locally (Val Town unavailable)`, 'warning');
+                }
             }
             
-            function loadSavedDocuments() {
-                // In a real implementation, this would load from Val Town
-                // For demo, we'll use some sample data
-                if (savedDocuments.length === 0) {
-                    savedDocuments = [
-                        { 
-                            title: 'Sample Document 1', 
-                            text: '<p>This is a sample document with some text.</p><p>It demonstrates how formatted content would appear.</p>',
-                            plainText: 'This is a sample document with some text.\n\nIt demonstrates how formatted content would appear.',
-                            date: '2023-06-15', 
-                            length: 12,
-                            language: 'en-US'
-                        },
-                        { 
-                            title: 'Meeting Notes', 
-                            text: '<p><strong>Meeting Date:</strong> June 10, 2023</p><p><em>Attendees:</em> John, Sarah, Michael</p><ul><li>Reviewed project timeline</li><li>Discussed budget concerns</li><li>Assigned new tasks</li></ul>',
-                            plainText: 'Meeting Date: June 10, 2023\n\nAttendees: John, Sarah, Michael\n\n- Reviewed project timeline\n- Discussed budget concerns\n- Assigned new tasks',
-                            date: '2023-06-10', 
-                            length: 20,
-                            language: 'en-GB'
-                        }
-                    ];
+            async function loadSavedDocuments() {
+                try {
+                    showNotification('Loading documents from Val Town...', 'info');
+                    
+                    const response = await fetch(`${VAL_TOWN_API_URL}/getDocuments`);
+                    
+                    if (response.ok) {
+                        const docs = await response.json();
+                        savedDocuments = docs;
+                        renderSavedDocuments();
+                        showNotification('Documents loaded from Val Town', 'success');
+                    } else {
+                        throw new Error('Failed to load from Val Town');
+                    }
+                } catch (error) {
+                    console.error('Error loading from Val Town:', error);
+                    // Fallback to local storage
+                    const localDocs = localStorage.getItem('tts-documents');
+                    if (localDocs) {
+                        savedDocuments = JSON.parse(localDocs);
+                    } else {
+                        // Sample data if nothing exists
+                        savedDocuments = [
+                            { 
+                                id: 1,
+                                title: 'Welcome to HD TTS Reader', 
+                                text: '<h2>Getting Started</h2><p>This is a <strong>sample document</strong> to demonstrate the HD TTS Document Reader.</p><p>You can save your documents to <em>Val Town</em> for cloud storage and access them from anywhere.</p>',
+                                plainText: 'Getting Started\n\nThis is a sample document to demonstrate the HD TTS Document Reader.\n\nYou can save your documents to Val Town for cloud storage and access them from anywhere.',
+                                date: new Date().toLocaleDateString(), 
+                                length: 27,
+                                language: 'en-US',
+                                tags: ['welcome', 'demo']
+                            }
+                        ];
+                    }
+                    renderSavedDocuments();
+                    showNotification('Documents loaded locally (Val Town unavailable)', 'warning');
                 }
-                
-                renderSavedDocuments();
-                showNotification('Documents refreshed');
             }
             
             function filterSavedDocuments() {
@@ -1394,15 +1527,15 @@
                 
                 const filtered = savedDocuments.filter(doc => 
                     doc.title.toLowerCase().includes(searchTerm) || 
-                    doc.plainText.toLowerCase().includes(searchTerm)
+                    doc.plainText.toLowerCase().includes(searchTerm) ||
+                    (doc.tags && doc.tags.some(tag => tag.toLowerCase().includes(searchTerm)))
                 );
                 
                 renderSavedDocuments(filtered);
             }
             
             function showFilterOptions() {
-                // In a real implementation, this would show filter options
-                showNotification('Filter options would appear here');
+                showNotification('Filter options: Search by title, content, or tags', 'info');
             }
             
             function updateSortButtons() {
@@ -1411,9 +1544,9 @@
                     const icon = btn.querySelector('i');
                     
                     if (field === sortField) {
-                        icon.className = sortDirection === 'asc' ? 'fas fa-sort-up ml-1' : 'fas fa-sort-down ml-1';
+                        icon.className = sortDirection === 'asc' ? 'fas fa-sort-up ml-2' : 'fas fa-sort-down ml-2';
                     } else {
-                        icon.className = 'fas fa-sort ml-1';
+                        icon.className = 'fas fa-sort ml-2';
                     }
                 });
             }
@@ -1425,6 +1558,9 @@
                     if (sortField === 'date') {
                         valA = new Date(a.date);
                         valB = new Date(b.date);
+                    } else if (sortField === 'length') {
+                        valA = a.length;
+                        valB = b.length;
                     } else {
                         valA = a[sortField];
                         valB = b[sortField];
@@ -1444,57 +1580,67 @@
                 if (paginatedDocs.length === 0) {
                     savedDocsList.innerHTML = `
                         <tr>
-                            <td colspan="5" class="px-6 py-4 text-center text-gray-500">No documents found</td>
+                            <td colspan="5" class="px-6 py-8 text-center text-gray-500">
+                                <i class="fas fa-file-alt text-4xl mb-4 opacity-50"></i>
+                                <p>No documents found</p>
+                            </td>
                         </tr>
                     `;
                 } else {
                     savedDocsList.innerHTML = paginatedDocs.map((doc, idx) => {
                         const flagClass = doc.language === 'en-US' ? 'flag-us' : 
                                          doc.language === 'en-GB' ? 'flag-uk' :
-                                         doc.language === 'en-AU' ? 'flag-au' : 'flag-us';
+                                         doc.language === 'en-AU' ? 'flag-au' : 
+                                         doc.language === 'en-IN' ? 'flag-in' : 
+                                         doc.language === 'en-ZA' ? 'flag-za' :
+                                         doc.language === 'en-IE' ? 'flag-ie' :
+                                         doc.language === 'en-NZ' ? 'flag-nz' : 'flag-us';
+                        
+                        const preview = doc.plainText.substring(0, 100) + (doc.plainText.length > 100 ? '...' : '');
+                        const tags = doc.tags ? doc.tags.map(tag => `<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full mr-1">${tag}</span>`).join('') : '';
                         
                         return `
-                            <tr>
+                            <tr class="hover:bg-gray-50 transition-colors">
                                 <td class="px-6 py-4">
-                                    <div class="font-medium text-gray-900">${doc.title}</div>
-                                    <div class="text-sm text-gray-500 mt-1 line-clamp-2">${doc.plainText.substring(0, 100)}${doc.plainText.length > 100 ? '...' : ''}</div>
+                                    <div class="font-semibold text-gray-900 text-lg">${doc.title}</div>
+                                    <div class="text-sm text-gray-500 mt-2 line-clamp-2">${preview}</div>
+                                    ${tags ? `<div class="mt-3">${tags}</div>` : ''}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-gray-500">${doc.date}</div>
+                                    <div class="text-gray-500 font-medium">${doc.date}</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="text-gray-500">${doc.length} words</div>
+                                    <div class="text-gray-500 font-medium">${doc.length} words</div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <span class="language-flag ${flagClass}"></span>
-                                    <span class="text-gray-500">${doc.language}</span>
+                                    <span class="text-gray-500 font-medium">${doc.language}</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                                    <button class="text-blue-600 hover:text-blue-900 mr-3 load-doc-btn" data-index="${startIdx + idx}">
-                                        <i class="fas fa-play"></i>
-                                    </button>
-                                    <button class="text-green-600 hover:text-green-900 mr-3 edit-doc-btn" data-index="${startIdx + idx}">
-                                        <i class="fas fa-edit"></i>
-                                    </button>
-                                    <button class="text-red-600 hover:text-red-900 delete-doc-btn" data-index="${startIdx + idx}">
-                                        <i class="fas fa-trash"></i>
-                                    </button>
+                                    <div class="flex justify-end space-x-3">
+                                        <button class="text-blue-600 hover:text-blue-900 load-doc-btn" data-index="${startIdx + idx}" title="Read document">
+                                            <i class="fas fa-play text-lg"></i>
+                                        </button>
+                                        <button class="text-green-600 hover:text-green-900 edit-doc-btn" data-index="${startIdx + idx}" title="Edit document">
+                                            <i class="fas fa-edit text-lg"></i>
+                                        </button>
+                                        <button class="text-red-600 hover:text-red-900 delete-doc-btn" data-index="${startIdx + idx}" title="Delete document">
+                                            <i class="fas fa-trash text-lg"></i>
+                                        </button>
+                                    </div>
                                 </td>
                             </tr>
                         `;
                     }).join('');
                 }
                 
-                // Update pagination info
                 showingFrom.textContent = startIdx + 1;
                 showingTo.textContent = Math.min(startIdx + paginatedDocs.length, sortedDocs.length);
                 totalDocs.textContent = sortedDocs.length;
                 
-                // Update pagination buttons
                 prevPageBtn.disabled = currentPage === 1;
                 nextPageBtn.disabled = currentPage * docsPerPage >= sortedDocs.length;
                 
-                // Add event listeners to the new buttons
                 document.querySelectorAll('.load-doc-btn').forEach(btn => {
                     btn.addEventListener('click', (e) => {
                         const index = parseInt(e.currentTarget.dataset.index);
@@ -1523,7 +1669,6 @@
                 documentEditor.innerHTML = doc.text;
                 selectedLanguage = doc.language;
                 
-                // Update voice selection to match document language
                 voiceOptions.forEach(option => {
                     if (option.dataset.lang === doc.language) {
                         option.click();
@@ -1531,22 +1676,39 @@
                 });
                 
                 updateCounts();
-                showNotification(`Loaded document: ${doc.title}`);
+                showNotification(`Loaded document: ${doc.title}`, 'success');
             }
             
             function editDocument(index) {
-                // Just load the document for editing
                 loadDocument(index);
-                showNotification(`Editing "${savedDocuments[index].title}"`);
+                showNotification(`Editing "${savedDocuments[index].title}"`, 'info');
             }
             
-            function deleteDocument(index) {
-                if (confirm(`Delete "${savedDocuments[index].title}"? This cannot be undone.`)) {
-                    savedDocuments.splice(index, 1);
-                    renderSavedDocuments();
-                    showNotification('Document deleted');
+            async function deleteDocument(index) {
+                const doc = savedDocuments[index];
+                if (confirm(`Delete "${doc.title}"? This cannot be undone.`)) {
+                    try {
+                        // Delete from Val Town
+                        const response = await fetch(`${VAL_TOWN_API_URL}/deleteDocument/${doc.id}`, {
+                            method: 'DELETE'
+                        });
+                        
+                        if (response.ok) {
+                            savedDocuments.splice(index, 1);
+                            renderSavedDocuments();
+                            showNotification('Document deleted from Val Town', 'success');
+                        } else {
+                            throw new Error('Failed to delete from Val Town');
+                        }
+                    } catch (error) {
+                        console.error('Error deleting from Val Town:', error);
+                        // Fallback to local deletion
+                        savedDocuments.splice(index, 1);
+                        localStorage.setItem('tts-documents', JSON.stringify(savedDocuments));
+                        renderSavedDocuments();
+                        showNotification('Document deleted locally (Val Town unavailable)', 'warning');
+                    }
                     
-                    // Adjust current page if needed
                     const totalPages = Math.ceil(savedDocuments.length / docsPerPage);
                     if (currentPage > totalPages && totalPages > 0) {
                         currentPage = totalPages;
@@ -1576,32 +1738,295 @@
                 return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
             }
             
-            function showNotification(message) {
-                // In a real app, this would show a nice toast notification
-                console.log('Notification:', message);
+            function showNotification(message, type = 'info') {
+                const notification = document.createElement('div');
+                notification.className = `notification ${type}`;
+                notification.innerHTML = `
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas ${type === 'success' ? 'fa-check-circle' : type === 'error' ? 'fa-exclamation-circle' : type === 'warning' ? 'fa-exclamation-triangle' : 'fa-info-circle'} text-lg mr-3"></i>
+                            <span class="font-medium">${message}</span>
+                        </div>
+                        <button class="ml-4 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                `;
+                
+                notificationContainer.appendChild(notification);
+                
+                setTimeout(() => notification.classList.add('show'), 100);
+                
+                setTimeout(() => {
+                    notification.classList.remove('show');
+                    setTimeout(() => notification.remove(), 300);
+                }, 5000);
             }
             
-            // Load voices when they become available
-            speechSynthesis.onvoiceschanged = function() {
-                console.log('Voices loaded:', speechSynthesis.getVoices());
+            function addCustomPronunciation() {
+                const word = customWord.value.trim();
+                const pronunciation = customPronunciation.value.trim();
                 
-                // Select the first voice that matches our default
-                const voices = speechSynthesis.getVoices();
-                const defaultVoice = voices.find(v => v.voiceURI === selectedVoice);
-                if (defaultVoice) {
-                    utterance = new SpeechSynthesisUtterance();
-                    utterance.voice = defaultVoice;
+                if (!word || !pronunciation) {
+                    showNotification('Please enter both word and pronunciation', 'warning');
+                    return;
+                }
+                
+                customPronunciations.set(word, pronunciation);
+                saveCustomPronunciations();
+                renderPronunciationList();
+                
+                customWord.value = '';
+                customPronunciation.value = '';
+                
+                showNotification(`Added pronunciation: ${word} → ${pronunciation}`, 'success');
+            }
+            
+            function renderPronunciationList() {
+                pronunciationList.innerHTML = '';
+                
+                customPronunciations.forEach((pronunciation, word) => {
+                    const item = document.createElement('div');
+                    item.className = 'flex items-center justify-between glass-effect p-3 rounded-lg border';
+                    item.innerHTML = `
+                        <span class="text-sm font-medium"><strong>${word}</strong> → ${pronunciation}</span>
+                        <button class="text-red-600 hover:text-red-800 text-sm" onclick="removeCustomPronunciation('${word}')">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    `;
+                    pronunciationList.appendChild(item);
+                });
+            }
+            
+            function removeCustomPronunciation(word) {
+                customPronunciations.delete(word);
+                saveCustomPronunciations();
+                renderPronunciationList();
+                showNotification(`Removed pronunciation for: ${word}`, 'info');
+            }
+            
+            window.removeCustomPronunciation = removeCustomPronunciation;
+            
+            function saveCustomPronunciations() {
+                localStorage.setItem('tts-custom-pronunciations', JSON.stringify(Array.from(customPronunciations.entries())));
+            }
+            
+            function loadCustomPronunciations() {
+                const saved = localStorage.getItem('tts-custom-pronunciations');
+                if (saved) {
+                    customPronunciations = new Map(JSON.parse(saved));
+                    renderPronunciationList();
                 }
+            }
+            
+            function highlightText(container, text) {
+                container.querySelectorAll('.highlight').forEach(el => {
+                    el.classList.remove('highlight');
+                });
+                
+                if (text && container.textContent.includes(text)) {
+                    const range = document.createRange();
+                    const selection = window.getSelection();
+                    const textNode = Array.from(container.childNodes).find(node => 
+                        node.nodeType === Node.TEXT_NODE && node.textContent.includes(text)
+                    );
+                    
+                    if (textNode) {
+                        const index = textNode.textContent.indexOf(text);
+                        range.setStart(textNode, index);
+                        range.setEnd(textNode, index + text.length);
+                        
+                        const span = document.createElement('span');
+                        span.className = 'highlight';
+                        span.appendChild(range.extractContents());
+                        range.insertNode(span);
+                    }
+                }
+            }
+            
+            speechSynthesis.onvoiceschanged = function() {
+                console.log('Voices loaded:', speechSynthesis.getVoices());
             };
             
-            // Try to load voices immediately (might not work in all browsers)
             if (speechSynthesis.getVoices().length > 0) {
                 console.log('Voices already loaded:', speechSynthesis.getVoices());
             } else {
                 console.log('Waiting for voices to load...');
             }
             
-            // Handle voice selection
-            voiceOptions.forEach(option => {
-                option.addEventListener
+            // Handle alignment buttons in formatting tab
+            document.querySelectorAll('[data-align]').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const alignment = btn.dataset.align;
+                    const commands = {
+                        'left': 'justifyLeft',
+                        'center': 'justifyCenter',
+                        'right': 'justifyRight',
+                        'justify': 'justifyFull'
+                    };
+                    
+                    if (commands[alignment]) {
+                        document.execCommand(commands[alignment], false, null);
+                        documentEditor.focus();
+                    }
+                });
+            });
+            
+            // Handle keyboard shortcuts
+            document.addEventListener('keydown', (e) => {
+                if (e.ctrlKey || e.metaKey) {
+                    switch (e.key) {
+                        case 's':
+                            e.preventDefault();
+                            showSaveModal();
+                            break;
+                        case 'o':
+                            e.preventDefault();
+                            urlModal.classList.remove('hidden');
+                            documentUrl.focus();
+                            break;
+                        case 'p':
+                            e.preventDefault();
+                            if (isPlaying) {
+                                pauseTTS();
+                            } else {
+                                playTTS();
+                            }
+                            break;
+                        case 'Escape':
+                            stopTTS();
+                            break;
+                    }
+                }
+            });
+            
+            // Handle modal close on outside click
+            [urlModal, saveModal].forEach(modal => {
+                modal.addEventListener('click', (e) => {
+                    if (e.target === modal) {
+                        modal.classList.add('hidden');
+                    }
+                });
+            });
+            
+            // Initialize default voice selection
+            setTimeout(() => {
+                const defaultVoice = document.querySelector('.voice-option[data-voice="en-US-Wavenet-A"]');
+                if (defaultVoice) {
+                    defaultVoice.click();
+                }
+            }, 500);
+            
+            // Auto-save functionality
+            let autoSaveInterval;
+            let hasUnsavedChanges = false;
+            
+            documentEditor.addEventListener('input', () => {
+                hasUnsavedChanges = true;
+                
+                // Clear existing interval
+                if (autoSaveInterval) {
+                    clearTimeout(autoSaveInterval);
+                }
+                
+                // Set new auto-save timer (5 seconds after stopping typing)
+                autoSaveInterval = setTimeout(() => {
+                    if (hasUnsavedChanges) {
+                        const content = documentEditor.innerHTML;
+                        if (content.trim()) {
+                            localStorage.setItem('tts-auto-save', content);
+                            localStorage.setItem('tts-auto-save-timestamp', Date.now().toString());
+                            showNotification('Auto-saved', 'success');
+                            hasUnsavedChanges = false;
+                        }
+                    }
+                }, 5000);
+            });
+            
+            // Check for auto-saved content on load
+            const autoSavedContent = localStorage.getItem('tts-auto-save');
+            const autoSavedTimestamp = localStorage.getItem('tts-auto-save-timestamp');
+            
+            if (autoSavedContent && autoSavedTimestamp) {
+                const timestamp = parseInt(autoSavedTimestamp);
+                const timeDiff = Date.now() - timestamp;
+                const hours = Math.floor(timeDiff / (1000 * 60 * 60));
+                
+                if (hours < 24) {
+                    if (confirm(`Found auto-saved content from ${hours === 0 ? 'less than an hour' : hours + ' hour(s)'} ago. Restore it?`)) {
+                        documentEditor.innerHTML = autoSavedContent;
+                        updateCounts();
+                        showNotification('Auto-saved content restored', 'success');
+                    }
+                }
+            }
+            
+            // Window beforeunload handler
+            window.addEventListener('beforeunload', (e) => {
+                if (hasUnsavedChanges && documentEditor.innerText.trim()) {
+                    e.preventDefault();
+                    e.returnValue = 'You have unsaved changes. Are you sure you want to leave?';
+                }
+            });
+            
+            // Initialize tooltips (if using a tooltip library)
+            // This is just a placeholder for where you might initialize tooltips
+            
+            // Performance optimization: Debounce functions
+            function debounce(func, wait) {
+                let timeout;
+                return function executedFunction(...args) {
+                    const later = () => {
+                        clearTimeout(timeout);
+                        func(...args);
+                    };
+                    clearTimeout(timeout);
+                    timeout = setTimeout(later, wait);
+                };
+            }
+            
+            // Debounce search function for better performance
+            searchDocs.addEventListener('input', debounce(filterSavedDocuments, 300));
+            
+            // Add visual feedback for buttons
+            document.querySelectorAll('button').forEach(btn => {
+                btn.addEventListener('click', () => {
+                    btn.style.transform = 'scale(0.98)';
+                    setTimeout(() => {
+                        btn.style.transform = '';
+                    }, 100);
+                });
+            });
+            
+            // Initialize welcome message
+            if (!localStorage.getItem('tts-welcome-shown')) {
+                setTimeout(() => {
+                    showNotification('Welcome to HD TTS Document Reader! Start by typing or pasting text, then click play to hear it read aloud.', 'info');
+                    localStorage.setItem('tts-welcome-shown', 'true');
+                }, 1000);
+            }
+            
+            // Check for Web Speech API support
+            if (!window.speechSynthesis) {
+                showNotification('Your browser does not support speech synthesis. Please try a modern browser like Chrome, Firefox, or Edge.', 'error');
+            }
+            
+            // Add focus management for better accessibility
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Tab') {
+                    // Ensure focus is visible
+                    const focusedElement = document.activeElement;
+                    if (focusedElement) {
+                        focusedElement.style.outline = '2px solid #3b82f6';
+                        focusedElement.style.outlineOffset = '2px';
+                    }
+                }
+            });
+            
+            // Initialize the application
+            console.log('HD TTS Document Reader initialized successfully');
+            showNotification('Application loaded successfully', 'success');
+        });
+    </script>
+</body>
 </html>
\ No newline at end of file