diff --git a/public/favicon.ico b/public/favicon.ico
index 236fadb..b9fea25 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
deleted file mode 100644
index e4e710e..0000000
--- a/public/favicon.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="166" height="166" viewBox="0 0 166 166" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M162.041 38.7592C162.099 38.9767 162.129 39.201 162.13 39.4264V74.4524C162.13 74.9019 162.011 75.3435 161.786 75.7325C161.561 76.1216 161.237 76.4442 160.847 76.6678L131.462 93.5935V127.141C131.462 128.054 130.977 128.897 130.186 129.357L68.8474 164.683C68.707 164.763 68.5538 164.814 68.4007 164.868C68.3432 164.887 68.289 164.922 68.2284 164.938C67.7996 165.051 67.3489 165.051 66.9201 164.938C66.8499 164.919 66.7861 164.881 66.7191 164.855C66.5787 164.804 66.4319 164.76 66.2979 164.683L4.97219 129.357C4.58261 129.133 4.2589 128.81 4.0337 128.421C3.8085 128.032 3.68976 127.591 3.68945 127.141L3.68945 22.0634C3.68945 21.8336 3.72136 21.6101 3.7788 21.393C3.79794 21.3196 3.84262 21.2526 3.86814 21.1791C3.91601 21.0451 3.96068 20.9078 4.03088 20.7833C4.07874 20.7003 4.14894 20.6333 4.20638 20.5566C4.27977 20.4545 4.34678 20.3491 4.43293 20.2598C4.50632 20.1863 4.60205 20.1321 4.68501 20.0682C4.77755 19.9916 4.86051 19.9086 4.96581 19.848L35.6334 2.18492C36.0217 1.96139 36.4618 1.84375 36.9098 1.84375C37.3578 1.84375 37.7979 1.96139 38.1862 2.18492L68.8506 19.848H68.857C68.9591 19.9118 69.0452 19.9916 69.1378 20.065C69.2207 20.1289 69.3133 20.1863 69.3867 20.2566C69.476 20.3491 69.5398 20.4545 69.6164 20.5566C69.6707 20.6333 69.7441 20.7003 69.7887 20.7833C69.8621 20.911 69.9036 21.0451 69.9546 21.1791C69.9802 21.2526 70.0248 21.3196 70.044 21.3962C70.1027 21.6138 70.1328 21.8381 70.1333 22.0634V87.6941L95.686 72.9743V39.4232C95.686 39.1997 95.7179 38.9731 95.7753 38.7592C95.7977 38.6826 95.8391 38.6155 95.8647 38.5421C95.9157 38.408 95.9604 38.2708 96.0306 38.1463C96.0785 38.0633 96.1487 37.9962 96.2029 37.9196C96.2795 37.8175 96.3433 37.7121 96.4326 37.6227C96.506 37.5493 96.5986 37.495 96.6815 37.4312C96.7773 37.3546 96.8602 37.2716 96.9623 37.2109L127.633 19.5479C128.021 19.324 128.461 19.2062 128.91 19.2062C129.358 19.2062 129.798 19.324 130.186 19.5479L160.85 37.2109C160.959 37.2748 161.042 37.3546 161.137 37.428C161.217 37.4918 161.31 37.5493 161.383 37.6195C161.473 37.7121 161.536 37.8175 161.613 37.9196C161.67 37.9962 161.741 38.0633 161.785 38.1463C161.859 38.2708 161.9 38.408 161.951 38.5421C161.98 38.6155 162.021 38.6826 162.041 38.7592ZM157.018 72.9743V43.8477L146.287 50.028L131.462 58.5675V87.6941L157.021 72.9743H157.018ZM126.354 125.663V96.5176L111.771 104.85L70.1301 128.626V158.046L126.354 125.663ZM8.80126 26.4848V125.663L65.0183 158.043V128.629L35.6494 112L35.6398 111.994L35.6271 111.988C35.5281 111.93 35.4452 111.847 35.3526 111.777C35.2729 111.713 35.1803 111.662 35.1101 111.592L35.1038 111.582C35.0208 111.502 34.9634 111.403 34.8932 111.314C34.8293 111.228 34.7528 111.154 34.7017 111.065L34.6985 111.055C34.6411 110.96 34.606 110.845 34.5645 110.736C34.523 110.64 34.4688 110.551 34.4432 110.449C34.4113 110.328 34.4049 110.197 34.3922 110.072C34.3794 109.976 34.3539 109.881 34.3539 109.785V109.778V41.2045L19.5322 32.6619L8.80126 26.4848ZM36.913 7.35007L11.3635 22.0634L36.9066 36.7768L62.4529 22.0602L36.9066 7.35007H36.913ZM50.1999 99.1736L65.0215 90.6374V26.4848L54.2906 32.6651L39.4657 41.2045V105.357L50.1999 99.1736ZM128.91 24.713L103.363 39.4264L128.91 54.1397L154.453 39.4232L128.91 24.713ZM126.354 58.5675L111.529 50.028L100.798 43.8477V72.9743L115.619 81.5106L126.354 87.6941V58.5675ZM67.5711 124.205L105.042 102.803L123.772 92.109L98.2451 77.4053L68.8538 94.3341L42.0663 109.762L67.5711 124.205Z" fill="#FF2D20"/>
-</svg>
diff --git a/public/images/4238287.jpg b/public/images/4238287.jpg
new file mode 100644
index 0000000..3fe69fd
Binary files /dev/null and b/public/images/4238287.jpg differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..d05e7d3
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/resources/views/components/auth-header.blade.php b/resources/views/components/auth-header.blade.php
index 9d38db4..818b5f7 100644
--- a/resources/views/components/auth-header.blade.php
+++ b/resources/views/components/auth-header.blade.php
@@ -3,7 +3,7 @@
     'description',
 ])
 
