diff --git a/resources/scripts/components/icons/svg/LoginBackground.vue b/resources/scripts/components/icons/svg/LoginBackground.vue
deleted file mode 100644
index daae47ff..00000000
--- a/resources/scripts/components/icons/svg/LoginBackground.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 1012 1023"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    preserveAspectRatio="none"
-    class="text-primary-500"
-  >
-    <path
-      d="M116.21 472.5C55.1239 693.5 78.5219 837.5 114.349 1023H1030.5V-1L0 -106C147.5 21.5 172.311 269.536 116.21 472.5Z"
-      fill="url(#paint0_linear)"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="515.25"
-        y1="-106"
-        x2="515.25"
-        y2="1023"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop
-          stop-color="var(--color-primary-500)"
-        />
-        <stop
-          offset="1"
-          stop-color="var(--color-primary-400)"
-        />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
-
-<script setup>
-</script>
diff --git a/resources/scripts/components/icons/svg/LoginBackgroundOverlay.vue b/resources/scripts/components/icons/svg/LoginBackgroundOverlay.vue
deleted file mode 100644
index 417fb86b..00000000
--- a/resources/scripts/components/icons/svg/LoginBackgroundOverlay.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <svg
-    width="1122"
-    height="1017"
-    viewBox="0 0 1122 1017"
-    preserveAspectRatio="none"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M226.002 466.5C164.935 687.5 188.326 831.5 224.141 1017H1140V-7L0 -109.5C142.5 -7.5 282.085 263.536 226.002 466.5Z"
-      fill="url(#paint0_linear)"
-      fill-opacity="0.1"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="649.5"
-        y1="-7"
-        x2="649.5"
-        y2="1017"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop
-          stop-color="var(--color-primary-500)"
-        />
-        <stop
-          offset="1"
-          stop-color="var(--color-primary-400)"
-        />
-      </linearGradient>
-    </defs>
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/svg/LoginBottomVector.vue b/resources/scripts/components/icons/svg/LoginBottomVector.vue
deleted file mode 100644
index d734938b..00000000
--- a/resources/scripts/components/icons/svg/LoginBottomVector.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <svg viewBox="0 0 1170 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M690 4.08004C518 -9.91998 231 4.08004 -6 176.361L231 197.08L1170 219.08C1113.33 175.747 909.275 21.928 690 4.08004Z"
-      fill="white"
-      fill-opacity="0.1"
-    />
-  </svg>
-</template>
diff --git a/resources/scripts/components/icons/svg/LoginPlanetCrater.vue b/resources/scripts/components/icons/svg/LoginPlanetCrater.vue
deleted file mode 100644
index 15f24929..00000000
--- a/resources/scripts/components/icons/svg/LoginPlanetCrater.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-  <svg
-    width="422"
-    height="290"
-    viewBox="0 0 422 290"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0)">
-      <path
-        opacity="0.3"
-        d="M220.111 290.223C341.676 290.223 440.223 191.676 440.223 70.1115C440.223 -51.4527 341.676 -150 220.111 -150C98.5473 -150 0 -51.4527 0 70.1115C0 191.676 98.5473 290.223 220.111 290.223Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        opacity="0.3"
-        d="M220.111 246.513C317.535 246.513 396.513 167.535 396.513 70.1114C396.513 -27.3124 317.535 -106.29 220.111 -106.29C122.688 -106.29 43.71 -27.3124 43.71 70.1114C43.71 167.535 122.688 246.513 220.111 246.513Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        d="M97.0093 35.322C96.7863 35.991 96.5633 36.66 96.5633 37.3291C94.1101 46.4725 92.7721 55.6159 92.3261 64.5364C91.88 74.5718 92.7721 84.6073 94.5562 94.1968C103.477 140.137 137.374 179.387 185.545 192.991C224.794 204.141 265.159 195.444 295.712 173.143C309.538 163.107 321.358 150.172 330.278 135.231C335.854 125.864 340.314 115.606 343.436 104.678C346.335 94.6428 347.896 84.6073 348.119 74.7949C348.788 56.954 345.666 39.3362 339.422 23.2794C325.372 -12.6253 295.043 -41.8397 255.124 -52.9902C211.637 -65.2558 167.481 -53.6593 136.036 -26.452C117.749 -10.6182 103.923 10.3448 97.0093 35.322Z"
-        fill="white"
-        fill-opacity="0.1"
-      />
-      <path
-        d="M97.0095 35.3223C96.7865 35.9913 96.5635 36.6603 96.5635 37.3294L347.896 74.7952C348.565 56.9543 345.443 39.3365 339.199 23.2797L136.036 -26.4517C117.749 -10.6179 103.923 10.3451 97.0095 35.3223Z"
-        fill="white"
-        fill-opacity="0.05"
-      />
-      <path
-        d="M92.3261 64.7598C91.88 74.7952 92.7721 84.8307 94.5562 94.4202L295.489 173.366C309.315 163.33 321.135 150.396 330.055 135.454L92.3261 64.7598Z"
-        fill="white"
-        fill-opacity="0.05"
-      />
-      <path
-        d="M153.431 11.9056C151.424 19.265 152.316 26.8473 155.661 33.0916C159.229 39.7819 165.473 45.1342 173.279 47.3643C188.443 51.6015 204.5 42.6811 208.737 27.5163C209.853 23.9482 210.076 20.157 209.629 16.5888C208.514 5.21529 200.486 -4.82018 188.889 -7.94233C173.502 -12.1795 157.668 -3.25911 153.431 11.9056Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M156.553 22.3869C155.438 25.9551 155.215 29.7462 155.661 33.3144C159.229 40.0047 165.473 45.357 173.279 47.5871C188.443 51.8243 204.5 42.9039 208.737 27.7391C209.852 24.171 210.075 20.3798 209.629 16.8116C206.061 10.1213 199.817 4.76908 192.011 2.53897C176.624 -1.92124 160.79 6.99919 156.553 22.3869Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M270.735 95.5343C267.613 100.887 266.944 106.685 268.282 112.26C269.62 118.058 273.411 123.411 278.986 126.533C289.914 132.777 303.74 128.986 309.985 118.281C311.546 115.605 312.438 112.929 312.884 110.03C314.222 101.11 309.985 91.9661 301.733 87.0599C290.806 81.0386 276.979 84.8298 270.735 95.5343Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M270.958 104.232C269.397 106.908 268.505 109.584 268.059 112.483C269.397 118.281 273.188 123.634 278.764 126.756C289.691 133 303.518 129.209 309.762 118.504C311.323 115.828 312.215 113.152 312.661 110.253C311.323 104.455 307.532 99.1025 301.957 95.9804C291.252 89.5131 277.426 93.3043 270.958 104.232Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M250.663 130.771C247.54 133.001 245.533 136.123 244.864 139.468C243.972 143.036 244.641 147.051 247.094 150.396C251.555 156.863 260.252 158.647 266.942 154.187C268.503 153.072 269.842 151.734 270.734 150.396C273.856 145.712 274.079 139.468 270.734 134.562C265.827 127.872 257.13 126.311 250.663 130.771Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M248.433 135.677C246.872 136.792 245.534 138.13 244.642 139.468C243.75 143.036 244.419 147.051 246.872 150.396C251.332 156.863 260.03 158.647 266.72 154.187C268.281 153.072 269.619 151.734 270.511 150.396C271.403 146.828 270.734 142.813 268.281 139.468C263.821 132.778 254.901 131.217 248.433 135.677Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M215.651 14.8049C214.759 18.15 215.205 21.4952 216.543 24.1713C218.104 27.0704 220.78 29.5236 224.348 30.4156C231.038 32.4227 238.175 28.4085 240.182 21.4952C240.628 19.9341 240.851 18.15 240.628 16.5889C240.182 11.4597 236.614 6.99951 231.484 5.66145C224.571 4.10037 217.435 8.11456 215.651 14.8049Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M216.989 19.4876C216.543 21.0487 216.32 22.8328 216.543 24.3939C218.104 27.293 220.78 29.7461 224.348 30.6382C231.039 32.6453 238.175 28.6311 240.182 21.7177C240.628 20.1567 240.851 18.3726 240.628 16.8115C239.067 13.9124 236.391 11.4593 232.823 10.5672C225.91 8.78313 218.773 12.5743 216.989 19.4876Z"
-        class="fill-primary-500"
-      />
-      <path
-        d="M122.209 124.526C121.763 125.864 121.986 127.202 122.655 128.54C123.324 129.878 124.439 130.77 126.001 131.216C128.9 132.108 131.799 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.468 123.634 130.907 121.627 128.9 121.181C126.001 120.066 123.101 121.85 122.209 124.526Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M122.878 126.533C122.655 127.202 122.655 127.871 122.655 128.54C123.324 129.878 124.439 130.77 126 131.216C128.899 132.108 131.798 130.324 132.468 127.648C132.691 126.979 132.691 126.31 132.691 125.641C132.021 124.303 130.906 123.411 129.345 122.965C126.446 122.073 123.547 123.634 122.878 126.533Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-      <path
-        d="M169.487 123.188C168.149 123.411 166.811 124.08 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.116 171.048 133.67C171.717 133.67 172.386 133.224 172.832 133C174.617 131.885 175.732 129.878 175.286 127.648C175.063 124.749 172.386 122.742 169.487 123.188Z"
-        class="fill-primary-700"
-        fill-opacity="0.8"
-      />
-      <path
-        d="M167.926 124.526C167.257 124.526 166.588 124.972 166.142 125.195C165.25 126.31 164.804 127.648 165.027 129.209C165.473 132.108 168.149 134.115 171.048 133.669C171.717 133.669 172.386 133.223 172.832 133C173.724 131.885 174.17 130.547 173.947 128.986C173.501 126.087 170.825 124.08 167.926 124.526Z"
-        class="fill-primary-500"
-        fill-opacity="0.5"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect
-          width="440"
-          height="440"
-          fill="white"
-          transform="translate(0 -150)"
-        />
-      </clipPath>
-    </defs>
-  </svg>
-</template>
-
diff --git a/resources/scripts/features/auth/views/ForgotPasswordView.vue b/resources/scripts/features/auth/views/ForgotPasswordView.vue
index a591d89d..915eb7cb 100644
--- a/resources/scripts/features/auth/views/ForgotPasswordView.vue
+++ b/resources/scripts/features/auth/views/ForgotPasswordView.vue
@@ -21,6 +21,7 @@
       :disabled="isLoading"
       type="submit"
       variant="primary"
