diff --git a/components/homepage/HomeCover.tsx b/components/homepage/HomeCover.tsx
index d9ad99c..ecee468 100644
--- a/components/homepage/HomeCover.tsx
+++ b/components/homepage/HomeCover.tsx
@@ -19,7 +19,9 @@ export const HomeCover = () => {
           src={Config.AvatarURL}
         />
       </div>
-      <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>{Config.Nickname}</div>
+      <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-8 text-center text-4xl font-bold`}>
+        {Config.Nickname}
+      </div>
       <SocialIcons />
       {Config.Sentence && (
         <div className="my-8 flex justify-center">
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 70f5939..d93ed93 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center rounded-md text-base ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
+        default: "h-9 px-5 py-1",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
diff --git a/pages/about.tsx b/pages/about.tsx
index 9654ea2..f362527 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -17,7 +17,9 @@ export default function AboutPage() {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"ABOUT ME"}</h2>
+        <h2 className={`my-5 flex justify-around text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"ABOUT ME"}
+        </h2>
         <hr />
         <div className={`${fontSourceSerifScreenCN.className} my-5 justify-center md:flex md:space-x-10`}>
           <div className="my-auto flex md:w-1/3">
diff --git a/pages/blog/[id].tsx b/pages/blog/[id].tsx
index b8c7c93..0a8fce0 100644
--- a/pages/blog/[id].tsx
+++ b/pages/blog/[id].tsx
@@ -65,7 +65,9 @@ const ReaderPage = (props: ReaderPageProps) => {
                 {props.frontMatter?.title}
               </h2>
               {props.frontMatter?.subtitle && (
-                <div className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}>
+                <div
+                  className={`${fontFangZhengXiaoBiaoSongCN.className} my-1 flex justify-center text-xl font-bold capitalize`}
+                >
                   {props.frontMatter.subtitle}
                 </div>
               )}
