diff --git a/src/assets/images/socialMediaLogo/biliBliIcon.png b/src/assets/images/socialMediaLogo/biliBliIcon.png
new file mode 100644
index 00000000..21a861d7
Binary files /dev/null and b/src/assets/images/socialMediaLogo/biliBliIcon.png differ
diff --git a/src/assets/images/socialMediaLogo/instagramIcon.png b/src/assets/images/socialMediaLogo/instagramIcon.png
new file mode 100644
index 00000000..6fd366b6
Binary files /dev/null and b/src/assets/images/socialMediaLogo/instagramIcon.png differ
diff --git a/src/assets/images/socialMediaLogo/tikTokIcon.png b/src/assets/images/socialMediaLogo/tikTokIcon.png
new file mode 100644
index 00000000..1fa7db89
Binary files /dev/null and b/src/assets/images/socialMediaLogo/tikTokIcon.png differ
diff --git a/src/assets/images/socialMediaLogo/xiaoHongShuIcon.png b/src/assets/images/socialMediaLogo/xiaoHongShuIcon.png
new file mode 100644
index 00000000..44fa3fa1
Binary files /dev/null and b/src/assets/images/socialMediaLogo/xiaoHongShuIcon.png differ
diff --git a/src/assets/images/socialMediaLogo/youTubeIcon.png b/src/assets/images/socialMediaLogo/youTubeIcon.png
new file mode 100644
index 00000000..3e6b31e8
Binary files /dev/null and b/src/assets/images/socialMediaLogo/youTubeIcon.png differ
diff --git a/src/assets/images/socialMediaLogo/zhiHuIcon.png b/src/assets/images/socialMediaLogo/zhiHuIcon.png
new file mode 100644
index 00000000..1cd479e3
Binary files /dev/null and b/src/assets/images/socialMediaLogo/zhiHuIcon.png differ
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 5740dcf8..d917340c 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -168,6 +168,7 @@ li {
 }
 .ant-modal-mask {
   background-color: #666666;
+  opacity: 0.5;
 }
 .select_block {
   height: 4rem;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 2b310f33..938f0a7b 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -173,6 +173,7 @@ input:focus{
 }
 .ant-modal-mask{
 	background-color: #666666;
+	opacity: .5;
 }
 .select_block{
 	height: 4rem;
diff --git a/src/component/mainPage/signUp/index.vue b/src/component/mainPage/signUp/index.vue
index fe82f362..a237446b 100644
--- a/src/component/mainPage/signUp/index.vue
+++ b/src/component/mainPage/signUp/index.vue
@@ -738,6 +738,9 @@ export default defineComponent({
         font-size: 1.7rem;
         font-weight: 500;
         background-color: #1b223c;
+		&:hover {
+          background-color: #fff;
+        }
         @media (max-width: 767px) {
           margin-top: 2.5rem;
           font-size: 1.25rem;
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index a7220b02..dbc8a176 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -393,6 +393,27 @@
                   <span class="fi fi-rr-book-user"></span>
                   <span class="select_item_des">{{ $t('Header.Tutorial') }}</span>
                 </div>
+				<div class="select_item logo">
+					<a href="https://www.tiktok.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/tikTokIcon.png" alt="">
+					</a>
+					<a href="https://www.instagram.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/instagramIcon.png" alt="">
+					</a>
+					<a href="https://www.youtube.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/youTubeIcon.png" alt="">
+					</a>
+					<a href="https://www.xiaohongshu.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/xiaoHongShuIcon.png" alt="">
+					</a>
+					<a href="https://www.zhihu.com" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/zhiHuIcon.png" alt="">
+					</a>
+					<a href="https://www.bilibili.com/" target="_blank" >
+						<img src="@/assets/images/socialMediaLogo/biliBliIcon.png" alt="">
+					</a>
+				</div>
+
                 <div class="select_item_long"></div>
                 <div class="select_item" @click="logout()">
                   <span class="icon iconfont icon-tuichu"></span>
@@ -2015,6 +2036,25 @@ export default defineComponent({
                   font-weight: 500;
                 }
               }
+			  .logo{
+				padding: 1rem 0.5rem;
+				gap: 1rem;
+				cursor: auto;
+				> a{
+					width: 2.5rem;
+					height: 2.5rem;
+					border-radius: .5rem;
+					overflow: hidden;
+					display: flex;
+					> img{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				 &:hover {
+                  background: #fff;
+                }
+			  }
               .select_item_long {
                 border-bottom: 1px solid #eceaea;
                 margin: 2rem 0;