diff --git a/src/routes/trip/[id]/+page.svelte b/src/routes/trip/[id]/+page.svelte
index 2af16ad..f615c69 100644
--- a/src/routes/trip/[id]/+page.svelte
+++ b/src/routes/trip/[id]/+page.svelte
@@ -5,6 +5,7 @@
   import { goto } from "$app/navigation";
   import CreateNewAdventure from "$lib/components/CreateNewAdventure.svelte";
   import { addAdventure } from "../../../services/adventureService";
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
 
   export let data: PageData;
 
@@ -17,6 +18,8 @@
   onMount(() => {
     if (data.trip.trip) {
       trip = data.trip.trip[0];
+      adventuresPlans = data.trip.adventures;
+      console.log(adventuresPlans);
     } else {
       goto("/404");
     }
@@ -37,14 +40,30 @@
 </script>
 
 <main>
-  {#if trip}
-    <h1>{trip.name}</h1>
-    <p>{trip.description}</p>
-    <p>{trip.startDate}</p>
-    <p>{trip.endDate}</p>
+  {#if trip && trip.name}
+    <h1 class="text-center font-extrabold text-4xl mb-2">{trip.name}</h1>
+  {/if}
+  {#if trip && trip.description}
+    <p class="text-center text-lg mt-4 pl-16 pr-16">{trip.description}</p>
+  {/if}
+  {#if trip && trip.startDate}
+    <p class="text-center text-lg mt-4 pl-16 pr-16">
+      Start Date: {trip.startDate}
+    </p>
+  {/if}
+  {#if trip && trip.endDate}
+    <p class="text-center text-lg mt-4 pl-16 pr-16">End Date: {trip.endDate}</p>
   {/if}
 </main>
 
+<div
+  class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+>
+  {#each adventuresPlans as adventure (adventure.id)}
+    <AdventureCard {adventure} type="trip" />
+  {/each}
+</div>
+
 <div class="fixed bottom-4 right-4">
   <div class="flex flex-row items-center justify-center gap-4">
     <div class="dropdown dropdown-top dropdown-end">