diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index 3a855a5..a560d9e 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -238,7 +238,7 @@ function getGradientColor(color: CardData['color']) {
     <!-- define component end: GradientBg -->
 
     <NGrid :cols="gridCol" responsive="screen" :x-gap="16" :y-gap="16">
-      <NGi v-for="item in cardData" :key="item.key">
+      <NGi v-for="item in cardData" :key="item.key" class="home-card">
         <NSpin :show="false">
           <GradientBg :gradient-color="getGradientColor(item.color)" class="h-165px flex-1">
             <div :class="item.click ? 'cursor-pointer' : null" @click="item.click">
@@ -307,4 +307,14 @@ function getGradientColor(color: CardData['color']) {
 :deep(.n-progress-icon--as-text) {
   width: 60px !important;
 }
+
+.home-card {
+  transition: all 0.25s ease-in;
+}
+
+.home-card:hover {
+  transform: translateY(-8px);
+  box-shadow: var(--n-box-shadow);
+  border-radius: 8px;
+}
 </style>