diff --git a/web/src/components/HomeSidebar/TagsSection.tsx b/web/src/components/HomeSidebar/TagsSection.tsx
index 9dca43d38..f69614298 100644
--- a/web/src/components/HomeSidebar/TagsSection.tsx
+++ b/web/src/components/HomeSidebar/TagsSection.tsx
@@ -1,4 +1,5 @@
 import { Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
+import clsx from "clsx";
 import toast from "react-hot-toast";
 import { useLocation } from "react-router-dom";
 import useDebounce from "react-use/lib/useDebounce";
@@ -19,6 +20,7 @@ const TagsSection = (props: Props) => {
   const t = useTranslate();
   const location = useLocation();
   const user = useCurrentUser();
+  const filterStore = useFilterStore();
   const tagStore = useTagStore();
   const memoList = useMemoList();
   const tagAmounts = Object.entries(tagStore.getState().tagAmounts)
@@ -31,44 +33,7 @@ const TagsSection = (props: Props) => {
     await tagStore.fetchTags({ user, location });
   };
 
-  return (
-    <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
-      <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none">
-        <span>{t("common.tags")}</span>
-        {tagAmounts.length > 0 && <span className="shrink-0">({tagAmounts.length})</span>}
-      </div>
-      {tagAmounts.length > 0 ? (
-        <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
-          {tagAmounts.map(([tag, amount]) => (
-            <TagContainer key={tag} tag={tag} amount={amount} />
-          ))}
-        </div>
-      ) : (
-        !props.readonly && (
-          <div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
-            <Icon.Tags />
-            <p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
-          </div>
-        )
-      )}
-    </div>
-  );
-};
-
-interface TagContainerProps {
-  tag: string;
-  amount: number;
-}
-
-const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) => {
-  const t = useTranslate();
-  const filterStore = useFilterStore();
-  const tagStore = useTagStore();
-  const { tag, amount } = props;
-  const user = useCurrentUser();
-  const location = useLocation();
-
-  const handleTagClick = () => {
+  const handleTagClick = (tag: string) => {
     if (filterStore.getState().tag === tag) {
       filterStore.setTagFilter(undefined);
     } else {
@@ -76,7 +41,7 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
     }
   };
 
-  const handleDeleteTag = async () => {
+  const handleDeleteTag = async (tag: string) => {
     showCommonDialog({
       title: t("tag.delete-tag"),
       content: t("tag.delete-confirm"),
@@ -94,31 +59,57 @@ const TagContainer: React.FC<TagContainerProps> = (props: TagContainerProps) =>
   };
 
   return (
-    <div
-      className={`shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800`}
-    >
-      <Dropdown>
-        <MenuButton slots={{ root: "div" }}>
-          <div className="shrink-0 group">
-            <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
-            <Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60" />
-          </div>
-        </MenuButton>
-        <Menu size="sm" placement="bottom-start">
-          <MenuItem onClick={() => showRenameTagDialog({ tag: tag })}>
-            <Icon.Edit3 className="w-4 h-auto" />
-            {t("common.rename")}
-          </MenuItem>
-          <MenuItem color="danger" onClick={handleDeleteTag}>
-            <Icon.Trash className="w-4 h-auto" />
-            {t("common.delete")}
-          </MenuItem>
-        </Menu>
-      </Dropdown>
-      <div className="inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]" onClick={handleTagClick}>
-        <span className="truncate dark:opacity-80">{tag}</span>
-        {amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
+    <div className="flex flex-col justify-start items-start w-full mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar">
+      <div className="flex flex-row justify-start items-center w-full gap-1 mb-1 text-sm leading-6 text-gray-400 select-none">
+        <span>{t("common.tags")}</span>
+        {tagAmounts.length > 0 && <span className="shrink-0">({tagAmounts.length})</span>}
       </div>
+      {tagAmounts.length > 0 ? (
+        <div className="w-full flex flex-row justify-start items-center relative flex-wrap gap-x-2 gap-y-1">
+          {tagAmounts.map(([tag, amount]) => (
+            <div
+              key={tag}
+              className="shrink-0 w-auto max-w-full text-sm rounded-md leading-6 flex flex-row justify-start items-center select-none hover:opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-800"
+            >
+              <Dropdown>
+                <MenuButton slots={{ root: "div" }}>
+                  <div className="shrink-0 group">
+                    <Icon.Hash className="group-hover:hidden w-4 h-auto shrink-0 opacity-40" />
+                    <Icon.MoreVertical className="hidden group-hover:block w-4 h-auto shrink-0 opacity-60" />
+                  </div>
+                </MenuButton>
+                <Menu size="sm" placement="bottom-start">
+                  <MenuItem onClick={() => showRenameTagDialog({ tag: tag })}>
+                    <Icon.Edit3 className="w-4 h-auto" />
+                    {t("common.rename")}
+                  </MenuItem>
+                  <MenuItem color="danger" onClick={() => handleDeleteTag(tag)}>
+                    <Icon.Trash className="w-4 h-auto" />
+                    {t("common.delete")}
+                  </MenuItem>
+                </Menu>
+              </Dropdown>
+              <div
+                className={clsx(
+                  "inline-flex flex-nowrap ml-0.5 gap-0.5 cursor-pointer max-w-[calc(100%-16px)]",
+                  filterStore.state.tag === tag && "text-blue-600 dark:text-blue-400",
+                )}
+                onClick={() => handleTagClick(tag)}
+              >
+                <span className="truncate dark:opacity-80">{tag}</span>
+                {amount > 1 && <span className="opacity-60 shrink-0">({amount})</span>}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        !props.readonly && (
+          <div className="p-2 border border-dashed dark:border-zinc-800 rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
+            <Icon.Tags />
+            <p className="mt-0.5 text-sm leading-snug italic">{t("tag.create-tags-guide")}</p>
+          </div>
+        )
+      )}
     </div>
   );
 };
diff --git a/web/src/components/MemoFilter.tsx b/web/src/components/MemoFilter.tsx
deleted file mode 100644
index bcbf2f509..000000000
--- a/web/src/components/MemoFilter.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import clsx from "clsx";
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-import { useFilterStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
-import Icon from "./Icon";
-
-interface Props {
-  className?: string;
-}
-
-const MemoFilter = (props: Props) => {
-  const t = useTranslate();
-  const location = useLocation();
-  const filterStore = useFilterStore();
-  const filter = filterStore.state;
-  const showFilter = Boolean(filter.tag || filter.text || filter.visibility);
-
-  useEffect(() => {
-    filterStore.clearFilter();
-  }, [location]);
-
-  if (!showFilter) {
-    return null;
-  }
-
-  return (
-    <div
-      className={clsx(
-        `w-full flex flex-row justify-start items-start flex-wrap gap-2 text-sm leading-7 dark:text-gray-400`,
-        props.className,
-      )}
-    >
-      <div className="shrink-0 flex flex-row justify-start items-center text-gray-400">
-        <Icon.Filter className="w-4 h-auto mr-1" />
-        <span>{t("common.filter")}:</span>
-      </div>
-      {filter.tag && (
-        <div
-          className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
-          onClick={() => {
-            filterStore.setTagFilter(undefined);
-          }}
-        >
-          <Icon.Hash className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.tag}
-          <Icon.X className="w-4 h-auto ml-1 opacity-40" />
-        </div>
-      )}
-      {filter.visibility && (
-        <div
-          className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
-          onClick={() => {
-            filterStore.setMemoVisibilityFilter(undefined);
-          }}
-        >
-          <Icon.Eye className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.visibility}
-          <Icon.X className="w-4 h-auto ml-1 opacity-40" />
-        </div>
-      )}
-      {filter.text && (
-        <div
-          className="max-w-xs flex flex-row justify-start items-center px-2 cursor-pointer dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 rounded whitespace-nowrap truncate hover:line-through"
-          onClick={() => {
-            filterStore.setTextFilter(undefined);
-          }}
-        >
-          <Icon.Search className="w-4 h-auto mr-1 text-gray-500 dark:text-gray-400" /> {filter.text}
-          <Icon.X className="w-4 h-auto ml-1 opacity-40" />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MemoFilter;
diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx
index ef9f76c42..1477b43b3 100644
--- a/web/src/pages/Archived.tsx
+++ b/web/src/pages/Archived.tsx
@@ -6,7 +6,6 @@ import { showCommonDialog } from "@/components/Dialog/CommonDialog";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import MemoContent from "@/components/MemoContent";
-import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
 import SearchBar from "@/components/SearchBar";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@@ -99,7 +98,6 @@ const Archived = () => {
               <SearchBar />
             </div>
           </div>
-          <MemoFilter className="px-2 pb-2" />
           {sortedMemos.map((memo) => (
             <div
               key={memo.name}
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index 4e261ca3d..9c1a0b05c 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import Empty from "@/components/Empty";
 import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
 import Icon from "@/components/Icon";
-import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@@ -63,7 +62,6 @@ const Explore = () => {
       <div className={clsx("w-full flex flex-row justify-start items-start px-4 sm:px-6 gap-4")}>
         <div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
           <div className="flex flex-col justify-start items-start w-full max-w-full">
-            <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
               <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility showPinned compact />
             ))}
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index e11f9e52f..497f1d304 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -6,7 +6,6 @@ import Empty from "@/components/Empty";
 import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
 import Icon from "@/components/Icon";
 import MemoEditor from "@/components/MemoEditor";
-import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
@@ -87,7 +86,6 @@ const Home = () => {
         <div className={clsx(md ? "w-[calc(100%-15rem)]" : "w-full")}>
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <div className="flex flex-col justify-start items-start w-full max-w-full">
-            <MemoFilter className="px-2 pb-2" />
             {sortedMemos.map((memo) => (
               <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showVisibility showPinned compact />
             ))}
diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx
index 1bfaaed54..45fc949cf 100644
--- a/web/src/pages/Timeline.tsx
+++ b/web/src/pages/Timeline.tsx
@@ -7,7 +7,6 @@ import ActivityCalendar from "@/components/ActivityCalendar";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
 import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
-import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import { TimelineSidebar, TimelineSidebarDrawer } from "@/components/TimelineSidebar";
@@ -141,8 +140,6 @@ const Timeline = () => {
               </div>
             </div>
             <div className="w-full h-auto flex flex-col justify-start items-start">
-              <MemoFilter className="p-2 my-2 rounded-lg dark:bg-zinc-900" />
-
               <div className="flex flex-col justify-start items-start w-full mt-2">
                 <div className="w-full flex shrink-0 flex-row justify-between pl-1 mt-1 mb-3">
                   <div className="w-auto flex flex-col">
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx
index 22fac6dcc..1ff0c0359 100644
--- a/web/src/pages/UserProfile.tsx
+++ b/web/src/pages/UserProfile.tsx
@@ -5,7 +5,6 @@ import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import Empty from "@/components/Empty";
 import Icon from "@/components/Icon";
-import MemoFilter from "@/components/MemoFilter";
 import MemoView from "@/components/MemoView";
 import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
@@ -131,7 +130,6 @@ const UserProfile = () => {
                   </p>
                 </div>
               </div>
-              <MemoFilter className="px-2 pb-3" />
               {sortedMemos.map((memo) => (
                 <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />
               ))}