diff --git a/public/safedepsign.svg b/public/safedepsign.svg
new file mode 100644
index 0000000..df0f5af
--- /dev/null
+++ b/public/safedepsign.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 171.69 103.25"><defs><style>.cls-1{fill:none;}.cls-2{fill:#4360e0;}</style></defs><g id="Layer_1-2"><path class="cls-2" d="M91.32,51.79h-30.51v-12.65h2.75c.25,0,.44.2.44.44v8.42c0,.25.2.44.44.44h23.16c.24,0,.44-.2.44-.44v-21.05c0-.24-.19-.44-.43-.44-9.2,0-26.81,0-26.81,0,0,0,0-1.51,0-3.58.01-2.5.75-7.13,2.59-9.74,3.89-5.5,9.15-7.58,15.74-6.49,5.77.96,10.82,6.41,12.02,12.22h-3.13c-.19,0-.36-.12-.42-.3-1.37-4.09-4.27-7.37-8.52-8.48-7.9-2.07-14.75,4.15-14.99,12.34,0,.25.2.45.45.45h26.24c.29,0,.53.23.53.52v28.32Z"/><path class="cls-2" d="M95.47,51.63v-2.64c0-.21.18-.39.4-.41,3.56-.31,6.42-1.81,8.63-4.46,1.62-1.93,2.41-4.32,2.39-6.75-.02-2.98-1.1-5.5-3.34-7.69-2.11-2.06-4.65-3.28-7.67-3.53-.23-.02-.41-.19-.41-.41v-2.64c4.74.33,9.33,2.43,12.1,6.49,3.42,5,3.57,10.24.22,15.32-2.78,4.21-6.93,6.39-12.32,6.71Z"/><path class="cls-2" d="M9.33,89.77l3.54-1.64c.34,1.22.95,2.15,1.85,2.79.9.64,2.04.96,3.43.96,1.32,0,2.36-.37,3.14-1.1.78-.73,1.17-1.72,1.17-2.95,0-1.6-1.33-3.03-3.99-4.29-.37-.19-.66-.32-.86-.41-3.01-1.47-5.01-2.79-6.01-3.98-1-1.19-1.5-2.64-1.5-4.35,0-2.22.75-4.03,2.27-5.41,1.51-1.38,3.49-2.07,5.94-2.07,2.01,0,3.7.39,5.05,1.17,1.35.78,2.29,1.89,2.81,3.35l-3.47,1.79c-.55-.86-1.15-1.48-1.8-1.88-.65-.4-1.4-.6-2.25-.6-1.19,0-2.14.31-2.84.93-.7.62-1.05,1.45-1.05,2.5,0,1.64,1.54,3.17,4.62,4.59.24.11.42.2.56.26,2.7,1.24,4.55,2.46,5.56,3.64,1.01,1.19,1.51,2.67,1.51,4.45,0,2.59-.81,4.64-2.44,6.16-1.63,1.52-3.83,2.28-6.6,2.28-2.32,0-4.23-.53-5.71-1.6-1.49-1.07-2.46-2.6-2.92-4.59Z"/><path class="cls-2" d="M49.88,95.23l-3.09-7.03h-10.81l-3.17,7.03h-4.66l13.22-28.37,13.2,28.37h-4.68ZM37.61,84.51h7.61l-2.8-6.23c-.16-.4-.33-.85-.5-1.37-.17-.52-.35-1.09-.52-1.72-.15.6-.31,1.15-.48,1.67-.17.52-.34.99-.51,1.43l-2.8,6.23Z"/><path class="cls-2" d="M57.13,95.23v-27.29h15.23v3.77h-10.79v6.8h10.79v3.9h-10.79v12.83h-4.44Z"/><path class="cls-2" d="M77.17,95.23v-27.29h15.23v3.77h-10.79v6.84h10.79v3.9h-10.79v8.82h10.79v3.97h-15.23Z"/><path class="cls-2" d="M97.49,95.23v-27.29h5.98c3.89,0,6.63.2,8.21.59,1.58.39,2.97,1.05,4.17,1.97,1.58,1.21,2.77,2.75,3.59,4.64.81,1.89,1.22,4.05,1.22,6.47s-.41,4.57-1.22,6.44c-.81,1.87-2.01,3.41-3.59,4.63-1.19.92-2.55,1.58-4.07,1.97-1.52.39-3.89.59-7.11.59h-7.18ZM101.92,91.22h3.73c2.05,0,3.59-.14,4.61-.41s1.92-.73,2.68-1.38c1.03-.88,1.8-1.98,2.32-3.29.52-1.31.77-2.84.77-4.58s-.26-3.27-.77-4.58c-.52-1.31-1.29-2.41-2.32-3.29-.77-.65-1.69-1.11-2.77-1.38-1.08-.27-2.76-.41-5.04-.41h-3.21v19.31Z"/><path class="cls-2" d="M125.75,95.23v-27.29h15.23v3.77h-10.79v6.84h10.79v3.9h-10.79v8.82h10.79v3.97h-15.23Z"/><path class="cls-2" d="M150.22,82.98v12.25h-4.16v-27.29h6.71c1.99,0,3.45.11,4.39.33.94.22,1.76.58,2.45,1.07.86.63,1.53,1.49,2.01,2.56.48,1.07.73,2.26.73,3.55s-.24,2.49-.73,3.58-1.16,1.95-2.01,2.57c-.7.5-1.51.85-2.45,1.06-.94.21-2.4.32-4.39.32h-2.55ZM150.5,79.35h1.14c2.46,0,4.1-.27,4.92-.8.82-.53,1.23-1.48,1.23-2.83,0-1.45-.44-2.48-1.31-3.08-.88-.6-2.49-.9-4.84-.9h-1.14v7.61Z"/><rect class="cls-1" width="171.69" height="103.25"/></g></svg>
\ No newline at end of file
diff --git a/public/sign.png b/public/sign.png
new file mode 100644
index 0000000..92801bb
Binary files /dev/null and b/public/sign.png differ
diff --git a/src/app/auth/components/ImageSection.tsx b/src/app/auth/components/ImageSection.tsx
index b3eed79..485f8fc 100644
--- a/src/app/auth/components/ImageSection.tsx
+++ b/src/app/auth/components/ImageSection.tsx
@@ -2,13 +2,14 @@ import React from 'react';
 import Image from 'next/image';
 
 const ImageSection: React.FC = () => (
-  <div className="w-full max-w-lg  aspect-video mb-6 overflow-hidden rounded-2xl ">
-    <Image
-      src="/pre-auth.svg"
-      alt="Authentication illustration"
-      width={800}
-      height={450}
-      className="object-cover w-full h-full "
+  <div className="relative w-full max-w-2xl lg:max-w-3xl aspect-video mb-6 overflow-hidden rounded-2xl">
+   <Image
+      src="/sign.png"
+      alt="Authentication"
+      fill
+      priority
+      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw"
+      className="object-contain"
     />
   </div>
 );
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index 20f4230..4408586 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -6,27 +6,38 @@ import { CheckCircle, Shield } from 'lucide-react';
 import ImageSection from "./components/ImageSection";
 import TextSection from "./components/TextSection";
 import AuthButtons from './components/AuthButtons';
