diff --git a/src/app/(web)/login/page.jsx b/src/app/(web)/login/page.jsx
new file mode 100644
index 0000000..529bd55
--- /dev/null
+++ b/src/app/(web)/login/page.jsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+import axios from "axios";
+import { useUser } from "@clerk/nextjs";
+
+import {
+	SignInButton,
+	SignedOut,
+} from '@clerk/nextjs';
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+
+export default function LoginPage() {
+
+	const { user } = useUser();
+	const [userData, setUserData] = useState(null);
+
+	useEffect(() => {
+		if (user) {
+			axios.get(`/api/user?userId=${user.id}`).then(response => {
+				setUserData(response.data);
+			});
+		}
+	}, [user]);
+
+	if (userData) {
+		if (userData.role === "caregiver") {
+			window.location.href = "suite/doctor/dashboard";
+		}
+		if (userData.role === "patient") {
+			window.location.href = "suite/patient/dashboard";
+		}
+	}
+
+
+	return (
+		<div className="min-h-screen flex bg-gray-100">
+			<Card className="h-1/4 w-1/4 mx-auto my-20">
+				<CardHeader className="text-center">
+					<CardTitle>Welcome</CardTitle>
+					<CardDescription>Choose your login type</CardDescription>
+				</CardHeader>
+				<CardContent className="flex flex-col gap-4">
+					<SignedOut>
+						<Button className="w-full">
+							<SignInButton>Patient Login</SignInButton>
+						</Button>
+						<Button asChild variant="outline" className="w-full">
+							<SignInButton>Doctor Login</SignInButton>
+						</Button>
+					</SignedOut>
+				</CardContent>
+			</Card>
+		</div>
+	)
+}
+
diff --git a/src/app/(web)/login/page.tsx b/src/app/(web)/login/page.tsx
deleted file mode 100644
index e9099c9..0000000
--- a/src/app/(web)/login/page.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import Link from "next/link"
-
-export default function LoginPage() {
-	return (
-		<div className="min-h-screen flex bg-gray-100">
-			<Card className="h-1/4 w-1/4 mx-auto my-20">
-				<CardHeader className="text-center">
-					<CardTitle>Welcome</CardTitle>
-					<CardDescription>Choose your login type</CardDescription>
-				</CardHeader>
-				<CardContent className="flex flex-col gap-4">
-					<Button asChild className="w-full">
-						<Link href="/patient-login">Patient Login</Link>
-					</Button>
-					<Button asChild variant="outline" className="w-full">
-						<Link href="/doctor-login">Doctor Login</Link>
-					</Button>
-				</CardContent>
-			</Card>
-		</div>
-	)
-}
-
diff --git a/src/components/hero.tsx b/src/components/hero.tsx
index e13ec26..0eedd64 100644
--- a/src/components/hero.tsx
+++ b/src/components/hero.tsx
@@ -16,8 +16,8 @@ export function Hero() {
 					</p>
 					<Button>
 						<Link
-							href="/get-started"
-							className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center  rounded-lg bg-primary-700 hover:bg-primary-800 "
+							href="/login"
+							className="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center rounded-lg bg-primary-700 hover:bg-primary-800 "
 						>
 							Get started
 							<svg
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 74e18d7..c2fa5d0 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -4,7 +4,6 @@ import * as React from "react"
 import Link from "next/link"
 
 import {
-	SignInButton,
 	SignedIn,
 	SignedOut,
 	UserButton
@@ -35,14 +34,19 @@ export function Navbar() {
 				</div>
 				<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
 					<ModeToggle />
-					<div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md">
-						<SignedOut>
-							<SignInButton />
-						</SignedOut>
-						<SignedIn>
+					<SignedOut>
+						<Link
+							href="/login"
+							className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90"
+						>
+							Login
+						</Link>
+					</SignedOut>
+					<SignedIn>
+						<div className="bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 rounded-md">
 							<UserButton />
-						</SignedIn>
-					</div>
+						</div>
+					</SignedIn>
 				</div>
 			</div>
 		</header>
diff --git a/src/models/User.js b/src/models/User.js
index e5a8cba..2a520c0 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -1,67 +1,67 @@
 import { Schema, model, models } from "mongoose";
 
 const UserSchema = new Schema(
-  {
-    id: {
-      type: String,
-      required: true,
-      unique: true,
-    },
-    name: {
-      type: String,
-      required: true,
-      trim: true,
-    },
-    email: {
-      type: String,
-      required: true,
-      unique: true,
-      lowercase: true,
-    },
-    role: {
-      type: String,
-      required: true,
-      enum: ["patient", "caregiver"],
-      default: "patient",
-    },
-    dateOfBirth: {
-      type: Date,
-    },
-    medicalConditions: {
-      type: [String],
-      default: [],
-    },
-    medications: {
-      type: [
-        {
-          name: String,
-          dosage: String,
-          frequency: String,
-        },
-      ],
-      default: [],
-    },
-    emergencyContact: {
-      name: String,
-      relationship: String,
-      phone: String,
-    },
-    patients: {
-      type: [
-        {
-          patientId: {
-            type: Schema.Types.ObjectId,
-            ref: "User",
-          },
-          relationship: String,
-        },
-      ],
-      default: [],
-    },
-  },
-  {
-    timestamps: true,
-  }
+	{
+		id: {
+			type: String,
+			required: true,
+			unique: true,
+		},
+		name: {
+			type: String,
+			required: true,
+			trim: true,
+		},
+		email: {
+			type: String,
+			required: true,
+			unique: true,
+			lowercase: true,
+		},
+		role: {
+			type: String,
+			required: true,
+			enum: ["patient", "caregiver"],
+			default: "patient",
+		},
+		dateOfBirth: {
+			type: Date,
+		},
+		medicalConditions: {
+			type: [String],
+			default: [],
+		},
+		medications: {
+			type: [
+				{
+					name: String,
+					dosage: String,
+					frequency: String,
+				},
+			],
+			default: [],
+		},
+		emergencyContact: {
+			name: String,
+			relationship: String,
+			phone: String,
+		},
+		patients: {
+			type: [
+				{
+					patientId: {
+						type: Schema.Types.ObjectId,
+						ref: "User",
+					},
+					relationship: String,
+				},
+			],
+			default: [],
+		},
+	},
+	{
+		timestamps: true,
+	}
 );
 
 export const User = models.User || model("User", UserSchema);
diff --git a/tsconfig.json b/tsconfig.json
index 4c0236c..1eb83cb 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx"],
   "exclude": ["node_modules"]
 }