diff --git a/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php b/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php
new file mode 100644
index 00000000..0d0a61f0
--- /dev/null
+++ b/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('companies', function (Blueprint $table): void {
+            $table->foreignId('country_id')
+                ->nullable()
+                ->after('billing_email')
+                ->constrained('countries')
+                ->nullOnDelete();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('companies', function (Blueprint $table): void {
+            $table->dropConstrainedForeignId('country_id');
+        });
+    }
+};
diff --git a/Company/Http/Controllers/CompanyController.php b/Company/Http/Controllers/CompanyController.php
new file mode 100644
index 00000000..0880b292
--- /dev/null
+++ b/Company/Http/Controllers/CompanyController.php
@@ -0,0 +1,141 @@
+<?php
+
+namespace Modules\Company\Http\Controllers;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Support\Str;
+use Illuminate\Validation\Rule;
+use Modules\Company\Models\Company;
+use Modules\Countries\Models\Country;
+
+class CompanyController extends Controller
+{
+    /**
+     * Display companies.
+     */
+    public function index()
+    {
+        return view('company::index', [
+            'companies' => Company::query()
+                ->with(['address.country', 'country'])
+                ->withCount(['users', 'warehouses', 'licenseKeys', 'divisions'])
+                ->latest('id')
+                ->paginate(20),
+            'countries' => $this->countries(),
+        ]);
+    }
+
+    /**
+     * Show the create company screen.
+     */
+    public function create()
+    {
+        return view('company::create', [
+            'company' => new Company([
+                'status' => 'active',
+                'timezone' => 'Europe/London',
+            ]),
+            'countries' => $this->countries(),
+        ]);
+    }
+
+    /**
+     * Store a company tenant.
+     */
+    public function store(Request $request)
+    {
+        $company = Company::create($this->validated($request));
+
+        return redirect()
+            ->route('platform.companies.index')
+            ->with('status', 'Company created.');
+    }
+
+    /**
+     * Display a company workbench.
+     */
+    public function show(Company $company)
+    {
+        $company->load([
+            'address.country',
+            'divisions.address.country',
+            'divisions.warehouses',
+            'divisions.users',
+            'warehouses.address.country',
+            'warehouses.division',
+            'directorAssignments.user',
+            'directorAssignments.division',
+        ])->loadCount(['users', 'warehouses', 'licenseKeys', 'payments', 'divisions']);
+
+        return view('company::show', [
+            'company' => $company,
+            'recentUsers' => $company->users()->latest('id')->limit(5)->get(),
+            'recentWarehouses' => $company->warehouses()->latest('id')->limit(5)->get(),
+            'recentLicenseKeys' => $company->licenseKeys()->latest('id')->limit(5)->get(),
+            'countries' => Country::query()->active()->orderBy('sort_order')->orderBy('name')->get(['id', 'alpha2', 'name', 'display_name', 'common_name']),
+            'companyUsers' => $company->users()->orderBy('name')->get(['id', 'name', 'email', 'company_id']),
+            'unassignedWarehouses' => $company->warehouses()->whereNull('division_id')->orderBy('name')->get(),
+        ]);
+    }
+
+    /**
+     * Show the edit company screen.
+     */
+    public function edit(Company $company)
+    {
+        return view('company::edit', [
+            'company' => $company->loadMissing(['address.country', 'country']),
+            'countries' => $this->countries(),
+        ]);
+    }
+
+    /**
+     * Update a company tenant.
+     */
+    public function update(Request $request, Company $company)
+    {
+        $company->update($this->validated($request, $company));
+
+        return redirect()
+            ->route('platform.companies.show', $company)
+            ->with('status', 'Company updated.');
+    }
+
+    /**
+     * Delete a company tenant.
+     */
+    public function destroy(Company $company)
+    {
+        abort_if($company->is_system_company, 403, 'The system company cannot be deleted.');
+
+        $company->delete();
+
+        return redirect()
+            ->route('platform.companies.index')
+            ->with('status', 'Company deleted.');
+    }
+
+    private function validated(Request $request, ?Company $company = null): array
+    {
+        $data = $request->validate([
+            'name' => ['required', 'string', 'max:255'],
+            'billing_email' => ['nullable', 'email', 'max:255'],
+            'status' => ['required', Rule::in(['active', 'suspended', 'inactive'])],
+            'country_id' => ['nullable', Rule::exists('countries', 'id')->where('is_active', true)],
+        ]);
+
+        $data['slug'] = Str::slug($data['name']);
+        $data['timezone'] = $company?->timezone ?: 'Europe/London';
+
+        return $data;
+    }
+
+    private function countries()
+    {
+        return Country::query()
+            ->active()
+            ->ordered()
+            ->get(['id', 'alpha2', 'name', 'display_name', 'common_name', 'sort_order']);
+    }
+}
diff --git a/Company/Models/Company.php b/Company/Models/Company.php
new file mode 100644
index 00000000..e3dd2a77
--- /dev/null
+++ b/Company/Models/Company.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace Modules\Company\Models;
+
+use App\Models\User;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\MorphOne;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Str;
+use Modules\Platform\app\Models\LicenseKey;
+use Modules\Platform\app\Models\Payment;
+use Modules\Countries\Models\Country;
+use Modules\Warehouse\app\Models\Warehouse;
+
+class Company extends Model
+{
+    use SoftDeletes;
+
+    protected $fillable = [
+        'uuid', 'name', 'slug', 'status', 'timezone', 'settings',
+        'is_system_company', 'stripe_customer_id', 'billing_email', 'country_id',
+    ];
+
+    protected $casts = [
+        'settings' => 'array',
+        'is_system_company' => 'boolean',
+    ];
+
+    protected static function booted(): void
+    {
+        static::creating(function (Company $company): void {
+            $company->uuid ??= (string) Str::uuid();
+            $company->slug ??= Str::slug($company->name);
+            $company->status ??= 'active';
+            $company->timezone ??= 'Europe/London';
+        });
+    }
+
+
+
+    public function country(): BelongsTo
+    {
+        return $this->belongsTo(Country::class);
+    }
+
+    public function address(): MorphOne
+    {
+        return $this->morphOne(CompanyAddress::class, 'addressable');
+    }
+
+    public function divisions(): HasMany
+    {
+        return $this->hasMany(CompanyDivision::class);
+    }
+
+    public function directorAssignments(): HasMany
+    {
+        return $this->hasMany(CompanyDirectorAssignment::class);
+    }
+
+    public function users(): HasMany
+    {
+        return $this->hasMany(User::class);
+    }
+
+    public function licenseKeys(): HasMany
+    {
+        return $this->hasMany(LicenseKey::class);
+    }
+
+    public function payments(): HasMany
+    {
+        return $this->hasMany(Payment::class);
+    }
+
+    public function warehouses(): HasMany
+    {
+        return $this->hasMany(Warehouse::class);
+    }
+
+    public function hasActiveLicense(): bool
+    {
+        if ($this->is_system_company) {
+            return true;
+        }
+
+        return $this->licenseKeys()
+            ->where('is_active', true)
+            ->where(function ($query): void {
+                $query->whereNull('starts_at')->orWhere('starts_at', '<=', now());
+            })
+            ->where(function ($query): void {
+                $query->whereNull('expires_at')->orWhere('expires_at', '>=', now());
+            })
+            ->whereNull('revoked_at')
+            ->exists();
+    }
+}
diff --git a/Company/Resources/views/_form.blade.php b/Company/Resources/views/_form.blade.php
new file mode 100644
index 00000000..e044d2d7
--- /dev/null
+++ b/Company/Resources/views/_form.blade.php
@@ -0,0 +1,83 @@
+@csrf
+
+<div class="grid gap-5 md:grid-cols-2">
+    <div>
+        <label for="name" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Company name</label>
+        <input
+            id="name"
+            name="name"
+            value="{{ old('name', $company->name) }}"
+            class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+            required
+        >
+        @error('name')
+            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+        @enderror
+    </div>
+
+    <div>
+        <label for="billing_email" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Billing email</label>
+        <input
+            id="billing_email"
+            type="email"
+            name="billing_email"
+            value="{{ old('billing_email', $company->billing_email) }}"
+            placeholder="billing@example.com"
+            class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+        >
+        @error('billing_email')
+            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+        @enderror
+    </div>
+
+    <div>
+        <label for="status" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Status</label>
+        <select
+            id="status"
+            name="status"
+            class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+            required
+        >
+            <option value="active" @selected(old('status', $company->status) === 'active')>Active</option>
+            <option value="suspended" @selected(old('status', $company->status) === 'suspended')>Suspended</option>
+            <option value="inactive" @selected(old('status', $company->status) === 'inactive')>Inactive</option>
+        </select>
+        @error('status')
+            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+        @enderror
+    </div>
+
+    <div class="wms-select2-field">
+        <label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
+        <select
+            id="country_id"
+            name="country_id"
+            data-wms-select2
+            data-placeholder="Search and select a country"
+            class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+        >
+            <option value="">Search and select a country</option>
+            @foreach ($countries as $country)
+                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
+                    {{ $country->effective_name ?? $country->name }}
+                </option>
+            @endforeach
+        </select>
+        @error('country_id')
+            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
+        @enderror
+    </div>
+</div>
+
+<div class="mt-6 flex flex-wrap items-center gap-3">
+    <button class="rounded-xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-700 dark:bg-white dark:text-zinc-900">
+        Save company
+    </button>
+
+    <a
+        href="{{ $company->exists ? route('platform.companies.show', $company) : route('platform.companies.index') }}"
+        class="rounded-xl border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+    >
+        Cancel
+    </a>
+</div>
diff --git a/Company/Resources/views/index.blade.php b/Company/Resources/views/index.blade.php
new file mode 100644
index 00000000..b4515449
--- /dev/null
+++ b/Company/Resources/views/index.blade.php
@@ -0,0 +1,174 @@
+<x-layouts::app :title="__('Companies')">
+    <div class="space-y-6">
+        <x-wms.page-hero
+            eyebrow="Platform Administration"
+            title="Companies"
+            description="Manage tenant companies and keep every company’s users, warehouses and records isolated."
+            icon="fa-solid fa-building"
+        />
+
+
+
+        @if (session('status'))
+            <div class="rounded-2xl bg-green-50 p-4 text-sm font-semibold text-green-700 ring-1 ring-green-200 dark:bg-green-950 dark:text-green-300 dark:ring-green-900">
+                {{ session('status') }}
+            </div>
+        @endif
+
+        <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-800">
+            <div class="flex flex-wrap items-start justify-between gap-4">
+                <div>
+                    <h2 class="text-lg font-bold text-zinc-900 dark:text-white">Create company</h2>
+                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">Add a new tenant without leaving the administration index.</p>
+                </div>
+
+                <a
+                    href="{{ route('platform.companies.create') }}"
+                    class="rounded-xl border border-zinc-300 px-4 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                >
+                    Open full form
+                </a>
+            </div>
+
+            <form method="POST" action="{{ route('platform.companies.store') }}" class="mt-5 grid gap-4 md:grid-cols-5">
+                @csrf
+
+                <input
+                    name="name"
+                    value="{{ old('name') }}"
+                    placeholder="Company name"
+                    class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+                    required
+                >
+
+                <input
+                    name="billing_email"
+                    value="{{ old('billing_email') }}"
+                    placeholder="billing@example.com"
+                    type="email"
+                    class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
+                >
+
+                <select name="status" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white" required>
+                    <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
+                    <option value="suspended" @selected(old('status') === 'suspended')>Suspended</option>
+                    <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
+                </select>
+
+                <div class="wms-select2-field">
+                    <select name="country_id" data-wms-select2 data-placeholder="Search country" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
+                    <option value="">Search country</option>
+                    @foreach ($countries as $country)
+                        <option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
+                            {{ $country->effective_name ?? $country->name }}
+                        </option>
+                    @endforeach
+                    </select>
+                </div>
+
+                <button class="rounded-xl bg-zinc-900 px-4 py-2 font-semibold text-white dark:bg-white dark:text-zinc-900">
+                    Create
+                </button>
+            </form>
+        </div>
+        <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-900 dark:ring-zinc-800">
+            <table class="min-w-full text-sm">
+                <thead>
+                <tr class="border-b border-zinc-200 dark:border-zinc-800">
+                    <th class="p-4 text-left">Name</th>
+                    <th class="p-4 text-left">Users</th>
+                    <th class="p-4 text-left">Divisions</th>
+                    <th class="p-4 text-left">Warehouses</th>
+                    <th class="p-4 text-left">Licences</th>
+                    <th class="p-4 text-left">Status</th>
+                    <th class="p-4 text-right">Actions</th>
+                </tr>
+                </thead>
+
+                <tbody>
+                @forelse ($companies as $company)
+                    <tr class="border-b border-zinc-100 dark:border-zinc-800">
+                        <td class="p-4 font-semibold text-zinc-900 dark:text-white">
+                            {{ $company->name }}
+                        </td>
+
+                        <td class="p-4 text-zinc-700 dark:text-zinc-300">
+                            {{ $company->users_count }}
+                        </td>
+
+                        <td class="p-4 text-zinc-700 dark:text-zinc-300">
+                            {{ $company->divisions_count }}
+                        </td>
+
+                        <td class="p-4 text-zinc-700 dark:text-zinc-300">
+                            {{ $company->warehouses_count }}
+                        </td>
+
+                        <td class="p-4 text-zinc-700 dark:text-zinc-300">
+                            {{ $company->license_keys_count }}
+                        </td>
+
+                        <td class="p-4">
+                                <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold
+                                    @if ($company->is_system_company)
+                                        bg-blue-100 text-blue-700 dark:bg-blue-950 dark:text-blue-300
+                                    @elseif ($company->status === 'active')
+                                        bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300
+                                    @else
+                                        bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-300
+                                    @endif
+                                ">
+                                    {{ $company->is_system_company ? 'System' : ucfirst($company->status) }}
+                                </span>
+                        </td>
+
+                        <td class="p-4">
+                            <div class="flex justify-end gap-2">
+                                <a
+                                    href="{{ route('platform.companies.show', $company) }}"
+                                    class="rounded-lg border border-zinc-300 px-3 py-1.5 text-xs font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-800"
+                                >
+                                    View
+                                </a>
+
+                                <a
+                                    href="{{ route('platform.companies.edit', $company) }}"
+                                    class="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700"
+                                >
+                                    Edit
+                                </a>
+
+                                @unless ($company->is_system_company)
+                                    <form
+                                        method="POST"
+                                        action="{{ route('platform.companies.destroy', $company) }}"
+                                        onsubmit="return confirm('Delete this company? This cannot be undone.');"
+                                    >
+                                        @csrf
+                                        @method('DELETE')
+
+                                        <button
+                                            type="submit"
+                                            class="rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700"
+                                        >
+                                            Delete
+                                        </button>
+                                    </form>
+                                @endunless
+                            </div>
+                        </td>
+                    </tr>
+                @empty
+                    <tr>
+                        <td colspan="7" class="p-8 text-center text-zinc-500 dark:text-zinc-400">
+                            No companies found.
+                        </td>
+                    </tr>
+                @endforelse
+                </tbody>
+            </table>
+        </div>
+
+        {{ $companies->links() }}
+    </div>
+</x-layouts::app>
diff --git a/Modules/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php b/Modules/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php
new file mode 100644
index 00000000..0d0a61f0
--- /dev/null
+++ b/Modules/Company/Database/Migrations/2026_07_07_093000_add_country_id_to_companies_table.php
@@ -0,0 +1,26 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('companies', function (Blueprint $table): void {
+            $table->foreignId('country_id')
+                ->nullable()
+                ->after('billing_email')
+                ->constrained('countries')
+                ->nullOnDelete();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('companies', function (Blueprint $table): void {
+            $table->dropConstrainedForeignId('country_id');
+        });
+    }
+};
diff --git a/Modules/Company/Http/Controllers/CompanyController.php b/Modules/Company/Http/Controllers/CompanyController.php
index 5bd16514..0880b292 100644
--- a/Modules/Company/Http/Controllers/CompanyController.php
+++ b/Modules/Company/Http/Controllers/CompanyController.php
@@ -18,10 +18,11 @@ class CompanyController extends Controller
     {
         return view('company::index', [
             'companies' => Company::query()
-                ->with(['address.country'])
+                ->with(['address.country', 'country'])
                 ->withCount(['users', 'warehouses', 'licenseKeys', 'divisions'])
                 ->latest('id')
                 ->paginate(20),
+            'countries' => $this->countries(),
         ]);
     }
 
