diff --git a/src/stores/theme.ts b/src/stores/theme.ts
index a58e012e..2b92128a 100644
--- a/src/stores/theme.ts
+++ b/src/stores/theme.ts
@@ -1,46 +1,41 @@
 import { apiClient } from "@/utils/api-client";
 import type { Theme } from "@halo-dev/api-client";
 import { defineStore } from "pinia";
+import { ref } from "vue";
 
-interface ThemeStoreState {
-  activatedTheme?: Theme;
-}
+export const useThemeStore = defineStore("theme", () => {
+  const activatedTheme = ref<Theme>();
 
-export const useThemeStore = defineStore("theme", {
-  state: (): ThemeStoreState => ({
-    activatedTheme: undefined,
-  }),
-  actions: {
-    async fetchActivatedTheme() {
-      try {
-        const { data } =
-          await apiClient.extension.configMap.getv1alpha1ConfigMap(
-            {
-              name: "system",
-            },
-            { mute: true }
-          );
+  async function fetchActivatedTheme() {
+    try {
+      const { data } = await apiClient.extension.configMap.getv1alpha1ConfigMap(
+        {
+          name: "system",
+        },
+        { mute: true }
+      );
 
-        if (!data.data?.theme) {
-          return;
-        }
-
-        const themeConfig = JSON.parse(data.data.theme);
-
-        const { data: themeData } =
-          await apiClient.extension.theme.getthemeHaloRunV1alpha1Theme(
-            {
-              name: themeConfig.active,
-            },
-            {
-              mute: true,
-            }
-          );
-
-        this.activatedTheme = themeData;
-      } catch (e) {
-        console.error("Failed to fetch active theme", e);
+      if (!data.data?.theme) {
+        return;
       }
-    },
-  },
+
+      const themeConfig = JSON.parse(data.data.theme);
+
+      const { data: themeData } =
+        await apiClient.extension.theme.getthemeHaloRunV1alpha1Theme(
+          {
+            name: themeConfig.active,
+          },
+          {
+            mute: true,
+          }
+        );
+
+      activatedTheme.value = themeData;
+    } catch (e) {
+      console.error("Failed to fetch active theme", e);
+    }
+  }
+
+  return { activatedTheme, fetchActivatedTheme };
 });