diff --git a/public/HestiaLogoWhite.png b/public/HestiaLogoWhite.png
new file mode 100644
index 00000000..d9dacdcd
Binary files /dev/null and b/public/HestiaLogoWhite.png differ
diff --git a/src/app/components/signin/GoogleSignInButton.jsx b/src/app/components/signin/GoogleSignInButton.jsx
index baf0b3ca..efcb6206 100644
--- a/src/app/components/signin/GoogleSignInButton.jsx
+++ b/src/app/components/signin/GoogleSignInButton.jsx
@@ -12,7 +12,7 @@ const GoogleSignInButton = () => {
   return (
     <Button
       data-testid="google-signin-btn"
-      className="w-full text-black hover:text-gray-700"
+      className=" text-black hover:text-gray-400 text-xl hover:bg-gray-100 rounded-lg px-8"
       onClick={() => signIn("google", { callbackUrl })}
     >
       <svg
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 845d1019..aa42ec1c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,20 +12,33 @@ export default async function Home() {
   }
 
   return (
-    <section className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-r from-brandblue via-hoverblue to-brandmidblue">
-      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-lg flex flex-col items-center">
-        <Image
-          className="mb-8"
-          src="/hestiaIcon.png"
-          alt="Logo"
-          height={40}
-          width={28}
-        />
-        <h1 className="text-3xl font-medium text-gray-900 mb-8 text-center">
-          Sign in to your account
-        </h1>
-        <GoogleSignInButton />
+    <div className="flex min-h-screen">
+      {/* Left Half */}
+      <div className="w-1/2 bg-brandblue flex flex-col items-start justify-start p-12">
+        <div className="text-white text-3xl font-bold">Energy</div>
+        <div className="text-white text-3xl font-bold">Efficiency</div>
+        <div className="text-white text-3xl font-bold">Made Easy.</div>
       </div>
-    </section>
+
+      {/* Right Half */}
+      <section className="w-1/2 flex items-center justify-center">
+        <div className="w-full max-w-lg p-8  rounded-lg  flex flex-col items-center justify-center">
+          <Image
+            className="mb-8"
+            src="/HestiaLogoWhite.png"
+            alt="Logo"
+            height={200}
+            width={200}
+          />
+          <h1 className="text-4xl font-medium text-brandblue mb-8 text-center">
+            Sign in to your account
+          </h1>
+          <div className="text-brandmidblue text-lg mb-4">
+            Start managing your portfolios
+          </div>
+          <GoogleSignInButton />
+        </div>
+      </section>
+    </div>
   );
 }