diff --git a/src/components/favouriteCard.astro b/src/components/favouriteCard.astro
new file mode 100644
index 0000000..aeb9389
--- /dev/null
+++ b/src/components/favouriteCard.astro
@@ -0,0 +1,90 @@
+---
+export interface Props {
+	name: string;
+	origin: string;
+    image: string;
+}
+
+const {image, origin, name } = Astro.props;
+
+const img: string = `favourites/${image}.png`;
+
+---
+
+<article>
+    <div class="heading">{name}</div>
+    <img src={img} alt={name}>
+    <h2 class="subtext">
+        {origin}
+    </h2>
+</article>
+
+<style>
+    .heading {
+        display: flex;
+        height: 4rem;
+        font-size: 22px;
+        color: white;
+        max-width: 200px;
+        padding-bottom: 0.3rem;
+        font-weight: bold;
+        margin: 0px;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .servants-container {
+        row-gap: 1em;
+        column-gap: 1em;
+        justify-content: center;
+        align-self: center;
+        align-content: center;
+    }
+
+    article:hover {
+        transform: scale(var(--hover-scale));
+    }
+
+    article {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        background-color: rgb(27, 27, 27);
+        border-color: #1e1e1e;
+        padding: 0em 0.75em;
+        width: 40%;
+        height: auto;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        transition: transform var(--speed) var(--ease);
+    }
+
+    article>img {
+        padding: 0.25em;
+        width:120px;
+        height:auto;
+    }
+
+    @media(min-width: 512px) {
+        article {
+            padding: 10px 10px;
+            width: auto;
+            height: auto;
+        }
+
+        article>img {
+            padding: 1.5em;
+            width: 200px;
+            height: auto;
+        }
+    }
+
+    .subtext {
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        margin: 5;
+        line-height: 20px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/hero.astro b/src/components/hero.astro
index b7dccf0..b1ade07 100644
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -3,7 +3,7 @@
 ---
 
 <div>
-    Firq FGO Site
+This is still a work in progress and continuously expanded. Feel free to look around.
 </div>
 
 
@@ -12,9 +12,11 @@
         display: flex;
         width: 100%;
         height: 10em;
-        background-color: grey;
+        background-color: #2e2e2e;
         text-align: center;
         align-items: center;
         justify-content: center;
+        color: white;
+        font-size: 1.5em;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/navbar.astro b/src/components/navbar.astro
index c6aef32..ddc8794 100644
--- a/src/components/navbar.astro
+++ b/src/components/navbar.astro
@@ -48,8 +48,7 @@
         list-style-type: none;
         row-gap: 0.5em;
         column-gap: 0.5ch;
-        margin-block-start: 0px;
-        margin-block-end: 0px;
+        margin: 0px;
         line-height: 1.5em;
     }
     .mobile > ul {
diff --git a/src/components/servantCard.astro b/src/components/servantCard.astro
index f7e194b..76db59d 100644
--- a/src/components/servantCard.astro
+++ b/src/components/servantCard.astro
@@ -60,12 +60,16 @@ if(bond10 === "false") {
     }
 
     article {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
         background-color: rgb(27, 27, 27);
         border-color: #1e1e1e;
         padding: 0em 0.75em;
         width: 40%;
         height: auto;
         justify-content: center;
+        align-items: center;
         text-align: center;
         transition: transform var(--speed) var(--ease);
     }
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 5be32e8..80f7de5 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -11,7 +11,7 @@ import ContactCard from '../components/contactCard.astro';
 import contactdata from '../../static/_contactdata.json'
 ---
 
-<Layout title="About" currentpage="about">
+<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.
     </BasicSection>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index e135333..f418f1f 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -4,7 +4,7 @@ import BasicSection from '../layouts/basicSection.astro';
 
 ---
 
-<Layout title="Blog" currentpage="blog">
+<Layout title="Blog - Firq FGO Site" currentpage="blog">
     <BasicSection title="Work in Progress">
         Nothing to see here (yet)
     </BasicSection>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 467c42c..603fa11 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,17 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Hero from '../components/hero.astro';
+import BaseSection from '../layouts/baseSection.astro';
+import FavouriteCard from '../components/favouriteCard.astro';
+import favouritesdata from '../../static/_favouritesdata.json'
 
 ---
 
-<Layout title="Firq FGO Site" currentpage="home">
+<Layout title="Home - Firq FGO Site" currentpage="home">
     <Hero/>
+    <BaseSection title="Favourites">
+        {favouritesdata.map((item) => (<FavouriteCard {...item}/>))}
+    </BaseSection>
 </Layout>
 
 <style>
diff --git a/src/pages/servants.astro b/src/pages/servants.astro
index 95b2c55..b5a5425 100644
--- a/src/pages/servants.astro
+++ b/src/pages/servants.astro
@@ -11,7 +11,7 @@ import cedata from '../../static/_cedata.json'
 
 ---
 
-<Layout title="Servants" currentpage="servants">
+<Layout title="Servants - Firq FGO Site" currentpage="servants">
 	<BaseSection title="Servant Offering">
 		{servantdata.map((item) => (<ServantCard {...item}/>))}
 	</BaseSection>
diff --git a/src/pages/ta-collection.astro b/src/pages/ta-collection.astro
index cd65cb7..8aa5044 100644
--- a/src/pages/ta-collection.astro
+++ b/src/pages/ta-collection.astro
@@ -8,7 +8,7 @@ import tadata from '../../static/_tadata.json'
 
 ---
 
-<Layout title="TA Collection" currentpage="ta-collection">
+<Layout title="TA Collection - Firq FGO Site" currentpage="ta-collection">
     <TaSection title="Completed TAs">
 		{tadata.map((item) => (<TaCard {...item}/>))}
 	</TaSection>
diff --git a/static/_favouritesdata.json b/static/_favouritesdata.json
new file mode 100644
index 0000000..13a0dda
--- /dev/null
+++ b/static/_favouritesdata.json
@@ -0,0 +1,12 @@
+[
+    {
+        "name": "Scathach",
+        "origin": "Fate/Grand Order",
+        "image": "scathach"
+    },
+    {
+        "name": "Skadi",
+        "origin": "Fate/Grand Order",
+        "image": "skadi"
+    }
+]
\ No newline at end of file