diff --git a/demo.html b/demo.html
index 4c64c2d..bc7ead9 100644
--- a/demo.html
+++ b/demo.html
@@ -229,13 +229,6 @@
             <h3>6. 🔧 Feature Buttons Only</h3>
             <p>Add specific feature buttons without the full chat interface:</p>
             
-            <h4>🎯 Live Example</h4>
-            <p>Try the feature buttons below:</p>
-            <div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                <div class="uncloseai" data-features="tts,read" id="demo-buttons"></div>
-                <p><strong>Available features:</strong> Text-to-Speech and Read Page buttons</p>
-            </div>
-            
             <h4>📄 Code Example</h4>
             <details open>
                 <summary><strong>How to add specific feature buttons</strong></summary>
@@ -254,6 +247,13 @@
                 
                 <p><strong>Available features:</strong> <code>chat</code>, <code>tts</code>, <code>translate</code>, <code>read</code>, <code>full</code></p>
             </details>
+            
+            <h4>🎯 Live Example</h4>
+            <p>Try the feature buttons below:</p>
+            <div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                <div class="uncloseai" data-features="tts,read" id="demo-buttons"></div>
+                <p><strong>Available features:</strong> Text-to-Speech and Read Page buttons</p>
+            </div>
         </section>
 
         <!-- 7. Text-to-Speech Options -->
@@ -261,6 +261,20 @@
             <h3>7. 🔊 Text-to-Speech Options</h3>
             <p>Two ways to add TTS functionality to your website:</p>
             
+            <h4>📄 Code Examples</h4>
+            <details open>
+                <summary><strong>How to implement both TTS options</strong></summary>
+                
+                <h5>Option 1: TTS Widget Button</h5>
+                <pre><code class="html">&lt;div class="uncloseai" data-features="tts"&gt;&lt;/div&gt;</code></pre>
+                
+                <h5>Option 2: TTS Modal Button</h5>
+                <pre><code class="html">&lt;button onclick="openTTSModal()"&gt;🔊 Text to Speech&lt;/button&gt;</code></pre>
+                
+                <p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
+                <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
+            </details>
+            
             <h4>🎯 Live Examples</h4>
             
             <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
@@ -280,20 +294,6 @@
                     <p><strong>Best for:</strong> General-purpose text-to-speech tool</p>
                 </div>
             </div>
-            
-            <h4>📄 Code Examples</h4>
-            <details open>
-                <summary><strong>How to implement both TTS options</strong></summary>
-                
-                <h5>Option 1: TTS Widget Button</h5>
-                <pre><code class="html">&lt;div class="uncloseai" data-features="tts"&gt;&lt;/div&gt;</code></pre>
-                
-                <h5>Option 2: TTS Modal Button</h5>
-                <pre><code class="html">&lt;button onclick="openTTSModal()"&gt;🔊 Text to Speech&lt;/button&gt;</code></pre>
-                
-                <p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
-                <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
-            </details>
         </section>
 
         <!-- 8. Translation Options -->
@@ -301,26 +301,6 @@
             <h3>8. 🌐 Translation Options</h3>
             <p>Two ways to add translation functionality to your website:</p>
             
-            <h4>🎯 Live Examples</h4>
-            
-            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
-                <!-- Translation Widget Button -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>🌐 Translation Widget Button</h5>
-                    <p>Embedded translation button for content:</p>
-                    <div class="uncloseai" data-features="translate" id="demo-translate-modal"></div>
-                    <p><strong>Best for:</strong> Adding translation to specific content areas</p>
-                </div>
-                
-                <!-- Translation Modal Button -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>🔄 Translation Modal</h5>
-                    <p>Standalone modal for translation tasks:</p>
-                    <button onclick="openTranslateModal()" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">🌐 Open Translation Modal</button>
-                    <p><strong>Best for:</strong> General-purpose translation tool</p>
-                </div>
-            </div>
-            
             <h4>📄 Code Examples</h4>
             <details open>
                 <summary><strong>How to implement both translation options</strong></summary>
@@ -342,6 +322,26 @@
                 <p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
                 <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
             </details>
