diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index fe87173..c118213 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -248,206 +248,270 @@ export const LoginPage: React.FC = () => {
   const RIT_BLUE_HOVER = 'hover:bg-[#003366]';
 
   return (
-    <div className="min-h-screen w-full bg-slate-50 flex items-center justify-center font-sans p-6 overflow-x-hidden relative">
+    <div className="min-h-screen w-full bg-white flex font-sans overflow-x-hidden relative">
       
-      {/* Background radial accent */}
-      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-brand-glow rounded-full blur-[120px] opacity-40 pointer-events-none -z-10" />
-      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-indigo-50 rounded-full blur-[120px] opacity-40 pointer-events-none -z-10" />
+      {/* Left Column: Branding (hidden on mobile, 55% width on desktop) */}
+      <div className="hidden lg:flex lg:w-[55%] bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D] text-white flex-col justify-between p-16 relative overflow-hidden">
+        {/* Abstract vector backgrounds for a premium institutional feel */}
+        <div className="absolute inset-0 pointer-events-none opacity-20">
+          <div className="absolute -top-[20%] -left-[10%] w-[700px] h-[700px] rounded-full border border-white/10" />
+          <div className="absolute -bottom-[30%] -right-[10%] w-[800px] h-[800px] rounded-full border border-white/10" />
+          <div className="absolute top-[20%] right-[10%] w-[300px] h-[300px] rounded-full bg-white/5 blur-[50px]" />
+        </div>
 
-      <AnimatePresence mode="wait">
-        {!isSignUp ? (
-          // ----------------------------------------------------
-          // CENTRALIZED SIGN IN
-          // ----------------------------------------------------
-          <motion.div
-            key="login-pane"
-            initial={{ opacity: 0, scale: 0.95, y: 10 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: -10 }}
-            transition={{ duration: 0.4 }}
-            className="w-full max-w-md bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-10 flex flex-col items-center relative overflow-hidden"
-          >
-            <div className="w-full text-center mb-8">
-              <img src={ritLogo} alt="RIT Logo" className="h-16 w-auto mx-auto mb-6 object-contain" />
-              <h2 className="text-3xl font-black text-slate-900 tracking-tight flex items-center justify-center gap-1.5 uppercase">
-                RIT EVENT HUB
-              </h2>
-              <p className="text-slate-400 text-xs font-bold uppercase tracking-widest mt-1">Centralized Portal Login</p>
-            </div>
+        {/* Top: Brand Header */}
+        <div className="flex items-center gap-4 z-10">
+          <img src={ritLogo} alt="RIT Logo" className="h-12 w-auto object-contain bg-white/95 p-2 rounded-xl" />
+          <div>
+            <h3 className="text-base font-black tracking-wide leading-none">RAJALAKSHMI</h3>
+            <span className="text-[9px] font-bold text-slate-300 uppercase tracking-widest leading-none">Institute of Technology</span>
+          </div>
+        </div>
 
-            {/* Google Sign In Button */}
-            <button
-              onClick={handleGoogleSignIn}
-              onDoubleClick={() => setShowGoogleChooser(true)}
-              title="Double-click to open mock accounts for local testing"
-              className="w-full py-4 px-6 bg-white border border-slate-200 hover:border-brand-indigo/30 rounded-2xl flex items-center justify-center text-xs font-black text-slate-700 uppercase tracking-widest hover:bg-slate-50 transition-all hover:scale-[1.02] active:scale-[0.98] premium-shadow-sm mb-6"
-            >
-              <GoogleIcon />
-              Sign in with Google
-            </button>
+        {/* Middle: Feature list / value proposition */}
+        <div className="space-y-8 z-10 my-auto">
+          <div className="space-y-4">
+            <span className="px-3 py-1 bg-white/10 rounded-full text-[9px] font-black uppercase tracking-widest text-slate-200">Centralized Portal</span>
+            <h1 className="text-5xl font-black tracking-tight leading-tight uppercase">
+              RIT EVENT HUB
+            </h1>
+            <p className="text-sm font-medium text-slate-200/80 max-w-lg leading-relaxed">
+              Schedule, approve, and track academic, placement, and cultural events across Rajalakshmi Institute of Technology with an automated conflict engine.
+            </p>
+          </div>
 
-            {/* Separator */}
-            <div className="w-full flex items-center justify-center gap-4 mb-6">
-              <div className="h-px bg-slate-100 flex-1" />
-              <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">or use credentials</span>
-              <div className="h-px bg-slate-100 flex-1" />
-            </div>
-
-            {/* Email & Password Form */}
-            <form onSubmit={handleLoginSubmit} className="w-full space-y-4">
-              <div className="relative">
-                <Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <input
-                  required
-                  type="email"
-                  placeholder="EMAIL ADDRESS"
-                  value={emailInput}
-                  onChange={(e) => setEmailInput(e.target.value)}
-                  className="w-full bg-slate-50 border border-transparent focus:border-brand-indigo/30 rounded-2xl pl-12 pr-6 py-4.5 text-xs font-bold outline-none transition-all"
-                />
-              </div>
-
-              <div className="relative">
-                <Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
-                <input
-                  required
-                  type={showPassword ? 'text' : 'password'}
-                  placeholder="PASSWORD"
-                  value={passwordInput}
-                  onChange={(e) => setPasswordInput(e.target.value)}
-                  className="w-full bg-slate-50 border border-transparent focus:border-brand-indigo/30 rounded-2xl pl-12 pr-12 py-4.5 text-xs font-bold outline-none transition-all"
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-300 hover:text-brand-indigo transition-colors"
-                >
-                  <i className={cn("fas", showPassword ? "fa-eye-slash" : "fa-eye")}></i>
-                </button>
-              </div>
-
-              {errorMessage && (
-                <div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
-                  <AlertCircle className="w-4 h-4 shrink-0" />
-                  <span>{errorMessage}</span>
+          <div className="space-y-4 pt-6 border-t border-white/10 max-w-md">
+            {[
+              { title: "Smart Scheduling", desc: "Conflict audit for auditoriums, seminar halls, and computer centers in real-time." },
+              { title: "Multi-tier Approvals", desc: "Digital verification chain routing proposals through departments, HoDs, and the Principal." },
+              { title: "Student Passports", desc: "Secure digital passes, attendance tracking, and automated OD verification." }
+            ].map((f, i) => (
+              <div key={i} className="flex gap-4 items-start">
+                <div className="w-6 h-6 rounded-lg bg-white/10 flex items-center justify-center text-xs font-black text-white shrink-0 mt-0.5">✓</div>
+                <div>
+                  <h4 className="text-xs font-black uppercase tracking-wider text-white">{f.title}</h4>
+                  <p className="text-[11px] text-slate-300 font-medium mt-1 leading-relaxed">{f.desc}</p>
                 </div>
-              )}
+              </div>
+            ))}
+          </div>
+        </div>
 
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className={cn(
-                  "w-full py-5 text-white text-xs font-black rounded-2xl transition-all shadow-lg active:scale-[0.98] disabled:opacity-55 flex items-center justify-center gap-2 mt-4",
-                  RIT_BLUE,
-                  RIT_BLUE_HOVER
-                )}
+        {/* Bottom: Institutional footer */}
+        <div className="z-10 flex items-center justify-between text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+          <span>RIT Event Hub © {new Date().getFullYear()}</span>
+          <span>Terms & Conditions</span>
+        </div>
+      </div>
+
+      {/* Right Column: Form (100% on mobile, 45% on desktop) */}
+      <div className="w-full lg:w-[45%] flex items-center justify-center p-8 md:p-16 bg-white relative">
+        {/* Decorative radial accents on the white side to retain look */}
+        <div className="absolute top-[10%] right-[10%] w-[300px] h-[300px] bg-brand-glow rounded-full blur-[100px] opacity-30 pointer-events-none" />
+        <div className="absolute bottom-[10%] left-[10%] w-[300px] h-[300px] bg-indigo-50 rounded-full blur-[100px] opacity-30 pointer-events-none" />
+
+        <div className="w-full max-w-sm z-10 flex flex-col justify-center min-h-[500px]">
+          <AnimatePresence mode="wait">
+            {!isSignUp ? (
+              // ----------------------------------------------------
+              // CENTRALIZED SIGN IN (NO CARD)
+              // ----------------------------------------------------
+              <motion.div
+                key="login-pane"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                transition={{ duration: 0.3 }}
+                className="space-y-8"
               >
-                <LogIn className="w-4 h-4" />
-                {isSubmitting ? 'Verifying...' : 'Sign in now...'}
-              </button>
-            </form>
-
-            <div className="mt-8 text-center space-y-3">
-              <button
-                type="button"
-                onClick={() => {
-                  setIsSignUp(true);
-                  setSignUpType('EXTERNAL');
-                  setErrorMessage(null);
-                }}
-                className="text-xs font-bold text-slate-400 hover:text-brand-indigo transition-colors block mx-auto"
-              >
-                External Student ? Register here..
-              </button>
-            </div>
-          </motion.div>
-        ) : (
-          // ----------------------------------------------------
-          // SIGN UP (Only for External Students)
-          // ----------------------------------------------------
-          <motion.div
-            key="signup-pane"
-            initial={{ opacity: 0, scale: 0.95, y: 10 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: -10 }}
-            transition={{ duration: 0.4 }}
-            className="w-full max-w-md bg-white rounded-[2.5rem] border border-slate-100 premium-shadow p-10 flex flex-col relative overflow-hidden"
-          >
-            {/* Back Button */}
-            <button
-              onClick={() => {
-                setIsSignUp(false);
-                setSignUpType(null);
-                setErrorMessage(null);
-              }}
-              className="absolute top-6 left-6 w-10 h-10 bg-slate-50 hover:bg-slate-100 text-slate-500 rounded-full flex items-center justify-center transition-all border border-slate-100"
-              type="button"
-            >
-              <ArrowLeft className="w-4 h-4" />
-            </button>
-
-            <div className="text-center mb-8 pt-4">
-              <h2 className="text-3xl font-black text-slate-900 uppercase tracking-tighter">
-                Other College <span className="text-[#004a99]">Sign Up</span>
-              </h2>
-              <p className="text-slate-400 text-[10px] font-bold uppercase tracking-widest mt-2">Join the RIT Excellence Hub</p>
-            </div>
-
-            <form onSubmit={handleRegisterSubmit} className="space-y-4 overflow-y-auto max-h-[450px] pr-3 py-1 scrollbar-hide">
-              <div className="grid grid-cols-2 gap-4">
-                <input required name="name" placeholder="FULL NAME" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.name} onChange={handleInputChange} />
-                <input required type="email" name="email" placeholder="EMAIL" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.email} onChange={handleInputChange} />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <input required name="regNo" placeholder="REG NO" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.regNo} onChange={handleInputChange} />
-                <input required name="phone" placeholder="PHONE NUMBER" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.phone} onChange={handleInputChange} />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <input required type="password" name="password" placeholder="PASSWORD" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.password} onChange={handleInputChange} />
-                <input required type="password" name="confirmPassword" placeholder="CONFIRM" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.confirmPassword} onChange={handleInputChange} />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <select required name="gender" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all cursor-pointer" value={formData.gender} onChange={handleInputChange}>
-                  <option value="">SELECT GENDER</option>
-                  <option value="Male">MALE</option>
-                  <option value="Female">FEMALE</option>
-                  <option value="Other">OTHER</option>
-                </select>
-                <input required name="collegeLocation" placeholder="COLLEGE LOCATION" className="bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.collegeLocation} onChange={handleInputChange} />
-              </div>
-
-              <input required name="collegeName" placeholder="COLLEGE NAME" className="w-full bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all" value={formData.collegeName} onChange={handleInputChange} />
-
-              <div className="relative">
-                <select required name="department" className="w-full bg-slate-50 border-transparent focus:border-brand-indigo/30 border rounded-2xl px-5 py-4 text-xs font-bold outline-none transition-all cursor-pointer appearance-none" value={formData.department} onChange={handleInputChange}>
-                  <option value="">SELECT DEPARTMENT</option>
-                  {EXTERNAL_DEPARTMENTS.map(d => <option key={d} value={d}>{d}</option>)}
-                </select>
-              </div>
-
-              {errorMessage && (
-                <div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
-                  <AlertCircle className="w-4 h-4 shrink-0" />
-                  <span>{errorMessage}</span>
+                <div className="space-y-3">
+                  {/* Logo only on mobile/tablet */}
+                  <img src={ritLogo} alt="RIT Logo" className="h-10 w-auto object-contain mb-4 lg:hidden" />
+                  <h2 className="text-3xl font-black text-slate-900 tracking-tight uppercase leading-none">
+                    Welcome Back
+                  </h2>
+                  <p className="text-slate-400 text-xs font-bold uppercase tracking-widest">Sign in to your account</p>
                 </div>
-              )}
 
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className={cn(
-                  "w-full py-5 text-white text-xs font-black rounded-2xl transition-all shadow-lg active:scale-[0.98] disabled:opacity-55 flex items-center justify-center gap-2",
-                  RIT_BLUE,
-                  RIT_BLUE_HOVER
-                )}
+                <div className="space-y-6">
+                  {/* Google Sign In Button */}
+                  <button
+                    onClick={handleGoogleSignIn}
+                    onDoubleClick={() => setShowGoogleChooser(true)}
+                    title="Double-click to open mock accounts for local testing"
+                    className="w-full py-4 px-6 bg-white border border-slate-200 hover:border-slate-300 rounded-2xl flex items-center justify-center text-xs font-black text-slate-700 uppercase tracking-widest hover:bg-slate-50 transition-all hover:scale-[1.01] active:scale-[0.99] shadow-sm"
+                  >
+                    <GoogleIcon />
+                    Sign in with Google
+                  </button>
+
+                  {/* Separator */}
+                  <div className="flex items-center justify-center gap-4">
+                    <div className="h-px bg-slate-100 flex-1" />
+                    <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">or use credentials</span>
+                    <div className="h-px bg-slate-100 flex-1" />
+                  </div>
+
+                  {/* Email & Password Form */}
+                  <form onSubmit={handleLoginSubmit} className="space-y-4">
+                    <div className="relative">
+                      <Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                      <input
+                        required
+                        type="email"
+                        placeholder="EMAIL ADDRESS"
+                        value={emailInput}
+                        onChange={(e) => setEmailInput(e.target.value)}
+                        className="w-full bg-slate-50 border border-slate-100 focus:bg-white focus:border-brand-indigo/30 rounded-2xl pl-12 pr-6 py-4 text-xs font-bold outline-none transition-all"
+                      />
+                    </div>
+
+                    <div className="relative">
+                      <Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+                      <input
+                        required
+                        type={showPassword ? 'text' : 'password'}
+                        placeholder="PASSWORD"
+                        value={passwordInput}
+                        onChange={(e) => setPasswordInput(e.target.value)}
+                        className="w-full bg-slate-50 border border-slate-100 focus:bg-white focus:border-brand-indigo/30 rounded-2xl pl-12 pr-12 py-4 text-xs font-bold outline-none transition-all"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-300 hover:text-brand-indigo transition-colors"
+                      >
+                        <i className={cn("fas", showPassword ? "fa-eye-slash" : "fa-eye")}></i>
+                      </button>
+                    </div>
+
+                    {errorMessage && (
+                      <div className="p-4 bg-red-50 text-red-600 rounded-2xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
+                        <AlertCircle className="w-4 h-4 shrink-0" />
+                        <span>{errorMessage}</span>
+                      </div>
+                    )}
+
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      className={cn(
+                        "w-full py-4.5 text-white text-xs font-black rounded-2xl transition-all shadow-md hover:shadow-lg active:scale-[0.99] disabled:opacity-55 flex items-center justify-center gap-2 mt-4",
+                        RIT_BLUE,
+                        RIT_BLUE_HOVER
+                      )}
+                    >
+                      <LogIn className="w-4 h-4" />
+                      {isSubmitting ? 'Verifying...' : 'Sign in now...'}
+                    </button>
+                  </form>
+
+                  <div className="text-center pt-2">
+                    <button
+                      type="button"
+                      onClick={() => {
+                        setIsSignUp(true);
+                        setSignUpType('EXTERNAL');
+                        setErrorMessage(null);
+                      }}
+                      className="text-xs font-black text-brand-indigo hover:underline transition-colors uppercase tracking-wider"
+                    >
+                      External Student ? Register here..
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            ) : (
+              // ----------------------------------------------------
+              // SIGN UP (Only for External Students - NO CARD)
+              // ----------------------------------------------------
+              <motion.div
+                key="signup-pane"
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                transition={{ duration: 0.3 }}
+                className="space-y-6"
               >
-                {isSubmitting ? 'Registering...' : 'Sign up now...'}
-              </button>
-            </form>
-          </motion.div>
+                <div className="relative flex items-center justify-between pb-2">
+                  <button
+                    onClick={() => {
+                      setIsSignUp(false);
+                      setSignUpType(null);
+                      setErrorMessage(null);
+                    }}
+                    className="w-8 h-8 bg-slate-50 hover:bg-slate-100 text-slate-500 rounded-full flex items-center justify-center transition-all border border-slate-100"
+                    type="button"
+                  >
+                    <ArrowLeft className="w-3.5 h-3.5" />
+                  </button>
+                  <span className="text-[9px] font-black text-slate-300 uppercase tracking-widest">Other College Sign Up</span>
+                </div>
+
+                <div className="space-y-2">
+                  <h2 className="text-2xl font-black text-slate-900 uppercase tracking-tight leading-none">
+                    Create Account
+                  </h2>
+                  <p className="text-slate-400 text-[10px] font-bold uppercase tracking-widest">Register as external student</p>
+                </div>
+
+                <form onSubmit={handleRegisterSubmit} className="space-y-3.5 max-h-[420px] overflow-y-auto pr-2 py-1 scrollbar-hide">
+                  <div className="grid grid-cols-2 gap-3">
+                    <input required name="name" placeholder="FULL NAME" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.name} onChange={handleInputChange} />
+                    <input required type="email" name="email" placeholder="EMAIL" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.email} onChange={handleInputChange} />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <input required name="regNo" placeholder="REG NO" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.regNo} onChange={handleInputChange} />
+                    <input required name="phone" placeholder="PHONE NUMBER" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.phone} onChange={handleInputChange} />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <input required type="password" name="password" placeholder="PASSWORD" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.password} onChange={handleInputChange} />
+                    <input required type="password" name="confirmPassword" placeholder="CONFIRM" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.confirmPassword} onChange={handleInputChange} />
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3">
+                    <select required name="gender" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all cursor-pointer" value={formData.gender} onChange={handleInputChange}>
+                      <option value="">GENDER</option>
+                      <option value="Male">MALE</option>
+                      <option value="Female">FEMALE</option>
+                      <option value="Other">OTHER</option>
+                    </select>
+                    <input required name="collegeLocation" placeholder="LOCATION" className="bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.collegeLocation} onChange={handleInputChange} />
+                  </div>
+
+                  <input required name="collegeName" placeholder="COLLEGE NAME" className="w-full bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all" value={formData.collegeName} onChange={handleInputChange} />
+
+                  <select required name="department" className="w-full bg-slate-50 border-slate-100 focus:bg-white focus:border-brand-indigo/30 border rounded-xl px-4 py-3 text-xs font-bold outline-none transition-all cursor-pointer" value={formData.department} onChange={handleInputChange}>
+                    <option value="">SELECT DEPARTMENT</option>
+                    {EXTERNAL_DEPARTMENTS.map(d => <option key={d} value={d}>{d}</option>)}
+                  </select>
+
+                  {errorMessage && (
+                    <div className="p-4 bg-red-50 text-red-600 rounded-xl text-xs font-bold flex items-center gap-2 border border-red-100/50">
+                      <AlertCircle className="w-4 h-4 shrink-0" />
+                      <span>{errorMessage}</span>
+                    </div>
+                  )}
+
+                  <button
+                    type="submit"
+                    disabled={isSubmitting}
+                    className={cn(
+                      "w-full py-4.5 text-white text-xs font-black rounded-xl transition-all shadow-md hover:shadow-lg active:scale-[0.99] disabled:opacity-55 flex items-center justify-center gap-2",
+                      RIT_BLUE,
+                      RIT_BLUE_HOVER
+                    )}
+                  >
+                    {isSubmitting ? 'Registering...' : 'Sign up now...'}
+                  </button>
+                </form>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
         )}
       </AnimatePresence>