diff --git a/src/components/StatCardComponet.vue b/src/components/StatCardComponet.vue
deleted file mode 100644
index 412cdab8..00000000
--- a/src/components/StatCardComponet.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import AppBox from 'components/app/AppBox.vue';
-
-const props = defineProps<{
-  branch: {
-    amount: string;
-    label: string;
-  }[];
-}>();
-
-const color = ['purple', 'pink', 'yellow', 'green', 'blue'];
-</script>
-
-<template>
-  <div
-    class="row"
-    style="gap: var(--size-4)"
-    :class="{ 'justify-between': $q.screen.lt.md }"
-  >
-    <app-box
-      v-for="(v, i) in props.branch"
-      :key="v.label"
-      class="bordered wave col-12"
-      :class="`color-${color[i % 5]}`"
-      style="
-        width: 200px;
-        min-width: 150px;
-        max-height: 95px;
-        box-shadow: var(--shadow-2);
-      "
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-        <path
-          class="box-path"
-          d="M0,256L40,245.3C80,235,160,213,240,202.7C320,192,400,192,480,170.7C560,149,640,107,720,106.7C800,107,880,149,960,154.7C1040,160,1120,128,1200,96C1280,64,1360,32,1400,16L1440,0L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"
-        ></path>
-      </svg>
-
-      <div class="column justify-around stat-card-content">
-        <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ v.label }}</div>
-      </div>
-    </app-box>
-  </div>
-</template>
-
-<style scoped>
-.wave {
-  background: #ffffff;
-  position: relative;
-  display: flex;
-}
-
-svg {
-  width: 200px;
-  position: absolute;
-  left: 0px;
-  top: 50px;
-  opacity: 0.1;
-}
-
-.box-path {
-  fill: var(--_color-stat-card);
-  fill-opacity: 1;
-}
-
-.stat-card-content {
-  z-index: 2;
-  color: var(--_color-stat-card);
-  height: 100%;
-  width: 200px;
-}
-
-.color-blue {
-  --_color-stat-card: var(--blue-5);
-}
-
-.color-purple {
-  --_color-stat-card: var(--purple-8);
-}
-
-.color-pink {
-  --_color-stat-card: var(--pink-8);
-}
-
-.color-yellow {
-  --_color-stat-card: var(--yellow-8);
-}
-
-.color-green {
-  --_color-stat-card: var(--green-8);
-}
-</style>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 19a1ee9e..a7a7b03f 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -3,12 +3,12 @@ import { ref, onMounted } from 'vue';
 import useUserStore from 'stores/user';
 import { storeToRefs } from 'pinia';
 
-import PersonCard from 'src/components/home/PersonCard.vue';
+import PersonCard from 'components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
-import StatCardComponet from 'components/StatCardComponet.vue';
-import SelectorList from 'src/components/SelectorList.vue';
+import StatCardComponent from 'components/StatCardComponent.vue';
+import SelectorList from 'components/SelectorList.vue';
 import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
-import TooltipComponet from 'src/components/TooltipComponet.vue';
+import TooltipComponet from 'components/TooltipComponet.vue';
 
 const userStore = useUserStore();
 const { data: userData } = storeToRefs(userStore);
@@ -52,7 +52,7 @@ const selectorList = [
           {{ $t('personnelStatTitle') + $t(selectorLabel) }}
         </span>
         <div class="row col full-width" style="overflow-x: auto">
-          <stat-card-componet :branch="branchStat" class="no-wrap" />
+          <StatCardComponent :branch="branchStat" class="no-wrap" />
         </div>
       </AppBox>
     </div>