diff --git a/app/Http/Controllers/PermohonanController.php b/app/Http/Controllers/PermohonanController.php
new file mode 100644
index 0000000..4485f12
--- /dev/null
+++ b/app/Http/Controllers/PermohonanController.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Session;
+use Illuminate\Support\Facades\Http;
+use Carbon\Carbon;
+
+class PermohonanController extends Controller
+{
+    public function index()
+    {
+        $api_url = config('api.url');
+        $auth_user = Auth::user();
+
+        return view('permohonan.index',compact('api_url','auth_user'));
+    }
+}
diff --git a/public/img/chequetick.png b/public/img/chequetick.png
new file mode 100644
index 0000000..8655ac0
Binary files /dev/null and b/public/img/chequetick.png differ
diff --git a/public/img/money.png b/public/img/money.png
new file mode 100644
index 0000000..b9422d0
Binary files /dev/null and b/public/img/money.png differ
diff --git a/public/img/operasicek.png b/public/img/operasicek.png
new file mode 100644
index 0000000..e3450d5
Binary files /dev/null and b/public/img/operasicek.png differ
diff --git a/public/img/proposal.png b/public/img/proposal.png
new file mode 100644
index 0000000..7ba83aa
Binary files /dev/null and b/public/img/proposal.png differ
diff --git a/resources/js/Kelulusan/TableKelulusan.vue b/resources/js/Kelulusan/TableKelulusan.vue
index 0c18b8d..d042f38 100644
--- a/resources/js/Kelulusan/TableKelulusan.vue
+++ b/resources/js/Kelulusan/TableKelulusan.vue
@@ -33,7 +33,7 @@
                         {{ kelulusan.kelulusanall[0].tarikh | moment("calendar") }}
 
                         <div class="pl-4">
-                            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1" @click.prevent="ApproveFunc"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
+                            <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-6 border border-green-700 rounded mr-1" @click.prevent="ApproveFunc"><i class="fas fa-thumbs-up mr-1 text-md"></i> Lulus</button>
                             <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-6 border border-red-700 rounded mr-1" @click.prevent="DisapproveFunc"><i class="fas fa-thumbs-down mr-1 text-md"></i> Tidak Lulus</button>
                         </div>
                     </div>
diff --git a/resources/js/Online/SearchSAG.vue b/resources/js/Online/SearchSAG.vue
index 36575ad..2f51b8c 100644
--- a/resources/js/Online/SearchSAG.vue
+++ b/resources/js/Online/SearchSAG.vue
@@ -127,7 +127,7 @@
                     <div class="ml-3">
                       <p class="text-gray-900 whitespace-no-wrap">
                          
-                         <span v-if="cust.status === 'PAID'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-green-200 text-xs font-semibold text-green-600 uppercase">
+                         <span v-if="cust.status === 'PAID'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-yellow-200 text-xs font-semibold text-green-600 uppercase">
                           {{ cust.status }}
                         </span>
                          <span v-if="cust.status === 'NOT PAID'" class="inlint-block mr-1 last:mr-0 py-1 px-2 rounded bg-yellow-200 text-xs font-semibold text-yellow-600 uppercase">
