diff --git a/frontend/components/SearchBar.vue b/frontend/components/SearchBar.vue
index f5dfb89f3..f633a5d00 100644
--- a/frontend/components/SearchBar.vue
+++ b/frontend/components/SearchBar.vue
@@ -41,7 +41,7 @@
         >
           <TooltipBase
             class="invisible -mt-8"
-            :text="$t('components.search_bar.slash_tooltip_label')"
+            :text="$t('components._global.slash_tooltip_label')"
           />
           <p class="-mt-[0.075rem]">/</p>
         </div>
@@ -51,7 +51,7 @@
         >
           <TooltipBase
             class="invisible -mt-8"
-            :text="$t('components.search_bar.command_tooltip_label')"
+            :text="$t('components._global.command_tooltip_label')"
           />
           <p>⌘k</p>
         </div>
@@ -61,7 +61,7 @@
         >
           <TooltipBase
             class="invisible -mt-8"
-            :text="$t('components.search_bar.control_tooltip_label')"
+            :text="$t('components._global.control_tooltip_label')"
           />
           <p>⌃k</p>
         </div>
diff --git a/frontend/components/btn/BtnTag.vue b/frontend/components/btn/BtnTag.vue
new file mode 100644
index 000000000..0a7c89211
--- /dev/null
+++ b/frontend/components/btn/BtnTag.vue
@@ -0,0 +1,33 @@
+<template>
+  <button
+    :id="id"
+    class="btn-base-class rounded-md xl:rounded-lg"
+    :class="[
+      btnDynamicClass,
+      !cta && 'style-cta bg-[#C8C8C8] hover:bg-[#C8C8C8]/70',
+      cta && 'style-cta',
+    ]"
+    :aria-label="$t(ariaLabel)"
+  >
+    <BtnIconsLabel
+      :label="label"
+      :hideLabelOnMobile="hideLabelOnMobile"
+      :leftIcon="leftIcon"
+      :rightIcon="rightIcon"
+      :iconSize="iconSize"
+      :counter="counter"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import type { BtnAction } from "~/types/btn-props";
+import { getBtnDynamicClass } from "~/utils/btnUtils";
+
+const props = defineProps<BtnAction>();
+const btnDynamicClass = getBtnDynamicClass(
+  props.cta,
+  props.fontSize,
+  props.isDisabled
+);
+</script>
diff --git a/frontend/components/page/PageFilter.vue b/frontend/components/page/PageFilter.vue
new file mode 100644
index 000000000..86c5660e0
--- /dev/null
+++ b/frontend/components/page/PageFilter.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="card-style flex flex-col px-3 py-4 md:px-5">
+    <div class="relative flex w-full flex-col">
+      <!-- Header with Tabs -->
+      <div class="mb-4 flex items-center justify-between">
+        <h2 class="text-2xl font-semibold">Filter</h2>
+        <div
+          class="inline-flex overflow-hidden rounded-lg border border-primary-text"
+        >
+          <button
+            v-for="(tab, index) in tabs"
+            @click="activeTab = tab.id"
+            :key="tab.id"
+            :class="[
+              'px-4 py-2',
+              activeTab === tab.id
+                ? 'bg-cta-orange text-primary-text'
+                : 'bg-[#C8C8C8] text-primary-text hover:bg-[#C8C8C8]/70',
+              index !== tabs.length - 1 ? 'border-r border-primary-text' : '',
+            ]"
+          >
+            {{ tab.name }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Search Input -->
+      <div
+        class="elem-shadow-sm flex select-none items-center justify-between rounded-md bg-layer-2 py-1 pl-[12px] text-left text-distinct-text transition duration-200 focus-within:mb-[-3px] focus-within:border-2 focus-within:border-link-text"
+      >
+        <div class="flex flex-1 items-center space-x-2 pl-1">
+          <Icon
+            class="my-1 h-4 w-4 flex-shrink-0"
+            :name="IconMap.SEARCH"
+            size="1em"
+          />
+          <div class="min-w-0 flex-1">
+            <label for="input-search" class="sr-only">{{
+              "Search to filter"
+            }}</label>
+            <input
+              v-model="searchQuery"
+              @focus="onFocus"
+              @blur="onFocusLost"
+              ref="input"
+              id="input-search"
+              class="w-full text-ellipsis bg-transparent py-2 outline-none"
+              type="text"
+              placeholder="Search to filter"
+            />
+          </div>
+        </div>
+        <div
+          ref="hotkeyIndicators"
+          class="transition-duration-200 flex flex-shrink-0 space-x-1 pr-1 transition-opacity"
+        >
+          <div
+            class="has-tooltip flex rounded-md bg-highlight px-2 py-[0.125rem] text-center text-sm text-distinct-text"
+          >
+            <TooltipBase
+              class="invisible -mt-8"
+              :text="$t('components._global.slash_tooltip_label')"
+            />
+            <p class="-mt-[0.075rem]">/</p>
+          </div>
+          <div
+            v-if="isMacOS"
+            class="has-tooltip flex rounded-md bg-highlight px-2 py-[0.125rem] text-center text-sm text-distinct-text"
+          >
+            <TooltipBase
+              class="invisible -mt-8"
+              :text="$t('components._global.command_tooltip_label')"
+            />
+            <p>⌘k</p>
+          </div>
+          <div
+            v-else
+            class="has-tooltip flex rounded-md bg-highlight px-2 py-[0.125rem] text-center text-sm text-distinct-text"
+          >
+            <TooltipBase
+              class="invisible -mt-8"
+              :text="$t('components._global.control_tooltip_label')"
+            />
+            <p>⌃k</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tag Sections -->
+      <div
+        v-for="(section, sectionIndex) in sections"
+        :key="sectionIndex"
+        class="mt-4"
+      >
+        <h3 class="mb-3 flex items-center gap-2">
+          <span
+            class="font-redhat flex items-center text-[22px] font-[600] leading-[29.11px]"
+          >
+            {{ section.title }}
+            <Icon
+              v-if="section.icon"
+              :name="section.icon"
+              class="ml-2 h-4 w-4 text-primary-text"
+            />
+          </span>
+        </h3>
+        <!-- <GridFilterTags :tags="['Berlin', 'Activism', 'Eco']" class="mt-3" /> -->
+        <div class="flex flex-wrap gap-2">
+          <BtnTag
+            v-for="tag in section.tags"
+            @click="toggleTag(tag)"
+            @keydown.enter="toggleTag(tag)"
+            :key="tag.id"
+            class="flex max-h-[40px]"
+            :cta="tag.selected"
+            :label="tag.name"
+            fontSize="sm"
+            :ariaLabel="$t(tag.name)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMagicKeys, whenever } from "@vueuse/core";
+import { ref } from "vue";
+import { IconMap } from "~/types/icon-map";
+
+interface Tag {
+  id: number;
+  name: string;
+  selected: boolean;
+}
+
+interface TagSection {
+  title: string;
+  tags: Tag[];
+  icon?: string;
+}
+
+interface Tab {
+  id: string;
+  name: string;
+}
+
+const props = defineProps<{
+  sections: TagSection[];
+  tabs: Tab[];
+}>();
+
+const { isMacOS } = useDevice();
+
+const searchQuery = ref("");
+const input = ref();
+const hotkeyIndicators = ref();
+const isInputFocused = ref(false);
+
+const { slash } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === "/" && e.type === "keydown") e.preventDefault();
+  },
+});
+
+whenever(slash, () => {
+  setTimeout(() => {
+    if (input.value) {
+      input.value.focus();
+    }
+  }, 0);
+});
+
+const onFocus = () => {
+  hotkeyIndicators.value.classList.add("hide");
+  setTimeout(() => {
+    isInputFocused.value = true;
+    hotkeyIndicators.value.classList.add("hidden");
+  }, 200);
+};
+
+const onFocusLost = () => {
+  hotkeyIndicators.value.classList.remove("hidden");
+  isInputFocused.value = false;
+  setTimeout(() => {
+    hotkeyIndicators.value.classList.remove("hide");
+  }, 200);
+};
+
+const emit = defineEmits<{
+  "filter-change": [
+    {
+      search: string;
+      activeTab: string;
+      selectedTags: number[];
+    },
+  ];
+}>();
+
+const toggleTag = (tag: Tag) => {
+  tag.selected = !tag.selected;
+  emitChange();
+};
+
+const emitChange = () => {
+  emit("filter-change", {
+    search: searchQuery.value,
+    activeTab: activeTab.value,
+    selectedTags: props.sections[0].tags
+      .filter((t) => t.selected)
+      .map((t) => t.id),
+  });
+};
+
+watch(searchQuery, () => {
+  emitChange();
+});
+
+const activeTab = ref(props.tabs[0]?.id || "");
+
+watch(activeTab, () => {
+  emitChange();
+});
+</script>
+
+<style scoped>
+.hide {
+  opacity: 0;
+}
+
+.search-enter-active {
+  transition: opacity 0.25s ease;
+  transition-delay: 0.125s;
+}
+
+.search-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.search-enter-from,
+.search-leave-to {
+  opacity: 0;
+}
+
+.search-enter-from {
+  transition-delay: 0.25s;
+}
+
+.shortcuts-enter-active {
+  transition: opacity 0.25s ease;
+  transition-delay: 0.375s;
+}
+
+.shortcuts-leave-active {
+  transition: opacity 0.125s ease;
+}
+
+.shortcuts-enter-from,
+.shortcuts-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/frontend/i18n/de.json b/frontend/i18n/de.json
index 685c109d8..0037ab571 100644
--- a/frontend/i18n/de.json
+++ b/frontend/i18n/de.json
@@ -316,9 +316,9 @@
   "components.page_community_footer.need_help_text_2_1": "Gehen Sie rüber zu",
   "components.page_community_footer.need_help_text_2_3": "wo Sie Fehler melden oder Funktionen anfordern können",
   "components.page_community_footer.visit_our": "Besuchen Sie unsere",
