diff --git a/app/Http/Controllers/Customer/AuthController.php b/app/Http/Controllers/Customer/AuthController.php
new file mode 100644
index 0000000..123f1a9
--- /dev/null
+++ b/app/Http/Controllers/Customer/AuthController.php
@@ -0,0 +1,106 @@
+<?php
+
+namespace App\Http\Controllers\Customer;
+
+use App\Http\Controllers\Controller;
+use App\Models\Customer;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Laravel\Socialite\Facades\Socialite;
+use SocialiteProviders\Manager\Config;
+
+class AuthController extends Controller
+{
+    public function login()
+    {
+        return inertia('Home/Auth/Login');
+    }
+
+    public function update(Request $request)
+    {
+        $request->validate([
+            'username' => 'string|required|alpha_dash',
+            'password' => 'string|required',
+        ]);
+
+        $isAuth = Auth::guard('customer')->attempt(['username' => $request->username, 'password' => $request->password]);
+        if ($isAuth) {
+            return redirect()->route('home.index');
+        }
+
+        return redirect()->route('customer.login')
+            ->with('message', ['type' => 'error', 'message' => 'invalid credentials']);
+    }
+
+    public function signin_google()
+    {
+        $config = new Config(
+            env('GOOGLE_CLIENT_ID'),
+            env('GOOGLE_CLIENT_SECRET'),
+            route('customer.login.callback_google')
+        );
+
+        return Socialite::driver('google')
+            ->setConfig($config)
+            ->redirect();
+    }
+
+    public function callback_google()
+    {
+        $user = Socialite::driver('google')->user();
+        $customer = Customer::where('google_id', $user->id)->first();
+        if ($customer == null) {
+            $customer = Customer::create([
+                'fullname' => $user->name,
+                'name' => $user->nickname,
+                'email' => $user->email,
+                'username' => $user->id,
+                'google_id' => $user->id,
+                'image' => 'GOOGLE-' . $user->avatar,
+                'google_oauth_response' => json_encode($user),
+            ]);
+        }
+
+        Auth::guard('customer')->loginUsingId($customer->id);
+
+        return redirect()->route('home.index');
+    }
+
+    public function register()
+    {
+        return inertia('Home/Auth/Register');
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'fullname' => 'string|required',
+            'name' => 'string|required',
+            'address' => 'string|required',
+            'phone' => 'string|required|numeric',
+            'username' => 'string|required|min:5|alpha_dash|unique:customers,username',
+            'password' => 'string|required|min:8|confirmed',
+        ]);
+
+        $customer = Customer::create([
+            'fullname' => $request->fullname,
+            'name' => $request->name,
+            'address' => $request->address,
+            'phone' => $request->phone,
+            'username' => $request->username,
+            'password' => bcrypt($request->password),
+        ]);
+
+        Auth::guard('customer')->loginUsingId($customer->id);
+
+        return redirect()->route('home.index');
+    }
+
+    public function destroy()
+    {
+        Auth::logout();
+
+        return redirect()->route('customer.login')
+            ->with('message', ['type' => 'success', 'message' => 'you are logged out, see you next time']);
+    }
+}
diff --git a/app/Http/Controllers/Customer/ProfileController.php b/app/Http/Controllers/Customer/ProfileController.php
new file mode 100644
index 0000000..8722c14
--- /dev/null
+++ b/app/Http/Controllers/Customer/ProfileController.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace App\Http\Controllers\Customer;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class ProfileController extends Controller
+{
+    public function index()
+    {
+        return inertia('Home/Profile/Index');
+    }
+
+    public function show()
+    {
+        return inertia('Home/Profile/Form');
+    }
+
+    public function update(Request $request)
+    {
+        $customer = auth()->user();
+
+        $request->validate([
+            'fullname' => 'string|required',
+            'name' => 'string|required',
+            'address' => 'string|required',
+            'phone' => 'string|required|numeric',
+            'username' => 'string|required|min:5|alpha_dash|unique:customers,username,' . $customer->id,
+            'password' => 'nullable|string|min:8|confirmed',
+            'image' => 'nullable|image',
+        ]);
+
+        if ($request->hasFile('image')) {
+            $file = $request->file('image');
+            $file->store('uploads', 'public');
+            $customer->image = $file->hashName();
+        }
+
+        $customer->update([
+            'fullname' => $request->fullname,
+            'name' => $request->name,
+            'address' => $request->address,
+            'phone' => $request->phone,
+            'username' => $request->username,
+            'password' => bcrypt($request->password),
+            'image' => $customer->image,
+        ]);
+    }
+}
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 42b62df..968e27d 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -68,5 +68,6 @@ class Kernel extends HttpKernel
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
         'inertia.admin' => \App\Http\Middleware\HandleInertiaRequests::class,
         'inertia.customer' => \App\Http\Middleware\HandleInertiaCustomerRequests::class,
+        'guard_should_customer' => \App\Http\Middleware\GuardCustomer::class,
     ];
 }
diff --git a/app/Http/Middleware/GuardCustomer.php b/app/Http/Middleware/GuardCustomer.php
new file mode 100644
index 0000000..65379a8
--- /dev/null
+++ b/app/Http/Middleware/GuardCustomer.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Symfony\Component\HttpFoundation\Response;
+
+class GuardCustomer
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        Auth::shouldUse('customer');
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Middleware/HandleInertiaCustomerRequests.php b/app/Http/Middleware/HandleInertiaCustomerRequests.php
index 8f6cb14..d4ab321 100644
--- a/app/Http/Middleware/HandleInertiaCustomerRequests.php
+++ b/app/Http/Middleware/HandleInertiaCustomerRequests.php
@@ -31,10 +31,10 @@ class HandleInertiaCustomerRequests extends Middleware
     {
         return array_merge(parent::share($request), [
             'auth' => [
-                'user' => $request->user(),
+                'user' => auth('customer')->user(),
             ],
             'flash' => [
-                'message' => fn () => $request->session()->get('message'),
+                'message' => fn () => $request->session()->get('message') ?? ['type' => null, 'message' => null],
             ],
             'app_name' => env('APP_NAME', 'App Name'),
         ]);
diff --git a/app/Models/Customer.php b/app/Models/Customer.php
index 2323232..08557f3 100644
--- a/app/Models/Customer.php
+++ b/app/Models/Customer.php
@@ -3,6 +3,7 @@
 namespace App\Models;
 
 use App\Models\Traits\UserTrackable;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Concerns\HasUlids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\SoftDeletes;
@@ -13,6 +14,7 @@ class Customer extends Authenticatable
     use HasFactory, HasUlids, UserTrackable, SoftDeletes;
 
     protected $fillable = [
+        'username',
         'email',
         'password',
         'name',
@@ -27,5 +29,35 @@ class Customer extends Authenticatable
         'identity_verified',
         'identity_image',
         'customer_level_id',
+        'google_oauth_response'
     ];
+
+    protected $hidden = [
+        'password',
+        'google_oauth_reponse'
+    ];
+
+    protected $appends = [
+        'image_url',
+    ];
+
+    public function imageUrl(): Attribute
+    {
+        return Attribute::make(
+            get: function () {
+                if ($this->google_id != null) {
+                    $image = explode('-', $this->images);
+                    if ($image[0] == "IMAGE") {
+                        return $image[1];
+                    }
+                }
+
+                if ($this->image != null) {
+                    return $this->asset($this->image);
+                }
+
+                return asset('sample/avatar.svg');
+            }
+        );
+    }
 }
diff --git a/app/Providers/EventServiceProvider.php b/app/Providers/EventServiceProvider.php
index ab8b2cf..e35f00b 100644
--- a/app/Providers/EventServiceProvider.php
+++ b/app/Providers/EventServiceProvider.php
@@ -18,6 +18,9 @@ class EventServiceProvider extends ServiceProvider
         Registered::class => [
             SendEmailVerificationNotification::class,
         ],