diff --git a/resources/js/Permohonan/SenaraiMohon.vue b/resources/js/Permohonan/SenaraiMohon.vue
new file mode 100644
index 0000000..36dc79b
--- /dev/null
+++ b/resources/js/Permohonan/SenaraiMohon.vue
@@ -0,0 +1,610 @@
+<template>
+    <div class="mx-auto">
+
+      <!-- <h1 class="font-bold flex justify-center">Senarai Cawangan dan Baki Peti Besi </h1> -->
+
+<!-- 
+    <div class="flex justify-center items-center">
+      <table class="w-2/3 justify-center items-center leading-normal">
+            <thead class="text-center">
+              <tr>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Cawangan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Peti Besi (RM)
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Cawangan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Peti Besi (RM)
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Cawangan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Peti Besi (RM)
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Cawangan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Peti Besi (RM)
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                 <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          100,000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+      </table>
+    </div> -->
+
+
+      <div class="mx-auto flex justify-between mb-4">
+        <h1 class="font-bold flex flex-row justify-end">Permohonan Yang Masih Aktif</h1>
+        <button class="p-2 text-white bg-blue-500 rounded">Rekod Permohonan</button>
+      </div>
+
+        <table class="min-w-full leading-normal">
+            <thead class="text-center">
+              <tr>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Cawangan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  No Permohonan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Tarikh Mohon
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Jumlah Mohon (RM)
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Bayaran Balik (RM)
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Status
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Jenis Permohonan
+                </th>
+                <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                  Act
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Kota Bharu 2
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          ARKB120191020-1425
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          s2019-19-20
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          50000
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          0.00
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          <span class="p-2 w-full bg-green-500 rounded text-white">Baru</span>
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <p class="text-gray-900 whitespace-no-wrap">
+                          Permohonan Wang
+                      </p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                  <div class="flex items-center">
+                    <div class="ml-3">
+                      <div class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">
+                      <router-link to="/permohonan/status">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
+                        <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
+                        <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+                        </svg>
+                      </router-link>
+
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+    </div>  
+</template>
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/Permohonan/StatusMohon.vue b/resources/js/Permohonan/StatusMohon.vue
new file mode 100644
index 0000000..ea5df08
--- /dev/null
+++ b/resources/js/Permohonan/StatusMohon.vue
@@ -0,0 +1,241 @@
+<template>
+<div class="container px-1 px-md-4 py-5 mx-auto">
+    <div class="card">
+        <div class="row d-flex justify-content-between px-3 top">
+            <div class="d-flex">
+                <h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">ARKB120191020-1425</span></h5>
+            </div>
+        </div> <!-- Add class 'active' to progress -->
+        <div class="row d-flex justify-content-center">
+            <div class="w-full">
+                <ul id="progressbar" class="text-center">
+                    <li class="active step0"></li>
+                    <li class="active step0"></li>
+                    <li class="active step0"></li>
+                    <li class="active step0"></li>
+                    <li class="active step0"></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="flex w-full">
+            <div class="row flex flex-col justify-center items-center icon-content w-1/5 "> <img class="icon mx-auto" src="/img/proposal.png">
+                <div class="flex flex-column">
+                    <p class="font-weight-bold text-center">PPC / PC<br>Mohon Wang</p>
+                </div>
+            </div>
+            <div class="flex flex-col justify-center items-center icon-content w-1/5"> <img class="icon mx-auto" src="/img/operasicek.png">
+                <div class="flex flex-column">
+                    <p class="font-weight-bold text-center">Operasi <br> Mengesahkan <br> Permohonan</p>
+                </div>
+            </div>
+            <div class="flex flex-col justify-center items-center icon-content w-1/5"> <img class="icon mx-auto" src="/img/operasicek.png">
+                <div class="d-flex flex-column">
+                    <p class="font-weight-bold text-center">Akaun <br> Mengesahkan<br> Permohonan</p>
+                </div>
+            </div>
+            <div class="flex flex-col justify-center items-center icon-content w-1/5"> <img class="icon mx-auto" src="/img/chequetick.png">
+                <div class="d-flex flex-column">
+                    <p class="font-weight-bold text-center">Akaun <br> Menghantar <br> Deposit</p>
+                </div>
+            </div>
+            <div class="flex flex-col justify-center items-center icon-content w-1/5"> <img class="icon mx-auto" src="/img/money.png">
+                <div class="d-flex flex-column">
+                    <p class="font-weight-bold text-center">PPC / PC <br> Terima Wang</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="">
+
+        <div class="p-4 flex justify-center items-center">
+            <table class="w-2/3 leading-normal">
+                <thead class="text-center">
+                    <tr>
+                        <th class="text-center w-1/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            Tarikh
+                        </th>
+                        <th class="text-center w-1/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            Masa
+                        </th>
+                        <th class="w-3/5 px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+                            Status Permohonan
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <td class="text-center px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                        <div class="flex items-center">
+                            <div class="ml-3">
+                                <p class="text-gray-900 whitespace-no-wrap">
+                                    Kota Bharu 2
+                                </p>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                        <div class="text-center flex items-center">
+                            <div class="ml-3">
+                                <p class="text-gray-900 whitespace-no-wrap">
+                                    Kota Bharu 2
+                                </p>
+                            </div>
+                        </div>
+                    </td>
+                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
+                        <div class="flex items-center">
+                            <div class="ml-3">
+                                <p class="text-gray-900 whitespace-no-wrap">
+                                    Kota Bharu 2
+                                </p>
+                            </div>
+                        </div>
+                    </td>
+                </tbody>
+            </table>
+        </div>
+        <!-- <div class="row flex justify-between px-3 top">
+                 <div class="d-flex">
+                     <h6><span class="text-primary font-weight-bold">2020-05-27 11:26:08 AM </span>REQUEST CREATED</h6>
+                 </div>
+             </div>
+             <div class="row d-flex justify-content-between px-3 top">
+                 <div class="d-flex">
+                     <h6><span class="text-primary font-weight-bold">2020-06-04 06:59:48 AM </span>ATTEMPT 1 COMPLETED. ~ ***[AUTO GENERATED BY GRASSHOPPERS]***</h6>
+                 </div>
+             </div>
+             <div class="row d-flex justify-content-between px-3 top">
+                 <div class="d-flex">
+                     <h6><span class="text-primary font-weight-bold">2020-06-04 06:59:48 AM </span>RETURN TO VENDOR RECORD CREATED ~ RC806_118 </h6>
+                 </div>
+             </div> -->
+    </div>
+</div>
+</template>
+
+<style scoped>
+.card {
+    z-index: 0;
+    background-color: #ECEFF1;
+    padding-bottom: 20px;
+    margin-top: 90px;
+    margin-bottom: 90px;
+    border-radius: 10px
+}
+
+.top {
+    padding-top: 40px;
+    padding-left: 13% !important;
+    padding-right: 13% !important
+}
+
+#progressbar {
+    margin-bottom: 30px;
+    overflow: hidden;
+    color: #455A64;
+    padding-left: 0px;
+    margin-top: 30px;
+}
+
+#progressbar li {
+    list-style-type: none;
+    font-size: 13px;
+    width: 20%;
+    float: left;
+    position: relative;
+    font-weight: 400;
+    z-index: 1;
+}
+
+#progressbar .step0:before {
+    font-family: FontAwesome;
+    content: "\f00d";
+    color: #fff;
+}
+
+#progressbar li:before {
+    width: 40px;
+    height: 40px;
+    line-height: 45px;
+    display: block;
+    font-size: 20px;
+    background: #C5CAE9;
+    border-radius: 50%;
+    margin: auto;
+    padding: 0px;
+}
+
+#progressbar li:after {
+    content: '';
+    width: 100%;
+    height: 12px;
+    background: #c5cae9e8;
+    position: absolute;
+    left: 0;
+    top: 16px;
+    z-index: -1;
+}
+
+#progressbar li:last-child:after {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    position: absolute;
+    /* left: -50%; */
+    width: 50%;
+}
+
+/* #progressbar li:nth-child(2):after,
+#progressbar li:nth-child(3):after,
+#progressbar li:nth-child(4):after {
+    left: -50%
+}  */
+
+#progressbar li:first-child:after {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    position: absolute;
+    left: 50%
+}
+
+#progressbar li:last-child:after {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px
+}
+
+#progressbar li:first-child:after {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px
+}
+
+#progressbar li.active:before,
+#progressbar li.active:after {
+    background: #e67e22
+}
+
+#progressbar li.active:before {
+    font-family: FontAwesome;
+    content: "\f00c"
+}
+
+.icon {
+    width: 60px;
+    height: 60px;
+    /* margin-right: 15px */
+}
+
+.icon-content {
+    padding-bottom: 20px
+}
+
+@media screen and (max-width: 992px) {
+    .icon-content {
+        width: 50%
+    }
+}
+</style>
+
+<script>
+export default {
+
+}
+</script>
diff --git a/resources/js/Permohonan/index.vue b/resources/js/Permohonan/index.vue
new file mode 100644
index 0000000..580934b
--- /dev/null
+++ b/resources/js/Permohonan/index.vue
@@ -0,0 +1,10 @@
+<template>
+         <router-view>
+         </router-view>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 19bcbcf..16b39d4 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -119,15 +119,15 @@ Vue.use(require('vue-pusher'), {
     }
 });
 
