diff --git a/app/Models/transaction.php b/app/Models/transaction.php
index d19c5748..1ee80ac1 100644
--- a/app/Models/transaction.php
+++ b/app/Models/transaction.php
@@ -7,6 +7,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class transaction
 {
+
    private static $list_transaction =[
         [
             "orderId" => "INV-1234",
@@ -74,4 +75,4 @@ class transaction
             {
                 return self::$detail_transaction;
             }
-}
+}
\ No newline at end of file
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index f646474a..d71a43e6 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -931,7 +931,7 @@ select.form-control:not([size]):not([multiple]) {
 .card .card-header h4+.card-header-action .btn.active,
 .card .card-header h4+.card-header-form .btn.active {
     box-shadow: 0 2px 6px #acb5f6;
-    background-color: #900C3F;
+    background-color: #6777ef;
     color: #fff;
 }
 
@@ -1022,7 +1022,7 @@ select.form-control:not([size]):not([multiple]) {
 }
 
 .card.card-primary {
-    border-top: 2px solid #900C3F;
+    border-top: 2px solid #6777ef;
 }
 
 .card.card-secondary {
@@ -1051,7 +1051,7 @@ select.form-control:not([size]):not([multiple]) {
 
 .card.card-hero .card-header {
     padding: 40px;
-    background-image: linear-gradient(to bottom, #9f202f, #f4959a);
+    background-image: linear-gradient(to bottom, #6777ef, #95a0f4);
     color: #fff;
     overflow: hidden;
     height: auto;
@@ -1081,6 +1081,7 @@ select.form-control:not([size]):not([multiple]) {
 .card.card-hero .card-header .card-icon .fab,
 .card.card-hero .card-header .card-icon .fal {
     font-size: 140px;
+
 }
 
 .card.card-statistic-1 .card-header,
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index b0ebb9e5..e8e634a4 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -109,9 +109,31 @@
                         <div class="card-header">
                             <h2>History Transaction</h2>
                         </div>
-                        <div class="card-body p-0">
-                            <div class="table-responsive table-invoice">
-                                <table class="table table-striped">
+                        <div class="d-flex justify-content-between align-items-center p-4">
+                            <div class="d-flex align-items-center">
+                                <span class="mb-0 ml-2">Show:</span>
+                                <select class="form-select ml-2">
+                                    <option>10</option>
+                                    <option>25</option>
+                                    <option>50</option>
+                                    <option>100</option>
+                                </select>
+                                <span class="ml-2">entries</span>
+                            </div>
+                            <div class="float-right">
+                                <form>
+                                    <div class="input-group">
+                                        <input type="text" class="form-control" placeholder="Search">
+                                        <div class="input-group-append">
+                                            <button class="btn btn-primary"><i class="fas fa-search"></i></button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                        <div class="card-body">
+                            <div class="table-responsive">
+                                <table class="table table-bordered table-md">
                                     <tr>
                                         <th>Order ID</th>
                                         <th>Customer</th>
@@ -132,19 +154,18 @@
                                                 <div class="badge badge-success">{{ $transactions['status'] }}</div>
                                             </td>
                                             <td>
-                                                <a href="/Detail_History" class="btn btn-primary">Detail</a>
+                                                <a href="#" data-toggle="modal" data-target="#ModalTransaction"
+                                                    class="btn btn-primary">Detail</a>
                                             </td>
-
                                         </tr>
                                     @endforeach
-
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
-
             </div>
         </section>
     </div>
+    @include('transaction.Detail_History_Transaction')
 @endsection
diff --git a/resources/views/refund/detail-refund.blade.php b/resources/views/refund/detail-refund.blade.php
index aeaecfaa..a38c253d 100644
--- a/resources/views/refund/detail-refund.blade.php
+++ b/resources/views/refund/detail-refund.blade.php
@@ -11,19 +11,20 @@
                     @foreach ($detail_refund as $DetailRefund)
                         <div class="card-body p-0">
                             <div class="container">
+                                <p><strong>Image/Video: </strong></p>
+                                <img src="assets/images/dashboard/img_2.jpg" alt="Return Image" width="300">
+                                <img src="assets/images/dashboard/img_3.jpg" alt="Return Image" width="300">
+                                <img src="assets/images/dashboard/img_4.jpg" alt="Return Image" width="300"><br><br>
                                 <p><strong>ID Order:</strong> {{ $DetailRefund['orderId'] }}</p>
                                 <p><strong>Customer Name:</strong> {{ $DetailRefund['customer'] }}</p>
                                 <p><strong>Seller Name:</strong> {{ $DetailRefund['seller'] }}</p>
                                 <p><strong>Total:</strong> {{ $DetailRefund['total'] }}</p>
                                 <p><strong>Due Date:</strong> {{ $DetailRefund['date'] }}</p>
                                 <p><strong>Reason Complaint:</strong> {{ $DetailRefund['complaint'] }}</p>
-                                <p><strong>Image/Video: </strong></p>
-                                <img src="assets/images/dashboard/img_2.jpg" alt="Return Image" width="300"><br><br>
-
-
 
                                 <div class="d-flex justify-content-center">
-                                    <a href="/next-detail-refund" class="btn btn-primary mx-1">Accept</a>
+                                    <a href="#" data-toggle="modal" data-target="#ModalRefund"
+                                        class="btn btn-primary mx-1">Accept</a>
                                     <a href="/history_refund" class="btn btn-danger mx-1">Decline</a>
                                 </div>
 
@@ -36,4 +37,5 @@
             </div>
         </section>
     </div>
+    @include('refund.next-detail-refund')
 @endsection
diff --git a/resources/views/refund/history-refund.blade.php b/resources/views/refund/history-refund.blade.php
index f01057c5..c54237f7 100644
--- a/resources/views/refund/history-refund.blade.php
+++ b/resources/views/refund/history-refund.blade.php
@@ -7,9 +7,32 @@
                     <div class="card-header">
                         <h2>History Refund</h2>
                     </div>
-                    <div class="card-body p-0">
-                        <div class="table-responsive table-invoice">
-                            <table class="table table-striped">
+                    <div class="d-flex justify-content-between align-items-center p-4">
+                        <div class="d-flex align-items-center">
+                            <span class="mb-0 ml-2">Show:</span>
+                            <select class="form-select ml-2">
+                                <option>10</option>
+                                <option>25</option>
+                                <option>50</option>
+                                <option>100</option>
+                            </select>
+                            <span class="ml-2">entries</span>
+                        </div>
+                        <div class="float-right">
+                            <form>
+                                <div class="input-group">
+                                    <input type="text" class="form-control" placeholder="Search">
+                                    <div class="input-group-append">
+                                        <button class="btn btn-primary"><i class="fas fa-search"></i></button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-bordered table-md">
                                 <tr>
                                     <th>Order ID</th>
                                     <th>Customer</th>
@@ -34,8 +57,29 @@
                                         </td>
                                     </tr>
                                 @endforeach
-
                             </table>
+                            <div class="card">
+                                <div class="card-body">
+                                    <div class="d-flex justify-content-end">
+                                        <nav aria-label="paginate">
+                                            <ul class="pagination">
+                                                <li class="page-item disabled">
+                                                    <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                                </li>
+                                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                                <li class="page-item ">
+                                                    <a class="page-link" href="#">2 <span
+                                                            class="sr-only">(current)</span></a>
+                                                </li>
+                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                                <li class="page-item">
+                                                    <a class="page-link" href="#">Next</a>
+                                                </li>
+                                            </ul>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/refund/next-detail-refund.blade.php b/resources/views/refund/next-detail-refund.blade.php
index 69c0747e..3dbf3269 100644
--- a/resources/views/refund/next-detail-refund.blade.php
+++ b/resources/views/refund/next-detail-refund.blade.php
@@ -1,326 +1,30 @@
-@extends('layout.main')
-@section('content')
-    <div class="main-content">
-        <section class="section">
-            <div class="col-xl-12">
-                <div class="card">
-                    <div class="card-header pb-0">
-                        <div class="d-flex justify-content-between">
-                            <h4 class="card-title mg-b-2 mt-2">Tabel Manajemen Petugas</h4>
-                            <i class="mdi mdi-dots-horizontal text-gray"></i>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <div class="table-responsive">
-                            <div class="d-flex justify-content-end mb-3" style="margin-top: -17px;">
-                                <div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
-                                    <a class="modal-effect btn btn-success btn-block mb-3"
-                                        data-bs-effect="effect-flip-Vertical" data-bs-toggle="modal"
-                                        href="#modal-tambah-petugas"><i class='bx bxs-add-to-queue'></i>
-                                        Tambah Data </a>
-                                </div>
-                            </div>
-                            <table id="table-petugas" class="display">
-                                <thead>
-                                    <tr>
-                                        <th>NO</th>
-                                        <th>Username</th>
-                                        <th>Email</th>
-                                        <th>Alamat</th>
-                                        <th>No.Telepon</th>
-                                        <th>Aksi</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
+<!-- Modal -->
+<div class="modal fade" id="ModalRefund" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLongTitle">Refund Confirmation</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
             </div>
-        </section>
+            <div class="modal-body">
+                <h6> Apakah kamu yakin untuk menerima pengembalian dana? </h6>
+                <h7><b>Jumlah Pengembalian Dana: </b></h7>
+                <p>Rp. 15000</p>
+
+                <input type="radio" id="yes" name="fav_language" value="yes">
+                <label for="yes">Ya! Terima pengembalian dana </label> <br>
+                <input type="radio" id="no" name="fav_language" value="no">
+                <label for="no">Tidak! Pengembalian dana tidak bisa dilanjutkan</label>
+
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
+                <a href="/history_refund" class="btn btn-primary mx-1">Accept Refund</a>
+            </div>
+        </div>
     </div>
-
-    @push('css')
-        <style>
-            .card {
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                min-width: 0;
-                word-wrap: break-word;
-                background: #fff;
-                background-clip: border-box;
-                border-radius: 10px;
-                border: 1px solid #fff;
-                margin-block-end: 1.3rem;
-                box-shadow: 6px 11px 41px -28px #796eb1;
-                -webkit-box-shadow: 6px 11px 41px -28px #796eb1;
-            }
-
-            .card>hr {
-                margin-inline-end: 0;
-                margin-inline-start: 0;
-            }
-
-            .card>.list-group:first-child .list-group-item:first-child {
-                border-start-start-radius: 3px;
-                border-start-end-radius: 3px;
-            }
-
-            .card>.list-group:last-child .list-group-item:last-child {
-                border-end-end-radius: 3px;
-                border-end-start-radius: 3px;
-            }
-
-            .card-body {
-                flex: 1 1 auto;
-                padding: 1.25rem;
-            }
-
-            .card-title {
-                margin-block-end: 0;
-            }
-
-            .card-subtitle {
-                margin-block-start: -0.375rem;
-                margin-block-end: 0;
-            }
-
-            .card-text:last-child {
-                margin-block-end: 0;
-            }
-
-            .card-link:hover {
-                text-decoration: none;
-            }
-
-            .card-link+.card-link {
-                margin-inline-start: 1.25rem;
-            }
-
-            .card-header {
-                padding: 0.75rem 1.25rem;
-                margin-block-end: 0;
-                background-color: white;
-                border-block-end: 1px solid #ededf5;
-            }
-
-            .card-header:first-child {
-                border-radius: 2px 2px 0 0;
-            }
-
-            .card-header+.list-group .list-group-item:first-child {
-                border-block-start: 0;
-            }
-
-            .card-footer {
-                padding: 0.75rem 1.25rem;
-                background-color: transparent;
-                border-block-start: 1px solid #ededf5;
-                border-end-start-radius: 6px !important;
-                border-end-end-radius: 6px !important;
-            }
-
-            .card-footer:last-child {
-                border-radius: 0 0 2px 2px;
-            }
-
-            .card-header-tabs {
-                margin-inline-end: -0.625rem;
-                margin-block-end: -0.75rem;
-                margin-inline-start: -0.625rem;
-                border-block-end: 0;
-            }
-
-            .card-header-pills {
-                margin-inline-end: -0.625rem;
-                margin-inline-start: -0.625rem;
-            }
-
-            .card-img-overlay {
-                position: absolute;
-                top: 0;
-                inset-inline-end: 0;
-                bottom: 0;
-                inset-inline-start: 0;
-                padding: 1.25rem;
-            }
-
-            .card-img {
-                width: 100%;
-                border-radius: 2px;
-            }
-
-            .card-img-top {
-                width: 100%;
-                border-start-start-radius: 6px;
-                border-start-end-radius: 6px;
-            }
-
-            .card-img-bottom {
-                width: 100%;
-                border-end-end-radius: 5px;
-                border-end-start-radius: 5px;
-            }
-
-            .card-deck {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .card-deck .card {
-                margin-block-end: 15px;
-            }
-
-            @media (min-width: 576px) {
-                .card-deck {
-                    flex-flow: row wrap;
-                    margin-inline-end: -15px;
-                    margin-inline-start: -15px;
-                }
-
-                .card-deck .card {
-                    display: flex;
-                    flex: 1 0 0%;
-                    flex-direction: column;
-                    margin-inline-end: 15px;
-                    margin-block-end: 0;
-                    margin-inline-start: 15px;
-                }
-            }
-
-            .card-group {
-                display: flex;
-                flex-direction: column;
-            }
-
-            .card-group>.card {
-                margin-block-end: 15px;
-            }
-
-            @media (min-width: 576px) {
-                .card-group {
-                    flex-flow: row wrap;
-                }
-
-                .card-group>.card {
-                    flex: 1 0 0%;
-                    margin-block-end: 0;
-                }
-
-                .card-group>.card+.card {
-                    margin-inline-start: 0;
-                    border-inline-start: 0;
-                }
-
-                .card-group>.card:not(:last-child) {
-                    border-start-end-radius: 0;
-                    border-end-end-radius: 0;
-                }
-
-                .card-group>.card:not(:last-child) .card-img-top,
-                .card-group>.card:not(:last-child) .card-header {
-                    border-start-end-radius: 0;
-                }
-
-                .card-group>.card:not(:last-child) .card-img-bottom,
-                .card-group>.card:not(:last-child) .card-footer {
-                    border-end-end-radius: 0;
-                }
-
-                .card-group>.card:not(:first-child) {
-                    border-start-start-radius: 0;
-                    border-end-start-radius: 0;
-                }
-
-                .card-group>.card:not(:first-child) .card-img-top,
-                .card-group>.card:not(:first-child) .card-header {
-                    border-start-start-radius: 0;
-                }
-
-                .card-group>.card:not(:first-child) .card-img-bottom,
-                .card-group>.card:not(:first-child) .card-footer {
-                    border-end-start-radius: 0;
-                }
-            }
-
-            .card-columns .card {
-                margin-block-end: 0.75rem;
-            }
-
-            @media (min-width: 576px) {
-                .card-columns {
-                    column-count: 3;
-                    column-gap: 1.25rem;
-                    orphans: 1;
-                    widows: 1;
-                }
-
-                .card-columns .card {
-                    display: inline-block;
-                    width: 100%;
-                }
-            }
-
-            .accordion>.card {
-                overflow: hidden;
-            }
-
-            .accordion>.card:not(:first-of-type) .card-header:first-child {
-                border-radius: 0;
-            }
-
-            .accordion>.card:not(:first-of-type):not(:last-of-type) {
-                border-block-end: 0;
-                border-radius: 0;
-            }
-
-            .accordion>.card:first-of-type {
-                border-block-end: 0;
-                border-end-end-radius: 0;
-                border-end-start-radius: 0;
-            }
-
-            .accordion>.card:last-of-type {
-                border-start-start-radius: 0;
-                border-start-end-radius: 0;
-            }
-
-            .accordion>.card .card-header {
-                margin-block-end: -1px;
-            }
-
-            .card-sub-title {
-                font-size: 13px;
-            }
-
-            .card-body> :last-child {
-                margin-block-end: 0;
-            }
-
-            .card-table tbody tr td {
-                padding: 16px 15px;
-            }
-
-            .card-img-start {
-                width: 100%;
-                height: 100%;
-                border-start-start-radius: 4px;
-                border-end-start-radius: 4px;
-            }
-
-            .card-img-end {
-                width: 100%;
-                height: 100%;
-                border-end-end-radius: 4px;
-                border-start-end-radius: 4px;
-            }
-
-            .img-fluid {
-                max-width: 100%;
-                height: auto;
-            }
-        </style>
-    @endpush
-@endsection
+</div>
diff --git a/resources/views/transaction/Detail_History_Transaction.blade.php b/resources/views/transaction/Detail_History_Transaction.blade.php
index 34f40cd8..7c124f61 100644
--- a/resources/views/transaction/Detail_History_Transaction.blade.php
+++ b/resources/views/transaction/Detail_History_Transaction.blade.php
@@ -1,4 +1,157 @@
-@extends('layout.main')
+<!-- Modal -->
+<div class="modal fade" id="ModalTransaction" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title" id="exampleModalLongTitle">Tracking Information</h2>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="section-body">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="activities">
+                                <div class="activity">
+                                    <div class="activity-icon bg-primary text-white shadow-primary">
+                                        <i class="fas fa-comment-alt"></i>
+                                    </div>
+                                    <div class="activity-detail">
+                                        <div class="mb-2">
+                                            <span class="text-job text-primary">2 min ago</span>
+                                            <span class="bullet"></span>
+                                            <a class="text-job" href="#">View</a>
+                                            <div class="float-right dropdown">
+                                                <a href="#" data-toggle="dropdown"><i
+                                                        class="fas fa-ellipsis-h"></i></a>
+                                                <div class="dropdown-menu">
+                                                    <div class="dropdown-title">Options</div>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-eye"></i> View</a>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-list"></i> Detail</a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="#" class="dropdown-item has-icon text-danger"
+                                                        data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?"
+                                                        data-confirm-text-yes="Yes, IDC"><i
+                                                            class="fas fa-trash-alt"></i> Archive</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p>Have commented on the task of "<a href="#">Responsive
+                                                design</a>".</p>
+                                    </div>
+                                </div>
+                                <div class="activity">
+                                    <div class="activity-icon bg-primary text-white shadow-primary">
+                                        <i class="fas fa-arrows-alt"></i>
+                                    </div>
+                                    <div class="activity-detail">
+                                        <div class="mb-2">
+                                            <span class="text-job">1 hour ago</span>
+                                            <span class="bullet"></span>
+                                            <a class="text-job" href="#">View</a>
+                                            <div class="float-right dropdown">
+                                                <a href="#" data-toggle="dropdown"><i
+                                                        class="fas fa-ellipsis-h"></i></a>
+                                                <div class="dropdown-menu">
+                                                    <div class="dropdown-title">Options</div>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-eye"></i> View</a>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-list"></i> Detail</a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="#" class="dropdown-item has-icon text-danger"
+                                                        data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?"
+                                                        data-confirm-text-yes="Yes, IDC"><i
+                                                            class="fas fa-trash-alt"></i> Archive</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p>Moved the task "<a href="#">Fix some features that are bugs in
+                                                the master module</a>" from Progress to Finish.</p>
+                                    </div>
+                                </div>
+                                <div class="activity">
+                                    <div class="activity-icon bg-primary text-white shadow-primary">
+                                        <i class="fas fa-unlock"></i>
+                                    </div>
+                                    <div class="activity-detail">
+                                        <div class="mb-2">
+                                            <span class="text-job">4 hour ago</span>
+                                            <span class="bullet"></span>
+                                            <a class="text-job" href="#">View</a>
+                                            <div class="float-right dropdown">
+                                                <a href="#" data-toggle="dropdown"><i
+                                                        class="fas fa-ellipsis-h"></i></a>
+                                                <div class="dropdown-menu">
+                                                    <div class="dropdown-title">Options</div>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-eye"></i> View</a>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-list"></i> Detail</a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="#" class="dropdown-item has-icon text-danger"
+                                                        data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?"
+                                                        data-confirm-text-yes="Yes, IDC"><i
+                                                            class="fas fa-trash-alt"></i> Archive</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p>Login to the system with ujang@maman.com email and location in Bogor.
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <div class="activity">
+                                    <div class="activity-icon bg-primary text-white shadow-primary">
+                                        <i class="fas fa-trash"></i>
+                                    </div>
+                                    <div class="activity-detail">
+                                        <div class="mb-2">
+                                            <span class="text-job">Yesterday</span>
+                                            <span class="bullet"></span>
+                                            <a class="text-job" href="#">View</a>
+                                            <div class="float-right dropdown">
+                                                <a href="#" data-toggle="dropdown"><i
+                                                        class="fas fa-ellipsis-h"></i></a>
+                                                <div class="dropdown-menu">
+                                                    <div class="dropdown-title">Options</div>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-eye"></i> View</a>
+                                                    <a href="#" class="dropdown-item has-icon"><i
+                                                            class="fas fa-list"></i> Detail</a>
+                                                    <div class="dropdown-divider"></div>
+                                                    <a href="#" class="dropdown-item has-icon text-danger"
+                                                        data-confirm="Wait, wait, wait...|This action can't be undone. Want to take risks?"
+                                                        data-confirm-text-yes="Yes, IDC"><i
+                                                            class="fas fa-trash-alt"></i> Archive</a>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p>Assign the task of "<a href="#">Redesigning website header and
+                                                make it responsive AF</a>" to <a href="#">Syahdan
+                                                Ubaidilah</a>.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <a href="/history_transaction" class="btn btn-primary mx-1">Back</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+
+
+{{-- @extends('layout.main')
 @section('content')
     @foreach ($detail_transaction as $detail_transactions)
         <div class="main-content">
@@ -22,4 +175,4 @@
             </section>
         </div>
     @endforeach
-@endsection
+@endsection --}}
diff --git a/resources/views/transaction/History_Transaction.blade.php b/resources/views/transaction/History_Transaction.blade.php
index 48f11466..5b9a54f9 100644
--- a/resources/views/transaction/History_Transaction.blade.php
+++ b/resources/views/transaction/History_Transaction.blade.php
@@ -7,9 +7,31 @@
                     <div class="card-header">
                         <h2>History Transaction</h2>
                     </div>
-                    <div class="card-body p-0">
-                        <div class="table-responsive table-invoice">
-                            <table class="table table-striped">
+                    <div class="d-flex justify-content-between align-items-center p-4">
+                        <div class="d-flex align-items-center">
+                            <span class="mb-0 ml-2">Show:</span>
+                            <select class="form-select ml-2">
+                                <option>10</option>
+                                <option>25</option>
+                                <option>50</option>
+                                <option>100</option>
+                            </select>
+                            <span class="ml-2">entries</span>
+                        </div>
+                        <div class="float-right">
+                            <form>
+                                <div class="input-group">
+                                    <input type="text" class="form-control" placeholder="Search">
+                                    <div class="input-group-append">
+                                        <button class="btn btn-primary"><i class="fas fa-search"></i></button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div class="table-responsive">
+                            <table class="table table-bordered table-md">
                                 <tr>
                                     <th>Order ID</th>
                                     <th>Customer</th>
@@ -30,15 +52,38 @@
                                             <div class="badge badge-success">{{ $transactions['status'] }}</div>
                                         </td>
                                         <td>
-                                            <a href="/Detail_History" class="btn btn-primary">Detail</a>
+                                            <a href="#" data-toggle="modal" data-target="#ModalTransaction"
+                                                class="btn btn-primary">Detail</a>
                                         </td>
-
                                     </tr>
                                 @endforeach
-
                             </table>
+                            <div class="card">
+                                <div class="card-body">
+                                    <div class="d-flex justify-content-end">
+                                        <nav aria-label="paginate">
+                                            <ul class="pagination">
+                                                <li class="page-item disabled">
+                                                    <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                                </li>
+                                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                                <li class="page-item ">
+                                                    <a class="page-link" href="#">2 <span
+                                                            class="sr-only">(current)</span></a>
+                                                </li>
+                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                                <li class="page-item">
+                                                    <a class="page-link" href="#">Next</a>
+                                                </li>
+                                            </ul>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        @endsection
+    </div>
+    @include('transaction.Detail_History_Transaction')
+@endsection
diff --git a/resources/views/transaction/List_Transaction.blade.php b/resources/views/transaction/List_Transaction.blade.php
index 2554bab1..09ca946f 100644
--- a/resources/views/transaction/List_Transaction.blade.php
+++ b/resources/views/transaction/List_Transaction.blade.php
@@ -19,14 +19,20 @@
                             </select>
                             <span class="ml-2">entries</span>
                         </div>
-                        <div class="d-flex align-items-center">
-                            <h5 class="mb-0 mr-2">Search:</h5>
-                            <input type="text" id="searchInput" placeholder="Search">
+                        <div class="float-right">
+                            <form>
+                                <div class="input-group">
+                                    <input type="text" class="form-control" placeholder="Search">
+                                    <div class="input-group-append">
+                                        <button class="btn btn-primary"><i class="fas fa-search"></i></button>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
                     </div>
                     <div class="card-body">
-                        <div class="table-responsive table-invoice">
-                            <table class="table table-striped p-4">
+                        <div class="table-responsive">
+                            <table class="table table-bordered table-md">
                                 <tr>
                                     <th>Order ID</th>
                                     <th>Customer</th>
@@ -34,7 +40,7 @@
                                     <th>Total</th>
                                     <th>Due Date</th>
                                     <th>Status</th>
-                                    <th class="text-center">Action</th>
+                                    <th>Action</th>
                                 </tr>
                                 @foreach ($transaction as $transactions)
                                     <tr>
@@ -44,17 +50,40 @@
                                         <td class="font-weight-600">{{ $transactions['total'] }}</td>
                                         <td>{{ $transactions['date'] }}</td>
                                         <td>
-                                            <div class="badge badge-success">{{ $transactions['status'] }}</div>
+                                            <div class="badge badge-warning">{{ $transactions['status'] }}</div>
                                         </td>
                                         <td>
-                                            <div class="d-flex justify-content-center">
-                                                <a href="#" class="btn btn-primary mx-1">Edit</a>
-                                                <a href="#" class="btn btn-danger mx-1">Delete</a>
-                                            </div>
+                                            <a class="btn btn-primary btn-action mr-1" data-toggle="tooltip"
+                                                title="Edit"><i class="fas fa-pencil-alt"></i></a>
+                                            <a class="btn btn-danger btn-action" data-toggle="tooltip" title="Delete"
+                                                data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?"
+                                                data-confirm-yes="alert('Deleted')"><i class="fas fa-trash"></i></a>
                                         </td>
                                     </tr>
                                 @endforeach
                             </table>
+                            <div class="card">
+                                <div class="card-body">
+                                    <div class="d-flex justify-content-end">
+                                        <nav aria-label="paginate">
+                                            <ul class="pagination">
+                                                <li class="page-item disabled">
+                                                    <a class="page-link" href="#" tabindex="-1">Previous</a>
+                                                </li>
+                                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
+                                                <li class="page-item ">
+                                                    <a class="page-link" href="#">2 <span
+                                                            class="sr-only">(current)</span></a>
+                                                </li>
+                                                <li class="page-item"><a class="page-link" href="#">3</a></li>
+                                                <li class="page-item">
+                                                    <a class="page-link" href="#">Next</a>
+                                                </li>
+                                            </ul>
+                                        </nav>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/users/list-user.blade.php b/resources/views/users/list-user.blade.php
new file mode 100644
index 00000000..5bfd7c1e
--- /dev/null
+++ b/resources/views/users/list-user.blade.php
@@ -0,0 +1,3 @@
+@extends('layout.main')
+@section('content')
+@endsection
diff --git a/resources/views/vendor/pagination/bootstrap-4.blade.php b/resources/views/vendor/pagination/bootstrap-4.blade.php
new file mode 100644
index 00000000..63c6f56b
--- /dev/null
+++ b/resources/views/vendor/pagination/bootstrap-4.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                        @else
+                            <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/bootstrap-5.blade.php b/resources/views/vendor/pagination/bootstrap-5.blade.php
new file mode 100644
index 00000000..a1795a4d
--- /dev/null
+++ b/resources/views/vendor/pagination/bootstrap-5.blade.php
@@ -0,0 +1,88 @@
+@if ($paginator->hasPages())
+    <nav class="d-flex justify-items-center justify-content-between">
+        <div class="d-flex justify-content-between flex-fill d-sm-none">
+            <ul class="pagination">
+                {{-- Previous Page Link --}}
+                @if ($paginator->onFirstPage())
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.previous')</span>
+                    </li>
+                @else
+                    <li class="page-item">
+                        <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                    </li>
+                @endif
+
+                {{-- Next Page Link --}}
+                @if ($paginator->hasMorePages())
+                    <li class="page-item">
+                        <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                    </li>
+                @else
+                    <li class="page-item disabled" aria-disabled="true">
+                        <span class="page-link">@lang('pagination.next')</span>
+                    </li>
+                @endif
+            </ul>
+        </div>
+
+        <div class="d-none flex-sm-fill d-sm-flex align-items-sm-center justify-content-sm-between">
+            <div>
+                <p class="small text-muted">
+                    {!! __('Showing') !!}
+                    <span class="fw-semibold">{{ $paginator->firstItem() }}</span>
+                    {!! __('to') !!}
+                    <span class="fw-semibold">{{ $paginator->lastItem() }}</span>
+                    {!! __('of') !!}
+                    <span class="fw-semibold">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div>
+                <ul class="pagination">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                            <span class="page-link" aria-hidden="true">&lsaquo;</span>
+                        </li>
+                    @else
+                        <li class="page-item">
+                            <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                        </li>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
+                                @else
+                                    <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <li class="page-item">
+                            <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                        </li>
+                    @else
+                        <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                            <span class="page-link" aria-hidden="true">&rsaquo;</span>
+                        </li>
+                    @endif
+                </ul>
+            </div>
+        </div>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/default.blade.php b/resources/views/vendor/pagination/default.blade.php
new file mode 100644
index 00000000..0db70b56
--- /dev/null
+++ b/resources/views/vendor/pagination/default.blade.php
@@ -0,0 +1,46 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                    <span aria-hidden="true">&lsaquo;</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li class="active" aria-current="page"><span>{{ $page }}</span></li>
+                        @else
+                            <li><a href="{{ $url }}">{{ $page }}</a></li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+                </li>
+            @else
+                <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                    <span aria-hidden="true">&rsaquo;</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/semantic-ui.blade.php b/resources/views/vendor/pagination/semantic-ui.blade.php
new file mode 100644
index 00000000..ef0dbb18
--- /dev/null
+++ b/resources/views/vendor/pagination/semantic-ui.blade.php
@@ -0,0 +1,36 @@
+@if ($paginator->hasPages())
+    <div class="ui pagination menu" role="navigation">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+        @else
+            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+        @endif
+
+        {{-- Pagination Elements --}}
+        @foreach ($elements as $element)
+            {{-- "Three Dots" Separator --}}
+            @if (is_string($element))
+                <a class="icon item disabled" aria-disabled="true">{{ $element }}</a>
+            @endif
+
+            {{-- Array Of Links --}}
+            @if (is_array($element))
+                @foreach ($element as $page => $url)
+                    @if ($page == $paginator->currentPage())
+                        <a class="item active" href="{{ $url }}" aria-current="page">{{ $page }}</a>
+                    @else
+                        <a class="item" href="{{ $url }}">{{ $page }}</a>
+                    @endif
+                @endforeach
+            @endif
+        @endforeach
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+        @else
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+        @endif
+    </div>
+@endif
diff --git a/resources/views/vendor/pagination/simple-bootstrap-4.blade.php b/resources/views/vendor/pagination/simple-bootstrap-4.blade.php
new file mode 100644
index 00000000..4bb49174
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-bootstrap-4.blade.php
@@ -0,0 +1,27 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.previous')</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">@lang('pagination.next')</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-bootstrap-5.blade.php b/resources/views/vendor/pagination/simple-bootstrap-5.blade.php
new file mode 100644
index 00000000..a89005ee
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-bootstrap-5.blade.php
@@ -0,0 +1,29 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation">
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">{!! __('pagination.previous') !!}</span>
+                </li>
+            @else
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">
+                        {!! __('pagination.previous') !!}
+                    </a>
+                </li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li class="page-item">
+                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">{!! __('pagination.next') !!}</a>
+                </li>
+            @else
+                <li class="page-item disabled" aria-disabled="true">
+                    <span class="page-link">{!! __('pagination.next') !!}</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-default.blade.php b/resources/views/vendor/pagination/simple-default.blade.php
new file mode 100644
index 00000000..36bdbc18
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-default.blade.php
@@ -0,0 +1,19 @@
+@if ($paginator->hasPages())
+    <nav>
+        <ul class="pagination">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
+            @else
+                <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
+            @endif
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
+            @else
+                <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
+            @endif
+        </ul>
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/simple-tailwind.blade.php b/resources/views/vendor/pagination/simple-tailwind.blade.php
new file mode 100644
index 00000000..6872cca3
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-tailwind.blade.php
@@ -0,0 +1,25 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="Pagination Navigation" class="flex justify-between">
+        {{-- Previous Page Link --}}
+        @if ($paginator->onFirstPage())
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.previous') !!}
+            </span>
+        @else
+            <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.previous') !!}
+            </a>
+        @endif
+
+        {{-- Next Page Link --}}
+        @if ($paginator->hasMorePages())
+            <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                {!! __('pagination.next') !!}
+            </a>
+        @else
+            <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                {!! __('pagination.next') !!}
+            </span>
+        @endif
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/tailwind.blade.php b/resources/views/vendor/pagination/tailwind.blade.php
new file mode 100644
index 00000000..5bf323b4
--- /dev/null
+++ b/resources/views/vendor/pagination/tailwind.blade.php
@@ -0,0 +1,106 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between">
+        <div class="flex justify-between flex-1 sm:hidden">
+            @if ($paginator->onFirstPage())
+                <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.previous') !!}
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.previous') !!}
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 rounded-md hover:text-gray-500 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+                    {!! __('pagination.next') !!}
+                </a>
+            @else
+                <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md">
+                    {!! __('pagination.next') !!}
+                </span>
+            @endif
+        </div>
+
+        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+            <div>
+                <p class="text-sm text-gray-700 leading-5">
+                    {!! __('Showing') !!}
+                    @if ($paginator->firstItem())
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        {!! __('to') !!}
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    @else
+                        {{ $paginator->count() }}
+                    @endif
+                    {!! __('of') !!}
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    {!! __('results') !!}
+                </p>
+            </div>
+
+            <div>
+                <span class="relative z-0 inline-flex shadow-sm rounded-md">
+                    {{-- Previous Page Link --}}
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-l-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev" class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.previous') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    {{-- Pagination Elements --}}
+                    @foreach ($elements as $element)
+                        {{-- "Three Dots" Separator --}}
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 cursor-default leading-5">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        {{-- Array Of Links --}}
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}" class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-gray-700 bg-white border border-gray-300 leading-5 hover:text-gray-500 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150" aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    {{-- Next Page Link --}}
+                    @if ($paginator->hasMorePages())
+                        <a href="{{ $paginator->nextPageUrl() }}" rel="next" class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md leading-5 hover:text-gray-400 focus:z-10 focus:outline-none focus:ring ring-gray-300 focus:border-blue-300 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="{{ __('pagination.next') }}">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @else
+                        <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
+                            <span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default rounded-r-md leading-5" aria-hidden="true">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @endif
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif