diff --git a/src/lib/components/TripCard.svelte b/src/lib/components/TripCard.svelte
new file mode 100644
index 0000000..fa7c652
--- /dev/null
+++ b/src/lib/components/TripCard.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import locationDot from "$lib/assets/locationDot.svg";
+  import calendar from "$lib/assets/calendar.svg";
+  import { goto } from "$app/navigation";
+  import { desc } from "drizzle-orm";
+  import type { Adventure, Trip } from "$lib/utils/types";
+  const dispatch = createEventDispatcher();
+
+  //   export let type: String;
+
+  export let trip: Trip;
+
+  function remove() {
+    dispatch("remove", trip.id);
+  }
+  function edit() {}
+  function add() {
+    dispatch("add", trip);
+  }
+
+  function moreInfo() {
+    console.log(trip.id);
+    goto(`/trip/${trip.id}`);
+  }
+
+  function markVisited() {
+    console.log(trip.id);
+    dispatch("markVisited", trip);
+  }
+</script>
+
+<div
+  class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+  <div class="card-body">
+    <h2 class="card-title overflow-ellipsis">{trip.name}</h2>
+    {#if trip.description && trip.description !== ""}
+      <div class="inline-flex items-center">
+        <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
+        <p class="ml-.5">{trip.description}</p>
+      </div>
+    {/if}
+    {#if trip.startDate && trip.startDate !== ""}
+      <div class="inline-flex items-center">
+        <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
+        <p class="ml-1">{trip.startDate}</p>
+      </div>
+    {/if}
+    {#if trip.endDate && trip.endDate !== ""}
+      <div class="inline-flex items-center">
+        <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
+        <p class="ml-1">{trip.endDate}</p>
+      </div>
+    {/if}
+    <div class="card-actions justify-end">
+      <button class="btn btn-secondary" on:click={remove}
+        ><iconify-icon icon="mdi:trash-can-outline" class="text-2xl"
+        ></iconify-icon></button
+      >
+    </div>
+  </div>
+</div>
diff --git a/src/routes/api/trips/+server.ts b/src/routes/api/trips/+server.ts
index 4dc6fe3..50b0e40 100644
--- a/src/routes/api/trips/+server.ts
+++ b/src/routes/api/trips/+server.ts
@@ -1,7 +1,7 @@
 import { db } from "$lib/db/db.server";
 import { userPlannedTrips } from "$lib/db/schema";
 import { error, type RequestEvent } from "@sveltejs/kit";
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 
 export async function POST(event: RequestEvent): Promise<Response> {
   if (!event.locals.user) {
@@ -92,3 +92,38 @@ export async function GET(event: RequestEvent): Promise<Response> {
     },
   });
 }
+
+export async function DELETE(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  const body = await event.request.json();
+  if (!body.id) {
+    return error(400, {
+      message: "No trip id provided",
+    });
+  }
+
+  let res = await db
+    .delete(userPlannedTrips)
+    .where(
+      and(
+        eq(userPlannedTrips.userId, event.locals.user.id),
+        eq(userPlannedTrips.id, body.id)
+      )
+    )
+    .execute();
+
+  return new Response(JSON.stringify({ message: "Trip deleted" }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index 1a6dafa..53add80 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -13,6 +13,7 @@
   import SucessToast from "$lib/components/SucessToast.svelte";
   import mapDrawing from "$lib/assets/adventure_map.svg";
   import CreateNewTripPlan from "$lib/components/CreateNewTripPlan.svelte";
+  import TripCard from "$lib/components/TripCard.svelte";
   export let data;
 
   let adventuresPlans: Adventure[] = [];
@@ -154,6 +155,34 @@
         showToast("Failed to get trips");
       });
   }
+
+  async function removeTrip(event: { detail: number }) {
+    let initialLength: number = tripPlans.length;
+    const response = await fetch("/api/trips", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id: event.detail }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        let theTrip = tripPlans.find((trip) => trip.id === event.detail);
+        if (theTrip) {
+          let newArray = tripPlans.filter((trip) => trip.id !== event.detail);
+          if (newArray.length === initialLength - 1) {
+            tripPlans = newArray;
+            showToast("Trip removed successfully!");
+          } else {
+            showToast("Failed to remove trip");
+          }
+        }
+      })
+      .catch((error) => {
+        showToast("Failed to get trips");
+      });
+  }
 </script>
 
 {#if isShowingToast}
@@ -247,19 +276,20 @@
   </div>
 {/if}
 
-{#each tripPlans as trip (trip.id)}
-  <div class="flex justify-center items-center w-full mt-4 mb-4">
-    <article class="prose">
-      <h2>{trip.name}</h2>
-      <p>{trip.description}</p>
-      <p>
-        <strong>Start Date:</strong>
-        {trip.startDate} <strong>End Date:</strong>
-        {trip.endDate}
-      </p>
-    </article>
+<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 tripPlans as trip (trip.id)}
+    <TripCard {trip} on:remove={removeTrip} />
+  {/each}
+</div>
+
+{#if tripPlans.length == 0 && !isLoadingIdeas && !isLoadingTrips && !isShowingMoreFields && !isShowingNewTrip}
+  <div class="flex flex-col items-center justify-center mt-16">
+    <article class="prose mb-4"><h2>Add some trips!</h2></article>
+    <img src={mapDrawing} width="25%" alt="Logo" />
   </div>
-{/each}
+{/if}
 
 <svelte:head>
   <title>My Plans | AdventureLog</title>