diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
new file mode 100644
index 00000000..fa2b3d24
--- /dev/null
+++ b/src/app/auth/signin/page.tsx
@@ -0,0 +1,25 @@
+import Link from "next/link";
+
+export default function SignInPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-[var(--background)] px-4">
+      <div className="w-full max-w-md rounded-2xl border border-[var(--border)] bg-[var(--card-muted)] backdrop-blur-md p-8 shadow-2xl text-center">
+
+        <h1 className="text-4xl font-bold text-[var(--foreground)] mb-3">
+          DevTrack
+        </h1>
+
+        <p className="text-[var(--muted-foreground)] mb-8">
+          Track your developer journey, GitHub activity, and coding consistency.
+        </p>
+
+        <Link
+          href="/api/auth/signin/github?callbackUrl=/dashboard"
+          className="w-full inline-flex items-center justify-center gap-3 bg-[var(--background)] text-[var(--foreground)] font-semibold py-3 rounded-xl hover:opacity-90 transition-all duration-200 hover:scale-[1.02]"
+        >
+          Sign in with GitHub
+        </Link>
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/PRBreakdownChart.tsx b/src/components/PRBreakdownChart.tsx
index af903cce..61dfa8a1 100644
--- a/src/components/PRBreakdownChart.tsx
+++ b/src/components/PRBreakdownChart.tsx
@@ -114,17 +114,19 @@ export default function PRBreakdownChart() {
                 ))}
               </Pie>
               <Tooltip
-                contentStyle={{
-                  background: getCSSVariable("--tooltip"),
-                  color: getCSSVariable("--tooltip-foreground"),
-                  border: `1px solid ${getCSSVariable("--border")}`,
-                  borderRadius: "8px",
-                  fontSize: "12px",
-                }}
-                formatter={(value: number) => [
-                  `${value} (${Math.round((value / total) * 100)}%)`,
-                ]}
-              />
+  contentStyle={{
+    backgroundColor: getCSSVariable('--card'),
+    border: `1px solid ${getCSSVariable('--border')}`,
+    borderRadius: "10px",
+    color: getCSSVariable('--foreground'),
+  }}
+  itemStyle={{
+    color: getCSSVariable('--foreground'),
+  }}
+  labelStyle={{
+    color: getCSSVariable('--foreground'),
+  }}
+/>
             </PieChart>
           </ResponsiveContainer>
           <div className="mt-3 flex flex-wrap justify-center gap-4">
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index cef9ae25..538919f0 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -16,6 +16,9 @@ export const authOptions: NextAuthOptions = {
       },
     }),
   ],
+  pages: {
+  signIn: "/auth/signin",
+},
   session: {
     strategy: "jwt",
     maxAge: SESSION_MAX_AGE,