diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
new file mode 100644
index 0000000..783ab68
--- /dev/null
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -0,0 +1,80 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Http\Controllers\Controller;
+use App\Models\User;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rule;
+use Inertia\Inertia;
+
+class UserController extends Controller
+{
+    public function index()
+    {
+        return Inertia::render('Admin/Users/Index', [
+            'users' => User::all(),
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Admin/Users/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'email' => 'required|string|email|max:255|unique:users',
+            'password' => 'required|string|min:8|confirmed',
+            'role' => ['required', Rule::in(['user', 'mod', 'admin'])],
+        ]);
+
+        User::create([
+            'name' => $request->name,
+            'email' => $request->email,
+            'password' => Hash::make($request->password),
+            'role' => $request->role,
+        ]);
+
+        return redirect('/admin/users');
+    }
+
+    public function edit(User $user)
+    {
+        return Inertia::render('Admin/Users/Edit', [
+            'user' => $user,
+        ]);
+    }
+
+    public function update(Request $request, User $user)
+    {
+        $request->validate([
+            'name' => 'required|string|max:255',
+            'email' => ['required', 'string', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
+            'password' => 'nullable|string|min:8|confirmed',
+            'role' => ['required', Rule::in(['user', 'mod', 'admin'])],
+        ]);
+
+        $user->name = $request->name;
+        $user->email = $request->email;
+        $user->role = $request->role;
+
+        if ($request->filled('password')) {
+            $user->password = Hash::make($request->password);
+        }
+
+        $user->save();
+
+        return redirect('/admin/users');
+    }
+
+    public function destroy(User $user)
+    {
+        $user->delete();
+
+        return redirect('/admin/users');
+    }
+}
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 4f74b10..4ef0f26 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -32,6 +32,12 @@ class AppServiceProvider extends ServiceProvider
             // You should restrict this later!
             return true;
         });
+
+        Gate::define('manage-users', function (User $user) {
+            // Temporarily allowing all authenticated users while testing.
+            // You should restrict this later by returning $user->isAdmin();
+            return true;
+        });
     }
 
     /**
diff --git a/database/seeders/AdminUserSeeder.php b/database/seeders/AdminUserSeeder.php
new file mode 100644
index 0000000..e6bb82f
--- /dev/null
+++ b/database/seeders/AdminUserSeeder.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace Database\Seeders;
+
+use App\Models\User;
+use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\Hash;
+
+class AdminUserSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     */
+    public function run(): void
+    {
+        // Create an admin user if it doesn't exist
+        $user = User::firstOrCreate(
+            ['email' => 'admin@bratanbonus.test'],
+            [
+                'name' => 'Admin Bratan',
+                'password' => Hash::make('password'),
+                'role' => 'admin',
+            ]
+        );
+
+        $this->command->info('Admin User created successfully!');
+        $this->command->info('--------------------------------');
+        $this->command->info('Email:    ' . $user->email);
+        $this->command->info('Password: password');
+        $this->command->info('Role:     ' . $user->role);
+        $this->command->info('--------------------------------');
+    }
+}
diff --git a/database/seeders/DatabaseSeeder.php b/database/seeders/DatabaseSeeder.php
index d01a0ef..18297de 100644
--- a/database/seeders/DatabaseSeeder.php
+++ b/database/seeders/DatabaseSeeder.php
@@ -19,5 +19,9 @@ class DatabaseSeeder extends Seeder
             'name' => 'Test User',
             'email' => 'test@example.com',
         ]);
+
+        $this->call([
+            AdminUserSeeder::class,
+        ]);
     }
 }
diff --git a/make_admin.php b/make_admin.php
new file mode 100644
index 0000000..3a27f6c
--- /dev/null
+++ b/make_admin.php
@@ -0,0 +1,14 @@
+<?php
+require __DIR__.'/vendor/autoload.php';
+$app = require_once __DIR__.'/bootstrap/app.php';
+$kernel = $app->make(Illuminate\Contracts\Console\Kernel::class);
+$kernel->bootstrap();
+
+$user = \App\Models\User::first();
+if ($user) {
+    $user->role = 'admin';
+    $user->save();
+    echo "User {$user->email} is now an admin!\n";
+} else {
+    echo "No user found.\n";
+}
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index f1bb49e..ab6597a 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -35,7 +35,6 @@ import UserMenuContent from '@/components/UserMenuContent.vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
 import { getInitials } from '@/composables/useInitials';
 import { toUrl } from '@/lib/utils';
