diff --git a/nginx/vue/src/assets/styles.css b/nginx/vue/src/assets/styles.css
index 9e1d416..38a3eef 100644
--- a/nginx/vue/src/assets/styles.css
+++ b/nginx/vue/src/assets/styles.css
@@ -74,21 +74,19 @@
     --default-font-family: var(--font_default);
 }
 /* END OF VARIABLES */
-
 /* ELEMENTS */
 body {
     margin: 0 auto;
     width: 100vw;
     height: 100vh;
-    font-family: var(--font_text);
 }
 
 input {
-    color: var(--primary);
+    @apply text-secondary border-primary border;
 }
 
 small {
-    color: var(--tertiary);
+    @apply text-tertiary;
 }
 
 h1,
@@ -98,9 +96,15 @@ h4 {
     @apply m-1 font-heading text-primary;
 }
 
-h1,
+h3,
+h4 {
+    @apply text-base;
+}
 h2 {
-    @apply border-primary border-b;
+    @apply text-lg;
+}
+h1 {
+    @apply text-xl;
 }
 
 p {
@@ -108,11 +112,11 @@ p {
 }
 
 button {
-    @apply text-primary bg-link text-center;
+    @apply text-primary bg-link text-center border;
 }
 
 a {
-    @apply text-primary bg-link text-center font-heading;
+    @apply text-primary bg-link text-center font-heading text-xl tracking-wide;
 }
 
 table {
diff --git a/nginx/vue/src/components/home/Favorites.vue b/nginx/vue/src/components/home/Favorites.vue
index 8ab8980..e353849 100644
--- a/nginx/vue/src/components/home/Favorites.vue
+++ b/nginx/vue/src/components/home/Favorites.vue
@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const favs = [
     {
         type: "Daioh",
diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index 38b7d37..dd3dbb8 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -1,5 +1,6 @@
 <script setup>
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
+import Header from "@/components/text/Header.vue";
 
 import { ref, computed, onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
@@ -43,7 +44,7 @@ onMounted(() => {
     <div
         class="flex flex-col p-1 overflow-scroll text-left items-start justify-start"
     >
-        <h2>{{ post.title }}</h2>
+        <Header>{{ post.title }}</Header>
         <Markdown class="flex-1 border-box text-wrap" :source="post.content" />
         <p>by: {{ post.author.username }}</p>
         <small
diff --git a/nginx/vue/src/components/home/Gym.vue b/nginx/vue/src/components/home/Gym.vue
index c8b8a22..8c35493 100644
--- a/nginx/vue/src/components/home/Gym.vue
+++ b/nginx/vue/src/components/home/Gym.vue
@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 const gym = [
     { name: "Row", type: "30 min" },
     { name: "Run", type: "5k" },
diff --git a/nginx/vue/src/components/home/Intro.vue b/nginx/vue/src/components/home/Intro.vue
index 8cbf113..5f179b5 100644
--- a/nginx/vue/src/components/home/Intro.vue
+++ b/nginx/vue/src/components/home/Intro.vue
@@ -1,32 +1,37 @@
+<script setup>
+import Header from "@/components/text/Header.vue";
+import Paragraph from "@/components/text/Paragraph.vue";
+</script>
+
 <template>
     <div
         class="flex-1 border-box flex flex-col p-1 text-left items-start justify-start"
     >
-        <h2>Intro</h2>
-        <p>
+        <Header>Intro</Header>
+        <Paragraph>
             Hi, I'm Adam, thank you for visiting my website. I'm currently a 20
             something graduate looking for work. I like to game, listen to lots
             of music and occasionally watch anime.
-        </p>
-        <h2>Getting around</h2>
-        <p>
+        </Paragraph>
+        <Header>Getting around</Header>
+        <Paragraph>
             Pages available can be traversed through links below. I am hoping to
             add some shrines, code-walkthoughs, live chat and page transitions
             at a later date.
-        </p>
-        <h2>Contact</h2>
-        <p>
+        </Paragraph>
+        <Header>Contact</Header>
+        <Paragraph>
             Please email me <a href="mailto:adam.a.french@outlook.com">here</a>,
             or contact me though any of the social medias linked.
-        </p>
-        <h2>A Quote</h2>
+        </Paragraph>
+        <Header>A Quote</Header>
         <!-- <p>
             What makes me a good demoman? If I were a bad demoman, I wouldn't be
             sittin' here discussin' it with you, now would I?!
         </p> -->
-        <p>
+        <Paragraph>
             One crossed wire, one wayward pinch of potassium chlorate, one
             errant twitch, and KA-BLOOIE!
-        </p>
+        </Paragraph>
     </div>
 </template>
diff --git a/nginx/vue/src/components/home/Links.vue b/nginx/vue/src/components/home/Links.vue
index 8fca755..a1e89bf 100644
--- a/nginx/vue/src/components/home/Links.vue
+++ b/nginx/vue/src/components/home/Links.vue
@@ -1,7 +1,7 @@
 <script setup>
-import RouterTable from "@/components/quick/RouterTable.vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
-import Markdown from "@/components/quick/Markdown.vue";
+import RouterTable from "@/components/util/RouterTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
+import Markdown from "@/components/util/Markdown.vue";
 
 const site_links = [
     { name: "CV", link: "/cv" },
diff --git a/nginx/vue/src/components/home/Stamps.vue b/nginx/vue/src/components/home/Stamps.vue
index 54ab939..886d25d 100644
--- a/nginx/vue/src/components/home/Stamps.vue
+++ b/nginx/vue/src/components/home/Stamps.vue
@@ -1,27 +1,17 @@
 <template>
-    <div class="flex-col items-center">
-        <div class="flex flex-col">
-            <!-- <img src="/img/stamps/portal.gif" />
-            <img src="/img/stamps/miku.gif" />
-            <img src="/img/stamps/utau.gif" /> -->
-            <div class="flex flex-row items-center">
-                <p>--> make webring w me --></p>
-                <a href="https://www.adam-french.co.uk">
-                    <img
-                        src="https://www.adam-french.co.uk/img/stamps/mine.gif"
-                    />
-                </a>
-            </div>
-            <div class="flex flex-row items-center">
-                <p>--> hit up bro --></p>
-                <a href="https://jacobbarron.xyz">
-                    <img
-                        src="https://jacobbarron.xyz/Banneh.gif"
-                        alt="jacobbarron.xyz"
-                    />
-                </a>
-            </div>
-        </div>
+    <div class="grid grid-cols-4 overflow-scroll gap-0">
+        <a href="https://www.adam-french.co.uk">
+            <img src="https://www.adam-french.co.uk/img/stamps/mine.gif" />
+        </a>
+        <a href="https://jacobbarron.xyz">
+            <img
+                src="https://jacobbarron.xyz/Banneh.gif"
+                alt="jacobbarron.xyz"
+            />
+        </a>
+        <img src="/img/stamps/portal.gif" />
+        <img src="/img/stamps/miku.gif" />
+        <img src="/img/stamps/utau.gif" />
     </div>
 </template>
 
diff --git a/nginx/vue/src/components/home/Watching.vue b/nginx/vue/src/components/home/Watching.vue
index 0c6187a..c3b3412 100644
--- a/nginx/vue/src/components/home/Watching.vue
+++ b/nginx/vue/src/components/home/Watching.vue
@@ -1,5 +1,5 @@
 <script setup>
-import OptionalLinkTable from "@/components/quick/OptionalLinkTable.vue";
+import OptionalLinkTable from "@/components/util/OptionalLinkTable.vue";
 
 const data = [
     {
diff --git a/nginx/vue/src/components/text/Header.vue b/nginx/vue/src/components/text/Header.vue
new file mode 100644
index 0000000..f25303d
--- /dev/null
+++ b/nginx/vue/src/components/text/Header.vue
@@ -0,0 +1,7 @@
+<template>
+    <div class="w-full border-b border-primary">
+        <h1>
+            <slot />
+        </h1>
+    </div>
+</template>
diff --git a/nginx/vue/src/components/text/Paragraph.vue b/nginx/vue/src/components/text/Paragraph.vue
new file mode 100644
index 0000000..f99f3db
--- /dev/null
+++ b/nginx/vue/src/components/text/Paragraph.vue
@@ -0,0 +1,5 @@
+<template>
+    <p class="p-1">
+        <slot />
+    </p>
+</template>
diff --git a/nginx/vue/src/components/quick/Chat.vue b/nginx/vue/src/components/util/Chat.vue
similarity index 100%
rename from nginx/vue/src/components/quick/Chat.vue
rename to nginx/vue/src/components/util/Chat.vue
diff --git a/nginx/vue/src/components/quick/LinkTable.vue b/nginx/vue/src/components/util/LinkTable.vue
similarity index 100%
rename from nginx/vue/src/components/quick/LinkTable.vue
rename to nginx/vue/src/components/util/LinkTable.vue
diff --git a/nginx/vue/src/components/quick/Markdown.vue b/nginx/vue/src/components/util/Markdown.vue
similarity index 100%
rename from nginx/vue/src/components/quick/Markdown.vue
rename to nginx/vue/src/components/util/Markdown.vue
diff --git a/nginx/vue/src/components/quick/MusicPlayer.vue b/nginx/vue/src/components/util/MusicPlayer.vue
similarity index 100%
rename from nginx/vue/src/components/quick/MusicPlayer.vue
rename to nginx/vue/src/components/util/MusicPlayer.vue
diff --git a/nginx/vue/src/components/quick/ObjectTable.vue b/nginx/vue/src/components/util/ObjectTable.vue
similarity index 100%
rename from nginx/vue/src/components/quick/ObjectTable.vue
rename to nginx/vue/src/components/util/ObjectTable.vue
diff --git a/nginx/vue/src/components/quick/OptionalLinkTable.vue b/nginx/vue/src/components/util/OptionalLinkTable.vue
similarity index 100%
rename from nginx/vue/src/components/quick/OptionalLinkTable.vue
rename to nginx/vue/src/components/util/OptionalLinkTable.vue
diff --git a/nginx/vue/src/components/quick/RouterTable.vue b/nginx/vue/src/components/util/RouterTable.vue
similarity index 100%
rename from nginx/vue/src/components/quick/RouterTable.vue
rename to nginx/vue/src/components/util/RouterTable.vue
diff --git a/nginx/vue/src/components/quick/Time.vue b/nginx/vue/src/components/util/Time.vue
similarity index 100%
rename from nginx/vue/src/components/quick/Time.vue
rename to nginx/vue/src/components/util/Time.vue
diff --git a/nginx/vue/src/components/quick/Timer.vue b/nginx/vue/src/components/util/Timer.vue
similarity index 100%
rename from nginx/vue/src/components/quick/Timer.vue
rename to nginx/vue/src/components/util/Timer.vue
diff --git a/nginx/vue/src/components/quick/ToggleLinkTable.vue b/nginx/vue/src/components/util/ToggleLinkTable.vue
similarity index 89%
rename from nginx/vue/src/components/quick/ToggleLinkTable.vue
rename to nginx/vue/src/components/util/ToggleLinkTable.vue
index 46fd88d..adc0027 100644
--- a/nginx/vue/src/components/quick/ToggleLinkTable.vue
+++ b/nginx/vue/src/components/util/ToggleLinkTable.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from "vue";
-import LinkTable from "@/components/quick/LinkTable.vue";
+import LinkTable from "@/components/util/LinkTable.vue";
 
 const props = defineProps({
     linkArr: {
diff --git a/nginx/vue/src/components/quick/VideoTable.vue b/nginx/vue/src/components/util/VideoTable.vue
similarity index 100%
rename from nginx/vue/src/components/quick/VideoTable.vue
rename to nginx/vue/src/components/util/VideoTable.vue
diff --git a/nginx/vue/src/components/quick/Wip.vue b/nginx/vue/src/components/util/Wip.vue
similarity index 100%
rename from nginx/vue/src/components/quick/Wip.vue
rename to nginx/vue/src/components/util/Wip.vue
diff --git a/nginx/vue/src/views/Bookmarks.vue b/nginx/vue/src/views/Bookmarks.vue
index 0587890..8910aa6 100644
--- a/nginx/vue/src/views/Bookmarks.vue
+++ b/nginx/vue/src/views/Bookmarks.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from "vue";
 
-import ToggleLinkTable from "@/components/quick/ToggleLinkTable.vue";
+import ToggleLinkTable from "@/components/util/ToggleLinkTable.vue";
 
 const links = [
     [
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index f132df3..f29a76e 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -1,8 +1,8 @@
 <script setup>
-import Timer from "@/components/quick/Timer.vue";
-import Time from "@/components/quick/Time.vue";
-import Chat from "@/components/quick/Chat.vue";
-import MusicPlayer from "@/components/quick/MusicPlayer.vue";
+import Timer from "@/components/util/Timer.vue";
+import Time from "@/components/util/Time.vue";
+import Chat from "@/components/util/Chat.vue";
+import MusicPlayer from "@/components/util/MusicPlayer.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
diff --git a/nginx/vue/src/views/Notes.vue b/nginx/vue/src/views/Notes.vue
index 2c8ad02..cf64fa0 100644
--- a/nginx/vue/src/views/Notes.vue
+++ b/nginx/vue/src/views/Notes.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Markdown from "@/components/quick/Markdown.vue";
+import Markdown from "@/components/util/Markdown.vue";
 import { ref, onMounted } from "vue";
 import axios from "axios";
 import { useRoute } from "vue-router";
diff --git a/nginx/vue/src/views/Shrines.vue b/nginx/vue/src/views/Shrines.vue
index 5916aea..47a140d 100644
--- a/nginx/vue/src/views/Shrines.vue
+++ b/nginx/vue/src/views/Shrines.vue
@@ -1,5 +1,5 @@
 <script setup>
-import RouterTable from "@/components/quick/RouterTable.vue";
+import RouterTable from "@/components/util/RouterTable.vue";
 const shrine_links = [
     { name: "Demoman", link: "/shrines/demoman" },
     { name: "Evangelion", link: "/shrines/evangelion" },
diff --git a/nginx/vue/src/views/shrines/Demoman.vue b/nginx/vue/src/views/shrines/Demoman.vue
index 1906028..b130b96 100644
--- a/nginx/vue/src/views/shrines/Demoman.vue
+++ b/nginx/vue/src/views/shrines/Demoman.vue
@@ -1,5 +1,5 @@
 <script setup>
-import VideoTable from "@/components/quick/VideoTable.vue";
+import VideoTable from "@/components/util/VideoTable.vue";
 
 const videoSources = [
     { name: "demoman", link: "/img/demoman/1760582395316219.webm" },
diff --git a/nginx/vue/src/views/shrines/Evangelion.vue b/nginx/vue/src/views/shrines/Evangelion.vue
index 3619fd1..638d53c 100644
--- a/nginx/vue/src/views/shrines/Evangelion.vue
+++ b/nginx/vue/src/views/shrines/Evangelion.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>
diff --git a/nginx/vue/src/views/shrines/GTO.vue b/nginx/vue/src/views/shrines/GTO.vue
index 3619fd1..638d53c 100644
--- a/nginx/vue/src/views/shrines/GTO.vue
+++ b/nginx/vue/src/views/shrines/GTO.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>
diff --git a/nginx/vue/src/views/shrines/Skipskipbenben.vue b/nginx/vue/src/views/shrines/Skipskipbenben.vue
index 3619fd1..638d53c 100644
--- a/nginx/vue/src/views/shrines/Skipskipbenben.vue
+++ b/nginx/vue/src/views/shrines/Skipskipbenben.vue
@@ -1,5 +1,5 @@
 <script setup>
-import Wip from "@/components/quick/Wip.vue";
+import Wip from "@/components/util/Wip.vue";
 </script>
 
 <template>