diff --git a/core/datacap-ui/src/views/pages/admin/user/profile/InfoHome.vue b/core/datacap-ui/src/views/pages/admin/user/profile/InfoHome.vue
index fb9fc449..f5614193 100644
--- a/core/datacap-ui/src/views/pages/admin/user/profile/InfoHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/user/profile/InfoHome.vue
@@ -1,21 +1,19 @@
 <template>
-  <div class="w-full">
-    <div>
-      <h3 class="text-lg font-medium">{{ $t('user.common.info') }}</h3>
-      <p class="text-sm text-muted-foreground">{{ $t('user.tip.info') }}</p>
-    </div>
-    <Separator class="my-4"/>
-    <Card>
-      <CardHeader class="p-0">
-        <CardTitle class="pt-3 pl-3 pb-2">{{ $t('user.common.contribution') }}</CardTitle>
-        <Separator/>
-        <CardDescription class="pt-3 pl-3 pb-2 pr-2 min-w-full">{{ $t('user.tip.contribution') }}</CardDescription>
-      </CardHeader>
-      <CardContent class="pt-2">
-        <CircularLoading v-if="loading" :show="loading"/>
-        <CalendarHeatmap v-else :tooltip-unit="$t('heatmap.common.query')" :end-date="heatmap.endDate"
-                         :round="50" :values="heatmap.data"
-                         :locale="{
+  <ShadcnCard :border="false"
+              :title="$t('user.common.info')"
+              :description="$t('user.tip.info')">
+    <ShadcnRow :gutter="16">
+      <ShadcnCol :span="12">
+        <ShadcnCard only-content-loading
+                    :title="$t('user.common.contribution')"
+                    :description="$t('user.tip.contribution')"
+                    :loading="loading">
+          <div class="p-2">
+            <CalendarHeatmap :tooltip-unit="$t('heatmap.common.query')"
+                             :end-date="heatmap.endDate"
+                             :round="10"
+                             :values="heatmap.data"
+                             :locale="{
                                   months: [
                                             $t('heatmap.common.jan'),
                                             $t('heatmap.common.feb'),
@@ -43,33 +41,29 @@
                                   less  : $t('heatmap.common.less'),
                                   more  : $t('heatmap.common.more')
                              }"/>
-      </CardContent>
-    </Card>
-    <div class="flex mt-2 space-x-4">
-      <Card class="w-1/2">
-        <CardHeader class="p-0">
-          <CardTitle class="pt-3 pl-3 pb-2">{{ $t('user.common.radar7Days') }}</CardTitle>
-          <Separator/>
-          <CardDescription class="pt-3 pl-3 pb-2 pr-2 min-w-full">{{ $t('user.tip.radar7Days') }}</CardDescription>
-        </CardHeader>
-        <CardContent class="pt-2">
-          <CircularLoading v-if="loading" :show="loading"/>
-          <VisualPie v-else-if="radar.configuration" :configuration="radar.configuration" :height="'200px'" :submitted="false"/>
-        </CardContent>
-      </Card>
-    </div>
-  </div>
+          </div>
+        </ShadcnCard>
+      </ShadcnCol>
+      <ShadcnCol :span="12">
+        <ShadcnCard only-content-loading
+                    :title="$t('user.common.radar7Days')"
+                    :description="$t('user.tip.radar7Days')"
+                    :loading="loading">
+          <div class="p-2">
+            <VisualPie v-if="radar.configuration" :configuration="radar.configuration" :height="'200px'" :submitted="false"/>
+          </div>
+        </ShadcnCard>
+      </ShadcnCol>
+    </ShadcnRow>
+  </ShadcnCard>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { Separator } from '@/components/ui/separator'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { CalendarHeatmap } from 'vue3-calendar-heatmap'
 import './vue3-calendar-heatmap.css'
 import { HttpUtils } from '@/utils/http'
 import UserService from '@/services/user'
-import CircularLoading from '@/views/components/loading/CircularLoading.vue'
 import { Configuration } from '@/views/components/visual/Configuration'
 import VisualPie from '@/views/components/visual/components/VisualPie.vue'
 import { DateUtils } from '@/utils/date'
