Index: nextjs-dashboard/app/login/page.tsx
===================================================================
--- nextjs-dashboard/app/login/page.tsx	(revision 87b89fc3a2a1d8cc49b096b9fe55dc4f1c0ba750)
+++ nextjs-dashboard/app/login/page.tsx	(revision db26589f8c0e8ec15f4df9c874a6e83af35d77fa)
@@ -10,12 +10,38 @@
 export default function LoginPage() {
     return (
-        <main className="flex items-center justify-center md:h-screen">
-            <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
+        <>
+            <main
+                className="
+                    flex-1
+                    flex
+                    flex-col
+                    items-center
+                    justify-center 
+                    md:justify-center
+                    px-4
+                    bg-fein-login
+                    mt-[-80]
+                "
+            >
+                <h1
+                    className={`${poppins.className} 
+                        text-[40px] 
+                        leading-tight
+                        tracking-tight
+                        font-semibold 
+                        text-center 
+                        text-white 
+                        antialiased
+                    `}
+                >
+                    Welcome to<br />
+                    FEiN
+                </h1>
 
                 <Suspense>
                     <LoginForm />
                 </Suspense>
-            </div>
-        </main>
+            </main>
+        </>
     );
 }
Index: nextjs-dashboard/app/ui/global.css
===================================================================
--- nextjs-dashboard/app/ui/global.css	(revision 87b89fc3a2a1d8cc49b096b9fe55dc4f1c0ba750)
+++ nextjs-dashboard/app/ui/global.css	(revision db26589f8c0e8ec15f4df9c874a6e83af35d77fa)
@@ -15,2 +15,14 @@
   margin: 0;
 }
+
+html,
+body {
+  height: 100%;
+  overscroll-behavior: none;
+}
+
+@layer utilities {
+  .bg-fein-login {
+    background: linear-gradient(180deg, #249e86 0%, #1d7f6a 100%);
+  }
+}
Index: nextjs-dashboard/app/ui/login-form.tsx
===================================================================
--- nextjs-dashboard/app/ui/login-form.tsx	(revision 87b89fc3a2a1d8cc49b096b9fe55dc4f1c0ba750)
+++ nextjs-dashboard/app/ui/login-form.tsx	(revision db26589f8c0e8ec15f4df9c874a6e83af35d77fa)
@@ -7,9 +7,9 @@
   ExclamationCircleIcon,
 } from '@heroicons/react/24/outline';
-import { ArrowRightIcon } from '@heroicons/react/20/solid';
 import { Button } from './button';
 import { useActionState } from 'react';
 import { authenticate } from '@/app/lib/actions';
 import { useSearchParams } from 'next/navigation';
+import Link from 'next/link';
 
 export default function LoginForm() {
@@ -22,67 +22,115 @@
 
   return (
-    <form action={formAction} className="space-y-3">
-      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
-        <h1 className={`${firaCode.className} mb-3 text-2xl`}>
-          Please log in to continue.
-        </h1>
-        <div className="w-full">
-          <div>
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="email"
-            >
-              Email
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="email"
-                type="email"
-                name="email"
-                placeholder="Enter your email address"
-                required
-              />
-              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
-          <div className="mt-4">
-            <label
-              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
-              htmlFor="password"
-            >
-              Password
-            </label>
-            <div className="relative">
-              <input
-                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
-                id="password"
-                type="password"
-                name="password"
-                placeholder="Enter password"
-                required
-                minLength={6}
-              />
-              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
-            </div>
-          </div>
+    <form
+      action={formAction}
+      className="
+        w-full
+        max-w-sm
+        bg-transparent
+        backdrop-blur-md
+        rounded-2xl
+        px-6
+        py-8
+      "
+    >
+      <div className="space-y-4">
+        {/* Email */}
+        <div className="relative">
+          <input
+            className={`${poppins.className}
+              peer
+              w-full
+              h-12
+              rounded-lg
+              bg-white/30
+              pl-11
+              text-white
+              placeholder:text-white/60
+              focus:outline-none
+              focus:ring-2
+              focus:ring-white/50
+            `}
+            id="email"
+            type="email"
+            name="email"
+            placeholder="Email"
+            required
+          />
+          <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
         </div>
-        <input type="hidden" name="redirectTo" value={callbackUrl} />
-        <Button className="mt-4 w-full" aria-disabled={isPending}>
-          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
-        </Button>
-        <div className="flex h-8 items-end space-x-1"
+
+        {/* Password */}
+        <div className="relative">
+          <input
+            className={`${poppins.className}
+              peer
+              w-full
+              h-12
+              rounded-lg
+              bg-white/30
+              pl-11
+              text-white
+              placeholder:text-white/60
+              focus:outline-none
+              focus:ring-2
+              focus:ring-white/50
+            `}
+            id="password"
+            type="password"
+            name="password"
+            placeholder="Password"
+            required
+            minLength={6}
+          />
+          <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-white/70" />
+        </div>
+      </div>
+
+
+      <input type="hidden" name="redirectTo" value={callbackUrl} />
+
+
+      <Button
+        className={`${poppins.className}
+          mt-6
+          w-full
+          h-12
+          rounded-lg
+          bg-[#1d7f6a]
+          hover:bg-[#166655]
+          text-white
+          text-lg
+          font-medium
+          flex 
+          items-center 
+          justify-center
+        `}
+        aria-disabled={isPending}
+      >
+        Log in
+      </Button>
+
+
+      <p
+        className={`${poppins.className} mt-4 text-sm text-center text-white/80 antialiased`}
+      >
+        Don&apos;t have an account?
+        <Link className={`${poppins.className} ml-1 font-medium underline antialiased`} href="/register">
+          Register
+        </Link>
+      </p>
+
+
+      {errorMessage && (
+        <div
+          className="flex h-8 items-end space-x-1"
           aria-live="polite"
           aria-atomic="true"
         >
-          {errorMessage && (
-            <>
-              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
-              <p className="text-sm text-red-500">{errorMessage}</p>
-            </>
-          )}
+          <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
+          <span className="text-sm text-red-500">{errorMessage}</span>
         </div>
-      </div>
-    </form>
+      )}
+    </form >
   );
 }