diff --git a/apps/web/i18n.config.json b/apps/web/i18n.config.json
index b3e8a0d..175188c 100644
--- a/apps/web/i18n.config.json
+++ b/apps/web/i18n.config.json
@@ -7,7 +7,7 @@
     "@workspace/blocks/appearance/locales/{locale}",
     "@workspace/blocks/chats/locales/{locale}",
     "@workspace/blocks/layout/locales/{locale}",
-    "@workspace/blocks/media/locales/{locale}",
+    "@workspace/media/locales/{locale}",
     "@workspace/blocks/navigation/locales/{locale}",
     "@workspace/blocks/notifications/locales/{locale}",
     "@workspace/search/locales/{locale}",
@@ -16,6 +16,7 @@
   "include": [
     "src",
     "../../packages/blocks/src",
+    "../../packages/media/src",
     "../../packages/search/src",
     "../../packages/ui/src"
   ],
diff --git a/apps/web/package.json b/apps/web/package.json
index 6ae2691..793f7c6 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -29,6 +29,7 @@
     "@workspace/blocks": "workspace:*",
     "@workspace/i18n": "workspace:*",
     "@workspace/lexical": "workspace:*",
+    "@workspace/media": "workspace:*",
     "@workspace/search": "workspace:*",
     "@workspace/ui": "workspace:*",
     "react": "^19.2.6",
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 0411d13..c7dad82 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -1,6 +1,7 @@
 @import "@workspace/ui/globals.css";
 @import "@workspace/blocks/globals.css";
 @import "@workspace/lexical/globals.css";
+@import "@workspace/media/globals.css";
 @import "@workspace/search/globals.css";
 
 :root {
diff --git a/bun.lock b/bun.lock
index 528bb49..bcd3420 100644
--- a/bun.lock
+++ b/bun.lock
@@ -27,6 +27,7 @@
         "@workspace/blocks": "workspace:*",
         "@workspace/i18n": "workspace:*",
         "@workspace/lexical": "workspace:*",
+        "@workspace/media": "workspace:*",
         "@workspace/search": "workspace:*",
         "@workspace/ui": "workspace:*",
         "react": "^19.2.6",
@@ -55,6 +56,7 @@
       "dependencies": {
         "@icones/react": "^0.0.1",
         "@workspace/i18n": "workspace:*",
+        "@workspace/media": "workspace:*",
         "@workspace/preferences": "workspace:*",
         "@workspace/search": "workspace:*",
         "clsx": "^2.1.1",
@@ -165,6 +167,24 @@
         "vitest": "^4.1.10",
       },
     },
