From c42480e74e9964d9bb78cd8927acaa5e4dab0fb1 Mon Sep 17 00:00:00 2001
From: Nguyen Tan Dung <dung@ntd-dev.tech>
Date: Sun, 10 Dec 2023 23:33:28 +0700
Subject: [PATCH] setting.blade.php

---
 app/Helpers/Helper.php                        |  50 +++++++
 app/Http/Controllers/Admin/AuthController.php |  12 +-
 .../Controllers/Admin/HomepageController.php  |   3 +-
 .../Controllers/Admin/OptionController.php    |  65 ---------
 .../Controllers/Admin/SettingController.php   |  42 ++++++
 .../Controllers/User/HomepageController.php   |   3 +-
 app/Http/Middleware/CheckAdminMiddleware.php  |  24 ++++
 .../Repositories/Admin/SettingRepository.php  |  43 ++++++
 app/Http/Requests/SettingRequest.php          |  51 +++++++
 .../{AuthServices.php => AuthService.php}     |   2 +-
 app/Http/Services/Admin/SettingService.php    |  54 +++++++
 config/app.php                                |  15 +-
 package-lock.json                             | 128 ++++-------------
 package.json                                  |   6 +-
 resources/js/app.ts                           |   5 +
 resources/js/guest.ts                         |   1 +
 resources/js/setting.js                       | 135 ++++++++++++++++++
 resources/views/admin/auth/login.blade.php    |   4 +-
 resources/views/admin/setting.blade.php       |  93 ++++++++++++
 .../components/admin/layouts/app.blade.php    |  46 ++++--
 .../components/admin/layouts/guest.blade.php  |   9 --
 .../admin/layouts/partials/header.blade.php   |  84 +++++++----
 .../admin/layouts/partials/sidebar.blade.php  |   4 +-
 .../components/forms/buttons/index.blade.php  |   8 ++
 .../components/forms/inputs/file.blade.php    |  54 +++++++
 .../components/forms/inputs/index.blade.php   |   4 +-
 .../views/components/partials/toast.blade.php |   2 +-
 .../user/layouts/partials/header.blade.php    |   4 +-
 routes/admin.php                              |   7 +
 routes/breadcrumbs.php                        |   5 +
 vite.config.js                                |   2 +
 31 files changed, 733 insertions(+), 232 deletions(-)
 delete mode 100644 app/Http/Controllers/Admin/OptionController.php
 create mode 100644 app/Http/Controllers/Admin/SettingController.php
 create mode 100644 app/Http/Middleware/CheckAdminMiddleware.php
 create mode 100644 app/Http/Repositories/Admin/SettingRepository.php
 create mode 100644 app/Http/Requests/SettingRequest.php
 rename app/Http/Services/Admin/{AuthServices.php => AuthService.php} (96%)
 create mode 100644 app/Http/Services/Admin/SettingService.php
 create mode 100644 resources/js/setting.js
 create mode 100644 resources/views/admin/setting.blade.php
 create mode 100644 resources/views/components/forms/buttons/index.blade.php
 create mode 100644 resources/views/components/forms/inputs/file.blade.php

diff --git a/app/Helpers/Helper.php b/app/Helpers/Helper.php
index b3d9bbc..d92e60e 100644
--- a/app/Helpers/Helper.php
+++ b/app/Helpers/Helper.php
@@ -1 +1,51 @@
 <?php
