diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 4794ff5..627a4c1 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Pagination\Paginator;
 use Illuminate\Support\Facades\Vite;
 use Illuminate\Support\ServiceProvider;
 
@@ -20,6 +21,7 @@ public function register(): void
      */
     public function boot(): void
     {
+        Paginator::useBootstrapFive();
         Vite::useStyleTagAttributes(function (?string $src, string $url, ?array $chunk, ?array $manifest) {
             if ($src !== null) {
                 return [
diff --git a/resources/views/staff/studies/index.blade.php b/resources/views/staff/studies/index.blade.php
index 527df80..c15e4f2 100644
--- a/resources/views/staff/studies/index.blade.php
+++ b/resources/views/staff/studies/index.blade.php
@@ -1,122 +1,170 @@
-<x-app-layout>
-    <x-slot name="header">
-        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
-            {{ __('Dashboard') }}
-        </h2>
-    </x-slot>
+@extends('layouts/layoutMaster')
 
-    <div class="py-12">
-        <div class="max-w-9xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg mb-4">
+@section('title', 'Studies List')
 
-                <table class="min-w-full divide-y divide-gray-200">
-                    <thead class="bg-gray-50">
-                    <tr>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Accession Number
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Patient ID
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Patient Name
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Patient Sex
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Patient Birth Date
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Modality
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Study
-                            Date
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Receive Date
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Series
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            Institute Name
-                        </th>
-                        <th scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            &nbsp;
-                        </th>
-                    </tr>
-                    </thead>
-                    <tbody class="bg-white divide-y divide-gray-200">
-                    @foreach($studies as $study)
-                        <tr>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->accession_number }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                <a href="{{ $study->getMetadataLink() }}">
-                                    {{ $study->patient_id }}
-                                </a>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                <a href="{{ $study->getHistoryLink() }}">
-                                    {{ $study->patient_name }}
-                                </a>
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->patient_sex }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->patient_birthdate }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->study_modality }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->study_date }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->received_at }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->image_count }}
-                                / {{ $study->series_count }}</td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $study->institution_name }}</td>
+@section('vendor-style')
+    @vite([
+      'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
+      'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
+      'resources/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.scss',
+      'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss'
+    ])
+@endsection
 
-                            <td>
-                                @can(\App\Models\Enums\Permission::StudyDownload)
-                                    <a target="_blank"
-                                       href="{{ \App\Services\Pacs\PacsUrlGen::stoneViewer($study->study_instance_uid) }}">St</a>
-                                    |
-                                    <a target="_blank"
-                                       href="{{ \App\Services\Pacs\PacsUrlGen::ohifViewer($study->study_instance_uid) }}">OHF</a>
-                                    @if($study->image_count > 1 && $study->study_modality != 'CR')
-                                        |
-                                        <a target="_blank"
-                                           href="{{ \App\Services\Pacs\PacsUrlGen::ohifViewerMpr($study->study_instance_uid) }}">MPR</a>
-                                        |
-                                        <a target="_blank" class="btn"
-                                           href="{{ \App\Services\Pacs\PacsUrlGen::ohifSegmentation($study->study_instance_uid) }}">SEG</a>
-                                    @endif
-                                    |
-                                    <a target="_blank" class="btn"
-                                       href="{{ \App\Services\Pacs\PacsUrlGen::archive($study->orthanc_uuid) }}">ZIP</a>
-                                    |
-                                @endcan
+@section('vendor-script')
+    @vite([
+      'resources/assets/vendor/libs/moment/moment.js',
+      'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js'
+    ])
+@endsection
 
-                                @can(\App\Models\Enums\Permission::ReportCreate)
-                                    <a target="_blank" class="btn"
-                                       href="{{ route('radiologist.report-write', $study->id) }}">TXT</a>
-                                @endcan
-                            </td>
-                        </tr>
-                    @endforeach
-                    </tbody>
-                </table>
+@section('page-script')
+    @vite('resources/assets/js/app-invoice-list.js')
+@endsection
 
