diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
index 5774d0ff8a33..ae50fcee1654 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/about/index.tsx
@@ -111,7 +111,7 @@ export const AboutAffine = () => {
           desc={t['com.affine.telemetry.enable.desc']()}
         >
           <Switch
-            checked={appSettings.enableTelemetry}
+            checked={appSettings.enableTelemetry !== false}
             onChange={onSwitchTelemetry}
           />
         </SettingRow>
diff --git a/packages/frontend/core/src/telemetry.tsx b/packages/frontend/core/src/telemetry.tsx
new file mode 100644
index 000000000000..d3830c641361
--- /dev/null
+++ b/packages/frontend/core/src/telemetry.tsx
@@ -0,0 +1,20 @@
+import { appSettingAtom } from '@toeverything/infra';
+import { useAtomValue } from 'jotai/react';
+import mixpanel from 'mixpanel-browser';
+import { useLayoutEffect } from 'react';
+
+export function Telemetry() {
+  const settings = useAtomValue(appSettingAtom);
+  useLayoutEffect(() => {
+    if (process.env.MIXPANEL_TOKEN) {
+      mixpanel.init(process.env.MIXPANEL_TOKEN || '', {
+        track_pageview: true,
+        persistence: 'localStorage',
+      });
+    }
+    if (settings.enableTelemetry !== false) {
+      mixpanel.opt_out_tracking();
+    }
+  }, [settings.enableTelemetry]);
+  return null;
+}
diff --git a/packages/frontend/electron/package.json b/packages/frontend/electron/package.json
index ca19e81f42f7..ed1930fac782 100644
--- a/packages/frontend/electron/package.json
+++ b/packages/frontend/electron/package.json
@@ -44,7 +44,6 @@
     "@emotion/react": "^11.11.4",
     "@pengx17/electron-forge-maker-appimage": "^1.1.1",
     "@toeverything/infra": "workspace:*",
-    "@types/mixpanel-browser": "^2.49.0",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "builder-util-runtime": "^9.2.4",
@@ -60,7 +59,6 @@
     "jotai": "^2.6.5",
     "jotai-devtools": "^0.8.0",
     "lodash-es": "^4.17.21",
-    "mixpanel-browser": "^2.49.0",
     "nanoid": "^5.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/packages/frontend/electron/renderer/app.tsx b/packages/frontend/electron/renderer/app.tsx
index 67bab60ea291..a4076efbc4bb 100644
--- a/packages/frontend/electron/renderer/app.tsx
+++ b/packages/frontend/electron/renderer/app.tsx
@@ -12,12 +12,12 @@ import {
   performanceLogger,
   performanceRenderLogger,
 } from '@affine/core/shared';
+import { Telemetry } from '@affine/core/telemetry';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { configureWebServices } from '@affine/core/web';
 import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';
 import { getCurrentStore, ServiceCollection } from '@toeverything/infra';
-import mixpanel from 'mixpanel-browser';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
@@ -62,13 +62,6 @@ const serviceProvider = services.provider();
 export function App() {
   performanceRenderLogger.info('App');
 
-  if (process.env.MIXPANEL_TOKEN) {
-    mixpanel.init(process.env.MIXPANEL_TOKEN || '', {
-      track_pageview: true,
-      persistence: 'localStorage',
-    });
-  }
-
   if (!languageLoadingPromise) {
     languageLoadingPromise = loadLanguage().catch(console.error);
   }
@@ -79,6 +72,7 @@ export function App() {
         <CacheProvider value={cache}>
           <AffineContext store={getCurrentStore()}>
             <CloudSessionProvider>
+              <Telemetry />
               <DebugProvider>
                 <GlobalLoading />
                 <NotificationCenter />
diff --git a/packages/frontend/web/package.json b/packages/frontend/web/package.json
index aa9503fa7b03..4e3dc1ff218b 100644
--- a/packages/frontend/web/package.json
+++ b/packages/frontend/web/package.json
@@ -16,13 +16,12 @@
     "@juggle/resize-observer": "^3.4.0",
     "core-js": "^3.36.1",
     "intl-segmenter-polyfill-rs": "^0.1.7",
-    "mixpanel-browser": "^2.49.0",
+    "jotai": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@affine/cli": "workspace:*",
-    "@types/mixpanel-browser": "^2.49.0",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "typescript": "^5.3.3"
diff --git a/packages/frontend/web/src/app.tsx b/packages/frontend/web/src/app.tsx
index 67bab60ea291..a4076efbc4bb 100644
--- a/packages/frontend/web/src/app.tsx
+++ b/packages/frontend/web/src/app.tsx
@@ -12,12 +12,12 @@ import {
   performanceLogger,
   performanceRenderLogger,
 } from '@affine/core/shared';
+import { Telemetry } from '@affine/core/telemetry';
 import createEmotionCache from '@affine/core/utils/create-emotion-cache';
 import { configureWebServices } from '@affine/core/web';
 import { createI18n, setUpLanguage } from '@affine/i18n';
 import { CacheProvider } from '@emotion/react';
 import { getCurrentStore, ServiceCollection } from '@toeverything/infra';
-import mixpanel from 'mixpanel-browser';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { lazy, Suspense } from 'react';
 import { RouterProvider } from 'react-router-dom';
@@ -62,13 +62,6 @@ const serviceProvider = services.provider();
 export function App() {
   performanceRenderLogger.info('App');
 
-  if (process.env.MIXPANEL_TOKEN) {
-    mixpanel.init(process.env.MIXPANEL_TOKEN || '', {
-      track_pageview: true,
-      persistence: 'localStorage',
-    });
-  }
-
   if (!languageLoadingPromise) {
     languageLoadingPromise = loadLanguage().catch(console.error);
   }
@@ -79,6 +72,7 @@ export function App() {
         <CacheProvider value={cache}>
           <AffineContext store={getCurrentStore()}>
             <CloudSessionProvider>
+              <Telemetry />
               <DebugProvider>
                 <GlobalLoading />
                 <NotificationCenter />
diff --git a/yarn.lock b/yarn.lock
index 4139fd031163..d7abd3e1103a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -466,7 +466,6 @@ __metadata:
     "@emotion/react": "npm:^11.11.4"
     "@pengx17/electron-forge-maker-appimage": "npm:^1.1.1"
     "@toeverything/infra": "workspace:*"
-    "@types/mixpanel-browser": "npm:^2.49.0"
     "@types/uuid": "npm:^9.0.8"
     "@vitejs/plugin-react-swc": "npm:^3.6.0"
     async-call-rpc: "npm:^6.4.0"
@@ -485,7 +484,6 @@ __metadata:
     jotai-devtools: "npm:^0.8.0"
     link-preview-js: "npm:^3.0.5"
     lodash-es: "npm:^4.17.21"
-    mixpanel-browser: "npm:^2.49.0"
     nanoid: "npm:^5.0.6"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -827,12 +825,11 @@ __metadata:
     "@affine/core": "workspace:*"
     "@affine/env": "workspace:*"
     "@juggle/resize-observer": "npm:^3.4.0"
-    "@types/mixpanel-browser": "npm:^2.49.0"
     "@types/react": "npm:^18.2.60"
     "@types/react-dom": "npm:^18.2.19"
     core-js: "npm:^3.36.1"
     intl-segmenter-polyfill-rs: "npm:^0.1.7"
-    mixpanel-browser: "npm:^2.49.0"
+    jotai: "npm:^2.7.1"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     typescript: "npm:^5.3.3"
@@ -25242,9 +25239,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jotai@npm:^2.6.5":
-  version: 2.6.5
-  resolution: "jotai@npm:2.6.5"
+"jotai@npm:^2.6.5, jotai@npm:^2.7.1":
+  version: 2.7.1
+  resolution: "jotai@npm:2.7.1"
   peerDependencies:
     "@types/react": ">=17.0.0"
     react: ">=17.0.0"
@@ -25253,7 +25250,7 @@ __metadata:
       optional: true
     react:
       optional: true
-  checksum: 10/21461f2d97158607a72848c09ac6a46142f28b1cc6b1c9c026d9b48129627ca581307789670232e4ff3bede678ccc57f937edd5c40efaa9bce4a2daed43dcd26
+  checksum: 10/7f735bb771885bee5dcd7e807458281d5422526837bbc52d9bcca9a093117245880794a868ff4e19fcd016064353d64e8d6f7b7485c081d678c51ac7fc459da8
   languageName: node
   linkType: hard