diff --git a/src/components/navbuttonsTitle.astro b/src/components/navbuttonsTitle.astro
new file mode 100644
index 0000000..80901ef
--- /dev/null
+++ b/src/components/navbuttonsTitle.astro
@@ -0,0 +1,31 @@
+---
+
+---
+
+<div>
+    <button>Servant Offering</button>
+    <button>TA Achievements</button>
+    <button>About</button>
+</div>
+
+
+<style>
+    div {
+        display: flex;
+        margin: 1em 0%;
+    }
+    button {
+        padding: 1em 1em;
+        margin: 0em 0.5em;
+        background-color: rgb(218, 66, 218);
+        border-radius: 0%;
+        border-width: 0;
+        text-align: center;
+        font-size: large;
+        color: black;
+        width: 10em;
+    }
+    button:active {
+        background-color: blueviolet;
+    }
+</style>
\ No newline at end of file
diff --git a/src/layouts/aboutSection.astro b/src/layouts/aboutSection.astro
new file mode 100644
index 0000000..e498585
--- /dev/null
+++ b/src/layouts/aboutSection.astro
@@ -0,0 +1,43 @@
+---
+export interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<section>
+    <h1>{title}</h1>
+    <div>
+        <slot />
+    </div>
+</section>
+
+<style>
+    h1 {
+        color: white;
+        margin: 0.5rem 0px;
+        padding: 0.25rem 0.75rem;
+        width: max-content;
+        background-color: #1e1e1e;
+    }
+    div {
+        row-gap: 1em;
+        column-gap: 1em;
+        justify-content: center;
+        align-self: center;
+        display: flex;
+        flex-flow: row wrap;
+        padding: 1em;
+    }
+    @media (min-width: 512px) {
+        div {
+            justify-content: left;
+        }
+    }
+    div {
+        color: white;
+        font-size: 1em;
+    }
+    
+</style>
\ No newline at end of file
diff --git a/src/layouts/hometitle.astro b/src/layouts/hometitle.astro
new file mode 100644
index 0000000..f9a5483
--- /dev/null
+++ b/src/layouts/hometitle.astro
@@ -0,0 +1,31 @@
+---
+
+---
+
+<div class="wrap">
+    <div>
+        <span>FIRQ FGO SITE</span>
+        <slot />
+    </div>
+</div>
+
+<style>
+    .wrap {
+        display: block;
+    }
+    .wrap > div {
+        display: flex;
+        padding: 15% 20%;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+    span {
+        display: inline-block;
+        padding: 0.1em;
+        font-weight: bold;
+        color: white;
+        font-size: 5em;
+        background-color: #1e1e1e;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/about.astro b/src/pages/about.astro
new file mode 100644
index 0000000..9ab3237
--- /dev/null
+++ b/src/pages/about.astro
@@ -0,0 +1,24 @@
+---
+import Layout from '../layouts/Layout.astro';
+import CustomFooter from '../layouts/customFooter.astro';
+import Hometitle from '../layouts/hometitle.astro';
+import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
+import ContactSection from '../layouts/contactSection.astro';
+import contactdata from '../../static/_contactdata.json'
+import ContactCard from '../components/contactCard.astro';
+import AboutSection from '../layouts/aboutSection.astro';
+
+---
+
+<Layout title="Firq FGO Site">
+    <AboutSection title="About">
+        This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
+    </AboutSection>
+    <ContactSection title="Contact me">
+		{contactdata.map((item) => (<ContactCard {...item}/>))}
+	</ContactSection>
+    
+</Layout>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2dd1787..ca437ab 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,36 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import BaseSection from '../layouts/baseSection.astro';
-import TaSection from '../layouts/taSection.astro';
-import ContactSection from '../layouts/contactSection.astro';
 import CustomFooter from '../layouts/customFooter.astro';
-
-import ServantCard from '../components/servantCard.astro';
-import CeCard from '../components/ceCard.astro';
-import TaCard from '../components/taCard.astro';
-import ContactCard from '../components/contactCard.astro';
-
-import servantdata from '../../static/_servantdata.json'
-import cedata from '../../static/_cedata.json'
-import tadata from '../../static/_tadata.json'
-import contactdata from '../../static/_contactdata.json'
+import Hometitle from '../layouts/hometitle.astro';
+import NavbuttonsTitle from '../components/navbuttonsTitle.astro';
 
 ---
 
-<Layout title="Firq TA on Astro">
-	<BaseSection title="Servant Offering">
-		{servantdata.map((item) => (<ServantCard {...item}/>))}
-	</BaseSection>
-	<BaseSection title="CE Offering">
-		{cedata.map((item) => (<CeCard {...item}/>))}
-	</BaseSection>
-	<TaSection title="Completed TAs">
-		{tadata.map((item) => (<TaCard {...item}/>))}
-	</TaSection>
-	<ContactSection title="Contact me">
-		{contactdata.map((item) => (<ContactCard {...item}/>))}
-	</ContactSection>
-	<CustomFooter />
+<Layout title="Firq FGO Site">
+    <Hometitle>
+        <NavbuttonsTitle></NavbuttonsTitle>
+    </Hometitle>
 </Layout>
 
 <style>
diff --git a/src/pages/servants.astro b/src/pages/servants.astro
new file mode 100644
index 0000000..f0e77d7
--- /dev/null
+++ b/src/pages/servants.astro
@@ -0,0 +1,34 @@
+---
+import Layout from '../layouts/Layout.astro';
+import BaseSection from '../layouts/baseSection.astro';
+import TaSection from '../layouts/taSection.astro';
+import ContactSection from '../layouts/contactSection.astro';
+import CustomFooter from '../layouts/customFooter.astro';
+
+import ServantCard from '../components/servantCard.astro';
+import CeCard from '../components/ceCard.astro';
+import TaCard from '../components/taCard.astro';
+import ContactCard from '../components/contactCard.astro';
+
+import servantdata from '../../static/_servantdata.json'
+import cedata from '../../static/_cedata.json'
+import tadata from '../../static/_tadata.json'
+import contactdata from '../../static/_contactdata.json'
+
+---
+
+<Layout title="Firq TA on Astro">
+	<BaseSection title="Servant Offering">
+		{servantdata.map((item) => (<ServantCard {...item}/>))}
+	</BaseSection>
+	<BaseSection title="CE Offering">
+		{cedata.map((item) => (<CeCard {...item}/>))}
+	</BaseSection>
+	<TaSection title="Completed TAs">
+		{tadata.map((item) => (<TaCard {...item}/>))}
+	</TaSection>
+	<CustomFooter />
+</Layout>
+
+<style>
+</style>