diff --git a/bun.lockb b/bun.lockb
index 166595a..019adb8 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2f58449..933d917 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "antd": "^6.1.4",
     "axios": "^1.13.2",
     "dayjs": "^1.11.19",
+    "framer-motion": "^12.40.0",
     "posthog-js": "^1.319.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/src/pages/login/Login.css b/src/pages/login/Login.css
new file mode 100644
index 0000000..3ed1f4b
--- /dev/null
+++ b/src/pages/login/Login.css
@@ -0,0 +1,323 @@
+.login-page {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 100vh;
+  width: 100%;
+  background: #ffffff;
+}
+
+.login-brand {
+  position: relative;
+  overflow: hidden;
+  color: #ffffff;
+  padding: 56px 64px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  isolation: isolate;
+  background:
+    radial-gradient(1200px 800px at 100% 0%, rgba(20, 184, 166, 0.35), transparent 55%),
+    linear-gradient(160deg, #0e7490 0%, #155e75 55%, #0f3a4d 100%);
+}
+
+.login-brand::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    linear-gradient(transparent 95%, rgba(255, 255, 255, 0.06) 95%),
+    linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.06) 95%);
+  background-size: 56px 56px;
+  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
+}
+
+.login-brand-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.login-brand-wordmark {
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.login-brand-body {
+  position: relative;
+  z-index: 1;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
+.login-brand-copy {
+  max-width: 480px;
+}
+
+.login-brand-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 12px 5px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.92);
+  border-radius: 999px;
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  margin-bottom: 22px;
+}
+
+.login-brand-eyebrow-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: #34d399;
+  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
+}
+
+.login-brand-headline {
+  font-size: clamp(34px, 3.6vw, 46px);
+  line-height: 1.08;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  margin: 0 0 18px;
+  color: #ffffff;
+}
+
+.login-brand-sub {
+  font-size: 16px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.74);
+  margin: 0;
+  max-width: 460px;
+}
+
+.login-preview {
+  position: relative;
+  border-radius: 14px;
+  background: rgba(15, 42, 56, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.92);
+  overflow: hidden;
+}
+
+.login-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.login-preview-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(255, 255, 255, 0.78);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 12.5px;
+}
+
+.login-preview-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: rgba(245, 158, 11, 0.16);
+  color: #fcd34d;
+  border: 1px solid rgba(245, 158, 11, 0.35);
+}
+
+.login-preview-body {
+  padding: 14px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.login-preview-resource {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.login-preview-resource .login-preview-marker {
+  color: #fcd34d;
+  margin-right: 8px;
+}
+
+.login-preview-line {
+  padding-left: 20px;
+  white-space: pre;
+}
+
+.login-preview-line.removed {
+  color: #fca5a5;
+}
+
+.login-preview-line.added {
+  color: #86efac;
+}
+
+.login-preview-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.02);
+  color: rgba(255, 255, 255, 0.72);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 12.5px;
+}
+
+.login-preview-footer-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #34d399;
+}
+
+.login-brand-footer {
+  position: relative;
+  z-index: 1;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 13px;
+}
+
+.login-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+  background: #ffffff;
+}
+
+.login-action-inner {
+  width: 100%;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.login-action-mark {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #0891b2 0%, #14b8a6 100%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-weight: 700;
+  font-size: 24px;
+  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.28);
+  margin-bottom: 28px;
+}
+
+.login-action h2 {
+  font-size: 26px;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 8px;
+  letter-spacing: -0.015em;
+}
+
+.login-action-sub {
+  color: #64748b;
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 0 0 28px;
+}
+
+.login-github-button.ant-btn {
+  height: 48px;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 10px;
+  box-shadow: 0 6px 16px rgba(8, 145, 178, 0.28);
+}
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #94a3b8;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 28px 0 4px;
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: #e2e8f0;
+}
+
+.login-fineprint {
+  margin-top: 20px;
+  color: #94a3b8;
+  font-size: 12.5px;
+  line-height: 1.5;
+  text-align: center;
+}
+
+@media (max-width: 1180px) {
+  .login-brand {
+    padding: 48px 48px;
+  }
+}
+
+@media (max-width: 900px) {
+  .login-page {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    padding: 36px 24px 40px;
+  }
+
+  .login-brand-body {
+    gap: 28px;
+  }
+
+  .login-brand-headline {
+    font-size: 30px;
+  }
+
+  .login-preview {
+    font-size: 12.5px;
+  }
+
+  .login-brand-footer {
+    display: none;
+  }
+
+  .login-action {
+    padding: 40px 24px 56px;
+  }
+}
diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx
index d4650f9..fb421c1 100644
--- a/src/pages/login/Login.tsx
+++ b/src/pages/login/Login.tsx
@@ -1,12 +1,10 @@
 import React from "react";
 import Button from "antd/es/button";
 import {GithubOutlined} from "@ant-design/icons";
