diff --git a/apps/space/components/issues/navbar/theme.tsx b/apps/space/components/issues/navbar/theme.tsx
index 81762b5d22c..faea53ba3bb 100644
--- a/apps/space/components/issues/navbar/theme.tsx
+++ b/apps/space/components/issues/navbar/theme.tsx
@@ -1,42 +1,25 @@
 "use client";
 
-// react
-import { useEffect } from "react";
-
 // next theme
 import { useTheme } from "next-themes";
 
 // mobx react lite
 import { observer } from "mobx-react-lite";
-// mobx
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 
 export const NavbarTheme = observer(() => {
-  const store: RootStore = useMobxStore();
-
-  const { setTheme, theme = "light" } = useTheme();
+  const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
-    store?.theme?.setTheme(store?.theme?.theme === "light" ? "dark" : "light");
     setTheme(theme === "light" ? "dark" : "light");
-    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
   };
 
-  useEffect(() => {
-    document?.documentElement.setAttribute("data-theme", theme ?? store?.theme?.theme);
-  }, [theme, store]);
-
   return (
-    <div
-      className="relative w-[28px] h-[28px] flex justify-center items-center cursor-pointer bg-custom-background-100 hover:bg-custom-background-200 hover:bg-custom-background-200/60 text-custom-text-100 transition-all"
+    <button
+      type="button"
       onClick={handleTheme}
+      className="relative w-7 h-7 grid place-items-center bg-custom-background-100 hover:bg-custom-background-80 text-custom-text-100 rounded"
     >
-      {theme === "light" ? (
-        <span className={`material-symbols-rounded text-[18px]`}>dark_mode</span>
-      ) : (
-        <span className={`material-symbols-rounded text-[18px]`}>light_mode</span>
-      )}
-    </div>
+      <span className="material-symbols-rounded text-sm">{theme === "light" ? "dark_mode" : "light_mode"}</span>
+    </button>
   );
 });
diff --git a/apps/space/lib/mobx/store-init.tsx b/apps/space/lib/mobx/store-init.tsx
index 1412a1015b1..6e38d9c6d17 100644
--- a/apps/space/lib/mobx/store-init.tsx
+++ b/apps/space/lib/mobx/store-init.tsx
@@ -13,13 +13,6 @@ const MobxStoreInit = () => {
   const router = useRouter();
   const { states, labels, priorities } = router.query as { states: string[]; labels: string[]; priorities: string[] };
 
-  useEffect(() => {
-    // theme
-    const _theme = localStorage && localStorage.getItem("app_theme") ? localStorage.getItem("app_theme") : "light";
-    if (_theme && store?.theme?.theme != _theme) store.theme.setTheme(_theme);
-    else localStorage.setItem("app_theme", _theme && _theme != "light" ? "dark" : "light");
-  }, [store?.theme]);
-
   // useEffect(() => {
   //   store.issue.userSelectedLabels = labels || [];
   //   store.issue.userSelectedPriorities = priorities || [];
diff --git a/apps/space/pages/_app.tsx b/apps/space/pages/_app.tsx
index 3bfdf5930ba..900b39f61f9 100644
--- a/apps/space/pages/_app.tsx
+++ b/apps/space/pages/_app.tsx
@@ -32,7 +32,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <link rel="shortcut icon" href="/favicon/favicon.ico" />
       </Head>
       <ToastContextProvider>
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
           <Component {...pageProps} />
         </ThemeProvider>
       </ToastContextProvider>
diff --git a/apps/space/store/root.ts b/apps/space/store/root.ts
index 1d37053ffdb..6b87020ef7a 100644
--- a/apps/space/store/root.ts
+++ b/apps/space/store/root.ts
@@ -2,25 +2,20 @@
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
 import UserStore from "./user";
-import ThemeStore from "./theme";
 import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
-// types
-import { IThemeStore } from "types/theme";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user: UserStore;
-  theme: IThemeStore;
   issue: IIssueStore;
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
 
   constructor() {
     this.user = new UserStore(this);
-    this.theme = new ThemeStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);
diff --git a/apps/space/store/theme.ts b/apps/space/store/theme.ts
deleted file mode 100644
index 1a6b9b2c230..00000000000
--- a/apps/space/store/theme.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-// mobx
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// types
-import { IThemeStore } from "types/theme";
-
-class ThemeStore implements IThemeStore {
-  theme: "light" | "dark" = "light";
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any | null = null) {
-    makeObservable(this, {
-      // observable
-      theme: observable,
-      // action
-      setTheme: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-  }
-
-  setTheme = async (_theme: "light" | "dark" | string) => {
-    try {
-      localStorage.setItem("app_theme", _theme);
-      this.theme = _theme === "light" ? "light" : "dark";
-    } catch (error) {
-      console.error("setting user theme error", error);
-    }
-  };
-}
-
-export default ThemeStore;