diff --git a/src/components/selfStatus/selfStatus.tsx b/src/components/selfStatus/selfStatus.tsx
index a5156f4..3745736 100644
--- a/src/components/selfStatus/selfStatus.tsx
+++ b/src/components/selfStatus/selfStatus.tsx
@@ -1,12 +1,15 @@
 import React from "react";
 import { useAppSelector } from "../../hooks/store";
 import style from "./style.module.css"
+import { useNavigate } from "react-router";
 
 interface SelfStatusProps {
     className?: string;
 }
 
 const SelfStatus: React.FC<SelfStatusProps> = () => {
+
+    const nav = useNavigate()
     const userName = useAppSelector(state => state.user.userName);
     const role = useAppSelector(state => state.user.role);
     const uploadTraffic = useAppSelector(state => state.user.uploadTraffic);
@@ -14,10 +17,14 @@
     const downloadPoints = useAppSelector(state => state.user.downloadPoints);
     const avatar = useAppSelector(state => state.user.avatar);
 
+    function handleAvatarClick(){
+        nav('/homepage')
+    }
+
     return (
         <div className={style.container}>
             <div className={style.left}>
-                <img className={style.avatar} src={avatar} alt="User Avatar" />
+                <img className={style.avatar} onClick={handleAvatarClick} src={avatar} alt="User Avatar" />
             </div>
             <div className={style.right}>
                 <div className={style.info}>