+        \SocialiteProviders\Manager\SocialiteWasCalled::class => [
+            \SocialiteProviders\Google\GoogleExtendSocialite::class . '@handle',
+        ],
     ];
 
     /**
diff --git a/composer.json b/composer.json
index ac44586..7295830 100644
--- a/composer.json
+++ b/composer.json
@@ -11,8 +11,10 @@
         "inertiajs/inertia-laravel": "^0.6.9",
         "laravel/framework": "^10.12.0",
         "laravel/sanctum": "^3.2.5",
+        "laravel/socialite": "^5.6",
         "laravel/tinker": "^2.8.1",
         "react/async": "^4",
+        "socialiteproviders/google": "^4.1",
         "tightenco/ziggy": "^1.6.0"
     },
     "require-dev": {
diff --git a/composer.lock b/composer.lock
index eb8dde7..84f1c84 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "bbaa3598d623d97e943f37916ee4e35e",
+    "content-hash": "6596d1096f48206df6c62070e7c12354",
     "packages": [
         {
             "name": "brick/math",
@@ -1094,16 +1094,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v10.12.0",
+            "version": "v10.13.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "9e6dcff23ab1d4b522bef56074c31625cf077576"
+                "reference": "7322723585103082758d74917db62980684845cb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/9e6dcff23ab1d4b522bef56074c31625cf077576",
-                "reference": "9e6dcff23ab1d4b522bef56074c31625cf077576",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/7322723585103082758d74917db62980684845cb",
+                "reference": "7322723585103082758d74917db62980684845cb",
                 "shasum": ""
             },
             "require": {
@@ -1290,7 +1290,7 @@
                 "issues": "https://github.com/laravel/framework/issues",
                 "source": "https://github.com/laravel/framework"
             },
-            "time": "2023-05-23T18:04:16+00:00"
+            "time": "2023-05-30T14:46:25+00:00"
         },
         {
             "name": "laravel/sanctum",
@@ -1418,6 +1418,76 @@
             },
             "time": "2023-01-30T18:31:20+00:00"
         },
+        {
+            "name": "laravel/socialite",
+            "version": "v5.6.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/laravel/socialite.git",
+                "reference": "8789ccb422c0aa2c9b2d36aeb0b544f5c9c59586"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/laravel/socialite/zipball/8789ccb422c0aa2c9b2d36aeb0b544f5c9c59586",
+                "reference": "8789ccb422c0aa2c9b2d36aeb0b544f5c9c59586",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "illuminate/contracts": "^6.0|^7.0|^8.0|^9.0|^10.0",
+                "illuminate/http": "^6.0|^7.0|^8.0|^9.0|^10.0",
+                "illuminate/support": "^6.0|^7.0|^8.0|^9.0|^10.0",
+                "league/oauth1-client": "^1.10.1",
+                "php": "^7.2|^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.0",
+                "orchestra/testbench": "^4.0|^5.0|^6.0|^7.0|^8.0",
+                "phpstan/phpstan": "^1.10",
+                "phpunit/phpunit": "^8.0|^9.3"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "5.x-dev"
+                },
+                "laravel": {
+                    "providers": [
+                        "Laravel\\Socialite\\SocialiteServiceProvider"
+                    ],
+                    "aliases": {
+                        "Socialite": "Laravel\\Socialite\\Facades\\Socialite"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Laravel\\Socialite\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Taylor Otwell",
+                    "email": "taylor@laravel.com"
+                }
+            ],
+            "description": "Laravel wrapper around OAuth 1 & OAuth 2 libraries.",
+            "homepage": "https://laravel.com",
+            "keywords": [
+                "laravel",
+                "oauth"
+            ],
+            "support": {
+                "issues": "https://github.com/laravel/socialite/issues",
+                "source": "https://github.com/laravel/socialite"
+            },
+            "time": "2023-05-29T14:51:54+00:00"
+        },
         {
             "name": "laravel/tinker",
             "version": "v2.8.1",
@@ -1878,6 +1948,82 @@
             ],
             "time": "2022-04-17T13:12:02+00:00"
         },
+        {
+            "name": "league/oauth1-client",
+            "version": "v1.10.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/oauth1-client.git",
+                "reference": "d6365b901b5c287dd41f143033315e2f777e1167"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/thephpleague/oauth1-client/zipball/d6365b901b5c287dd41f143033315e2f777e1167",
+                "reference": "d6365b901b5c287dd41f143033315e2f777e1167",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-openssl": "*",
+                "guzzlehttp/guzzle": "^6.0|^7.0",
+                "guzzlehttp/psr7": "^1.7|^2.0",
+                "php": ">=7.1||>=8.0"
+            },
+            "require-dev": {
+                "ext-simplexml": "*",
+                "friendsofphp/php-cs-fixer": "^2.17",
+                "mockery/mockery": "^1.3.3",
+                "phpstan/phpstan": "^0.12.42",
+                "phpunit/phpunit": "^7.5||9.5"
+            },
+            "suggest": {
+                "ext-simplexml": "For decoding XML-based responses."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0-dev",
+                    "dev-develop": "2.0-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\OAuth1\\Client\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ben Corlett",
+                    "email": "bencorlett@me.com",
+                    "homepage": "http://www.webcomm.com.au",
+                    "role": "Developer"
+                }
+            ],
+            "description": "OAuth 1.0 Client Library",
+            "keywords": [
+                "Authentication",
+                "SSO",
+                "authorization",
+                "bitbucket",
+                "identity",
+                "idp",
+                "oauth",
+                "oauth1",
+                "single sign on",
+                "trello",
+                "tumblr",
+                "twitter"
+            ],
+            "support": {
+                "issues": "https://github.com/thephpleague/oauth1-client/issues",
+                "source": "https://github.com/thephpleague/oauth1-client/tree/v1.10.1"
+            },
+            "time": "2022-04-15T14:02:14+00:00"
+        },
         {
             "name": "monolog/monolog",
             "version": "3.3.1",
@@ -1981,16 +2127,16 @@
         },
         {
             "name": "nesbot/carbon",
-            "version": "2.66.0",
+            "version": "2.67.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/briannesbitt/Carbon.git",
-                "reference": "496712849902241f04902033b0441b269effe001"
+                "reference": "c1001b3bc75039b07f38a79db5237c4c529e04c8"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/496712849902241f04902033b0441b269effe001",
-                "reference": "496712849902241f04902033b0441b269effe001",
+                "url": "https://api.github.com/repos/briannesbitt/Carbon/zipball/c1001b3bc75039b07f38a79db5237c4c529e04c8",
+                "reference": "c1001b3bc75039b07f38a79db5237c4c529e04c8",
                 "shasum": ""
             },
             "require": {
@@ -2079,7 +2225,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-01-29T18:53:47+00:00"
+            "time": "2023-05-25T22:09:47+00:00"
         },
         {
             "name": "nette/schema",
@@ -3334,25 +3480,140 @@
             ],
             "time": "2023-05-02T15:15:43+00:00"
         },
+        {
+            "name": "socialiteproviders/google",
+            "version": "4.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/Google-Plus.git",
+                "reference": "1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/Google-Plus/zipball/1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401",
+                "reference": "1cb8f6fb2c0dd0fc8b34e95f69865663fdf0b401",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "php": "^7.2 || ^8.0",
+                "socialiteproviders/manager": "~4.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\Google\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "xstoop",
+                    "email": "myenglishnameisx@gmail.com"
+                }
+            ],
+            "description": "Google OAuth2 Provider for Laravel Socialite",
+            "support": {
+                "source": "https://github.com/SocialiteProviders/Google-Plus/tree/4.1.0"
+            },
+            "time": "2020-12-01T23:10:59+00:00"
+        },
+        {
+            "name": "socialiteproviders/manager",
+            "version": "v4.3.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/SocialiteProviders/Manager.git",
+                "reference": "47402cbc5b7ef445317e799bf12fd5a12062206c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/SocialiteProviders/Manager/zipball/47402cbc5b7ef445317e799bf12fd5a12062206c",
+                "reference": "47402cbc5b7ef445317e799bf12fd5a12062206c",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/support": "^6.0 || ^7.0 || ^8.0 || ^9.0 || ^10.0",
+                "laravel/socialite": "~5.0",
+                "php": "^7.4 || ^8.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "^1.2",
+                "phpunit/phpunit": "^6.0 || ^9.0"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "SocialiteProviders\\Manager\\ServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "SocialiteProviders\\Manager\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Andy Wendt",
+                    "email": "andy@awendt.com"
+                },
+                {
+                    "name": "Anton Komarev",
+                    "email": "a.komarev@cybercog.su"
+                },
+                {
+                    "name": "Miguel Piedrafita",
+                    "email": "soy@miguelpiedrafita.com"
+                },
+                {
+                    "name": "atymic",
+                    "email": "atymicq@gmail.com",
+                    "homepage": "https://atymic.dev"
+                }
+            ],
+            "description": "Easily add new or override built-in providers in Laravel Socialite.",
+            "homepage": "https://socialiteproviders.com",
+            "keywords": [
+                "laravel",
+                "manager",
+                "oauth",
+                "providers",
+                "socialite"
+            ],
+            "support": {
+                "issues": "https://github.com/socialiteproviders/manager/issues",
+                "source": "https://github.com/socialiteproviders/manager"
+            },
+            "time": "2023-01-26T23:11:27+00:00"
+        },
         {
             "name": "symfony/console",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/console.git",
-                "reference": "12288d9f4500f84a4d02254d4aa968b15488476f"
+                "reference": "8788808b07cf0bdd6e4b7fdd23d8ddb1470c83b7"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/console/zipball/12288d9f4500f84a4d02254d4aa968b15488476f",
-                "reference": "12288d9f4500f84a4d02254d4aa968b15488476f",
+                "url": "https://api.github.com/repos/symfony/console/zipball/8788808b07cf0bdd6e4b7fdd23d8ddb1470c83b7",
+                "reference": "8788808b07cf0bdd6e4b7fdd23d8ddb1470c83b7",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
-                "symfony/deprecation-contracts": "^2.1|^3",
+                "symfony/deprecation-contracts": "^2.5|^3",
                 "symfony/polyfill-mbstring": "~1.0",
-                "symfony/service-contracts": "^1.1|^2|^3",
+                "symfony/service-contracts": "^2.5|^3",
                 "symfony/string": "^5.4|^6.0"
             },
             "conflict": {
@@ -3374,12 +3635,6 @@
                 "symfony/process": "^5.4|^6.0",
                 "symfony/var-dumper": "^5.4|^6.0"
             },
-            "suggest": {
-                "psr/log": "For using the console logger",
-                "symfony/event-dispatcher": "",
-                "symfony/lock": "",
-                "symfony/process": ""
-            },
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -3412,7 +3667,7 @@
                 "terminal"
             ],
             "support": {
-                "source": "https://github.com/symfony/console/tree/v6.2.10"
+                "source": "https://github.com/symfony/console/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3428,20 +3683,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-28T13:37:43+00:00"
+            "time": "2023-05-29T12:49:39+00:00"
         },
         {
             "name": "symfony/css-selector",
-            "version": "v6.2.7",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/css-selector.git",
-                "reference": "aedf3cb0f5b929ec255d96bbb4909e9932c769e0"
+                "reference": "88453e64cd86c5b60e8d2fb2c6f953bbc353ffbf"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/css-selector/zipball/aedf3cb0f5b929ec255d96bbb4909e9932c769e0",
-                "reference": "aedf3cb0f5b929ec255d96bbb4909e9932c769e0",
+                "url": "https://api.github.com/repos/symfony/css-selector/zipball/88453e64cd86c5b60e8d2fb2c6f953bbc353ffbf",
+                "reference": "88453e64cd86c5b60e8d2fb2c6f953bbc353ffbf",
                 "shasum": ""
             },
             "require": {
@@ -3477,7 +3732,7 @@
             "description": "Converts CSS selectors to XPath expressions",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/css-selector/tree/v6.2.7"
+                "source": "https://github.com/symfony/css-selector/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3493,20 +3748,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-02-14T08:44:56+00:00"
+            "time": "2023-03-20T16:43:42+00:00"
         },
         {
             "name": "symfony/deprecation-contracts",
-            "version": "v3.2.1",
+            "version": "v3.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/deprecation-contracts.git",
-                "reference": "e2d1534420bd723d0ef5aec58a22c5fe60ce6f5e"
+                "reference": "7c3aff79d10325257a001fcf92d991f24fc967cf"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/e2d1534420bd723d0ef5aec58a22c5fe60ce6f5e",
-                "reference": "e2d1534420bd723d0ef5aec58a22c5fe60ce6f5e",
+                "url": "https://api.github.com/repos/symfony/deprecation-contracts/zipball/7c3aff79d10325257a001fcf92d991f24fc967cf",
+                "reference": "7c3aff79d10325257a001fcf92d991f24fc967cf",
                 "shasum": ""
             },
             "require": {
@@ -3515,7 +3770,7 @@
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "3.3-dev"
+                    "dev-main": "3.4-dev"
                 },
                 "thanks": {
                     "name": "symfony/contracts",
@@ -3544,7 +3799,7 @@
             "description": "A generic function and convention to trigger deprecation notices",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.2.1"
+                "source": "https://github.com/symfony/deprecation-contracts/tree/v3.3.0"
             },
             "funding": [
                 {
@@ -3560,20 +3815,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-01T10:25:55+00:00"
+            "time": "2023-05-23T14:45:45+00:00"
         },
         {
             "name": "symfony/error-handler",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/error-handler.git",
-                "reference": "8b7e9f124640cb0611624a9383176c3e5f7d8cfb"
+                "reference": "99d2d814a6351461af350ead4d963bd67451236f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/error-handler/zipball/8b7e9f124640cb0611624a9383176c3e5f7d8cfb",
-                "reference": "8b7e9f124640cb0611624a9383176c3e5f7d8cfb",
+                "url": "https://api.github.com/repos/symfony/error-handler/zipball/99d2d814a6351461af350ead4d963bd67451236f",
+                "reference": "99d2d814a6351461af350ead4d963bd67451236f",
                 "shasum": ""
             },
             "require": {
@@ -3581,8 +3836,11 @@
                 "psr/log": "^1|^2|^3",
                 "symfony/var-dumper": "^5.4|^6.0"
             },
+            "conflict": {
+                "symfony/deprecation-contracts": "<2.5"
+            },
             "require-dev": {
-                "symfony/deprecation-contracts": "^2.1|^3",
+                "symfony/deprecation-contracts": "^2.5|^3",
                 "symfony/http-kernel": "^5.4|^6.0",
                 "symfony/serializer": "^5.4|^6.0"
             },
@@ -3615,7 +3873,7 @@
             "description": "Provides tools to manage errors and ease debugging PHP code",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/error-handler/tree/v6.2.10"
+                "source": "https://github.com/symfony/error-handler/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3631,28 +3889,29 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-18T13:46:08+00:00"
+            "time": "2023-05-10T12:03:13+00:00"
         },
         {
             "name": "symfony/event-dispatcher",
-            "version": "v6.2.8",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/event-dispatcher.git",
-                "reference": "04046f35fd7d72f9646e721fc2ecb8f9c67d3339"
+                "reference": "3af8ac1a3f98f6dbc55e10ae59c9e44bfc38dfaa"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/04046f35fd7d72f9646e721fc2ecb8f9c67d3339",
-                "reference": "04046f35fd7d72f9646e721fc2ecb8f9c67d3339",
+                "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/3af8ac1a3f98f6dbc55e10ae59c9e44bfc38dfaa",
+                "reference": "3af8ac1a3f98f6dbc55e10ae59c9e44bfc38dfaa",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
-                "symfony/event-dispatcher-contracts": "^2|^3"
+                "symfony/event-dispatcher-contracts": "^2.5|^3"
             },
             "conflict": {
-                "symfony/dependency-injection": "<5.4"
+                "symfony/dependency-injection": "<5.4",
+                "symfony/service-contracts": "<2.5"
             },
             "provide": {
                 "psr/event-dispatcher-implementation": "1.0",
@@ -3665,13 +3924,9 @@
                 "symfony/error-handler": "^5.4|^6.0",
                 "symfony/expression-language": "^5.4|^6.0",
                 "symfony/http-foundation": "^5.4|^6.0",
-                "symfony/service-contracts": "^1.1|^2|^3",
+                "symfony/service-contracts": "^2.5|^3",
                 "symfony/stopwatch": "^5.4|^6.0"
             },
-            "suggest": {
-                "symfony/dependency-injection": "",
-                "symfony/http-kernel": ""
-            },
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -3698,7 +3953,7 @@
             "description": "Provides tools that allow your application components to communicate with each other by dispatching events and listening to them",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/event-dispatcher/tree/v6.2.8"
+                "source": "https://github.com/symfony/event-dispatcher/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3714,33 +3969,30 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-20T16:06:02+00:00"
+            "time": "2023-04-21T14:41:17+00:00"
         },
         {
             "name": "symfony/event-dispatcher-contracts",
-            "version": "v3.2.1",
+            "version": "v3.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/event-dispatcher-contracts.git",
-                "reference": "0ad3b6f1e4e2da5690fefe075cd53a238646d8dd"
+                "reference": "a76aed96a42d2b521153fb382d418e30d18b59df"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/event-dispatcher-contracts/zipball/0ad3b6f1e4e2da5690fefe075cd53a238646d8dd",
-                "reference": "0ad3b6f1e4e2da5690fefe075cd53a238646d8dd",
+                "url": "https://api.github.com/repos/symfony/event-dispatcher-contracts/zipball/a76aed96a42d2b521153fb382d418e30d18b59df",
+                "reference": "a76aed96a42d2b521153fb382d418e30d18b59df",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
                 "psr/event-dispatcher": "^1"
             },
-            "suggest": {
-                "symfony/event-dispatcher-implementation": ""
-            },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "3.3-dev"
+                    "dev-main": "3.4-dev"
                 },
                 "thanks": {
                     "name": "symfony/contracts",
@@ -3777,7 +4029,7 @@
                 "standards"
             ],
             "support": {
-                "source": "https://github.com/symfony/event-dispatcher-contracts/tree/v3.2.1"
+                "source": "https://github.com/symfony/event-dispatcher-contracts/tree/v3.3.0"
             },
             "funding": [
                 {
@@ -3793,20 +4045,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-01T10:32:47+00:00"
+            "time": "2023-05-23T14:45:45+00:00"
         },
         {
             "name": "symfony/finder",
-            "version": "v6.2.7",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/finder.git",
-                "reference": "20808dc6631aecafbe67c186af5dcb370be3a0eb"
+                "reference": "d9b01ba073c44cef617c7907ce2419f8d00d75e2"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/finder/zipball/20808dc6631aecafbe67c186af5dcb370be3a0eb",
-                "reference": "20808dc6631aecafbe67c186af5dcb370be3a0eb",
+                "url": "https://api.github.com/repos/symfony/finder/zipball/d9b01ba073c44cef617c7907ce2419f8d00d75e2",
+                "reference": "d9b01ba073c44cef617c7907ce2419f8d00d75e2",
                 "shasum": ""
             },
             "require": {
@@ -3841,7 +4093,7 @@
             "description": "Finds files and directories via an intuitive fluent interface",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/finder/tree/v6.2.7"
+                "source": "https://github.com/symfony/finder/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3857,32 +4109,34 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-02-16T09:57:23+00:00"
+            "time": "2023-04-02T01:25:41+00:00"
         },
         {
             "name": "symfony/http-foundation",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-foundation.git",
-                "reference": "49adbb92bcb4e3c2943719d2756271e8b9602acc"
+                "reference": "718a97ed430d34e5c568ea2c44eab708c6efbefb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/49adbb92bcb4e3c2943719d2756271e8b9602acc",
-                "reference": "49adbb92bcb4e3c2943719d2756271e8b9602acc",
+                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/718a97ed430d34e5c568ea2c44eab708c6efbefb",
+                "reference": "718a97ed430d34e5c568ea2c44eab708c6efbefb",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
-                "symfony/deprecation-contracts": "^2.1|^3",
-                "symfony/polyfill-mbstring": "~1.1"
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/polyfill-mbstring": "~1.1",
+                "symfony/polyfill-php83": "^1.27"
             },
             "conflict": {
                 "symfony/cache": "<6.2"
             },
             "require-dev": {
-                "predis/predis": "~1.0",
+                "doctrine/dbal": "^2.13.1|^3.0",
+                "predis/predis": "^1.1|^2.0",
                 "symfony/cache": "^5.4|^6.0",
                 "symfony/dependency-injection": "^5.4|^6.0",
                 "symfony/expression-language": "^5.4|^6.0",
@@ -3890,9 +4144,6 @@
                 "symfony/mime": "^5.4|^6.0",
                 "symfony/rate-limiter": "^5.2|^6.0"
             },
-            "suggest": {
-                "symfony/mime": "To use the file extension guesser"
-            },
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -3919,7 +4170,7 @@
             "description": "Defines an object-oriented layer for the HTTP specification",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/http-foundation/tree/v6.2.10"
+                "source": "https://github.com/symfony/http-foundation/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -3935,29 +4186,29 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-18T13:46:08+00:00"
+            "time": "2023-05-19T12:46:45+00:00"
         },
         {
             "name": "symfony/http-kernel",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-kernel.git",
-                "reference": "81064a65a5496f17d2b6984f6519406f98864215"
+                "reference": "241973f3dd900620b1ca052fe409144f11aea748"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/81064a65a5496f17d2b6984f6519406f98864215",
-                "reference": "81064a65a5496f17d2b6984f6519406f98864215",
+                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/241973f3dd900620b1ca052fe409144f11aea748",
+                "reference": "241973f3dd900620b1ca052fe409144f11aea748",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
                 "psr/log": "^1|^2|^3",
-                "symfony/deprecation-contracts": "^2.1|^3",
-                "symfony/error-handler": "^6.1",
+                "symfony/deprecation-contracts": "^2.5|^3",
+                "symfony/error-handler": "^6.3",
                 "symfony/event-dispatcher": "^5.4|^6.0",
-                "symfony/http-foundation": "^5.4.21|^6.2.7",
+                "symfony/http-foundation": "^6.2.7",
                 "symfony/polyfill-ctype": "^1.8"
             },
             "conflict": {
@@ -3965,15 +4216,18 @@
                 "symfony/cache": "<5.4",
                 "symfony/config": "<6.1",
                 "symfony/console": "<5.4",
-                "symfony/dependency-injection": "<6.2",
+                "symfony/dependency-injection": "<6.3",
                 "symfony/doctrine-bridge": "<5.4",
                 "symfony/form": "<5.4",
                 "symfony/http-client": "<5.4",
+                "symfony/http-client-contracts": "<2.5",
                 "symfony/mailer": "<5.4",
                 "symfony/messenger": "<5.4",
                 "symfony/translation": "<5.4",
+                "symfony/translation-contracts": "<2.5",
                 "symfony/twig-bridge": "<5.4",
                 "symfony/validator": "<5.4",
+                "symfony/var-dumper": "<6.3",
                 "twig/twig": "<2.13"
             },
             "provide": {
@@ -3982,28 +4236,27 @@
             "require-dev": {
                 "psr/cache": "^1.0|^2.0|^3.0",
                 "symfony/browser-kit": "^5.4|^6.0",
+                "symfony/clock": "^6.2",
                 "symfony/config": "^6.1",
                 "symfony/console": "^5.4|^6.0",
                 "symfony/css-selector": "^5.4|^6.0",
-                "symfony/dependency-injection": "^6.2",
+                "symfony/dependency-injection": "^6.3",
                 "symfony/dom-crawler": "^5.4|^6.0",
                 "symfony/expression-language": "^5.4|^6.0",
                 "symfony/finder": "^5.4|^6.0",
-                "symfony/http-client-contracts": "^1.1|^2|^3",
+                "symfony/http-client-contracts": "^2.5|^3",
                 "symfony/process": "^5.4|^6.0",
+                "symfony/property-access": "^5.4.5|^6.0.5",
                 "symfony/routing": "^5.4|^6.0",
+                "symfony/serializer": "^6.3",
                 "symfony/stopwatch": "^5.4|^6.0",
                 "symfony/translation": "^5.4|^6.0",
-                "symfony/translation-contracts": "^1.1|^2|^3",
+                "symfony/translation-contracts": "^2.5|^3",
                 "symfony/uid": "^5.4|^6.0",
+                "symfony/validator": "^6.3",
+                "symfony/var-exporter": "^6.2",
                 "twig/twig": "^2.13|^3.0.4"
             },
-            "suggest": {
-                "symfony/browser-kit": "",
-                "symfony/config": "",
-                "symfony/console": "",
-                "symfony/dependency-injection": ""
-            },
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -4030,7 +4283,7 @@
             "description": "Provides a structured process for converting a Request into a Response",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/http-kernel/tree/v6.2.10"
+                "source": "https://github.com/symfony/http-kernel/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -4046,20 +4299,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-28T13:50:28+00:00"
+            "time": "2023-05-30T19:03:32+00:00"
         },
         {
             "name": "symfony/mailer",
-            "version": "v6.2.8",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/mailer.git",
-                "reference": "bfcfa015c67e19c6fdb7ca6fe70700af1e740a17"
+                "reference": "7b03d9be1dea29bfec0a6c7b603f5072a4c97435"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/mailer/zipball/bfcfa015c67e19c6fdb7ca6fe70700af1e740a17",
-                "reference": "bfcfa015c67e19c6fdb7ca6fe70700af1e740a17",
+                "url": "https://api.github.com/repos/symfony/mailer/zipball/7b03d9be1dea29bfec0a6c7b603f5072a4c97435",
+                "reference": "7b03d9be1dea29bfec0a6c7b603f5072a4c97435",
                 "shasum": ""
             },
             "require": {
@@ -4069,9 +4322,10 @@
                 "psr/log": "^1|^2|^3",
                 "symfony/event-dispatcher": "^5.4|^6.0",
                 "symfony/mime": "^6.2",
-                "symfony/service-contracts": "^1.1|^2|^3"
+                "symfony/service-contracts": "^2.5|^3"
             },
             "conflict": {
+                "symfony/http-client-contracts": "<2.5",
                 "symfony/http-kernel": "<5.4",
                 "symfony/messenger": "<6.2",
                 "symfony/mime": "<6.2",
@@ -4109,7 +4363,7 @@
             "description": "Helps sending emails",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/mailer/tree/v6.2.8"
+                "source": "https://github.com/symfony/mailer/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -4125,20 +4379,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-14T15:00:05+00:00"
+            "time": "2023-05-29T12:49:39+00:00"
         },
         {
             "name": "symfony/mime",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/mime.git",
-                "reference": "b6c137fc53a9f7c4c951cd3f362b3734c7a97723"
+                "reference": "7b5d2121858cd6efbed778abce9cfdd7ab1f62ad"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/mime/zipball/b6c137fc53a9f7c4c951cd3f362b3734c7a97723",
-                "reference": "b6c137fc53a9f7c4c951cd3f362b3734c7a97723",
+                "url": "https://api.github.com/repos/symfony/mime/zipball/7b5d2121858cd6efbed778abce9cfdd7ab1f62ad",
+                "reference": "7b5d2121858cd6efbed778abce9cfdd7ab1f62ad",
                 "shasum": ""
             },
             "require": {
@@ -4192,7 +4446,7 @@
                 "mime-type"
             ],
             "support": {
-                "source": "https://github.com/symfony/mime/tree/v6.2.10"
+                "source": "https://github.com/symfony/mime/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -4208,7 +4462,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-19T09:54:16+00:00"
+            "time": "2023-04-28T15:57:00+00:00"
         },
         {
             "name": "symfony/polyfill-ctype",
@@ -4786,6 +5040,83 @@
             ],
             "time": "2022-11-03T14:55:06+00:00"
         },
+        {
+            "name": "symfony/polyfill-php83",
+            "version": "v1.27.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php83.git",
+                "reference": "508c652ba3ccf69f8c97f251534f229791b52a57"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-php83/zipball/508c652ba3ccf69f8c97f251534f229791b52a57",
+                "reference": "508c652ba3ccf69f8c97f251534f229791b52a57",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1",
+                "symfony/polyfill-php80": "^1.14"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.27-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php83\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.3+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-php83/tree/v1.27.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-11-03T14:55:06+00:00"
+        },
         {
             "name": "symfony/polyfill-uuid",
             "version": "v1.27.0",
@@ -4870,16 +5201,16 @@
         },
         {
             "name": "symfony/process",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/process.git",
-                "reference": "b34cdbc9c5e75d45a3703e63a48ad07aafa8bf2e"
+                "reference": "8741e3ed7fe2e91ec099e02446fb86667a0f1628"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/process/zipball/b34cdbc9c5e75d45a3703e63a48ad07aafa8bf2e",
-                "reference": "b34cdbc9c5e75d45a3703e63a48ad07aafa8bf2e",
+                "url": "https://api.github.com/repos/symfony/process/zipball/8741e3ed7fe2e91ec099e02446fb86667a0f1628",
+                "reference": "8741e3ed7fe2e91ec099e02446fb86667a0f1628",
                 "shasum": ""
             },
             "require": {
@@ -4911,7 +5242,7 @@
             "description": "Executes commands in sub-processes",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/process/tree/v6.2.10"
+                "source": "https://github.com/symfony/process/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -4927,20 +5258,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-18T13:56:57+00:00"
+            "time": "2023-05-19T08:06:44+00:00"
         },
         {
             "name": "symfony/routing",
-            "version": "v6.2.8",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/routing.git",
-                "reference": "69062e2823f03b82265d73a966999660f0e1e404"
+                "reference": "827f59fdc67eecfc4dfff81f9c93bf4d98f0c89b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/routing/zipball/69062e2823f03b82265d73a966999660f0e1e404",
-                "reference": "69062e2823f03b82265d73a966999660f0e1e404",
+                "url": "https://api.github.com/repos/symfony/routing/zipball/827f59fdc67eecfc4dfff81f9c93bf4d98f0c89b",
+                "reference": "827f59fdc67eecfc4dfff81f9c93bf4d98f0c89b",
                 "shasum": ""
             },
             "require": {
@@ -4961,12 +5292,6 @@
                 "symfony/http-foundation": "^5.4|^6.0",
                 "symfony/yaml": "^5.4|^6.0"
             },
-            "suggest": {
-                "symfony/config": "For using the all-in-one router or any loader",
-                "symfony/expression-language": "For using expression matching",
-                "symfony/http-foundation": "For using a Symfony Request object",
-                "symfony/yaml": "For using the YAML loader"
-            },
             "type": "library",
             "autoload": {
                 "psr-4": {
@@ -4999,7 +5324,7 @@
                 "url"
             ],
             "support": {
-                "source": "https://github.com/symfony/routing/tree/v6.2.8"
+                "source": "https://github.com/symfony/routing/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -5015,20 +5340,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-14T15:00:05+00:00"
+            "time": "2023-04-28T15:57:00+00:00"
         },
         {
             "name": "symfony/service-contracts",
-            "version": "v3.2.1",
+            "version": "v3.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/service-contracts.git",
-                "reference": "a8c9cedf55f314f3a186041d19537303766df09a"
+                "reference": "40da9cc13ec349d9e4966ce18b5fbcd724ab10a4"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/a8c9cedf55f314f3a186041d19537303766df09a",
-                "reference": "a8c9cedf55f314f3a186041d19537303766df09a",
+                "url": "https://api.github.com/repos/symfony/service-contracts/zipball/40da9cc13ec349d9e4966ce18b5fbcd724ab10a4",
+                "reference": "40da9cc13ec349d9e4966ce18b5fbcd724ab10a4",
                 "shasum": ""
             },
             "require": {
@@ -5038,13 +5363,10 @@
             "conflict": {
                 "ext-psr": "<1.1|>=2"
             },
-            "suggest": {
-                "symfony/service-implementation": ""
-            },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "3.3-dev"
+                    "dev-main": "3.4-dev"
                 },
                 "thanks": {
                     "name": "symfony/contracts",
@@ -5084,7 +5406,7 @@
                 "standards"
             ],
             "support": {
-                "source": "https://github.com/symfony/service-contracts/tree/v3.2.1"
+                "source": "https://github.com/symfony/service-contracts/tree/v3.3.0"
             },
             "funding": [
                 {
@@ -5100,20 +5422,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-01T10:32:47+00:00"
+            "time": "2023-05-23T14:45:45+00:00"
         },
         {
             "name": "symfony/string",
-            "version": "v6.2.8",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/string.git",
-                "reference": "193e83bbd6617d6b2151c37fff10fa7168ebddef"
+                "reference": "f2e190ee75ff0f5eced645ec0be5c66fac81f51f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/string/zipball/193e83bbd6617d6b2151c37fff10fa7168ebddef",
-                "reference": "193e83bbd6617d6b2151c37fff10fa7168ebddef",
+                "url": "https://api.github.com/repos/symfony/string/zipball/f2e190ee75ff0f5eced645ec0be5c66fac81f51f",
+                "reference": "f2e190ee75ff0f5eced645ec0be5c66fac81f51f",
                 "shasum": ""
             },
             "require": {
@@ -5124,13 +5446,13 @@
                 "symfony/polyfill-mbstring": "~1.0"
             },
             "conflict": {
-                "symfony/translation-contracts": "<2.0"
+                "symfony/translation-contracts": "<2.5"
             },
             "require-dev": {
                 "symfony/error-handler": "^5.4|^6.0",
                 "symfony/http-client": "^5.4|^6.0",
                 "symfony/intl": "^6.2",
-                "symfony/translation-contracts": "^2.0|^3.0",
+                "symfony/translation-contracts": "^2.5|^3.0",
                 "symfony/var-exporter": "^5.4|^6.0"
             },
             "type": "library",
@@ -5170,7 +5492,7 @@
                 "utf8"
             ],
             "support": {
-                "source": "https://github.com/symfony/string/tree/v6.2.8"
+                "source": "https://github.com/symfony/string/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -5186,32 +5508,34 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-20T16:06:02+00:00"
+            "time": "2023-03-21T21:06:29+00:00"
         },
         {
             "name": "symfony/translation",
-            "version": "v6.2.8",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/translation.git",
-                "reference": "817535dbb1721df8b3a8f2489dc7e50bcd6209b5"
+                "reference": "f72b2cba8f79dd9d536f534f76874b58ad37876f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation/zipball/817535dbb1721df8b3a8f2489dc7e50bcd6209b5",
-                "reference": "817535dbb1721df8b3a8f2489dc7e50bcd6209b5",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/f72b2cba8f79dd9d536f534f76874b58ad37876f",
+                "reference": "f72b2cba8f79dd9d536f534f76874b58ad37876f",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
                 "symfony/polyfill-mbstring": "~1.0",
-                "symfony/translation-contracts": "^2.3|^3.0"
+                "symfony/translation-contracts": "^2.5|^3.0"
             },
             "conflict": {
                 "symfony/config": "<5.4",
                 "symfony/console": "<5.4",
                 "symfony/dependency-injection": "<5.4",
+                "symfony/http-client-contracts": "<2.5",
                 "symfony/http-kernel": "<5.4",
+                "symfony/service-contracts": "<2.5",
                 "symfony/twig-bundle": "<5.4",
                 "symfony/yaml": "<5.4"
             },
@@ -5225,20 +5549,14 @@
                 "symfony/console": "^5.4|^6.0",
                 "symfony/dependency-injection": "^5.4|^6.0",
                 "symfony/finder": "^5.4|^6.0",
-                "symfony/http-client-contracts": "^1.1|^2.0|^3.0",
+                "symfony/http-client-contracts": "^2.5|^3.0",
                 "symfony/http-kernel": "^5.4|^6.0",
                 "symfony/intl": "^5.4|^6.0",
                 "symfony/polyfill-intl-icu": "^1.21",
                 "symfony/routing": "^5.4|^6.0",
-                "symfony/service-contracts": "^1.1.2|^2|^3",
+                "symfony/service-contracts": "^2.5|^3",
                 "symfony/yaml": "^5.4|^6.0"
             },
-            "suggest": {
-                "nikic/php-parser": "To use PhpAstExtractor",
-                "psr/log-implementation": "To use logging capability in translator",
-                "symfony/config": "",
-                "symfony/yaml": ""
-            },
             "type": "library",
             "autoload": {
                 "files": [
@@ -5268,7 +5586,7 @@
             "description": "Provides tools to internationalize your application",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/translation/tree/v6.2.8"
+                "source": "https://github.com/symfony/translation/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -5284,32 +5602,29 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-31T09:14:44+00:00"
+            "time": "2023-05-19T12:46:45+00:00"
         },
         {
             "name": "symfony/translation-contracts",
-            "version": "v3.2.1",
+            "version": "v3.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/translation-contracts.git",
-                "reference": "dfec258b9dd17a6b24420d464c43bffe347441c8"
+                "reference": "02c24deb352fb0d79db5486c0c79905a85e37e86"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/dfec258b9dd17a6b24420d464c43bffe347441c8",
-                "reference": "dfec258b9dd17a6b24420d464c43bffe347441c8",
+                "url": "https://api.github.com/repos/symfony/translation-contracts/zipball/02c24deb352fb0d79db5486c0c79905a85e37e86",
+                "reference": "02c24deb352fb0d79db5486c0c79905a85e37e86",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1"
             },
-            "suggest": {
-                "symfony/translation-implementation": ""
-            },
             "type": "library",
             "extra": {
                 "branch-alias": {
-                    "dev-main": "3.3-dev"
+                    "dev-main": "3.4-dev"
                 },
                 "thanks": {
                     "name": "symfony/contracts",
@@ -5349,7 +5664,7 @@
                 "standards"
             ],
             "support": {
-                "source": "https://github.com/symfony/translation-contracts/tree/v3.2.1"
+                "source": "https://github.com/symfony/translation-contracts/tree/v3.3.0"
             },
             "funding": [
                 {
@@ -5365,20 +5680,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-03-01T10:32:47+00:00"
+            "time": "2023-05-30T17:17:10+00:00"
         },
         {
             "name": "symfony/uid",
-            "version": "v6.2.7",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/uid.git",
-                "reference": "d30c72a63897cfa043e1de4d4dd2ffa9ecefcdc0"
+                "reference": "01b0f20b1351d997711c56f1638f7a8c3061e384"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/uid/zipball/d30c72a63897cfa043e1de4d4dd2ffa9ecefcdc0",
-                "reference": "d30c72a63897cfa043e1de4d4dd2ffa9ecefcdc0",
+                "url": "https://api.github.com/repos/symfony/uid/zipball/01b0f20b1351d997711c56f1638f7a8c3061e384",
+                "reference": "01b0f20b1351d997711c56f1638f7a8c3061e384",
                 "shasum": ""
             },
             "require": {
@@ -5423,7 +5738,7 @@
                 "uuid"
             ],
             "support": {
-                "source": "https://github.com/symfony/uid/tree/v6.2.7"
+                "source": "https://github.com/symfony/uid/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -5439,20 +5754,20 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-02-14T08:44:56+00:00"
+            "time": "2023-04-08T07:25:02+00:00"
         },
         {
             "name": "symfony/var-dumper",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/var-dumper.git",
-                "reference": "41a750a23412ca76fdbbf5096943b4134272c1ab"
+                "reference": "6acdcd5c122074ee9f7b051e4fb177025c277a0e"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/41a750a23412ca76fdbbf5096943b4134272c1ab",
-                "reference": "41a750a23412ca76fdbbf5096943b4134272c1ab",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/6acdcd5c122074ee9f7b051e4fb177025c277a0e",
+                "reference": "6acdcd5c122074ee9f7b051e4fb177025c277a0e",
                 "shasum": ""
             },
             "require": {
@@ -5460,7 +5775,6 @@
                 "symfony/polyfill-mbstring": "~1.0"
             },
             "conflict": {
-                "phpunit/phpunit": "<5.4.3",
                 "symfony/console": "<5.4"
             },
             "require-dev": {
@@ -5470,11 +5784,6 @@
                 "symfony/uid": "^5.4|^6.0",
                 "twig/twig": "^2.13|^3.0.4"
             },
-            "suggest": {
-                "ext-iconv": "To convert non-UTF-8 strings to UTF-8 (or symfony/polyfill-iconv in case ext-iconv cannot be used).",
-                "ext-intl": "To show region name in time zone dump",
-                "symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script"
-            },
             "bin": [
                 "Resources/bin/var-dump-server"
             ],
@@ -5511,7 +5820,7 @@
                 "dump"
             ],
             "support": {
-                "source": "https://github.com/symfony/var-dumper/tree/v6.2.10"
+                "source": "https://github.com/symfony/var-dumper/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -5527,7 +5836,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-18T13:46:08+00:00"
+            "time": "2023-05-25T13:09:35+00:00"
         },
         {
             "name": "tightenco/ziggy",
@@ -8233,16 +8542,16 @@
         },
         {
             "name": "spatie/ignition",
-            "version": "1.7.0",
+            "version": "1.8.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/ignition.git",
-                "reference": "f747d83c6d7cb6229b462f3ddbb3a82dc0db0f78"
+                "reference": "ad13a6792992411e05d3d3b293e26bdf9f9a7321"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/ignition/zipball/f747d83c6d7cb6229b462f3ddbb3a82dc0db0f78",
-                "reference": "f747d83c6d7cb6229b462f3ddbb3a82dc0db0f78",
+                "url": "https://api.github.com/repos/spatie/ignition/zipball/ad13a6792992411e05d3d3b293e26bdf9f9a7321",
+                "reference": "ad13a6792992411e05d3d3b293e26bdf9f9a7321",
                 "shasum": ""
             },
             "require": {
@@ -8312,20 +8621,20 @@
                     "type": "github"
                 }
             ],
-            "time": "2023-05-04T13:20:26+00:00"
+            "time": "2023-05-25T10:19:32+00:00"
         },
         {
             "name": "spatie/laravel-ignition",
-            "version": "2.1.2",
+            "version": "2.1.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/spatie/laravel-ignition.git",
-                "reference": "2f99fa6b732a6049e78ed34e4608ce589605ae54"
+                "reference": "35711943d4725aa80f8033e4f1cb3a6775530b25"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/spatie/laravel-ignition/zipball/2f99fa6b732a6049e78ed34e4608ce589605ae54",
-                "reference": "2f99fa6b732a6049e78ed34e4608ce589605ae54",
+                "url": "https://api.github.com/repos/spatie/laravel-ignition/zipball/35711943d4725aa80f8033e4f1cb3a6775530b25",
+                "reference": "35711943d4725aa80f8033e4f1cb3a6775530b25",
                 "shasum": ""
             },
             "require": {
@@ -8404,20 +8713,20 @@
                     "type": "github"
                 }
             ],
-            "time": "2023-05-09T07:19:31+00:00"
+            "time": "2023-05-25T11:30:27+00:00"
         },
         {
             "name": "symfony/yaml",
-            "version": "v6.2.10",
+            "version": "v6.3.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/yaml.git",
-                "reference": "61916f3861b1e9705b18cfde723921a71dd1559d"
+                "reference": "a9a8337aa641ef2aa39c3e028f9107ec391e5927"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/yaml/zipball/61916f3861b1e9705b18cfde723921a71dd1559d",
-                "reference": "61916f3861b1e9705b18cfde723921a71dd1559d",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/a9a8337aa641ef2aa39c3e028f9107ec391e5927",
+                "reference": "a9a8337aa641ef2aa39c3e028f9107ec391e5927",
                 "shasum": ""
             },
             "require": {
@@ -8430,9 +8739,6 @@
             "require-dev": {
                 "symfony/console": "^5.4|^6.0"
             },
-            "suggest": {
-                "symfony/console": "For validating YAML files using the lint command"
-            },
             "bin": [
                 "Resources/bin/yaml-lint"
             ],
@@ -8462,7 +8768,7 @@
             "description": "Loads and dumps YAML files",
             "homepage": "https://symfony.com",
             "support": {
-                "source": "https://github.com/symfony/yaml/tree/v6.2.10"
+                "source": "https://github.com/symfony/yaml/tree/v6.3.0"
             },
             "funding": [
                 {
@@ -8478,7 +8784,7 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2023-04-28T13:25:36+00:00"
+            "time": "2023-04-28T13:28:14+00:00"
         },
         {
             "name": "theseer/tokenizer",
diff --git a/config/services.php b/config/services.php
index 0ace530..7675b6a 100644
--- a/config/services.php
+++ b/config/services.php
@@ -31,4 +31,9 @@ return [
         'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
     ],
 
+    'google' => [
+        'client_id' => env('GOOGLE_CLIENT_ID'),
+        'client_secret' => env('GOOGLE_CLIENT_SECRET'),
+        'redirect' => env('APP_URL') . '/login/callback_google',
+    ],
 ];
diff --git a/database/migrations/2023_05_24_130552_create_customers_table.php b/database/migrations/2023_05_24_130552_create_customers_table.php
index ea1b764..83027f5 100644
--- a/database/migrations/2023_05_24_130552_create_customers_table.php
+++ b/database/migrations/2023_05_24_130552_create_customers_table.php
@@ -16,6 +16,7 @@ return new class extends Migration
 
             $table->string('email')->nullable();
             $table->string('password')->nullable();
+            $table->string('username')->nullable();
             $table->string('name')->nullable();
             $table->string('fullname')->nullable();
             $table->text('address')->nullable();
@@ -28,6 +29,7 @@ return new class extends Migration
             $table->smallInteger('identity_verified')->nullable();
             $table->string('identity_image')->nullable();
             $table->ulid('customer_level_id')->nullable();
+            $table->text('google_oauth_response')->nullable();
 
             $table->timestamps();
             $table->softDeletes();
diff --git a/package-lock.json b/package-lock.json
index c5de7ac..b494748 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-    "name": "laravel-template",
+    "name": "voucher",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
@@ -70,30 +70,30 @@
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.21.9",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.9.tgz",
-            "integrity": "sha512-FUGed8kfhyWvbYug/Un/VPJD41rDIgoVVcR+FuzhzOYyRz5uED+Gd3SLZml0Uw2l2aHFb7ZgdW5mGA3G2cCCnQ==",
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
+            "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/core": {
-            "version": "7.21.8",
-            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.21.8.tgz",
-            "integrity": "sha512-YeM22Sondbo523Sz0+CirSPnbj9bG3P0CdHcBZdqUuaeOaYEFbOLoGU7lebvGP6P5J/WE9wOn7u7C4J9HvS1xQ==",
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.22.1.tgz",
+            "integrity": "sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==",
             "dev": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.5",
-                "@babel/helper-compilation-targets": "^7.21.5",
-                "@babel/helper-module-transforms": "^7.21.5",
-                "@babel/helpers": "^7.21.5",
-                "@babel/parser": "^7.21.8",
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5",
+                "@babel/generator": "^7.22.0",
+                "@babel/helper-compilation-targets": "^7.22.1",
+                "@babel/helper-module-transforms": "^7.22.1",
+                "@babel/helpers": "^7.22.0",
+                "@babel/parser": "^7.22.0",
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.0",
                 "convert-source-map": "^1.7.0",
                 "debug": "^4.1.0",
                 "gensync": "^1.0.0-beta.2",
@@ -109,12 +109,12 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.21.9",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.9.tgz",
-            "integrity": "sha512-F3fZga2uv09wFdEjEQIJxXALXfz0+JaOb7SabvVMmjHxeVTuGW8wgE8Vp1Hd7O+zMTYtcfEISGRzPkeiaPPsvg==",
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
+            "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.21.5",
+                "@babel/types": "^7.22.3",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
@@ -124,12 +124,12 @@
             }
         },
         "node_modules/@babel/helper-compilation-targets": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.5.tgz",
-            "integrity": "sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==",
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
+            "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
             "dev": true,
             "dependencies": {
-                "@babel/compat-data": "^7.21.5",
+                "@babel/compat-data": "^7.22.0",
                 "@babel/helper-validator-option": "^7.21.0",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
@@ -143,9 +143,9 @@
             }
         },
         "node_modules/@babel/helper-environment-visitor": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz",
-            "integrity": "sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==",
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
+            "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -189,19 +189,19 @@
             }
         },
         "node_modules/@babel/helper-module-transforms": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.5.tgz",
-            "integrity": "sha512-bI2Z9zBGY2q5yMHoBvJ2a9iX3ZOAzJPm7Q8Yz6YeoUjU/Cvhmi2G4QyTNyPBqqXSgTjUxRg3L0xV45HvkNWWBw==",
+            "version": "7.22.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
+            "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/helper-environment-visitor": "^7.22.1",
                 "@babel/helper-module-imports": "^7.21.4",
                 "@babel/helper-simple-access": "^7.21.5",
                 "@babel/helper-split-export-declaration": "^7.18.6",
                 "@babel/helper-validator-identifier": "^7.19.1",
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5"
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.0"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -268,14 +268,14 @@
             }
         },
         "node_modules/@babel/helpers": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.21.5.tgz",
-            "integrity": "sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==",
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
+            "integrity": "sha512-jBJ7jWblbgr7r6wYZHMdIqKc73ycaTcCaWRq4/2LpuPHcx7xMlZvpGQkOYc9HeSjn6rcx15CPlgVcBtZ4WZJ2w==",
             "dev": true,
             "dependencies": {
-                "@babel/template": "^7.20.7",
-                "@babel/traverse": "^7.21.5",
-                "@babel/types": "^7.21.5"
+                "@babel/template": "^7.21.9",
+                "@babel/traverse": "^7.22.1",
+                "@babel/types": "^7.22.3"
             },
             "engines": {
                 "node": ">=6.9.0"
@@ -296,9 +296,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.21.9",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.9.tgz",
-            "integrity": "sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g==",
+            "version": "7.22.4",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
+            "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==",
             "dev": true,
             "bin": {
                 "parser": "bin/babel-parser.js"
@@ -338,9 +338,9 @@
             }
         },
         "node_modules/@babel/runtime": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-            "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+            "version": "7.22.3",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz",
+            "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==",
             "dependencies": {
                 "regenerator-runtime": "^0.13.11"
             },
@@ -363,19 +363,19 @@
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.5.tgz",
-            "integrity": "sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==",
+            "version": "7.22.4",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
+            "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
             "dev": true,
             "dependencies": {
                 "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.21.5",
-                "@babel/helper-environment-visitor": "^7.21.5",
+                "@babel/generator": "^7.22.3",
+                "@babel/helper-environment-visitor": "^7.22.1",
                 "@babel/helper-function-name": "^7.21.0",
                 "@babel/helper-hoist-variables": "^7.18.6",
                 "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.21.5",
-                "@babel/types": "^7.21.5",
+                "@babel/parser": "^7.22.4",
+                "@babel/types": "^7.22.4",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -384,9 +384,9 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.5.tgz",
-            "integrity": "sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==",
+            "version": "7.22.4",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
+            "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
             "dev": true,
             "dependencies": {
                 "@babel/helper-string-parser": "^7.21.5",
@@ -755,9 +755,9 @@
             "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
         },
         "node_modules/@floating-ui/dom": {
-            "version": "1.2.8",
-            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.8.tgz",
-            "integrity": "sha512-XLwhYV90MxiHDq6S0rzFZj00fnDM+A1R9jhSioZoMsa7G0Q0i+Q4x40ajR8FHSdYDE1bgjG45mIWe6jtv9UPmg==",
+            "version": "1.2.9",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+            "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
             "dependencies": {
                 "@floating-ui/core": "^1.2.6"
             }
@@ -789,9 +789,9 @@
             }
         },
         "node_modules/@headlessui/react": {
-            "version": "1.7.14",
-            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz",
-            "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==",
+            "version": "1.7.15",
+            "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.15.tgz",
+            "integrity": "sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==",
             "dev": true,
             "dependencies": {
                 "client-only": "^0.0.1"
@@ -910,9 +910,9 @@
             }
         },
         "node_modules/@popperjs/core": {
-            "version": "2.11.7",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-            "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+            "version": "2.11.8",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+            "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
             "funding": {
                 "type": "opencollective",
                 "url": "https://opencollective.com/popperjs"
@@ -1088,9 +1088,9 @@
             }
         },
         "node_modules/browserslist": {
-            "version": "4.21.5",
-            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
-            "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+            "version": "4.21.7",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz",
+            "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==",
             "dev": true,
             "funding": [
                 {
@@ -1100,13 +1100,17 @@
                 {
                     "type": "tidelift",
                     "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
                 }
             ],
             "dependencies": {
-                "caniuse-lite": "^1.0.30001449",
-                "electron-to-chromium": "^1.4.284",
-                "node-releases": "^2.0.8",
-                "update-browserslist-db": "^1.0.10"
+                "caniuse-lite": "^1.0.30001489",
+                "electron-to-chromium": "^1.4.411",
+                "node-releases": "^2.0.12",
+                "update-browserslist-db": "^1.0.11"
             },
             "bin": {
                 "browserslist": "cli.js"
@@ -1136,9 +1140,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001489",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001489.tgz",
-            "integrity": "sha512-x1mgZEXK8jHIfAxm+xgdpHpk50IN3z3q3zP261/WS+uvePxW8izXuCu6AHz0lkuYTlATDehiZ/tNyYBdSQsOUQ==",
+            "version": "1.0.30001492",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001492.tgz",
+            "integrity": "sha512-2efF8SAZwgAX1FJr87KWhvuJxnGJKOnctQa8xLOskAXNXq8oiuqgl6u1kk3fFpsp3GgvzlRjiK1sl63hNtFADw==",
             "dev": true,
             "funding": [
                 {
@@ -1386,9 +1390,9 @@
             "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.405",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.405.tgz",
-            "integrity": "sha512-JdDgnwU69FMZURoesf9gNOej2Cms1XJFfLk24y1IBtnAdhTcJY/mXnokmpmxHN59PcykBP4bgUU98vLY44Lhuw==",
+            "version": "1.4.416",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.416.tgz",
+            "integrity": "sha512-AUYh0XDTb2vrj0rj82jb3P9hHSyzQNdTPYWZIhPdCOui7/vpme7+HTE07BE5jwuqg/34TZ8ktlRz6GImJ4IXjA==",
             "dev": true
         },
         "node_modules/error-stack-parser": {
@@ -1847,9 +1851,9 @@
             }
         },
         "node_modules/laravel-vite-plugin": {
-            "version": "0.7.7",
-            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.7.7.tgz",
-            "integrity": "sha512-/KsnyNUOMylBVLvGz1VlL1ukxyQeMQUz4zmnMflYe8fAWzLvjHDXnbh6fLgIrzAmevzNjYm/TUqmD5Io0+kqhg==",
+            "version": "0.7.8",
+            "resolved": "https://registry.npmjs.org/laravel-vite-plugin/-/laravel-vite-plugin-0.7.8.tgz",
+            "integrity": "sha512-HWYqpQYHR3kEQ1LsHX7gHJoNNf0bz5z5mDaHBLzS+PGLCTmYqlU5/SZyeEgObV7z7bC/cnStYcY9H1DI1D5Udg==",
             "dev": true,
             "dependencies": {
                 "picocolors": "^1.0.0",
@@ -2150,9 +2154,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.23",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
-            "integrity": "sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==",
+            "version": "8.4.24",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+            "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -2334,9 +2338,9 @@
             }
         },
         "node_modules/react-datepicker": {
-            "version": "4.11.0",
-            "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
-            "integrity": "sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==",
+            "version": "4.12.0",
+            "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.12.0.tgz",
+            "integrity": "sha512-czCEp4T8ctyN9NBMG6Xq6pEpOvMtoqf4U5DxFzJoTtv1/gTX3QNJaWBUwD88j//+eF8gVkNvOW8aTAqpaIJBvw==",
             "dependencies": {
                 "@popperjs/core": "^2.9.2",
                 "classnames": "^2.2.6",
@@ -2368,9 +2372,9 @@
             "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
         },
         "node_modules/react-icons": {
-            "version": "4.8.0",
-            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
-            "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+            "version": "4.9.0",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.9.0.tgz",
+            "integrity": "sha512-ijUnFr//ycebOqujtqtV9PFS7JjhWg0QU6ykURVHuL4cbofvRCf3f6GMn9+fBktEFQOIVZnuAYLZdiyadRQRFg==",
             "peerDependencies": {
                 "react": "*"
             }
@@ -2897,9 +2901,9 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
         },
         "node_modules/vite": {
-            "version": "4.3.8",
-            "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.8.tgz",
-            "integrity": "sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==",
+            "version": "4.3.9",
+            "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
+            "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
             "dev": true,
             "dependencies": {
                 "esbuild": "^0.17.5",
@@ -2977,12 +2981,11 @@
             "dev": true
         },
         "node_modules/yaml": {
-            "version": "2.3.0",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.0.tgz",
-            "integrity": "sha512-8/1wgzdKc7bc9E6my5wZjmdavHLvO/QOmLG1FBugblEvY4IXrLjlViIOmL24HthU042lWTDRO90Fz1Yp66UnMw==",
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+            "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
             "engines": {
-                "node": ">= 14",
-                "npm": ">= 7"
+                "node": ">= 14"
             }
         }
     }
diff --git a/public/sample/avatar.svg b/public/sample/avatar.svg
new file mode 100644
index 0000000..496aa90
--- /dev/null
+++ b/public/sample/avatar.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true" class="text-white h-14 w-14" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
\ No newline at end of file
diff --git a/resources/js/Components/Alert.jsx b/resources/js/Components/Alert.jsx
new file mode 100644
index 0000000..9d709de
--- /dev/null
+++ b/resources/js/Components/Alert.jsx
@@ -0,0 +1,39 @@
+import { isEmpty } from 'lodash'
+import React from 'react'
+
+export default function Alert({ type = '', children }) {
+    if (type === null) {
+        return ''
+    }
+
+    if (type === 'error') {
+        return (
+            <div
+                className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
+                role="alert"
+            >
+                {children}
+            </div>
+        )
+    }
+
+    if (type === 'success') {
+        return (
+            <div
+                className="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
+                role="alert"
+            >
+                {children}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className="p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
+            role="alert"
+        >
+            {children}
+        </div>
+    )
+}
diff --git a/resources/js/Components/FormFile.jsx b/resources/js/Components/FormFile.jsx
new file mode 100644
index 0000000..8a578b5
--- /dev/null
+++ b/resources/js/Components/FormFile.jsx
@@ -0,0 +1,35 @@
+import React, { useRef } from 'react'
+
+export default function FormFile({
+    label,
+    onChange,
+    error,
+    preview,
+    inputRef = useRef(),
+}) {
+    return (
+        <div className="my-4">
+            {label !== '' && (
+                <label
+                    htmlFor={label}
+                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                    {label}
+                </label>
+            )}
+            {preview && preview}
+            <input
+                id={label}
+                className="block w-full mb-5 text-xs text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
+                type="file"
+                onChange={onChange}
+                ref={inputRef}
+            />
+            {error && (
+                <p className="mb-2 text-sm text-red-600 dark:text-red-500">
+                    {error}
+                </p>
+            )}
+        </div>
+    )
+}
diff --git a/resources/js/Components/FormInput.jsx b/resources/js/Components/FormInput.jsx
index 41073e8..20ab80b 100644
--- a/resources/js/Components/FormInput.jsx
+++ b/resources/js/Components/FormInput.jsx
@@ -1,22 +1,50 @@
-import React from "react";
-import Input from "./Input";
+import React from 'react'
+import Input from './Input'
 
-export default function FormInput({ type, name, onChange, value, label, className, error, autoComplete, autoFocus, placeholder, disabled, readOnly}) {
+export default function FormInput({
+    type,
+    name,
+    onChange,
+    value,
+    label,
+    className,
+    error,
+    autoComplete,
+    autoFocus,
+    placeholder,
+    disabled,
+    readOnly,
+    onKeyDownCapture,
+    leftItem,
+    formClassName,
+}) {
     return (
         <div className={className}>
-            <label htmlFor="first_name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label>
-            <Input
-                type={type}
-                name={name}
-                onChange={onChange}
-                value={value}
-                error={error}
-                autoComplete={autoComplete}
-                autoFocus={autoFocus}
-                placeholder={placeholder}
-                disabled={disabled}
-                readOnly={readOnly}
-            />
+            <label
+                htmlFor={name}
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+                {label}
+            </label>
+            <div className="relative">
+                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                    {leftItem}
+                </div>
+                <Input
+                    className={formClassName}
+                    type={type}
+                    name={name}
+                    onChange={onChange}
+                    value={value}
+                    error={error}
+                    autoComplete={autoComplete}
+                    autoFocus={autoFocus}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    onKeyDownCapture={onKeyDownCapture}
+                />
+            </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/resources/js/Components/FormInputWith.jsx b/resources/js/Components/FormInputWith.jsx
new file mode 100644
index 0000000..8c27333
--- /dev/null
+++ b/resources/js/Components/FormInputWith.jsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import Input from './Input'
+
+export default function FormInputWith({
+    type,
+    name,
+    onChange,
+    value,
+    label,
+    className,
+    error,
+    autoComplete,
+    autoFocus,
+    placeholder,
+    disabled,
+    readOnly,
+    onKeyDownCapture,
+    leftItem,
+    formClassName,
+}) {
+    return (
+        <div className={className}>
+            <label
+                htmlFor={name}
+                className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+            >
+                {label}
+            </label>
+            <div className="relative">
+                <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                    {leftItem}
+                </div>
+                <input
+                    type={type}
+                    className={`mb-2 bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700  dark:placeholder-gray-400 dark:text-white ${
+                        error
+                            ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+                            : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                    } ${formClassName}`}
+                    onChange={onChange}
+                    name={name}
+                    value={value}
+                    autoComplete={autoComplete ? 'on' : 'off'}
+                    autoFocus={autoFocus}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    onKeyDownCapture={onKeyDownCapture}
+                />
+            </div>
+            {error && (
+                <p className="mb-2 text-sm text-red-600 dark:text-red-500">
+                    {error}
+                </p>
+            )}
+        </div>
+    )
+}
diff --git a/resources/js/Components/Input.jsx b/resources/js/Components/Input.jsx
index 1e64a6a..b70c782 100644
--- a/resources/js/Components/Input.jsx
+++ b/resources/js/Components/Input.jsx
@@ -1,24 +1,43 @@
 import React from 'react'
 
-export default function Input({ type = 'text', name, onChange, value, error = "", autoComplete = false, autoFocus = false, placeholder , className ,disabled, readOnly}) {
+export default function Input({
+    type = 'text',
+    name,
+    onChange,
+    value,
+    error = '',
+    autoComplete = false,
+    autoFocus = false,
+    placeholder,
+    className,
+    disabled,
+    readOnly,
+    onKeyDownCapture = null,
+}) {
     return (
         <>
-            <input 
+            <input
                 type={type}
-                className={`mb-2 bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700  dark:placeholder-gray-400 dark:text-white  ${error ? "border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500" : "border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"} ${className}`}
-                onChange={onChange} 
+                className={`mb-2 bg-gray-50 border text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700  dark:placeholder-gray-400 dark:text-white  ${
+                    error
+                        ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+                        : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                } ${className}`}
+                onChange={onChange}
                 name={name}
                 value={value}
-                autoComplete={autoComplete ? "on" : "off"}
+                autoComplete={autoComplete ? 'on' : 'off'}
                 autoFocus={autoFocus}
                 placeholder={placeholder}
                 disabled={disabled}
                 readOnly={readOnly}
+                onKeyDownCapture={onKeyDownCapture}
             />
             {error && (
-                <p className="mb-2 text-sm text-red-600 dark:text-red-500">{error}</p>
+                <p className="mb-2 text-sm text-red-600 dark:text-red-500">
+                    {error}
+                </p>
             )}
         </>
-
     )
-}
\ No newline at end of file
+}
diff --git a/resources/js/Components/TextArea.jsx b/resources/js/Components/TextArea.jsx
index ed8dfca..6ea3c6a 100644
--- a/resources/js/Components/TextArea.jsx
+++ b/resources/js/Components/TextArea.jsx
@@ -1,6 +1,15 @@
-import React from "react";
+import React from 'react'
 
-export default function TextArea({ label = '', value, name, onChange, rows, error, readOnly }) {
+export default function TextArea({
+    label = '',
+    value,
+    name,
+    onChange,
+    rows,
+    error,
+    readOnly,
+    placeholder,
+}) {
     return (
         <>
             {label !== '' && (
@@ -8,17 +17,24 @@ export default function TextArea({ label = '', value, name, onChange, rows, erro
                     {label}
                 </label>
             )}
-            <textarea 
+            <textarea
                 rows={rows}
-                className={`block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white mb-2 ${error ? "border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500" : "border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"}`}
+                className={`block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white mb-2 ${
+                    error
+                        ? 'border-red-500 dark:border-red-500 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
+                        : 'border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
+                }`}
                 name={name}
                 value={value}
                 onChange={onChange}
                 readOnly={readOnly}
+                placeholder={placeholder}
             />
             {error && (
-                <p className="mb-2 text-sm text-red-600 dark:text-red-500">{error}</p>
+                <p className="mb-2 text-sm text-red-600 dark:text-red-500">
+                    {error}
+                </p>
             )}
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/resources/js/Layouts/CustomerLayout.jsx b/resources/js/Layouts/CustomerLayout.jsx
index bedc004..17bd3f0 100644
--- a/resources/js/Layouts/CustomerLayout.jsx
+++ b/resources/js/Layouts/CustomerLayout.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ApplicationLogo from '@/Components/Defaults/ApplicationLogo'
-import { Link } from '@inertiajs/react'
+import { Link, router, usePage } from '@inertiajs/react'
 import { HiHome, HiOutlineHome, HiOutlineUserCircle } from 'react-icons/hi'
 import {
     HiArrowPathRoundedSquare,
@@ -8,13 +8,33 @@ import {
 } from 'react-icons/hi2'
 
 export default function CustomerLayout({ children }) {
+    const {
+        props: {
+            auth: { user },
+        },
+    } = usePage()
+    const handleOnClick = (r) => {
+        router.get(route(r))
+    }
+
+    const isActive = (r) => {
+        if (route().current(r)) {
+            return 'text-blue-700 h-8 w-8'
+        }
+
+        return 'text-gray-600 h-8 w-8'
+    }
+
     return (
         <div className="min-h-screen flex flex-col sm:justify-center items-center">
             <div className="flex flex-col w-full min-h-screen max-w-md bg-white shadow-md">
                 <div className="mb-10">{children}</div>
                 <div className="sticky bottom-0 flex flex-row justify-evenly w-full max-w-md bg-gray-50">
-                    <div className="py-2 px-10 hover:bg-blue-200">
-                        <HiOutlineHome className="text-blue-700 h-8 w-8" />
+                    <div
+                        className="py-2 px-10 hover:bg-blue-200"
+                        onClick={() => handleOnClick('home.index')}
+                    >
+                        <HiOutlineHome className={isActive('home.index')} />
                     </div>
                     <div className="py-2 px-10 hover:bg-blue-200 flex flex-row">
                         <HiOutlineShoppingCart className="text-gray-600 h-8 w-8" />
@@ -27,9 +47,27 @@ export default function CustomerLayout({ children }) {
                     <div className="py-2 px-10 hover:bg-blue-200">
                         <HiArrowPathRoundedSquare className="text-gray-600 h-8 w-8" />
                     </div>
-                    <div className="py-2 px-10 hover:bg-blue-200">
-                        <HiOutlineUserCircle className="text-gray-600 h-8 w-8" />
-                    </div>
+                    {user !== null ? (
+                        <div
+                            className="py-2 px-10 hover:bg-blue-200"
+                            onClick={() =>
+                                handleOnClick('customer.profile.index')
+                            }
+                        >
+                            <HiOutlineUserCircle
+                                className={isActive('customer.profile.*')}
+                            />
+                        </div>
+                    ) : (
+                        <div
+                            className="py-2 px-10 hover:bg-blue-200"
+                            onClick={() => handleOnClick('customer.login')}
+                        >
+                            <HiOutlineUserCircle
+                                className={isActive('customer.login')}
+                            />
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
diff --git a/resources/js/Pages/Home/Auth/Login.jsx b/resources/js/Pages/Home/Auth/Login.jsx
new file mode 100644
index 0000000..0ac5cac
--- /dev/null
+++ b/resources/js/Pages/Home/Auth/Login.jsx
@@ -0,0 +1,104 @@
+import React from 'react'
+import { Head, useForm, Link } from '@inertiajs/react'
+import { FcGoogle } from 'react-icons/fc'
+
+import CustomerLayout from '@/Layouts/CustomerLayout'
+import FormInput from '@/Components/FormInput'
+import Button from '@/Components/Button'
+import Alert from '@/Components/Alert'
+
+export default function Index({ app_name, flash }) {
+    const { data, setData, post, processing, errors } = useForm({
+        username: '',
+        password: '',
+    })
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleSubmit = () => {
+        post(route('customer.login'))
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.code === 'Enter') {
+            handleSubmit()
+        }
+    }
+
+    const handleLoginWithGoogle = () => {
+        window.location = route('customer.login.google')
+    }
+
+    return (
+        <CustomerLayout>
+            <Head title="Login" />
+            <div className="flex flex-col justify-center min-h-screen">
+                <div className="m-4 border shadow-md p-6 pt-4">
+                    <div className="text-2xl font-bold mb-4">Sign in</div>
+                    <Alert type={flash.message.type}>
+                        <span className="font-semibold">
+                            {flash.message.message}
+                        </span>
+                    </Alert>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="username"
+                            name="username"
+                            value={data.username}
+                            onChange={handleOnChange}
+                            error={errors.username}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            type="password"
+                            placeholder="password"
+                            name="password"
+                            value={data.password}
+                            onChange={handleOnChange}
+                            error={errors.username}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full flex flex-row justify-between">
+                        <Button processing={processing} onClick={handleSubmit}>
+                            Sign in
+                        </Button>
+                        {/* <a href="#" className="text-sm underline text-blue-600">
+                            forgot password
+                        </a> */}
+                    </div>
+                    <div className="flex flex-row items-center space-x-2 justify-between my-3">
+                        <div className="border-b-2 w-full" />
+                        <div>OR</div>
+                        <div className="border-b-2 w-full" />
+                    </div>
+                    <div className="flex flex-row w-full justify-center">
+                        <div
+                            className="flex flex-row items-center space-x-2 border-2 border-blue-600 px-4 py-2 hover:bg-blue-500 hover:text-white rounded"
+                            onClick={handleLoginWithGoogle}
+                        >
+                            <FcGoogle className="h-6 w-6" />
+                            <div>Sign in with Google</div>
+                        </div>
+                    </div>
+                    <div className="mt-10 w-full text-center text-blue-600 underline">
+                        <Link href={route('customer.register')}>
+                            dont have an account ? register
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </CustomerLayout>
+    )
+}
diff --git a/resources/js/Pages/Home/Auth/Register.jsx b/resources/js/Pages/Home/Auth/Register.jsx
new file mode 100644
index 0000000..223e848
--- /dev/null
+++ b/resources/js/Pages/Home/Auth/Register.jsx
@@ -0,0 +1,163 @@
+import React from 'react'
+import { Head, useForm, Link } from '@inertiajs/react'
+import { FcGoogle } from 'react-icons/fc'
+
+import CustomerLayout from '@/Layouts/CustomerLayout'
+import FormInput from '@/Components/FormInput'
+import Button from '@/Components/Button'
+import Alert from '@/Components/Alert'
+import FormInputWith from '@/Components/FormInputWith'
+import TextArea from '@/Components/TextArea'
+
+export default function Index({ app_name, flash }) {
+    const { data, setData, post, processing, errors } = useForm({
+        username: '',
+        password: '',
+        password_confirmation: '',
+        fullname: '',
+        name: '',
+        address: '',
+        phone: '',
+    })
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleSubmit = () => {
+        post(route('customer.register'))
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.code === 'Enter') {
+            handleSubmit()
+        }
+    }
+
+    const handleLoginWithGoogle = () => {
+        window.location = route('customer.login.google')
+    }
+
+    return (
+        <CustomerLayout>
+            <Head title="Login" />
+            <div className="flex flex-col justify-center min-h-screen">
+                <div className="m-4 border shadow-md p-6 pt-4">
+                    <div className="text-2xl font-bold mb-4">Register</div>
+                    <Alert type={flash.message.type}>
+                        <span className="font-semibold">
+                            {flash.message.message}
+                        </span>
+                    </Alert>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="nama lengkap"
+                            name="fullname"
+                            value={data.fullname}
+                            onChange={handleOnChange}
+                            error={errors.fullname}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="nama panggilan"
+                            name="name"
+                            value={data.name}
+                            onChange={handleOnChange}
+                            error={errors.name}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <FormInputWith
+                        type="number"
+                        leftItem={<div className="text-sm">+62</div>}
+                        placeholder="whatsapp"
+                        name="phone"
+                        value={data.phone}
+                        onChange={handleOnChange}
+                        error={errors.phone}
+                        onKeyDownCapture={(e) => handleKeyDown(e)}
+                        formClassName={'pl-10'}
+                    />
+                    <div className="w-full">
+                        <TextArea
+                            placeholder="alamat lengkap"
+                            name="address"
+                            value={data.address}
+                            onChange={handleOnChange}
+                            error={errors.address}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="username"
+                            name="username"
+                            value={data.username}
+                            onChange={handleOnChange}
+                            error={errors.username}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            type="password"
+                            placeholder="password"
+                            name="password"
+                            value={data.password}
+                            onChange={handleOnChange}
+                            error={errors.password}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            type="password"
+                            placeholder="retype password"
+                            name="password_confirmation"
+                            value={data.password_confirmation}
+                            onChange={handleOnChange}
+                            error={errors.password_confirmation}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full flex flex-row justify-between">
+                        <Button processing={processing} onClick={handleSubmit}>
+                            Register
+                        </Button>
+                        {/* <a href="#" className="text-sm underline text-blue-600">
+                            forgot password
+                        </a> */}
+                    </div>
+                    <div className="flex flex-row items-center space-x-2 justify-between my-3">
+                        <div className="border-b-2 w-full" />
+                        <div>OR</div>
+                        <div className="border-b-2 w-full" />
+                    </div>
+                    <div className="flex flex-row w-full justify-center">
+                        <div
+                            className="flex flex-row items-center space-x-2 border-2 border-blue-600 px-4 py-2 hover:bg-blue-500 hover:text-white rounded"
+                            onClick={handleLoginWithGoogle}
+                        >
+                            <FcGoogle className="h-6 w-6" />
+                            <div>Register with Google</div>
+                        </div>
+                    </div>
+                    <div className="mt-10 w-full text-center text-blue-600 underline">
+                        <Link href={route('customer.login')}>
+                            already have account ? login
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </CustomerLayout>
+    )
+}
diff --git a/resources/js/Pages/Home/Base.jsx b/resources/js/Pages/Home/Base.jsx
new file mode 100644
index 0000000..a4a5ad3
--- /dev/null
+++ b/resources/js/Pages/Home/Base.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Head } from '@inertiajs/react'
+import CustomerLayout from '@/Layouts/CustomerLayout'
+
+export default function Index({ status }) {
+    return (
+        <CustomerLayout>
+            <Head title="Login" />
+            <div className="flex flex-col min-h-screen">
+                <div>Login</div>
+            </div>
+        </CustomerLayout>
+    )
+}
diff --git a/resources/js/Pages/Home/Index/Index.jsx b/resources/js/Pages/Home/Index/Index.jsx
index 39117b5..6dfc507 100644
--- a/resources/js/Pages/Home/Index/Index.jsx
+++ b/resources/js/Pages/Home/Index/Index.jsx
@@ -1,60 +1,45 @@
 import React from 'react'