+            
+            <h4>🎯 Live Examples</h4>
+            
+            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
+                <!-- Translation Widget Button -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>🌐 Translation Widget Button</h5>
+                    <p>Embedded translation button for content:</p>
+                    <div class="uncloseai" data-features="translate" id="demo-translate-modal"></div>
+                    <p><strong>Best for:</strong> Adding translation to specific content areas</p>
+                </div>
+                
+                <!-- Translation Modal Button -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>🔄 Translation Modal</h5>
+                    <p>Standalone modal for translation tasks:</p>
+                    <button onclick="openTranslateModal()" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">🌐 Open Translation Modal</button>
+                    <p><strong>Best for:</strong> General-purpose translation tool</p>
+                </div>
+            </div>
         </section>
             
             <!--
@@ -406,19 +406,6 @@ console.log(SUPPORTED_LANGUAGES);
             <h3>10. 📖 Read Page Functionality</h3>
             <p>Let AI read the entire webpage aloud with natural voice synthesis:</p>
             
-            <h4>🎯 Live Example</h4>
-            <div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                <button onclick="readPageWithHermes()" style="padding: 15px 30px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold;">📖 Read This Page Aloud</button>
-                <p><strong>What it does:</strong></p>
-                <ul>
-                    <li>🤖 AI processes page content for optimal speech</li>
-                    <li>🔊 Converts to natural-sounding audio</li>
-                    <li>⏯️ Provides play/pause controls</li>
-                    <li>💾 Option to download MP3 file</li>
-                    <li>📱 Works on mobile and desktop</li>
-                </ul>
-            </div>
-            
             <h4>📄 Code Examples</h4>
             <details open>
                 <summary><strong>How to add read page functionality</strong></summary>
@@ -440,6 +427,19 @@ await readPageWithHermes();</code></pre>
                 <p><strong>Note:</strong> Requires the uncloseai.js script to be loaded first:</p>
                 <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
             </details>
+            
+            <h4>🎯 Live Example</h4>
+            <div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                <button onclick="readPageWithHermes()" style="padding: 15px 30px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold;">📖 Read This Page Aloud</button>
+                <p><strong>What it does:</strong></p>
+                <ul>
+                    <li>🤖 AI processes page content for optimal speech</li>
+                    <li>🔊 Converts to natural-sounding audio</li>
+                    <li>⏯️ Provides play/pause controls</li>
+                    <li>💾 Option to download MP3 file</li>
+                    <li>📱 Works on mobile and desktop</li>
+                </ul>
+            </div>
         </section>
 
         <!-- 11. Direct API Usage -->
@@ -472,89 +472,11 @@ await readPageWithHermes();</code></pre>
             <p>The custom API examples below demonstrate direct API usage:</p>
         </section>
 
-        <!-- 11. Custom API Examples -->
+        <!-- 12. Custom API Examples -->
         <section id="custom-examples">
-            <h3>11. 🎨 Custom API Examples</h3>
+            <h3>12. 🎨 Custom API Examples</h3>
             <p>Build your own interface using uncloseai.js functions:</p>
             
