diff --git a/nginx/vue/src/components/home/Feed.vue b/nginx/vue/src/components/home/Feed.vue
index b9a30a8..d9ad826 100644
--- a/nginx/vue/src/components/home/Feed.vue
+++ b/nginx/vue/src/components/home/Feed.vue
@@ -2,29 +2,49 @@
 import { ref, onMounted } from "vue";
 import axios from "axios";
 
-const posts = ref([]);
+const post = ref(null);
+const fetched = ref(false);
+let posts = [];
+let idx = 0;
+let len = 0;
+
 async function fetchPosts() {
     try {
         const res = await axios.get("https://adam-french.co.uk/api/posts");
         posts.value = res.data;
+        fetched.value = true;
+        post.value = posts[0];
+        len = posts.length;
     } catch (err) {
         console.error(err);
     }
 }
 
+function nextPost() {
+    post.value = posts[idx];
+    idx = (idx + 1) % len;
+}
+
+function prevPost() {
+    post.value = posts[idx];
+    idx = (idx - 1) % len;
+}
+
 onMounted(() => {
     fetchPosts();
 });
 </script>
 
 <template>
-    <div v-for="post in posts">
+    <div>
         <h2>{{ post.title }}</h2>
         <p>By: {{ post.author.username }}</p>
         <div>{{ post.content }}</div>
         <small
             >Created at: {{ new Date(post.CreatedAt).toLocaleString() }}</small
         >
+        <button @click="nextPost">Next</button>
+        <button @click="prevPost">Prev</button>
     </div>
 </template>