diff --git a/app/login/page.tsx b/app/login/page.tsx
index bb7320f..a11c1a3 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -27,9 +27,9 @@ export default async function LoginPage({
         : null;
 
   return (
-    <main className="flex min-h-screen items-center justify-center bg-background px-6 py-14">
-      <div className="grid w-full max-w-5xl overflow-hidden rounded-[2rem] bg-surface-container-lowest shadow-floating">
-        <section className="bg-surface-container-lowest border-b border-line px-10 py-16 text-center md:border-r md:border-b-0 md:px-14 md:py-20">
+    <main className="flex min-h-screen items-center justify-center bg-background px-4 py-6 sm:px-6 sm:py-8">
+      <div className="grid w-full max-w-5xl overflow-hidden rounded-[2rem] bg-surface-container-lowest shadow-floating md:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
+        <section className="border-b border-line bg-surface-container-lowest px-8 py-10 text-center md:flex md:flex-col md:justify-center md:border-r md:border-b-0 md:px-12 md:py-12">
           <Image
             src="/logo_zappcare.png"
             alt="ZappCare"
@@ -38,22 +38,12 @@ export default async function LoginPage({
             className="mx-auto h-14 w-auto rounded-full"
             priority
           />
-          <h1 className="mt-8 text-4xl font-extrabold font-headline text-on-surface">{t("login", "title")}</h1>
+          <h1 className="mt-6 text-3xl font-extrabold font-headline text-on-surface sm:text-4xl">{t("login", "title")}</h1>
           <p className="mx-auto mt-3 max-w-sm text-sm text-on-surface-variant">
             {t("login", "signin_subtitle")}
           </p>
-          <div className="mx-auto mt-10 flex w-full max-w-sm flex-col gap-3">
-            <div className="rounded-[1.5rem] bg-surface-container-low p-4">
-              <p className="text-2xl font-black text-on-surface">3</p>
-              <p className="mt-1 text-sm text-on-surface-variant">Role aktif saat ini</p>
-            </div>
-            <div className="rounded-[1.5rem] bg-surface-container-low p-4">
-              <p className="text-2xl font-black text-on-surface">10+</p>
-              <p className="mt-1 text-sm text-on-surface-variant">Modul operasi aktif</p>
-            </div>
-          </div>
         </section>
-        <section className="px-8 py-10 md:px-12 md:py-16">
+        <section className="px-6 py-8 sm:px-8 sm:py-10 md:flex md:flex-col md:justify-center md:px-12 md:py-12">
           <div className="mx-auto max-w-md">
             <p className="text-sm font-black uppercase tracking-[0.22em] text-primary">{t("login", "signin_label")}</p>
             <h2 className="mt-3 text-3xl font-black font-headline text-on-surface">{t("login", "signin_subtitle")}</h2>