-  "components.search_bar.command_tooltip_label": "Drücken Sie \"⌘ + k\", um zu einer Seite zu springen",
-  "components.search_bar.control_tooltip_label": "Drücken Sie \"⌘ + k\", um zu einer Seite zu springen",
-  "components.search_bar.slash_tooltip_label": "Zum Suchen „/“ drücken",
+  "components._global.command_tooltip_label": "Drücken Sie \"⌘ + k\", um zu einer Seite zu springen",
+  "components._global.control_tooltip_label": "Drücken Sie \"⌘ + k\", um zu einer Seite zu springen",
+  "components._global.slash_tooltip_label": "Zum Suchen „/“ drücken",
   "components.shield_private.private": "Privat",
   "components.sidebar_left.location_search_placeholder": "Nach Ort filtern",
   "components.sidebar_left.orgs_search_placeholder": "Nach Organisationen filtern",
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index a961bdc44..fec73498d 100644
--- a/frontend/i18n/en-US.json
+++ b/frontend/i18n/en-US.json
@@ -317,9 +317,9 @@
   "components.page_community_footer.need_help_text_2_1": "Head over to",
   "components.page_community_footer.need_help_text_2_3": "where you can report bugs or request features",
   "components.page_community_footer.visit_our": "Visit our",
-  "components.search_bar.command_tooltip_label": "Press \"\u2318 + k\" to jump to a page",
-  "components.search_bar.control_tooltip_label": "Press \"^ + k\" to jump to a page",
-  "components.search_bar.slash_tooltip_label": "Press \"/\" to search",
+  "components._global.command_tooltip_label": "Press \"\u2318 + k\" to jump to a page",
+  "components._global.control_tooltip_label": "Press \"^ + k\" to jump to a page",
+  "components._global.slash_tooltip_label": "Press \"/\" to search",
   "components.shield_private.private": "Private",
   "components.sidebar_left.location_search_placeholder": "Filter by location",
   "components.sidebar_left.orgs_search_placeholder": "Filter by orgs",
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
index d46e168f9..5ce3f5f20 100644
--- a/frontend/i18n/fr.json
+++ b/frontend/i18n/fr.json
@@ -317,9 +317,9 @@
   "components.page_community_footer.need_help_text_2_1": "Dirigez-vous vers",
   "components.page_community_footer.need_help_text_2_3": "où vous pourrez signaler des bogues ou demander des fonctionnalités",
   "components.page_community_footer.visit_our": "Visiter notre",
