diff --git a/app/Http/Controllers/Api/GlobalSettingsController.php b/app/Http/Controllers/Api/GlobalSettingsController.php
index fe1d87d..ffefe0b 100644
--- a/app/Http/Controllers/Api/GlobalSettingsController.php
+++ b/app/Http/Controllers/Api/GlobalSettingsController.php
@@ -34,7 +34,7 @@ class GlobalSettingsController extends Controller
         try {
             $data = GlobalSetting::create($request->validated());
             return new GlobalSettingResource($data);
-        } catch (\Exception $e) {
+        } catch (Exception $e) {
             return $this->resError($e->getMessage(), null, $e->getCode());
         }
     }
diff --git a/app/Http/Controllers/Api/TaskAssignmentsController.php b/app/Http/Controllers/Api/TaskAssignmentsController.php
new file mode 100644
index 0000000..2a3b623
--- /dev/null
+++ b/app/Http/Controllers/Api/TaskAssignmentsController.php
@@ -0,0 +1,64 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Http\Resources\TaskAssignmentsResource;
+use App\Models\TaskAssignment;
+use Illuminate\Http\Request;
+
+class TaskAssignmentsController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request, $uuid)
+    {
+        try{
+            $query = TaskAssignment::query()
+            ->where('pbg_task_uid', $uuid)
+                ->orderBy('id', 'desc');
+
+            if ($request->filled('search')) {
+                $query->where('name', 'like', "%{$request->get('search')}%")
+                ->orWhere('email', 'like', "%{$request->get('search')}%");
+            }
+
+            return TaskAssignmentsResource::collection($query->paginate(config('app.paginate_per_page', 50)));
+        }catch(\Exception $exception){
+            return response()->json(['message' => $exception->getMessage()], 500);
+        }
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}
diff --git a/app/Http/Controllers/RequestAssignment/PbgTaskController.php b/app/Http/Controllers/RequestAssignment/PbgTaskController.php
index a72e44f..b19b8f7 100644
--- a/app/Http/Controllers/RequestAssignment/PbgTaskController.php
+++ b/app/Http/Controllers/RequestAssignment/PbgTaskController.php
@@ -37,7 +37,7 @@ class PbgTaskController extends Controller
      */
     public function show(string $id)
     {
-        $data = PbgTask::with(['pbg_task_retributions','pbg_task_index_integrations', 'pbg_task_retributions.pbg_task_prasarana', 'taskAssignments'])->findOrFail($id);
+        $data = PbgTask::with(['pbg_task_retributions','pbg_task_index_integrations', 'pbg_task_retributions.pbg_task_prasarana'])->findOrFail($id);
         return view("pbg_task.show", compact("data"));
     }
 