+
+use App\Http\Services\Admin\SettingService;
+
+if (!function_exists('option')) {
+    function option($name, $default = '')
+    {
+        $settingService = new SettingService();
+        $value = $settingService->getValueByKey($name);
+
+        if ($value == null) {
+            return $default;
+        }
+
+        return $value;
+    }
+
+    if (!function_exists('getNameRouteMain')) {
+        function getNameRouteMain(): string
+        {
+            $arrRouteName = explode('.', request()->route()->getName());
+
+            $result = $arrRouteName[0];
+            if($arrRouteName[0] == 'admin') {
+                $result = $arrRouteName[1];
+            }
+
+            return $result == "index" ? "" : $result;
+        }
+    }
+
+    if (!function_exists('getSubtitle')) {
+        function getSubtitle(): string
+        {
+            $result = getNameRouteMain();
+
+            return $result == "" ? "" : ' - '. ucfirst($result);
+        }
+    }
+
+    if (!function_exists('getImageFromStorage')) {
+        function getImageFromStorage($value, $url): string
+        {
+            if ($value == '' || $value == null) {
+                return asset($url);
+            }
+
+            return Storage::url($value);
+        }
+    }
+}
diff --git a/app/Http/Controllers/Admin/AuthController.php b/app/Http/Controllers/Admin/AuthController.php
index 34f3301..2e34f42 100644
--- a/app/Http/Controllers/Admin/AuthController.php
+++ b/app/Http/Controllers/Admin/AuthController.php
@@ -4,7 +4,7 @@
 
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Auth\LoginRequest;
-use App\Http\Services\Admin\AuthServices;
+use App\Http\Services\Admin\AuthService;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -12,19 +12,19 @@
 
 class AuthController extends Controller
 {
-    Protected AuthServices $authServices;
+    Protected AuthService $authServices;
 
     public function __construct()
     {
-        $this->authServices = new AuthServices();
+        $this->authServices = new AuthService();
     }
 
-    public function login() : View
+    public function login(): View
     {
         return view('admin.auth.login');
     }
 
-    public function logout()
+    public function logout(): RedirectResponse
     {
         Auth::logout();
         return redirect()
@@ -32,7 +32,7 @@ public function logout()
             ->with('success', trans("Logout Successfully"));
     }
 
-    public function processLogin(LoginRequest $request)
+    public function processLogin(LoginRequest $request): RedirectResponse
     {
         $data = $request->validated();
         $remember = $request->has('remember');
diff --git a/app/Http/Controllers/Admin/HomepageController.php b/app/Http/Controllers/Admin/HomepageController.php
index a322558..9e29e0a 100644
--- a/app/Http/Controllers/Admin/HomepageController.php
+++ b/app/Http/Controllers/Admin/HomepageController.php
@@ -3,10 +3,11 @@
 namespace App\Http\Controllers\Admin;
 
 use App\Http\Controllers\Controller;
+use Illuminate\View\View;
 
 class HomepageController extends Controller
 {
-    public function __invoke()
+    public function __invoke() : View
     {
         return view('admin.index');
     }
diff --git a/app/Http/Controllers/Admin/OptionController.php b/app/Http/Controllers/Admin/OptionController.php
deleted file mode 100644
index 896555e..0000000
--- a/app/Http/Controllers/Admin/OptionController.php
+++ /dev/null
@@ -1,65 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Admin;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
-
-class OptionController extends Controller
-{
-    /**
-     * Display a listing of the resource.
-     */
-    public function index()
-    {
-        //
-    }
-
-    /**
-     * Show the form for creating a new resource.
-     */
-    public function create()
-    {
-        //
-    }
-
-    /**
-     * Store a newly created resource in storage.
-     */
-    public function store(Request $request)
-    {
-        //
-    }
-
-    /**
-     * Display the specified resource.
-     */
-    public function show(string $id)
-    {
-        //
-    }
-
-    /**
-     * Show the form for editing the specified resource.
-     */
-    public function edit(string $id)
-    {
-        //
-    }
-
-    /**
-     * Update the specified resource in storage.
-     */
-    public function update(Request $request, string $id)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     */
-    public function destroy(string $id)
-    {
-        //
-    }
-}
diff --git a/app/Http/Controllers/Admin/SettingController.php b/app/Http/Controllers/Admin/SettingController.php
new file mode 100644
index 0000000..403d3c8
--- /dev/null
+++ b/app/Http/Controllers/Admin/SettingController.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\SettingRequest;
+use App\Http\Services\Admin\SettingService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\View\View;
+
+class SettingController extends Controller
+{
+    protected SettingService $settingService;
+
+    public function __construct()
+    {
+        $this->settingService = new SettingService();
+    }
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(): View
+    {
+        return view("admin.setting");
+    }
+
+    /**
+     * Save the form for editing the specified resource.
+     */
+    public function save(SettingRequest $request)
+    {
+        $data = $request->validated();
+        $result = $this->settingService->save($data);
+
+        if ($result)
+            return redirect()
+                ->route("admin.index")
+                ->with("success", trans("Update Successfully"));
+        return redirect()->back()->withErrors("Update Failed");
+    }
+}
diff --git a/app/Http/Controllers/User/HomepageController.php b/app/Http/Controllers/User/HomepageController.php
index 760579d..f486f4d 100644
--- a/app/Http/Controllers/User/HomepageController.php
+++ b/app/Http/Controllers/User/HomepageController.php
@@ -3,10 +3,11 @@
 namespace App\Http\Controllers\User;
 
 use App\Http\Controllers\Controller;
+use Illuminate\View\View;
 
 class HomepageController extends Controller
 {
-    public function __invoke()
+    public function __invoke(): View
     {
         return view('index');
     }
diff --git a/app/Http/Middleware/CheckAdminMiddleware.php b/app/Http/Middleware/CheckAdminMiddleware.php
new file mode 100644
index 0000000..a673ba8
--- /dev/null
+++ b/app/Http/Middleware/CheckAdminMiddleware.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Symfony\Component\HttpFoundation\Response;
+
+class CheckAdminMiddleware
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
+     */
+    public function handle(Request $request, Closure $next): Response
+    {
+        if (Auth::user()->level !== 4)
+            return redirect()->route('admin.login')->withErrors('You must login account admin to continue');
+
+        return $next($request);
+    }
+}
diff --git a/app/Http/Repositories/Admin/SettingRepository.php b/app/Http/Repositories/Admin/SettingRepository.php
new file mode 100644
index 0000000..741cc88
--- /dev/null
+++ b/app/Http/Repositories/Admin/SettingRepository.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Repositories\Admin;
+
+use App\Models\Option;
+use Illuminate\Database\Eloquent\Builder;
+
+class SettingRepository
+{
+    protected Option $option;
+
+    public function __construct()
+    {
+        $this->option = new Option();
+    }
+
+    /**
+     * @param string $key
+     * @return Builder|Option
+     */
+    public function getSetting(string $key): Builder|Option
+    {
+        return $this->option::query()
+            ->where('name', $key)->firstOrFail();
+    }
+
+    public function save(string $key, string $value = null): bool
+    {
+        try {
+            $option = $this->option::query()
+                ->updateOrCreate([
+                    "name" => $key
+                ], [
+                    "value" => $value
+                ]);
+
+            $option->save();
+            return true;
+        } catch (\Exception $e) {
+            return false;
+        }
+    }
+}
diff --git a/app/Http/Requests/SettingRequest.php b/app/Http/Requests/SettingRequest.php
new file mode 100644
index 0000000..d8fb573
--- /dev/null
+++ b/app/Http/Requests/SettingRequest.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Support\Facades\Auth;
+
+class SettingRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     */
+    public function authorize(): bool
+    {
+        return Auth::user()->level == 4;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array<string, \Illuminate\Contracts\Validation\ValidationRule|array<mixed>|string>
+     */
+    public function rules(): array
+    {
+        return [
+            "site_name" => ["required", "string", "min:4"],
+            "slogan" => ["required", "string", "min:4"],
+            "logo_light" => ["image", "mimes:jpeg,png,jpg", "max:3072", "nullable"],
+            "logo_dark" => ["image", "mimes:jpeg,png,jpg", "max:3072", "nullable"],
+            "site_address" => ["required", "string", "min:4"],
+            "email" => ["required", "email"],
+            "phone" => ["required", "string", "min:5", "max:15"],
+            "lat" => ["required", "numeric"],
+            "lng" => ["required", "numeric"],
+        ];
+    }
+
+    public function messages(): array
+    {
+        return [
+            "image" => trans("Invalid image"),
+            "mimes:jpeg,png,jpg" => trans("uploaded image must be png, jpg, jpeg file"),
+            "max:3072" => trans("Images must be under 3072 kb"),
+            "email" => trans("Unknown error please try again"),
+            "string" => trans("Unknown error please try again"),
+            "min:4" => trans("Fields must be more than 4 characters"),
+            "phone.max:15" => trans("Fields must be less than 32 characters"),
+            "numeric" => trans("Unknown error please try again"),
+        ];
+    }
+}
diff --git a/app/Http/Services/Admin/AuthServices.php b/app/Http/Services/Admin/AuthService.php
similarity index 96%
rename from app/Http/Services/Admin/AuthServices.php
rename to app/Http/Services/Admin/AuthService.php
index 9491581..ec73b8a 100644
--- a/app/Http/Services/Admin/AuthServices.php
+++ b/app/Http/Services/Admin/AuthService.php
@@ -5,7 +5,7 @@
 use App\Models\User;
 use Illuminate\Support\Facades\Auth;
 
-class AuthServices {
+class AuthService {
 
     public function login(string $email, string $password, bool $remember): bool
     {
diff --git a/app/Http/Services/Admin/SettingService.php b/app/Http/Services/Admin/SettingService.php
new file mode 100644
index 0000000..f3ca1eb
--- /dev/null
+++ b/app/Http/Services/Admin/SettingService.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace App\Http\Services\Admin;
+
+use App\Http\Repositories\Admin\SettingRepository;
+use App\Models\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
+
+class SettingService {
+    protected SettingRepository $settingRepository;
+
+    public function __construct()
+    {
+        $this->settingRepository = new SettingRepository();
+    }
+
+    public function getValueByKey(string $key): ?string
+    {
+        try {
+            $option = $this->settingRepository->getSetting($key);
+
+            $value = $option->value;
+        } catch (\Exception $e) {
+            $value = null;
+        }
+
+        return $value;
+    }
+
+    public function save(array $data): bool
+    {
+        try {
+            foreach ($data as $key => $value) {
+                if(str_contains($key, 'logo')) {
+                    if (option($key) != null) {
+                        Storage::disk('public')->delete(option('site_logo'));
+                    }
+
+                    $fileLogo = $value;
+                    $nameFileLogo = $key . '_' . Str::random(10) . '.' . $fileLogo->extension();
+                    $filePathLogo = $fileLogo->storeAs('images', $nameFileLogo, 'public');
+
+                    $value = $filePathLogo;
+                }
+                $this->settingRepository->save($key, $value);
+            }
+            return true;
+        } catch (\Exception $e) {
+            return false;
+        }
+    }
+}
diff --git a/config/app.php b/config/app.php
index 004b027..69bcf26 100644
--- a/config/app.php
+++ b/config/app.php
@@ -16,7 +16,7 @@
     |
     */
 
-    'name' => env('APP_NAME', 'Laravel'),
+    'name' => env('APP_NAME', 'Dũng Phát'),
 
     /*
     |--------------------------------------------------------------------------
@@ -126,6 +126,19 @@
 
     'cipher' => 'AES-256-CBC',
 
+    /*
+    |--------------------------------------------------------------------------
+    | API Keys
+    |--------------------------------------------------------------------------
+    |
+    | This section stores secret API keys used by your application. These keys
+    | should not be shared publicly and should be stored securely.
+    |
+    */
+    'api_keys' => [
+        'google_maps' => env('GOOGLE_MAPS_API_KEY'),
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Maintenance Mode Driver
diff --git a/package-lock.json b/package-lock.json
index fe29a86..f12bf72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,15 +5,17 @@
     "packages": {
         "": {
             "dependencies": {
+                "@googlemaps/js-api-loader": "^1.16.2",
+                "@types/google.maps": "^3.54.10",
                 "lucide": "^0.293.0",
                 "preline": "^2.0.2",
                 "resize-observer-polyfill": "^1.5.1",
                 "simplebar": "^6.2.5",
-                "swiper": "^11.0.5"
+                "swiper": "^11.0.5",
+                "toastify-js": "^1.12.0"
             },
             "devDependencies": {
                 "autoprefixer": "^10.4.16",
-                "axios": "^1.6.1",
                 "laravel-vite-plugin": "^0.8.0",
                 "postcss": "^8.4.31",
                 "tailwindcss": "^3.3.5",
@@ -385,6 +387,14 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@googlemaps/js-api-loader": {
+            "version": "1.16.2",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz",
+            "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3"
+            }
+        },
         "node_modules/@jridgewell/gen-mapping": {
             "version": "0.3.3",
             "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -477,6 +487,11 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@types/google.maps": {
+            "version": "3.54.10",
+            "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.54.10.tgz",
+            "integrity": "sha512-N6gwM01mKhooXaw+IKbUH7wJcIJCn8U60VoaVvom5EiQjmfgevhQ+0+/r17beXW5j8ad2x+WPr0iyOUodCw4/w=="
+        },
         "node_modules/@types/lodash": {
             "version": "4.14.202",
             "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
@@ -515,12 +530,6 @@
             "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
             "dev": true
         },
-        "node_modules/asynckit": {
-            "version": "0.4.0",
-            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-            "dev": true
-        },
         "node_modules/autoprefixer": {
             "version": "10.4.16",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -558,17 +567,6 @@
                 "postcss": "^8.1.0"
             }
         },
-        "node_modules/axios": {
-            "version": "1.6.2",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
-            "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
-            "dev": true,
-            "dependencies": {
-                "follow-redirects": "^1.15.0",
-                "form-data": "^4.0.0",
-                "proxy-from-env": "^1.1.0"
-            }
-        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -752,18 +750,6 @@
                 "simple-swizzle": "^0.2.2"
             }
         },
-        "node_modules/combined-stream": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-            "dev": true,
-            "dependencies": {
-                "delayed-stream": "~1.0.0"
-            },
-            "engines": {
-                "node": ">= 0.8"
-            }
-        },
         "node_modules/commander": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -791,15 +777,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/delayed-stream": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.4.0"
-            }
-        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -864,6 +841,11 @@
                 "node": ">=6"
             }
         },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
         "node_modules/fast-glob": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -922,40 +904,6 @@
                 "flat": "cli.js"
             }
         },
-        "node_modules/follow-redirects": {
-            "version": "1.15.3",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-            "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
-            "dev": true,
-            "funding": [
-                {
-                    "type": "individual",
-                    "url": "https://github.com/sponsors/RubenVerborgh"
-                }
-            ],
-            "engines": {
-                "node": ">=4.0"
-            },
-            "peerDependenciesMeta": {
-                "debug": {
-                    "optional": true
-                }
-            }
-        },
-        "node_modules/form-data": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-            "dev": true,
-            "dependencies": {
-                "asynckit": "^0.4.0",
-                "combined-stream": "^1.0.8",
-                "mime-types": "^2.1.12"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/fraction.js": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -1201,27 +1149,6 @@
                 "node": ">=8.6"
             }
         },
