diff --git a/src/assets/icon/SOJ-thick-white-background.png b/src/assets/icon/SOJ-thick-white-background.png
new file mode 100644
index 00000000..8edef63b
Binary files /dev/null and b/src/assets/icon/SOJ-thick-white-background.png differ
diff --git a/src/assets/icon/SOJ-thick-white.png b/src/assets/icon/SOJ-thick-white.png
new file mode 100644
index 00000000..011f4e65
Binary files /dev/null and b/src/assets/icon/SOJ-thick-white.png differ
diff --git a/src/assets/icon/SOJ-thick-white.svg b/src/assets/icon/SOJ-thick-white.svg
deleted file mode 100644
index cec42fdb..00000000
--- a/src/assets/icon/SOJ-thick-white.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1500" height="1500" viewBox="0 0 1500 1500">
-  <defs>
-    <style>
-      .cls-1 {
-        clip-path: url(#clip-custom_1);
-      }
-
-      .cls-2 {
-        fill: #fff;
-        stroke: #fff;
-        stroke-width: 40px;
-      }
-
-      .cls-3 {
-        filter: url(#SOJ);
-      }
-    </style>
-    <filter id="SOJ" x="365.696" y="232.945" width="769.525" height="1037.514" filterUnits="userSpaceOnUse">
-      <feOffset dy="3" input="SourceAlpha"/>
-      <feGaussianBlur stdDeviation="3" result="blur"/>
-      <feFlood flood-color="#fff" flood-opacity="0.502"/>
-      <feComposite operator="in" in2="blur"/>
-      <feComposite in="SourceGraphic"/>
-    </filter>
-    <clipPath id="clip-custom_1">
-      <rect width="1500" height="1500"/>
-    </clipPath>
-  </defs>
-  <g id="custom_1" data-name="custom – 1" class="cls-1">
-    <g class="cls-3" transform="matrix(1, 0, 0, 1, 0, 0)">
-      <path id="SOJ-2" data-name="SOJ" class="cls-2" d="M195.822,726.991,204,731Zm0,0L-204,531,195.822,726.991,187.777,731Zm0,0,287.955-143.5V302.728L494,308l-10.223-5.272V583.492l5-2.492-5,2.492Zm287.955-143.5v0ZM-158,179.635,237,382ZM88.777,99l395,203.728ZM-158,179.635-169,174l11,5.636v0Zm0,0V-102.5L133.389-248.195,137-250l-3.611,1.805L529.777-50,133.389-248.195-158-102.5Zm0-282.136-5,2.5ZM129.777-250l3.612,1.805Z" transform="translate(587.5 509.5)"/>
-    </g>
-  </g>
-</svg>
diff --git a/src/components/page/navbar.vue b/src/components/page/navbar.vue
index a9b24b3a..51a8c7a4 100644
--- a/src/components/page/navbar.vue
+++ b/src/components/page/navbar.vue
@@ -11,16 +11,13 @@
         text-color="#fff"
         active-text-color="rgb(233, 233, 235)"
       >
-        <el-menu-item index=""><img src="./../../assets/icon/SOJ-thick-white.svg" style="height: 40px;" /></el-menu-item>
+        <el-menu-item index=""><img src="./../../assets/icon/SOJ-thick-white.png" style="height: 40px;" /></el-menu-item>
         <el-menu-item index="/"><i class="el-icon-s-home" /> Home</el-menu-item>
         <el-menu-item index="/problem/list"><i class="el-icon-s-order" />Problem List</el-menu-item>
         <el-submenu index="2" id="user">
           <template slot="title">
-              <el-avatar shape="square" v-if="this.$store.state.user.authenticated">
-                {{this.$store.state.user.username}}
-              </el-avatar>
-              <el-avatar shape="square" v-else>
-                User
+              <el-avatar shape="square">
+                <img src="./../../assets/icon/SOJ-thick-white-background.png" />
               </el-avatar>
           </template>
           <div v-if="this.$store.state.user.authenticated">
diff --git a/src/components/user/content.vue b/src/components/user/content.vue
index d6aebc73..88b6110f 100644
--- a/src/components/user/content.vue
+++ b/src/components/user/content.vue
@@ -2,7 +2,7 @@
   <div id="user-content">
     <div>
       <el-card shadow="never">
-        <el-avatar shape="square" icon="el-icon-user-solid" :size="400"></el-avatar>
+        <el-avatar shape="square" :size="400"><img src="./../../assets/icon/SOJ-thick-white-background.png" /></el-avatar>
       </el-card>
       <el-card class="item">
         <div slot="header" class="clearfix"><i class="el-icon-setting" /> Tool Bar</div>