+    "packages/media": {
+      "name": "@workspace/media",
+      "version": "0.0.0",
+      "dependencies": {
+        "@workspace/i18n": "workspace:*",
+        "@workspace/ui": "workspace:*",
+        "react": "^19.2.6",
+      },
+      "devDependencies": {
+        "@testing-library/react": "^16.3.2",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "jsdom": "^30.0.1",
+        "react-dom": "^19.2.6",
+        "typescript": "~6",
+        "vitest": "^4.1.10",
+      },
+    },
     "packages/preferences": {
       "name": "@workspace/preferences",
       "version": "0.0.0",
@@ -985,6 +1005,8 @@
 
     "@workspace/lexical": ["@workspace/lexical@workspace:packages/lexical"],
 
+    "@workspace/media": ["@workspace/media@workspace:packages/media"],
+
     "@workspace/preferences": ["@workspace/preferences@workspace:packages/preferences"],
 
     "@workspace/search": ["@workspace/search@workspace:packages/search"],
diff --git a/docs/package.json b/docs/package.json
index 10390e5..9863fb1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@icones/react": "^0.0.1",
     "@workspace/i18n": "workspace:*",
+    "@workspace/media": "workspace:*",
     "@workspace/preferences": "workspace:*",
     "@workspace/search": "workspace:*",
     "clsx": "^2.1.1",
diff --git a/docs/src/index.css b/docs/src/index.css
index 06abf2f..bef5509 100644
--- a/docs/src/index.css
+++ b/docs/src/index.css
@@ -1,4 +1,5 @@
 @import "@workspace/ui/globals.css";
+@import "@workspace/media/globals.css";
 @import "@workspace/search/globals.css";
 
 @custom-variant dark (&:where(.dark, .dark *));
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
index 43487bd..4ffb359 100644
--- a/packages/blocks/package.json
+++ b/packages/blocks/package.json
@@ -45,9 +45,6 @@
     "./layout/locales": "./src/blocks/layout/locales/catalogs.ts",
     "./layout/locales/*": "./src/blocks/layout/locales/*.ts",
     "./layouts/vega": "./src/blocks/layouts/vega/index.tsx",
-    "./media": "./src/blocks/media/index.ts",
-    "./media/locales": "./src/blocks/media/locales/catalogs.ts",
-    "./media/locales/*": "./src/blocks/media/locales/*.ts",
     "./navigation": "./src/blocks/navigation/index.ts",
     "./navigation/locales": "./src/blocks/navigation/locales/catalogs.ts",
     "./navigation/locales/*": "./src/blocks/navigation/locales/*.ts",
diff --git a/packages/blocks/src/blocks/media/locales/catalogs.ts b/packages/blocks/src/blocks/media/locales/catalogs.ts
deleted file mode 100644
index 0d6c637..0000000
--- a/packages/blocks/src/blocks/media/locales/catalogs.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { mediaMessages } from "../messages"
-import {
-  blockCatalogLocales,
-  type BlockCatalogLocale,
-  type BlockMessageCatalog,
-} from "../../../i18n/catalogs"
-
-export { blockCatalogLocales as mediaCatalogLocales }
-export type MediaCatalogLocale = BlockCatalogLocale
-export type MediaMessageCatalog = BlockMessageCatalog<typeof mediaMessages>
diff --git a/packages/media/package.json b/packages/media/package.json
new file mode 100644
index 0000000..8547fa3
--- /dev/null
+++ b/packages/media/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@workspace/media",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@workspace/i18n": "workspace:*",
+    "@workspace/ui": "workspace:*",
+    "react": "^19.2.6"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "jsdom": "^30.0.1",
+    "react-dom": "^19.2.6",
+    "typescript": "~6",
+    "vitest": "^4.1.10"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./globals.css": "./src/styles/globals.css",
+    "./locales": "./src/locales/catalogs.ts",
+    "./locales/*": "./src/locales/*.ts"
+  }
+}
\ No newline at end of file
diff --git a/packages/blocks/src/blocks/media/context.tsx b/packages/media/src/context.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/context.tsx
rename to packages/media/src/context.tsx
diff --git a/packages/blocks/src/blocks/media/dimensions.ts b/packages/media/src/dimensions.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/dimensions.ts
rename to packages/media/src/dimensions.ts
diff --git a/packages/blocks/src/blocks/media/folder-dialog.tsx b/packages/media/src/folder-dialog.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/folder-dialog.tsx
rename to packages/media/src/folder-dialog.tsx
diff --git a/packages/blocks/src/blocks/media/index.ts b/packages/media/src/index.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/index.ts
rename to packages/media/src/index.ts
diff --git a/packages/blocks/src/blocks/media/locales/catalogs.test.ts b/packages/media/src/locales/catalogs.test.ts
similarity index 53%
rename from packages/blocks/src/blocks/media/locales/catalogs.test.ts
rename to packages/media/src/locales/catalogs.test.ts
index 3ffe1a8..3e004d3 100644
--- a/packages/blocks/src/blocks/media/locales/catalogs.test.ts
+++ b/packages/media/src/locales/catalogs.test.ts
@@ -1,6 +1,5 @@
-import { describe, it } from "vitest"
+import { describe, expect, it } from "vitest"
 
-import { expectCompleteCatalogs } from "../../../i18n/test-catalogs"
 import { mediaMessages } from "../messages"
 import { mediaCatalogLocales } from "./catalogs"
 import { messages as enUS } from "./en-US"
@@ -20,3 +19,20 @@ describe("media locale catalogs", () => {
     })
   })
 })