diff --git a/app/Http/Resources/TaskAssignmentsResource.php b/app/Http/Resources/TaskAssignmentsResource.php
new file mode 100644
index 0000000..03f5625
--- /dev/null
+++ b/app/Http/Resources/TaskAssignmentsResource.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Resources;
+
+use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class TaskAssignmentsResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @return array<string, mixed>
+     */
+    public function toArray(Request $request): array
+    {
+        return parent::toArray($request);
+    }
+}
diff --git a/resources/js/pbg-task/show.js b/resources/js/pbg-task/show.js
new file mode 100644
index 0000000..a583a5a
--- /dev/null
+++ b/resources/js/pbg-task/show.js
@@ -0,0 +1,69 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+
+class PbgTaskAssignments {
+    init() {
+        this.initTablePbgTaskAssignments();
+    }
+
+    initTablePbgTaskAssignments() {
+        let tableContainer = document.getElementById(
+            "table-pbg-task-assignments"
+        );
+
+        let uuid = document.getElementById("uuid").value;
+
+        new Grid({
+            columns: [
+                "ID",
+                "Nama",
+                "Email",
+                "Nomor Telepon",
+                "Keahlian",
+                "Status",
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+                debounceTimeout: 1000,
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/task-assignments/${uuid}`,
+                credentials: "include",
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.name,
+                        item.email,
+                        item.phone_number,
+                        item.expertise,
+                        item.status_name,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new PbgTaskAssignments().init();
+});
diff --git a/resources/views/pbg_task/show.blade.php b/resources/views/pbg_task/show.blade.php
index 8b18768..fec50c9 100644
--- a/resources/views/pbg_task/show.blade.php
+++ b/resources/views/pbg_task/show.blade.php
@@ -1,6 +1,7 @@
 @extends('layouts.vertical', ['subtitle' => 'Detail'])
 
 @section('css')
+@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
 @endsection
 
 @section('content')
@@ -252,38 +253,8 @@
                         </div>
                     </div>
                     <div class="tab-pane" id="pbgTaskAssignments">
-                        @if ($data->taskAssignments && $data->taskAssignments->isNotEmpty())
-                            @foreach ($data->taskAssignments  as $task_assignment)
-                                <div class="border p-3 rounded shadow-sm col-md-4">
-                                    <div class="mb-3">
-                                        <dt>Nama</dt>
-                                        <dd>{{$task_assignment->name}}</dd>
-                                    </div>
-                                    <div class="mb-3">
-                                        <dt>Email</dt>
-                                        <dd>{{$task_assignment->email}}</dd>
-                                    </div>
-                                    <div class="mb-3">
-                                        <dt>Nomor Telepon</dt>
-                                        <dd>{{$task_assignment->phone_number}}</dd>
-                                    </div>
-                                    <div class="mb-3">
-                                        <dt>Keahlian</dt>
-                                        <dd>{{$task_assignment->expertise}}</dd>
-                                    </div>
-                                    <div class="mb-3">
-                                        <dt>Status</dt>
-                                        <dd>{{$task_assignment->status_name}}</dd>
-                                    </div>
-                                </div>
-                            @endforeach
-                        @else
-                            <div class="row">
-                                <div class="col-md-12">
-                                    Data Not Available
-                                </div>
-                            </div>
-                        @endif
+                        <input type="hidden" id="uuid" value="{{ $data->uuid }}" />
+                        <div id="table-pbg-task-assignments"></div>
                     </div>
                 </div>
             </div>
@@ -294,4 +265,5 @@
 @endsection
 
 @section('scripts')
+@vite(['resources/js/pbg-task/show.js'])
 @endsection
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 4f53238..f8f72db 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -15,6 +15,7 @@ use App\Http\Controllers\Api\RequestAssignmentController;
 use App\Http\Controllers\Api\RolesController;
 use App\Http\Controllers\Api\ScrapingController;
 use App\Http\Controllers\Api\SpatialPlanningsController;
+use App\Http\Controllers\Api\TaskAssignmentsController;
 use App\Http\Controllers\Api\UsersController;
 use App\Http\Controllers\Settings\SyncronizeController;
 use App\Http\Controllers\Api\AdvertisementController;
@@ -140,4 +141,9 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
         Route::get('/bigdata-resume', 'index')->name('api.bigdata-resume');
         Route::get('/bigdata-report', 'bigdata_report')->name('api.bigdata-report');
     });
+
+    // task-assignments
+    Route::controller(TaskAssignmentsController::class)->group(function (){
+        Route::get('/task-assignments/{uuid}', 'index')->name('api.task-assignments');
+    });
 });
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 30c8d8a..6e46382 100755
--- a/vite.config.js
+++ b/vite.config.js
@@ -48,7 +48,6 @@ export default defineConfig({
 
                 //js-additional
                 "resources/js/settings/syncronize/syncronize.js",
-                "resources/js/pbg-task/index.js",
                 "resources/js/settings/general/general-settings.js",
                 "resources/js/tables/common-table.js",
 
@@ -102,6 +101,9 @@ export default defineConfig({
                 "resources/js/bigdata-resumes/index.js",
                 "resources/js/chatbot/index.js",
                 "resources/js/chatbot-pimpinan/index.js",
+                //pbg-task
+                "resources/js/pbg-task/index.js",
+                "resources/js/pbg-task/show.js",
             ],
             refresh: true,
         }),