-            <h4>🎯 Live Examples</h4>
-            <p>Try these custom implementations built with the Direct API:</p>
-            
-            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
-                <!-- Custom Chat Example -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>💬 Custom AI Chat</h5>
-                    <p>Your own chat interface:</p>
-                    <div style="border: 1px solid #eee; height: 200px; padding: 10px; margin: 10px 0; overflow-y: auto; background: #fafafa;" id="custom-chat-display"></div>
-                    <input type="text" id="custom-chat-input" placeholder="Ask anything..." style="width: 100%; margin: 5px 0;">
-                    <button onclick="customChatExample()" style="width: 100%;">Send Message</button>
-                </div>
-                
-                <!-- Custom TTS Example -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>🔊 Custom Text-to-Speech</h5>
-                    <p>Your own TTS interface:</p>
-                    <textarea id="custom-tts-text" placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
-                    <select id="voice-select" style="width: 100%; margin: 5px 0;">
-                        <option value="alloy">Alloy</option>
-                        <option value="echo">Echo</option>
-                        <option value="fable">Fable</option>
-                        <option value="onyx">Onyx</option>
-                        <option value="nova">Nova</option>
-                        <option value="shimmer">Shimmer</option>
-                    </select>
-                    <button onclick="customTTSExample()" style="width: 100%;">Generate Speech</button>
-                    <div id="custom-tts-result" style="margin: 10px 0;"></div>
-                </div>
-                
-                <!-- Custom File Upload Example - DISABLED: Upload functionality under development -->
-                <div style="border: 2px dashed #ccc; padding: 20px; border-radius: 8px; background: rgba(128, 128, 128, 0.05); opacity: 0.6;">
-                    <h5>📁 Custom File Analysis <span style="color: #999; font-size: 0.8em;">(Under Development)</span></h5>
-                    <p>File upload interface (temporarily disabled):</p>
-                    <input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;" disabled>
-                    <button onclick="alert('File upload feature is under development')" style="width: 100%;" disabled>Analyze File (Coming Soon)</button>
-                    <div id="custom-file-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
-                </div>
-                
-                <!-- Page Analysis Example -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>📖 Custom Page Analysis</h5>
-                    <p>Analyze page content with custom prompts:</p>
-                    <input type="text" id="page-analysis-prompt" placeholder="What would you like to know about this page?" style="width: 100%; margin: 5px 0;">
-                    <button onclick="customPageAnalysis()" style="width: 100%;">Analyze Page</button>
-                    <div id="page-analysis-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
-                </div>
-                
-                <!-- Custom Translation Example -->
-                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
-                    <h5>🌐 Custom Translation</h5>
-                    <p>Translate text with code preservation:</p>
-                    <textarea id="custom-translate-text" placeholder="Enter text to translate (try including code like `function test()` or ```code blocks```)" style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
-                    <select id="translate-language" style="width: 100%; margin: 5px 0;">
-                        <option value="es">Spanish</option>
-                        <option value="zh">Chinese (Simplified)</option>
-                        <option value="hi">Hindi</option>
-                        <option value="fr">French</option>
-                        <option value="ar">Arabic</option>
-                        <option value="bn">Bengali</option>
-                        <option value="ru">Russian</option>
-                        <option value="pt">Portuguese</option>
-                        <option value="ur">Urdu</option>
-                        <option value="id">Indonesian</option>
-                        <option value="de">German</option>
-                        <option value="ja">Japanese</option>
-                        <option value="sw">Swahili</option>
-                        <option value="mr">Marathi</option>
-                        <option value="te">Telugu</option>
-                        <option value="tr">Turkish</option>
-                        <option value="zh-tw">Chinese (Traditional)</option>
-                        <option value="ko">Korean</option>
-                    </select>
-                    <button onclick="customTranslateExample()" style="width: 100%;">Translate Text</button>
-                    <div id="custom-translate-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none; white-space: pre-wrap;"></div>
-                </div>
-            </div>
-            
             <h4>📄 Code Examples</h4>
             <details open>
                 <summary><strong>How to build custom interfaces with Direct API</strong></summary>
