diff --git a/nginx/vue/public/css/styles.css b/nginx/vue/public/css/styles.css
index 4297c6e..387e9d7 100644
--- a/nginx/vue/public/css/styles.css
+++ b/nginx/vue/public/css/styles.css
@@ -37,7 +37,7 @@
     --portal_light_blue: #00a2ff;
 
     /* MAIN COLORS */
-    --primary: #000;
+    --primary: #fff;
     --secondary: #000;
     --tertiary: #5a6952;
     --quaternary: #424542;
@@ -90,6 +90,23 @@ video {
 button {
     color: red;
 }
+
+table {
+    border: 1px solid var(--primary);
+}
+
+th {
+    border: 1px solid var(--primary);
+}
+
+tr {
+    border: 1px solid var(--primary);
+}
+
+td {
+    border: 1px solid var(--primary);
+}
+
 /* END OF ELEMENTS */
 
 /* CLASSES */
@@ -227,6 +244,10 @@ button {
 
 /* ALIGNMENT */
 
+.relative {
+    position: relative;
+}
+
 .center-content {
     align-items: center;
     text-align: center;
@@ -240,6 +261,10 @@ button {
     margin: 0px;
 }
 
+.flex {
+    display: flex;
+}
+
 .flex-col {
     display: flex;
     flex-direction: column;
diff --git a/nginx/vue/public/img/memes/glass-of-beer-with-foam-on-transparent-background-free-png.png b/nginx/vue/public/img/memes/glass-of-beer-with-foam-on-transparent-background-free-png.png
deleted file mode 100644
index 868434e..0000000
Binary files a/nginx/vue/public/img/memes/glass-of-beer-with-foam-on-transparent-background-free-png.png and /dev/null differ
diff --git a/nginx/vue/src/components/admin/CreatePost.vue b/nginx/vue/src/components/admin/CreatePost.vue
index b9170a5..23cd1a6 100644
--- a/nginx/vue/src/components/admin/CreatePost.vue
+++ b/nginx/vue/src/components/admin/CreatePost.vue
@@ -23,7 +23,7 @@ async function post() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn">
+    <div v-if="auth.loggedIn" class="flex-col">
         <h1>Create Post</h1>
         <input type="text" v-model="title" placeholder="Title" />
         <textarea v-model="content" placeholder="Content"></textarea>
diff --git a/nginx/vue/src/components/admin/CreateUser.vue b/nginx/vue/src/components/admin/CreateUser.vue
index 685ac71..adf7856 100644
--- a/nginx/vue/src/components/admin/CreateUser.vue
+++ b/nginx/vue/src/components/admin/CreateUser.vue
@@ -12,12 +12,13 @@ function handleLogin() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn">
+    <div v-if="auth.loggedIn" class="flex-col">
         <h1>Logged in</h1>
-        <p>{{ auth.user.ID }}</p>
+        <p>{{ auth.user.id }}</p>
         <p>{{ auth.user.username }}</p>
+        <p>{{ auth.user.admin }}</p>
     </div>
-    <div v-else>
+    <div v-else class="flex-col">
         <h1>Create User</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />
diff --git a/nginx/vue/src/components/admin/Login.vue b/nginx/vue/src/components/admin/Login.vue
index f2b5d82..8b1e56f 100644
--- a/nginx/vue/src/components/admin/Login.vue
+++ b/nginx/vue/src/components/admin/Login.vue
@@ -16,13 +16,14 @@ function handleLogout() {
 </script>
 
 <template>
-    <div v-if="auth.loggedIn">
+    <div v-if="auth.loggedIn" class="flex-col">
         <h1>Logged in</h1>
-        <p>{{ auth.user.ID }}</p>
+        <p>{{ auth.user.id }}</p>
         <p>{{ auth.user.username }}</p>
+        <p>{{ auth.user.admin }}</p>
         <button @click="handleLogout">Log Out</button>
     </div>
-    <div v-else>
+    <div v-else class="flex-col">
         <h1>Login</h1>
         <input type="text" v-model="username" placeholder="Username" />
         <input type="password" v-model="password" placeholder="Password" />
diff --git a/nginx/vue/src/components/home/Favorites.vue b/nginx/vue/src/components/home/Favorites.vue
index 548fd62..ead4ab5 100644
--- a/nginx/vue/src/components/home/Favorites.vue
+++ b/nginx/vue/src/components/home/Favorites.vue
@@ -1,26 +1,59 @@
 <template>
-    <div class="flex-row">
-        <table>
-            <tr>
-                <td>Color</td>
-                <td>Aqua</td>
-            </tr>
-            <tr>
-                <td>Pet</td>
-                <td>Cat</td>
-            </tr>
-        </table>
-        <table>
-            <tr>
-                <td>Color</td>
-                <td>Blue</td>
-            </tr>
-        </table>
+    <div>
+        <p class="margin1">My favs</p>
+        <div class="flex-row bdr-primary">
+            <table>
+                <tr>
+                    <th>Color</th>
+                    <td>Aqua</td>
+                </tr>
+                <tr>
+                    <th>Pet</th>
+                    <td>Cat</td>
+                </tr>
+                <tr>
+                    <th>Food</th>
+                    <td>Eggs</td>
+                </tr>
+                <tr>
+                    <th>Subject</th>
+                    <td>Math</td>
+                </tr>
+                <tr>
+                    <th>Drink</th>
+                    <td>Monster</td>
+                </tr>
+                <tr>
+                    <th>Sport</th>
+                    <td>Running</td>
+                </tr>
+            </table>
+            <table>
+                <tr>
+                    <th>Color</th>
+                    <td>Aqua</td>
+                </tr>
+                <tr>
+                    <th>Pet</th>
+                    <td>Cat</td>
+                </tr>
+                <tr>
+                    <th>Food</th>
+                    <td>Eggs</td>
+                </tr>
+                <tr>
+                    <th>Subject</th>
+                    <td>Math</td>
+                </tr>
+                <tr>
+                    <th>Drink</th>
+                    <td>Monster</td>
+                </tr>
+                <tr>
+                    <th>Sport</th>
+                    <td>Running</td>
+                </tr>
+            </table>
+        </div>
     </div>
 </template>
-
-<style scoped>
-img {
-    width: 100%;
-}
-</style>
diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index b982b6c..2ae7505 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -16,7 +16,7 @@ let len = 0;
 
 async function fetchPosts() {
     try {
-        const res = await axios.get("/api/posts");
+        const res = await axios.get("https://www.adam-french.co.uk/api/posts");
         posts = res.data;
         len = posts.length;
         fetched.value = true;
@@ -68,8 +68,8 @@ onMounted(() => {
 <template>
     <div v-if="fetched" class="center-content">
         <h2>{{ post.title }}</h2>
-        <p>By: {{ post.author.username }}</p>
         <div>{{ post.content }}</div>
+        <p>by: {{ post.author.username }}</p>
         <small
             >Created at: {{ new Date(post.createdAt).toLocaleString() }}</small
         >
diff --git a/nginx/vue/src/views/Admin.vue b/nginx/vue/src/views/Admin.vue
index 984cdd0..01e09ed 100644
--- a/nginx/vue/src/views/Admin.vue
+++ b/nginx/vue/src/views/Admin.vue
@@ -2,14 +2,17 @@
 import Login from "@/components/admin/Login.vue";
 import CreateUser from "@/components/admin/CreateUser.vue";
 import CreatePost from "@/components/admin/CreatePost.vue";
+
+import Halftone from "@/components/backgrounds/Halftone.vue";
 </script>
 
 <template>
     <main class="center-content flex-col">
+        <Halftone />
         <div class="a5page-portrait bdr-1 grid">
-            <Login />
-            <CreateUser />
-            <CreatePost />
+            <Login class="bdr-2 bg-secondary" />
+            <CreateUser class="bdr-2 bg-secondary" />
+            <CreatePost class="bdr-2 bg-secondary" />
         </div>
     </main>
 </template>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index d5bcca2..8c0ac1f 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -10,12 +10,21 @@ import Gym from "@/components/home/Gym.vue";
 import Watching from "@/components/home/Watching.vue";
 
 import Halftone from "@/components/backgrounds/Halftone.vue";
+import Overlay from "@/components/Overlay.vue";
 </script>
 
 <template>
+    <Halftone />
     <main class="center-content flex-col">
-        <Halftone />
-        <div class="a4page-portrait bdr-1 grid">
+        <div class="a4page-portrait bdr-1 grid relative">
+            <Overlay>
+                <img src="/img/memes/star.gif" class="ov1" />
+                <img src="/img/memes/welcome2.png" class="ov2" />
+                <img src="/img/memes/pidgeon.gif" class="ov3" />
+                <img src="/img/memes/no_slip.png" class="ov5" />
+                <img src="/img/memes/beer.png" class="ov6" />
+            </Overlay>
+
             <Intro class="intro bdr-primary bg-primary" />
             <Listening class="listening bdr-primary bg-primary" />
             <Stamps class="stamps bdr-primary bg-primary" />
@@ -27,6 +36,7 @@ import Halftone from "@/components/backgrounds/Halftone.vue";
             <Watching class="watching bdr-primary bg-primary" />
         </div>
     </main>
+    <img src="/img/memes/fire-woman.gif" class="ov4" />
 </template>
 
 <style scoped>
@@ -80,4 +90,52 @@ import Halftone from "@/components/backgrounds/Halftone.vue";
     grid-column: span 3;
     grid-row: span 2;
 }
+
+.ov1 {
+    rotate: 10deg;
+    width: 100px;
+    position: absolute;
+    top: -90px;
+    left: 0px;
+}
+.ov2 {
+    width: 100px;
+    position: absolute;
+    top: -102px;
+    right: 0px;
+}
+.ov3 {
+    width: 200px;
+    position: absolute;
+    bottom: -150px;
+    left: -200px;
+}
+.ov4 {
+    width: 250px;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+}
+.ov5 {
+    height: 100px;
+    position: absolute;
+    top: -100px;
+    right: 200px;
+}
+.ov6 {
+    height: 250px;
+    position: absolute;
+    top: 450px;
+    right: -200px;
+    animation: floatY 5s ease-in-out infinite alternate;
+}
+
+@keyframes floatY {
+    from {
+        transform: translateY(0);
+    }
+    to {
+        transform: translateY(-500px);
+    }
+}
 </style>