-        "node_modules/mime-db": {
-            "version": "1.52.0",
-            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-            "dev": true,
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
-        "node_modules/mime-types": {
-            "version": "2.1.35",
-            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-            "dev": true,
-            "dependencies": {
-                "mime-db": "1.52.0"
-            },
-            "engines": {
-                "node": ">= 0.6"
-            }
-        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1519,12 +1446,6 @@
                 "@popperjs/core": "^2.11.2"
             }
         },
-        "node_modules/proxy-from-env": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-            "dev": true
-        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1797,6 +1718,11 @@
                 "node": ">=8.0"
             }
         },
+        "node_modules/toastify-js": {
+            "version": "1.12.0",
+            "resolved": "https://registry.npmjs.org/toastify-js/-/toastify-js-1.12.0.tgz",
+            "integrity": "sha512-HeMHCO9yLPvP9k0apGSdPUWrUbLnxUKNFzgUoZp1PHCLploIX/4DSQ7V8H25ef+h4iO9n0he7ImfcndnN6nDrQ=="
+        },
         "node_modules/ts-interface-checker": {
             "version": "0.1.13",
             "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
diff --git a/package.json b/package.json
index 2938097..40006a2 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,6 @@
     },
     "devDependencies": {
         "autoprefixer": "^10.4.16",
-        "axios": "^1.6.1",
         "laravel-vite-plugin": "^0.8.0",
         "postcss": "^8.4.31",
         "tailwindcss": "^3.3.5",
@@ -15,10 +14,13 @@
         "vite": "^4.0.0"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.2",
+        "@types/google.maps": "^3.54.10",
         "lucide": "^0.293.0",
         "preline": "^2.0.2",
         "resize-observer-polyfill": "^1.5.1",
         "simplebar": "^6.2.5",
-        "swiper": "^11.0.5"
+        "swiper": "^11.0.5",
+        "toastify-js": "^1.12.0"
     }
 }
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 8266233..b45cf5e 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -3,3 +3,8 @@ import 'preline';
 
 // import css
 import '../css/app.css';
+
+import Toastify from 'toastify-js/src/toastify.js';
+import "toastify-js/src/toastify.css"
+
+window.Toastify = Toastify;
diff --git a/resources/js/guest.ts b/resources/js/guest.ts
index d4ce736..6ccf07e 100644
--- a/resources/js/guest.ts
+++ b/resources/js/guest.ts
@@ -27,6 +27,7 @@ document.querySelectorAll("[data-x-password]").forEach(password => {
         }
     });
 })