@@ -708,6 +630,84 @@ async function customTranslateExample() {
                 <p><strong>Note:</strong> All functions require uncloseai.js to be loaded first:</p>
                 <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
             </details>
+            
+            <h4>🎯 Live Examples</h4>
+            <p>Try these custom implementations built with the Direct API:</p>
+            
+            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
+                <!-- Custom Chat Example -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>💬 Custom AI Chat</h5>
+                    <p>Your own chat interface:</p>
+                    <div style="border: 1px solid #eee; height: 200px; padding: 10px; margin: 10px 0; overflow-y: auto; background: #fafafa;" id="custom-chat-display"></div>
+                    <input type="text" id="custom-chat-input" placeholder="Ask anything..." style="width: 100%; margin: 5px 0;">
+                    <button onclick="customChatExample()" style="width: 100%;">Send Message</button>
+                </div>
+                
+                <!-- Custom TTS Example -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>🔊 Custom Text-to-Speech</h5>
+                    <p>Your own TTS interface:</p>
+                    <textarea id="custom-tts-text" placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
+                    <select id="voice-select" style="width: 100%; margin: 5px 0;">
+                        <option value="alloy">Alloy</option>
+                        <option value="echo">Echo</option>
+                        <option value="fable">Fable</option>
+                        <option value="onyx">Onyx</option>
+                        <option value="nova">Nova</option>
+                        <option value="shimmer">Shimmer</option>
+                    </select>
+                    <button onclick="customTTSExample()" style="width: 100%;">Generate Speech</button>
+                    <div id="custom-tts-result" style="margin: 10px 0;"></div>
+                </div>
+                
+                <!-- Custom File Upload Example - DISABLED: Upload functionality under development -->
+                <div style="border: 2px dashed #ccc; padding: 20px; border-radius: 8px; background: rgba(128, 128, 128, 0.05); opacity: 0.6;">
+                    <h5>📁 Custom File Analysis <span style="color: #999; font-size: 0.8em;">(Under Development)</span></h5>
+                    <p>File upload interface (temporarily disabled):</p>
+                    <input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;" disabled>
+                    <button onclick="alert('File upload feature is under development')" style="width: 100%;" disabled>Analyze File (Coming Soon)</button>
+                    <div id="custom-file-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
+                </div>
+                
+                <!-- Page Analysis Example -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>📖 Custom Page Analysis</h5>
+                    <p>Analyze page content with custom prompts:</p>
+                    <input type="text" id="page-analysis-prompt" placeholder="What would you like to know about this page?" style="width: 100%; margin: 5px 0;">
+                    <button onclick="customPageAnalysis()" style="width: 100%;">Analyze Page</button>
+                    <div id="page-analysis-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
+                </div>
+                
+                <!-- Custom Translation Example -->
+                <div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
+                    <h5>🌐 Custom Translation</h5>
+                    <p>Translate text with code preservation:</p>
+                    <textarea id="custom-translate-text" placeholder="Enter text to translate (try including code like `function test()` or ```code blocks```)" style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
+                    <select id="translate-language" style="width: 100%; margin: 5px 0;">
+                        <option value="es">Spanish</option>
+                        <option value="zh">Chinese (Simplified)</option>
+                        <option value="hi">Hindi</option>
+                        <option value="fr">French</option>
+                        <option value="ar">Arabic</option>
+                        <option value="bn">Bengali</option>
+                        <option value="ru">Russian</option>
+                        <option value="pt">Portuguese</option>
+                        <option value="ur">Urdu</option>
+                        <option value="id">Indonesian</option>
+                        <option value="de">German</option>
+                        <option value="ja">Japanese</option>
+                        <option value="sw">Swahili</option>
+                        <option value="mr">Marathi</option>
+                        <option value="te">Telugu</option>
+                        <option value="tr">Turkish</option>
+                        <option value="zh-tw">Chinese (Traditional)</option>
+                        <option value="ko">Korean</option>
+                    </select>
+                    <button onclick="customTranslateExample()" style="width: 100%;">Translate Text</button>
+                    <div id="custom-translate-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none; white-space: pre-wrap;"></div>
+                </div>
+            </div>
         </section>
 
         <script>
diff --git a/index.html b/index.html
index ee793fd..64c1392 100644
--- a/index.html
+++ b/index.html
@@ -74,74 +74,27 @@
 
         <p>This web client-only solution uses <a href="https://uncloseai.com/uncloseai.js" target="_blank">uncloseai.js</a> to make the browser act as a client, directly interacting with the API without needing an intermediary server. By eliminating the need for a valid API key, the API handles requests on behalf of the browser client, making it efficient and accessible thin client, especially those on battery power like phones & laptops.</p>
 
-        <h3>Install uncloseai.js on any website</h3>
+        <h3>🚀 Quick Start: Install uncloseai.js on any website</h3>
         
-        <p>Add AI capabilities to any static website or web application with just one line of code. uncloseai.js automatically creates a floating "uncloseai." button that provides access to Hermes AI, text-to-speech, file upload, and more.</p>
+        <p>Add AI capabilities to any website with just one line of code. The floating "uncloseai." button appears automatically, providing access to Hermes AI, text-to-speech, translation, and more.</p>
         
-        <h4>Quick Installation</h4>
+        <h4>✨ One-Line Installation</h4>
         <p>Add this script tag to your HTML - that's it! The floating AI button appears automatically:</p>
         <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
         
-        <h4>Configuration Options</h4>
-        <p>To use your CSS framework's styling instead of uncloseai.js custom styles:</p>
-        <pre><code class="javascript">&lt;script&gt;
-    window.UNCLOSEAI_CUSTOM_STYLING = false;
-&lt;/script&gt;</code></pre>
-        
-        <p>To disable the floating button (if you only want the API functions):</p>
-        <pre><code class="javascript">&lt;script&gt;
-    window.UNCLOSEAI_FLOATING_BUTTON = false;
-&lt;/script&gt;</code></pre>
-        
-        <h4>System Message Customization</h4>
-        <p>Customize the AI's behavior by appending additional instructions to the system message:</p>
-        <pre><code class="javascript">&lt;script type="module"&gt;
-    import { setSystemMessageAppend } from './src/config.js';
-    
-    // Add custom instructions
-    setSystemMessageAppend(`
-    You are embedded on a documentation website about CSS frameworks.
-    - Help users understand CSS concepts and provide examples
-    - Reference the current page content when answering
-    - Suggest best practices for responsive design
-    `);
-&lt;/script&gt;</code></pre>
-        
-        <p>The custom text is appended to the base Hermes system message, allowing you to:</p>
-        <ul>
-            <li>Add domain-specific knowledge</li>
-            <li>Provide context about your website/application</li>
-            <li>Set specific behavioral guidelines</li>
-            <li>Include relevant instructions without losing core functionality</li>
-        </ul>
-        
-        <h4>Class-Based Integration</h4>
-        <p>Embed AI features directly into your HTML using CSS classes and data attributes:</p>
-        
-        <p><strong>Full Interface:</strong> Complete AI chat with all features</p>
-        <pre><code class="html">&lt;div class="uncloseai" data-features="full"&gt;&lt;/div&gt;</code></pre>
-        
-        <p><strong>Chat Only:</strong> Just the AI chat interface</p>
-        <pre><code class="html">&lt;div class="uncloseai" data-features="chat"&gt;&lt;/div&gt;</code></pre>
-        
-        <p><strong>Specific Features:</strong> Choose which buttons to include</p>
-        <pre><code class="html">&lt;div class="uncloseai" data-features="tts,translate,read"&gt;&lt;/div&gt;
-&lt;div class="uncloseai" data-features="translate"&gt;&lt;/div&gt;
-&lt;div class="uncloseai" data-features="smart-translate"&gt;&lt;/div&gt;</code></pre>
-        
-        <p><strong>Available Features:</strong> <code>chat</code>, <code>tts</code>, <code>translate</code>, <code>smart-translate</code>, <code>upload</code>, <code>read</code>, <code>full</code></p>
-        
-        <h4>What You Get</h4>
+        <h4>🎯 What You Get</h4>
         <ul>
             <li><strong>🤖 Floating AI Assistant</strong> - Always-accessible "uncloseai." button in bottom right</li>
-            <li><strong>📖 Page-Aware</strong> - Hermes AI understands your page content and generates contextual introductions</li>
+            <li><strong>📖 Page-Aware</strong> - Hermes AI understands your page content and provides contextual help</li>
             <li><strong>🔊 Text-to-Speech</strong> - Convert any text to speech with multiple voice options</li>
-            <li><strong>💾 Conversation History</strong> - Persistent chat history with delete functionality in browser localstorage</li>
-            <li><strong>🌐 Translation</strong> - Pixel perfect HTML DOM translation into 19 languages!</li>
-            <li><strong>🎨 Framework Compatible</strong> - Works with PicoCSS, PureCSS, Bootstrap, and more</li>
+            <li><strong>🌐 Translation</strong> - Translate content into 19 languages with formatting preservation</li>
+            <li><strong>💾 Conversation History</strong> - Persistent chat history stored in browser</li>
+            <li><strong>🎨 Framework Compatible</strong> - Works with any CSS framework</li>
         </ul>
         
-        <p><strong>Live Demo:</strong> <a href="https://ai.unturf.com/demo.html">Try uncloseai.js in action here</a> - see a page with various isolated features working on a real page!</p>
+        <p><strong>🎮 Live Demo & Complete Documentation:</strong> <a href="https://ai.unturf.com/demo.html" style="font-weight: bold; color: #43a047;">See uncloseai.js in action with 12+ integration examples →</a></p>
+        
+        <p>The demo page includes configuration options, embedded widgets, custom implementations, direct API usage, and more advanced features.</p>
 
         <h3>Installing the OpenAI Client</h3>
         <h4>Python</h4>