diff --git a/app/Http/Controllers/PhotoItemTagsController.php b/app/Http/Controllers/PhotoItemTagsController.php
index d5bd6c6f..aabd2c07 100644
--- a/app/Http/Controllers/PhotoItemTagsController.php
+++ b/app/Http/Controllers/PhotoItemTagsController.php
@@ -15,7 +15,7 @@ public function store(PhotoItem $photoItem, StorePhotoItemTagRequest $request):
             abort(404);
         }
 
-        $photoItem->tags()->syncWithoutDetaching($request->input('tag_id'));
+        $photoItem->tags()->syncWithoutDetaching($request->input('tag_ids'));
 
         return response()->json();
     }
diff --git a/app/Http/Requests/StorePhotoItemTagRequest.php b/app/Http/Requests/StorePhotoItemTagRequest.php
index ecefe9e1..429ad97e 100644
--- a/app/Http/Requests/StorePhotoItemTagRequest.php
+++ b/app/Http/Requests/StorePhotoItemTagRequest.php
@@ -15,7 +15,8 @@ class StorePhotoItemTagRequest extends FormRequest
     public function rules(): array
     {
         return [
-            'tag_id' => 'required|exists:tags,id',
+            'tag_ids' => 'required|array',
+            'tag_ids.*' => 'required|integer|exists:tags,id',
         ];
     }
 }
diff --git a/resources/js/Components/TagBox.vue b/resources/js/Components/TagBox.vue
index 825b5c08..e0a5e701 100644
--- a/resources/js/Components/TagBox.vue
+++ b/resources/js/Components/TagBox.vue
@@ -17,9 +17,13 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    dropdownWidth: {
+    nullable: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
         type: String,
-        default: 'w-full md:w-96 right-0',
+        default: '',
     },
 });
 
