diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9184e86..7687345 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -4,6 +4,7 @@ import Navbar from './components/Navbar'
 import PortfolioBuilder from './components/PortfolioBuilder'
 import Dashboard from './pages/Dashboard'
 import LandingPage from './pages/LandingPage'
+import LoginPage from './pages/LoginPage'
 import { usePortfolioStore } from './store/portfolio'
 
 function useNexusFavicon() {
@@ -103,17 +104,24 @@ function useNexusFavicon() {
 
 export default function App() {
   const { fromURL } = usePortfolioStore()
+  const [authed, setAuthed] = useState(() => sessionStorage.getItem('qfx-auth') === '1')
   const [inApp, setInApp] = useState(() => sessionStorage.getItem('qfx-v') === '1')
 
   useNexusFavicon()
 
   useEffect(() => { fromURL() }, [])
 
+  function handleLogin() {
+    sessionStorage.setItem('qfx-auth', '1')
+    setAuthed(true)
+  }
+
   function enterApp() {
     sessionStorage.setItem('qfx-v', '1')
     setInApp(true)
   }
 
+  if (!authed) return <LoginPage onLogin={handleLogin} />
   if (!inApp) return <LandingPage onEnter={enterApp}/>
 
   return (
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..eb74a5c
--- /dev/null
+++ b/frontend/src/pages/LoginPage.jsx
@@ -0,0 +1,225 @@
+import { useState } from 'react'
+import { NexusIcon } from '../components/NexusLogo'
+
+const USER = 'mihir.kansara'
+const PASS = 'nexus@2026'
+
+export default function LoginPage({ onLogin }) {
+  const [u, setU] = useState('')
+  const [p, setP] = useState('')
+  const [err, setErr] = useState('')
+  const [shake, setShake] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    setLoading(true)
+    setTimeout(() => {
+      if (u === USER && p === PASS) {
+        onLogin()
+      } else {
+        setErr('Invalid credentials. DM for access.')
+        setShake(true)
+        setTimeout(() => setShake(false), 600)
+      }
+      setLoading(false)
+    }, 800)
+  }
+
+  return (
+    <div style={{
+      minHeight: '100vh', background: '#020817',
+      display: 'flex', flexDirection: 'column',
+      alignItems: 'center', justifyContent: 'center',
+      fontFamily: 'var(--font-mono)',
+      position: 'relative', overflow: 'hidden',
+    }}>
+      <style>{`
+        @keyframes login-glow {
+          0%,100% { box-shadow: 0 0 0 1px rgba(0,200,240,0.2), 0 0 24px rgba(0,200,240,0.05); }
+          50%      { box-shadow: 0 0 0 1px rgba(0,200,240,0.45), 0 0 40px rgba(0,200,240,0.12); }
+        }
+        @keyframes shake {
+          0%,100%{ transform:translateX(0) }
+          20%    { transform:translateX(-8px) }
+          40%    { transform:translateX(8px) }
+          60%    { transform:translateX(-5px) }
+          80%    { transform:translateX(5px) }
+        }
+        @keyframes scanline {
+          0%   { transform: translateY(-100%) }
+          100% { transform: translateY(100vh) }
+        }
+        .login-input {
+          width: 100%;
+          background: rgba(0,200,240,0.04);
+          border: 1px solid rgba(0,200,240,0.2);
+          border-radius: 4px;
+          color: var(--cyan);
+          font-family: var(--font-mono);
+          font-size: 13px;
+          padding: 10px 14px;
+          outline: none;
+          transition: border-color 0.2s, box-shadow 0.2s;
+          letter-spacing: 0.05em;
+          box-sizing: border-box;
+        }
+        .login-input:focus {
+          border-color: rgba(0,200,240,0.6);
+          box-shadow: 0 0 0 2px rgba(0,200,240,0.1);
+        }
+        .login-input::placeholder { color: rgba(0,200,240,0.25); }
+        .login-btn {
+          width: 100%;
+          padding: 11px;
+          background: rgba(0,200,240,0.1);
+          border: 1px solid rgba(0,200,240,0.4);
+          border-radius: 4px;
+          color: var(--cyan);
+          font-family: var(--font-mono);
+          font-size: 12px;
+          font-weight: 700;
+          letter-spacing: 0.18em;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        .login-btn:hover {
+          background: rgba(0,200,240,0.18);
+          border-color: rgba(0,200,240,0.7);
+          box-shadow: 0 0 20px rgba(0,200,240,0.15);
+        }
+        .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      `}</style>
+
+      {/* Scanline effect */}
+      <div style={{
+        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
+        background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px)',
+      }}/>
+
+      {/* Grid bg */}
+      <div style={{
+        position: 'fixed', inset: 0, pointerEvents: 'none', zIndex: 0,
+        backgroundImage: 'linear-gradient(rgba(0,200,240,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,240,0.03) 1px, transparent 1px)',
+        backgroundSize: '40px 40px',
+      }}/>
+
+      {/* Glow orb */}
+      <div style={{
+        position: 'fixed', top: '20%', left: '50%', transform: 'translateX(-50%)',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(0,200,240,0.06) 0%, transparent 70%)',
+        pointerEvents: 'none', zIndex: 0,
+      }}/>
+
+      {/* Login card */}
+      <div style={{
+        position: 'relative', zIndex: 1,
+        width: 380, padding: '40px 36px',
+        background: 'rgba(2,8,23,0.92)',
+        border: '1px solid rgba(0,200,240,0.18)',
+        borderRadius: 8,
+        animation: 'login-glow 3s ease-in-out infinite',
+        ...(shake ? { animation: 'shake 0.5s ease' } : {}),
+      }}>
+
+        {/* Logo */}
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 32, gap: 12 }}>
+          <NexusIcon size={52} />
+          <div style={{ textAlign: 'center' }}>
+            <div style={{
+              fontSize: 20, fontWeight: 800, letterSpacing: '0.25em',
+              color: 'var(--cyan)', lineHeight: 1,
+              textShadow: '0 0 20px rgba(0,200,240,0.6)',
+              animation: 'nx-flicker 9s ease-in-out infinite',
+            }}>NEXUS</div>
+            <div style={{ fontSize: 9, letterSpacing: '0.22em', color: 'var(--text-muted)', marginTop: 4 }}>
+              TERMINAL · RESTRICTED ACCESS
+            </div>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div style={{ borderTop: '1px solid rgba(0,200,240,0.1)', marginBottom: 28 }}/>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+          <div>
+            <div style={{ fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.15em', marginBottom: 6 }}>
+              USER ID
+            </div>
+            <input
+              className="login-input"
+              placeholder="enter username"
+              value={u}
+              onChange={e => { setU(e.target.value); setErr('') }}
+              autoComplete="off"
+              spellCheck={false}
+            />
+          </div>
+          <div>
+            <div style={{ fontSize: 9, color: 'var(--text-muted)', letterSpacing: '0.15em', marginBottom: 6 }}>
+              ACCESS KEY
+            </div>
+            <input
+              className="login-input"
+              type="password"
+              placeholder="enter password"
+              value={p}
+              onChange={e => { setP(e.target.value); setErr('') }}
+            />
+          </div>
+
+          {err && (
+            <div style={{
+              fontSize: 11, color: 'var(--red)', textAlign: 'center',
+              background: 'rgba(239,68,68,0.08)', border: '1px solid rgba(239,68,68,0.2)',
+              borderRadius: 4, padding: '8px 12px', letterSpacing: '0.05em',
+            }}>
+              ⚠ {err}
+            </div>
+          )}
+
+          <button className="login-btn" type="submit" disabled={loading} style={{ marginTop: 4 }}>
+            {loading ? '· · ·' : 'AUTHENTICATE →'}
+          </button>
+        </form>
+
+        {/* DM section */}
+        <div style={{
+          marginTop: 28, paddingTop: 20,
+          borderTop: '1px solid rgba(0,200,240,0.08)',
+          textAlign: 'center',
+        }}>
+          <div style={{ fontSize: 10, color: 'var(--text-muted)', marginBottom: 8, letterSpacing: '0.05em' }}>
+            Don't have credentials?
+          </div>
+          <a
+            href="https://www.linkedin.com/in/mihir-kansara-043275187/"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: 6,
+              fontSize: 11, color: 'var(--cyan)', textDecoration: 'none',
+              background: 'rgba(0,200,240,0.06)',
+              border: '1px solid rgba(0,200,240,0.2)',
+              borderRadius: 4, padding: '7px 14px',
+              letterSpacing: '0.05em', fontWeight: 600,
+              transition: 'all 0.2s',
+            }}
+            onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,200,240,0.12)'}
+            onMouseLeave={e => e.currentTarget.style.background = 'rgba(0,200,240,0.06)'}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="#0A66C2">
+              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+            </svg>
+            DM me on LinkedIn
+          </a>
+          <div style={{ fontSize: 9, color: 'var(--text-ghost)', marginTop: 10, letterSpacing: '0.04em' }}>
+            © 2026 Mihir Kansara · NEXUS TERMINAL
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}