diff --git a/css/homepage-other.css b/css/homepage-other.css
index bd760c9..840727b 100644
--- a/css/homepage-other.css
+++ b/css/homepage-other.css
@@ -190,17 +190,22 @@ body {
   border: 1px solid #e9eef2;
   border-radius: 10px;
   flex-direction: column;
-  padding-top: 115px;
+  padding-top: 39px;
   padding-bottom: 40px;
 }
 #homepage-other .matter .card-user .avatar {
   width: 120px;
   height: 120px;
   border-radius: 8px;
+  margin-bottom: 20px;
+}
+#homepage-other .matter .card-user .name-area {
+  margin-bottom: 40px;
 }
 #homepage-other .matter .card-user .name-area .username {
   font-size: 15px;
   color: #333;
+  margin-bottom: 12px;
 }
 #homepage-other .matter .card-user .name-area .uid {
   color: #7f7f7f;
@@ -213,12 +218,13 @@ body {
   cursor: pointer;
 }
 #homepage-other .matter .card-user .medal-area {
-  margin: 0 30px;
+  margin: 0 30px 44px;
   align-self: self-start;
 }
 #homepage-other .matter .card-user .medal-area .title {
   font-size: 14px;
   color: #7f7f7f;
+  margin-bottom: 13px;
 }
 #homepage-other .matter .card-user .medal-area .list {
   flex-direction: row;
@@ -226,4 +232,83 @@ body {
 #homepage-other .matter .card-user .medal-area .list .item {
   height: 30px;
   max-width: 30px;
+  margin-right: 8px;
+}
+#homepage-other .matter .card-user .btn-area .item {
+  width: 200px;
+  height: 40px;
+  background-color: #ffffff;
+  border: 1px solid #ebebeb;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #555555;
+}
+#homepage-other .matter .card-user .btn-area .item:not(:last-of-type) {
+  margin-bottom: 15px;
+}
+#homepage-other .matter .card-user .btn-area .item.msg {
+  background-color: #50e3c2;
+  border: 1px solid #50e3c2;
+  color: #000000;
+}
+#homepage-other .matter .matter-content .message-box {
+  height: 452px;
+  background-color: #ffffff;
+  border: 1px solid #e9eef2;
+  border-radius: 10px;
+  padding-left: 95px;
+  padding-bottom: 5px;
+}
+#homepage-other .matter .matter-content .message-box .header {
+  border-bottom: 1px dotted #d7d7d7;
+  padding-top: 46px;
+  padding-bottom: 19px;
+  position: relative;
+}
+#homepage-other .matter .matter-content .message-box .header .avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: absolute;
+  top: 40px;
+  left: -55px;
+}
+#homepage-other .matter .matter-content .message-box .header .username {
+  font-size: 14px;
+  color: #333333;
+}
+#homepage-other .matter .matter-content .message-box .header .icon {
+  height: 40px;
+}
+#homepage-other .matter .matter-content .message-box .info-list {
+  flex-flow: wrap;
+  padding-top: 20px;
+  border-bottom: 1px dotted #d7d7d7;
+}
+#homepage-other .matter .matter-content .message-box .info-list .item {
+  width: 50%;
+  margin-bottom: 15px;
+}
+#homepage-other .matter .matter-content .message-box .info-list .item .label {
+  font-size: 14px;
+  color: #7f7f7f;
+  width: 87px;
+}
+#homepage-other .matter .matter-content .message-box .info-list .item .value {
+  font-size: 14px;
+  color: #000000;
+}
+#homepage-other .matter .matter-content .message-box .info-list .item .status {
+  color: #555555;
+  font-size: 13px;
+  padding: 0 6px;
+  height: 20px;
+  line-height: 20px;
+  background-color: #f0f1ec;
+  border-radius: 23px;
+  margin-left: 10px;
+}
+#homepage-other .matter .matter-content .message-box .info-list .item .status.blue {
+  color: #ffffff;
+  background-color: #04b0d5;
 }
