diff --git a/app/login/page.jsx b/app/login/page.jsx
index 5b30424..7fdc2a8 100644
--- a/app/login/page.jsx
+++ b/app/login/page.jsx
@@ -2,19 +2,23 @@ import LoginForm from "@/components/login-form";
 
 export default function LoginPage() {
   return (
-    <main className="mx-auto grid min-h-[calc(100vh-57px)] max-w-[1200px] grid-cols-1 items-start gap-4 px-6 py-16 md:grid-cols-[minmax(0,1fr)_420px]">
-      <section className="space-y-8">
-        <h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
+    <main className="mx-auto min-h-[calc(100vh-57px)] max-w-[1200px] px-6 py-16">
+      <div className="mx-auto flex flex-col gap-y-8 md:grid md:grid-cols-[minmax(0,1fr)_420px] md:gap-x-8 md:items-start">
+        <section>
+          <h1 className="text-3xl font-bold tracking-tight text-teal-700">Confidence Engine</h1>
 
-        <div className="space-y-4 text-base leading-relaxed text-gray-700">
-          <h2 className="text-xl font-semibold tracking-tight text-gray-900">Get clearer about what{'\''}s really going on.</h2>
-          <p>Confidence Engine helps you work through situations that feel uncertain, complicated or difficult to act on.</p>
-          <p>Describe the situation in your own words. Confidence Engine will help reconstruct what is known, what may be happening, and what is still unclear — then let you decide what to explore further.</p>
-          <p className="text-gray-600">It doesn{'\''}t try to make the decision for you. The aim is to help you reach a clearer understanding so you can decide what to do with more confidence.</p>
-        </div>
-      </section>
+          <div className="mt-4 space-y-4 text-base leading-relaxed text-gray-700">
+            <h2 className="text-xl font-semibold tracking-tight text-gray-900">Get clearer about what{'\''}s really going on.</h2>
+            <p>Confidence Engine helps you work through situations that feel uncertain, complicated or difficult to act on.</p>
+            <p>Describe the situation in your own words. Confidence Engine will help reconstruct what is known, what may be happening, and what is still unclear — then let you decide what to explore further.</p>
+            <p className="text-gray-600">It doesn{'\''}t try to make the decision for you. The aim is to help you reach a clearer understanding so you can decide what to do with more confidence.</p>
+          </div>
+        </section>
+
+        <section className="md:col-start-2 md:w-full">
+          <LoginForm />
+        </section>
 
-      <section className="space-y-8">
         <section className="space-y-4">
           <h2 className="text-sm font-semibold uppercase tracking-[.18em] text-teal-700/70">How it works</h2>
           <ol className="space-y-3 text-base leading-relaxed text-gray-700">
@@ -23,14 +27,10 @@ export default function LoginPage() {
             <li><strong>3. Build your Current Understanding</strong><br/><span className="text-gray-600">Your picture of the situation develops as you learn more.</span></li>
             <li><strong>4. Stop when you have enough</strong><br/><span className="text-gray-600">You don{'\''}t have to answer everything. Your investigation is saved so you can return later.</span></li>
           </ol>
+
+          <p className="text-sm italic text-gray-500">Try it with something real.<br/>A decision you{'\''}re unsure about. A problem that doesn{'\''}t quite make sense. A situation where you feel you may be missing something.</p>
         </section>
-
-        <p className="text-sm italic text-gray-500">Try it with something real.<br/>A decision you{'\''}re unsure about. A problem that doesn{'\''}t quite make sense. A situation where you feel you may be missing something.</p>
-      </section>
-
-      <section className="md:col-start-2 md:row-start-1">
-        <LoginForm />
-      </section>
+      </div>
     </main>
   );
 }
\ No newline at end of file