diff --git a/components/mdx/H2.tsx b/components/mdx/H2.tsx
index 49886a2..bdeaddf 100644
--- a/components/mdx/H2.tsx
+++ b/components/mdx/H2.tsx
@@ -2,7 +2,7 @@ import { fontFangZhengXiaoBiaoSongCN } from "@/styles/font";
 
 export const H2 = (props: JSX.IntrinsicElements["h2"]) => {
   return (
-    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} scroll-mt-20`} id={props.id}>
+    <h2 className={`${fontFangZhengXiaoBiaoSongCN.className} mt-4 mb-2 scroll-mt-20`} id={props.id}>
       {props.children}
     </h2>
   );
diff --git a/components/readerpage/TOC.tsx b/components/readerpage/TOC.tsx
index f6c3d11..3092686 100644
--- a/components/readerpage/TOC.tsx
+++ b/components/readerpage/TOC.tsx
@@ -1,22 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { TTOCItem } from "@/types/toc.type";
 import Link from "next/link";
+import { Separator } from "../ui/separator";
 
 export const TOC = (props: { data: TTOCItem[] }) => {
   return (
-    <div className="sticky top-[5em] mx-5 p-2 border border-black dark:border-gray-400">
-      <div className="p-2 font-bold text-center border bg-black text-white dark:text-black dark:bg-gray-100">
-        {"TABLE OF CONTENTS"}
-      </div>
-      <ul className="flat-scrollbar my-1 px-1 h-[60vh] overflow-y-auto">
-        {props.data?.map((item) => (
-          <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
-            <li
-              className="my-2 text-sm target:text-blue-500"
-              style={{ paddingLeft: `${item.level - 1}em` }}
-            >{`${item.title}`}</li>
-          </Link>
-        ))}
-      </ul>
-    </div>
+    <Card className="sticky top-[5em] mx-5">
+      <CardHeader className="p-3">
+        <CardTitle className="text-lg text-center">{"TABLE OF CONTENTS"}</CardTitle>
+      </CardHeader>
+      <Separator />
+      <CardContent className="px-1 py-2 h-[60vh] overflow-y-auto flat-scrollbar-normal">
+        <ul>
+          {props.data?.map((item) => (
+            <Link className="hover:text-sky-500" href={`#${item.anchorId}`} key={`toc-${item.anchorId}`}>
+              <li
+                className="my-2 text-sm target:text-blue-500"
+                style={{ paddingLeft: `${item.level - 1}em` }}
+              >{`${item.title}`}</li>
+            </Link>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
   );
 };
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..d4d4fbf
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..afa13ec
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/utils/NavBar.tsx b/components/utils/NavBar.tsx
index a913b80..8b378ad 100644
--- a/components/utils/NavBar.tsx
+++ b/components/utils/NavBar.tsx
@@ -33,8 +33,8 @@ export const NavBar = () => {
 
   return (
     <Sheet open={isSideNavOpen} onOpenChange={(open) => setIsSideNavOpen(open)}>
-      <nav className="sticky top-0 z-50 flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50">
-        <Link href="/" className="cursor-pointer my-auto text-xl font-bold">
+      <div className="sticky top-0 z-50 border-gray-200 dark:border-gray-700 border-b flex flex-wrap justify-between py-3 backdrop-blur bg-white/50 dark:bg-gray-950/50 px-5 lg:px-20 xl:px-32 2xl:px-52">
+        <Link href="/" className="cursor-pointer my-auto text-2xl font-bold">
           <h1 className={`${fontFangZhengXiaoBiaoSongCN.className}`}>{Config.SiteTitle}</h1>
         </Link>
         <div className="my-auto hidden sm:flex">
@@ -74,7 +74,7 @@ export const NavBar = () => {
             />
           </SheetTrigger>
         </div>
-      </nav>
+      </div>
       <SheetContent className="bg:white border-none shadow-md dark:bg-black flex flex-col justify-end text-end">
         {MenuItems.map((menuItem) => (
           <Link
diff --git a/components/utils/PostList.tsx b/components/utils/PostList.tsx
index 40c2737..3bf1a99 100644
--- a/components/utils/PostList.tsx
+++ b/components/utils/PostList.tsx
@@ -3,36 +3,38 @@ import { fontSourceSerifScreenCN } from "@/styles/font";
 import { TPostListItem } from "@/types/post-list";
 import { nanoid } from "nanoid";
 import Link from "next/link";
-import { TagBadge } from "./TagBadge";
+import { Badge } from "../ui/badge";
 
 export const PostList = (props: { data: TPostListItem[] }) => {
   return (
     <div>
-      {props.data.map((postListItem, index) => (
-        <Link className="cursor-pointer" href={`/blog/${postListItem.id}`} key={`post-list-${nanoid()}`}>
+      {props.data.map((postItem, index) => (
+        <Link className="cursor-pointer" href={`/blog/${postItem.id}`} key={`post-list-${nanoid()}`}>
           <div
-            className={`${fontSourceSerifScreenCN.className} flex flex-col justify-center ${
+            className={`flex flex-col justify-center ${
               index !== props.data.length - 1 && "border-b"
             } border-gray-200 hover:bg-gray-50 dark:hover:bg-gray-950 dark:border-gray-800 p-3`}
           >
-            <div className="flex-center flex flex-col py-2">
-              <h3 className="mx-auto text-lg font-extrabold capitalize">{postListItem.frontMatter.title}</h3>
-              {postListItem.frontMatter.subtitle && (
+            <div className={`${fontSourceSerifScreenCN.className} text-center flex-col py-2`}>
+              <h3 className="mx-auto text-lg font-extrabold capitalize">{postItem.frontMatter.title}</h3>
+              {postItem.frontMatter.subtitle && (
                 <div className="mx-auto text-base font-semibold capitalize text-gray-700 dark:text-gray-300">
-                  {postListItem.frontMatter.subtitle}
+                  {postItem.frontMatter.subtitle}
                 </div>
               )}
             </div>
-            <div className="text-center">{normalizeDate(postListItem.frontMatter.time)}</div>
-            {postListItem.frontMatter.summary && (
-              <div className="flex my-1 justify-center">
-                <p>{postListItem.frontMatter.summary}</p>
+            <div className="text-center">{normalizeDate(postItem.frontMatter.time)}</div>
+            {postItem.frontMatter.summary && (
+              <div className={`${fontSourceSerifScreenCN.className} flex my-1 justify-center`}>
+                <p>{postItem.frontMatter.summary}</p>
               </div>
             )}
-            {postListItem.frontMatter.tags && (
+            {postItem.frontMatter.tags && (
               <div className="my-2 flex justify-center">
-                {postListItem.frontMatter.tags.map((tagName) => (
-                  <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
+                {postItem.frontMatter.tags.map((tagName) => (
+                  <Badge className="mx-1" key={`tags-${nanoid()}`}>
+                    {tagName}
+                  </Badge>
                 ))}
               </div>
             )}
diff --git a/pages/404.tsx b/pages/404.tsx
index bd80e42..453d262 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -12,8 +12,8 @@ export default function NotFoundPage() {
   };
   return (
     <Page>
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <div className="flex flex-col justify-center">
           <TfiFaceSad className="mx-auto my-4" size={"6em"} />
           <p className="mx-auto my-3 text-center text-2xl font-bold">{"404 NOT FOUND"}</p>
diff --git a/pages/about.tsx b/pages/about.tsx
index e2eb300..3264696 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -16,8 +16,8 @@ export default function AboutPage() {
         description={"Type your brief self-introduction in a sentence here make SEO recognize it easily."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"ABOUT ME"}
         </h2>
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index 058efb6..cfffe2d 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -9,7 +9,6 @@ import { Toaster } from "@/components/ui/toaster";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { SEO } from "@/components/utils/SEO";
-import { TagBadge } from "@/components/utils/TagBadge";
 import { Config } from "@/data/config";
 import { normalizeDate } from "@/lib/date";
 import { getPostFileContent, sortedPosts } from "@/lib/post-process";
@@ -67,17 +66,17 @@ const ReaderPage = (props: ReaderPageProps) => {
         coverURL={props.frontMatter.coverURL ?? Config.AvatarURL}
       />
       <Toaster />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
-        <div className="my-5 justify-center md:flex">
-          <div className="md:w-2/3">
-            <div className="py-1">
+        <div className="py-5 justify-center md:flex">
+          <div className="md:w-2/3 py-5">
+            <div className="typesetting">
               {props.frontMatter.coverURL && <PostCover coverURL={props.frontMatter.coverURL} />}
-              <h2
+              <div
                 className={`${fontFangZhengXiaoBiaoSongCN.className} flex justify-center whitespace-normal break-words text-3xl font-bold capitalize`}
               >
                 {props.frontMatter?.title}
-              </h2>
+              </div>
               {props.frontMatter?.subtitle && (
                 <div
                   className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
@@ -93,28 +92,35 @@ const ReaderPage = (props: ReaderPageProps) => {
               )}
               {props.frontMatter.tags && (
                 <div className={`py-3 flex flex-wrap justify-start border-t border-b`}>
-                  <div className="font-bold mr-2 my-1">{"TAGS : "}</div>
+                  <div className="my-auto font-bold mr-2">{"TAGS: "}</div>
                   {props.frontMatter.tags.map((tagName) => (
-                    <TagBadge name={tagName} size="sm" key={`tags-${nanoid()}`} />
+                    <Link
+                      className="mx-2 my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold text-sm"
+                      href={`/tags/${tagName}`}
+                      key={`tags-${nanoid()}`}
+                    >
+                      {tagName}
+                    </Link>
                   ))}
                 </div>
               )}
-            </div>
-            <div
-              className={`typesetting ${fontSourceSerifScreenCN.className} mt-0 mb-10 ${
-                !props.frontMatter.allowShare && "select-none"
-              }`}
-              {...handleRightSwipe}
-            >
-              {compiledSource && (
-                <MDXRemote
-                  compiledSource={compiledSource.compiledSource}
-                  frontmatter={compiledSource.frontmatter}
-                  scope={compiledSource.scope}
-                  //@ts-ignore
-                  components={MDXComponentsSet}
-                />
-              )}
+
+              <div
+                className={`py-5 ${fontSourceSerifScreenCN.className} ${
+                  !props.frontMatter.allowShare ? "select-none" : ""
+                }`}
+                {...handleRightSwipe}
+              >
+                {compiledSource && (
+                  <MDXRemote
+                    compiledSource={compiledSource.compiledSource}
+                    frontmatter={compiledSource.frontmatter}
+                    scope={compiledSource.scope}
+                    //@ts-ignore
+                    components={MDXComponentsSet}
+                  />
+                )}
+              </div>
             </div>
             <hr />
             <ShareButtons
@@ -150,13 +156,13 @@ const ReaderPage = (props: ReaderPageProps) => {
             <PostComments postId={props.postId} />
           </div>
           {isTOCLongEnough && (
-            <div className="hidden md:block md:w-1/3">
+            <div className="hidden lg:block lg:w-1/3 py-5">
               <TOC data={props.tocList} />
             </div>
           )}
         </div>
         {isTOCLongEnough && (
-          <div className="md:hidden">
+          <div className="lg:hidden">
             <DrawerTOC data={props.tocList} />
           </div>
         )}
diff --git a/pages/friends.tsx b/pages/friends.tsx
index 5076115..83c97f5 100644
--- a/pages/friends.tsx
+++ b/pages/friends.tsx
@@ -13,8 +13,8 @@ export default function FriendsPage() {
   return (
     <Page>
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"FRIENDS"}
         </h2>
diff --git a/pages/index.tsx b/pages/index.tsx
index dfee306..9176af9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -30,8 +30,8 @@ export default function Home(props: HomePageProps) {
         description={`Welcome to the ${Config.Nickname}'s blog website. It's the website for recording thoughts for technology, life experience and so on.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <HomeCover />
         {props.pinnedPostList.length !== 0 && (
           <div>
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index c54596a..33ebbf5 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/pages/posts/[[...slug]].tsx
@@ -6,7 +6,6 @@ import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
 import { SEO } from "@/components/utils/SEO";
-import { TagBadge } from "@/components/utils/TagBadge";
 import { PostCountPerPagination } from "@/consts/consts";
 import { Config } from "@/data/config";
 import { sortedPosts } from "@/lib/post-process";
@@ -54,8 +53,8 @@ export default function PostsPage(props: PostsPageProps) {
         description={"Here is the list page for all published posts. Click here for more details."}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-5 flex justify-center text-2xl ${fontFangZhengXiaoBiaoSongCN.className} font-bold`}>
           <LuPenTool className="mx-2 my-auto" />
           {"ALL POSTS"}
@@ -65,8 +64,12 @@ export default function PostsPage(props: PostsPageProps) {
             <Separator />
             <div className={`my-5 flex flex-wrap justify-center px-2 ${fontSourceSerifScreenCN.className}`}>
               {props.tagList.map((item) => (
-                <Link href={`/tags/${item.name}`} key={`tag-badge-${nanoid()}`}>
-                  <TagBadge name={item.name} size="md" count={item.count} />
+                <Link
+                  className="m-1 p-1 underline underline-offset-[5px] my-auto text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white font-bold"
+                  href={`/tags/${item.name}`}
+                  key={`tags-${nanoid()}`}
+                >
+                  {`${item.name} (${item.count})`}
                 </Link>
               ))}
             </div>
diff --git a/pages/search.tsx b/pages/search.tsx
index 0eeff8d..0795a7c 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -59,8 +59,8 @@ export default function SearchPage() {
     <Page>
       <SEO title={`${Config.SiteTitle} - Search`} description={"Search the posts on your demand."} />
       <Toaster />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <h2 className={`my-10 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
           {"SEARCH POSTS"}
         </h2>
@@ -72,7 +72,7 @@ export default function SearchPage() {
             onKeyDown={handleEnterKeySearch}
             onChange={handleInputSearchText}
           />
-          <Button className="mx-3 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
+          <Button className="mx-3 w-32 my-auto" disabled={querySearch.isLoading} onClick={handleMakeSearch}>
             {querySearch.isFetching ? "Loading" : "Search"}
           </Button>
         </div>
diff --git a/pages/sponsor.tsx b/pages/sponsor.tsx
index d54ba4f..d07fa6b 100644
--- a/pages/sponsor.tsx
+++ b/pages/sponsor.tsx
@@ -21,8 +21,8 @@ export default function AboutPage() {
           "If you like my works, I would deeply appreciate your support as a patron. Your contribution not only fuels my creative journey but also allows me to delve deeper into my passion."
         }
       />
+      <NavBar />
       <ContentContainer>
-        <NavBar />
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
             <h2
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index 35e9105..6849712 100644
--- a/pages/tags/[...slug].tsx
+++ b/pages/tags/[...slug].tsx
@@ -46,13 +46,13 @@ export default function TagsContentPage(props: TagsContentPageProps) {
 
   return (
     <Page>
+      <NavBar />
       <SEO
         title={`Tag - ${props.tagName}`}
         description={`Here are posts under the tag ${props.tagName}.`}
         coverURL={Config.PageCovers.websiteCoverURL}
       />
       <ContentContainer>
-        <NavBar />
         <h2
           className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
         >
diff --git a/styles/typesetting.css b/styles/typesetting.css
index 789ce25..5051271 100644
--- a/styles/typesetting.css
+++ b/styles/typesetting.css
@@ -6,12 +6,7 @@
   px-0
   dark:prose-invert 
 
-  prose-h1:text-2xl
-  prose-h2:scroll-mt-20
-  prose-h3:scroll-mt-20
-  prose-h4:scroll-mt-20
-  prose-h5:scroll-mt-20
-  prose-h6:scroll-mt-20
+  prose-headings:scroll-mt-20
   
   prose-a:text-sky-700
   prose-figure:mx-auto