diff --git a/src/views/components/ChargingRanking.vue b/src/views/components/ChargingRanking.vue
index 1673571..74d6039 100644
--- a/src/views/components/ChargingRanking.vue
+++ b/src/views/components/ChargingRanking.vue
@@ -44,10 +44,10 @@
       header-class="modal-table-header"
       body-class="modal-table-body">
       <template #rank="{ index }">
-        <img src="@/assets/svg-img/gold-medal.svg" class="w-[34px] h-[20px]" v-if="index === 0" alt="" />
-        <img src="@/assets/svg-img/silver-medal.svg" class="w-[34px] h-[20px]" v-if="index === 1" alt="" />
-        <img src="@/assets/svg-img/bronze-medal.svg" class="w-[34px] h-[20px]" v-if="index === 2" alt="" />
-        <span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span>
+        <img src="@/assets/svg-img/gold-medal.svg" class="w-[34px] h-[20px]" v-if="page === 1 && index === 0" alt="" />
+        <img src="@/assets/svg-img/silver-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 1" alt="" />
+        <img src="@/assets/svg-img/bronze-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 2" alt="" />
+        <span class="text-[14px] font-600" v-else>{{ (page - 1) * pageSize + index + 1 }}</span>
       </template>
       <template #name="{ data }">
         <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
diff --git a/src/views/components/WinCustomer.vue b/src/views/components/WinCustomer.vue
index d362795..541b5f8 100644
--- a/src/views/components/WinCustomer.vue
+++ b/src/views/components/WinCustomer.vue
@@ -14,7 +14,7 @@
         <SvgComponent :content="moreArrowSvg" class="w-[14px] h-[22px]" />
       </div>
       <div class="mt-[26px] mx-[16px]">
-        <RankingTable :value="products.slice(0,5)" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
+        <RankingTable :value="products.slice(0, 5)" :columns="columns" header-class="custom-table-header" body-class="custom-table-body">
           <template #rank="{ index }">
             <SvgComponent :content="goldMedalSvg" class="w-[34px] h-[20px]" v-if="index === 0" />
             <SvgComponent :content="silverMedalSvg" class="w-[34px] h-[20px]" v-if="index === 1" />
@@ -44,10 +44,10 @@
       header-class="modal-table-header"
       body-class="modal-table-body">
       <template #rank="{ index }">
-        <img src="@/assets/svg-img/gold-medal.svg" class="w-[34px] h-[20px]" v-if="index === 0" alt="" />
-        <img src="@/assets/svg-img/silver-medal.svg" class="w-[34px] h-[20px]" v-if="index === 1" alt="" />
-        <img src="@/assets/svg-img/bronze-medal.svg" class="w-[34px] h-[20px]" v-if="index === 2" alt="" />
-        <span class="text-[14px] font-600" v-if="index > 2">{{ index + 1 }}</span>
+        <img src="@/assets/svg-img/gold-medal.svg" class="w-[34px] h-[20px]" v-if="page === 1 && index === 0" alt="" />
+        <img src="@/assets/svg-img/silver-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 1" alt="" />
+        <img src="@/assets/svg-img/bronze-medal.svg" class="w-[34px] h-[20px]" v-else-if="page === 1 && index === 2" alt="" />
+        <span class="text-[14px] font-600" v-else>{{ (page - 1) * pageSize + index + 1 }}</span>
       </template>
       <template #name="{ data }">
         <span class="text-[#C0EEFF] text-[14px]">{{ data.name }}</span>
@@ -173,7 +173,7 @@
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/text-color.scss";
+  @use "@/styles/text-color.scss";
   .custom-border {
     border-image-slice: 27 27 27 27;
     border-image-width: 1px 1px 2px 1px;
@@ -206,7 +206,6 @@
     }
   }
 
-  
   .modal-header {
     background-image: url("/images/drawer-header.png");
     background-position: center;
@@ -245,4 +244,4 @@
       background-color: #0d2744;
     }
   }
-</style>
\ No newline at end of file
+</style>