-<div class="flex w-full flex-col text-center">
+<div class="flex w-full flex-col text-center gap-2">
     <p class="text-2xl font-bold">{{ $title }}</p>
     <p class="text-sm text-gray-500">{{ $description }}</p>
 </div>
diff --git a/resources/views/components/dashboard-sidebar.blade.php b/resources/views/components/dashboard-sidebar.blade.php
index 3cf1f18..086999e 100644
--- a/resources/views/components/dashboard-sidebar.blade.php
+++ b/resources/views/components/dashboard-sidebar.blade.php
@@ -148,12 +148,12 @@ class="relative flex flex-col h-screen bg-white border-r border-gray-100
             href="{{ route('dashboard') }}"
             wire:navigate
             class="shrink-0 flex items-center justify-center w-8 h-8
-                   rounded-lg bg-blue-600 text-gray-50
-                   shadow-sm  focus-visible:outline-none
+                   rounded-lg
+                    focus-visible:outline-none
                    focus-visible:ring-2 focus-visible:ring-cyan-400"
             aria-label="Go to dashboard"
         >
-            <x-mary-icon name='lucide.shield-cog' class="w-6 h-6"/>
+            <img src="{{asset('images/logo.png')}}" width="32px" height="32px" alt="">
         </a>
 
         <span
diff --git a/resources/views/layouts/auth.blade.php b/resources/views/layouts/auth.blade.php
index 7150091..99ffc53 100644
--- a/resources/views/layouts/auth.blade.php
+++ b/resources/views/layouts/auth.blade.php
@@ -1,3 +1,3 @@
-<x-layouts::auth.simple :title="$title ?? null">
+<x-layouts::auth.split-floating :title="$title ?? null">
     {{ $slot }}
-</x-layouts::auth.simple>
+</x-layouts::auth.split-floating>
diff --git a/resources/views/layouts/auth/split-floating.blade.php b/resources/views/layouts/auth/split-floating.blade.php
new file mode 100644
index 0000000..64b433f
--- /dev/null
+++ b/resources/views/layouts/auth/split-floating.blade.php
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
+<head>
+    @include('partials.head')
+</head>
+<body class="min-h-screen bg-gray-10 antialiased">
+<div
+    class="flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10 bg-cover bg-center"
+    style="background-image: url('{{ asset('images/4238287.jpg') }}');">
+    {{ $slot }}
+    @persist('mary-toaster')
+    <x-mary-toast/>
+    @endpersist
+</div>
+@livewireScripts
+</body>
+</html>
diff --git a/resources/views/livewire/auth/login.blade.php b/resources/views/livewire/auth/login.blade.php
index 6396ecf..c1f28be 100644
--- a/resources/views/livewire/auth/login.blade.php
+++ b/resources/views/livewire/auth/login.blade.php
@@ -1,63 +1,79 @@
 <x-layouts::auth :title="__('Log in')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Log in to your account')"
-                       :description="__('Enter your email and password below to log in')"/>
+    <div class="flex flex-col md:flex-row gap-6 w-full md:justify-between items-start text-blue-950">
+        <div class="flex justify-center flex-col gap-6 ml-10 mt-40">
+            <div class="flex flex-col">
+                <p class="text-6xl font-black">Welcome Back !</p>
+                <div class="mt-4 ml-2">
+                    <p class="text-lg">Login to account and continue to</p>
+                    <span class="font-bold">{{config('app.name')}}</span>
+                </div>
+            </div>
+            <!-- Session Status -->
+            <x-auth-session-status class="text-center" :status="session('status')"/>
+        </div>
+        <x-shared.card class="w-md p-6 flex gap-6 flex-col">
+            <div class="rounded-full relative bg-blue-100 text-blue-600 size-15 mx-auto p-4 mt-6">
+                <span
+                    class="motion-safe:animate-[ping_2s_ease-in-out_infinite] absolute inset-0 inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
 