@@ -35,6 +36,7 @@ class CompanyController extends Controller
                 'status' => 'active',
                 'timezone' => 'Europe/London',
             ]),
+            'countries' => $this->countries(),
         ]);
     }
 
@@ -83,7 +85,8 @@ class CompanyController extends Controller
     public function edit(Company $company)
     {
         return view('company::edit', [
-            'company' => $company,
+            'company' => $company->loadMissing(['address.country', 'country']),
+            'countries' => $this->countries(),
         ]);
     }
 
@@ -119,12 +122,20 @@ class CompanyController extends Controller
             'name' => ['required', 'string', 'max:255'],
             'billing_email' => ['nullable', 'email', 'max:255'],
             'status' => ['required', Rule::in(['active', 'suspended', 'inactive'])],
-            'timezone' => ['nullable', 'string', 'max:64'],
+            'country_id' => ['nullable', Rule::exists('countries', 'id')->where('is_active', true)],
         ]);
 
         $data['slug'] = Str::slug($data['name']);
-        $data['timezone'] = $data['timezone'] ?? ($company?->timezone ?: 'Europe/London');
+        $data['timezone'] = $company?->timezone ?: 'Europe/London';
 
         return $data;
     }
+
+    private function countries()
+    {
+        return Country::query()
+            ->active()
+            ->ordered()
+            ->get(['id', 'alpha2', 'name', 'display_name', 'common_name', 'sort_order']);
+    }
 }
