From 608fe29edc6079ffa7da36724d69a63f2c71b701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=83=C2=B6rn=20Schwenzer?= <bjoern@wundergraph.com>
Date: Sun, 1 Feb 2026 11:14:29 +0100
Subject: [PATCH 1/2] fix: optimize signup page layout and styling

- Flip desktop/mobile layout to give precedence to content
- Alignment and text changes
- Layout optimizations
---
 .../src/components/auth/auth-components.tsx   |  4 +--
 studio/src/pages/signup.tsx                   | 25 ++++++++++++-------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/studio/src/components/auth/auth-components.tsx b/studio/src/components/auth/auth-components.tsx
index c5e959a7f5..472c3b48dd 100644
--- a/studio/src/components/auth/auth-components.tsx
+++ b/studio/src/components/auth/auth-components.tsx
@@ -132,7 +132,7 @@ export const TrustedCompanies = () => {
 export const MarketingHeader = () => {
   return (
     <div className="text-center">
-      <h1 className="bg-[linear-gradient(180deg,#FFFFFF_50%,#999999_100%)] bg-clip-text text-2xl font-normal leading-[130%] text-transparent sm:text-[32px]">
+      <h1 className="bg-[linear-gradient(180deg,#FFFFFF_50%,#999999_100%)] bg-clip-text text-2xl font-bold leading-[130%] text-transparent sm:text-[32px]">
         Cosmo: Open-Source
         <br />
         GraphQL Federation Solution
@@ -222,7 +222,7 @@ export const ProductCosmoStack = ({ variant = "login" }: { variant?: "login" | "
   const features = variant === "login" ? loginFeatures : signupFeatures;
 
   return (
-    <div className="flex w-full flex-col px-2 sm:max-w-xl sm:px-8">
+    <div className="flex w-full flex-col px-2 sm:max-w-[43.2rem] sm:px-8">
       <MarketingHeader />
       <div className="mt-10 flex flex-col gap-6">
         {features.map((feature, index) => (
diff --git a/studio/src/pages/signup.tsx b/studio/src/pages/signup.tsx
index bab23517de..d615a7d946 100644
--- a/studio/src/pages/signup.tsx
+++ b/studio/src/pages/signup.tsx
@@ -47,16 +47,28 @@ const SignupPage: NextPageWithLayout = () => {
       {/* Main content area */}
       <div className="flex flex-1 items-center justify-center px-4 py-8 lg:px-0 lg:py-0">
         <div className="flex w-full max-w-screen-2xl flex-col lg:flex-row">
-          {/* Left section - Form */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center lg:min-h-0 lg:w-1/2 lg:p-12">
+          {/* Left section - Marketing */}
+          <div className="flex w-full flex-col items-center justify-center px-4 py-10 lg:min-h-screen lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
+            <div className="lg:mt-8">
+              <ProductCosmoStack variant="signup" />
+            </div>
+          </div>
+
+          {/* Right section - Form */}
+          <div className="flex w-full flex-col items-center justify-center pb-10 lg:min-h-screen lg:w-1/2 lg:p-12">
             <div className="w-full max-w-md lg:max-w-lg">
               <AuthCard className="w-full rounded-xl px-6 py-8 lg:px-10 lg:py-12">
-                <AuthLogoHeader />
+                <div className="hidden lg:block">
+                  <AuthLogoHeader />
+                </div>
 
                 <div className="mt-8 lg:mt-12">
-                  <h2 className="text-2xl font-normal leading-[120%] text-white lg:text-[32px]">
+                  <h2 className="text-center text-2xl font-normal leading-[120%] text-white lg:text-[32px]">
                     Sign up for free
                   </h2>
+                  <p className="mt-2 text-center text-sm text-white/85 lg:text-base">
+                    Try Cosmo as Managed Service. No card required.
+                  </p>
 
                   <div className="mt-6 space-y-3 lg:mt-8 lg:space-y-4">
                     <Button
@@ -125,11 +137,6 @@ const SignupPage: NextPageWithLayout = () => {
               </div>
             </div>
           </div>
-
-          {/* Right section - Marketing */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
-            <ProductCosmoStack variant="signup" />
-          </div>
         </div>
       </div>
 

From 1ac9752369db62e694fec135e582a867ffc50000 Mon Sep 17 00:00:00 2001
From: JivusAyrus <suvijsurya76@gmail.com>
Date: Mon, 2 Feb 2026 14:35:35 +0530
Subject: [PATCH 2/2] fix: update layout and styling of login and signup pages

- Adjust padding and margin for better visual consistency
- Enhance mobile responsiveness for both login and signup sections
---
 studio/src/pages/login.tsx  | 2 +-
 studio/src/pages/signup.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/studio/src/pages/login.tsx b/studio/src/pages/login.tsx
index 7c57dc74c9..1e9572b7b2 100644
--- a/studio/src/pages/login.tsx
+++ b/studio/src/pages/login.tsx
@@ -157,7 +157,7 @@ const LoginPage: NextPageWithLayout = () => {
           </div>
 
           {/* Right section - Marketing */}
-          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
+          <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-16 lg:min-h-0 lg:w-1/2 lg:items-start lg:px-14 lg:pb-40 lg:pt-8">
             <ProductCosmoStack variant="login" />
           </div>
         </div>
diff --git a/studio/src/pages/signup.tsx b/studio/src/pages/signup.tsx
index d615a7d946..5389f840a3 100644
--- a/studio/src/pages/signup.tsx
+++ b/studio/src/pages/signup.tsx
@@ -48,14 +48,14 @@ const SignupPage: NextPageWithLayout = () => {
       <div className="flex flex-1 items-center justify-center px-4 py-8 lg:px-0 lg:py-0">
         <div className="flex w-full max-w-screen-2xl flex-col lg:flex-row">
           {/* Left section - Marketing */}
-          <div className="flex w-full flex-col items-center justify-center px-4 py-10 lg:min-h-screen lg:w-1/2 lg:items-start lg:px-14 lg:pb-28 lg:pt-12">
+          <div className="flex w-full flex-col items-center justify-center px-4 py-10 lg:min-h-screen lg:w-1/2 lg:items-start lg:px-14 lg:pb-40 lg:pt-2">
             <div className="lg:mt-8">
               <ProductCosmoStack variant="signup" />
             </div>
           </div>
 
           {/* Right section - Form */}
-          <div className="flex w-full flex-col items-center justify-center pb-10 lg:min-h-screen lg:w-1/2 lg:p-12">
+          <div className="mt-8 flex w-full flex-col items-center justify-center pb-10 lg:mt-0 lg:min-h-screen lg:w-1/2 lg:p-12">
             <div className="w-full max-w-md lg:max-w-lg">
               <AuthCard className="w-full rounded-xl px-6 py-8 lg:px-10 lg:py-12">
                 <div className="hidden lg:block">