-        <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')"/>
+                <x-mary-icon name="lucide.lock-keyhole" class="w-7 h-7 relative z-10"/>
+            </div>
+            <x-auth-header :title="__('Log in')"
+                           :description="__('Enter your credentials to access your account.')"/>
+            <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
+                @csrf
 
-        <form method="POST" action="{{ route('login.store') }}" class="flex flex-col gap-6">
-            @csrf
-
-            <!-- Email Address -->
-            <x-mary-input
-                name="email"
-                :label="__('Email address')"
-                :value="old('email')"
-                type="email"
-                required
-                autofocus
-                autocomplete="email"
-                placeholder="email@example.com"
-            />
-
-            <!-- Password -->
-            <div class="relative">
+                <!-- Email Address -->
                 <x-mary-input
-                    name="password"
-                    :label="__('Password')"
-                    type="password"
+                    name="email"
+                    :label="__('Email address')"
+                    :value="old('email')"
+                    type="email"
                     required
-                    autocomplete="current-password"
-                    :placeholder="__('Password')"
-                    viewable
+                    autofocus
+                    autocomplete="email"
+                    placeholder="email@example.com"
                 />
 
-                @if (Route::has('password.request'))
-                    <a class="absolute top-0 text-sm inset-e-0 hover:text-blue-500"
-                       href="{{route('password.request')}}"
-                       wire:navigate>
-                        {{ __('Forgot your password?') }}
-                    </a>
-                @endif
-            </div>
+                <!-- Password -->
+                <div class="relative">
+                    <x-mary-password
+                        right
+                        name="password"
+                        :label="__('Password')"
+                        type="password"
+                        required
+                        autocomplete="current-password"
+                        :placeholder="__('Password')"
+                        viewable
+                    />
 
-            <!-- Remember Me -->
-            <x-mary-checkbox name="remember" :label="__('Remember me')" :checked="old('remember')"/>
+                    @if (Route::has('password.request'))
+                        <a class="absolute top-0 text-sm inset-e-0 hover:text-blue-500"
+                           href="{{route('password.request')}}"
+                           wire:navigate>
+                            {{ __('Forgot your password?') }}
+                        </a>
+                    @endif
+                </div>
 
-            <div class="flex items-center justify-end">
-                <x-mary-button type="submit" class="w-full btn-primary" data-test="login-button">
-                    {{ __('Log in') }}
-                </x-mary-button>
-            </div>
-        </form>
+                <!-- Remember Me -->
+                <x-mary-checkbox name="remember" :label="__('Remember me')" :checked="old('remember')"/>
 
-        @if (Route::has('register'))
-            <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
-                <span>{{ __('Don\'t have an account?') }}</span>
-                <a href="{{route('register')}}" class="font-bold text-gray-900 hover:text-blue-500"
-                   wire:navigate>{{ __('Sign up') }}</a>
-            </div>
-        @endif
+                <div class="flex items-center justify-end">
+                    <x-mary-button type="submit" class="w-full btn-primary" data-test="login-button">
+                        {{ __('Log in') }}
+                    </x-mary-button>
+                </div>
+            </form>
+
+            @if (Route::has('register'))
+                <div class="space-x-1 text-sm text-center rtl:space-x-reverse text-zinc-600 dark:text-zinc-400">
+                    <span>{{ __('Don\'t have an account?') }}</span>
+                    <a href="{{route('register')}}" class="font-bold text-gray-900 hover:text-blue-500"
+                       wire:navigate>{{ __('Sign up') }}</a>
+                </div>
+            @endif
+        </x-shared.card>
     </div>
 </x-layouts::auth>
diff --git a/resources/views/livewire/auth/register.blade.php b/resources/views/livewire/auth/register.blade.php
index dea1691..ce44de6 100644
--- a/resources/views/livewire/auth/register.blade.php
+++ b/resources/views/livewire/auth/register.blade.php
@@ -1,70 +1,82 @@
 <x-layouts::auth :title="__('Register')">
