diff --git a/tools/prompt_token_optimizer.html b/tools/prompt_token_optimizer.html
index 1a02d32..9ffadce 100644
--- a/tools/prompt_token_optimizer.html
+++ b/tools/prompt_token_optimizer.html
@@ -1,45 +1,60 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Prompt Optimizer</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
+    <style>
+        @media (prefers-color-scheme: dark) {
+            :root {
+                color-scheme: dark;
+            }
+        }
+        textarea {
+            resize: vertical;
+            min-height: 200px;
+        }
+    </style>
 </head>
-<body class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200">
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
-        <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Optimizer</h1>
-        
-        <div class="flex justify-end mb-4">
-            <button id="themeToggle" class="px-4 py-2 rounded bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white">
-                Toggle Theme
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <main class="container max-w-4xl mx-auto p-4">
+        <header class="flex justify-between items-center mb-6">
+            <h1 class="text-2xl font-bold">Prompt Optimizer</h1>
+            <button 
+                onclick="document.documentElement.classList.toggle('dark')"
+                class="p-2 rounded bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600"
+                aria-label="Toggle theme">
+                🌓
             </button>
-        </div>
+        </header>
 
         <div class="grid gap-4 md:grid-cols-2">
-            <div class="space-y-2">
-                <label class="block text-gray-700 dark:text-gray-300 font-medium">Input Prompt</label>
+            <section>
+                <label class="block font-medium mb-2" for="input">Input Prompt</label>
                 <textarea 
-                    id="input" 
-                    class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white" 
+                    id="input"
+                    class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
                     placeholder="Paste your prompt here..."
-                ></textarea>
-            </div>
+                    oninput="updateOutput(this.value)">
+                </textarea>
+            </section>
 
-            <div class="space-y-2">
-                <label class="block text-gray-700 dark:text-gray-300 font-medium">Optimized Output</label>
+            <section>
+                <label class="block font-medium mb-2" for="output">Optimized Output</label>
                 <textarea 
-                    id="output" 
-                    class="w-full h-64 p-3 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white" 
-                    readonly
-                ></textarea>
-                <button id="copyBtn" class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors">
-                    Copy to Clipboard
+                    id="output"
+                    class="w-full p-3 rounded border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600"
+                    readonly>
+                </textarea>
+                <button 
+                    onclick="copyOutput()"
+                    class="mt-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+                    Copy
                 </button>
-            </div>
+            </section>
         </div>
-    </div>
+    </main>
 
     <script>
         const abbreviations = {
@@ -48,38 +63,36 @@ <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Prompt Optimiz
             'language': 'lang', 'example': 'ex', 'information': 'info', 'response': 'resp',
             'assistant': 'asst', 'human': 'usr', 'context': 'ctx', 'understand': 'undst',
             'generate': 'gen', 'output': 'out', 'message': 'msg', 'system': 'sys'
-            // Add more abbreviations as needed
         };
 
-        function optimizePrompt(text) {
-            let optimized = text.replace(/\s+/g, ' ').trim();
-            Object.entries(abbreviations).forEach(([word, abbr]) => {
-                const regex = new RegExp(`\\b${word}\\b`, 'gi');
-                optimized = optimized.replace(regex, abbr);
-            });
-            return optimized + ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
+        function updateOutput(text) {
+            const output = document.getElementById('output');
+            output.value = text
+                .replace(/\s+/g, ' ')
+                .trim()
+                .replace(new RegExp(`\\b(${Object.keys(abbreviations).join('|')})\\b`, 'gi'), 
+                    match => abbreviations[match.toLowerCase()])
+                + ' Note:Use abbrev&short resp.No formatting/line breaks unless req.Be concise.';
         }
 
-        document.addEventListener('DOMContentLoaded', () => {
-            const inputArea = document.getElementById('input');
-            const outputArea = document.getElementById('output');
-
-            inputArea.addEventListener('input', function() {
-                outputArea.value = optimizePrompt(this.value);
-            });
-
-            new ClipboardJS('#copyBtn', {
-                text: () => outputArea.value
-            }).on('success', () => {
-                const btn = document.getElementById('copyBtn');
+        async function copyOutput() {
+            const btn = document.querySelector('button:last-of-type');
+            const originalText = btn.textContent;
+            
+            try {
+                await navigator.clipboard.writeText(document.getElementById('output').value);
                 btn.textContent = 'Copied!';
-                setTimeout(() => btn.textContent = 'Copy to Clipboard', 2000);
-            });
+                setTimeout(() => btn.textContent = originalText, 1000);
+            } catch (err) {
+                btn.textContent = 'Failed to copy';
+                setTimeout(() => btn.textContent = originalText, 1000);
+            }
+        }
 
-            document.getElementById('themeToggle').addEventListener('click', () => 
-                document.documentElement.classList.toggle('dark')
-            );
-        });
+        // Match system color scheme by default
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
     </script>
 </body>
 </html>
