diff --git a/apps/main/src/pages/login.tsx b/apps/main/src/pages/login.tsx
index 2fb6a79..41ca566 100644
--- a/apps/main/src/pages/login.tsx
+++ b/apps/main/src/pages/login.tsx
@@ -95,7 +95,7 @@ export function LoginPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
+    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
       <AnimatedBackground />
       <div
         ref={cardRef}
@@ -113,7 +113,7 @@ export function LoginPage() {
 
         <div
           className={twMerge(
-            "relative w-full h-full p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
+            "relative w-full h-full p-5 sm:p-8 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
             isHovered
               ? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
               : "shadow-xl shadow-black/10 dark:shadow-black/25"
@@ -161,7 +161,7 @@ export function LoginPage() {
             />
           </div>
 
-          <h1 className="text-3xl font-bold text-foreground mb-8 text-center">
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground mb-6 sm:mb-8 text-center">
             {t("auth:login.title")}
           </h1>
 
@@ -175,7 +175,7 @@ export function LoginPage() {
           </div>
 
           <div className="space-y-4 flex flex-col items-center">
-            <form className="space-y-4 w-95 max-w-md mx-auto" onSubmit={onSubmit}>
+            <form className="space-y-4 w-full max-w-md mx-auto" onSubmit={onSubmit}>
               <div className="space-y-2">
                 <Label htmlFor="email">
                   {t("common:labels.email")} <span className="text-red-500">*</span>
diff --git a/apps/main/src/pages/signup.tsx b/apps/main/src/pages/signup.tsx
index 7d2bb39..59ad6c0 100644
--- a/apps/main/src/pages/signup.tsx
+++ b/apps/main/src/pages/signup.tsx
@@ -151,7 +151,7 @@ export function SignUpPage() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden">
+    <div className="min-h-screen flex items-center justify-center bg-linear-to-br from-primary/10 via-background to-secondary/5 animate-gradient-x bg-size-[400%_400%] relative overflow-hidden px-4 py-8 sm:px-6">
       <AnimatedBackground />
       <div
         ref={cardRef}
@@ -168,7 +168,7 @@ export function SignUpPage() {
 
         <div
           className={twMerge(
-            "relative w-full h-full p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
+            "relative w-full h-full p-4 sm:p-6 bg-card/80 backdrop-blur-md rounded-2xl border border-border z-10 transition-shadow duration-200",
             isHovered
               ? "shadow-[0_15px_35px_rgba(0,0,0,0.15)] dark:shadow-[0_15px_35px_rgba(0,0,0,0.3)]"
               : "shadow-xl shadow-black/10 dark:shadow-black/25"
@@ -216,13 +216,13 @@ export function SignUpPage() {
             />
           </div>
 
-          <h1 className="text-2xl font-bold text-foreground mb-6 text-center">
+          <h1 className="text-xl sm:text-2xl font-bold text-foreground mb-5 sm:mb-6 text-center">
             {t("auth:signup.title")}
           </h1>
 
           <div className="space-y-3 flex flex-col items-center">
             <form className="space-y-3 w-full" onSubmit={onSubmit}>
-              <div className="grid grid-cols-2 gap-3">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                 <div className="space-y-2">
                   <Label htmlFor="first_name" className="text-sm">
                     {t("auth:signup.firstName")} <span className="text-red-500">*</span>