-    <div class="flex flex-col gap-6">
-        <x-auth-header :title="__('Create an account')"
-                       :description="__('Enter your details below to create your account')"/>
-
-        <!-- Session Status -->
-        <x-auth-session-status class="text-center" :status="session('status')"/>
-
-        <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
-            @csrf
-            <!-- Name -->
-            <x-mary-input
-                name="name"
-                :label="__('Name')"
-                :value="old('name')"
-                type="text"
-                required
-                autofocus
-                autocomplete="name"
-                :placeholder="__('Full name')"
-            />
-
-            <!-- Email Address -->
-            <x-mary-input
-                name="email"
-                :label="__('Email address')"
-                :value="old('email')"
-                type="email"
-                required
-                autocomplete="email"
-                placeholder="email@example.com"
-            />
-
-            <!-- Password -->
-            <x-mary-input
-                name="password"
-                :label="__('Password')"
-                type="password"
-                required
-                autocomplete="new-password"
-                :placeholder="__('Password')"
-                viewable
-            />
-
-            <!-- Confirm Password -->
-            <x-mary-input
-                name="password_confirmation"
-                :label="__('Confirm password')"
-                type="password"
-                required
-                autocomplete="new-password"
-                :placeholder="__('Confirm password')"
-                viewable
-            />
-
-            <div class="flex items-center justify-end">
-                <x-mary-button type="submit" class="w-full btn-primary" data-test="register-user-button">
-                    {{ __('Create account') }}
-                </x-mary-button>
+    <div class="flex flex-col md:flex-row gap-6 w-full md:justify-between items-start text-blue-950">
+        <div class="flex justify-center flex-col gap-6 ml-10 mt-40">
+            <div class="flex flex-col">
+                <p class="text-6xl font-black">Get started !</p>
+                <div class="mt-4 ml-2">
+                    <p class="text-lg">Join us to explore features of</p>
+                    <span class="font-bold">{{config('app.name')}}</span>
+                </div>
             </div>
-        </form>
-
-        <div
-            class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
-            <span>{{ __('Already have an account ?') }}</span>
-            <a href="{{route('login')}}" class="font-bold text-gray-900 hover:text-blue-500"
-               wire:navigate>{{ __('Log in') }}</a>
+            <!-- Session Status -->
+            <x-auth-session-status class="text-center" :status="session('status')"/>
         </div>
+        <x-shared.card class="w-md p-6 flex gap-6 flex-col">
+            <x-auth-header :title="__('Sign Up')"
+                           :description="__('Enter your details to create your account')"/>
+
+            <form method="POST" action="{{ route('register.store') }}" class="flex flex-col gap-6">
+                @csrf
+                <!-- Name -->
+                <x-mary-input
+                    name="name"
+                    :label="__('Name')"
+                    :value="old('name')"
+                    type="text"
+                    required
+                    autofocus
+                    autocomplete="name"
+                    :placeholder="__('Full name')"
+                />
+
+                <!-- Email Address -->
+                <x-mary-input
+                    name="email"
+                    :label="__('Email address')"
+                    :value="old('email')"
+                    type="email"
+                    required
+                    autocomplete="email"
+                    placeholder="email@example.com"
+                />
+
+                <!-- Password -->
+                <x-mary-password
+                    right
+                    name="password"
+                    :label="__('Password')"
+                    type="password"
+                    required
+                    autocomplete="new-password"
+                    :placeholder="__('Password')"
+                    viewable
+                />
+
+                <!-- Confirm Password -->
+                <x-mary-password
+                    right
+                    name="password_confirmation"
+                    :label="__('Confirm password')"
+                    type="password"
+                    required
+                    autocomplete="new-password"
+                    :placeholder="__('Confirm password')"
+                    viewable
+                />
+
+                <div class="flex items-center justify-end">
+                    <x-mary-button type="submit" class="w-full btn-primary" data-test="register-user-button">
+                        {{ __('Create account') }}
+                    </x-mary-button>
+                </div>
+            </form>
+
+            <div
+                class="space-x-1 rtl:space-x-reverse text-center text-sm text-zinc-600 dark:text-zinc-400">
+                <span>{{ __('Already have an account ?') }}</span>
+                <a href="{{route('login')}}" class="font-bold text-gray-900 hover:text-blue-500"
+                   wire:navigate>{{ __('Log in') }}</a>
+            </div>
+        </x-shared.card>
     </div>
 </x-layouts::auth>
diff --git a/resources/views/partials/head.blade.php b/resources/views/partials/head.blade.php
index 3b539d9..52ae2f4 100644
--- a/resources/views/partials/head.blade.php
+++ b/resources/views/partials/head.blade.php
@@ -6,8 +6,7 @@
 </title>
 
 <link rel="icon" href="/favicon.ico" sizes="any">
-<link rel="icon" href="/favicon.svg" type="image/svg+xml">
-<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="apple-touch-icon" href="/images/logo.png">
 
 @fonts