diff --git a/components/multiSelect.vue b/components/multiSelect.vue
index e47d0eb..71b0b15 100644
--- a/components/multiSelect.vue
+++ b/components/multiSelect.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col w-fit">
     <p>Categories</p>
-    <div class="flex gap-x-2">
+    <div
+      class="flex gap-x-2 shadow-sm ring-1 ring-inset ring-gray-300 rounded-md border-0 bg-white px-2.5 py-1.5 focus:ring-2 focus:ring-primary-500">
       <div
-        class="flex items-center gap-x-2 bg-gray-200 p-2 rounded-md"
+        class="flex items-center gap-x-2 bg-gray-200 rounded-md"
         v-for="category in selectedCategories">
         <p>{{ category.name }}</p>
         <UIcon
@@ -11,12 +12,13 @@
           @click="removeCategory(category)" />
       </div>
       <input
+        id="search"
         type="text"
         v-model="search"
         @focus="showOptions = true"
-        @input="filterCategories"
         placeholder="Search categories" />
     </div>
+
     <select
       multiple
       v-if="showOptions">
@@ -40,9 +42,17 @@
   import { useCollection } from "vuefire";
   import { collection } from "firebase/firestore";
   import { v4 as uuidv4 } from "uuid";
-
   const emits = defineEmits(["category-selected", "category-removed"]);
 
+  function handleOutsideClick(event) {
+    const inputElement = event.target.closest('input[id="search"]');
+    const optionElements = event.target.closest("select");
+    if (!inputElement && !optionElements) {
+      showOptions.value = false;
+    }
+  }
+  addEventListener("click", handleOutsideClick);
+
   const { firestore } = useFirebaseClient();
   const categories = useCollection(
     collection(firestore, "categories").withConverter({
@@ -95,6 +105,9 @@
   }
 
   function createCategory() {
+    if (search.value.trim() === "") {
+      return;
+    }
     const newCategory = {
       id: uuidv4(),
       name: capitalizeFirstLetter(search.value.trim()),
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 829ef80..f1eb72b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,12 @@ export default defineNuxtConfig({
       appId: process.env.FIREBASE_APP_ID,
       measurementId: process.env.FIREBASE_MEASUREMENT_ID,
     },
+    appCheck: {
+      debug: process.env.NODE_ENV !== "production",
+      isTokenAutoRefreshEnabled: true,
+      provider: "ReCaptchaV3",
+      key: "6LctAsopAAAAAGPUQLCRKoxSjlMko-zRy17c8ikL",
+    },
   },
   nitro: {
     firebase: {
diff --git a/pages/add-attraction.vue b/pages/add-attraction.vue
index c7dbc31..0ab32bb 100644
--- a/pages/add-attraction.vue
+++ b/pages/add-attraction.vue
@@ -1,16 +1,16 @@
 <template>
-  <div>
+  <div class="m-2">
     <p class="font-bold text-xl">Add Attraction</p>
 
     <form @submit.prevent="addAttraction">
       <div class="flex flex-col gap-y-2 mb-2">
-        <div>
+        <div class="flex gap-x-2">
           <p>Is it in Berlin?</p>
-          <UToggle v-model="isBerlin" />
+          <UCheckbox v-model="isBerlin" />
         </div>
-        <div>
+        <div class="flex gap-x-2">
           <p>Is it regionally?</p>
-          <UToggle v-model="isRegional" />
+          <UCheckbox v-model="isRegional" />
         </div>
         <div>
           <p>Name</p>
@@ -97,7 +97,11 @@
             :opening-hours="openingHours.sunday" />
         </div>
       </div>
-      <UButton type="submit">Save</UButton>
+      <UButton
+        type="submit"
+        class="m-2"
+        >Save</UButton
+      >
     </form>
   </div>
 </template>
@@ -227,6 +231,8 @@
       await batch.commit();
 
       console.log("Attraction saved");
+
+      window.location.reload();
     } catch (error) {
       console.error("Error adding attraction:", error);
     }