diff --git a/index.html b/index.html
index a54d554..2481b07 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>DOXFOOD</title>
   </head>
   <body>
diff --git a/src/assets/datatable.css b/src/assets/datatable.css
index 1e21160..adff788 100644
--- a/src/assets/datatable.css
+++ b/src/assets/datatable.css
@@ -4,11 +4,6 @@
     @apply input-bordered;
 }
 
-.dt-full:has(.dt-length) {
-    @apply grid;
-    @apply grid-cols-2;
-}
-
 .dt-length {
     @apply m-3;
     @apply justify-self-start;
@@ -24,6 +19,24 @@
     }
 }
 
+.dt-container .dt-layout-row {
+    display: table;
+    clear: both;
+    width: 100%;
+}
+
+.dt-container .dt-layout-cell {
+    display: table-cell;
+    vertical-align: middle;
+    padding: 5px 0;
+}
+
+@media screen and (max-width: 1024px) {
+    .dt-container .dt-layout-cell {
+      display: block;
+    }
+}
+
 .dataTable {
     tbody {
         tr {
diff --git a/src/components/CreateRestaurantModal.vue b/src/components/CreateRestaurantModal.vue
index d46f08a..dbe1a11 100644
--- a/src/components/CreateRestaurantModal.vue
+++ b/src/components/CreateRestaurantModal.vue
@@ -115,7 +115,7 @@ defineExpose({ show, hide, setRestaurantPosition });
     @rejected="onRejected"
   >
     <div class="flex flex-col place-content-center items-center h-full">
-      <div class="flex flex-row flex-nowrap w-96">
+      <div class="flex flex-row flex-nowrap w-72 sm:w-96">
         <div class="mx-5 my-4 w-full">
           <label class="form-label"> Name </label>
           <input
@@ -127,7 +127,7 @@ defineExpose({ show, hide, setRestaurantPosition });
           <label class="text-red-500">{{ errors.name }}</label>
         </div>
       </div>
-      <div class="flex flex-row flex-nowrap w-96">
+      <div class="flex flex-row flex-nowrap w-72 sm:w-96">
         <div class="mx-5 my-4 w-full">
           <label class="form-label"> Tags </label>
           <TagsField v-model="tags" v-bind="tagsAttrs" :options="tagsNames" />
@@ -135,7 +135,7 @@ defineExpose({ show, hide, setRestaurantPosition });
           <label class="text-red-500">{{ errors.tags }}</label>
         </div>
       </div>
-      <div class="flex flex-row flex-nowrap w-96">
+      <div class="flex flex-row flex-nowrap w-72 sm:w-96">
         <div class="mx-5 my-4 w-full">
           <label class="form-label"> Price </label>
           <select
@@ -151,7 +151,7 @@ defineExpose({ show, hide, setRestaurantPosition });
           <label class="text-red-500">{{ errors.price }}</label>
         </div>
       </div>
-      <div class="flex flex-row flex-nowrap w-96">
+      <div class="flex flex-row flex-nowrap w-72 sm:w-96">
         <div class="mx-5 my-4 w-full">
           <label class="form-label"> Google Maps Link (Optional) </label>
           <input
diff --git a/src/components/MultiSelectField.vue b/src/components/MultiSelectField.vue
index 0bb3d78..8f22eb2 100644
--- a/src/components/MultiSelectField.vue
+++ b/src/components/MultiSelectField.vue
@@ -75,7 +75,7 @@ function filteredOptions() {
       <input
         ref="input"
         v-model="query"
-        class="input join-item h-auto min-w-[8ch] flex-1 border-0 p-0 focus:outline-0"
+        class="input join-item h-auto lg:min-w-[8ch] flex-1 border-0 p-0 focus:outline-0"
         role="combobox"
         type="text"
         :disabled="props.disabled"
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index c54cfd3..7c309c2 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { RouterLink } from "vue-router";
 import { currentUser, signOut } from "../pocketbase";
+
+function onRouterLinkClicked(event: Event) {
+  (event.target as HTMLButtonElement).blur();
+}
 </script>
 
 <template>
@@ -11,19 +15,19 @@ import { currentUser, signOut } from "../pocketbase";
           <font-awesome-icon icon="fa-solid fa-bars" />
         </div>
         <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[20000] p-2 shadow bg-base-100 rounded-box w-52">
-          <li><RouterLink class="btn btn-ghost" to="/">Home</RouterLink></li>
+          <li><RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/">Home</RouterLink></li>
 
           <li>
-            <RouterLink class="btn btn-ghost" to="/random">Random</RouterLink>
+            <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/random">Random</RouterLink>
           </li>
           <li>
-            <RouterLink class="btn btn-ghost" to="/list">List</RouterLink>
+            <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/list">List</RouterLink>
           </li>
           <li>
-            <RouterLink class="btn btn-ghost" to="/create">Create Restaurant</RouterLink>
+            <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/create">Create Restaurant</RouterLink>
           </li>
           <li>
-            <RouterLink class="btn btn-ghost" to="/about">About</RouterLink>
+            <RouterLink @click="onRouterLinkClicked" class="btn btn-ghost" to="/about">About</RouterLink>
           </li>
         </ul>
       </div>
diff --git a/src/components/RestaurantsTable.vue b/src/components/RestaurantsTable.vue
index cf3d2f0..54358aa 100644
--- a/src/components/RestaurantsTable.vue
+++ b/src/components/RestaurantsTable.vue
@@ -4,6 +4,7 @@ import "../assets/datatable.css";
 import DataTable from "datatables.net-vue3";
 import DataTablesCore from "datatables.net";
 import "datatables.net-select";
+import "datatables.net-responsive";
 import { PropType, ref } from "vue";
 import RatingField from "./RatingField.vue";
 import Restaurant from "../models/restaurant";
@@ -80,9 +81,8 @@ defineExpose({ deselectAll });
     :data="props.data"
     :options="{
       layout: {
-        top: ['pageLength', null, 'search'],
-        topStart: null,
-        topEnd: null,
+        topStart: 'pageLength',
+        topEnd: 'search',
         bottom: 'paging',
         bottomStart: null,
         bottomEnd: null,
@@ -90,6 +90,7 @@ defineExpose({ deselectAll });
       select: {
         style: 'single',
       },
+      responsive: true,
     }"
     @select="onRowSelected"
   >
diff --git a/src/utils/filters.ts b/src/utils/filters.ts
index b7c8c45..43cdc65 100644
--- a/src/utils/filters.ts
+++ b/src/utils/filters.ts
@@ -62,7 +62,7 @@ export function makeFilters(config: SearchPreferences) {
     const lowerIndex = prices.findIndex((element) => element == config.lowerPriceBound);
     const upperIndex = prices.findIndex((element) => element == config.upperPriceBound);
 
-    const values = prices.slice(lowerIndex, upperIndex);
+    const values = prices.slice(lowerIndex, upperIndex + 1);
     filters.push(filterValues.bind(undefined, "price", values, false, undefined));
   }
 
