diff --git a/resources/js/Permohonan/StatusMohon.vue b/resources/js/Permohonan/StatusMohon.vue
index 06df839..739938c 100644
--- a/resources/js/Permohonan/StatusMohon.vue
+++ b/resources/js/Permohonan/StatusMohon.vue
@@ -5,37 +5,53 @@
         <i class="fas fa-backspace text-yellow-500"></i>
     </router-link>
 
-        <div class="card">
-    
-            <div class="row d-flex justify-content-between px-3 top">
+        <div v-if="this.loadstatus == true" class="card">
     
+            <div class="row flex justify-between px-3 top">
                 <div class="d-flex">
-    
-                    <h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">ARKB120191020-1425</span></h5>
-    
+                    <h5>NO PERMOHONAN : <span class="text-primary font-weight-bold">{{ this.permohonan.nopermohonan }}</span></h5>
+                    <h5>JUMLAH MOHON : <span class="text-primary font-weight-bold">{{ this.permohonan.amaun_mohon }}</span></h5>
                 </div>
-    
+                <div>
+                    <span class="text-white rounded font-weight-bold bg-green-500 p-3">{{ this.permohonan.jenismohon }}</span>
+                </div>                
             </div>
     
             <!-- Add class 'active' to progress -->
     
-            <div class="row flex justify-content-center">
+            <div class="flex w-full mb--10 mt-4">
+        
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6"> 
+                </div>
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/proposal.png">
+                </div>
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/proposal.png">
+                </div>
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/proposal.png">
+                </div>
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6"> <img class="icon mx-auto" src="/img/proposal.png">
+                </div>
+                <div class="row flex flex-col justify-center items-center icon-content w-1/6">
+                </div>
+            </div>
+
+            <div class="flex mt--8">
     
                 <div class="w-full">
     
                     <ul id="progressbar" class="text-center flex">
     
-                        <li class="active step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 1 ? 'active' : ''" class="step0 w-1/6"></li>
     
-                        <li class="active step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 2 ? 'active' : ''" class="step0 w-1/6"></li>
     
-                        <li class="step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 3 ? 'active' : ''" class="step0 w-1/6"></li>
     
-                        <li class="step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 4 ? 'active' : ''" class="step0 w-1/6"></li>
     
-                        <li class="step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 5 ? 'active' : ''" class="step0 w-1/6"></li>
     
-                        <li class="step0 w-1/6"></li>
+                        <li :class="this.permohonan[0].status.length >= 6 ? 'active' : ''" class="step0 w-1/6"></li>
     
                     </ul>
     
@@ -111,7 +127,7 @@
     
         </div>
     
-        <div class="">
+        <div v-if="this.loadstatus == true" class="">
     
     
     
@@ -146,16 +162,14 @@
                     </thead>
     
                     <tbody>
-    
+                        <tr v-for="(status,i) in statusdescription" :key="i">
                         <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">
-    
-                                        2022-03-22
+                                    <p class="text-gray-900 whitespace-no-wrap" v-text="status[0].tarikh">
                                     </p>
     
                                 </div>
@@ -170,10 +184,7 @@
     
                                 <div class="ml-3">
     
-                                    <p class="text-gray-900 whitespace-no-wrap">
-    
-                                        10:30pagi
-    
+                                    <p class="text-gray-900 whitespace-no-wrap" v-text="status[0].masa">
                                     </p>
     
                                 </div>
@@ -188,9 +199,7 @@
     
                                 <div class="ml-3">
     
-                                    <p class="text-gray-900 whitespace-no-wrap">
-
-                                        PENGURUS CAWANGAN MEMBUAT PERMOHONAN WANG DARIPADA PKB.
+                                    <p class="text-gray-900 whitespace-no-wrap" v-text="status.description">
                                     </p>
     
                                 </div>
@@ -198,7 +207,7 @@
                             </div>
     
                         </td>
-    
+                        </tr>
                     </tbody>
     
                 </table>
@@ -366,14 +375,27 @@ export default {
     data(){
         return{
             mohonid: this.$route.params.mohonid,
+            statusdescription:{},
+            permohonan:{},
+            cawangan: 'KB2',
+            loadstatus: false
         }
     },
     created(){
-        console.log(this.mohonid);
+        this.GetStatusData(this.mohonid,this.cawangan);
     },
     methods:{
-        
-    }
+        async GetStatusData(mohonid,cawangan){
+            await this.axios.get(this.$hostname + '/admin/permohonan/description/' + mohonid).then(response => {
+                this.statusdescription = response.data;
+            });
 
+            await this.axios.get(this.$hostname + '/admin/permohonan/get/' + cawangan + '/' + mohonid).then(response => {
+                this.permohonan = response.data;
+
+            });
+            this.loadstatus = true;
+        }
+    }
 }
 </script>