diff --git a/Modules/Company/Models/Company.php b/Modules/Company/Models/Company.php
index 0a3bb73e..e3dd2a77 100644
--- a/Modules/Company/Models/Company.php
+++ b/Modules/Company/Models/Company.php
@@ -4,12 +4,14 @@ namespace Modules\Company\Models;
 
 use App\Models\User;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\MorphOne;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Support\Str;
 use Modules\Platform\app\Models\LicenseKey;
 use Modules\Platform\app\Models\Payment;
+use Modules\Countries\Models\Country;
 use Modules\Warehouse\app\Models\Warehouse;
 
 class Company extends Model
@@ -18,7 +20,7 @@ class Company extends Model
 
     protected $fillable = [
         'uuid', 'name', 'slug', 'status', 'timezone', 'settings',
-        'is_system_company', 'stripe_customer_id', 'billing_email',
+        'is_system_company', 'stripe_customer_id', 'billing_email', 'country_id',
     ];
 
     protected $casts = [
@@ -37,6 +39,12 @@ class Company extends Model
     }
 
 
+
+    public function country(): BelongsTo
+    {
+        return $this->belongsTo(Country::class);
+    }
+
     public function address(): MorphOne
     {
         return $this->morphOne(CompanyAddress::class, 'addressable');
diff --git a/Modules/Company/Resources/views/_form.blade.php b/Modules/Company/Resources/views/_form.blade.php
index 5ddfb4b0..e044d2d7 100644
--- a/Modules/Company/Resources/views/_form.blade.php
+++ b/Modules/Company/Resources/views/_form.blade.php
@@ -47,15 +47,23 @@
         @enderror
     </div>
 
-    <div>
-        <label for="timezone" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Timezone</label>
-        <input
-            id="timezone"
-            name="timezone"
-            value="{{ old('timezone', $company->timezone ?? 'Europe/London') }}"
+    <div class="wms-select2-field">
+        <label for="country_id" class="block text-sm font-semibold text-zinc-700 dark:text-zinc-200">Country</label>
+        <select
+            id="country_id"
+            name="country_id"
+            data-wms-select2
+            data-placeholder="Search and select a country"
             class="mt-2 w-full rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
         >
-        @error('timezone')
+            <option value="">Search and select a country</option>
+            @foreach ($countries as $country)
+                <option value="{{ $country->id }}" @selected((int) old('country_id', $company->country_id ?? $company->address?->country_id) === $country->id)>
+                    {{ $country->effective_name ?? $country->name }}
+                </option>
+            @endforeach
+        </select>
+        @error('country_id')
             <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
         @enderror
     </div>
diff --git a/Modules/Company/Resources/views/index.blade.php b/Modules/Company/Resources/views/index.blade.php
index 8433fee2..b4515449 100644
--- a/Modules/Company/Resources/views/index.blade.php
+++ b/Modules/Company/Resources/views/index.blade.php
@@ -55,12 +55,16 @@
                     <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
                 </select>
 
-                <input
-                    name="timezone"
-                    value="{{ old('timezone', 'Europe/London') }}"
-                    placeholder="Europe/London"
-                    class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
-                >
+                <div class="wms-select2-field">
+                    <select name="country_id" data-wms-select2 data-placeholder="Search country" class="rounded-xl border-zinc-300 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white">
+                    <option value="">Search country</option>
+                    @foreach ($countries as $country)
+                        <option value="{{ $country->id }}" @selected((int) old('country_id') === $country->id)>
+                            {{ $country->effective_name ?? $country->name }}
+                        </option>
+                    @endforeach
+                    </select>
+                </div>
 
                 <button class="rounded-xl bg-zinc-900 px-4 py-2 font-semibold text-white dark:bg-white dark:text-zinc-900">
                     Create
diff --git a/css/app.css b/css/app.css
new file mode 100644
index 00000000..5a7ff4d3
--- /dev/null
+++ b/css/app.css
@@ -0,0 +1,1531 @@
+
+@import 'tailwindcss';
+@import '../../vendor/livewire/flux/dist/flux.css';
+@import 'flatpickr/dist/flatpickr.css';
+
+@source '../views';
+@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
+@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
+@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+    --color-zinc-50: #fafafa;
+    --color-zinc-100: #f5f5f5;
+    --color-zinc-200: #e5e5e5;
+    --color-zinc-300: #d4d4d4;
+    --color-zinc-400: #a3a3a3;
+    --color-zinc-500: #737373;
+    --color-zinc-600: #525252;
+    --color-zinc-700: #404040;
+    --color-zinc-800: #262626;
+    --color-zinc-900: #171717;
+    --color-zinc-950: #0a0a0a;
+
+    --color-accent: var(--color-neutral-800);
+    --color-accent-content: var(--color-neutral-800);
+    --color-accent-foreground: var(--color-white);
+}
+
+@layer theme {
+    .dark {
+        --color-accent: var(--color-white);
+        --color-accent-content: var(--color-white);
+        --color-accent-foreground: var(--color-neutral-800);
+    }
+}
+
+@layer base {
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+}
+
+[data-flux-field]:not(ui-radio, ui-checkbox) {
+    @apply grid gap-2;
+}
+
+[data-flux-label] {
+    @apply  !mb-0 !leading-tight;
+}
+
+input:focus[data-flux-control],
+textarea:focus[data-flux-control],
+select:focus[data-flux-control] {
+    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
+}
+
+/* \[:where(&)\]:size-4 {
+    @apply size-4;
+} */
+
+@layer components {
+    .wms-app-shell {
+        min-height: 100vh;
+        display: flex;
+        background: rgb(250 250 250);
+    }
+
+    .dark .wms-app-shell {
+        background: rgb(9 9 11);
+    }
+
+    .wms-sidebar {
+        position: sticky;
+        top: 0;
+        z-index: 40;
+        display: flex;
+        width: 23.5rem;
+        min-width: 23.5rem;
+        height: 100vh;
+        flex-direction: column;
+        border-right: 1px solid rgb(228 228 231);
+        background: rgb(250 250 250);
+        transition: width 180ms ease, min-width 180ms ease, transform 180ms ease;
+    }
+
+    .dark .wms-sidebar {
+        border-right-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+    }
+
+    .wms-sidebar-header {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        min-height: 4.75rem;
+        padding: 0.95rem;
+        border-bottom: 1px solid rgb(228 228 231);
+    }
+
+    .dark .wms-sidebar-header {
+        border-bottom-color: rgb(63 63 70);
+    }
+
+    .wms-brand {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        min-width: 0;
+        flex: 1;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .wms-brand-mark {
+        display: grid;
+        width: 2.5rem;
+        height: 2.5rem;
+        flex: 0 0 auto;
+        place-items: center;
+        border-radius: 0.85rem;
+        background: linear-gradient(135deg, rgb(15 23 42), rgb(14 116 144));
+        color: white;
+        box-shadow: 0 12px 24px rgb(15 23 42 / 0.22);
+    }
+
+    .wms-brand-mark-inner {
+        font-size: 1rem;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+    }
+
+    .wms-brand-copy {
+        min-width: 0;
+        display: grid;
+        line-height: 1.1;
+    }
+
+    .wms-brand-title {
+        max-width: 18rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.98rem;
+        font-weight: 800;
+        color: rgb(24 24 27);
+    }
+
+    .dark .wms-brand-title {
+        color: rgb(244 244 245);
+    }
+
+    .wms-brand-subtitle {
+        margin-top: 0.18rem;
+        font-size: 0.72rem;
+        font-weight: 800;
+        letter-spacing: 0.14em;
+        color: rgb(8 145 178);
+    }
+
+    .wms-sidebar-toggle,
+    .wms-mobile-close,
+    .wms-mobile-menu {
+        display: inline-grid;
+        place-items: center;
+        border-radius: 0.65rem;
+        border: 1px solid rgb(228 228 231);
+        background: white;
+        color: rgb(63 63 70);
+        box-shadow: 0 10px 24px rgb(0 0 0 / 0.08);
+        transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
+    }
+
+    .wms-mobile-menu {
+        border-color: rgb(14 116 144 / 0.22);
+        background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
+        color: rgb(14 116 144);
+    }
+
+    .dark .wms-mobile-menu {
+        border-color: rgb(103 232 249 / 0.22);
+        background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
+        color: rgb(165 243 252);
+    }
+
+    .wms-sidebar-toggle {
+        width: 2.15rem;
+        height: 2.15rem;
+        flex: 0 0 auto;
+        font-size: 1.35rem;
+        font-weight: 800;
+        line-height: 1;
+    }
+
+    .wms-sidebar-toggle:hover,
+    .wms-mobile-close:hover,
+    .wms-mobile-menu:hover {
+        border-color: rgb(14 116 144);
+        color: rgb(14 116 144);
+    }
+
+    .dark .wms-sidebar-toggle,
+    .dark .wms-mobile-close,
+    .dark .wms-mobile-menu {
+        border-color: rgb(63 63 70);
+        background: rgb(39 39 42);
+        color: rgb(228 228 231);
+    }
+
+    .wms-toggle-collapsed {
+        display: none;
+    }
+
+    .wms-mobile-close {
+        display: none;
+        width: 2.15rem;
+        height: 2.15rem;
+        font-size: 1.4rem;
+        line-height: 1;
+    }
+
+    .wms-sidebar-nav {
+        flex: 1;
+        overflow-y: auto;
+        padding: 0.9rem;
+    }
+
+    .wms-sidebar-group + .wms-sidebar-group {
+        margin-top: 1.1rem;
+    }
+
+    .wms-sidebar-heading {
+        padding: 0 0.625rem 0.45rem;
+        font-size: 0.69rem;
+        font-weight: 800;
+        letter-spacing: 0.11em;
+        text-transform: uppercase;
+        color: rgb(113 113 122);
+    }
+
+    .wms-sidebar-link {
+        position: relative;
+        display: flex;
+        min-height: 2.65rem;
+        align-items: center;
+        gap: 0.78rem;
+        border-radius: 0.8rem;
+        padding: 0.65rem 0.75rem;
+        color: rgb(63 63 70);
+        font-size: 0.92rem;
+        font-weight: 650;
+        text-decoration: none;
+        transition: background 120ms ease, color 120ms ease;
+    }
+
+    .wms-sidebar-link:hover {
+        background: rgb(244 244 245);
+        color: rgb(14 116 144);
+    }
+
+    .wms-sidebar-link.is-active {
+        background: rgb(236 254 255);
+        color: rgb(14 116 144);
+    }
+
+    .dark .wms-sidebar-link {
+        color: rgb(212 212 216);
+    }
+
+    .dark .wms-sidebar-link:hover {
+        background: rgb(39 39 42);
+        color: rgb(103 232 249);
+    }
+
+    .dark .wms-sidebar-link.is-active {
+        background: rgb(8 47 73 / 0.55);
+        color: rgb(103 232 249);
+    }
+
+    .wms-sidebar-icon {
+        width: 1.25rem;
+        min-width: 1.25rem;
+        text-align: center;
+        font-size: 1rem;
+    }
+
+    .wms-sidebar-footer {
+        display: grid;
+        gap: 0.25rem;
+        border-top: 1px solid rgb(228 228 231);
+        padding: 0.9rem;
+    }
+
+    .dark .wms-sidebar-footer {
+        border-top-color: rgb(63 63 70);
+    }
+
+    .wms-user-card {
+        margin-top: 0.5rem;
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 0.65rem;
+        border-radius: 0.85rem;
+        border: 1px solid rgb(228 228 231);
+        background: white;
+        padding: 0.65rem;
+    }
+
+    .wms-user-card-button {
+        width: 100%;
+        cursor: pointer;
+        text-align: left;
+    }
+
+    .wms-user-card-button:hover {
+        border-color: rgb(14 116 144);
+        background: rgb(244 244 245);
+    }
+
+    .dark .wms-user-card-button:hover {
+        border-color: rgb(14 116 144);
+        background: rgb(48 48 52);
+    }
+
+    .wms-user-chevron {
+        margin-left: auto;
+        color: rgb(113 113 122);
+        font-size: 0.75rem;
+    }
+
+    .wms-user-rail-button {
+        display: none;
+        width: 2.5rem;
+        height: 2.5rem;
+        place-items: center;
+        border-radius: 999px;
+        background: rgb(15 23 42);
+        color: white;
+        font-size: 0.8rem;
+        font-weight: 800;
+    }
+
+    .dark .wms-user-card {
+        border-color: rgb(63 63 70);
+        background: rgb(39 39 42);
+    }
+
+    .wms-user-avatar {
+        display: grid;
+        width: 2rem;
+        height: 2rem;
+        flex: 0 0 auto;
+        place-items: center;
+        border-radius: 999px;
+        background: rgb(15 23 42);
+        color: white;
+        font-size: 0.75rem;
+        font-weight: 800;
+    }
+
+    .wms-user-copy {
+        min-width: 0;
+    }
+
+    .wms-user-name,
+    .wms-user-email {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .wms-user-name {
+        font-size: 0.82rem;
+        font-weight: 750;
+    }
+
+    .wms-user-email {
+        font-size: 0.72rem;
+        color: rgb(113 113 122);
+    }
+
+    .wms-main-column {
+        min-width: 0;
+        flex: 1;
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+    }
+
+    .wms-content {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        flex: 1;
+        padding: 1.5rem;
+    }
+
+    .wms-main-panel {
+        min-width: 0;
+        flex: 1;
+        display: flex;
+        min-height: 100vh;
+        flex-direction: column;
+    }
+
+    .wms-page-hero {
+        overflow: hidden;
+        margin-bottom: 1.5rem;
+        border-radius: 1.5rem;
+        border: 1px solid rgb(228 228 231);
+        background: rgb(255 255 255);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 12px 28px rgb(0 0 0 / 0.08);
+    }
+
+    .dark .wms-page-hero {
+        border-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+    }
+
+    .wms-page-hero-inner {
+        padding: 1.75rem 1.5rem;
+        background: linear-gradient(135deg, rgb(2 6 23), rgb(15 23 42) 52%, rgb(23 37 84));
+        color: rgb(255 255 255);
+    }
+
+    .wms-page-hero-row {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .wms-page-hero-copy {
+        min-width: 0;
+        max-width: 48rem;
+    }
+
+    .wms-page-hero-kicker {
+        margin: 0;
+        color: rgb(191 219 254);
+        font-size: 0.75rem;
+        font-weight: 650;
+        letter-spacing: 0.28em;
+        line-height: 1rem;
+        text-transform: uppercase;
+    }
+
+    .wms-page-hero-title {
+        margin: 0.5rem 0 0;
+        color: rgb(255 255 255);
+        font-size: 1.875rem;
+        font-weight: 650;
+        line-height: 2.25rem;
+        letter-spacing: -0.025em;
+    }
+
+    .wms-page-hero-description {
+        max-width: 48rem;
+        margin: 0.5rem 0 0;
+        color: rgb(219 234 254 / 0.90);
+        font-size: 0.875rem;
+        line-height: 1.35rem;
+    }
+
+    .wms-page-hero-actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .wms-page-hero-stat {
+        display: grid;
+        min-width: 8.5rem;
+        gap: 0.25rem;
+        border-radius: 0.85rem;
+        border: 1px solid rgb(255 255 255 / 0.18);
+        background: rgb(255 255 255 / 0.10);
+        padding: 0.7rem 0.85rem;
+        color: rgb(219 234 254 / 0.90);
+        box-shadow: 0 10px 24px rgb(0 0 0 / 0.18);
+    }
+
+    .wms-page-hero-stat span {
+        font-size: 0.68rem;
+        font-weight: 800;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+    }
+
+    .wms-page-hero-stat strong {
+        display: flex;
+        align-items: center;
+        gap: 0.55rem;
+        color: white;
+        font-size: 1.25rem;
+        font-weight: 800;
+        line-height: 1;
+    }
+
+    .wms-page-hero-stat strong i {
+        color: rgb(134 239 172);
+    }
+
+    .wms-page-hero-icon-card {
+        min-width: 3.25rem;
+        width: 3.25rem;
+        height: 3.25rem;
+        place-items: center;
+        padding: 0;
+        text-align: center;
+    }
+
+    .wms-page-hero-icon-card strong {
+        justify-content: center;
+        font-size: 1.25rem;
+    }
+
+    @media (min-width: 1024px) {
+        .wms-page-hero-row {
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .wms-page-hero-actions {
+            justify-content: flex-end;
+        }
+    }
+
+    .wms-hero-mobile-menu {
+        display: none;
+        width: 2.5rem;
+        height: 2.5rem;
+        place-items: center;
+        align-self: flex-start;
+        border-radius: 0.85rem;
+        background: rgb(255 255 255 / 0.12);
+        color: white;
+    }
+
+
+    .wms-desktop-topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        min-height: 4.25rem;
+        border-bottom: 1px solid rgb(228 228 231);
+        background: rgb(250 250 250 / 0.94);
+        padding: 0.75rem 1.5rem;
+        backdrop-filter: blur(14px);
+    }
+
+    .dark .wms-desktop-topbar {
+        border-bottom-color: rgb(63 63 70);
+        background: rgb(15 15 19 / 0.94);
+    }
+
+    .wms-topbar-brand {
+        display: inline-flex;
+        min-width: 0;
+        align-items: center;
+        gap: 0.75rem;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .wms-topbar-user-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.7rem;
+        border-radius: 999px;
+        border: 1px solid transparent;
+        padding: 0.35rem 0.45rem 0.35rem 0.85rem;
+        text-align: right;
+        transition: background 120ms ease, border-color 120ms ease;
+    }
+
+    .wms-topbar-user-button:hover {
+        border-color: rgb(228 228 231);
+        background: rgb(244 244 245);
+    }
+
+    .dark .wms-topbar-user-button:hover {
+        border-color: rgb(63 63 70);
+        background: rgb(39 39 42);
+    }
+
+    .wms-topbar-user-copy {
+        display: grid;
+        min-width: 0;
+    }
+
+    .wms-mobile-header {
+        display: none;
+    }
+
+    .wms-mobile-overlay {
+        display: none;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar {
+        width: 5.5rem;
+        min-width: 5.5rem;
+    }
+
+    html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label] {
+        display: none !important;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-header,
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-footer,
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-nav {
+        align-items: center;
+        padding-left: 0.7rem;
+        padding-right: 0.7rem;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-brand {
+        flex: 0 0 auto;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-header {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
+        justify-content: center;
+        padding-left: 0.7rem;
+        padding-right: 0.7rem;
+    }
+
+
+    html[data-wms-sidebar='collapsed'] .wms-user-rail-button {
+        display: grid;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-footer {
+        justify-items: center;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-sidebar-toggle {
+        display: none;
+    }
+
+    html[data-wms-sidebar='collapsed'] .wms-brand-mark {
+        cursor: pointer;
+    }
+
+    @media (max-width: 1023px) {
+        .wms-desktop-topbar {
+            display: none;
+        }
+
+        .wms-app-shell {
+            display: block;
+        }
+
+        .wms-sidebar {
+            position: fixed;
+            inset: 0 auto 0 0;
+            width: min(23.5rem, calc(100vw - 2.5rem));
+            min-width: min(23.5rem, calc(100vw - 2.5rem));
+            transform: translateX(-105%);
+            box-shadow: 22px 0 60px rgb(0 0 0 / 0.24);
+        }
+
+        html[data-wms-mobile-sidebar='open'] .wms-sidebar {
+            transform: translateX(0);
+        }
+
+        html[data-wms-mobile-sidebar='open'] .wms-mobile-overlay {
+            position: fixed;
+            inset: 0;
+            z-index: 35;
+            display: block;
+            background: rgb(0 0 0 / 0.48);
+            backdrop-filter: blur(2px);
+        }
+
+        html[data-wms-sidebar='collapsed'] .wms-sidebar {
+            width: min(23.5rem, calc(100vw - 2.5rem));
+            min-width: min(23.5rem, calc(100vw - 2.5rem));
+        }
+
+        html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label] {
+            display: initial !important;
+        }
+
+        html[data-wms-sidebar='collapsed'] .wms-brand-copy,
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-heading,
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-link span {
+            display: block !important;
+        }
+
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
+            justify-content: flex-start;
+        }
+
+        .wms-sidebar-toggle {
+            display: none;
+        }
+
+        .wms-mobile-close {
+            display: inline-grid;
+        }
+
+        .wms-mobile-header {
+            position: sticky;
+            top: 0;
+            z-index: 30;
+            display: flex;
+            min-height: 4rem;
+            align-items: center;
+            gap: 0.75rem;
+            border-bottom: 1px solid rgb(228 228 231);
+            background: rgb(255 255 255 / 0.86);
+            padding: 0.75rem 1rem;
+            backdrop-filter: blur(14px);
+        }
+
+        .dark .wms-mobile-header {
+            border-bottom-color: rgb(63 63 70);
+            background: rgb(24 24 27 / 0.86);
+        }
+
+        .wms-mobile-menu {
+            width: 2.35rem;
+            height: 2.35rem;
+            flex: 0 0 auto;
+        }
+
+        .wms-mobile-title {
+            min-width: 0;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: inherit;
+            font-size: 0.96rem;
+            font-weight: 800;
+            text-decoration: none;
+        }
+
+        .wms-mobile-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 3.1rem;
+            height: 2rem;
+            border-radius: 999px;
+            border: 1px solid rgb(14 116 144 / 0.24);
+            background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
+            color: rgb(14 116 144);
+            font-size: 0.72rem;
+            font-weight: 900;
+            letter-spacing: 0.12em;
+        }
+
+        .dark .wms-mobile-badge {
+            border-color: rgb(103 232 249 / 0.26);
+            background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
+            color: rgb(165 243 252);
+        }
+
+        .wms-page-hero {
+            max-width: 100%;
+            margin-bottom: 1rem;
+            border-radius: 1rem;
+        }
+
+        .wms-page-hero-inner {
+            padding: 1.25rem;
+        }
+
+        .wms-page-hero-actions {
+            width: 100%;
+            flex-wrap: wrap;
+        }
+
+        .wms-page-hero-stat {
+            min-width: min(10rem, 100%);
+            flex: 1 1 10rem;
+        }
+
+        .wms-hero-mobile-menu {
+            display: inline-grid;
+        }
+
+        .wms-content {
+            padding: 1rem;
+        }
+    }
+}
+
+
+@layer components {
+    body.wms-mobile-nav-open {
+        overflow: hidden;
+    }
+
+    @media (max-width: 1023px) {
+        .wms-app-shell {
+            display: block !important;
+            min-height: 100vh;
+        }
+
+        .wms-main-panel {
+            min-height: 100vh;
+        }
+
+        .wms-mobile-header {
+            position: sticky !important;
+            top: 0;
+            z-index: 50;
+            display: flex !important;
+            min-height: 4.25rem;
+            align-items: center;
+            gap: 0.8rem;
+            border-bottom: 1px solid rgb(228 228 231);
+            background: rgb(255 255 255 / 0.94);
+            padding: 0.75rem 1rem;
+            box-shadow: 0 14px 34px rgb(15 23 42 / 0.08);
+            backdrop-filter: blur(18px);
+        }
+
+        .dark .wms-mobile-header {
+            border-bottom-color: rgb(63 63 70);
+            background: rgb(24 24 27 / 0.94);
+            box-shadow: 0 14px 34px rgb(0 0 0 / 0.28);
+        }
+
+        .wms-mobile-menu {
+            display: inline-grid !important;
+            width: 2.65rem;
+            height: 2.65rem;
+            flex: 0 0 auto;
+            place-items: center;
+            border-radius: 0.9rem;
+            border: 1px solid rgb(14 116 144 / 0.28);
+            background: linear-gradient(135deg, rgb(255 255 255), rgb(236 254 255));
+            color: rgb(14 116 144);
+            font-size: 1.05rem;
+            box-shadow: 0 12px 28px rgb(14 116 144 / 0.16);
+        }
+
+        .dark .wms-mobile-menu {
+            border-color: rgb(103 232 249 / 0.30);
+            background: linear-gradient(135deg, rgb(24 24 27), rgb(8 47 73));
+            color: rgb(165 243 252);
+        }
+
+        .wms-mobile-title {
+            min-width: 0;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: rgb(24 24 27);
+            font-size: 0.98rem;
+            font-weight: 850;
+            letter-spacing: -0.02em;
+            text-decoration: none;
+        }
+
+        .dark .wms-mobile-title {
+            color: rgb(244 244 245);
+        }
+
+        .wms-mobile-badge {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 3.15rem;
+            height: 2rem;
+            border-radius: 999px;
+            border: 1px solid rgb(14 116 144 / 0.24);
+            background: linear-gradient(135deg, rgb(14 116 144 / 0.14), rgb(37 99 235 / 0.12));
+            color: rgb(14 116 144);
+            font-size: 0.72rem;
+            font-weight: 900;
+            letter-spacing: 0.12em;
+        }
+
+        .dark .wms-mobile-badge {
+            border-color: rgb(103 232 249 / 0.26);
+            background: linear-gradient(135deg, rgb(8 145 178 / 0.26), rgb(37 99 235 / 0.20));
+            color: rgb(165 243 252);
+        }
+
+        .wms-sidebar {
+            position: fixed !important;
+            inset: 0 auto 0 0;
+            z-index: 70;
+            width: min(23.5rem, calc(100vw - 2.25rem)) !important;
+            min-width: min(23.5rem, calc(100vw - 2.25rem)) !important;
+            height: 100dvh;
+            transform: translateX(-110%);
+            box-shadow: 28px 0 70px rgb(0 0 0 / 0.30);
+        }
+
+        html[data-wms-mobile-sidebar='open'] .wms-sidebar {
+            transform: translateX(0) !important;
+        }
+
+        .wms-mobile-overlay {
+            position: fixed;
+            inset: 0;
+            z-index: 60;
+            display: none;
+            width: 100%;
+            height: 100%;
+            border: 0;
+            background: transparent;
+            padding: 0;
+        }
+
+        html[data-wms-mobile-sidebar='open'] .wms-mobile-overlay {
+            display: block !important;
+            background: rgb(0 0 0 / 0.52);
+            backdrop-filter: blur(3px);
+        }
+
+        .wms-mobile-close {
+            display: inline-grid !important;
+        }
+
+        .wms-sidebar-toggle {
+            display: none !important;
+        }
+
+        html[data-wms-sidebar='collapsed'] [data-wms-sidebar-label],
+        html[data-wms-sidebar='collapsed'] .wms-brand-copy,
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-heading,
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-link span {
+            display: block !important;
+        }
+
+        html[data-wms-sidebar='collapsed'] .wms-sidebar-link {
+            justify-content: flex-start !important;
+        }
+
+        .wms-content {
+            padding-top: 1rem;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .wms-mobile-header,
+        .wms-mobile-overlay,
+        .wms-mobile-close {
+            display: none !important;
+        }
+    }
+}
+
+@layer components {
+    .wms-content,
+    .wms-main-panel,
+    .wms-app-shell {
+        min-width: 0;
+    }
+
+    .wms-content canvas {
+        max-width: 100%;
+    }
+
+    @media (max-width: 1023px) {
+        .wms-content {
+            width: 100%;
+            max-width: 100vw;
+            overflow-x: hidden;
+            padding-inline: 0.875rem;
+        }
+
+        .wms-page-hero {
+            max-width: 100%;
+        }
+
+        .wms-sidebar-nav {
+            -webkit-overflow-scrolling: touch;
+        }
+    }
+}
+
+:root {
+    --wms-sidebar-width: 288px;
+    --wms-sidebar-min-width: 224px;
+    --wms-sidebar-max-width: 448px;
+    --wms-sidebar-collapsed-width: 76px;
+
+    --wms-active-parent-blue: #4164dc;
+    --wms-active-child-gold: #e7b72f;
+    --wms-active-child-gold-dark: #e7b72f;
+}
+
+.wms-app-shell {
+    display: grid;
+    grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
+    min-height: 100vh;
+    transition-property: none;
+}
+
+html[data-wms-sidebar="expanded"] .wms-app-shell {
+    grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr);
+}
+
+html[data-wms-sidebar="collapsed"] .wms-app-shell {
+    grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr);
+}
+
+.wms-sidebar {
+    position: relative;
+    width: var(--wms-sidebar-width);
+    min-width: var(--wms-sidebar-width);
+    max-width: var(--wms-sidebar-width);
+    transition-property: none;
+}
+
+.wms-main-panel {
+    transition-property: none;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar {
+    width: var(--wms-sidebar-collapsed-width);
+    min-width: var(--wms-sidebar-collapsed-width);
+    max-width: var(--wms-sidebar-collapsed-width);
+}
+
+.wms-sidebar-resizer {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    z-index: 30;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    border: 0;
+    background: transparent;
+}
+
+.wms-sidebar-resizer::after {
+    position: absolute;
+    top: 0;
+    right: 3px;
+    width: 1px;
+    height: 100%;
+    content: "";
+    background: rgba(148, 163, 184, 0.22);
+    transition: background 160ms ease;
+}
+
+.wms-sidebar-resizer:hover::after,
+body.wms-sidebar-is-resizing .wms-sidebar-resizer::after {
+    background: rgba(59, 130, 246, 0.7);
+}
+
+body.wms-sidebar-is-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar-resizer {
+    display: none;
+}
+
+.wms-sidebar-nav {
+    overflow-x: hidden;
+}
+
+.wms-sidebar-heading-button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+}
+
+.wms-sidebar-heading-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+}
+
+.wms-sidebar-heading-content > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wms-sidebar-heading-chevron {
+    display: none;
+}
+
+.wms-sidebar-group-items {
+    display: none;
+}
+
+.wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
+    display: block;
+}
+
+.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
+    position: relative;
+    width: calc(100% - 1.25rem);
+    min-height: 2.9rem;
+    margin: 0.25rem 0.65rem 0.35rem;
+    padding: 0.6rem 0.85rem;
+    border-radius: 1.35rem;
+    background: linear-gradient(135deg, #4667df 0%, #3f5fd2 100%);
+    color: #ffffff;
+    font-weight: 700;
+    letter-spacing: 0.035em;
+    box-shadow: 0 8px 18px rgba(65, 100, 220, 0.22);
+}
+
+.wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button .wms-sidebar-icon {
+    color: #ffffff;
+}
+
+
+.wms-sidebar-primary-link {
+    margin-bottom: 0.35rem;
+    min-height: 3.25rem;
+    font-size: 0.8rem;
+    font-weight: 800;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+}
+
+.wms-sidebar-primary-link span {
+    letter-spacing: 0.16em;
+}
+.wms-sidebar-link.is-active {
+    position: relative;
+    isolation: isolate;
+    width: calc(100% - 2.05rem);
+    min-height: 2.85rem;
+    margin: 0.2rem 1.25rem 0.25rem 0.8rem;
+    padding: 0.6rem 0.95rem;
+    border-radius: 1.65rem 0.75rem 0.75rem 1.65rem;
+    background: var(--wms-active-child-gold);
+    color: #ffffff;
+    font-weight: 700;
+    box-shadow: 0 8px 18px rgba(231, 183, 47, 0.24);
+}
+
+.wms-sidebar-link.is-active::after {
+    position: absolute;
+    top: 0;
+    right: -1.05rem;
+    z-index: -1;
+    width: 1.75rem;
+    height: 100%;
+    content: "";
+    background: var(--wms-active-child-gold);
+    clip-path: polygon(0 0, 64% 0, 100% 50%, 64% 100%, 0 100%);
+    border-radius: 0 0.9rem 0.9rem 0;
+}
+
+.wms-sidebar-link.is-active .wms-sidebar-icon,
+.wms-sidebar-link.is-active i,
+.wms-sidebar-link.is-active span {
+    position: relative;
+    z-index: 1;
+    color: #ffffff;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-chevron,
+html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
+    display: none;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
+    pointer-events: none;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button,
+html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active {
+    width: 2.75rem;
+    min-height: 2.75rem;
+    margin: 0.25rem auto;
+    justify-content: center;
+    border-radius: 9999px;
+    padding: 0.65rem;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar-link.is-active::after {
+    display: none;
+}
+
+@media (max-width: 1023px) {
+    .wms-app-shell {
+        display: block;
+    }
+
+    .wms-sidebar,
+    html[data-wms-sidebar="collapsed"] .wms-sidebar {
+        width: min(88vw, 22rem);
+        min-width: min(88vw, 22rem);
+        max-width: min(88vw, 22rem);
+    }
+
+    .wms-sidebar-resizer {
+        display: none;
+    }
+
+    .wms-sidebar-group[data-wms-selected="true"] > .wms-sidebar-heading-button {
+        width: calc(100% - 1.25rem);
+        min-height: 2.85rem;
+        margin: 0.25rem 0.65rem 0.35rem;
+        padding: 0.6rem 0.85rem;
+    }
+
+    .wms-sidebar-link.is-active {
+        width: calc(100% - 2.05rem);
+        min-height: 2.8rem;
+        margin: 0.2rem 1.25rem 0.25rem 0.8rem;
+        padding: 0.6rem 0.95rem;
+    }
+
+    html[data-wms-sidebar="collapsed"] .wms-sidebar-group-items {
+        display: none;
+    }
+
+    html[data-wms-sidebar="collapsed"] .wms-sidebar-group[data-wms-menu-open="true"] > .wms-sidebar-group-items {
+        display: block;
+    }
+
+    html[data-wms-sidebar="collapsed"] .wms-sidebar-heading-button {
+        pointer-events: auto;
+    }
+}
+
+/*
+|--------------------------------------------------------------------------
+| WMS fixed sidebar / scrollable content correction
+|--------------------------------------------------------------------------
+|
+| The application shell must own the viewport. The browser document must not
+| scroll; only the right-hand WMS content pane should scroll. Keep this block
+| at the end of the stylesheet so it wins over earlier shell declarations.
+|
+*/
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    overflow: hidden !important;
+    overscroll-behavior: none;
+}
+
+body {
+    position: fixed;
+    inset: 0;
+}
+
+.wms-app-shell {
+    position: fixed !important;
+    inset: 0 !important;
+    display: grid !important;
+    grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    max-height: 100vh !important;
+    overflow: hidden !important;
+}
+
+@supports (height: 100dvh) {
+    .wms-app-shell {
+        height: 100dvh !important;
+        max-height: 100dvh !important;
+    }
+}
+
+html[data-wms-sidebar="expanded"] .wms-app-shell {
+    grid-template-columns: var(--wms-sidebar-width) minmax(0, 1fr) !important;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-app-shell {
+    grid-template-columns: var(--wms-sidebar-collapsed-width) minmax(0, 1fr) !important;
+}
+
+.wms-sidebar {
+    position: relative !important;
+    display: flex !important;
+    flex-direction: column !important;
+    width: var(--wms-sidebar-width) !important;
+    min-width: var(--wms-sidebar-width) !important;
+    max-width: var(--wms-sidebar-width) !important;
+    height: 100% !important;
+    min-height: 0 !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+}
+
+html[data-wms-sidebar="collapsed"] .wms-sidebar {
+    width: var(--wms-sidebar-collapsed-width) !important;
+    min-width: var(--wms-sidebar-collapsed-width) !important;
+    max-width: var(--wms-sidebar-collapsed-width) !important;
+}
+
+.wms-sidebar-header {
+    flex: 0 0 auto !important;
+}
+
+.wms-sidebar-nav {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+}
+
+.wms-main-panel {
+    display: flex !important;
+    flex-direction: column !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
+    overflow: hidden !important;
+}
+
+.wms-main-panel > header,
+.wms-main-panel > .wms-topbar,
+.wms-main-panel > [data-wms-topbar] {
+    position: relative !important;
+    top: auto !important;
+    flex: 0 0 auto !important;
+    min-height: 0 !important;
+}
+
+.wms-content {
+    display: block !important;
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    min-height: 0 !important;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+}
+
+@media (max-width: 1023px) {
+    .wms-app-shell {
+        display: block !important;
+        height: 100vh !important;
+        max-height: 100vh !important;
+        overflow: hidden !important;
+    }
+
+    @supports (height: 100dvh) {
+        .wms-app-shell {
+            height: 100dvh !important;
+            max-height: 100dvh !important;
+        }
+    }
+
+    .wms-main-panel {
+        height: 100% !important;
+        max-height: 100% !important;
+        overflow: hidden !important;
+    }
+
+    .wms-sidebar,
+    html[data-wms-sidebar="collapsed"] .wms-sidebar {
+        position: fixed !important;
+        inset: 0 auto 0 0 !important;
+        z-index: 70 !important;
+        width: min(88vw, 22rem) !important;
+        min-width: min(88vw, 22rem) !important;
+        max-width: min(88vw, 22rem) !important;
+        height: 100vh !important;
+        max-height: 100vh !important;
+        overflow: hidden !important;
+    }
+
+    @supports (height: 100dvh) {
+        .wms-sidebar,
+        html[data-wms-sidebar="collapsed"] .wms-sidebar {
+            height: 100dvh !important;
+            max-height: 100dvh !important;
+        }
+    }
+}
+
+
+
+@layer components {
+    .wms-select2-field .select2-container {
+        width: 100% !important;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single {
+        min-height: 2.875rem;
+        border-radius: 0.75rem;
+        border-color: rgb(212 212 216);
+        background: white;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+        transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        padding-left: 0.95rem;
+        padding-right: 2.75rem;
+        color: rgb(24 24 27);
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 2.875rem;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: rgb(113 113 122);
+        font-weight: 500;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        top: 0.45rem;
+        right: 0.65rem;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 0.55rem;
+        background: rgb(244 244 245);
+    }
+
+    .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
+    .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
+        border-color: rgb(8 145 178);
+        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+    }
+
+    .select2-container--default .select2-dropdown {
+        overflow: hidden;
+        border-radius: 1rem;
+        border-color: rgb(212 212 216);
+        background: white;
+        box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
+    }
+
+    .select2-container--default .select2-search--dropdown {
+        padding: 0.75rem;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        border-radius: 0.75rem;
+        border-color: rgb(212 212 216);
+        padding: 0.55rem 0.75rem;
+        font-size: 0.875rem;
+        outline: none;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
+        border-color: rgb(8 145 178);
+        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+    }
+
+    .select2-container--default .select2-results__option {
+        padding: 0.65rem 0.85rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+        background: rgb(8 145 178);
+        color: white;
+    }
+
+    .select2-container--default .select2-results__option--selected {
+        background: rgb(236 254 255);
+        color: rgb(14 116 144);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        color: white;
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: rgb(161 161 170);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        background: rgb(39 39 42);
+    }
+
+    .dark .select2-container--default .select2-dropdown {
+        border-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+        color: rgb(244 244 245);
+    }
+
+    .dark .select2-container--default .select2-search--dropdown .select2-search__field {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+        color: white;
+    }
+
+    .dark .select2-container--default .select2-results__option--selected {
+        background: rgb(8 47 73);
+        color: rgb(165 243 252);
+    }
+}
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 00000000..ee6d0713
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,222 @@
+require('flatpickr');
+
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import Chart from 'chart.js/auto';
+import $ from 'jquery';
+
+window.$ = $;
+window.jQuery = $;
+
+import 'select2';
+import 'select2/dist/css/select2.min.css';
+
+const chartColours = [
+    'rgb(8, 145, 178)',
+    'rgb(37, 99, 235)',
+    'rgb(79, 70, 229)',
+    'rgb(14, 116, 144)',
+];
+
+/**
+ * Parse JSON attribute safely.
+ *
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @param {Array} fallback
+ * @returns {*}
+ */
+function parseJsonAttribute(element, attribute, fallback = []) {
+    try {
+        return JSON.parse(
+            element.getAttribute(attribute) || JSON.stringify(fallback)
+        );
+    } catch (error) {
+        return fallback;
+    }
+}
+
+/**
+ * Render dashboard charts.
+ *
+ * @returns {void}
+ */
+function renderWmsCharts() {
+    document.querySelectorAll('[data-wms-chart]').forEach((canvas) => {
+        if (canvas.dataset.rendered === 'true') {
+            return;
+        }
+
+        const type = canvas.getAttribute('data-wms-chart');
+        const labels = parseJsonAttribute(canvas, 'data-labels');
+        const series = parseJsonAttribute(canvas, 'data-series');
+        const values = parseJsonAttribute(canvas, 'data-values');
+
+        const datasets = series.length
+            ? series.map((item, index) => ({
+                label: item.label,
+                data: item.data,
+                backgroundColor:
+                    chartColours[index % chartColours.length],
+                borderColor:
+                    chartColours[index % chartColours.length],
+                borderWidth: 2,
+                borderRadius: 8,
+            }))
+            : [
+                {
+                    label: 'Total',
+                    data: values,
+                    backgroundColor: chartColours,
+                    borderColor: 'rgb(255,255,255)',
+                    borderWidth: 2,
+                },
+            ];
+
+        new Chart(canvas, {
+            type,
+            data: {
+                labels,
+                datasets,
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: document.documentElement.classList.contains(
+                                'dark'
+                            )
+                                ? '#e4e4e7'
+                                : '#3f3f46',
+                            boxWidth: 12,
+                            boxHeight: 12,
+                        },
+                    },
+                },
+                scales:
+                    type === 'doughnut'
+                        ? {}
+                        : {
+                            x: {
+                                ticks: {
+                                    color:
+                                        document.documentElement.classList.contains(
+                                            'dark'
+                                        )
+                                            ? '#d4d4d8'
+                                            : '#52525b',
+                                },
+                                grid: {
+                                    color:
+                                        'rgba(113,113,122,0.18)',
+                                },
+                            },
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    precision: 0,
+                                    color:
+                                        document.documentElement.classList.contains(
+                                            'dark'
+                                        )
+                                            ? '#d4d4d8'
+                                            : '#52525b',
+                                },
+                                grid: {
+                                    color:
+                                        'rgba(113,113,122,0.18)',
+                                },
+                            },
+                        },
+            },
+        });
+
+        canvas.dataset.rendered = 'true';
+    });
+}
+
+
+function livewireComponentFor(element) {
+    const componentRoot = element.closest('[wire\:id]');
+
+    if (!componentRoot || !window.Livewire) {
+        return null;
+    }
+
+    return window.Livewire.find(componentRoot.getAttribute('wire:id'));
+}
+
+function setLivewireProperty(element, model, value) {
+    const component = livewireComponentFor(element);
+
+    if (!component || !model) {
+        return;
+    }
+
+    component.set(model, value === '' ? null : value);
+}
+
+/**
+ * Initialise Select2 controls.
+ *
+ * @returns {void}
+ */
+function initialiseSelect2() {
+    if (!window.jQuery?.fn?.select2) {
+        return;
+    }
+
+    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
+        const $select = $(this);
+
+        if ($select.hasClass('select2-hidden-accessible')) {
+            $select.select2('destroy');
+        }
+
+        const isMultiple = $select.prop('multiple');
+
+        $select.select2({
+            width: '100%',
+            allowClear: !isMultiple,
+            closeOnSelect: !isMultiple,
+            dropdownAutoWidth: true,
+            placeholder:
+                $select.data('placeholder') ||
+                $select.find('option[value=""]').first().text() ||
+                (isMultiple ? 'Select options' : 'Select option'),
+        });
+
+        $select.off('change.select2-livewire');
+
+        $select.on('change.select2-livewire', function () {
+            setLivewireProperty(this, this.dataset.wireModel, $select.val());
+
+            this.dispatchEvent(
+                new Event('change', {
+                    bubbles: true,
+                })
+            );
+        });
+    });
+}
+
+/**
+ * Boot page UI.
+ *
+ * @returns {void}
+ */
+function bootUi() {
+    renderWmsCharts();
+    initialiseSelect2();
+}
+
+document.addEventListener('DOMContentLoaded', bootUi);
+
+document.addEventListener('livewire:navigated', bootUi);
+
+document.addEventListener('livewire:init', () => {
+    Livewire.hook('morphed', () => {
+        initialiseSelect2();
+    });
+});
diff --git a/resources/css/app.css b/resources/css/app.css
index 6b2790cf..5a7ff4d3 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1409,3 +1409,123 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
     }
 }
 