-Vue.prototype.$api1 = 'http://api.arrahn'
+Vue.prototype.$api1 = 'http://localhost:8000'
 
 let initial = 'KB2';
-let initialhostname = 'http://api.arrahn';
+let initialhostname = 'http://localhost:8000';
 
 const store = new Vuex.Store({
     state: { 
         $kodcaw: 'KB2',
-        $hostname: 'http://api.arrahn' 
+        $hostname: 'http://localhost:8000' 
     },
     plugins: [createPersistedState()],
     mutations: { 
@@ -209,6 +209,11 @@ Vue.component('clock-component', require('./components/util/Clock.vue').default)
 Vue.component('logout-component', require('./Logout.vue').default)
 Vue.component('notify-component', require('./components/util/Notify.vue').default)
 
+
+Vue.component('permohonanindex-component', require('./Permohonan/index.vue').default)
+
+Vue.component('permohonan-component', require('./Permohonan/SenaraiMohon.vue').default)
+
 Vue.component('apexchart', VueApexCharts)
 
 
diff --git a/resources/js/components/Cawangan.vue b/resources/js/components/Cawangan.vue
index 2f4c63a..30ff797 100644
--- a/resources/js/components/Cawangan.vue
+++ b/resources/js/components/Cawangan.vue
@@ -84,7 +84,7 @@
                     case 'JLI':
                     case 'ARP':
                     case '020303':{
-                        this.sethostname('http://api.arrahn')
+                        this.sethostname('http://localhost:8000')
                         break;
                     }
                     case '010621':
@@ -114,7 +114,7 @@
                         this.sethostname('http://api3.arrahn')
                         break;
                     }
-                    default: this.sethostname('http://api.arrahn')
+                    default: this.sethostname('http://localhost:8000')
                              break;
                 }
             }
