diff --git a/frontend/src/components/system-upgrade/index.vue b/frontend/src/components/system-upgrade/index.vue
index 046867844..782ef50c3 100644
--- a/frontend/src/components/system-upgrade/index.vue
+++ b/frontend/src/components/system-upgrade/index.vue
@@ -187,7 +187,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .version {
     font-size: 14px;
-    color: #858585;
+    color: var(--dark-gold-base-color);
     text-decoration: none;
     letter-spacing: 0.5px;
 }
diff --git a/frontend/src/views/setting/about/index.vue b/frontend/src/views/setting/about/index.vue
index 5e1a4ec3d..ff6558f15 100644
--- a/frontend/src/views/setting/about/index.vue
+++ b/frontend/src/views/setting/about/index.vue
@@ -3,11 +3,11 @@
         <LayoutContent v-loading="loading" :title="$t('setting.about')" :divider="true">
             <template #main>
                 <div style="text-align: center; margin-top: 20px">
-                    <div style="justify-self: center">
+                    <div style="justify-self: center" class="logo">
                         <img v-if="globalStore.themeConfig.logo" style="width: 80px" :src="'/api/v1/images/logo'" />
                         <PrimaryLogo v-else />
                     </div>
-                    <h3>{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
+                    <h3 class="description">{{ globalStore.themeConfig.title || $t('setting.description') }}</h3>
                     <h3>
                         <SystemUpgrade />
                     </h3>
@@ -81,4 +81,18 @@ onMounted(() => {
         font-weight: 400;
     }
 }
+.description {
+    color: var(--el-text-color-regular);
+}
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 55px;
+    img {
+        object-fit: contain;
+        width: 95%;
+        height: 45px;
+    }
+}
 </style>