diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index e954852..40d3ac3 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,28 +1,36 @@
 import React from "react";
 import { useAppSelector } from "../../hooks/store";
-import "./style.css"
+import style from "./style.module.css"
 
-const SelfStatus :React.FC = () => {
 
-    const userName = useAppSelector(state => state.user.userName)
-    const role = useAppSelector(state => state.user.role)
-    const uploadTraffic = useAppSelector(state => state.user.uploadTraffic)
-    const downloadTraffic = useAppSelector(state => state.user.downloadTraffic)
-    const downloadPoints = useAppSelector(state => state.user.downloadPoints)
-    const avatar = useAppSelector(state => state.user.avatar)
-    const islogin = useAppSelector(state => state.user.isLogin)
-    return <>
-            <div className="user">
-                <img className="avatar" src={avatar}></img>
-                <p className="userName">{userName},欢迎你</p>
+const SelfStatus: React.FC = () => {
+    const userName = useAppSelector(state => state.user.userName);
+    const role = useAppSelector(state => state.user.role);
+    const uploadTraffic = useAppSelector(state => state.user.uploadTraffic);
+    const downloadTraffic = useAppSelector(state => state.user.downloadTraffic);
+    const downloadPoints = useAppSelector(state => state.user.downloadPoints);
+    const avatar = useAppSelector(state => state.user.avatar);
+    console.log(avatar)
+
+    return (
+        <div className={style.container}>
+            <div className={style.left}>
+                <img className={style.avatar} src={avatar} alt="User Avatar" />
             </div>
-            <div className="info" >
-                <p className="uploadTraffic">上传量：{uploadTraffic}</p>
-                <p>下载量：{downloadTraffic}</p>
-                <p>下载积分：{downloadPoints}</p>
+            <div className={style.right}>
+                <div className={style.info}>
+                    <p className={style.userName}>{userName}</p>
+                    <p className={style.role}>角色: {role}</p>
+                    <p className={style.uploadTraffic}>上传量: {uploadTraffic}</p>
+                    <p className={style.downloadTraffic}>下载量: {downloadTraffic}</p>
+                    <p className={style.shareRatio}>
+                        分享率: {uploadTraffic && downloadTraffic ? (uploadTraffic / downloadTraffic).toFixed(2) : "N/A"}
+                    </p>
+                </div>
+                <button className={style.signInButton}>签到</button>
             </div>
+        </div>
+    );
+};
 
-    </>
-}
-
-export default SelfStatus
+export default SelfStatus;
diff --git a/src/components/selfStatus/style.css b/src/components/selfStatus/style.css
deleted file mode 100644
index afb50a0..0000000
--- a/src/components/selfStatus/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-.user{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-}
-.user img {
-    width:40%;
-    border-radius: 20px;
-    margin-top: 20px;
-}
-.info p{
-    font-size: 20px;
-    font-weight: bold;
-    margin-top: 20px;
-}
-
diff --git a/src/components/selfStatus/style.module.css b/src/components/selfStatus/style.module.css
new file mode 100644
index 0000000..4e80ece
--- /dev/null
+++ b/src/components/selfStatus/style.module.css
@@ -0,0 +1,71 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+    width: 100%;
+    height: 200px; /* Adjust height as needed */
+    box-sizing: border-box;
+}
+
+.left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    width: 20%; /* Adjust width for avatar section */
+}
+
+.avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 10px;
+}
+.right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 75%; /* Adjust width for info and button section */
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 10px;
+}
+
+.userName {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+.role,
+.uploadTraffic,
+.downloadTraffic,
+.shareRatio {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.signInButton {
+    align-self: flex-end;
+    padding: 10px 20px;
+    font-size: 14px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.signInButton:hover {
+    background-color: #45a049;
+}
\ No newline at end of file