+      class="w-full justify-center"
     >
       <div v-if="!isSent">
         {{ $t('validation.send_reset_link') }}
diff --git a/resources/scripts/features/auth/views/LoginView.vue b/resources/scripts/features/auth/views/LoginView.vue
index 08770d8b..e5b21704 100644
--- a/resources/scripts/features/auth/views/LoginView.vue
+++ b/resources/scripts/features/auth/views/LoginView.vue
@@ -50,7 +50,7 @@
       </div>
     </div>
 
-    <BaseButton :loading="isLoading" type="submit">
+    <BaseButton :loading="isLoading" type="submit" class="w-full justify-center">
       {{ $t('login.login') }}
     </BaseButton>
   </form>
diff --git a/resources/scripts/features/auth/views/RegisterWithInvitationView.vue b/resources/scripts/features/auth/views/RegisterWithInvitationView.vue
index af25a3ae..77b5eab9 100644
--- a/resources/scripts/features/auth/views/RegisterWithInvitationView.vue
+++ b/resources/scripts/features/auth/views/RegisterWithInvitationView.vue
@@ -119,6 +119,7 @@
         :loading="isSubmitting"
         :disabled="isSubmitting"
         type="submit"
+        class="w-full justify-center"
       >
         Create Account & Join
       </BaseButton>
