diff --git a/.changeset/light-items-trade.md b/.changeset/light-items-trade.md
new file mode 100644
index 0000000..9c67621
--- /dev/null
+++ b/.changeset/light-items-trade.md
@@ -0,0 +1,5 @@
+---
+"@everipedia/iq-login": minor
+---
+
+Updates login component to use shadcn
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
index 22c213a..9fa0903 100644
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@@ -2,28 +2,32 @@ import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { SignTokenButton } from "./SignTokenButton";
 
 interface LoginProps {
-	title: string;
-	description: string;
+	title?: string;
+	description?: string;
+	connectText?: string;
+	signTokenText?: string;
 	handleRedirect?: () => void;
 }
 
-export const Login = ({ title, description, handleRedirect }: LoginProps) => {
+export const Login = ({
+	title = "Sign In / Connect",
+	description = "Connect your wallet to access your account",
+	connectText = "Step 1: Connect your wallet",
+	signTokenText = "Step 2: Authenticate your wallet",
+	handleRedirect,
+}: LoginProps) => {
 	return (
-		<div className="grid min-h-[calc(100vh-250px)] place-items-center py-4 md:p-4">
-			<div className="max-w-xl w-full text-center">
-				<h1 className="mb-4 text-4xl font-bold">{title}</h1>
-				<p className="mb-8 text-lg text-gray-500 dark:text-alpha-900">
-					{description}
-				</p>
-				<div className="mt-8 rounded-md border bg-gray-100 dark:border-gray-500 dark:bg-gray-700">
-					<div className="flex flex-col items-center p-4">
-						<h2 className="mb-4 text-xl">Step 1: Connect your wallet</h2>
-						<ConnectButton showBalance />
-					</div>
-					<div className="flex flex-col items-center border-t p-4 dark:border-gray-500">
-						<h2 className="mb-4 text-xl">Step 2: Authenticate your wallet</h2>
-						<SignTokenButton handleRedirect={() => handleRedirect?.()} />
-					</div>
+		<div className="max-w-xl w-full text-center">
+			<h1 className="mb-4 text-4xl font-bold">{title}</h1>
+			<p className="mb-8 text-lg text-muted-foreground">{description}</p>
+			<div className="mt-8 rounded-md border bg-card text-card-foreground">
+				<div className="flex flex-col items-center p-4">
+					<h2 className="mb-4 text-xl">{connectText}</h2>
+					<ConnectButton showBalance />
+				</div>
+				<div className="flex flex-col items-center border-t p-4">
+					<h2 className="mb-4 text-xl">{signTokenText}</h2>
+					<SignTokenButton handleRedirect={() => handleRedirect?.()} />
 				</div>
 			</div>
 		</div>