diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
index 35a472f..ca3e5a2 100644
--- a/app/Http/Controllers/HomeController.php
+++ b/app/Http/Controllers/HomeController.php
@@ -20,6 +20,37 @@ class HomeController extends Controller
         $this->pembiayaanService = $pembiayaanService;
         $this->middleware(['auth', 'verified']);
     }
+    
+    /**
+     * Show the application buffer page.
+     *
+     * @return \Illuminate\View\View
+     */
+    public function buffer(Request $request)
+    {
+        $homeUrl = route('home');
+        $authUser = Auth::user();
+        $customerInfo = Http::withOptions(['verify' => config('app.api_verify')])
+            ->get(config('api.url') . '/portal/customer/info', ['ic' => $authUser['icno']])
+            ->json();
+
+        ['gadai' => $customer_gadai, 'lelong' => $customer_lelong] = $customerInfo;
+        
+        // only get lelong that is harga jualan that is not null or 0
+        $customer_lelong = array_filter($customer_lelong, fn($x) => $x['hargajualan'] != null && $x['hargajualan'] != 0);
+
+        $formatMoney = fn($x) => number_format($x, 2);
+        $getTotal = fn($x) => array_reduce($x, fn($accumulator, $current_item) => $accumulator + $current_item['bakipjm'], 0);
+        $total = $formatMoney($getTotal($customer_gadai));
+
+        $sixMonths = sizeOf(array_filter($customer_gadai, fn($x) => $x['tempoh'] >= 6));
+
+        $bilanganLelong = sizeOf($customer_lelong);
+
+        $bilangan = sizeof($customer_gadai) + sizeOf($customer_lelong);
+
+        return view('includes.buffer', compact('bilangan', 'sixMonths', 'total', 'bilanganLelong', 'homeUrl'));
+    }
 
     /**
      * Show the application dashboard.
@@ -49,7 +80,7 @@ class HomeController extends Controller
         $bilanganLelong = sizeOf($customer_lelong);
 
         $bilangan = sizeof($customer_gadai) + sizeOf($customer_lelong);
-
+        
         return view('includes.home', compact('bilangan', 'sixMonths', 'total', 'bilanganLelong', 'pembiayaan'));
     }
 }
diff --git a/resources/views/includes/buffer.blade.php b/resources/views/includes/buffer.blade.php
new file mode 100644
index 0000000..fe6b34c
--- /dev/null
+++ b/resources/views/includes/buffer.blade.php
@@ -0,0 +1,215 @@
+@extends ('layouts.indexfirst')
+
+@push('additional_styles')
+    <style>
+        .card.shadow {
+            background-color: #ffffff;
+            /* Lighter background */
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
+            /* Increased shadow */
+            border: none;
+            /* Remove border if present */
+        }
+
+        .card-body.disabled {
+            background-color: rgba(0, 0, 0, 0.03);
+            /* Lighter disabled background */
+            pointer-events: none;
+            height: 300px;
+            position: relative;
+            border-radius: 0.25rem;
+            /* Match card border-radius if needed */
+        }
+
+        .loader {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        .pulsating-dot {
+            width: 40px;
+            height: 40px;
+            background-color: #006400;
+            border-radius: 50%;
+            box-shadow: 0 0 0 0 rgba(255, 215, 0, 1);
+            animation: pulse-green 2s infinite;
+        }
+
+        @keyframes pulse-green {
+            0% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(0, 100, 0, 0.7);
+            }
+
+            70% {
+                transform: scale(1.1);
+                box-shadow: 0 0 0 20px rgba(0, 100, 0, 0);
+            }
+
+            100% {
+                transform: scale(0.95);
+                box-shadow: 0 0 0 0 rgba(0, 100, 0, 0);
+            }
+        }
+
+        .loader p {
+            margin-top: 15px;
+            color: #333;
+            font-size: 16px;
+        }
+
+        .fancy-text {
+            font-family: 'Arial', sans-serif;
+            font-size: 18px;
+            font-weight: bold;
+            color: #2D7349;
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+            letter-spacing: 0.5px;
+            margin-top: 20px;
+            text-transform: uppercase;
+        }
+
+        .dots {
+            display: inline-block;
+        }
+
+        .dots span {
+            opacity: 0;
+            display: inline-block;
+            animation: dots 1.4s infinite;
+        }
+
+        .dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes dots {
+            0% {
+                opacity: 0;
+            }
+
+            50% {
+                opacity: 1;
+            }
+
+            100% {
+                opacity: 0;
+            }
+        }
+    </style>
+@endpush
+
+@section('content')
+    <title>Home | Portal Pelanggan</title>
+
+    <div class="row mt-n9 top-0">
+        <x-dashboard-card title="Jum. Pembiayaan Semasa" :subtitle=$total icon="fas fa-chart-pie" icon-state='warning'
+            :link="route('home')" />
+
+        <x-dashboard-card title="Bil Pembiayaan Semasa" :subtitle=$bilangan icon="fas fa-users" icon-state='success'
+            :link="route('home')" />
+
+        <x-dashboard-card title="Bil Pembiayaan 6 Bulan Ke Atas" :subtitle=$sixMonths icon="fas fa-chart-bar"
+            :link="route('home', ['filter' => 'pembiayaan-6-bulan'])" />
+
+        <x-dashboard-card title="Bil Pembiayaan Akan Dilelong" :subtitle=$bilanganLelong icon="fas fa-gavel"
+            icon-state='info' card-background-state="{{ $bilanganLelong > 0 ? 'crimson' : 'white' }}" :link="route('home', ['filter' => 'pembiayaan-akan-dilelong'])" />
+    </div>
+
+    <form method="post" id="formtable" action="{{ route('payment.action') }}">
+        @csrf
+
+        @error('totalSagInCartInput')
+            <script>
+                $.notify({
+                    icon: 'fas fa-exclamation-triangle fa-2x',
+                    newest_on_top: true,
+                    message: "<strong style='font-size:15px;'>{{ $message }}</strong>"
+                }, {
+                    type: 'danger',
+                    allow_dismiss: false,
+                    placement: {
+                        align: 'center',
+                        from: 'bottom'
+                    },
+                    animate: {
+                        enter: 'animate__animated animate__bounce',
+
+                        exit: 'animate__animated animate__bounceOutDown'
+                    }
+                });
+            </script>
+        @enderror
+
+        @if (\Session::has('error'))
+            <script>
+                Swal.fire(
+                    // "Melebihi tempoh 12 Bulan.",
+                    "Akan/Telah Tamat Kontrak 12 Bulan.",
+                    "{{ \Session::get('error') }}",
+                    'warning'
+                )
+            </script>
+        @endif
+
+        @if (\Session::has('errorsagonline'))
+            <script>
+                Swal.fire(
+                    "Pembayaran Terdahulu Dalam Proses.",
+                    "{{ \Session::get('errorsagonline') }}",
+                    'warning'
+                )
+            </script>
+        @endif
+        <br>
+
+        @if (request()->get('filter') == 'pembiayaan-akan-dilelong')
+            <x-dashboard-notification>
+                <x-dashboard-notification.item
+                    content="1. Sekiranya Lelongan Anda Dalam Tempoh Kontrak Lanjutan (Mencapai 12 Bulan), Urusan Penebusan Hanya Dibenarkan Di Kaunter Cawangan Selewatnya-lewatnya 3 Hari Sebelum Tarikh Lelong." />
+                <x-dashboard-notification.item
+                    content="2. Transaksi Pembayaran Hanya Dibenarkan Selewat-lewatnya 3 Hari Sebelum Lelongan." />
+                <x-dashboard-notification.item
+                    content="(Contoh: Tarikh Lelong: 21-02-2023, Pembayaran/Penebusan Hanya dibenarkan Sehingga Tarikh 18-02-2023 Sahaja)" />
+            </x-dashboard-notification>
+        @else
+            <x-dashboard-notification>
+                <x-dashboard-notification.item
+                    content="1. Sila Buat Penebusan Di Kaunter Jika Tempoh Telah Mencapai 12 Bulan!" />
+                <x-dashboard-notification.item content="2. Sila 'Tick' Kotak No Rujukan Yang Hendak Dibayar." />
+            </x-dashboard-notification>
+        @endif
+
+
+        <div class="card shadow">
+            <div class="card-body disabled">
+                <div class="loader">
+                    <div class="pulsating-dot"></div>
+                    <p class="fancy-text">Data sedang dimuat<span
+                            class="dots"><span>.</span><span>.</span><span>.</span></span></p>
+                </div>
+            </div>
+        </div>
+        <div class="d-flex justify-content-end mt-4">
+            <button type="submit" class="btn btn-primary btn-disabled" disabled><span class="mr-3">Seterusnya</span>
+                <span class="badge alert-warning text-dark font-weight-bold" style="font-size:12px;" id="totalsag">0</span>
+            </button>
+        </div>
+    </form>
+
+    <script>
+        $(document).ready(function() {
+            window.location.href = '{{ $homeUrl }}';
+        });
+    </script>
+@endsection
diff --git a/resources/views/includes/main/head.blade.php b/resources/views/includes/main/head.blade.php
index edf5aec..051457c 100644
--- a/resources/views/includes/main/head.blade.php
+++ b/resources/views/includes/main/head.blade.php
@@ -29,6 +29,8 @@
 <link href="{{ asset('css/material-kit.css') }}" rel="stylesheet">
 <!-- <link href="{{ asset('css/loader.css') }}" rel="stylesheet"> -->
 
+@stack('additional_styles')
+
 <style>
     .bg-crimson {
        background-color: crimson; 
diff --git a/routes/web.php b/routes/web.php
index 4e6a160..4e7b300 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -186,7 +186,8 @@ Route::get('logs', [\Rap2hpoutre\LaravelLogViewer\LogViewerController::class, 'i
 
 // Route::get('/home', 'HomeController@index');
 
-Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
+Route::get('/', [App\Http\Controllers\HomeController::class, 'buffer'])->name('buffer');
+Route::get('/home', [App\Http\Controllers\HomeController::class, 'home'])->name('home');
 
 Auth::routes(['verify' => true]);