-import {API_URL} from "../../configs.ts";
-import {PageContainer} from "../../components/PageWrapper/PageWrapper.tsx";
-import {Flex, Typography} from "antd";
+import {motion} from "framer-motion";
 import {useLocation} from "react-router";
-
-const {Title} = Typography;
+import {API_URL} from "../../configs.ts";
+import "./Login.css";
 
 export const LoginPage: React.FC = () => {
   const location = useLocation();
@@ -20,18 +18,112 @@ export const LoginPage: React.FC = () => {
   };
 
   return (
-    <PageContainer>
-      <Flex vertical justify={"center"} align={"center"}>
-        <Title level={2}>Driftive</Title>
-        <Button
-          type="primary"
-          icon={<GithubOutlined/>}
-          size="large"
-          onClick={handleLogin}
+    <div className="login-page">
+      <aside className="login-brand">
+        <div className="login-brand-header">
+          <div className="login-action-mark" style={{width: 36, height: 36, fontSize: 18, marginBottom: 0, boxShadow: 'none'}}>
+            D
+          </div>
+          <span className="login-brand-wordmark">Driftive</span>
+        </div>
+
+        <div className="login-brand-body">
+          <div className="login-brand-copy">
+            <motion.span
+              className="login-brand-eyebrow"
+              initial={{opacity: 0, y: 6}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.4, ease: "easeOut"}}
+            >
+              <span className="login-brand-eyebrow-dot"/>
+              Drift detection for Terraform & OpenTofu
+            </motion.span>
+            <motion.h1
+              className="login-brand-headline"
+              initial={{opacity: 0, y: 12}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.5, delay: 0.05, ease: "easeOut"}}
+            >
+              Catch drift before it ships.
+            </motion.h1>
+            <motion.p
+              className="login-brand-sub"
+              initial={{opacity: 0, y: 10}}
+              animate={{opacity: 1, y: 0}}
+              transition={{duration: 0.5, delay: 0.12, ease: "easeOut"}}
+            >
+              Continuous drift detection wired into the GitHub workflow your team already uses.
+            </motion.p>
+          </div>
+
+          <motion.div
+            className="login-preview"
+            initial={{opacity: 0, y: 16}}
+            animate={{opacity: 1, y: 0}}
+            transition={{duration: 0.55, delay: 0.22, ease: "easeOut"}}
+          >
+            <div className="login-preview-header">
+              <span className="login-preview-title">
+                acme/infrastructure · main
+              </span>
+              <span className="login-preview-tag">Drift detected</span>
+            </div>
+            <div className="login-preview-body">
+              <div className="login-preview-resource">
+                <span className="login-preview-marker">~</span>aws_security_group.api
+              </div>
+              <div className="login-preview-line removed">{`    - from_port = 80`}</div>
+              <div className="login-preview-line added">{`    + from_port = 443`}</div>
+              <div className="login-preview-resource" style={{marginTop: 4}}>
+                <span className="login-preview-marker">~</span>aws_iam_role.lambda_exec
+              </div>
+              <div className="login-preview-line removed">{`    - managed_policy_arns = [ ... ]`}</div>
+            </div>
+            <div className="login-preview-footer">
+              <span className="login-preview-footer-dot"/>
+              GitHub issue opened · #142
+            </div>
+          </motion.div>
+        </div>
+
+        <div className="login-brand-footer">
+          © {new Date().getFullYear()} Driftive
+        </div>
+      </aside>
+
+      <main className="login-action">
+        <motion.div
+          className="login-action-inner"
+          initial={{opacity: 0, y: 12}}
+          animate={{opacity: 1, y: 0}}
+          transition={{duration: 0.45, ease: "easeOut"}}
         >
-          Login with GitHub
-        </Button>
-      </Flex>
-    </PageContainer>
+          <div className="login-action-mark" aria-hidden="true">D</div>
+          <h2>Welcome to Driftive</h2>
+          <p className="login-action-sub">
+            Sign in to view your drift dashboard and connect your repositories.
+          </p>
+
+          <motion.div whileHover={{y: -1}} whileTap={{y: 0}}>
+            <Button
+              block
+              type="primary"
+              icon={<GithubOutlined/>}
+              size="large"
+              onClick={handleLogin}
+              className="login-github-button"
+            >
+              Continue with GitHub
+            </Button>
+          </motion.div>
+
+          <div className="login-divider">Secure GitHub OAuth</div>
+
+          <p className="login-fineprint">
+            By continuing, you authorize Driftive to read your repositories on your behalf.
+          </p>
+        </motion.div>
+      </main>
+    </div>
   );
 }