diff --git a/packages/app/src/components/UserPreview/index.jsx b/packages/app/src/components/UserPreview/index.jsx
index 992fa5b4..61c4ccb1 100755
--- a/packages/app/src/components/UserPreview/index.jsx
+++ b/packages/app/src/components/UserPreview/index.jsx
@@ -49,7 +49,7 @@ export default (props) => {
 
     if (!userData) {
         return <div className="userPreview">
-            <Skeleton active />
+            <Skeleton.Avatar active />
         </div>
     }
 
diff --git a/packages/app/src/components/UserPreview/index.less b/packages/app/src/components/UserPreview/index.less
index 26448bcf..79c53352 100755
--- a/packages/app/src/components/UserPreview/index.less
+++ b/packages/app/src/components/UserPreview/index.less
@@ -13,16 +13,27 @@
     }
 
     .avatar {
+        display: flex;
+
+        align-items: center;
+        justify-content: center;
+
+        margin-right: 10px;
+
         width: 40px;
         height: 40px;
 
-        margin-right: 10px;
+        .lazy-load-image-background {
+            width: 100%;
+            height: 100%;
+        }
 
         img {
             object-fit: cover;
 
-            width: 40px;
-            height: 40px;
+            width: 100%;
+            height: 100%;
+
             border-radius: 8px;
         }
     }