stuff changed:

- ui has been made 'kinda better' (after making it worse for a while lol
- ESP rfid readers are now supported [ill upload the code for them in another repo later]
- admin system has been secured a bit better and seems to be working well

frontend/src/pages/Login.tsx

@@ -43,84 +43,89 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="auth-container" style={{ gap: '40px', padding: '20px' }}>
-      <div className="welcome-section" style={{
-        flex: '1',
-        maxWidth: '400px',
-        textAlign: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.95)',
-        padding: '30px',
-        borderRadius: '12px',
-        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)'
-      }}>
-        <h1 style={{ color: '#333', marginBottom: '16px', fontSize: '2.2rem' }}>Welcome to SASA</h1>
-        <p style={{ fontSize: '1.1rem', color: '#666', lineHeight: '1.6', marginBottom: '20px' }}>
-          REPLACE WITH BOB WORDS: Swansea Airport Stakeholder's Association (SASA) is a community interest company run by volunteers, which holds the lease of Swansea Airport.
-        </p>
-        <p style={{ fontSize: '1rem', color: '#555', lineHeight: '1.5' }}>
-          Join our community of aviation enthusiasts and support the future of Swansea Airport.
-        </p>
-      </div>
-
-      <div className="auth-card" style={{ flex: '1', maxWidth: '400px' }}>
-        <h2>SASA Member Portal</h2>
-        <p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
-          Log in to your membership account
-        </p>
-
-        {error && <div className="alert alert-error">{error}</div>}
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label htmlFor="email">Email Address</label>
-            <input
-              type="email"
-              id="email"
-              name="email"
-              value={formData.email}
-              onChange={handleChange}
-              required
-            />
+    <div className="auth-shell">
+      <header className="auth-topbar">
+        <div className="portal-brand">
+          <div className="portal-mark">S</div>
+          <div className="portal-brand-text">
+            <h1>SASA Member Portal</h1>
+            <div className="portal-subtitle">Member access and admin control room</div>
           </div>
-
-          <div className="form-group">
-            <label htmlFor="password">Password</label>
-            <input
-              type="password"
-              id="password"
-              name="password"
-              value={formData.password}
-              onChange={handleChange}
-              required
-            />
-          </div>
-
-          <button
-            type="submit"
-            className="btn btn-primary"
-            disabled={loading}
-            style={{ width: '100%', marginTop: '16px' }}
-          >
-            {loading ? 'Logging in...' : 'Log In'}
-          </button>
-        </form>
-
-        <div className="form-footer">
-          <div style={{ marginBottom: '16px' }}>
-            <Link to="/forgot-password" style={{ color: '#0066cc', textDecoration: 'none' }}>
-              Forgot your password?
-            </Link>
-          </div>
-          <button
-            type="button"
-            className="btn btn-secondary"
-            onClick={() => navigate('/register')}
-            style={{ width: '100%' }}
-          >
-            Join SASA
-          </button>
         </div>
-      </div>
+      </header>
+
+      <main className="auth-container">
+        <section className="auth-welcome-card">
+          <div className="auth-kicker">Community Access</div>
+          <h2>Welcome to SASA</h2>
+          <p>
+            Swansea Airport Stakeholder&apos;s Association manages member access, events, and operations from one shared platform.
+          </p>
+          <div className="auth-feature-list">
+            <div className="auth-feature-item">Manage your membership, payments, and events in one place</div>
+            <div className="auth-feature-item">Keep profile and contact details current without admin help</div>
+            <div className="auth-feature-item">Admin users can switch into a separate operations workspace after login</div>
+          </div>
+        </section>
+
+        <section className="auth-card">
+          <div className="auth-card-head">
+            <h2>Sign In</h2>
+            <span>Secure session</span>
+          </div>
+
+          <div className="auth-card-body">
+          {error && <div className="alert alert-error">{error}</div>}
+
+          <form onSubmit={handleSubmit}>
+            <div className="form-group">
+              <label htmlFor="email">Email Address</label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="password">Password</label>
+              <input
+                type="password"
+                id="password"
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="btn btn-primary auth-submit"
+              disabled={loading}
+            >
+              {loading ? 'Signing In...' : 'Sign In'}
+            </button>
+          </form>
+          </div>
+
+          <div className="form-footer auth-footer">
+            <div>
+              <Link to="/forgot-password">Forgot your password?</Link>
+            </div>
+            <button
+              type="button"
+              className="btn btn-secondary auth-submit"
+              onClick={() => navigate('/register')}
+            >
+              Join SASA
+            </button>
+          </div>
+        </section>
+      </main>
     </div>
   );
 };