diff --git a/frontend/app/components/Sidebar.tsx b/frontend/app/components/Sidebar.tsx
index 2c0c015..6de19c7 100644
--- a/frontend/app/components/Sidebar.tsx
+++ b/frontend/app/components/Sidebar.tsx
@@ -18,7 +18,9 @@ export default function Sidebar() {
         return location.pathname.startsWith(path);
     };
 
-    const navItems: Array<{ label: string; path: string; icon: typeof Home; disabled?: boolean }> = [
+    type NavItem = { label: string; path: string; icon: typeof Home; disabled?: boolean };
+
+    const explorerItems: NavItem[] = [
         { label: 'Home Page', path: '/', icon: Home },
         { label: 'Analytics', path: '/analytics', icon: BarChart3 },
         { label: 'Transactions', path: '/txs', icon: ArrowRightLeft },
@@ -30,8 +32,11 @@ export default function Sidebar() {
         { label: 'Scheduled Txs', path: '/scheduled', icon: Clock },
         { label: 'Nodes', path: '/nodes', icon: Globe },
         { label: 'Indexing Status', path: '/stats', icon: Layers },
+    ];
+
+    const developerItems: NavItem[] = [
         { label: 'API Docs', path: '/api-docs', icon: FileText },
-        { label: 'Developer', path: '/developer', icon: Code2 },
+        { label: 'Developer Portal', path: '/developer', icon: Code2 },
     ];
 
     return (
@@ -64,7 +69,7 @@ export default function Sidebar() {
 
                             {/* Nav Items */}
                             <nav className="flex-1 px-3 space-y-1 overflow-y-auto">
-                                {navItems.map((item) => (
+                                {explorerItems.map((item) => (
                                     <Link
                                         key={item.label}
                                         to={item.disabled ? '#' : item.path}
@@ -79,6 +84,28 @@ export default function Sidebar() {
                                         <span className="text-sm font-medium">{item.label}</span>
                                     </Link>
                                 ))}
+
+                                {/* Developer Section */}
+                                <div className="pt-4 mt-4 border-t border-zinc-200 dark:border-white/10">
+                                    <span className="px-4 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-600">Developer</span>
+                                    <div className="mt-2 space-y-1">
+                                        {developerItems.map((item) => (
+                                            <Link
+                                                key={item.label}
+                                                to={item.disabled ? '#' : item.path}
+                                                onClick={(e) => {
+                                                    if (item.disabled) e.preventDefault();
+                                                    else closeMobileMenu();
+                                                }}
+                                                className={`flex items-center space-x-3 px-4 py-3 rounded-sm transition-colors ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-zinc-100 dark:hover:bg-white/5'
+                                                    } ${isActive(item.path) && !item.disabled ? 'text-nothing-green bg-nothing-green/10' : 'text-zinc-600 dark:text-zinc-400'}`}
+                                            >
+                                                <item.icon className="w-5 h-5 shrink-0" />
+                                                <span className="text-sm font-medium">{item.label}</span>
+                                            </Link>
+                                        ))}
+                                    </div>
+                                </div>
                             </nav>
 
                             {/* Footer */}
@@ -125,12 +152,12 @@ export default function Sidebar() {
 
                 {/* Navigation */}
                 <nav className="flex-1 px-4 space-y-2 overflow-y-auto custom-scrollbar overflow-x-hidden">
-                    {navItems.map((item) => (
+                    {explorerItems.map((item) => (
                         <Link
                             key={item.label}
                             to={item.disabled ? '#' : item.path}
                             className={`flex items-center ${isCollapsed ? 'justify-center px-2' : 'space-x-3 px-4'} py-3 rounded-sm transition-all duration-200 group relative
-                                ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-zinc-100 dark:hover:bg-white/5'} 
+                                ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-zinc-100 dark:hover:bg-white/5'}
                                 ${isActive(item.path) && !item.disabled
                                     ? 'bg-nothing-green/10 text-nothing-green border-r-2 border-nothing-green'
                                     : 'text-zinc-600 dark:text-zinc-400'}`}
@@ -146,6 +173,36 @@ export default function Sidebar() {
                             )}
                         </Link>
                     ))}
+
+                    {/* Developer Section */}
+                    <div className={`pt-4 mt-2 border-t border-zinc-200 dark:border-white/10 ${isCollapsed ? '' : ''}`}>
+                        {!isCollapsed && (
+                            <span className="px-4 text-[10px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-600">Developer</span>
+                        )}
+                        <div className={`${isCollapsed ? '' : 'mt-2'} space-y-2`}>
+                            {developerItems.map((item) => (
+                                <Link
+                                    key={item.label}
+                                    to={item.disabled ? '#' : item.path}
+                                    className={`flex items-center ${isCollapsed ? 'justify-center px-2' : 'space-x-3 px-4'} py-3 rounded-sm transition-all duration-200 group relative
+                                        ${item.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-zinc-100 dark:hover:bg-white/5'}
+                                        ${isActive(item.path) && !item.disabled
+                                            ? 'bg-nothing-green/10 text-nothing-green border-r-2 border-nothing-green'
+                                            : 'text-zinc-600 dark:text-zinc-400'}`}
+                                    onClick={(e) => item.disabled && e.preventDefault()}
+                                    title={isCollapsed ? item.label : ''}
+                                >
+                                    <item.icon className={`h-5 w-5 shrink-0 ${isActive(item.path) && !item.disabled ? 'text-nothing-green' : 'text-zinc-500 dark:text-zinc-500 group-hover:text-zinc-900 dark:group-hover:text-zinc-300'}`} />
+
+                                    {!isCollapsed && (
+                                        <span className={`text-sm font-medium tracking-wide whitespace-nowrap ${isActive(item.path) && !item.disabled ? 'text-zinc-900 dark:text-white' : ''}`}>
+                                            {item.label}
+                                        </span>
+                                    )}
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
                 </nav>
 
                 {/* Footer / Controls */}
diff --git a/frontend/app/contexts/AuthContext.tsx b/frontend/app/contexts/AuthContext.tsx
index 64c6593..be24ea8 100644
--- a/frontend/app/contexts/AuthContext.tsx
+++ b/frontend/app/contexts/AuthContext.tsx
@@ -20,6 +20,7 @@ interface AuthContextValue extends AuthState {
   signUp: (email: string, password: string) => Promise<void>;
   signIn: (email: string, password: string) => Promise<void>;
   sendMagicLink: (email: string) => Promise<void>;
+  verifyOtp: (email: string, token: string) => Promise<void>;
   handleCallback: (hash: string) => void;
   signOut: () => void;
 }
@@ -231,6 +232,14 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     await gotruePost('/magiclink', { email });
   }, []);
 
+  const verifyOtp = useCallback(
+    async (email: string, token: string) => {
+      const data = await gotruePost('/verify', { type: 'magiclink', token, redirect_to: '', email });
+      applyTokenResponse(data);
+    },
+    [applyTokenResponse],
+  );
+
   const handleCallback = useCallback(
     (hash: string) => {
       const params = new URLSearchParams(hash.replace(/^#/, ''));
@@ -257,6 +266,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         signUp,
         signIn,
         sendMagicLink,
+        verifyOtp,
         handleCallback,
         signOut,
       }}
diff --git a/frontend/app/routes/developer/login.tsx b/frontend/app/routes/developer/login.tsx
index a2d2ed6..26c1635 100644
--- a/frontend/app/routes/developer/login.tsx
+++ b/frontend/app/routes/developer/login.tsx
@@ -1,25 +1,24 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { motion } from 'framer-motion'
-import { Mail, Lock, ArrowRight, Loader2, Sparkles, UserPlus, LogIn } from 'lucide-react'
+import { Mail, ArrowRight, Loader2, Sparkles, Wallet } from 'lucide-react'
 import { useAuth } from '../../contexts/AuthContext'
 
 export const Route = createFileRoute('/developer/login')({
   component: DeveloperLoginPage,
 })
 
-type AuthMode = 'login' | 'register' | 'magic'
-
 function DeveloperLoginPage() {
-  const { user, loading: authLoading, signIn, signUp, sendMagicLink } = useAuth()
+  const { user, loading: authLoading, sendMagicLink, verifyOtp } = useAuth()
   const navigate = useNavigate()
 
-  const [mode, setMode] = useState<AuthMode>('login')
   const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const [magicLinkSent, setMagicLinkSent] = useState(false)
+  const [otpSent, setOtpSent] = useState(false)
+  const [otp, setOtp] = useState(['', '', '', '', '', ''])
+  const [verifying, setVerifying] = useState(false)
+  const otpRefs = useRef<(HTMLInputElement | null)[]>([])
 
   // Redirect if already logged in
   useEffect(() => {
@@ -28,34 +27,73 @@ function DeveloperLoginPage() {
     }
   }, [authLoading, user, navigate])
 
-  async function handleSubmit(e: React.FormEvent) {
+  async function handleSendLink(e: React.FormEvent) {
     e.preventDefault()
     setError(null)
     setLoading(true)
 
     try {
-      if (mode === 'magic') {
-        await sendMagicLink(email)
-        setMagicLinkSent(true)
-      } else if (mode === 'register') {
-        await signUp(email, password)
-        // After signup, try to sign in (if auto-confirmed)
-        try {
-          await signIn(email, password)
-        } catch {
-          // If sign-in fails, user may need to confirm email
-          setError('Account created. Please check your email to confirm, then sign in.')
-        }
-      } else {
-        await signIn(email, password)
-      }
+      await sendMagicLink(email)
+      setOtpSent(true)
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Authentication failed')
+      setError(err instanceof Error ? err.message : 'Failed to send magic link')
     } finally {
       setLoading(false)
     }
   }
 
+  function handleOtpChange(index: number, value: string) {
+    if (value.length > 1) {
+      // Handle paste of full OTP
+      const digits = value.replace(/\D/g, '').slice(0, 6).split('')
+      const newOtp = [...otp]
+      digits.forEach((d, i) => {
+        if (index + i < 6) newOtp[index + i] = d
+      })
+      setOtp(newOtp)
+      const nextIndex = Math.min(index + digits.length, 5)
+      otpRefs.current[nextIndex]?.focus()
+      // Auto-submit if all filled
+      if (newOtp.every(d => d !== '')) {
+        submitOtp(newOtp.join(''))
+      }
+      return
+    }
+
+    const newOtp = [...otp]
+    newOtp[index] = value.replace(/\D/g, '')
+    setOtp(newOtp)
+
+    if (value && index < 5) {
+      otpRefs.current[index + 1]?.focus()
+    }
+
+    // Auto-submit when all 6 digits entered
+    if (value && newOtp.every(d => d !== '')) {
+      submitOtp(newOtp.join(''))
+    }
+  }
+
+  function handleOtpKeyDown(index: number, e: React.KeyboardEvent) {
+    if (e.key === 'Backspace' && !otp[index] && index > 0) {
+      otpRefs.current[index - 1]?.focus()
+    }
+  }
+
+  async function submitOtp(code: string) {
+    setError(null)
+    setVerifying(true)
+    try {
+      await verifyOtp(email, code)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid code. Please try again.')
+      setOtp(['', '', '', '', '', ''])
+      otpRefs.current[0]?.focus()
+    } finally {
+      setVerifying(false)
+    }
+  }
+
   if (authLoading) {
     return (
       <div className="flex-1 flex items-center justify-center">
@@ -64,8 +102,8 @@ function DeveloperLoginPage() {
     )
   }
 
-  // Magic link sent confirmation
-  if (magicLinkSent) {
+  // OTP verification screen
+  if (otpSent) {
     return (
       <div className="flex-1 flex items-center justify-center p-4">
         <motion.div
@@ -78,34 +116,85 @@ function DeveloperLoginPage() {
               <Mail className="w-8 h-8 text-[#00ef8b]" />
             </div>
             <h2 className="text-xl font-semibold text-white mb-2">Check your email</h2>
-            <p className="text-neutral-400 mb-6">
-              We sent a magic link to <span className="text-white font-medium">{email}</span>.
-              Click the link in the email to sign in.
+            <p className="text-neutral-400 mb-2">
+              We sent a sign-in link and code to
             </p>
-            <button
-              onClick={() => { setMagicLinkSent(false); setMode('login') }}
-              className="text-sm text-[#00ef8b] hover:text-[#00ef8b]/80 transition-colors"
-            >
-              Back to sign in
-            </button>
+            <p className="text-white font-medium mb-6">{email}</p>
+
+            {/* OTP Input */}
+            <p className="text-sm text-neutral-400 mb-4">Enter the 6-digit code:</p>
+
+            {error && (
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                className="mb-4 p-3 rounded-lg bg-red-500/10 border border-red-500/20 text-red-400 text-sm"
+              >
+                {error}
+              </motion.div>
+            )}
+
+            <div className="flex justify-center gap-2 mb-6">
+              {otp.map((digit, i) => (
+                <input
+                  key={i}
+                  ref={el => { otpRefs.current[i] = el }}
+                  type="text"
+                  inputMode="numeric"
+                  maxLength={6}
+                  value={digit}
+                  onChange={e => handleOtpChange(i, e.target.value)}
+                  onKeyDown={e => handleOtpKeyDown(i, e)}
+                  disabled={verifying}
+                  className="w-11 h-13 text-center text-xl font-bold bg-neutral-800 border border-neutral-700 rounded-lg text-[#00ef8b] focus:outline-none focus:border-[#00ef8b]/50 focus:ring-1 focus:ring-[#00ef8b]/20 transition-colors disabled:opacity-50"
+                  autoFocus={i === 0}
+                />
+              ))}
+            </div>
+
+            {verifying && (
+              <div className="flex items-center justify-center gap-2 text-neutral-400 text-sm mb-4">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Verifying...
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <p className="text-xs text-neutral-500">Or click the magic link in your email</p>
+              <div className="flex items-center justify-center gap-4 text-sm">
+                <button
+                  onClick={() => { setOtpSent(false); setOtp(['', '', '', '', '', '']); setError(null) }}
+                  className="text-[#00ef8b] hover:text-[#00ef8b]/80 transition-colors"
+                >
+                  Use a different email
+                </button>
+                <span className="text-neutral-700">|</span>
+                <button
+                  onClick={async () => {
+                    setError(null)
+                    setLoading(true)
+                    try {
+                      await sendMagicLink(email)
+                      setOtp(['', '', '', '', '', ''])
+                    } catch (err) {
+                      setError(err instanceof Error ? err.message : 'Failed to resend')
+                    } finally {
+                      setLoading(false)
+                    }
+                  }}
+                  disabled={loading}
+                  className="text-neutral-400 hover:text-white transition-colors disabled:opacity-50"
+                >
+                  {loading ? 'Sending...' : 'Resend code'}
+                </button>
+              </div>
+            </div>
           </div>
         </motion.div>
       </div>
     )
   }
 
-  const titles: Record<AuthMode, string> = {
-    login: 'Sign in',
-    register: 'Create account',
-    magic: 'Magic link',
-  }
-
-  const descriptions: Record<AuthMode, string> = {
-    login: 'Sign in to your developer portal',
-    register: 'Create a new developer account',
-    magic: 'Sign in with a link sent to your email',
-  }
-
   return (
     <div className="flex-1 flex items-center justify-center p-4">
       <motion.div
@@ -119,8 +208,8 @@ function DeveloperLoginPage() {
             <div className="w-12 h-12 rounded-lg bg-[#00ef8b]/10 flex items-center justify-center mx-auto mb-4">
               <Sparkles className="w-6 h-6 text-[#00ef8b]" />
             </div>
-            <h1 className="text-2xl font-bold text-white">{titles[mode]}</h1>
-            <p className="text-sm text-neutral-400 mt-1">{descriptions[mode]}</p>
+            <h1 className="text-2xl font-bold text-white">Developer Portal</h1>
+            <p className="text-sm text-neutral-400 mt-1">Sign in to manage your webhooks and API keys</p>
           </div>
 
           {/* Error */}
@@ -135,8 +224,7 @@ function DeveloperLoginPage() {
           )}
 
           {/* Form */}
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {/* Email */}
+          <form onSubmit={handleSendLink} className="space-y-4">
             <div>
               <label htmlFor="email" className="block text-sm font-medium text-neutral-300 mb-1.5">
                 Email
@@ -155,32 +243,6 @@ function DeveloperLoginPage() {
               </div>
             </div>
 
-            {/* Password (hidden in magic link mode) */}
-            {mode !== 'magic' && (
-              <motion.div
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: 'auto' }}
-                exit={{ opacity: 0, height: 0 }}
-              >
-                <label htmlFor="password" className="block text-sm font-medium text-neutral-300 mb-1.5">
-                  Password
-                </label>
-                <div className="relative">
-                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-neutral-500" />
-                  <input
-                    id="password"
-                    type="password"
-                    required={mode !== 'magic'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    placeholder="Enter your password"
-                    className="w-full pl-10 pr-4 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-white placeholder:text-neutral-500 focus:outline-none focus:border-[#00ef8b]/50 focus:ring-1 focus:ring-[#00ef8b]/20 transition-colors text-sm"
-                  />
-                </div>
-              </motion.div>
-            )}
-
-            {/* Submit */}
             <button
               type="submit"
               disabled={loading}
@@ -188,71 +250,37 @@ function DeveloperLoginPage() {
             >
               {loading ? (
                 <Loader2 className="w-4 h-4 animate-spin" />
-              ) : mode === 'login' ? (
-                <>
-                  <LogIn className="w-4 h-4" />
-                  Sign in
-                </>
-              ) : mode === 'register' ? (
-                <>
-                  <UserPlus className="w-4 h-4" />
-                  Create account
-                </>
               ) : (
                 <>
-                  <ArrowRight className="w-4 h-4" />
-                  Send magic link
+                  <Mail className="w-4 h-4" />
+                  Continue with Email
                 </>
               )}
             </button>
           </form>
 
-          {/* Mode toggles */}
-          <div className="mt-6 pt-6 border-t border-neutral-800 text-center space-y-2 text-sm">
-            {mode === 'login' && (
-              <>
-                <p className="text-neutral-400">
-                  Don&apos;t have an account?{' '}
-                  <button
-                    onClick={() => { setMode('register'); setError(null) }}
-                    className="text-[#00ef8b] hover:text-[#00ef8b]/80 transition-colors font-medium"
-                  >
-                    Register
-                  </button>
-                </p>
-                <p className="text-neutral-500">
-                  or{' '}
-                  <button
-                    onClick={() => { setMode('magic'); setError(null) }}
-                    className="text-neutral-300 hover:text-white transition-colors"
-                  >
-                    sign in with magic link
-                  </button>
-                </p>
-              </>
-            )}
-            {mode === 'register' && (
-              <p className="text-neutral-400">
-                Already have an account?{' '}
-                <button
-                  onClick={() => { setMode('login'); setError(null) }}
-                  className="text-[#00ef8b] hover:text-[#00ef8b]/80 transition-colors font-medium"
-                >
-                  Sign in
-                </button>
-              </p>
-            )}
-            {mode === 'magic' && (
-              <p className="text-neutral-400">
-                <button
-                  onClick={() => { setMode('login'); setError(null) }}
-                  className="text-[#00ef8b] hover:text-[#00ef8b]/80 transition-colors font-medium"
-                >
-                  Back to sign in
-                </button>
-              </p>
-            )}
+          {/* Divider */}
+          <div className="flex items-center gap-3 my-6">
+            <div className="flex-1 border-t border-neutral-800" />
+            <span className="text-xs text-neutral-500 uppercase tracking-wider">or</span>
+            <div className="flex-1 border-t border-neutral-800" />
           </div>
+
+          {/* Wallet login - coming soon */}
+          <button
+            disabled
+            className="w-full flex items-center justify-center gap-2 py-2.5 bg-neutral-800 border border-neutral-700 text-neutral-500 font-semibold rounded-lg text-sm cursor-not-allowed relative"
+          >
+            <Wallet className="w-4 h-4" />
+            Continue with Wallet
+            <span className="ml-1.5 text-[10px] font-medium uppercase tracking-wider bg-neutral-700 text-neutral-400 px-1.5 py-0.5 rounded">
+              Coming Soon
+            </span>
+          </button>
+
+          <p className="mt-6 text-center text-xs text-neutral-500">
+            We&apos;ll send you a magic link and verification code
+          </p>
         </div>
       </motion.div>
     </div>