diff --git a/deno.lock b/deno.lock
index 4c067a2..0852dfb 100644
--- a/deno.lock
+++ b/deno.lock
@@ -22,6 +22,8 @@
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
     "npm:path-to-regexp@6.2.1": "6.2.1",
     "npm:postcss@^8.4.47": "8.4.47",
+    "npm:tailwind-scrollbar-hide@2": "2.0.0_tailwindcss@3.4.14__postcss@8.4.47",
+    "npm:tailwind-scrollbar@^4.0.1": "4.0.1_tailwindcss@4.0.15",
     "npm:tailwindcss@*": "3.4.14_postcss@8.4.47",
     "npm:tailwindcss@^3.4.14": "3.4.14_postcss@8.4.47",
     "npm:typescript@^5.8.2": "5.8.2",
@@ -30,6 +32,7 @@
     "npm:vite@*": "5.4.10",
     "npm:vite@^5.4.10": "5.4.10",
     "npm:vue-router@4": "4.4.5_vue@3.5.12",
+    "npm:vue-router@^4.5.0": "4.5.0_vue@3.5.12_typescript@5.8.2",
     "npm:vue@*": "3.5.12",
     "npm:vue@^3.5.12": "3.5.12"
   },
@@ -300,11 +303,14 @@
         "undici-types"
       ]
     },
+    "@types/prismjs@1.26.5": {
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="
+    },
     "@vitejs/plugin-vue@5.1.4_vite@5.4.10_vue@3.5.12": {
       "integrity": "sha512-N2XSI2n3sQqp5w7Y/AN/L2XDjBIRGqXko+eDp42sydYSBeJuSm5a1sLf8zakmo8u7tA8NmBgoDLA1HeOESjp9A==",
       "dependencies": [
         "vite@5.4.10",
-        "vue"
+        "vue@3.5.12"
       ]
     },
     "@vue/compiler-core@3.5.12": {
@@ -375,7 +381,15 @@
       "dependencies": [
         "@vue/compiler-ssr",
         "@vue/shared",
-        "vue"
+        "vue@3.5.12"
+      ]
+    },
+    "@vue/server-renderer@3.5.12_vue@3.5.12_vue@3.5.12__typescript@5.8.2": {
+      "integrity": "sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==",
+      "dependencies": [
+        "@vue/compiler-ssr",
+        "@vue/shared",
+        "vue@3.5.12_typescript@5.8.2"
       ]
     },
     "@vue/shared@3.5.12": {
@@ -483,6 +497,9 @@
         "readdirp@4.1.1"
       ]
     },