-  "components.search_bar.command_tooltip_label": "Presser \"⌘ + k\" pour sauter vers une page",
-  "components.search_bar.control_tooltip_label": "Presser \"^ + k\" pour sauter vers une page",
-  "components.search_bar.slash_tooltip_label": "Pressez \"/\" pour chercher",
+  "components._global.command_tooltip_label": "Presser \"⌘ + k\" pour sauter vers une page",
+  "components._global.control_tooltip_label": "Presser \"^ + k\" pour sauter vers une page",
+  "components._global.slash_tooltip_label": "Pressez \"/\" pour chercher",
   "components.shield_private.private": "Privé",
   "components.sidebar_left.location_search_placeholder": "Filtrer par emplacement",
   "components.sidebar_left.orgs_search_placeholder": "filtrer par orgs",
diff --git a/frontend/i18n/pt.json b/frontend/i18n/pt.json
index bd896cd56..a8952a333 100644
--- a/frontend/i18n/pt.json
+++ b/frontend/i18n/pt.json
@@ -317,9 +317,9 @@
   "components.page_community_footer.need_help_text_2_1": "Dirija-se para",
   "components.page_community_footer.need_help_text_2_3": "onde pode reportar bugs ou solicitar funcionalidades",
   "components.page_community_footer.visit_our": "Visite o nosso",
