diff --git a/app/Http/Controllers/Admin/Hr/EmployeeController.php b/app/Http/Controllers/Admin/Hr/EmployeeController.php
index 18ded31..49169ae 100644
--- a/app/Http/Controllers/Admin/Hr/EmployeeController.php
+++ b/app/Http/Controllers/Admin/Hr/EmployeeController.php
@@ -9,6 +9,7 @@
 use App\Http\Controllers\Concerns\ParsesDataTableQuery;
 use App\Http\Controllers\Controller;
 use App\Http\Requests\Admin\Hr\EmployeeRequest;
+use App\Http\Requests\Admin\ToggleStatusRequest;
 use App\Models\User;
 use App\Services\Hr\EmployeeService;
 use Illuminate\Http\RedirectResponse;
@@ -91,13 +92,9 @@ public function update(EmployeeRequest $request, User $user): RedirectResponse
         return redirect()->route('admin.hr.employees.index');
     }
 
-    public function toggleStatus(Request $request, User $user): RedirectResponse
+    public function toggleStatus(ToggleStatusRequest $request, User $user): RedirectResponse
     {
-        $validated = $request->validate([
-            'is_active' => ['required', 'boolean'],
-        ]);
-
-        $this->employeeService->toggleStatus($user, $validated['is_active']);
+        $this->employeeService->toggleStatus($user, $request->validated());
 
         $this->flashStatusUpdated('pegawai');
 
diff --git a/app/Services/Hr/EmployeeService.php b/app/Services/Hr/EmployeeService.php
index 8cdc121..b7e410c 100644
--- a/app/Services/Hr/EmployeeService.php
+++ b/app/Services/Hr/EmployeeService.php
@@ -35,22 +35,12 @@ public function paginateForIndex(
                         });
                 });
             })
-            ->when(
-                $role !== '',
-                fn ($query) => $query->whereHas('roles', fn ($query) => $query->where('name', $role))
-            )
-            ->when(
-                $gender !== '',
-                fn ($query) => $query->whereHas('profile', fn ($query) => $query->where('gender', $gender))
-            )
-            ->when(
-                $employmentStatus !== '',
-                fn ($query) => $query->whereHas('employee', fn ($query) => $query->where('employment_status', $employmentStatus))
-            )
-            ->when(
-                $isActive !== '',
-                fn ($query) => $query->where('is_active', $isActive === '1')
-            );
+            ->when($role !== '', fn ($query) => $query->whereHas('roles', fn ($query) => $query->where('name', $role)))
+            ->when($gender !== '', fn ($query) => $query->whereHas('profile', fn ($query) => $query->where('gender', $gender)))
+            ->when($employmentStatus !== '', function ($query) use ($employmentStatus): void {
+                $query->whereHas('employee', fn ($query) => $query->where('employment_status', $employmentStatus));
+            })
+            ->when($isActive !== '', fn ($query) => $query->where('is_active', $isActive === '1'));
 
         $this->applySorting($query, $tableQuery['sort'], $tableQuery['direction']);
 
@@ -144,12 +134,12 @@ public function update(User $user, array $validated): void
         });
     }
 
-    public function toggleStatus(User $user, bool $isActive): void
+    public function toggleStatus(User $user, array $validated): void
     {
-        $user->is_active = $isActive;
+        $user->is_active = $validated['is_active'];
         $user->save();
 
-        if (! $isActive) {
+        if (! $validated['is_active']) {
             DB::table('sessions')->where('user_id', $user->id)->delete();
         }
     }
diff --git a/resources/js/pages/admin/hr/employees/Create.vue b/resources/js/pages/admin/hr/employees/Create.vue
index f6fc343..6023f4b 100644
--- a/resources/js/pages/admin/hr/employees/Create.vue
+++ b/resources/js/pages/admin/hr/employees/Create.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Head, Link } from '@inertiajs/vue3';
 import { ArrowLeft } from '@lucide/vue';
-import EmployeeForm from '@/components/admin/hr/EmployeeForm.vue';
+import EmployeeForm from './form/EmployeeForm.vue';
 import { Button } from '@/components/ui/button';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import type { EnumOption } from '@/types/employee';
