diff --git a/src/components/PostMetadata.astro b/src/components/PostMetadata.astro
index e0534947..c455a419 100644
--- a/src/components/PostMetadata.astro
+++ b/src/components/PostMetadata.astro
@@ -30,13 +30,13 @@ const className = Astro.props.class;
         >
             <Icon name="material-symbols:menu-rounded" class="text-xl"></Icon>
         </div>
-        <div class="flex flex-row">
+        <div class="flex flex-row flex-nowrap">
             {categories && categories.map(category => <div
                     class="with-divider"
             >
                 <a href=`/archive/category/${category}`
                    class="link transition text-black/50 dark:text-white/50 text-sm font-medium
-                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
+                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {category}
                 </a>
             </div>)}
@@ -50,13 +50,13 @@ const className = Astro.props.class;
         >
             <Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
         </div>
-        <div class="flex flex-row">
+        <div class="flex flex-row flex-nowrap">
             {tags && tags.map(tag => <div
                     class="with-divider"
             >
                 <a href=`/archive/tag/${tag}`
                    class="link transition text-black/50 dark:text-white/50 text-sm font-medium
-                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)]">
+                                hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {tag}
                 </a>
             </div>)}
diff --git a/src/components/misc/ImageBox.astro b/src/components/misc/ImageBox.astro
index 1454389b..d03d8c78 100644
--- a/src/components/misc/ImageBox.astro
+++ b/src/components/misc/ImageBox.astro
@@ -9,7 +9,7 @@ const {id, src, alt} = Astro.props;
 const className = Astro.props.class;
 ---
 <div class:list={[className, 'overflow-hidden relative']}>
-    <div class="transition absolute top-0 bottom-0 left-0 right-0 dark:bg-black/10 bg-opacity-50"></div>
+    <div class="transition absolute inset-0 dark:bg-black/10 bg-opacity-50"></div>
     <img src={src} alt={alt} class="w-full h-full object-center object-cover">
 </div>
 
diff --git a/src/components/widget/DisplaySetting.astro b/src/components/widget/DisplaySetting.astro
index 769500fa..5303816f 100644
--- a/src/components/widget/DisplaySetting.astro
+++ b/src/components/widget/DisplaySetting.astro
@@ -66,6 +66,7 @@ const enableBanner = getConfig().banner.enable;
         height: 16px;
         width: 8px;
         border-radius: 2px;
+        border-width: 0
         background: rgba(255, 255, 255, 0.7);
         box-shadow: none;
         &:hover
@@ -73,7 +74,6 @@ const enableBanner = getConfig().banner.enable;
         &:active
           background: rgba(255, 255, 255, 0.6);
 
-
     &::-ms-thumb
         -webkit-appearance: none;
         height: 16px;
diff --git a/src/components/widget/Profile.astro b/src/components/widget/Profile.astro
index e518b0e8..3d6576ee 100644
--- a/src/components/widget/Profile.astro
+++ b/src/components/widget/Profile.astro
@@ -2,6 +2,7 @@
 import ImageBox from "../misc/ImageBox.astro";
 import Button from "../control/Button.astro";
 import {getConfig} from "../../utils/config-utils";
+import {Icon} from "astro-icon/components";
 interface props {
 
 }
@@ -11,8 +12,15 @@ const vConf = getConfig();
 
 ---
 <div class="card-base">
-    <ImageBox src={vConf.profile.avatar} class="mt-4 mx-auto lg:w-full lg:mt-0 rounded-2xl mb-3"></ImageBox>
-    <div class="font-bold text-lg text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
+    <a href="/about" class="group block relative m-3 overflow-hidden rounded-xl active:scale-95">
+        <div class="absolute transition group-hover:bg-black/30 group-active:bg-black/50 w-full h-full z-50 flex items-center justify-center">
+            <Icon name="material-symbols:person-outline-rounded"
+                  class="transition opacity-0 group-hover:opacity-100 text-white text-6xl">
+            </Icon>
+        </div>
+        <ImageBox src={vConf.profile.avatar} class="mt-1 mx-auto w-[240px] lg:w-full h-full lg:mt-0 "></ImageBox>
+    </a>
+    <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{vConf.profile.author}</div>
     <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-3 transition"></div>
     <div class="text-center text-neutral-400 mb-2 transition">{vConf.profile.subtitle}</div>
     <div class="flex gap-2 mx-2 justify-center mb-4">
diff --git a/src/components/widget/SideBar.astro b/src/components/widget/SideBar.astro
index 4df684a8..90e98be0 100644
--- a/src/components/widget/SideBar.astro
+++ b/src/components/widget/SideBar.astro
@@ -12,7 +12,7 @@ const className = Astro.props.class;
     </div>
     <div class="flex flex-col w-full gap-4 top-4 sticky top-4" transition:animate="none">
         <Categories></Categories>
-        <RecentPost></RecentPost>
+        <!--<RecentPost></RecentPost>-->
         <Tag></Tag>
     </div>
 </div>