diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index 308cde515..2dfb74db8 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -11,10 +11,12 @@ import {
   VEntity,
   VEntityField,
   VStatusDot,
+  VTabItem,
+  VTabs,
 } from "@halo-dev/components";
 import LazyImage from "@/components/image/LazyImage.vue";
 import ThemeInstallModal from "./ThemeInstallModal.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { usePermission } from "@/utils/permission";
@@ -41,15 +43,22 @@ const emit = defineEmits<{
   (event: "select", theme: Theme | null): void;
 }>();
 
-const themes = ref<Theme[]>([]);
+const activeTab = ref("installed");
+const themes = ref<Theme[]>([] as Theme[]);
 const loading = ref(false);
 const themeInstall = ref(false);
+const creating = ref(false);
+
+const modalTitle = computed(() => {
+  return activeTab.value === "installed" ? "已安装的主题" : "未安装的主题";
+});
 
 const handleFetchThemes = async () => {
   try {
     loading.value = true;
-    const { data } =
-      await apiClient.extension.theme.listthemeHaloRunV1alpha1Theme();
+    const { data } = await apiClient.theme.listThemes({
+      uninstalled: activeTab.value !== "installed",
+    });
     themes.value = data.items;
   } catch (e) {
     console.error("Failed to fetch themes", e);
@@ -58,6 +67,13 @@ const handleFetchThemes = async () => {
   }
 };
 
+watch(
+  () => activeTab.value,
+  () => {
+    handleFetchThemes();
+  }
+);
+
 const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
   Dialog.warning({
     title: `${
@@ -99,6 +115,27 @@ const handleUninstall = async (theme: Theme, deleteExtensions?: boolean) => {
   });
 };
 
+const handleCreateTheme = async (theme: Theme) => {
+  try {
+    creating.value = true;
+
+    const { data } =
+      await apiClient.extension.theme.createthemeHaloRunV1alpha1Theme({
+        theme,
+      });
+
+    // create theme settings
+    apiClient.theme.reloadThemeSetting({ name: data.metadata.name });
+
+    activeTab.value = "installed";
+  } catch (error) {
+    console.error("Failed to create theme", error);
+  } finally {
+    creating.value = false;
+    handleFetchThemes();
+  }
+};
+
 const onVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
@@ -131,143 +168,261 @@ defineExpose({
     :visible="visible"
     :width="888"
     height="calc(100vh - 20px)"
-    title="已安装的主题"
+    :title="modalTitle"
     @update:visible="onVisibleChange"
   >
-    <VEmpty
-      v-if="!themes.length && !loading"
-      message="当前没有已安装的主题，你可以尝试刷新或者安装新主题"
-      title="当前没有已安装的主题"
+    <VTabs
+      v-model:active-id="activeTab"
+      type="outline"
+      class="my-[12px] mx-[16px]"
     >
-      <template #actions>
-        <VSpace>
-          <VButton @click="handleFetchThemes"> 刷新</VButton>
-          <VButton
-            v-permission="['system:themes:manage']"
-            type="primary"
-            @click="themeInstall = true"
-          >
-            <template #icon>
-              <IconAddCircle class="h-full w-full" />
-            </template>
-            安装主题
-          </VButton>
-        </VSpace>
-      </template>
-    </VEmpty>
+      <VTabItem id="installed" label="已安装" class="-mx-[16px]">
+        <VEmpty
+          v-if="!themes.length && !loading"
+          message="当前没有已安装的主题，你可以尝试刷新或者安装新主题"
+          title="当前没有已安装的主题"
+        >
+          <template #actions>
+            <VSpace>
+              <VButton :loading="loading" @click="handleFetchThemes">
+                刷新
+              </VButton>
+              <VButton
+                v-permission="['system:themes:manage']"
+                type="primary"
+                @click="themeInstall = true"
+              >
+                <template #icon>
+                  <IconAddCircle class="h-full w-full" />
+                </template>
+                安装主题
+              </VButton>
+            </VSpace>
+          </template>
+        </VEmpty>
 
-    <ul
-      v-else
-      class="box-border h-full w-full divide-y divide-gray-100"
-      role="list"
-    >
-      <li
-        v-for="(theme, index) in themes"
-        :key="index"
-        @click="handleSelectTheme(theme)"
-      >
-        <VEntity
-          :is-selected="theme.metadata.name === selectedTheme?.metadata?.name"
+        <ul
+          v-else
+          class="box-border h-full w-full divide-y divide-gray-100"
+          role="list"
         >
-          <template #start>
-            <VEntityField>
-              <template #description>
-                <div class="w-32">
-                  <div
-                    class="group aspect-w-4 aspect-h-3 block w-full overflow-hidden rounded border bg-gray-100"
-                  >
-                    <LazyImage
-                      :src="theme.spec.logo"
-                      :alt="theme.spec.displayName"
-                      classes="pointer-events-none object-cover group-hover:opacity-75"
-                    >
-                      <template #loading>
-                        <div
-                          class="flex h-full items-center justify-center object-cover"
-                        >
-                          <span class="text-xs text-gray-400">加载中...</span>
-                        </div>
-                      </template>
-                      <template #error>
-                        <div
-                          class="flex h-full items-center justify-center object-cover"
-                        >
-                          <span class="text-xs text-red-400">加载异常</span>
-                        </div>
-                      </template>
-                    </LazyImage>
-                  </div>
-                </div>
-              </template>
-            </VEntityField>
-            <VEntityField
-              :title="theme.spec.displayName"
-              :description="theme.spec.version"
+          <li
+            v-for="(theme, index) in themes"
+            :key="index"
+            @click="handleSelectTheme(theme)"
+          >
+            <VEntity
+              :is-selected="
+                theme.metadata.name === selectedTheme?.metadata?.name
+              "
             >
-              <template #extra>
-                <VTag
-                  v-if="theme.metadata.name === activatedTheme?.metadata?.name"
+              <template #start>
+                <VEntityField>
+                  <template #description>
+                    <div class="w-32">
+                      <div
+                        class="group aspect-w-4 aspect-h-3 block w-full overflow-hidden rounded border bg-gray-100"
+                      >
+                        <LazyImage
+                          :key="theme.metadata.name"
+                          :src="theme.spec.logo"
+                          :alt="theme.spec.displayName"
+                          classes="pointer-events-none object-cover group-hover:opacity-75"
+                        >
+                          <template #loading>
+                            <div
+                              class="flex h-full items-center justify-center object-cover"
+                            >
+                              <span class="text-xs text-gray-400"
+                                >加载中...</span
+                              >
+                            </div>
+                          </template>
+                          <template #error>
+                            <div
+                              class="flex h-full items-center justify-center object-cover"
+                            >
+                              <span class="text-xs text-red-400">加载异常</span>
+                            </div>
+                          </template>
+                        </LazyImage>
+                      </div>
+                    </div>
+                  </template>
+                </VEntityField>
+                <VEntityField
+                  :title="theme.spec.displayName"
+                  :description="theme.spec.version"
                 >
-                  当前启用
-                </VTag>
+                  <template #extra>
+                    <VTag
+                      v-if="
+                        theme.metadata.name === activatedTheme?.metadata?.name
+                      "
+                    >
+                      当前启用
+                    </VTag>
+                  </template>
+                </VEntityField>
               </template>
-            </VEntityField>
-          </template>
-          <template #end>
-            <VEntityField v-if="theme.metadata.deletionTimestamp">
-              <template #description>
-                <VStatusDot v-tooltip="`删除中`" state="warning" animate />
+              <template #end>
+                <VEntityField v-if="theme.metadata.deletionTimestamp">
+                  <template #description>
+                    <VStatusDot v-tooltip="`删除中`" state="warning" animate />
+                  </template>
+                </VEntityField>
+                <VEntityField>
+                  <template #description>
+                    <a
+                      class="text-sm text-gray-400 hover:text-blue-600"
+                      :href="theme.spec.author.website"
+                      target="_blank"
+                      @click.stop
+                    >
+                      {{ theme.spec.author.name }}
+                    </a>
+                  </template>
+                </VEntityField>
+                <VEntityField>
+                  <template #description>
+                    <a
+                      :href="theme.spec.repo"
+                      class="text-gray-900 hover:text-blue-600"
+                      target="_blank"
+                    >
+                      <IconGitHub />
+                    </a>
+                  </template>
+                </VEntityField>
               </template>
-            </VEntityField>
-            <VEntityField>
-              <template #description>
-                <a
-                  class="text-sm text-gray-400 hover:text-blue-600"
-                  :href="theme.spec.author.website"
-                  target="_blank"
-                  @click.stop
+              <template
+                v-if="currentUserHasPermission(['system:themes:manage'])"
+                #dropdownItems
+              >
+                <VButton
+                  v-close-popper
+                  block
+                  type="danger"
+                  @click="handleUninstall(theme)"
                 >
-                  {{ theme.spec.author.name }}
-                </a>
-              </template>
-            </VEntityField>
-            <VEntityField>
-              <template #description>
-                <a
-                  :href="theme.spec.repo"
-                  class="text-gray-900 hover:text-blue-600"
-                  target="_blank"
+                  卸载
+                </VButton>
+                <VButton
+                  v-close-popper
+                  :disabled="
+                    theme.metadata.name === activatedTheme?.metadata?.name
+                  "
+                  block
+                  type="danger"
+                  @click="handleUninstall(theme, true)"
                 >
-                  <IconGitHub />
-                </a>
+                  卸载并删除配置
+                </VButton>
               </template>
-            </VEntityField>
-          </template>
-          <template
-            v-if="currentUserHasPermission(['system:themes:manage'])"
-            #dropdownItems
-          >
-            <VButton
-              v-close-popper
-              block
-              type="danger"
-              @click="handleUninstall(theme)"
-            >
-              卸载
-            </VButton>
-            <VButton
-              v-close-popper
-              :disabled="theme.metadata.name === activatedTheme?.metadata?.name"
-              block
-              type="danger"
-              @click="handleUninstall(theme, true)"
-            >
-              卸载并删除配置
-            </VButton>
+            </VEntity>
+          </li>
+        </ul>
+      </VTabItem>
+      <VTabItem id="uninstalled" label="未安装" class="-mx-[16px]">
+        <VEmpty v-if="!themes.length && !loading" title="当前没有未安装的主题">
+          <template #actions>
+            <VSpace>
+              <VButton :loading="loading" @click="handleFetchThemes">
+                刷新
+              </VButton>
+            </VSpace>
           </template>
-        </VEntity>
-      </li>
-    </ul>
+        </VEmpty>
+
+        <ul
+          v-else
+          class="box-border h-full w-full divide-y divide-gray-100"
+          role="list"
+        >
+          <li v-for="(theme, index) in themes" :key="index">
+            <VEntity>
+              <template #start>
+                <VEntityField>
+                  <template #description>
+                    <div class="w-32">
+                      <div
+                        class="group aspect-w-4 aspect-h-3 block w-full overflow-hidden rounded border bg-gray-100"
+                      >
+                        <LazyImage
+                          :key="theme.metadata.name"
+                          :src="theme.spec.logo"
+                          :alt="theme.spec.displayName"
+                          classes="pointer-events-none object-cover group-hover:opacity-75"
+                        >
+                          <template #loading>
+                            <div
+                              class="flex h-full items-center justify-center object-cover"
+                            >
+                              <span class="text-xs text-gray-400"
+                                >加载中...</span
+                              >
+                            </div>
+                          </template>
+                          <template #error>
+                            <div
+                              class="flex h-full items-center justify-center object-cover"
+                            >
+                              <span class="text-xs text-red-400">加载异常</span>
+                            </div>
+                          </template>
+                        </LazyImage>
+                      </div>
+                    </div>
+                  </template>
+                </VEntityField>
+                <VEntityField
+                  :title="theme.spec.displayName"
+                  :description="theme.spec.version"
+                >
+                </VEntityField>
+              </template>
+              <template #end>
+                <VEntityField>
+                  <template #description>
+                    <a
+                      class="text-sm text-gray-400 hover:text-blue-600"
+                      :href="theme.spec.author.website"
+                      target="_blank"
+                      @click.stop
+                    >
+                      {{ theme.spec.author.name }}
+                    </a>
+                  </template>
+                </VEntityField>
+                <VEntityField>
+                  <template #description>
+                    <a
+                      :href="theme.spec.repo"
+                      class="text-gray-900 hover:text-blue-600"
+                      target="_blank"
+                    >
+                      <IconGitHub />
+                    </a>
+                  </template>
+                </VEntityField>
+                <VEntityField v-permission="['system:themes:manage']">
+                  <template #description>
+                    <VButton
+                      size="sm"
+                      :disabled="creating"
+                      @click="handleCreateTheme(theme)"
+                    >
+                      安装
+                    </VButton>
+                  </template>
+                </VEntityField>
+              </template>
+            </VEntity>
+          </li>
+        </ul>
+      </VTabItem>
+    </VTabs>
+
     <template #footer>
       <VSpace>
         <VButton