+import Image from 'next/image';
 
 const Auth = () => {
   return (
-    <main className="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-50 to-white p-8 font-inter">
-      <MainCard>
-        <div className="p-8 lg:p-12 flex flex-col items-center justify-center bg-gray-50 border-r border-gray-300 relative">
-          <div className="flex space-x-2 items-center pb-4">
-            <Badge icon={CheckCircle} text="Secure" bgColor="bg-green-100" textColor="text-green-600" />
-            <Badge icon={Shield} text="Verified" bgColor="bg-blue-100" textColor="text-blue-600" />
-          </div>
-          <ImageSection />
-          <TextSection />
+    <main className="flex items-center justify-center min-h-screen px-4 py-8 bg-gradient-to-br from-blue-100 to-white font-inter">
+      <MainCard className="flex flex-col md:flex-row w-full max-w-4xl bg-white rounded-lg shadow-lg overflow-hidden">
+      <div className="p-4 sm:p-6 lg:p-8 flex-1 flex flex-col items-center justify-center bg-gray-50 border-b md:border-b-0 md:border-r border-gray-200">
+        <div className="flex items-center space-x-2 mb-4 sm:mb-6">
+        <Badge icon={CheckCircle} text="Secure" bgColor="bg-green-100" textColor="text-green-600" />
+        <Badge icon={Shield} text="Verified" bgColor="bg-blue-100" textColor="text-blue-600" />
         </div>
-        <div className="p-8 lg:p-12 flex flex-col justify-center space-y-8">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 mb-2">Get Started</h1>
-            <p className="text-gray-600">Register for SafeDep Cloud to get API access.</p>
-          </div>
-          <AuthButtons />
-          <TermsAndPrivacy />
+        <ImageSection />
+        <TextSection />
+      </div>
+      <div className="p-4 sm:p-6 lg:p-8 flex-1 flex flex-col justify-center space-y-4 sm:space-y-6">
+        <div>
+        <div className="flex items-center gap-2 mb-3 sm:mb-4">
+          <h1 className="text-3xl sm:text-4xl lg:text-5xl font-light text-gray-900 text-left leading-tight">
+          Get Started
+          <br />
+          <span className="inline-flex items-center">
+            With <Image src="/safedepsign.svg" alt="SafeDep Logo" width={20} height={20} className="w-16 sm:w-20 h-6 sm:h-8 object-contain ml-2" />
+          </span>
+          </h1>
         </div>
+        <p className="text-base sm:text-lg text-gray-600 leading-relaxed">
+          Register for SafeDep Cloud to get API access.
+        </p>
+        </div>
+        <AuthButtons />
+        <TermsAndPrivacy />
+      </div>
       </MainCard>
     </main>
   );
diff --git a/src/components/MainCard.tsx b/src/components/MainCard.tsx
index bf7c5f1..4b662cd 100644
--- a/src/components/MainCard.tsx
+++ b/src/components/MainCard.tsx
@@ -2,14 +2,15 @@ import React from 'react';
 
 interface MainCardProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-const MainCard: React.FC<MainCardProps> = ({ children }) => {
+const MainCard: React.FC<MainCardProps> = ({ children, className }) => {
   return (
-    <div className="w-full max-w-5xl mx-auto bg-white rounded-2xl shadow-lg border border-gray-200 grid grid-cols-1 md:grid-cols-2 overflow-hidden">
+    <div className={className}>
       {children}
     </div>
   );
 };
 
-export default MainCard;
+export default MainCard;
\ No newline at end of file