diff --git a/clavitor.ai/clavitor.css b/clavitor.ai/clavitor.css
index 1af485f..a9ab36c 100644
--- a/clavitor.ai/clavitor.css
+++ b/clavitor.ai/clavitor.css
@@ -147,6 +147,21 @@ code               { font-size: 0.875em; }
   .nav-dropdown--currency .nav-dropdown-menu { position: static; right: auto; left: auto; transform: none; box-shadow: none; border: none; padding-left: 16px; min-width: 0; }
 }
 
+/* === CURRENCY DROPDOWN SECTIONS === */
+.dropdown-section {
+    padding: 8px 16px;
+    font-size: 11px;
+    color: var(--text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    pointer-events: none;
+}
+.dropdown-divider {
+    border-top: 1px solid var(--border);
+    margin: 8px 0;
+}
+
 /* === BUTTONS === */
 .btn               { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 100ms ease; text-align: center; text-decoration: none; }
 .btn-primary       { background: var(--brand-black); color: #ffffff; border-color: var(--brand-black); }
diff --git a/clavitor.ai/templates/base.tmpl b/clavitor.ai/templates/base.tmpl
index 6218b75..eb07db0 100644
--- a/clavitor.ai/templates/base.tmpl
+++ b/clavitor.ai/templates/base.tmpl
@@ -104,19 +104,20 @@
                 </div>
             </div>
             <a href="/pricing" class="nav-link{{if eq .ActiveNav "pricing"}} active{{end}}">Pricing</a>
-            <div class="nav-dropdown nav-dropdown--locale">
-                <span class="nav-link nav-dropdown-trigger" id="localeTrigger">🌐 EN / $</span>
+            <div class="nav-dropdown nav-dropdown--language">
+                <span class="nav-link nav-dropdown-trigger" id="languageTrigger">🇺🇸 EN</span>
                 <div class="nav-dropdown-menu nav-dropdown-menu--right">
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Language</div>
                     <a href="/" class="nav-dropdown-item active" data-lang="en">🇺🇸 English</a>
                     <a href="/de" class="nav-dropdown-item" data-lang="de">🇩🇪 Deutsch</a>
                     <a href="/fr" class="nav-dropdown-item" data-lang="fr">🇫🇷 Français</a>
-                    <div style="border-top:1px solid var(--border);margin:8px 0;"></div>
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Currency</div>
-                    <a href="#" class="nav-dropdown-item active" data-currency="USD">USD $</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="EUR">EUR €</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="CHF">CHF</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="GBP">GBP £</a>
+                </div>
+            </div>
+            <div class="nav-dropdown nav-dropdown--currency">
+                <span class="nav-link nav-dropdown-trigger" id="currencyTrigger">$ USD</span>
+                <div class="nav-dropdown-menu nav-dropdown-menu--right" id="currencyMenu">
+                    <!-- Currency options loaded dynamically from /api/currencies -->
+                    <a href="#" class="nav-dropdown-item active" data-currency="USD">$ USD</a>
+                    <a href="#" class="nav-dropdown-item" data-currency="EUR">€ EUR</a>
                 </div>
             </div>
             <a href="#" class="nav-link btn btn-ghost">Sign in</a>
@@ -173,61 +174,140 @@
 <script>
 document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
 
-// Locale selector
+// Language selector state management
 (function() {
-    const localeTrigger = document.getElementById('localeTrigger');
-    if (!localeTrigger) return;
-    
-    const dropdown = localeTrigger.parentElement;
+    const langTrigger = document.getElementById('languageTrigger');
+    if (!langTrigger) return;
+
+    const dropdown = langTrigger.closest('.nav-dropdown--language');
     const langItems = dropdown.querySelectorAll('[data-lang]');
-    const currencyItems = dropdown.querySelectorAll('[data-currency]');
-    
-    // Load saved preferences
-    const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
-    const currentLang = saved.lang || 'en';
-    const currentCurrency = saved.currency || 'USD';
-    
-    function updateDisplay() {
-        const lang = dropdown.querySelector('[data-lang].active')?.dataset.lang || currentLang;
-        const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
-        const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
-        localeTrigger.textContent = `${langFlags[lang] || '🌐'} ${lang.toUpperCase()} / ${currency}`;
-    }
-    
-    // Set initial active states
+
+    // Load saved preference
+    const savedLang = localStorage.getItem('preferredLanguage') || 'en';
+    const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
+
+    // Set initial active state
     langItems.forEach(el => {
-        if (el.dataset.lang === currentLang) el.classList.add('active');
-        else el.classList.remove('active');
+        if (el.dataset.lang === savedLang) {
+            el.classList.add('active');
+            langTrigger.textContent = langFlags[savedLang] + ' ' + savedLang.toUpperCase();
+        } else {
+            el.classList.remove('active');
+        }
     });
-    currencyItems.forEach(el => {
-        if (el.dataset.currency === currentCurrency) el.classList.add('active');
-        else el.classList.remove('active');
-    });
-    updateDisplay();
-    
+
     // Handle language selection
     langItems.forEach(el => el.addEventListener('click', (e) => {
         e.preventDefault();
+        const lang = el.dataset.lang;
+        const flag = el.textContent.trim().split(' ')[0];
+
+        langTrigger.textContent = flag + ' ' + lang.toUpperCase();
         langItems.forEach(i => i.classList.remove('active'));
         el.classList.add('active');
-        localStorage.setItem('clavitor-locale', JSON.stringify({ lang: el.dataset.lang, currency: currentCurrency }));
-        updateDisplay();
+        localStorage.setItem('preferredLanguage', lang);
+
         // Navigate to language path
-        if (el.dataset.lang === 'en') window.location.href = '/';
-        else window.location.href = '/' + el.dataset.lang;
-    }));
-    
-    // Handle currency selection
-    currencyItems.forEach(el => el.addEventListener('click', (e) => {
-        e.preventDefault();
-        currencyItems.forEach(i => i.classList.remove('active'));
-        el.classList.add('active');
-        localStorage.setItem('clavitor-locale', JSON.stringify({ lang: currentLang, currency: el.dataset.currency }));
-        updateDisplay();
-        // Refresh page to apply currency (or fetch rates via JS)
-        window.location.reload();
+        if (lang === 'en') window.location.href = '/';
+        else window.location.href = '/' + lang;
     }));
 })();
+
+// Currency selector - fetch from API and render with sections
+(function() {
+    const currencyTrigger = document.getElementById('currencyTrigger');
+    if (!currencyTrigger) return;
+
+    async function loadCurrencies() {
+        const menu = document.getElementById('currencyMenu');
+        if (!menu) return;
+
+        try {
+            const response = await fetch('/api/currencies');
+            if (!response.ok) throw new Error('ERR-CURRENCY-001: Failed to load currencies');
+            const data = await response.json();
+
+            // Clear existing content
+            menu.innerHTML = '';
+
+            // Render "Popular" section
+            if (data.top && data.top.length > 0) {
+                const popularHeader = document.createElement('div');
+                popularHeader.className = 'dropdown-section';
+                popularHeader.textContent = 'Popular';
+                menu.appendChild(popularHeader);
+
+                data.top.forEach(currency => {
+                    const item = createCurrencyItem(currency, currencyTrigger);
+                    menu.appendChild(item);
+                });
+            }
+
+            // Divider between sections
+            if (data.all && data.all.length > 0 && data.top && data.top.length > 0) {
+                const divider = document.createElement('div');
+                divider.className = 'dropdown-divider';
+                menu.appendChild(divider);
+            }
+
+            // Render "All Currencies" section
+            if (data.all && data.all.length > 0) {
+                const allHeader = document.createElement('div');
+                allHeader.className = 'dropdown-section';
+                allHeader.textContent = 'All Currencies';
+                menu.appendChild(allHeader);
+
+                data.all.forEach(currency => {
+                    const item = createCurrencyItem(currency, currencyTrigger);
+                    menu.appendChild(item);
+                });
+            }
+        } catch (err) {
+            // ERR-CURRENCY-002: API unavailable - keep default fallback options
+            console.error('ERR-CURRENCY-002: Currency API unavailable, using defaults');
+        }
+    }
+
+    function createCurrencyItem(currency, trigger) {
+        const item = document.createElement('a');
+        item.href = '#';
+        item.className = 'nav-dropdown-item';
+        item.setAttribute('data-currency', currency.code);
+        item.textContent = (currency.symbol || '$') + ' ' + currency.code;
+
+        // Set active state based on current selection or saved preference
+        const savedCurrency = localStorage.getItem('preferredCurrency') || 'USD';
+        const currentText = trigger.textContent.trim();
+        if (currentText.includes(currency.code) || savedCurrency === currency.code) {
+            item.classList.add('active');
+            if (savedCurrency === currency.code) {
+                trigger.textContent = (currency.symbol || '$') + ' ' + currency.code;
+            }
+        }
+
+        item.addEventListener('click', (e) => {
+            e.preventDefault();
+            const code = item.getAttribute('data-currency');
+            const symbol = currency.symbol || '$';
+            trigger.textContent = symbol + ' ' + code;
+
+            // Update active state
+            document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active'));
+            item.classList.add('active');
+
+            // Store preference
+            localStorage.setItem('preferredCurrency', code);
+
+            // Refresh page to apply currency (or fetch rates via JS)
+            window.location.reload();
+        });
+
+        return item;
+    }
+
+    // Load currencies on page load
+    loadCurrencies();
+})();
 </script>
 </body>
 </html>
diff --git a/clavitor.ai/test-index.html b/clavitor.ai/test-index.html
index fd6845e..1a910a3 100644
--- a/clavitor.ai/test-index.html
+++ b/clavitor.ai/test-index.html
@@ -55,7 +55,8 @@
             </div>
             <div class="nav-dropdown nav-dropdown--currency">
                 <span class="nav-link nav-dropdown-trigger" id="currencyTrigger">$ USD</span>
-                <div class="nav-dropdown-menu nav-dropdown-menu--right">
+                <div class="nav-dropdown-menu nav-dropdown-menu--right" id="currencyMenu">
+                    <!-- Currency options loaded dynamically from /api/currencies -->
                     <a href="#" class="nav-dropdown-item active" data-currency="USD">$ USD</a>
                     <a href="#" class="nav-dropdown-item" data-currency="EUR">€ EUR</a>
                 </div>
@@ -145,17 +146,89 @@ document.querySelectorAll('.nav-dropdown--language .nav-dropdown-item').forEach(
   });
 });
 
