diff --git a/src/lib/assets/calendar.svg b/src/lib/assets/calendar.svg
new file mode 100644
index 0000000..8d2afab
--- /dev/null
+++ b/src/lib/assets/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14.25" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>
\ No newline at end of file
diff --git a/src/lib/assets/locationDot.svg b/src/lib/assets/locationDot.svg
new file mode 100644
index 0000000..f5af965
--- /dev/null
+++ b/src/lib/assets/locationDot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12.5" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>
\ No newline at end of file
diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index ee94bee..9cefb52 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher } from 'svelte';
+    import locationDot from "$lib/assets/locationDot.svg";
+    import calendar from "$lib/assets/calendar.svg";
     const dispatch = createEventDispatcher();
 
     export let name:String;
@@ -15,37 +17,15 @@
     }
 </script>
 
-<div>
-    <!-- <p>ID: {id}</p> -->
-    <p>Name: {name}</p>
-    <p>Location: {location}</p>
-    <p>Created: {created}</p>
-    <button on:click={remove}>Remove</button>
-    <button on:click={edit}>Edit</button>
+<div class="card min-w-max w-96 bg-neutral shadow-xl overflow-hidden">
+    <div class="card-body">
+      <h2 class="card-title overflow-ellipsis">{name}</h2>
+      <p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
+      <p><img src={calendar} class="inline-block -mt-1 mr-1" alt="Logo" />{created}</p>
+      <div class="card-actions justify-end">
+        <button class="btn btn-primary" on:click={edit}>Edit</button>
+        <button class="btn btn-secondary" on:click={remove}>Remove</button>
+      </div>
+    </div>
 </div>
 
-<style>
-    div {
-        margin: 2rem;
-        padding: .5rem;
-        background-color: rgb(235, 230, 223);
-        border: 1px solid grey;
-        border-radius: .5rem;
-        box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.182);
-    }
-    button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-</style>
\ No newline at end of file
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 3bd2d09..5aaec3c 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -71,17 +71,19 @@
 
 
 
-{#each adventures as adventure, i}
-    <div>
+
+<div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
+    {#each adventures as adventure (adventure.id)}
         <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
-    </div>
-{/each}
+    {/each}
+</div>
+
 
 {#if adventures.length == 0}
 <div class="flex flex-col items-center justify-center mt-28">
     <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
-</div >
+</div>
 
 {/if}