diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 9cefb52f..a94b0be5 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -17,7 +17,7 @@
     }
 </script>
 
-<div class="card min-w-max w-96 bg-neutral shadow-xl overflow-hidden">
+<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 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>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 603c41b1..57a499df 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -9,15 +9,15 @@
         goto('/log');
     }
 </script>
-<div class="navbar bg-base-100">
-    <div class="navbar-start">
-        <button class="btn btn-primary mr-4 ml-2" on:click={goHome}>Home</button>
-        <button class="btn btn-primary" on:click={goToLog}>My Log</button>
+<div class="navbar bg-base-100 flex flex-col md:flex-row">
+    <div class="navbar-start flex justify-around md:justify-start">
+        <button class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2" on:click={goHome}>Home</button>
+        <button class="btn btn-primary my-2 md:my-0" on:click={goToLog}>My Log</button>
     </div>
-    <div class="navbar-center">
+    <div class="navbar-center flex justify-center md:justify-center">
       <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
     </div>
-    <div class="navbar-end">
+    <div class="navbar-end flex justify-around md:justify-end">
       <p>Adventures: {getNumberOfAdventures()} </p>
     </div>
-  </div>
+</div>
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index a7760c49..2090c4fa 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -112,7 +112,7 @@
 <EditModal bind:editId={editId} bind:editName={editName} bind:editLocation={editLocation} bind:editCreated={editCreated} on:submit={saveAdventure} on:close={handleClose} />
 {/if}
 
-<div class="grid grid-cols-3 gap-4 mt-4 content-center auto-cols-auto ml-6">
+<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 adventures as adventure (adventure.id)}
         <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} on:remove={triggerRemoveAdventure} on:edit={editAdventure} />
     {/each}