-import { dashboard } from '@/routes';
 import type { BreadcrumbItem, NavItem } from '@/types';
 
 type Props = {
@@ -56,7 +55,7 @@ const activeItemStyles =
 const mainNavItems: NavItem[] = [
     {
         title: 'Dashboard',
-        href: dashboard(),
+        href: '/dashboard',
         icon: LayoutGrid,
     },
 ];
@@ -146,7 +145,7 @@ const rightNavItems: NavItem[] = [
                     </Sheet>
                 </div>
 
-                <Link :href="dashboard()" class="flex items-center gap-x-2">
+                <Link href="/dashboard" class="flex items-center gap-x-2">
                     <AppLogo />
                 </Link>
 
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 06fbed7..e6589b1 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -15,7 +15,6 @@ import {
     SidebarMenuButton,
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
-import { dashboard } from '@/routes';
 import type { NavItem } from '@/types';
 
 const page = usePage();
@@ -36,7 +35,7 @@ const mainNavItems = computed<NavItem[]>(() => {
     const items: NavItem[] = [
         {
             title: 'Dashboard',
-            href: dashboard(),
+            href: '/dashboard',
             icon: LayoutGrid,
         }
     ];
@@ -82,7 +81,7 @@ const footerNavItems = computed<NavItem[]>(() => {
             <SidebarMenu>
                 <SidebarMenuItem>
                     <SidebarMenuButton size="lg" as-child>
-                        <Link :href="dashboard()">
+                        <Link href="/dashboard">
                             <AppLogo />
                         </Link>
                     </SidebarMenuButton>
diff --git a/resources/js/components/TwoFactorRecoveryCodes.vue b/resources/js/components/TwoFactorRecoveryCodes.vue
index d3069bf..b2afc4a 100644
--- a/resources/js/components/TwoFactorRecoveryCodes.vue
+++ b/resources/js/components/TwoFactorRecoveryCodes.vue
@@ -12,7 +12,6 @@ import {
     CardTitle,
 } from '@/components/ui/card';
 import { useTwoFactorAuth } from '@/composables/useTwoFactorAuth';
-import { regenerateRecoveryCodes } from '@/routes/two-factor';
 
 const { recoveryCodesList, fetchRecoveryCodes, errors } = useTwoFactorAuth();
 const isRecoveryCodesVisible = ref<boolean>(false);
@@ -64,7 +63,7 @@ onMounted(async () => {
 
                 <Form
                     v-if="isRecoveryCodesVisible && recoveryCodesList.length"
-                    v-bind="regenerateRecoveryCodes.form()"
+                    action="/user/two-factor-recovery-codes"
                     method="post"
                     :options="{ preserveScroll: true }"
                     @success="fetchRecoveryCodes"
diff --git a/resources/js/layouts/AdminLayout.vue b/resources/js/layouts/AdminLayout.vue
index 5e8e1ce..cfc232f 100644
--- a/resources/js/layouts/AdminLayout.vue
+++ b/resources/js/layouts/AdminLayout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { LayoutGrid, Gift, Settings, LogOut, Menu, X, Bell, CheckCircle, AlertCircle, Info, Trophy } from 'lucide-vue-next';
+import { LayoutGrid, Gift, Settings, LogOut, Menu, X, Bell, CheckCircle, AlertCircle, Info, Trophy, Users } from 'lucide-vue-next';
 import { ref, watch, onMounted } from 'vue';
 
 const isSidebarOpen = ref(false); // Default to closed on mobile
@@ -12,6 +12,7 @@ const navItems = [
     { title: 'Leaderboard', href: '/leaderboard', icon: Trophy, isExternal: true },
     { title: 'Dashboard', href: '/dashboard', icon: LayoutGrid },
     { title: 'Bonuses', href: '/admin/bonuses', icon: Gift },
+    { title: 'Users', href: '/admin/users', icon: Users },
 ];
 
 const notification = ref<{ message: string; type: 'success' | 'error' | 'info' } | null>(null);
@@ -190,10 +191,10 @@ onMounted(() => {
                     <div class="flex items-center gap-3">
                         <div class="text-right hidden sm:block">
                             <div class="text-sm font-bold">{{ $page.props.auth?.user?.name || 'Admin' }}</div>
-                            <div class="text-[10px] text-purple-400 font-black uppercase tracking-widest">Administrator</div>
+                            <div class="text-[10px] text-purple-400 font-black uppercase tracking-widest">{{ $page.props.auth?.user?.role || 'Administrator' }}</div>
                         </div>
                         <div class="w-8 h-8 md:w-10 md:h-10 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 p-[2px] shrink-0">
-                            <div class="w-full h-full rounded-full bg-[#0f172a] flex items-center justify-center font-bold text-xs">
+                            <div class="w-full h-full rounded-full bg-[#0f172a] flex items-center justify-center font-bold text-xs uppercase">
                                 {{ ($page.props.auth?.user?.name || 'A').charAt(0) }}
                             </div>
                         </div>
diff --git a/resources/js/pages/Admin/Users/Create.vue b/resources/js/pages/Admin/Users/Create.vue
new file mode 100644
index 0000000..40ce98d
--- /dev/null
+++ b/resources/js/pages/Admin/Users/Create.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Save, ArrowLeft } from 'lucide-vue-next';
+
+const form = useForm({
+    name: '',
+    email: '',
+    password: '',
+    password_confirmation: '',
+    role: 'user',
+});
+
+const submit = () => {
+    form.post('/admin/users', {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+};
+</script>
+
+<template>
+    <Head title="Add User" />
+    <div class="max-w-3xl mx-auto space-y-6">
+        <div class="flex items-center gap-4">
+            <Link
+                href="/admin/users"
+                class="p-2 rounded-full hover:bg-white/10 transition-colors"
+            >
+                <ArrowLeft class="w-5 h-5 text-gray-400" />
+            </Link>
+            <div>
+                <h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">Add New User</h1>
+                <p class="text-gray-400 text-sm">Create a new user account and assign a role.</p>
+            </div>
+        </div>
+
+        <form @submit.prevent="submit" class="bg-[#0f172a] rounded-2xl border border-white/5 p-8 space-y-6 shadow-xl">
+            <!-- Name -->
+            <div>
+                <label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
+                <input
+                    id="name"
+                    v-model="form.name"
+                    type="text"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    required
+                />
+                <div v-if="form.errors.name" class="text-red-400 text-xs mt-1">{{ form.errors.name }}</div>
+            </div>
+
+            <!-- Email -->
+            <div>
+                <label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
+                <input
+                    id="email"
+                    v-model="form.email"
+                    type="email"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    required
+                />
+                <div v-if="form.errors.email" class="text-red-400 text-xs mt-1">{{ form.errors.email }}</div>
+            </div>
+
+            <!-- Password -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label for="password" class="block text-sm font-bold text-gray-300 mb-2">Password</label>
+                    <input
+                        id="password"
+                        v-model="form.password"
+                        type="password"
+                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                        required
+                    />
+                    <div v-if="form.errors.password" class="text-red-400 text-xs mt-1">{{ form.errors.password }}</div>
+                </div>
+                <div>
+                    <label for="password_confirmation" class="block text-sm font-bold text-gray-300 mb-2">Confirm Password</label>
+                    <input
+                        id="password_confirmation"
+                        v-model="form.password_confirmation"
+                        type="password"
+                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                        required
+                    />
+                </div>
+            </div>
+
+            <!-- Role -->
+            <div>
+                <label for="role" class="block text-sm font-bold text-gray-300 mb-2">Role</label>
+                <select
+                    id="role"
+                    v-model="form.role"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition appearance-none"
+                >
+                    <option value="user">User</option>
+                    <option value="mod">Moderator</option>
+                    <option value="admin">Administrator</option>
+                </select>
+                <div v-if="form.errors.role" class="text-red-400 text-xs mt-1">{{ form.errors.role }}</div>
+            </div>
+
+            <div class="flex justify-end pt-4">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                    <Save class="w-5 h-5 relative z-10" />
+                    <span class="relative z-10">Save User</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
diff --git a/resources/js/pages/Admin/Users/Edit.vue b/resources/js/pages/Admin/Users/Edit.vue
new file mode 100644
index 0000000..632c6e5
--- /dev/null
+++ b/resources/js/pages/Admin/Users/Edit.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Save, ArrowLeft } from 'lucide-vue-next';
+
+const props = defineProps<{
+    user: {
+        id: number;
+        name: string;
+        email: string;
+        role: string;
+    };
+}>();
+
+const form = useForm({
+    name: props.user.name,
+    email: props.user.email,
+    password: '',
+    password_confirmation: '',
+    role: props.user.role,
+});
+
+const submit = () => {
+    form.put(`/admin/users/${props.user.id}`, {
+        onFinish: () => form.reset('password', 'password_confirmation'),
+    });
+};
+</script>
+
+<template>
+    <Head title="Edit User" />
+    <div class="max-w-3xl mx-auto space-y-6">
+        <div class="flex items-center gap-4">
+            <Link
+                href="/admin/users"
+                class="p-2 rounded-full hover:bg-white/10 transition-colors"
+            >
+                <ArrowLeft class="w-5 h-5 text-gray-400" />
+            </Link>
+            <div>
+                <h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">Edit User</h1>
+                <p class="text-gray-400 text-sm">Update account details for {{ user.name }}</p>
+            </div>
+        </div>
+
+        <form @submit.prevent="submit" class="bg-[#0f172a] rounded-2xl border border-white/5 p-8 space-y-6 shadow-xl">
+            <!-- Name -->
+            <div>
+                <label for="name" class="block text-sm font-bold text-gray-300 mb-2">Name</label>
+                <input
+                    id="name"
+                    v-model="form.name"
+                    type="text"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    required
+                />
+                <div v-if="form.errors.name" class="text-red-400 text-xs mt-1">{{ form.errors.name }}</div>
+            </div>
+
+            <!-- Email -->
+            <div>
+                <label for="email" class="block text-sm font-bold text-gray-300 mb-2">Email</label>
+                <input
+                    id="email"
+                    v-model="form.email"
+                    type="email"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    required
+                />
+                <div v-if="form.errors.email" class="text-red-400 text-xs mt-1">{{ form.errors.email }}</div>
+            </div>
+
+            <!-- Password -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                    <label for="password" class="block text-sm font-bold text-gray-300 mb-2">Password (Leave blank to keep current)</label>
+                    <input
+                        id="password"
+                        v-model="form.password"
+                        type="password"
+                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    />
+                    <div v-if="form.errors.password" class="text-red-400 text-xs mt-1">{{ form.errors.password }}</div>
+                </div>
+                <div>
+                    <label for="password_confirmation" class="block text-sm font-bold text-gray-300 mb-2">Confirm Password</label>
+                    <input
+                        id="password_confirmation"
+                        v-model="form.password_confirmation"
+                        type="password"
+                        class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition"
+                    />
+                </div>
+            </div>
+
+            <!-- Role -->
+            <div>
+                <label for="role" class="block text-sm font-bold text-gray-300 mb-2">Role</label>
+                <select
+                    id="role"
+                    v-model="form.role"
+                    class="w-full bg-black/20 border border-white/10 rounded-lg px-4 py-2 text-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition appearance-none"
+                >
+                    <option value="user">User</option>
+                    <option value="mod">Moderator</option>
+                    <option value="admin">Administrator</option>
+                </select>
+                <div v-if="form.errors.role" class="text-red-400 text-xs mt-1">{{ form.errors.role }}</div>
+            </div>
+
+            <div class="flex justify-end pt-4">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                    <Save class="w-5 h-5 relative z-10" />
+                    <span class="relative z-10">Save Changes</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</template>
diff --git a/resources/js/pages/Admin/Users/Index.vue b/resources/js/pages/Admin/Users/Index.vue
new file mode 100644
index 0000000..8500f3d
--- /dev/null
+++ b/resources/js/pages/Admin/Users/Index.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Head, Link, useForm } from '@inertiajs/vue3';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import { Plus, Edit2, Trash2 } from 'lucide-vue-next';
+
+defineProps<{
+    users: Array<{
+        id: number;
+        name: string;
+        email: string;
+        role: string;
+        created_at: string;
+    }>;
+}>();
+
+const form = useForm({});
+
+const deleteUser = (id: number) => {
+    if (confirm('Are you sure you want to delete this user?')) {
+        form.delete(`/admin/users/${id}`, {
+            preserveScroll: true,
+        });
+    }
+};
+</script>
+
+<template>
+    <Head title="Users" />
+    <AdminLayout>
+        <div class="max-w-6xl mx-auto space-y-6">
+            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+                <div>
+                    <h1 class="text-3xl font-black italic tracking-tighter text-white uppercase">User Management</h1>
+                    <p class="text-gray-400 text-sm">Manage admin and moderator accounts</p>
+                </div>
+                <Link
+                    href="/admin/users/create"
+                    class="group relative inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-bold rounded-xl overflow-hidden shadow-lg shadow-purple-500/20 hover:shadow-purple-500/40 transition-all duration-300"
+                >
+                    <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>
+                    <Plus class="w-5 h-5 relative z-10" />
+                    <span class="relative z-10">Add User</span>
+                </Link>
+            </div>
+
+            <div class="bg-[#0f172a] rounded-2xl border border-white/5 overflow-hidden shadow-xl">
+                <div class="overflow-x-auto">
+                    <table class="w-full text-left border-collapse">
+                        <thead>
+                            <tr class="bg-black/20 border-b border-white/5 text-gray-400 text-xs uppercase tracking-wider">
+                                <th class="p-4 font-bold">ID</th>
+                                <th class="p-4 font-bold">Name</th>
+                                <th class="p-4 font-bold">Email</th>
+                                <th class="p-4 font-bold">Role</th>
+                                <th class="p-4 font-bold text-right">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-white/5">
+                            <tr v-for="user in users" :key="user.id" class="hover:bg-white/[0.02] transition-colors">
+                                <td class="p-4 text-gray-500 font-mono text-sm">#{{ user.id }}</td>
+                                <td class="p-4 font-bold text-white">{{ user.name }}</td>
+                                <td class="p-4 text-gray-400">{{ user.email }}</td>
+                                <td class="p-4">
+                                    <span
+                                        :class="[
+                                            'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider',
+                                            user.role === 'admin' ? 'bg-red-500/20 text-red-400 border border-red-500/20' :
+                                            user.role === 'mod' ? 'bg-blue-500/20 text-blue-400 border border-blue-500/20' :
+                                            'bg-gray-500/20 text-gray-400 border border-gray-500/20'
+                                        ]"
+                                    >
+                                        {{ user.role }}
+                                    </span>
+                                </td>
+                                <td class="p-4 text-right space-x-2">
+                                    <Link
+                                        :href="`/admin/users/${user.id}/edit`"
+                                        class="inline-flex p-2 rounded-lg text-gray-400 hover:text-white hover:bg-white/10 transition-colors"
+                                        title="Edit"
+                                    >
+                                        <Edit2 class="w-4 h-4" />
+                                    </Link>
+                                    <button
+                                        @click="deleteUser(user.id)"
+                                        class="inline-flex p-2 rounded-lg text-gray-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                                        title="Delete"
+                                    >
+                                        <Trash2 class="w-4 h-4" />
+                                    </button>
+                                </td>
+                            </tr>
+                            <tr v-if="users.length === 0">
+                                <td colspan="5" class="p-8 text-center text-gray-500">
+                                    No users found.
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index 2981f7c..520c3b3 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -2,14 +2,13 @@
 import { Head } from '@inertiajs/vue3';
 import AppearanceTabs from '@/components/AppearanceTabs.vue';
 import Heading from '@/components/Heading.vue';
-import { edit } from '@/routes/appearance';
 
 defineOptions({
     layout: {
         breadcrumbs: [
             {
                 title: 'Appearance settings',
-                href: edit(),
+                href: '/settings/appearance',
             },
         ],
     },
diff --git a/routes/web.php b/routes/web.php
index e9be1d5..57923c9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -3,6 +3,7 @@
 use App\Http\Controllers\BonusController;
 use App\Http\Controllers\LiveStatusController;
 use App\Http\Controllers\TrackingController;
+use App\Http\Controllers\Admin\UserController;
 use App\Models\Bonus;
 use App\Models\BonusStat;
 use Carbon\Carbon;
@@ -146,6 +147,10 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::middleware(['can:manage-bonuses'])->prefix('admin')->name('admin.')->group(function () {
         Route::resource('bonuses', BonusController::class);
     });
+
+    Route::middleware(['can:manage-users'])->prefix('admin')->name('admin.')->group(function () {
+        Route::resource('users', UserController::class);
+    });
 });
 
 Route::get('/api/live-status', [LiveStatusController::class, '__invoke']);