-                <div class="mb-4 me-4">
-                    {!! $studies->links() !!}
+@section('content')
+    <!-- Invoice List Widget -->
+
+    <div class="card mb-6">
+        <div class="card-widget-separator-wrapper">
+            <div class="card-body card-widget-separator">
+                <div class="row gy-4 gy-sm-1">
+                    <div class="col-sm-6 col-lg-3">
+                        <div
+                            class="d-flex justify-content-between align-items-start card-widget-1 border-end pb-4 pb-sm-0">
+                            <div>
+                                <h4 class="mb-0">24</h4>
+                                <p class="mb-0">Clients</p>
+                            </div>
+                            <div class="avatar me-sm-6">
+              <span class="avatar-initial rounded-3">
+                <i class="ri-user-line text-heading ri-26px"></i>
+              </span>
+                            </div>
+                        </div>
+                        <hr class="d-none d-sm-block d-lg-none me-6">
+                    </div>
+                    <div class="col-sm-6 col-lg-3">
+                        <div
+                            class="d-flex justify-content-between align-items-start card-widget-2 border-end pb-4 pb-sm-0">
+                            <div>
+                                <h4 class="mb-0">165</h4>
+                                <p class="mb-0">Invoices</p>
+                            </div>
+                            <div class="avatar me-lg-6">
+              <span class="avatar-initial rounded-3">
+                <i class="ri-pages-line text-heading ri-26px"></i>
+              </span>
+                            </div>
+                        </div>
+                        <hr class="d-none d-sm-block d-lg-none">
+                    </div>
+                    <div class="col-sm-6 col-lg-3">
+                        <div
+                            class="d-flex justify-content-between align-items-start border-end pb-4 pb-sm-0 card-widget-3">
+                            <div>
+                                <h4 class="mb-0">$2.46k</h4>
+                                <p class="mb-0">Paid</p>
+                            </div>
+                            <div class="avatar me-sm-6">
+              <span class="avatar-initial rounded-3">
+                <i class="ri-wallet-line text-heading ri-26px"></i>
+              </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-6 col-lg-3">
+                        <div class="d-flex justify-content-between align-items-start">
+                            <div>
+                                <h4 class="mb-0">$876</h4>
+                                <p class="mb-0">Unpaid</p>
+                            </div>
+                            <div class="avatar">
+              <span class="avatar-initial rounded-3">
+                <i class="ri-money-dollar-circle-line text-heading ri-26px"></i>
+              </span>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-
             </div>
         </div>
     </div>
-</x-app-layout>
+
+    <!-- Invoice List Table -->
+    <div class="card">
+        <div class="card-datatable table-responsive">
+            <table class="invoice-list-table table">
+                <thead>
+                <tr>
+                    <th>Accession Number</th>
+                    <th>Patient ID</th>
+                    <th>Patient Name</th>
+                    <th>Patient Sex</th>
+                    <th>Patient Birth Date</th>
+                    <th>Modality</th>
+                    <th>Study Date</th>
+                    <th>Receive Date</th>
+                    <th>Series</th>
+                    <th>Institute Name</th>
+                    <th class="cell-fit">&nbsp;</th>
+                </tr>
+                </thead>
+                <tbody>
+                @foreach($studies as $study)
+                    <tr>
+                        <td>{{ $study->accession_number }}</td>
+                        <td>
+                            <a href="{{ $study->getMetadataLink() }}">
+                                {{ $study->patient_id }}
+                            </a>
+                        </td>
+                        <td>
+                            <a href="{{ $study->getHistoryLink() }}">
+                                {{ $study->patient_name }}
+                            </a>
+                        </td>
+                        <td>{{ $study->patient_sex }}</td>
+                        <td>{{ $study->patient_birthdate }}</td>
+                        <td>{{ $study->study_modality }}</td>
+                        <td>{{ $study->study_date }}</td>
+                        <td>{{ $study->received_at }}</td>
+                        <td>{{ $study->image_count }} / {{ $study->series_count }}</td>
+                        <td>{{ $study->institution_name }}</td>
+                        <td>
+                            @can(\App\Models\Enums\Permission::StudyDownload)
+                                <a target="_blank"
+                                   href="{{ \App\Services\Pacs\PacsUrlGen::stoneViewer($study->study_instance_uid) }}">St</a>
+                                |
+                                <a target="_blank"
+                                   href="{{ \App\Services\Pacs\PacsUrlGen::ohifViewer($study->study_instance_uid) }}">OHF</a>
+                                @if($study->image_count > 1 && $study->study_modality != 'CR')
+                                    |
+                                    <a target="_blank"
+                                       href="{{ \App\Services\Pacs\PacsUrlGen::ohifViewerMpr($study->study_instance_uid) }}">MPR</a>
+                                    |
+                                    <a target="_blank" class="btn"
+                                       href="{{ \App\Services\Pacs\PacsUrlGen::ohifSegmentation($study->study_instance_uid) }}">SEG</a>
+                                @endif
+                                |
+                                <a target="_blank" class="btn"
+                                   href="{{ \App\Services\Pacs\PacsUrlGen::archive($study->orthanc_uuid) }}">ZIP</a>
+                                |
+                            @endcan
+
+                            @can(\App\Models\Enums\Permission::ReportCreate)
+                                <a target="_blank" class="btn"
+                                   href="{{ route('radiologist.report-write', $study->id) }}">TXT</a>
+                            @endcan
+                        </td>
+                    </tr>
+                @endforeach
+                </tbody>
+            </table>
+            <div class="mb-4 me-4">
+                {!! $studies->links() !!}
+            </div>
+
+        </div>
+    </div>
+@endsection