diff --git a/resources/js/components/util/BlacklistModal.vue b/resources/js/components/util/BlacklistModal.vue
index d419b9a..654bc61 100644
--- a/resources/js/components/util/BlacklistModal.vue
+++ b/resources/js/components/util/BlacklistModal.vue
@@ -66,7 +66,7 @@
             <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" v-on:click="toggleModal()" type="button">
               Batal
             </button>
-            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="kemaskinifunc" type="button" >
+            <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="kemaskinifunc" type="button" >
               Daftar
             </button>
           </div>
diff --git a/resources/js/components/util/KomenModal.vue b/resources/js/components/util/KomenModal.vue
index a8db475..d0c16bf 100644
--- a/resources/js/components/util/KomenModal.vue
+++ b/resources/js/components/util/KomenModal.vue
@@ -22,7 +22,7 @@
             <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 border border-gray-700 rounded mr-1" @click="toggleModal" type="button">
               Batal
             </button>
-            <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="toggleModal" type="button" >
+            <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 border border-green-700 rounded" @click="toggleModal" type="button" >
               Lulus
             </button>
           </div>
diff --git a/resources/js/components/util/Modal.vue b/resources/js/components/util/Modal.vue
index 7cf3bd9..5ef677e 100644
--- a/resources/js/components/util/Modal.vue
+++ b/resources/js/components/util/Modal.vue
@@ -74,9 +74,9 @@
             </div>
 
             <div class="flex flex-wrap -mx-3 mb-3">
-              <div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
+              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                 <div class="flex flex-row">
-                  <div class="bg-green-500 px-4 py-6 rounded-l-2xl">
+                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">PE</h2>
                   </div>
 
@@ -99,9 +99,9 @@
             </div>
 
             <div class="flex flex-wrap -mx-3 mb-3">
-              <div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
+              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                 <div class="flex flex-row">
-                  <div class="bg-green-500 px-4 py-6 rounded-l-2xl">
+                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">TS</h2>
                   </div>
                   <div class="my-auto mx-auto">
diff --git a/resources/js/components/util/ModalTransaction.vue b/resources/js/components/util/ModalTransaction.vue
index 9c12fc6..ca667f4 100644
--- a/resources/js/components/util/ModalTransaction.vue
+++ b/resources/js/components/util/ModalTransaction.vue
@@ -26,7 +26,7 @@
                   <!-- <input readonly class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:border-gray-500" v-model="referencestatus" type="text" placeholder="Paid"> -->
                 <div class="flex items-center flex-shrink-0 text-sm px-2">
                   <div class="px-2 py-1 rounded-l-md bg-gray-200 text-gray-600 cursor-pointer">TRANSACTION</div>
-                  <div class="px-2 py-1 rounded-r-md bg-green-400 text-white cursor-pointer">{{ this.referencestatus }}</div>
+                  <div class="px-2 py-1 rounded-r-md bg-yellow-400 text-white cursor-pointer">{{ this.referencestatus }}</div>
                 </div>
               </div>
 
diff --git a/resources/js/components/util/PetiBesiModal.vue b/resources/js/components/util/PetiBesiModal.vue
index b11d46f..848bc7f 100644
--- a/resources/js/components/util/PetiBesiModal.vue
+++ b/resources/js/components/util/PetiBesiModal.vue
@@ -70,9 +70,9 @@
             </div>
 
               <div class="flex flex-wrap -mx-3 mb-3">
-              <div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
+              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                 <div class="flex flex-row">
-                  <div class="bg-green-500 px-4 py-6 rounded-l-2xl">
+                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
 
                      <h2 class="font-bold text-lg">STL</h2>
 
@@ -96,9 +96,9 @@
             </div>
 
             <div class="flex flex-wrap -mx-3 mb-3">
-              <div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
+              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2 w-1/3">
                 <div class="flex flex-row">
-                  <div class="bg-green-500 px-4 py-6 rounded-l-2xl">
+                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">PHQ</h2>
                   </div>
                   <div class="my-auto mx-auto">
@@ -120,9 +120,9 @@
             </div>
 
             <div class="flex flex-wrap -mx-3 mb-3">
-              <div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2">
+              <div class="bg-yellow-300 text-white h-26 flex-auto rounded-2xl ml-2">
                 <div class="flex flex-row">
