diff --git a/.gitignore b/.gitignore
index 5ef6a52..b092b8c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 !.yarn/plugins
 !.yarn/releases
 !.yarn/versions
+package-lock.json
 
 # testing
 /coverage
diff --git a/package-lock.json b/package-lock.json
index ef58bd2..78ee3fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,6 @@
             "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.27.1",
                 "@babel/generator": "^7.28.5",
@@ -1586,7 +1585,6 @@
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
             "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "csstype": "^3.0.2"
             }
@@ -1653,7 +1651,6 @@
             "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.46.2",
                 "@typescript-eslint/types": "8.46.2",
@@ -2190,7 +2187,6 @@
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -2580,7 +2576,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.8.19",
                 "caniuse-lite": "^1.0.30001751",
@@ -3266,7 +3261,6 @@
             "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -3452,7 +3446,6 @@
             "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@rtsao/scc": "^1.1.0",
                 "array-includes": "^3.1.9",
@@ -6851,7 +6844,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -6950,7 +6942,6 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
             "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -6960,7 +6951,6 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
             "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "scheduler": "^0.27.0"
             },
@@ -7803,8 +7793,7 @@
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.16.tgz",
             "integrity": "sha512-pONL5awpaQX4LN5eiv7moSiSPd/DLDzKVRJz8Q9PgzmAdd1R4307GQS2ZpfiN7ZmekdQrfhZZiSE5jkLR4WNaA==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/tapable": {
             "version": "2.3.0",
@@ -7861,7 +7850,6 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -8044,7 +8032,6 @@
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -8466,7 +8453,6 @@
             "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"
             }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7212c67..b087b4c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import { GithubButton, BookButton } from "@/components/ui/buttons";
 
 async function getOrgData() {
     const res = await fetch(`https://api.github.com/orgs/Syobosetsu-Proj`, {
@@ -15,35 +15,6 @@ async function getOrgData() {
     return res.json();
 }
 
-export function GithubButton(sublink: string) {
-    return (
-        <a
-            href={`https://github.com/${sublink}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-neutral-800 active:bg-neutral-950 font-medium border-neutral-900 text-white rounded-lg hover:bg-neutral-900 disabled:opacity-50"
-        >
-            <img src="/icons/github.svg" alt="GitHub" className="w-5 h-5 filter invert" />
-
-            <span>GitHub</span>
-        </a>
-    );
-}
-
-export function BookButton(link: string, text: string) {
-    return (
-        <Link
-            href={link}
-            rel="noopener noreferrer"
-            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-green-800 active:bg-green-950 font-medium border-green-900 text-white rounded-lg hover:bg-green-900 disabled:opacity-50"
-        >
-            <img src="/icons/book.svg" alt="GitHub" className="w-5 h-5 filter invert" />
-
-            <span>{text}</span>
-        </Link>
-    );
-}
-
 export default async function Home() {
     const org = await getOrgData();
 
@@ -60,8 +31,8 @@ export default async function Home() {
                         </div>
 
                         <div className="flex gap-4 mt-10">
-                            {GithubButton("Syobosetsu-Proj")}
-                            {BookButton("blog", "Blog")}
+                            <GithubButton sublink="Syobosetsu-Proj" />
+                            <BookButton link="blog">Blog</BookButton>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/ui/buttons.tsx b/src/components/ui/buttons.tsx
new file mode 100644
index 0000000..06c9919
--- /dev/null
+++ b/src/components/ui/buttons.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+export function GithubButton({ sublink }: { sublink: string }) {
+    return (
+        <a
+            href={`https://github.com/${sublink}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-neutral-800 active:bg-neutral-950 font-medium border-neutral-900 text-white rounded-lg hover:bg-neutral-900 disabled:opacity-50"
+        >
+            <img src="/icons/github.svg" alt="GitHub" className="w-5 h-5 filter invert" />
+
+            <span>GitHub</span>
+        </a>
+    );
+}
+
+export function BookButton({ link, children }: { link: string, children: React.ReactNode }) {
+    return (
+        <Link
+            href={link}
+            className="mt-10 py-1.5 px-4 inline-flex items-center justify-center gap-2 transition-colors bg-green-800 active:bg-green-950 font-medium border-green-900 text-white rounded-lg hover:bg-green-900 disabled:opacity-50"
+        >
+            <img src="/icons/book.svg" alt="Book" className="w-5 h-5 filter invert" />
+
+            <span>{children}</span>
+        </Link>
+    );
+}
\ No newline at end of file