@@ -78,9 +72,6 @@ export default defineComponent({
   name: 'InfoHome',
   components: {
     VisualPie,
-    CircularLoading,
-    CardContent, CardDescription, CardHeader, Card, CardTitle,
-    Separator,
     CalendarHeatmap
   },
   data()
@@ -106,29 +97,29 @@ export default defineComponent({
       this.loading = true
       const axios = new HttpUtils().getAxios()
       axios.all([UserService.getUserContribution(), UserService.getUserContributionRadar()])
-          .then(axios.spread((fetchContribution, fetchRadar) => {
-            if (fetchContribution.status) {
-              this.heatmap.data = fetchContribution.data
-              if (fetchContribution.data.length > 0) {
-                if (this.heatmap.data.length > 0) {
-                  const item = this.heatmap.data[this.heatmap.data.length - 1] as any
-                  this.heatmap.endDate = item.date
-                }
-              }
-              else {
-                const now = new Date()
-                this.heatmap.endDate = DateUtils.formatTime(now, 'YYYY-MM-DD')
-              }
-            }
-            if (fetchRadar.status) {
-              const configuration = new Configuration()
-              configuration.columns = fetchRadar.data
-              configuration.chartConfigure = {yAxis: 'count', xAxis: 'label', outerRadius: [1.2]}
-              this.radar.configuration = configuration
-            }
-          }))
-          .finally(() => this.loading = false)
+           .then(axios.spread((fetchContribution, fetchRadar) => {
+             if (fetchContribution.status) {
+               this.heatmap.data = fetchContribution.data
+               if (fetchContribution.data.length > 0) {
+                 if (this.heatmap.data.length > 0) {
+                   const item = this.heatmap.data[this.heatmap.data.length - 1] as any
+                   this.heatmap.endDate = item.date
+                 }
+               }
+               else {
+                 const now = new Date()
+                 this.heatmap.endDate = DateUtils.formatTime(now, 'YYYY-MM-DD')
+               }
+             }
+             if (fetchRadar.status) {
+               const configuration = new Configuration()
+               configuration.columns = fetchRadar.data
+               configuration.chartConfigure = { yAxis: 'count', xAxis: 'label', outerRadius: [1.2] }
+               this.radar.configuration = configuration
+             }
+           }))
+           .finally(() => this.loading = false)
     }
   }
-});
+})
 </script>
diff --git a/core/datacap-ui/src/views/pages/admin/user/profile/vue3-calendar-heatmap.css b/core/datacap-ui/src/views/pages/admin/user/profile/vue3-calendar-heatmap.css
index 52830825..19630fb1 100644
--- a/core/datacap-ui/src/views/pages/admin/user/profile/vue3-calendar-heatmap.css
+++ b/core/datacap-ui/src/views/pages/admin/user/profile/vue3-calendar-heatmap.css
@@ -1 +1 @@
-.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.vch__container .vch__legend{display:flex;justify-content:space-between;align-items:center}.vch__container .vch__external-legend-wrapper{margin:0 8px}svg.vch__wrapper{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:10px;width:100%}svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label{font-size:8px}svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{font-size:8px}svg.vch__wrapper text.vch__month__label,svg.vch__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{fill:#767676}svg.vch__wrapper rect.vch__day__square:hover{stroke:#555;stroke-width:2px;paint-order:stroke}svg.vch__wrapper rect.vch__day__square:focus{outline:0}svg.vch__wrapper.dark-mode text.vch__month__label,svg.vch__wrapper.dark-mode text.vch__day__label,svg.vch__wrapper.dark-mode .vch__legend__wrapper text{fill:#fff}
\ No newline at end of file
+.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}.vch__container .vch__legend{display:flex;justify-content:space-between;align-items:center;font-size:12px}.vch__container .vch__external-legend-wrapper{margin:0 8px}svg.vch__wrapper{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:10px;width:100%}svg.vch__wrapper .vch__months__labels__wrapper text.vch__month__label{font-size:6px}svg.vch__wrapper .vch__days__labels__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{font-size:6px}svg.vch__wrapper text.vch__month__label,svg.vch__wrapper text.vch__day__label,svg.vch__wrapper .vch__legend__wrapper text{fill:#767676}svg.vch__wrapper rect.vch__day__square:hover{stroke:#555;stroke-width:2px;paint-order:stroke}svg.vch__wrapper rect.vch__day__square:focus{outline:0}svg.vch__wrapper.dark-mode text.vch__month__label,svg.vch__wrapper.dark-mode text.vch__day__label,svg.vch__wrapper.dark-mode .vch__legend__wrapper text{fill:#fff}
\ No newline at end of file