diff --git a/README.md b/README.md
index d7276a48..a7da683e 100644
--- a/README.md
+++ b/README.md
@@ -184,6 +184,8 @@ Xdebug is pre-configured in the Sail Docker environment for local debugging.
 
 ## Deployment
 
+We use Ansible with a `deploy.yaml` script, along with the inventory `production.ini`
+
 `ansible-playbook -i ./ansible/inventory/production.ini deploy.yml`
 
 ## License
diff --git a/resources/js/Components/Form/TagSelector.vue b/resources/js/Components/Form/TagSelector.vue
index 01fc95f3..339a6e90 100644
--- a/resources/js/Components/Form/TagSelector.vue
+++ b/resources/js/Components/Form/TagSelector.vue
@@ -5,6 +5,7 @@ import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue"
 import { defineModel } from "vue";
 import axios from "axios";
 import { Icon } from "@iconify/vue";
+import Tag from "@/Components/Tag.vue";
 
 const DEBOUNCE_TIME = 450; // milliseconds
 
@@ -13,6 +14,15 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    mode: {
+        type: String,
+        default: 'create', // 'create' or 'search'
+        validator: (value) => ['create', 'search'].includes(value),
+    },
+    allowEverything: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const model = defineModel();
@@ -90,6 +100,9 @@ const availableTags = computed(() => {
 });
 
 const canCreateNew = computed(() => {
+    // In search mode, cannot create new tags
+    if (props.mode === 'search') return false;
+
     const query = searchQuery.value.trim();
     if (!query || isLoading.value) return false;
 
@@ -102,6 +115,20 @@ const canCreateNew = computed(() => {
     );
 });
 
+const tooltipText = computed(() => {
+    const parts = [];
+    
+    if (props.mode === 'create') {
+        parts.push("Add multiple tags using commas");
+    }
+    
+    if (props.allowEverything) {
+        parts.push("'everything' tag covers all possible tags");
+    }
+    
+    return parts.join('. ');
+});
+
 // sync model
 watch(
     () => model.value,
@@ -176,7 +203,8 @@ function onKeydown(event) {
             canCreateNew.value
         ) {
             selectTag(searchQuery.value.trim());
-        } else if (searchQuery.value.trim()) {
+        } else if (props.mode === 'create' && searchQuery.value.trim()) {
+            // Only allow adding tags in create mode
             // Handle comma-separated tags
             if (searchQuery.value.includes(',')) {
                 addMultipleTags(searchQuery.value);
@@ -258,20 +286,15 @@ onMounted(async () => {
     <div class="mb-2">
         <!-- list of selected tags -->
         <div class="mb-2 flex flex-wrap" v-if="selectedTags.length > 0">
-            <span
+            <Tag
                 v-for="tag in selectedTags"
                 :key="tag"
-                class="inline-flex items-center mr-2 my-1 bg-secondary text-primaryDark  dark:bg-gray-700 dark:text-white px-3 py-1 rounded-full text-sm font-medium transition-colors"
-            >
-                <button
-                    @click="removeTag(tag)"
-                    class="mr-2 text-primaryDark dark:text-white"
-                    type="button"
-                >
-                    <Icon :icon="'mdi:close'" />
-                </button>
-                <span>{{ tag }}</span>
-            </span>
+                :tag="tag"
+                variant="selected"
+                removable
+                @remove="removeTag"
+                class="mr-2 my-1"
+            />
         </div>
 
         <!-- search input container -->
@@ -289,13 +312,14 @@ onMounted(async () => {
                     :class="{
                         'rounded-b-none border-b-0':
                             showDropdown &&
-                            (availableTags.length > 0 || canCreateNew || isLoading),
+                            (availableTags.length > 0 || canCreateNew || isLoading || searchQuery.trim()),
                     }"
                 />
                 <Icon
+                    v-if="tooltipText"
                     icon="mdi:information-outline"
                     class="absolute right-3 size-5 text-gray-400 dark:text-gray-500 cursor-help"
-                    v-tooltip.top="'You can add multiple tags at once by separating them with commas (e.g., tag1, tag2, tag3)'"
+                    v-tooltip.top="tooltipText"
                 />
             </div>
 
@@ -304,7 +328,7 @@ onMounted(async () => {
                 <div
                     v-show="
                         showDropdown &&
-                        (availableTags.length > 0 || canCreateNew || isLoading)
+                        (availableTags.length > 0 || canCreateNew || isLoading || searchQuery.trim())
                     "
                     class="z-[9999] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 border-t-0 rounded-b-lg shadow-lg max-h-60 overflow-y-auto"
                     :style="dropdownStyles"
@@ -325,6 +349,20 @@ onMounted(async () => {
 
                     <!-- available tags -->
                     <template v-else>
+                        <!-- No results message -->
+                        <div
+                            v-if="availableTags.length === 0 && !canCreateNew"
+                            class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 text-center"
+                        >
+                            <Icon icon="mdi:information-outline" class="inline-block w-4 h-4 mr-1" />
+                            <span v-if="searchQuery.trim()">
+                                No tags found matching "{{ searchQuery.trim() }}"
+                            </span>
+                            <span v-else-if="props.mode === 'search'">
+                                No tags available
+                            </span>
+                        </div>
+
                         <div
                             v-for="(tag, index) in availableTags"
                             :key="tag.name"
@@ -334,18 +372,15 @@ onMounted(async () => {
                             :class="{
                                 'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight': highlightedIndex === index,
                                 'hover:bg-gray-50 dark:hover:bg-gray-900': highlightedIndex !== index,
+                                'bg-orange-50 dark:bg-orange-900/20 border-l-2 border-orange-400': tag.name === 'everything' && highlightedIndex !== index,
+                                'bg-orange-100 dark:bg-orange-900/30 border-l-2 border-orange-500': tag.name === 'everything' && highlightedIndex === index,
                             }"
                         >
-                            <span class="text-sm">{{ tag.name }}</span>
-                            <span
-                                v-if="tag.count"
-                                class="text-xs bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300 px-2 py-1 rounded-full"
-                                :class="{
-                                    'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight': highlightedIndex === index,
-                                }"
-                            >
-                                {{ tag.count }}
-                            </span>
+                            <Tag
+                                :tag="tag.name"
+                                :variant="highlightedIndex === index ? 'highlighted' : 'default'"
+                                :count="tag.count || null"
+                            />
                         </div>
 
                         <!-- create new tag option -->
diff --git a/resources/js/Components/Resources/FilterBar.vue b/resources/js/Components/Resources/FilterBar.vue
index 7ce987d6..64d819a3 100644
--- a/resources/js/Components/Resources/FilterBar.vue
+++ b/resources/js/Components/Resources/FilterBar.vue
@@ -321,6 +321,7 @@ function resetFilters() {
                 </label>
                 <TagSelector
                     :tag-type="'topics_tags'"
+                    :mode="'search'"
                     v-model="selectedTopics"
                     class="w-full"
                 />
@@ -334,6 +335,7 @@ function resetFilters() {
                 </label>
                 <TagSelector
                     :tag-type="'programming_languages_tags'"
+                    :mode="'search'"
                     v-model="selectedProgrammingLanguages"
                     class="w-full"
                 />
@@ -347,6 +349,7 @@ function resetFilters() {
                 </label>
                 <TagSelector
                     :tag-type="'general_tags'"
+                    :mode="'search'"
                     v-model="selectedGeneralTags"
                     class="w-full"
                 />
diff --git a/resources/js/Components/Resources/ResourceCard.vue b/resources/js/Components/Resources/ResourceCard.vue
index b5fdc02c..93fd9e91 100644
--- a/resources/js/Components/Resources/ResourceCard.vue
+++ b/resources/js/Components/Resources/ResourceCard.vue
@@ -11,6 +11,7 @@ import {
 import { platformIcons, pricingIcons, difficultyIcons } from "@/Helpers/icons";
 import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
 import StarRating from "@/Components/StarRating/StarRating.vue";
+import Tag from "@/Components/Tag.vue";
 
 const props = defineProps({
     resource: {
@@ -90,21 +91,16 @@ const emit = defineEmits(["upvote", "downvote"]);
                     <div class="flex items-center gap-3 flex-wrap">
                         <!-- Top topics -->
                         <div class="flex items-center gap-1">
-                            <span
+                            <Tag
                                 v-for="topic in resource.topics_tags?.slice(
                                     0,
                                     4
                                 )"
                                 :key="topic"
-                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"                            >
-                                <Icon
-                                    icon="mdi:lightbulb-outline"
-                                    width="12"
-                                    height="12"
-                                    class="mr-1"
-                                />
-                                {{ topic }}
-                            </span>
+                                :tag="topic"
+                                icon="mdi:lightbulb-outline"
+                                :icon-size="12"
+                            />
                         </div>
 
                         <!-- Difficulty -->
@@ -112,33 +108,21 @@ const emit = defineEmits(["upvote", "downvote"]);
                             v-if="resource.difficulties?.length"
                             class="flex items-center gap-1"
                         >
-                            <span
+                            <Tag
                                 v-for="difficulty in resource.difficulties"
                                 :key="difficulty"
-                                class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-transparent text-primaryDark border border-primary/20"
-                            >
-                                <Icon
-                                    :icon="difficultyIcons[difficulty]"
-                                    width="12"
-                                    height="12"
-                                    class="mr-1"
-                                />
-                                {{ difficultyLabels[difficulty] }}
-                            </span>
+                                :tag="difficultyLabels[difficulty]"
+                                :icon="difficultyIcons[difficulty]"
+                                :icon-size="12"
+                            />
                         </div>
 
                         <!-- Pricing -->
-                        <span
-                            class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-transparent text-primaryDark border border-primary/20"
-                        >
-                            <Icon
-                                :icon="pricingIcons[resource.pricing]"
-                                width="12"
-                                height="12"
-                                class="mr-1"
-                            />
-                            {{ pricingLabels[resource.pricing] }}
-                        </span>
+                        <Tag
+                            :tag="pricingLabels[resource.pricing]"
+                            :icon="pricingIcons[resource.pricing]"
+                            :icon-size="12"
+                        />
                     </div>
                 </div>
 
@@ -162,19 +146,12 @@ const emit = defineEmits(["upvote", "downvote"]);
 
                 <!-- Secondary info row -->
                 <div class="flex items-center gap-1">
-                    <span
+                    <Tag
                         v-for="platform in resource.platforms.slice(0, 2)"
                         :key="platform"
-                        class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                    >
-                        <Icon
-                            :icon="platformIcons[platform]"
-                            width="10"
-                            height="10"
-                            class="mr-1"
-                        />
-                        {{ platformLabels[platform] }}
-                    </span>
+                        :tag="platformLabels[platform]"
+                        :icon="platformIcons[platform]"
+                    />
                     <!-- Rest as comma-separated text -->
                     <span
                         v-if="
diff --git a/resources/js/Components/Resources/ResourceOverview.vue b/resources/js/Components/Resources/ResourceOverview.vue
index 13ae0aa0..48cb5f16 100644
--- a/resources/js/Components/Resources/ResourceOverview.vue
+++ b/resources/js/Components/Resources/ResourceOverview.vue
@@ -9,6 +9,8 @@ import {
     difficultyLabels,
 } from "@/Helpers/labels";
 import StarRating from "@/Components/StarRating/StarRating.vue";
+import Tag from "@/Components/Tag.vue";
+import TagList from "@/Components/TagList.vue";
 
 const props = defineProps({
     resource: {
@@ -83,25 +85,11 @@ const props = defineProps({
                         class="space-y-2 rounded-md p-3 border border-gray-200 dark:border-gray-700"
                     >
                         <!-- Topics -->
-                        <div class="flex items-center gap-1.5 flex-wrap">
-                            <Icon
-                                icon="mdi:lightbulb-outline"
-                                width="12"
-                                height="12"
-                                class="text-gray-500 dark:text-gray-100"
-                            />
-                            <span
-                                class="text-xs font-semibold text-gray-600 dark:text-gray-100"
-                                >Topics:</span
-                            >
-                            <span
-                                v-for="topic in props.resource.topics_tags"
-                                :key="topic"
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                {{ topic }}
-                            </span>
-                        </div>
+                        <TagList
+                            :tags="props.resource.topics_tags"
+                            label="Topics:"
+                            label-icon="mdi:lightbulb-outline"
+                        />
 
                         <!-- Difficulty -->
                         <div
@@ -122,19 +110,12 @@ const props = defineProps({
                                 class="text-xs font-semibold text-gray-600 dark:text-gray-100"
                                 >Difficulty:</span
                             >
-                            <span
+                            <Tag
                                 v-for="difficulty in props.resource.difficulties"
                                 :key="difficulty"
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                <Icon
-                                    :icon="difficultyIcons[difficulty]"
-                                    width="10"
-                                    height="10"
-                                    class="mr-1"
-                                />
-                                {{ difficultyLabels[difficulty] }}
-                            </span>
+                                :tag="difficultyLabels[difficulty]"
+                                :icon="difficultyIcons[difficulty]"
+                            />
                         </div>
 
                         <!-- Pricing -->
@@ -149,17 +130,10 @@ const props = defineProps({
                                 class="text-xs font-semibold text-gray-600 dark:text-gray-100"
                                 >Pricing:</span
                             >
-                            <span
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                <Icon
-                                    :icon="pricingIcons[props.resource.pricing]"
-                                    width="10"
-                                    height="10"
-                                    class="mr-1"
-                                />
-                                {{ pricingLabels[props.resource.pricing] }}
-                            </span>
+                            <Tag
+                                :tag="pricingLabels[props.resource.pricing]"
+                                :icon="pricingIcons[props.resource.pricing]"
+                            />
                         </div>
                     </div>
 
@@ -179,71 +153,32 @@ const props = defineProps({
                                 class="text-xs font-semibold text-gray-600 dark:text-gray-100"
                                 >Platforms:</span
                             >
-                            <span
+                            <Tag
                                 v-for="platform in props.resource.platforms"
                                 :key="platform"
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                <Icon
-                                    :icon="platformIcons[platform]"
-                                    width="10"
-                                    height="10"
-                                    class="mr-1"
-                                />
-                                {{ platformLabels[platform] }}
-                            </span>
+                                :tag="platformLabels[platform]"
+                                :icon="platformIcons[platform]"
+                            />
                         </div>
 
                         <!-- Languages -->
-                        <div
+                        <TagList
                             v-if="
                                 props.resource.programming_languages_tags
                                     ?.length
                             "
-                            class="flex items-center gap-1.5 flex-wrap"
-                        >
-                            <Icon
-                                icon="mdi:code-tags"
-                                width="12"
-                                height="12"
-                                class="text-gray-500 dark:text-gray-100"
-                            />
-                            <span
-                                class="text-xs font-semibold text-gray-600 dark:text-gray-100"
-                                >Languages:</span
-                            >
-                            <span
-                                v-for="language in props.resource.programming_languages_tags"
-                                :key="language"
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                {{ language }}
-                            </span>
-                        </div>
+                            :tags="props.resource.programming_languages_tags"
+                            label="Languages:"
+                            label-icon="mdi:code-tags"
+                        />
 
                         <!-- Tags -->
-                        <div
+                        <TagList
                             v-if="props.resource.general_tags?.length"
-                            class="flex items-center gap-1.5 flex-wrap"
-                        >
-                            <Icon
-                                icon="mdi:label-outline"
-                                width="12"
-                                height="12"
-                                class="text-gray-500 dark:text-gray-100"
-                            />
-                            <span
-                                class="text-xs font-semibold text-gray-600 dark:text-gray-100"
-                                >Tags:</span
-                            >
-                            <span
-                                v-for="tag in props.resource.general_tags"
-                                :key="tag"
-                                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent"
-                            >
-                                {{ tag }}
-                            </span>
-                        </div>
+                            :tags="props.resource.general_tags"
+                            label="Tags:"
+                            label-icon="mdi:label-outline"
+                        />
                     </div>
                 </div>
 
diff --git a/resources/js/Components/Tag.vue b/resources/js/Components/Tag.vue
new file mode 100644
index 00000000..b4401af3
--- /dev/null
+++ b/resources/js/Components/Tag.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { computed } from "vue";
+
+const props = defineProps({
+    tag: {
+        type: String,
+        required: true,
+    },
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'selected', 'highlighted'].includes(value),
+    },
+    icon: {
+        type: String,
+        default: null,
+    },
+    iconSize: {
+        type: [String, Number],
+        default: 10,
+    },
+    removable: {
+        type: Boolean,
+        default: false,
+    },
+    count: {
+        type: [Number, String],
+        default: null,
+    },
+});
+
+const emit = defineEmits(['remove']);
+
+const isEverything = computed(() => props.tag === 'everything');
+
+const tagClasses = computed(() => {
+    const base = 'inline-flex items-center rounded-full text-xs font-medium transition-colors';
+
+    if (isEverything.value) {
+        // "everything" tag always gets bold, border-2, and orange colors
+        if (props.variant === 'highlighted') {
+            return `${base} px-2.5 py-0.5 font-bold bg-orange-100 text-orange-700 border-2 border-orange-500 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-500`;
+        } else if (props.variant === 'selected') {
+            return `${base} px-3 py-1 font-bold bg-orange-100 text-orange-700 border-2 border-orange-300 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-700`;
+        } else {
+            return `${base} px-2 py-0.5 font-bold bg-orange-50 text-orange-700 border-2 border-orange-200 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-600`;
+        }
+    }
+
+    // Regular tags
+    if (props.variant === 'selected') {
+        return `${base} px-3 py-1 bg-secondary text-primaryDark dark:bg-gray-700 dark:text-white`;
+    } else if (props.variant === 'highlighted') {
+        return `${base} px-2 py-0.5 bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight`;
+    } else {
+        return `${base} px-2 py-0.5 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-100 bg-transparent`;
+    }
+});
+
+const iconClasses = computed(() => {
+    if (isEverything.value) {
+        return 'text-orange-700 dark:text-orange-300';
+    }
+    return props.variant === 'selected' ? 'text-primaryDark dark:text-white' : '';
+});
+
+const countClasses = computed(() => {
+    if (isEverything.value) {
+        // Orange theme for "everything" tag count
+        if (props.variant === 'highlighted' || props.variant === 'selected') {
+            return 'bg-orange-200 text-orange-800 dark:bg-orange-800 dark:text-orange-200';
+        } else {
+            return 'bg-orange-200 text-orange-700 dark:bg-orange-800 dark:text-orange-300';
+        }
+    }
+    
+    // Default gray theme for regular tags
+    if (props.variant === 'highlighted') {
+        return 'bg-secondary text-primaryDark dark:bg-gray-800 dark:text-primaryLight';
+    } else if (props.variant === 'selected') {
+        return 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300';
+    } else {
+        return 'bg-gray-100 text-gray-600 dark:bg-gray-900 dark:text-gray-300';
+    }
+});
+</script>
+
+<template>
+    <span :class="tagClasses">
+        <button
+            v-if="removable"
+            @click="emit('remove', tag)"
+            class="mr-2"
+            :class="iconClasses"
+            type="button"
+        >
+            <Icon icon="mdi:close" />
+        </button>
+        <Icon
+            v-if="icon"
+            :icon="icon"
+            :width="iconSize"
+            :height="iconSize"
+            class="mr-1"
+            :class="iconClasses"
+        />
+        <span>{{ tag }}</span>
+        <span
+            v-if="count !== null"
+            class="ml-1.5 text-xs px-2 py-1 rounded-full"
+            :class="countClasses"
+        >
+            {{ count }}
+        </span>
+    </span>
+</template>
diff --git a/resources/js/Components/TagList.vue b/resources/js/Components/TagList.vue
new file mode 100644
index 00000000..97843932
--- /dev/null
+++ b/resources/js/Components/TagList.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import Tag from "@/Components/Tag.vue";
+
+const props = defineProps({
+    tags: {
+        type: Array,
+        required: true,
+    },
+    label: {
+        type: String,
+        default: null,
+    },
+    labelIcon: {
+        type: String,
+        default: null,
+    },
+    tagIcon: {
+        type: String,
+        default: null,
+    },
+    tagIconSize: {
+        type: [String, Number],
+        default: 10,
+    },
+    variant: {
+        type: String,
+        default: 'default',
+    },
+    maxVisible: {
+        type: Number,
+        default: null,
+    },
+});
+
+const visibleTags = props.maxVisible ? props.tags.slice(0, props.maxVisible) : props.tags;
+</script>
+
+<template>
+    <div v-if="tags.length > 0" class="flex items-center gap-1.5 flex-wrap">
+        <Icon
+            v-if="labelIcon"
+            :icon="labelIcon"
+            width="12"
+            height="12"
+            class="text-gray-500 dark:text-gray-100"
+        />
+        <span
+            v-if="label"
+            class="text-xs font-semibold text-gray-600 dark:text-gray-100"
+        >
+            {{ label }}
+        </span>
+        <Tag
+            v-for="tag in visibleTags"
+            :key="tag"
+            :tag="tag"
+            :variant="variant"
+            :icon="tagIcon"
+            :icon-size="tagIconSize"
+        />
+    </div>
+</template>
diff --git a/resources/js/Pages/ResourceEdits/Create.vue b/resources/js/Pages/ResourceEdits/Create.vue
index 3d57d4e9..d8a9ffdb 100644
--- a/resources/js/Pages/ResourceEdits/Create.vue
+++ b/resources/js/Pages/ResourceEdits/Create.vue
@@ -455,6 +455,7 @@ const submit = async () => {
                                 <InputLabel value="Topic Tags" />
                                 <TagSelector
                                     :tag-type="'topics_tags'"
+                                    :mode="'create'"
                                     v-model="
                                         formData.proposed_changes.topics_tags
                                     "
@@ -479,6 +480,7 @@ const submit = async () => {
                                 <InputLabel value="Programming Languages/Frameworks" />
                                 <TagSelector
                                     :tag-type="'programming_languages_tags'"
+                                    :mode="'create'"
                                     v-model="
                                         formData.proposed_changes
                                             .programming_languages_tags
@@ -506,6 +508,8 @@ const submit = async () => {
                                 <InputLabel value="General Tags" />
                                 <TagSelector
                                     :tag-type="'general_tags'"
+                                    :mode="'create'"
+                                    :allow-everything="false"
                                     v-model="
                                         formData.proposed_changes.general_tags
                                     "
diff --git a/resources/js/Pages/Resources/Form/TagsFields.vue b/resources/js/Pages/Resources/Form/TagsFields.vue
index 17b85ffe..7e0e1e07 100644
--- a/resources/js/Pages/Resources/Form/TagsFields.vue
+++ b/resources/js/Pages/Resources/Form/TagsFields.vue
@@ -8,7 +8,7 @@ import PrimeVueFormError from "@/Components/Form/PrimeVueFormError.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
 import { Icon } from "@iconify/vue";
-import ConfirmationModal from '@/Components/ConfirmationModal.vue';
+import ConfirmationModal from "@/Components/ConfirmationModal.vue";
 
 const props = defineProps({
     form: {
@@ -18,7 +18,7 @@ const props = defineProps({
     isLoading: {
         type: Boolean,
         required: true,
-    }
+    },
 });
 
 const emit = defineEmits(["change", "next", "back"]);
@@ -60,7 +60,7 @@ const validateAndNext = async () => {
         :initialValues="props.form"
         class="flex flex-col gap-4 w-full bg-white dark:bg-gray-900 border border-transparent dark:border-gray-800 rounded-lg p-4"
     >
-    <div class="flex flex-col gap-1 justify-center items-center">
+        <div class="flex flex-col gap-1 justify-center items-center">
             <div class="self-end">
                 <button
                     type="button"
@@ -74,80 +74,123 @@ const validateAndNext = async () => {
             </div>
             <!-- TODO: MAKE THIS A COMPONENT -->
             <!-- Tag Selector for topics -->
-            <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100">
+            <h2
+                class="text-2xl font-bold text-center text-gray-900 dark:text-gray-100"
+            >
                 What's this resource about?
                 <span class="text-red-500"> * </span>
             </h2>
             <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">
-                software-engineering, career-consulting, data-science
+                software-engineering, career-consulting, data-science, everything
             </p>
             <TagSelector
                 :tag-type="'topics_tags'"
+                :mode="'create'"
                 v-model="props.form.topics_tags"
             ></TagSelector>
             <PrimeVueFormError :errors="errors" />
 
             <!-- Tag Selector for Programming Languages -->
-            <h2 class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100">
+            <h2
+                class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100"
+            >
                 Programming Languages/Frameworks taught (if any)?
             </h2>
-            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">python, c++, c#, vue.js, pytorch</p>
+            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">
+                python, c++, c#, vue.js, pytorch, everything
+            </p>
             <TagSelector
                 :tag-type="'programming_languages_tags'"
+                :mode="'create'"
                 v-model="props.form.programming_languages_tags"
             />
 
             <!-- Tag Selector for Other tags -->
-            <h2 class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100">
+            <h2
+                class="text-2xl font-bold mt-5 mb-1 text-center text-gray-900 dark:text-gray-100"
+            >
                 Additional general tags
             </h2>
-            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">non-profit, open-source, funny</p>
+            <p class="text-center italic mb-2 text-gray-600 dark:text-gray-300">
+                non-profit, open-source, funny
+            </p>
             <TagSelector
                 :tag-type="'general_tags'"
+                :mode="'create'"
+                :allow-everything="false"
                 v-model="props.form.general_tags"
             />
         </div>
 
         <ConfirmationModal :show="showTagsHelp" @close="showTagsHelp = false">
-            <template #title>
-                How to choose good tags
-            </template>
+            <template #title> How to choose good tags </template>
             <template #content>
                 <div class="space-y-4 text-sm">
                     <div>
-                        <div class="font-semibold mb-1">Topic tags (required)</div>
+                        <div class="font-semibold mb-1">
+                            Topic tags (required)
+                        </div>
                         <p class="text-gray-700 dark:text-gray-300">
-                            Use broad, descriptive categories that capture what the resource is mainly about.
-                            Avoid super niche labels here.
+                            Use broad, descriptive categories that capture what
+                            the resource is mainly about. Avoid super niche
+                            labels here.
                         </p>
-                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
-                            <li>Examples: software-engineering, data-science, devops, algorithms, system-design, career</li>
+                        <ul
+                            class="list-disc pl-5 text-gray-700 dark:text-gray-300"
+                        >
+                            <li>
+                                Examples: software-engineering, data-science,
+                                devops, algorithms, system-design, career
+                            </li>
+                            <li>
+                                If it covers too many topics to list (e.g.
+                                codecademy), add <b>'everything'</b>
+                            </li>
                         </ul>
                     </div>
                     <div>
-                        <div class="font-semibold mb-1">Programming languages/frameworks</div>
+                        <div class="font-semibold mb-1">
+                            Programming languages/frameworks
+                        </div>
                         <p class="text-gray-700 dark:text-gray-300">
-                            Be specific and only include languages or frameworks the resource actively teaches or uses.
-                            Please <b>don’t type "everything"</b> as a tag.
+                            Be specific and only include languages or frameworks
+                            the resource actively teaches or uses. If it covers
+                            too many languages and frameworks to list (e.g.
+                            codecademy), add <b>'everything'</b>
                         </p>
-                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
+                        <ul
+                            class="list-disc pl-5 text-gray-700 dark:text-gray-300"
+                        >
                             <li>Good: python, c++, c#, vue.js, pytorch</li>
-                            <li>Avoid: "all-languages" or adding many unrelated ones</li>
+                            <li>
+                                In case there are too many: <b>'everything'</b>
+                            </li>
                         </ul>
                     </div>
                     <div>
                         <div class="font-semibold mb-1">Other/general tags</div>
                         <p class="text-gray-700 dark:text-gray-300">
-                            Everything else that helps discovery: tone, format, credentials, audience, etc.
+                            Everything else that helps discovery: tone, format,
+                            credentials, audience, etc.
                         </p>
-                        <ul class="list-disc pl-5 text-gray-700 dark:text-gray-300">
-                            <li>Examples: humour, certifications, non-profit, open-source, interview-prep</li>
+                        <ul
+                            class="list-disc pl-5 text-gray-700 dark:text-gray-300"
+                        >
+                            <li>
+                                Examples: humour, certifications, non-profit,
+                                open-source, interview-prep
+                            </li>
                         </ul>
                     </div>
                 </div>
             </template>
             <template #footer>
-                <button @click="showTagsHelp = false" class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition">Close</button>
+                <button
+                    @click="showTagsHelp = false"
+                    class="px-4 py-2 bg-primary text-white rounded hover:bg-primaryDark transition"
+                >
+                    Close
+                </button>
             </template>
         </ConfirmationModal>