diff --git a/app/Http/Controllers/Admin/Manage/TransactionController.php b/app/Http/Controllers/Admin/Manage/TransactionController.php
index e2f6120..d68161a 100644
--- a/app/Http/Controllers/Admin/Manage/TransactionController.php
+++ b/app/Http/Controllers/Admin/Manage/TransactionController.php
@@ -13,24 +13,61 @@
 use Illuminate\Contracts\View\View;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Storage;
+use Yajra\DataTables\Facades\DataTables;
 
 class TransactionController extends Controller
 {
     use DeleteAttachment, UploadAttachment;
 
-    public function index(): View
+    public function index(Request $request): View|JsonResponse
     {
-        return view('pages.admin.manage.transaction.index', [
-            'pageTitle' => 'Transaksi',
-            'transactions' => Transaction::with(['user', 'user.biography', 'cashier', 'cashier.biography', 'customer', 'service', 'barbershop'])
+        if ($request->ajax()) {
+            $transactions = Transaction::with(['user', 'user.biography', 'cashier', 'cashier.biography', 'customer', 'service', 'barbershop'])
                 ->barbershop()
                 ->when(auth()->user()->role_id === 5, function ($query) {
                     return $query->where('user_id', auth()->id());
+                });
+
+            return DataTables::eloquent($transactions)
+                ->addIndexColumn()
+                ->editColumn('created_at', function ($item) {
+                    return formatDateIndo($item->created_at);
                 })
-                ->latest()
-                ->get(),
+                ->editColumn('payment_method', function ($item) {
+                    switch ($item->payment_method) {
+                        case '1':
+                            return '<span class="badge badge-primary">Tunai</span>';
+                        case '2':
+                            return '<span class="badge badge-info">Qris</span>';
+                        case '2':
+                            return '<span class="badge badge-success">Lainnya</span>';
+
+                        default:
+                            return '<span class="badge badge-danger">Tidak Diketahui</span>';
+                    }
+                })
+                ->addColumn('image', function ($item) {
+                    if ($item->attachment && $item->attachment->formatted_attachment) {
+                        $imageUrl = Storage::url("transactions/{$item->attachment->formatted_attachment}");
+
+                        return '<a href="'.$imageUrl.'" ><img src="'.$imageUrl.'" alt="Check-in Image" height="77" width="77"></a>';
+                    }
+
+                    return '-';
+                })
+                ->addColumn('actions', function ($item) {
+                    return view('partials.admin._actions', ['item' => $item]);
+                })
+                ->rawColumns(['payment_method', 'image', 'actions'])
+                ->make();
+        }
+
+        return view('pages.admin.manage.transaction.index', [
+            'pageTitle' => 'Transaksi',
         ]);
     }
 
diff --git a/app/Models/Transaction.php b/app/Models/Transaction.php
index a58668e..861136e 100644
--- a/app/Models/Transaction.php
+++ b/app/Models/Transaction.php
@@ -30,7 +30,7 @@ class Transaction extends Model
 
     public function scopeBarbershop(Builder $query): Builder
     {
-        return $query->where('barbershop_id', Auth::user()->barbershop_id);
+        return $query->where('transactions.barbershop_id', Auth::user()->barbershop_id);
     }
 
     public function scopeToday(Builder $query): Builder
diff --git a/public/assets/admin/js/datatable/custom-table/transaction.js b/public/assets/admin/js/datatable/custom-table/transaction.js
new file mode 100644
index 0000000..c84a903
--- /dev/null
+++ b/public/assets/admin/js/datatable/custom-table/transaction.js
@@ -0,0 +1,27 @@
+window.columns = [
+    {
+        data: 'DT_RowIndex',
+        orderable: false,
+        searchable: false
+    },
+    {
+        data: 'cashier.biography.full_name',
+    },
+    {
+        data: 'user.biography.full_name',
+    },
+    { data: 'customer.name' },
+    { data: 'service.name' },
+    { data: 'price' },
+    { data: 'discount' },
+    { data: 'total' },
+    { data: 'payment_method' },
+    {
+        data: 'image',
+        orderable: false,
+        searchable: false
+
+    },
+    { data: 'created_at' },
+    { data: 'actions' },
+];
diff --git a/resources/views/pages/admin/manage/transaction/index.blade.php b/resources/views/pages/admin/manage/transaction/index.blade.php
index 6e6bc94..0d1890f 100644
--- a/resources/views/pages/admin/manage/transaction/index.blade.php
+++ b/resources/views/pages/admin/manage/transaction/index.blade.php
@@ -16,7 +16,7 @@
                 <div class="card">
                     <div class="card-body">
                         <div class="table-responsive">
-                            <table class="display" id="datatable">
+                            <table class="display" id="datatable" data-ajax="{{ url(url()->current()) }}">
                                 <thead>
                                     <tr>
                                         <th>No</th>
@@ -30,88 +30,10 @@
                                         <th>Metode Pembayaran</th>
                                         <th>Gambar</th>
                                         <th>Tanggal</th>
-                                        @if (in_array(auth()->user()->role_id, [1, 3, 4]))
-                                            <th>Aksi</th>
-                                        @endif
+                                        <th>Aksi</th>
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    @foreach ($transactions as $transaction)
-                                        <tr>
-                                            <td>{{ $loop->iteration }}</td>
-                                            <td>{{ $transaction->cashier->biography->full_name ?? '-deleted-' }}</td>
-                                            <td>{{ $transaction->user->biography->full_name ?? '-deleted-' }}</td>
-                                            <td>{{ $transaction->customer->name }}</td>
-                                            <td>{{ $transaction->service->name }}</td>
-                                            <td>{{ formatToRupiah($transaction->price) }}</td>
-                                            <td>{{ formatToRupiah($transaction->discount) }}</td>
-                                            <td>{{ formatToRupiah($transaction->total) }}</td>
-                                            <td>
-                                                @if ($transaction->payment_method === '1')
-                                                    <span class="badge badge-primary">Tunai</span>
-                                                @elseif($transaction->payment_method === '2')
-                                                    <span class="badge badge-info">Qris</span>
-                                                @elseif($transaction->payment_method === '3')
-                                                    <span class="badge badge-success">Lainnya</span>
-                                                @else
-                                                    <span class="badge badge-danger">Tidak Diketahui</span>
-                                                @endif
-                                            </td>
-                                            <td>
-                                                @if ($transaction->attachment && $transaction->attachment->formatted_attachment)
-                                                    <a
-                                                        href="{{ Storage::url("transactions/{$transaction->attachment->formatted_attachment}") }}">
-                                                        <img src="{{ Storage::url("transactions/{$transaction->attachment->formatted_attachment}") }}"
-                                                            alt="{{ $transaction->name }}" width="77" height="77">
-                                                    </a>
-                                                @else
-                                                    <a href="{{ asset('assets/images/no-imge.png') }}">
-                                                        <img src="{{ asset('assets/images/no-imge.png') }}"
-                                                            alt="Default Image" style="width: 77px; height: 77px">
-                                                    </a>
-                                                @endif
-                                            </td>
-                                            <td>{{ formatDateIndo($transaction->created_at) }}</td>
-                                            @if (in_array(auth()->user()->role_id, [1, 3, 4]))
-                                                <td>
-                                                    <ul class="action">
-                                                        <li class="show">
-                                                            <a href="javascript:void(0)" data-bs-toggle="modal"
-                                                                data-bs-target="#createModal"
-                                                                data-modal-title="Print Transaksi"
-                                                                data-url="{{ route('manage.transaction.print', encryptId($transaction->id)) }}"
-                                                                data-method="post" data-bs-toggle="tooltip"
-                                                                data-bs-placement="left" data-bs-title="Print">
-                                                                <i data-feather="printer"></i>
-                                                            </a>
-                                                        </li>
-                                                        <li class="edit">
-                                                            <a href="{{ route('manage.transaction.edit', encryptId($transaction->id)) }}"
-                                                                data-bs-toggle="tooltip" data-bs-placement="left"
-                                                                data-bs-title="Edit">
-                                                                <i data-feather="edit"></i>
-                                                            </a>
-                                                        </li>
-                                                        @if (auth()->user()->role_id === 1)
-                                                            <li class="delete">
-                                                                <form
-                                                                    action="{{ route('manage.transaction.delete', encryptId($transaction->id)) }}"
-                                                                    method="post">
-                                                                    @csrf
-                                                                    @method('delete')
-                                                                    <a href="javascript:void(0)" class="delete-data"
-                                                                        data-bs-toggle="tooltip" data-bs-placement="left"
-                                                                        data-bs-title="Hapus">
-                                                                        <i data-feather="trash-2"></i>
-                                                                    </a>
-                                                                </form>
-                                                            </li>
-                                                        @endif
-                                                    </ul>
-                                                </td>
-                                            @endif
-                                        </tr>
-                                    @endforeach
                                 </tbody>
                             </table>
                         </div>
@@ -200,8 +122,14 @@
         let userRole = {!! auth()->user()->role_id !!};
     </script>
     <script src="{{ asset('assets/admin/js/datatable/jquery.dataTables.min.js?ver=1.0.0') }}"></script>
-    <script src="{{ asset('assets/admin/js/datatable/client-side.js?ver=1.0.0') }}"></script>
+    <script src="{{ asset('assets/admin/js/datatable/custom-table/transaction.js?ver=1.0.0') }}"></script>
+    <script src="{{ asset('assets/admin/js/datatable/server-side.js?ver=1.0.1') }}"></script>
     <script src="{{ asset('assets/js/interactions/confirmation.js?ver=1.0.0') }}"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <script src="{{ asset('assets/admin/js/custom/transaction.js?ver=1.0.0') }}"></script>
+    <script>
+        $('#datatable').on('draw.dt', function() {
+            feather.replace();
+        });
+    </script>
 @endsection
diff --git a/resources/views/partials/admin/_actions.blade.php b/resources/views/partials/admin/_actions.blade.php
new file mode 100644
index 0000000..1bfb374
--- /dev/null
+++ b/resources/views/partials/admin/_actions.blade.php
@@ -0,0 +1,32 @@
+@if (in_array(auth()->user()->role_id, [1, 3, 4]))
+    <td>
+        <ul class="action">
+            <li class="show">
+                <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#createModal"
+                    data-modal-title="Print Transaksi"
+                    data-url="{{ route('manage.transaction.print', encryptId($item->id)) }}" data-method="post"
+                    data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Print">
+                    <i data-feather="printer"></i>
+                </a>
+            </li>
+            <li class="edit">
+                <a href="{{ route('manage.transaction.edit', encryptId($item->id)) }}" data-bs-toggle="tooltip"
+                    data-bs-placement="left" data-bs-title="Edit">
+                    <i data-feather="edit"></i>
+                </a>
+            </li>
+            @if (auth()->user()->role_id === 1)
+                <li class="delete">
+                    <form action="{{ route('manage.transaction.delete', encryptId($item->id)) }}" method="post">
+                        @csrf
+                        @method('delete')
+                        <a href="javascript:void(0)" class="delete-data" data-bs-toggle="tooltip"
+                            data-bs-placement="left" data-bs-title="Hapus">
+                            <i data-feather="trash-2"></i>
+                        </a>
+                    </form>
+                </li>
+            @endif
+        </ul>
+    </td>
+@endif