diff --git a/frontend/components/combobox/ComboboxTopics.vue b/frontend/components/combobox/ComboboxTopics.vue
new file mode 100644
index 000000000..62d902628
--- /dev/null
+++ b/frontend/components/combobox/ComboboxTopics.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="flex z-50">
+    <Combobox v-model="selectedTopic">
+      <div class="relative">
+        <div
+          class="flex relative w-full cursor-default overflow-hidden rounded-lg shadow-sm shadow-zinc-700 focus-brand"
+        >
+          <ComboboxInput
+            @change="query = $event.target.value"
+            class="w-full border border-light-text dark:border-dark-cta-orange bg-light-cta-orange dark:bg-dark-cta-orange/20 text-light-text dark:text-light-cta-orange py-2 pl-4 rounded-lg"
+            :displayValue="(_) => selectedTopic.name"
+          />
+          <ComboboxButton
+            class="absolute inset-y-0 right-0 flex items-center pr-2 text-light-text dark:text-dark-cta-orange"
+          >
+            <Icon name="bi:chevron-expand" />
+          </ComboboxButton>
+        </div>
+        <TransitionRoot
+          @after-leave="query = ''"
+          leave="transition ease-in duration-100"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <ComboboxOptions
+            class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-light-distinct dark:bg-dark-distinct py-1 text-base shadow-lg shadow-zinc-700 ring-1 ring-black/5 focus:outline-none sm:text-sm"
+          >
+            <div
+              v-if="filteredTopics.length === 0 && query !== ''"
+              class="relative cursor-default select-none px-4 py-2 text-light-special-text dark:text-dark-special-text"
+            >
+              {{ $t("components.combobox-topics.no-matching-topics") }}
+            </div>
+
+            <ComboboxOption
+              v-for="topic in filteredTopics"
+              v-slot="{ selected, active }"
+              :key="topic.id"
+              as="template"
+              :value="topic"
+            >
+              <li
+                class="relative cursor-default select-none py-2 pl-10 pr-4"
+                :class="{
+                  'bg-light-cta-orange/80 text-light-text dark:bg-dark-cta-orange/40 dark:text-dark-cta-orange':
+                    active,
+                  'text-light-text dark:text-dark-text': !active,
+                }"
+              >
+                <span class="block truncate">
+                  {{ topic.name }}
+                </span>
+                <span
+                  v-if="selected"
+                  class="absolute inset-y-0 left-0 flex items-center pl-3"
+                  :class="{
+                    'text-light-text dark:text-dark-cta-orange': active,
+                    'text-light-cta-orange dark:text-dark-cta-orange': !active,
+                  }"
+                >
+                  <Icon name="bi:check-lg" />
+                </span>
+              </li>
+            </ComboboxOption>
+          </ComboboxOptions>
+        </TransitionRoot>
+      </div>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  Combobox,
+  ComboboxButton,
+  ComboboxInput,
+  ComboboxOption,
+  ComboboxOptions,
+  TransitionRoot,
+} from "@headlessui/vue";
+import { computed, ref } from "vue";
+
+const topics = [
+  { id: 1, name: "Filter for all topics" },
+  { id: 2, name: "Environment" },
+  { id: 3, name: "Animal rights" },
+  { id: 4, name: "Racial justice" },
+];
+
+const selectedTopic = ref(topics[0]);
+const query = ref("");
+
+const filteredTopics = computed(() =>
+  query.value === ""
+    ? topics
+    : topics.filter((topic) =>
+        topic.name
+          .toLowerCase()
+          .replace(/\s+/g, "")
+          .includes(query.value.toLowerCase().replace(/\s+/g, ""))
+      )
+);
+</script>
diff --git a/frontend/components/dropdown/DropdownTopics.vue b/frontend/components/dropdown/DropdownTopics.vue
deleted file mode 100644
index d92620360..000000000
--- a/frontend/components/dropdown/DropdownTopics.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div @click="toggleDropdown">
-    <div
-      ref="topComponent"
-      class="flex items-center justify-between pl-2 pr-3 border topic-marker w-max h-max bg-light-cta-orange text-light-text border-light-text dark:bg-dark-cta-orange/10 dark:border-dark-cta-orange dark:text-dark-cta-orange hover:bg-light-cta-orange-hover hover:dark:bg-dark-cta-orange/25 hover:cursor-pointer active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10 shadow-sm shadow-zinc-700"
-      :class="{ 'rounded-lg': isRounded }"
-    >
-      <Icon
-        v-show="hasIcon"
-        class="flex-shrink-0 w-5 h-5 my-1 rounded-full"
-        :name="iconName"
-        size="1em"
-      />
-      <p class="pl-2 text-base font-bold text-center select-none">
-        {{ topic }}
-      </p>
-      <Icon
-        class="ml-2 flex-shrink-0 w-5 h-5 my-1 rounded-full transition ease-in-out duration-500"
-        :class="{ 'rotate-180': showDropdown }"
-        name="bi:chevron-down"
-        size="1em"
-      />
-    </div>
-    <div v-if="showDropdown">
-      <div
-        class="mt-1.5 border bg-light-cta-orange text-light-text border-light-text dark:bg-dark-cta-orange/10 dark:border-dark-cta-orange dark:text-dark-cta-orange active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10 shadow-sm shadow-zinc-700"
-        :class="{ 'rounded-lg': isRounded}"
-        :style="{ width: topComponentWidth + 'px' }"
-      >
-        <ul>
-          <li
-            v-for="(item, index) in items"
-            @click="selectItem(item)"
-            :key="index"
-            class="px-2 py-1 text-center border-light-text dark:border-dark-text hover:bg-light-cta-orange-hover hover:dark:bg-dark-cta-orange/25 hover:cursor-pointer active:bg-light-cta-orange active:dark:bg-dark-cta-orange/10"
-          >
-            {{ item }}
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-const showDropdown = ref(false);
-const topComponent = ref<HTMLElement | null>(null);
-const topComponentWidth = computed(() => topComponent.value?.clientWidth || 0);
-
-const toggleDropdown = () => {
-  showDropdown.value = !showDropdown.value;
-};
-
-const selectItem = (item: string) => {
-  console.log("Item selecionado:", item);
-  showDropdown.value = false;
-};
-
-defineProps<{
-  topic: string;
-  hasIcon?: boolean;
-  iconName?: string;
-  isRounded?: boolean;
-  items: string[];
-}>();
-</script>
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index 638bc52a8..e7c8b607c 100644
--- a/frontend/i18n/en-US.json
+++ b/frontend/i18n/en-US.json
@@ -144,6 +144,7 @@
   "components.card-search-result-resource.img-alt-text": "The resource logo of",
   "components.card-topic-selection.header": "Topics",
   "components.card-topic-selection.selector-placeholder": "Type to filter topics",