-  "components.search_bar.command_tooltip_label": "Pressione \"⌘ + k\" para saltar para uma página",
-  "components.search_bar.control_tooltip_label": "Pressione \"^ + k\" para saltar para uma página",
-  "components.search_bar.slash_tooltip_label": "Pressione \"/\" para pesquisar",
+  "components._global.command_tooltip_label": "Pressione \"⌘ + k\" para saltar para uma página",
+  "components._global.control_tooltip_label": "Pressione \"^ + k\" para saltar para uma página",
+  "components._global.slash_tooltip_label": "Pressione \"/\" para pesquisar",
   "components.shield_private.private": "Privado",
   "components.sidebar_left.location_search_placeholder": "Filtrar por localização",
   "components.sidebar_left.orgs_search_placeholder": "Filtrar por organizações",
diff --git a/frontend/pages/organizations/index.vue b/frontend/pages/organizations/index.vue
index 5046a79d2..a19837698 100644
--- a/frontend/pages/organizations/index.vue
+++ b/frontend/pages/organizations/index.vue
@@ -11,6 +11,13 @@
         <ComboboxTopics />
       </div>
     </HeaderAppPage>
+    <!-- <div class="mb-8">
+      <PageFilter
+        @filter-change="handleFilterChange"
+        :sections="filterSections"
+        :tabs="tabs"
+      />
+    </div> -->
     <div v-if="organizations.length > 0">
       <div v-for="org in organizations" class="space-y-6 pb-6 pt-3 md:pt-4">
         <CardSearchResultOrganization :isPrivate="false" :organization="org" />
@@ -25,4 +32,30 @@ const organizationStore = useOrganizationStore();
 await organizationStore.fetchAll();
 
 const { organizations } = organizationStore;
+
+// const filterSections = ref([
+//   {
+//     title: "Popular tags",
+//     tags: [
+//       { id: 1, name: "Framework", selected: false },
+//       { id: 2, name: "Library", selected: false },
+//       { id: 3, name: "Tool", selected: false },
+//     ],
+//   },
+// ]);
+
+// const tabs = ref([
+//   { id: "active", name: "Active" },
+//   { id: "new", name: "New" },
+//   { id: "private", name: "Private" },
+// ]);
+
+// const handleFilterChange = (filters: {
+//   search: string;
+//   activeTab: string;
+//   selectedTags: number[];
+// }) => {
+//   console.log("Filters changed:", filters);
+//   // You can implement the filtering logic here later
+// };
 </script>
diff --git a/frontend/test/components/filter/pageFilter.spec.ts b/frontend/test/components/filter/pageFilter.spec.ts
new file mode 100644
index 000000000..f77ef2a27
--- /dev/null
+++ b/frontend/test/components/filter/pageFilter.spec.ts
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+import PageFilter from "~/components/page/PageFilter.vue";
+
+describe("PageFilter", () => {
+  const minimumProps = {
+    sections: [
+      {
+        title: "Popular Tags",
+        tags: [
+          { id: 1, name: "Tag 1", selected: false },
+          { id: 2, name: "Tag 2", selected: false },
+          { id: 3, name: "Tag 3", selected: false },
+          { id: 4, name: "Tag 4", selected: false },
+        ],
+      },
+    ],
+    tabs: [
+      { id: "tab1", name: "Tab 1" },
+      { id: "tab2", name: "Tab 2" },
+      { id: "tab3", name: "Tab 3" },
+    ],
+  };
+
+  it("should render", () => {
+    // Basic render test with minimum required props
+    render(PageFilter, {
+      props: minimumProps,
+      global: {
+        provide: {
+          useDevice: () => ({ isMacOS: false }),
+        },
+        stubs: {
+          Icon: true,
+          BtnTag: true,
+          TooltipBase: true,
+        },
+      },
+    });
+
+    expect(screen.getByText("Popular Tags")).toBeTruthy();
+    expect(screen.getByRole("heading", { name: "Filter" })).toBeTruthy();
+    expect(screen.getByLabelText("Search to filter")).toBeTruthy();
+  });
+});