diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx
index f40b58b..992a154 100644
--- a/src/pages/Auth.tsx
+++ b/src/pages/Auth.tsx
@@ -3,30 +3,30 @@ import { Command } from "lucide-react"
 
 import { SettingsMenu } from "../components/SettingsMenu"
 import { useTranslation } from "../hooks/useTranslation"
+import { AuthSideVisual } from "./auth/AuthSideVisual"
 
 export default function Auth() {
   const { t } = useTranslation()
 
   return (
-    <div className="container relative min-h-screen grid flex-col items-center justify-center bg-white transition-colors lg:max-w-none lg:grid-cols-2 lg:px-0 dark:bg-slate-950">
+    <div className="container relative grid min-h-screen flex-col items-center justify-center bg-white transition-colors lg:h-screen lg:max-w-none lg:grid-cols-2 lg:overflow-hidden lg:px-0 dark:bg-slate-950">
       <div className="absolute inset-e-4 top-4 z-50 md:inset-e-8 md:top-8">
         <SettingsMenu />
       </div>
 
-      <div className="relative hidden h-full flex-col border-e border-slate-200 bg-slate-900 p-10 text-white dark:border-slate-800 dark:bg-slate-900/50 lg:flex">
+      <div className="relative hidden h-full overflow-hidden flex-col border-e border-slate-200 bg-slate-50 p-5 text-slate-950 dark:border-slate-800 dark:bg-slate-900/50 dark:text-white xl:p-6 2xl:p-10 lg:flex">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.16),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(16,185,129,0.12),transparent_32%)] dark:bg-[radial-gradient(circle_at_20%_20%,rgba(96,165,250,0.13),transparent_30%),radial-gradient(circle_at_80%_65%,rgba(45,212,191,0.09),transparent_32%)]" />
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,rgba(15,23,42,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(15,23,42,0.05)_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-50 dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)]" />
+
         <div className="relative z-20 flex items-center gap-2 text-lg font-medium">
           <Command className="h-6 w-6" />
           {t.title || "Qlockify"}
         </div>
 
-        <div className="relative z-20 mt-auto">
-          <blockquote className="space-y-2">
-            <p className="text-lg">"{t.login.brandingQuote}"</p>
-          </blockquote>
-        </div>
+        <AuthSideVisual />
       </div>
 
-      <div className="flex h-screen items-center justify-center p-8 lg:p-8">
+      <div className="flex h-screen items-center justify-center p-5 sm:p-6 lg:p-6 2xl:p-8">
         <div className="mx-auto flex w-full max-w-[26rem] flex-col justify-center">
           <Outlet />
         </div>