+  "components.combobox-topics.no-matching-topics": "No matching topics.",
   "components.feed-item.img-alt-text": "A social media post's image.",
   "components.footer._global.activist-tagline": "Open-source, nonprofit activism platform.",
   "components.footer._global.powered-by-netlify": "This site is powered by Netlify.",
diff --git a/frontend/pages/home/index.vue b/frontend/pages/home/index.vue
index 5b27cc6fa..4894e844f 100644
--- a/frontend/pages/home/index.vue
+++ b/frontend/pages/home/index.vue
@@ -9,9 +9,13 @@
       :header="$t('pages.home.index.header')"
       :tagline="$t('pages.home.index.subheader')"
     >
-      <div class="flex flex-col space-x-3 sm:flex-row">
-        <DropdownTopics :topic="$t('pages.home.index.dropdown-topics')" :hasIcon="true" :items="topicItems" iconName="bi:globe" :isRounded="true"/>
-      </div>
+      <ComboboxTopics
+        :topic="$t('pages.home.index.dropdown-topics')"
+        :hasIcon="true"
+        :items="topicItems"
+        iconName="bi:globe"
+        :isRounded="true"
+      />
     </HeaderAppPage>
     <div class="pt-3 pb-6 space-y-6 md:pt-4">
       <div
@@ -63,12 +67,7 @@ definePageMeta({
   layout: "sidebar",
 });
 
-const topicItems = [
-  "Topic 1",
-  "Topic 2",
-  "Topic 3",
-  "Topic 4"
-]
+const topicItems = ["Topic 1", "Topic 2", "Topic 3", "Topic 4"];
 
 const resource: Resource = {
   name: "Test Resource",