diff --git a/src/App.js b/src/App.js
index 2fba503..4287b13 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,14 +15,13 @@ import Anmeldepage from "./Pages/anmeldepage";
 import Registrierung from "./Pages/registrierung";
 import Warenkorb from "./Pages/warenkorb";
 import Listenansicht from "./Pages/listenansicht";
-import "./App.css";
-import MainPage from "./Components/mainpage";
-import EndPage from "./Components/endpage";
-
+import "./index.css";
+import MainPage from "./Pages/mainpage";
+import EndPage from "./Pages/endpage";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { QueryClient, QueryClientProvider, useQuery } from "react-query";
 
 const queryClient = new QueryClient();
-import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
@@ -32,7 +31,7 @@ function App() {
           <Routes>
             <Route path="/" element={<MainPage />} />
             <Route path="endpage" element={<EndPage />} />
-            <Route path="liste" element={<Listenansicht />} />
+            <Route exact path="liste/:id" element={<Listenansicht />} />
             <Route path="registrierung" element={<Registrierung />} />
             <Route path="anmeldung" element={<Anmeldepage />} />
             <Route path="warenkorb" element={<Warenkorb />} />
diff --git a/src/Pages/listenansicht.jsx b/src/Pages/listenansicht.jsx
index ee3fb47..3eb840c 100644
--- a/src/Pages/listenansicht.jsx
+++ b/src/Pages/listenansicht.jsx
@@ -4,11 +4,12 @@ import Header1 from "../Components/header_1";
 import Liste from "../Components/liste";
 import bild from "../paparoy_liste.png";
 import { useQuery } from "react-query";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 
-function Listenansicht(props) {
+function Listenansicht() {
+  var props = useParams();
   var color_liste = true;
-  var id = 1;
+  var { id } = props;
   let listen = [];
 
   const { isLoading, error, data } = useQuery("repoData", () =>
@@ -18,6 +19,8 @@ function Listenansicht(props) {
   if (isLoading) return "Loading...";
   if (error) return "An error has occurred: " + error.message;
 
+  console.log(data);
+
   for (let index = 0; index < data.pizzas.length; index++) {
     listen.push(
       <Liste
diff --git a/src/Pages/mainpage.jsx b/src/Pages/mainpage.jsx
index 3afbae6..a9f3310 100644
--- a/src/Pages/mainpage.jsx
+++ b/src/Pages/mainpage.jsx
@@ -3,7 +3,7 @@ import Header1 from "../Components/header_1";
 import ButtonPrimary from "../Components/buttonPrimary";
 import img_paparoy from "../paparoy.jpg";
 import img_alaturca from "../alaturca.jpg";
-import Card from "./card";
+import Card from "../Components/card";
 import { useQuery } from "react-query";
 
 function MainPage() {
@@ -17,15 +17,13 @@ function MainPage() {
 
   for (let index = 0; index < data.length; index++) {
     console.log(data);
-    listen.push(<Card name={data[index].name} bild={img_paparoy} domain={data[index].domain} />);
+    listen.push(<Card name={data[index].name} bild={img_paparoy} href={"/liste/" + data[index].id} />);
   }
 
   return (
     <div>
       <Header1 />
-      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4" href="/liste">
-        {listen}
-      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4">{listen}</div>
     </div>
   );
 }