diff --git a/src/RequestAPI.d.ts b/src/RequestAPI.d.ts
index 3784e3c2..67794b5f 100644
--- a/src/RequestAPI.d.ts
+++ b/src/RequestAPI.d.ts
@@ -66,6 +66,7 @@ export type RequestAPI = {
   ) => InfiniteScrollerResponse<Song>;
   "query::queue::init": () => InfiniteScrollerInitResponse;
   "query::queue": (request: InfiniteScrollerRequest) => InfiniteScrollerResponse<Song>;
+  "query::tags::search": () => string[];
 
   "save::localVolume": (volume: number, song: ResourceID) => void;
 
diff --git a/src/main/router/import.ts b/src/main/router/import.ts
index f98f5ffb..2e92ce0a 100644
--- a/src/main/router/import.ts
+++ b/src/main/router/import.ts
@@ -11,4 +11,5 @@ import "./resource-router";
 import "./settings-router";
 import "./song-color-router";
 import "./songs-pool-router";
+import "./tags-router";
 import "./window-router";
diff --git a/src/main/router/tags-router.ts b/src/main/router/tags-router.ts
new file mode 100644
index 00000000..48fbcdc2
--- /dev/null
+++ b/src/main/router/tags-router.ts
@@ -0,0 +1,31 @@
+import { Router } from "../lib/route-pass/Router";
+import { Storage } from "../lib/storage/Storage";
+
+Router.respond("query::tags::search", () => {
+  const allTags = Storage.getTable("system").get("allTags");
+  if (allTags.isNone) {
+    return [];
+  }
+
+  const tagsByUse: string[][] = [];
+  Object.entries(allTags.value).forEach(([tagName, songs]) => {
+    if (!tagName) {
+      return;
+    }
+
+    const size = songs.length;
+    tagsByUse[size] = (tagsByUse[size] ?? []).concat(tagName);
+  });
+
+  let result: string[] = [];
+  for (let i = tagsByUse.length - 1; i > 0; i--) {
+    const tagGroup = tagsByUse[i];
+    if (!tagGroup) {
+      continue;
+    }
+
+    result = result.concat(tagGroup);
+  }
+
+  return result;
+});
diff --git a/src/renderer/src/components/input/Input.tsx b/src/renderer/src/components/input/Input.tsx
index 8458103c..e24974bf 100644
--- a/src/renderer/src/components/input/Input.tsx
+++ b/src/renderer/src/components/input/Input.tsx
@@ -3,7 +3,7 @@ import { Component, JSX, splitProps } from "solid-js";
 
 export const inputStyles = cva(
   [
-    "ring-offset-background placeholder:text-subtext flex h-[42px] w-full rounded-lg px-3.5 py-2 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
+    "ring-offset-background placeholder:text-subtext flex w-full rounded-lg disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:bg-surface",
   ],
   {
     variants: {
@@ -12,21 +12,27 @@ export const inputStyles = cva(
         outlined:
           "border border-stroke bg-transparent border-solid block focus-visible:border-grey-400",
       },
+      size: {
+        sm: "h-[32px] text-sm px-2.5",
+        default: "h-[42px] text-base px-3.5 py-2",
+      },
     },
     defaultVariants: {
       variant: "outlined",
+      size: "default",
     },
   },
 );
 
 type Props = JSX.IntrinsicElements["input"] & VariantProps<typeof inputStyles>;
 export const Input: Component<Props> = (_props) => {
-  const [props, rest] = splitProps(_props, ["class", "variant"]);
+  const [props, rest] = splitProps(_props, ["class", "variant", "size"]);
   return (
     <input
       {...rest}
       class={inputStyles({
         variant: props.variant,
+        size: props.size,
         class: props.class,
       })}
     />
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
index 874309ab..70ef7691 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearch.tsx
@@ -2,17 +2,17 @@ import { Optional, Order, Tag } from "../../../../../@types";
 import { SearchQueryError } from "../../../../../main/lib/search-parser/@search-types";
 import { setSongsSearch } from "../song-list/song-list.utils";
 import SongListSearchOrderBy from "./SongListSearchOrderBy";
-import { SongListSearchTags } from "./SongListSearchTags";
+import { SongListSearchTags, TagMode } from "./SongListSearchTags";
 import Button from "@renderer/components/button/Button";
 import { Input } from "@renderer/components/input/Input";
 import { FilterIcon, SearchIcon, FilterXIcon } from "lucide-solid";
-import { Accessor, Component, createSignal, Match, Setter, Signal, Switch } from "solid-js";
+import { Accessor, Component, createSignal, Match, Setter, Switch } from "solid-js";
 
 export type SearchProps = {
-  tags: Signal<Tag[]>;
   count: Accessor<number>;
   error: Accessor<Optional<SearchQueryError>>;
   setOrder: Setter<Order>;
+  setTags: Setter<Tag[]>;
 };
 
 const SongListSearch: Component<SearchProps> = (props) => {
@@ -66,6 +66,17 @@ const SongListSearch: Component<SearchProps> = (props) => {
   //   }
   // });
 
+  const handleValueChange = (tags: Map<string, TagMode>) => {
+    const searchFormattedTags = Array.from(
+      tags.entries(),
+      ([tagName, mode]): Tag => ({
+        name: tagName,
+        isSpecial: mode === "discart",
+      }),
+    );
+    props.setTags(searchFormattedTags);
+  };
+
   return (
     <div class="px-5 pb-2 pt-1">
       <div class="flex gap-2">
@@ -109,8 +120,8 @@ const SongListSearch: Component<SearchProps> = (props) => {
         }}
       >
         <div class="mt-2 flex flex-nowrap items-center gap-2 overflow-y-auto">
-          <SongListSearchOrderBy disabled={!filterExpanded()} setOrder={props.setOrder} />
-          <SongListSearchTags disabled={!filterExpanded()} />
+          <SongListSearchOrderBy setOrder={props.setOrder} />
+          <SongListSearchTags onValueChange={handleValueChange} />
         </div>
       </div>
     </div>
diff --git a/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
index b1bebf3b..ceb9ae2f 100644
--- a/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
+++ b/src/renderer/src/components/song/song-list-search/SongListSearchTags.tsx
@@ -1,17 +1,269 @@
 import FilterOption from "./FilterOption";
-import { Component } from "solid-js";
+import { Input } from "@renderer/components/input/Input";
+import useControllableState from "@renderer/lib/controllable-state";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-solid";
+import {
+  Accessor,
+  Component,
+  createMemo,
+  createSignal,
+  For,
+  JSX,
+  Match,
+  Show,
+  Switch,
+} from "solid-js";
 
-type Props = {
-  disabled?: boolean;
+export type TagMode = "include" | "discart";
+export type TagLabel = ReturnType<typeof tagsToLabel>;
+export type Props = {
+  value?: Accessor<Map<string, TagMode>>;
+  onValueChange?: (newValue: Map<string, TagMode>) => void;
 };
+
+const tagsToLabel = (tags: [string, TagMode][]) => {
+  const fistTag = tags[0];
+  let additionalInclude = 0;
+  let additionalDiscart = 0;
+  for (let i = 1; i < tags.length; i++) {
+    const [, tagMode] = tags[i];
+    switch (tagMode) {
+      case "include":
+        additionalInclude++;
+        break;
+      case "discart":
+        additionalDiscart++;
+        break;
+      default:
+        break;
+    }
+  }
+
+  return {
+    fistTag,
+    additionalDiscart,
+    additionalInclude,
+  };
+};
+
+/** Groups selected tags by mode, returns a map with include and discart tags, having the include tags first */
+function groupSelectedTagsByMode(selectedTags: Map<string, TagMode>): Map<string, TagMode> {
+  const include = new Map<string, TagMode>();
+  const discart = new Map<string, TagMode>();
+
+  selectedTags.forEach((mode, tag) => {
+    if (mode === "include") {
+      include.set(tag, mode);
+    } else if (mode === "discart") {
+      discart.set(tag, mode);
+    }
+  });
+
+  return new Map([...include, ...discart]);
+}
+
 export const SongListSearchTags: Component<Props> = (props) => {
+  const [hasFetchedTags, setHasFetchedTags] = createSignal(false);
+  const [isPopopOpen, setIsPopopOpen] = createSignal(false);
+  const [tags, setTags] = createSignal<string[]>([]);
+  const [showHint, setShowHint] = createSignal(true);
+  const [selectedTags, setSelectedTags] = useControllableState({
+    prop: props.value,
+    onChange: props.onValueChange,
+    defaultProp: new Map<string, TagMode>(),
+  });
+  const [search, setSearch] = createSignal("");
+  const [isScrolled, setIsScrolled] = createSignal(false);
+
+  const label = createMemo(() => {
+    const s = Array.from(selectedTags().entries());
+    if (s.length === 0) {
+      return "Tags";
+    }
+
+    return tagsToLabel(s);
+  });
+
+  const fetchTags = async () => {
+    setHasFetchedTags(true);
+    const remoteTags = await window.api.request("query::tags::search");
+    setTags(remoteTags);
+  };
+
+  const handlePopoverChange = (newValue: boolean) => {
+    setIsPopopOpen(newValue);
+
+    if (!newValue || hasFetchedTags()) {
+      return;
+    }
+
+    fetchTags();
+  };
+
+  const handleTagClick = (tag: string) => {
+    setSelectedTags((oldSelectedTags) => {
+      const newSelectedTags = new Map(oldSelectedTags);
+      const tagMode = newSelectedTags.get(tag);
+
+      if (typeof tagMode === "undefined") {
+        newSelectedTags.set(tag, "include");
+      } else if (tagMode === "include") {
+        newSelectedTags.set(tag, "discart");
+      } else if (tagMode === "discart") {
+        newSelectedTags.delete(tag);
+      }
+
+      return groupSelectedTagsByMode(newSelectedTags);
+    });
+  };
+
+  const removeTag = (tag: string) => {
+    setSelectedTags((oldSelectedTags) => {
+      const newSelectedTags = new Map(oldSelectedTags);
+      newSelectedTags.delete(tag);
+      return groupSelectedTagsByMode(newSelectedTags);
+    });
+  };
+
+  const clearAllTags = () => {
+    setSelectedTags(new Map<string, TagMode>());
+  };
+
+  const filteredTags = createMemo(() => {
+    return tags().filter((tag) => tag.includes(search()));
+  });
+  const selectedTagsEntries = createMemo(() => Array.from(selectedTags().entries()));
+  const selectedTagsCount = createMemo(() => selectedTagsEntries().length);
+
   return (
-    <FilterOption>
+    <FilterOption popoverProps={{ isOpen: isPopopOpen, onValueChange: handlePopoverChange }}>
       <FilterOption.Label>Tags</FilterOption.Label>
       <FilterOption.List>
-        <FilterOption.Trigger disabled={props.disabled}>None</FilterOption.Trigger>
+        <FilterOption.Trigger>
+          <Switch>
+            <Match when={typeof label() === "string"}>
+              <span>{label() as string}</span>
+            </Match>
+            <Match when={typeof label() !== "string"}>
+              <TagSelectedLabel label={label as Accessor<TagLabel>} />
+            </Match>
+          </Switch>
+        </FilterOption.Trigger>
       </FilterOption.List>
-      <FilterOption.Content>Tags placeholder</FilterOption.Content>
+      <FilterOption.Content
+        class="max-h-[500px] max-w-sm overflow-y-auto"
+        onScroll={(e) => setIsScrolled(e.currentTarget.scrollTop > 0)}
+      >
+        <div>
+          <div
+            class="sticky -top-2 flex flex-wrap gap-x-1.5 gap-y-2 border-b border-b-transparent bg-thick-material p-1"
+            classList={{
+              "border-b-stroke": isScrolled(),
+            }}
+          >
+            <Input
+              size="sm"
+              placeholder="Search tags"
+              value={search()}
+              onInput={(e) => setSearch(e.currentTarget.value)}
+            />
+            <Show when={selectedTagsCount() > 0}>
+              <For each={selectedTagsEntries()}>
+                {([tag, mode]) => (
+                  <div
+                    class={tagStyles({
+                      mode,
+                      className: "flex items-center gap-1 px-1.5 py-0.5 text-sm",
+                    })}
+                  >
+                    <span>{tag}</span>
+                    <button class="text-gray-500" onClick={() => removeTag(tag)}>
+                      <XIcon size={16} />
+                    </button>
+                  </div>
+                )}
+              </For>
+              <button onClick={clearAllTags}>Clear all</button>
+            </Show>
+          </div>
+          <Show when={showHint()}>
+            <div class="px-1 text-sm">
+              <span class="text-subtext">
+                Click on any tag once to include it. Click on it again to exclude it. Click once
+                more to clear it
+              </span>{" "}
+              <button class="underline" onClick={() => setShowHint(false)}>
+                Dismiss
+              </button>
+            </div>
+          </Show>
+          <div class="flex flex-wrap gap-2 px-1 pt-2">
+            <For each={filteredTags()}>
+              {(tag) => (
+                <Tag tag={tag} onTagClick={handleTagClick} mode={selectedTags().get(tag)}>
+                  {tag}
+                </Tag>
+              )}
+            </For>
+          </div>
+        </div>
+      </FilterOption.Content>
     </FilterOption>
   );
 };
+
+export type TagProps = {
+  mode?: TagMode;
+  tag: string;
+  children: JSX.Element;
+  onTagClick?: (tag: string) => void;
+};
+const tagStyles = cva(["select-none rounded-md px-3 py-1 border"], {
+  variants: {
+    mode: {
+      default: "border-solid border-transparent bg-surface",
+      include: "border-solid border-green bg-green/5",
+      discart: "border-dashed border-red-500 bg-red-500/5",
+    },
+  },
+  defaultVariants: {
+    mode: "default",
+  },
+});
+const Tag: Component<TagProps> = (props) => {
+  return (
+    <button onClick={() => props.onTagClick?.(props.tag)} class={tagStyles({ mode: props.mode })}>
+      {props.children}
+    </button>
+  );
+};
+
+export type TagSelectedLabelProps = {
+  label: Accessor<TagLabel>;
+};
+const TagSelectedLabel: Component<TagSelectedLabelProps> = (props) => {
+  const firstTag = () => {
+    const [name, mode] = props.label().fistTag;
+    return { name, mode };
+  };
+
+  return (
+    <span class="flex gap-2">
+      <span
+        classList={{
+          "text-green": firstTag().mode === "include",
+          "text-red-500": firstTag().mode === "discart",
+        }}
+      >
+        {firstTag().name}
+      </span>
+      <Show when={props.label().additionalInclude > 0}>
+        <span class="text-green">+{props.label().additionalInclude}</span>
+      </Show>
+      <Show when={props.label().additionalDiscart > 0}>
+        <span class="text-red-500">-{props.label().additionalDiscart}</span>
+      </Show>
+    </span>
+  );
+};
diff --git a/src/renderer/src/components/song/song-list/SongList.tsx b/src/renderer/src/components/song/song-list/SongList.tsx
index a55ecdd9..5834dad6 100644
--- a/src/renderer/src/components/song/song-list/SongList.tsx
+++ b/src/renderer/src/components/song/song-list/SongList.tsx
@@ -21,7 +21,7 @@ const DEFAULT_TAGS_VALUE: Tag[] = [];
 const DEFAULT_ORDER_VALUE: Order = { option: "title", direction: "asc" };
 
 const SongList: Component<SongViewProps> = (props) => {
-  const tagsSignal = createSignal(DEFAULT_TAGS_VALUE, { equals: false });
+  const [tags, setTags] = createSignal(DEFAULT_TAGS_VALUE, { equals: false });
   const [order, setOrder] = createSignal(DEFAULT_ORDER_VALUE);
   const [count, setCount] = createSignal(0);
 
@@ -38,7 +38,7 @@ const SongList: Component<SongViewProps> = (props) => {
 
   const searchSongs = async () => {
     const o = order();
-    const t = tagsSignal[0]();
+    const t = tags();
     const parsedQuery = await window.api.request("parse::search", songsSearch());
 
     if (parsedQuery.type === "error") {
@@ -76,7 +76,7 @@ const SongList: Component<SongViewProps> = (props) => {
 
   return (
     <>
-      <SongListSearch tags={tagsSignal} setOrder={setOrder} count={count} error={searchError} />
+      <SongListSearch setTags={setTags} setOrder={setOrder} count={count} error={searchError} />
 
       <div class="flex-grow overflow-y-auto p-5 py-0">
         <InfiniteScroller
diff --git a/src/renderer/src/lib/Keyboard.ts b/src/renderer/src/lib/Keyboard.ts
index 4574fbb1..2a486a0c 100644
--- a/src/renderer/src/lib/Keyboard.ts
+++ b/src/renderer/src/lib/Keyboard.ts
@@ -24,6 +24,8 @@ export class Keyboard {
       for (let i = 0; i < this.registers.length; i++) {
         const r = this.registers[i];
 
+        console.log(evt.key);
+
         if (r.key.toLowerCase() !== evt.key.toLowerCase()) {
           continue;
         }