+
+
+@layer components {
+    .wms-select2-field .select2-container {
+        width: 100% !important;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single {
+        min-height: 2.875rem;
+        border-radius: 0.75rem;
+        border-color: rgb(212 212 216);
+        background: white;
+        box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
+        transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        padding-left: 0.95rem;
+        padding-right: 2.75rem;
+        color: rgb(24 24 27);
+        font-size: 0.875rem;
+        font-weight: 600;
+        line-height: 2.875rem;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: rgb(113 113 122);
+        font-weight: 500;
+    }
+
+    .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        top: 0.45rem;
+        right: 0.65rem;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 0.55rem;
+        background: rgb(244 244 245);
+    }
+
+    .wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
+    .wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
+        border-color: rgb(8 145 178);
+        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+    }
+
+    .select2-container--default .select2-dropdown {
+        overflow: hidden;
+        border-radius: 1rem;
+        border-color: rgb(212 212 216);
+        background: white;
+        box-shadow: 0 24px 60px rgb(15 23 42 / 0.18);
+    }
+
+    .select2-container--default .select2-search--dropdown {
+        padding: 0.75rem;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field {
+        border-radius: 0.75rem;
+        border-color: rgb(212 212 216);
+        padding: 0.55rem 0.75rem;
+        font-size: 0.875rem;
+        outline: none;
+    }
+
+    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
+        border-color: rgb(8 145 178);
+        box-shadow: 0 0 0 3px rgb(103 232 249 / 0.28);
+    }
+
+    .select2-container--default .select2-results__option {
+        padding: 0.65rem 0.85rem;
+        font-size: 0.875rem;
+        font-weight: 600;
+    }
+
+    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
+        background: rgb(8 145 178);
+        color: white;
+    }
+
+    .select2-container--default .select2-results__option--selected {
+        background: rgb(236 254 255);
+        color: rgb(14 116 144);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
+        color: white;
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
+        color: rgb(161 161 170);
+    }
+
+    .dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
+        background: rgb(39 39 42);
+    }
+
+    .dark .select2-container--default .select2-dropdown {
+        border-color: rgb(63 63 70);
+        background: rgb(24 24 27);
+        color: rgb(244 244 245);
+    }
+
+    .dark .select2-container--default .select2-search--dropdown .select2-search__field {
+        border-color: rgb(63 63 70);
+        background: rgb(9 9 11);
+        color: white;
+    }
+
+    .dark .select2-container--default .select2-results__option--selected {
+        background: rgb(8 47 73);
+        color: rgb(165 243 252);
+    }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index 804a5b7b..ee6d0713 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -167,7 +167,7 @@ function initialiseSelect2() {
         return;
     }
 
-    $('[data-helpdesk-select2]').each(function () {
+    $('[data-helpdesk-select2], [data-wms-select2]').each(function () {
         const $select = $(this);
 
         if ($select.hasClass('select2-hidden-accessible')) {
@@ -182,6 +182,7 @@ function initialiseSelect2() {
             closeOnSelect: !isMultiple,
             dropdownAutoWidth: true,
             placeholder:
+                $select.data('placeholder') ||
                 $select.find('option[value=""]').first().text() ||
                 (isMultiple ? 'Select options' : 'Select option'),
         });