diff --git a/src/components/home_components/HelloWorld.vue b/src/components/home_components/HelloWorld.vue
deleted file mode 100644
index 5230910..0000000
--- a/src/components/home_components/HelloWorld.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index 41072be..6a5bba2 100644
--- a/src/components/home_components/feed.vue
+++ b/src/components/home_components/feed.vue
@@ -91,11 +91,10 @@ import {onMounted, ref} from "vue";
             <input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
             <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_publish_func(post_publish)" type="button">Post</button>
           </div>
-          </form>
+        </form>
       </div>
     </div>
 
-
     <div> <!-- CONTENT -->
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
@@ -119,6 +118,10 @@ import {onMounted, ref} from "vue";
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
                 <img alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
+              </div>
+
+              <div class="flex items-center mx-2"> <!-- View Post -->
+                <router-link :to="{ name: 'PostDetail', params: { id: postitem.id } }" class="text-weiss">View Post</router-link>
               </div><!-- ENDE -->
             </div>
           </div>
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
index eb11cea..abb1388 100644
--- a/src/components/home_components/navigationbar.vue
+++ b/src/components/home_components/navigationbar.vue
@@ -5,63 +5,21 @@
 import router from "../../router";
 import { ref, onMounted } from 'vue';
 
-const componentsStatus = ref({});
-const selected_destination = ref('');
-
-async function loadComponentsStatus() {
-  const response = await fetch('src/components/status.json');
-  componentsStatus.value = await response.json();
-}
-
-onMounted(() => {
-  loadComponentsStatus();
-});
-
-function fun_route(destination: string) {
-  selected_destination.value = destination;
-  if (componentsStatus.value[destination] === 'wip') {
-    router.push("wip");
-  } else {
-    switch (destination) {
-      case "home":
-        router.push("/");
-        break;
-      case "search":
-        router.push("search");
-        break;
-      case "notifications":
-        router.push("notifications");
-        break;
-      case "messages":
-        router.push("messages");
-        break;
-      case "accounts":
-        router.push("accounts");
-        break;
-      case "settings":
-        router.push("settings");
-        break;
-      default:
-        router.push("/");
-        break;
-    }
-  }
-}
 
 </script>
 
 <template>
   <div class="pt-4 border-b-2 border-b-grau2 border-r-1 border-r-grau2">
     <div class="items-center flex justify-center"><!-- BILD-->
-      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel" @click="fun_route('home')">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto hover:shadow-2xl hover:shadow-grau-dunkel"  @click="router.push('/')">
     </div>
     <div class="align-middle space-y-3 pt-4 pl-3 pb-4 pr-4 font-bold text-xl"> <!-- Icons (Bild) und Text                                  Damit der Text weiß ist muss zwei mal gedrückt werden manchmal-->
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="fun_route('home')"          :class="{'text-weiss': selected_destination === 'home' || selected_destination === ''}"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="fun_route('search')"        :class="{'text-weiss': selected_destination === 'search'}">                             <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="fun_route('notifications')" :class="{'text-weiss': selected_destination === 'notifications'}">                      <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="fun_route('messages')"      :class="{'text-weiss': selected_destination === 'messages'}">                           <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="fun_route('accounts')"      :class="{'text-weiss': selected_destination === 'accounts'}">                           <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
-      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="fun_route('settings')"      :class="{'text-weiss': selected_destination === 'settings'}">                           <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/')"><img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/home.png" alt=""> Home</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila rounded-lg" @click="router.push('/search')">        <img class="mr-2 p-1 bg-logo-farbe-lila rounded-lg" src="../../assets/icons/lupe.png" alt="">Search</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="router.push('/notifications')"> <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/glocke.png" alt="">Notifications</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot  rounded-lg" @click="router.push('/wip')">           <img class="mr-2 p-1 bg-logo-farbe-rot  rounded-lg" src="../../assets/icons/mail.png" alt="">Messages</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/wip')">           <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/user.png" alt="">Profile</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau rounded-lg" @click="router.push('/settings')">      <img class="mr-2 p-1 bg-logo-farbe-blau rounded-lg" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
     </div>
   </div>
 </template>
diff --git a/src/components/posts.vue b/src/components/posts.vue
new file mode 100644
index 0000000..6733561
--- /dev/null
+++ b/src/components/posts.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import Trending from "./home_components/trending.vue";
+import Navigationbar from "./home_components/navigationbar.vue";
+import QuickSearch from "./home_components/quick_search.vue";
+import Contacts from "./home_components/contacts.vue";
+import Legal from "./home_components/legal.vue";
+
+const route = useRoute();
+const post = ref(null);
+
+onMounted(async () => {
+  const postId = route.params.id;
+  try {
+    const response = await fetch(`/api/posts/${postId}`);
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const data = await response.json();
+    post.value = data;
+  } catch (error) {
+    console.error('Error fetching post:', error);
+  }
+});
+</script>
+
+<template>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <div id="left" class="border border-b-grau w-72">
+      <navigationbar></navigationbar>
+    </div>
+    <div>
+      <div v-if="post">
+        <h2>{{ post.author_display_name }}</h2>
+        <p>@{{ post.author_username }}</p>
+        <p>{{ post.content }}</p>
+        <p>Likes: {{ post.likes }}</p>
+        <p v-if="post.comments_count !== undefined">Comments: {{ post.comments_count }}</p>
+        <p v-else>Comments disabled</p>
+      </div>
+      <div v-else>
+        <p class="text-5xl text-weiss">Loading post...</p>
+      </div>
+    </div>
+    <div class="w-1/4">
+      <quick-search></quick-search>
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/components/status.json b/src/components/status.json
deleted file mode 100644
index abd22cc..0000000
--- a/src/components/status.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "home": "completed",
-  "search": "testing",
-  "notifications": "testing",
-  "messages": "wip",
-  "accounts": "wip",
-  "settings": "testing"
-}
diff --git a/src/router/index.ts b/src/router/index.ts
index f93b426..d6abfe8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -10,6 +10,7 @@ import settings from "../components/settings.vue";
 import nottifications from "../components/notifications.vue";
 import register from "../components/register.vue";
 import search from "../components/search.vue";
+import post from '../components/posts.vue';
 // The routing does not happen automatically
 // Each route has to be defined here, or it won't work.
 const routes = [
@@ -47,6 +48,12 @@ const routes = [
         path: "/search",
         name: "Search",
         component: search,
+    },
+    {
+        path: '/post/:id',
+        name: 'PostDetail',
+        component: post,
+        props: true
     }
 ]
 
@@ -55,4 +62,4 @@ const router = createRouter({
     routes,
 });
 
-export default router;
+export default router;
\ No newline at end of file