-                  <div class="bg-green-500 px-4 py-6 rounded-l-2xl">
+                  <div class="bg-yellow-500 px-4 py-6 rounded-l-2xl">
                      <h2 class="font-bold text-lg">BAK</h2>
                   </div>
                   <div class="my-auto mx-auto">
diff --git a/resources/js/pages/Blacklist.vue b/resources/js/pages/Blacklist.vue
index 405bc3e..41a4abe 100644
--- a/resources/js/pages/Blacklist.vue
+++ b/resources/js/pages/Blacklist.vue
@@ -6,7 +6,7 @@
 
       <div class="flex justify-between mb-2">
         <div>
-            <button @click.prevent="showModal" class="border border-green-600 text-green-600 font-montserrat py-2 px-3 font-medium rounded-xl hover:bg-green-600 hover:text-white transition-all duration-300"><i class="fas fa-plus mr-2"></i>Tambah</button>
+            <button @click.prevent="showModal" class="border border-green-600 text-green-600 font-montserrat py-2 px-3 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><i class="fas fa-plus mr-2"></i>Tambah</button>
         </div>
         <div>
           <input v-model="search" class="border border-2 rounded px-4 py-2 w-80r mr-2 " type="text" />
diff --git a/resources/js/pages/Detailspelanggan.vue b/resources/js/pages/Detailspelanggan.vue
index 04e4835..27a862f 100644
--- a/resources/js/pages/Detailspelanggan.vue
+++ b/resources/js/pages/Detailspelanggan.vue
@@ -762,7 +762,7 @@ export default {
       }
     },
     getDataSenaraiSAG: function(pageNumber){
-      this.axios.get('http://api.arrahn/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
+      this.axios.get('http://localhost:8000/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
         page: pageNumber
       }}).then(response => {
         if(this.selected === 'belum_tebus')
@@ -793,7 +793,7 @@ export default {
 
     },
     searchsag: function(){
-      this.axios.get('http://api.arrahn/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
+      this.axios.get('http://localhost:8000/admin/customers/' + this.icnoasal + '/gadai/' + this.selected,{params: {
         page: 0,
         search: this.search
       }}).then(response => {
diff --git a/resources/js/pages/dashboard.vue b/resources/js/pages/dashboard.vue
index e735684..11d77d7 100644
--- a/resources/js/pages/dashboard.vue
+++ b/resources/js/pages/dashboard.vue
@@ -326,7 +326,7 @@
                                  <span class="mr-2 text-xs font-medium">18%</span>
                                  <div class="relative w-full">
                                     <div class="w-full bg-gray-200 rounded-sm h-2">
-                                       <div class="bg-teal-400 h-2 rounded-sm" style="width: 18%"></div>
+                                       <div class="bg-yellow-400 h-2 rounded-sm" style="width: 18%"></div>
                                     </div>
                                  </div>
                               </div>
diff --git a/resources/js/routes.js b/resources/js/routes.js
index 462474c..b5cc236 100644
--- a/resources/js/routes.js
+++ b/resources/js/routes.js
@@ -24,6 +24,9 @@ import OnlineHome from './Online/SearchSAG'
 import SenaraiBajet from './Bajet/Senaraibajet'
 import BajetKemaskini from './Bajet/KemaskiniBajet'
 
+import SenaraiMohon from './Permohonan/SenaraiMohon'
+import StatusMohon from './Permohonan/StatusMohon'
+
 
 
 
@@ -52,7 +55,10 @@ export default new VueRouter({
 
 
         { path: '/bajet/kemaskini', component: SenaraiBajet },
-        { name: 'bajetkemaskini',path: '/bajet/kemaskini/:id', component: BajetKemaskini }
+        { name: 'bajetkemaskini',path: '/bajet/kemaskini/:id', component: BajetKemaskini },
+
+        { path: '/permohonan', component: SenaraiMohon },
+        { path: '/permohonan/status', component: StatusMohon },
 
     ],
     mode: 'history'
diff --git a/resources/views/auth/login-backup.blade.php b/resources/views/auth/login-backup.blade.php
new file mode 100644
index 0000000..97a864d
--- /dev/null
+++ b/resources/views/auth/login-backup.blade.php
@@ -0,0 +1,59 @@
+@extends('layouts.app')
+
+@section('content')
+<div>
+    
+    <div class="p-20 items-center justify-center">
+      
+        {{-- <div class="content text-3xl text-center md:text-left">
+          <h1 class="text-5xl text-blue-500 font-bold">Facebook</h1>
+          <img src="{{ asset('img/logo_arrahn_baru.png') }}" width="400">
+          <p>Pajak Gadai Islam.</p>
+        </div> --}}
+
+        <div class="container mx-auto flex flex-col items-center">
+
+          <form class="shadow-lg w-1/3 p-4 flex flex-col bg-white rounded-lg" method="POST" action="{{ route('login') }}">
+            <img class="mx-auto" src="{{ asset('img/logo_arrahn_baru.png') }}" width="200">
+
+            @csrf
+
+            @if (Session::has('error'))
+            {{-- <div class="alert alert-success" role="alert">
+                <p></p>
+            </div> --}}
+            <div role="alert" class="mb-2">
+                <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
+                  Danger
+                </div>
+                <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
+                  <p>{{ Session::get('error') }}</p>
+                </div>
+              </div>
+            @endif
+
+            <label class="block text-gray-700 text-sm font-bold mb-2">Emel</label>
+            <div class="mb-4">
+                <input type="text" name="email" placeholder="Email" class="@error('email') border-red-500 @enderror mb-3 py-3 px-4 w-full border border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500" />
+                @error('email')
+                <p class="text-red-500 text-xs italic">{{ $message }}</p>
+                @enderror
+            </div>
+            <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
+            <div class="mb-4">
+                <input type="password" name="password" placeholder="Password" class="@error('password') border-red-500 @enderror mb-3 py-3 px-4 w-full border border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500" />
+                @error('password')
+                <p class="text-red-500 text-xs italic">{{ $message }}</p>
+                @enderror
+            </div>
+            <button class="w-full bg-blue-500 text-white p-3 rounded-lg font-semibold text-lg">Login</button>
+            <a class="text-blue-400 text-center my-2">Forgot Pasword?</a>
+          </form>
+          <p class="text-center text-sm my-4">
+             Permodalan Kelantan Berhad
+          </p>
+        </div>
+      </div>
+      
+</div>
+@endsection
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 97a864d..ef4f73a 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,59 +1,184 @@
-@extends('layouts.app')
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" style="width:100%;height:100%;">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-@section('content')
-<div>
-    
-    <div class="p-20 items-center justify-center">
-      
-        {{-- <div class="content text-3xl text-center md:text-left">
-          <h1 class="text-5xl text-blue-500 font-bold">Facebook</h1>
-          <img src="{{ asset('img/logo_arrahn_baru.png') }}" width="400">
-          <p>Pajak Gadai Islam.</p>
-        </div> --}}
+        <title>Laravel</title>
 
-        <div class="container mx-auto flex flex-col items-center">
+        <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
 
-          <form class="shadow-lg w-1/3 p-4 flex flex-col bg-white rounded-lg" method="POST" action="{{ route('login') }}">
-            <img class="mx-auto" src="{{ asset('img/logo_arrahn_baru.png') }}" width="200">
+        {{-- <!-- Styles -->
+        <style>
+            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:#6b7280;color:rgba(107,114,128,var(--tw-text-opacity))}}
+        </style> --}}
 
-            @csrf
+        <style>
+            body {
+                font-family: 'Nunito', sans-serif;
+                background-color:#e1b12c;
+            }
 
-            @if (Session::has('error'))
-            {{-- <div class="alert alert-success" role="alert">
-                <p></p>
-            </div> --}}
-            <div role="alert" class="mb-2">
-                <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
-                  Danger
-                </div>
-                <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
-                  <p>{{ Session::get('error') }}</p>
-                </div>
-              </div>
-            @endif
+            .waves{
+                /* background-color:#ecf0f1; */
+                width:100%;
+                height: 100%;
+            }
 
-            <label class="block text-gray-700 text-sm font-bold mb-2">Emel</label>
-            <div class="mb-4">
-                <input type="text" name="email" placeholder="Email" class="@error('email') border-red-500 @enderror mb-3 py-3 px-4 w-full border border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500" />
-                @error('email')
-                <p class="text-red-500 text-xs italic">{{ $message }}</p>
-                @enderror
+            .waves .logo{
+                z-index:1;
+                position:absolute;
+                top:25%;
+                left:5%;
+                /* margin-top:-75%; */
+            }
+
+            .loginform{
+                    position:absolute;
+                    top:30%;
+                    right:20%;
+                }
+
+            @media screen and (max-width: 1440px) {
+                .loginform{
+                    position:absolute;
+                    top:30%;
+                    right:20%;
+                }
+            }
+
+            @media screen and (max-width: 1024px) {
+                .loginform{
+                    position:absolute;
+                    top:30%;
+                    right:10%;
+                }
+            }
+
+            .login-page {
+                width: 360px;
+                padding: 8% 0 0;
+                margin: auto;
+            }
+            .form {
+                position: relative;
+                z-index: 1;
+                background: #FFFFFF;
+                max-width: 360px;
+                margin: 0 auto 100px;
+                padding: 45px;
+                text-align: center;
+                box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
+            }
+            .form input {
+                font-family: "Roboto", sans-serif;
+                outline: 0;
+                background: #f2f2f2;
+                width: 100%;
+                border: 0;
+                margin: 0 0 15px;
+                padding: 15px;
+                box-sizing: border-box;
+                font-size: 14px;
+            }
+            .form button {
+                font-family: "Roboto", sans-serif;
+                text-transform: uppercase;
+                outline: 0;
+                background: #4CAF50;
+                width: 100%;
+                border: 0;
+                padding: 15px;
+                color: #FFFFFF;
+                font-size: 14px;
+                -webkit-transition: all 0.3 ease;
+                transition: all 0.3 ease;
+                cursor: pointer;
+            }
+            .form button:hover,.form button:active,.form button:focus {
+                background: #43A047;
+            }
+            .form .message {
+                margin: 15px 0 0;
+                color: #b3b3b3;
+                font-size: 12px;
+            }
+            .form .message a {
+                color: #4CAF50;
+                text-decoration: none;
+            }
+            .form .register-form {
+                display: none;
+            }
+            .container {
+                position: relative;
+                z-index: 1;
+                max-width: 300px;
+                margin: 0 auto;
+            }
+            .container:before, .container:after {
+                content: "";
+                display: block;
+                clear: both;
+            }
+            .container .info {
+                margin: 50px auto;
+                text-align: center;
+            }
+            .container .info h1 {
+                margin: 0 0 15px;
+                padding: 0;
+                font-size: 36px;
+                font-weight: 300;
+                color: #1a1a1a;
+            }
+            .container .info span {
+                color: #4d4d4d;
+                font-size: 12px;
+            }
+            .container .info span a {
+                color: #000000;
+                text-decoration: none;
+            }
+            .container .info span .fa {
+                color: #EF3B3A;
+            }
+
+
+        </style>
+    </head>
+    <body class="antialiased" style="width:100%;height:100%;margin:0;">
+
+            <div class="waves">
+                <svg height="100%" width="100%">
+                    <circle cx="0" cy="220" r="55%" fill="white" />
+                </svg>
+                <img class="logo" style="z-index:1;" src="{{ asset('img/logo_arrahn_baru.png') }}" height="40%" width="25%"/>
             </div>
-            <label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
-            <div class="mb-4">
-                <input type="password" name="password" placeholder="Password" class="@error('password') border-red-500 @enderror mb-3 py-3 px-4 w-full border border-gray-400 focus:outline-none rounded-md focus:ring-1 ring-cyan-500" />
-                @error('password')
-                <p class="text-red-500 text-xs italic">{{ $message }}</p>
-                @enderror
+
+
+            <div class="loginform">
+                <div class="login-page">
+                    <div class="form">
+                      @if (Session::has('error'))
+                      <div role="alert" class="mb-2">
+                          <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
+                            Danger
+                          </div>
+                          <div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
+                            <p>{{ Session::get('error') }}</p>
+                          </div>
+                        </div>
+                      @endif
+                      <form class="login-form" method="POST" action="{{ route('login') }}">
+                        @csrf
+                        <input type="text" placeholder="email" name="email"/>
+                        <input type="password" placeholder="password" name="password"/>
+                        <button>DAFTAR MASUK</button>
+                      </form>
+                    </div>
+                  </div>
             </div>
-            <button class="w-full bg-blue-500 text-white p-3 rounded-lg font-semibold text-lg">Login</button>
-            <a class="text-blue-400 text-center my-2">Forgot Pasword?</a>
-          </form>
-          <p class="text-center text-sm my-4">
-             Permodalan Kelantan Berhad
-          </p>
-        </div>
-      </div>
-      
-</div>
-@endsection
+    </body>
+</html>
diff --git a/resources/views/bajet/home.blade.php b/resources/views/bajet/home.blade.php
index facca1f..b4c0ef2 100644
--- a/resources/views/bajet/home.blade.php
+++ b/resources/views/bajet/home.blade.php
@@ -11,7 +11,7 @@
 
          
          @if (Session::has('type'))
-         <div class="@if(Session::get('type') == 'error') bg-red-100 border-red-500 text-red-900 @else bg-green-100 border-green-500 text-green-900 @endif  border-t-4 rounded-b px-4 py-3 shadow-md w-96 mx-auto mb-5" role="alert">
+         <div class="@if(Session::get('type') == 'error') bg-red-100 border-red-500 text-red-900 @else bg-yellow-100 border-green-500 text-green-900 @endif  border-t-4 rounded-b px-4 py-3 shadow-md w-96 mx-auto mb-5" role="alert">
             <div class="flex">
               <div class="py-1">
                   @if(Session::get('type') == 'error')
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5546a14..a97045e 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -114,7 +114,7 @@
                   <div class="flex items-center justify-start">     
                      
                     
-                    <button id="toggleSidebarMobile" @if(Auth::user()->roles == 'admin' || Auth::user()->roles == 'operasi') onclick="openNav()" @endif aria-expanded="true" aria-controls="sidebar" class=" mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 rounded">
+                    <button id="toggleSidebarMobile" onclick="openNav()" aria-expanded="true" aria-controls="sidebar" class=" mr-2 text-gray-600 hover:text-gray-900 cursor-pointer p-2 hover:bg-gray-100 rounded">
                         <svg id="toggleSidebarMobileHamburger" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                         </svg>
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
index 08e4444..44ce0b3 100644
--- a/resources/views/layouts/sidebar.blade.php
+++ b/resources/views/layouts/sidebar.blade.php
@@ -181,6 +181,18 @@
                     </div>
                 </li>
             </a>
+
+            <a href="{{ route('permohonan.index') }}" class="rounded mb-2 mr-2 {{ Route::is('permohonan') || Route::is('permohonan.*')  ? 'bg-gray-200 rounded text-white-500' : 'hover:bg-yellow-300 ' }}">
+                <li class="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center ">
+                    <div class="flex items-center">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
+                          </svg>
+                        <span class="text-sm ml-2 text-lg">Permohonan</span>
+                    </div>
+                </li>
+            </a>
+
             @endif
             
 
diff --git a/resources/views/permohonan/bayaran-balik.blade.php b/resources/views/permohonan/bayaran-balik.blade.php
new file mode 100644
index 0000000..35d1338
--- /dev/null
+++ b/resources/views/permohonan/bayaran-balik.blade.php
@@ -0,0 +1,18 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+   <main>
+
+      <div class="pt-6 px-4">
+          
+      <breadcrumb :items="[{ 'title' : 'Online', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
+
+      {{-- <online-component></online-component> --}}
+
+
+      </div>
+   </main>
+   @include('layouts.footer')
+@endsection
diff --git a/resources/views/permohonan/index.blade.php b/resources/views/permohonan/index.blade.php
new file mode 100644
index 0000000..c9a6879
--- /dev/null
+++ b/resources/views/permohonan/index.blade.php
@@ -0,0 +1,20 @@
+
+@extends('layouts.app')
+
+@section('content')
+<div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
+<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+   <main>
+
+      <div class="pt-6 px-4">
+          
+      <breadcrumb :items="[{ 'title' : 'Permohonan Wang', 'icon' : 'fas fa-globe-asia' }]"></breadcrumb>
+
+
+      <permohonanindex-component></permohonanindex-component>
+
+
+      </div>
+   </main>
+   @include('layouts.footer')
+@endsection
diff --git a/routes/web.php b/routes/web.php
index bdd1f0a..45dfe0f 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,6 +27,10 @@ Route::post('logout', ['as' => 'logout', 'uses' => 'App\Http\Controllers\Auth\Lo
 Route::get('login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
 Route::post('login', 'App\Http\Controllers\Auth\LoginController@authenticate');
 
+Route::get('/welcome', function () {
+    return view('welcome');
+});
+
 Route::get('/', [App\Http\Controllers\HomeController::class,'index'])->name('index');
 Route::get('/home', [App\Http\Controllers\HomeController::class, 'indexhome'])->name('home')->middleware(['roleChecker:admin,null,operasi']);
 Route::get('/akaunhome', [App\Http\Controllers\HomeController::class, 'indexakaun'])->name('akaun.home')->middleware(['roleChecker:admin,akaun,operasi']);
@@ -91,3 +95,7 @@ Route::get('/resit/tebusseparuh/{id}',['as'=>'resit.tebusseparuh','uses'=>'App\H
 Route::get('/resit/belumtebus/{id}',['as'=>'resit.belumtebus','uses'=>'App\Http\Controllers\ResitController@resitbelumtebus']);
 Route::get('/resit/tambahpinjam/{id}',['as'=>'resit.tambahpinjam','uses'=>'App\Http\Controllers\ResitController@resittambahpinjam']);
 Route::get('/resit/tebusautotawarruq/{id}',['as'=>'resit.autotawarruq','uses'=>'App\Http\Controllers\ResitController@resitautotawarruq']);
+
+
+//Permohonan Wang
+Route::get('/permohonan',['as'=>'permohonan.index','uses'=>'App\Http\Controllers\PermohonanController@index']);