diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index db6b305..3a0a197 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -3,6 +3,24 @@ import { useState } from "react";
 export default function Home() {
     const [active, setActive] = useState("projects");
 
+    const sections = [
+        {
+            id: "projects",
+            title: "Projects",
+            content: "Project content",
+        },
+        {
+            id: "systems",
+            title: "Systems",
+            content: "Systems content",
+        },
+        {
+            id: "about",
+            title: "About",
+            content: "About content",
+        },
+    ];
+
     return (
         <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
             <div className="w-full max-w-6xl text-center">
@@ -22,73 +40,35 @@ export default function Home() {
 
                 <div className="mt-10 border rounded p-4">
                     <div className="flex flex-wrap justify-center gap-12">
-                        <button
-                            onClick={() => setActive("projects")}
-                            className={`ui-btn ${
-                                active === "projects" ? "ui-btn-active" : ""
-                            }`}
-                        >
-                            Projects
-                        </button>
-
-                        <button
-                            onClick={() => setActive("systems")}
-                            className={`ui-btn ${
-                                active === "systems" ? "ui-btn-active" : ""
-                            }`}
-                        >
-                            Systems
-                        </button>
-
-                        <button
-                            onClick={() => setActive("about")}
-                            className={`ui-btn ${
-                                active === "about" ? "ui-btn-active" : ""
-                            }`}
-                        >
-                            About
-                        </button>
+                        {sections.map((section) => (
+                            <button
+                                key={section.id}
+                                onClick={() => setActive(section.id)}
+                                className={`ui-btn ${
+                                    active === section.id ? "ui-btn-active" : ""
+                                }`}
+                            >
+                                {section.title}
+                            </button>
+                        ))}
                     </div>
 
                     <div className="mt-6 text-left relative min-h-20">
-                        <div
-                            className={`transition-all duration-300 ${
-                                active === "projects"
-                                    ? "opacity-100 translate-y-0"
-                                    : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
-                            }`}
-                        >
-                            <h2 className="text-2xl font-bold text-ctp-mauve">
-                                Projects
-                            </h2>
-                            <p>Project content</p>
-                        </div>
-
-                        <div
-                            className={`transition-all duration-300 ${
-                                active === "systems"
-                                    ? "opacity-100 translate-y-0"
-                                    : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
-                            }`}
-                        >
-                            <h2 className="text-2xl font-bold text-ctp-mauve">
-                                Systems
-                            </h2>
-                            <p>Systems content</p>
-                        </div>
-
-                        <div
-                            className={`transition-all duration-300 ${
-                                active === "about"
-                                    ? "opacity-100 translate-y-0"
-                                    : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
-                            }`}
-                        >
-                            <h2 className="text-2xl font-bold text-ctp-mauve">
-                                About
-                            </h2>
-                            <p>About content</p>
-                        </div>
+                        {sections.map((section) => (
+                            <div
+                                key={section.id}
+                                className={`transition-all duration-300 ${
+                                    active === section.id
+                                        ? "opacity-100 translate-y-0"
+                                        : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
+                                }`}
+                            >
+                                <h2 className="text-2xl font-bold text-ctp-mauve">
+                                    {section.title}
+                                </h2>
+                                <p>{section.content}</p>
+                            </div>
+                        ))}
                     </div>
                 </div>
             </div>