diff --git a/package.json b/package.json
index 52cb647f..ba1053f6 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@formkit/vue": "1.0.0-beta.10",
     "@halo-dev/admin-api": "^1.1.0",
     "@halo-dev/admin-shared": "workspace:*",
-    "@halo-dev/api-client": "^0.0.8",
+    "@halo-dev/api-client": "^0.0.9",
     "@halo-dev/components": "workspace:*",
     "@vueuse/components": "^8.9.4",
     "@vueuse/core": "^8.9.4",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 10dde1bf..db14eca3 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -36,7 +36,7 @@
   "homepage": "https://github.com/halo-dev/halo-admin/tree/next/shared/components#readme",
   "license": "MIT",
   "dependencies": {
-    "@halo-dev/api-client": "^0.0.8",
+    "@halo-dev/api-client": "^0.0.9",
     "@halo-dev/components": "workspace:*",
     "axios": "^0.27.2"
   },
diff --git a/packages/shared/src/utils/api-client.ts b/packages/shared/src/utils/api-client.ts
index 3bbb12df..b6b04b6d 100644
--- a/packages/shared/src/utils/api-client.ts
+++ b/packages/shared/src/utils/api-client.ts
@@ -10,6 +10,7 @@ import {
   V1alpha1SettingApi,
   V1alpha1UserApi,
   ThemeHaloRunV1alpha1ThemeApi,
+  ApiHaloRunV1alpha1ThemeApi,
 } from "@halo-dev/api-client";
 import type { AxiosInstance } from "axios";
 import axios from "axios";
@@ -67,6 +68,7 @@ function setupApiClient(axios: AxiosInstance) {
     },
     user: new ApiHaloRunV1alpha1UserApi(undefined, apiUrl, axios),
     plugin: new ApiHaloRunV1alpha1PluginApi(undefined, apiUrl, axios),
+    theme: new ApiHaloRunV1alpha1ThemeApi(undefined, apiUrl, axios),
   };
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8605a9c7..27d8bb67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ importers:
       '@formkit/vue': 1.0.0-beta.10
       '@halo-dev/admin-api': ^1.1.0
       '@halo-dev/admin-shared': workspace:*
-      '@halo-dev/api-client': ^0.0.8
+      '@halo-dev/api-client': ^0.0.9
       '@halo-dev/components': workspace:*
       '@rushstack/eslint-patch': ^1.1.4
       '@tailwindcss/aspect-ratio': ^0.4.0
@@ -84,7 +84,7 @@ importers:
       '@formkit/vue': 1.0.0-beta.10_wwmyxdjqen5bmh3tr2meig5lki
       '@halo-dev/admin-api': 1.1.0
       '@halo-dev/admin-shared': link:packages/shared
-      '@halo-dev/api-client': 0.0.8
+      '@halo-dev/api-client': 0.0.9
       '@halo-dev/components': link:packages/components
       '@vueuse/components': 8.9.4_vue@3.2.37
       '@vueuse/core': 8.9.4_vue@3.2.37
@@ -174,12 +174,12 @@ importers:
 
   packages/shared:
     specifiers:
-      '@halo-dev/api-client': ^0.0.8
+      '@halo-dev/api-client': ^0.0.9
       '@halo-dev/components': workspace:*
       axios: ^0.27.2
       vite-plugin-dts: ^1.4.1
     dependencies:
-      '@halo-dev/api-client': 0.0.8
+      '@halo-dev/api-client': 0.0.9
       '@halo-dev/components': link:../components
       axios: 0.27.2
     devDependencies:
@@ -2114,8 +2114,8 @@ packages:
       - debug
     dev: false
 
-  /@halo-dev/api-client/0.0.8:
-    resolution: {integrity: sha512-ANCJ9/O++FHyLfiREQQbNWHP0sj721VxoNqPgdG4ctDwbOdXpEyxgXKmOqGPadfThCtMolMS9XKDr6qG3q+xLQ==}
+  /@halo-dev/api-client/0.0.9:
+    resolution: {integrity: sha512-GhDbgIASrvUwVE1/jadowPWZnQMASaOIF9mS7FKcC3/UjHZGBmxx03ECVLc7PH1hnHqsNTCbiLUDZtig6ZDuUw==}
     dev: false
 
   /@halo-dev/logger/1.1.0:
diff --git a/src/modules/interface/themes/components/ThemeInstallModal.vue b/src/modules/interface/themes/components/ThemeInstallModal.vue
new file mode 100644
index 00000000..c6e55fcc
--- /dev/null
+++ b/src/modules/interface/themes/components/ThemeInstallModal.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { VModal } from "@halo-dev/components";
+import VueFilePond from "vue-filepond";
+import "filepond/dist/filepond.min.css";
+import { apiClient } from "@halo-dev/admin-shared";
+
+const FilePond = VueFilePond();
+
+defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["update:visible", "close"]);
+
+const handleVisibleChange = (visible: boolean) => {
+  emit("update:visible", visible);
+  if (!visible) {
+    emit("close");
+  }
+};
+
+const server = {
+  process: (fieldName, file, metadata, load) => {
+    const formData = new FormData();
+    formData.append(fieldName, file, file.name);
+
+    apiClient.theme.installTheme(file).then((response) => {
+      load(response);
+      handleVisibleChange(false);
+    });
+
+    return {};
+  },
+};
+</script>
+<template>
+  <VModal
+    :visible="visible"
+    :width="500"
+    title="安装主题"
+    @update:visible="handleVisibleChange"
+  >
+    <file-pond
+      ref="pond"
+      :allow-multiple="false"
+      :server="server"
+      label-idle="Drop ZIP file here..."
+      name="file"
+    />
+  </VModal>
+</template>
diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index 053b226d..c5b9c660 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -7,6 +7,7 @@ import {
   VSpace,
   VTag,
 } from "@halo-dev/components";
+import ThemeInstallModal from "./ThemeInstallModal.vue";
 import type { PropType } from "vue";
 import { onMounted, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
@@ -30,6 +31,7 @@ defineProps({
 const emit = defineEmits(["update:visible", "close", "update:selectedTheme"]);
 
 const themes = ref<Theme[]>([]);
+const themeInstall = ref(false);
 
 const handleFetchThemes = async () => {
   try {
@@ -137,7 +139,17 @@ defineExpose({
       </li>
     </ul>
     <template #footer>
-      <VButton @click="handleVisibleChange(false)">关闭</VButton>
+      <VSpace>
+        <VButton type="secondary" @click="themeInstall = true">
+          安装主题
+        </VButton>
+        <VButton @click="handleVisibleChange(false)">关闭</VButton>
+      </VSpace>
     </template>
   </VModal>
+
+  <ThemeInstallModal
+    v-model:visible="themeInstall"
+    @close="handleFetchThemes"
+  />
 </template>