@@ -14,15 +14,12 @@ defineProps<{
 </script>
 
 <template>
-
     <Head title="Tambah Pegawai" />
 
     <AdminLayout>
         <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="space-y-1">
-                <h2 class="text-2xl font-bold tracking-tight">
-                    Tambah Pegawai
-                </h2>
+                <h2 class="text-2xl font-bold tracking-tight">Tambah Pegawai</h2>
             </div>
 
             <Button variant="outline" as-child class="shrink-0 self-start sm:self-center">
@@ -33,7 +30,6 @@ defineProps<{
             </Button>
         </div>
 
-        <EmployeeForm submit-url="/admin/hr/employees" method="post" submit-label="Simpan" :genders="genders"
-            :employment-statuses="employmentStatuses" :roles="roles" />
+        <EmployeeForm :genders="genders" :employment-statuses="employmentStatuses" :roles="roles" />
     </AdminLayout>
 </template>
diff --git a/resources/js/pages/admin/hr/employees/Edit.vue b/resources/js/pages/admin/hr/employees/Edit.vue
index 80c061b..e65da67 100644
--- a/resources/js/pages/admin/hr/employees/Edit.vue
+++ b/resources/js/pages/admin/hr/employees/Edit.vue
@@ -2,7 +2,7 @@
 import { Head, Link } from '@inertiajs/vue3';
 import { ArrowLeft } from '@lucide/vue';
 import { computed } from 'vue';
-import EmployeeForm from '@/components/admin/hr/EmployeeForm.vue';
+import EmployeeForm from './form/EmployeeForm.vue';
 import { Button } from '@/components/ui/button';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import type { EmployeeListItem, EnumOption } from '@/types/employee';
diff --git a/resources/js/pages/admin/hr/employees/Index.vue b/resources/js/pages/admin/hr/employees/Index.vue
index 31b8b10..4009311 100644
--- a/resources/js/pages/admin/hr/employees/Index.vue
+++ b/resources/js/pages/admin/hr/employees/Index.vue
@@ -2,12 +2,15 @@
 import { Head, Link } from '@inertiajs/vue3';
 import { Plus } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
-import { columns } from '@/components/admin/hr/employees/columns';
+import { columns } from './table/columns';
 import { DataTable } from '@/components/data-table';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/composables/useCan';
-import { useDataTableQuery, useDataTableQuerySync } from '@/composables/useDataTableQuery';
+import {
+    useDataTableQuery,
+    useDataTableQuerySync,
+} from '@/composables/useDataTableQuery';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import type { DataTableFilterDef, DataTableSort } from '@/types/data-table';
 import type { EnumOption, PaginatedEmployees } from '@/types/employee';
@@ -107,15 +110,12 @@ watch(
 </script>
 
 <template>
-
     <Head title="Pegawai" />
 
     <AdminLayout>
         <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
             <div class="space-y-1">
-                <h2 class="text-2xl font-bold tracking-tight">
-                    Pegawai
-                </h2>
+                <h2 class="text-2xl font-bold tracking-tight">Pegawai</h2>
             </div>
 
             <Button v-if="can('employees.create')" as-child class="shrink-0 self-start sm:self-center">
@@ -128,10 +128,19 @@ watch(
 
         <Card class="min-w-0">
             <CardContent class="min-w-0">
-                <DataTable v-model:search="search" :columns="columns" :data="employees.data" :pagination="pagination"
-                    :pagination-links="employees.links" :sort="currentSort" :filter-defs="filterDefs"
-                    :filter-values="filterValues" @sort-change="setSort" @filter-change="setFilter"
-                    @filters-reset="resetFilters" />
+                <DataTable
+                    v-model:search="search"
+                    :columns="columns"
+                    :data="employees.data"
+                    :pagination="pagination"
+                    :pagination-links="employees.links"
+                    :sort="currentSort"
+                    :filter-defs="filterDefs"
+                    :filter-values="filterValues"
+                    @sort-change="setSort"
+                    @filter-change="setFilter"
+                    @filters-reset="resetFilters"
+                />
             </CardContent>
         </Card>
     </AdminLayout>
diff --git a/resources/js/components/admin/hr/EmployeeForm.vue b/resources/js/pages/admin/hr/employees/form/EmployeeForm.vue
similarity index 100%
rename from resources/js/components/admin/hr/EmployeeForm.vue
rename to resources/js/pages/admin/hr/employees/form/EmployeeForm.vue
diff --git a/resources/js/components/admin/hr/ResetPasswordDialog.vue b/resources/js/pages/admin/hr/employees/form/ResetPasswordDialog.vue
similarity index 100%
rename from resources/js/components/admin/hr/ResetPasswordDialog.vue
rename to resources/js/pages/admin/hr/employees/form/ResetPasswordDialog.vue
diff --git a/resources/js/components/admin/hr/employees/columns.ts b/resources/js/pages/admin/hr/employees/table/columns.ts
similarity index 95%
rename from resources/js/components/admin/hr/employees/columns.ts
rename to resources/js/pages/admin/hr/employees/table/columns.ts
index a256dd4..2580639 100644
--- a/resources/js/components/admin/hr/employees/columns.ts
+++ b/resources/js/pages/admin/hr/employees/table/columns.ts
@@ -1,10 +1,10 @@
 import type { ColumnDef } from '@tanstack/vue-table';
 import { h } from 'vue';
-import DataTableActions from '@/components/admin/hr/employees/data-table-actions.vue';
-import EmployeeStatusToggle from '@/components/admin/hr/employees/employee-status-toggle.vue';
 import { DataTableColumnHeader } from '@/components/data-table';
 import { Badge } from '@/components/ui/badge';
 import type { EmployeeListItem } from '@/types/employee';
+import DataTableActions from './data-table-actions.vue';
+import EmployeeStatusToggle from './employee-status-toggle.vue';
 
 export const columns: ColumnDef<EmployeeListItem>[] = [
     {
diff --git a/resources/js/components/admin/hr/employees/data-table-actions.vue b/resources/js/pages/admin/hr/employees/table/data-table-actions.vue
similarity index 100%
rename from resources/js/components/admin/hr/employees/data-table-actions.vue
rename to resources/js/pages/admin/hr/employees/table/data-table-actions.vue
diff --git a/resources/js/components/admin/hr/employees/employee-status-toggle.vue b/resources/js/pages/admin/hr/employees/table/employee-status-toggle.vue
similarity index 100%
rename from resources/js/components/admin/hr/employees/employee-status-toggle.vue
rename to resources/js/pages/admin/hr/employees/table/employee-status-toggle.vue