-import { Head } from '@inertiajs/react'
+import { Head, usePage } from '@inertiajs/react'
+
 import CustomerLayout from '@/Layouts/CustomerLayout'
 import { HiOutlineBell } from 'react-icons/hi2'
-import { HiOutlineCash } from 'react-icons/hi'
+import UserBanner from './UserBanner'
 
-export default function Index({ status }) {
+const GuestBanner = () => {
+    const {
+        props: { app_name },
+    } = usePage()
     return (
-        <CustomerLayout>
-            <Head title="Home" />
-            <div className="flex flex-col">
-                {/* user */}
-                <div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
-                    <div className="flex flex-col text-white">
-                        <div className="font-bold">Aji</div>
-                        <div className="flex flex-row items-center space-x-1">
-                            <div>083840745543</div>
-                            <div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
-                                Gold
-                            </div>
-                        </div>
-                    </div>
-                    <div className="flex flex-row">
-                        <HiOutlineBell className="text-white w-7 h-7" />
-                        <div>
-                            <div className="bg-white text-blue-700 rounded-lg px-1 text-xs -ml-2.5">
-                                1
-                            </div>
-                        </div>
-                    </div>
+        <div>
+            {/* user */}
+            <div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
+                <div className="flex flex-col text-white">
+                    <div className="font-bold">Welcome to {app_name}</div>
                 </div>
-
-                {/* saldo */}
-                <div className="flex flex-row px-5 pb-3 text-base bg-blue-600">
-                    <div className="flex flex-row w-full shadow py-2 px-2 rounded bg-white items-center justify-between">
-                        <div className="flex flex-col">
-                            <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                                <HiOutlineCash />
-                                <div>Saldo</div>
-                            </div>
-                            <div className="font-bold">Rp 10.000</div>
-                            <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                                <div>Coin 10.000</div>
-                            </div>
-                        </div>
-                        <div className="flex flex-col border-l-2 pl-5 pr-5">
-                            <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                                {/* <HiOutlineAwa /> */}
-                                <div>Rewards</div>
-                            </div>
-                            <div className="font-bold">Gold Member</div>
-                            <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
-                                <div>Limit 100.000</div>
-                            </div>
+                <div className="flex flex-row">
+                    <HiOutlineBell className="text-white w-7 h-7" />
+                    <div>
+                        <div className="bg-white text-blue-700 rounded-lg px-1 text-xs -ml-2.5">
+                            0
                         </div>
                     </div>
                 </div>
+            </div>
+        </div>
+    )
+}
+
+export default function Index({ status }) {
+    const {
+        props: {
+            auth: { user },
+        },
+    } = usePage()
+    return (
+        <CustomerLayout>
+            <Head title="Home" />
+            <div className="flex flex-col">
+                {user !== null ? <UserBanner user={user} /> : <GuestBanner />}
 
                 {/* banner */}
                 <div className="w-full">
diff --git a/resources/js/Pages/Home/Index/UserBanner.jsx b/resources/js/Pages/Home/Index/UserBanner.jsx
new file mode 100644
index 0000000..d74ef96
--- /dev/null
+++ b/resources/js/Pages/Home/Index/UserBanner.jsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import { HiOutlineCash, HiOutlineBell } from 'react-icons/hi'
+
+export default function UserBanner({ user }) {
+    return (
+        <div>
+            {/* user */}
+            <div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
+                <div className="flex flex-col text-white">
+                    <div className="font-bold">{user.name}</div>
+                    <div className="flex flex-row items-center space-x-1">
+                        <div>+62{user.phone}</div>
+                        <div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
+                            Gold
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-row">
+                    <HiOutlineBell className="text-white w-7 h-7" />
+                    <div>
+                        <div className="bg-white text-blue-700 rounded-lg px-1 text-xs -ml-2.5">
+                            1
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {/* saldo */}
+            <div className="flex flex-row px-5 pb-3 text-base bg-blue-600">
+                <div className="flex flex-row w-full shadow py-2 px-2 rounded bg-white items-center justify-between">
+                    <div className="flex flex-col">
+                        <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                            <HiOutlineCash />
+                            <div>Saldo</div>
+                        </div>
+                        <div className="font-bold">Rp 10.000</div>
+                        <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                            <div>Coin 10.000</div>
+                        </div>
+                    </div>
+                    <div className="flex flex-col border-l-2 pl-5 pr-5">
+                        <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                            {/* <HiOutlineAwa /> */}
+                            <div>Rewards</div>
+                        </div>
+                        <div className="font-bold">Gold Member</div>
+                        <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                            <div>Limit 100.000</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/resources/js/Pages/Home/Profile/Form.jsx b/resources/js/Pages/Home/Profile/Form.jsx
new file mode 100644
index 0000000..299c289
--- /dev/null
+++ b/resources/js/Pages/Home/Profile/Form.jsx
@@ -0,0 +1,159 @@
+import React from 'react'
+import { Head, useForm, Link } from '@inertiajs/react'
+import { FcGoogle } from 'react-icons/fc'
+
+import CustomerLayout from '@/Layouts/CustomerLayout'
+import FormInput from '@/Components/FormInput'
+import Button from '@/Components/Button'
+import Alert from '@/Components/Alert'
+import FormInputWith from '@/Components/FormInputWith'
+import TextArea from '@/Components/TextArea'
+import FormFile from '@/Components/FormFile'
+
+export default function Index({ auth: { user }, flash }) {
+    const { data, setData, post, processing, errors } = useForm({
+        username: user.username,
+        password: '',
+        password_confirmation: '',
+        fullname: user.fullname,
+        name: user.name,
+        address: user.address,
+        phone: user.phone,
+        image: null,
+        image_url: user.image_url,
+    })
+
+    const handleOnChange = (event) => {
+        setData(
+            event.target.name,
+            event.target.type === 'checkbox'
+                ? event.target.checked
+                    ? 1
+                    : 0
+                : event.target.value
+        )
+    }
+
+    const handleSubmit = () => {
+        post(route('customer.show'))
+    }
+
+    const handleKeyDown = (e) => {
+        if (e.code === 'Enter') {
+            handleSubmit()
+        }
+    }
+
+    return (
+        <CustomerLayout>
+            <Head title="Login" />
+            <div className="flex flex-col min-h-screen">
+                <div className="m-4 p-2">
+                    <div className="text-2xl font-bold mb-4">Profile</div>
+                    <Alert type={flash.message.type}>
+                        <span className="font-semibold">
+                            {flash.message.message}
+                        </span>
+                    </Alert>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="nama lengkap"
+                            name="fullname"
+                            value={data.fullname}
+                            onChange={handleOnChange}
+                            error={errors.fullname}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="nama panggilan"
+                            name="name"
+                            value={data.name}
+                            onChange={handleOnChange}
+                            error={errors.name}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <FormInputWith
+                        type="number"
+                        leftItem={<div className="text-sm">+62</div>}
+                        placeholder="whatsapp"
+                        name="phone"
+                        value={data.phone}
+                        onChange={handleOnChange}
+                        error={errors.phone}
+                        onKeyDownCapture={(e) => handleKeyDown(e)}
+                        formClassName={'pl-10'}
+                    />
+                    <div className="w-full">
+                        <TextArea
+                            placeholder="alamat lengkap"
+                            name="address"
+                            value={data.address}
+                            onChange={handleOnChange}
+                            error={errors.address}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            placeholder="username"
+                            name="username"
+                            value={data.username}
+                            onChange={handleOnChange}
+                            error={errors.username}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            type="password"
+                            placeholder="password , leave blank if unchange"
+                            name="password"
+                            value={data.password}
+                            onChange={handleOnChange}
+                            error={errors.password}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormInput
+                            type="password"
+                            placeholder="retype password"
+                            name="password_confirmation"
+                            value={data.password_confirmation}
+                            onChange={handleOnChange}
+                            error={errors.password_confirmation}
+                            onKeyDownCapture={(e) => handleKeyDown(e)}
+                        />
+                    </div>
+                    <div className="w-full">
+                        <FormFile
+                            label={'Profile Image'}
+                            onChange={(e) =>
+                                setData('image', e.target.files[0])
+                            }
+                            error={errors.image}
+                            preview={
+                                <img
+                                    src={`${data.image_url}`}
+                                    className="w-40 mb-1"
+                                    alt="site logo"
+                                />
+                            }
+                        />
+                    </div>
+                    <div className="w-full flex flex-row justify-between">
+                        <Button processing={processing} onClick={handleSubmit}>
+                            Simpan
+                        </Button>
+                        {/* <a href="#" className="text-sm underline text-blue-600">
+                            forgot password
+                        </a> */}
+                    </div>
+                </div>
+            </div>
+        </CustomerLayout>
+    )
+}
diff --git a/resources/js/Pages/Home/Profile/Index.jsx b/resources/js/Pages/Home/Profile/Index.jsx
new file mode 100644
index 0000000..fe831ff
--- /dev/null
+++ b/resources/js/Pages/Home/Profile/Index.jsx
@@ -0,0 +1,115 @@
+import React from 'react'
+import { Head, Link, router } from '@inertiajs/react'
+import CustomerLayout from '@/Layouts/CustomerLayout'
+import UserBanner from '../Index/UserBanner'
+import {
+    HiChevronRight,
+    HiOutlineUser,
+    HiOutlineUserCircle,
+} from 'react-icons/hi2'
+import { HiOutlineBell, HiOutlineCash } from 'react-icons/hi'
+import { useModalState } from '@/hooks'
+import ModalConfirm from '@/Components/ModalConfirm'
+
+export default function Index({ auth: { user } }) {
+    const confirmModal = useModalState()
+
+    const handleLogoutClick = () => {
+        confirmModal.toggle()
+    }
+
+    const onLogout = () => {
+        router.post(route('customer.logout'))
+    }
+
+    return (
+        <CustomerLayout>
+            <Head title="Login" />
+            <div className="flex flex-col min-h-screen">
+                <div>
+                    {/* user */}
+                    <div className="flex flex-row justify-between items-center px-5 py-6 text-lg bg-blue-600">
+                        <div className="flex flex-row items-center space-x-2">
+                            <HiOutlineUserCircle className="text-white h-14 w-14" />
+                            <div className="flex flex-col text-white">
+                                <div className="font-bold">{user.name}</div>
+                                <div className="flex flex-row items-center space-x-1">
+                                    <div>+62{user.phone}</div>
+                                    <div className="text-xs font-semibold px-2 py-1 bg-white text-black rounded-xl">
+                                        Gold
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex flex-row">
+                            <HiOutlineBell className="text-white w-7 h-7" />
+                            <div>
+                                <div className="bg-white text-blue-700 rounded-lg px-1 text-xs -ml-2.5">
+                                    1
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {/* saldo */}
+                    <div className="flex flex-row px-5 pb-3 text-base bg-blue-600">
+                        <div className="flex flex-row w-full shadow py-2 px-2 rounded bg-white items-center justify-between">
+                            <div className="flex flex-col">
+                                <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                                    <HiOutlineCash />
+                                    <div>Saldo</div>
+                                </div>
+                                <div className="font-bold">Rp 10.000</div>
+                                <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                                    <div>Coin 10.000</div>
+                                </div>
+                            </div>
+                            <div className="flex flex-col border-l-2 pl-5 pr-5">
+                                <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                                    <div>Rewards</div>
+                                </div>
+                                <div className="font-bold">Gold Member</div>
+                                <div className="text-xs flex flex-row items-center space-x-1 text-gray-400">
+                                    <div>Limit 100.000</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="p-4 flex flex-col">
+                    <div className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 hover:bg-gray-100">
+                        <div>Upgrade Member</div>
+                        <HiChevronRight className="h-5 w-5" />
+                    </div>
+                    <div className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 hover:bg-gray-100">
+                        <div>Deposit Saldo</div>
+                        <HiChevronRight className="h-5 w-5" />
+                    </div>
+                    <div className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 hover:bg-gray-100">
+                        <div>Transaksi</div>
+                        <HiChevronRight className="h-5 w-5" />
+                    </div>
+                    <div className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 hover:bg-gray-100">
+                        <div>Notifikasi</div>
+                        <HiChevronRight className="h-5 w-5" />
+                    </div>
+                    <div
+                        className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 hover:bg-gray-100"
+                        onClick={() =>
+                            router.get(route('customer.profile.show'))
+                        }
+                    >
+                        <div>Profile</div>
+                        <HiChevronRight className="h-5 w-5" />
+                    </div>
+                    <div
+                        onClick={() => handleLogoutClick()}
+                        className="flex flex-row justify-between items-center px-2 py-4 w-full border-b border-gray-400 text-red-700 hover:bg-gray-100"
+                    >
+                        Logout
+                    </div>
+                </div>
+            </div>
+            <ModalConfirm modalState={confirmModal} onConfirm={onLogout} />
+        </CustomerLayout>
+    )
+}
diff --git a/routes/web.php b/routes/web.php
index 249ad29..75f29d9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,6 +1,9 @@
 <?php
 
+use App\Http\Controllers\Customer\AuthController;
+use App\Http\Controllers\Customer\ProfileController;
 use App\Http\Controllers\Customer\HomeController;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -14,8 +17,29 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::middleware(['inertia.customer'])->group(function () {
+Route::middleware(['guard_should_customer', 'inertia.customer'])->group(function () {
     Route::get('/', [HomeController::class, 'index'])->name('home.index');
+
+    Route::middleware('auth:customer')->group(function () {
+        // profile
+        Route::get('profile', [ProfileController::class, 'index'])->name('customer.profile.index');
+        Route::get('profile/update', [ProfileController::class, 'show'])->name('customer.profile.show');
+        Route::post('profile/update', [ProfileController::class, 'update']);
+        // logout
+        Route::post('logout', [AuthController::class, 'destroy'])->name('customer.logout');
+    });
+
+    Route::middleware('guest:customer')->group(function () {
+        // login
+        Route::get('/login', [AuthController::class, 'login'])->name('customer.login');
+        Route::post('/login', [AuthController::class, 'update']);
+        Route::get('/login/google', [AuthController::class, 'signin_google'])->name('customer.login.google');
+        Route::get('/login/callback_google', [AuthController::class, 'callback_google'])->name('customer.login.callback_google');
+
+        // register
+        Route::get('/register', [AuthController::class, 'register'])->name('customer.register');
+        Route::post('/register', [AuthController::class, 'store']);
+    });
 });
 
 require_once 'admin.php';