diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f683f1f..772c393 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import ContactForm from '@/components/form/ContactForm';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import { LogIn } from "lucide-react";
 
 export default function LoginPage() {
   return (
@@ -17,13 +18,17 @@ export default function LoginPage() {
           brandName="MediConnect"
         />
       </div>
-      <div className="min-h-screen pt-24 flex items-center justify-center">
-        <ContactForm
-          title="Patient Login"
-          description="Sign in to your secure portal."
-          tag="Login"
-          buttonText="Login"
+      <div className="pt-32 pb-20">
+        <ContactSplitForm
+          title="Welcome Back"
+          description="Sign in to your patient portal to manage your health records and appointments securely."
+          inputs={[
+            { name: "email", type: "email", placeholder: "Email Address", required: true },
+            { name: "password", type: "password", placeholder: "Password", required: true }
+          ]}
+          buttonText="Sign In"
           useInvertedBackground={false}
+          mediaPosition="right"
         />
       </div>
     </ThemeProvider>