+
 const setProperty = (object: object, property: string | symbol, value: any) => {
     if (property in object) {
         Object.defineProperty(object, property, {
diff --git a/resources/js/setting.js b/resources/js/setting.js
new file mode 100644
index 0000000..7a2e80e
--- /dev/null
+++ b/resources/js/setting.js
@@ -0,0 +1,135 @@
+//region Google Maps
+import {Loader} from "@googlemaps/js-api-loader"
+
+const apiKeyGoogleMap = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
+const loader = new Loader({
+    apiKey: apiKeyGoogleMap, version: "weekly",
+    libraries: ["places", "marker"],
+});
+
+let mapConfirm = false;
+
+document.addEventListener("DOMContentLoaded", () => {
+    const inputSearch = document.getElementById("address");
+
+    let valLat = document.getElementById("lat").value;
+    let valLng = document.getElementById("lng").value;
+    let lat, lng;
+
+    if (valLat.length > 0) {
+        lat = valLat;
+    } else {
+        lat = 10.800664;
+    }
+
+    if (valLng.length > 0) {
+        lng = valLng;
+    } else {
+        lng = 106.712588;
+    }
+
+    if (lat.length > 0 && lng.length > 0) {
+        inputSearch.style.border = "1px solid green";
+        mapConfirm = true;
+    }
+    loader.load().then(() => {
+
+        const mapLatLng = new google.maps.LatLng(lat, lng);
+
+        const map = new google.maps.Map(document.getElementById("map"), {
+            center: mapLatLng, zoom: 18, mapTypeControl: false,
+        });
+
+        const marker = new google.maps.Marker({
+            position: mapLatLng,
+            map: map
+        })
+
+        inputSearch.addEventListener("focus", () => {
+            const addressAutoComplete = new google.maps.places.Autocomplete(inputSearch);
+            addressAutoComplete.bindTo("bounds", map);
+            google.maps.event.addListener(addressAutoComplete, "place_changed", () => {
+                let placeObj = addressAutoComplete.getPlace();
+                marker.setPosition(placeObj.geometry.location);
+                map.setCenter(placeObj.geometry.location);
+                document.getElementById("lat").value = placeObj.geometry.location.lat();
+                document.getElementById("lng").value = placeObj.geometry.location.lng();
+
+                inputSearch.style.border = "1px solid green";
+                mapConfirm = true;
+            });
+        });
+    });
+});
+//endregion
+
+//region Validate
+let error = "";
+
+const form = document.getElementById("form-setting");
+
+const validateEmail = (email) => /\S+@\S+\.\S+/.test(email);
+
+const validate = () => {
+    error = "";
+
+    const inpEmail = document.getElementById("email");
+    const email = inpEmail.value;
+
+    const inpPhone = document.getElementById("phone");
+    const phone = inpPhone.value;
+
+    let isError = false;
+    if (!mapConfirm) {
+        error += " Please choose a address on map";
+        isError = true;
+    }
+
+    if (email.length === 0) {
+        error += "; Please enter a email address";
+
+        inpEmail.style.border = "1px solid red";
+        inpEmail.style.color = "red";
+
+        isError = true;
+    } else if (!validateEmail(email)) {
+        error += "; Please enter a proper email";
+
+        inpEmail.style.border = "1px solid red";
+        inpEmail.style.color = "red";
+
+        isError = true;
+    }
+
+    if (phone.length === 0) {
+        error += "; Please enter a phone number";
+
+        inpPhone.style.border = "1px solid red";
+        inpPhone.style.color = "red";
+
+        isError = true;
+    } else if (phone.length < 6 || phone.length > 15) {
+        console.log(phone.length);
+        error += "; Please enter a proper phone number";
+
+        inpPhone.style.border = "1px solid red";
+        inpPhone.style.color = "red";
+
+        isError = true;
+    }
+
+    return isError;
+};
+
+form.addEventListener("submit", (e) => {
+    e.preventDefault();
+
+    if (validate()) {
+        document.getElementById("error-message").innerText = error;
+    } else {
+        form.submit();
+    }
+});
+//endregion
+
diff --git a/resources/views/admin/auth/login.blade.php b/resources/views/admin/auth/login.blade.php
index 240faaf..99950f3 100644
--- a/resources/views/admin/auth/login.blade.php
+++ b/resources/views/admin/auth/login.blade.php
@@ -5,8 +5,8 @@
                 <div class="shrink">
                     <div>
                         <a href="{{ route("admin.index") }}" class="flex items-center">
-                            <img src="{{ asset("images/logo-dark.png") }}" alt="logo" class="h-12 flex dark:hidden">
-                            <img src="{{ asset("images/logo-light.png") }}" alt="logo" class="h-12 hidden dark:flex">
+                            <img src="{{ getImageFromStorage(option("logo_dark"), "images/logo-dark.png") }}" alt="logo" class="h-12 flex dark:hidden">
+                            <img src="{{ getImageFromStorage(option("logo_light"), "images/logo-light.png") }}" alt="logo" class="h-12 hidden dark:flex">
                         </a>
                     </div>
                     <div class="py-10">
diff --git a/resources/views/admin/setting.blade.php b/resources/views/admin/setting.blade.php
new file mode 100644
index 0000000..c777d62
--- /dev/null
+++ b/resources/views/admin/setting.blade.php
@@ -0,0 +1,93 @@
+<x-admin.layouts.app>
+    <div class="w-full lg:ps-64">
+        <div class="p-6 page-content">
+
+            <div class="flex items-center justify-between w-full mb-6">
+                <h4 class="text-xl font-medium">
+                    {{ __("Settings") }}
+                </h4>
+
+
+                {{ Breadcrumbs::render('admin.setting') }}
+            </div>
+            <div class="p-6 border rounded-lg border-default-200 mb-6">
+                <div>
+                    <h4 class="text-xl font-medium text-default-900 mb-4">{{ __("Information Website") }}</h4>
+
+                    <div class="grid lg:grid-cols-4 gap-6">
+
+                        <form id="form-setting" class="lg:col-span-4" action="{{ route("admin.setting.save") }}"
+                              method="post" enctype="multipart/form-data">
+                            @csrf
+                            <div class="grid lg:grid-cols-2 gap-6">
+                                <div class="mb-1">
+                                    <x-forms.inputs id="name" name="site_name" :title="trans('Name')"
+                                                    :value="old('site_name', option('app.name', config('app.name')))"
+                                                    :placeholder="trans('Enter Your Name')"/>
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs id="slogan" name="slogan" :title="trans('Slogan')"
+                                                    :value="old('slogan', option('slogan'))"
+                                                    :placeholder="trans('Enter Your Slogan')"/>
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs.file name="logo_dark" :title="trans('Logo Dark')" maxSize="3"
+                                                         :src="old('logo_dark', option('logo_dark'))"/>
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs.file name="logo_light" :title="trans('Logo Light')" maxSize="3"
+                                                         :src="old('logo_light', option('logo_light'))"/>
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs :title="trans('address')" type="text" id="address"
+                                                    name="site_address"
+                                                    :value="old('site_address', option('site_address'))"
+                                                    placeholder="xxx Điện Biên Phủ, P21 Quận Bình Thạnh,..."/>
+                                    <div class="text-red-500 font-semibold mt-3 flex">
+                                        <i class="fas fa-exclamation-triangle mt-[3.1px] mr-0.5"></i>
+                                        <p>{{ __("The field address turns green to confirm") }}</p>
+                                    </div>
+                                    <input class="hidden" id="lat" name="lat" value="{{ old("lat", option("lat")) }}">
+                                    <input class="hidden" id="lng" name="lng" value="{{ old("lng", option("lng")) }}">
+                                    @push("css")
+                                        <style>
+                                            .map-canvas {
+                                                width: 90%;
+                                                border: 1px solid #CCC;
+                                                height: 400px;
+                                                margin: 10px 0;
+                                                padding: 4px;
+                                            }
+                                        </style>
+                                    @endpush
+                                </div>
+                                <div id="map" class="map-canvas">
+
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs id="email" name="email" type="email" title="email"
+                                                    :value="old('email', option('email'))" placeholder="xxxx@xxx.xxx"/>
+                                </div>
+                                <div class="mb-1">
+                                    <x-forms.inputs id="phone" name="phone" title="phone" type="tel"
+                                                    :value="old('phone', option('phone'))" placeholder="0123456789"/>
+                                </div>
+                                <div class="lg:w-[200%] w-full flex justify-center">
+                                    <x-forms.buttons type="submit" class="lg:!w-1/2 w-full flex h-10"
+                                                     id="btn-submit">{{ __("Save Changes") }}</x-forms.buttons>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div class="text-center w-full mt-3">
+                        <p class="text-red-500 font-semibold" id="error-message"></p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    @push("js")
+        @vite("resources/js/setting.js")
+    @endpush
+</x-admin.layouts.app>
diff --git a/resources/views/components/admin/layouts/app.blade.php b/resources/views/components/admin/layouts/app.blade.php
index 7685024..ef66e81 100644
--- a/resources/views/components/admin/layouts/app.blade.php
+++ b/resources/views/components/admin/layouts/app.blade.php
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8" />
-    <title>Dũng Phát - Nhà Hàng Số 1 VN</title>
+    <meta charset="utf-8"/>
+    <title>{{ option("site_name", config("app.name")) . getSubtitle() }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta content="" name="description" />
-    <meta content="coderthemes" name="author" />
+    <meta content="" name="description"/>
+    <meta content="coderthemes" name="author"/>
 
     <!-- Theme favicon -->
     <link rel="shortcut icon" href="{{ asset("favicon.ico") }}">
@@ -37,20 +37,48 @@
 
 <body>
 
-<x-partials.pre-loader />
+<x-partials.pre-loader/>
 
-<x-admin.layouts.partials.header />
+<x-admin.layouts.partials.header/>
 
-<x-admin.layouts.partials.sidebar />
+<x-admin.layouts.partials.sidebar/>
 
 <!-- Start Content -->
 {{ $slot }}
 <!-- End Content -->
 
-<x-admin.layouts.partials.footer />
+<x-admin.layouts.partials.footer/>
 
-<x-partials.dark-mode />
+<x-partials.dark-mode/>
 
 @stack("js")
+
+<script>
+    window.addEventListener("load", () => {
+        @foreach ($errors->all() as $error)
+        Toastify({
+            text: "{{ $error }}",
+            duration: 3000,
+            close: true,
+            stopOnFocus: true,
+            style: {
+                background: "#FF0000",
+            },
+        }).showToast();
+        @endforeach
+
+        @if (session()->has('success'))
+        Toastify({
+            text: "{{ session()->get('success') }}",
+            duration: 3000,
+            close: true,
+            stopOnFocus: true,
+            style: {
+                background: "#7CFC00",
+            },
+        }).showToast();
+        @endif
+    })
+</script>
 </body>
 </html>
diff --git a/resources/views/components/admin/layouts/guest.blade.php b/resources/views/components/admin/layouts/guest.blade.php
index 0a5aed9..1635ff2 100644
--- a/resources/views/components/admin/layouts/guest.blade.php
+++ b/resources/views/components/admin/layouts/guest.blade.php
@@ -25,15 +25,6 @@
 
 <!-- Toast -->
 <div class="absolute top-10 end-4">
-    @foreach ($errors->all() as $error)
-        <x-partials.toast type="error" message="{{ $error }}" />
-    @endforeach
-
-    @if (session()->has('success'))
-        <x-partials.toast type="success" message="{{ session('success') }}" />
-    @endif
 </div>
-<!-- End Toast -->
-
 </body>
 </html>
diff --git a/resources/views/components/admin/layouts/partials/header.blade.php b/resources/views/components/admin/layouts/partials/header.blade.php
index fd12b0b..82429a3 100644
--- a/resources/views/components/admin/layouts/partials/header.blade.php
+++ b/resources/views/components/admin/layouts/partials/header.blade.php
@@ -3,7 +3,8 @@
     <nav class="flex items-center gap-4 w-full px-6">
         <!-- Navigation Toggle (in Small Screen) -->
         <div class="lg:hidden flex">
-            <button type="button" class="text-default-500 hover:text-default-600" data-hs-overlay="#application-sidebar" aria-controls="application-sidebar" aria-label="Toggle navigation">
+            <button type="button" class="text-default-500 hover:text-default-600" data-hs-overlay="#application-sidebar"
+                    aria-controls="application-sidebar" aria-label="Toggle navigation">
                 <i data-lucide="align-justify" class="w-6 h-6"></i>
             </button>
         </div>
@@ -11,8 +12,8 @@
         <!-- Logo -->
         <div class="lg:hidden flex">
             <a href="{{ route("admin.index") }}">
-                <img src="{{ asset("images/logo-dark.png") }}" alt="logo" class="h-10 w-full flex dark:hidden">
-                <img src="{{ asset("images/logo-light.png") }}" alt="logo" class="h-10 w-full hidden dark:flex">
+                <img src="{{ getImageFromStorage(option("logo_dark"), "images/logo-dark.png") }}" alt="logo" class="h-10 w-full flex dark:hidden">
+                <img src="{{ getImageFromStorage(option("logo_light"), "images/logo-light.png") }}" alt="logo" class="h-10 w-full hidden dark:flex">
             </a>
         </div>
 
@@ -20,7 +21,9 @@
         <div class="lg:flex hidden">
             <label for="icon" class="sr-only">Search</label>
             <div class="relative lg:flex hidden">
-                <input type="search" class="ps-12 pe-4 py-2.5 block w-64 bg-default-50 text-default-600 border-default-200 rounded-full text-sm focus:border-primary focus:ring-primary" placeholder="Search for items...">
+                <input type="search"
+                       class="ps-12 pe-4 py-2.5 block w-64 bg-default-50 text-default-600 border-default-200 rounded-full text-sm focus:border-primary focus:ring-primary"
+                       placeholder="Search for items...">
                 <span class="absolute start-4 top-2.5">
                         <i data-lucide="search" class="w-5 h-5 text-default-600"></i>
                     </span>
@@ -32,25 +35,39 @@
             <!-- Language -->
             <div class="lg:flex hidden">
                 <div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
-                    <button id="hs-dropdown-with-header" type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
+                    <button id="hs-dropdown-with-header" type="button"
+                            class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
                         <i data-lucide="globe" class="w-6 h-6"></i>
                     </button>
 
-                    <div class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[12rem] shadow-md rounded-lg border border-default-200 bg-white dark:bg-default-50 p-2">
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100" href="javascript:void(0)">
-                            <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENEQyQjUxRTYxM0IxMUU3QThGRDlFNzgyMDM4RjBCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENEQyQjUxRjYxM0IxMUU3QThGRDlFNzgyMDM4RjBCQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ0RDJCNTFDNjEzQjExRTdBOEZEOUU3ODIwMzhGMEJDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ0RDJCNTFENjEzQjExRTdBOEZEOUU3ODIwMzhGMEJDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHkAAQEBAAMAAAAAAAAAAAAAAAABBgIFBwEBAAIDAQAAAAAAAAAAAAAAAAEFAgQGBxAAAQIBDQADAQAAAAAAAAAAAAECAzFRkRKi0qPjVAVVFhchQYEyEQEAAAMHBQEAAAAAAAAAAAAA4WKiUaGx0QJSFgEDBBQVMf/aAAwDAQACEQMRAD8A82fFive573uc9yqrnKqqqqvyqqqmwhKzp1JCs6dQFZ06gKzp1AVnTqArOnUCsixWPa9j3Ne1UVrkVUVFT5RUVCB2XWd701uHeNb3O1biuePebsq05nWd701uHeHudq3E495uyrTmdZ3vTW4d4e52rcTj3m7KtOZ1ne9Nbh3h7natxOPebsq05nWd701uHeHudq3E495uyrTmdZ3vTW4d4e52rcTj3m7KtOZ1ne9Nbh3h7natxOPebsq05nWd701uHeHudq3E495uyrTm3RRvTgAAAAAAADd+XpyeBmFJ9iS+Dm+QyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqDdlI5sAAAAAAAA5O/pZJfqT8M9f71/EdEoMQoAUAKAFACgCt/pJJfuT9MtH70/Dq//Z" alt="user-image" class="h-4">
+                    <div
+                        class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[12rem] shadow-md rounded-lg border border-default-200 bg-white dark:bg-default-50 p-2">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100"
+                           href="javascript:void(0)">
+                            <img
+                                src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENEQyQjUxRTYxM0IxMUU3QThGRDlFNzgyMDM4RjBCQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENEQyQjUxRjYxM0IxMUU3QThGRDlFNzgyMDM4RjBCQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ0RDJCNTFDNjEzQjExRTdBOEZEOUU3ODIwMzhGMEJDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ0RDJCNTFENjEzQjExRTdBOEZEOUU3ODIwMzhGMEJDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHkAAQEBAAMAAAAAAAAAAAAAAAABBgIFBwEBAAIDAQAAAAAAAAAAAAAAAAEFAgQGBxAAAQIBDQADAQAAAAAAAAAAAAECAzFRkRKi0qPjVAVVFhchQYEyEQEAAAMHBQEAAAAAAAAAAAAA4WKiUaGx0QJSFgEDBBQVMf/aAAwDAQACEQMRAD8A82fFive573uc9yqrnKqqqqvyqqqmwhKzp1JCs6dQFZ06gKzp1AVnTqArOnUCsixWPa9j3Ne1UVrkVUVFT5RUVCB2XWd701uHeNb3O1biuePebsq05nWd701uHeHudq3E495uyrTmdZ3vTW4d4e52rcTj3m7KtOZ1ne9Nbh3h7natxOPebsq05nWd701uHeHudq3E495uyrTmdZ3vTW4d4e52rcTj3m7KtOZ1ne9Nbh3h7natxOPebsq05nWd701uHeHudq3E495uyrTm3RRvTgAAAAAAADd+XpyeBmFJ9iS+Dm+QyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqB5enJ4GYPsSXwOQyVQPL05PAzB9iS+ByGSqDdlI5sAAAAAAAA5O/pZJfqT8M9f71/EdEoMQoAUAKAFACgCt/pJJfuT9MtH70/Dq//Z"
+                                alt="user-image" class="h-4">
                             <span class="align-middle">German</span>
                         </a>
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100" href="javascript:void(0)">
-                            <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMUM1QUQyRDYxM0MxMUU3QTE2RkM2RkVEMTY1NUZGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMUM1QUQyRTYxM0MxMUU3QTE2RkM2RkVEMTY1NUZGQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxQzVBRDJCNjEzQzExRTdBMTZGQzZGRUQxNjU1RkZCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxQzVBRDJDNjEzQzExRTdBMTZGQzZGRUQxNjU1RkZCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHsAAAMBAQEBAAAAAAAAAAAAAAAGBwQBAgMBAAIDAQEBAAAAAAAAAAAAAAAGBAUHAwECEAABAwEGBAYDAAAAAAAAAAAAAQIDBxExsTN0NiFRMrJhQpI0RBZxcgQRAQABAwUBAAMAAAAAAAAAAAABwTI0coIDBAYxEYEC/9oADAMBAAIRAxEAPwDc573OVznKrlW1VVbVVVMnmZlWuWrzAHKlKr9mk4/Fk72F/wCcyJ0zR24LldHlMABGqsqv2pOPxo8XFZ272ieYxd00Jdq8yKYvw6172uRzXK1zVtRUWxUVAeTES0CIwgADnSnc0mlk72F95zInTNHbguV0ekwAEZqzutNNHi4rO3e0TzGLumhMIpiABpERg4AHOlO5pNLJ3sL7zmROmaO3Bcro9JgAIzVndaaaPFxWdu9onmMXdNCYRTEADSIjBwAOdKdzSaWTvYX3nMidM0duC5XR6TAARmrO6000eLis7d7RPMYu6aEwimIAGkRGDgAc6U7mk0snewvvOZE6Zo7cFyuj0mAAjNWd1ppo8XFZ272ieYxd00JhFMQAN8+fJl9S5fRf5fDkI/8Af2fjB5ePSfIONKtzSXe2ku/ZhfecyJ0zR24LldHlMABGqsbqS720d/5cVnbvaH5jF3TQmekimF9P58+PL6m5nRf5vDmew+f7tn7+vr//2Q==" alt="user-image" class="h-4">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100"
+                           href="javascript:void(0)">
+                            <img
+                                src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMUM1QUQyRDYxM0MxMUU3QTE2RkM2RkVEMTY1NUZGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMUM1QUQyRTYxM0MxMUU3QTE2RkM2RkVEMTY1NUZGQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxQzVBRDJCNjEzQzExRTdBMTZGQzZGRUQxNjU1RkZCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxQzVBRDJDNjEzQzExRTdBMTZGQzZGRUQxNjU1RkZCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHsAAAMBAQEBAAAAAAAAAAAAAAAGBwQBAgMBAAIDAQEBAAAAAAAAAAAAAAAGBAUHAwECEAABAwEGBAYDAAAAAAAAAAAAAQIDBxExsTN0NiFRMrJhQpI0RBZxcgQRAQABAwUBAAMAAAAAAAAAAAABwTI0coIDBAYxEYEC/9oADAMBAAIRAxEAPwDc573OVznKrlW1VVbVVVMnmZlWuWrzAHKlKr9mk4/Fk72F/wCcyJ0zR24LldHlMABGqsqv2pOPxo8XFZ272ieYxd00Jdq8yKYvw6172uRzXK1zVtRUWxUVAeTES0CIwgADnSnc0mlk72F95zInTNHbguV0ekwAEZqzutNNHi4rO3e0TzGLumhMIpiABpERg4AHOlO5pNLJ3sL7zmROmaO3Bcro9JgAIzVndaaaPFxWdu9onmMXdNCYRTEADSIjBwAOdKdzSaWTvYX3nMidM0duC5XR6TAARmrO6000eLis7d7RPMYu6aEwimIAGkRGDgAc6U7mk0snewvvOZE6Zo7cFyuj0mAAjNWd1ppo8XFZ272ieYxd00JhFMQAN8+fJl9S5fRf5fDkI/8Af2fjB5ePSfIONKtzSXe2ku/ZhfecyJ0zR24LldHlMABGqsbqS720d/5cVnbvaH5jF3TQmekimF9P58+PL6m5nRf5vDmew+f7tn7+vr//2Q=="
+                                alt="user-image" class="h-4">
                             <span class="align-middle">Italian</span>
                         </a>
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100" href="javascript:void(0)">
-                            <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODQ3Mjc2MTYxM0MxMUU3ODJENDgwMDE3MDIxNjRGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODQ3Mjc2MjYxM0MxMUU3ODJENDgwMDE3MDIxNjRGOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4NDcyNzVGNjEzQzExRTc4MkQ0ODAwMTcwMjE2NEY4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4NDcyNzYwNjEzQzExRTc4MkQ0ODAwMTcwMjE2NEY4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAI4AAQACAgMAAAAAAAAAAAAAAAAEBQEDAgYHAQEAAgMBAQAAAAAAAAAAAAAAAgYDBAUBBxAAAQMBBgMFCAMAAAAAAAAAAQIDBAAREpMFVQZR0RYyktIzFTFBIkJiExQ0YXGREQACAQEGBQMDBQAAAAAAAAAAAQIDETGRUhMUIUFREgRxoSJhgTLwscHRBf/aAAwDAQACEQMRAD8ApFOOLUVKUVKUbVKJJJJ95rln0xIxeVxNALyuJoBeVxNALyuJoBeVxNALyuJoDKXHEKCkqKVJNqVAkEEe8UDR7x6BkWnRcFvw1R9zVzSxZXdafV4nFeS7babW7Ihw2GGkqW46tlsJSlItJPw1m8edarNRU2rfqzx1qnJybKyBL2JNnrhNxGmXb9xhciGGkOKtu3bxT8JvggBVnD2105+FUsfbVeN/D1/SJz14xUndzslbYWvoGRadFwW/DXG3NXNLFkdafV4j0DItOi4LfhpuauaWLGtPq8R6BkWnRcFvw03NXNLFjWn1eI9AyLTouC34abmrmlixrT6vEegZFp0XBb8NNzVzSxY1p9XiT6wGM6vuF8QkFMWJLiflvoVmMlX47iS2oFF5KG1POAKCRZeb/wAqwLxYqEJW2vstSfX6Xe7Njxvm+Li+26/+bFgzOxsz2q4p9qQuL+XFlqBelXY6xHKQEFJIZBVeCrRZaKsFD/LhoRlWj+azP+zR8rynOpKFNy+KuSt+XuXMERVyHpbUKQw7IN2Q+6uOptZaN1ASGnHFAhJ+YCqr53jqnRptO3jL0v5cLfW37Gbul+LaaXrbx9V+xOrkgUAoBQCgKSREczGG9CGVpyq8QtUkfaV91YcCiVhtRUSeJrt1/JppU7JqXarOCljxSRHx6s1NuSl92vYhP7FQiOlMaW0VvtluaS0oG0qcsWiwi8brtnxe8A/xWat51Hsj8pSceXLl1uuNil5Vkm3CzD3LmKsmXc9ITF+2lSDmFrRW6kKF0KuEr/q2tTy6sJUIRU4uUeSUrePHmrOF15pwlPudttnqrPtx5k+uSZhQCgFAeFdUbj1OVjL51dtnRyRwLDoU8qHVG49TlYy+dNnRyRwGhTyodUbj1OVjL502dHJHAaFPKh1RuPU5WMvnTZ0ckcBoU8qHVG49TlYy+dNnRyRwGhTyodUbj1OVjL502dHJHAaFPKh1RuPU5WMvnTZ0ckcBoU8qHVG49TlYy+dNnRyRwGhTyohyf2XfK7avK7Ht+T6eFbTJRuV5r7teEh3aAd2gHdoB3aAd2gNkb9lryu2nzex7fn+njXqIyud5/9k=" alt="user-image" class="h-4">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100"
+                           href="javascript:void(0)">
+                            <img
+                                src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyODQ3Mjc2MTYxM0MxMUU3ODJENDgwMDE3MDIxNjRGOCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyODQ3Mjc2MjYxM0MxMUU3ODJENDgwMDE3MDIxNjRGOCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI4NDcyNzVGNjEzQzExRTc4MkQ0ODAwMTcwMjE2NEY4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI4NDcyNzYwNjEzQzExRTc4MkQ0ODAwMTcwMjE2NEY4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAI4AAQACAgMAAAAAAAAAAAAAAAAEBQEDAgYHAQEAAgMBAQAAAAAAAAAAAAAAAgYDBAUBBxAAAQMBBgMFCAMAAAAAAAAAAQIDBAAREpMFVQZR0RYyktIzFTFBIkJiExQ0YXGREQACAQEGBQMDBQAAAAAAAAAAAQIDETGRUhMUIUFREgRxoSJhgTLwscHRBf/aAAwDAQACEQMRAD8ApFOOLUVKUVKUbVKJJJJ95rln0xIxeVxNALyuJoBeVxNALyuJoBeVxNALyuJoDKXHEKCkqKVJNqVAkEEe8UDR7x6BkWnRcFvw1R9zVzSxZXdafV4nFeS7babW7Ihw2GGkqW46tlsJSlItJPw1m8edarNRU2rfqzx1qnJybKyBL2JNnrhNxGmXb9xhciGGkOKtu3bxT8JvggBVnD2105+FUsfbVeN/D1/SJz14xUndzslbYWvoGRadFwW/DXG3NXNLFkdafV4j0DItOi4LfhpuauaWLGtPq8R6BkWnRcFvw03NXNLFjWn1eI9AyLTouC34abmrmlixrT6vEegZFp0XBb8NNzVzSxY1p9XiT6wGM6vuF8QkFMWJLiflvoVmMlX47iS2oFF5KG1POAKCRZeb/wAqwLxYqEJW2vstSfX6Xe7Njxvm+Li+26/+bFgzOxsz2q4p9qQuL+XFlqBelXY6xHKQEFJIZBVeCrRZaKsFD/LhoRlWj+azP+zR8rynOpKFNy+KuSt+XuXMERVyHpbUKQw7IN2Q+6uOptZaN1ASGnHFAhJ+YCqr53jqnRptO3jL0v5cLfW37Gbul+LaaXrbx9V+xOrkgUAoBQCgKSREczGG9CGVpyq8QtUkfaV91YcCiVhtRUSeJrt1/JppU7JqXarOCljxSRHx6s1NuSl92vYhP7FQiOlMaW0VvtluaS0oG0qcsWiwi8brtnxe8A/xWat51Hsj8pSceXLl1uuNil5Vkm3CzD3LmKsmXc9ITF+2lSDmFrRW6kKF0KuEr/q2tTy6sJUIRU4uUeSUrePHmrOF15pwlPudttnqrPtx5k+uSZhQCgFAeFdUbj1OVjL51dtnRyRwLDoU8qHVG49TlYy+dNnRyRwGhTyodUbj1OVjL502dHJHAaFPKh1RuPU5WMvnTZ0ckcBoU8qHVG49TlYy+dNnRyRwGhTyodUbj1OVjL502dHJHAaFPKh1RuPU5WMvnTZ0ckcBoU8qHVG49TlYy+dNnRyRwGhTyohyf2XfK7avK7Ht+T6eFbTJRuV5r7teEh3aAd2gHdoB3aAd2gNkb9lryu2nzex7fn+njXqIyud5/9k="
+                                alt="user-image" class="h-4">
                             <span class="align-middle">Spanish</span>
                         </a>
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100" href="javascript:void(0)">
-                            <img src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjI1RDJEQjYxM0MxMUU3ODE3M0YwMkM1MjgyRTVFMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjI1RDJEQzYxM0MxMUU3ODE3M0YwMkM1MjgyRTVFMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyMjVEMkQ5NjEzQzExRTc4MTczRjAyQzUyODJFNUUyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyMjVEMkRBNjEzQzExRTc4MTczRjAyQzUyODJFNUUyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHUAAQEBAQAAAAAAAAAAAAAAAAADBggBAQADAQEAAAAAAAAAAAAAAAABAgYEAxAAAQAHBwUBAAAAAAAAAAAAAAHio9MEVKQykjNVFgcXMVFhAkIDEQEAAAQHAQADAAAAAAAAAAAAAaLiY6HRUgMTFRYxgQIy/9oADAMBAAIRAxEAPwDpwAAAAAAAABiOats85pop0dnX72nGGanJA5q2zzmminQ6/e04wzOSBzVtnnNNFOh1+9pxhmckDmrbPOaaKdDr97TjDM5IHNW2ec00U6HX72nGGZyQOats85pop0Ov3tOMMzkgc1bZ5zTRTodfvacYZnJA5q2zzmminQ6/e04wzOSDlg0rnAAAAAAAANHpFE0zWMx6O3NS3HjLslRpFE0zWHo7c1J4y7JUaRRNM1h6O3NSeMuyVGkUTTNYejtzUnjLslRpFE0zWHo7c1J4y7JUaRRNM1h6O3NSeMuyVGkUTTNYejtzUnjLslRpFE0zWHo7c1J4y7JU0RmG5AAAAAAAALRGP+mHa9sOx1+fHYmLz/T+Yffz9TukLF0BdAXQF0BdApD4/wCeHa9cSx1+vHcmCv7/AMx+/j6//9k=" alt="user-image" class="h-4">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 text-sm rounded transition-all hover:bg-default-100"
+                           href="javascript:void(0)">
+                            <img
+                                src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMpaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjI1RDJEQjYxM0MxMUU3ODE3M0YwMkM1MjgyRTVFMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjI1RDJEQzYxM0MxMUU3ODE3M0YwMkM1MjgyRTVFMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyMjVEMkQ5NjEzQzExRTc4MTczRjAyQzUyODJFNUUyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyMjVEMkRBNjEzQzExRTc4MTczRjAyQzUyODJFNUUyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8AAEQgAKgBAAwERAAIRAQMRAf/EAHUAAQEBAQAAAAAAAAAAAAAAAAADBggBAQADAQEAAAAAAAAAAAAAAAABAgYEAxAAAQAHBwUBAAAAAAAAAAAAAAHio9MEVKQykjNVFgcXMVFhAkIDEQEAAAQHAQADAAAAAAAAAAAAAaLiY6HRUgMTFRYxgQIy/9oADAMBAAIRAxEAPwDpwAAAAAAAABiOats85pop0dnX72nGGanJA5q2zzmminQ6/e04wzOSBzVtnnNNFOh1+9pxhmckDmrbPOaaKdDr97TjDM5IHNW2ec00U6HX72nGGZyQOats85pop0Ov3tOMMzkgc1bZ5zTRTodfvacYZnJA5q2zzmminQ6/e04wzOSDlg0rnAAAAAAAANHpFE0zWMx6O3NS3HjLslRpFE0zWHo7c1J4y7JUaRRNM1h6O3NSeMuyVGkUTTNYejtzUnjLslRpFE0zWHo7c1J4y7JUaRRNM1h6O3NSeMuyVGkUTTNYejtzUnjLslRpFE0zWHo7c1J4y7JU0RmG5AAAAAAAALRGP+mHa9sOx1+fHYmLz/T+Yffz9TukLF0BdAXQF0BdApD4/wCeHa9cSx1+vHcmCv7/AMx+/j6//9k="
+                                alt="user-image" class="h-4">
                             <span class="align-middle">Russian</span>
                         </a>
                     </div>
@@ -59,14 +76,16 @@
 
             <!-- Fullscreen Button -->
             <div class="lg:flex hidden">
-                <button data-toggle="fullscreen" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
+                <button data-toggle="fullscreen"
+                        class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
                     <i data-lucide="maximize" class="w-6 h-6"></i>
                 </button>
             </div>
 
             <!-- Setting Button -->
             <div class="md:flex hidden">
-                <a href="admin-settings.html" class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
+                <a href="{{ route("admin.setting") }}"
+                   class="inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
                     <i data-lucide="settings" class="w-6 h-6"></i>
                 </a>
             </div>
@@ -74,13 +93,16 @@
             <!-- Notification Dropdown -->
             <div class="md:flex hidden">
                 <div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
-                    <button id="hs-dropdown-with-header" type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
+                    <button id="hs-dropdown-with-header" type="button"
+                            class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-10 w-10 rounded-full font-medium text-default-700 align-middle bg-default-100 hover:text-primary transition-all text-xs">
                         <i data-lucide="bell" class="w-6 h-6"></i>
                         <span class="absolute top-0 end-1 h-4 w-4 bg-yellow-500 rounded-full animate-ping"></span>
-                        <span class="absolute top-0 end-1 h-4 w-4 bg-yellow-500 text-xs font-medium text-white rounded-full">2</span>
+                        <span
+                            class="absolute top-0 end-1 h-4 w-4 bg-yellow-500 text-xs font-medium text-white rounded-full">2</span>
                     </button>
 
-                    <div class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[20rem] shadow-md rounded-lg border border-default-200 bg-white dark:bg-default-50">
+                    <div
+                        class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[20rem] shadow-md rounded-lg border border-default-200 bg-white dark:bg-default-50">
                         <div class="px-4 py-2 flex items-center justify-between">
                             <h6 class="text-sm font-medium"> Notification</h6>
                             <a href="javascript: void(0);" class="text-default-500">
@@ -146,12 +168,14 @@
                                 </div>
                                 <div class="flex-grow truncate ms-2">
                                     <h5 class="text-sm font-semibold mb-1">Karen Robinson</h5>
-                                    <small class="text-default-400">Wow ! this admin looks good and awesome design</small>
+                                    <small class="text-default-400">Wow ! this admin looks good and awesome
+                                        design</small>
                                 </div>
                             </a>
                         </div>
 
-                        <a href="javascript:void(0);" class="px-4 py-2 block text-center text-primary font-medium text-sm">
+                        <a href="javascript:void(0);"
+                           class="px-4 py-2 block text-center text-primary font-medium text-sm">
                             View All
                         </a>
                     </div>
@@ -161,7 +185,8 @@
             <!-- Profile Dropdown -->
             <div class="flex">
                 <div class="hs-dropdown relative inline-flex ">
-                    <button id="hs-dropdown-with-header" type="button" class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-full font-medium text-default-700 align-middle transition-all text-xs">
+                    <button id="hs-dropdown-with-header" type="button"
+                            class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-full font-medium text-default-700 align-middle transition-all text-xs">
                         <img class="inline-block h-10 w-10 rounded-full" src="assets/avatar1-25906796.png">
                         <div class="lg:block text-start hidden">
                             <p class="text-sm font-medium text-default-700">Kaiya Botosh</p>
@@ -169,23 +194,28 @@
                         </div>
                     </button>
 
-                    <div class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[12rem] shadow-md rounded-lg p-2 border border-default-200 bg-white dark:bg-default-50">
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100" href="admin-settings.html">
+                    <div
+                        class="hs-dropdown-menu mt-2 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-[12rem] shadow-md rounded-lg p-2 border border-default-200 bg-white dark:bg-default-50">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100"
+                           href="{{ route("admin.setting") }}">
                             <i class="w-4 h-4" data-lucide="user"></i>
                             My Profile
                         </a>
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100" href="home.html" target="_blank">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100"
+                           href="home.html" target="_blank">
                             <i class="w-4 h-4" data-lucide="newspaper"></i>
                             Landing
                         </a>
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100" href="admin-settings.html">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-default-800 transition-all hover:bg-default-100"
+                           href="{{ route("admin.setting") }}">
                             <i class="w-4 h-4" data-lucide="settings"></i>
                             Setting
                         </a>
 
                         <hr class="my-2 border-default-200 -mx-2">
 
-                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-red-400 hover:bg-red-400/10" href="javascript:void(0)">
+                        <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-red-400 hover:bg-red-400/10"
+                           href="javascript:void(0)">
                             <i class="w-4 h-4" data-lucide="log-out"></i>
                             Log out
                         </a>
diff --git a/resources/views/components/admin/layouts/partials/sidebar.blade.php b/resources/views/components/admin/layouts/partials/sidebar.blade.php
index cbccfc8..68860ad 100644
--- a/resources/views/components/admin/layouts/partials/sidebar.blade.php
+++ b/resources/views/components/admin/layouts/partials/sidebar.blade.php
@@ -2,8 +2,8 @@
 <div id="application-sidebar" class="hs-overlay hs-overlay-open:translate-x-0 -translate-x-full transition-all duration-300 transform hidden fixed inset-y-0 start-0 z-60 w-64 bg-white border-e border-default-200 overflow-y-auto lg:block lg:translate-x-0 lg:right-auto lg:bottom-0 dark:bg-default-50">
     <div class="flex sticky top-0 items-center justify-center px-6 h-18 border-b border-dashed border-default-200">
         <a href="{{ route("admin.index") }}">
-            <img src="{{ asset("images/logo-dark.png") }}" alt="logo" class="h-10 flex dark:hidden">
-            <img src="{{ asset("images/logo-light.png") }}" alt="logo" class="h-10 hidden dark:flex">
+            <img src="{{ getImageFromStorage(option("logo_dark"), "images/logo-dark.png") }}" alt="logo" class="h-10 flex dark:hidden">
+            <img src="{{ getImageFromStorage(option("logo_light"), "images/logo-light.png") }}" alt="logo" class="h-10 hidden dark:flex">
         </a>
     </div>
 
diff --git a/resources/views/components/forms/buttons/index.blade.php b/resources/views/components/forms/buttons/index.blade.php
new file mode 100644
index 0000000..886b811
--- /dev/null
+++ b/resources/views/components/forms/buttons/index.blade.php
@@ -0,0 +1,8 @@
+@props([
+    "type" => "button",
+])
+
+<button type="submit"
+        {{ $attributes->merge(["class" => "w-full items-center justify-center rounded-full text-base bg-primary text-white capitalize transition-all hover:bg-primary-500"]) }}>
+    {{ $slot }}
+</button>
diff --git a/resources/views/components/forms/inputs/file.blade.php b/resources/views/components/forms/inputs/file.blade.php
new file mode 100644
index 0000000..3f9f89f
--- /dev/null
+++ b/resources/views/components/forms/inputs/file.blade.php
@@ -0,0 +1,54 @@
+@props([
+    "title",
+    "maxSize" => 1,
+    'type' => 'image',
+    "src" => "",
+])
+@php
+    if($src !== "")
+        $src = Storage::url($src);
+@endphp
+<label class="block">
+    <span class="sr-only">{{ $title }}</span>
+    <label class="block text-sm font-semibold text-default-900 mb-2">{{ $title }}</label>
+    <input type="file" data-file-max-input="{{ $maxSize }}"
+           {{ $attributes->merge(["class" => "input-file block w-full text-sm text-gray-500'
+                  file:me-4 file:py-2 file:px-4
+                  file:rounded-lg file:border-0
+                  file:text-sm file:font-semibold
+                  file:bg-blue-600 file:text-white
+                  hover:file:bg-blue-700
+                  file:disabled:opacity-50 file:disabled:pointer-events-none
+                  dark:file:bg-blue-500
+                  dark:hover:file:bg-blue-400"]) }}>
+    <image @class(["mt-2 rounded-lg h-[200px] w-auto preview", "hidden" => $src == ""]) src="{{ $src }}"/>
+</label>
+
+@push("js")
+    <script>
+        document.querySelectorAll(".input-file").forEach(function (input) {
+            input.addEventListener("change", function (e) {
+                const file = e.target.files[0];
+                const maxSize = e.target.dataset.fileMaxInput;
+
+                if (file.size > maxSize * 1024 * 1024) {
+                    Toastify({
+                        text: "File size must be less than " + maxSize + "MB",
+                        duration: 3000,
+                        close: true,
+                        stopOnFocus: true,
+                        style: {
+                            background: "#FF0000",
+                        },
+                        }).showToast();
+                    e.target.value = "";
+                } else {
+                    const img = e.target.nextElementSibling;
+                    if (img.classList.contains("hidden"))
+                        img.classList.remove("hidden");
+                    img.src = URL.createObjectURL(file);
+                }
+            });
+        });
+    </script>
+@endpush
diff --git a/resources/views/components/forms/inputs/index.blade.php b/resources/views/components/forms/inputs/index.blade.php
index f7094b4..8485359 100644
--- a/resources/views/components/forms/inputs/index.blade.php
+++ b/resources/views/components/forms/inputs/index.blade.php
@@ -1,8 +1,8 @@
 @props([
-    "title",
+    "title" => "",
     "id" => "",
 ])
-@if($title)
+@if ($title !== "")
     <label class="block text-sm font-semibold text-default-900 mb-2" for="{{ $id }}">{{ $title }}</label>
 @endif
 <input id="{{ $id }}" {{ $attributes->merge(["class" => "block w-full rounded-full py-2.5 px-4 bg-white border border-default-200 focus:ring-transparent focus:border-default-200 dark:bg-default-50"]) }}>
diff --git a/resources/views/components/partials/toast.blade.php b/resources/views/components/partials/toast.blade.php
index d37958f..c975c55 100644
--- a/resources/views/components/partials/toast.blade.php
+++ b/resources/views/components/partials/toast.blade.php
@@ -1,7 +1,7 @@
 @props(['type' => 'primary', 'message' => ''])
 
 <!-- get color -->
-<span class="bg-error-500 bg-success-500 bg-alert-500" />
+<span class="hidden bg-error-500 bg-success-500 bg-alert-500"></span>
 
 <!-- Toast -->
 <div class="toast hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 max-w-xs bg-{{ $type }}-500 text-sm text-white rounded-xl shadow-lg" role="alert">
diff --git a/resources/views/components/user/layouts/partials/header.blade.php b/resources/views/components/user/layouts/partials/header.blade.php
index e6f27ac..e7cae0e 100644
--- a/resources/views/components/user/layouts/partials/header.blade.php
+++ b/resources/views/components/user/layouts/partials/header.blade.php
@@ -6,8 +6,8 @@
                 <div class="flex">
                     <!-- Navbar Brand Logo -->
                     <a href="{{ route("index") }}" class="pl-4">
-                        <img src="{{ asset("images/logo-dark.png") }}" alt="logo" class="h-10 flex dark:hidden">
-                        <img src="{{ asset("images/logo-light.png") }}" alt="logo" class="h-10 hidden dark:flex">
+                        <img src="{{ getImageFromStorage(option("logo_dark"), "images/logo-dark.png") }}" alt="logo" class="h-10 flex dark:hidden">
+                        <img src="{{ getImageFromStorage(option("logo_light"), "images/logo-light.png") }}" alt="logo" class="h-10 hidden dark:flex">
                     </a>
                 </div>
 
diff --git a/routes/admin.php b/routes/admin.php
index f6f1c84..2c5efd1 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -2,6 +2,8 @@
 
 use App\Http\Controllers\Admin\AuthController;
 use App\Http\Controllers\Admin\HomepageController;
+use App\Http\Controllers\Admin\SettingController;
+use App\Http\Middleware\CheckAdminMiddleware;
 use App\Http\Middleware\CheckLogoutMiddleware;
 use App\Http\Middleware\CheckStaffMiddleware;
 
@@ -13,3 +15,8 @@
 Route::group(["middleware" => CheckStaffMiddleware::class], function (){
     Route::get('/', [HomepageController::class, "__invoke"])->name("index");
 });
+
+Route::group(["middleware" => CheckAdminMiddleware::class], function (){
+    Route::get('/setting', [SettingController::class, "index"])->name("setting");
+    Route::post('/setting', [SettingController::class, "save"])->name("setting.save");
+});
diff --git a/routes/breadcrumbs.php b/routes/breadcrumbs.php
index fd53f86..8906711 100644
--- a/routes/breadcrumbs.php
+++ b/routes/breadcrumbs.php
@@ -24,3 +24,8 @@
     $trail->parent('admin');
     $trail->push('Home', route('admin.index'), ['icon' => 'home']);
 });
+
+Breadcrumbs::for('admin.setting', function (BreadcrumbTrail $trail) {
+    $trail->parent('admin');
+    $trail->push('Setting', route('admin.setting'), ['icon' => 'settings']);
+});
diff --git a/vite.config.js b/vite.config.js
index dd72c46..144ae2b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,6 +8,8 @@ export default defineConfig({
                 'resources/js/app.ts',
                 "resources/js/user.ts",
                 "resources/js/admin.ts",
+                "resources/js/guest.ts",
+                "resources/js/setting.js",
                 "resources/js/preLoader.ts",
                 "resources/js/theme.ts",
             ],