diff --git a/resources/scripts/features/auth/views/ResetPasswordView.vue b/resources/scripts/features/auth/views/ResetPasswordView.vue
index 178bee21..89c4aa7a 100644
--- a/resources/scripts/features/auth/views/ResetPasswordView.vue
+++ b/resources/scripts/features/auth/views/ResetPasswordView.vue
@@ -46,7 +46,7 @@
       />
     </BaseInputGroup>
 
-    <BaseButton :loading="isLoading" type="submit" variant="primary">
+    <BaseButton :loading="isLoading" type="submit" variant="primary" class="w-full justify-center">
       {{ $t('login.reset_password') }}
     </BaseButton>
   </form>
diff --git a/resources/scripts/layouts/AuthLayout.vue b/resources/scripts/layouts/AuthLayout.vue
index abcbb440..4b86dd20 100644
--- a/resources/scripts/layouts/AuthLayout.vue
+++ b/resources/scripts/layouts/AuthLayout.vue
@@ -1,102 +1,73 @@
 <template>
-  <div class="grid h-screen grid-cols-12 overflow-y-hidden bg-surface-tertiary">
+  <div class="bg-glass-gradient relative min-h-screen w-full overflow-hidden">
     <NotificationRoot />
 
-    <div
+    <main
       class="
-        flex items-center justify-center w-full max-w-sm col-span-12
-        p-4 mx-auto text-heading md:p-8 md:col-span-6 lg:col-span-4
-        flex-2 md:pb-48 md:pt-40
+        relative flex min-h-screen flex-col items-center justify-center
+        px-4 py-12 sm:px-6
       "
     >