diff --git a/css/homepage-other.less b/css/homepage-other.less
index d9a815f..ee9a6fe 100644
--- a/css/homepage-other.less
+++ b/css/homepage-other.less
@@ -218,19 +218,23 @@ body {
             border: 1px solid rgba(233, 238, 242, 1);
             border-radius: 10px;
             flex-direction: column;
-            padding-top: 115px;
+            padding-top: 39px;
             padding-bottom: 40px;
 
             .avatar {
                 width: 120px;
                 height: 120px;
                 border-radius: 8px;
+                margin-bottom: 20px;
             }
 
             .name-area {
+                margin-bottom: 40px;
+
                 .username {
                     font-size: 15px;
                     color: #333;
+                    margin-bottom: 12px;
                 }
 
                 .uid {
@@ -246,11 +250,13 @@ body {
             }
 
             .medal-area {
-                margin: 0 30px;
+                margin: 0 30px 44px;
                 align-self: self-start;
+
                 .title {
                     font-size: 14px;
                     color: #7f7f7f;
+                    margin-bottom: 13px;
                 }
 
                 .list {
@@ -258,12 +264,104 @@ body {
                     .item {
                         height: 30px;
                         max-width: 30px;
+                        margin-right: 8px;
+                    }
+                }
+            }
+
+            .btn-area {
+                .item {
+                    width: 200px;
+                    height: 40px;
+                    background-color: rgba(255, 255, 255, 1);
+                    border: 1px solid rgba(235, 235, 235, 1);
+                    border-radius: 8px;
+                    font-size: 15px;
+                    color: #555555;
+
+                    &:not(:last-of-type) {
+                        margin-bottom: 15px;
+                    }
+
+                    &.msg {
+                        background-color: rgba(80, 227, 194, 1);
+                        border: 1px solid rgba(80, 227, 194, 1);
+                        color: #000000;
                     }
                 }
             }
         }
 
         .matter-content {
+            .message-box {
+                height: 452px;
+                background-color: rgba(255, 255, 255, 1);
+                border: 1px solid rgba(233, 238, 242, 1);
+                border-radius: 10px;
+                padding-left: 95px;
+                padding-bottom: 5px;
+
+                .header {
+                    border-bottom: 1px dotted #d7d7d7;
+                    padding-top: 46px;
+                    padding-bottom: 19px;
+                    position: relative;
+
+                    .avatar {
+                        width: 40px;
+                        height: 40px;
+                        border-radius: 50%;
+                        position: absolute;
+                        top: 40px;
+                        left: -55px;
+                    }
+
+                    .username {
+                        font-size: 14px;
+                        color: #333333;
+                    }
+
+                    .icon {
+                        height: 40px;
+                    }
+                }
+
+                .info-list {
+                    flex-flow: wrap;
+                    padding-top: 20px;
+                    border-bottom: 1px dotted #d7d7d7;
+                    
+                    .item {
+                        width: 50%;
+                        margin-bottom: 15px;
+                        .label {
+                            font-size: 14px;
+                            color: #7f7f7f;
+                            width: 87px;
+                        }
+                        .value {
+                            font-size: 14px;
+                            color: #000000;
+                        }
+
+                        .status {
+                            color: #555555;
+                            font-size: 13px;
+                            padding: 0 6px;
+                            height: 20px;
+                            line-height: 20px;
+                            background-color: rgba(240, 241, 236, 1);
+                            border-radius: 23px;
+                            margin-left: 10px;
+
+                            &.blue {
+                                color: #ffffff;
+                                background-color: rgba(4, 176, 213, 1);
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/homepage-other.html b/homepage-other.html
index e64c419..bb4b7a5 100644
--- a/homepage-other.html
+++ b/homepage-other.html
@@ -1,88 +1,148 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+        <link rel="stylesheet" href="./css/homepage-other.css" />
+        <script src="./js/vue.global.js"></script>
+    </head>
 
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-    <link rel="stylesheet" href="./css/homepage-other.css" />
-    <script src="./js/vue.global.js"></script>
-</head>
-
-<body>
-    <div class="container" id="homepage-other">
-        <div class="head-top flexacenter">
-            <img class="logo" src="https://oss.gter.net/logo" alt="" />
-            <div class="flex1"></div>
-            <div class="input-box flexacenter">
-                <input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
-                <img class="icon" />
-            </div>
-
-            <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak
-                onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
-                <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
-                <span>已签到，明天再来</span>
-            </div>
-            <div class="sign-in sign-in-no flexacenter" v-else
-                onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')"
-                v-cloak>
-                <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
-                <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
-                <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
-                <span class="text flex1">签到领寄托币</span>
-                <div class="sign-go flexcenter">
-                    <img class="sign-go-bj"
-                        src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
-                    GO
-                </div>
-                <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
-                <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
-                <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
-            </div>
-        </div>
-
-        <div class="head-navigation flexacenter">
-            <img class="icon" src="./img/index-icon.png" />
-            <div class="text">首页</div>
-            <img class="arrows" src="./img/arrows-gray.svg" />
-            <div class="text">GTSuperstar 的个人主页</div>
-        </div>
-
-        <div class="matter flexflex">
-            <div class="card-user flexcenter">
-                <img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle"
-                    alt="用户头像" class="avatar">
-
-                <div class="name-area">
-                    <h3 class="username">GTSuperstar</h3>
-                    <p class="uid flexacenter">
-                        UID: 3276161
-                        <img class="icon" src="./img/copy-icon.png">
-                    </p>
+    <body>
+        <div class="container" id="homepage-other">
+            <div class="head-top flexacenter">
+                <img class="logo" src="https://oss.gter.net/logo" alt="" />
+                <div class="flex1"></div>
+                <div class="input-box flexacenter">
+                    <input class="input flex1" type="text" placeholder="大家都在搜：屯特" />
+                    <img class="icon" />
                 </div>
 
-                <div class="medal-area">
-                    <p class="title">勋章 6</p>
-                    <div class="list flexflex">
-                        <img v-for="item in 5"
-                            src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpcnj-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o6lsSPQ7Y2N90MUNDQyOQ~~"
-                            alt="勋章1" class="item">
+                <div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
+                    <img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
+                    <span>已签到，明天再来</span>
+                </div>
+                <div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak>
+                    <img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
+                    <img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
+                    <img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
+                    <span class="text flex1">签到领寄托币</span>
+                    <div class="sign-go flexcenter">
+                        <img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
+                        GO
+                    </div>
+                    <img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
+                    <img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
+                    <img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
+                </div>
+            </div>
+
+            <div class="head-navigation flexacenter">
+                <img class="icon" src="./img/index-icon.png" />
+                <div class="text">首页</div>
+                <img class="arrows" src="./img/arrows-gray.svg" />
+                <div class="text">GTSuperstar 的个人主页</div>
+            </div>
+
+            <div class="matter flexflex">
+                <div class="card-user flexcenter">
+                    <div class="name-area">
+                        <img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" />
+
+                        <h3 class="username">GTSuperstar</h3>
+                        <p class="uid flexacenter">
+                            UID: 3276161
+                            <img class="icon" src="./img/copy-icon.png" />
+                        </p>
+                    </div>
+
+                    <div class="medal-area">
+                        <p class="title">勋章 6</p>
+                        <div class="list flexflex">
+                            <img v-for="item in 5" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpcnj-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o6lsSPQ7Y2N90MUNDQyOQ~~" alt="勋章1" class="item" />
+                        </div>
+                    </div>
+
+                    <div class="btn-area">
+                        <div class="item msg flexcenter">发私信</div>
+                        <div class="item flexcenter">用户管理</div>
+                        <div class="item flexcenter">内容管理</div>
                     </div>
                 </div>
+                <div class="matter-content flex1">
+                    <div class="message-box">
+                        <!-- 头部区域 -->
+                        <div class="header">
+                            <img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" class="avatar" />
+                            <span class="username">GTSuperstar</span>
+                            <!-- <img class="icon"> -->
+                        </div>
 
-                <div class="btn-area">
-                    <div class="msg-btn">发私信</div>
-                    <div class="manage-btn">用户管理</div>
-                    <div class="content-btn">内容管理</div>
+                        <!-- 信息列表区域 -->
+                        <div class="info-list flexflex">
+                            <div class="item flexacenter">
+                                <span class="label">注册时间</span>
+                                <span class="value">2019-7-26 16:38</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">最后登录</span>
+                                <span class="value">2025-10-16 10:32</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">在线时长</span>
+                                <span class="value">1304 小时</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">上次访问 IP</span>
+                                <span class="value">116.237.182.149 -- 上海长宁区</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">Email</span>
+                                <span class="value">skysuper007@qq.com</span>
+                                <span class="status flexacenter">未认证</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">手机号</span>
+                                <span class="value">15934271290</span>
+                                <span class="status blue flexacenter">已认证</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">累计签到</span>
+                                <span class="value">1341 天</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">本月签到</span>
+                                <span class="value">6 天</span>
+                            </div>
+                            <div class="item flexacenter">
+                                <span class="label">寄托币</span>
+                                <span class="value">13813</span>
+                            </div>
+                        </div>
+
+                        <!-- 统计标签区域 -->
+                        <div class="stats">
+                            <span class="stat-item">Offer × 6</span>
+                            <span class="stat-item">总结 × 1</span>
+                            <span class="stat-item">面经 × 3</span>
+                            <span class="stat-item">回答 × 1</span>
+                            <span class="stat-item">其他 × 4</span>
+                        </div>
+
+                        <!-- Offer标签区域 -->
+                        <div class="offer-tags">
+                            <span class="tag">Offer 阿尔托大学</span>
+                            <span class="tag">Offer 坦佩雷大学</span>
+                            <span class="tag">Offer 悉尼大学</span>
+                            <span class="tag">Offer 巴黎理工学院</span>
+                            <span class="tag">Offer 悉尼大学</span>
+                            <span class="tag">Offer 巴黎理工学院</span>
+                            <span class="tag">Offer 阿尔托大学</span>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="matter-content flex1">
-
-            </div>
         </div>
-    </div>
-    <script type="module" src="./js/homepage-other.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+        <script type="module" src="./js/homepage-other.js"></script>
+    </body>
+</html>