-// Currency selector state management
-document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(item => {
-  item.addEventListener('click', (e) => {
-    e.preventDefault();
-    const currency = item.getAttribute('data-currency');
-    const symbol = item.textContent.trim().split(' ')[0];
-    document.getElementById('currencyTrigger').textContent = symbol + ' ' + currency;
-    document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active'));
-    item.classList.add('active');
-  });
-});
+// Currency selector - fetch from API and render with sections
+async function loadCurrencies() {
+    const menu = document.getElementById('currencyMenu');
+    const trigger = document.getElementById('currencyTrigger');
+
+    try {
+        const response = await fetch('/api/currencies');
+        if (!response.ok) throw new Error('ERR-CURRENCY-001: Failed to load currencies');
+        const data = await response.json();
+
+        // Clear existing content
+        menu.innerHTML = '';
+
+        // Render "Popular" section
+        if (data.top && data.top.length > 0) {
+            const popularHeader = document.createElement('div');
+            popularHeader.className = 'dropdown-section';
+            popularHeader.textContent = 'Popular';
+            menu.appendChild(popularHeader);
+
+            data.top.forEach(currency => {
+                const item = createCurrencyItem(currency, trigger);
+                menu.appendChild(item);
+            });
+        }
+
+        // Divider between sections
+        if (data.all && data.all.length > 0 && data.top && data.top.length > 0) {
+            const divider = document.createElement('div');
+            divider.className = 'dropdown-divider';
+            menu.appendChild(divider);
+        }
+
+        // Render "All Currencies" section
+        if (data.all && data.all.length > 0) {
+            const allHeader = document.createElement('div');
+            allHeader.className = 'dropdown-section';
+            allHeader.textContent = 'All Currencies';
+            menu.appendChild(allHeader);
+
+            data.all.forEach(currency => {
+                const item = createCurrencyItem(currency, trigger);
+                menu.appendChild(item);
+            });
+        }
+    } catch (err) {
+        // ERR-CURRENCY-002: API unavailable - keep default fallback options
+        console.error('ERR-CURRENCY-002: Currency API unavailable, using defaults');
+    }
+}
+
+function createCurrencyItem(currency, trigger) {
+    const item = document.createElement('a');
+    item.href = '#';
+    item.className = 'nav-dropdown-item';
+    item.setAttribute('data-currency', currency.code);
+    item.textContent = (currency.symbol || '$') + ' ' + currency.code;
+
+    // Set active state based on current selection
+    const currentText = trigger.textContent.trim();
+    if (currentText.includes(currency.code)) {
+        item.classList.add('active');
+    }
+
+    item.addEventListener('click', (e) => {
+        e.preventDefault();
+        const code = item.getAttribute('data-currency');
+        const symbol = currency.symbol || '$';
+        trigger.textContent = symbol + ' ' + code;
+
+        // Update active state
+        document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active'));
+        item.classList.add('active');
+
+        // Store preference
+        localStorage.setItem('preferredCurrency', code);
+    });
+
+    return item;
+}
+
+// Load currencies on page load
+loadCurrencies();
 </script>
 </body>
 </html>