diff --git a/src/components/home/CurrentKaratDetail.vue b/src/components/home/CurrentKaratDetail.vue
index 1e196a5..7a95618 100644
--- a/src/components/home/CurrentKaratDetail.vue
+++ b/src/components/home/CurrentKaratDetail.vue
@@ -36,7 +36,7 @@
             <td scope="col">Harga</td>
           </tr>
           <tr>
-            <td colspan="5" class="text-center">Tiada Data</td>
+            <td colspan="5" class="text-center text-500">Tiada Data</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/components/home/LelongNextDetail.vue b/src/components/home/LelongNextDetail.vue
index f757dd1..0126fb1 100644
--- a/src/components/home/LelongNextDetail.vue
+++ b/src/components/home/LelongNextDetail.vue
@@ -33,7 +33,7 @@
             <td>Tarikh</td>
           </tr>
           <tr>
-            <td colspan="4" class="text-center">Tiada Data</td>
+            <td colspan="4" class="text-center text-500">Tiada Data</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index 411ddf7..bd16ffb 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/src/components/home/LelongTodayDetail.vue
@@ -38,7 +38,7 @@
             <td>Masa Tamat</td>
           </tr>
           <tr>
-            <td colspan="100" class="text-center">Tiada Data</td>
+            <td colspan="100" class="text-center text-500">Tiada Data</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/components/profile/TheProfile.vue b/src/components/profile/TheProfile.vue
index b5a2ef5..ec78c20 100644
--- a/src/components/profile/TheProfile.vue
+++ b/src/components/profile/TheProfile.vue
@@ -1,69 +1,93 @@
 <template>
   <the-template>
-    <base-card>
+    <div v-if="loading" class="fadein animation-duration-400">
       <div
-        v-if="loading"
-        style="min-height: 70vh; display: grid; place-items: center"
+        class="flex align-items-center justify-content-center container-height"
       >
         <div class="spinner-border" role="status">
           <span class="visually-hidden">Loading...</span>
         </div>
       </div>
-
-      <div v-else class="container">
-        <h5>PROFIL</h5>
-        <div class="card-body">
-          <!-- <img
-            src="../../assets/profile.png"
-            alt="profile photo"
-            style="width: 225px; height: 230px"
-          /> -->
-          <div v-if="this.status">
-            <div class="row justify-content-center mt-4 mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                Nama
+    </div>
+    <div else style="min-height: 70vh">
+      <div v-if="status">
+        <div
+          class="
+            flex
+            align-items-center
+            justify-content-center
+            container-height
+            fadein
+            animation-duration-400
+          "
+        >
+          <Card>
+            <template #title>
+              <div class="text-center">Profil Pengguna</div>
+            </template>
+            <template #content>
+              <div class="text-center">
+                <Avatar icon="pi pi-user" size="xlarge" />
+                <div class="mt-3">
+                  <div
+                    class="
+                      grid
+                      col-11 col-offset-1
+                      lg:col-8 lg:col-offset-2
+                      justify-content-center
+                    "
+                  >
+                    <div class="col-12 lg:col-5 text-start text-400">Nama</div>
+                    <div class="col-12 lg:col-6 text-start value-form">
+                      {{ data.name }}
+                    </div>
+                    <div class="col-12 lg:col-5 text-start text-400">
+                      Username
+                    </div>
+                    <div class="col-12 lg:col-6 text-start value-form">
+                      {{ data.username }}
+                    </div>
+                    <div class="col-12 lg:col-5 text-start text-400">
+                      No Kad Pengenalan
+                    </div>
+                    <div class="col-12 lg:col-6 text-start value-form">
+                      {{ data.nokp }}
+                    </div>
+                    <div class="col-12 lg:col-5 text-start text-400">
+                      No Tel Bimbit
+                    </div>
+                    <div class="col-12 lg:col-6 text-start value-form">
+                      {{ data.notelbimbit }}
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div class="col-5 text_border">{{ data.name }}</div>
-            </div>
-            <div class="row justify-content-center mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                Username
-              </div>
-              <div class="col-5 text_border">{{ data.username }}</div>
-            </div>
-            <div class="row justify-content-center mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                No Kad Pengenalan
-              </div>
-              <div class="col-5 text_border">{{ data.nokp }}</div>
-            </div>
-            <div class="row justify-content-center mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                No Tel Bimbit
-              </div>
-              <div class="col-5 text_border">{{ data.notelbimbit }}</div>
-            </div>
-            <div class="row justify-content-center mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                Front IC
-              </div>
-              <div class="col-5 text_border" style="height: 200px">
-                {{ data.filename }}
-              </div>
-            </div>
-            <div class="row justify-content-center mb-1">
-              <div class="col-2 text_border text-start" style="border: none">
-                Rear IC
-              </div>
-              <div class="col-5 text_border" style="height: 200px">
-                {{ data_2.filename }}
-              </div>
-            </div>
-          </div>
-          <div v-else>Tiada Data</div>
+            </template>
+          </Card>
         </div>
       </div>
-    </base-card>
+      <div v-else>
+        <div
+          class="
+            flex
+            align-items-center
+            justify-content-center
+            container-height
+            fadein
+            animation-duration-400
+          "
+        >
+          <div class="grid justify-content-center">
+            <div class="col-12 mb-4 text-center">
+              <i class="pi pi-discord text-8xl text-400"></i>
+            </div>
+            <div class="col-12 text-center">
+              <span class="text-400">Profil tidak lengkap.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </the-template>
 </template>
 
@@ -100,7 +124,6 @@ export default {
             this.loading = false;
           } else {
             this.status = false;
-            console.log(response.data.message);
             this.loading = false;
           }
         })
@@ -114,14 +137,13 @@ export default {
 </script>
 
 <style scoped>
-.text_border {
-  padding: 0.375rem 0.75rem;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid #ced4da;
+.container-height {
+  min-height: 70vh;
 }
-</style>
\ No newline at end of file
+
+.value-form {
+  border: 1px solid #ced4da;
+  margin-bottom: 0.5rem;
+  border-radius: 6px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 88f489d..004acda 100644
--- a/src/main.js
+++ b/src/main.js
@@ -36,6 +36,7 @@ import RadioButton from 'primevue/radiobutton';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Dialog from 'primevue/dialog';
+import Avatar from 'primevue/avatar';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
@@ -67,6 +68,7 @@ app.component('RadioButton', RadioButton);
 app.component('Accordion', Accordion);
 app.component('AccordionTab', AccordionTab);
 app.component('Dialog', Dialog);
+app.component('Avatar', Avatar);
 
 app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');