diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..c3de5b0
Binary files /dev/null and b/.DS_Store differ
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 0000000..e395389
Binary files /dev/null and b/app/.DS_Store differ
diff --git a/app/Actions/SamplePermissionApi.php b/app/Actions/SamplePermissionApi.php
new file mode 100644
index 0000000..d11685d
--- /dev/null
+++ b/app/Actions/SamplePermissionApi.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace App\Actions;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+use Spatie\Permission\Models\Permission;
+
+class SamplePermissionApi
+{
+    public function datatableList(Request $request)
+    {
+        $draw = $request->input('draw', 0);
+        $start = $request->input('start', 0);
+        $length = $request->input('length', 10);
+        $columns = $request->input('columns');
+        $searchValue = $request->input('search.value');
+
+        $orderColumn = $request->input('order.0.column', 0); // Get the order column index
+        $orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
+
+        $query = Permission::query()->with('roles');
+
+        if ($searchValue) {
+            $searchColumns = ['name'];
+            $query->where(function ($query) use ($searchValue, $searchColumns) {
+                foreach ($searchColumns as $column) {
+                    $query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
+                }
+            });
+        }
+
+        // Get the column name for ordering based on the orderColumn index
+        $orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
+
+        // Apply ordering to the query
+        $query->orderBy($orderColumnName, $orderDir);
+
+        $totalRecords = $query->count();
+
+        $records = $query->offset($start)->limit($length)->get();
+
+        $data = [
+            'draw' => $draw,
+            'recordsTotal' => $totalRecords,
+            'recordsFiltered' => $totalRecords,
+            'data' => $records,
+            'orderColumnName' => $orderColumnName,
+        ];
+
+        return $data;
+    }
+
+    public function create(Request $request)
+    {
+        $permission = $request->all();
+
+        $rules = [
+            'name' => 'required|string',
+        ];
+
+        $validator = Validator::make($permission, $rules);
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 400);
+        }
+
+        $updated = Permission::create($permission);
+
+        return response()->json(['success' => $updated]);
+    }
+
+    public function get($id)
+    {
+        return Permission::findOrFail($id);
+    }
+
+    public function update($id, Request $request)
+    {
+        $permission = $request->all();
+
+        $rules = [
+            'name' => 'required|string',
+        ];
+
+        $validator = Validator::make($permission, $rules);
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 400);
+        }
+
+        $updated = Permission::findOrFail($id)->update($permission);
+
+        return response()->json(['success' => $updated]);
+    }
+
+    public function delete($id)
+    {
+        return Permission::destroy($id);
+    }
+}
diff --git a/app/Actions/SampleRoleApi.php b/app/Actions/SampleRoleApi.php
new file mode 100644
index 0000000..436a0bd
--- /dev/null
+++ b/app/Actions/SampleRoleApi.php
@@ -0,0 +1,171 @@
+<?php
+
+namespace App\Actions;
+
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+use Spatie\Permission\Models\Role;
+
+class SampleRoleApi
+{
+    public $roles_description = [
+        'administrator' => 'Best for business owners and company administrators',
+        'developer' => 'Best for developers or people primarily using the API',
+        'analyst' => 'Best for people who need full access to analytics data, but don\'t need to update business settings',
+        'support' => 'Best for employees who regularly refund payments and respond to disputes',
+        'trial' => 'Best for people who need to preview content data, but don\'t need to make any updates',
+    ];
+
+    public function datatableList(Request $request)
+    {
+        $draw = $request->input('draw', 0);
+        $start = $request->input('start', 0);
+        $length = $request->input('length', 10);
+        $columns = $request->input('columns');
+        $searchValue = $request->input('search.value');
+
+        $orderColumn = $request->input('order.0.column', 0); // Get the order column index
+        $orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
+
+        $query = Role::query()->with('permissions')->with('users');
+
+        if ($searchValue) {
+            $searchColumns = ['name'];
+            $query->where(function ($query) use ($searchValue, $searchColumns) {
+                foreach ($searchColumns as $column) {
+                    $query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
+                }
+            });
+        }
+
+        // Get the column name for ordering based on the orderColumn index
+        $orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
+
+        // Apply ordering to the query
+        $query->orderBy($orderColumnName, $orderDir);
+
+        $totalRecords = $query->count();
+
+        $records = $query->offset($start)->limit($length)->get();
+
+        foreach ($records as $i => $role) {
+            $records[$i]->description = $this->roles_description[$role->name] ?? '';
+        }
+
+        $data = [
+            'draw' => $draw,
+            'recordsTotal' => $totalRecords,
+            'recordsFiltered' => $totalRecords,
+            'data' => $records,
+            'orderColumnName' => $orderColumnName,
+        ];
+
+        return $data;
+    }
+
+    public function usersDatatableList(Request $request)
+    {
+        $role_id = $request->input('id', 0);
+        $draw = $request->input('draw', 0);
+        $start = $request->input('start', 0);
+        $length = $request->input('length', 10);
+        $columns = $request->input('columns');
+        $searchValue = $request->input('search.value');
+
+        $orderColumn = $request->input('order.0.column', 0); // Get the order column index
+        $orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
+
+        $query = User::whereHas('roles', function ($query) use ($role_id) {
+            $query->where('id', $role_id);
+        })->with('roles');
+
+        if ($searchValue) {
+            $searchColumns = ['name'];
+            $query->where(function ($query) use ($searchValue, $searchColumns) {
+                foreach ($searchColumns as $column) {
+                    $query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
+                }
+            });
+        }
+
+        // Get the column name for ordering based on the orderColumn index
+        $orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
+
+        // Apply ordering to the query
+        $query->orderBy($orderColumnName, $orderDir);
+
+        $totalRecords = $query->count();
+
+        $records = $query->offset($start)->limit($length)->get();
+
+        $data = [
+            'role_id' => $role_id,
+            'draw' => $draw,
+            'recordsTotal' => $totalRecords,
+            'recordsFiltered' => $totalRecords,
+            'data' => $records,
+            'orderColumnName' => $orderColumnName,
+        ];
+
+        return $data;
+    }
+
+    public function create(Request $request)
+    {
+        $role = $request->all();
+
+        $rules = [
+            'name' => 'required|string',
+        ];
+
+        $validator = Validator::make($role, $rules);
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 400);
+        }
+
+        $updated = Role::create($role);
+
+        return response()->json(['success' => $updated]);
+    }
+
+    public function get($id, $relations = ['permissions', 'users'])
+    {
+        return Role::with($relations)->findOrFail($id);
+    }
+
+    public function update($id, Request $request)
+    {
+        $role = $request->all();
+
+        $rules = [
+            'name' => 'required|string',
+        ];
+
+        $validator = Validator::make($role, $rules);
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 400);
+        }
+
+        $updated = Role::findOrFail($id)->update($role);
+
+        return response()->json(['success' => $updated]);
+    }
+
+    public function delete($id)
+    {
+        return Role::destroy($id);
+    }
+
+    public function deleteUser($id, $user_id = null)
+    {
+        $user = User::find($user_id);
+
+        if ($user) {
+            return $user->roles()->detach($id);
+        }
+
+        return false;
+    }
+}
diff --git a/app/Actions/SampleUserApi.php b/app/Actions/SampleUserApi.php
new file mode 100644
index 0000000..2e5e7be
--- /dev/null
+++ b/app/Actions/SampleUserApi.php
@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Actions;
+
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Validator;
+
+class SampleUserApi
+{
+    public function datatableList(Request $request)
+    {
+        $draw = $request->input('draw', 0);
+        $start = $request->input('start', 0);
+        $length = $request->input('length', 10);
+        $columns = $request->input('columns');
+        $searchValue = $request->input('search.value');
+
+        $orderColumn = $request->input('order.0.column', 0); // Get the order column index
+        $orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
+
+        $query = User::query()->with('roles');
+
+        if ($searchValue) {
+            $searchColumns = ['name', 'email'];
+            $query->where(function ($query) use ($searchValue, $searchColumns) {
+                foreach ($searchColumns as $column) {
+                    $query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
+                }
+            });
+        }
+
+        // Get the column name for ordering based on the orderColumn index
+        $orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
+
+        // exclude core user for demo purpose
+        $query->whereNotIn('id', [1]);
+
+        // Apply ordering to the query
+        $query->orderBy($orderColumnName, $orderDir);
+
+        $totalRecords = $query->count();
+
+        $records = $query->offset($start)->limit($length)->get();
+
+        $data = [
+            'draw' => $draw,
+            'recordsTotal' => $totalRecords,
+            'recordsFiltered' => $totalRecords,
+            'data' => $records,
+            'orderColumnName' => $orderColumnName,
+        ];
+
+        return $data;
+    }
+
+    public function create(Request $request)
+    {
+        $user = $request->all();
+
+        $rules = [
+            'name' => 'required|string',
+            'email' => 'required|email|unique:users,email',
+        ];
+
+        $validator = Validator::make($user, $rules);
+        if ($validator->fails()) {
+            return response()->json(['errors' => $validator->errors()], 400);
+        }
+
+        $updated = User::create($user);
+
+        return response()->json(['success' => $updated]);
+    }
+
+    public function get($id)
+    {
+        return User::findOrFail($id);
+    }
+
+    public function update($id, Request $request)
+    {
+        $data = $request->validate([
+            'name' => 'required|string',
+            'email' => 'required|email|unique:users,email,' . $id,
+            'role' => 'required|string',
+        ]);
+
+        $user = User::findOrFail($id);
+        $user->update($data);
+
+        $user->assignRole($request->role);
+
+        return response()->json(['success' => true]);
+    }
+
+    public function delete($id)
+    {
+        return User::destroy($id);
+    }
+}
diff --git a/app/DataTables/PermissionsDataTable.php b/app/DataTables/PermissionsDataTable.php
index 24ac9cc..4c35e0d 100644
--- a/app/DataTables/PermissionsDataTable.php
+++ b/app/DataTables/PermissionsDataTable.php
@@ -24,13 +24,13 @@ class PermissionsDataTable extends DataTable
             })
             ->addColumn('assigned_to', function (Permission $permission) {
                 $roles = $permission->roles;
-                return view('pages.apps.user-management.permissions.columns._assign-to', compact('roles'));
+                return view('pages/apps.user-management.permissions.columns._assign-to', compact('roles'));
             })
             ->editColumn('created_at', function (Permission $permission) {
                 return $permission->created_at->format('d M Y, h:i a');
             })
             ->addColumn('actions', function (Permission $permission) {
-                return view('pages.apps.user-management.permissions.columns._actions', compact('permission'));
+                return view('pages/apps.user-management.permissions.columns._actions', compact('permission'));
             })
             ->setRowId('id');
     }
@@ -56,7 +56,7 @@ class PermissionsDataTable extends DataTable
             ->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
             ->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
             ->orderBy(0)
-            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/permissions/columns/_draw-scripts.js')) . "}");
+            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/permissions/columns/_draw-scripts.js')) . "}");
     }
 
     /**
diff --git a/app/DataTables/UsersAssignedRoleDataTable.php b/app/DataTables/UsersAssignedRoleDataTable.php
index fc1d859..39b2e7b 100644
--- a/app/DataTables/UsersAssignedRoleDataTable.php
+++ b/app/DataTables/UsersAssignedRoleDataTable.php
@@ -23,13 +23,13 @@ class UsersAssignedRoleDataTable extends DataTable
         return (new EloquentDataTable($query))
             ->rawColumns(['user'])
             ->editColumn('user', function (User $user) {
-                return view('pages.apps.user-management.roles.columns._user', compact('user'));
+                return view('pages/apps.user-management.roles.columns._user', compact('user'));
             })
             ->editColumn('created_at', function (User $user) {
                 return $user->created_at->format('d M Y, h:i a');
             })
             ->addColumn('action', function (User $user) {
-                return view('pages.apps.user-management.roles.columns._actions', compact('user'));
+                return view('pages/apps.user-management.roles.columns._actions', compact('user'));
             })
             ->setRowId('id');
     }
@@ -57,7 +57,7 @@ class UsersAssignedRoleDataTable extends DataTable
             ->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
             ->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
             ->orderBy(1)
-            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/users/columns/_draw-scripts.js')) . "}");
+            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/users/columns/_draw-scripts.js')) . "}");
     }
 
     /**
diff --git a/app/DataTables/UsersDataTable.php b/app/DataTables/UsersDataTable.php
index 0f10ede..885668f 100644
--- a/app/DataTables/UsersDataTable.php
+++ b/app/DataTables/UsersDataTable.php
@@ -21,7 +21,7 @@ class UsersDataTable extends DataTable
         return (new EloquentDataTable($query))
             ->rawColumns(['user', 'last_login_at'])
             ->editColumn('user', function (User $user) {
-                return view('pages.apps.user-management.users.columns._user', compact('user'));
+                return view('pages/apps.user-management.users.columns._user', compact('user'));
             })
             ->editColumn('role', function (User $user) {
                 return ucwords($user->roles->first()?->name);
@@ -33,7 +33,7 @@ class UsersDataTable extends DataTable
                 return $user->created_at->format('d M Y, h:i a');
             })
             ->addColumn('action', function (User $user) {
-                return view('pages.apps.user-management.users.columns._actions', compact('user'));
+                return view('pages/apps.user-management.users.columns._actions', compact('user'));
             })
             ->setRowId('id');
     }
@@ -60,7 +60,7 @@ class UsersDataTable extends DataTable
             ->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
             ->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
             ->orderBy(2)
-            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/users/columns/_draw-scripts.js')) . "}");
+            ->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/users/columns/_draw-scripts.js')) . "}");
     }
 
     /**
diff --git a/app/Http/Controllers/Apps/PermissionManagementController.php b/app/Http/Controllers/Apps/PermissionManagementController.php
index a6eba11..959ec44 100644
--- a/app/Http/Controllers/Apps/PermissionManagementController.php
+++ b/app/Http/Controllers/Apps/PermissionManagementController.php
@@ -13,7 +13,7 @@ class PermissionManagementController extends Controller
      */
     public function index(PermissionsDataTable $dataTable)
     {
-        return $dataTable->render('pages.apps.user-management.permissions.list');
+        return $dataTable->render('pages/apps.user-management.permissions.list');
     }
 
     /**
diff --git a/app/Http/Controllers/Apps/RoleManagementController.php b/app/Http/Controllers/Apps/RoleManagementController.php
index 07351d6..a6e9b79 100644
--- a/app/Http/Controllers/Apps/RoleManagementController.php
+++ b/app/Http/Controllers/Apps/RoleManagementController.php
@@ -14,7 +14,7 @@ class RoleManagementController extends Controller
      */
     public function index()
     {
-        return view('pages.apps.user-management.roles.list');
+        return view('pages/apps.user-management.roles.list');
     }
 
     /**
@@ -39,7 +39,7 @@ class RoleManagementController extends Controller
     public function show(Role $role, UsersAssignedRoleDataTable $dataTable)
     {
         return $dataTable->with('role', $role)
-            ->render('pages.apps.user-management.roles.show', compact('role'));
+            ->render('pages/apps.user-management.roles.show', compact('role'));
     }
 
     /**
diff --git a/app/Http/Controllers/Apps/UserManagementController.php b/app/Http/Controllers/Apps/UserManagementController.php
index 8c5ae18..5fcbf1b 100644
--- a/app/Http/Controllers/Apps/UserManagementController.php
+++ b/app/Http/Controllers/Apps/UserManagementController.php
@@ -14,7 +14,7 @@ class UserManagementController extends Controller
      */
     public function index(UsersDataTable $dataTable)
     {
-        return $dataTable->render('pages.apps.user-management.users.list');
+        return $dataTable->render('pages/apps.user-management.users.list');
     }
 
     /**
@@ -38,7 +38,7 @@ class UserManagementController extends Controller
      */
     public function show(User $user)
     {
-        return view('pages.apps.user-management.users.show', compact('user'));
+        return view('pages/apps.user-management.users.show', compact('user'));
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/AuthenticatedSessionController.php b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
index 2d46878..12e315f 100644
--- a/app/Http/Controllers/Auth/AuthenticatedSessionController.php
+++ b/app/Http/Controllers/Auth/AuthenticatedSessionController.php
@@ -20,7 +20,7 @@ class AuthenticatedSessionController extends Controller
     {
         addJavascriptFile('assets/js/custom/authentication/sign-in/general.js');
 
-        return view('pages.auth.login');
+        return view('pages/auth.login');
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/ConfirmablePasswordController.php b/app/Http/Controllers/Auth/ConfirmablePasswordController.php
index 525bea3..f3290d1 100644
--- a/app/Http/Controllers/Auth/ConfirmablePasswordController.php
+++ b/app/Http/Controllers/Auth/ConfirmablePasswordController.php
@@ -17,7 +17,7 @@ class ConfirmablePasswordController extends Controller
      */
     public function show()
     {
-        return view('pages.auth.confirm-password');
+        return view('pages/auth.confirm-password');
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/EmailVerificationPromptController.php b/app/Http/Controllers/Auth/EmailVerificationPromptController.php
index 1f2efa3..3d7b3fa 100644
--- a/app/Http/Controllers/Auth/EmailVerificationPromptController.php
+++ b/app/Http/Controllers/Auth/EmailVerificationPromptController.php
@@ -18,6 +18,6 @@ class EmailVerificationPromptController extends Controller
     {
         return $request->user()->hasVerifiedEmail()
                     ? redirect()->intended(RouteServiceProvider::HOME)
-                    : view('pages.auth.verify-email');
+                    : view('pages/auth.verify-email');
     }
 }
diff --git a/app/Http/Controllers/Auth/NewPasswordController.php b/app/Http/Controllers/Auth/NewPasswordController.php
index d12d28c..3bdaf62 100644
--- a/app/Http/Controllers/Auth/NewPasswordController.php
+++ b/app/Http/Controllers/Auth/NewPasswordController.php
@@ -22,7 +22,7 @@ class NewPasswordController extends Controller
     {
         addJavascriptFile('assets/js/custom/authentication/reset-password/new-password.js');
 
-        return view('pages.auth.reset-password', ['request' => $request]);
+        return view('pages/auth.reset-password', ['request' => $request]);
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/PasswordResetLinkController.php b/app/Http/Controllers/Auth/PasswordResetLinkController.php
index a4ab0ce..3832ce9 100644
--- a/app/Http/Controllers/Auth/PasswordResetLinkController.php
+++ b/app/Http/Controllers/Auth/PasswordResetLinkController.php
@@ -17,7 +17,7 @@ class PasswordResetLinkController extends Controller
     {
         addJavascriptFile('assets/js/custom/authentication/reset-password/reset-password.js');
 
-        return view('pages.auth.forgot-password');
+        return view('pages/auth.forgot-password');
     }
 
     /**
diff --git a/app/Http/Controllers/Auth/RegisteredUserController.php b/app/Http/Controllers/Auth/RegisteredUserController.php
index f4607c9..2524cc7 100644
--- a/app/Http/Controllers/Auth/RegisteredUserController.php
+++ b/app/Http/Controllers/Auth/RegisteredUserController.php
@@ -23,7 +23,7 @@ class RegisteredUserController extends Controller
     {
         addJavascriptFile('assets/js/custom/authentication/sign-up/general.js');
 
-        return view('pages.auth.register');
+        return view('pages/auth.register');
     }
 
     /**
diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index 787adfc..d8cda01 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -8,6 +8,6 @@ class DashboardController extends Controller
     {
         addVendors(['amcharts', 'amcharts-maps', 'amcharts-stock']);
 
-        return view('pages.dashboards.index');
+        return view('pages/dashboards.index');
     }
 }
diff --git a/app/Http/Livewire/User/AddUserModal.php b/app/Http/Livewire/User/AddUserModal.php
index 202da84..50e379b 100644
--- a/app/Http/Livewire/User/AddUserModal.php
+++ b/app/Http/Livewire/User/AddUserModal.php
@@ -15,6 +15,7 @@ class AddUserModal extends Component
 {
     use WithFileUploads;
 
+    public $user_id;
     public $name;
     public $email;
     public $role;
@@ -76,10 +77,16 @@ class AddUserModal extends Component
             }
 
             // Create a new user record in the database
-            $user = User::updateOrCreate([
+            $user = $this->user_id ? User::find($this->user_id) : User::updateOrCreate([
                 'email' => $this->email,
             ], $data);
 
+            if ($this->edit_mode) {
+                foreach ($data as $k => $v) {
+                    $user->$k = $v;
+                }
+            }
+
             if ($this->edit_mode) {
                 // Assign selected role for user
                 $user->syncRoles($this->role);
@@ -123,6 +130,7 @@ class AddUserModal extends Component
 
         $user = User::find($id);
 
+        $this->user_id = $user->id;
         $this->saved_avatar = $user->profile_photo_url;
         $this->name = $user->name;
         $this->email = $user->email;
diff --git a/app/Models/Address.php b/app/Models/Address.php
new file mode 100644
index 0000000..14f5391
--- /dev/null
+++ b/app/Models/Address.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Address extends Model
+{
+    use HasFactory;
+}
diff --git a/app/Models/User.php b/app/Models/User.php
index 4b0112d..5dca447 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -2,15 +2,14 @@
 
 namespace App\Models;
 
-// use Illuminate\Contracts\Auth\MustVerifyEmail;
+use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
-use Illuminate\Support\Facades\Storage;
 use Laravel\Sanctum\HasApiTokens;
 use Spatie\Permission\Traits\HasRoles;
 
-class User extends Authenticatable
+class User extends Authenticatable implements MustVerifyEmail
 {
     use HasApiTokens, HasFactory, Notifiable;
     use HasRoles;
@@ -57,4 +56,14 @@ class User extends Authenticatable
 
         return $this->profile_photo_path;
     }
+
+    public function addresses()
+    {
+        return $this->hasMany(Address::class);
+    }
+
+    public function getDefaultAddressAttribute()
+    {
+        return $this->addresses?->first();
+    }
 }
diff --git a/database/factories/AddressFactory.php b/database/factories/AddressFactory.php
new file mode 100644
index 0000000..cf06136
--- /dev/null
+++ b/database/factories/AddressFactory.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Factories;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Factories\Factory;
+
+/**
+ * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Address>
+ */
+class AddressFactory extends Factory
+{
+    /**
+     * Define the model's default state.
+     *
+     * @return array<string, mixed>
+     */
+    public function definition(): array
+    {
+        $user = User::inRandomOrder()->first(); // Retrieve a random user
+
+        return [
+            'user_id' => $user->id,
+            'address_line_1' => $this->faker->address(),
+            'address_line_2' => null,
+            'city' => $this->faker->city(),
+            'postal_code' => $this->faker->postcode(),
+            'state' => $this->faker->state(),
+            'country' => $this->faker->country(),
+            'type' => 1,
+        ];
+    }
+}
diff --git a/database/migrations/2023_10_09_041104_create_addresses_table.php b/database/migrations/2023_10_09_041104_create_addresses_table.php
new file mode 100644
index 0000000..a911631
--- /dev/null
+++ b/database/migrations/2023_10_09_041104_create_addresses_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('addresses', function (Blueprint $table) {
+            $table->id();
+            $table->unsignedBigInteger('user_id');
+            $table->string('address_line_1');
+            $table->string('address_line_2')->nullable();
+            $table->string('city');
+            $table->string('postal_code');
+            $table->string('state');
+            $table->string('country');
+            $table->unsignedTinyInteger('type');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('addresses');
+    }
+};
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index 526f992..5b762e7 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -3,6 +3,8 @@
 namespace Database\Seeders;
 
 // use Illuminate\Database\Console\Seeds\WithoutModelEvents;
+
+use App\Models\Address;
 use Illuminate\Database\Seeder;
 
 class DatabaseSeeder extends Seeder
@@ -19,7 +21,9 @@ class DatabaseSeeder extends Seeder
             RolesPermissionsSeeder::class,
         ]);
 
-        \App\Models\User::factory(10)->create();
+        \App\Models\User::factory(20)->create();
+
+        Address::factory(20)->create();
 
         // \App\Models\User::factory()->create([
         //     'name' => 'Test User',
diff --git a/resources/_keenthemes/src/.DS_Store b/resources/_keenthemes/src/.DS_Store
index a362885..419dfbb 100644
Binary files a/resources/_keenthemes/src/.DS_Store and b/resources/_keenthemes/src/.DS_Store differ
diff --git a/resources/_keenthemes/src/js/components/app.js b/resources/_keenthemes/src/js/components/app.js
index 9ce55a8..41a04fc 100644
--- a/resources/_keenthemes/src/js/components/app.js
+++ b/resources/_keenthemes/src/js/components/app.js
@@ -248,7 +248,11 @@ var KTApp = function () {
                 var parentEl = document.querySelector(element.getAttribute('data-dropdown-parent'));
 
                 if (parentEl && parentEl.hasAttribute("data-kt-menu")) {
-                    var menu = new KTMenu(parentEl);
+                    var menu = KTMenu.getInstance(parentEl);
+                    
+                    if (!menu) {
+                        menu = new KTMenu(parentEl);
+                    }
 
                     if (menu) {
                         $(element).on('select2:unselect', function (e) {
@@ -385,7 +389,8 @@ var KTApp = function () {
                 return;
             }
 
-            initTinySlider(el);
+            const obj = initTinySlider(el);
+            KTUtil.data(el).set('tns', tns);
 
             el.setAttribute("data-kt-initialized", "1");
         });
diff --git a/resources/_keenthemes/src/js/components/dialer.js b/resources/_keenthemes/src/js/components/dialer.js
index e9620b1..a311732 100644
--- a/resources/_keenthemes/src/js/components/dialer.js
+++ b/resources/_keenthemes/src/js/components/dialer.js
@@ -16,6 +16,7 @@ var KTDialer = function(element, options) {
         min: null,
         max: null,
         step: 1,
+        currency: false,
         decimals: 0,
         prefix: "",
         suffix: ""
@@ -46,6 +47,10 @@ var KTDialer = function(element, options) {
         the.inputElement = the.element.querySelector('input[type]'); 
         
         // Set Values
+        if (_getOption('currency') === 'true') {
+            the.options.currency = true;
+        }
+
         if (_getOption('decimals')) {
             the.options.decimals = parseInt(_getOption('decimals'));
         }
@@ -176,7 +181,13 @@ var KTDialer = function(element, options) {
 
     // Format
     var _format = function(val){
-        return the.options.prefix + parseFloat(val).toFixed(the.options.decimals) + the.options.suffix;              
+        val = parseFloat(val).toFixed(the.options.decimals);
+
+        if (the.options.currency) {
+            val = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        }        
+
+        return the.options.prefix + val + the.options.suffix;              
     }
 
     // Get option
diff --git a/resources/_keenthemes/src/js/components/drawer.js b/resources/_keenthemes/src/js/components/drawer.js
index 44b4654..d5d243a 100644
--- a/resources/_keenthemes/src/js/components/drawer.js
+++ b/resources/_keenthemes/src/js/components/drawer.js
@@ -42,6 +42,7 @@ var KTDrawer = function(element, options) {
         the.name = the.element.getAttribute('data-kt-drawer-name');
         the.shown = false;
         the.lastWidth;
+        the.lastHeight;
         the.toggleElement = null;
 
         // Set initialized
@@ -137,6 +138,7 @@ var KTDrawer = function(element, options) {
 
     var _update = function() {
         var width = _getWidth();
+        var height = _getHeight();
         var direction = _getOption('direction');
 
         var top = _getOption('top');
@@ -156,8 +158,15 @@ var KTDrawer = function(element, options) {
             KTUtil.addClass(the.element, the.options.baseClass);
             KTUtil.addClass(the.element, the.options.baseClass + '-' + direction);
             
-            KTUtil.css(the.element, 'width', width, true);
-            the.lastWidth = width;
+            if (width) {
+                KTUtil.css(the.element, 'width', width, true);
+                the.lastWidth = width;
+            }
+            
+            if (height) {
+                KTUtil.css(the.element, 'height', height, true);
+                the.lastHeight = height;
+            }
 
             if (top) {
                 KTUtil.css(the.element, 'top', top);
@@ -187,6 +196,7 @@ var KTDrawer = function(element, options) {
             KTUtil.removeClass(the.element, the.options.baseClass + '-' + direction);
 
             KTUtil.css(the.element, 'width', '');
+            KTUtil.css(the.element, 'height', '');
 
             if (top) {
                 KTUtil.css(the.element, 'top', '');
@@ -275,6 +285,16 @@ var KTDrawer = function(element, options) {
         return width;
     }
 
+    var _getHeight = function() {
+        var height = _getOption('height');
+
+        if ( height === 'auto') {
+            height = KTUtil.css(the.element, 'height');
+        }
+
+        return height;
+    }
+
     var _destroy = function() {
         KTUtil.data(the.element).remove('drawer');
     }
diff --git a/resources/_keenthemes/src/js/components/menu.js b/resources/_keenthemes/src/js/components/menu.js
index cbef2ed..0ae1019 100644
--- a/resources/_keenthemes/src/js/components/menu.js
+++ b/resources/_keenthemes/src/js/components/menu.js
@@ -61,6 +61,10 @@ var KTMenu = function(element, options) {
     // Event Handlers
     // Toggle handler
     var _click = function(element, e) {
+        if (element.hasAttribute('href') && element.getAttribute("href") !== "#") {
+            return;
+        }
+        
         e.preventDefault();
 
         if (the.disabled === true) {
diff --git a/resources/_keenthemes/src/js/custom/apps/calendar/calendar.js b/resources/_keenthemes/src/js/custom/apps/calendar/calendar.js
index 7faaf52..4e62f6b 100644
--- a/resources/_keenthemes/src/js/custom/apps/calendar/calendar.js
+++ b/resources/_keenthemes/src/js/custom/apps/calendar/calendar.js
@@ -101,7 +101,7 @@ var KTAppCalendar = function () {
                     start: YM + '-01',
                     end: YM + '-02',
                     description: 'Toto lorem ipsum dolor sit incid idunt ut',
-                    className: "fc-event-danger fc-event-solid-warning",
+                    className: "border-success bg-success text-inverse-success",
                     location: 'Federation Square'
                 },
                 {
@@ -110,7 +110,7 @@ var KTAppCalendar = function () {
                     start: YM + '-14T13:30:00',
                     description: 'Lorem ipsum dolor incid idunt ut labore',
                     end: YM + '-14T14:30:00',
-                    className: "fc-event-success",
+                    className: "border-warning bg-warning text-inverse-success",
                     location: 'Meeting Room 7.03'
                 },
                 {
@@ -119,9 +119,8 @@ var KTAppCalendar = function () {
                     start: YM + '-02',
                     description: 'Lorem ipsum dolor sit tempor incid',
                     end: YM + '-03',
-                    className: "fc-event-primary",
+                    className: "border-info bg-info text-info-success",
                     location: 'Seoul, Korea'
-
                 },
                 {
                     id: uid(),
diff --git a/resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js b/resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js
index 33cbe95..59a9296 100644
--- a/resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js
+++ b/resources/_keenthemes/src/js/custom/apps/ecommerce/catalog/save-product.js
@@ -297,7 +297,7 @@ var KTAppEcommerceSaveProduct = function () {
                             }
                         }
                     },
-                    'sku': {
+                    'barcode': {
                         validators: {
                             notEmpty: {
                                 message: 'Product barcode is required'
diff --git a/resources/_keenthemes/src/js/widgets/charts/widget-47.js b/resources/_keenthemes/src/js/widgets/charts/widget-47.js
new file mode 100644
index 0000000..c725001
--- /dev/null
+++ b/resources/_keenthemes/src/js/widgets/charts/widget-47.js
@@ -0,0 +1,156 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget47 = function () {
+    var chart = {
+        self: null,
+        rendered: false
+    };
+
+
+    // Private methods
+    var initChart = function(chart) {
+        var element = document.getElementById("kt_charts_widget_47");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));  
+        var baseColor = KTUtil.getCssVariableValue('--bs-white');
+        var lightColor = KTUtil.getCssVariableValue('--bs-white');
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [5, 5, 15, 15, 19, 16, 27, 24, 34, 25, 40, 30, 19, 17, 22, 10, 14, 14]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.5,
+                    opacityTo: 0,
+                    stops: [0, 80, 100]
+                }
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: false                    
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                enabled: false                
+            },
+            colors: [lightColor],
+            grid: { 
+                yaxis: {
+                    lines: {
+                        show: false
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        chart.self = new ApexCharts(element, options);
+
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.self.render();
+            chart.rendered = true;
+        }, 200);   
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart(chart);
+
+            // Update chart on theme mode change
+            KTThemeMode.on("kt.thememode.change", function() {                
+                if (chart.rendered) {
+                    chart.self.destroy();
+                }
+
+                initChart(chart);
+            });
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget47;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget47.init();
+});
\ No newline at end of file
diff --git a/resources/_keenthemes/src/js/widgets/charts/widget-48.js b/resources/_keenthemes/src/js/widgets/charts/widget-48.js
new file mode 100644
index 0000000..d509af2
--- /dev/null
+++ b/resources/_keenthemes/src/js/widgets/charts/widget-48.js
@@ -0,0 +1,156 @@
+"use strict";
+
+// Class definition
+var KTChartsWidget48 = function () {
+    var chart = {
+        self: null,
+        rendered: false
+    };
+
+
+    // Private methods
+    var initChart = function(chart) {
+        var element = document.getElementById("kt_charts_widget_48");
+
+        if (!element) {
+            return;
+        }
+
+        var height = parseInt(KTUtil.css(element, 'height'));  
+        var baseColor = KTUtil.getCssVariableValue('--bs-danger');
+        var lightColor = KTUtil.getCssVariableValue('--bs-danger');
+
+        var options = {
+            series: [{
+                name: 'Sales',
+                data: [5, 5, 15, 15, 19, 16, 27, 24, 34, 25, 40, 30, 19, 17, 22, 10, 14, 14]
+            }],
+            chart: {
+                fontFamily: 'inherit',
+                type: 'area',
+                height: height,
+                toolbar: {
+                    show: false
+                }
+            },             
+            legend: {
+                show: false
+            },
+            dataLabels: {
+                enabled: false
+            },
+            fill: {
+                type: "gradient",
+                gradient: {
+                    shadeIntensity: 1,
+                    opacityFrom: 0.5,
+                    opacityTo: 0,
+                    stops: [0, 120, 50]
+                }
+            },
+            stroke: {
+                curve: 'smooth',
+                show: true,
+                width: 2,
+                colors: [baseColor]
+            },
+            xaxis: {                 
+                axisBorder: {
+                    show: false,
+                },
+                axisTicks: {
+                    show: false
+                },
+                labels: {
+                    show: false
+                },
+                crosshairs: {
+                    position: 'front',
+                    stroke: {
+                        color: baseColor,
+                        width: 1,
+                        dashArray: 3
+                    }
+                },
+                tooltip: {
+                    enabled: false,
+                }
+            },
+            yaxis: {
+                labels: {
+                    show: false
+                }
+            },
+            states: {
+                normal: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                hover: {
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                },
+                active: {
+                    allowMultipleDataPointsSelection: false,
+                    filter: {
+                        type: 'none',
+                        value: 0
+                    }
+                }
+            },
+            tooltip: {
+                enabled: false                
+            },
+            colors: [lightColor],
+            grid: { 
+                yaxis: {
+                    lines: {
+                        show: false
+                    }
+                }
+            },
+            markers: {
+                strokeColor: baseColor,
+                strokeWidth: 2
+            }
+        }; 
+
+        chart.self = new ApexCharts(element, options);
+
+        // Set timeout to properly get the parent elements width
+        setTimeout(function() {
+            chart.self.render();
+            chart.rendered = true;
+        }, 200);   
+    }
+
+    // Public methods
+    return {
+        init: function () {
+            initChart(chart);
+
+            // Update chart on theme mode change
+            KTThemeMode.on("kt.thememode.change", function() {                
+                if (chart.rendered) {
+                    chart.self.destroy();
+                }
+
+                initChart(chart);
+            });
+        }   
+    }
+}();
+
+// Webpack support
+if (typeof module !== 'undefined') {
+    module.exports = KTChartsWidget48;
+}
+
+// On document ready
+KTUtil.onDOMContentLoaded(function() {
+    KTChartsWidget48.init();
+});
\ No newline at end of file
diff --git a/resources/_keenthemes/src/js/widgets/tables/widget-14.js b/resources/_keenthemes/src/js/widgets/tables/widget-14.js
index 7db5d83..b305337 100644
--- a/resources/_keenthemes/src/js/widgets/tables/widget-14.js
+++ b/resources/_keenthemes/src/js/widgets/tables/widget-14.js
@@ -209,7 +209,4 @@ if (typeof module !== 'undefined') {
 // On document ready
 KTUtil.onDOMContentLoaded(function() {
     KTTablesWidget14.init();
-});
-
-
- 
\ No newline at end of file
+}); 
\ No newline at end of file
diff --git a/resources/_keenthemes/src/media/svg/brand-logos/youtube-play-2.svg b/resources/_keenthemes/src/media/svg/brand-logos/youtube-play-2.svg
new file mode 100644
index 0000000..1ecf3f2
--- /dev/null
+++ b/resources/_keenthemes/src/media/svg/brand-logos/youtube-play-2.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8025 3H5.1975C4.21686 3 3.27639 3.38956 2.58297 4.08297C1.88956 4.77639 1.5 5.71686 1.5 6.6975V11.3025C1.5 12.2831 1.88956 13.2236 2.58297 13.917C3.27639 14.6104 4.21686 15 5.1975 15H12.8025C13.2881 15 13.7689 14.9044 14.2175 14.7185C14.6661 14.5327 15.0737 14.2604 15.417 13.917C15.7604 13.5737 16.0327 13.1661 16.2185 12.7175C16.4044 12.2689 16.5 11.7881 16.5 11.3025V6.6975C16.5 6.21194 16.4044 5.73113 16.2185 5.28253C16.0327 4.83393 15.7604 4.42632 15.417 4.08297C15.0737 3.73963 14.6661 3.46727 14.2175 3.28146C13.7689 3.09564 13.2881 3 12.8025 3ZM10.5525 9.6825L8.25 11.0925C8.12869 11.1662 7.98987 11.206 7.84796 11.2079C7.70605 11.2097 7.56622 11.1736 7.443 11.1032C7.31978 11.0328 7.21765 10.9307 7.14722 10.8074C7.0768 10.6842 7.04064 10.5444 7.0425 10.4025V7.5975C7.04064 7.45559 7.0768 7.31577 7.14722 7.19256C7.21765 7.06934 7.31978 6.96723 7.443 6.89681C7.56622 6.8264 7.70605 6.79026 7.84796 6.79214C7.98987 6.79402 8.12869 6.83385 8.25 6.9075L10.59 8.3175C10.7077 8.38868 10.8049 8.48919 10.8721 8.60919C10.9394 8.72919 10.9743 8.86458 10.9736 9.00213C10.9728 9.13968 10.9364 9.27467 10.8678 9.39393C10.7993 9.51318 10.701 9.61261 10.5825 9.6825H10.5525Z" fill="#F1416C"/>
+</svg>
diff --git a/resources/_keenthemes/src/plugins/keenicons/duotone/demo.html b/resources/_keenthemes/src/plugins/keenicons/duotone/demo.html
index a45579d..75f7642 100644
--- a/resources/_keenthemes/src/plugins/keenicons/duotone/demo.html
+++ b/resources/_keenthemes/src/plugins/keenicons/duotone/demo.html
@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="ki-duotone ki-abstract-1"><span class="path1"></span><span class="path2"></span></span>
@@ -8047,12 +8047,12 @@
         </label>
         <input id="testText" type="text" class="phl size1of1 mvl"
         placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="ki-duotone ki-" style="font-family: icomoon">&nbsp;
+        <div id="testDrive" class="ki-duotone ki-" style="font-family: KeenIcons">&nbsp;
         </div>
     </div>
     <!--<![endif]-->
     <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+        <p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
     </div>
 
     <script src="demo-files/demo.js"></script>
diff --git a/resources/_keenthemes/src/plugins/keenicons/duotone/style.css b/resources/_keenthemes/src/plugins/keenicons/duotone/style.css
index fc5f2f7..83ec6f2 100644
--- a/resources/_keenthemes/src/plugins/keenicons/duotone/style.css
+++ b/resources/_keenthemes/src/plugins/keenicons/duotone/style.css
@@ -19,10 +19,23 @@
   font-variant: normal;
   text-transform: none;
   line-height: 1;
-   position: relative;
   
+/* Better Font Rendering =========== */
  display: inline-flex; 
- direction: ltr;
+ direction: ltr; 
+ position: relative;
+ display: inline-flex; 
+ direction: ltr; 
+ position: relative;
+ display: inline-flex; 
+ direction: ltr; 
+ position: relative;
+ display: inline-flex; 
+ direction: ltr; 
+ position: relative;
+ display: inline-flex; 
+ direction: ltr; 
+ position: relative;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/resources/_keenthemes/src/plugins/keenicons/outline/demo.html b/resources/_keenthemes/src/plugins/keenicons/outline/demo.html
index d871ee8..502511d 100644
--- a/resources/_keenthemes/src/plugins/keenicons/outline/demo.html
+++ b/resources/_keenthemes/src/plugins/keenicons/outline/demo.html
@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="ki-outline ki-abstract-1"></span>
@@ -8047,12 +8047,12 @@
         </label>
         <input id="testText" type="text" class="phl size1of1 mvl"
         placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="ki-outline ki-" style="font-family: icomoon">&nbsp;
+        <div id="testDrive" class="ki-outline ki-" style="font-family: KeenIcons">&nbsp;
         </div>
     </div>
     <!--<![endif]-->
     <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+        <p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
     </div>
 
     <script src="demo-files/demo.js"></script>
diff --git a/resources/_keenthemes/src/plugins/keenicons/solid/demo.html b/resources/_keenthemes/src/plugins/keenicons/solid/demo.html
index 3c0d416..69e3cd6 100644
--- a/resources/_keenthemes/src/plugins/keenicons/solid/demo.html
+++ b/resources/_keenthemes/src/plugins/keenicons/solid/demo.html
@@ -9,10 +9,10 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
-        <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <h1 class="mvm mtn fgc1">Grid Size: 24</h1>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="ki-solid ki-abstract-1"></span>
@@ -8047,12 +8047,12 @@
         </label>
         <input id="testText" type="text" class="phl size1of1 mvl"
         placeholder="Type some text to test..." value=""/>
-        <div id="testDrive" class="ki-solid ki-" style="font-family: icomoon">&nbsp;
+        <div id="testDrive" class="ki-solid ki-" style="font-family: KeenIcons">&nbsp;
         </div>
     </div>
     <!--<![endif]-->
     <div class="bgc1 clearfix">
-        <p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
+        <p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
     </div>
 
     <script src="demo-files/demo.js"></script>
diff --git a/resources/_keenthemes/src/sass/.DS_Store b/resources/_keenthemes/src/sass/.DS_Store
new file mode 100644
index 0000000..ab02430
Binary files /dev/null and b/resources/_keenthemes/src/sass/.DS_Store differ
diff --git a/resources/_keenthemes/src/sass/_init.scss b/resources/_keenthemes/src/sass/_init.scss
index 04a714d..e0fa29e 100644
--- a/resources/_keenthemes/src/sass/_init.scss
+++ b/resources/_keenthemes/src/sass/_init.scss
@@ -13,6 +13,7 @@
 @import "components/variables.custom";
 @import "components/variables";
 @import "components/variables-dark";
+@import "components/variables.override";
 
 // Bootstrap initializaton
 @import "bootstrap/scss/functions";
diff --git a/resources/_keenthemes/src/sass/components/_card.scss b/resources/_keenthemes/src/sass/components/_card.scss
index 50e3155..6ab6fbb 100644
--- a/resources/_keenthemes/src/sass/components/_card.scss
+++ b/resources/_keenthemes/src/sass/components/_card.scss
@@ -4,6 +4,9 @@
 
 // Base
 .card {    
+    --#{$prefix}card-box-shadow: var(--#{$prefix}root-card-box-shadow);
+    --#{$prefix}card-border-color: var(--#{$prefix}root-card-border-color);
+
     @if ($card-border-enabled)  {
         border: $card-border-width $card-border-style var(--#{$prefix}card-border-color);
     } @else {
@@ -59,7 +62,7 @@
             .card-label {
                 font-weight: 500;
                 font-size: 1.275rem;
-                color: var(--#{$prefix}text-dark);
+                color: var(--#{$prefix}text-gray-900);
             }
 
             .card-label {
diff --git a/resources/_keenthemes/src/sass/components/_code.scss b/resources/_keenthemes/src/sass/components/_code.scss
index 3ea1fa9..a22b2e1 100644
--- a/resources/_keenthemes/src/sass/components/_code.scss
+++ b/resources/_keenthemes/src/sass/components/_code.scss
@@ -5,11 +5,20 @@
 code:not([class*="language-"]) {
     font-weight: $code-font-weight;
     color: var(--#{$prefix}code-color);
-    line-height: inherit;
-    font-size: inherit;
+    border: 1px solid var(--#{$prefix}code-border-color);
     background-color: var(--#{$prefix}code-bg);
-    padding: $code-padding;
-    margin: $code-margin;
-    box-shadow: var(--#{$prefix}code-box-shadow);
     @include border-radius($code-border-radius);
+    line-height: inherit;
+    font-size: $code-font-size;
+    padding: $code-padding;
+    margin: $code-margin;        
+    box-shadow: $code-shadow;
+
+    @each $name, $value in $theme-colors {
+        &.code-#{$name} {
+            color: var(--#{$prefix}#{$name});
+            background-color: var(--#{$prefix}#{$name}-light);
+            border: 1px solid var(--#{$prefix}#{$name});
+        }
+    }
 }
diff --git a/resources/_keenthemes/src/sass/components/_drawer.scss b/resources/_keenthemes/src/sass/components/_drawer.scss
index d88c826..97d22f3 100644
--- a/resources/_keenthemes/src/sass/components/_drawer.scss
+++ b/resources/_keenthemes/src/sass/components/_drawer.scss
@@ -23,6 +23,22 @@
 		transform: translateX(100%);
 	}
 
+	&.drawer-bottom {
+		bottom: 0;
+		top: auto;
+		left: 0;
+		right: 0;
+		transform: translateY(100%);
+	}
+
+	&.drawer-top {
+		top: 0;
+		bottom: auto;
+		left: 0;
+		right: 0;
+		transform: translateY(-100%);
+	}
+
 	&.drawer-on {
 		transform: none;
 		box-shadow: var(--#{$prefix}drawer-box-shadow);
diff --git a/resources/_keenthemes/src/sass/components/_root.scss b/resources/_keenthemes/src/sass/components/_root.scss
index 479a4dd..2557df3 100644
--- a/resources/_keenthemes/src/sass/components/_root.scss
+++ b/resources/_keenthemes/src/sass/components/_root.scss
@@ -48,6 +48,11 @@
         --#{$prefix}#{$name}-inverse: #{$value};
     }
 
+    // Contextual clarity state colors
+    @each $name, $value in $theme-clarity-colors {
+        --#{$prefix}#{$name}-clarity: #{$value};
+    }
+
     // Contextual rbg colors
     @each $name, $value in $theme-colors {
         --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
@@ -83,6 +88,9 @@
     --#{$prefix}input-solid-bg-focus: #{$input-solid-bg-focus};
     --#{$prefix}input-solid-placeholder-color: #{$input-solid-placeholder-color};
 
+    // Card
+    --#{$prefix}root-card-box-shadow: #{$card-box-shadow};
+    --#{$prefix}root-card-border-color: #{$card-border-color};
 
     // Tooltip
     --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
@@ -97,7 +105,8 @@
 
     // Code
     --#{$prefix}code-bg: #{$code-bg};
-    --#{$prefix}code-box-shadow: #{$code-box-shadow};
+    --#{$prefix}code-shadow: #{$code-shadow};
+    --#{$prefix}code-border-color: #{$code-border-color};
     --#{$prefix}code-color: #{$code-color};  
 
     // Symbol
@@ -195,6 +204,11 @@
         --#{$prefix}#{$name}-inverse: #{$value};
     }
 
+    // Contextual clarity state colors
+    @each $name, $value in $theme-clarity-colors-dark {
+        --#{$prefix}#{$name}-clarity: #{$value};
+    }
+
     // Contextual rbg colors
     @each $name, $value in $theme-colors-dark {
         --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
@@ -234,7 +248,8 @@
     --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
 
     // Card
-    --#{$prefix}card-box-shadow: #{$card-box-shadow-dark};
+    --#{$prefix}root-card-box-shadow: #{$card-box-shadow-dark};
+    --#{$prefix}root-card-border-color: #{$card-border-color-dark};
 
     // Table
     --#{$prefix}table-striped-bg: #{$table-striped-bg-dark};
@@ -246,7 +261,8 @@
 
     // Code
     --#{$prefix}code-bg: #{$code-bg-dark};
-    --#{$prefix}code-box-shadow: #{$code-box-shadow-dark};
+    --#{$prefix}code-shadow: #{$code-shadow-dark};
+    --#{$prefix}code-border-color: #{$code-border-color-dark};
     --#{$prefix}code-color: #{$code-color-dark};  
 
     // Symbol
diff --git a/resources/_keenthemes/src/sass/components/_scroll.scss b/resources/_keenthemes/src/sass/components/_scroll.scss
index c4a3de1..22ef30b 100644
--- a/resources/_keenthemes/src/sass/components/_scroll.scss
+++ b/resources/_keenthemes/src/sass/components/_scroll.scss
@@ -79,33 +79,41 @@
     @include scrollbar-color(transparent, var(--#{$prefix}scrollbar-color));
 }
 
-// Utilities  
-.scroll-ps {
-    padding-left: var(--#{$prefix}scrollbar-size) !important;
+// Utilities
+@each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+        .scroll#{$infix}-ps {
+            padding-left: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-ms {
+            margin-left: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-mb {
+            margin-bottom: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-pe {
+            padding-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-me {
+            margin-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-px {
+            padding-left: var(--#{$prefix}scrollbar-size) !important;
+            padding-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+
+        .scroll#{$infix}-mx {
+            margin-left: var(--#{$prefix}scrollbar-size) !important;
+            margin-right: var(--#{$prefix}scrollbar-size) !important;
+        }
+    }
 }
 
-.scroll-ms {
-    margin-left: var(--#{$prefix}scrollbar-size) !important;
-}
-
-.scroll-mb {
-    margin-bottom: var(--#{$prefix}scrollbar-size) !important;
-}
-
-.scroll-pe {
-    padding-right: var(--#{$prefix}scrollbar-size) !important;
-}
-
-.scroll-me {
-    margin-right: var(--#{$prefix}scrollbar-size) !important;
-}
-
-.scroll-px {
-    padding-left: var(--#{$prefix}scrollbar-size) !important;
-    padding-right: var(--#{$prefix}scrollbar-size) !important;
-}
-
-.scroll-mx {
-    margin-left: var(--#{$prefix}scrollbar-size) !important;
-    margin-right: var(--#{$prefix}scrollbar-size) !important;
-}
\ No newline at end of file
+  
diff --git a/resources/_keenthemes/src/sass/components/_tables.scss b/resources/_keenthemes/src/sass/components/_tables.scss
index 06eb3ab..0e95798 100644
--- a/resources/_keenthemes/src/sass/components/_tables.scss
+++ b/resources/_keenthemes/src/sass/components/_tables.scss
@@ -59,6 +59,22 @@
 		border-collapse: separate;
 	}
 
+	// Row Rounded
+	&.table-rows-rounded {
+		th,td {
+			&:first-child {
+				border-top-left-radius: 6px;
+				border-bottom-left-radius: 6px;
+			}
+
+			&:last-child {
+				border-top-right-radius: 6px;
+				border-bottom-right-radius: 6px;
+			}
+		}
+
+	}
+
 	// Flush
 	&.table-flush {
 		tr, th, td {
diff --git a/resources/_keenthemes/src/sass/components/_timeline.scss b/resources/_keenthemes/src/sass/components/_timeline.scss
index 08eca86..df24b1d 100644
--- a/resources/_keenthemes/src/sass/components/_timeline.scss
+++ b/resources/_keenthemes/src/sass/components/_timeline.scss
@@ -4,6 +4,10 @@
 
 // Base
 .timeline {
+	// Variables
+	--#{$prefix}timeline-icon-size: #{$timeline-icon-size};
+	--#{$prefix}timeline-icon-space: #{$timeline-icon-space};
+
 	// Item
 	.timeline-item {
 		position: relative;
@@ -27,17 +31,15 @@
 		position: absolute;
 		z-index: 0;
 		left: 0;
-		top:0;
+		top: var(--#{$prefix}timeline-icon-size);
 		bottom: 0;
 		transform: translate(50%);
 		border-left-width: 1px;
-		border-left-style: dashed;
+		border-left-style: solid;
 		border-left-color: var(--#{$prefix}gray-300); 
-	}
-
-	// Line solid
-	.timeline-line-solid {				
-		border-left-style: solid !important;				
+		width: var(--#{$prefix}timeline-icon-size);
+		margin-top: var(--#{$prefix}timeline-icon-space);
+		margin-bottom: var(--#{$prefix}timeline-icon-space);
 	}
 
 	// Icon
@@ -45,6 +47,14 @@
 		z-index: 1;
 		flex-shrink: 0;
 		margin-right: 1rem;
+		width: var(--#{$prefix}timeline-icon-size); 
+		height: var(--#{$prefix}timeline-icon-size); 
+		display: flex;
+		text-align: center;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid var(--#{$prefix}gray-300); 
+		border-radius: 50%;
 	}
 
 	// Content
@@ -72,4 +82,15 @@
             }
 		}
 	}
+
+	// Line solid
+	&.timeline-border-dashed {				
+		.timeline-line {
+			border-left-style: dashed !important;				
+		}
+
+		.timeline-icon {
+			border-style: dashed !important;	
+		}
+	}
 }
diff --git a/resources/_keenthemes/src/sass/components/_tree.scss b/resources/_keenthemes/src/sass/components/_tree.scss
new file mode 100644
index 0000000..ab56bc6
--- /dev/null
+++ b/resources/_keenthemes/src/sass/components/_tree.scss
@@ -0,0 +1,92 @@
+//
+//  Tree
+//
+
+.tree {
+	// Css variables
+	--#{$prefix}tree-icon-size: #{$tree-icon-size};
+	--#{$prefix}tree-icon-gap: #{$tree-icon-gap};
+	--#{$prefix}tree-icon-color-open: var(--#{$prefix}success);
+	--#{$prefix}tree-icon-color-default: var(--#{$prefix}gray-500);
+	--#{$prefix}tree-icon-color-close: var(--#{$prefix}gray-500);	 	
+	--#{$prefix}tree-line-color: var(--#{$prefix}gray-200);	
+
+	.tree-node {
+		padding-left: $tree-node-padding-x;
+		display: flex;
+		flex-direction: column;
+		align-items: start;
+	}
+
+	.tree-sub {
+		padding: $tree-node-padding-y 0;		 	 
+	}
+
+	.tree-content {
+		display: flex;
+		align-items: center;
+		padding: $tree-node-padding-y 0;
+	}
+
+	.tree-wrapper {
+		padding-left: calc(var(--#{$prefix}tree-icon-size) + var(--#{$prefix}tree-icon-size));
+	}
+
+	.tree-section {
+		display: flex;
+		align-items: baseline;
+		padding-left: var(--#{$prefix}tree-icon-gap);
+	}
+
+	.tree-toggle {
+		display: flex;
+		align-items: center;
+		width: var(--#{$prefix}tree-icon-size);
+		
+		.tree-icon-default {
+			font-size: 1.5rem;
+			color: var(--#{$prefix}tree-icon-color-default);	
+		}
+
+		.tree-icon-open {
+			font-size: 1.5rem;			 
+			color: var(--#{$prefix}tree-icon-color-open);	
+		}	
+
+		.tree-icon-close {
+			font-size: 1.5rem;
+			color: var(--#{$prefix}tree-icon-color-close);			 
+		}
+		
+		&.collapsed {
+			.tree-icon-close {
+				display: flex;
+			}	
+	
+			.tree-icon-open {
+				display: none;
+			}
+		}			
+
+		&:not(.collapsed) {
+			.tree-icon-close {
+				display: none;
+			}	
+	
+			.tree-icon-open {
+				display: flex;
+			}
+		} 		
+	}	
+
+	& > .tree-node {
+		padding-left: 0 !important;
+	} 
+
+	&.tree-line {
+		.tree-sub {	
+			border-left: 1px solid var(--#{$prefix}tree-line-color);	
+			margin-left: calc(var(--#{$prefix}tree-icon-size) / 2);	
+		}
+	}
+} 
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/components/_utilities.scss b/resources/_keenthemes/src/sass/components/_utilities.scss
index dfb48f5..3b60a2e 100644
--- a/resources/_keenthemes/src/sass/components/_utilities.scss
+++ b/resources/_keenthemes/src/sass/components/_utilities.scss
@@ -5,6 +5,10 @@
 $utilities: map-merge(
     $utilities,
     (
+        "cursor": (
+            property: cursor,
+            values: help wait crosshair not-allowed zoom-in grab pointer
+        ),
         "position": (
             property: position,
             responsive: true,
diff --git a/resources/_keenthemes/src/sass/components/_variables-dark.scss b/resources/_keenthemes/src/sass/components/_variables-dark.scss
index 6866423..a12139c 100644
--- a/resources/_keenthemes/src/sass/components/_variables-dark.scss
+++ b/resources/_keenthemes/src/sass/components/_variables-dark.scss
@@ -1,17 +1,19 @@
+// Bootstrap color system
+
 //
 // Bootstrap & Custom Variables
 // Safely override any variable in _variables.custom.scss
 //
 
-$gray-100-dark:  #1b1b29 !default;
-$gray-200-dark:  #2B2B40 !default;
-$gray-300-dark:  #323248 !default;
-$gray-400-dark:  #474761 !default;
-$gray-500-dark:  #565674 !default;
-$gray-600-dark:  #6D6D80 !default;
-$gray-700-dark:  #92929F !default;
-$gray-800-dark:  #CDCDDE !default;
-$gray-900-dark:  #FFFFFF !default;
+$gray-100-dark:  #1B1C22 !default;
+$gray-200-dark:  #26272F !default;
+$gray-300-dark:  #363843 !default;
+$gray-400-dark:  #464852 !default;
+$gray-500-dark:  #636674 !default;
+$gray-600-dark:  #808290 !default;
+$gray-700-dark:  #9A9CAE !default;
+$gray-800-dark:  #B5B7C8 !default;
+$gray-900-dark:  #F5F5F5 !default;
 
 $grays-dark: (
 	"100": $gray-100-dark,
@@ -30,90 +32,131 @@ $text-muted-dark: $gray-500-dark !default;
 
 // Bootstrap contextual colors
 // Primary colors
-$primary-light-dark:			#212E48 !default;
+$primary-dark:						#006AE6 !default;
+$primary-active-dark:				#107EFF !default;
+$primary-light-dark: 				#172331 !default;
+$primary-clarity-dark: 				rgba(#006AE6, 0.2) !default;
+$primary-inverse-dark: 				$white !default;
 
 // Secondary colors
-$secondary-dark: 				$gray-300-dark !default;
-$secondary-active-dark: 		$gray-400-dark !default;
-$secondary-light-dark: 			$gray-100-dark !default;
-$secondary-inverse-dark:		$gray-700-dark !default;
+$secondary-dark: 					$gray-300-dark !default;
+$secondary-active-dark: 			$gray-400-dark !default;
+$secondary-light-dark: 				$gray-300-dark !default;
+$secondary-clarity-dark:			rgba($gray-300-dark, 0.2) !default; 
+$secondary-inverse-dark:			$white !default; 
 
 // Light colors
-$light-dark: 					$gray-200-dark !default; 
-$light-active-dark: 			$gray-300-dark !default;
-$light-inverse-dark: 			$gray-600-dark !default;
+$light-dark: 						$gray-100-dark !default;
+$light-active-dark: 				#1F212A !default;
+$light-light-dark: 					#1F212A !default;
+$light-clarity-dark: 				rgba(31, 33, 42, 0.20) !default;
+$light-inverse-dark:				$gray-600-dark !default;
 
 // Success colors
-$success-light-dark:			#1C3833 !default;
+$success-dark: 						#00A261 !default; 
+$success-active-dark: 				#01BF73 !default;
+$success-light-dark: 				#1F212A !default;
+$success-clarity-dark: 				rgba(#00A261, 0.2) !default;
+$success-inverse-dark: 				$white !default;
 
 // Info colors
-$info-light-dark: 				#2F264F !default;
+$info-dark: 						#883FFF !default; 
+$info-active-dark: 					#9E63FF !default;
+$info-light-dark: 					#272134 !default;
+$info-clarity-dark: 				rgba(#883FFF, 0.2) !default;
+$info-inverse-dark: 				$white !default;
 
 // Warning colors
-$warning-light-dark: 			#392F28 !default;
+$warning-dark: 						#C59A00 !default; 
+$warning-active-dark: 				#D9AA00 !default;
+$warning-light-dark: 				#242320 !default;
+$warning-clarity-dark: 				rgba(#C59A00, 0.2) !default;
+$warning-inverse-dark: 				$white !default;
 
 // Danger colors
-$danger-light-dark:				#3A2434 !default;
+$danger-dark: 						#E42855 !default; 
+$danger-active-dark: 				#FF3767 !default;
+$danger-light-dark: 				#302024 !default;
+$danger-clarity-dark: 				rgba(#E42855, 0.2) !default;
+$danger-inverse-dark: 				$white !default;
 
 // Dark colors
-$dark-dark: 					$gray-900-dark !default; 
-$dark-active-dark: 				lighten($gray-900-dark, 3%) !default;
-$dark-light-dark: 				$gray-200-dark !default;
-$dark-inverse-dark: 			$gray-100-dark !default; 
+$dark-dark: 						#272A34 !default;
+$dark-active-dark: 					#2D2F39 !default;
+$dark-light-dark: 					#1E2027 !default;
+$dark-clarity-dark: 				rgba(#272A34, 0.2) !default;
+$dark-inverse-dark: 				$white !default;
 
+// Contextual colors
 $theme-colors-dark: (
-	"white": $white,  // custom color type
 	"light": $light-dark,
-	"primary": $primary,
-	"success": $success,
-	"info": $info,
-	"warning": $warning,
-	"danger": $danger,
-	"dark": $dark-dark,
+	"primary": $primary-dark,
 	"secondary": $secondary-dark,
+	"success": $success-dark,
+	"info": $info-dark,
+	"warning": $warning-dark,
+	"danger": $danger-dark,
+	"dark": $dark-dark
 ) !default;
-
+	
+// Contextual active state colors
 $theme-active-colors-dark: (
-	"primary": $primary-active,
+	"primary": $primary-active-dark,
 	"secondary":  $secondary-active-dark,
 	"light":   $light-active-dark,
-	"success": $success-active,
-	"info":    $info-active,
-	"warning": $warning-active,
-	"danger":  $danger-active,
+	"success": $success-active-dark,
+	"info":    $info-active-dark,
+	"warning": $warning-active-dark,
+	"danger":  $danger-active-dark,
 	"dark":    $dark-active-dark
-) !default;
+) !default; 
 
+// Contextual inverse state colors
 $theme-inverse-colors-dark: (
-	"primary": $primary-inverse,
+	"primary": $primary-inverse-dark,
 	"secondary":  $secondary-inverse-dark,
-	"light":   $light-inverse,
-	"success": $success-inverse,
-	"info":    $info-inverse,
-	"warning": $warning-inverse,
-	"danger":  $danger-inverse,
+	"light":   $light-inverse-dark,
+	"success": $success-inverse-dark,
+	"info":    $info-inverse-dark,
+	"warning": $warning-inverse-dark,
+	"danger":  $danger-inverse-dark,
 	"dark":    $dark-inverse-dark
-) !default;
+) !default; 
 
+// Contextual light state colors
 $theme-light-colors-dark: (
 	"primary": $primary-light-dark,
+	"secondary": $secondary-light-dark,
 	"success": $success-light-dark,
 	"info":    $info-light-dark,
 	"warning": $warning-light-dark,
 	"danger":  $danger-light-dark,
 	"dark":    $dark-light-dark,
-	"secondary":  $secondary-light-dark
+	"light":   $light-light-dark
 ) !default; 
-	
+
+// Contextual light state colors
+$theme-clarity-colors-dark: (
+	"primary": $primary-clarity-dark,
+	"secondary": $secondary-clarity-dark,
+	"success": $success-clarity-dark,
+	"info":    $info-clarity-dark,
+	"warning": $warning-clarity-dark,
+	"danger":  $danger-clarity-dark,
+	"dark":    $dark-clarity-dark,
+	"light":   $light-clarity-dark,
+) !default; 
+
+// Text colors
 $theme-text-colors-dark: (
 	"white":   $white,
-	"primary": $primary,
+	"primary": $primary-dark,
 	"secondary":  $secondary-dark,
 	"light":   $light-dark,
-	"success": $success,
-	"info":    $info,
-	"warning": $warning,
-	"danger":  $danger,
+	"success": $success-dark,
+	"info":    $info-dark,
+	"warning": $warning-dark,
+	"danger":  $danger-dark,
 	"dark":    $dark-dark,
 	"muted":   $text-muted-dark,
 	"gray-100":   $gray-100-dark,
@@ -131,7 +174,7 @@ $theme-text-colors-dark: (
 // Body
 //
 // Settings for the `<body>` element.
-$body-bg-dark:              #1e1e2d !default;
+$body-bg-dark:              #1C1D22 !default;
 $body-bg-rgb-dark:          to-rgb($body-bg-dark) !default;
 $body-color-dark:           $gray-900-dark !default;
 
@@ -139,7 +182,7 @@ $body-color-dark:           $gray-900-dark !default;
 // Links
 //
 // Style anchor elements.
-$link-color-dark:           $primary !default;
+$link-color-dark:           $primary-dark !default;
 
 
 // Components
@@ -149,16 +192,16 @@ $border-color-dark:             $gray-200-dark !default;
 $border-dashed-color-dark:      $gray-300-dark !default; 
 
 // Keenthemes hover states
-$component-hover-color-dark: 	$primary !default;
+$component-hover-color-dark: 	$primary-dark !default;
 $component-hover-bg-dark: 		$gray-100-dark !default;
 
 // Keenthemes active states
 $component-active-color-dark:   $primary-inverse !default;
-$component-active-bg-dark:      $primary !default;
+$component-active-bg-dark:      $primary-dark !default;
 
 // Keenthemes checked states
 $component-checked-color-dark:   $primary-inverse !default;
-$component-checked-bg-dark:      $primary !default;
+$component-checked-bg-dark:      $primary-dark !default;
 
 $headings-color-dark: 			 $gray-900-dark !default;
 $blockquote-footer-color-dark:   $gray-600-dark !default;
@@ -174,7 +217,7 @@ $box-shadow-inset-dark: 		inset 0 1px 2px rgba($black, .075) !default;
 
 // Card
 $card-box-shadow-dark:                   			null !default;
-
+$card-border-color-dark:     						$border-color-dark !default;
 
 // Tables
 $table-striped-bg-dark:         					rgba($gray-100-dark, 0.75) !default;
@@ -191,7 +234,7 @@ $form-switch-bg-image-solid-dark:                   url("data:image/svg+xml,<svg
 
 // Accordion
 $accordion-icon-color-dark:                         $body-color-dark!default;
-$accordion-icon-active-color-dark:                  $primary !default;
+$accordion-icon-active-color-dark:                  $primary-dark !default;
 $accordion-button-icon-dark:         				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 $accordion-button-active-icon-dark:  				url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
@@ -216,9 +259,10 @@ $tooltip-bg-dark:                            		$gray-200-dark !default;
 $tooltip-box-shadow-dark:    						0px 0px 30px rgba(0, 0, 0, 0.15) !default;
 
 // Code
-$code-bg-dark:              $gray-200-dark !default; 
-$code-color-dark:           #b93993 !default; 
-$code-box-shadow-dark:      0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-bg-dark:                   #2b2b40 !default;
+$code-shadow-dark:               rgba(0, 0, 0, 0.08) 0px 3px 9px 0px !default;
+$code-color-dark:                #b93993 !default;
+$code-border-color-dark:         transparent  !default;
 
 // Symbol
 $symbol-border-color-dark: rgba($body-bg, 0.5);
diff --git a/resources/_keenthemes/src/sass/components/_variables.custom.scss b/resources/_keenthemes/src/sass/components/_variables.custom.scss
index df1eee5..c013a04 100644
--- a/resources/_keenthemes/src/sass/components/_variables.custom.scss
+++ b/resources/_keenthemes/src/sass/components/_variables.custom.scss
@@ -4,60 +4,3 @@
 // are not accessible in this file but you can override any global variable as shown below:
 //
 
-// Bootstrap color system
-$white: 											#ffffff;
-
-// Gray colors
-$gray-100-dark:  									#1b1b29;
-$gray-200-dark:  									#2B2B40;
-$gray-300-dark:  									#323248;
-$gray-400-dark:  									#474761;
-$gray-500-dark:  									#565674;
-$gray-600-dark:  									#6D6D80;
-$gray-700-dark:  									#92929F;
-$gray-800-dark:  									#CDCDDE;
-$gray-900-dark:  									#FFFFFF;
-
-// Theme colors
-// Primary
-$primary:       									#3E97FF;
-$primary-active:    								#0095e8;
-$primary-light:    								    #f1faff;
-$primary-light-dark:    							#212e48;
-$primary-inverse:  									$white;
-
-// Success
-$success:       									#50cd89;
-$success-active:    								#47be7d;
-$success-light:    									#e8fff3;
-$success-light-dark:    							#1c3238;
-$success-inverse:  									$white;
-
-// Info
-$info:       									    #7239ea;
-$info-active:    									#5014d0;
-$info-light:    									#f8f5ff;
-$info-light-dark:    								#2f264f;
-$info-inverse:  									$white;
-
-// Danger
-$danger:       									    #f1416c;
-$danger-active:    									#d9214e;
-$danger-light:    									#fff5f8;
-$danger-light-dark:    								#3a2434;
-$danger-inverse:  									$white;
-
-// Warning
-$warning:       									#ffc700;
-$warning-active:    								#f1bc00;
-$warning-light:    									#fff8dd;
-$warning-light-dark:    							#392f28;
-$warning-inverse:  									$white;
-
-// Card Box Shadow
-$card-border-enabled:								true;
-$card-box-shadow:                                   0px 4px 12px 0px rgba(0, 0, 0, 0.03);
-$card-box-shadow-dark:                              none;
-
-// Body
-$body-bg-dark:										#1c1c1c;
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/components/_variables.override.scss b/resources/_keenthemes/src/sass/components/_variables.override.scss
new file mode 100644
index 0000000..8774439
--- /dev/null
+++ b/resources/_keenthemes/src/sass/components/_variables.override.scss
@@ -0,0 +1,15 @@
+//
+// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
+// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
+// are not accessible in this file but you can override any global variable as shown below:
+//
+
+// Body bg
+$body-bg-dark:						$coal-100;
+
+// Card
+$card-box-shadow:                   0px 3px 4px 0px rgba(0, 0, 0, 0.03);
+$card-box-shadow-dark:  			none;
+$card-border-enabled: 				true;
+$card-border-color:					$gray-200;
+$card-border-color-dark:			$dark-light-dark;
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/components/_variables.scss b/resources/_keenthemes/src/sass/components/_variables.scss
index 60f2a60..629381d 100644
--- a/resources/_keenthemes/src/sass/components/_variables.scss
+++ b/resources/_keenthemes/src/sass/components/_variables.scss
@@ -6,6 +6,16 @@
 // Prefix for :root CSS variables
 $prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
 
+// Custom coal colors
+$coal-100:  #15171C !default;
+$coal-200:  #13141A !default;
+$coal-300:  #111217 !default;
+$coal-400:  #0F1014 !default;
+$coal-500:  #0D0E12 !default;
+$coal-600:  #0B0C10 !default;
+$coal-black: #000000 !default;
+$coal-clarity:  rgba(#18191F, 50) !default;
+
 
 // Bootstrap color system
 $white: #ffffff !default;
@@ -13,9 +23,9 @@ $black:#000000 !default;
 
 // Bootstrap grey colors
 $gray-100: #F9F9F9 !default;
-$gray-200: #F1F1F2 !default;
+$gray-200: #F1F1F4 !default;
 $gray-300: #DBDFE9 !default;
-$gray-400: #B5B5C3 !default;
+$gray-400: #C4CADA !default;
 $gray-500: #99A1B7 !default;
 $gray-600: #78829D !default;
 $gray-700: #4B5675 !default;
@@ -40,52 +50,59 @@ $grays: (
 
 // Bootstrap contextual colors
 // Primary colors
-$primary:						#3699FF !default;
-$primary-active:				#187DE4 !default;
-$primary-light: 				#F1FAFF !default;
-$primary-inverse: 				$white !default;
+$primary:						#1B84FF !default;
+$primary-active:				#056EE9 !default;
+$primary-light: 				#E9F3FF !default;
+$primary-clarity: 				rgba(#1B84FF, 0.2) !default;
+$primary-inverse: 				$white !default; 
 
 // Secondary colors
-$secondary: 					$gray-300 !default;
-$secondary-active: 				$gray-400 !default;
-$secondary-light: 				$gray-100 !default;
-$secondary-inverse:				$gray-700 !default; 
+$secondary: 					#F9F9F9 !default;
+$secondary-active: 				$gray-300 !default;
+$secondary-light: 				#F9F9F9 !default;
+$secondary-clarity:				rgba(#F9F9F9, 0.2) !default; 
+$secondary-inverse:				$gray-800 !default; 
 
 // Light colors
 $light: 						$gray-100 !default;
-$light-active: 					$gray-200 !default;
-$light-light: 					gba($gray-100, 0.75) !default;
-$light-inverse:					$gray-600 !default;
-
+$light-active: 					#FCFCFC !default;
+$light-light: 					#ffffff !default;
+$light-clarity: 				rgba($white, 0.2) !default;
+$light-inverse:					$gray-800 !default;
 
 // Success colors
-$success: 						#1BC5BD !default; 
-$success-active: 				#0BB7AF !default;
-$success-light: 				#C9F7F5 !default;
+$success: 						#17C653 !default; 
+$success-active: 				#04B440 !default;
+$success-light: 				#DFFFEA !default;
+$success-clarity: 				rgba(#17C653, 0.2) !default;
 $success-inverse: 				$white !default;
 
 // Info colors
-$info: 							#8950FC !default; 
-$info-active: 					#7337EE !default;
-$info-light: 					#EEE5FF !default;
+$info: 							#7239EA !default; 
+$info-active: 					#5014D0 !default;
+$info-light: 					#F8F5FF !default;
+$info-clarity: 					rgba(#7239EA, 0.2) !default;
 $info-inverse: 					$white !default;
 
 // Warning colors
-$warning: 						#FFA800 !default; 
-$warning-active: 				#EE9D01 !default;
-$warning-light: 				#FFF4DE !default;
+$warning: 						#F6C000 !default; 
+$warning-active: 				#DEAD00 !default;
+$warning-light: 				#FFF8DD !default;
+$warning-clarity: 				rgba(#F6C000, 0.2) !default;
 $warning-inverse: 				$white !default;
 
 // Danger colors
-$danger: 						#F64E60 !default; 
-$danger-active: 				#EE2D41 !default;
-$danger-light: 					#FFE2E5 !default;
+$danger: 						#F8285A !default; 
+$danger-active: 				#D81A48 !default;
+$danger-light: 					#FFEEF3 !default;
+$danger-clarity: 				rgba(#F8285A, 0.2) !default;
 $danger-inverse: 				$white !default;
 
 // Dark colors
-$dark: 							$gray-900 !default;
-$dark-active: 					darken($gray-900, 3%) !default;
-$dark-light: 					$gray-200 !default; 
+$dark: 							#1E2129 !default;
+$dark-active: 					#111318 !default;
+$dark-light: 					#F9F9F9 !default; 
+$dark-clarity: 					rgba(#1E2129, 0.2) !default;
 $dark-inverse: 					$white !default;
 
 // Contextual colors
@@ -132,7 +149,20 @@ $theme-light-colors: (
 	"info":    $info-light,
 	"warning": $warning-light,
 	"danger":  $danger-light,
-	"dark":    $dark-light
+	"dark":    $dark-light,
+	"light":   $light-light
+) !default; 
+
+// Contextual light state colors
+$theme-clarity-colors: (
+	"primary": $primary-clarity,
+	"secondary": $secondary-clarity,
+	"success": $success-clarity,
+	"info":    $info-clarity,
+	"warning": $warning-clarity,
+	"danger":  $danger-clarity,
+	"dark":    $dark-clarity,
+	"light":   $light-clarity,
 ) !default; 
 
 // Text colors
@@ -335,6 +365,7 @@ $font-family-sans-serif: Inter, Helvetica, "sans-serif" !default;
 
 $font-size-base: 1rem !default; // Assumes the browser default, typically `13px`
 $font-size-lg: $font-size-base * 1.075 !default;   // 14.04px
+$font-size-xl: $font-size-base * 1.21 !default;   // 16.04px
 $font-size-sm: $font-size-base * .95 !default;   // 12.025px
 
 $font-weight-lighter: lighter !default;
@@ -380,6 +411,7 @@ $font-sizes: (
 	sm: $font-size-sm,
 	base: $font-size-base, // 13px
 	lg: $font-size-lg,
+	xl: $font-size-xl,
 	
 	fluid: 100%, // 100%
 
@@ -500,7 +532,7 @@ $btn-line-height:                           $input-btn-line-height !default;
 $btn-white-space:                           null !default; // Set to `nowrap` to prevent text wrapping
 
 $btn-padding-y-sm:                          $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:                          1.25rem !default;
+$btn-padding-x-sm:                          1rem !default;
 $btn-font-size-sm:                          $input-btn-font-size-sm !default;
 
 $btn-padding-y-lg:                          $input-btn-padding-y-lg !default;
@@ -510,11 +542,11 @@ $btn-font-size-lg:                          $input-btn-font-size-lg !default;
 $btn-border-width:                          $input-btn-border-width !default;
 
 $btn-font-weight:                           $font-weight-semibold !default;
-$btn-box-shadow:                            null !default;
+$btn-box-shadow:                            none !default;
 $btn-focus-width:                           $input-btn-focus-width !default;
-$btn-focus-box-shadow:                      null !default;
+$btn-focus-box-shadow:                      none !default;
 $btn-disabled-opacity:                      .65 !default;
-$btn-active-box-shadow:                     null !default;
+$btn-active-box-shadow:                     none !default;
 
 $btn-link-color:                            var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:                      var(--#{$prefix}link-hover-color) !default;
@@ -747,7 +779,7 @@ $pagination-disabled-border-color:                  transparent !default;
 
 // Card
 $card-box-shadow:                   				0px 0px 20px 0px rgba(76,87,125,0.02) !default;
-$card-border-color:     							var(--#{$prefix}border-color) !default;
+$card-border-color:     							$border-color !default;
 $card-border-width:                 				1px !default;
 $card-border-style:                 				solid !default;
 $card-border-dashed-color:     						var(--#{$prefix}border-dashed-color) !default;
@@ -759,8 +791,8 @@ $card-border-radius:    							$border-radius-lg !default;
 $card-header-py:                   					0.5rem !default;
 $card-header-height: 								70px !default;
 $card-border-enabled:               				false !default;
-
-
+$card-title-color:									var(--#{$prefix}gray-900) !default;
+ 
 // Accordion
 $accordion-color:                               var(--#{$prefix}body-color) !default;
 $accordion-bg:                                  var(--#{$prefix}body-bg) !default;
@@ -840,7 +872,6 @@ $badge-size:                    1.75rem !default;
 $badge-size-sm:                 1.5rem !default;
 $badge-size-lg:                 2rem !default;
 
-
 // Modals
 // Padding applied to the modal body
 $modal-inner-padding:     					    1.75rem !default;
@@ -940,13 +971,15 @@ $btn-close-bg:               				url("data:image/svg+xml,<svg xmlns='http://www.
 $btn-close-focus-shadow:					none !default;
 
 // Code
-$code-bg:                   #F1F3F8 !default;
-$code-box-shadow:           0px 3px 9px rgba(0, 0, 0, 0.08) !default;
+$code-bg:                   #f1f3f8 !default;
+$code-shadow:				0px 3px 9px rgba(0,0,0,.08);
+$code-color:                #b93993 !default;
+$code-border-color:         transparent !default;
 $code-padding:              0.1rem 0.4rem !default;
 $code-margin:               0 0.5rem !default;
+$code-font-size: 			1rem !default;
 $code-font-weight:          400 !default;
 $code-border-radius:        0.3rem !default; 
-$code-color:                #b93993 !default; 
 $code-space:                0.25rem !default;
 
 // Opacity
@@ -1079,6 +1112,10 @@ $symbol-border-color: rgba(var(--#{$prefix}body-bg), 0.5);
 $symbol-label-color: var(--#{$prefix}gray-800);
 $symbol-label-bg: var(--#{$prefix}gray-100);
 
+// Keenthemes timeline component
+$timeline-icon-size: 38px;
+$timeline-icon-space: 0.35rem;
+
 
 // Keenthemes bullet component
 $bullet-bg-color: var(--#{$prefix}gray-400) !default;
@@ -1151,12 +1188,20 @@ $menu-arrow-size: 9px !default;
 $menu-arrow-space: 5px !default;
 $menu-heading-color: $text-muted !default;
 
+// Keenthemes tree component
+$tree-icon-size: 16px !default;
+$tree-icon-gap: 14px !default;
+$tree-node-padding-y: 0.35rem !default;
+$tree-node-padding-x: 1.25rem !default;
+
+
 // Keenthemes scrollbar component 
 $scrollbar-size: 5px !default;
 $scrollbar-overlay-size: 19px !default;
 $scrollbar-overlay-space: 7px !default;
 $scrollbar-color: $gray-200 !default;
 $scrollbar-hover-color: $gray-300 !default;
+$body-scrollbar-width: 15px !default;
 
 // Keenthemes overlay component 
 $overlay-bg: rgba($black, 0.05)  !default;
diff --git a/resources/_keenthemes/src/sass/components/buttons/_base.scss b/resources/_keenthemes/src/sass/components/buttons/_base.scss
index 117a267..5673535 100644
--- a/resources/_keenthemes/src/sass/components/buttons/_base.scss
+++ b/resources/_keenthemes/src/sass/components/buttons/_base.scss
@@ -15,7 +15,7 @@
 	}
 
 	// Remove border
-	&:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
+	&:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline) {
 		border: 0;
 		padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});
 
diff --git a/resources/_keenthemes/src/sass/components/buttons/_theme.scss b/resources/_keenthemes/src/sass/components/buttons/_theme.scss
index 557c877..818c9eb 100644
--- a/resources/_keenthemes/src/sass/components/buttons/_theme.scss
+++ b/resources/_keenthemes/src/sass/components/buttons/_theme.scss
@@ -20,6 +20,24 @@
 	@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
 }
 
+// Outline hover basic style
+.btn.btn-hover-outline {
+	border-width: 1px;
+	border-style: solid;	
+	
+	$color: null;
+	$icon-color: null;
+	$border-color: null;
+	$bg-color: null;
+
+	$color-active: null;
+	$icon-color-active: null;
+	$border-color-active: $input-border-color;
+	$bg-color-active: null;
+
+	@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+}
+
 // Theme colors
 @each $name, $value in $theme-colors {
 	// Base
diff --git a/resources/_keenthemes/src/sass/components/buttons_new/_base.scss b/resources/_keenthemes/src/sass/components/buttons_new/_base.scss
new file mode 100644
index 0000000..6db2eb6
--- /dev/null
+++ b/resources/_keenthemes/src/sass/components/buttons_new/_base.scss
@@ -0,0 +1,74 @@
+//
+// Buttons Base
+//
+
+// Base
+.btn {
+}
+
+// With icon
+.btn {
+	// Font icon
+	> i {
+		display: inline-flex;
+		font-size: $font-size-base;
+		padding-right: 0.35rem;
+		vertical-align: middle;
+	}
+
+	// Icon only button
+	&.btn-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		height: $input-height;
+		width: $input-height;
+		line-height: 1;
+
+		i {
+			padding-right: 0;	
+		}
+
+		// Sizes
+		&.btn-sm {
+			height: $input-height-sm;
+			width: $input-height-sm;			 
+		}
+
+		&.btn-lg {
+			height: $input-height-lg;
+			width: $input-height-lg;
+		}
+
+		&.btn-circle {
+			border-radius: 50%;
+		}
+	}
+}
+
+// Utilities
+.btn {
+	.btn-reset {
+		background-color: transparent;
+		border: 0;
+		box-shadow: none;
+		user-select: none;
+		outline: none;
+	}
+
+	&.btn-flex {		
+		display: inline-flex;
+		align-items: center;
+	}
+
+	&.btn-trim-start {
+		justify-content: flex-start !important;
+		padding-left: 0 !important;		
+	}
+
+	&.btn-trim-end {
+		justify-content: flex-end !important;
+		padding-right: 0 !important;	
+	} 		
+}
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/components/buttons_new/_theme.scss b/resources/_keenthemes/src/sass/components/buttons_new/_theme.scss
new file mode 100644
index 0000000..e18fd88
--- /dev/null
+++ b/resources/_keenthemes/src/sass/components/buttons_new/_theme.scss
@@ -0,0 +1,21 @@
+//
+// Buttons Theme
+//
+
+// Theme colors
+@each $name, $value in $theme-colors {
+	// Base
+	.btn.btn-#{$name} {
+		$color: var(--#{$prefix}#{$name}-inverse);
+		$icon-color: var(--#{$prefix}#{$name}-inverse);
+		$border-color: var(--#{$prefix}#{$name});
+		$bg-color: var(--#{$prefix}#{$name});
+
+		$color-active: var(--#{$prefix}#{$name}-inverse);
+		$icon-color-active: var(--#{$prefix}#{$name}-inverse);
+		$border-color-active: var(--#{$prefix}#{$name}-active);
+		$bg-color-active: var(--#{$prefix}#{$name}-active);
+
+		@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
+	}
+}
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/components/components.scss b/resources/_keenthemes/src/sass/components/components.scss
index da579c4..145fb7f 100644
--- a/resources/_keenthemes/src/sass/components/components.scss
+++ b/resources/_keenthemes/src/sass/components/components.scss
@@ -64,6 +64,7 @@
 @import "cookiealert";
 @import "print";
 @import "helpers";
+@import "tree";
 @import "testimonials-slider";
 //
 // Components
diff --git a/resources/_keenthemes/src/sass/components/helpers/_background.scss b/resources/_keenthemes/src/sass/components/helpers/_background.scss
index 1762423..fc74d2f 100644
--- a/resources/_keenthemes/src/sass/components/helpers/_background.scss
+++ b/resources/_keenthemes/src/sass/components/helpers/_background.scss
@@ -137,6 +137,13 @@
 		background-color: var(--#{$prefix}gray-#{$name});
 	}
 
+	.bg-hover-gray-#{$name} {
+		&:hover {
+			--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
+			background-color: var(--#{$prefix}gray-#{$name});	
+		}		
+	}
+
 	.bg-gray-#{$name}i {
 		--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
 		background-color: var(--#{$prefix}gray-#{$name}) !important;
diff --git a/resources/_keenthemes/src/sass/components/menu/_base.scss b/resources/_keenthemes/src/sass/components/menu/_base.scss
index bdbb375..faad180 100644
--- a/resources/_keenthemes/src/sass/components/menu/_base.scss
+++ b/resources/_keenthemes/src/sass/components/menu/_base.scss
@@ -126,6 +126,15 @@
     }
 }
 
+// No wrap
+.menu-nowrap {
+    .menu-title,
+    .menu-link {
+        flex-wrap: nowrap;    
+        flex-shrink: 0;
+    }
+}
+
 // Center alignment
 .menu-center {
     justify-content: center;
diff --git a/resources/_keenthemes/src/sass/components/menu/_theme.scss b/resources/_keenthemes/src/sass/components/menu/_theme.scss
index 6f700bf..8898510 100644
--- a/resources/_keenthemes/src/sass/components/menu/_theme.scss
+++ b/resources/_keenthemes/src/sass/components/menu/_theme.scss
@@ -358,6 +358,15 @@
     }
 }
 
+.menu-state-gray-900 {
+    .menu-item {
+        @include menu-link-hover-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
+        @include menu-link-show-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
+        @include menu-link-here-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
+        @include menu-link-active-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
+    }
+}
+
 // Primary title color states
 .menu-hover-title-primary {
     .menu-item {
diff --git a/resources/_keenthemes/src/sass/components/stepper/_links.scss b/resources/_keenthemes/src/sass/components/stepper/_links.scss
index 0d8aba4..0cd9c28 100644
--- a/resources/_keenthemes/src/sass/components/stepper/_links.scss
+++ b/resources/_keenthemes/src/sass/components/stepper/_links.scss
@@ -28,7 +28,7 @@
 			}           
 
             .stepper-title {
-                color: var(--#{$prefix}dark);		
+                color: var(--#{$prefix}gray-900);		
                 font-weight: 600;
                 font-size: 1.25rem; 
             }             
@@ -49,7 +49,7 @@
 			&.current.mark-completed:last-child,
 			&.completed {
 				.stepper-title {
-					color: var(--#{$prefix}gray-400);
+					color: var(--#{$prefix}gray-500);
 				}  			
 			}
         }
diff --git a/resources/_keenthemes/src/sass/components/stepper/_pills.scss b/resources/_keenthemes/src/sass/components/stepper/_pills.scss
index 58537d0..4e1e851 100644
--- a/resources/_keenthemes/src/sass/components/stepper/_pills.scss
+++ b/resources/_keenthemes/src/sass/components/stepper/_pills.scss
@@ -34,8 +34,8 @@
     --#{$prefix}stepper-label-desc-opacity-completed: 1;
     
     --#{$prefix}stepper-label-desc-color: var(--#{$prefix}text-muted);     
-    --#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}gray-400);
-    --#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}gray-400);
+    --#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}gray-500);
+    --#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}gray-500);
 
     --#{$prefix}stepper-line-border: 1px dashed var(--#{$prefix}gray-300);
     
diff --git a/resources/_keenthemes/src/sass/layout/_variables.custom.scss b/resources/_keenthemes/src/sass/layout/_variables.custom.scss
index 822f8cc..85121b4 100644
--- a/resources/_keenthemes/src/sass/layout/_variables.custom.scss
+++ b/resources/_keenthemes/src/sass/layout/_variables.custom.scss
@@ -4,7 +4,7 @@
 
 // Reboot
 $app-bg-color: #fcfcfc;
-$app-bg-color-dark: transparent;
+$app-bg-color-dark: $coal-400;
 $app-blank-bg-color: $app-bg-color;
 $app-blank-bg-color-dark: $app-bg-color-dark;
 
@@ -21,7 +21,7 @@ $app-container-padding-x-mobile: 20px;
 $app-header-base-height: 74px;
 $app-header-base-height-mobile: 60px;
 $app-header-base-bg-color: transparent;
-$app-header-base-bg-color-dark: #131313;
+$app-header-base-bg-color-dark: $coal-500;
 $app-header-base-bg-color-mobile: $app-header-base-bg-color;
 $app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
 $app-header-base-box-shadow: none;
@@ -40,7 +40,7 @@ $app-header-light-separator-color: #E4E6EF;
 $app-header-light-separator-color-dark: $border-color-dark;
 
 // Header dark
-$app-header-dark-bg-color:#131313;
+$app-header-dark-bg-color:$coal-600;
 $app-header-dark-separator-color: #282a3d;
 $app-header-dark-scrollbar-color: #3b3b64;
 $app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
@@ -64,7 +64,7 @@ $app-sidebar-minimize-width: 75px;
 
 // Sidebar light
 $app-sidebar-light-bg-color: $body-bg;
-$app-sidebar-light-bg-color-dark:#131313;
+$app-sidebar-light-bg-color-dark:$coal-500;
 
 $app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
 $app-sidebar-light-box-shadow-dark: none;
@@ -86,11 +86,11 @@ $app-sidebar-light-header-menu-link-bg-color-active: #F7F8FB;
 $app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
     
 // Sidebar dark
-$app-sidebar-dark-bg-color: #131313;
-$app-sidebar-dark-separator-color: #393945;
+$app-sidebar-dark-bg-color: $coal-500;
+$app-sidebar-dark-separator-color: $light-light-dark;
 $app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
-$app-sidebar-dark-menu-heading-color: #626671;
-$app-sidebar-dark-menu-sub-link-color: #888A8E;
+$app-sidebar-dark-menu-heading-color: $gray-500-dark;
+$app-sidebar-dark-menu-sub-link-color: $gray-600-dark;;
 $app-sidebar-dark-menu-link-bg-color-active: #1C1C21;
 
 // Aside base
@@ -116,7 +116,7 @@ $app-footer-height: 60px;
 $app-footer-height-mobile: auto;
 $app-footer-bg-color: transparent;
 $app-footer-bg-color-dark: transparent;
-$app-footer-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
+$app-footer-box-shadow: 0px 10px 30px 0px rgba(49, 25, 79, 0.05);
 $app-footer-box-shadow-dark: none;
 
 // Scrolltop
diff --git a/resources/_keenthemes/src/sass/layout/base/header/_header.scss b/resources/_keenthemes/src/sass/layout/base/header/_header.scss
index cf459a8..892a2c0 100644
--- a/resources/_keenthemes/src/sass/layout/base/header/_header.scss
+++ b/resources/_keenthemes/src/sass/layout/base/header/_header.scss
@@ -139,6 +139,16 @@
             );
         }        
 
+        // Aside
+        [data-kt-app-header-fixed="true"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-header="true"] &,
+        [data-kt-app-header-fixed="true"][data-kt-app-aside-sticky="on"][data-kt-app-aside-push-header="true"] & {
+            right: calc(
+                var(--#{$prefix}app-aside-width) + 
+                var(--#{$prefix}app-aside-gap-start, 0px) + 
+                var(--#{$prefix}app-aside-gap-end, 0px)
+            );
+        }
+
         // Toolbar
         [data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
             box-shadow: none;    
diff --git a/resources/_keenthemes/src/sass/layout/header/_header-dark.scss b/resources/_keenthemes/src/sass/layout/header/_header-dark.scss
index de7d63a..b17c054 100644
--- a/resources/_keenthemes/src/sass/layout/header/_header-dark.scss
+++ b/resources/_keenthemes/src/sass/layout/header/_header-dark.scss
@@ -9,8 +9,8 @@
 
         .btn-custom {
             @include button-custom-variant(
-                $color:var(--#{$prefix}gray-200), 
-                $icon-color: var(--#{$prefix}gray-200),  
+                $color: $gray-600-dark, 
+                $icon-color: $gray-600-dark,
                 $border-color: null, 
                 $bg-color: null, 
                 $color-active: var(--#{$prefix}primary), 
@@ -28,10 +28,10 @@
             // Menu root links          
             > .menu-item {
                 @include menu-link-default-state( 
-                    $title-color: #858585, 
-                    $icon-color:#C5C5D8, 
-                    $bullet-color:#787887, 
-                    $arrow-color: #787887, 
+                    $title-color: $gray-600-dark, 
+                    $icon-color:$gray-600-dark,
+                    $bullet-color:$gray-600-dark,
+                    $arrow-color: $gray-600-dark, 
                     $bg-color: null,
                     $all-links: false                      
                 );
diff --git a/resources/_keenthemes/src/sass/layout/header/_header.scss b/resources/_keenthemes/src/sass/layout/header/_header.scss
index fcf2daa..a7d814a 100644
--- a/resources/_keenthemes/src/sass/layout/header/_header.scss
+++ b/resources/_keenthemes/src/sass/layout/header/_header.scss
@@ -125,6 +125,13 @@
             background-color: var(--#{$prefix}app-header-minimize-bg-color);
         }    
     }
+
+    // Modal open fix
+    [data-kt-app-header-fixed="true"].modal-open {
+        .app-header {
+            padding-right: $body-scrollbar-width !important;    
+        }    
+    }
 }
 
 // Dark mode
diff --git a/resources/_keenthemes/src/sass/layout/sidebar/_sidebar-dark.scss b/resources/_keenthemes/src/sass/layout/sidebar/_sidebar-dark.scss
index a42d64a..e87f418 100644
--- a/resources/_keenthemes/src/sass/layout/sidebar/_sidebar-dark.scss
+++ b/resources/_keenthemes/src/sass/layout/sidebar/_sidebar-dark.scss
@@ -30,72 +30,55 @@
         }
 
         .menu {
-            > .menu-item {                    
+            .menu-item {                    
                 .menu-heading {
                     color: $app-sidebar-dark-menu-heading-color !important;
                 }
 
                 @include menu-link-default-state( 
-                    $title-color: $gray-300, 
-                    $icon-color:  #7F8194, 
-                    $bullet-color:#7F8194,  
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null 
-                );
-                
-                @include menu-link-hover-state( 
-                    $title-color: var(--#{$prefix}primary-inverse), 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}primary-inverse), 
-                    $bg-color: null
+                    $title-color: $gray-700-dark, 
+                    $icon-color:  $gray-400-dark, 
+                    $bullet-color:$gray-400-dark,  
+                    $arrow-color: $gray-400-dark,  
+                    $bg-color: null,
+                    $all-links: true 
                 );
                 
                 @include menu-link-here-state( 
-                    $title-color: $gray-300, 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark, 
+                    $bg-color: null,
+                    $all-links: true
                 );
                 
                 @include menu-link-show-state( 
-                    $title-color: $gray-300, 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}gray-700), 
-                    $bg-color: null
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: null,
+                    $all-links: true
+                );
+                
+                @include menu-link-hover-state( 
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: null,
+                    $all-links: true
                 );
                 
                 @include menu-link-active-state( 
-                    $title-color: var(--#{$prefix}primary-inverse), 
-                    $icon-color: var(--#{$prefix}primary-inverse), 
-                    $bullet-color: var(--#{$prefix}primary-inverse), 
-                    $arrow-color: var(--#{$prefix}primary-inverse), 
-                    $bg-color: $app-sidebar-dark-menu-link-bg-color-active
+                    $title-color: $gray-900-dark,
+                    $icon-color: $gray-900-dark, 
+                    $bullet-color: $gray-900-dark,
+                    $arrow-color: $gray-900-dark,
+                    $bg-color: $app-sidebar-dark-menu-link-bg-color-active,
+                    $all-links: true
                 );
-
-                .menu-sub {
-                    .menu-item {
-                        .menu-link {
-                            .menu-title {
-                                color: $app-sidebar-dark-menu-sub-link-color;
-                            }
-
-                            &.active {
-                                .menu-title {
-                                    color: var(--#{$prefix}white);
-                                } 
-                                
-                                .menu-bullet {
-                                    .bullet {
-                                        background-color: var(--#{$prefix}white);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
             }
         }
     } 
@@ -116,7 +99,7 @@
 @include color-mode(dark) {
     [data-kt-app-layout="dark-sidebar"] {
         .app-sidebar {
-            border-right: 1px dashed $app-sidebar-dark-separator-color;
+            border-right: 1px solid $app-sidebar-dark-separator-color;
         }
     }
 }
\ No newline at end of file
diff --git a/resources/_keenthemes/src/sass/vendors/plugins/_daterangepicker.scss b/resources/_keenthemes/src/sass/vendors/plugins/_daterangepicker.scss
index 6c67af2..b949fe6 100644
--- a/resources/_keenthemes/src/sass/vendors/plugins/_daterangepicker.scss
+++ b/resources/_keenthemes/src/sass/vendors/plugins/_daterangepicker.scss
@@ -185,7 +185,7 @@
             color: var(--#{$prefix}gray-700);
 
             &.available.off {
-                color: var(--#{$prefix}gray-400);
+                color: var(--#{$prefix}gray-500);
             }
 
             &.active {
diff --git a/resources/_keenthemes/src/sass/vendors/plugins/_draggable.scss b/resources/_keenthemes/src/sass/vendors/plugins/_draggable.scss
index 6527cc9..9fe051b 100644
--- a/resources/_keenthemes/src/sass/vendors/plugins/_draggable.scss
+++ b/resources/_keenthemes/src/sass/vendors/plugins/_draggable.scss
@@ -9,7 +9,7 @@
     &.draggable-mirror {
         opacity: 0.8;
         transition: opacity 0.3s ease;
-        border: 2px dashed var(--#{$prefix}gray-300) !important;
+        border: 1px dashed var(--#{$prefix}gray-300) !important;
         @include border-radius($border-radius);
     }
 
diff --git a/resources/_keenthemes/src/sass/vendors/plugins/_flatpickr.scss b/resources/_keenthemes/src/sass/vendors/plugins/_flatpickr.scss
index a42ce15..75fc85c 100644
--- a/resources/_keenthemes/src/sass/vendors/plugins/_flatpickr.scss
+++ b/resources/_keenthemes/src/sass/vendors/plugins/_flatpickr.scss
@@ -390,14 +390,14 @@ span.flatpickr-weekday {
     &.notAllowed,
     &.notAllowed.prevMonthDay,
     &.notAllowed.nextMonthDay {
-        color: var(--#{$prefix}gray-400);
+        color: var(--#{$prefix}gray-500);
         background: transparent;
         border-color: transparent;
     }
     &.flatpickr-disabled,
     &.flatpickr-disabled:hover {
         cursor: not-allowed;
-        color: var(--#{$prefix}gray-400);
+        color: var(--#{$prefix}gray-500);
     }
 }
 
diff --git a/resources/_keenthemes/tools/gulp.config.js b/resources/_keenthemes/tools/gulp.config.js
index 78e0944..89637da 100644
--- a/resources/_keenthemes/tools/gulp.config.js
+++ b/resources/_keenthemes/tools/gulp.config.js
@@ -1,7 +1,7 @@
 const gulpConfig = {
-    name: "metronic",
+    name: "{theme}",
     desc: "Gulp build config",
-    version: "8.2.0",
+    version: "{version}",
     config: {
         debug: false,
         compile: {
@@ -23,11 +23,11 @@ const gulpConfig = {
             cssSourcemaps: false,
         },
         path: {
-            src: "../src",
-            common_src: "../src",
+            src: "../src/{theme}/{demo}",
+            common_src: "../src/{theme}/{demo}",
             node_modules: "node_modules",
         },
-        dist: ["../../../public/assets"],
+        dist: ["../../../themes/{theme}/html/assets"],
     },
     build: {
         base: {
@@ -94,11 +94,11 @@ const gulpConfig = {
                             styles: [
                                 "{$config.path.node_modules}/@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css",
                             ],
-                            scripts: [                                
+                            scripts: [
                                 "{$config.path.node_modules}/@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js",
                                 "{$config.path.common_src}/js/vendors/plugins/tempus-dominus.init.js",
                                 "{$config.path.node_modules}/@eonasdan/tempus-dominus/dist/locales/de.js",
-                                "{$config.path.node_modules}/@eonasdan/tempus-dominus/dist/plugins/customDateFormat.js",                                
+                                "{$config.path.node_modules}/@eonasdan/tempus-dominus/dist/plugins/customDateFormat.js",
                             ],
                         },
                         flatpickr: {
@@ -280,17 +280,7 @@ const gulpConfig = {
                 draggable: {
                     src: {
                         scripts: [
-                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/swappable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
-                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js",
+                            "{$config.path.node_modules}/@shopify/draggable/build/umd/index.min.js",
                         ],
                     },
                     dist: {
diff --git a/resources/_keenthemes/tools/gulp/compile.js b/resources/_keenthemes/tools/gulp/compile.js
index 05c188e..3ec65d3 100644
--- a/resources/_keenthemes/tools/gulp/compile.js
+++ b/resources/_keenthemes/tools/gulp/compile.js
@@ -72,7 +72,7 @@ if (typeof docsOption !== 'undefined') {
         theme += '.net-core'
     }
     build.config.path.src = '../../../themes/docs/{theme}/src';
-    build.config.dist = ['../../../themes/docs/{theme}/dist/assets'];
+    build.config.dist = ['../../../themes/docs/{theme}/assets'];
 }
 
 
diff --git a/resources/_keenthemes/tools/package.json b/resources/_keenthemes/tools/package.json
index da2b878..418cb5b 100644
--- a/resources/_keenthemes/tools/package.json
+++ b/resources/_keenthemes/tools/package.json
@@ -1,43 +1,42 @@
 {
     "name": "keenthemes",
-    "version": "1.0.0",
+    "version": "8.2.1",
     "author": "Keenthemes",
-    "license": "ISC",
     "homepage": "https://keenthemes.com/",
     "description": "Packages used by yarn, npm, gulp and webpack",
     "main": "gulpfile.js",
     "type": "module",
     "dependencies": {
-        "@ckeditor/ckeditor5-alignment": "38.1.1",
-        "@ckeditor/ckeditor5-build-balloon": "38.1.1",
-        "@ckeditor/ckeditor5-build-balloon-block": "38.1.1",
-        "@ckeditor/ckeditor5-build-classic": "38.1.1",
-        "@ckeditor/ckeditor5-build-decoupled-document": "38.1.1",
-        "@ckeditor/ckeditor5-build-inline": "38.1.1",
-        "@eonasdan/tempus-dominus": "^6.7.11",
-        "@fortawesome/fontawesome-free": "^6.4.0",
+        "@ckeditor/ckeditor5-alignment": "40.0.0",
+        "@ckeditor/ckeditor5-build-balloon": "40.0.0",
+        "@ckeditor/ckeditor5-build-balloon-block": "40.0.0",
+        "@ckeditor/ckeditor5-build-classic": "40.0.0",
+        "@ckeditor/ckeditor5-build-decoupled-document": "40.0.0",
+        "@ckeditor/ckeditor5-build-inline": "40.0.0",
+        "@eonasdan/tempus-dominus": "^6.7.16",
+        "@fortawesome/fontawesome-free": "^6.4.2",
         "@popperjs/core": "2.11.8",
-        "@shopify/draggable": "^1.0.0-beta.12",
-        "@yaireo/tagify": "^4.17.8",
+        "@shopify/draggable": "^1.1.3",
+        "@yaireo/tagify": "^4.17.9",
         "acorn": "^8.10.0",
-        "apexcharts": "3.41.0",
+        "apexcharts": "3.44.0",
         "autosize": "^6.0.1",
-        "axios": "^1.4.0",
-        "bootstrap": "5.3.0",
+        "axios": "^1.6.0",
+        "bootstrap": "5.3.2",
         "bootstrap-cookie-alert": "^1.2.2",
         "bootstrap-daterangepicker": "^3.1.0",
-        "bootstrap-icons": "^1.10.5",
+        "bootstrap-icons": "^1.11.1",
         "bootstrap-maxlength": "^1.10.1",
         "bootstrap-multiselectsplitter": "^1.0.4",
         "chalk": "^5.3.0",
-        "chart.js": "^4.3.0",
+        "chart.js": "^4.4.0",
         "clipboard": "^2.0.11",
-        "countup.js": "^2.7.0",
-        "cropperjs": "^1.5.13",
-        "datatables.net": "^1.13.5",
-        "datatables.net-bs5": "^1.13.5",
-        "datatables.net-buttons": "^2.4.1",
-        "datatables.net-buttons-bs5": "^2.4.1",
+        "countup.js": "^2.8.0",
+        "cropperjs": "^1.6.1",
+        "datatables.net": "^1.13.6",
+        "datatables.net-bs5": "^1.13.6",
+        "datatables.net-buttons": "^2.4.2",
+        "datatables.net-buttons-bs5": "^2.4.2",
         "datatables.net-colreorder": "^1.7.0",
         "datatables.net-colreorder-bs5": "^1.7.0",
         "datatables.net-datetime": "^1.5.0",
@@ -45,13 +44,13 @@
         "datatables.net-fixedcolumns-bs5": "^4.3.0",
         "datatables.net-fixedheader": "^3.4.0",
         "datatables.net-fixedheader-bs5": "^3.4.0",
-        "datatables.net-plugins": "^1.13.5",
+        "datatables.net-plugins": "^1.13.6",
         "datatables.net-responsive": "^2.5.0",
         "datatables.net-responsive-bs5": "^2.5.0",
-        "datatables.net-rowgroup": "^1.4.0",
-        "datatables.net-rowgroup-bs5": "^1.4.0",
-        "datatables.net-rowreorder": "^1.4.0",
-        "datatables.net-rowreorder-bs5": "^1.4.0",
+        "datatables.net-rowgroup": "^1.4.1",
+        "datatables.net-rowgroup-bs5": "^1.4.1",
+        "datatables.net-rowreorder": "^1.4.1",
+        "datatables.net-rowreorder-bs5": "^1.4.1",
         "datatables.net-scroller": "^2.2.0",
         "datatables.net-scroller-bs5": "^2.2.0",
         "datatables.net-select": "^1.7.0",
@@ -60,44 +59,42 @@
         "es6-promise": "^4.2.8",
         "es6-promise-polyfill": "^1.2.0",
         "es6-shim": "^0.35.8",
-        "esri-leaflet": "^3.0.10",
+        "esri-leaflet": "^3.0.11",
         "esri-leaflet-geocoder": "^3.1.4",
         "flatpickr": "^4.6.13",
-        "flot": "^4.2.3",
+        "flot": "^4.2.6",
         "fslightbox": "^3.4.1",
         "fullcalendar": "^5.8.0",
-        "handlebars": "^4.7.7",
+        "handlebars": "^4.7.8",
         "inputmask": "^5.0.8",
         "jkanban": "^1.3.1",
-        "jquery": "3.7.0",
+        "jquery": "3.7.1",
         "jquery.repeater": "^1.2.1",
-        "jstree": "^3.3.15",
+        "jstree": "^3.3.16",
         "jszip": "^3.10.1",
         "leaflet": "^1.9.4",
         "line-awesome": "^1.3.0",
         "lozad": "^1.16.0",
         "moment": "^2.29.4",
         "nouislider": "^15.7.1",
-        "npm": "^9.8.0",
+        "npm": "^10.2.1",
         "pdfmake": "^0.2.7",
         "prism-themes": "^1.9.0",
         "prismjs": "^1.29.0",
         "quill": "^1.3.7",
         "select2": "^4.1.0-rc.0",
         "smooth-scroll": "^16.1.3",
-        "sweetalert2": "11.7.16",
+        "sweetalert2": "11.4.8",
         "tiny-slider": "^2.9.4",
         "tinymce": "^5.8.2",
         "toastr": "^2.1.4",
         "typed.js": "2.0.16",
-        "vis-timeline": "^7.7.2",
+        "vis-timeline": "^7.7.3",
         "wnumb": "^1.2.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.22.5",
-        "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-        "@babel/preset-env": "^7.22.5",
-        "@babel/register": "^7.22.5",
+        "@babel/core": "^7.23.0",
+        "@babel/runtime": "^7.23.1",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^5.2.7",
         "css-minimizer-webpack-plugin": "^5.0.1",
@@ -105,6 +102,7 @@
         "extract-loader": "^5.1.0",
         "file-loader": "^6.2.0",
         "fs-extra": "^11.1.1",
+        "glob": "^10.3.10",
         "gulp": "^4.0.2",
         "gulp-clean-css": "^4.3.0",
         "gulp-concat": "^2.6.1",
@@ -121,22 +119,19 @@
         "merge-stream": "^2.0.0",
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-loader": "^7.3.3",
-        "pretty": "^2.0.0",
         "replace-in-file-webpack-plugin": "^1.0.6",
         "rtlcss-webpack-plugin": "^4.0.7",
         "sass-loader": "^13.3.2",
-        "script-loader": "^0.7.2",
         "terser-webpack-plugin": "^5.3.9",
         "url-loader": "^4.1.1",
-        "webpack": "^5.88.1",
+        "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1",
         "webpack-exclude-assets-plugin": "^0.1.1",
         "webpack-log": "^3.0.2",
         "webpack-merge-and-include-globally": "^2.3.4",
         "webpack-messages": "^2.0.4",
-        "yargs": "^17.7.2",
-        "yarn-install": "^1.0.0"
+        "yargs": "^17.7.2"
     },
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
diff --git a/resources/mix/.DS_Store b/resources/mix/.DS_Store
new file mode 100644
index 0000000..12579a1
Binary files /dev/null and b/resources/mix/.DS_Store differ
diff --git a/resources/mix/plugins.js b/resources/mix/plugins.js
index 5d6e604..3bb242b 100644
--- a/resources/mix/plugins.js
+++ b/resources/mix/plugins.js
@@ -36,12 +36,12 @@ module.exports = [
 
     // Select2 - Select2 is a jQuery based replacement for select boxes: https://select2.org/
     'node_modules/select2/dist/js/select2.full.js',
-    'resources/_keenthemes/src/js/vendors/plugins/select2.init.js',
+    'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/select2.init.js',
 
     // FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
-    "resources/_keenthemes/src/plugins/@form-validation/umd/bundle/popular.min.js",
-    "resources/_keenthemes/src/plugins/@form-validation/umd/bundle/full.min.js",
-    "resources/_keenthemes/src/plugins/@form-validation/umd/plugin-bootstrap5/index.min.js",
+    "resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/bundle/popular.min.js",
+    "resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/bundle/full.min.js",
+    "resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/plugin-bootstrap5/index.min.js",
 
     // Bootstrap Maxlength - This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text: https://github.com/mimo84/bootstrap-maxlength
     'node_modules/bootstrap-maxlength/src/bootstrap-maxlength.js',
@@ -64,7 +64,7 @@ module.exports = [
 
     // DropzoneJS -  is an open source library that provides drag'n'drop file uploads with image previews: https://www.dropzonejs.com/
     'node_modules/dropzone/dist/min/dropzone.min.js',
-    'resources/_keenthemes/src/js/vendors/plugins/dropzone.init.js',
+    'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/dropzone.init.js',
 
     // Quill - is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API: https://quilljs.com/
     'node_modules/quill/dist/quill.js',
@@ -74,7 +74,7 @@ module.exports = [
     'node_modules/@yaireo/tagify/dist/tagify.min.js',
 
     // Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
-    'resources/_keenthemes/src/plugins/toastr/build/toastr.min.js',
+    'resources/_keenthemes/src/metronic/demo1/plugins/toastr/build/toastr.min.js',
 
     // Apexcharts - modern charting library that helps developers to create beautiful and interactive visualizations for web pages: https://apexcharts.com/
     'node_modules/apexcharts/dist/apexcharts.min.js',
@@ -84,7 +84,7 @@ module.exports = [
 
     // Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes: https://sweetalert2.github.io/
     'node_modules/sweetalert2/dist/sweetalert2.min.js',
-    'resources/_keenthemes/src/js/vendors/plugins/sweetalert2.init.js',
+    'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/sweetalert2.init.js',
 
     // CountUp.js - is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
     'node_modules/countup.js/dist/countUp.umd.js',
diff --git a/resources/mix/plugins.scss b/resources/mix/plugins.scss
index f112cb7..6269f8f 100644
--- a/resources/mix/plugins.scss
+++ b/resources/mix/plugins.scss
@@ -12,7 +12,7 @@
 @import "~apexcharts/dist/apexcharts.css";
 
 // FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
-@import "../_keenthemes/src/plugins/@form-validation/umd/styles/index.css";
+@import "../_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/styles/index.css";
 
 // Bootstrap Daterangepicker
 @import "~bootstrap-daterangepicker/daterangepicker.css";
@@ -35,7 +35,7 @@
 @import "~@yaireo/tagify/dist/tagify.css";
 
 // Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
-@import "../_keenthemes/src/plugins/toastr/build/toastr.css";
+@import "../_keenthemes/src/metronic/demo1/plugins/toastr/build/toastr.css";
 
 // Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes: https://sweetalert2.github.io/
 @import "~sweetalert2/dist/sweetalert2.css";
@@ -56,12 +56,12 @@
 @import "~tiny-slider/dist/tiny-slider.css";
 
 // Keenthemes Vendors customization
-@import "../_keenthemes/src/sass/plugins";
+@import "../_keenthemes/src/metronic/demo1/sass/plugins";
 
 // Keenicons - High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Metronic elements
-@import "../_keenthemes/src/plugins/keenicons/duotone/style.css";
-@import "../_keenthemes/src/plugins/keenicons/outline/style.css";
-@import "../_keenthemes/src/plugins/keenicons/solid/style.css";
+@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/duotone/style.css";
+@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/outline/style.css";
+@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/solid/style.css";
 
 // Tempus Dominus is the successor to the very popular Eonasdan/bootstrap-datetimepicker. The plugin provide a robust date and time picker designed to integrate into your Bootstrap project.
 @import "@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css";
diff --git a/resources/mix/scripts.js b/resources/mix/scripts.js
index 759d52a..b355ef2 100644
--- a/resources/mix/scripts.js
+++ b/resources/mix/scripts.js
@@ -1,8 +1,8 @@
 const glob = require('glob');
 
 // Keenthemes' plugins
-var componentJs = glob.sync(`resources/_keenthemes/src/js/components/*.js`) || [];
-var coreLayoutJs = glob.sync(`resources/_keenthemes/src/js/layout/*.js`) || [];
+var componentJs = glob.sync(`resources/_keenthemes/src/metronic/demo1/js/components/*.js`) || [];
+var coreLayoutJs = glob.sync(`resources/_keenthemes/src/metronic/demo1/js/layout/*.js`) || [];
 
 module.exports = [
     ...componentJs,
diff --git a/resources/mix/vendors/.DS_Store b/resources/mix/vendors/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/resources/mix/vendors/.DS_Store differ
diff --git a/resources/mix/vendors/datatables/datatables.bundle.js b/resources/mix/vendors/datatables/datatables.bundle.js
index 4829498..c4bb294 100644
--- a/resources/mix/vendors/datatables/datatables.bundle.js
+++ b/resources/mix/vendors/datatables/datatables.bundle.js
@@ -2,7 +2,7 @@
 module.exports = [
     'node_modules/datatables.net/js/jquery.dataTables.js',
     'node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js',
-    'resources/_keenthemes/src/js/vendors/plugins/datatables.init.js',
+    'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/datatables.init.js',
     'node_modules/jszip/dist/jszip.js',
     'node_modules/pdfmake/build/pdfmake.js',
     'node_modules/pdfmake/build/vfs_fonts.js',
diff --git a/resources/mix/vendors/draggable/draggable.bundle.js b/resources/mix/vendors/draggable/draggable.bundle.js
index 3c7834c..c109d12 100644
--- a/resources/mix/vendors/draggable/draggable.bundle.js
+++ b/resources/mix/vendors/draggable/draggable.bundle.js
@@ -1,15 +1,5 @@
 // Draggable - a lightweight, responsive, modern drag & drop library: https://shopify.github.io/draggable/
 
 module.exports = [
-    'node_modules/@shopify/draggable/lib/draggable.bundle.js',
-    'node_modules/@shopify/draggable/lib/draggable.bundle.legacy.js',
-    'node_modules/@shopify/draggable/lib/draggable.js',
-    'node_modules/@shopify/draggable/lib/sortable.js',
-    'node_modules/@shopify/draggable/lib/droppable.js',
-    'node_modules/@shopify/draggable/lib/swappable.js',
-    'node_modules/@shopify/draggable/lib/plugins.js',
-    'node_modules/@shopify/draggable/lib/plugins/collidable.js',
-    'node_modules/@shopify/draggable/lib/plugins/resize-mirror.js',
-    'node_modules/@shopify/draggable/lib/plugins/snappable.js',
-    'node_modules/@shopify/draggable/lib/plugins/swap-animation.js'
+    'node_modules/@shopify/draggable/build/umd',
 ];
diff --git a/resources/mix/vendors/fullcalendar/fullcalendar.bundle.js b/resources/mix/vendors/fullcalendar/fullcalendar.bundle.js
index a2a6304..e65cf60 100644
--- a/resources/mix/vendors/fullcalendar/fullcalendar.bundle.js
+++ b/resources/mix/vendors/fullcalendar/fullcalendar.bundle.js
@@ -1,5 +1,4 @@
-
 module.exports = [
     'node_modules/fullcalendar/main.js',
     'node_modules/fullcalendar/locales-all.min.js',
-];
+];
\ No newline at end of file
diff --git a/resources/mix/vendors/fullcalendar/fullcalendar.bundle.scss b/resources/mix/vendors/fullcalendar/fullcalendar.bundle.scss
index 792cc11..6e3f31a 100644
--- a/resources/mix/vendors/fullcalendar/fullcalendar.bundle.scss
+++ b/resources/mix/vendors/fullcalendar/fullcalendar.bundle.scss
@@ -1 +1 @@
-@import "fullcalendar/main.min.css";
+@import "~fullcalendar/main.min.css";
\ No newline at end of file
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 879d9a8..a13a38a 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -1,3 +1,3 @@
 <x-system-layout>
-    @include('pages.system.not_found')
+    @include('pages/system.not_found')
 </x-system-layout>
diff --git a/resources/views/errors/500.blade.php b/resources/views/errors/500.blade.php
index 8e1ab2e..43fe841 100644
--- a/resources/views/errors/500.blade.php
+++ b/resources/views/errors/500.blade.php
@@ -1,3 +1,3 @@
 <x-system-layout>
-    @include('pages.system.error')
+    @include('pages/system.error')
 </x-system-layout>
diff --git a/resources/views/layout/_auth.blade.php b/resources/views/layout/_auth.blade.php
index 144880a..e938cbf 100644
--- a/resources/views/layout/_auth.blade.php
+++ b/resources/views/layout/_auth.blade.php
@@ -47,7 +47,7 @@
                     <!--end::Logo-->
 
                     <!--begin::Image-->
-                    <img class="d-none d-lg-block mx-auto w-500px mb-10 mb-lg-20" src="{{ image('misc/bg-login.png') }}" alt=""/>
+                    <img class="d-none d-lg-block mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20" src="{{ image('misc/auth-screens.png') }}" alt=""/>
                     <!--end::Image-->
 
                     <!--begin::Title-->
diff --git a/resources/views/layout/master.blade.php b/resources/views/layout/master.blade.php
index ac01768..6dd123e 100644
--- a/resources/views/layout/master.blade.php
+++ b/resources/views/layout/master.blade.php
@@ -38,8 +38,7 @@
     @endforeach
     <!--end::Custom Stylesheets-->
 
-    @yield('styles')
-
+    @livewireStyles
 </head>
 <!--end::Head-->
 
@@ -69,13 +68,10 @@
 @endforeach
 <!--end::Custom Javascript-->
 @stack('scripts')
-@yield('scripts')
-@stack('customscript')
-
 <!--end::Javascript-->
 
 <script>
-    document.addEventListener('livewire:initialized', () => {
+    document.addEventListener('livewire:load', () => {
         Livewire.on('success', (message) => {
             toastr.success(message);
         });
diff --git a/resources/views/layout/partials/header-layout/_footer.blade.php b/resources/views/layout/partials/header-layout/_footer.blade.php
index 34daa56..f4bddb7 100644
--- a/resources/views/layout/partials/header-layout/_footer.blade.php
+++ b/resources/views/layout/partials/header-layout/_footer.blade.php
@@ -3,7 +3,7 @@
 	<!--begin::Footer container-->
 	<div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
 		<!--begin::Copyright-->
-		<div class="text-dark order-2 order-md-1">
+		<div class="text-gray-900 order-2 order-md-1">
 			<span class="text-muted fw-semibold me-1">{{ date('Y') }}&copy;</span>
 			<a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
 		</div>
diff --git a/resources/views/layout/partials/header-layout/_page-title.blade.php b/resources/views/layout/partials/header-layout/_page-title.blade.php
index 3f767aa..f05e777 100644
--- a/resources/views/layout/partials/header-layout/_page-title.blade.php
+++ b/resources/views/layout/partials/header-layout/_page-title.blade.php
@@ -1,7 +1,7 @@
 <!--begin::Page title-->
 <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
 	<!--begin::Title-->
-	<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
+	<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
 		@yield('title')
 	</h1>
 	<!--end::Title-->
diff --git a/resources/views/layout/partials/header-layout/header/_menu/__dashboards.blade.php b/resources/views/layout/partials/header-layout/header/_menu/__dashboards.blade.php
index 288cf6a..78a0226 100644
--- a/resources/views/layout/partials/header-layout/header/_menu/__dashboards.blade.php
+++ b/resources/views/layout/partials/header-layout/header/_menu/__dashboards.blade.php
@@ -80,7 +80,7 @@
 					<div class="menu-item p-0 m-0">
 						<!--begin:Menu link-->
 						<a href="{{ route('dashboard') }}" class="menu-link">
-							<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-dark fs-1') !!}</span>
+							<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-gray-900 fs-1') !!}</span>
 							<span class="d-flex flex-column">
 								<span class="fs-6 fw-bold text-gray-800">Marketing</span>
 								<span class="fs-7 fw-semibold text-muted">Campaings & conversions</span>
diff --git a/resources/views/layout/partials/header-layout/search/partials/_advanced-options.blade.php b/resources/views/layout/partials/header-layout/search/partials/_advanced-options.blade.php
index 7a94dc6..8b17f47 100644
--- a/resources/views/layout/partials/header-layout/search/partials/_advanced-options.blade.php
+++ b/resources/views/layout/partials/header-layout/search/partials/_advanced-options.blade.php
@@ -2,7 +2,7 @@
 <!--begin::Preferences-->
 <form data-kt-search-element="advanced-options-form" class="pt-1 d-none">
 	<!--begin::Heading-->
-	<h3 class="fw-bold text-dark mb-7">Advanced Search</h3>
+	<h3 class="fw-bold text-gray-900 mb-7">Advanced Search</h3>
 	<!--end::Heading-->
 	<!--begin::Input group-->
 	<div class="mb-5">
diff --git a/resources/views/layout/partials/header-layout/search/partials/_form-dropdown.blade.php b/resources/views/layout/partials/header-layout/search/partials/_form-dropdown.blade.php
index 513eee2..50e82f0 100644
--- a/resources/views/layout/partials/header-layout/search/partials/_form-dropdown.blade.php
+++ b/resources/views/layout/partials/header-layout/search/partials/_form-dropdown.blade.php
@@ -10,7 +10,7 @@
 	<!--end::Input-->
 	<!--begin::Spinner-->
 	<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
-		<span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
+		<span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
 	</span>
 	<!--end::Spinner-->
 	<!--begin::Reset-->
diff --git a/resources/views/layout/partials/header-layout/search/partials/_preferences.blade.php b/resources/views/layout/partials/header-layout/search/partials/_preferences.blade.php
index b14daeb..bf9c0ae 100644
--- a/resources/views/layout/partials/header-layout/search/partials/_preferences.blade.php
+++ b/resources/views/layout/partials/header-layout/search/partials/_preferences.blade.php
@@ -3,7 +3,7 @@
 <!--begin::Preferences-->
 <form data-kt-search-element="preferences" class="pt-1 d-none">
 	<!--begin::Heading-->
-	<h3 class="fw-bold text-dark mb-7">Search Preferences</h3>
+	<h3 class="fw-bold text-gray-900 mb-7">Search Preferences</h3>
 	<!--end::Heading-->
 	<!--begin::Input group-->
 	<div class="pb-4 border-bottom">
diff --git a/resources/views/layout/partials/header-layout/search/partials/_results.blade.php b/resources/views/layout/partials/header-layout/search/partials/_results.blade.php
index 0b2c9d4..ba31d9a 100644
--- a/resources/views/layout/partials/header-layout/search/partials/_results.blade.php
+++ b/resources/views/layout/partials/header-layout/search/partials/_results.blade.php
@@ -8,7 +8,7 @@
 		<h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">Users</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-6.jpg') }}" alt="" />
@@ -23,7 +23,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-2.jpg') }}" alt="" />
@@ -38,7 +38,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-9.jpg') }}" alt="" />
@@ -53,7 +53,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-14.jpg') }}" alt="" />
@@ -68,7 +68,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-11.jpg') }}" alt="" />
@@ -86,7 +86,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Customers</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -103,7 +103,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -120,7 +120,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -137,7 +137,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -154,7 +154,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -174,7 +174,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Projects</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getSvgIcon('duotune/general/gen005.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@@ -189,7 +189,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getSvgIcon('duotune/general/gen032.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@@ -204,7 +204,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getSvgIcon('duotune/communication/com012.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@@ -219,7 +219,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getSvgIcon('duotune/communication/com006.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
diff --git a/resources/views/layout/partials/sidebar-layout/_footer.blade.php b/resources/views/layout/partials/sidebar-layout/_footer.blade.php
index 4e6d7b6..419f59b 100644
--- a/resources/views/layout/partials/sidebar-layout/_footer.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/_footer.blade.php
@@ -3,11 +3,24 @@
 	<!--begin::Footer container-->
 	<div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
 		<!--begin::Copyright-->
-		<div class="text-dark order-2 order-md-1">
+		<div class="text-gray-900 order-2 order-md-1">
 			<span class="text-muted fw-semibold me-1">{{ date('Y') }}&copy;</span>
-			<a href="https://putrakuningan.com" target="_blank" class="text-gray-800 text-hover-primary">Daeng Deni Mardaeni</a>
+			<a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
 		</div>
 		<!--end::Copyright-->
+		<!--begin::Menu-->
+		<ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
+			<li class="menu-item">
+				<a href="https://keenthemes.com" target="_blank" class="menu-link px-2">About</a>
+			</li>
+			<li class="menu-item">
+				<a href="https://devs.keenthemes.com" target="_blank" class="menu-link px-2">Support</a>
+			</li>
+			<li class="menu-item">
+				<a href="https://1.envato.market/EA4JP" target="_blank" class="menu-link px-2">Purchase</a>
+			</li>
+		</ul>
+		<!--end::Menu-->
 	</div>
 	<!--end::Footer container-->
 </div>
diff --git a/resources/views/layout/partials/sidebar-layout/_page-title.blade.php b/resources/views/layout/partials/sidebar-layout/_page-title.blade.php
index 3f767aa..f05e777 100644
--- a/resources/views/layout/partials/sidebar-layout/_page-title.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/_page-title.blade.php
@@ -1,7 +1,7 @@
 <!--begin::Page title-->
 <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
 	<!--begin::Title-->
-	<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
+	<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
 		@yield('title')
 	</h1>
 	<!--end::Title-->
diff --git a/resources/views/layout/partials/sidebar-layout/_sidebar.blade.php b/resources/views/layout/partials/sidebar-layout/_sidebar.blade.php
index 6158327..d239312 100644
--- a/resources/views/layout/partials/sidebar-layout/_sidebar.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/_sidebar.blade.php
@@ -2,5 +2,6 @@
 <div id="kt_app_sidebar" class="app-sidebar flex-column" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
 	@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_logo')
 	@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_menu')
+	@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_footer')
 </div>
 <!--end::Sidebar-->
diff --git a/resources/views/layout/partials/sidebar-layout/header/_menu/__dashboards.blade.php b/resources/views/layout/partials/sidebar-layout/header/_menu/__dashboards.blade.php
index 288cf6a..78a0226 100644
--- a/resources/views/layout/partials/sidebar-layout/header/_menu/__dashboards.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/header/_menu/__dashboards.blade.php
@@ -80,7 +80,7 @@
 					<div class="menu-item p-0 m-0">
 						<!--begin:Menu link-->
 						<a href="{{ route('dashboard') }}" class="menu-link">
-							<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-dark fs-1') !!}</span>
+							<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-gray-900 fs-1') !!}</span>
 							<span class="d-flex flex-column">
 								<span class="fs-6 fw-bold text-gray-800">Marketing</span>
 								<span class="fs-7 fw-semibold text-muted">Campaings & conversions</span>
diff --git a/resources/views/layout/partials/sidebar-layout/header/_menu/_menu.blade.php b/resources/views/layout/partials/sidebar-layout/header/_menu/_menu.blade.php
index fd63322..2497e84 100644
--- a/resources/views/layout/partials/sidebar-layout/header/_menu/_menu.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/header/_menu/_menu.blade.php
@@ -3,13 +3,1207 @@
 	<!--begin::Menu-->
 	<div class="menu menu-rounded menu-column menu-lg-row my-5 my-lg-0 align-items-stretch fw-semibold px-2 px-lg-0" id="kt_app_header_menu" data-kt-menu="true">
 		<!--begin:Menu item-->
-		<div class="menu-item here show menu-here-bg menu-lg-down-accordion me-0 me-lg-2">
+		<div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item here show menu-here-bg menu-lg-down-accordion me-0 me-lg-2">
 			<!--begin:Menu link-->
-            <a class="menu-link" href="{{ route('dashboard') }}">Dashboards</a>
+			<span class="menu-link">
+				<span class="menu-title">Dashboards</span>
+				<span class="menu-arrow d-lg-none"></span>
+			</span>
 			<!--end:Menu link-->
+			<!--begin:Menu sub-->
+			<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown p-0 w-100 w-lg-850px">
+				@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/header/_menu/__dashboards')
+			</div>
+			<!--end:Menu sub-->
+		</div>
+		<!--end:Menu item-->
+		<!--begin:Menu item-->
+		<div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion me-0 me-lg-2">
+			<!--begin:Menu link-->
+			<span class="menu-link">
+				<span class="menu-title">Pages</span>
+				<span class="menu-arrow d-lg-none"></span>
+			</span>
+			<!--end:Menu link-->
+			<!--begin:Menu sub-->
+			<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown p-0">
+				@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/header/_menu/__pages')
+			</div>
+			<!--end:Menu sub-->
+		</div>
+		<!--end:Menu item-->
+		<!--begin:Menu item-->
+		<div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2">
+			<!--begin:Menu link-->
+			<span class="menu-link">
+				<span class="menu-title">Apps</span>
+				<span class="menu-arrow d-lg-none"></span>
+			</span>
+			<!--end:Menu link-->
+			<!--begin:Menu sub-->
+			<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-250px">
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('rocket', 'fs-2') !!}</span>
+						<span class="menu-title">Projects</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">My Projects</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">View Project</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Targets</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Budget</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Users</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Files</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Activity</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Settings</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('handcart', 'fs-2') !!}</span>
+						<span class="menu-title">eCommerce</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Catalog</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Products</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Categories</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Add Product</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Edit Product</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Add Category</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Edit Category</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="click" class="menu-item menu-accordion menu-sub-indention">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Sales</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-accordion">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Orders Listing</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Order Details</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Add Order</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Edit Order</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="click" class="menu-item menu-accordion menu-sub-indention">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Customers</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-accordion">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Customers Listing</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Customers Details</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="click" class="menu-item menu-accordion menu-sub-indention">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Reports</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-accordion">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Products Viewed</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Sales</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Returns</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Customer Orders</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Shipping</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Settings</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('chart', 'fs-2') !!}</span>
+						<span class="menu-title">Support Center</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Overview</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Tickets</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Ticket List</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Ticket View</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Tutorials</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Tutorials List</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Tutorials Post</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">FAQ</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Licenses</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Contact Us</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('shield-tick', 'fs-2') !!}</span>
+						<span class="menu-title">User Management</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Users</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Users List</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">View User</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Roles</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Roles List</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">View Roles</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Permissions</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('phone', 'fs-2') !!}</span>
+						<span class="menu-title">Contacts</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Getting Started</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Add Contact</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Edit Contact</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">View Contact</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('basket', 'fs-2') !!}</span>
+						<span class="menu-title">Subscriptions</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Getting Started</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Subscription List</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Add Subscription</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">View Subscription</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('briefcase', 'fs-2') !!}</span>
+						<span class="menu-title">Customers</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Getting Started</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Customer Listing</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Customer Details</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('credit-cart', 'fs-2') !!}</span>
+						<span class="menu-title">Invoice Management</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+							<!--begin:Menu link-->
+							<span class="menu-link">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Profile</span>
+								<span class="menu-arrow"></span>
+							</span>
+							<!--end:Menu link-->
+							<!--begin:Menu sub-->
+							<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Invoice 1</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Invoice 2</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+								<!--begin:Menu item-->
+								<div class="menu-item">
+									<!--begin:Menu link-->
+									<a class="menu-link" href="{{ route('dashboard') }}">
+										<span class="menu-bullet">
+											<span class="bullet bullet-dot"></span>
+										</span>
+										<span class="menu-title">Invoice 3</span>
+									</a>
+									<!--end:Menu link-->
+								</div>
+								<!--end:Menu item-->
+							</div>
+							<!--end:Menu sub-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Create Invoice</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('file-added', 'fs-2') !!}</span>
+						<span class="menu-title">File Manager</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Folders</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Files</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Blank Directory</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Settings</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('sms', 'fs-2') !!}</span>
+						<span class="menu-title">Inbox</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Messages</span>
+								<span class="menu-badge">
+									<span class="badge badge-light-success">3</span>
+								</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Compose</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">View & Reply</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div data-kt-menu-trigger="{default:'click', lg: 'hover'}" data-kt-menu-placement="right-start" class="menu-item menu-lg-down-accordion">
+					<!--begin:Menu link-->
+					<span class="menu-link">
+						<span class="menu-icon">{!! getIcon('message-text-2', 'fs-2') !!}</span>
+						<span class="menu-title">Chat</span>
+						<span class="menu-arrow"></span>
+					</span>
+					<!--end:Menu link-->
+					<!--begin:Menu sub-->
+					<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg px-lg-2 py-lg-4 w-lg-225px">
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Private Chat</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Group Chat</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+						<!--begin:Menu item-->
+						<div class="menu-item">
+							<!--begin:Menu link-->
+							<a class="menu-link" href="{{ route('dashboard') }}">
+								<span class="menu-bullet">
+									<span class="bullet bullet-dot"></span>
+								</span>
+								<span class="menu-title">Drawer Chat</span>
+							</a>
+							<!--end:Menu link-->
+						</div>
+						<!--end:Menu item-->
+					</div>
+					<!--end:Menu sub-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div class="menu-item">
+					<!--begin:Menu link-->
+					<a class="menu-link" href="{{ route('dashboard') }}">
+						<span class="menu-icon">{!! getIcon('calendar-8', 'fs-2') !!}</span>
+						<span class="menu-title">Calendar</span>
+					</a>
+					<!--end:Menu link-->
+				</div>
+				<!--end:Menu item-->
+			</div>
+			<!--end:Menu sub-->
+		</div>
+		<!--end:Menu item-->
+		<!--begin:Menu item-->
+		<div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion me-0 me-lg-2">
+			<!--begin:Menu link-->
+			<span class="menu-link">
+				<span class="menu-title">Layouts</span>
+				<span class="menu-arrow d-lg-none"></span>
+			</span>
+			<!--end:Menu link-->
+			<!--begin:Menu sub-->
+			<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown p-0 w-100 w-lg-850px">
+				@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/header/_menu/__layouts')
+			</div>
+			<!--end:Menu sub-->
+		</div>
+		<!--end:Menu item-->
+		<!--begin:Menu item-->
+		<div data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="bottom-start" class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention me-0 me-lg-2">
+			<!--begin:Menu link-->
+			<span class="menu-link">
+				<span class="menu-title">Help</span>
+				<span class="menu-arrow d-lg-none"></span>
+			</span>
+			<!--end:Menu link-->
+			<!--begin:Menu sub-->
+			<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown px-lg-2 py-lg-4 w-lg-200px">
+				<!--begin:Menu item-->
+				<div class="menu-item">
+					<!--begin:Menu link-->
+					<a class="menu-link" href="https://preview.keenthemes.com/html/metronic/docs/base/utilities" target="_blank" title="Check out over 200 in-house components, plugins and ready for use solutions" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss="click" data-bs-placement="right">
+						<span class="menu-icon">{!! getIcon('rocket', 'fs-2') !!}</span>
+						<span class="menu-title">Components</span>
+					</a>
+					<!--end:Menu link-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div class="menu-item">
+					<!--begin:Menu link-->
+					<a class="menu-link" href="https://preview.keenthemes.com/html/metronic/docs" target="_blank" title="Check out the complete documentation" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss="click" data-bs-placement="right">
+						<span class="menu-icon">{!! getIcon('abstract-26', 'fs-2') !!}</span>
+						<span class="menu-title">Documentation</span>
+					</a>
+					<!--end:Menu link-->
+				</div>
+				<!--end:Menu item-->
+				<!--begin:Menu item-->
+				<div class="menu-item">
+					<!--begin:Menu link-->
+					<a class="menu-link" href="https://preview.keenthemes.com/laravel/metronic/docs/changelog" target="_blank">
+						<span class="menu-icon">{!! getIcon('code', 'fs-2') !!}</span>
+						<span class="menu-title">Changelog v8.2.0</span>
+					</a>
+					<!--end:Menu link-->
+				</div>
+				<!--end:Menu item-->
+			</div>
+			<!--end:Menu sub-->
 		</div>
 		<!--end:Menu item-->
-
 	</div>
 	<!--end::Menu-->
 </div>
diff --git a/resources/views/layout/partials/sidebar-layout/header/_navbar.blade.php b/resources/views/layout/partials/sidebar-layout/header/_navbar.blade.php
index c8cc839..7854fea 100644
--- a/resources/views/layout/partials/sidebar-layout/header/_navbar.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/header/_navbar.blade.php
@@ -1,11 +1,38 @@
 <!--begin::Navbar-->
 <div class="app-navbar flex-shrink-0">
-
+    <!--begin::Search-->
+    <div class="app-navbar-item align-items-stretch ms-1 ms-md-3">
+        @include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/search/_dropdown')
+    </div>
+    <!--end::Search-->
+    <!--begin::Activities-->
+	<div class="app-navbar-item ms-1 ms-md-4">
+        <!--begin::Drawer toggle-->
+		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px" id="kt_activities_toggle">{!! getIcon('messages', 'fs-2') !!}</div>
+        <!--end::Drawer toggle-->
+    </div>
+    <!--end::Activities-->
+    <!--begin::Notifications-->
+	<div class="app-navbar-item ms-1 ms-md-4">
+        <!--begin::Menu- wrapper-->
+		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end" id="kt_menu_item_wow">{!! getIcon('notification-status', 'fs-2') !!}</div>
+        @include('partials/menus/_notifications-menu')
+        <!--end::Menu wrapper-->
+    </div>
+    <!--end::Notifications-->
+    <!--begin::Chat-->
+	<div class="app-navbar-item ms-1 ms-md-4">
+        <!--begin::Menu wrapper-->
+		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px position-relative" id="kt_drawer_chat_toggle">{!! getIcon('message-text-2', 'fs-2') !!} 
+		<span class="bullet bullet-dot bg-success h-6px w-6px position-absolute translate-middle top-0 start-50 animation-blink"></span></div>
+        <!--end::Menu wrapper-->
+    </div>
+    <!--end::Chat-->
     <!--begin::My apps links-->
 	<div class="app-navbar-item ms-1 ms-md-4">
         <!--begin::Menu wrapper-->
-		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">{!! getIcon('night-day', 'theme-light-show fs-2') !!} {!! getIcon('moon', 'theme-dark-show fs-2') !!}</div>
-        @include('partials/theme-mode/__menu')
+		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">{!! getIcon('element-11', 'fs-2') !!}</div>
+        @include('partials/menus/_my-apps-menu')
         <!--end::Menu wrapper-->
     </div>
     <!--end::My apps links-->
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_advanced-options.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_advanced-options.blade.php
index 00b42bc..332be6e 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_advanced-options.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_advanced-options.blade.php
@@ -1,7 +1,7 @@
 <!--begin::Preferences-->
 <form data-kt-search-element="advanced-options-form" class="pt-1 d-none">
 	<!--begin::Heading-->
-	<h3 class="fw-semibold text-dark mb-7">Advanced Search</h3>
+	<h3 class="fw-semibold text-gray-900 mb-7">Advanced Search</h3>
 	<!--end::Heading-->
 	<!--begin::Input group-->
 	<div class="mb-5">
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_empty.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_empty.blade.php
index 9b8bad7..a466e22 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_empty.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_empty.blade.php
@@ -1,13 +1,13 @@
-<!--begin::Empty-->
-<div data-kt-search-element="empty" class="text-center d-none">
-	<!--begin::Icon-->
-	<div class="pt-10 pb-10">{!! getIcon('search-list', 'fs-4x opacity-50') !!}</div>
-	<!--end::Icon-->
-	<!--begin::Message-->
-	<div class="pb-15 fw-semibold">
-		<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
-		<div class="text-muted fs-7">Please try again with a different query</div>
-	</div>
-	<!--end::Message-->
-</div>
-<!--end::Empty-->
\ No newline at end of file
+<!--begin::Empty-->
+<div data-kt-search-element="empty" class="text-center d-none">
+	<!--begin::Icon-->
+	<div class="pt-10 pb-10">{!! getIcon('search-list', 'fs-4x opacity-50') !!}</div>
+	<!--end::Icon-->
+	<!--begin::Message-->
+	<div class="pb-15 fw-semibold">
+		<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
+		<div class="text-muted fs-7">Please try again with a different query</div>
+	</div>
+	<!--end::Message-->
+</div>
+<!--end::Empty-->
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_form-dropdown.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_form-dropdown.blade.php
index edacf65..54be290 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_form-dropdown.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_form-dropdown.blade.php
@@ -1,30 +1,30 @@
-<!--begin::Form-->
-<form data-kt-search-element="form" class="w-100 position-relative mb-3" autocomplete="off">
-<!--begin::Icon-->
-{!! getIcon('magnifier', 'fs-2 text-gray-500 position-absolute top-50 translate-middle-y ms-0') !!} 
-<!--end::Icon-->
-<!--begin::Input-->
-<input type="text" class="search-input form-control form-control-flush ps-10" name="search" value="" placeholder="Search..." data-kt-search-element="input" />
-<!--end::Input-->
-<!--begin::Spinner-->
-<span class="search-spinner position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
-	<span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
-</span>
-<!--end::Spinner-->
-<!--begin::Reset-->
-<span class="search-reset btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
-<!--end::Reset-->
-<!--begin::Toolbar-->
-<div class="position-absolute top-50 end-0 translate-middle-y" data-kt-search-element="toolbar">
-	<!--begin::Preferences toggle-->
-	<div data-kt-search-element="preferences-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1" data-bs-toggle="tooltip" title="Show search preferences">{!! getIcon('setting-2', 'fs-2') !!}</div>
-	<!--end::Preferences toggle-->
-	<!--begin::Advanced search toggle-->
-	<div data-kt-search-element="advanced-options-form-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary" data-bs-toggle="tooltip" title="Show more search options">{!! getIcon('down', 'fs-2') !!}</div>
-	<!--end::Advanced search toggle-->
-</div>
-<!--end::Toolbar--></form>
-<!--end::Form-->
-<!--begin::Separator-->
-<div class="separator border-gray-200 mb-6"></div>
-<!--end::Separator-->
\ No newline at end of file
+<!--begin::Form-->
+<form data-kt-search-element="form" class="w-100 position-relative mb-3" autocomplete="off">
+<!--begin::Icon-->
+{!! getIcon('magnifier', 'fs-2 text-gray-500 position-absolute top-50 translate-middle-y ms-0') !!} 
+<!--end::Icon-->
+<!--begin::Input-->
+<input type="text" class="search-input form-control form-control-flush ps-10" name="search" value="" placeholder="Search..." data-kt-search-element="input" />
+<!--end::Input-->
+<!--begin::Spinner-->
+<span class="search-spinner position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
+	<span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
+</span>
+<!--end::Spinner-->
+<!--begin::Reset-->
+<span class="search-reset btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
+<!--end::Reset-->
+<!--begin::Toolbar-->
+<div class="position-absolute top-50 end-0 translate-middle-y" data-kt-search-element="toolbar">
+	<!--begin::Preferences toggle-->
+	<div data-kt-search-element="preferences-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1" data-bs-toggle="tooltip" title="Show search preferences">{!! getIcon('setting-2', 'fs-2') !!}</div>
+	<!--end::Preferences toggle-->
+	<!--begin::Advanced search toggle-->
+	<div data-kt-search-element="advanced-options-form-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary" data-bs-toggle="tooltip" title="Show more search options">{!! getIcon('down', 'fs-2') !!}</div>
+	<!--end::Advanced search toggle-->
+</div>
+<!--end::Toolbar--></form>
+<!--end::Form-->
+<!--begin::Separator-->
+<div class="separator border-gray-200 mb-6"></div>
+<!--end::Separator-->
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_main.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_main.blade.php
index 59bce32..07ef5cd 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_main.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_main.blade.php
@@ -1,120 +1,120 @@
-<!--begin::Recently viewed-->
-<div class="mb-5" data-kt-search-element="main">
-	<!--begin::Heading-->
-	<div class="d-flex flex-stack fw-semibold mb-4">
-		<!--begin::Label-->
-		<span class="text-muted fs-6 me-2">Recently Searched:</span>
-		<!--end::Label-->
-	</div>
-	<!--end::Heading-->
-	<!--begin::Items-->
-	<div class="scroll-y mh-200px mh-lg-325px">
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('laptop', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">BoomApp by Keenthemes</a>
-				<span class="fs-7 text-muted fw-semibold">#45789</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-simple', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Kept API Project Meeting</a>
-				<span class="fs-7 text-muted fw-semibold">#84050</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"KPI Monitoring App Launch</a>
-				<span class="fs-7 text-muted fw-semibold">#84250</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Project Reference FAQ</a>
-				<span class="fs-7 text-muted fw-semibold">#67945</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('sms', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"FitPro App Development</a>
-				<span class="fs-7 text-muted fw-semibold">#84250</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('bank', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Shopix Mobile App</a>
-				<span class="fs-7 text-muted fw-semibold">#45690</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Landing UI Design" Launch</a>
-				<span class="fs-7 text-muted fw-semibold">#24005</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-	</div>
-	<!--end::Items-->
-</div>
-<!--end::Recently viewed-->
\ No newline at end of file
+<!--begin::Recently viewed-->
+<div class="mb-5" data-kt-search-element="main">
+	<!--begin::Heading-->
+	<div class="d-flex flex-stack fw-semibold mb-4">
+		<!--begin::Label-->
+		<span class="text-muted fs-6 me-2">Recently Searched:</span>
+		<!--end::Label-->
+	</div>
+	<!--end::Heading-->
+	<!--begin::Items-->
+	<div class="scroll-y mh-200px mh-lg-325px">
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('laptop', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">BoomApp by Keenthemes</a>
+				<span class="fs-7 text-muted fw-semibold">#45789</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-simple', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Kept API Project Meeting</a>
+				<span class="fs-7 text-muted fw-semibold">#84050</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"KPI Monitoring App Launch</a>
+				<span class="fs-7 text-muted fw-semibold">#84250</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Project Reference FAQ</a>
+				<span class="fs-7 text-muted fw-semibold">#67945</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('sms', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"FitPro App Development</a>
+				<span class="fs-7 text-muted fw-semibold">#84250</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('bank', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Shopix Mobile App</a>
+				<span class="fs-7 text-muted fw-semibold">#45690</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Landing UI Design" Launch</a>
+				<span class="fs-7 text-muted fw-semibold">#24005</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+	</div>
+	<!--end::Items-->
+</div>
+<!--end::Recently viewed-->
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_preferences.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_preferences.blade.php
index c40390d..36b4479 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_preferences.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_preferences.blade.php
@@ -1,53 +1,53 @@
-<!--begin::Preferences-->
-<form data-kt-search-element="preferences" class="pt-1 d-none">
-	<!--begin::Heading-->
-	<h3 class="fw-semibold text-dark mb-7">Search Preferences</h3>
-	<!--end::Heading-->
-	<!--begin::Input group-->
-	<div class="pb-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Projects</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Targets</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Affiliate Programs</span>
-			<input class="form-check-input" type="checkbox" value="1" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Referrals</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Users</span>
-			<input class="form-check-input" type="checkbox" value="1" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Actions-->
-	<div class="d-flex justify-content-end pt-7">
-		<button type="reset" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2" data-kt-search-element="preferences-dismiss">Cancel</button>
-		<button type="submit" class="btn btn-sm fw-bold btn-primary">Save Changes</button>
-	</div>
-	<!--end::Actions-->
-</form>
-<!--end::Preferences-->
\ No newline at end of file
+<!--begin::Preferences-->
+<form data-kt-search-element="preferences" class="pt-1 d-none">
+	<!--begin::Heading-->
+	<h3 class="fw-semibold text-gray-900 mb-7">Search Preferences</h3>
+	<!--end::Heading-->
+	<!--begin::Input group-->
+	<div class="pb-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Projects</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Targets</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Affiliate Programs</span>
+			<input class="form-check-input" type="checkbox" value="1" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Referrals</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Users</span>
+			<input class="form-check-input" type="checkbox" value="1" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Actions-->
+	<div class="d-flex justify-content-end pt-7">
+		<button type="reset" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2" data-kt-search-element="preferences-dismiss">Cancel</button>
+		<button type="submit" class="btn btn-sm fw-bold btn-primary">Save Changes</button>
+	</div>
+	<!--end::Actions-->
+</form>
+<!--end::Preferences-->
diff --git a/resources/views/layout/partials/sidebar-layout/search/partials/_results.blade.php b/resources/views/layout/partials/sidebar-layout/search/partials/_results.blade.php
index 24b857b..865a7c9 100644
--- a/resources/views/layout/partials/sidebar-layout/search/partials/_results.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/search/partials/_results.blade.php
@@ -6,7 +6,7 @@
 		<h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">Users</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-6.jpg') }}" alt="" />
@@ -21,7 +21,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-2.jpg') }}" alt="" />
@@ -36,7 +36,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-9.jpg') }}" alt="" />
@@ -51,7 +51,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-14.jpg') }}" alt="" />
@@ -66,7 +66,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-11.jpg') }}" alt="" />
@@ -84,7 +84,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Customers</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -101,7 +101,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -118,7 +118,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -135,7 +135,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -152,7 +152,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -172,7 +172,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Projects</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('notepad', 'fs-2 text-primary') !!}</span>
@@ -187,7 +187,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('frame', 'fs-2 text-primary') !!}</span>
@@ -202,7 +202,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('message-text-2', 'fs-2 text-primary') !!}</span>
@@ -217,7 +217,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('profile-circle', 'fs-2 text-primary') !!}</span>
diff --git a/resources/views/layout/partials/sidebar-layout/sidebar/_logo.blade.php b/resources/views/layout/partials/sidebar-layout/sidebar/_logo.blade.php
index e8d19d0..4173b2f 100644
--- a/resources/views/layout/partials/sidebar-layout/sidebar/_logo.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/sidebar/_logo.blade.php
@@ -2,8 +2,8 @@
 <div class="app-sidebar-logo px-6" id="kt_app_sidebar_logo">
 	<!--begin::Logo image-->
 	<a href="{{ route('dashboard') }}">
-		<img alt="Logo" src="{{ image('logos/logo_agi.png') }}" class="h-50px app-sidebar-logo-default" />
-		<img alt="Logo" src="{{ image('logos/logo_agi.png') }}" class="h-20px app-sidebar-logo-minimize" />
+		<img alt="Logo" src="{{ image('logos/default-dark.svg') }}" class="h-25px app-sidebar-logo-default" />
+		<img alt="Logo" src="{{ image('logos/default-small.svg') }}" class="h-20px app-sidebar-logo-minimize" />
 	</a>
 	<!--end::Logo image-->
 	<!--begin::Sidebar toggle-->
@@ -18,7 +18,7 @@
 	<div id="kt_app_sidebar_toggle" class="app-sidebar-toggle btn btn-icon btn-shadow btn-sm btn-color-muted btn-active-color-primary h-30px w-30px position-absolute top-50 start-100 translate-middle rotate" data-kt-toggle="true" data-kt-toggle-state="active" data-kt-toggle-target="body" data-kt-toggle-name="app-sidebar-minimize">{!! getIcon('black-left-line', 'fs-3 rotate-180 ms-1') !!}</div>
 	<script type="text/javascript">
 		var sidebar_toggle = document.getElementById("kt_app_sidebar_toggle");  // Get the sidebar toggle button element
-		@if (isset($_COOKIE["sidebar_minimize_state"]) && $_COOKIE["sidebar_minimize_state"] === "on")
+		@if (isset($_COOKIE["sidebar_minimize_state"]) && $_COOKIE["sidebar_minimize_state"] === "on") 
 			document.body.setAttribute("data-kt-app-sidebar-minimize", "on");  // Set the 'data-kt-app-sidebar-minimize' attribute for the body tag
 			sidebar_toggle.setAttribute("data-kt-toggle-state", "active");  // Set the 'data-kt-toggle-state' attribute for the sidebar toggle button
 			sidebar_toggle.classList.add("active");  // Add the 'active' class to the sidebar toggle button
diff --git a/resources/views/layout/partials/sidebar-layout/sidebar/_menu.blade.php b/resources/views/layout/partials/sidebar-layout/sidebar/_menu.blade.php
index 6bb5f1a..90a1ff7 100644
--- a/resources/views/layout/partials/sidebar-layout/sidebar/_menu.blade.php
+++ b/resources/views/layout/partials/sidebar-layout/sidebar/_menu.blade.php
@@ -1,9 +1,3 @@
-@php
-    $route      = explode('.',Route::currentRouteName());
-	$modules    = file_get_contents(dirname(__FILE__, 4) . '/modules_statuses.json');
-    $module     = json_decode($modules);
-@endphp
-
 <!--begin::sidebar menu-->
 <div class="app-sidebar-menu overflow-hidden flex-column-fluid">
 	<!--begin::Menu wrapper-->
@@ -37,15 +31,6 @@
 				<!--end:Menu sub-->
 			</div>
 			<!--end:Menu item-->
-
-            @foreach($module as $row => $key)
-                @if($key)
-                    @if(file_exists(dirname(__FILE__, 4) . '/Modules/'.$row.'/Resources/views/partials/menu/_root.blade.php'))
-                        @include(strtolower($row).'::partials.menu._root')
-                    @endif
-                @endif
-            @endforeach
-
 			<!--begin:Menu item-->
 			<div class="menu-item pt-5">
 				<!--begin:Menu content-->
@@ -55,33 +40,96 @@
 				<!--end:Menu content-->
 			</div>
 			<!--end:Menu item-->
-            @foreach($module as $row => $key)
-                @if($key)
-                    @if(file_exists(dirname(__FILE__, 4) . '/Modules/'.$row.'/Resources/views/partials/menu/_app.blade.php'))
-                        @include(strtolower($row).'::partials.menu._app')
-                    @endif
-                @endif
-            @endforeach
-
-            @canany(['system.read','system.create','system.update','system.delete'])
-                <!--begin:Menu item-->
-                <div class="menu-item pt-5">
-                    <!--begin:Menu content-->
-                    <div class="menu-content">
-                        <span class="menu-heading fw-bold text-uppercase fs-7">System</span>
-                    </div>
-                    <!--end:Menu content-->
-                </div>
-                <!--end:Menu item-->
-                @foreach($module as $row => $key)
-                    @if($key)
-                        @if(file_exists(dirname(__FILE__, 4) . '/Modules/'.$row.'/Resources/views/partials/menu/_system.blade.php'))
-                            @include(strtolower($row).'::partials.menu._system')
-                        @endif
-                    @endif
-                @endforeach
-            @endcanany
-
+			<!--begin:Menu item-->
+			<div data-kt-menu-trigger="click" class="menu-item menu-accordion {{ request()->routeIs('user-management.*') ? 'here show' : '' }}">
+				<!--begin:Menu link-->
+				<span class="menu-link">
+					<span class="menu-icon">{!! getIcon('abstract-28', 'fs-2') !!}</span>
+					<span class="menu-title">User Management</span>
+					<span class="menu-arrow"></span>
+				</span>
+				<!--end:Menu link-->
+				<!--begin:Menu sub-->
+				<div class="menu-sub menu-sub-accordion">
+					<!--begin:Menu item-->
+					<div class="menu-item">
+						<!--begin:Menu link-->
+						<a class="menu-link {{ request()->routeIs('user-management.users.*') ? 'active' : '' }}" href="{{ route('user-management.users.index') }}">
+							<span class="menu-bullet">
+								<span class="bullet bullet-dot"></span>
+							</span>
+							<span class="menu-title">Users</span>
+						</a>
+						<!--end:Menu link-->
+					</div>
+					<!--end:Menu item-->
+					<!--begin:Menu item-->
+					<div class="menu-item">
+						<!--begin:Menu link-->
+						<a class="menu-link {{ request()->routeIs('user-management.roles.*') ? 'active' : '' }}" href="{{ route('user-management.roles.index') }}">
+							<span class="menu-bullet">
+								<span class="bullet bullet-dot"></span>
+							</span>
+							<span class="menu-title">Roles</span>
+						</a>
+						<!--end:Menu link-->
+					</div>
+					<!--end:Menu item-->
+					<!--begin:Menu item-->
+					<div class="menu-item">
+						<!--begin:Menu link-->
+						<a class="menu-link {{ request()->routeIs('user-management.permissions.*') ? 'active' : '' }}" href="{{ route('user-management.permissions.index') }}">
+							<span class="menu-bullet">
+								<span class="bullet bullet-dot"></span>
+							</span>
+							<span class="menu-title">Permissions</span>
+						</a>
+						<!--end:Menu link-->
+					</div>
+					<!--end:Menu item-->
+				</div>
+				<!--end:Menu sub-->
+			</div>
+			<!--end:Menu item-->
+			<!--begin:Menu item-->
+			<div class="menu-item pt-5">
+				<!--begin:Menu content-->
+				<div class="menu-content">
+					<span class="menu-heading fw-bold text-uppercase fs-7">Help</span>
+				</div>
+				<!--end:Menu content-->
+			</div>
+			<!--end:Menu item-->
+			<!--begin:Menu item-->
+			<div class="menu-item">
+				<!--begin:Menu link-->
+				<a class="menu-link" href="https://preview.keenthemes.com/html/metronic/docs/base/utilities" target="_blank">
+					<span class="menu-icon">{!! getIcon('rocket', 'fs-2') !!}</span>
+					<span class="menu-title">Components</span>
+				</a>
+				<!--end:Menu link-->
+			</div>
+			<!--end:Menu item-->
+			<!--begin:Menu item-->
+			<div class="menu-item">
+				<!--begin:Menu link-->
+				<a class="menu-link" href="https://preview.keenthemes.com/laravel/metronic/docs" target="_blank">
+					<span class="menu-icon">{!! getIcon('abstract-26', 'fs-2') !!}</span>
+					<span class="menu-title">Documentation</span>
+				</a>
+				<!--end:Menu link-->
+			</div>
+			<!--end:Menu item-->
+			<!--begin:Menu item-->
+			<div class="menu-item">
+				<!--begin:Menu link-->
+				<a class="menu-link" href="https://preview.keenthemes.com/laravel/metronic/docs/changelog" target="_blank">
+					<span class="menu-icon">{!! getIcon('code', 'fs-2') !!}</span>
+					<span class="menu-title">Changelog v8.2.0</span>
+				</a>
+				<!--end:Menu link-->
+			</div>
+			<!--end:Menu item-->
 		</div>
 		<!--end::Menu-->
 	</div>
diff --git a/resources/views/livewire/user/add-user-modal.blade.php b/resources/views/livewire/user/add-user-modal.blade.php
index ca03d0a..aa211fa 100644
--- a/resources/views/livewire/user/add-user-modal.blade.php
+++ b/resources/views/livewire/user/add-user-modal.blade.php
@@ -19,6 +19,7 @@
             <div class="modal-body px-5 my-7">
                 <!--begin::Form-->
                 <form id="kt_modal_add_user_form" class="form" action="#" wire:submit.prevent="submit" enctype="multipart/form-data">
+                    <input type="hidden" wire:model.defer="user_id" name="user_id" value="{{ $user_id }}"/>
                     <!--begin::Scroll-->
                     <div class="d-flex flex-column scroll-y px-5 px-lg-10" id="kt_modal_add_user_scroll" data-kt-scroll="true" data-kt-scroll-activate="true" data-kt-scroll-max-height="auto" data-kt-scroll-dependencies="#kt_modal_add_user_header" data-kt-scroll-wrappers="#kt_modal_add_user_scroll" data-kt-scroll-offset="300px">
                         <!--begin::Input group-->
diff --git a/resources/views/pages/apps/user-management/users/show.blade.php b/resources/views/pages/apps/user-management/users/show.blade.php
index bc16e53..42ba4c7 100644
--- a/resources/views/pages/apps/user-management/users/show.blade.php
+++ b/resources/views/pages/apps/user-management/users/show.blade.php
@@ -181,7 +181,7 @@
                             <div class="d-flex">
                                 <img src="{{ image('svg/brand-logos/google-icon.svg') }}" class="w-30px me-6" alt=""/>
                                 <div class="d-flex flex-column">
-                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Google</a>
+                                    <a href="#" class="fs-5 text-gray-900 text-hover-primary fw-bold">Google</a>
                                     <div class="fs-6 fw-semibold text-muted">Plan properly your workflow</div>
                                 </div>
                             </div>
@@ -205,7 +205,7 @@
                             <div class="d-flex">
                                 <img src="{{ image('svg/brand-logos/github.svg') }}" class="w-30px me-6" alt="" />
                                 <div class="d-flex flex-column">
-                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Github</a>
+                                    <a href="#" class="fs-5 text-gray-900 text-hover-primary fw-bold">Github</a>
                                     <div class="fs-6 fw-semibold text-muted">Keep eye on on your Repositories</div>
                                 </div>
                             </div>
@@ -229,7 +229,7 @@
                             <div class="d-flex">
                                 <img src="{{ image('svg/brand-logos/slack-icon.svg') }}" class="w-30px me-6" alt="" />
                                 <div class="d-flex flex-column">
-                                    <a href="#" class="fs-5 text-dark text-hover-primary fw-bold">Slack</a>
+                                    <a href="#" class="fs-5 text-gray-900 text-hover-primary fw-bold">Slack</a>
                                     <div class="fs-6 fw-semibold text-muted">Integrate Projects Discussions</div>
                                 </div>
                             </div>
@@ -516,7 +516,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -543,7 +543,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Weekly Team Stand-Up</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Weekly Team Stand-Up</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -570,7 +570,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Creative Content Initiative</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Creative Content Initiative</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -597,7 +597,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -624,7 +624,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -655,7 +655,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -682,7 +682,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -709,7 +709,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -736,7 +736,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -767,7 +767,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -794,7 +794,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -821,7 +821,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -852,7 +852,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Team Backlog Grooming Session</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Team Backlog Grooming Session</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -879,7 +879,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -906,7 +906,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Sales Pitch Proposal</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sales Pitch Proposal</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -933,7 +933,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Lunch & Learn Catch Up</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lunch & Learn Catch Up</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -964,7 +964,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Sales Pitch Proposal</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sales Pitch Proposal</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -991,7 +991,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Team Backlog Grooming Session</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Team Backlog Grooming Session</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1018,7 +1018,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1045,7 +1045,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Sales Pitch Proposal</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sales Pitch Proposal</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1076,7 +1076,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Creative Content Initiative</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Creative Content Initiative</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1103,7 +1103,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1130,7 +1130,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1157,7 +1157,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1184,7 +1184,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1215,7 +1215,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree Project Estimation Meeting</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1242,7 +1242,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Creative Content Initiative</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Creative Content Initiative</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1269,7 +1269,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Weekly Team Stand-Up</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Weekly Team Stand-Up</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1296,7 +1296,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Development Team Capacity Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Development Team Capacity Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1327,7 +1327,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Marketing Campaign Discussion</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Marketing Campaign Discussion</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1354,7 +1354,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Lunch & Learn Catch Up</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lunch & Learn Catch Up</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1381,7 +1381,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1408,7 +1408,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1435,7 +1435,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1466,7 +1466,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Sales Pitch Proposal</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sales Pitch Proposal</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1493,7 +1493,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dashboard UI/UX Design Review</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1520,7 +1520,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Marketing Campaign Discussion</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Marketing Campaign Discussion</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1551,7 +1551,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Creative Content Initiative</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Creative Content Initiative</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1578,7 +1578,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1605,7 +1605,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Lunch & Learn Catch Up</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lunch & Learn Catch Up</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1632,7 +1632,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Committee Review Approvals</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Committee Review Approvals</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1663,7 +1663,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Marketing Campaign Discussion</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Marketing Campaign Discussion</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1690,7 +1690,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Creative Content Initiative</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Creative Content Initiative</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1717,7 +1717,7 @@
                                             </div>
                                             <!--end::Time-->
                                             <!--begin::Title-->
-                                            <a href="#" class="fs-5 fw-bold text-dark text-hover-primary mb-2">Project Review & Testing</a>
+                                            <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Project Review & Testing</a>
                                             <!--end::Title-->
                                             <!--begin::User-->
                                             <div class="fs-7 text-muted">Lead by
@@ -1770,7 +1770,7 @@
                                 <!--end::Label-->
                                 <!--begin::Details-->
                                 <div class="fw-semibold ms-5">
-                                    <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Create FureStibe branding logo</a>
+                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary">Create FureStibe branding logo</a>
                                     <!--begin::Info-->
                                     <div class="fs-7 text-muted">Due in 1 day
                                         <a href="#">Karina Clark</a>
@@ -1792,7 +1792,7 @@
                                 <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-id="kt-users-tasks">
                                     <!--begin::Header-->
                                     <div class="px-7 py-5">
-                                        <div class="fs-5 text-dark fw-bold">Update Status</div>
+                                        <div class="fs-5 text-gray-900 fw-bold">Update Status</div>
                                     </div>
                                     <!--end::Header-->
                                     <!--begin::Menu separator-->
@@ -1840,7 +1840,7 @@
                                 <!--end::Label-->
                                 <!--begin::Details-->
                                 <div class="fw-semibold ms-5">
-                                    <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Schedule a meeting with FireBear CTO John</a>
+                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary">Schedule a meeting with FireBear CTO John</a>
                                     <!--begin::Info-->
                                     <div class="fs-7 text-muted">Due in 3 days
                                         <a href="#">Rober Doe</a>
@@ -1862,7 +1862,7 @@
                                 <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-id="kt-users-tasks">
                                     <!--begin::Header-->
                                     <div class="px-7 py-5">
-                                        <div class="fs-5 text-dark fw-bold">Update Status</div>
+                                        <div class="fs-5 text-gray-900 fw-bold">Update Status</div>
                                     </div>
                                     <!--end::Header-->
                                     <!--begin::Menu separator-->
@@ -1910,7 +1910,7 @@
                                 <!--end::Label-->
                                 <!--begin::Details-->
                                 <div class="fw-semibold ms-5">
-                                    <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">9 Degree Project Estimation</a>
+                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary">9 Degree Project Estimation</a>
                                     <!--begin::Info-->
                                     <div class="fs-7 text-muted">Due in 1 week
                                         <a href="#">Neil Owen</a>
@@ -1932,7 +1932,7 @@
                                 <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-id="kt-users-tasks">
                                     <!--begin::Header-->
                                     <div class="px-7 py-5">
-                                        <div class="fs-5 text-dark fw-bold">Update Status</div>
+                                        <div class="fs-5 text-gray-900 fw-bold">Update Status</div>
                                     </div>
                                     <!--end::Header-->
                                     <!--begin::Menu separator-->
@@ -1980,7 +1980,7 @@
                                 <!--end::Label-->
                                 <!--begin::Details-->
                                 <div class="fw-semibold ms-5">
-                                    <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Dashboard UI & UX for Leafr CRM</a>
+                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary">Dashboard UI & UX for Leafr CRM</a>
                                     <!--begin::Info-->
                                     <div class="fs-7 text-muted">Due in 1 week
                                         <a href="#">Olivia Wild</a>
@@ -2002,7 +2002,7 @@
                                 <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-id="kt-users-tasks">
                                     <!--begin::Header-->
                                     <div class="px-7 py-5">
-                                        <div class="fs-5 text-dark fw-bold">Update Status</div>
+                                        <div class="fs-5 text-gray-900 fw-bold">Update Status</div>
                                     </div>
                                     <!--end::Header-->
                                     <!--begin::Menu separator-->
@@ -2050,7 +2050,7 @@
                                 <!--end::Label-->
                                 <!--begin::Details-->
                                 <div class="fw-semibold ms-5">
-                                    <a href="#" class="fs-5 fw-bold text-dark text-hover-primary">Mivy App R&D, Meeting with clients</a>
+                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary">Mivy App R&D, Meeting with clients</a>
                                     <!--begin::Info-->
                                     <div class="fs-7 text-muted">Due in 2 weeks
                                         <a href="#">Sean Bean</a>
@@ -2072,7 +2072,7 @@
                                 <div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" data-kt-menu-id="kt-users-tasks">
                                     <!--begin::Header-->
                                     <div class="px-7 py-5">
-                                        <div class="fs-5 text-dark fw-bold">Update Status</div>
+                                        <div class="fs-5 text-gray-900 fw-bold">Update Status</div>
                                     </div>
                                     <!--end::Header-->
                                     <!--begin::Menu separator-->
@@ -2734,28 +2734,28 @@
     <!--end::Layout-->
     <!--begin::Modals-->
     <!--begin::Modal - Update user details-->
-    @include('pages.apps/user-management/users/modals/_update-details')
+    @include('pages/apps/user-management/users/modals/_update-details')
     <!--end::Modal - Update user details-->
     <!--begin::Modal - Add schedule-->
-    @include('pages.apps/user-management/users/modals/_add-schedule')
+    @include('pages/apps/user-management/users/modals/_add-schedule')
     <!--end::Modal - Add schedule-->
     <!--begin::Modal - Add one time password-->
-    @include('pages.apps/user-management/users/modals/_add-one-time-password')
+    @include('pages/apps/user-management/users/modals/_add-one-time-password')
     <!--end::Modal - Add one time password-->
     <!--begin::Modal - Update email-->
-    @include('pages.apps/user-management/users/modals/_update-email')
+    @include('pages/apps/user-management/users/modals/_update-email')
     <!--end::Modal - Update email-->
     <!--begin::Modal - Update password-->
-    @include('pages.apps/user-management/users/modals/_update-password')
+    @include('pages/apps/user-management/users/modals/_update-password')
     <!--end::Modal - Update password-->
     <!--begin::Modal - Update role-->
-    @include('pages.apps/user-management/users/modals/_update-role')
+    @include('pages/apps/user-management/users/modals/_update-role')
     <!--end::Modal - Update role-->
     <!--begin::Modal - Add auth app-->
-    @include('pages.apps/user-management/users/modals/_add-auth-app')
+    @include('pages/apps/user-management/users/modals/_add-auth-app')
     <!--end::Modal - Add auth app-->
     <!--begin::Modal - Add task-->
-    @include('pages.apps/user-management/users/modals/_add-task')
+    @include('pages/apps/user-management/users/modals/_add-task')
     <!--end::Modal - Add task-->
     <!--end::Modals-->
 </x-default-layout>
diff --git a/resources/views/pages/auth/confirm-password.blade.php b/resources/views/pages/auth/confirm-password.blade.php
index 71f8bfe..25ba4cc 100644
--- a/resources/views/pages/auth/confirm-password.blade.php
+++ b/resources/views/pages/auth/confirm-password.blade.php
@@ -6,7 +6,7 @@
     <!--begin::Heading-->
         <div class="text-center mb-10">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">Confirm Password</h1>
+            <h1 class="text-gray-900 fw-bolder mb-3">Confirm Password</h1>
             <!--end::Title-->
             <!--begin::Link-->
             <div class="text-gray-500 fw-semibold fs-6">This is a secure area of the application. Please confirm your password before continuing.</div>
diff --git a/resources/views/pages/auth/forgot-password.blade.php b/resources/views/pages/auth/forgot-password.blade.php
index a69c5ff..c7446a1 100644
--- a/resources/views/pages/auth/forgot-password.blade.php
+++ b/resources/views/pages/auth/forgot-password.blade.php
@@ -6,7 +6,7 @@
         <!--begin::Heading-->
         <div class="text-center mb-10">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">
+            <h1 class="text-gray-900 fw-bolder mb-3">
                 Forgot Password ?
             </h1>
             <!--end::Title-->
diff --git a/resources/views/pages/auth/login.blade.php b/resources/views/pages/auth/login.blade.php
index fb6aae0..2d998d8 100644
--- a/resources/views/pages/auth/login.blade.php
+++ b/resources/views/pages/auth/login.blade.php
@@ -6,7 +6,7 @@
         <!--begin::Heading-->
         <div class="text-center mb-11">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">
+            <h1 class="text-gray-900 fw-bolder mb-3">
                 Sign In
             </h1>
             <!--end::Title-->
diff --git a/resources/views/pages/auth/register.blade.php b/resources/views/pages/auth/register.blade.php
index b4ab66a..ac7b54f 100644
--- a/resources/views/pages/auth/register.blade.php
+++ b/resources/views/pages/auth/register.blade.php
@@ -6,7 +6,7 @@
         <!--begin::Heading-->
         <div class="text-center mb-11">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">
+            <h1 class="text-gray-900 fw-bolder mb-3">
                 Sign Up
             </h1>
             <!--end::Title-->
diff --git a/resources/views/pages/auth/reset-password.blade.php b/resources/views/pages/auth/reset-password.blade.php
index a04eca4..0a09771 100644
--- a/resources/views/pages/auth/reset-password.blade.php
+++ b/resources/views/pages/auth/reset-password.blade.php
@@ -11,7 +11,7 @@
         <!--begin::Heading-->
         <div class="text-center mb-10">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">
+            <h1 class="text-gray-900 fw-bolder mb-3">
                 New Password
             </h1>
             <!--end::Title-->
diff --git a/resources/views/pages/auth/verify-email.blade.php b/resources/views/pages/auth/verify-email.blade.php
index 9b007f9..59c6de1 100644
--- a/resources/views/pages/auth/verify-email.blade.php
+++ b/resources/views/pages/auth/verify-email.blade.php
@@ -4,7 +4,7 @@
 
         <div class="text-center mb-11">
             <!--begin::Title-->
-            <h1 class="text-dark fw-bolder mb-3">Verify Email</h1>
+            <h1 class="text-gray-900 fw-bolder mb-3">Verify Email</h1>
             <!--end::Title-->
             <!--begin::Subtitle-->
             <div class="text-gray-500 fw-semibold fs-6">Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another</div>
diff --git a/resources/views/partials/_drawers.blade.php b/resources/views/partials/_drawers.blade.php
index 3154da2..97fb3a8 100644
--- a/resources/views/partials/_drawers.blade.php
+++ b/resources/views/partials/_drawers.blade.php
@@ -1,5 +1,5 @@
-<!--begin::Drawers-->
-@include('partials/drawers/_activity-drawer')
-@include('partials/drawers/_chat-messenger')
-@include('partials/drawers/_shopping-cart')
-<!--end::Drawers-->
\ No newline at end of file
+<!--begin::Drawers-->
+@include('partials/drawers/_activity-drawer')
+@include('partials/drawers/_chat-messenger')
+@include('partials/drawers/_shopping-cart')
+<!--end::Drawers-->
diff --git a/resources/views/partials/_scrolltop.blade.php b/resources/views/partials/_scrolltop.blade.php
index 7cb78d1..16b7657 100644
--- a/resources/views/partials/_scrolltop.blade.php
+++ b/resources/views/partials/_scrolltop.blade.php
@@ -1,3 +1,3 @@
-<!--begin::Scrolltop-->
-<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">{!! getIcon('arrow-up', '') !!}</div>
-<!--end::Scrolltop-->
\ No newline at end of file
+<!--begin::Scrolltop-->
+<div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">{!! getIcon('arrow-up', '') !!}</div>
+<!--end::Scrolltop-->
diff --git a/resources/views/partials/drawers/_activity-drawer.blade.php b/resources/views/partials/drawers/_activity-drawer.blade.php
index b7a1407..10914ef 100644
--- a/resources/views/partials/drawers/_activity-drawer.blade.php
+++ b/resources/views/partials/drawers/_activity-drawer.blade.php
@@ -3,7 +3,7 @@
 	<div class="card shadow-none border-0 rounded-0">
 		<!--begin::Header-->
 		<div class="card-header" id="kt_activities_header">
-			<h3 class="card-title fw-bold text-dark">Activity Logs</h3>
+			<h3 class="card-title fw-bold text-gray-900">Activity Logs</h3>
 			<div class="card-toolbar">
 				<button type="button" class="btn btn-sm btn-icon btn-active-light-primary me-n5" id="kt_activities_close">{!! getIcon('cross', 'fs-1') !!}</button>
 			</div>
@@ -51,7 +51,7 @@
 								<!--begin::Record-->
 								<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5">
 									<!--begin::Title-->
-									<a href="#" class="fs-5 text-dark text-hover-primary fw-semibold w-375px min-w-200px">Meeting with customer</a>
+									<a href="#" class="fs-5 text-gray-900 text-hover-primary fw-semibold w-375px min-w-200px">Meeting with customer</a>
 									<!--end::Title-->
 									<!--begin::Label-->
 									<div class="min-w-175px pe-2">
@@ -90,7 +90,7 @@
 								<!--begin::Record-->
 								<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-0">
 									<!--begin::Title-->
-									<a href="#" class="fs-5 text-dark text-hover-primary fw-semibold w-375px min-w-200px">Project Delivery Preparation</a>
+									<a href="#" class="fs-5 text-gray-900 text-hover-primary fw-semibold w-375px min-w-200px">Project Delivery Preparation</a>
 									<!--end::Title-->
 									<!--begin::Label-->
 									<div class="min-w-175px">
@@ -207,7 +207,7 @@
 											<a href="#" class="fs-6 text-hover-primary fw-bold">Finance KPI App Guidelines</a>
 											<!--end::Desc-->
 											<!--begin::Number-->
-											<div class="text-gray-400">1.9mb</div>
+											<div class="text-gray-500">1.9mb</div>
 											<!--end::Number-->
 										</div>
 										<!--begin::Info-->
@@ -224,7 +224,7 @@
 											<a href="#" class="fs-6 text-hover-primary fw-bold">Client UAT Testing Results</a>
 											<!--end::Desc-->
 											<!--begin::Number-->
-											<div class="text-gray-400">18kb</div>
+											<div class="text-gray-500">18kb</div>
 											<!--end::Number-->
 										</div>
 										<!--end::Info-->
@@ -241,7 +241,7 @@
 											<a href="#" class="fs-6 text-hover-primary fw-bold">Finance Reports</a>
 											<!--end::Desc-->
 											<!--begin::Number-->
-											<div class="text-gray-400">20mb</div>
+											<div class="text-gray-500">20mb</div>
 											<!--end::Number-->
 										</div>
 										<!--end::Icon-->
diff --git a/resources/views/partials/drawers/_chat-messenger.blade.php b/resources/views/partials/drawers/_chat-messenger.blade.php
index 347821b..8c644c4 100644
--- a/resources/views/partials/drawers/_chat-messenger.blade.php
+++ b/resources/views/partials/drawers/_chat-messenger.blade.php
@@ -109,7 +109,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">How likely are you to recommend our company to your friends and family ?</div>
+						<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-kt-element="message-text">How likely are you to recommend our company to your friends and family ?</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -135,7 +135,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text">Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.</div>
+						<div class="p-5 rounded bg-light-primary text-gray-900 fw-semibold mw-lg-400px text-end" data-kt-element="message-text">Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -161,7 +161,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Ok, Understood!</div>
+						<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Ok, Understood!</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -187,7 +187,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text">You’ll receive notifications for all issues, pull requests!</div>
+						<div class="p-5 rounded bg-light-primary text-gray-900 fw-semibold mw-lg-400px text-end" data-kt-element="message-text">You’ll receive notifications for all issues, pull requests!</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -213,7 +213,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">You can unwatch this repository immediately by clicking here: 
+						<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-kt-element="message-text">You can unwatch this repository immediately by clicking here: 
 						<a href="https://keenthemes.com">Keenthemes.com</a></div>
 						<!--end::Text-->
 					</div>
@@ -240,7 +240,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text">Most purchased Business courses during this sale!</div>
+						<div class="p-5 rounded bg-light-primary text-gray-900 fw-semibold mw-lg-400px text-end" data-kt-element="message-text">Most purchased Business courses during this sale!</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -266,7 +266,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided</div>
+						<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -292,7 +292,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end" data-kt-element="message-text"></div>
+						<div class="p-5 rounded bg-light-primary text-gray-900 fw-semibold mw-lg-400px text-end" data-kt-element="message-text"></div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
@@ -318,7 +318,7 @@
 						</div>
 						<!--end::User-->
 						<!--begin::Text-->
-						<div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Right before vacation season we have the next Big Deal for you.</div>
+						<div class="p-5 rounded bg-light-info text-gray-900 fw-semibold mw-lg-400px text-start" data-kt-element="message-text">Right before vacation season we have the next Big Deal for you.</div>
 						<!--end::Text-->
 					</div>
 					<!--end::Wrapper-->
diff --git a/resources/views/partials/drawers/_shopping-cart.blade.php b/resources/views/partials/drawers/_shopping-cart.blade.php
index 5240936..8ab0b61 100644
--- a/resources/views/partials/drawers/_shopping-cart.blade.php
+++ b/resources/views/partials/drawers/_shopping-cart.blade.php
@@ -25,7 +25,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">Iblender</a>
-						<span class="text-gray-400 fw-semibold d-block">The best kitchen gadget in 2022</span>
+						<span class="text-gray-500 fw-semibold d-block">The best kitchen gadget in 2022</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -56,7 +56,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">SmartCleaner</a>
-						<span class="text-gray-400 fw-semibold d-block">Smart tool for cooking</span>
+						<span class="text-gray-500 fw-semibold d-block">Smart tool for cooking</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -87,7 +87,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">CameraMaxr</a>
-						<span class="text-gray-400 fw-semibold d-block">Professional camera for edge</span>
+						<span class="text-gray-500 fw-semibold d-block">Professional camera for edge</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -118,7 +118,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">$D Printer</a>
-						<span class="text-gray-400 fw-semibold d-block">Manfactoring unique objekts</span>
+						<span class="text-gray-500 fw-semibold d-block">Manfactoring unique objekts</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -149,7 +149,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">MotionWire</a>
-						<span class="text-gray-400 fw-semibold d-block">Perfect animation tool</span>
+						<span class="text-gray-500 fw-semibold d-block">Perfect animation tool</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -180,7 +180,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">Samsung</a>
-						<span class="text-gray-400 fw-semibold d-block">Profile info,Timeline etc</span>
+						<span class="text-gray-500 fw-semibold d-block">Profile info,Timeline etc</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
@@ -211,7 +211,7 @@
 					<!--begin::Section-->
 					<div class="mb-3">
 						<a href="#" class="text-gray-800 text-hover-primary fs-4 fw-bold">$D Printer</a>
-						<span class="text-gray-400 fw-semibold d-block">Manfactoring unique objekts</span>
+						<span class="text-gray-500 fw-semibold d-block">Manfactoring unique objekts</span>
 					</div>
 					<!--end::Section-->
 					<!--begin::Section-->
diff --git a/resources/views/partials/menus/_menu-2.blade.php b/resources/views/partials/menus/_menu-2.blade.php
index b658ee8..ff44dff 100644
--- a/resources/views/partials/menus/_menu-2.blade.php
+++ b/resources/views/partials/menus/_menu-2.blade.php
@@ -1,66 +1,66 @@
-<!--begin::Menu 2-->
-<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
-	<!--begin::Menu item-->
-	<div class="menu-item px-3">
-		<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-	</div>
-	<!--end::Menu item-->
-	<!--begin::Menu separator-->
-	<div class="separator mb-3 opacity-75"></div>
-	<!--end::Menu separator-->
-	<!--begin::Menu item-->
-	<div class="menu-item px-3">
-		<a href="#" class="menu-link px-3">New Ticket</a>
-	</div>
-	<!--end::Menu item-->
-	<!--begin::Menu item-->
-	<div class="menu-item px-3">
-		<a href="#" class="menu-link px-3">New Customer</a>
-	</div>
-	<!--end::Menu item-->
-	<!--begin::Menu item-->
-	<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
-		<!--begin::Menu item-->
-		<a href="#" class="menu-link px-3">
-			<span class="menu-title">New Group</span>
-			<span class="menu-arrow"></span>
-		</a>
-		<!--end::Menu item-->
-		<!--begin::Menu sub-->
-		<div class="menu-sub menu-sub-dropdown w-175px py-4">
-			<!--begin::Menu item-->
-			<div class="menu-item px-3">
-				<a href="#" class="menu-link px-3">Admin Group</a>
-			</div>
-			<!--end::Menu item-->
-			<!--begin::Menu item-->
-			<div class="menu-item px-3">
-				<a href="#" class="menu-link px-3">Staff Group</a>
-			</div>
-			<!--end::Menu item-->
-			<!--begin::Menu item-->
-			<div class="menu-item px-3">
-				<a href="#" class="menu-link px-3">Member Group</a>
-			</div>
-			<!--end::Menu item-->
-		</div>
-		<!--end::Menu sub-->
-	</div>
-	<!--end::Menu item-->
-	<!--begin::Menu item-->
-	<div class="menu-item px-3">
-		<a href="#" class="menu-link px-3">New Contact</a>
-	</div>
-	<!--end::Menu item-->
-	<!--begin::Menu separator-->
-	<div class="separator mt-3 opacity-75"></div>
-	<!--end::Menu separator-->
-	<!--begin::Menu item-->
-	<div class="menu-item px-3">
-		<div class="menu-content px-3 py-3">
-			<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-		</div>
-	</div>
-	<!--end::Menu item-->
-</div>
-<!--end::Menu 2-->
\ No newline at end of file
+<!--begin::Menu 2-->
+<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
+	<!--begin::Menu item-->
+	<div class="menu-item px-3">
+		<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu separator-->
+	<div class="separator mb-3 opacity-75"></div>
+	<!--end::Menu separator-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-3">
+		<a href="#" class="menu-link px-3">New Ticket</a>
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-3">
+		<a href="#" class="menu-link px-3">New Customer</a>
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
+		<!--begin::Menu item-->
+		<a href="#" class="menu-link px-3">
+			<span class="menu-title">New Group</span>
+			<span class="menu-arrow"></span>
+		</a>
+		<!--end::Menu item-->
+		<!--begin::Menu sub-->
+		<div class="menu-sub menu-sub-dropdown w-175px py-4">
+			<!--begin::Menu item-->
+			<div class="menu-item px-3">
+				<a href="#" class="menu-link px-3">Admin Group</a>
+			</div>
+			<!--end::Menu item-->
+			<!--begin::Menu item-->
+			<div class="menu-item px-3">
+				<a href="#" class="menu-link px-3">Staff Group</a>
+			</div>
+			<!--end::Menu item-->
+			<!--begin::Menu item-->
+			<div class="menu-item px-3">
+				<a href="#" class="menu-link px-3">Member Group</a>
+			</div>
+			<!--end::Menu item-->
+		</div>
+		<!--end::Menu sub-->
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-3">
+		<a href="#" class="menu-link px-3">New Contact</a>
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu separator-->
+	<div class="separator mt-3 opacity-75"></div>
+	<!--end::Menu separator-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-3">
+		<div class="menu-content px-3 py-3">
+			<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
+		</div>
+	</div>
+	<!--end::Menu item-->
+</div>
+<!--end::Menu 2-->
diff --git a/resources/views/partials/menus/_notifications-menu.blade.php b/resources/views/partials/menus/_notifications-menu.blade.php
index 466e6a6..97a784f 100644
--- a/resources/views/partials/menus/_notifications-menu.blade.php
+++ b/resources/views/partials/menus/_notifications-menu.blade.php
@@ -39,7 +39,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Project Alice</a>
-							<div class="text-gray-400 fs-7">Phase 1 development</div>
+							<div class="text-gray-500 fs-7">Phase 1 development</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -61,7 +61,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">HR Confidential</a>
-							<div class="text-gray-400 fs-7">Confidential staff documents</div>
+							<div class="text-gray-500 fs-7">Confidential staff documents</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -83,7 +83,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Company HR</a>
-							<div class="text-gray-400 fs-7">Corporeate staff profiles</div>
+							<div class="text-gray-500 fs-7">Corporeate staff profiles</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -105,7 +105,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Project Redux</a>
-							<div class="text-gray-400 fs-7">New frontend admin theme</div>
+							<div class="text-gray-500 fs-7">New frontend admin theme</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -127,7 +127,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Project Breafing</a>
-							<div class="text-gray-400 fs-7">Product launch status update</div>
+							<div class="text-gray-500 fs-7">Product launch status update</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -149,7 +149,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Banner Assets</a>
-							<div class="text-gray-400 fs-7">Collection of banner images</div>
+							<div class="text-gray-500 fs-7">Collection of banner images</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -171,7 +171,7 @@
 						<!--begin::Title-->
 						<div class="mb-0 me-2">
 							<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-bold">Icon Assets</a>
-							<div class="text-gray-400 fs-7">Collection of SVG icons</div>
+							<div class="text-gray-500 fs-7">Collection of SVG icons</div>
 						</div>
 						<!--end::Title-->
 					</div>
@@ -197,7 +197,7 @@
 				<!--begin::Section-->
 				<div class="pt-10 pb-0">
 					<!--begin::Title-->
-					<h3 class="text-dark text-center fw-bold">Get Pro Access</h3>
+					<h3 class="text-gray-900 text-center fw-bold">Get Pro Access</h3>
 					<!--end::Title-->
 					<!--begin::Text-->
 					<div class="text-center text-gray-600 fw-semibold pt-1">Outlines keep you honest. They stoping you from amazing poorly about drive</div>
diff --git a/resources/views/partials/menus/_quick-links-menu.blade.php b/resources/views/partials/menus/_quick-links-menu.blade.php
index 8b14f4a..40c78e7 100644
--- a/resources/views/partials/menus/_quick-links-menu.blade.php
+++ b/resources/views/partials/menus/_quick-links-menu.blade.php
@@ -17,28 +17,28 @@
 		<div class="col-6">
 			<a href="#" class="d-flex flex-column flex-center h-100 p-6 bg-hover-light border-end border-bottom">{!! getSvgIcon('duotune/finance/fin009.svg', 'svg-icon svg-icon-3x svg-icon-primary mb-2') !!}
 			<span class="fs-5 fw-semibold text-gray-800 mb-0">Accounting</span>
-			<span class="fs-7 text-gray-400">eCommerce</span></a>
+			<span class="fs-7 text-gray-500">eCommerce</span></a>
 		</div>
 		<!--end:Item-->
 		<!--begin:Item-->
 		<div class="col-6">
 			<a href="#" class="d-flex flex-column flex-center h-100 p-6 bg-hover-light border-bottom">{!! getSvgIcon('duotune/communication/com010.svg', 'svg-icon svg-icon-3x svg-icon-primary mb-2') !!}
 			<span class="fs-5 fw-semibold text-gray-800 mb-0">Administration</span>
-			<span class="fs-7 text-gray-400">Console</span></a>
+			<span class="fs-7 text-gray-500">Console</span></a>
 		</div>
 		<!--end:Item-->
 		<!--begin:Item-->
 		<div class="col-6">
 			<a href="#" class="d-flex flex-column flex-center h-100 p-6 bg-hover-light border-end">{!! getSvgIcon('duotune/abstract/abs042.svg', 'svg-icon svg-icon-3x svg-icon-primary mb-2') !!}
 			<span class="fs-5 fw-semibold text-gray-800 mb-0">Projects</span>
-			<span class="fs-7 text-gray-400">Pending Tasks</span></a>
+			<span class="fs-7 text-gray-500">Pending Tasks</span></a>
 		</div>
 		<!--end:Item-->
 		<!--begin:Item-->
 		<div class="col-6">
 			<a href="#" class="d-flex flex-column flex-center h-100 p-6 bg-hover-light">{!! getSvgIcon('duotune/finance/fin006.svg', 'svg-icon svg-icon-3x svg-icon-primary mb-2') !!}
 			<span class="fs-5 fw-semibold text-gray-800 mb-0">Customers</span>
-			<span class="fs-7 text-gray-400">Latest cases</span></a>
+			<span class="fs-7 text-gray-500">Latest cases</span></a>
 		</div>
 		<!--end:Item-->
 	</div>
diff --git a/resources/views/partials/menus/_user-account-menu.blade.php b/resources/views/partials/menus/_user-account-menu.blade.php
index 3bd6d45..9a9860a 100644
--- a/resources/views/partials/menus/_user-account-menu.blade.php
+++ b/resources/views/partials/menus/_user-account-menu.blade.php
@@ -33,10 +33,139 @@
         <a href="#" class="menu-link px-5">My Profile</a>
     </div>
     <!--end::Menu item-->
+    <!--begin::Menu item-->
+    <div class="menu-item px-5">
+        <a href="#" class="menu-link px-5">
+            <span class="menu-text">My Projects</span>
+            <span class="menu-badge">
+                <span class="badge badge-light-danger badge-circle fw-bold fs-7">3</span>
+            </span>
+        </a>
+    </div>
+    <!--end::Menu item-->
+    <!--begin::Menu item-->
+    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
+        <a href="#" class="menu-link px-5">
+            <span class="menu-title">My Subscription</span>
+            <span class="menu-arrow"></span>
+        </a>
+        <!--begin::Menu sub-->
+        <div class="menu-sub menu-sub-dropdown w-175px py-4">
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link px-5">Referrals</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link px-5">Billing</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link px-5">Payments</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex flex-stack px-5">Statements
+                    <span class="ms-2 lh-0" data-bs-toggle="tooltip" title="View your statements">{!! getIcon('information-5', 'fs-5') !!}</span></a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu separator-->
+            <div class="separator my-2"></div>
+            <!--end::Menu separator-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <div class="menu-content px-3">
+                    <label class="form-check form-switch form-check-custom form-check-solid">
+						<input class="form-check-input w-30px h-20px" type="checkbox" value="1" checked="checked" name="notifications" />
+                        <span class="form-check-label text-muted fs-7">Notifications</span>
+                    </label>
+                </div>
+            </div>
+            <!--end::Menu item-->
+        </div>
+        <!--end::Menu sub-->
+    </div>
+    <!--end::Menu item-->
+    <!--begin::Menu item-->
+    <div class="menu-item px-5">
+        <a href="#" class="menu-link px-5">My Statements</a>
+    </div>
+    <!--end::Menu item-->
     <!--begin::Menu separator-->
     <div class="separator my-2"></div>
     <!--end::Menu separator-->
     <!--begin::Menu item-->
+    <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
+        <a href="#" class="menu-link px-5">
+			<span class="menu-title position-relative">Mode 
+			<span class="ms-5 position-absolute translate-middle-y top-50 end-0">{!! getIcon('night-day', 'theme-light-show fs-2') !!} {!! getIcon('moon', 'theme-dark-show fs-2') !!}</span></span>
+		</a>
+		@include('partials/theme-mode/__menu')
+	</div>
+	<!--end::Menu item-->
+	<!--begin::Menu item-->
+	<div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
+		<a href="#" class="menu-link px-5">
+            <span class="menu-title position-relative">Language
+                <span class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0">English
+                    <img class="w-15px h-15px rounded-1 ms-2" src="{{ image('flags/united-states.svg') }}" alt="" /></span>
+            </span>
+        </a>
+        <!--begin::Menu sub-->
+        <div class="menu-sub menu-sub-dropdown w-175px py-4">
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex px-5 active">
+                    <span class="symbol symbol-20px me-4">
+                        <img class="rounded-1" src="{{ image('flags/united-states.svg') }}" alt=""/>
+                    </span>
+                    English</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex px-5">
+                    <span class="symbol symbol-20px me-4">
+                        <img class="rounded-1" src="{{ image('flags/spain.svg') }}" alt=""/>
+                    </span>
+                    Spanish</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex px-5">
+                    <span class="symbol symbol-20px me-4">
+                        <img class="rounded-1" src="{{ image('flags/germany.svg') }}" alt=""/>
+                    </span>
+                    German</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex px-5">
+                    <span class="symbol symbol-20px me-4">
+                        <img class="rounded-1" src="{{ image('flags/japan.svg') }}" alt=""/>
+                    </span>
+                    Japanese</a>
+            </div>
+            <!--end::Menu item-->
+            <!--begin::Menu item-->
+            <div class="menu-item px-3">
+                <a href="#" class="menu-link d-flex px-5">
+                    <span class="symbol symbol-20px me-4">
+                        <img class="rounded-1" src="{{ image('flags/france.svg') }}" alt=""/>
+                    </span>
+                    French</a>
+            </div>
+            <!--end::Menu item-->
+        </div>
+        <!--end::Menu sub-->
+    </div>
+    <!--end::Menu item-->
+    <!--begin::Menu item-->
     <div class="menu-item px-5 my-1">
         <a href="#" class="menu-link px-5">Account Settings</a>
     </div>
diff --git a/resources/views/partials/modals/_new-target.blade.php b/resources/views/partials/modals/_new-target.blade.php
index 69c926e..779de72 100644
--- a/resources/views/partials/modals/_new-target.blade.php
+++ b/resources/views/partials/modals/_new-target.blade.php
@@ -1,153 +1,153 @@
-<!--begin::Modal - New Target-->
-<div class="modal fade" id="kt_modal_new_target" tabindex="-1" aria-hidden="true">
-	<!--begin::Modal dialog-->
-	<div class="modal-dialog modal-dialog-centered mw-650px">
-		<!--begin::Modal content-->
-		<div class="modal-content rounded">
-			<!--begin::Modal header-->
-			<div class="modal-header pb-0 border-0 justify-content-end">
-				<!--begin::Close-->
-				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
-				<!--end::Close-->
-			</div>
-			<!--begin::Modal header-->
-			<!--begin::Modal body-->
-			<div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
-				<!--begin:Form-->
-				<form id="kt_modal_new_target_form" class="form" action="#">
-					<!--begin::Heading-->
-					<div class="mb-13 text-center">
-						<!--begin::Title-->
-						<h1 class="mb-3">Set First Target</h1>
-						<!--end::Title-->
-						<!--begin::Description-->
-						<div class="text-muted fw-semibold fs-5">If you need more info, please check 
-						<a href="#" class="fw-bold link-primary">Project Guidelines</a>.</div>
-						<!--end::Description-->
-					</div>
-					<!--end::Heading-->
-					<!--begin::Input group-->
-					<div class="d-flex flex-column mb-8 fv-row">
-						<!--begin::Label-->
-						<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
-							<span class="required">Target Title</span>
-							<span class="ms-1" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></span>
-						</label>
-						<!--end::Label-->
-						<input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="target_title" />
-					</div>
-					<!--end::Input group-->
-					<!--begin::Input group-->
-					<div class="row g-9 mb-8">
-						<!--begin::Col-->
-						<div class="col-md-6 fv-row">
-							<label class="required fs-6 fw-semibold mb-2">Assign</label>
-							<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign">
-								<option value="">Select user...</option>
-								<option value="1">Karina Clark</option>
-								<option value="2">Robert Doe</option>
-								<option value="3">Niel Owen</option>
-								<option value="4">Olivia Wild</option>
-								<option value="5">Sean Bean</option>
-							</select>
-						</div>
-						<!--end::Col-->
-						<!--begin::Col-->
-						<div class="col-md-6 fv-row">
-							<label class="required fs-6 fw-semibold mb-2">Due Date</label>
-							<!--begin::Input-->
-							<div class="position-relative d-flex align-items-center">
-							<!--begin::Icon-->
-							{!! getIcon('calendar-8', 'fs-2 position-absolute mx-4') !!} 
-							<!--end::Icon-->
-							<!--begin::Datepicker-->
-							<input class="form-control form-control-solid ps-12" placeholder="Select a date" name="due_date" />
-							<!--end::Datepicker--></div>
-							<!--end::Input-->
-						</div>
-						<!--end::Col-->
-					</div>
-					<!--end::Input group-->
-					<!--begin::Input group-->
-					<div class="d-flex flex-column mb-8">
-						<label class="fs-6 fw-semibold mb-2">Target Details</label>
-						<textarea class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details"></textarea>
-					</div>
-					<!--end::Input group-->
-					<!--begin::Input group-->
-					<div class="d-flex flex-column mb-8 fv-row">
-						<!--begin::Label-->
-						<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
-							<span class="required">Tags</span>
-							@include('partials/general/_form-tooltip-hint')
-						</label>
-						<!--end::Label-->
-						<input class="form-control form-control-solid" value="Important, Urgent" name="tags" />
-					</div>
-					<!--end::Input group-->
-					<!--begin::Input group-->
-					<div class="d-flex flex-stack mb-8">
-						<!--begin::Label-->
-						<div class="me-5">
-							<label class="fs-6 fw-semibold">Adding Users by Team Members</label>
-							<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
-						</div>
-						<!--end::Label-->
-						<!--begin::Switch-->
-						<label class="form-check form-switch form-check-custom form-check-solid">
-							<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-							<span class="form-check-label fw-semibold text-muted">Allowed</span>
-						</label>
-						<!--end::Switch-->
-					</div>
-					<!--end::Input group-->
-					<!--begin::Input group-->
-					<div class="mb-15 fv-row">
-						<!--begin::Wrapper-->
-						<div class="d-flex flex-stack">
-							<!--begin::Label-->
-							<div class="fw-semibold me-5">
-								<label class="fs-6">Notifications</label>
-								<div class="fs-7 text-muted">Allow Notifications by Phone or Email</div>
-							</div>
-							<!--end::Label-->
-							<!--begin::Checkboxes-->
-							<div class="d-flex align-items-center">
-								<!--begin::Checkbox-->
-								<label class="form-check form-check-custom form-check-solid me-10">
-									<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="email" checked="checked" />
-									<span class="form-check-label fw-semibold">Email</span>
-								</label>
-								<!--end::Checkbox-->
-								<!--begin::Checkbox-->
-								<label class="form-check form-check-custom form-check-solid">
-									<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="phone" />
-									<span class="form-check-label fw-semibold">Phone</span>
-								</label>
-								<!--end::Checkbox-->
-							</div>
-							<!--end::Checkboxes-->
-						</div>
-						<!--end::Wrapper-->
-					</div>
-					<!--end::Input group-->
-					<!--begin::Actions-->
-					<div class="text-center">
-						<button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</button>
-						<button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
-							<span class="indicator-label">Submit</span>
-							<span class="indicator-progress">Please wait... 
-							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
-						</button>
-					</div>
-					<!--end::Actions-->
-				</form>
-				<!--end:Form-->
-			</div>
-			<!--end::Modal body-->
-		</div>
-		<!--end::Modal content-->
-	</div>
-	<!--end::Modal dialog-->
-</div>
-<!--end::Modal - New Target-->
\ No newline at end of file
+<!--begin::Modal - New Target-->
+<div class="modal fade" id="kt_modal_new_target" tabindex="-1" aria-hidden="true">
+	<!--begin::Modal dialog-->
+	<div class="modal-dialog modal-dialog-centered mw-650px">
+		<!--begin::Modal content-->
+		<div class="modal-content rounded">
+			<!--begin::Modal header-->
+			<div class="modal-header pb-0 border-0 justify-content-end">
+				<!--begin::Close-->
+				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
+				<!--end::Close-->
+			</div>
+			<!--begin::Modal header-->
+			<!--begin::Modal body-->
+			<div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
+				<!--begin:Form-->
+				<form id="kt_modal_new_target_form" class="form" action="#">
+					<!--begin::Heading-->
+					<div class="mb-13 text-center">
+						<!--begin::Title-->
+						<h1 class="mb-3">Set First Target</h1>
+						<!--end::Title-->
+						<!--begin::Description-->
+						<div class="text-muted fw-semibold fs-5">If you need more info, please check 
+						<a href="#" class="fw-bold link-primary">Project Guidelines</a>.</div>
+						<!--end::Description-->
+					</div>
+					<!--end::Heading-->
+					<!--begin::Input group-->
+					<div class="d-flex flex-column mb-8 fv-row">
+						<!--begin::Label-->
+						<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
+							<span class="required">Target Title</span>
+							<span class="ms-1" data-bs-toggle="tooltip" title="Specify a target name for future usage and reference"></span>
+						</label>
+						<!--end::Label-->
+						<input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="target_title" />
+					</div>
+					<!--end::Input group-->
+					<!--begin::Input group-->
+					<div class="row g-9 mb-8">
+						<!--begin::Col-->
+						<div class="col-md-6 fv-row">
+							<label class="required fs-6 fw-semibold mb-2">Assign</label>
+							<select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign">
+								<option value="">Select user...</option>
+								<option value="1">Karina Clark</option>
+								<option value="2">Robert Doe</option>
+								<option value="3">Niel Owen</option>
+								<option value="4">Olivia Wild</option>
+								<option value="5">Sean Bean</option>
+							</select>
+						</div>
+						<!--end::Col-->
+						<!--begin::Col-->
+						<div class="col-md-6 fv-row">
+							<label class="required fs-6 fw-semibold mb-2">Due Date</label>
+							<!--begin::Input-->
+							<div class="position-relative d-flex align-items-center">
+							<!--begin::Icon-->
+							{!! getIcon('calendar-8', 'fs-2 position-absolute mx-4') !!} 
+							<!--end::Icon-->
+							<!--begin::Datepicker-->
+							<input class="form-control form-control-solid ps-12" placeholder="Select a date" name="due_date" />
+							<!--end::Datepicker--></div>
+							<!--end::Input-->
+						</div>
+						<!--end::Col-->
+					</div>
+					<!--end::Input group-->
+					<!--begin::Input group-->
+					<div class="d-flex flex-column mb-8">
+						<label class="fs-6 fw-semibold mb-2">Target Details</label>
+						<textarea class="form-control form-control-solid" rows="3" name="target_details" placeholder="Type Target Details"></textarea>
+					</div>
+					<!--end::Input group-->
+					<!--begin::Input group-->
+					<div class="d-flex flex-column mb-8 fv-row">
+						<!--begin::Label-->
+						<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
+							<span class="required">Tags</span>
+							@include('partials/general/_form-tooltip-hint')
+						</label>
+						<!--end::Label-->
+						<input class="form-control form-control-solid" value="Important, Urgent" name="tags" />
+					</div>
+					<!--end::Input group-->
+					<!--begin::Input group-->
+					<div class="d-flex flex-stack mb-8">
+						<!--begin::Label-->
+						<div class="me-5">
+							<label class="fs-6 fw-semibold">Adding Users by Team Members</label>
+							<div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
+						</div>
+						<!--end::Label-->
+						<!--begin::Switch-->
+						<label class="form-check form-switch form-check-custom form-check-solid">
+							<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+							<span class="form-check-label fw-semibold text-muted">Allowed</span>
+						</label>
+						<!--end::Switch-->
+					</div>
+					<!--end::Input group-->
+					<!--begin::Input group-->
+					<div class="mb-15 fv-row">
+						<!--begin::Wrapper-->
+						<div class="d-flex flex-stack">
+							<!--begin::Label-->
+							<div class="fw-semibold me-5">
+								<label class="fs-6">Notifications</label>
+								<div class="fs-7 text-muted">Allow Notifications by Phone or Email</div>
+							</div>
+							<!--end::Label-->
+							<!--begin::Checkboxes-->
+							<div class="d-flex align-items-center">
+								<!--begin::Checkbox-->
+								<label class="form-check form-check-custom form-check-solid me-10">
+									<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="email" checked="checked" />
+									<span class="form-check-label fw-semibold">Email</span>
+								</label>
+								<!--end::Checkbox-->
+								<!--begin::Checkbox-->
+								<label class="form-check form-check-custom form-check-solid">
+									<input class="form-check-input h-20px w-20px" type="checkbox" name="communication[]" value="phone" />
+									<span class="form-check-label fw-semibold">Phone</span>
+								</label>
+								<!--end::Checkbox-->
+							</div>
+							<!--end::Checkboxes-->
+						</div>
+						<!--end::Wrapper-->
+					</div>
+					<!--end::Input group-->
+					<!--begin::Actions-->
+					<div class="text-center">
+						<button type="reset" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</button>
+						<button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary">
+							<span class="indicator-label">Submit</span>
+							<span class="indicator-progress">Please wait... 
+							<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
+						</button>
+					</div>
+					<!--end::Actions-->
+				</form>
+				<!--end:Form-->
+			</div>
+			<!--end::Modal body-->
+		</div>
+		<!--end::Modal content-->
+	</div>
+	<!--end::Modal dialog-->
+</div>
+<!--end::Modal - New Target-->
diff --git a/resources/views/partials/modals/_upgrade-plan.blade.php b/resources/views/partials/modals/_upgrade-plan.blade.php
index 9ed2785..620e970 100644
--- a/resources/views/partials/modals/_upgrade-plan.blade.php
+++ b/resources/views/partials/modals/_upgrade-plan.blade.php
@@ -1,342 +1,342 @@
-<!--begin::Modal - Upgrade plan-->
-<div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true">
-	<!--begin::Modal dialog-->
-	<div class="modal-dialog modal-xl">
-		<!--begin::Modal content-->
-		<div class="modal-content rounded">
-			<!--begin::Modal header-->
-			<div class="modal-header justify-content-end border-0 pb-0">
-				<!--begin::Close-->
-				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
-				<!--end::Close-->
-			</div>
-			<!--end::Modal header-->
-			<!--begin::Modal body-->
-			<div class="modal-body pt-0 pb-15 px-5 px-xl-20">
-				<!--begin::Heading-->
-				<div class="mb-13 text-center">
-					<h1 class="mb-3">Upgrade a Plan</h1>
-					<div class="text-muted fw-semibold fs-5">If you need more info, please check 
-					<a href="#" class="link-primary fw-bold">Pricing Guidelines</a>.</div>
-				</div>
-				<!--end::Heading-->
-				<!--begin::Plans-->
-				<div class="d-flex flex-column">
-					<!--begin::Nav group-->
-					<div class="nav-group nav-group-outline mx-auto" data-kt-buttons="true">
-						<button class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3 me-2 active" data-kt-plan="month">Monthly</button>
-						<button class="btn btn-color-gray-400 btn-active btn-active-secondary px-6 py-3" data-kt-plan="annual">Annual</button>
-					</div>
-					<!--end::Nav group-->
-					<!--begin::Row-->
-					<div class="row mt-10">
-						<!--begin::Col-->
-						<div class="col-lg-6 mb-10 mb-lg-0">
-							<!--begin::Tabs-->
-							<div class="nav flex-column">
-								<!--begin::Tab link-->
-								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 active mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_startup">
-									<!--end::Description-->
-									<div class="d-flex align-items-center me-2">
-										<!--begin::Radio-->
-										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
-											<input class="form-check-input" type="radio" name="plan" checked="checked" value="startup" />
-										</div>
-										<!--end::Radio-->
-										<!--begin::Info-->
-										<div class="flex-grow-1">
-											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Startup</div>
-											<div class="fw-semibold opacity-75">Best for startups</div>
-										</div>
-										<!--end::Info-->
-									</div>
-									<!--end::Description-->
-									<!--begin::Price-->
-									<div class="ms-5">
-										<span class="mb-2">$</span>
-										<span class="fs-3x fw-bold" data-kt-plan-price-month="39" data-kt-plan-price-annual="399">39</span>
-										<span class="fs-7 opacity-50">/ 
-										<span data-kt-element="period">Mon</span></span>
-									</div>
-									<!--end::Price-->
-								</label>
-								<!--end::Tab link-->
-								<!--begin::Tab link-->
-								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_advanced">
-									<!--end::Description-->
-									<div class="d-flex align-items-center me-2">
-										<!--begin::Radio-->
-										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
-											<input class="form-check-input" type="radio" name="plan" value="advanced" />
-										</div>
-										<!--end::Radio-->
-										<!--begin::Info-->
-										<div class="flex-grow-1">
-											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Advanced</div>
-											<div class="fw-semibold opacity-75">Best for 100+ team size</div>
-										</div>
-										<!--end::Info-->
-									</div>
-									<!--end::Description-->
-									<!--begin::Price-->
-									<div class="ms-5">
-										<span class="mb-2">$</span>
-										<span class="fs-3x fw-bold" data-kt-plan-price-month="339" data-kt-plan-price-annual="3399">339</span>
-										<span class="fs-7 opacity-50">/ 
-										<span data-kt-element="period">Mon</span></span>
-									</div>
-									<!--end::Price-->
-								</label>
-								<!--end::Tab link-->
-								<!--begin::Tab link-->
-								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_enterprise">
-									<!--end::Description-->
-									<div class="d-flex align-items-center me-2">
-										<!--begin::Radio-->
-										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
-											<input class="form-check-input" type="radio" name="plan" value="enterprise" />
-										</div>
-										<!--end::Radio-->
-										<!--begin::Info-->
-										<div class="flex-grow-1">
-											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Enterprise 
-											<span class="badge badge-light-success ms-2 py-2 px-3 fs-7">Popular</span></div>
-											<div class="fw-semibold opacity-75">Best value for 1000+ team</div>
-										</div>
-										<!--end::Info-->
-									</div>
-									<!--end::Description-->
-									<!--begin::Price-->
-									<div class="ms-5">
-										<span class="mb-2">$</span>
-										<span class="fs-3x fw-bold" data-kt-plan-price-month="999" data-kt-plan-price-annual="9999">999</span>
-										<span class="fs-7 opacity-50">/ 
-										<span data-kt-element="period">Mon</span></span>
-									</div>
-									<!--end::Price-->
-								</label>
-								<!--end::Tab link-->
-								<!--begin::Tab link-->
-								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_custom">
-									<!--end::Description-->
-									<div class="d-flex align-items-center me-2">
-										<!--begin::Radio-->
-										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
-											<input class="form-check-input" type="radio" name="plan" value="custom" />
-										</div>
-										<!--end::Radio-->
-										<!--begin::Info-->
-										<div class="flex-grow-1">
-											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Custom</div>
-											<div class="fw-semibold opacity-75">Requet a custom license</div>
-										</div>
-										<!--end::Info-->
-									</div>
-									<!--end::Description-->
-									<!--begin::Price-->
-									<div class="ms-5">
-										<a href="#" class="btn btn-sm btn-success">Contact Us</a>
-									</div>
-									<!--end::Price-->
-								</label>
-								<!--end::Tab link-->
-							</div>
-							<!--end::Tabs-->
-						</div>
-						<!--end::Col-->
-						<!--begin::Col-->
-						<div class="col-lg-6">
-							<!--begin::Tab content-->
-							<div class="tab-content rounded h-100 bg-light p-10">
-								<!--begin::Tab Pane-->
-								<div class="tab-pane fade show active" id="kt_upgrade_plan_startup">
-									<!--begin::Heading-->
-									<div class="pb-5">
-										<h2 class="fw-bold text-dark">What’s in Startup Plan?</h2>
-										<div class="text-muted fw-semibold">Optimal for 10+ team size and new startup</div>
-									</div>
-									<!--end::Heading-->
-									<!--begin::Body-->
-									<div class="pt-1">
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Finance Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Accounting Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-									</div>
-									<!--end::Body-->
-								</div>
-								<!--end::Tab Pane-->
-								<!--begin::Tab Pane-->
-								<div class="tab-pane fade" id="kt_upgrade_plan_advanced">
-									<!--begin::Heading-->
-									<div class="pb-5">
-										<h2 class="fw-bold text-dark">What’s in Startup Plan?</h2>
-										<div class="text-muted fw-semibold">Optimal for 100+ team size and grown company</div>
-									</div>
-									<!--end::Heading-->
-									<!--begin::Body-->
-									<div class="pt-1">
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center">
-										<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
-										<!--end::Item-->
-									</div>
-									<!--end::Body-->
-								</div>
-								<!--end::Tab Pane-->
-								<!--begin::Tab Pane-->
-								<div class="tab-pane fade" id="kt_upgrade_plan_enterprise">
-									<!--begin::Heading-->
-									<div class="pb-5">
-										<h2 class="fw-bold text-dark">What’s in Startup Plan?</h2>
-										<div class="text-muted fw-semibold">Optimal for 1000+ team and enterpise</div>
-									</div>
-									<!--end::Heading-->
-									<!--begin::Body-->
-									<div class="pt-1">
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-									</div>
-									<!--end::Body-->
-								</div>
-								<!--end::Tab Pane-->
-								<!--begin::Tab Pane-->
-								<div class="tab-pane fade" id="kt_upgrade_plan_custom">
-									<!--begin::Heading-->
-									<div class="pb-5">
-										<h2 class="fw-bold text-dark">What’s in Startup Plan?</h2>
-										<div class="text-muted fw-semibold">Optimal for corporations</div>
-									</div>
-									<!--end::Heading-->
-									<!--begin::Body-->
-									<div class="pt-1">
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center mb-7">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-										<!--begin::Item-->
-										<div class="d-flex align-items-center">
-										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
-										<!--end::Item-->
-									</div>
-									<!--end::Body-->
-								</div>
-								<!--end::Tab Pane-->
-							</div>
-							<!--end::Tab content-->
-						</div>
-						<!--end::Col-->
-					</div>
-					<!--end::Row-->
-				</div>
-				<!--end::Plans-->
-				<!--begin::Actions-->
-				<div class="d-flex flex-center flex-row-fluid pt-12">
-					<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
-					<button type="submit" class="btn btn-primary" id="kt_modal_upgrade_plan_btn">
-						@include('partials/general/_button-indicator')
-					</button>
-				</div>
-				<!--end::Actions-->
-			</div>
-			<!--end::Modal body-->
-		</div>
-		<!--end::Modal content-->
-	</div>
-	<!--end::Modal dialog-->
-</div>
-<!--end::Modal - Upgrade plan-->
\ No newline at end of file
+<!--begin::Modal - Upgrade plan-->
+<div class="modal fade" id="kt_modal_upgrade_plan" tabindex="-1" aria-hidden="true">
+	<!--begin::Modal dialog-->
+	<div class="modal-dialog modal-xl">
+		<!--begin::Modal content-->
+		<div class="modal-content rounded">
+			<!--begin::Modal header-->
+			<div class="modal-header justify-content-end border-0 pb-0">
+				<!--begin::Close-->
+				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
+				<!--end::Close-->
+			</div>
+			<!--end::Modal header-->
+			<!--begin::Modal body-->
+			<div class="modal-body pt-0 pb-15 px-5 px-xl-20">
+				<!--begin::Heading-->
+				<div class="mb-13 text-center">
+					<h1 class="mb-3">Upgrade a Plan</h1>
+					<div class="text-muted fw-semibold fs-5">If you need more info, please check 
+					<a href="#" class="link-primary fw-bold">Pricing Guidelines</a>.</div>
+				</div>
+				<!--end::Heading-->
+				<!--begin::Plans-->
+				<div class="d-flex flex-column">
+					<!--begin::Nav group-->
+					<div class="nav-group nav-group-outline mx-auto" data-kt-buttons="true">
+						<button class="btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3 me-2 active" data-kt-plan="month">Monthly</button>
+						<button class="btn btn-color-gray-500 btn-active btn-active-secondary px-6 py-3" data-kt-plan="annual">Annual</button>
+					</div>
+					<!--end::Nav group-->
+					<!--begin::Row-->
+					<div class="row mt-10">
+						<!--begin::Col-->
+						<div class="col-lg-6 mb-10 mb-lg-0">
+							<!--begin::Tabs-->
+							<div class="nav flex-column">
+								<!--begin::Tab link-->
+								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 active mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_startup">
+									<!--end::Description-->
+									<div class="d-flex align-items-center me-2">
+										<!--begin::Radio-->
+										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
+											<input class="form-check-input" type="radio" name="plan" checked="checked" value="startup" />
+										</div>
+										<!--end::Radio-->
+										<!--begin::Info-->
+										<div class="flex-grow-1">
+											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Startup</div>
+											<div class="fw-semibold opacity-75">Best for startups</div>
+										</div>
+										<!--end::Info-->
+									</div>
+									<!--end::Description-->
+									<!--begin::Price-->
+									<div class="ms-5">
+										<span class="mb-2">$</span>
+										<span class="fs-3x fw-bold" data-kt-plan-price-month="39" data-kt-plan-price-annual="399">39</span>
+										<span class="fs-7 opacity-50">/ 
+										<span data-kt-element="period">Mon</span></span>
+									</div>
+									<!--end::Price-->
+								</label>
+								<!--end::Tab link-->
+								<!--begin::Tab link-->
+								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_advanced">
+									<!--end::Description-->
+									<div class="d-flex align-items-center me-2">
+										<!--begin::Radio-->
+										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
+											<input class="form-check-input" type="radio" name="plan" value="advanced" />
+										</div>
+										<!--end::Radio-->
+										<!--begin::Info-->
+										<div class="flex-grow-1">
+											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Advanced</div>
+											<div class="fw-semibold opacity-75">Best for 100+ team size</div>
+										</div>
+										<!--end::Info-->
+									</div>
+									<!--end::Description-->
+									<!--begin::Price-->
+									<div class="ms-5">
+										<span class="mb-2">$</span>
+										<span class="fs-3x fw-bold" data-kt-plan-price-month="339" data-kt-plan-price-annual="3399">339</span>
+										<span class="fs-7 opacity-50">/ 
+										<span data-kt-element="period">Mon</span></span>
+									</div>
+									<!--end::Price-->
+								</label>
+								<!--end::Tab link-->
+								<!--begin::Tab link-->
+								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_enterprise">
+									<!--end::Description-->
+									<div class="d-flex align-items-center me-2">
+										<!--begin::Radio-->
+										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
+											<input class="form-check-input" type="radio" name="plan" value="enterprise" />
+										</div>
+										<!--end::Radio-->
+										<!--begin::Info-->
+										<div class="flex-grow-1">
+											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Enterprise 
+											<span class="badge badge-light-success ms-2 py-2 px-3 fs-7">Popular</span></div>
+											<div class="fw-semibold opacity-75">Best value for 1000+ team</div>
+										</div>
+										<!--end::Info-->
+									</div>
+									<!--end::Description-->
+									<!--begin::Price-->
+									<div class="ms-5">
+										<span class="mb-2">$</span>
+										<span class="fs-3x fw-bold" data-kt-plan-price-month="999" data-kt-plan-price-annual="9999">999</span>
+										<span class="fs-7 opacity-50">/ 
+										<span data-kt-element="period">Mon</span></span>
+									</div>
+									<!--end::Price-->
+								</label>
+								<!--end::Tab link-->
+								<!--begin::Tab link-->
+								<label class="nav-link btn btn-outline btn-outline-dashed btn-color-dark btn-active btn-active-primary d-flex flex-stack text-start p-6 mb-6" data-bs-toggle="tab" data-bs-target="#kt_upgrade_plan_custom">
+									<!--end::Description-->
+									<div class="d-flex align-items-center me-2">
+										<!--begin::Radio-->
+										<div class="form-check form-check-custom form-check-solid form-check-success flex-shrink-0 me-6">
+											<input class="form-check-input" type="radio" name="plan" value="custom" />
+										</div>
+										<!--end::Radio-->
+										<!--begin::Info-->
+										<div class="flex-grow-1">
+											<div class="d-flex align-items-center fs-2 fw-bold flex-wrap">Custom</div>
+											<div class="fw-semibold opacity-75">Requet a custom license</div>
+										</div>
+										<!--end::Info-->
+									</div>
+									<!--end::Description-->
+									<!--begin::Price-->
+									<div class="ms-5">
+										<a href="#" class="btn btn-sm btn-success">Contact Us</a>
+									</div>
+									<!--end::Price-->
+								</label>
+								<!--end::Tab link-->
+							</div>
+							<!--end::Tabs-->
+						</div>
+						<!--end::Col-->
+						<!--begin::Col-->
+						<div class="col-lg-6">
+							<!--begin::Tab content-->
+							<div class="tab-content rounded h-100 bg-light p-10">
+								<!--begin::Tab Pane-->
+								<div class="tab-pane fade show active" id="kt_upgrade_plan_startup">
+									<!--begin::Heading-->
+									<div class="pb-5">
+										<h2 class="fw-bold text-gray-900">What’s in Startup Plan?</h2>
+										<div class="text-muted fw-semibold">Optimal for 10+ team size and new startup</div>
+									</div>
+									<!--end::Heading-->
+									<!--begin::Body-->
+									<div class="pt-1">
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Finance Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Accounting Module</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+									</div>
+									<!--end::Body-->
+								</div>
+								<!--end::Tab Pane-->
+								<!--begin::Tab Pane-->
+								<div class="tab-pane fade" id="kt_upgrade_plan_advanced">
+									<!--begin::Heading-->
+									<div class="pb-5">
+										<h2 class="fw-bold text-gray-900">What’s in Startup Plan?</h2>
+										<div class="text-muted fw-semibold">Optimal for 100+ team size and grown company</div>
+									</div>
+									<!--end::Heading-->
+									<!--begin::Body-->
+									<div class="pt-1">
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Network Platform</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center">
+										<span class="fw-semibold fs-5 text-muted flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('cross-circle', 'fs-1') !!}</div>
+										<!--end::Item-->
+									</div>
+									<!--end::Body-->
+								</div>
+								<!--end::Tab Pane-->
+								<!--begin::Tab Pane-->
+								<div class="tab-pane fade" id="kt_upgrade_plan_enterprise">
+									<!--begin::Heading-->
+									<div class="pb-5">
+										<h2 class="fw-bold text-gray-900">What’s in Startup Plan?</h2>
+										<div class="text-muted fw-semibold">Optimal for 1000+ team and enterpise</div>
+									</div>
+									<!--end::Heading-->
+									<!--begin::Body-->
+									<div class="pt-1">
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 10 Active Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Up to 30 Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+									</div>
+									<!--end::Body-->
+								</div>
+								<!--end::Tab Pane-->
+								<!--begin::Tab Pane-->
+								<div class="tab-pane fade" id="kt_upgrade_plan_custom">
+									<!--begin::Heading-->
+									<div class="pb-5">
+										<h2 class="fw-bold text-gray-900">What’s in Startup Plan?</h2>
+										<div class="text-muted fw-semibold">Optimal for corporations</div>
+									</div>
+									<!--end::Heading-->
+									<!--begin::Body-->
+									<div class="pt-1">
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Users</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Project Integrations</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Analytics Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Finance Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Accounting Module</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center mb-7">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Network Platform</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+										<!--begin::Item-->
+										<div class="d-flex align-items-center">
+										<span class="fw-semibold fs-5 text-gray-700 flex-grow-1">Unlimited Cloud Space</span>{!! getIcon('check-circle', 'fs-1 text-success') !!}</div>
+										<!--end::Item-->
+									</div>
+									<!--end::Body-->
+								</div>
+								<!--end::Tab Pane-->
+							</div>
+							<!--end::Tab content-->
+						</div>
+						<!--end::Col-->
+					</div>
+					<!--end::Row-->
+				</div>
+				<!--end::Plans-->
+				<!--begin::Actions-->
+				<div class="d-flex flex-center flex-row-fluid pt-12">
+					<button type="reset" class="btn btn-light me-3" data-bs-dismiss="modal">Cancel</button>
+					<button type="submit" class="btn btn-primary" id="kt_modal_upgrade_plan_btn">
+						@include('partials/general/_button-indicator')
+					</button>
+				</div>
+				<!--end::Actions-->
+			</div>
+			<!--end::Modal body-->
+		</div>
+		<!--end::Modal content-->
+	</div>
+	<!--end::Modal dialog-->
+</div>
+<!--end::Modal - Upgrade plan-->
diff --git a/resources/views/partials/modals/_view-users.blade.php b/resources/views/partials/modals/_view-users.blade.php
index 5c99147..9e36810 100644
--- a/resources/views/partials/modals/_view-users.blade.php
+++ b/resources/views/partials/modals/_view-users.blade.php
@@ -40,7 +40,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Emma Smith 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Emma Smith 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Art Director</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -54,7 +54,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$23,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$23,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -74,7 +74,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Melody Macy 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Melody Macy 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Marketing Analytic</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -88,7 +88,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$50,500</div>
+									<div class="fs-5 fw-bold text-gray-900">$50,500</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -108,7 +108,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Max Smith 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Max Smith 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Software Enginer</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -122,7 +122,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$75,900</div>
+									<div class="fs-5 fw-bold text-gray-900">$75,900</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -142,7 +142,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Sean Bean 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Sean Bean 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Web Developer</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -156,7 +156,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$10,500</div>
+									<div class="fs-5 fw-bold text-gray-900">$10,500</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -176,7 +176,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Brian Cox 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Brian Cox 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">UI/UX Designer</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -190,7 +190,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$20,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$20,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -210,7 +210,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Mikaela Collins 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Mikaela Collins 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Head Of Marketing</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -224,7 +224,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$9,300</div>
+									<div class="fs-5 fw-bold text-gray-900">$9,300</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -244,7 +244,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Francis Mitcham 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Francis Mitcham 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Software Arcitect</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -258,7 +258,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$15,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$15,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -278,7 +278,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Olivia Wild 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Olivia Wild 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">System Admin</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -292,7 +292,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$23,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$23,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -312,7 +312,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Neil Owen 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Neil Owen 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Account Manager</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -326,7 +326,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$45,800</div>
+									<div class="fs-5 fw-bold text-gray-900">$45,800</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -346,7 +346,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Dan Wilson 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Dan Wilson 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Web Desinger</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -360,7 +360,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$90,500</div>
+									<div class="fs-5 fw-bold text-gray-900">$90,500</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -380,7 +380,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Emma Bold 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Emma Bold 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Corporate Finance</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -394,7 +394,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$5,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$5,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -414,7 +414,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Ana Crown 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Ana Crown 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Customer Relationship</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -428,7 +428,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$70,000</div>
+									<div class="fs-5 fw-bold text-gray-900">$70,000</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
@@ -448,7 +448,7 @@
 								<!--begin::Details-->
 								<div class="ms-6">
 									<!--begin::Name-->
-									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-dark text-hover-primary">Robert Doe 
+									<a href="#" class="d-flex align-items-center fs-5 fw-bold text-gray-900 text-hover-primary">Robert Doe 
 									<span class="badge badge-light fs-8 fw-semibold ms-2">Marketing Executive</span></a>
 									<!--end::Name-->
 									<!--begin::Email-->
@@ -462,7 +462,7 @@
 							<div class="d-flex">
 								<!--begin::Sales-->
 								<div class="text-end">
-									<div class="fs-5 fw-bold text-dark">$45,500</div>
+									<div class="fs-5 fw-bold text-gray-900">$45,500</div>
 									<div class="fs-7 text-muted">Sales</div>
 								</div>
 								<!--end::Sales-->
diff --git a/resources/views/partials/modals/create-app/_main.blade.php b/resources/views/partials/modals/create-app/_main.blade.php
index 7514023..942c05a 100644
--- a/resources/views/partials/modals/create-app/_main.blade.php
+++ b/resources/views/partials/modals/create-app/_main.blade.php
@@ -1,182 +1,182 @@
-<!--begin::Modal - Create App-->
-<div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
-	<!--begin::Modal dialog-->
-	<div class="modal-dialog modal-dialog-centered mw-900px">
-		<!--begin::Modal content-->
-		<div class="modal-content">
-			<!--begin::Modal header-->
-			<div class="modal-header">
-				<!--begin::Modal title-->
-				<h2>Create App</h2>
-				<!--end::Modal title-->
-				<!--begin::Close-->
-				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
-				<!--end::Close-->
-			</div>
-			<!--end::Modal header-->
-			<!--begin::Modal body-->
-			<div class="modal-body py-lg-10 px-lg-10">
-				<!--begin::Stepper-->
-				<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_modal_create_app_stepper">
-					<!--begin::Aside-->
-					<div class="d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px">
-						<!--begin::Nav-->
-						<div class="stepper-nav ps-lg-10">
-							<!--begin::Step 1-->
-							<div class="stepper-item current" data-kt-stepper-element="nav">
-								<!--begin::Wrapper-->
-								<div class="stepper-wrapper">
-									<!--begin::Icon-->
-									<div class="stepper-icon w-40px h-40px">
-										<i class="stepper-check fas fa-check"></i>
-										<span class="stepper-number">1</span>
-									</div>
-									<!--end::Icon-->
-									<!--begin::Label-->
-									<div class="stepper-label">
-										<h3 class="stepper-title">Details</h3>
-										<div class="stepper-desc">Name your App</div>
-									</div>
-									<!--end::Label-->
-								</div>
-								<!--end::Wrapper-->
-								<!--begin::Line-->
-								<div class="stepper-line h-40px"></div>
-								<!--end::Line-->
-							</div>
-							<!--end::Step 1-->
-							<!--begin::Step 2-->
-							<div class="stepper-item" data-kt-stepper-element="nav">
-								<!--begin::Wrapper-->
-								<div class="stepper-wrapper">
-									<!--begin::Icon-->
-									<div class="stepper-icon w-40px h-40px">
-										<i class="stepper-check fas fa-check"></i>
-										<span class="stepper-number">2</span>
-									</div>
-									<!--begin::Icon-->
-									<!--begin::Label-->
-									<div class="stepper-label">
-										<h3 class="stepper-title">Frameworks</h3>
-										<div class="stepper-desc">Define your app framework</div>
-									</div>
-									<!--begin::Label-->
-								</div>
-								<!--end::Wrapper-->
-								<!--begin::Line-->
-								<div class="stepper-line h-40px"></div>
-								<!--end::Line-->
-							</div>
-							<!--end::Step 2-->
-							<!--begin::Step 3-->
-							<div class="stepper-item" data-kt-stepper-element="nav">
-								<!--begin::Wrapper-->
-								<div class="stepper-wrapper">
-									<!--begin::Icon-->
-									<div class="stepper-icon w-40px h-40px">
-										<i class="stepper-check fas fa-check"></i>
-										<span class="stepper-number">3</span>
-									</div>
-									<!--end::Icon-->
-									<!--begin::Label-->
-									<div class="stepper-label">
-										<h3 class="stepper-title">Database</h3>
-										<div class="stepper-desc">Select the app database type</div>
-									</div>
-									<!--end::Label-->
-								</div>
-								<!--end::Wrapper-->
-								<!--begin::Line-->
-								<div class="stepper-line h-40px"></div>
-								<!--end::Line-->
-							</div>
-							<!--end::Step 3-->
-							<!--begin::Step 4-->
-							<div class="stepper-item" data-kt-stepper-element="nav">
-								<!--begin::Wrapper-->
-								<div class="stepper-wrapper">
-									<!--begin::Icon-->
-									<div class="stepper-icon w-40px h-40px">
-										<i class="stepper-check fas fa-check"></i>
-										<span class="stepper-number">4</span>
-									</div>
-									<!--end::Icon-->
-									<!--begin::Label-->
-									<div class="stepper-label">
-										<h3 class="stepper-title">Billing</h3>
-										<div class="stepper-desc">Provide payment details</div>
-									</div>
-									<!--end::Label-->
-								</div>
-								<!--end::Wrapper-->
-								<!--begin::Line-->
-								<div class="stepper-line h-40px"></div>
-								<!--end::Line-->
-							</div>
-							<!--end::Step 4-->
-							<!--begin::Step 5-->
-							<div class="stepper-item mark-completed" data-kt-stepper-element="nav">
-								<!--begin::Wrapper-->
-								<div class="stepper-wrapper">
-									<!--begin::Icon-->
-									<div class="stepper-icon w-40px h-40px">
-										<i class="stepper-check fas fa-check"></i>
-										<span class="stepper-number">5</span>
-									</div>
-									<!--end::Icon-->
-									<!--begin::Label-->
-									<div class="stepper-label">
-										<h3 class="stepper-title">Completed</h3>
-										<div class="stepper-desc">Review and Submit</div>
-									</div>
-									<!--end::Label-->
-								</div>
-								<!--end::Wrapper-->
-							</div>
-							<!--end::Step 5-->
-						</div>
-						<!--end::Nav-->
-					</div>
-					<!--begin::Aside-->
-					<!--begin::Content-->
-					<div class="flex-row-fluid py-lg-5 px-lg-15">
-						<!--begin::Form-->
-						<form class="form" novalidate="novalidate" id="kt_modal_create_app_form">
-							@include('partials/modals/create-app/steps/_step-1')
-							@include('partials/modals/create-app/steps/_step-2')
-							@include('partials/modals/create-app/steps/_step-3')
-							@include('partials/modals/create-app/steps/_step-4')
-							@include('partials/modals/create-app/steps/_step-5')
-							<!--begin::Actions-->
-							<div class="d-flex flex-stack pt-10">
-								<!--begin::Wrapper-->
-								<div class="me-2">
-									<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">{!! getIcon('arrow-left', 'fs-3 me-1') !!} Back</button>
-								</div>
-								<!--end::Wrapper-->
-								<!--begin::Wrapper-->
-								<div>
-									<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="submit">
-										<span class="indicator-label">Submit {!! getIcon('arrow-right', 'fs-3 ms-2 me-0') !!}</span>
-										<span class="indicator-progress">Please wait... 
-										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
-									</button>
-									<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue {!! getIcon('arrow-right', 'fs-3 ms-1 me-0') !!}</button>
-								</div>
-								<!--end::Wrapper-->
-							</div>
-							<!--end::Actions-->
-						</form>
-						<!--end::Form-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Stepper-->
-			</div>
-			<!--end::Modal body-->
-		</div>
-		<!--end::Modal content-->
-	</div>
-	<!--end::Modal dialog-->
-</div>
-<!--end::Modal - Create App-->
\ No newline at end of file
+<!--begin::Modal - Create App-->
+<div class="modal fade" id="kt_modal_create_app" tabindex="-1" aria-hidden="true">
+	<!--begin::Modal dialog-->
+	<div class="modal-dialog modal-dialog-centered mw-900px">
+		<!--begin::Modal content-->
+		<div class="modal-content">
+			<!--begin::Modal header-->
+			<div class="modal-header">
+				<!--begin::Modal title-->
+				<h2>Create App</h2>
+				<!--end::Modal title-->
+				<!--begin::Close-->
+				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
+				<!--end::Close-->
+			</div>
+			<!--end::Modal header-->
+			<!--begin::Modal body-->
+			<div class="modal-body py-lg-10 px-lg-10">
+				<!--begin::Stepper-->
+				<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid" id="kt_modal_create_app_stepper">
+					<!--begin::Aside-->
+					<div class="d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px">
+						<!--begin::Nav-->
+						<div class="stepper-nav ps-lg-10">
+							<!--begin::Step 1-->
+							<div class="stepper-item current" data-kt-stepper-element="nav">
+								<!--begin::Wrapper-->
+								<div class="stepper-wrapper">
+									<!--begin::Icon-->
+									<div class="stepper-icon w-40px h-40px">
+										<i class="stepper-check fas fa-check"></i>
+										<span class="stepper-number">1</span>
+									</div>
+									<!--end::Icon-->
+									<!--begin::Label-->
+									<div class="stepper-label">
+										<h3 class="stepper-title">Details</h3>
+										<div class="stepper-desc">Name your App</div>
+									</div>
+									<!--end::Label-->
+								</div>
+								<!--end::Wrapper-->
+								<!--begin::Line-->
+								<div class="stepper-line h-40px"></div>
+								<!--end::Line-->
+							</div>
+							<!--end::Step 1-->
+							<!--begin::Step 2-->
+							<div class="stepper-item" data-kt-stepper-element="nav">
+								<!--begin::Wrapper-->
+								<div class="stepper-wrapper">
+									<!--begin::Icon-->
+									<div class="stepper-icon w-40px h-40px">
+										<i class="stepper-check fas fa-check"></i>
+										<span class="stepper-number">2</span>
+									</div>
+									<!--begin::Icon-->
+									<!--begin::Label-->
+									<div class="stepper-label">
+										<h3 class="stepper-title">Frameworks</h3>
+										<div class="stepper-desc">Define your app framework</div>
+									</div>
+									<!--begin::Label-->
+								</div>
+								<!--end::Wrapper-->
+								<!--begin::Line-->
+								<div class="stepper-line h-40px"></div>
+								<!--end::Line-->
+							</div>
+							<!--end::Step 2-->
+							<!--begin::Step 3-->
+							<div class="stepper-item" data-kt-stepper-element="nav">
+								<!--begin::Wrapper-->
+								<div class="stepper-wrapper">
+									<!--begin::Icon-->
+									<div class="stepper-icon w-40px h-40px">
+										<i class="stepper-check fas fa-check"></i>
+										<span class="stepper-number">3</span>
+									</div>
+									<!--end::Icon-->
+									<!--begin::Label-->
+									<div class="stepper-label">
+										<h3 class="stepper-title">Database</h3>
+										<div class="stepper-desc">Select the app database type</div>
+									</div>
+									<!--end::Label-->
+								</div>
+								<!--end::Wrapper-->
+								<!--begin::Line-->
+								<div class="stepper-line h-40px"></div>
+								<!--end::Line-->
+							</div>
+							<!--end::Step 3-->
+							<!--begin::Step 4-->
+							<div class="stepper-item" data-kt-stepper-element="nav">
+								<!--begin::Wrapper-->
+								<div class="stepper-wrapper">
+									<!--begin::Icon-->
+									<div class="stepper-icon w-40px h-40px">
+										<i class="stepper-check fas fa-check"></i>
+										<span class="stepper-number">4</span>
+									</div>
+									<!--end::Icon-->
+									<!--begin::Label-->
+									<div class="stepper-label">
+										<h3 class="stepper-title">Billing</h3>
+										<div class="stepper-desc">Provide payment details</div>
+									</div>
+									<!--end::Label-->
+								</div>
+								<!--end::Wrapper-->
+								<!--begin::Line-->
+								<div class="stepper-line h-40px"></div>
+								<!--end::Line-->
+							</div>
+							<!--end::Step 4-->
+							<!--begin::Step 5-->
+							<div class="stepper-item mark-completed" data-kt-stepper-element="nav">
+								<!--begin::Wrapper-->
+								<div class="stepper-wrapper">
+									<!--begin::Icon-->
+									<div class="stepper-icon w-40px h-40px">
+										<i class="stepper-check fas fa-check"></i>
+										<span class="stepper-number">5</span>
+									</div>
+									<!--end::Icon-->
+									<!--begin::Label-->
+									<div class="stepper-label">
+										<h3 class="stepper-title">Completed</h3>
+										<div class="stepper-desc">Review and Submit</div>
+									</div>
+									<!--end::Label-->
+								</div>
+								<!--end::Wrapper-->
+							</div>
+							<!--end::Step 5-->
+						</div>
+						<!--end::Nav-->
+					</div>
+					<!--begin::Aside-->
+					<!--begin::Content-->
+					<div class="flex-row-fluid py-lg-5 px-lg-15">
+						<!--begin::Form-->
+						<form class="form" novalidate="novalidate" id="kt_modal_create_app_form">
+							@include('partials/modals/create-app/steps/_step-1')
+							@include('partials/modals/create-app/steps/_step-2')
+							@include('partials/modals/create-app/steps/_step-3')
+							@include('partials/modals/create-app/steps/_step-4')
+							@include('partials/modals/create-app/steps/_step-5')
+							<!--begin::Actions-->
+							<div class="d-flex flex-stack pt-10">
+								<!--begin::Wrapper-->
+								<div class="me-2">
+									<button type="button" class="btn btn-lg btn-light-primary me-3" data-kt-stepper-action="previous">{!! getIcon('arrow-left', 'fs-3 me-1') !!} Back</button>
+								</div>
+								<!--end::Wrapper-->
+								<!--begin::Wrapper-->
+								<div>
+									<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="submit">
+										<span class="indicator-label">Submit {!! getIcon('arrow-right', 'fs-3 ms-2 me-0') !!}</span>
+										<span class="indicator-progress">Please wait... 
+										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
+									</button>
+									<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continue {!! getIcon('arrow-right', 'fs-3 ms-1 me-0') !!}</button>
+								</div>
+								<!--end::Wrapper-->
+							</div>
+							<!--end::Actions-->
+						</form>
+						<!--end::Form-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Stepper-->
+			</div>
+			<!--end::Modal body-->
+		</div>
+		<!--end::Modal content-->
+	</div>
+	<!--end::Modal dialog-->
+</div>
+<!--end::Modal - Create App-->
diff --git a/resources/views/partials/modals/create-app/steps/_step-1.blade.php b/resources/views/partials/modals/create-app/steps/_step-1.blade.php
index e66c863..fe84834 100644
--- a/resources/views/partials/modals/create-app/steps/_step-1.blade.php
+++ b/resources/views/partials/modals/create-app/steps/_step-1.blade.php
@@ -1,105 +1,105 @@
-<!--begin::Step 1-->
-<div class="current" data-kt-stepper-element="content">
-	<div class="w-100">
-		<!--begin::Input group-->
-		<div class="fv-row mb-10">
-			<!--begin::Label-->
-			<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
-				<span class="required">App Name</span>
-				<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your unique app name"></i>
-			</label>
-			<!--end::Label-->
-			<!--begin::Input-->
-			<input type="text" class="form-control form-control-lg form-control-solid" name="name" placeholder="" value="" />
-			<!--end::Input-->
-		</div>
-		<!--end::Input group-->
-		<!--begin::Input group-->
-		<div class="fv-row">
-			<!--begin::Label-->
-			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
-				<span class="required">Category</span>
-				<span class="ms-1" data-bs-toggle="tooltip" title="Select your app category"></span>
-			</label>
-			<!--end::Label-->
-			<!--begin:Options-->
-			<div class="fv-row">
-				<!--begin:Option-->
-				<label class="d-flex flex-stack mb-5 cursor-pointer">
-					<!--begin:Label-->
-					<span class="d-flex align-items-center me-2">
-						<!--begin:Icon-->
-						<span class="symbol symbol-50px me-6">
-							<span class="symbol-label bg-light-primary">{!! getIcon('compass', 'fs-1 text-primary') !!}</span>
-						</span>
-						<!--end:Icon-->
-						<!--begin:Info-->
-						<span class="d-flex flex-column">
-							<span class="fw-bold fs-6">Quick Online Courses</span>
-							<span class="fs-7 text-muted">Creating a clear text structure is just one SEO</span>
-						</span>
-						<!--end:Info-->
-					</span>
-					<!--end:Label-->
-					<!--begin:Input-->
-					<span class="form-check form-check-custom form-check-solid">
-						<input class="form-check-input" type="radio" name="category" value="1" />
-					</span>
-					<!--end:Input-->
-				</label>
-				<!--end::Option-->
-				<!--begin:Option-->
-				<label class="d-flex flex-stack mb-5 cursor-pointer">
-					<!--begin:Label-->
-					<span class="d-flex align-items-center me-2">
-						<!--begin:Icon-->
-						<span class="symbol symbol-50px me-6">
-							<span class="symbol-label bg-light-danger">{!! getIcon('element-11', 'fs-1 text-danger') !!}</span>
-						</span>
-						<!--end:Icon-->
-						<!--begin:Info-->
-						<span class="d-flex flex-column">
-							<span class="fw-bold fs-6">Face to Face Discussions</span>
-							<span class="fs-7 text-muted">Creating a clear text structure is just one aspect</span>
-						</span>
-						<!--end:Info-->
-					</span>
-					<!--end:Label-->
-					<!--begin:Input-->
-					<span class="form-check form-check-custom form-check-solid">
-						<input class="form-check-input" type="radio" name="category" value="2" />
-					</span>
-					<!--end:Input-->
-				</label>
-				<!--end::Option-->
-				<!--begin:Option-->
-				<label class="d-flex flex-stack cursor-pointer">
-					<!--begin:Label-->
-					<span class="d-flex align-items-center me-2">
-						<!--begin:Icon-->
-						<span class="symbol symbol-50px me-6">
-							<span class="symbol-label bg-light-success">{!! getIcon('timer', 'fs-1 text-success') !!}</span>
-						</span>
-						<!--end:Icon-->
-						<!--begin:Info-->
-						<span class="d-flex flex-column">
-							<span class="fw-bold fs-6">Full Intro Training</span>
-							<span class="fs-7 text-muted">Creating a clear text structure copywriting</span>
-						</span>
-						<!--end:Info-->
-					</span>
-					<!--end:Label-->
-					<!--begin:Input-->
-					<span class="form-check form-check-custom form-check-solid">
-						<input class="form-check-input" type="radio" name="category" value="3" />
-					</span>
-					<!--end:Input-->
-				</label>
-				<!--end::Option-->
-			</div>
-			<!--end:Options-->
-		</div>
-		<!--end::Input group-->
-	</div>
-</div>
-<!--end::Step 1-->
\ No newline at end of file
+<!--begin::Step 1-->
+<div class="current" data-kt-stepper-element="content">
+	<div class="w-100">
+		<!--begin::Input group-->
+		<div class="fv-row mb-10">
+			<!--begin::Label-->
+			<label class="d-flex align-items-center fs-5 fw-semibold mb-2">
+				<span class="required">App Name</span>
+				<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Specify your unique app name"></i>
+			</label>
+			<!--end::Label-->
+			<!--begin::Input-->
+			<input type="text" class="form-control form-control-lg form-control-solid" name="name" placeholder="" value="" />
+			<!--end::Input-->
+		</div>
+		<!--end::Input group-->
+		<!--begin::Input group-->
+		<div class="fv-row">
+			<!--begin::Label-->
+			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
+				<span class="required">Category</span>
+				<span class="ms-1" data-bs-toggle="tooltip" title="Select your app category"></span>
+			</label>
+			<!--end::Label-->
+			<!--begin:Options-->
+			<div class="fv-row">
+				<!--begin:Option-->
+				<label class="d-flex flex-stack mb-5 cursor-pointer">
+					<!--begin:Label-->
+					<span class="d-flex align-items-center me-2">
+						<!--begin:Icon-->
+						<span class="symbol symbol-50px me-6">
+							<span class="symbol-label bg-light-primary">{!! getIcon('compass', 'fs-1 text-primary') !!}</span>
+						</span>
+						<!--end:Icon-->
+						<!--begin:Info-->
+						<span class="d-flex flex-column">
+							<span class="fw-bold fs-6">Quick Online Courses</span>
+							<span class="fs-7 text-muted">Creating a clear text structure is just one SEO</span>
+						</span>
+						<!--end:Info-->
+					</span>
+					<!--end:Label-->
+					<!--begin:Input-->
+					<span class="form-check form-check-custom form-check-solid">
+						<input class="form-check-input" type="radio" name="category" value="1" />
+					</span>
+					<!--end:Input-->
+				</label>
+				<!--end::Option-->
+				<!--begin:Option-->
+				<label class="d-flex flex-stack mb-5 cursor-pointer">
+					<!--begin:Label-->
+					<span class="d-flex align-items-center me-2">
+						<!--begin:Icon-->
+						<span class="symbol symbol-50px me-6">
+							<span class="symbol-label bg-light-danger">{!! getIcon('element-11', 'fs-1 text-danger') !!}</span>
+						</span>
+						<!--end:Icon-->
+						<!--begin:Info-->
+						<span class="d-flex flex-column">
+							<span class="fw-bold fs-6">Face to Face Discussions</span>
+							<span class="fs-7 text-muted">Creating a clear text structure is just one aspect</span>
+						</span>
+						<!--end:Info-->
+					</span>
+					<!--end:Label-->
+					<!--begin:Input-->
+					<span class="form-check form-check-custom form-check-solid">
+						<input class="form-check-input" type="radio" name="category" value="2" />
+					</span>
+					<!--end:Input-->
+				</label>
+				<!--end::Option-->
+				<!--begin:Option-->
+				<label class="d-flex flex-stack cursor-pointer">
+					<!--begin:Label-->
+					<span class="d-flex align-items-center me-2">
+						<!--begin:Icon-->
+						<span class="symbol symbol-50px me-6">
+							<span class="symbol-label bg-light-success">{!! getIcon('timer', 'fs-1 text-success') !!}</span>
+						</span>
+						<!--end:Icon-->
+						<!--begin:Info-->
+						<span class="d-flex flex-column">
+							<span class="fw-bold fs-6">Full Intro Training</span>
+							<span class="fs-7 text-muted">Creating a clear text structure copywriting</span>
+						</span>
+						<!--end:Info-->
+					</span>
+					<!--end:Label-->
+					<!--begin:Input-->
+					<span class="form-check form-check-custom form-check-solid">
+						<input class="form-check-input" type="radio" name="category" value="3" />
+					</span>
+					<!--end:Input-->
+				</label>
+				<!--end::Option-->
+			</div>
+			<!--end:Options-->
+		</div>
+		<!--end::Input group-->
+	</div>
+</div>
+<!--end::Step 1-->
diff --git a/resources/views/partials/modals/create-app/steps/_step-2.blade.php b/resources/views/partials/modals/create-app/steps/_step-2.blade.php
index d4f6f4d..78c4f34 100644
--- a/resources/views/partials/modals/create-app/steps/_step-2.blade.php
+++ b/resources/views/partials/modals/create-app/steps/_step-2.blade.php
@@ -1,120 +1,120 @@
-<!--begin::Step 2-->
-<div data-kt-stepper-element="content">
-	<div class="w-100">
-		<!--begin::Input group-->
-		<div class="fv-row">
-			<!--begin::Label-->
-			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
-				<span class="required">Select Framework</span>
-				<span class="ms-1" data-bs-toggle="tooltip" title="Specify your apps framework"></span>
-			</label>
-			<!--end::Label-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer mb-5">
-				<!--begin:Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin:Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-warning">
-							<i class="fab fa-html5 text-warning fs-2x"></i>
-						</span>
-					</span>
-					<!--end:Icon-->
-					<!--begin:Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">HTML5</span>
-						<span class="fs-7 text-muted">Base Web Projec</span>
-					</span>
-					<!--end:Info-->
-				</span>
-				<!--end:Label-->
-				<!--begin:Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" checked="checked" name="framework" value="1" />
-				</span>
-				<!--end:Input-->
-			</label>
-			<!--end::Option-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer mb-5">
-				<!--begin:Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin:Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-success">
-							<i class="fab fa-react text-success fs-2x"></i>
-						</span>
-					</span>
-					<!--end:Icon-->
-					<!--begin:Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">ReactJS</span>
-						<span class="fs-7 text-muted">Robust and flexible app framework</span>
-					</span>
-					<!--end:Info-->
-				</span>
-				<!--end:Label-->
-				<!--begin:Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="framework" value="2" />
-				</span>
-				<!--end:Input-->
-			</label>
-			<!--end::Option-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer mb-5">
-				<!--begin:Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin:Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-danger">
-							<i class="fab fa-angular text-danger fs-2x"></i>
-						</span>
-					</span>
-					<!--end:Icon-->
-					<!--begin:Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">Angular</span>
-						<span class="fs-7 text-muted">Powerful data mangement</span>
-					</span>
-					<!--end:Info-->
-				</span>
-				<!--end:Label-->
-				<!--begin:Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="framework" value="3" />
-				</span>
-				<!--end:Input-->
-			</label>
-			<!--end::Option-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer">
-				<!--begin:Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin:Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-primary">
-							<i class="fab fa-vuejs text-primary fs-2x"></i>
-						</span>
-					</span>
-					<!--end:Icon-->
-					<!--begin:Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">Vue</span>
-						<span class="fs-7 text-muted">Lightweight and responsive framework</span>
-					</span>
-					<!--end:Info-->
-				</span>
-				<!--end:Label-->
-				<!--begin:Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="framework" value="4" />
-				</span>
-				<!--end:Input-->
-			</label>
-			<!--end::Option-->
-		</div>
-		<!--end::Input group-->
-	</div>
-</div>
-<!--end::Step 2-->
\ No newline at end of file
+<!--begin::Step 2-->
+<div data-kt-stepper-element="content">
+	<div class="w-100">
+		<!--begin::Input group-->
+		<div class="fv-row">
+			<!--begin::Label-->
+			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
+				<span class="required">Select Framework</span>
+				<span class="ms-1" data-bs-toggle="tooltip" title="Specify your apps framework"></span>
+			</label>
+			<!--end::Label-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer mb-5">
+				<!--begin:Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin:Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-warning">
+							<i class="fab fa-html5 text-warning fs-2x"></i>
+						</span>
+					</span>
+					<!--end:Icon-->
+					<!--begin:Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">HTML5</span>
+						<span class="fs-7 text-muted">Base Web Projec</span>
+					</span>
+					<!--end:Info-->
+				</span>
+				<!--end:Label-->
+				<!--begin:Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" checked="checked" name="framework" value="1" />
+				</span>
+				<!--end:Input-->
+			</label>
+			<!--end::Option-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer mb-5">
+				<!--begin:Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin:Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-success">
+							<i class="fab fa-react text-success fs-2x"></i>
+						</span>
+					</span>
+					<!--end:Icon-->
+					<!--begin:Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">ReactJS</span>
+						<span class="fs-7 text-muted">Robust and flexible app framework</span>
+					</span>
+					<!--end:Info-->
+				</span>
+				<!--end:Label-->
+				<!--begin:Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="framework" value="2" />
+				</span>
+				<!--end:Input-->
+			</label>
+			<!--end::Option-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer mb-5">
+				<!--begin:Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin:Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-danger">
+							<i class="fab fa-angular text-danger fs-2x"></i>
+						</span>
+					</span>
+					<!--end:Icon-->
+					<!--begin:Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">Angular</span>
+						<span class="fs-7 text-muted">Powerful data mangement</span>
+					</span>
+					<!--end:Info-->
+				</span>
+				<!--end:Label-->
+				<!--begin:Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="framework" value="3" />
+				</span>
+				<!--end:Input-->
+			</label>
+			<!--end::Option-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer">
+				<!--begin:Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin:Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-primary">
+							<i class="fab fa-vuejs text-primary fs-2x"></i>
+						</span>
+					</span>
+					<!--end:Icon-->
+					<!--begin:Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">Vue</span>
+						<span class="fs-7 text-muted">Lightweight and responsive framework</span>
+					</span>
+					<!--end:Info-->
+				</span>
+				<!--end:Label-->
+				<!--begin:Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="framework" value="4" />
+				</span>
+				<!--end:Input-->
+			</label>
+			<!--end::Option-->
+		</div>
+		<!--end::Input group-->
+	</div>
+</div>
+<!--end::Step 2-->
diff --git a/resources/views/partials/modals/create-app/steps/_step-3.blade.php b/resources/views/partials/modals/create-app/steps/_step-3.blade.php
index d9edf86..044f345 100644
--- a/resources/views/partials/modals/create-app/steps/_step-3.blade.php
+++ b/resources/views/partials/modals/create-app/steps/_step-3.blade.php
@@ -1,104 +1,104 @@
-<!--begin::Step 3-->
-<div data-kt-stepper-element="content">
-	<div class="w-100">
-		<!--begin::Input group-->
-		<div class="fv-row mb-10">
-			<!--begin::Label-->
-			<label class="required fs-5 fw-semibold mb-2">Database Name</label>
-			<!--end::Label-->
-			<!--begin::Input-->
-			<input type="text" class="form-control form-control-lg form-control-solid" name="dbname" placeholder="" value="master_db" />
-			<!--end::Input-->
-		</div>
-		<!--end::Input group-->
-		<!--begin::Input group-->
-		<div class="fv-row">
-			<!--begin::Label-->
-			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
-				<span class="required">Select Database Engine</span>
-				<span class="ms-1" data-bs-toggle="tooltip" title="Select your app database engine"></span>
-			</label>
-			<!--end::Label-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer mb-5">
-				<!--begin::Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin::Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-success">
-							<i class="fas fa-database text-success fs-2x"></i>
-						</span>
-					</span>
-					<!--end::Icon-->
-					<!--begin::Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">MySQL</span>
-						<span class="fs-7 text-muted">Basic MySQL database</span>
-					</span>
-					<!--end::Info-->
-				</span>
-				<!--end::Label-->
-				<!--begin::Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="dbengine" checked="checked" value="1" />
-				</span>
-				<!--end::Input-->
-			</label>
-			<!--end::Option-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer mb-5">
-				<!--begin::Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin::Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-danger">
-							<i class="fab fa-google text-danger fs-2x"></i>
-						</span>
-					</span>
-					<!--end::Icon-->
-					<!--begin::Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">Firebase</span>
-						<span class="fs-7 text-muted">Google based app data management</span>
-					</span>
-					<!--end::Info-->
-				</span>
-				<!--end::Label-->
-				<!--begin::Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="dbengine" value="2" />
-				</span>
-				<!--end::Input-->
-			</label>
-			<!--end::Option-->
-			<!--begin:Option-->
-			<label class="d-flex flex-stack cursor-pointer">
-				<!--begin::Label-->
-				<span class="d-flex align-items-center me-2">
-					<!--begin::Icon-->
-					<span class="symbol symbol-50px me-6">
-						<span class="symbol-label bg-light-warning">
-							<i class="fab fa-amazon text-warning fs-2x"></i>
-						</span>
-					</span>
-					<!--end::Icon-->
-					<!--begin::Info-->
-					<span class="d-flex flex-column">
-						<span class="fw-bold fs-6">DynamoDB</span>
-						<span class="fs-7 text-muted">Amazon Fast NoSQL Database</span>
-					</span>
-					<!--end::Info-->
-				</span>
-				<!--end::Label-->
-				<!--begin::Input-->
-				<span class="form-check form-check-custom form-check-solid">
-					<input class="form-check-input" type="radio" name="dbengine" value="3" />
-				</span>
-				<!--end::Input-->
-			</label>
-			<!--end::Option-->
-		</div>
-		<!--end::Input group-->
-	</div>
-</div>
-<!--end::Step 3-->
\ No newline at end of file
+<!--begin::Step 3-->
+<div data-kt-stepper-element="content">
+	<div class="w-100">
+		<!--begin::Input group-->
+		<div class="fv-row mb-10">
+			<!--begin::Label-->
+			<label class="required fs-5 fw-semibold mb-2">Database Name</label>
+			<!--end::Label-->
+			<!--begin::Input-->
+			<input type="text" class="form-control form-control-lg form-control-solid" name="dbname" placeholder="" value="master_db" />
+			<!--end::Input-->
+		</div>
+		<!--end::Input group-->
+		<!--begin::Input group-->
+		<div class="fv-row">
+			<!--begin::Label-->
+			<label class="d-flex align-items-center fs-5 fw-semibold mb-4">
+				<span class="required">Select Database Engine</span>
+				<span class="ms-1" data-bs-toggle="tooltip" title="Select your app database engine"></span>
+			</label>
+			<!--end::Label-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer mb-5">
+				<!--begin::Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin::Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-success">
+							<i class="fas fa-database text-success fs-2x"></i>
+						</span>
+					</span>
+					<!--end::Icon-->
+					<!--begin::Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">MySQL</span>
+						<span class="fs-7 text-muted">Basic MySQL database</span>
+					</span>
+					<!--end::Info-->
+				</span>
+				<!--end::Label-->
+				<!--begin::Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="dbengine" checked="checked" value="1" />
+				</span>
+				<!--end::Input-->
+			</label>
+			<!--end::Option-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer mb-5">
+				<!--begin::Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin::Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-danger">
+							<i class="fab fa-google text-danger fs-2x"></i>
+						</span>
+					</span>
+					<!--end::Icon-->
+					<!--begin::Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">Firebase</span>
+						<span class="fs-7 text-muted">Google based app data management</span>
+					</span>
+					<!--end::Info-->
+				</span>
+				<!--end::Label-->
+				<!--begin::Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="dbengine" value="2" />
+				</span>
+				<!--end::Input-->
+			</label>
+			<!--end::Option-->
+			<!--begin:Option-->
+			<label class="d-flex flex-stack cursor-pointer">
+				<!--begin::Label-->
+				<span class="d-flex align-items-center me-2">
+					<!--begin::Icon-->
+					<span class="symbol symbol-50px me-6">
+						<span class="symbol-label bg-light-warning">
+							<i class="fab fa-amazon text-warning fs-2x"></i>
+						</span>
+					</span>
+					<!--end::Icon-->
+					<!--begin::Info-->
+					<span class="d-flex flex-column">
+						<span class="fw-bold fs-6">DynamoDB</span>
+						<span class="fs-7 text-muted">Amazon Fast NoSQL Database</span>
+					</span>
+					<!--end::Info-->
+				</span>
+				<!--end::Label-->
+				<!--begin::Input-->
+				<span class="form-check form-check-custom form-check-solid">
+					<input class="form-check-input" type="radio" name="dbengine" value="3" />
+				</span>
+				<!--end::Input-->
+			</label>
+			<!--end::Option-->
+		</div>
+		<!--end::Input group-->
+	</div>
+</div>
+<!--end::Step 3-->
diff --git a/resources/views/partials/modals/create-app/steps/_step-4.blade.php b/resources/views/partials/modals/create-app/steps/_step-4.blade.php
index 986a37d..74fd8bc 100644
--- a/resources/views/partials/modals/create-app/steps/_step-4.blade.php
+++ b/resources/views/partials/modals/create-app/steps/_step-4.blade.php
@@ -1,7 +1,7 @@
-<!--begin::Step 4-->
-<div data-kt-stepper-element="content">
-	<div class="w-100">
-		@include('partials/modals/new-card/_form')
-	</div>
-</div>
-<!--end::Step 4-->
\ No newline at end of file
+<!--begin::Step 4-->
+<div data-kt-stepper-element="content">
+	<div class="w-100">
+		@include('partials/modals/new-card/_form')
+	</div>
+</div>
+<!--end::Step 4-->
diff --git a/resources/views/partials/modals/create-app/steps/_step-5.blade.php b/resources/views/partials/modals/create-app/steps/_step-5.blade.php
index 85cc7cf..463c5f8 100644
--- a/resources/views/partials/modals/create-app/steps/_step-5.blade.php
+++ b/resources/views/partials/modals/create-app/steps/_step-5.blade.php
@@ -2,7 +2,7 @@
 <div data-kt-stepper-element="content">
 	<div class="w-100 text-center">
 		<!--begin::Heading-->
-		<h1 class="fw-bold text-dark mb-3">Release!</h1>
+		<h1 class="fw-bold text-gray-900 mb-3">Release!</h1>
 		<!--end::Heading-->
 		<!--begin::Description-->
 		<div class="text-muted fw-semibold fs-3">Submit your app to kickstart your project.</div>
diff --git a/resources/views/partials/modals/create-campaign/steps/_step-1.blade.php b/resources/views/partials/modals/create-campaign/steps/_step-1.blade.php
index cef0532..b360b21 100644
--- a/resources/views/partials/modals/create-campaign/steps/_step-1.blade.php
+++ b/resources/views/partials/modals/create-campaign/steps/_step-1.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-15">
 			<!--begin::Title-->
-			<h2 class="fw-bold d-flex align-items-center text-dark">Setup Campaign Details
+			<h2 class="fw-bold d-flex align-items-center text-gray-900">Setup Campaign Details
 			<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Campaign name will be used as reference within your campaign reports"></i></h2>
 			<!--end::Title-->
 			<!--begin::Notice-->
diff --git a/resources/views/partials/modals/create-campaign/steps/_step-2.blade.php b/resources/views/partials/modals/create-campaign/steps/_step-2.blade.php
index d1c258a..ac46018 100644
--- a/resources/views/partials/modals/create-campaign/steps/_step-2.blade.php
+++ b/resources/views/partials/modals/create-campaign/steps/_step-2.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Upload Files</h1>
+			<h1 class="fw-bold text-gray-900">Upload Files</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
diff --git a/resources/views/partials/modals/create-campaign/steps/_step-3.blade.php b/resources/views/partials/modals/create-campaign/steps/_step-3.blade.php
index 5f07183..a3f4941 100644
--- a/resources/views/partials/modals/create-campaign/steps/_step-3.blade.php
+++ b/resources/views/partials/modals/create-campaign/steps/_step-3.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Configure Audiences</h1>
+			<h1 class="fw-bold text-gray-900">Configure Audiences</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check 
diff --git a/resources/views/partials/modals/create-campaign/steps/_step-4.blade.php b/resources/views/partials/modals/create-campaign/steps/_step-4.blade.php
index fb38668..2452706 100644
--- a/resources/views/partials/modals/create-campaign/steps/_step-4.blade.php
+++ b/resources/views/partials/modals/create-campaign/steps/_step-4.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Budget Estimates</h1>
+			<h1 class="fw-bold text-gray-900">Budget Estimates</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check 
diff --git a/resources/views/partials/modals/create-campaign/steps/_step-5.blade.php b/resources/views/partials/modals/create-campaign/steps/_step-5.blade.php
index 28a394e..5be8387 100644
--- a/resources/views/partials/modals/create-campaign/steps/_step-5.blade.php
+++ b/resources/views/partials/modals/create-campaign/steps/_step-5.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-12 text-center">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Campaign Created!</h1>
+			<h1 class="fw-bold text-gray-900">Campaign Created!</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="fw-semibold text-muted fs-4">You will receive an email with with the summary of your newly created campaign!</div>
diff --git a/resources/views/partials/modals/create-project/steps/_budget.blade.php b/resources/views/partials/modals/create-project/steps/_budget.blade.php
index e99ba1f..f86b5a0 100644
--- a/resources/views/partials/modals/create-project/steps/_budget.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_budget.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Budget</h1>
+			<h1 class="fw-bold text-gray-900">Budget</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
@@ -18,7 +18,7 @@
 			<!--begin::Label-->
 			<label class="d-flex align-items-center fs-6 fw-semibold mb-2">
 				<span class="required">Setup Budget</span>
-				<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="&lt;div class='p-4 rounded bg-light'&gt; &lt;div class='d-flex flex-stack text-muted mb-4'&gt; &lt;i class='fas fa-university fs-3 me-3'&gt;&lt;/i&gt; &lt;div class='fw-bold'&gt;INCBANK **** 1245 STATEMENT&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack fw-semibold text-gray-600'&gt; &lt;div&gt;Amount&lt;/div&gt; &lt;div&gt;Transaction&lt;/div&gt; &lt;/div&gt; &lt;div class='separator separator-dashed my-2'&gt;&lt;/div&gt; &lt;div class='d-flex flex-stack text-dark fw-bold mb-2'&gt; &lt;div&gt;USD345.00&lt;/div&gt; &lt;div&gt;KEENTHEMES*&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted mb-2'&gt; &lt;div&gt;USD75.00&lt;/div&gt; &lt;div&gt;Hosting fee&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted'&gt; &lt;div&gt;USD3,950.00&lt;/div&gt; &lt;div&gt;Payrol&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;"></i>
+				<i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="&lt;div class='p-4 rounded bg-light'&gt; &lt;div class='d-flex flex-stack text-muted mb-4'&gt; &lt;i class='fas fa-university fs-3 me-3'&gt;&lt;/i&gt; &lt;div class='fw-bold'&gt;INCBANK **** 1245 STATEMENT&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack fw-semibold text-gray-600'&gt; &lt;div&gt;Amount&lt;/div&gt; &lt;div&gt;Transaction&lt;/div&gt; &lt;/div&gt; &lt;div class='separator separator-dashed my-2'&gt;&lt;/div&gt; &lt;div class='d-flex flex-stack text-gray-900 fw-bold mb-2'&gt; &lt;div&gt;USD345.00&lt;/div&gt; &lt;div&gt;KEENTHEMES*&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted mb-2'&gt; &lt;div&gt;USD75.00&lt;/div&gt; &lt;div&gt;Hosting fee&lt;/div&gt; &lt;/div&gt; &lt;div class='d-flex flex-stack text-muted'&gt; &lt;div&gt;USD3,950.00&lt;/div&gt; &lt;div&gt;Payrol&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;"></i>
 			</label>
 			<!--end::Label-->
 			<!--begin::Dialer-->
diff --git a/resources/views/partials/modals/create-project/steps/_complete.blade.php b/resources/views/partials/modals/create-project/steps/_complete.blade.php
index 1484deb..5b17b34 100644
--- a/resources/views/partials/modals/create-project/steps/_complete.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_complete.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-12 text-center">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Project Created!</h1>
+			<h1 class="fw-bold text-gray-900">Project Created!</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check how to create project</div>
diff --git a/resources/views/partials/modals/create-project/steps/_files.blade.php b/resources/views/partials/modals/create-project/steps/_files.blade.php
index 888b1af..93955e6 100644
--- a/resources/views/partials/modals/create-project/steps/_files.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_files.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-10 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Upload Files</h1>
+			<h1 class="fw-bold text-gray-900">Upload Files</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
diff --git a/resources/views/partials/modals/create-project/steps/_settings.blade.php b/resources/views/partials/modals/create-project/steps/_settings.blade.php
index 4b36570..f3ae461 100644
--- a/resources/views/partials/modals/create-project/steps/_settings.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_settings.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Project Settings</h1>
+			<h1 class="fw-bold text-gray-900">Project Settings</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
diff --git a/resources/views/partials/modals/create-project/steps/_targets.blade.php b/resources/views/partials/modals/create-project/steps/_targets.blade.php
index ccaa9e1..45828f5 100644
--- a/resources/views/partials/modals/create-project/steps/_targets.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_targets.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Set First Target</h1>
+			<h1 class="fw-bold text-gray-900">Set First Target</h1>
 			<!--end::Title-->
 			<!--begin::Title-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
diff --git a/resources/views/partials/modals/create-project/steps/_team.blade.php b/resources/views/partials/modals/create-project/steps/_team.blade.php
index 5d4af40..1377a2c 100644
--- a/resources/views/partials/modals/create-project/steps/_team.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_team.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Build a Team</h1>
+			<h1 class="fw-bold text-gray-900">Build a Team</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check
diff --git a/resources/views/partials/modals/create-project/steps/_type.blade.php b/resources/views/partials/modals/create-project/steps/_type.blade.php
index fe685fb..9fa5bbd 100644
--- a/resources/views/partials/modals/create-project/steps/_type.blade.php
+++ b/resources/views/partials/modals/create-project/steps/_type.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Heading-->
 		<div class="pb-7 pb-lg-12">
 			<!--begin::Title-->
-			<h1 class="fw-bold text-dark">Project Type</h1>
+			<h1 class="fw-bold text-gray-900">Project Type</h1>
 			<!--end::Title-->
 			<!--begin::Description-->
 			<div class="text-muted fw-semibold fs-4">If you need more info, please check out
diff --git a/resources/views/partials/modals/users-search/_main.blade.php b/resources/views/partials/modals/users-search/_main.blade.php
index f23a32e..f0a3342 100644
--- a/resources/views/partials/modals/users-search/_main.blade.php
+++ b/resources/views/partials/modals/users-search/_main.blade.php
@@ -1,60 +1,60 @@
-<!--begin::Modal - Users Search-->
-<div class="modal fade" id="kt_modal_users_search" tabindex="-1" aria-hidden="true">
-	<!--begin::Modal dialog-->
-	<div class="modal-dialog modal-dialog-centered mw-650px">
-		<!--begin::Modal content-->
-		<div class="modal-content">
-			<!--begin::Modal header-->
-			<div class="modal-header pb-0 border-0 justify-content-end">
-				<!--begin::Close-->
-				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
-				<!--end::Close-->
-			</div>
-			<!--begin::Modal header-->
-			<!--begin::Modal body-->
-			<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
-				<!--begin::Content-->
-				<div class="text-center mb-13">
-					<h1 class="mb-3">Search Users</h1>
-					<div class="text-muted fw-semibold fs-5">Invite Collaborators To Your Project</div>
-				</div>
-				<!--end::Content-->
-				<!--begin::Search-->
-				<div id="kt_modal_users_search_handler" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline">
-					<!--begin::Form-->
-					<form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
-					<!--begin::Hidden input(Added to disable form autocomplete)-->
-					<input type="hidden" />
-					<!--end::Hidden input-->
-					<!--begin::Icon-->
-					{!! getIcon('magnifier', 'fs-2 fs-lg-1 text-gray-500 position-absolute top-50 ms-5 translate-middle-y') !!} 
-					<!--end::Icon-->
-					<!--begin::Input-->
-					<input type="text" class="form-control form-control-lg form-control-solid px-15" name="search" value="" placeholder="Search by username, full name or email..." data-kt-search-element="input" />
-					<!--end::Input-->
-					<!--begin::Spinner-->
-					<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
-						<span class="spinner-border h-15px w-15px align-middle text-muted"></span>
-					</span>
-					<!--end::Spinner-->
-					<!--begin::Reset-->
-					<span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
-					<!--end::Reset--></form>
-					<!--end::Form-->
-					<!--begin::Wrapper-->
-					<div class="py-5">
-						@include('partials/modals/users-search/partials/_suggestions')
-						@include('partials/modals/users-search/partials/_results')
-						@include('partials/modals/users-search/partials/_empty')
-					</div>
-					<!--end::Wrapper-->
-				</div>
-				<!--end::Search-->
-			</div>
-			<!--end::Modal body-->
-		</div>
-		<!--end::Modal content-->
-	</div>
-	<!--end::Modal dialog-->
-</div>
-<!--end::Modal - Users Search-->
\ No newline at end of file
+<!--begin::Modal - Users Search-->
+<div class="modal fade" id="kt_modal_users_search" tabindex="-1" aria-hidden="true">
+	<!--begin::Modal dialog-->
+	<div class="modal-dialog modal-dialog-centered mw-650px">
+		<!--begin::Modal content-->
+		<div class="modal-content">
+			<!--begin::Modal header-->
+			<div class="modal-header pb-0 border-0 justify-content-end">
+				<!--begin::Close-->
+				<div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">{!! getIcon('cross', 'fs-1') !!}</div>
+				<!--end::Close-->
+			</div>
+			<!--begin::Modal header-->
+			<!--begin::Modal body-->
+			<div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
+				<!--begin::Content-->
+				<div class="text-center mb-13">
+					<h1 class="mb-3">Search Users</h1>
+					<div class="text-muted fw-semibold fs-5">Invite Collaborators To Your Project</div>
+				</div>
+				<!--end::Content-->
+				<!--begin::Search-->
+				<div id="kt_modal_users_search_handler" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline">
+					<!--begin::Form-->
+					<form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
+					<!--begin::Hidden input(Added to disable form autocomplete)-->
+					<input type="hidden" />
+					<!--end::Hidden input-->
+					<!--begin::Icon-->
+					{!! getIcon('magnifier', 'fs-2 fs-lg-1 text-gray-500 position-absolute top-50 ms-5 translate-middle-y') !!} 
+					<!--end::Icon-->
+					<!--begin::Input-->
+					<input type="text" class="form-control form-control-lg form-control-solid px-15" name="search" value="" placeholder="Search by username, full name or email..." data-kt-search-element="input" />
+					<!--end::Input-->
+					<!--begin::Spinner-->
+					<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
+						<span class="spinner-border h-15px w-15px align-middle text-muted"></span>
+					</span>
+					<!--end::Spinner-->
+					<!--begin::Reset-->
+					<span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
+					<!--end::Reset--></form>
+					<!--end::Form-->
+					<!--begin::Wrapper-->
+					<div class="py-5">
+						@include('partials/modals/users-search/partials/_suggestions')
+						@include('partials/modals/users-search/partials/_results')
+						@include('partials/modals/users-search/partials/_empty')
+					</div>
+					<!--end::Wrapper-->
+				</div>
+				<!--end::Search-->
+			</div>
+			<!--end::Modal body-->
+		</div>
+		<!--end::Modal content-->
+	</div>
+	<!--end::Modal dialog-->
+</div>
+<!--end::Modal - Users Search-->
diff --git a/resources/views/partials/search/_dropdown.blade.php b/resources/views/partials/search/_dropdown.blade.php
index b431406..e96d3b5 100644
--- a/resources/views/partials/search/_dropdown.blade.php
+++ b/resources/views/partials/search/_dropdown.blade.php
@@ -1,23 +1,23 @@
-<!--begin::Search-->
-<div id="kt_header_search" class="header-search d-flex align-items-stretch" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="menu" data-kt-menu-trigger="auto" data-kt-menu-overflow="false" data-kt-menu-permanent="true" data-kt-menu-placement="bottom-end">
-	<!--begin::Search toggle-->
-	<div class="d-flex align-items-center" data-kt-search-element="toggle" id="kt_header_search_toggle">
-		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px">{!! getIcon('magnifier', 'fs-2 fs-lg-1') !!}</div>
-	</div>
-	<!--end::Search toggle-->
-	<!--begin::Menu-->
-	<div data-kt-search-element="content" class="menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px">
-		<!--begin::Wrapper-->
-		<div data-kt-search-element="wrapper">
-			@include('partials/search/partials/_form-dropdown')
-			@include('partials/search/partials/_results')
-			@include('partials/search/partials/_main')
-			@include('partials/search/partials/_empty')
-		</div>
-		<!--end::Wrapper-->
-		@include('partials/search/partials/_advanced-options')
-		@include('partials/search/partials/_preferences')
-	</div>
-	<!--end::Menu-->
-</div>
-<!--end::Search-->
\ No newline at end of file
+<!--begin::Search-->
+<div id="kt_header_search" class="header-search d-flex align-items-stretch" data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="menu" data-kt-menu-trigger="auto" data-kt-menu-overflow="false" data-kt-menu-permanent="true" data-kt-menu-placement="bottom-end">
+	<!--begin::Search toggle-->
+	<div class="d-flex align-items-center" data-kt-search-element="toggle" id="kt_header_search_toggle">
+		<div class="btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px">{!! getIcon('magnifier', 'fs-2 fs-lg-1') !!}</div>
+	</div>
+	<!--end::Search toggle-->
+	<!--begin::Menu-->
+	<div data-kt-search-element="content" class="menu menu-sub menu-sub-dropdown p-7 w-325px w-md-375px">
+		<!--begin::Wrapper-->
+		<div data-kt-search-element="wrapper">
+			@include('partials/search/partials/_form-dropdown')
+			@include('partials/search/partials/_results')
+			@include('partials/search/partials/_main')
+			@include('partials/search/partials/_empty')
+		</div>
+		<!--end::Wrapper-->
+		@include('partials/search/partials/_advanced-options')
+		@include('partials/search/partials/_preferences')
+	</div>
+	<!--end::Menu-->
+</div>
+<!--end::Search-->
diff --git a/resources/views/partials/search/partials/_advanced-options.blade.php b/resources/views/partials/search/partials/_advanced-options.blade.php
index 00b42bc..332be6e 100644
--- a/resources/views/partials/search/partials/_advanced-options.blade.php
+++ b/resources/views/partials/search/partials/_advanced-options.blade.php
@@ -1,7 +1,7 @@
 <!--begin::Preferences-->
 <form data-kt-search-element="advanced-options-form" class="pt-1 d-none">
 	<!--begin::Heading-->
-	<h3 class="fw-semibold text-dark mb-7">Advanced Search</h3>
+	<h3 class="fw-semibold text-gray-900 mb-7">Advanced Search</h3>
 	<!--end::Heading-->
 	<!--begin::Input group-->
 	<div class="mb-5">
diff --git a/resources/views/partials/search/partials/_empty.blade.php b/resources/views/partials/search/partials/_empty.blade.php
index 9b8bad7..a466e22 100644
--- a/resources/views/partials/search/partials/_empty.blade.php
+++ b/resources/views/partials/search/partials/_empty.blade.php
@@ -1,13 +1,13 @@
-<!--begin::Empty-->
-<div data-kt-search-element="empty" class="text-center d-none">
-	<!--begin::Icon-->
-	<div class="pt-10 pb-10">{!! getIcon('search-list', 'fs-4x opacity-50') !!}</div>
-	<!--end::Icon-->
-	<!--begin::Message-->
-	<div class="pb-15 fw-semibold">
-		<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
-		<div class="text-muted fs-7">Please try again with a different query</div>
-	</div>
-	<!--end::Message-->
-</div>
-<!--end::Empty-->
\ No newline at end of file
+<!--begin::Empty-->
+<div data-kt-search-element="empty" class="text-center d-none">
+	<!--begin::Icon-->
+	<div class="pt-10 pb-10">{!! getIcon('search-list', 'fs-4x opacity-50') !!}</div>
+	<!--end::Icon-->
+	<!--begin::Message-->
+	<div class="pb-15 fw-semibold">
+		<h3 class="text-gray-600 fs-5 mb-2">No result found</h3>
+		<div class="text-muted fs-7">Please try again with a different query</div>
+	</div>
+	<!--end::Message-->
+</div>
+<!--end::Empty-->
diff --git a/resources/views/partials/search/partials/_form-dropdown.blade.php b/resources/views/partials/search/partials/_form-dropdown.blade.php
index edacf65..54be290 100644
--- a/resources/views/partials/search/partials/_form-dropdown.blade.php
+++ b/resources/views/partials/search/partials/_form-dropdown.blade.php
@@ -1,30 +1,30 @@
-<!--begin::Form-->
-<form data-kt-search-element="form" class="w-100 position-relative mb-3" autocomplete="off">
-<!--begin::Icon-->
-{!! getIcon('magnifier', 'fs-2 text-gray-500 position-absolute top-50 translate-middle-y ms-0') !!} 
-<!--end::Icon-->
-<!--begin::Input-->
-<input type="text" class="search-input form-control form-control-flush ps-10" name="search" value="" placeholder="Search..." data-kt-search-element="input" />
-<!--end::Input-->
-<!--begin::Spinner-->
-<span class="search-spinner position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
-	<span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
-</span>
-<!--end::Spinner-->
-<!--begin::Reset-->
-<span class="search-reset btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
-<!--end::Reset-->
-<!--begin::Toolbar-->
-<div class="position-absolute top-50 end-0 translate-middle-y" data-kt-search-element="toolbar">
-	<!--begin::Preferences toggle-->
-	<div data-kt-search-element="preferences-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1" data-bs-toggle="tooltip" title="Show search preferences">{!! getIcon('setting-2', 'fs-2') !!}</div>
-	<!--end::Preferences toggle-->
-	<!--begin::Advanced search toggle-->
-	<div data-kt-search-element="advanced-options-form-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary" data-bs-toggle="tooltip" title="Show more search options">{!! getIcon('down', 'fs-2') !!}</div>
-	<!--end::Advanced search toggle-->
-</div>
-<!--end::Toolbar--></form>
-<!--end::Form-->
-<!--begin::Separator-->
-<div class="separator border-gray-200 mb-6"></div>
-<!--end::Separator-->
\ No newline at end of file
+<!--begin::Form-->
+<form data-kt-search-element="form" class="w-100 position-relative mb-3" autocomplete="off">
+<!--begin::Icon-->
+{!! getIcon('magnifier', 'fs-2 text-gray-500 position-absolute top-50 translate-middle-y ms-0') !!} 
+<!--end::Icon-->
+<!--begin::Input-->
+<input type="text" class="search-input form-control form-control-flush ps-10" name="search" value="" placeholder="Search..." data-kt-search-element="input" />
+<!--end::Input-->
+<!--begin::Spinner-->
+<span class="search-spinner position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
+	<span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
+</span>
+<!--end::Spinner-->
+<!--begin::Reset-->
+<span class="search-reset btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 d-none" data-kt-search-element="clear">{!! getIcon('cross', 'fs-2 fs-lg-1 me-0') !!}</span>
+<!--end::Reset-->
+<!--begin::Toolbar-->
+<div class="position-absolute top-50 end-0 translate-middle-y" data-kt-search-element="toolbar">
+	<!--begin::Preferences toggle-->
+	<div data-kt-search-element="preferences-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary me-1" data-bs-toggle="tooltip" title="Show search preferences">{!! getIcon('setting-2', 'fs-2') !!}</div>
+	<!--end::Preferences toggle-->
+	<!--begin::Advanced search toggle-->
+	<div data-kt-search-element="advanced-options-form-show" class="btn btn-icon w-20px btn-sm btn-active-color-primary" data-bs-toggle="tooltip" title="Show more search options">{!! getIcon('down', 'fs-2') !!}</div>
+	<!--end::Advanced search toggle-->
+</div>
+<!--end::Toolbar--></form>
+<!--end::Form-->
+<!--begin::Separator-->
+<div class="separator border-gray-200 mb-6"></div>
+<!--end::Separator-->
diff --git a/resources/views/partials/search/partials/_main.blade.php b/resources/views/partials/search/partials/_main.blade.php
index 59bce32..07ef5cd 100644
--- a/resources/views/partials/search/partials/_main.blade.php
+++ b/resources/views/partials/search/partials/_main.blade.php
@@ -1,120 +1,120 @@
-<!--begin::Recently viewed-->
-<div class="mb-5" data-kt-search-element="main">
-	<!--begin::Heading-->
-	<div class="d-flex flex-stack fw-semibold mb-4">
-		<!--begin::Label-->
-		<span class="text-muted fs-6 me-2">Recently Searched:</span>
-		<!--end::Label-->
-	</div>
-	<!--end::Heading-->
-	<!--begin::Items-->
-	<div class="scroll-y mh-200px mh-lg-325px">
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('laptop', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">BoomApp by Keenthemes</a>
-				<span class="fs-7 text-muted fw-semibold">#45789</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-simple', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Kept API Project Meeting</a>
-				<span class="fs-7 text-muted fw-semibold">#84050</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"KPI Monitoring App Launch</a>
-				<span class="fs-7 text-muted fw-semibold">#84250</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Project Reference FAQ</a>
-				<span class="fs-7 text-muted fw-semibold">#67945</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('sms', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"FitPro App Development</a>
-				<span class="fs-7 text-muted fw-semibold">#84250</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('bank', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Shopix Mobile App</a>
-				<span class="fs-7 text-muted fw-semibold">#45690</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Item-->
-		<div class="d-flex align-items-center mb-5">
-			<!--begin::Symbol-->
-			<div class="symbol symbol-40px me-4">
-				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
-			</div>
-			<!--end::Symbol-->
-			<!--begin::Title-->
-			<div class="d-flex flex-column">
-				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Landing UI Design" Launch</a>
-				<span class="fs-7 text-muted fw-semibold">#24005</span>
-			</div>
-			<!--end::Title-->
-		</div>
-		<!--end::Item-->
-	</div>
-	<!--end::Items-->
-</div>
-<!--end::Recently viewed-->
\ No newline at end of file
+<!--begin::Recently viewed-->
+<div class="mb-5" data-kt-search-element="main">
+	<!--begin::Heading-->
+	<div class="d-flex flex-stack fw-semibold mb-4">
+		<!--begin::Label-->
+		<span class="text-muted fs-6 me-2">Recently Searched:</span>
+		<!--end::Label-->
+	</div>
+	<!--end::Heading-->
+	<!--begin::Items-->
+	<div class="scroll-y mh-200px mh-lg-325px">
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('laptop', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">BoomApp by Keenthemes</a>
+				<span class="fs-7 text-muted fw-semibold">#45789</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-simple', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Kept API Project Meeting</a>
+				<span class="fs-7 text-muted fw-semibold">#84050</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"KPI Monitoring App Launch</a>
+				<span class="fs-7 text-muted fw-semibold">#84250</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Project Reference FAQ</a>
+				<span class="fs-7 text-muted fw-semibold">#67945</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('sms', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"FitPro App Development</a>
+				<span class="fs-7 text-muted fw-semibold">#84250</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('bank', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">Shopix Mobile App</a>
+				<span class="fs-7 text-muted fw-semibold">#45690</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Item-->
+		<div class="d-flex align-items-center mb-5">
+			<!--begin::Symbol-->
+			<div class="symbol symbol-40px me-4">
+				<span class="symbol-label bg-light">{!! getIcon('chart-line-down', 'fs-2 text-primary') !!}</span>
+			</div>
+			<!--end::Symbol-->
+			<!--begin::Title-->
+			<div class="d-flex flex-column">
+				<a href="#" class="fs-6 text-gray-800 text-hover-primary fw-semibold">"Landing UI Design" Launch</a>
+				<span class="fs-7 text-muted fw-semibold">#24005</span>
+			</div>
+			<!--end::Title-->
+		</div>
+		<!--end::Item-->
+	</div>
+	<!--end::Items-->
+</div>
+<!--end::Recently viewed-->
diff --git a/resources/views/partials/search/partials/_preferences.blade.php b/resources/views/partials/search/partials/_preferences.blade.php
index c40390d..36b4479 100644
--- a/resources/views/partials/search/partials/_preferences.blade.php
+++ b/resources/views/partials/search/partials/_preferences.blade.php
@@ -1,53 +1,53 @@
-<!--begin::Preferences-->
-<form data-kt-search-element="preferences" class="pt-1 d-none">
-	<!--begin::Heading-->
-	<h3 class="fw-semibold text-dark mb-7">Search Preferences</h3>
-	<!--end::Heading-->
-	<!--begin::Input group-->
-	<div class="pb-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Projects</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Targets</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Affiliate Programs</span>
-			<input class="form-check-input" type="checkbox" value="1" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Referrals</span>
-			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Input group-->
-	<div class="py-4 border-bottom">
-		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
-			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Users</span>
-			<input class="form-check-input" type="checkbox" value="1" />
-		</label>
-	</div>
-	<!--end::Input group-->
-	<!--begin::Actions-->
-	<div class="d-flex justify-content-end pt-7">
-		<button type="reset" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2" data-kt-search-element="preferences-dismiss">Cancel</button>
-		<button type="submit" class="btn btn-sm fw-bold btn-primary">Save Changes</button>
-	</div>
-	<!--end::Actions-->
-</form>
-<!--end::Preferences-->
\ No newline at end of file
+<!--begin::Preferences-->
+<form data-kt-search-element="preferences" class="pt-1 d-none">
+	<!--begin::Heading-->
+	<h3 class="fw-semibold text-gray-900 mb-7">Search Preferences</h3>
+	<!--end::Heading-->
+	<!--begin::Input group-->
+	<div class="pb-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Projects</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Targets</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Affiliate Programs</span>
+			<input class="form-check-input" type="checkbox" value="1" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Referrals</span>
+			<input class="form-check-input" type="checkbox" value="1" checked="checked" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Input group-->
+	<div class="py-4 border-bottom">
+		<label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
+			<span class="form-check-label text-gray-700 fs-6 fw-semibold ms-0 me-2">Users</span>
+			<input class="form-check-input" type="checkbox" value="1" />
+		</label>
+	</div>
+	<!--end::Input group-->
+	<!--begin::Actions-->
+	<div class="d-flex justify-content-end pt-7">
+		<button type="reset" class="btn btn-sm btn-light fw-bold btn-active-light-primary me-2" data-kt-search-element="preferences-dismiss">Cancel</button>
+		<button type="submit" class="btn btn-sm fw-bold btn-primary">Save Changes</button>
+	</div>
+	<!--end::Actions-->
+</form>
+<!--end::Preferences-->
diff --git a/resources/views/partials/search/partials/_results.blade.php b/resources/views/partials/search/partials/_results.blade.php
index 24b857b..865a7c9 100644
--- a/resources/views/partials/search/partials/_results.blade.php
+++ b/resources/views/partials/search/partials/_results.blade.php
@@ -6,7 +6,7 @@
 		<h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">Users</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-6.jpg') }}" alt="" />
@@ -21,7 +21,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-2.jpg') }}" alt="" />
@@ -36,7 +36,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-9.jpg') }}" alt="" />
@@ -51,7 +51,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-14.jpg') }}" alt="" />
@@ -66,7 +66,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<img src="{{ image('avatars/300-11.jpg') }}" alt="" />
@@ -84,7 +84,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Customers</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -101,7 +101,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -118,7 +118,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -135,7 +135,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -152,7 +152,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">
@@ -172,7 +172,7 @@
 		<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Projects</h3>
 		<!--end::Category title-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('notepad', 'fs-2 text-primary') !!}</span>
@@ -187,7 +187,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('frame', 'fs-2 text-primary') !!}</span>
@@ -202,7 +202,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('message-text-2', 'fs-2 text-primary') !!}</span>
@@ -217,7 +217,7 @@
 		</a>
 		<!--end::Item-->
 		<!--begin::Item-->
-		<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
+		<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
 			<!--begin::Symbol-->
 			<div class="symbol symbol-40px me-4">
 				<span class="symbol-label bg-light">{!! getIcon('profile-circle', 'fs-2 text-primary') !!}</span>
diff --git a/resources/views/partials/widgets/cards/_widget-17.blade.php b/resources/views/partials/widgets/cards/_widget-17.blade.php
index ac80ec2..6785f01 100644
--- a/resources/views/partials/widgets/cards/_widget-17.blade.php
+++ b/resources/views/partials/widgets/cards/_widget-17.blade.php
@@ -1,80 +1,80 @@
-<!--begin::Card widget 17-->
-<div class="card card-flush h-md-50 mb-5 mb-xl-10">
-	<!--begin::Header-->
-	<div class="card-header pt-5">
-		<!--begin::Title-->
-		<div class="card-title d-flex flex-column">
-			<!--begin::Info-->
-			<div class="d-flex align-items-center">
-				<!--begin::Currency-->
-				<span class="fs-4 fw-semibold text-gray-400 me-1 align-self-start">$</span>
-				<!--end::Currency-->
-				<!--begin::Amount-->
-				<span class="fs-2hx fw-bold text-dark me-2 lh-1 ls-n2">69,700</span>
-				<!--end::Amount-->
-				<!--begin::Badge-->
-				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
-				<!--end::Badge-->
-			</div>
-			<!--end::Info-->
-			<!--begin::Subtitle-->
-			<span class="text-gray-400 pt-1 fw-semibold fs-6">Projects Earnings in April</span>
-			<!--end::Subtitle-->
-		</div>
-		<!--end::Title-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Card body-->
-	<div class="card-body pt-2 pb-4 d-flex flex-wrap align-items-center">
-		<!--begin::Chart-->
-		<div class="d-flex flex-center me-5 pt-2">
-			<div id="kt_card_widget_17_chart" style="min-width: 70px; min-height: 70px" data-kt-size="70" data-kt-line="11"></div>
-		</div>
-		<!--end::Chart-->
-		<!--begin::Labels-->
-		<div class="d-flex flex-column content-justify-center flex-row-fluid">
-			<!--begin::Label-->
-			<div class="d-flex fw-semibold align-items-center">
-				<!--begin::Bullet-->
-				<div class="bullet w-8px h-3px rounded-2 bg-success me-3"></div>
-				<!--end::Bullet-->
-				<!--begin::Label-->
-				<div class="text-gray-500 flex-grow-1 me-4">Leaf CRM</div>
-				<!--end::Label-->
-				<!--begin::Stats-->
-				<div class="fw-bolder text-gray-700 text-xxl-end">$7,660</div>
-				<!--end::Stats-->
-			</div>
-			<!--end::Label-->
-			<!--begin::Label-->
-			<div class="d-flex fw-semibold align-items-center my-3">
-				<!--begin::Bullet-->
-				<div class="bullet w-8px h-3px rounded-2 bg-primary me-3"></div>
-				<!--end::Bullet-->
-				<!--begin::Label-->
-				<div class="text-gray-500 flex-grow-1 me-4">Mivy App</div>
-				<!--end::Label-->
-				<!--begin::Stats-->
-				<div class="fw-bolder text-gray-700 text-xxl-end">$2,820</div>
-				<!--end::Stats-->
-			</div>
-			<!--end::Label-->
-			<!--begin::Label-->
-			<div class="d-flex fw-semibold align-items-center">
-				<!--begin::Bullet-->
-				<div class="bullet w-8px h-3px rounded-2 me-3" style="background-color: #E4E6EF"></div>
-				<!--end::Bullet-->
-				<!--begin::Label-->
-				<div class="text-gray-500 flex-grow-1 me-4">Others</div>
-				<!--end::Label-->
-				<!--begin::Stats-->
-				<div class="fw-bolder text-gray-700 text-xxl-end">$45,257</div>
-				<!--end::Stats-->
-			</div>
-			<!--end::Label-->
-		</div>
-		<!--end::Labels-->
-	</div>
-	<!--end::Card body-->
-</div>
-<!--end::Card widget 17-->
\ No newline at end of file
+<!--begin::Card widget 17-->
+<div class="card card-flush h-md-50 mb-5 mb-xl-10">
+	<!--begin::Header-->
+	<div class="card-header pt-5">
+		<!--begin::Title-->
+		<div class="card-title d-flex flex-column">
+			<!--begin::Info-->
+			<div class="d-flex align-items-center">
+				<!--begin::Currency-->
+				<span class="fs-4 fw-semibold text-gray-500 me-1 align-self-start">$</span>
+				<!--end::Currency-->
+				<!--begin::Amount-->
+				<span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">69,700</span>
+				<!--end::Amount-->
+				<!--begin::Badge-->
+				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
+				<!--end::Badge-->
+			</div>
+			<!--end::Info-->
+			<!--begin::Subtitle-->
+			<span class="text-gray-500 pt-1 fw-semibold fs-6">Projects Earnings in April</span>
+			<!--end::Subtitle-->
+		</div>
+		<!--end::Title-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Card body-->
+	<div class="card-body pt-2 pb-4 d-flex flex-wrap align-items-center">
+		<!--begin::Chart-->
+		<div class="d-flex flex-center me-5 pt-2">
+			<div id="kt_card_widget_17_chart" style="min-width: 70px; min-height: 70px" data-kt-size="70" data-kt-line="11"></div>
+		</div>
+		<!--end::Chart-->
+		<!--begin::Labels-->
+		<div class="d-flex flex-column content-justify-center flex-row-fluid">
+			<!--begin::Label-->
+			<div class="d-flex fw-semibold align-items-center">
+				<!--begin::Bullet-->
+				<div class="bullet w-8px h-3px rounded-2 bg-success me-3"></div>
+				<!--end::Bullet-->
+				<!--begin::Label-->
+				<div class="text-gray-500 flex-grow-1 me-4">Leaf CRM</div>
+				<!--end::Label-->
+				<!--begin::Stats-->
+				<div class="fw-bolder text-gray-700 text-xxl-end">$7,660</div>
+				<!--end::Stats-->
+			</div>
+			<!--end::Label-->
+			<!--begin::Label-->
+			<div class="d-flex fw-semibold align-items-center my-3">
+				<!--begin::Bullet-->
+				<div class="bullet w-8px h-3px rounded-2 bg-primary me-3"></div>
+				<!--end::Bullet-->
+				<!--begin::Label-->
+				<div class="text-gray-500 flex-grow-1 me-4">Mivy App</div>
+				<!--end::Label-->
+				<!--begin::Stats-->
+				<div class="fw-bolder text-gray-700 text-xxl-end">$2,820</div>
+				<!--end::Stats-->
+			</div>
+			<!--end::Label-->
+			<!--begin::Label-->
+			<div class="d-flex fw-semibold align-items-center">
+				<!--begin::Bullet-->
+				<div class="bullet w-8px h-3px rounded-2 me-3" style="background-color: #E4E6EF"></div>
+				<!--end::Bullet-->
+				<!--begin::Label-->
+				<div class="text-gray-500 flex-grow-1 me-4">Others</div>
+				<!--end::Label-->
+				<!--begin::Stats-->
+				<div class="fw-bolder text-gray-700 text-xxl-end">$45,257</div>
+				<!--end::Stats-->
+			</div>
+			<!--end::Label-->
+		</div>
+		<!--end::Labels-->
+	</div>
+	<!--end::Card body-->
+</div>
+<!--end::Card widget 17-->
diff --git a/resources/views/partials/widgets/cards/_widget-18.blade.php b/resources/views/partials/widgets/cards/_widget-18.blade.php
index 5e975b5..6e9c9a2 100644
--- a/resources/views/partials/widgets/cards/_widget-18.blade.php
+++ b/resources/views/partials/widgets/cards/_widget-18.blade.php
@@ -21,7 +21,7 @@
 						<div class="d-flex flex-stack mb-6">
 							<!--begin::Title-->
 							<div class="flex-shrink-0 me-5">
-								<span class="text-gray-400 fs-7 fw-bold me-2 d-block lh-1 pb-1">Featured</span>
+								<span class="text-gray-500 fs-7 fw-bold me-2 d-block lh-1 pb-1">Featured</span>
 								<span class="text-gray-800 fs-1 fw-bold">9 Degree</span>
 							</div>
 							<!--end::Title-->
@@ -39,7 +39,7 @@
 								<!--end::Symbol-->
 								<!--begin::Info-->
 								<div class="m-0">
-									<span class="fw-semibold text-gray-400 d-block fs-8">Manager</span>
+									<span class="fw-semibold text-gray-500 d-block fs-8">Manager</span>
 									<a href="#" class="fw-bold text-gray-800 text-hover-primary fs-7">Robert Fox</a>
 								</div>
 								<!--end::Info-->
@@ -54,7 +54,7 @@
 								<!--end::Symbol-->
 								<!--begin::Info-->
 								<div class="m-0">
-									<span class="fw-semibold text-gray-400 d-block fs-8">Budget</span>
+									<span class="fw-semibold text-gray-500 d-block fs-8">Budget</span>
 									<span class="fw-bold text-gray-800 fs-7">$64.800</span>
 								</div>
 								<!--end::Info-->
@@ -77,7 +77,7 @@
 								<span class="fs-6 text-gray-700 fw-bold">Feb 6, 2021</span>
 								<!--end::Date-->
 								<!--begin::Label-->
-								<div class="fw-semibold text-gray-400">Due Date</div>
+								<div class="fw-semibold text-gray-500">Due Date</div>
 								<!--end::Label-->
 							</div>
 							<!--end::Stat-->
@@ -88,7 +88,7 @@
 								<span class="ms-n1" data-kt-countup="true" data-kt-countup-value="284,900.00">0</span></span>
 								<!--end::Number-->
 								<!--begin::Label-->
-								<div class="fw-semibold text-gray-400">Budget</div>
+								<div class="fw-semibold text-gray-500">Budget</div>
 								<!--end::Label-->
 							</div>
 							<!--end::Stat-->
diff --git a/resources/views/partials/widgets/cards/_widget-20.blade.php b/resources/views/partials/widgets/cards/_widget-20.blade.php
index ea44fed..a367ad9 100644
--- a/resources/views/partials/widgets/cards/_widget-20.blade.php
+++ b/resources/views/partials/widgets/cards/_widget-20.blade.php
@@ -1,33 +1,33 @@
-<!--begin::Card widget 20-->
-<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-5 mb-xl-10" style="background-color: #F1416C;background-image:url('assets/media/patterns/vector-1.png')">
-	<!--begin::Header-->
-	<div class="card-header pt-5">
-		<!--begin::Title-->
-		<div class="card-title d-flex flex-column">
-			<!--begin::Amount-->
-			<span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">69</span>
-			<!--end::Amount-->
-			<!--begin::Subtitle-->
-			<span class="text-white opacity-75 pt-1 fw-semibold fs-6">Active Projects</span>
-			<!--end::Subtitle-->
-		</div>
-		<!--end::Title-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Card body-->
-	<div class="card-body d-flex align-items-end pt-0">
-		<!--begin::Progress-->
-		<div class="d-flex align-items-center flex-column mt-3 w-100">
-			<div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
-				<span>43 Pending</span>
-				<span>72%</span>
-			</div>
-			<div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
-				<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
-			</div>
-		</div>
-		<!--end::Progress-->
-	</div>
-	<!--end::Card body-->
-</div>
-<!--end::Card widget 20-->
\ No newline at end of file
+<!--begin::Card widget 20-->
+<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-5 mb-xl-10" style="background-color: #F1416C;background-image:url('assets/media/patterns/vector-1.png')">
+	<!--begin::Header-->
+	<div class="card-header pt-5">
+		<!--begin::Title-->
+		<div class="card-title d-flex flex-column">
+			<!--begin::Amount-->
+			<span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">69</span>
+			<!--end::Amount-->
+			<!--begin::Subtitle-->
+			<span class="text-white opacity-75 pt-1 fw-semibold fs-6">Active Projects</span>
+			<!--end::Subtitle-->
+		</div>
+		<!--end::Title-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Card body-->
+	<div class="card-body d-flex align-items-end pt-0">
+		<!--begin::Progress-->
+		<div class="d-flex align-items-center flex-column mt-3 w-100">
+			<div class="d-flex justify-content-between fw-bold fs-6 text-white opacity-75 w-100 mt-auto mb-2">
+				<span>43 Pending</span>
+				<span>72%</span>
+			</div>
+			<div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
+				<div class="bg-white rounded h-8px" role="progressbar" style="width: 72%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+		</div>
+		<!--end::Progress-->
+	</div>
+	<!--end::Card body-->
+</div>
+<!--end::Card widget 20-->
diff --git a/resources/views/partials/widgets/cards/_widget-7.blade.php b/resources/views/partials/widgets/cards/_widget-7.blade.php
index 0965eb7..db69658 100644
--- a/resources/views/partials/widgets/cards/_widget-7.blade.php
+++ b/resources/views/partials/widgets/cards/_widget-7.blade.php
@@ -5,10 +5,10 @@
 		<!--begin::Title-->
 		<div class="card-title d-flex flex-column">
 			<!--begin::Amount-->
-			<span class="fs-2hx fw-bold text-dark me-2 lh-1 ls-n2">357</span>
+			<span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2">357</span>
 			<!--end::Amount-->
 			<!--begin::Subtitle-->
-			<span class="text-gray-400 pt-1 fw-semibold fs-6">Professionals</span>
+			<span class="text-gray-500 pt-1 fw-semibold fs-6">Professionals</span>
 			<!--end::Subtitle-->
 		</div>
 		<!--end::Title-->
diff --git a/resources/views/partials/widgets/charts/_widget-14.blade.php b/resources/views/partials/widgets/charts/_widget-14.blade.php
index 48b50df..dc29ceb 100644
--- a/resources/views/partials/widgets/charts/_widget-14.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-14.blade.php
@@ -1,29 +1,29 @@
-<!--begin::Chart widget 14-->
-<div class="card card-flush h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header pt-7">
-		<!--begin::Title-->
-		<h3 class="card-title align-items-start flex-column">
-			<span class="card-label fw-bold text-dark">Departments</span>
-			<span class="text-gray-400 pt-2 fw-semibold fs-6">Performance & achievements</span>
-		</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			@include('partials/menus/_menu-3')
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body pt-5">
-		<!--begin::Chart container-->
-		<div id="kt_charts_widget_14_chart" class="w-100 h-350px"></div>
-		<!--end::Chart container-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::Chart widget 14-->
\ No newline at end of file
+<!--begin::Chart widget 14-->
+<div class="card card-flush h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header pt-7">
+		<!--begin::Title-->
+		<h3 class="card-title align-items-start flex-column">
+			<span class="card-label fw-bold text-gray-900">Departments</span>
+			<span class="text-gray-500 pt-2 fw-semibold fs-6">Performance & achievements</span>
+		</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			@include('partials/menus/_menu-3')
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body pt-5">
+		<!--begin::Chart container-->
+		<div id="kt_charts_widget_14_chart" class="w-100 h-350px"></div>
+		<!--end::Chart container-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::Chart widget 14-->
diff --git a/resources/views/partials/widgets/charts/_widget-20.blade.php b/resources/views/partials/widgets/charts/_widget-20.blade.php
index f891963..350c2da 100644
--- a/resources/views/partials/widgets/charts/_widget-20.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-20.blade.php
@@ -1,79 +1,79 @@
-<!--begin::Chart widget 20-->
-<div class="card card-flush h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header py-5">
-		<!--begin::Title-->
-		<h3 class="card-title fw-bold text-gray-800">Monthly Targets</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
-			<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4">
-			<!--begin::Display range-->
-			<div class="text-gray-600 fw-bold">Loading date range...</div>
-			<!--end::Display range-->
-			{!! getIcon('calendar-8', 'fs-1 ms-2 me-0') !!}</div>
-			<!--end::Daterangepicker-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Card body-->
-	<div class="card-body d-flex justify-content-between flex-column pb-0 px-0 pt-1">
-		<!--begin::Items-->
-		<div class="d-flex flex-wrap d-grid gap-5 px-9 mb-5">
-			<!--begin::Item-->
-			<div class="me-md-2">
-				<!--begin::Statistics-->
-				<div class="d-flex mb-2">
-					<span class="fs-4 fw-semibold text-gray-400 me-1">$</span>
-					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">12,706</span>
-				</div>
-				<!--end::Statistics-->
-				<!--begin::Description-->
-				<span class="fs-6 fw-semibold text-gray-400">Targets for April</span>
-				<!--end::Description-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<div class="border-start-dashed border-end-dashed border-start border-end border-gray-300 px-5 ps-md-10 pe-md-7 me-md-5">
-				<!--begin::Statistics-->
-				<div class="d-flex mb-2">
-					<span class="fs-4 fw-semibold text-gray-400 me-1">$</span>
-					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">8,035</span>
-				</div>
-				<!--end::Statistics-->
-				<!--begin::Description-->
-				<span class="fs-6 fw-semibold text-gray-400">Actual for April</span>
-				<!--end::Description-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<div class="m-0">
-				<!--begin::Statistics-->
-				<div class="d-flex align-items-center mb-2">
-					<!--begin::Currency-->
-					<span class="fs-4 fw-semibold text-gray-400 align-self-start me-1">$</span>
-					<!--end::Currency-->
-					<!--begin::Value-->
-					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">4,684</span>
-					<!--end::Value-->
-					<!--begin::Label-->
-					<span class="badge badge-light-success fs-base">{!! getIcon('black-up', 'fs-7 text-success ms-n1') !!} 4.5%</span>
-					<!--end::Label-->
-				</div>
-				<!--end::Statistics-->
-				<!--begin::Description-->
-				<span class="fs-6 fw-semibold text-gray-400">GAP</span>
-				<!--end::Description-->
-			</div>
-			<!--end::Item-->
-		</div>
-		<!--end::Items-->
-		<!--begin::Chart-->
-		<div id="kt_charts_widget_20" class="min-h-auto ps-4 pe-6" data-kt-chart-info="Revenue" style="height: 300px"></div>
-		<!--end::Chart-->
-	</div>
-	<!--end::Card body-->
-</div>
-<!--end::Chart widget 20-->
\ No newline at end of file
+<!--begin::Chart widget 20-->
+<div class="card card-flush h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header py-5">
+		<!--begin::Title-->
+		<h3 class="card-title fw-bold text-gray-800">Monthly Targets</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
+			<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4">
+			<!--begin::Display range-->
+			<div class="text-gray-600 fw-bold">Loading date range...</div>
+			<!--end::Display range-->
+			{!! getIcon('calendar-8', 'fs-1 ms-2 me-0') !!}</div>
+			<!--end::Daterangepicker-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Card body-->
+	<div class="card-body d-flex justify-content-between flex-column pb-0 px-0 pt-1">
+		<!--begin::Items-->
+		<div class="d-flex flex-wrap d-grid gap-5 px-9 mb-5">
+			<!--begin::Item-->
+			<div class="me-md-2">
+				<!--begin::Statistics-->
+				<div class="d-flex mb-2">
+					<span class="fs-4 fw-semibold text-gray-500 me-1">$</span>
+					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">12,706</span>
+				</div>
+				<!--end::Statistics-->
+				<!--begin::Description-->
+				<span class="fs-6 fw-semibold text-gray-500">Targets for April</span>
+				<!--end::Description-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<div class="border-start-dashed border-end-dashed border-start border-end border-gray-300 px-5 ps-md-10 pe-md-7 me-md-5">
+				<!--begin::Statistics-->
+				<div class="d-flex mb-2">
+					<span class="fs-4 fw-semibold text-gray-500 me-1">$</span>
+					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">8,035</span>
+				</div>
+				<!--end::Statistics-->
+				<!--begin::Description-->
+				<span class="fs-6 fw-semibold text-gray-500">Actual for April</span>
+				<!--end::Description-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<div class="m-0">
+				<!--begin::Statistics-->
+				<div class="d-flex align-items-center mb-2">
+					<!--begin::Currency-->
+					<span class="fs-4 fw-semibold text-gray-500 align-self-start me-1">$</span>
+					<!--end::Currency-->
+					<!--begin::Value-->
+					<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">4,684</span>
+					<!--end::Value-->
+					<!--begin::Label-->
+					<span class="badge badge-light-success fs-base">{!! getIcon('black-up', 'fs-7 text-success ms-n1') !!} 4.5%</span>
+					<!--end::Label-->
+				</div>
+				<!--end::Statistics-->
+				<!--begin::Description-->
+				<span class="fs-6 fw-semibold text-gray-500">GAP</span>
+				<!--end::Description-->
+			</div>
+			<!--end::Item-->
+		</div>
+		<!--end::Items-->
+		<!--begin::Chart-->
+		<div id="kt_charts_widget_20" class="min-h-auto ps-4 pe-6" data-kt-chart-info="Revenue" style="height: 300px"></div>
+		<!--end::Chart-->
+	</div>
+	<!--end::Card body-->
+</div>
+<!--end::Chart widget 20-->
diff --git a/resources/views/partials/widgets/charts/_widget-24.blade.php b/resources/views/partials/widgets/charts/_widget-24.blade.php
index 8033ee0..78a104c 100644
--- a/resources/views/partials/widgets/charts/_widget-24.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-24.blade.php
@@ -1,29 +1,29 @@
-<!--begin::Chart widget 24-->
-<div class="card card-flush overflow-hidden h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header py-5">
-		<!--begin::Title-->
-		<h3 class="card-title align-items-start flex-column">
-			<span class="card-label fw-bold text-dark">Human Resources</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">Reports by states and ganders</span>
-		</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1') !!}</button>
-			@include('partials/menus/_menu-2')
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Card body-->
-	<div class="card-body pt-0">
-		<!--begin::Chart-->
-		<div id="kt_charts_widget_24" class="min-h-auto" style="height: 300px"></div>
-		<!--end::Chart-->
-	</div>
-	<!--end::Card body-->
-</div>
-<!--end::Chart widget 24-->
\ No newline at end of file
+<!--begin::Chart widget 24-->
+<div class="card card-flush overflow-hidden h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header py-5">
+		<!--begin::Title-->
+		<h3 class="card-title align-items-start flex-column">
+			<span class="card-label fw-bold text-gray-900">Human Resources</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">Reports by states and ganders</span>
+		</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1') !!}</button>
+			@include('partials/menus/_menu-2')
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Card body-->
+	<div class="card-body pt-0">
+		<!--begin::Chart-->
+		<div id="kt_charts_widget_24" class="min-h-auto" style="height: 300px"></div>
+		<!--end::Chart-->
+	</div>
+	<!--end::Card body-->
+</div>
+<!--end::Chart widget 24-->
diff --git a/resources/views/partials/widgets/charts/_widget-27.blade.php b/resources/views/partials/widgets/charts/_widget-27.blade.php
index f90e912..0d99da3 100644
--- a/resources/views/partials/widgets/charts/_widget-27.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-27.blade.php
@@ -1,103 +1,103 @@
-<!--begin::Chart widget 27-->
-<div class="card card-flush h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header py-7">
-		<!--begin::Statistics-->
-		<div class="m-0">
-			<!--begin::Heading-->
-			<div class="d-flex align-items-center mb-2">
-				<!--begin::Title-->
-				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">35,568</span>
-				<!--end::Title-->
-				<!--begin::Label-->
-				<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-up', 'fs-5 text-danger ms-n1') !!} 8.02%</span>
-				<!--end::Label-->
-			</div>
-			<!--end::Heading-->
-			<!--begin::Description-->
-			<span class="fs-6 fw-semibold text-gray-400">Organic Sessions</span>
-			<!--end::Description-->
-		</div>
-		<!--end::Statistics-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			<!--begin::Menu 2-->
-			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mb-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Ticket</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Customer</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
-					<!--begin::Menu item-->
-					<a href="#" class="menu-link px-3">
-						<span class="menu-title">New Group</span>
-						<span class="menu-arrow"></span>
-					</a>
-					<!--end::Menu item-->
-					<!--begin::Menu sub-->
-					<div class="menu-sub menu-sub-dropdown w-175px py-4">
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Admin Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Staff Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Member Group</a>
-						</div>
-						<!--end::Menu item-->
-					</div>
-					<!--end::Menu sub-->
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Contact</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mt-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content px-3 py-3">
-						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-					</div>
-				</div>
-				<!--end::Menu item-->
-			</div>
-			<!--end::Menu 2-->
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body pt-0 pb-1">
-		<div id="kt_charts_widget_27" class="min-h-auto"></div>
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::Chart widget 27-->
\ No newline at end of file
+<!--begin::Chart widget 27-->
+<div class="card card-flush h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header py-7">
+		<!--begin::Statistics-->
+		<div class="m-0">
+			<!--begin::Heading-->
+			<div class="d-flex align-items-center mb-2">
+				<!--begin::Title-->
+				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">35,568</span>
+				<!--end::Title-->
+				<!--begin::Label-->
+				<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-up', 'fs-5 text-danger ms-n1') !!} 8.02%</span>
+				<!--end::Label-->
+			</div>
+			<!--end::Heading-->
+			<!--begin::Description-->
+			<span class="fs-6 fw-semibold text-gray-500">Organic Sessions</span>
+			<!--end::Description-->
+		</div>
+		<!--end::Statistics-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			<!--begin::Menu 2-->
+			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mb-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Ticket</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Customer</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
+					<!--begin::Menu item-->
+					<a href="#" class="menu-link px-3">
+						<span class="menu-title">New Group</span>
+						<span class="menu-arrow"></span>
+					</a>
+					<!--end::Menu item-->
+					<!--begin::Menu sub-->
+					<div class="menu-sub menu-sub-dropdown w-175px py-4">
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Admin Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Staff Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Member Group</a>
+						</div>
+						<!--end::Menu item-->
+					</div>
+					<!--end::Menu sub-->
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Contact</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mt-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content px-3 py-3">
+						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
+					</div>
+				</div>
+				<!--end::Menu item-->
+			</div>
+			<!--end::Menu 2-->
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body pt-0 pb-1">
+		<div id="kt_charts_widget_27" class="min-h-auto"></div>
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::Chart widget 27-->
diff --git a/resources/views/partials/widgets/charts/_widget-28.blade.php b/resources/views/partials/widgets/charts/_widget-28.blade.php
index e6edeb5..7b4dd46 100644
--- a/resources/views/partials/widgets/charts/_widget-28.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-28.blade.php
@@ -1,105 +1,105 @@
-<!--begin::Chart widget 28-->
-<div class="card card-flush h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header py-7">
-		<!--begin::Statistics-->
-		<div class="m-0">
-			<!--begin::Heading-->
-			<div class="d-flex align-items-center mb-2">
-				<!--begin::Title-->
-				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">2,579</span>
-				<!--end::Title-->
-				<!--begin::Label-->
-				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
-				<!--end::Label-->
-			</div>
-			<!--end::Heading-->
-			<!--begin::Description-->
-			<span class="fs-6 fw-semibold text-gray-400">Domain External Links</span>
-			<!--end::Description-->
-		</div>
-		<!--end::Statistics-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			<!--begin::Menu 2-->
-			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mb-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Ticket</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Customer</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
-					<!--begin::Menu item-->
-					<a href="#" class="menu-link px-3">
-						<span class="menu-title">New Group</span>
-						<span class="menu-arrow"></span>
-					</a>
-					<!--end::Menu item-->
-					<!--begin::Menu sub-->
-					<div class="menu-sub menu-sub-dropdown w-175px py-4">
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Admin Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Staff Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Member Group</a>
-						</div>
-						<!--end::Menu item-->
-					</div>
-					<!--end::Menu sub-->
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Contact</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mt-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content px-3 py-3">
-						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-					</div>
-				</div>
-				<!--end::Menu item-->
-			</div>
-			<!--end::Menu 2-->
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body d-flex align-items-end ps-4 pe-0 pb-4">
-		<!--begin::Chart-->
-		<div id="kt_charts_widget_28" class="h-300px w-100 min-h-auto"></div>
-		<!--end::Chart-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::Chart widget 28-->
\ No newline at end of file
+<!--begin::Chart widget 28-->
+<div class="card card-flush h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header py-7">
+		<!--begin::Statistics-->
+		<div class="m-0">
+			<!--begin::Heading-->
+			<div class="d-flex align-items-center mb-2">
+				<!--begin::Title-->
+				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">2,579</span>
+				<!--end::Title-->
+				<!--begin::Label-->
+				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
+				<!--end::Label-->
+			</div>
+			<!--end::Heading-->
+			<!--begin::Description-->
+			<span class="fs-6 fw-semibold text-gray-500">Domain External Links</span>
+			<!--end::Description-->
+		</div>
+		<!--end::Statistics-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			<!--begin::Menu 2-->
+			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mb-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Ticket</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Customer</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
+					<!--begin::Menu item-->
+					<a href="#" class="menu-link px-3">
+						<span class="menu-title">New Group</span>
+						<span class="menu-arrow"></span>
+					</a>
+					<!--end::Menu item-->
+					<!--begin::Menu sub-->
+					<div class="menu-sub menu-sub-dropdown w-175px py-4">
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Admin Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Staff Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Member Group</a>
+						</div>
+						<!--end::Menu item-->
+					</div>
+					<!--end::Menu sub-->
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Contact</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mt-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content px-3 py-3">
+						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
+					</div>
+				</div>
+				<!--end::Menu item-->
+			</div>
+			<!--end::Menu 2-->
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body d-flex align-items-end ps-4 pe-0 pb-4">
+		<!--begin::Chart-->
+		<div id="kt_charts_widget_28" class="h-300px w-100 min-h-auto"></div>
+		<!--end::Chart-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::Chart widget 28-->
diff --git a/resources/views/partials/widgets/charts/_widget-31.blade.php b/resources/views/partials/widgets/charts/_widget-31.blade.php
index f8134a1..7c4bcf7 100644
--- a/resources/views/partials/widgets/charts/_widget-31.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-31.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Title-->
 		<h3 class="card-title align-items-start flex-column">
 			<span class="card-label fw-bold text-gray-800">Warephase stats</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">8k social visitors</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">8k social visitors</span>
 		</h3>
 		<!--end::Title-->
 		<!--begin::Toolbar-->
diff --git a/resources/views/partials/widgets/charts/_widget-35.blade.php b/resources/views/partials/widgets/charts/_widget-35.blade.php
index 5592b6d..8d285c1 100644
--- a/resources/views/partials/widgets/charts/_widget-35.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-35.blade.php
@@ -1,453 +1,453 @@
-<!--begin::Chart Widget 35-->
-<div class="card card-flush h-md-100">
-	<!--begin::Header-->
-	<div class="card-header pt-5 mb-6">
-		<!--begin::Title-->
-		<h3 class="card-title align-items-start flex-column">
-			<!--begin::Statistics-->
-			<div class="d-flex align-items-center mb-2">
-				<!--begin::Currency-->
-				<span class="fs-3 fw-semibold text-gray-400 align-self-start me-1">$</span>
-				<!--end::Currency-->
-				<!--begin::Value-->
-				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">3,274.94</span>
-				<!--end::Value-->
-				<!--begin::Label-->
-				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 9.2%</span>
-				<!--end::Label-->
-			</div>
-			<!--end::Statistics-->
-			<!--begin::Description-->
-			<span class="fs-6 fw-semibold text-gray-400">Avg. Agent Earnings</span>
-			<!--end::Description-->
-		</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			<!--begin::Menu 2-->
-			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mb-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Ticket</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Customer</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
-					<!--begin::Menu item-->
-					<a href="#" class="menu-link px-3">
-						<span class="menu-title">New Group</span>
-						<span class="menu-arrow"></span>
-					</a>
-					<!--end::Menu item-->
-					<!--begin::Menu sub-->
-					<div class="menu-sub menu-sub-dropdown w-175px py-4">
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Admin Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Staff Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Member Group</a>
-						</div>
-						<!--end::Menu item-->
-					</div>
-					<!--end::Menu sub-->
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Contact</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mt-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content px-3 py-3">
-						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-					</div>
-				</div>
-				<!--end::Menu item-->
-			</div>
-			<!--end::Menu 2-->
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body py-0 px-0">
-		<!--begin::Nav-->
-		<ul class="nav d-flex justify-content-between mb-3 mx-9">
-			<!--begin::Item-->
-			<li class="nav-item mb-3">
-				<!--begin::Link-->
-				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px active" data-bs-toggle="tab" id="kt_charts_widget_35_tab_1" href="#kt_charts_widget_35_tab_content_1">1d</a>
-				<!--end::Link-->
-			</li>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<li class="nav-item mb-3">
-				<!--begin::Link-->
-				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_2" href="#kt_charts_widget_35_tab_content_2">5d</a>
-				<!--end::Link-->
-			</li>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<li class="nav-item mb-3">
-				<!--begin::Link-->
-				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_3" href="#kt_charts_widget_35_tab_content_3">1m</a>
-				<!--end::Link-->
-			</li>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<li class="nav-item mb-3">
-				<!--begin::Link-->
-				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_4" href="#kt_charts_widget_35_tab_content_4">6m</a>
-				<!--end::Link-->
-			</li>
-			<!--end::Item-->
-			<!--begin::Item-->
-			<li class="nav-item mb-3">
-				<!--begin::Link-->
-				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_5" href="#kt_charts_widget_35_tab_content_5">1y</a>
-				<!--end::Link-->
-			</li>
-			<!--end::Item-->
-		</ul>
-		<!--end::Nav-->
-		<!--begin::Tab Content-->
-		<div class="tab-content mt-n6">
-			<!--begin::Tap pane-->
-			<div class="tab-pane fade active show" id="kt_charts_widget_35_tab_content_1">
-				<!--begin::Chart-->
-				<div id="kt_charts_widget_35_chart_1" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
-				<!--end::Chart-->
-				<!--begin::Table container-->
-				<div class="table-responsive mx-9 mt-n6">
-					<!--begin::Table-->
-					<table class="table align-middle gs-0 gy-4">
-						<!--begin::Table head-->
-						<thead>
-							<tr>
-								<th class="min-w-100px"></th>
-								<th class="min-w-100px text-end pe-0"></th>
-								<th class="text-end min-w-50px"></th>
-							</tr>
-						</thead>
-						<!--end::Table head-->
-						<!--begin::Table body-->
-						<tbody>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-danger">-139.34</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">3:10 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$3,207.03</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-success">+576.24</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">3:55 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$3,274.94</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-success">+124.03</span>
-								</td>
-							</tr>
-						</tbody>
-						<!--end::Table body-->
-					</table>
-					<!--end::Table-->
-				</div>
-				<!--end::Table container-->
-			</div>
-			<!--end::Tap pane-->
-			<!--begin::Tap pane-->
-			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_2">
-				<!--begin::Chart-->
-				<div id="kt_charts_widget_35_chart_2" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
-				<!--end::Chart-->
-				<!--begin::Table container-->
-				<div class="table-responsive mx-9 mt-n6">
-					<!--begin::Table-->
-					<table class="table align-middle gs-0 gy-4">
-						<!--begin::Table head-->
-						<thead>
-							<tr>
-								<th class="min-w-100px"></th>
-								<th class="min-w-100px text-end pe-0"></th>
-								<th class="text-end min-w-50px"></th>
-							</tr>
-						</thead>
-						<!--end::Table head-->
-						<!--begin::Table body-->
-						<tbody>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,345.45</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-success">+134.02</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">11:35 AM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-primary">-124.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">3:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$1,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-danger">+144.04</span>
-								</td>
-							</tr>
-						</tbody>
-						<!--end::Table body-->
-					</table>
-					<!--end::Table-->
-				</div>
-				<!--end::Table container-->
-			</div>
-			<!--end::Tap pane-->
-			<!--begin::Tap pane-->
-			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_3">
-				<!--begin::Chart-->
-				<div id="kt_charts_widget_35_chart_3" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
-				<!--end::Chart-->
-				<!--begin::Table container-->
-				<div class="table-responsive mx-9 mt-n6">
-					<!--begin::Table-->
-					<table class="table align-middle gs-0 gy-4">
-						<!--begin::Table head-->
-						<thead>
-							<tr>
-								<th class="min-w-100px"></th>
-								<th class="min-w-100px text-end pe-0"></th>
-								<th class="text-end min-w-50px"></th>
-							</tr>
-						</thead>
-						<!--end::Table head-->
-						<!--begin::Table body-->
-						<tbody>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">3:20 AM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$3,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-primary">+185.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">12:30 AM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-danger">+124.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-success">-154.03</span>
-								</td>
-							</tr>
-						</tbody>
-						<!--end::Table body-->
-					</table>
-					<!--end::Table-->
-				</div>
-				<!--end::Table container-->
-			</div>
-			<!--end::Tap pane-->
-			<!--begin::Tap pane-->
-			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_4">
-				<!--begin::Chart-->
-				<div id="kt_charts_widget_35_chart_4" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
-				<!--end::Chart-->
-				<!--begin::Table container-->
-				<div class="table-responsive mx-9 mt-n6">
-					<!--begin::Table-->
-					<table class="table align-middle gs-0 gy-4">
-						<!--begin::Table head-->
-						<thead>
-							<tr>
-								<th class="min-w-100px"></th>
-								<th class="min-w-100px text-end pe-0"></th>
-								<th class="text-end min-w-50px"></th>
-							</tr>
-						</thead>
-						<!--end::Table head-->
-						<!--begin::Table body-->
-						<tbody>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-warning">+124.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">5:30 AM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$1,756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-info">+144.65</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,085.25</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-primary">+154.06</span>
-								</td>
-							</tr>
-						</tbody>
-						<!--end::Table body-->
-					</table>
-					<!--end::Table-->
-				</div>
-				<!--end::Table container-->
-			</div>
-			<!--end::Tap pane-->
-			<!--begin::Tap pane-->
-			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_5">
-				<!--begin::Chart-->
-				<div id="kt_charts_widget_35_chart_5" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
-				<!--end::Chart-->
-				<!--begin::Table container-->
-				<div class="table-responsive mx-9 mt-n6">
-					<!--begin::Table-->
-					<table class="table align-middle gs-0 gy-4">
-						<!--begin::Table head-->
-						<thead>
-							<tr>
-								<th class="min-w-100px"></th>
-								<th class="min-w-100px text-end pe-0"></th>
-								<th class="text-end min-w-50px"></th>
-							</tr>
-						</thead>
-						<!--end::Table head-->
-						<!--begin::Table body-->
-						<tbody>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$2,045.04</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-warning">+114.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">3:30 AM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-primary">-124.03</span>
-								</td>
-							</tr>
-							<tr>
-								<td>
-									<a href="#" class="text-gray-600 fw-bold fs-6">10:30 PM</a>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="text-gray-800 fw-bold fs-6 me-1">$1.756.26</span>
-								</td>
-								<td class="pe-0 text-end">
-									<span class="fw-bold fs-6 text-info">+165.86</span>
-								</td>
-							</tr>
-						</tbody>
-						<!--end::Table body-->
-					</table>
-					<!--end::Table-->
-				</div>
-				<!--end::Table container-->
-			</div>
-			<!--end::Tap pane-->
-		</div>
-		<!--end::Tab Content-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::Chart Widget 35-->
\ No newline at end of file
+<!--begin::Chart Widget 35-->
+<div class="card card-flush h-md-100">
+	<!--begin::Header-->
+	<div class="card-header pt-5 mb-6">
+		<!--begin::Title-->
+		<h3 class="card-title align-items-start flex-column">
+			<!--begin::Statistics-->
+			<div class="d-flex align-items-center mb-2">
+				<!--begin::Currency-->
+				<span class="fs-3 fw-semibold text-gray-500 align-self-start me-1">$</span>
+				<!--end::Currency-->
+				<!--begin::Value-->
+				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">3,274.94</span>
+				<!--end::Value-->
+				<!--begin::Label-->
+				<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 9.2%</span>
+				<!--end::Label-->
+			</div>
+			<!--end::Statistics-->
+			<!--begin::Description-->
+			<span class="fs-6 fw-semibold text-gray-500">Avg. Agent Earnings</span>
+			<!--end::Description-->
+		</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			<!--begin::Menu 2-->
+			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mb-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Ticket</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Customer</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
+					<!--begin::Menu item-->
+					<a href="#" class="menu-link px-3">
+						<span class="menu-title">New Group</span>
+						<span class="menu-arrow"></span>
+					</a>
+					<!--end::Menu item-->
+					<!--begin::Menu sub-->
+					<div class="menu-sub menu-sub-dropdown w-175px py-4">
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Admin Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Staff Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Member Group</a>
+						</div>
+						<!--end::Menu item-->
+					</div>
+					<!--end::Menu sub-->
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Contact</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mt-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content px-3 py-3">
+						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
+					</div>
+				</div>
+				<!--end::Menu item-->
+			</div>
+			<!--end::Menu 2-->
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body py-0 px-0">
+		<!--begin::Nav-->
+		<ul class="nav d-flex justify-content-between mb-3 mx-9">
+			<!--begin::Item-->
+			<li class="nav-item mb-3">
+				<!--begin::Link-->
+				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px active" data-bs-toggle="tab" id="kt_charts_widget_35_tab_1" href="#kt_charts_widget_35_tab_content_1">1d</a>
+				<!--end::Link-->
+			</li>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<li class="nav-item mb-3">
+				<!--begin::Link-->
+				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_2" href="#kt_charts_widget_35_tab_content_2">5d</a>
+				<!--end::Link-->
+			</li>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<li class="nav-item mb-3">
+				<!--begin::Link-->
+				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_3" href="#kt_charts_widget_35_tab_content_3">1m</a>
+				<!--end::Link-->
+			</li>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<li class="nav-item mb-3">
+				<!--begin::Link-->
+				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_4" href="#kt_charts_widget_35_tab_content_4">6m</a>
+				<!--end::Link-->
+			</li>
+			<!--end::Item-->
+			<!--begin::Item-->
+			<li class="nav-item mb-3">
+				<!--begin::Link-->
+				<a class="nav-link btn btn-flex flex-center btn-active-danger btn-color-gray-600 btn-active-color-white rounded-2 w-45px h-35px" data-bs-toggle="tab" id="kt_charts_widget_35_tab_5" href="#kt_charts_widget_35_tab_content_5">1y</a>
+				<!--end::Link-->
+			</li>
+			<!--end::Item-->
+		</ul>
+		<!--end::Nav-->
+		<!--begin::Tab Content-->
+		<div class="tab-content mt-n6">
+			<!--begin::Tap pane-->
+			<div class="tab-pane fade active show" id="kt_charts_widget_35_tab_content_1">
+				<!--begin::Chart-->
+				<div id="kt_charts_widget_35_chart_1" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
+				<!--end::Chart-->
+				<!--begin::Table container-->
+				<div class="table-responsive mx-9 mt-n6">
+					<!--begin::Table-->
+					<table class="table align-middle gs-0 gy-4">
+						<!--begin::Table head-->
+						<thead>
+							<tr>
+								<th class="min-w-100px"></th>
+								<th class="min-w-100px text-end pe-0"></th>
+								<th class="text-end min-w-50px"></th>
+							</tr>
+						</thead>
+						<!--end::Table head-->
+						<!--begin::Table body-->
+						<tbody>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-danger">-139.34</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">3:10 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$3,207.03</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-success">+576.24</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">3:55 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$3,274.94</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-success">+124.03</span>
+								</td>
+							</tr>
+						</tbody>
+						<!--end::Table body-->
+					</table>
+					<!--end::Table-->
+				</div>
+				<!--end::Table container-->
+			</div>
+			<!--end::Tap pane-->
+			<!--begin::Tap pane-->
+			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_2">
+				<!--begin::Chart-->
+				<div id="kt_charts_widget_35_chart_2" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
+				<!--end::Chart-->
+				<!--begin::Table container-->
+				<div class="table-responsive mx-9 mt-n6">
+					<!--begin::Table-->
+					<table class="table align-middle gs-0 gy-4">
+						<!--begin::Table head-->
+						<thead>
+							<tr>
+								<th class="min-w-100px"></th>
+								<th class="min-w-100px text-end pe-0"></th>
+								<th class="text-end min-w-50px"></th>
+							</tr>
+						</thead>
+						<!--end::Table head-->
+						<!--begin::Table body-->
+						<tbody>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,345.45</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-success">+134.02</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">11:35 AM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-primary">-124.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">3:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$1,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-danger">+144.04</span>
+								</td>
+							</tr>
+						</tbody>
+						<!--end::Table body-->
+					</table>
+					<!--end::Table-->
+				</div>
+				<!--end::Table container-->
+			</div>
+			<!--end::Tap pane-->
+			<!--begin::Tap pane-->
+			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_3">
+				<!--begin::Chart-->
+				<div id="kt_charts_widget_35_chart_3" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
+				<!--end::Chart-->
+				<!--begin::Table container-->
+				<div class="table-responsive mx-9 mt-n6">
+					<!--begin::Table-->
+					<table class="table align-middle gs-0 gy-4">
+						<!--begin::Table head-->
+						<thead>
+							<tr>
+								<th class="min-w-100px"></th>
+								<th class="min-w-100px text-end pe-0"></th>
+								<th class="text-end min-w-50px"></th>
+							</tr>
+						</thead>
+						<!--end::Table head-->
+						<!--begin::Table body-->
+						<tbody>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">3:20 AM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$3,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-primary">+185.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">12:30 AM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-danger">+124.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-success">-154.03</span>
+								</td>
+							</tr>
+						</tbody>
+						<!--end::Table body-->
+					</table>
+					<!--end::Table-->
+				</div>
+				<!--end::Table container-->
+			</div>
+			<!--end::Tap pane-->
+			<!--begin::Tap pane-->
+			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_4">
+				<!--begin::Chart-->
+				<div id="kt_charts_widget_35_chart_4" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
+				<!--end::Chart-->
+				<!--begin::Table container-->
+				<div class="table-responsive mx-9 mt-n6">
+					<!--begin::Table-->
+					<table class="table align-middle gs-0 gy-4">
+						<!--begin::Table head-->
+						<thead>
+							<tr>
+								<th class="min-w-100px"></th>
+								<th class="min-w-100px text-end pe-0"></th>
+								<th class="text-end min-w-50px"></th>
+							</tr>
+						</thead>
+						<!--end::Table head-->
+						<!--begin::Table body-->
+						<tbody>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-warning">+124.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">5:30 AM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$1,756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-info">+144.65</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">4:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,085.25</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-primary">+154.06</span>
+								</td>
+							</tr>
+						</tbody>
+						<!--end::Table body-->
+					</table>
+					<!--end::Table-->
+				</div>
+				<!--end::Table container-->
+			</div>
+			<!--end::Tap pane-->
+			<!--begin::Tap pane-->
+			<div class="tab-pane fade" id="kt_charts_widget_35_tab_content_5">
+				<!--begin::Chart-->
+				<div id="kt_charts_widget_35_chart_5" data-kt-chart-color="primary" class="min-h-auto h-200px ps-3 pe-6"></div>
+				<!--end::Chart-->
+				<!--begin::Table container-->
+				<div class="table-responsive mx-9 mt-n6">
+					<!--begin::Table-->
+					<table class="table align-middle gs-0 gy-4">
+						<!--begin::Table head-->
+						<thead>
+							<tr>
+								<th class="min-w-100px"></th>
+								<th class="min-w-100px text-end pe-0"></th>
+								<th class="text-end min-w-50px"></th>
+							</tr>
+						</thead>
+						<!--end::Table head-->
+						<!--begin::Table body-->
+						<tbody>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">2:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$2,045.04</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-warning">+114.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">3:30 AM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-primary">-124.03</span>
+								</td>
+							</tr>
+							<tr>
+								<td>
+									<a href="#" class="text-gray-600 fw-bold fs-6">10:30 PM</a>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="text-gray-800 fw-bold fs-6 me-1">$1.756.26</span>
+								</td>
+								<td class="pe-0 text-end">
+									<span class="fw-bold fs-6 text-info">+165.86</span>
+								</td>
+							</tr>
+						</tbody>
+						<!--end::Table body-->
+					</table>
+					<!--end::Table-->
+				</div>
+				<!--end::Table container-->
+			</div>
+			<!--end::Tap pane-->
+		</div>
+		<!--end::Tab Content-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::Chart Widget 35-->
diff --git a/resources/views/partials/widgets/charts/_widget-36.blade.php b/resources/views/partials/widgets/charts/_widget-36.blade.php
index 1c1e0f7..6c43e3c 100644
--- a/resources/views/partials/widgets/charts/_widget-36.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-36.blade.php
@@ -1,32 +1,32 @@
-<!--begin::Chart widget 36-->
-<div class="card card-flush overflow-hidden h-lg-100">
-	<!--begin::Header-->
-	<div class="card-header pt-5">
-		<!--begin::Title-->
-		<h3 class="card-title align-items-start flex-column">
-			<span class="card-label fw-bold text-dark">Performance</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">1,046 Inbound Calls today</span>
-		</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
-			<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" data-kt-daterangepicker-range="today" class="btn btn-sm btn-light d-flex align-items-center px-4">
-			<!--begin::Display range-->
-			<div class="text-gray-600 fw-bold">Loading date range...</div>
-			<!--end::Display range-->
-			{!! getIcon('calendar-8', 'fs-1 ms-2 me-0') !!}</div>
-			<!--end::Daterangepicker-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Card body-->
-	<div class="card-body d-flex align-items-end p-0">
-		<!--begin::Chart-->
-		<div id="kt_charts_widget_36" class="min-h-auto w-100 ps-4 pe-6" style="height: 300px"></div>
-		<!--end::Chart-->
-	</div>
-	<!--end::Card body-->
-</div>
-<!--end::Chart widget 36-->
\ No newline at end of file
+<!--begin::Chart widget 36-->
+<div class="card card-flush overflow-hidden h-lg-100">
+	<!--begin::Header-->
+	<div class="card-header pt-5">
+		<!--begin::Title-->
+		<h3 class="card-title align-items-start flex-column">
+			<span class="card-label fw-bold text-gray-900">Performance</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">1,046 Inbound Calls today</span>
+		</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Daterangepicker(defined in src/js/layout/app.js)-->
+			<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" data-kt-daterangepicker-range="today" class="btn btn-sm btn-light d-flex align-items-center px-4">
+			<!--begin::Display range-->
+			<div class="text-gray-600 fw-bold">Loading date range...</div>
+			<!--end::Display range-->
+			{!! getIcon('calendar-8', 'fs-1 ms-2 me-0') !!}</div>
+			<!--end::Daterangepicker-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Card body-->
+	<div class="card-body d-flex align-items-end p-0">
+		<!--begin::Chart-->
+		<div id="kt_charts_widget_36" class="min-h-auto w-100 ps-4 pe-6" style="height: 300px"></div>
+		<!--end::Chart-->
+	</div>
+	<!--end::Card body-->
+</div>
+<!--end::Chart widget 36-->
diff --git a/resources/views/partials/widgets/charts/_widget-8.blade.php b/resources/views/partials/widgets/charts/_widget-8.blade.php
index cba6ceb..cab8dec 100644
--- a/resources/views/partials/widgets/charts/_widget-8.blade.php
+++ b/resources/views/partials/widgets/charts/_widget-8.blade.php
@@ -1,228 +1,228 @@
-<!--begin::Chart widget 8-->
-<div class="card card-flush h-xl-100">
-	<!--begin::Header-->
-	<div class="card-header pt-5">
-		<!--begin::Title-->
-		<h3 class="card-title align-items-start flex-column">
-			<span class="card-label fw-bold text-dark">Performance Overview</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">Users from all channels</span>
-		</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<ul class="nav" id="kt_chart_widget_8_tabs">
-				<li class="nav-item">
-					<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1" data-bs-toggle="tab" id="kt_chart_widget_8_week_toggle" href="#kt_chart_widget_8_week_tab">Month</a>
-				</li>
-				<li class="nav-item">
-					<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 active" data-bs-toggle="tab" id="kt_chart_widget_8_month_toggle" href="#kt_chart_widget_8_month_tab">Week</a>
-				</li>
-			</ul>
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body pt-6">
-		<!--begin::Tab content-->
-		<div class="tab-content">
-			<!--begin::Tab pane-->
-			<div class="tab-pane fade" id="kt_chart_widget_8_week_tab" role="tabpanel">
-				<!--begin::Statistics-->
-				<div class="mb-5">
-					<!--begin::Statistics-->
-					<div class="d-flex align-items-center mb-2">
-						<span class="fs-1 fw-semibold text-gray-400 me-1 mt-n1">$</span>
-						<span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">18,89</span>
-						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 4,8%</span>
-					</div>
-					<!--end::Statistics-->
-					<!--begin::Description-->
-					<span class="fs-6 fw-semibold text-gray-400">Avarage cost per interaction</span>
-					<!--end::Description-->
-				</div>
-				<!--end::Statistics-->
-				<!--begin::Chart-->
-				<div id="kt_chart_widget_8_week_chart" class="ms-n5 min-h-auto" style="height: 275px"></div>
-				<!--end::Chart-->
-				<!--begin::Items-->
-				<div class="d-flex flex-wrap pt-5">
-					<!--begin::Item-->
-					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-&lt;gray-600 fs-6">Google Ads</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-					<!--begin::Item-->
-					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Courses</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-					<!--begin::Item-->
-					<div class="d-flex flex-column pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Radio</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-				</div>
-				<!--ed::Items-->
-			</div>
-			<!--end::Tab pane-->
-			<!--begin::Tab pane-->
-			<div class="tab-pane fade active show" id="kt_chart_widget_8_month_tab" role="tabpanel">
-				<!--begin::Statistics-->
-				<div class="mb-5">
-					<!--begin::Statistics-->
-					<div class="d-flex align-items-center mb-2">
-						<span class="fs-1 fw-semibold text-gray-400 me-1 mt-n1">$</span>
-						<span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">8,55</span>
-						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
-					</div>
-					<!--end::Statistics-->
-					<!--begin::Description-->
-					<span class="fs-6 fw-semibold text-gray-400">Avarage cost per interaction</span>
-					<!--end::Description-->
-				</div>
-				<!--end::Statistics-->
-				<!--begin::Chart-->
-				<div id="kt_chart_widget_8_month_chart" class="ms-n5 min-h-auto" style="height: 275px"></div>
-				<!--end::Chart-->
-				<!--begin::Items-->
-				<div class="d-flex flex-wrap pt-5">
-					<!--begin::Item-->
-					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Google Ads</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-					<!--begin::Item-->
-					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Courses</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-					<!--begin::Item-->
-					<div class="d-flex flex-column pt-sm-3 pt-6">
-						<!--begin::Item-->
-						<div class="d-flex align-items-center mb-3 mb-sm-6">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-						<!--begin::Item-->
-						<div class="d-flex align-items-center">
-							<!--begin::Bullet-->
-							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
-							<!--end::Bullet-->
-							<!--begin::Label-->
-							<span class="fw-bold text-gray-600 fs-6">Radio</span>
-							<!--end::Label-->
-						</div>
-						<!--ed::Item-->
-					</div>
-					<!--ed::Item-->
-				</div>
-				<!--ed::Items-->
-			</div>
-			<!--end::Tab pane-->
-		</div>
-		<!--end::Tab content-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::Chart widget 8-->
\ No newline at end of file
+<!--begin::Chart widget 8-->
+<div class="card card-flush h-xl-100">
+	<!--begin::Header-->
+	<div class="card-header pt-5">
+		<!--begin::Title-->
+		<h3 class="card-title align-items-start flex-column">
+			<span class="card-label fw-bold text-gray-900">Performance Overview</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">Users from all channels</span>
+		</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<ul class="nav" id="kt_chart_widget_8_tabs">
+				<li class="nav-item">
+					<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1" data-bs-toggle="tab" id="kt_chart_widget_8_week_toggle" href="#kt_chart_widget_8_week_tab">Month</a>
+				</li>
+				<li class="nav-item">
+					<a class="nav-link btn btn-sm btn-color-muted btn-active btn-active-light fw-bold px-4 me-1 active" data-bs-toggle="tab" id="kt_chart_widget_8_month_toggle" href="#kt_chart_widget_8_month_tab">Week</a>
+				</li>
+			</ul>
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body pt-6">
+		<!--begin::Tab content-->
+		<div class="tab-content">
+			<!--begin::Tab pane-->
+			<div class="tab-pane fade" id="kt_chart_widget_8_week_tab" role="tabpanel">
+				<!--begin::Statistics-->
+				<div class="mb-5">
+					<!--begin::Statistics-->
+					<div class="d-flex align-items-center mb-2">
+						<span class="fs-1 fw-semibold text-gray-500 me-1 mt-n1">$</span>
+						<span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">18,89</span>
+						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 4,8%</span>
+					</div>
+					<!--end::Statistics-->
+					<!--begin::Description-->
+					<span class="fs-6 fw-semibold text-gray-500">Avarage cost per interaction</span>
+					<!--end::Description-->
+				</div>
+				<!--end::Statistics-->
+				<!--begin::Chart-->
+				<div id="kt_chart_widget_8_week_chart" class="ms-n5 min-h-auto" style="height: 275px"></div>
+				<!--end::Chart-->
+				<!--begin::Items-->
+				<div class="d-flex flex-wrap pt-5">
+					<!--begin::Item-->
+					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-&lt;gray-600 fs-6">Google Ads</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+					<!--begin::Item-->
+					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Courses</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+					<!--begin::Item-->
+					<div class="d-flex flex-column pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Radio</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+				</div>
+				<!--ed::Items-->
+			</div>
+			<!--end::Tab pane-->
+			<!--begin::Tab pane-->
+			<div class="tab-pane fade active show" id="kt_chart_widget_8_month_tab" role="tabpanel">
+				<!--begin::Statistics-->
+				<div class="mb-5">
+					<!--begin::Statistics-->
+					<div class="d-flex align-items-center mb-2">
+						<span class="fs-1 fw-semibold text-gray-500 me-1 mt-n1">$</span>
+						<span class="fs-3x fw-bold text-gray-800 me-2 lh-1 ls-n2">8,55</span>
+						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.2%</span>
+					</div>
+					<!--end::Statistics-->
+					<!--begin::Description-->
+					<span class="fs-6 fw-semibold text-gray-500">Avarage cost per interaction</span>
+					<!--end::Description-->
+				</div>
+				<!--end::Statistics-->
+				<!--begin::Chart-->
+				<div id="kt_chart_widget_8_month_chart" class="ms-n5 min-h-auto" style="height: 275px"></div>
+				<!--end::Chart-->
+				<!--begin::Items-->
+				<div class="d-flex flex-wrap pt-5">
+					<!--begin::Item-->
+					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-primary me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Social Campaigns</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-danger me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Google Ads</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+					<!--begin::Item-->
+					<div class="d-flex flex-column me-7 me-lg-16 pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Email Newsletter</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-warning me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Courses</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+					<!--begin::Item-->
+					<div class="d-flex flex-column pt-sm-3 pt-6">
+						<!--begin::Item-->
+						<div class="d-flex align-items-center mb-3 mb-sm-6">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-info me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">TV Campaign</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+						<!--begin::Item-->
+						<div class="d-flex align-items-center">
+							<!--begin::Bullet-->
+							<span class="bullet bullet-dot bg-success me-2 h-10px w-10px"></span>
+							<!--end::Bullet-->
+							<!--begin::Label-->
+							<span class="fw-bold text-gray-600 fs-6">Radio</span>
+							<!--end::Label-->
+						</div>
+						<!--ed::Item-->
+					</div>
+					<!--ed::Item-->
+				</div>
+				<!--ed::Items-->
+			</div>
+			<!--end::Tab pane-->
+		</div>
+		<!--end::Tab content-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::Chart widget 8-->
diff --git a/resources/views/partials/widgets/lists/_widget-26.blade.php b/resources/views/partials/widgets/lists/_widget-26.blade.php
index 2379798..5aa291d 100644
--- a/resources/views/partials/widgets/lists/_widget-26.blade.php
+++ b/resources/views/partials/widgets/lists/_widget-26.blade.php
@@ -1,124 +1,124 @@
-<!--begin::List widget 26-->
-<div class="card card-flush h-lg-50">
-	<!--begin::Header-->
-	<div class="card-header pt-5">
-		<!--begin::Title-->
-		<h3 class="card-title text-gray-800 fw-bold">External Links</h3>
-		<!--end::Title-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			<!--begin::Menu 2-->
-			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mb-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Ticket</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Customer</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
-					<!--begin::Menu item-->
-					<a href="#" class="menu-link px-3">
-						<span class="menu-title">New Group</span>
-						<span class="menu-arrow"></span>
-					</a>
-					<!--end::Menu item-->
-					<!--begin::Menu sub-->
-					<div class="menu-sub menu-sub-dropdown w-175px py-4">
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Admin Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Staff Group</a>
-						</div>
-						<!--end::Menu item-->
-						<!--begin::Menu item-->
-						<div class="menu-item px-3">
-							<a href="#" class="menu-link px-3">Member Group</a>
-						</div>
-						<!--end::Menu item-->
-					</div>
-					<!--end::Menu sub-->
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<a href="#" class="menu-link px-3">New Contact</a>
-				</div>
-				<!--end::Menu item-->
-				<!--begin::Menu separator-->
-				<div class="separator mt-3 opacity-75"></div>
-				<!--end::Menu separator-->
-				<!--begin::Menu item-->
-				<div class="menu-item px-3">
-					<div class="menu-content px-3 py-3">
-						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
-					</div>
-				</div>
-				<!--end::Menu item-->
-			</div>
-			<!--end::Menu 2-->
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body pt-5">
-		<!--begin::Item-->
-		<div class="d-flex flex-stack">
-			<!--begin::Section-->
-			<a href="#" class="text-primary fw-semibold fs-6 me-2">Avg. Client Rating</a>
-			<!--end::Section-->
-			<!--begin::Action-->
-			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
-			<!--end::Action-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Separator-->
-		<div class="separator separator-dashed my-3"></div>
-		<!--end::Separator-->
-		<!--begin::Item-->
-		<div class="d-flex flex-stack">
-			<!--begin::Section-->
-			<a href="#" class="text-primary fw-semibold fs-6 me-2">Instagram Followers</a>
-			<!--end::Section-->
-			<!--begin::Action-->
-			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
-			<!--end::Action-->
-		</div>
-		<!--end::Item-->
-		<!--begin::Separator-->
-		<div class="separator separator-dashed my-3"></div>
-		<!--end::Separator-->
-		<!--begin::Item-->
-		<div class="d-flex flex-stack">
-			<!--begin::Section-->
-			<a href="#" class="text-primary fw-semibold fs-6 me-2">Google Ads CPC</a>
-			<!--end::Section-->
-			<!--begin::Action-->
-			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
-			<!--end::Action-->
-		</div>
-		<!--end::Item-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::LIst widget 26-->
\ No newline at end of file
+<!--begin::List widget 26-->
+<div class="card card-flush h-lg-50">
+	<!--begin::Header-->
+	<div class="card-header pt-5">
+		<!--begin::Title-->
+		<h3 class="card-title text-gray-800 fw-bold">External Links</h3>
+		<!--end::Title-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			<!--begin::Menu 2-->
+			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mb-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Ticket</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Customer</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
+					<!--begin::Menu item-->
+					<a href="#" class="menu-link px-3">
+						<span class="menu-title">New Group</span>
+						<span class="menu-arrow"></span>
+					</a>
+					<!--end::Menu item-->
+					<!--begin::Menu sub-->
+					<div class="menu-sub menu-sub-dropdown w-175px py-4">
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Admin Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Staff Group</a>
+						</div>
+						<!--end::Menu item-->
+						<!--begin::Menu item-->
+						<div class="menu-item px-3">
+							<a href="#" class="menu-link px-3">Member Group</a>
+						</div>
+						<!--end::Menu item-->
+					</div>
+					<!--end::Menu sub-->
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<a href="#" class="menu-link px-3">New Contact</a>
+				</div>
+				<!--end::Menu item-->
+				<!--begin::Menu separator-->
+				<div class="separator mt-3 opacity-75"></div>
+				<!--end::Menu separator-->
+				<!--begin::Menu item-->
+				<div class="menu-item px-3">
+					<div class="menu-content px-3 py-3">
+						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
+					</div>
+				</div>
+				<!--end::Menu item-->
+			</div>
+			<!--end::Menu 2-->
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body pt-5">
+		<!--begin::Item-->
+		<div class="d-flex flex-stack">
+			<!--begin::Section-->
+			<a href="#" class="text-primary fw-semibold fs-6 me-2">Avg. Client Rating</a>
+			<!--end::Section-->
+			<!--begin::Action-->
+			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
+			<!--end::Action-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Separator-->
+		<div class="separator separator-dashed my-3"></div>
+		<!--end::Separator-->
+		<!--begin::Item-->
+		<div class="d-flex flex-stack">
+			<!--begin::Section-->
+			<a href="#" class="text-primary fw-semibold fs-6 me-2">Instagram Followers</a>
+			<!--end::Section-->
+			<!--begin::Action-->
+			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
+			<!--end::Action-->
+		</div>
+		<!--end::Item-->
+		<!--begin::Separator-->
+		<div class="separator separator-dashed my-3"></div>
+		<!--end::Separator-->
+		<!--begin::Item-->
+		<div class="d-flex flex-stack">
+			<!--begin::Section-->
+			<a href="#" class="text-primary fw-semibold fs-6 me-2">Google Ads CPC</a>
+			<!--end::Section-->
+			<!--begin::Action-->
+			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-500 btn-active-color-primary justify-content-end">{!! getIcon('exit-right-corner', 'fs-2') !!}</button>
+			<!--end::Action-->
+		</div>
+		<!--end::Item-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::LIst widget 26-->
diff --git a/resources/views/partials/widgets/lists/_widget-7.blade.php b/resources/views/partials/widgets/lists/_widget-7.blade.php
index 42d713b..5f05ef5 100644
--- a/resources/views/partials/widgets/lists/_widget-7.blade.php
+++ b/resources/views/partials/widgets/lists/_widget-7.blade.php
@@ -1,238 +1,238 @@
-<!--begin::List widget 7-->
-<div class="card card-flush h-md-100">
-	<!--begin::Header-->
-	<div class="card-header py-7">
-		<!--begin::Statistics-->
-		<div class="m-0">
-			<!--begin::Heading-->
-			<div class="d-flex align-items-center mb-2">
-				<!--begin::Title-->
-				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">0.37%</span>
-				<!--end::Title-->
-				<!--begin::Badge-->
-				<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-up', 'fs-5 text-danger ms-n1') !!} 8.02%</span>
-				<!--end::Badge-->
-			</div>
-			<!--end::Heading-->
-			<!--begin::Description-->
-			<span class="fs-6 fw-semibold text-gray-400">Online store convertion rate</span>
-			<!--end::Description-->
-		</div>
-		<!--end::Statistics-->
-		<!--begin::Toolbar-->
-		<div class="card-toolbar">
-			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
-			@include('partials/menus/_menu-2')
-			<!--end::Menu-->
-		</div>
-		<!--end::Toolbar-->
-	</div>
-	<!--end::Header-->
-	<!--begin::Body-->
-	<div class="card-body pt-0">
-		<!--begin::Items-->
-		<div class="mb-0">
-			<!--begin::Item-->
-			<div class="d-flex flex-stack">
-				<!--begin::Section-->
-				<div class="d-flex align-items-center me-5">
-					<!--begin::Symbol-->
-					<div class="symbol symbol-30px me-5">
-						<span class="symbol-label">{!! getIcon('magnifier', 'fs-3 text-gray-600') !!}</span>
-					</div>
-					<!--end::Symbol-->
-					<!--begin::Content-->
-					<div class="me-5">
-						<!--begin::Title-->
-						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Search Retargeting</a>
-						<!--end::Title-->
-						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
-						<!--end::Desc-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Section-->
-				<!--begin::Wrapper-->
-				<div class="d-flex align-items-center">
-					<!--begin::Number-->
-					<span class="text-gray-800 fw-bold fs-6 me-3">0.24%</span>
-					<!--end::Number-->
-					<!--begin::Info-->
-					<div class="d-flex flex-center">
-						<!--begin::label-->
-						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.4%</span>
-						<!--end::label-->
-					</div>
-					<!--end::Info-->
-				</div>
-				<!--end::Wrapper-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Separator-->
-			<div class="separator separator-dashed my-3"></div>
-			<!--end::Separator-->
-			<!--begin::Item-->
-			<div class="d-flex flex-stack">
-				<!--begin::Section-->
-				<div class="d-flex align-items-center me-5">
-					<!--begin::Symbol-->
-					<div class="symbol symbol-30px me-5">
-						<span class="symbol-label">{!! getIcon('tiktok', 'fs-3 text-gray-600') !!}</span>
-					</div>
-					<!--end::Symbol-->
-					<!--begin::Content-->
-					<div class="me-5">
-						<!--begin::Title-->
-						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Social Retargeting</a>
-						<!--end::Title-->
-						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
-						<!--end::Desc-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Section-->
-				<!--begin::Wrapper-->
-				<div class="d-flex align-items-center">
-					<!--begin::Number-->
-					<span class="text-gray-800 fw-bold fs-6 me-3">0.94%</span>
-					<!--end::Number-->
-					<!--begin::Info-->
-					<div class="d-flex flex-center">
-						<!--begin::label-->
-						<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-down', 'fs-5 text-danger ms-n1') !!} 9.4%</span>
-						<!--end::label-->
-					</div>
-					<!--end::Info-->
-				</div>
-				<!--end::Wrapper-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Separator-->
-			<div class="separator separator-dashed my-3"></div>
-			<!--end::Separator-->
-			<!--begin::Item-->
-			<div class="d-flex flex-stack">
-				<!--begin::Section-->
-				<div class="d-flex align-items-center me-5">
-					<!--begin::Symbol-->
-					<div class="symbol symbol-30px me-5">
-						<span class="symbol-label">{!! getIcon('sms', 'fs-3 text-gray-600') !!}</span>
-					</div>
-					<!--end::Symbol-->
-					<!--begin::Content-->
-					<div class="me-5">
-						<!--begin::Title-->
-						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Email Retargeting</a>
-						<!--end::Title-->
-						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
-						<!--end::Desc-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Section-->
-				<!--begin::Wrapper-->
-				<div class="d-flex align-items-center">
-					<!--begin::Number-->
-					<span class="text-gray-800 fw-bold fs-6 me-3">1.23%</span>
-					<!--end::Number-->
-					<!--begin::Info-->
-					<div class="d-flex flex-center">
-						<!--begin::label-->
-						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 0.2%</span>
-						<!--end::label-->
-					</div>
-					<!--end::Info-->
-				</div>
-				<!--end::Wrapper-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Separator-->
-			<div class="separator separator-dashed my-3"></div>
-			<!--end::Separator-->
-			<!--begin::Item-->
-			<div class="d-flex flex-stack">
-				<!--begin::Section-->
-				<div class="d-flex align-items-center me-5">
-					<!--begin::Symbol-->
-					<div class="symbol symbol-30px me-5">
-						<span class="symbol-label">{!! getIcon('icon', 'fs-3 text-gray-600') !!}</span>
-					</div>
-					<!--end::Symbol-->
-					<!--begin::Content-->
-					<div class="me-5">
-						<!--begin::Title-->
-						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Referrals Customers</a>
-						<!--end::Title-->
-						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
-						<!--end::Desc-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Section-->
-				<!--begin::Wrapper-->
-				<div class="d-flex align-items-center">
-					<!--begin::Number-->
-					<span class="text-gray-800 fw-bold fs-6 me-3">0.08%</span>
-					<!--end::Number-->
-					<!--begin::Info-->
-					<div class="d-flex flex-center">
-						<!--begin::label-->
-						<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-down', 'fs-5 text-danger ms-n1') !!} 0.4%</span>
-						<!--end::label-->
-					</div>
-					<!--end::Info-->
-				</div>
-				<!--end::Wrapper-->
-			</div>
-			<!--end::Item-->
-			<!--begin::Separator-->
-			<div class="separator separator-dashed my-3"></div>
-			<!--end::Separator-->
-			<!--begin::Item-->
-			<div class="d-flex flex-stack">
-				<!--begin::Section-->
-				<div class="d-flex align-items-center me-5">
-					<!--begin::Symbol-->
-					<div class="symbol symbol-30px me-5">
-						<span class="symbol-label">{!! getIcon('abstract-25', 'fs-3 text-gray-600') !!}</span>
-					</div>
-					<!--end::Symbol-->
-					<!--begin::Content-->
-					<div class="me-5">
-						<!--begin::Title-->
-						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Other</a>
-						<!--end::Title-->
-						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
-						<!--end::Desc-->
-					</div>
-					<!--end::Content-->
-				</div>
-				<!--end::Section-->
-				<!--begin::Wrapper-->
-				<div class="d-flex align-items-center">
-					<!--begin::Number-->
-					<span class="text-gray-800 fw-bold fs-6 me-3">0.46%</span>
-					<!--end::Number-->
-					<!--begin::Info-->
-					<div class="d-flex flex-center">
-						<!--begin::label-->
-						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 8.3%</span>
-						<!--end::label-->
-					</div>
-					<!--end::Info-->
-				</div>
-				<!--end::Wrapper-->
-			</div>
-			<!--end::Item-->
-		</div>
-		<!--end::Items-->
-	</div>
-	<!--end::Body-->
-</div>
-<!--end::List widget 7-->
\ No newline at end of file
+<!--begin::List widget 7-->
+<div class="card card-flush h-md-100">
+	<!--begin::Header-->
+	<div class="card-header py-7">
+		<!--begin::Statistics-->
+		<div class="m-0">
+			<!--begin::Heading-->
+			<div class="d-flex align-items-center mb-2">
+				<!--begin::Title-->
+				<span class="fs-2hx fw-bold text-gray-800 me-2 lh-1 ls-n2">0.37%</span>
+				<!--end::Title-->
+				<!--begin::Badge-->
+				<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-up', 'fs-5 text-danger ms-n1') !!} 8.02%</span>
+				<!--end::Badge-->
+			</div>
+			<!--end::Heading-->
+			<!--begin::Description-->
+			<span class="fs-6 fw-semibold text-gray-500">Online store convertion rate</span>
+			<!--end::Description-->
+		</div>
+		<!--end::Statistics-->
+		<!--begin::Toolbar-->
+		<div class="card-toolbar">
+			<!--begin::Menu-->
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			@include('partials/menus/_menu-2')
+			<!--end::Menu-->
+		</div>
+		<!--end::Toolbar-->
+	</div>
+	<!--end::Header-->
+	<!--begin::Body-->
+	<div class="card-body pt-0">
+		<!--begin::Items-->
+		<div class="mb-0">
+			<!--begin::Item-->
+			<div class="d-flex flex-stack">
+				<!--begin::Section-->
+				<div class="d-flex align-items-center me-5">
+					<!--begin::Symbol-->
+					<div class="symbol symbol-30px me-5">
+						<span class="symbol-label">{!! getIcon('magnifier', 'fs-3 text-gray-600') !!}</span>
+					</div>
+					<!--end::Symbol-->
+					<!--begin::Content-->
+					<div class="me-5">
+						<!--begin::Title-->
+						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Search Retargeting</a>
+						<!--end::Title-->
+						<!--begin::Desc-->
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<!--end::Desc-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Section-->
+				<!--begin::Wrapper-->
+				<div class="d-flex align-items-center">
+					<!--begin::Number-->
+					<span class="text-gray-800 fw-bold fs-6 me-3">0.24%</span>
+					<!--end::Number-->
+					<!--begin::Info-->
+					<div class="d-flex flex-center">
+						<!--begin::label-->
+						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.4%</span>
+						<!--end::label-->
+					</div>
+					<!--end::Info-->
+				</div>
+				<!--end::Wrapper-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Separator-->
+			<div class="separator separator-dashed my-3"></div>
+			<!--end::Separator-->
+			<!--begin::Item-->
+			<div class="d-flex flex-stack">
+				<!--begin::Section-->
+				<div class="d-flex align-items-center me-5">
+					<!--begin::Symbol-->
+					<div class="symbol symbol-30px me-5">
+						<span class="symbol-label">{!! getIcon('tiktok', 'fs-3 text-gray-600') !!}</span>
+					</div>
+					<!--end::Symbol-->
+					<!--begin::Content-->
+					<div class="me-5">
+						<!--begin::Title-->
+						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Social Retargeting</a>
+						<!--end::Title-->
+						<!--begin::Desc-->
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<!--end::Desc-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Section-->
+				<!--begin::Wrapper-->
+				<div class="d-flex align-items-center">
+					<!--begin::Number-->
+					<span class="text-gray-800 fw-bold fs-6 me-3">0.94%</span>
+					<!--end::Number-->
+					<!--begin::Info-->
+					<div class="d-flex flex-center">
+						<!--begin::label-->
+						<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-down', 'fs-5 text-danger ms-n1') !!} 9.4%</span>
+						<!--end::label-->
+					</div>
+					<!--end::Info-->
+				</div>
+				<!--end::Wrapper-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Separator-->
+			<div class="separator separator-dashed my-3"></div>
+			<!--end::Separator-->
+			<!--begin::Item-->
+			<div class="d-flex flex-stack">
+				<!--begin::Section-->
+				<div class="d-flex align-items-center me-5">
+					<!--begin::Symbol-->
+					<div class="symbol symbol-30px me-5">
+						<span class="symbol-label">{!! getIcon('sms', 'fs-3 text-gray-600') !!}</span>
+					</div>
+					<!--end::Symbol-->
+					<!--begin::Content-->
+					<div class="me-5">
+						<!--begin::Title-->
+						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Email Retargeting</a>
+						<!--end::Title-->
+						<!--begin::Desc-->
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<!--end::Desc-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Section-->
+				<!--begin::Wrapper-->
+				<div class="d-flex align-items-center">
+					<!--begin::Number-->
+					<span class="text-gray-800 fw-bold fs-6 me-3">1.23%</span>
+					<!--end::Number-->
+					<!--begin::Info-->
+					<div class="d-flex flex-center">
+						<!--begin::label-->
+						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 0.2%</span>
+						<!--end::label-->
+					</div>
+					<!--end::Info-->
+				</div>
+				<!--end::Wrapper-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Separator-->
+			<div class="separator separator-dashed my-3"></div>
+			<!--end::Separator-->
+			<!--begin::Item-->
+			<div class="d-flex flex-stack">
+				<!--begin::Section-->
+				<div class="d-flex align-items-center me-5">
+					<!--begin::Symbol-->
+					<div class="symbol symbol-30px me-5">
+						<span class="symbol-label">{!! getIcon('icon', 'fs-3 text-gray-600') !!}</span>
+					</div>
+					<!--end::Symbol-->
+					<!--begin::Content-->
+					<div class="me-5">
+						<!--begin::Title-->
+						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Referrals Customers</a>
+						<!--end::Title-->
+						<!--begin::Desc-->
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<!--end::Desc-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Section-->
+				<!--begin::Wrapper-->
+				<div class="d-flex align-items-center">
+					<!--begin::Number-->
+					<span class="text-gray-800 fw-bold fs-6 me-3">0.08%</span>
+					<!--end::Number-->
+					<!--begin::Info-->
+					<div class="d-flex flex-center">
+						<!--begin::label-->
+						<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-down', 'fs-5 text-danger ms-n1') !!} 0.4%</span>
+						<!--end::label-->
+					</div>
+					<!--end::Info-->
+				</div>
+				<!--end::Wrapper-->
+			</div>
+			<!--end::Item-->
+			<!--begin::Separator-->
+			<div class="separator separator-dashed my-3"></div>
+			<!--end::Separator-->
+			<!--begin::Item-->
+			<div class="d-flex flex-stack">
+				<!--begin::Section-->
+				<div class="d-flex align-items-center me-5">
+					<!--begin::Symbol-->
+					<div class="symbol symbol-30px me-5">
+						<span class="symbol-label">{!! getIcon('abstract-25', 'fs-3 text-gray-600') !!}</span>
+					</div>
+					<!--end::Symbol-->
+					<!--begin::Content-->
+					<div class="me-5">
+						<!--begin::Title-->
+						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Other</a>
+						<!--end::Title-->
+						<!--begin::Desc-->
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<!--end::Desc-->
+					</div>
+					<!--end::Content-->
+				</div>
+				<!--end::Section-->
+				<!--begin::Wrapper-->
+				<div class="d-flex align-items-center">
+					<!--begin::Number-->
+					<span class="text-gray-800 fw-bold fs-6 me-3">0.46%</span>
+					<!--end::Number-->
+					<!--begin::Info-->
+					<div class="d-flex flex-center">
+						<!--begin::label-->
+						<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 8.3%</span>
+						<!--end::label-->
+					</div>
+					<!--end::Info-->
+				</div>
+				<!--end::Wrapper-->
+			</div>
+			<!--end::Item-->
+		</div>
+		<!--end::Items-->
+	</div>
+	<!--end::Body-->
+</div>
+<!--end::List widget 7-->
diff --git a/resources/views/partials/widgets/lists/_widget-8.blade.php b/resources/views/partials/widgets/lists/_widget-8.blade.php
index ed2e812..c576c4f 100644
--- a/resources/views/partials/widgets/lists/_widget-8.blade.php
+++ b/resources/views/partials/widgets/lists/_widget-8.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Title-->
 		<h3 class="card-title align-items-start flex-column">
 			<span class="card-label fw-bold text-gray-800">Visits by Country</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">20 countries share 97% visits</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">20 countries share 97% visits</span>
 		</h3>
 		<!--end::Title-->
 		<!--begin::Toolbar-->
@@ -32,7 +32,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">United States</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Direct link clicks</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
@@ -70,7 +70,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Brasil</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">All Social Channels</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">All Social Channels</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
@@ -108,7 +108,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Turkey</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Mailchimp Campaigns</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Mailchimp Campaigns</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
@@ -146,7 +146,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">France</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Impact Radius visits</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Impact Radius visits</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
@@ -184,7 +184,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">India</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Many Sources</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Many Sources</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
@@ -222,7 +222,7 @@
 						<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Sweden</a>
 						<!--end::Title-->
 						<!--begin::Desc-->
-						<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
+						<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
 						<!--end::Desc-->
 					</div>
 					<!--end::Content-->
diff --git a/resources/views/partials/widgets/lists/_widget-9.blade.php b/resources/views/partials/widgets/lists/_widget-9.blade.php
index 9791277..ac83681 100644
--- a/resources/views/partials/widgets/lists/_widget-9.blade.php
+++ b/resources/views/partials/widgets/lists/_widget-9.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Title-->
 		<h3 class="card-title align-items-start flex-column">
 			<span class="card-label fw-bold text-gray-800">Social Network Visits</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">8k social visitors</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">8k social visitors</span>
 		</h3>
 		<!--end::Title-->
 		<!--begin::Toolbar-->
@@ -30,7 +30,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Dribbble</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Community</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Community</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
@@ -68,7 +68,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Linked In</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Social Media</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Media</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
@@ -106,7 +106,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Slack</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Messanger</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Messanger</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
@@ -144,7 +144,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">YouTube</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Video Channel</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Video Channel</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
@@ -182,7 +182,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Instagram</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
@@ -220,7 +220,7 @@
 					<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Facebook</a>
 					<!--end::Title-->
 					<!--begin::Desc-->
-					<span class="text-gray-400 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
+					<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
 					<!--end::Desc-->
 				</div>
 				<!--end::Content-->
diff --git a/resources/views/partials/widgets/tables/_widget-14.blade.php b/resources/views/partials/widgets/tables/_widget-14.blade.php
index db92fd4..4b3f96a 100644
--- a/resources/views/partials/widgets/tables/_widget-14.blade.php
+++ b/resources/views/partials/widgets/tables/_widget-14.blade.php
@@ -5,7 +5,7 @@
 		<!--begin::Title-->
 		<h3 class="card-title align-items-start flex-column">
 			<span class="card-label fw-bold text-gray-800">Projects Stats</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">Updated 37 minutes ago</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">Updated 37 minutes ago</span>
 		</h3>
 		<!--end::Title-->
 		<!--begin::Toolbar-->
@@ -23,7 +23,7 @@
 			<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 				<!--begin::Table head-->
 				<thead>
-					<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+					<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 						<th class="p-0 pb-3 min-w-175px text-start">ITEM</th>
 						<th class="p-0 pb-3 min-w-100px text-end">BUDGET</th>
 						<th class="p-0 pb-3 min-w-100px text-end">PROGRESS</th>
@@ -43,7 +43,7 @@
 								</div>
 								<div class="d-flex justify-content-start flex-column">
 									<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Mivy App</a>
-									<span class="text-gray-400 fw-semibold d-block fs-7">Jane Cooper</span>
+									<span class="text-gray-500 fw-semibold d-block fs-7">Jane Cooper</span>
 								</div>
 							</div>
 						</td>
@@ -73,7 +73,7 @@
 								</div>
 								<div class="d-flex justify-content-start flex-column">
 									<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Avionica</a>
-									<span class="text-gray-400 fw-semibold d-block fs-7">Esther Howard</span>
+									<span class="text-gray-500 fw-semibold d-block fs-7">Esther Howard</span>
 								</div>
 							</div>
 						</td>
@@ -103,7 +103,7 @@
 								</div>
 								<div class="d-flex justify-content-start flex-column">
 									<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Charto CRM</a>
-									<span class="text-gray-400 fw-semibold d-block fs-7">Jenny Wilson</span>
+									<span class="text-gray-500 fw-semibold d-block fs-7">Jenny Wilson</span>
 								</div>
 							</div>
 						</td>
@@ -133,7 +133,7 @@
 								</div>
 								<div class="d-flex justify-content-start flex-column">
 									<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Tower Hill</a>
-									<span class="text-gray-400 fw-semibold d-block fs-7">Cody Fisher</span>
+									<span class="text-gray-500 fw-semibold d-block fs-7">Cody Fisher</span>
 								</div>
 							</div>
 						</td>
@@ -163,7 +163,7 @@
 								</div>
 								<div class="d-flex justify-content-start flex-column">
 									<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">9 Degree</a>
-									<span class="text-gray-400 fw-semibold d-block fs-7">Savannah Nguyen</span>
+									<span class="text-gray-500 fw-semibold d-block fs-7">Savannah Nguyen</span>
 								</div>
 							</div>
 						</td>
diff --git a/resources/views/partials/widgets/tables/_widget-16.blade.php b/resources/views/partials/widgets/tables/_widget-16.blade.php
index 018439b..be85e6e 100644
--- a/resources/views/partials/widgets/tables/_widget-16.blade.php
+++ b/resources/views/partials/widgets/tables/_widget-16.blade.php
@@ -5,18 +5,18 @@
 		<!--begin::Title-->
 		<h3 class="card-title align-items-start flex-column">
 			<span class="card-label fw-bold text-gray-800">Authors Achievements</span>
-			<span class="text-gray-400 mt-1 fw-semibold fs-6">Avg. 69.34% Conv. Rate</span>
+			<span class="text-gray-500 mt-1 fw-semibold fs-6">Avg. 69.34% Conv. Rate</span>
 		</h3>
 		<!--end::Title-->
 		<!--begin::Toolbar-->
 		<div class="card-toolbar">
 			<!--begin::Menu-->
-			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
+			<button class="btn btn-icon btn-color-gray-500 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{!! getIcon('dots-square', 'fs-1 text-gray-300 me-n1') !!}</button>
 			<!--begin::Menu 2-->
 			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
 				<!--begin::Menu item-->
 				<div class="menu-item px-3">
-					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
+					<div class="menu-content fs-6 text-gray-900 fw-bold px-3 py-4">Quick Actions</div>
 				</div>
 				<!--end::Menu item-->
 				<!--begin::Menu separator-->
@@ -184,7 +184,7 @@
 					<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 						<!--begin::Table head-->
 						<thead>
-							<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+							<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 								<th class="p-0 pb-3 min-w-150px text-start">AUTHOR</th>
 								<th class="p-0 pb-3 min-w-100px text-end pe-13">CONV.</th>
 								<th class="p-0 pb-3 w-125px text-end pe-7">CHART</th>
@@ -202,7 +202,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Guy Hawkins</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Haiti</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Haiti</span>
 										</div>
 									</div>
 								</td>
@@ -224,7 +224,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jane Cooper</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Monaco</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Monaco</span>
 										</div>
 									</div>
 								</td>
@@ -246,7 +246,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jacob Jones</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Poland</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Poland</span>
 										</div>
 									</div>
 								</td>
@@ -268,7 +268,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Cody Fishers</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Mexico</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Mexico</span>
 										</div>
 									</div>
 								</td>
@@ -298,7 +298,7 @@
 					<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 						<!--begin::Table head-->
 						<thead>
-							<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+							<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 								<th class="p-0 pb-3 min-w-150px text-start">AUTHOR</th>
 								<th class="p-0 pb-3 min-w-100px text-end pe-13">CONV.</th>
 								<th class="p-0 pb-3 w-125px text-end pe-7">CHART</th>
@@ -316,7 +316,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Brooklyn Simmons</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Poland</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Poland</span>
 										</div>
 									</div>
 								</td>
@@ -338,7 +338,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Esther Howard</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Mexico</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Mexico</span>
 										</div>
 									</div>
 								</td>
@@ -360,7 +360,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Annette Black</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Haiti</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Haiti</span>
 										</div>
 									</div>
 								</td>
@@ -382,7 +382,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Marvin McKinney</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Monaco</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Monaco</span>
 										</div>
 									</div>
 								</td>
@@ -412,7 +412,7 @@
 					<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 						<!--begin::Table head-->
 						<thead>
-							<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+							<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 								<th class="p-0 pb-3 min-w-150px text-start">AUTHOR</th>
 								<th class="p-0 pb-3 min-w-100px text-end pe-13">CONV.</th>
 								<th class="p-0 pb-3 w-125px text-end pe-7">CHART</th>
@@ -430,7 +430,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jacob Jones</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">New York</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">New York</span>
 										</div>
 									</div>
 								</td>
@@ -452,7 +452,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Ronald Richards</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Madrid</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Madrid</span>
 										</div>
 									</div>
 								</td>
@@ -474,7 +474,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Leslie Alexander</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Pune</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Pune</span>
 										</div>
 									</div>
 								</td>
@@ -496,7 +496,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Courtney Henry</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Mexico</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Mexico</span>
 										</div>
 									</div>
 								</td>
@@ -526,7 +526,7 @@
 					<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 						<!--begin::Table head-->
 						<thead>
-							<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+							<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 								<th class="p-0 pb-3 min-w-150px text-start">AUTHOR</th>
 								<th class="p-0 pb-3 min-w-100px text-end pe-13">CONV.</th>
 								<th class="p-0 pb-3 w-125px text-end pe-7">CHART</th>
@@ -544,7 +544,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Arlene McCoy</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">London</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">London</span>
 										</div>
 									</div>
 								</td>
@@ -566,7 +566,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Marvin McKinneyr</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Monaco</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Monaco</span>
 										</div>
 									</div>
 								</td>
@@ -588,7 +588,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jacob Jones</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">PManila</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">PManila</span>
 										</div>
 									</div>
 								</td>
@@ -610,7 +610,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Esther Howard</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Iceland</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Iceland</span>
 										</div>
 									</div>
 								</td>
@@ -640,7 +640,7 @@
 					<table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
 						<!--begin::Table head-->
 						<thead>
-							<tr class="fs-7 fw-bold text-gray-400 border-bottom-0">
+							<tr class="fs-7 fw-bold text-gray-500 border-bottom-0">
 								<th class="p-0 pb-3 min-w-150px text-start">AUTHOR</th>
 								<th class="p-0 pb-3 min-w-100px text-end pe-13">CONV.</th>
 								<th class="p-0 pb-3 w-125px text-end pe-7">CHART</th>
@@ -658,7 +658,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jane Cooper</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Haiti</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Haiti</span>
 										</div>
 									</div>
 								</td>
@@ -680,7 +680,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Esther Howard</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Kiribati</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Kiribati</span>
 										</div>
 									</div>
 								</td>
@@ -702,7 +702,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Jacob Jones</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Poland</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Poland</span>
 										</div>
 									</div>
 								</td>
@@ -724,7 +724,7 @@
 										</div>
 										<div class="d-flex justify-content-start flex-column">
 											<a href="#" class="text-gray-800 fw-bold text-hover-primary mb-1 fs-6">Ralph Edwards</a>
-											<span class="text-gray-400 fw-semibold d-block fs-7">Mexico</span>
+											<span class="text-gray-500 fw-semibold d-block fs-7">Mexico</span>
 										</div>
 									</div>
 								</td>
diff --git a/routes/api.php b/routes/api.php
index eb6fa48..777dd91 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,9 @@
 <?php
 
+use App\Actions\SamplePermissionApi;
+use App\Actions\SampleRoleApi;
+use App\Actions\SampleUserApi;
+use App\Models\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -17,3 +21,90 @@ use Illuminate\Support\Facades\Route;
 Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
     return $request->user();
 });
+
+Route::prefix('v1')->group(function () {
+
+    Route::get('/users', function (Request $request) {
+        return app(SampleUserApi::class)->datatableList($request);
+    });
+
+    Route::post('/users-list', function (Request $request) {
+        return app(SampleUserApi::class)->datatableList($request);
+    });
+
+    Route::post('/users', function (Request $request) {
+        return app(SampleUserApi::class)->create($request);
+    });
+
+    Route::get('/users/{id}', function ($id) {
+        return app(SampleUserApi::class)->get($id);
+    });
+
+    Route::put('/users/{id}', function ($id, Request $request) {
+        return app(SampleUserApi::class)->update($id, $request);
+    });
+
+    Route::delete('/users/{id}', function ($id) {
+        return app(SampleUserApi::class)->delete($id);
+    });
+
+
+    Route::get('/roles', function (Request $request) {
+        return app(SampleRoleApi::class)->datatableList($request);
+    });
+
+    Route::post('/roles-list', function (Request $request) {
+        return app(SampleRoleApi::class)->datatableList($request);
+    });
+
+    Route::post('/roles', function (Request $request) {
+        return app(SampleRoleApi::class)->create($request);
+    });
+
+    Route::get('/roles/{id}', function ($id) {
+        return app(SampleRoleApi::class)->get($id);
+    });
+
+    Route::put('/roles/{id}', function ($id, Request $request) {
+        return app(SampleRoleApi::class)->update($id, $request);
+    });
+
+    Route::delete('/roles/{id}', function ($id) {
+        return app(SampleRoleApi::class)->delete($id);
+    });
+
+    Route::post('/roles/{id}/users', function (Request $request, $id) {
+        $request->merge(['id' => $id]);
+        return app(SampleRoleApi::class)->usersDatatableList($request);
+    });
+
+    Route::delete('/roles/{id}/users/{user_id}', function ($id, $user_id) {
+        return app(SampleRoleApi::class)->deleteUser($id, $user_id);
+    });
+
+
+
+    Route::get('/permissions', function (Request $request) {
+        return app(SamplePermissionApi::class)->datatableList($request);
+    });
+
+    Route::post('/permissions-list', function (Request $request) {
+        return app(SamplePermissionApi::class)->datatableList($request);
+    });
+
+    Route::post('/permissions', function (Request $request) {
+        return app(SamplePermissionApi::class)->create($request);
+    });
+
+    Route::get('/permissions/{id}', function ($id) {
+        return app(SamplePermissionApi::class)->get($id);
+    });
+
+    Route::put('/permissions/{id}', function ($id, Request $request) {
+        return app(SamplePermissionApi::class)->update($id, $request);
+    });
+
+    Route::delete('/permissions/{id}', function ($id) {
+        return app(SamplePermissionApi::class)->delete($id);
+    });
+});
diff --git a/routes/web.php b/routes/web.php
index b057801..72459f9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,9 +1,9 @@
 <?php
 
-    use App\Http\Controllers\Apps\PermissionManagementController;
-    use App\Http\Controllers\Apps\RoleManagementController;
-    use App\Http\Controllers\Apps\UserManagementController;
-    use App\Http\Controllers\Auth\SocialiteController;
+use App\Http\Controllers\Apps\PermissionManagementController;
+use App\Http\Controllers\Apps\RoleManagementController;
+use App\Http\Controllers\Apps\UserManagementController;
+use App\Http\Controllers\Auth\SocialiteController;
 use App\Http\Controllers\DashboardController;
 use Illuminate\Support\Facades\Route;
 
@@ -23,6 +23,13 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/', [DashboardController::class, 'index']);
 
     Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');
+
+    Route::name('user-management.')->group(function () {
+        Route::resource('/user-management/users', UserManagementController::class);
+        Route::resource('/user-management/roles', RoleManagementController::class);
+        Route::resource('/user-management/permissions', PermissionManagementController::class);
+    });
+
 });
 
 Route::get('/error', function () {
diff --git a/webpack.mix.js b/webpack.mix.js
index d2245ce..6d1cdc4 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -131,10 +131,10 @@ mix.webpackConfig({
 (glob.sync(`${dir}/plugins/**/*.+(woff|woff2|eot|ttf|svg)`) || []).forEach(file => {
     mix.copy(file, `public/assets/plugins/global/fonts/${path.parse(file).name}/${path.basename(file)}`);
 });
-/*(glob.sync('node_modules/+(@fortawesome|socicon|line-awesome|bootstrap-icons)/!**!/!*.+(woff|woff2|eot|ttf)') || []).forEach(file => {
-    var folder = file.match(/node_modules\/(.*?)\//)[1];
+glob.sync('node_modules/+(@fortawesome|socicon|line-awesome|bootstrap-icons)/**/*.+(woff|woff2|eot|ttf)').forEach(file => {
+    const [, folder] = file.match(/node_modules\/(.*?)\//);
     mix.copy(file, `public/assets/plugins/global/fonts/${folder}/${path.basename(file)}`);
-});*/
+});
 (glob.sync('node_modules/jstree/dist/themes/default/*.+(png|gif)') || []).forEach(file => {
     mix.copy(file, `public/assets/plugins/custom/jstree/${path.basename(file)}`);
 });