Index: app/page.tsx
===================================================================
--- app/page.tsx	(revision 662e0804f9ebaeedfe39e69de4fde2a75be63cc7)
+++ app/page.tsx	(revision f7c2db043166225be9c941872bfbead03624a6e4)
@@ -1,49 +1,52 @@
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { poppins } from '@/app/ui/fonts';
-import Image from 'next/image';
 
 export default function Page() {
   return (
-    <main className="flex min-h-screen flex-col p-6">
-      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
-        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
-          <p
-            className={`${poppins.className} text-xl text-gray-800 md:text-2xl md:leading-normal antialiased`}
-          >
-            <strong>Welcome to FEiN.</strong>
-          </p>
-          <Link
-            href="/login"
-            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
-          >
-            <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
-          </Link>
-          <Link
-            href="/register"
-            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
-          >
-            <span>Register</span> <ArrowRightIcon className="w-5 md:w-6" />
-          </Link>
-        </div>
-        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
-          {/* Add Hero Images Here */}
-          {/* <Image
-            src="/hero-desktop.png"
-            width={1000}
-            height={760}
-            className="hidden md:block"
-            alt="Screenshots of the dashboard project showing desktop version"
-          />
-          <Image
-            src="/hero-mobile.png"
-            width={560}
-            height={620}
-            className="block md:hidden"
-            alt="Screenshots of the dashboard project showing mobile version"
-          /> */}
-        </div>
-      </div>
-    </main>
+    <>
+      <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
+                        mb-10 
+                        text-white 
+                        antialiased
+                    `}
+        >
+          Welcome to<br />
+          FEiN
+        </h1>
+
+        <Link
+          href="/login"
+          className="flex items-center gap-5 rounded-lg bg-blue-500 px-6 py-3 mb-10 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
+        >
+          <span>Log in</span>
+        </Link>
+        <Link
+          href="/register"
+          className="flex items-center gap-5 rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
+        >
+          <span>Register</span>
+        </Link>
+
+      </main>
+    </>
   );
 }