diff --git a/package.json b/package.json
index 847b2c2..b986b2d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "adventurelog",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Embark, Explore, Remember. 🌍",
   "private": true,
   "scripts": {
diff --git a/src/lib/components/AddFromFeatured.svelte b/src/lib/components/AddLocationChooser.svelte
similarity index 66%
rename from src/lib/components/AddFromFeatured.svelte
rename to src/lib/components/AddLocationChooser.svelte
index 2ae36cb..41895cc 100644
--- a/src/lib/components/AddFromFeatured.svelte
+++ b/src/lib/components/AddLocationChooser.svelte
@@ -3,26 +3,28 @@
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
+  import TripListModal from "./TripListModal.svelte";
   let modal: HTMLDialogElement;
 
-  let trips: Trip[] = [];
-
   export let adventure: Adventure;
 
+  let tripModal: boolean = false;
+
   onMount(async () => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
     if (modal) {
       modal.showModal();
     }
-    let res = await fetch("/api/trips");
-    trips = await res.json();
-    console.log(trips);
   });
 
   function close() {
     dispatch("close");
   }
 
+  function openTripModal() {
+    tripModal = true;
+  }
+
   function visited() {
     dispatch("visited");
     close();
@@ -32,8 +34,8 @@
     close();
   }
 
-  function trip(trip: Trip) {
-    dispatch("trip", trip);
+  function trip(event: CustomEvent<any>) {
+    dispatch("trip", event.detail);
     close();
   }
 
@@ -44,6 +46,10 @@
   }
 </script>
 
+{#if tripModal}
+  <TripListModal on:close={close} on:trip={trip} />
+{/if}
+
 <dialog id="my_modal_1" class="modal">
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -58,26 +64,9 @@
       <button class="btn btn-primary mr-2" on:click={idea}
         >Adventure Idea</button
       >
-      <details class="dropdown">
-        <summary class="m-1 btn">Add to Trip</summary>
-        <ul
-          class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52"
-        >
-          {#each trips as trip}
-            <li>
-              <button
-                class="btn btn-primary"
-                on:click={() => {
-                  dispatch("trip", trip);
-                  close();
-                }}
-              >
-                {trip.name}
-              </button>
-            </li>
-          {/each}
-        </ul>
-      </details>
+      <button class="btn btn-primary mr-2" on:click={openTripModal}
+        >Add to Trip</button
+      >
       <div class="h-32"></div>
       <button class="btn btn-neutral" on:click={close}>Close</button>
     </div>
diff --git a/src/lib/components/TripListModal.svelte b/src/lib/components/TripListModal.svelte
new file mode 100644
index 0000000..d553cd8
--- /dev/null
+++ b/src/lib/components/TripListModal.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Trip } from "$lib/utils/types";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  let modal: HTMLDialogElement;
+  let trips: Trip[] = [];
+
+  onMount(async () => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+    let res = await fetch("/api/trips");
+    trips = await res.json();
+    console.log(trips);
+  });
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+
+  function close() {
+    dispatch("close");
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">Choose a trip</h3>
+    {#each trips as trip}
+      <li>
+        <button
+          class="btn btn-primary"
+          on:click={() => {
+            dispatch("trip", trip);
+            close();
+          }}
+        >
+          {trip.name}
+        </button>
+      </li>
+    {/each}
+  </div>
+  <!-- close button -->
+  <button class="btn btn-neutral" on:click={close}>Close</button>
+</dialog>
diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte
index 6efd4c9..4433eb5 100644
--- a/src/routes/featured/+page.svelte
+++ b/src/routes/featured/+page.svelte
@@ -3,7 +3,7 @@
   import { goto } from "$app/navigation";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import type { Adventure, Trip } from "$lib/utils/types.js";
-  import AddFromFeatured from "$lib/components/AddFromFeatured.svelte";
+  import AddFromFeatured from "$lib/components/AddLocationChooser.svelte";
   import { addAdventure } from "../../services/adventureService.js";
   import SucessToast from "$lib/components/SucessToast.svelte";