diff --git a/pages/friends.tsx b/pages/friends.tsx
index e0a06ea..c22b586 100644
--- a/pages/friends.tsx
+++ b/pages/friends.tsx
@@ -14,7 +14,9 @@ export default function FriendsPage() {
       <SEO title={`${Config.SiteTitle} - Friends`} description={"My Friend Links"} />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>{"FRIENDS"}</h2>
+        <h2 className={`my-5 flex justify-center text-2xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+          {"FRIENDS"}
+        </h2>
         <hr />
         <div className={`my-5 py-3 flex flex-wrap justify-center text-2xl ${fontSourceSerifScreenCN.className}`}>
           {FriendsList.map((item) => (
diff --git a/pages/index.tsx b/pages/index.tsx
index 252e9db..a22a786 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,6 @@
 import { HomeCover } from "@/components/homepage/HomeCover";
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
 import { PostList } from "@/components/utils/PostList";
@@ -52,9 +53,11 @@ export default function Home(props: HomePageProps) {
             <hr />
             <PostList data={props.latestPostList} />
             <div className="my-2 flex justify-end">
-              <Link href="/posts" className="link-button font-bold text-base">
-                {"MORE POSTS >"}
-              </Link>
+              <Button asChild>
+                <Link href="/posts" className="font-bold">
+                  {"MORE POSTS >"}
+                </Link>
+              </Button>
             </div>
           </div>
         )}
diff --git a/pages/posts/[[...slug]].tsx b/pages/posts/[[...slug]].tsx
index e70783b..3e2516c 100644
--- a/pages/posts/[[...slug]].tsx
+++ b/pages/posts/[[...slug]].tsx
@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
@@ -59,9 +60,11 @@ export default function PostsPage(props: PostsPageProps) {
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
-            <Link href={`/posts/${props.pageNumber - 1}`} className="link-button my-auto">
-              {"< PREV"}
-            </Link>
+            <Button asChild>
+              <Link href={`/posts/${props.pageNumber - 1}/`} className="font-bold">
+                {"< PREV"}
+              </Link>
+            </Button>
           )}
           <div className="my-auto font-bold flex justify-center">
             <Input
@@ -73,9 +76,11 @@ export default function PostsPage(props: PostsPageProps) {
             <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
           </div>
           {props.pageNumber !== props.pageAmount && (
-            <Link href={`/posts/${props.pageNumber + 1}`} className="link-button my-auto">
-              {"NEXT >"}
-            </Link>
+            <Button asChild>
+              <Link href={`/posts/${props.pageNumber + 1}/`} className="font-bold">
+                {"NEXT >"}
+              </Link>
+            </Button>
           )}
         </div>
       </ContentContainer>
diff --git a/pages/sponsor.tsx b/pages/sponsor.tsx
index f85b503..db4a26a 100644
--- a/pages/sponsor.tsx
+++ b/pages/sponsor.tsx
@@ -24,7 +24,9 @@ export default function AboutPage() {
       <ContentContainer>
         <div className="md:flex">
           <div className="flex flex-col justify-center md:w-1/2">
-            <h2 className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}>
+            <h2
+              className={`my-5 flex justify-center text-2xl font-bold text-red-500 ${fontFangZhengXiaoBiaoSongCN.className}`}
+            >
               <GoHeartFill className="mx-2 my-auto" />
               {"SPONSOR"}
             </h2>
diff --git a/pages/tags/[...slug].tsx b/pages/tags/[...slug].tsx
index e61ddee..b6ddfe1 100644
--- a/pages/tags/[...slug].tsx
+++ b/pages/tags/[...slug].tsx
@@ -1,4 +1,5 @@
 import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Footer } from "@/components/utils/Footer";
 import { NavBar } from "@/components/utils/NavBar";
@@ -51,16 +52,20 @@ export default function TagsContentPage(props: TagsContentPageProps) {
       />
       <NavBar />
       <ContentContainer>
-        <h2 className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}>
+        <h2
+          className={`my-5 flex flex-col justify-center text-center text-3xl font-bold ${fontFangZhengXiaoBiaoSongCN.className}`}
+        >
           {`Posts of ${props.tagName}`}
         </h2>
         <hr />
         <PostList data={props.postList} />
         <div className="my-5 flex justify-between text-base font-bold">
           {props.pageNumber !== 1 && (
-            <Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="link-button my-auto">
-              {"< PREV"}
-            </Link>
+            <Button asChild>
+              <Link href={`/tags/${props.tagName}/${props.pageNumber - 1}/`} className="font-bold">
+                {"< PREV"}
+              </Link>
+            </Button>
           )}
           <div className="my-auto font-bold flex justify-center">
             <Input
@@ -72,9 +77,11 @@ export default function TagsContentPage(props: TagsContentPageProps) {
             <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
           </div>
           {props.pageNumber !== props.pageAmount && (
-            <Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="link-button my-auto">
-              {"NEXT >"}
-            </Link>
+            <Button asChild>
+              <Link href={`/tags/${props.tagName}/${props.pageNumber + 1}/`} className="font-bold">
+                {"NEXT >"}
+              </Link>
+            </Button>
           )}
         </div>
       </ContentContainer>
diff --git a/styles/formuation.css b/styles/formulation.css
similarity index 100%
rename from styles/formuation.css
rename to styles/formulation.css
diff --git a/styles/globals.css b/styles/globals.css
index 8b1ba62..b0791d0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,8 +3,7 @@
 @tailwind utilities;
 
 @import "./typesetting.css";
-@import "./formuation.css";
-@import "./ui.css";
+@import "./formulation.css";
 @import "./layout.css";
 @import "./scrollbar.css";
 
@@ -82,3 +81,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+.selection-style {
+  @apply selection:bg-black
+      selection:text-white
+      dark:selection:bg-white
+      dark:selection:text-black;
+}
+
+* {
+  @apply selection-style;
+}
diff --git a/styles/ui.css b/styles/ui.css
deleted file mode 100644
index 4469a6b..0000000
--- a/styles/ui.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.selection-style {
-  @apply selection:bg-black
-      selection:text-white
-      dark:selection:bg-white
-      dark:selection:text-black;
-}
-
-.tag-link {
-  @apply border-2 border-black px-2 hover:border-gray-600 hover:text-gray-600 dark:border-white  dark:text-white  dark:hover:border-gray-200  dark:hover:text-gray-200;
-}
-
-.link-button {
-  @apply rounded-md
-  bg-black
-  px-5
-  py-1
-  text-white
-  hover:bg-gray-600
-  dark:bg-white
-  dark:text-black
-  dark:hover:bg-gray-200;
-}
-
-* {
-  @apply selection-style;
-}