+
+function expectCompleteCatalogs({
+  catalogs,
+  locales,
+  messageIds,
+}: {
+  catalogs: Readonly<Record<string, Readonly<Record<string, string>>>>
+  locales: readonly string[]
+  messageIds: readonly string[]
+}) {
+  expect(Object.keys(catalogs)).toEqual([...locales])
+
+  const expectedIds = new Set(messageIds)
+  for (const messages of Object.values(catalogs)) {
+    expect(new Set(Object.keys(messages))).toEqual(expectedIds)
+  }
+}
diff --git a/packages/media/src/locales/catalogs.ts b/packages/media/src/locales/catalogs.ts
new file mode 100644
index 0000000..a79031e
--- /dev/null
+++ b/packages/media/src/locales/catalogs.ts
@@ -0,0 +1,16 @@
+import type { mediaMessages } from "../messages"
+
+export const mediaCatalogLocales = ["en-US", "zh-Hans"] as const
+
+interface MessageDescriptorMap {
+  readonly [key: string]: {
+    readonly id: string
+  }
+}
+
+type MessageId<T extends MessageDescriptorMap> = T[keyof T]["id"]
+
+export type MediaCatalogLocale = (typeof mediaCatalogLocales)[number]
+export type MediaMessageCatalog = Readonly<
+  Record<MessageId<typeof mediaMessages>, string>
+>
diff --git a/packages/blocks/src/blocks/media/locales/en-US.ts b/packages/media/src/locales/en-US.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/locales/en-US.ts
rename to packages/media/src/locales/en-US.ts
diff --git a/packages/blocks/src/blocks/media/locales/zh-Hans.ts b/packages/media/src/locales/zh-Hans.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/locales/zh-Hans.ts
rename to packages/media/src/locales/zh-Hans.ts
diff --git a/packages/blocks/src/blocks/media/media-context-menu.tsx b/packages/media/src/media-context-menu.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media-context-menu.tsx
rename to packages/media/src/media-context-menu.tsx
diff --git a/packages/blocks/src/blocks/media/media-detail.tsx b/packages/media/src/media-detail.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media-detail.tsx
rename to packages/media/src/media-detail.tsx
diff --git a/packages/blocks/src/blocks/media/media-grid.tsx b/packages/media/src/media-grid.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media-grid.tsx
rename to packages/media/src/media-grid.tsx
diff --git a/packages/blocks/src/blocks/media/media-library.tsx b/packages/media/src/media-library.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media-library.tsx
rename to packages/media/src/media-library.tsx
diff --git a/packages/blocks/src/blocks/media/media-picker-dialog.tsx b/packages/media/src/media-picker-dialog.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media-picker-dialog.tsx
rename to packages/media/src/media-picker-dialog.tsx
diff --git a/packages/blocks/src/blocks/media/media.test.tsx b/packages/media/src/media.test.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/media.test.tsx
rename to packages/media/src/media.test.tsx
diff --git a/packages/blocks/src/blocks/media/messages.ts b/packages/media/src/messages.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/messages.ts
rename to packages/media/src/messages.ts
diff --git a/packages/blocks/src/blocks/media/sidebar.tsx b/packages/media/src/sidebar.tsx
similarity index 100%
rename from packages/blocks/src/blocks/media/sidebar.tsx
rename to packages/media/src/sidebar.tsx
diff --git a/packages/media/src/styles/globals.css b/packages/media/src/styles/globals.css
new file mode 100644
index 0000000..f3275b1
--- /dev/null
+++ b/packages/media/src/styles/globals.css
@@ -0,0 +1 @@
+@source "../";
diff --git a/packages/blocks/src/blocks/media/types.ts b/packages/media/src/types.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/types.ts
rename to packages/media/src/types.ts
diff --git a/packages/blocks/src/blocks/media/utils.ts b/packages/media/src/utils.ts
similarity index 100%
rename from packages/blocks/src/blocks/media/utils.ts
rename to packages/media/src/utils.ts
diff --git a/packages/media/tsconfig.json b/packages/media/tsconfig.json
new file mode 100644
index 0000000..e5515ce
--- /dev/null
+++ b/packages/media/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "paths": {
+      "@workspace/i18n": ["../i18n/src/index.ts"],
+      "@workspace/ui/*": ["../ui/src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
\ No newline at end of file