@@ -59,6 +63,7 @@ onMounted(() => {
         :modelValue="modelValue"
         @update:modelValue="value => $emit('update:modelValue', value)"
         :multiple="multiple"
+        :nullable="nullable"
         by="id"
     >
             <div class="relative">
@@ -67,6 +72,7 @@ onMounted(() => {
                         ref="input"
                         class="w-full rounded-md border-0 bg-white dark:bg-gray-900 py-1.5 pl-3 pr-12 text-gray-900 dark:text-gray-300 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-600 sm:text-sm sm:leading-6"
                         :displayValue="(item) => item?.name"
+                        :placeholder="placeholder"
                         @change="query = $event.target.value"
                         @focus="$event.target.select()"
                         autocomplete="off"
@@ -96,8 +102,7 @@ onMounted(() => {
                     @after-leave="query = ''"
                 >
                     <ComboboxOptions
-                        class="absolute z-10 mt-1 max-h-96 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
-                        :class="dropdownWidth"
+                        class="absolute z-10 mt-1 max-h-96 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
                     >
                         <div
                             v-if="filteredItems.length === 0 && query !== ''"
diff --git a/resources/js/Pages/Photos/Partials/NewPhotoItem.vue b/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
index 72d6f5c4..a02b5150 100644
--- a/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
+++ b/resources/js/Pages/Photos/Partials/NewPhotoItem.vue
@@ -14,12 +14,23 @@ const props = defineProps({
 
 const item = ref(props.propItem);
 
-const selectedMaterialTag = ref(props.tags.material[0]);
-const selectedBrandTag = ref(props.tags.brand[0]);
-const selectedEventTag = ref(props.tags.event[0]);
-const selectedStateTag = ref(props.tags.state[0]);
-const selectedContentTag = ref(props.tags.content[0]);
-const selectedSizeTag = ref(props.tags.size[0]);
+const selectedMaterialTag = ref(null);
+const selectedBrandTag = ref(null);
+const selectedEventTag = ref(null);
+const selectedStateTag = ref(null);
+const selectedContentTag = ref(null);
+const selectedSizeTag = ref(null);
+
+const selectedTagIds = computed(() => {
+    return [
+        selectedMaterialTag.value?.id,
+        selectedBrandTag.value?.id,
+        selectedEventTag.value?.id,
+        selectedStateTag.value?.id,
+        selectedContentTag.value?.id,
+        selectedSizeTag.value?.id,
+    ].filter(tag => tag);
+});
 
 const tagNames = computed(() => {
     return item.value.tag_ids.map(function (tagId) {
@@ -32,13 +43,17 @@ const tagNames = computed(() => {
     });
 });
 
-const addTagToItem = (tag) => {
-    if (item.value.tag_ids.find(itemTag => itemTag === tag.id)) {
-        return;
-    }
+const addTagsToItem = () => {
+    item.value.tag_ids = [...new Set([...item.value.tag_ids, ...selectedTagIds.value])];
 
-    item.value.tag_ids.push(tag.id);
     emit('change', item.value);
+
+    selectedMaterialTag.value = null;
+    selectedBrandTag.value = null;
+    selectedEventTag.value = null;
+    selectedStateTag.value = null;
+    selectedContentTag.value = null;
+    selectedSizeTag.value = null;
 };
 
 const removeTagFromItem = (tagId) => {
@@ -75,110 +90,63 @@ const copyItem = () => {
                     <i class="fas fa-fw fa-trash-alt text-xs"></i>
                 </IconDangerButton>
             </div>
-            <div class="mt-6">
-                <div class="flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.material"
-                        v-model="selectedMaterialTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedMaterialTag)"
-                        :disabled="!selectedMaterialTag"
-                    >
-                        Add Material
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.brand"
-                        v-model="selectedBrandTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedBrandTag)"
-                        :disabled="!selectedBrandTag"
-                    >
-                        Add Brand
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.content"
-                        v-model="selectedContentTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedContentTag)"
-                        :disabled="!selectedContentTag"
-                    >
-                        Add Content
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.size"
-                        v-model="selectedSizeTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedSizeTag)"
-                        :disabled="!selectedSizeTag"
-                    >
-                        Add Size
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.state"
-                        v-model="selectedStateTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedStateTag)"
-                        :disabled="!selectedStateTag"
-                    >
-                        Add State
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
-                    <TagBox
-                        class="w-full"
-                        dropdownWidth="w-full"
-                        :items="tags.event"
-                        v-model="selectedEventTag"
-                    ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="addTagToItem(selectedEventTag)"
-                        :disabled="!selectedEventTag"
-                    >
-                        Add Event
-                    </PrimaryButton>
-                </div>
+            <div class="mt-6 space-y-2">
+                <TagBox
+                    class="w-full"
+                    :items="tags.material"
+                    v-model="selectedMaterialTag"
+                    :nullable="true"
+                    placeholder="Material"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.brand"
+                    v-model="selectedBrandTag"
+                    :nullable="true"
+                    placeholder="Brand"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.content"
+                    v-model="selectedContentTag"
+                    :nullable="true"
+                    placeholder="Content"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.size"
+                    v-model="selectedSizeTag"
+                    :nullable="true"
+                    placeholder="Size"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.state"
+                    v-model="selectedStateTag"
+                    :nullable="true"
+                    placeholder="State"
+                    @change="addTagsToItem"
+                ></TagBox>
+
+                <TagBox
+                    class="w-full"
+                    :items="tags.event"
+                    v-model="selectedEventTag"
+                    :nullable="true"
+                    placeholder="Event"
+                    @change="addTagsToItem"
+                ></TagBox>
+            </div>
 
-                <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
+            <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
                     <span
                         v-for="tag in tagNames"
                         :key="tag.id"
@@ -189,7 +157,15 @@ const copyItem = () => {
                              aria-hidden="true"><circle cx="3" cy="3" r="3"/></svg>
                         {{ tag.name }}
                     </span>
-                </div>
+            </div>
+
+            <div v-if="selectedTagIds.length" class="mt-4 flex justify-center">
+                <PrimaryButton
+                    class="whitespace-nowrap"
+                    @click="addTagsToItem"
+                >
+                    Add Selected Tags
+                </PrimaryButton>
             </div>
         </div>
         <div class="px-4 py-5 sm:p-6 flex flex-row justify-between">
diff --git a/resources/js/Pages/Photos/Partials/PhotoItem.vue b/resources/js/Pages/Photos/Partials/PhotoItem.vue
index c7859395..dfae199a 100644
--- a/resources/js/Pages/Photos/Partials/PhotoItem.vue
+++ b/resources/js/Pages/Photos/Partials/PhotoItem.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import {computed, ref} from "vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import IconPrimaryButton from "@/Components/IconPrimaryButton.vue";
 import ToggleInput from "@/Components/ToggleInput.vue";
@@ -12,12 +12,46 @@ const props = defineProps({
     tags: Object,
 });
 
-const selectedMaterialTag = ref(props.tags.material[0]);
-const selectedBrandTag = ref(props.tags.brand[0]);
-const selectedEventTag = ref(props.tags.event[0]);
-const selectedStateTag = ref(props.tags.state[0]);
-const selectedContentTag = ref(props.tags.content[0]);
-const selectedSizeTag = ref(props.tags.size[0]);
+const emit = defineEmits([
+    'add-tags-to-item',
+    'remove-item',
+    'remove-tag-from-item',
+    'update-quantity',
+    'toggle-picked-up',
+    'toggle-recycled',
+    'toggle-deposit',
+    'copy-item',
+]);
+
+const selectedMaterialTag = ref(null);
+const selectedBrandTag = ref(null);
+const selectedEventTag = ref(null);
+const selectedStateTag = ref(null);
+const selectedContentTag = ref(null);
+const selectedSizeTag = ref(null);
+
+const selectedTagIds = computed(() => {
+    return [
+        selectedMaterialTag.value?.id,
+        selectedBrandTag.value?.id,
+        selectedEventTag.value?.id,
+        selectedStateTag.value?.id,
+        selectedContentTag.value?.id,
+        selectedSizeTag.value?.id,
+    ].filter(tag => tag);
+});
+
+const addTagsToItem = () => {
+    emit("add-tags-to-item", props.item.pivot, selectedTagIds.value);
+
+    selectedMaterialTag.value = null;
+    selectedBrandTag.value = null;
+    selectedEventTag.value = null;
+    selectedStateTag.value = null;
+    selectedContentTag.value = null;
+    selectedSizeTag.value = null;
+};
+
 </script>
 
 <template>
@@ -35,103 +69,57 @@ const selectedSizeTag = ref(props.tags.size[0]);
                 </IconDangerButton>
             </div>
             <div class="mt-6">
-                <div class="flex flex-row justify-between space-x-2">
+                <div class="space-y-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.material"
+                        :nullable="true"
+                        placeholder="Material"
                         v-model="selectedMaterialTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedMaterialTag.id)"
-                        :disabled="!selectedMaterialTag"
-                    >
-                        Add Material
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.brand"
+                        :nullable="true"
+                        placeholder="Brand"
                         v-model="selectedBrandTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedBrandTag.id)"
-                        :disabled="!selectedBrandTag"
-                    >
-                        Add Brand
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.content"
+                        :nullable="true"
+                        placeholder="Content"
                         v-model="selectedContentTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedContentTag.id)"
-                        :disabled="!selectedContentTag"
-                    >
-                        Add Content
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.size"
+                        :nullable="true"
+                        placeholder="Size"
                         v-model="selectedSizeTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedSizeTag.id)"
-                        :disabled="!selectedSizeTag"
-                    >
-                        Add Size
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.state"
+                        :nullable="true"
+                        placeholder="State"
                         v-model="selectedStateTag"
+                        @change="addTagsToItem"
                     ></TagBox>
 
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedStateTag.id)"
-                        :disabled="!selectedStateTag"
-                    >
-                        Add State
-                    </PrimaryButton>
-                </div>
-
-                <div class="mt-2 flex flex-row justify-between space-x-2">
                     <TagBox
-                        class="w-full lg:w-48"
                         :items="tags.event"
+                        :nullable="true"
+                        placeholder="Event"
                         v-model="selectedEventTag"
+                        @change="addTagsToItem"
                     ></TagBox>
-
-                    <PrimaryButton
-                        class="whitespace-nowrap"
-                        @click="$emit('add-tag-to-item', item.pivot, selectedEventTag.id)"
-                        :disabled="!selectedEventTag"
-                    >
-                        Add Event
-                    </PrimaryButton>
                 </div>
 
-                <div class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
+                <div v-if="item.pivot.tags?.length" class="mt-4 text-sm text-gray-500 flex flex-wrap gap-1">
                     <span
                         v-for="tag in item.pivot.tags"
                         :key="tag.id"
@@ -143,6 +131,15 @@ const selectedSizeTag = ref(props.tags.size[0]);
                         {{ tag.name }}
                     </span>
                 </div>
+
+                <div v-if="selectedTagIds.length" class="mt-4 flex justify-center">
+                    <PrimaryButton
+                        class="whitespace-nowrap"
+                        @click="addTagsToItem"
+                    >
+                        Add Selected Tags
+                    </PrimaryButton>
+                </div>
             </div>
         </div>
         <div class="px-4 py-5 sm:p-6 flex flex-row justify-between">
diff --git a/resources/js/Pages/Photos/Show.vue b/resources/js/Pages/Photos/Show.vue
index 343b6687..f41092b7 100644
--- a/resources/js/Pages/Photos/Show.vue
+++ b/resources/js/Pages/Photos/Show.vue
@@ -70,9 +70,9 @@ const copyItem = (photoItemId) => {
         });
 };
 
-const addTagToItem = (photoItem, tagId) => {
+const addTagsToItem = (photoItem, tagIds) => {
     axios.post(`/photo-items/${photoItem.id}/tags`, {
-        tag_id: tagId,
+        tag_ids: tagIds,
     }).then(() => {
         getPhoto();
     });
@@ -206,7 +206,7 @@ const onKeyDown = (event) => {
                                         :item="item"
                                         :tags="tags"
                                         @remove-item="removeItem"
-                                        @add-tag-to-item="addTagToItem"
+                                        @add-tags-to-item="addTagsToItem"
                                         @remove-tag-from-item="removeTagFromItem"
                                         @copy-item="copyItem"
                                         @toggle-picked-up="toggleItemPickedUp"
diff --git a/tests/Feature/Tagging/AddTagToPhotoItemTest.php b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
index 8dec8508..d8afc5e3 100644
--- a/tests/Feature/Tagging/AddTagToPhotoItemTest.php
+++ b/tests/Feature/Tagging/AddTagToPhotoItemTest.php
@@ -6,22 +6,27 @@
 use App\Models\Tag;
 use App\Models\User;
 
-test('a user can add a tag to an item of a photo', function () {
+test('a user can add tags to an item of a photo', function () {
     $user = User::factory()->create();
     $photo = Photo::factory()->for($user)->create();
     $item = Item::factory()->create();
     $photoItem = PhotoItem::factory()->for($item)->for($photo)->create();
-    $tag = Tag::factory()->create();
+    $tagA = Tag::factory()->create();
+    $tagB = Tag::factory()->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => $tag->id,
+        'tag_ids' => [$tagA->id, $tagB->id],
     ]);
 
     $response->assertOk();
-    $this->assertDatabaseCount('photo_item_tag', 1);
+    $this->assertDatabaseCount('photo_item_tag', 2);
+    $this->assertDatabaseHas('photo_item_tag', [
+        'photo_item_id' => $photoItem->id,
+        'tag_id' => $tagA->id,
+    ]);
     $this->assertDatabaseHas('photo_item_tag', [
         'photo_item_id' => $photoItem->id,
-        'tag_id' => $tag->id,
+        'tag_id' => $tagB->id,
     ]);
 });
 
@@ -32,11 +37,11 @@
     $photoItem = PhotoItem::factory()->for($item)->for($photo)->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => '12345',
+        'tag_ids' => ['12345'],
     ]);
 
     $response->assertStatus(422);
-    $response->assertJsonValidationErrors('tag_id');
+    $response->assertJsonValidationErrors('tag_ids.0');
     $this->assertDatabaseCount('photo_item_tag', 0);
 });
 
@@ -48,7 +53,7 @@
     $tag = Tag::factory()->create();
 
     $response = $this->actingAs($user)->postJson("/photo-items/{$photoItem->id}/tags", [
-        'tag_id' => $tag->id,
+        'tag_ids' => [$tag->id],
     ]);
 
     $response->assertNotFound();