+    "clsx@2.1.1": {
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
     "color-convert@2.0.1": {
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
       "dependencies": [
@@ -884,6 +901,14 @@
         "source-map-js"
       ]
     },
+    "prism-react-renderer@2.4.1_react@19.0.0": {
+      "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
+      "dependencies": [
+        "@types/prismjs",
+        "clsx",
+        "react"
+      ]
+    },
     "punycode@1.4.1": {
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
     },
@@ -896,6 +921,9 @@
     "queue-microtask@1.2.3": {
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "react@19.0.0": {
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="
+    },
     "read-cache@1.0.0": {
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
       "dependencies": [
@@ -1031,6 +1059,19 @@
     "supports-preserve-symlinks-flag@1.0.0": {
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
+    "tailwind-scrollbar-hide@2.0.0_tailwindcss@3.4.14__postcss@8.4.47": {
+      "integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
+      "dependencies": [
+        "tailwindcss@3.4.14_postcss@8.4.47"
+      ]
+    },
+    "tailwind-scrollbar@4.0.1_tailwindcss@4.0.15": {
+      "integrity": "sha512-j2ZfUI7p8xmSQdlqaCxEb4Mha8ErvWjDVyu2Ke4IstWprQ/6TmIz1GSLE62vsTlXwnMLYhuvbFbIFzaJGOGtMg==",
+      "dependencies": [
+        "prism-react-renderer",
+        "tailwindcss@4.0.15"
+      ]
+    },
     "tailwindcss@3.4.14_postcss@8.4.47": {
       "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
       "dependencies": [
@@ -1058,6 +1099,9 @@
         "sucrase"
       ]
     },
+    "tailwindcss@4.0.15": {
+      "integrity": "sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg=="
+    },
     "thenify-all@1.6.0": {
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
       "dependencies": [
@@ -1157,7 +1201,14 @@
       "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
       "dependencies": [
         "@vue/devtools-api",
-        "vue"
+        "vue@3.5.12"
+      ]
+    },
+    "vue-router@4.5.0_vue@3.5.12_typescript@5.8.2": {
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "dependencies": [
+        "@vue/devtools-api",
+        "vue@3.5.12_typescript@5.8.2"
       ]
     },
     "vue@3.5.12": {
@@ -1166,10 +1217,21 @@
         "@vue/compiler-dom",
         "@vue/compiler-sfc",
         "@vue/runtime-dom",
-        "@vue/server-renderer",
+        "@vue/server-renderer@3.5.12_vue@3.5.12",
         "@vue/shared"
       ]
     },
+    "vue@3.5.12_typescript@5.8.2": {
+      "integrity": "sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==",
+      "dependencies": [
+        "@vue/compiler-dom",
+        "@vue/compiler-sfc",
+        "@vue/runtime-dom",
+        "@vue/server-renderer@3.5.12_vue@3.5.12_vue@3.5.12__typescript@5.8.2",
+        "@vue/shared",
+        "typescript"
+      ]
+    },
     "which@2.0.2": {
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dependencies": [
@@ -1352,8 +1414,11 @@
       "dependencies": [
         "npm:@deno/vite-plugin@1",
         "npm:@vitejs/plugin-vue@^5.1.4",
+        "npm:tailwind-scrollbar-hide@2",
+        "npm:tailwind-scrollbar@^4.0.1",
         "npm:typescript@^5.8.2",
-        "npm:vite-plugin-checker@~0.9.1"
+        "npm:vite-plugin-checker@~0.9.1",
+        "npm:vue-router@^4.5.0"
       ]
     }
   }
diff --git a/index.html b/index.html
index e7b8b54..bb5e428 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>ESP - Express, Share, Post</title>
     <link rel="stylesheet" href="/src/assets/main.css" />
   </head>
-  <body class="bg-hintergrund-farbe">
+  <body class="bg-hintergrund-farbe overflow-hidden">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
diff --git a/package-lock.json b/package-lock.json
index bca12e7..6507a16 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,10 @@
     "": {
       "dependencies": {
         "@deno/vite-plugin": "^1.0.0",
-        "@vitejs/plugin-vue": "^5.1.4"
+        "@vitejs/plugin-vue": "^5.1.4",
+        "tailwind-scrollbar": "^4.0.1",
+        "tailwind-scrollbar-hide": "^2.0.0",
+        "vue-router": "^4.5.0"
       },
       "devDependencies": {
         "typescript": "^5.8.2",
@@ -791,6 +794,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@@ -858,6 +867,12 @@
         "@vue/shared": "3.5.13"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
@@ -942,6 +957,15 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1154,6 +1178,29 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prism-react-renderer": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz",
+      "integrity": "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
@@ -1233,6 +1280,37 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/tailwind-scrollbar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar/-/tailwind-scrollbar-4.0.1.tgz",
+      "integrity": "sha512-j2ZfUI7p8xmSQdlqaCxEb4Mha8ErvWjDVyu2Ke4IstWprQ/6TmIz1GSLE62vsTlXwnMLYhuvbFbIFzaJGOGtMg==",
+      "license": "MIT",
+      "dependencies": {
+        "prism-react-renderer": "^2.4.1"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "4.x"
+      }
+    },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-2.0.0.tgz",
+      "integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.15.tgz",
+      "integrity": "sha512-6ZMg+hHdMJpjpeCCFasX7K+U615U9D+7k5/cDK/iRwl6GptF24+I/AbKgOnXhVKePzrEyIXutLv36n4cRsq3Sg==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -1446,6 +1524,21 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 018f212..cc9d3d4 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,10 @@
 {
   "dependencies": {
     "@deno/vite-plugin": "^1.0.0",
-    "@vitejs/plugin-vue": "^5.1.4"
+    "@vitejs/plugin-vue": "^5.1.4",
+    "tailwind-scrollbar": "^4.0.1",
+    "tailwind-scrollbar-hide": "^2.0.0",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "typescript": "^5.8.2",
diff --git a/src/App.vue b/src/App.vue
index 87ed26e..853e2ee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,3 @@
-<template>
+<template >
   <router-view />
 </template>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index b5c61c9..4019c8d 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,5 @@
+@plugin 'tailwind-scrollbar';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 2be780f..1898309 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -9,7 +9,7 @@ import Trending from "./home_components/trending.vue";
 
 <template>
   <div id="main" class="flex">
-    <div id="left" class="border border-b-grau w-72">
+    <div id="left" class="w-72">
       <navigationbar></navigationbar>
     </div>
     <div class="w-100p">
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index 7a82e51..e755d26 100644
--- a/src/components/home_components/feed.vue
+++ b/src/components/home_components/feed.vue
@@ -1,67 +1,72 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
   import router from "../../router";
-  // import {valueOf} from "tailwindcss";
-/* PRÜFEN OB USER EINGELOGGT IST
-#########################################
-* function checkLoginStatus() {
-    const isLoggedIn = localStorage.getItem('isLoggedIn');
-    if (isLoggedIn === 'true') {
-        console.log("User is logged in");
-    } else {
-        console.log("User is not logged in");
-        router.push('/login');
-    }
+  // PLACEHOLDER
+const upc = ref([]); // user post computed
+let post_nr = "";
+let current_user = "";
+let pust_create_text = "";
+
+/*
+
+ */
+async function createFeed() {
+  try {
+    // posts und user holen und schauen ob sie richtig sidn
+    const post_response = await fetch('http://localhost:8000/api/posts', { method: 'GET' });
+    const postsDATA = await post_response.json();
+
+    const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
+    const usersDATA = await user_response.json();
+
+    // posts und user kombinieren
+    const combinedPosts = postsDATA.map(post => {
+      const user = usersDATA.find(user => user.user_id === post.user_id);
+
+      return {
+        post_id: post.posts_uuid,
+        post_text: post.post_text,
+        likes: post.likes,
+        comments: post.comments,
+        displayname: user ? user.displayname : 'Unknown',
+        username: user ? user.username : 'unknown_user'
+      };
+    });
+
+    //upc.value = combinedPosts;
+
+    upc.value = combinedPosts.sort(() => Math.random() - 0.5);
+
+  } catch (e) {
+    console.error("An error has occurred. Please try again later.");
+    console.error(e);
+  }
+  console.log(upc.value);
 }
 
-onMounted(() => {
-    checkLoginStatus();
-});
-* */
-  // PLACEHOLDER
-  const post = ref([
-    {id: 1,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "Linux Enjoyer",author_username: "lunix",
-      content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
-      comments_count: 1, likes: 5},
-    {id: 2,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "XBOX",author_username: "Xbox",
-      content: "Call of Duty: Black Ops 6 is OUT NOW.",
-      comments_count: 500000, likes: 100000},
-    {id: 3,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "JETBrains",author_username: "Jetbrains",
-      content: "BLI BLA BLUB. Jetbrains is the best IDE." ,
-      comments_count: 5000, likes: 1000},
-    {id: 4,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "GITHUB", author_username: "GitHub",
-      content: "GitHub Copilot got an massive update. Check out the new features.",
-      comments_count: 1500000, likes: 500000},
-    {id: 5,
-      profile_picture: "../../assets/danielvici_pp.png",
-      author_display_name: "danielvici123", author_username: "danielvici",
-      content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
-      comments_count: undefined, likes: 532844},
-    {id: 6,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "Microsoft", author_username: "Microsoft",
-      content: "Windows 11 24H2 is out now. Learn more here: https://www.microsoft.com",
-      comments_count: 500000, likes: 100000},
-    {id: 7,
-      profile_picture: "../../assets/default_pp.png",
-      author_display_name: "Apple", author_username: "Apple",
-      content: "The new iPhone 16 is out now. Everything you need to know: https://www.apple.com",
-      comments_count: 500000, likes: 100000},
-  ])
 
-  function addLike(index: number) {
-    post.value[index].likes += 1;
-    console.log("New Like Amount: ", post.value[index].likes);
+onMounted(async () => {
+  await createFeed();
+
+});
+
+
+
+  async function addLike(index: number) {
+    post_nr = index.toString()
+    const response = await fetch(`http://localhost:8000/api/post/${post_nr}/like`, {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json',},
+    });
+    if (!response.ok) {
+      alert('Failed to like post');
+    } else{
+      console.log("New Like Amount: ", upc.value[index].likes);
+    }
   }
-  function post_publish_func(text:string) {
+  function post_create_func(text:string) {
+
+
     console.log("Post: ", text);
     if (text === undefined || text === "") {
       console.log("Post is empty");
@@ -69,10 +74,13 @@ onMounted(() => {
       return;
     } else {
       console.log("Post is not empty");
-      post.value.push({id: post.value.length + 1, profile_picture: "../../assets/danielvici_pp.png", author_display_name: "ADMIN", author_username: "esp_admin", content: text, comments_count: undefined, likes: 0});
-
     }
   }
+
+  function gotoPost(post_id: number) {
+    localStorage.setItem("viewedpost", post_id.toString());
+    router.push(`/post/${post_id}`);
+  }
 </script>
 
 <template>
@@ -84,32 +92,32 @@ onMounted(() => {
         <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
         <form>
           <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
-          <textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
+          <textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
           <div class="">
             <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>
+            <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_create_func(pust_create_text)" type="button">Post</button>
           </div>
         </form>
       </div>
     </div>
 
-    <div> <!-- CONTENT -->
+    <div class="overflow-y-auto h-[650px] scrollbar"> <!-- CONTENT -->
       <ul>
-        <li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
+        <li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
           <!-- POST -->
           <img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
-              <label class="text-lg font-bold m-1 text-weiss">{{postitem.author_display_name}}</label>
-              <label class="text-base m-1 text-grau2">@{{ postitem.author_username }}</label>
+              <label class="text-lg font-bold m-1 text-weiss">{{postitem.displayname}}</label>
+              <label class="text-base m-1 text-grau2">@{{ postitem.username }}</label>
             </div>
             <div class="m-2"> <!-- POST CONTENT -->
-              <p class="text-sm m-1 text-weiss">{{ postitem.content }}</p>
+              <p class="text-sm m-1 text-weiss">{{ postitem.post_text }}</p>
             </div>
             <div class="flex"> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
                 <img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
-                <label class="text-sm m-1 text-weiss" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
+                <label class="text-sm m-1 text-weiss" v-if="postitem.comments != undefined">{{ postitem.comments }}</label>
                 <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
               </div>
 
@@ -119,7 +127,7 @@ onMounted(() => {
               </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>
+                <button @click="gotoPost(postitem.post_id)" class="text-weiss">View Post</button>
               </div><!-- ENDE -->
             </div>
           </div>
diff --git a/src/components/login_components/login_comp.vue b/src/components/login_components/login_comp.vue
index bd08319..c0f6753 100644
--- a/src/components/login_components/login_comp.vue
+++ b/src/components/login_components/login_comp.vue
@@ -10,7 +10,7 @@ onMounted(() => {
   if (localStorage.getItem('username')) {
     input_username_mail.value = localStorage.getItem('username') || "";
     input_user_password.value = localStorage.getItem('password') || "";
-    rememberMe.value = true;
+    rememberMe.value = false;
   }
 });
 
@@ -30,10 +30,8 @@ async function login(event: Event) {
     });
 
     if (response.status === 200) {
-      if (rememberMe.value) {
-        localStorage.setItem('username', username.value);
-      }
       localStorage.setItem('isLoggedIn', 'true');
+      localStorage.setItem('username', username.value);
       alert("You will be now redirected");
       router.push('/');
     } else {
@@ -57,7 +55,7 @@ async function login(event: Event) {
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
         <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
         <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Login</button>
-        <p class="text-weiss"><input type="checkbox"> Remeber me</p>
+        <p class="text-weiss"><input type="checkbox" v-model="rememberMe"> Remeber me</p>
       </form>
     </div>
     <div>
diff --git a/src/components/posts.vue b/src/components/posts.vue
index 1e38cbd..6e72c28 100644
--- a/src/components/posts.vue
+++ b/src/components/posts.vue
@@ -1,44 +1,164 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import Navigationbar from "./home_components/navigationbar.vue";
-import Contacts from "./home_components/contacts.vue";
-import Legal from "./home_components/legal.vue";
+import Navigationbar from './home_components/navigationbar.vue';
+import Contacts from './home_components/contacts.vue';
+import Legal from './home_components/legal.vue';
+import router from '../router';
+import {consoleLog} from "vite-plugin-checker/dist/logger";
 
-const route = useRoute();
-const post = ref(null);
+interface Post {
+  post_uuid: number;
+  user_id: number;
+  author_username: string;
+  post_text: string;
+  likes: number;
+  comments_count: number;
+  comments: any[];
+  created_at: string;
+}
+
+interface User {
+  user_id: number;
+  username: string;
+  displayname: string;
+}
+
+interface Comment {
+  comment_uuid: number;
+  user_id: number;
+  post_id: number;
+  comment_text: string;
+  created_at: string;
+  displayname: string;
+  username: string;
+}
+
+const post = ref<Post | null>(null);
+const user = ref<User | null>(null);
+const comments = ref<Comment[] | null>(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);
+  const post_id = localStorage.getItem('viewedpost');
+  console.log(post_id);
+  if (post_id === null) {
+    alert('No post selected. You will be redirected to the feed.');
+    await router.push('/');
+    return;
   }
+
+  getPost(parseInt(post_id));
+  getComment(parseInt(post_id));
 });
+
+
+
+async function getPost(post_id: number) {
+  try {
+    const post_response =  await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' });
+    const fetchedPost: Post = await post_response.json();
+
+    const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
+    const usersDATA = await user_response.json();
+
+    const postAuthor = usersDATA.find(user => user.user_id === fetchedPost.user_id);
+    if (postAuthor) {
+      console.log("The post was written by:", postAuthor);
+    } else {
+      console.error("Author not found.");
+    }
+
+    user.value = postAuthor;
+    post.value = fetchedPost;
+    console.log(post.value);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+
+async function getComment(post_id: number) {
+  try {
+    const comments_response = await fetch(`http://localhost:8000/api/post/${post_id}/comments`, { method: 'GET' });
+    const fetchedComments: Comment[] = await comments_response.json();
+
+    const user_response = await fetch(`http://localhost:8000/api/users`, { method: 'GET' });
+    const usersDATA: User[] = await user_response.json();
+
+    comments.value = fetchedComments.map(comment => ({
+      ...comment,
+      author: usersDATA.find(user => user.user_id === comment.user_id) || null
+    }));
+
+    console.log(comments.value);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 </script>
 
 <template>
   <div id="main" class="bg-hintergrund-farbe flex">
-    <div id="left" class="border border-b-grau w-72">
+    <div id="left" class="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 class="text-weiss w-100p border-x border-x-grau2" v-if="post">
+      <div> <!-- HEADER -->
+        <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b">Post</h2>
       </div>
-      <div v-else>
-        <p class="text-5xl text-weiss">Loading post...</p>
+
+
+      <div class="flex px-2 py-4 border-b-grau2 border-b">
+        <img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
+        <div>
+          <div> <!-- POST HEADER -->
+            <label class="text-lg font-bold m-1 text-weiss">{{user.displayname}}</label>
+            <label class="text-base m-1 text-grau2">@{{ user.username }} | </label>
+            <label class="text-base text-grau2"> Posted at {{ post.created_at }}</label>
+          </div>
+          <div class="m-2"> <!-- POST CONTENT -->
+            <p class="text-sm m-1 text-weiss">{{ post.post_text }}</p>
+          </div>
+          <div class="flex"> <!-- POST FOOTER -->
+            <div class="flex"> <!-- Comments -->
+              <img src="../assets/icons/comment.png" alt="" class="rounded-full align-middle">
+              <label class="text-sm m-1 text-weiss" v-if="post.comments != undefined">{{ post.comments }}</label>
+              <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
+            </div>
+
+            <div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes -->
+              <img alt="" src="../assets/icons/herz.png" class="align-middle">
+              <label class="text-sm m-1 text-weiss">{{ post.likes }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <div> <!-- COMMENTS VIEW and WRITE -->
+        <div>
+          <h2 class="align-middle p-6 text-xl text-weiss border-b-grau2 border-b">Comments</h2>
+        </div>
+
+        <div> <!-- WRITE COMMENTS -->
+
+        </div>
+
+        <div> <!-- VIEW COMMENTS -->
+          <div> <!-- VIEW COMMENTS -->
+            <div v-if="comments && comments.length > 0">
+              <div v-for="c in comments" :key="c.comment_uuid" class="p-4 border-b border-gray-700">
+                <p class="text-sm text-weiss">{{ c.author?.displayname || 'Unknown' }}: {{ c.comment_text }}</p>
+              </div>
+            </div>
+            <div v-else class="p-4 text-gray-400">No comments yet.</div>
+          </div>
+
+
+
+
+        </div>
       </div>
     </div>
     <div class="w-1/4">
@@ -49,4 +169,5 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-</style>
\ No newline at end of file
+</style>
+
diff --git a/src/router/index.ts b/src/router/index.ts
index ec79b35..eadfd97 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,6 @@
 // File: `src/router/index.ts`
 import { createRouter, createWebHistory } from "vue-router";
-import Home from "../components/Home.vue";
+import Home from "../../src/components/Home.vue";
 import Login from "../components/Login.vue";
 import wip from "../components/wip.vue";
 import settings from "../components/settings.vue";
diff --git a/tailwind.config.js b/tailwind.config.js
index 5d11f19..c0c7c0a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,7 +21,8 @@ export default {
             '35p':  '30.825%',
         }
     },
-    colors: {
+      plugins: ['tailwind-scrollbar', 'tailwind-scrollbar-hide'],
+      colors: {
         'logo-farbe-lila': '#5500a2',
         'logo-farbe-rot': '#a2002b',
         'logo-farbe-blau': '#0b1074',