diff --git a/src/api/index.ts b/src/api/index.ts
index 52c22e8..eb0551b 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,2 +1,3 @@
 export * as FirearmApi from "./firearm-api"
 export * as ModificationApi from "./modification-api"
+export * as TagApi from "./tag-api"
diff --git a/src/api/modification-api.ts b/src/api/modification-api.ts
index 2fa528e..1d95436 100644
--- a/src/api/modification-api.ts
+++ b/src/api/modification-api.ts
@@ -4,17 +4,25 @@ import { asUrlSearchParam } from "@/utils/query-param-utils.ts"
 
 interface ModificationParams extends PageQueryParams {
   firearmId?: string
+  tags?: string[]
 }
 
 export async function getModifications(params?: ModificationParams): Promise<Page<Modification>> {
   let uri = "/modifications"
   const urlSearchParams = asUrlSearchParam(params)
+
   if (params?.firearmId) {
     urlSearchParams.append("firearmId", "" + params.firearmId)
   }
+
+  if (params?.tags) {
+    params.tags.forEach((tag) => urlSearchParams.append("tags", tag))
+  }
+
   if (urlSearchParams.size > 0) {
     uri = uri.concat("?", urlSearchParams.toString())
   }
+
   const { data } = await WebClient.get<Page<Modification>>(uri)
   return data
 }
diff --git a/src/api/tag-api.ts b/src/api/tag-api.ts
new file mode 100644
index 0000000..e7427da
--- /dev/null
+++ b/src/api/tag-api.ts
@@ -0,0 +1,18 @@
+import { WebClient } from "@/shared/web-client"
+
+export async function getTags(firearmId?: number): Promise<string[]> {
+  let uri = "/tags"
+
+  const urlSearchParam = new URLSearchParams()
+
+  if (firearmId) {
+    urlSearchParam.append("firearmId", "" + firearmId)
+  }
+
+  if (urlSearchParam.size > 0) {
+    uri = uri.concat("?", urlSearchParam.toString())
+  }
+
+  const { data } = await WebClient.get<string[]>(uri)
+  return data
+}
\ No newline at end of file
diff --git a/src/page/mod-codes/index.tsx b/src/page/mod-codes/index.tsx
index b40a867..c18f29b 100644
--- a/src/page/mod-codes/index.tsx
+++ b/src/page/mod-codes/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react"
 import { Link, useSearchParams } from "react-router-dom"
-import { Button, Card, Col, Pagination, Row, Space, Tag, Typography } from "antd"
-import { ModificationApi } from "@/api"
+import { Button, Card, Col, Pagination, Row, Select, Space, Tag, Typography } from "antd"
+import { ModificationApi, TagApi } from "@/api"
 import { Modification } from "@/types"
 
 const pageSize = 12
@@ -12,8 +12,17 @@ export default function ModCodesPage() {
 
   const [page, setPage] = useState<number>(1)
   const [modifications, setModifications] = useState<Modification[]>([])
+  const [tagOptions, setTagOptions] = useState<string[]>([])
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
   const [total, setTotal] = useState<number>(0)
 
+  useEffect(() => {
+    const _firearmId = firearmId ? +firearmId : (void 0)
+    TagApi.getTags(_firearmId).then((tags) => {
+      setTagOptions(tags)
+    })
+  }, [])
+
   useEffect(() => {
     ModificationApi.getModifications({
       page: page - 1,
@@ -21,30 +30,55 @@ export default function ModCodesPage() {
       sortBy: "id",
       direction: "ASC",
       firearmId,
+      tags: selectedTags,
     }).then((pagedData) => {
       setModifications(pagedData.items)
       setTotal(pagedData.totalElements)
     })
-  }, [page, firearmId])
+  }, [page, firearmId, selectedTags])
 
   useEffect(() => {
     setPage(1)
   }, [firearmId])
 
+  useEffect(() => {
+    setPage(1)
+  }, [selectedTags])
+
   return (
     <>
       <div className="mb-4 flex items-center justify-between gap-4">
         <Typography.Title level={4} className="mb-0!">
           改枪码列表
         </Typography.Title>
-        {firearmId && (
-          <Space>
-            <Tag color="geekblue">武器 ID: {firearmId}</Tag>
+        <Space wrap>
+          <span>标签：</span>
+          <Select<string[]>
+            mode="multiple"
+            allowClear
+            placeholder="请选择标签"
+            className="w-64"
+            value={selectedTags}
+            options={tagOptions.map((tag) => ({ value: tag, label: tag }))}
+            onChange={(values) => {
+              setSelectedTags(values)
+            }}
+          />
+          {firearmId && <Tag color="geekblue">武器 ID: {firearmId}</Tag>}
+          {(firearmId || selectedTags.length > 0) && (
             <Link to="/mod-codes">
-              <Button type="link">清除筛选</Button>
+              <Button
+                type="link"
+                onClick={() => {
+                  setSelectedTags([])
+                  setPage(1)
+                }}
+              >
+                清除筛选
+              </Button>
             </Link>
-          </Space>
-        )}
+          )}
+        </Space>
       </div>
 
       <div className="mb-6">
@@ -56,19 +90,19 @@ export default function ModCodesPage() {
                 variant="outlined"
                 styles={{
                   header: { minHeight: 56 },
-                }}
-              >
+                }}>
                 <div className="flex flex-col gap-3">
                   <div className="flex items-center justify-between gap-2">
                     <span>
                       <strong>改枪码：</strong>
-                      <code className="bg-gray-400 px-2 py-1 rounded text-sm text-white">{modification.code}</code>
+                      <code className="bg-gray-400 px-2 py-1 rounded text-sm text-white">
+                        {modification.code}
+                      </code>
                     </span>
                     <Button
                       type="text"
                       size="small"
-                      onClick={() => navigator.clipboard.writeText(modification.code)}
-                    >
+                      onClick={() => navigator.clipboard.writeText(modification.code)}>
                       复制
                     </Button>
                   </div>
@@ -86,7 +120,10 @@ export default function ModCodesPage() {
                     </div>
                   )}
 
-                  <Typography.Paragraph style={{ marginBottom: 0 }} type="secondary" ellipsis={{ rows: 3 }}>
+                  <Typography.Paragraph
+                    style={{ marginBottom: 0 }}
+                    type="secondary"
+                    ellipsis={{ rows: 3 }}>
                     {modification.note || "暂无备注"}
                   </Typography.Paragraph>