diff --git a/extension/background.js b/extension/background.js
index 55f323c..46dca07 100644
--- a/extension/background.js
+++ b/extension/background.js
@@ -1,39 +1,45 @@
 const API_BASE_URL = "https://leetcodeai-backend.onrender.com";
-//const API_BASE_URL = "http://localhost:10000";
-function getUserEmail() {
-    return new Promise(resolve => {
-        chrome.storage.local.get({ userEmail: null }, ({ userEmail }) => resolve(userEmail));
-    });
+
+async function parseApiResponse(response) {
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) {
+        throw new Error(data.detail || data.message || `Request failed with status ${response.status}`);
+    }
+    return data;
 }
 
-function getUserEmail() {
-    return new Promise(resolve => {
-        chrome.storage.local.get({ userEmail: null }, ({ userEmail }) => resolve(userEmail));
-    });
+function authHeaders(userEmail, sessionToken) {
+    return {
+        "Content-Type": "application/json",
+        "X-User-Email": userEmail,
+        "Authorization": `Bearer ${sessionToken}`
+    };
 }
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.type === 'GENERATE_BLOG') {
-        const { title, description, code, author, client_time, custom_prompt, difficulty, topics } = request.payload;
+        const { title, description, code, author, client_time, custom_prompt, difficulty, language, topics } = request.payload;
         chrome.storage.local.get({
             publishingPlatforms: ['devto'],
             publishAsDraft: false,
             userEmail: null,
-        }, async ({ publishingPlatforms, publishAsDraft, userEmail }) => {
-            if (!userEmail) {
-                chrome.runtime.sendMessage({ type: 'STATUS_UPDATE', message: 'Please set your email in the extension settings before publishing.', status: 'error' });
+            sessionToken: null,
+        }, async ({ publishingPlatforms, publishAsDraft, userEmail, sessionToken }) => {
+            if (!userEmail || !sessionToken) {
+                chrome.runtime.sendMessage({ type: 'STATUS_UPDATE', message: 'Please log in before publishing.', status: 'error' });
                 return;
             }
             fetch(`${API_BASE_URL}/generate-blog`, {
                 method: "POST",
-                headers: { "Content-Type": "application/json", "X-User-Email": userEmail },
+                headers: authHeaders(userEmail, sessionToken),
                 body: JSON.stringify({
-                    title, description, code, author, client_time, custom_prompt, difficulty,
+                    title, description, code, author, client_time, custom_prompt, difficulty, language,
                     tags: (topics && topics.length > 0) ? topics : null,
                     platforms: publishingPlatforms,
                     publish_as_draft: publishAsDraft
                 })
             })
-                .then(r => r.json())
+                .then(parseApiResponse)
                 .then(data => {
                     if (data.status === 'success' || data.status === 'partial_success') {
                         const generatedBlog =
@@ -55,15 +61,14 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
                         const platforms = data.data?.platforms || [];
                         const postedPlatforms = platforms
                             .filter(result => result.status === 'success')
-                            .map(result => result.platform)
-                            .join(', ');
+                            .map(result => result.platform);
                         const devtoResult = platforms.find(r => r.platform === 'devto' && r.status === 'success');
                         chrome.storage.local.get({ publishHistory: [] }, (res) => {
                             const entry = {
                                 title: title,
                                 url: devtoResult?.url || null,
                                 publishedAt: client_time || new Date().toISOString(),
-                                platforms: postedPlatforms ? postedPlatforms.split(', ').filter(p => p) : []
+                                platforms: postedPlatforms
                             };
                             const history = res.publishHistory;
                             history.unshift(entry);
@@ -90,7 +95,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
                         fetch(`${API_BASE_URL}/dashboard/record`, {
                             method: "POST",
-                            headers: { "Content-Type": "application/json", "X-User-Email": userEmail },
+                            headers: authHeaders(userEmail, sessionToken),
                             body: JSON.stringify(entry)
                         }).catch(() => { });
                         chrome.runtime.sendMessage({
@@ -127,17 +132,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             publishingPlatforms: ['devto'],
             publishAsDraft: false,
             userEmail: null,
+            sessionToken: null,
             generatedProblemTitle: 'leetcode-blog'
-        }, async ({ publishingPlatforms, publishAsDraft, userEmail, generatedProblemTitle }) => {
-            if (!userEmail) {
-                const errMsg = 'Please set your email in the extension settings before publishing.';
+        }, async ({ publishingPlatforms, publishAsDraft, userEmail, sessionToken, generatedProblemTitle }) => {
+            if (!userEmail || !sessionToken) {
+                const errMsg = 'Please log in before publishing.';
                 chrome.runtime.sendMessage({ type: 'STATUS_UPDATE', message: errMsg, status: 'error' });
                 sendResponse({ success: false, error: errMsg });
                 return;
             }
             fetch(`${API_BASE_URL}/publish-blog`, {
                 method: "POST",
-                headers: { "Content-Type": "application/json", "X-User-Email": userEmail },
+                headers: authHeaders(userEmail, sessionToken),
                 body: JSON.stringify({
                     title: generatedProblemTitle,
                     content: blog,
@@ -146,7 +152,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
                     author: "Anonymous Developer"
                 })
             })
-                .then(r => r.json())
+                .then(parseApiResponse)
                 .then(data => {
                     if (data.status === 'success' || data.status === 'partial_success') {
                         const platforms = data.data?.platforms || [];
@@ -173,7 +179,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 
                         fetch(`${API_BASE_URL}/dashboard/record`, {
                             method: "POST",
-                            headers: { "Content-Type": "application/json", "X-User-Email": userEmail },
+                            headers: authHeaders(userEmail, sessionToken),
                             body: JSON.stringify(entry)
                         }).catch(() => { });
 
@@ -208,4 +214,4 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         });
         return true;
     }
-});
\ No newline at end of file
+});
diff --git a/extension/content.js b/extension/content.js
index eddc3f6..a7fdbca 100644
--- a/extension/content.js
+++ b/extension/content.js
@@ -66,6 +66,12 @@
                 document.querySelector('.ant-select-selection-item');
             const language = langElement ? langElement.innerText.trim().toLowerCase() : "unknown";
 
+            const difficultyElement = document.querySelector('[diff]') ||
+                document.querySelector('div[class*="text-difficulty-"]') ||
+                document.querySelector('span[class*="text-difficulty-"]');
+            const difficulty = difficultyElement
+                ? (difficultyElement.getAttribute('diff') || difficultyElement.innerText || "").trim()
+                : null;
             // Extract topic tags (e.g. Array, Dynamic Programming, Hash Table)
             const tagElements = document.querySelectorAll('a[href*="/tag/"]');
             const topics = Array.from(tagElements)
diff --git a/extension/dashboard.js b/extension/dashboard.js
index 253368e..6b73e6a 100644
--- a/extension/dashboard.js
+++ b/extension/dashboard.js
@@ -1,5 +1,4 @@
-//const API_BASE_URL = "https://leetcodeai-backend.onrender.com";
-const API_BASE_URL = "http://localhost:10000";
+const API_BASE_URL = "https://leetcodeai-backend.onrender.com";
 
 //fixes timezone for IST and all non-UTC users
 function getLocalDateStr(date) {
@@ -10,11 +9,11 @@ function getLocalDateStr(date) {
   return `${year}-${month}-${day}`;
 }
 
-const colors = { devto:'#3b49df', hashnode:'#2962ff', medium:'#00ab6c', webhook:'#f7a01a' };
+const colors = { devto: '#3b49df', hashnode: '#2962ff', medium: '#00ab6c', webhook: '#f7a01a' };
 
 function escapeHTML(str) {
   if (!str) return '';
-  return String(str).replace(/[&<>'"]/g, 
+  return String(str).replace(/[&<>'"]/g,
     tag => ({
       '&': '&amp;',
       '<': '&lt;',
@@ -26,13 +25,13 @@ function escapeHTML(str) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  chrome.storage.local.get({ userEmail: null }, ({ userEmail }) => {
-    if (!userEmail) {
+  chrome.storage.local.get({ userEmail: null, sessionToken: null }, ({ userEmail, sessionToken }) => {
+    if (!userEmail || !sessionToken) {
       showBanner('No email set — open the extension and enter your email first.');
       return;
     }
     setLoading(true);
-    fetchStatsFromBackend(userEmail)
+    fetchStatsFromBackend(userEmail, sessionToken)
       .catch(() => {
         showBanner("Couldn't reach backend — showing local data.");
         return loadFromLocalStorage(userEmail);
@@ -41,9 +40,12 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 
-async function fetchStatsFromBackend(email) {
+async function fetchStatsFromBackend(email, sessionToken) {
   const res = await fetch(`${API_BASE_URL}/dashboard/stats`, {
-    headers: { 'X-User-Email': email }
+    headers: {
+      'X-User-Email': email,
+      'Authorization': `Bearer ${sessionToken}`
+    }
   });
   if (!res.ok) throw new Error('Bad response');
   const { total_posts, platform_counts, week_activity, recent, current_streak } = await res.json();
@@ -60,10 +62,10 @@ async function fetchStatsFromBackend(email) {
   if (Array.isArray(platform_counts)) {
     platform_counts.forEach(item => countsMap[item.name] = item.value);
   } else {
-    countsMap = platform_counts || {}; 
+    countsMap = platform_counts || {};
   }
   renderPlatformBarsFromMap(countsMap);
-  
+
   renderHistory(recent);
 }
 
@@ -95,14 +97,14 @@ function calculateStreakFromWeekMap(weekMap) {
     d.setDate(d.getDate() - i);
     const key = getLocalDateStr(d);
     if (weekMap[key]) streak++;
-    else if (i > 0) break; 
+    else if (i > 0) break;
   }
   return streak;
 }
 
 // --- Render from backend shapes ---
 function renderWeekGridFromMap(weekMap) {
-  const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   const grid = document.getElementById('weekGrid');
   grid.innerHTML = Array.from({ length: 7 }, (_, i) => {
     const d = new Date();
@@ -128,7 +130,7 @@ function renderPlatformBarsFromMap(counts) {
     <div class="platform-bar">
       <span class="platform-name">${escapeHTML(name)}</span>
       <div class="bar-track">
-        <div class="bar-fill" style="width:${(count/max)*100}%;background:${colors[name]||'#f7a01a'}"></div>
+        <div class="bar-fill" style="width:${(count / max) * 100}%;background:${colors[name] || '#f7a01a'}"></div>
       </div>
       <span class="bar-count">${count}</span>
     </div>`).join('');
@@ -151,8 +153,8 @@ function calculateStreak(history) {
   const uniqueDates = [...new Set(history.map(h => getDateStr(h.date)))].sort().reverse();
   let streak = 0;
   for (const dateStr of uniqueDates) {
-    const diff = Math.floor((new Date().setHours(0,0,0,0) - new Date(dateStr)) / 86400000);
-    if (diff === streak) streak++; 
+    const diff = Math.floor((new Date().setHours(0, 0, 0, 0) - new Date(dateStr)) / 86400000);
+    if (diff === streak) streak++;
     else break;
   }
   return streak;
@@ -164,7 +166,7 @@ function countThisWeek(history) {
 }
 
 function renderWeekGrid(history) {
-  const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   const grid = document.getElementById('weekGrid');
   grid.innerHTML = Array.from({ length: 7 }, (_, i) => {
     const d = new Date(); d.setDate(d.getDate() - (6 - i));
@@ -190,13 +192,13 @@ function renderHistory(history) {
     return;
   }
   container.innerHTML = history.slice(0, 10).map(h => {
-    const dateStr = new Date(h.date).toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' });
+    const dateStr = new Date(h.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
     return `<div class="history-item">
       <div>
         <div class="history-title">${escapeHTML(h.title || 'Unknown Problem')}</div>
-        <div class="history-platforms"> ${escapeHTML((h.platforms||[]).join(', ') || 'unknown')}</div>
+        <div class="history-platforms"> ${escapeHTML((h.platforms || []).join(', ') || 'unknown')}</div>
       </div>
       <div class="history-date">${dateStr}</div>
     </div>`;
   }).join('');
-}
\ No newline at end of file
+}
diff --git a/extension/popup.html b/extension/popup.html
index 5c9dbed..dd92330 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -1,607 +1,884 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>LeetLog AI</title>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
     <style>
-        :root {
-            --primary: #f7a01a;
-            --primary-hover: #ffb340;
-            --bg-dark: #0f111a;
-            --bg-glass: rgba(25, 27, 40, 0.6);
-            --border-glass: rgba(255, 255, 255, 0.08);
-            --text: #ffffff;
-            --text-muted: #a0a5b5;
-            --error: #ff4d4d;
-            --success: #00d26a;
-            --warning: #f7a01a;
-        }
-        
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        
-        body { 
-            width: 340px; 
-            padding: 24px; 
-            font-family: 'Inter', sans-serif; 
-            text-align: center;
-            background: var(--bg-dark);
-            color: var(--text);
-            position: relative;
-            overflow-x: hidden;
-        }
+      :root {
+        --primary: #f7a01a;
+        --primary-hover: #ffb340;
+        --bg-dark: #0f111a;
+        --bg-glass: rgba(25, 27, 40, 0.6);
+        --border-glass: rgba(255, 255, 255, 0.08);
+        --text: #ffffff;
+        --text-muted: #a0a5b5;
+        --error: #ff4d4d;
+        --success: #00d26a;
+        --warning: #f7a01a;
+      }
 
-        /* Animated Background Gradients (Zero Lag, Hardware Accelerated) */
-        body::before, body::after {
-            content: '';
-            position: absolute;
-            width: 200px;
-            height: 200px;
-            border-radius: 50%;
-            filter: blur(80px);
-            z-index: -1;
-            opacity: 0.6;
-            animation: pulse 8s infinite alternate;
-            will-change: transform, opacity;
-        }
-        body::before {
-            background: rgba(247, 160, 26, 0.25);
-            top: -50px;
-            left: -50px;
-        }
-        body::after {
-            background: rgba(138, 43, 226, 0.15);
-            bottom: -50px;
-            right: -50px;
-            animation-delay: -4s;
-        }
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
 
-        @keyframes pulse {
-            0% { transform: scale(0.8) translateZ(0); opacity: 0.4; }
-            100% { transform: scale(1.2) translateZ(0); opacity: 0.7; }
-        }
+      body {
+        width: 340px;
+        padding: 24px;
+        font-family: 'Inter', sans-serif;
+        text-align: center;
+        background: var(--bg-dark);
+        color: var(--text);
+        position: relative;
+        overflow: hidden;
+      }
+      body.auth-only {
+        padding: 20px 22px;
+        overflow: hidden;
+      }
 
-        h2 { 
-            font-family: 'Outfit', sans-serif;
-            color: #ffffff; 
-            font-size: 24px; 
-            font-weight: 700; 
-            margin-bottom: 6px;
-            letter-spacing: -0.5px;
-        }
-        
-        p.subtitle { 
-            font-size: 13px; 
-            color: var(--text-muted); 
-            margin-bottom: 24px; 
-            line-height: 1.4;
-        }
-        
-        .input-group {
-            text-align: left;
-            margin-bottom: 20px;
-        }
-        
-        label {
-            display: block;
-            font-family: 'Outfit', sans-serif;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-muted);
-            margin-bottom: 8px;
-            letter-spacing: 0.5px;
-        }
-        
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 12px 14px;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border-glass);
-            border-radius: 12px;
-            color: var(--text);
-            font-size: 13px;
-            font-family: 'Inter', sans-serif;
-            outline: none;
-            transition: all 0.3s ease;
-            resize: vertical;
-            min-height: 70px;
-            backdrop-filter: blur(10px);
-        }
-        
-        textarea:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 3px rgba(247, 160, 26, 0.15);
-            background: rgba(0, 0, 0, 0.4);
-        }
+      /* Animated Background Gradients (Zero Lag, Hardware Accelerated) */
+      body::before,
+      body::after {
+        content: '';
+        position: fixed;
+        pointer-events: none;
+        width: 200px;
+        height: 200px;
+        border-radius: 50%;
+        filter: blur(80px);
+        z-index: -1;
+        opacity: 0.6;
+        animation: pulse 8s infinite alternate;
+        will-change: transform, opacity;
+      }
+      body::before {
+        background: rgba(247, 160, 26, 0.25);
+        top: -50px;
+        left: -50px;
+      }
+      body::after {
+        background: rgba(138, 43, 226, 0.15);
+        bottom: -50px;
+        right: -50px;
+        animation-delay: -4s;
+      }
 
-        textarea::placeholder {
-            color: #606575;
-        }
-        
-        /* Modern Buttons */
-        button { 
-            font-family: 'Outfit', sans-serif;
-            background: linear-gradient(135deg, var(--primary), var(--primary-hover));
-            color: #1a1000; 
-            border: none; 
-            padding: 12px 20px; 
-            font-size: 15px; 
-            cursor: pointer; 
-            border-radius: 12px; 
-            width: 100%; 
-            font-weight: 700;
-            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 4px 15px rgba(247, 160, 26, 0.25);
-            position: relative;
-            overflow: hidden;
-            will-change: transform;
-        }
-        
-        button:hover:not(:disabled) { 
-            transform: translateY(-2px) translateZ(0);
-            box-shadow: 0 6px 20px rgba(247, 160, 26, 0.4);
-        }
-        
-        button:active:not(:disabled) {
-            transform: translateY(1px) translateZ(0);
-        }
-        
-        button:disabled { 
-            background: rgba(255, 255, 255, 0.1); 
-            color: rgba(255, 255, 255, 0.3);
-            cursor: not-allowed; 
-            box-shadow: none;
-        }
-        .spinner {
-            margin-left: 8px;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        .button-group {
-            display: flex;
-            gap: 12px;
-            margin-top: 10px;
-        }
-        
-        #copyBtn {
-            background: rgba(255, 255, 255, 0.05);
-            color: var(--text);
-            border: 1px solid var(--border-glass);
-            box-shadow: none;
-        }
-        #copyBtn:hover:not(:disabled) {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.2);
-        }
-        
-        /* Platform Pills (Replaces basic checkboxes) */
-        .platform-panel {
-            text-align: left;
-            margin-bottom: 24px;
-            padding: 16px;
-            border: 1px solid var(--border-glass);
-            border-radius: 16px;
-            background: var(--bg-glass);
-            backdrop-filter: blur(12px);
-        }
-        
-        .platform-panel legend {
-            font-family: 'Outfit', sans-serif;
-            font-size: 12px;
-            font-weight: 600;
-            color: var(--text-muted);
-            padding: 0 6px;
-            margin-left: -6px;
-        }
-        
-        .platforms-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 10px;
-            margin-top: 12px;
+      @keyframes pulse {
+        0% {
+          transform: scale(0.8) translateZ(0);
+          opacity: 0.4;
         }
-        
-        .platform-pill {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border-glass);
-            border-radius: 10px;
-            font-size: 13px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            user-select: none;
-        }
-        
-        .platform-pill input {
-            display: none;
-        }
-        
-        .platform-pill:has(input:checked) {
-            background: rgba(247, 160, 26, 0.15);
-            border-color: var(--primary);
-            color: var(--primary);
-        }
-        
-        .draft-option {
-            margin-top: 12px;
-            padding-top: 12px;
-            border-top: 1px solid var(--border-glass);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-size: 13px;
-            color: var(--text-muted);
-            cursor: pointer;
-        }
-        /* Custom Checkbox for Draft */
-        .draft-option input {
-            appearance: none;
-            width: 18px;
-            height: 18px;
-            border: 2px solid var(--border-glass);
-            border-radius: 4px;
-            background: rgba(0, 0, 0, 0.2);
-            position: relative;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .draft-option input:checked {
-            background: var(--primary);
-            border-color: var(--primary);
-        }
-        .draft-option input:checked::after {
-            content: '✓';
-            position: absolute;
-            color: #1a1000;
-            font-size: 12px;
-            font-weight: bold;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
+        100% {
+          transform: scale(1.2) translateZ(0);
+          opacity: 0.7;
         }
+      }
 
-        /* Status & Progress */
-        #status { 
-            margin-top: 20px; 
-            font-weight: 500; 
-            font-size: 13px; 
-            color: var(--text-muted);
-            padding: 12px;
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.03);
-            border: 1px solid transparent;
-            min-height: 20px;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(8px);
-        }
-        .error-status { 
-            color: var(--error) !important; 
-            background: rgba(255, 77, 77, 0.1) !important;
-            border-color: rgba(255, 77, 77, 0.2) !important;
-        }
-        .success-status { 
-            color: var(--success) !important; 
-            background: rgba(0, 210, 106, 0.1) !important; 
-            border-color: rgba(0, 210, 106, 0.2) !important;
-        }
-        .warning-status { 
-            color: var(--warning) !important; 
-            background: rgba(247, 160, 26, 0.1) !important; 
-            border-color: rgba(247, 160, 26, 0.2) !important;
-        }
-        
-        #progressContainer {
-            background: var(--bg-glass);
-            padding: 16px;
-            border-radius: 16px;
-            border: 1px solid var(--border-glass);
-            margin-top: 20px;
-            backdrop-filter: blur(12px);
-        }
+      h2 {
+        font-family: 'Outfit', sans-serif;
+        color: #ffffff;
+        font-size: 24px;
+        font-weight: 700;
+        margin-bottom: 6px;
+        letter-spacing: -0.5px;
+      }
 
-        .progress-header {
-            font-size: 12px; 
-            color: var(--text-muted); 
-            margin-bottom: 10px; 
-            display: flex; 
-            justify-content: space-between;
-            font-family: 'Outfit', sans-serif;
-            font-weight: 500;
-        }
-        
-        .progress-track {
-            width: 100%; 
-            background: rgba(0, 0, 0, 0.3); 
-            border-radius: 8px; 
-            height: 6px; 
-            overflow: hidden;
-            position: relative;
-        }
+      p.subtitle {
+        font-size: 13px;
+        color: var(--text-muted);
+        margin-bottom: 24px;
+        line-height: 1.4;
+      }
 
-        #progressBar {
-            width: 0%; 
-            background: linear-gradient(90deg, var(--primary), var(--primary-hover)); 
-            height: 100%; 
-            transition: width 0.1s linear;
-            border-radius: 8px;
-            box-shadow: 0 0 10px rgba(247, 160, 26, 0.5);
-            will-change: width;
-        }
-        
-        #dashboardBtn { 
-            margin-top: 12px;
-            background: transparent;
-            font-size: 14px;
-            padding: 12px;
-            color: var(--text-muted);
-            border: 1px solid var(--border-glass);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-        
-        #dashboardBtn:hover {
-            background: rgba(255, 255, 255, 0.05);
-            color: var(--text);
-            border-color: rgba(255, 255, 255, 0.15);
-        }
-        
-        .footer {
-            margin-top: 24px;
-            font-size: 11px;
-            color: rgba(255, 255, 255, 0.3);
-            font-weight: 500;
-            letter-spacing: 0.5px;
-        }
+      .input-group {
+        text-align: left;
+        margin-bottom: 20px;
+      }
 
-        /* Editor Section */
-        #previewSection {
-            background: var(--bg-glass);
-            padding: 16px;
-            border-radius: 16px;
-            border: 1px solid var(--border-glass);
-            margin-top: 20px;
-            text-align: left;
-        }
+      label {
+        display: block;
+        font-family: 'Outfit', sans-serif;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-muted);
+        margin-bottom: 8px;
+        letter-spacing: 0.5px;
+      }
 
-        #previewSection h3 {
-            font-family: 'Outfit', sans-serif;
-            font-size: 14px;
-            color: #fff;
-            margin-bottom: 12px;
-        }
+      textarea,
+      input[type='text'],
+      input[type='email'],
+      input[type='password'] {
+        width: 100%;
+        padding: 12px 14px;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid var(--border-glass);
+        border-radius: 12px;
+        color: var(--text);
+        font-size: 13px;
+        font-family: 'Inter', sans-serif;
+        outline: none;
+        transition: all 0.3s ease;
+        resize: vertical;
+        min-height: 70px;
+        backdrop-filter: blur(10px);
+      }
 
-        #blogEditor {
-            background: rgba(0, 0, 0, 0.3);
-            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-            font-size: 12px;
-            line-height: 1.5;
-            padding: 12px;
-        }
+      textarea:focus {
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(247, 160, 26, 0.15);
+        background: rgba(0, 0, 0, 0.4);
+      }
 
-        /* Secondary Actions (Exports) */
-        .export-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 8px;
-            margin-top: 12px;
-        }
-        
-        .btn-sm {
-            padding: 8px;
-            font-size: 12px;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 4px;
-        }
-        
-        .btn-blue { background: rgba(45, 126, 247, 0.15); color: #60a5fa; border: 1px solid rgba(45, 126, 247, 0.3); box-shadow: none; }
-        .btn-blue:hover:not(:disabled) { background: rgba(45, 126, 247, 0.25); transform: translateY(-1px); border-color: rgba(45, 126, 247, 0.5); }
-        
-        .btn-green { background: rgba(39, 174, 96, 0.15); color: #4ade80; border: 1px solid rgba(39, 174, 96, 0.3); box-shadow: none; }
-        .btn-green:hover:not(:disabled) { background: rgba(39, 174, 96, 0.25); transform: translateY(-1px); border-color: rgba(39, 174, 96, 0.5); }
-        
-        .btn-red { background: rgba(231, 76, 60, 0.15); color: #f87171; border: 1px solid rgba(231, 76, 60, 0.3); box-shadow: none; }
-        .btn-red:hover:not(:disabled) { background: rgba(231, 76, 60, 0.25); transform: translateY(-1px); border-color: rgba(231, 76, 60, 0.5); }
-
-        .history-item {
-            display: block;
-            padding: 10px 12px;
-            margin-bottom: 8px;
-            border: 1px solid var(--border-glass);
-            border-radius: 12px;
-            font-size: 12px;
-            color: var(--text);
-            text-decoration: none;
-            background: rgba(0, 0, 0, 0.2);
-            transition: all 0.2s;
-            cursor: pointer;
-        }
-        .history-item:hover { background: rgba(247, 160, 26, 0.1); border-color: var(--primary); }
-        .history-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Outfit', sans-serif; color: var(--text); }
-        .history-item-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
-        .history-empty { font-size: 12px; color: var(--text-muted); padding: 12px 0; text-align: center; }
-
-        /* ── Email setup screen ── */
-        #emailSetup {
-            display: none;
-            flex-direction: column;
-            gap: 14px;
-            padding: 10px 0;
-            background: var(--bg-glass);
-            border: 1px solid var(--border-glass);
-            border-radius: 16px;
-            padding: 20px;
-            margin-bottom: 20px;
-            backdrop-filter: blur(12px);
-        }
-        #emailSetup h3 { font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
-        #emailSetup p  { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
-        #emailInput {
-            width: 100%;
-            padding: 12px;
-            background: rgba(0, 0, 0, 0.2);
-            border: 1px solid var(--border-glass);
-            border-radius: 12px;
-            color: var(--text);
-            font-size: 13px;
-            box-sizing: border-box;
-            outline: none;
-            transition: border-color 0.2s;
-            font-family: 'Inter', sans-serif;
-        }
-        #emailInput:focus { border-color: var(--primary); }
-        #emailInput.invalid { border-color: var(--error); }
-        .email-hint { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: -8px; }
- 
-        /* ── User badge shown in main UI ── */
-        #userBadge {
-            display: none;
-            align-items: center;
-            justify-content: space-between;
-            font-size: 12px;
-            color: var(--text-muted);
-            background: rgba(255, 255, 255, 0.05);
-            border: 1px solid var(--border-glass);
-            border-radius: 12px;
-            padding: 8px 12px;
-            margin-bottom: 16px;
-        }
-        #userBadge span { font-weight: 600; color: var(--primary); }
-        #changeEmailBtn {
-            width: auto; padding: 4px 10px; font-size: 11px;
-            background: rgba(255, 255, 255, 0.1); color: var(--text);
-            border: 1px solid var(--border-glass); box-shadow: none;
-            font-weight: 600; border-radius: 6px;
-        }
-        #changeEmailBtn:hover { background: rgba(255, 255, 255, 0.2); }
+      textarea::placeholder {
+        color: #606575;
+      }
+      input:-webkit-autofill,
+      input:-webkit-autofill:hover,
+      input:-webkit-autofill:focus {
+        -webkit-text-fill-color: var(--text);
+        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.2) inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+
+      /* Modern Buttons */
+      button {
+        font-family: 'Outfit', sans-serif;
+        background: linear-gradient(
+          135deg,
+          var(--primary),
+          var(--primary-hover)
+        );
+        color: #1a1000;
+        border: none;
+        padding: 12px 20px;
+        font-size: 15px;
+        cursor: pointer;
+        border-radius: 12px;
+        width: 100%;
+        font-weight: 700;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 4px 15px rgba(247, 160, 26, 0.25);
+        position: relative;
+        overflow: hidden;
+        will-change: transform;
+      }
+
+      button:hover:not(:disabled) {
+        transform: translateY(-2px) translateZ(0);
+        box-shadow: 0 6px 20px rgba(247, 160, 26, 0.4);
+      }
+
+      button:active:not(:disabled) {
+        transform: translateY(1px) translateZ(0);
+      }
+
+      button:disabled {
+        background: rgba(255, 255, 255, 0.1);
+        color: rgba(255, 255, 255, 0.3);
+        cursor: not-allowed;
+        box-shadow: none;
+      }
+      .spinner {
+        margin-left: 8px;
+        animation: spin 1s linear infinite;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .button-group {
+        display: flex;
+        gap: 12px;
+        margin-top: 10px;
+      }
+
+      #copyBtn {
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text);
+        border: 1px solid var(--border-glass);
+        box-shadow: none;
+      }
+      #copyBtn:hover:not(:disabled) {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      /* Platform Pills (Replaces basic checkboxes) */
+      .platform-panel {
+        text-align: left;
+        margin-bottom: 24px;
+        padding: 16px;
+        border: 1px solid var(--border-glass);
+        border-radius: 16px;
+        background: var(--bg-glass);
+        backdrop-filter: blur(12px);
+      }
+
+      .platform-panel legend {
+        font-family: 'Outfit', sans-serif;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--text-muted);
+        padding: 0 6px;
+        margin-left: -6px;
+      }
+
+      .platforms-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+        margin-top: 12px;
+      }
+
+      .platform-pill {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 10px;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid var(--border-glass);
+        border-radius: 10px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        user-select: none;
+      }
+
+      .platform-pill input {
+        display: none;
+      }
+
+      .platform-pill:has(input:checked) {
+        background: rgba(247, 160, 26, 0.15);
+        border-color: var(--primary);
+        color: var(--primary);
+      }
+
+      .draft-option {
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid var(--border-glass);
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 13px;
+        color: var(--text-muted);
+        cursor: pointer;
+      }
+      /* Custom Checkbox for Draft */
+      .draft-option input {
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        border: 2px solid var(--border-glass);
+        border-radius: 4px;
+        background: rgba(0, 0, 0, 0.2);
+        position: relative;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .draft-option input:checked {
+        background: var(--primary);
+        border-color: var(--primary);
+      }
+      .draft-option input:checked::after {
+        content: '✓';
+        position: absolute;
+        color: #1a1000;
+        font-size: 12px;
+        font-weight: bold;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      /* Status & Progress */
+      #status {
+        margin-top: 20px;
+        font-weight: 500;
+        font-size: 13px;
+        color: var(--text-muted);
+        padding: 12px;
+        border-radius: 12px;
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid transparent;
+        min-height: 20px;
+        transition: all 0.3s ease;
+        backdrop-filter: blur(8px);
+      }
+      .error-status {
+        color: var(--error) !important;
+        background: rgba(255, 77, 77, 0.1) !important;
+        border-color: rgba(255, 77, 77, 0.2) !important;
+      }
+      .success-status {
+        color: var(--success) !important;
+        background: rgba(0, 210, 106, 0.1) !important;
+        border-color: rgba(0, 210, 106, 0.2) !important;
+      }
+      .warning-status {
+        color: var(--warning) !important;
+        background: rgba(247, 160, 26, 0.1) !important;
+        border-color: rgba(247, 160, 26, 0.2) !important;
+      }
+
+      #progressContainer {
+        background: var(--bg-glass);
+        padding: 16px;
+        border-radius: 16px;
+        border: 1px solid var(--border-glass);
+        margin-top: 20px;
+        backdrop-filter: blur(12px);
+      }
+
+      .progress-header {
+        font-size: 12px;
+        color: var(--text-muted);
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        font-family: 'Outfit', sans-serif;
+        font-weight: 500;
+      }
+
+      .progress-track {
+        width: 100%;
+        background: rgba(0, 0, 0, 0.3);
+        border-radius: 8px;
+        height: 6px;
+        overflow: hidden;
+        position: relative;
+      }
+
+      #progressBar {
+        width: 0%;
+        background: linear-gradient(
+          90deg,
+          var(--primary),
+          var(--primary-hover)
+        );
+        height: 100%;
+        transition: width 0.1s linear;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(247, 160, 26, 0.5);
+        will-change: width;
+      }
+
+      #dashboardBtn {
+        margin-top: 12px;
+        background: transparent;
+        font-size: 14px;
+        padding: 12px;
+        color: var(--text-muted);
+        border: 1px solid var(--border-glass);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+
+      #dashboardBtn:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text);
+        border-color: rgba(255, 255, 255, 0.15);
+      }
+
+      .footer {
+        margin-top: 24px;
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.3);
+        font-weight: 500;
+        letter-spacing: 0.5px;
+      }
+
+      /* Editor Section */
+      #previewSection {
+        background: var(--bg-glass);
+        padding: 16px;
+        border-radius: 16px;
+        border: 1px solid var(--border-glass);
+        margin-top: 20px;
+        text-align: left;
+      }
+
+      #previewSection h3 {
+        font-family: 'Outfit', sans-serif;
+        font-size: 14px;
+        color: #fff;
+        margin-bottom: 12px;
+      }
+
+      #blogEditor {
+        background: rgba(0, 0, 0, 0.3);
+        font-family:
+          'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        font-size: 12px;
+        line-height: 1.5;
+        padding: 12px;
+      }
+
+      /* Secondary Actions (Exports) */
+      .export-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 8px;
+        margin-top: 12px;
+      }
+
+      .btn-sm {
+        padding: 8px;
+        font-size: 12px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+      }
+
+      .btn-blue {
+        background: rgba(45, 126, 247, 0.15);
+        color: #60a5fa;
+        border: 1px solid rgba(45, 126, 247, 0.3);
+        box-shadow: none;
+      }
+      .btn-blue:hover:not(:disabled) {
+        background: rgba(45, 126, 247, 0.25);
+        transform: translateY(-1px);
+        border-color: rgba(45, 126, 247, 0.5);
+      }
+
+      .btn-green {
+        background: rgba(39, 174, 96, 0.15);
+        color: #4ade80;
+        border: 1px solid rgba(39, 174, 96, 0.3);
+        box-shadow: none;
+      }
+      .btn-green:hover:not(:disabled) {
+        background: rgba(39, 174, 96, 0.25);
+        transform: translateY(-1px);
+        border-color: rgba(39, 174, 96, 0.5);
+      }
+
+      .btn-red {
+        background: rgba(231, 76, 60, 0.15);
+        color: #f87171;
+        border: 1px solid rgba(231, 76, 60, 0.3);
+        box-shadow: none;
+      }
+      .btn-red:hover:not(:disabled) {
+        background: rgba(231, 76, 60, 0.25);
+        transform: translateY(-1px);
+        border-color: rgba(231, 76, 60, 0.5);
+      }
+
+      .history-item {
+        display: block;
+        padding: 10px 12px;
+        margin-bottom: 8px;
+        border: 1px solid var(--border-glass);
+        border-radius: 12px;
+        font-size: 12px;
+        color: var(--text);
+        text-decoration: none;
+        background: rgba(0, 0, 0, 0.2);
+        transition: all 0.2s;
+        cursor: pointer;
+      }
+      .history-item:hover {
+        background: rgba(247, 160, 26, 0.1);
+        border-color: var(--primary);
+      }
+      .history-item-title {
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-family: 'Outfit', sans-serif;
+        color: var(--text);
+      }
+      .history-item-meta {
+        font-size: 11px;
+        color: var(--text-muted);
+        margin-top: 4px;
+      }
+      .history-empty {
+        font-size: 12px;
+        color: var(--text-muted);
+        padding: 12px 0;
+        text-align: center;
+      }
+
+      /* ── Email setup screen ── */
+      #emailSetup {
+        display: none;
+        flex-direction: column;
+        gap: 12px;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
+        border-radius: 16px;
+        padding: 20px;
+        margin-bottom: 0;
+        backdrop-filter: blur(12px);
+      }
+      #emailSetup h3 {
+        font-family: 'Outfit', sans-serif;
+        font-size: 18px;
+        font-weight: 700;
+        color: var(--text);
+        margin: 0;
+      }
+      #emailSetup p {
+        font-size: 13px;
+        color: var(--text-muted);
+        margin: 0;
+        line-height: 1.5;
+      }
+      #emailInput,
+      #passwordInput {
+        width: 100%;
+        padding: 12px;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid var(--border-glass);
+        border-radius: 12px;
+        color: var(--text);
+        font-size: 13px;
+        box-sizing: border-box;
+        min-height: auto;
+        outline: none;
+        transition: border-color 0.2s;
+        font-family: 'Inter', sans-serif;
+      }
+      #emailInput:focus,
+      #passwordInput:focus {
+        border-color: var(--primary);
+      }
+      #emailInput.invalid,
+      #passwordInput.invalid {
+        border-color: var(--error);
+      }
+      .email-hint {
+        font-size: 11px;
+        color: rgba(255, 255, 255, 0.4);
+        margin-top: -8px;
+      }
+      #loginStatus {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        color: var(--error);
+        min-height: 18px;
+      }
+      #loginStatus.info-status {
+        color: var(--primary);
+      }
+      .auth-switch {
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      .auth-switch button {
+        width: auto;
+        padding: 0;
+        background: none;
+        border: none;
+        box-shadow: none;
+        color: var(--primary);
+        font-size: 12px;
+        font-weight: 700;
+      }
+      .auth-switch button:hover:not(:disabled) {
+        transform: none;
+        box-shadow: none;
+        text-decoration: underline;
+      }
+
+      /* ── User badge shown in main UI ── */
+      #userBadge {
+        display: none;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 12px;
+        color: var(--text-muted);
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid var(--border-glass);
+        border-radius: 12px;
+        padding: 8px 12px;
+        margin-bottom: 16px;
+      }
+      #userBadge span {
+        font-weight: 600;
+        color: var(--primary);
+      }
+      #changeEmailBtn {
+        width: auto;
+        padding: 4px 10px;
+        font-size: 11px;
+        background: rgba(255, 255, 255, 0.1);
+        color: var(--text);
+        border: 1px solid var(--border-glass);
+        box-shadow: none;
+        font-weight: 600;
+        border-radius: 6px;
+      }
+      #changeEmailBtn:hover {
+        background: rgba(255, 255, 255, 0.2);
+      }
     </style>
-</head>
-<body>
-        <!-- ── Email setup (shown on first launch) ── -->
+  </head>
+  <body>
+    <!-- ── Email setup (shown on first launch) ── -->
     <div id="emailSetup">
-        <h3>👋 Welcome to LeetLog AI</h3>
-        <p>Enter your email so your stats are saved separately from other users.</p>
-        <input type="email" id="emailInput" placeholder="you@example.com" />
-        <p class="email-hint">Stored locally and only used to identify your data on the backend.</p>
-        <button id="saveEmailBtn">Continue →</button>
+      <h3 id="authTitle">Log in to LeetLog AI</h3>
+      <p id="authDescription">
+        Connect your account so generated blogs publish to the right user
+        profile.
+      </p>
+      <input type="email" id="emailInput" placeholder="you@example.com" />
+      <input type="password" id="passwordInput" placeholder="Password" />
+      <p id="loginStatus" role="status"></p>
+      <button id="saveEmailBtn">Log In</button>
+      <p class="auth-switch">
+        <span id="authSwitchText">New here?</span>
+        <button id="toggleAuthMode" type="button">Create an account</button>
+      </p>
     </div>
- 
+
     <!-- ── User badge (shown in main UI) ── -->
     <div id="userBadge">
-        Logged in as <span id="userEmailDisplay">—</span>
-        <button id="changeEmailBtn">Change</button>
+      Logged in as <span id="userEmailDisplay">—</span>
+      <button id="changeEmailBtn">Log out</button>
     </div>
 
     <h2>LeetLog AI</h2>
-    <p class="subtitle">Generate & publish stunning LeetCode blogs instantly.</p>
-    
+    <p class="subtitle">
+      Generate & publish stunning LeetCode blogs instantly.
+    </p>
+
     <div class="input-group">
-        <label for="customPrompt">Custom Prompt (Optional)</label>
-        <textarea id="customPrompt" placeholder="e.g. Make it more humorous, explain time complexity in detail..."></textarea>
+      <label for="customPrompt">Custom Prompt (Optional)</label>
+      <textarea
+        id="customPrompt"
+        placeholder="e.g. Make it more humorous, explain time complexity in detail..."
+      ></textarea>
     </div>
 
     <fieldset class="platform-panel">
-        <legend>Publish Destinations</legend>
-        <div class="platforms-grid">
-            <label class="platform-pill">
-                <input type="checkbox" name="platform" value="devto" checked>
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.53.9.2.4.2 1.48.2 2.9v1.9c0 1.25-.03 1.57-.28 2.07zm5.55-1.93h-2.31v1.17h2.46v1.54h-4.2V8.53h4.08v1.51h-2.29v1.18h2.26v1.15zm5.52-5.4l-1.48 4.79c-.82 2.65-1.52 4.8-1.56 4.78-.05-.03-.76-2.24-1.58-4.9l-1.5-4.83h1.8l.84 2.87c.46 1.57.86 2.94.88 3.03.03-.09.43-1.46.88-3.05l.84-2.85h1.89z"/></svg>
-                Dev.to
-            </label>
-            <label class="platform-pill">
-                <input type="checkbox" name="platform" value="hashnode">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M22.351 8.019l-6.37-6.37a5.63 5.63 0 0 0-7.962 0l-6.37 6.37a5.63 5.63 0 0 0 0 7.962l6.37 6.37a5.63 5.63 0 0 0 7.962 0l6.37-6.37a5.63 5.63 0 0 0 0-7.962zM12 15.953a3.953 3.953 0 1 1 0-7.906 3.953 3.953 0 0 1 0 7.906z"/></svg>
-                Hashnode
-            </label>
-            <label class="platform-pill">
-                <input type="checkbox" name="platform" value="medium">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M6.772 11.977c0 3.125-2.28 5.658-5.093 5.658S0 15.102 0 11.977 2.279 6.319 5.093 6.319s5.093 2.533 5.093 5.658zm5.286 0c0 3.023-1.127 5.474-2.518 5.474s-2.518-2.451-2.518-5.474 1.127-5.474 2.518-5.474 2.518 2.45 2.518 5.474zm2.493 0c0 2.7-.482 4.887-1.077 4.887s-1.076-2.187-1.076-4.887.482-4.887 1.076-4.887 1.077 2.187 1.077 4.887z"/></svg>
-                Medium
-            </label>
-            <label class="platform-pill">
-                <input type="checkbox" name="platform" value="webhook">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
-                Webhook
-            </label>
-        </div>
-        <label class="draft-option">
-            <input type="checkbox" id="draftMode">
-            Publish as draft
+      <legend>Publish Destinations</legend>
+      <div class="platforms-grid">
+        <label class="platform-pill">
+          <input type="checkbox" name="platform" value="devto" checked />
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.53.9.2.4.2 1.48.2 2.9v1.9c0 1.25-.03 1.57-.28 2.07zm5.55-1.93h-2.31v1.17h2.46v1.54h-4.2V8.53h4.08v1.51h-2.29v1.18h2.26v1.15zm5.52-5.4l-1.48 4.79c-.82 2.65-1.52 4.8-1.56 4.78-.05-.03-.76-2.24-1.58-4.9l-1.5-4.83h1.8l.84 2.87c.46 1.57.86 2.94.88 3.03.03-.09.43-1.46.88-3.05l.84-2.85h1.89z"
+            />
+          </svg>
+          Dev.to
+        </label>
+        <label class="platform-pill">
+          <input type="checkbox" name="platform" value="hashnode" />
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M22.351 8.019l-6.37-6.37a5.63 5.63 0 0 0-7.962 0l-6.37 6.37a5.63 5.63 0 0 0 0 7.962l6.37 6.37a5.63 5.63 0 0 0 7.962 0l6.37-6.37a5.63 5.63 0 0 0 0-7.962zM12 15.953a3.953 3.953 0 1 1 0-7.906 3.953 3.953 0 0 1 0 7.906z"
+            />
+          </svg>
+          Hashnode
+        </label>
+        <label class="platform-pill">
+          <input type="checkbox" name="platform" value="medium" />
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+            <path
+              d="M6.772 11.977c0 3.125-2.28 5.658-5.093 5.658S0 15.102 0 11.977 2.279 6.319 5.093 6.319s5.093 2.533 5.093 5.658zm5.286 0c0 3.023-1.127 5.474-2.518 5.474s-2.518-2.451-2.518-5.474 1.127-5.474 2.518-5.474 2.518 2.45 2.518 5.474zm2.493 0c0 2.7-.482 4.887-1.077 4.887s-1.076-2.187-1.076-4.887.482-4.887 1.076-4.887 1.077 2.187 1.077 4.887z"
+            />
+          </svg>
+          Medium
         </label>
+        <label class="platform-pill">
+          <input type="checkbox" name="platform" value="webhook" />
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
+            ></path>
+            <path
+              d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
+            ></path>
+          </svg>
+          Webhook
+        </label>
+      </div>
+      <label class="draft-option">
+        <input type="checkbox" id="draftMode" />
+        Publish as draft
+      </label>
     </fieldset>
-    
-<div class="button-group">
-    <button id="generate-blog-btn" class="btn-primary">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: text-bottom; margin-right: 4px;">
-            <path d="M12 20h9"></path>
-            <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+
+    <div class="button-group">
+      <button id="generate-blog-btn" class="btn-primary">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="vertical-align: text-bottom; margin-right: 4px"
+        >
+          <path d="M12 20h9"></path>
+          <path
+            d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"
+          ></path>
         </svg>
         <span id="btn-text">Generate Blog</span>
-        <span id="btn-spinner" class="spinner" style="display: none; margin-left: 4px;">⏳</span>
-    </button>
-    <button id="copyBtn">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: text-bottom; margin-right: 4px;">
-            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        <span
+          id="btn-spinner"
+          class="spinner"
+          style="display: none; margin-left: 4px"
+          >⏳</span
+        >
+      </button>
+      <button id="copyBtn">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="vertical-align: text-bottom; margin-right: 4px"
+        >
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path
+            d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
+          ></path>
         </svg>
         Copy
-    </button>
-</div>
+      </button>
+    </div>
 
     <!-- Hidden Sections -->
-    <div id="previewSection" style="display:none;">
-        <h3>Preview & Edit Blog</h3>
-        <textarea id="blogEditor"></textarea>
-        <div class="button-group" style="margin-top:12px;">
-            <button id="publishBtn" class="btn-green" style="color: #fff; border: none; background: #27ae60;">Publish</button>
-            <button id="cancelPreviewBtn" class="btn-red" style="color: #fff; border: none; background: #e74c3c;">Cancel</button>
-        </div>
+    <div id="previewSection" style="display: none">
+      <h3>Preview & Edit Blog</h3>
+      <textarea id="blogEditor"></textarea>
+      <div class="button-group" style="margin-top: 12px">
+        <button
+          id="publishBtn"
+          class="btn-green"
+          style="color: #fff; border: none; background: #27ae60"
+        >
+          Publish
+        </button>
+        <button
+          id="cancelPreviewBtn"
+          class="btn-red"
+          style="color: #fff; border: none; background: #e74c3c"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
 
-    <div id="exportSection" style="display:none;" class="export-grid">
-        <button id="exportMarkdownBtn" class="btn-sm btn-blue">MD</button>
-        <button id="exportHTMLBtn" class="btn-sm btn-green">HTML</button>
-        <button id="exportPDFBtn" class="btn-sm btn-red">PDF</button>
+    <div id="exportSection" style="display: none" class="export-grid">
+      <button id="exportMarkdownBtn" class="btn-sm btn-blue">MD</button>
+      <button id="exportHTMLBtn" class="btn-sm btn-green">HTML</button>
+      <button id="exportPDFBtn" class="btn-sm btn-red">PDF</button>
     </div>
-    
-    <div id="progressContainer" style="display:none;">
-        <div class="progress-header">
-            <span id="progressText">Generating AI Magic...</span>
-            <span id="timeLeft" style="color: var(--primary);">~15s</span>
-        </div>
-        <div class="progress-track">
-            <div id="progressBar"></div>
-        </div>
+
+    <div id="progressContainer" style="display: none">
+      <div class="progress-header">
+        <span id="progressText">Generating AI Magic...</span>
+        <span id="timeLeft" style="color: var(--primary)">~15s</span>
+      </div>
+      <div class="progress-track">
+        <div id="progressBar"></div>
+      </div>
     </div>
-    
+
     <div id="status">Ready to blog! 🚀</div>
-    <details id="historySection" style="margin-top:20px; text-align:left; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 16px; padding: 12px; backdrop-filter: blur(12px);">
-        <summary style="cursor:pointer; font-size:12px; font-weight:600; text-transform:uppercase; color:var(--text-muted); padding:4px 0; user-select:none; font-family: 'Outfit', sans-serif;">📋 Recent Posts</summary>
-        <div id="historyList" style="margin-top:12px; max-height:160px; overflow-y:auto; padding-right: 4px;"></div>
+    <details
+      id="historySection"
+      style="
+        margin-top: 20px;
+        text-align: left;
+        background: var(--bg-glass);
+        border: 1px solid var(--border-glass);
+        border-radius: 16px;
+        padding: 12px;
+        backdrop-filter: blur(12px);
+      "
+    >
+      <summary
+        style="
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+          text-transform: uppercase;
+          color: var(--text-muted);
+          padding: 4px 0;
+          user-select: none;
+          font-family: 'Outfit', sans-serif;
+        "
+      >
+        📋 Recent Posts
+      </summary>
+      <div
+        id="historyList"
+        style="
+          margin-top: 12px;
+          max-height: 160px;
+          overflow-y: auto;
+          padding-right: 4px;
+        "
+      ></div>
     </details>
 
     <button id="dashboardBtn">
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: text-bottom; margin-right: 4px;"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></svg>
-        View Dashboard
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        style="vertical-align: text-bottom; margin-right: 4px"
+      >
+        <path d="M3 3v18h18" />
+        <path d="M18 17V9" />
+        <path d="M13 17V5" />
+        <path d="M8 17v-3" />
+      </svg>
+      View Dashboard
     </button>
-    <div class="footer">
-        Powered by AI & LeetLog
-    </div>
-    
+    <div class="footer">Powered by AI & LeetLog</div>
+
     <script src="html2pdf.bundle.min.js"></script>
     <script src="popup.js"></script>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/extension/popup.js b/extension/popup.js
index cdc0555..17b217d 100644
--- a/extension/popup.js
+++ b/extension/popup.js
@@ -1,52 +1,146 @@
 // ── Email setup ──────────────────────────────────────────────
-const MAIN_IDS = ['generateBtn','copyBtn','customPrompt',
-    '.input-group','.platform-panel','#exportSection',
-    '#previewSection','#progressContainer','#status','#dashboardBtn',
-    '.footer','h2','p'];
+const API_BASE_URL = "https://leetcodeai-backend.onrender.com";
+
+const MAIN_IDS = ['generate-blog-btn', 'copyBtn', 'customPrompt',
+    '.input-group', '.platform-panel', '#exportSection',
+    '#previewSection', '#progressContainer', '#status', '#dashboardBtn', '#historySection',
+    '.footer', 'h2', 'p'];
+let authMode = 'login';
+
+function setAuthStatus(message, type = 'error') {
+    const loginStatus = document.getElementById('loginStatus');
+    loginStatus.textContent = message;
+    loginStatus.className = type === 'info' ? 'info-status' : '';
+}
+
+function setAuthMode(mode) {
+    authMode = mode;
+    const isSignup = authMode === 'signup';
+    document.getElementById('authTitle').textContent = isSignup ? 'Create your LeetLog AI account' : 'Log in to LeetLog AI';
+    document.getElementById('authDescription').textContent = isSignup
+        ? 'Create an account to keep your generated blogs tied to your profile.'
+        : 'Connect your account so generated blogs publish to the right user profile.';
+    document.getElementById('saveEmailBtn').textContent = isSignup ? 'Sign Up' : 'Log In';
+    document.getElementById('authSwitchText').textContent = isSignup ? 'Already have an account?' : 'New here?';
+    document.getElementById('toggleAuthMode').textContent = isSignup ? 'Log in' : 'Create an account';
+    setAuthStatus('', 'error');
+}
 
 function showEmailSetup() {
+    document.body.classList.add('auth-only');
+    setAuthMode(authMode);
     document.getElementById('emailSetup').style.display = 'flex';
     document.getElementById('userBadge').style.display = 'none';
+    document.getElementById('passwordInput').value = '';
+    setAuthStatus('', 'error');
     // hide main content while setup is shown
-    ['generateBtn','copyBtn','dashboardBtn'].forEach(id => {
+    ['generate-blog-btn', 'copyBtn', 'dashboardBtn'].forEach(id => {
         const el = document.getElementById(id);
         if (el) el.style.display = 'none';
     });
     document.querySelectorAll('.input-group, .platform-panel, .button-group, .footer, #status, #exportSection, #previewSection, #progressContainer, h2, body > p')
         .forEach(el => el.style.display = 'none');
+    const historySection = document.getElementById('historySection');
+    if (historySection) historySection.style.display = 'none';
 }
 
 function showMainUI(email) {
+    document.body.classList.remove('auth-only');
     document.getElementById('emailSetup').style.display = 'none';
     const badge = document.getElementById('userBadge');
     badge.style.display = 'flex';
     document.getElementById('userEmailDisplay').textContent = email;
     // restore main content
-    ['generateBtn','copyBtn','dashboardBtn'].forEach(id => {
+    ['generate-blog-btn', 'copyBtn', 'dashboardBtn'].forEach(id => {
         const el = document.getElementById(id);
         if (el) el.style.display = '';
     });
     document.querySelectorAll('.input-group, .platform-panel, .button-group, .footer, #status, h2, body > p')
         .forEach(el => el.style.display = '');
+    const historySection = document.getElementById('historySection');
+    if (historySection) historySection.style.display = '';
 }
 
-document.getElementById('saveEmailBtn').addEventListener('click', () => {
+document.getElementById('saveEmailBtn').addEventListener('click', async () => {
     const input = document.getElementById('emailInput');
+    const passwordInput = document.getElementById('passwordInput');
+    const loginBtn = document.getElementById('saveEmailBtn');
     const email = input.value.trim();
+    const password = passwordInput.value;
+    setAuthStatus('', 'error');
+
     if (!email || !email.includes('@')) {
         input.classList.add('invalid');
         return;
     }
     input.classList.remove('invalid');
-    chrome.storage.local.set({ userEmail: email }, () => showMainUI(email));
+
+    if (!password) {
+        passwordInput.classList.add('invalid');
+        return;
+    }
+    passwordInput.classList.remove('invalid');
+
+    loginBtn.disabled = true;
+    loginBtn.textContent = authMode === 'signup' ? 'Signing up...' : 'Logging in...';
+
+    try {
+        const endpoint = authMode === 'signup' ? 'register' : 'login';
+        const response = await fetch(`${API_BASE_URL}/auth/${endpoint}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ email, password })
+        });
+        const data = await response.json().catch(() => ({}));
+
+        if (!response.ok || !data.token || !data.user) {
+            const rawMessage = data.detail || data.message || '';
+            if (response.status === 401 && authMode === 'login') {
+                setAuthMode('signup');
+                setAuthStatus('No account found with these details. Create an account below.', 'info');
+                return;
+            }
+            if (response.status === 409 && authMode === 'signup') {
+                setAuthMode('login');
+                setAuthStatus('Account already exists. Log in instead.', 'info');
+                return;
+            }
+            if (/database|mongodb/i.test(rawMessage)) {
+                throw new Error('Login service is temporarily unavailable. Please try again later.');
+            }
+            if (response.status === 400 && /password/i.test(rawMessage)) {
+                throw new Error(rawMessage);
+            }
+            throw new Error(rawMessage || `${authMode === 'signup' ? 'Sign up' : 'Login'} failed. Please try again.`);
+        }
+
+        chrome.storage.local.set({
+            userEmail: data.user.email,
+            userId: data.user.id,
+            sessionToken: data.token
+        }, () => showMainUI(data.user.email));
+    } catch (error) {
+        setAuthStatus(error.message);
+    } finally {
+        loginBtn.disabled = false;
+        loginBtn.textContent = authMode === 'signup' ? 'Sign Up' : 'Log In';
+    }
+});
+
+document.getElementById('toggleAuthMode').addEventListener('click', () => {
+    setAuthMode(authMode === 'login' ? 'signup' : 'login');
+});
+
+document.getElementById('emailInput').addEventListener('input', function () {
+    this.classList.remove('invalid');
 });
 
-document.getElementById('emailInput').addEventListener('input', function() {
+document.getElementById('passwordInput').addEventListener('input', function () {
     this.classList.remove('invalid');
 });
 
 document.getElementById('changeEmailBtn').addEventListener('click', () => {
-    chrome.storage.local.remove('userEmail', showEmailSetup);
+    chrome.storage.local.remove(['userEmail', 'userId', 'sessionToken'], showEmailSetup);
 });
 // ─────────────────────────────────────────────────────────────
 
@@ -58,7 +152,7 @@ let progressInterval;
 let generationTimeout;
 
 function resetGenerationUI() {
-    const btn = document.getElementById("generateBtn");
+    const btn = document.getElementById("generate-blog-btn");
     const progressContainer = document.getElementById("progressContainer");
     const copyBtn = document.getElementById('copyBtn');
 
@@ -188,8 +282,8 @@ async function copyBlogToClipboard() {
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Check email on every open
-    chrome.storage.local.get({ userEmail: null }, ({ userEmail }) => {
-        if (userEmail) showMainUI(userEmail);
+    chrome.storage.local.get({ userEmail: null, sessionToken: null }, ({ userEmail, sessionToken }) => {
+        if (userEmail && sessionToken) showMainUI(userEmail);
         else showEmailSetup();
     });
 
@@ -437,7 +531,7 @@ chrome.runtime.onMessage.addListener((request) => {
 chrome.runtime.onMessage.addListener((request) => {
 
     const statusEl = document.getElementById('status');
-    const btn = document.getElementById('generateBtn');
+    const btn = document.getElementById('generate-blog-btn');
     const copyBtn = document.getElementById('copyBtn');
 
     if (request.type === 'STATUS_UPDATE') {
@@ -453,7 +547,6 @@ chrome.runtime.onMessage.addListener((request) => {
             statusEl.innerText = request.message || "Successfully posted";
             statusEl.className = "success-status";
             btn.disabled = false;
-            btn.innerText = "Generate Blog";
             btn.style.cursor = "pointer";
 
         } else if (request.status === 'error') {
@@ -462,7 +555,6 @@ chrome.runtime.onMessage.addListener((request) => {
 
             statusEl.className = "error-status";
             btn.disabled = false;
-            btn.innerText = "Generate Blog";
             btn.style.cursor = "pointer";
 
         } else if (request.status === 'warning') {
@@ -471,7 +563,6 @@ chrome.runtime.onMessage.addListener((request) => {
 
             statusEl.className = "warning-status";
             btn.disabled = false;
-            btn.innerText = "Generate Blog";
             btn.style.cursor = "pointer";
         }
 
@@ -556,4 +647,4 @@ const copyBtn = document.getElementById('copyBtn');
 if (copyBtn) {
     copyBtn.addEventListener('click', copyBlogToClipboard);
 }
-// =================================================
\ No newline at end of file
+// =================================================