diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 863d633..19e97f4 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -8,134 +8,171 @@ export const Login: React.FC = () => {
     const [cookies, setCookies] = useState('');
     const [error, setError] = useState('');
     const [isConnecting, setIsConnecting] = useState(false);
-    const [connectionStatus, setConnectionStatus] = useState('');
+    const [showBrowserLogin, setShowBrowserLogin] = useState(false);
     const login = useAuthStore((state) => state.login);
     const navigate = useNavigate();
 
     const handleBrowserLogin = async () => {
         setError('');
         setIsConnecting(true);
-        setConnectionStatus('Opening TikTok login...');
 
         try {
             const res = await axios.post(`${API_BASE_URL}/auth/browser-login`);
 
             if (res.data.status === 'success') {
-                setConnectionStatus('Connected! Redirecting...');
                 setTimeout(() => navigate('/'), 1000);
             } else if (res.data.status === 'timeout') {
                 setError(res.data.message);
                 setIsConnecting(false);
             }
         } catch (err: any) {
-            setError(err.response?.data?.detail || 'Failed to connect. Please try manual method.');
+            setError(err.response?.data?.detail || 'Failed to connect. Use the cookie method above.');
             setIsConnecting(false);
         }
     };
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
+        if (!cookies.trim()) return;
+
         setError('');
         try {
             await login(cookies);
             navigate('/');
         } catch (err) {
-            setError('Invalid format or server error. Ensure you paste the full JSON or Netscape text.');
+            setError('Invalid format. Make sure you paste the full cookie JSON.');
         }
     };
 
     return (
-        <div className="flex items-center justify-center min-h-screen bg-black text-white font-sans overflow-hidden relative">
-            {/* Ambient Background Safelight */}
-            <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-pink-500/20 blur-[120px] rounded-full" />
-            <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-violet-500/20 blur-[120px] rounded-full" />
-
-            <div className="w-full max-w-xl p-8 sm:p-12 bg-white/5 backdrop-blur-3xl rounded-[2.5rem] shadow-2xl border border-white/10 z-10 mx-4 relative overflow-hidden">
-                <div className="text-center mb-10 space-y-2">
-                    <h2 className="text-4xl font-black tracking-tight bg-gradient-to-br from-white via-white to-white/40 bg-clip-text text-transparent">
-                        TikTok Clean
-                    </h2>
-                    <p className="text-white/50 text-base font-medium">Your personalized feed, reimagined.</p>
-                </div>
-
-                {/* Primary: Browser Login Button */}
-                <div className="space-y-6 mb-8">
-                    <button
-                        onClick={handleBrowserLogin}
-                        disabled={isConnecting}
-                        className={`group relative w-full py-5 px-8 rounded-2xl transition-all font-black text-lg
-                            ${isConnecting
-                                ? 'bg-gray-800 text-gray-400 cursor-not-allowed'
-                                : 'bg-gradient-to-r from-pink-500 via-red-500 to-orange-500 text-white shadow-[0_0_40px_rgba(236,72,153,0.3)] hover:shadow-[0_0_60px_rgba(236,72,153,0.5)] active:scale-[0.98]'
-                            }`}
-                    >
-                        {isConnecting ? (
-                            <span className="flex items-center justify-center gap-3">
-                                <div className="w-5 h-5 border-2 border-gray-500 border-t-white rounded-full animate-spin" />
-                                {connectionStatus}
-                            </span>
-                        ) : (
-                            <span className="flex items-center justify-center gap-2">
-                                <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
-                                    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
-                                </svg>
-                                Connect with TikTok
-                            </span>
-                        )}
-                    </button>
-
-                    <p className="text-center text-white/30 text-sm">
-                        A browser window will open for you to log in securely.
-                    </p>
-                </div>
-
-                {/* Divider */}
-                <div className="flex items-center gap-4 mb-8">
-                    <div className="flex-1 h-px bg-white/10" />
-                    <span className="text-white/30 text-sm font-medium">or paste manually</span>
-                    <div className="flex-1 h-px bg-white/10" />
-                </div>
-
-                {/* Secondary: Manual Paste */}
-                <form onSubmit={handleSubmit} className="space-y-6">
-                    <div className="space-y-3">
-                        <div className="flex items-center justify-between px-1">
-                            <label className="text-xs font-bold text-white/50 uppercase tracking-widest">
-                                Session Data
-                            </label>
-                            <span className="text-[10px] py-1 px-2 bg-white/10 rounded-md text-white/40 font-mono">JSON / NETSCAPE</span>
-                        </div>
-                        <textarea
-                            className="w-full h-32 p-4 bg-black/40 rounded-xl border border-white/10 focus:border-pink-500/50 focus:ring-4 focus:ring-pink-500/10 focus:outline-none transition-all font-mono text-[11px] leading-relaxed placeholder:text-white/20"
-                            value={cookies}
-                            onChange={(e) => setCookies(e.target.value)}
-                            placeholder='Paste captured JSON here...'
-                        />
+        <div className="min-h-screen bg-gradient-to-br from-gray-950 via-black to-gray-950 flex flex-col">
+            {/* Header */}
+            <div className="flex-shrink-0 pt-12 pb-6 px-6 text-center">
+                <div className="relative inline-block mb-4">
+                    <div className="w-16 h-16 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl rotate-12 absolute -inset-1 blur-lg opacity-50" />
+                    <div className="relative w-16 h-16 bg-gradient-to-r from-cyan-400 to-pink-500 rounded-2xl flex items-center justify-center">
+                        <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" />
+                        </svg>
                     </div>
+                </div>
+                <h1 className="text-2xl font-bold text-white mb-1">PureStream</h1>
+                <p className="text-gray-500 text-sm">Ad-free TikTok viewing</p>
+            </div>
 
+            {/* Scrollable Content */}
+            <div className="flex-1 overflow-y-auto px-5 pb-8">
+                <div className="max-w-sm mx-auto">
                     {error && (
-                        <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3 animate-shake">
-                            <div className="w-1.5 h-1.5 bg-red-500 rounded-full animate-pulse" />
-                            <p className="text-red-400 text-sm font-medium">{error}</p>
+                        <div className="mb-5 p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-400 text-sm text-center">
+                            {error}
                         </div>
                     )}
 
-                    <button
-                        type="submit"
-                        className="w-full py-4 px-6 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all font-bold text-base border border-white/10"
-                    >
-                        Initialize Feed
-                    </button>
-                </form>
+                    {/* How to Login - Step by Step */}
+                    <div className="mb-6">
+                        <h2 className="text-white font-semibold text-lg mb-4 text-center">How to Login</h2>
 
-                {/* Help Section */}
-                <div className="mt-8 pt-6 border-t border-white/5">
-                    <p className="text-center text-white/20 text-xs">
-                        Need help? Install <a href="https://github.com/botzvn/curl-websocket-capture" target="_blank" className="text-white/40 hover:text-white underline">curl-websocket-capture</a> for manual method.
-                    </p>
+                        <div className="space-y-3">
+                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+                                <div className="w-7 h-7 bg-cyan-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">1</div>
+                                <div>
+                                    <p className="text-white text-sm font-medium">Open TikTok in browser</p>
+                                    <p className="text-gray-500 text-xs mt-0.5">Use Chrome/Safari on your phone or computer</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+                                <div className="w-7 h-7 bg-pink-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">2</div>
+                                <div>
+                                    <p className="text-white text-sm font-medium">Export your cookies</p>
+                                    <p className="text-gray-500 text-xs mt-0.5">Use "Cookie-Editor" extension (Chrome/Firefox)</p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start gap-3 p-3 bg-white/5 rounded-xl">
+                                <div className="w-7 h-7 bg-purple-500 rounded-full flex items-center justify-center flex-shrink-0 text-white font-bold text-sm">3</div>
+                                <div>
+                                    <p className="text-white text-sm font-medium">Paste cookies below</p>
+                                    <p className="text-gray-500 text-xs mt-0.5">Copy the JSON and paste it here</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Cookie Input */}
+                    <form onSubmit={handleSubmit}>
+                        <div className="mb-4">
+                            <textarea
+                                value={cookies}
+                                onChange={(e) => setCookies(e.target.value)}
+                                placeholder='Paste your cookie JSON here...'
+                                className="w-full h-32 bg-black/60 border-2 border-white/10 rounded-2xl p-4 text-white text-sm font-mono resize-none focus:outline-none focus:border-cyan-500/50 placeholder:text-gray-600"
+                            />
+                        </div>
+
+                        {/* Connect Button */}
+                        <button
+                            type="submit"
+                            disabled={!cookies.trim()}
+                            className={`w-full py-4 text-white font-semibold rounded-2xl transition-all transform active:scale-[0.98] shadow-lg text-base ${cookies.trim()
+                                    ? 'bg-gradient-to-r from-cyan-500 to-pink-500 hover:from-cyan-400 hover:to-pink-400 shadow-pink-500/20'
+                                    : 'bg-gray-700 cursor-not-allowed'
+                                }`}
+                        >
+                            Connect to TikTok
+                        </button>
+                    </form>
+
+                    {/* Help Link */}
+                    <div className="mt-6 text-center">
+                        <a
+                            href="https://chrome.google.com/webstore/detail/cookie-editor/hlkenndednhfkekhgcdicdfddnkalmdm"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-cyan-400 text-sm underline"
+                        >
+                            Get Cookie-Editor Extension →
+                        </a>
+                    </div>
+
+                    {/* Desktop Browser Login - Hidden by default */}
+                    <div className="mt-8 pt-6 border-t border-white/10">
+                        <button
+                            onClick={() => setShowBrowserLogin(!showBrowserLogin)}
+                            className="w-full text-gray-500 hover:text-gray-400 text-sm py-2 flex items-center justify-center gap-2"
+                        >
+                            <span>{showBrowserLogin ? '▲' : '▼'}</span>
+                            <span>Desktop Browser Login</span>
+                        </button>
+
+                        {showBrowserLogin && (
+                            <div className="mt-3 p-4 bg-white/5 rounded-xl">
+                                <p className="text-gray-400 text-xs text-center mb-3">
+                                    ⚠️ Only works on local machines with a display
+                                </p>
+                                <button
+                                    onClick={handleBrowserLogin}
+                                    disabled={isConnecting}
+                                    className={`w-full py-3 rounded-xl transition-all text-sm ${isConnecting
+                                            ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                                            : 'bg-white/10 hover:bg-white/20 text-white'
+                                        }`}
+                                >
+                                    {isConnecting ? (
+                                        <span className="flex items-center justify-center gap-2">
+                                            <div className="w-4 h-4 border-2 border-gray-500 border-t-white rounded-full animate-spin" />
+                                            Connecting...
+                                        </span>
+                                    ) : (
+                                        'Open TikTok Login Window'
+                                    )}
+                                </button>
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
         </div>
     );
 };
-