-      <div class="w-full">
+      <!-- Logo above the card -->
+      <div class="mb-8 flex justify-center">
         <MainLogo
           v-if="!loginPageLogo"
-          class="block w-48 h-auto max-w-full mb-32 text-primary-500"
+          class="h-12 w-auto text-primary-500"
         />
-
         <img
           v-else
           :src="loginPageLogo"
-          class="block w-48 h-auto max-w-full mb-32 text-primary-500"
+          alt="InvoiceShelf"
+          class="h-12 w-auto"
         />
+      </div>
+
+      <!-- Auth card — same visual language as BaseCard -->
+      <article
+        class="
+          w-full max-w-md
+          bg-surface
+          rounded-xl
+          border border-line-default
+          shadow-sm
+          backdrop-blur-sm
+          px-8 py-10 sm:px-10 sm:py-12
+        "
+      >
+        <header class="text-center mb-8">
+          <h1 class="text-2xl font-semibold text-heading">
+            {{ heading }}
+          </h1>
+          <p class="mt-2 text-sm text-muted">
+            {{ subheading }}
+          </p>
+        </header>
 
         <router-view />
+      </article>
 
-        <div
-          class="
-            pt-24 mt-0 text-sm not-italic font-medium leading-relaxed
-            text-left text-subtle md:pt-40
-          "
-        >
-          <p v-if="copyrightText" class="mb-3">
-            {{ copyrightText }}
-          </p>
-          <p v-else class="mb-3">
-            Powered by
-            <a
-              href="https://invoiceshelf.com/"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="text-primary-500 hover:underline"
-            >InvoiceShelf</a>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <div
-      class="
-        relative flex-col items-center justify-center hidden w-full h-full
-        pl-10 bg-no-repeat bg-cover md:col-span-6 lg:col-span-8
-        md:flex content-box overflow-hidden
-      "
-    >
-      <LoginBackground class="absolute h-full w-full" />
-
-      <LoginPlanetCrater
-        class="absolute z-10 top-0 right-0 h-[300px] w-[420px]"
-      />
-
-      <LoginBackgroundOverlay class="absolute h-full w-full right-[7.5%]" />
-
-      <div class="md:pl-10 xl:pl-0 relative z-50 w-7/12 xl:w-5/12">
-        <h1
-          class="
-            hidden mb-3 text-3xl leading-normal text-left text-white
-            xl:text-5xl xl:leading-tight md:none lg:block
-          "
-        >
-          {{ pageHeading }}
-        </h1>
-        <p
-          class="
-            hidden text-sm not-italic font-normal leading-normal text-left
-            text-gray-100 xl:text-base xl:leading-6 md:none lg:block
-          "
-        >
-          {{ pageDescription }}
-        </p>
-      </div>
-
-      <LoginBottomVector
-        class="
-          absolute z-50 w-full bg-no-repeat content-bottom
-          h-[15vw] lg:h-[22vw] right-[32%] bottom-0
-        "
-      />
-    </div>
+      <!-- Footer -->
+      <footer class="mt-8 text-center text-xs text-subtle">
+        <span v-if="copyrightText">{{ copyrightText }}</span>
+        <span v-else>
+          Powered by
+          <a
+            href="https://invoiceshelf.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-primary-500 hover:text-primary-600 font-medium transition-colors"
+          >InvoiceShelf</a>
+        </span>
+      </footer>
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import NotificationRoot from '@/scripts/components/notifications/NotificationRoot.vue'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-import LoginBackground from '@/scripts/components/icons/svg/LoginBackground.vue'
-import LoginPlanetCrater from '@/scripts/components/icons/svg/LoginPlanetCrater.vue'
-import LoginBottomVector from '@/scripts/components/icons/svg/LoginBottomVector.vue'
-import LoginBackgroundOverlay from '@/scripts/components/icons/svg/LoginBackgroundOverlay.vue'
 
 declare global {
   interface Window {
@@ -107,28 +78,48 @@ declare global {
   }
 }
 
-const pageHeading = computed<string>(() => {
-  if (window.login_page_heading) {
-    return window.login_page_heading
-  }
-  return 'Simple Invoicing for Individuals Small Businesses'
+const route = useRoute()
+
+interface RouteCopy {
+  heading: string
+  subheading: string
+}
+
+const COPY: Record<string, RouteCopy> = {
+  login: {
+    heading: 'Welcome back',
+    subheading: 'Sign in to continue to your account',
+  },
+  'forgot-password': {
+    heading: 'Forgot your password?',
+    subheading: 'Enter your email and we will send you a reset link',
+  },
+  'reset-password': {
+    heading: 'Set a new password',
+    subheading: 'Choose a strong password to secure your account',
+  },
+  'register-with-invitation': {
+    heading: 'Create your account',
+    subheading: 'Complete your registration to get started',
+  },
+}
+
+const heading = computed<string>(() => {
+  if (window.login_page_heading) return window.login_page_heading
+  const name = route.name?.toString() ?? 'login'
+  return COPY[name]?.heading ?? COPY.login.heading
 })
 
-const pageDescription = computed<string>(() => {
-  if (window.login_page_description) {
-    return window.login_page_description
-  }
-  return 'InvoiceShelf helps you track expenses, record payments & generate beautiful invoices & estimates.'
+const subheading = computed<string>(() => {
+  if (window.login_page_description) return window.login_page_description
+  const name = route.name?.toString() ?? 'login'
+  return COPY[name]?.subheading ?? COPY.login.subheading
 })
 
-const copyrightText = computed<string | null>(() => {
-  return window.copyright_text ?? null
-})
+const copyrightText = computed<string | null>(() => window.copyright_text ?? null)
 
 const loginPageLogo = computed<string | false>(() => {
-  if (window.login_page_logo) {
-    return window.login_page_logo
-  }
+  if (window.login_page_logo) return window.login_page_logo
   return false
 })
 </script>