diff --git a/src/components/post/tp-text.vue b/src/components/post/tp-text.vue
index 1c2128f0..206066dd 100644
--- a/src/components/post/tp-text.vue
+++ b/src/components/post/tp-text.vue
@@ -156,7 +156,6 @@ function getEmojiName() {
   cursor: pointer;
   text-decoration: underline solid #00c3ff;
   text-underline-position: under;
-  transform: translateY(2px);
 }
 
 .tp-text-emoji {
diff --git a/src/components/userAvatar/tua-dc-constellations.vue b/src/components/userAvatar/tua-dc-constellations.vue
index 2362c8ab..2753a978 100644
--- a/src/components/userAvatar/tua-dc-constellations.vue
+++ b/src/components/userAvatar/tua-dc-constellations.vue
@@ -8,7 +8,7 @@
     >
       <img :src="constellation.icon" alt="constellation" class="tua-dcc-icon" />
       <div v-if="!constellation.is_actived" class="tua-dcc-lock">
-        <v-icon size="10px">mdi-lock</v-icon>
+        <v-icon size="10px" color="var(--tgc-od-white)">mdi-lock</v-icon>
       </div>
     </div>
   </div>
diff --git a/src/components/userAvatar/tua-dc-talents.vue b/src/components/userAvatar/tua-dc-talents.vue
index e60403c5..16bba174 100644
--- a/src/components/userAvatar/tua-dc-talents.vue
+++ b/src/components/userAvatar/tua-dc-talents.vue
@@ -8,7 +8,7 @@
     >
       <img :src="skill.icon" alt="talent" class="tua-dct-icon" />
       <div v-if="!skill.is_unlock" class="tua-dct-lock">
-        <v-icon size="10px">mdi-lock</v-icon>
+        <v-icon size="10px" color="var(--tgc-od-white)">mdi-lock</v-icon>
       </div>
       <div class="tua-dct-level" v-if="skill.is_unlock && skill.skill_type === 1">
         {{ skill.level === 0 ? 1 : skill.level }}
diff --git a/src/components/userAvatar/tua-detail-overlay.vue b/src/components/userAvatar/tua-detail-overlay.vue
index c3f6353d..a8672a38 100644
--- a/src/components/userAvatar/tua-detail-overlay.vue
+++ b/src/components/userAvatar/tua-detail-overlay.vue
@@ -1,8 +1,13 @@
 <template>
-  <TOverlay v-model="visible" hide blur-val="20px" :to-click="onCancel">
+  <TOverlay v-model="visible" hide blur-val="5px" :to-click="onCancel">
     <div class="tdo-box">
       <div class="tdo-avatars-container">
-        <v-tabs v-model="avatarTab" density="compact" center-active>
+        <v-tabs
+          v-model="avatarTab"
+          density="compact"
+          center-active
+          slider-color="var(--tgc-od-white)"
+        >
           <v-tab
             v-for="avatar in avatars"
             :key="avatar.avatar.id"
@@ -10,7 +15,17 @@
             @click="onAvatarClick(avatar)"
             :title="avatar.avatar.name"
           >
-            <v-avatar :image="avatar.avatar.side_icon" class="tdo-avatar" />
+            <div
+              class="tdo-avatar"
+              :style="{
+                backgroundColor:
+                  props.avatar.avatar.id === avatar.avatar.id
+                    ? 'var(--tgc-od-white)'
+                    : 'transparent',
+              }"
+            >
+              <img :src="avatar.avatar.side_icon" :alt="avatar.avatar.name" />
+            </div>
           </v-tab>
         </v-tabs>
       </div>
@@ -122,8 +137,27 @@ function onAvatarClick(avatar: TGApp.Sqlite.Character.UserRole): void {
   width: v-bind(avatarsWidth);
 }
 
+/* stylelint-disable selector-class-pattern */
+.tdo-avatars-container :deep(.v-slide-group__next),
+.tdo-avatars-container :deep(.v-slide-group__prev) {
+  color: var(--tgc-od-white);
+}
+
 .tdo-avatar {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--tgc-white-1);
+  border-radius: 50%;
   cursor: pointer;
+
+  img {
+    position: absolute;
+    top: -4px;
+    left: -1px;
+    width: 30px;
+    object-fit: contain;
+  }
 }
 
 .tdo-card-container {