diff --git a/app/(clear)/login/page.tsx b/app/(clear)/login/page.tsx
index a54c709..4758561 100644
--- a/app/(clear)/login/page.tsx
+++ b/app/(clear)/login/page.tsx
@@ -1,7 +1,15 @@
+import LoginCard from "@/widgets/login/card";
 import React from "react";
 
 const page = () => {
-  return <div>page</div>;
+  return (
+    <div className="relative w-screen h-screen bg-red-500 bg-[url('/assets/pages/login/a78h12j89a01n.jpg')] bg-cover bg-center">
+      <div className="fixed z-0 w-screen h-screen backdrop-blur-xl bg-black bg-opacity-70" />
+      <div className="fixed z-10 w-screen h-screen flex justify-center items-center">
+        <LoginCard />
+      </div>
+    </div>
+  );
 };
 
 export default page;
diff --git a/public/assets/pages/login/a78h12j89a01n.jpg b/public/assets/pages/login/a78h12j89a01n.jpg
new file mode 100644
index 0000000..d634098
Binary files /dev/null and b/public/assets/pages/login/a78h12j89a01n.jpg differ
diff --git a/widgets/login/card.tsx b/widgets/login/card.tsx
new file mode 100644
index 0000000..62c6b20
--- /dev/null
+++ b/widgets/login/card.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { Button, Card, Divider, input, Input } from "@heroui/react";
+
+const LoginCard = () => {
+  return (
+    <Card className="px-8 py-12">
+      <h1 className="text-3xl font-light text-center">Welcome Back</h1>
+      <Input
+        className="w-[420px] mt-8"
+        label="Email"
+        type="email"
+        variant="bordered"
+        classNames={{
+          input: "text-md font-light pt-4",
+          inputWrapper: "flex gap-10",
+        }}
+      />
+      <Button className="mt-4" color="primary">
+        Sign In
+      </Button>
+      <div className="flex w-full items-center mt-6">
+        <Divider className="flex-1" />
+        <span className="px-2 text-neutral-500 text-sm">or</span>
+        <Divider className="flex-1" />
+      </div>
+    </Card>
+  );
+};
+
+export default LoginCard;