diff --git a/src/components/ceCard.astro b/src/components/ceCard.astro
index 49843b1..b4f6d93 100644
--- a/src/components/ceCard.astro
+++ b/src/components/ceCard.astro
@@ -7,8 +7,8 @@ export interface Props {
 
 const {mlb, link, name } = Astro.props;
 
-const ce_img: string = `../ce/${link}.webp`;
-const mlb_ce: string = `../ce/mlb.webp`
+const ce_img: string = `/fgosite/ce/${link}.webp`;
+const mlb_ce: string = `/fgosite/ce/mlb.webp`
 let mlb_image: string = "mlbalign";
 
 if(mlb === "false") {
diff --git a/src/components/favouriteCard.astro b/src/components/favouriteCard.astro
index 7f0c518..25b115b 100644
--- a/src/components/favouriteCard.astro
+++ b/src/components/favouriteCard.astro
@@ -7,7 +7,7 @@ export interface Props {
 
 const {image, origin, name } = Astro.props;
 
-const img: string = `favourites/${image}.webp`;
+const img: string = `/fgosite/favourites/${image}.webp`;
 
 ---
 
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index efd2a29..6ff5b71 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -1,9 +1,9 @@
 ---
-import headerimg from "../../static/link_192.png"
+import headerimg from "/link_192.png"
 ---
 
 <header>
-    <a href={Astro.site} rel="noopener noreferrer" aria-label="Home">
+    <a href="/fgosite/" rel="noopener noreferrer" aria-label="Home">
         <img src={headerimg} alt="">
     </a>
     <ul class="desktop">
diff --git a/src/components/navbarEntry.astro b/src/components/navbarEntry.astro
index 9995390..33952fb 100644
--- a/src/components/navbarEntry.astro
+++ b/src/components/navbarEntry.astro
@@ -17,7 +17,7 @@ if (currentPage === slug) {
     currPage = "current"
 }
 
-const fulllink = `${Astro.site}${slug}`;
+const fulllink = `/fgosite/${slug}`;
 ---
 
 <li>
diff --git a/src/components/servantCard.astro b/src/components/servantCard.astro
index cd1b066..7f6cf0b 100644
--- a/src/components/servantCard.astro
+++ b/src/components/servantCard.astro
@@ -12,8 +12,8 @@ export interface Props {
 
 const {bond10, ml, image_bond, image_servant, np, skills, level, name } = Astro.props;
 
-const servant_img: string = `../servant/${image_servant}.webp`;
-const bondce_img: string = `../ce/bond-ce/${image_bond}.webp`
+const servant_img: string = `/fgosite/servant/${image_servant}.webp`;
+const bondce_img: string = `/fgosite/ce/bond-ce/${image_bond}.webp`
 let bondce_css: string = "bond-ce";
 
 if(bond10 === "false") {
diff --git a/src/components/taCard.astro b/src/components/taCard.astro
index f2ebac2..f852b58 100644
--- a/src/components/taCard.astro
+++ b/src/components/taCard.astro
@@ -7,7 +7,7 @@ export interface Props {
 
 const { image, link, title } = Astro.props;
 
-const icon: string = `background: url('../ta_icons/${image}.webp')`
+const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
 ---
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
     <article>
diff --git a/src/components/technologyCard.astro b/src/components/technologyCard.astro
new file mode 100644
index 0000000..fbb037a
--- /dev/null
+++ b/src/components/technologyCard.astro
@@ -0,0 +1,55 @@
+---
+export interface Props {
+	title: string;
+	link: string;
+	image: string;
+}
+
+const { image, link, title } = Astro.props;
+
+const icon: string = `background-image: url('/fgosite/technologies/${image}.webp')`
+---
+<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
+    <article>
+        <div style={icon}>
+            <h2>{title}</h2>
+        </div>
+    </article>
+</a>
+
+<style>
+article {
+    background-color: rgb(27, 27, 27);
+    border-color: #1e1e1e;
+    padding: 10px;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    height: auto;
+    width: auto;
+    line-height: 128px;
+}
+article:hover {
+    transform: scale(var(--hover-scale));
+}
+article > div {
+    background-size: contain;
+    width: 128px;
+    height: 128px;
+}
+
+article:hover h2 {
+    color: white;
+    background-color: #1e1e1e;
+    font-size: 18px;
+    display: inline-block;
+    vertical-align: center;
+    line-height: normal;
+    width: 90%;
+    border-radius: 5px;
+    opacity: 90%;
+}
+
+article h2 {
+    display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0d0a15e..1f80985 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,7 +10,7 @@ export interface Props {
 
 const { currentpage, title } = Astro.props;
 const description: string = "A reference for all esports Servants, CEs and already completed TAs that Firq can provide. Contact information available as well.";
-import favicon from "../../static/favicon.ico"
+import favicon from "/favicon.ico"
 ---
 
 <!DOCTYPE html>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 80f7de5..10dea1a 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -2,23 +2,36 @@
 import Layout from '../layouts/Layout.astro';
 import BasicSection from '../layouts/basicSection.astro';
 
-import Navbar from '../components/navbar.astro';
-import NavbarEntry from '../components/navbarEntry.astro';
-import navdata from '../../static/_navdata.json'
-
 import ContactSection from '../layouts/contactSection.astro';
 import ContactCard from '../components/contactCard.astro';
 import contactdata from '../../static/_contactdata.json'
+
+import CustomFooter from '../layouts/customFooter.astro';
+import TechnologyCard from '../components/technologyCard.astro';
+
+const techologydata = [{
+		"title": "Astro",
+		"link": "https://astro.build",
+		"image": "astro"
+	},
+	{
+		"title": "GitLab",
+		"link": "https://gitlab.io",
+		"image": "gitlab"
+	},]
 ---
 
 <Layout title="About - Firq FGO Site" currentpage="about">
     <BasicSection title="About">
-        This is a small sideproject that I'm creating. It uses Astro for developing and Gitlab for providing the site.
+        This is a small sideproject that I'm creating.
+    </BasicSection>
+    <BasicSection title="Technologies used">
+        {techologydata.map((item) => (<TechnologyCard {...item}/>))}
     </BasicSection>
     <ContactSection title="Contact me">
 		{contactdata.map((item) => (<ContactCard {...item}/>))}
 	</ContactSection>
-    
+    <CustomFooter />
 </Layout>
 
 <style>
diff --git a/src/pages/servants.astro b/src/pages/servants.astro
index b5a5425..430579b 100644
--- a/src/pages/servants.astro
+++ b/src/pages/servants.astro
@@ -1,7 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import BaseSection from '../layouts/baseSection.astro';
-import CustomFooter from '../layouts/customFooter.astro';
 
 import ServantCard from '../components/servantCard.astro';
 import servantdata from '../../static/_servantdata.json'
@@ -18,7 +17,6 @@ import cedata from '../../static/_cedata.json'
 	<BaseSection title="CE Offering">
 		{cedata.map((item) => (<CeCard {...item}/>))}
 	</BaseSection>
-	<CustomFooter />
 </Layout>
 
 <style>
diff --git a/src/pages/ta-collection.astro b/src/pages/ta-collection.astro
index 8aa5044..d37f1f3 100644
--- a/src/pages/ta-collection.astro
+++ b/src/pages/ta-collection.astro
@@ -1,6 +1,5 @@
 ---
 import Layout from '../layouts/Layout.astro';
-import CustomFooter from '../layouts/customFooter.astro';
 
 import TaSection from '../layouts/taSection.astro';
 import TaCard from '../components/taCard.astro';
@@ -12,7 +11,6 @@ import tadata from '../../static/_tadata.json'
     <TaSection title="Completed TAs">
 		{tadata.map((item) => (<TaCard {...item}/>))}
 	</TaSection>
-    <CustomFooter />
 </Layout>
 
 <style>
diff --git a/static/technologies/astro.webp b/static/technologies/astro.webp
new file mode 100644
index 0000000..000203b
Binary files /dev/null and b/static/technologies/astro.webp differ
diff --git a/static/technologies/gitlab.webp b/static/technologies/gitlab.webp
new file mode 100644
index 0000000..7731749
Binary files /dev/null and b/static/technologies/gitlab.webp differ