diff --git a/package.json b/package.json
index ef31574..e0f33d5 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,12 @@
     "@swan-io/chicane": "1.3.4",
     "@tauri-apps/api": "1.2.0",
     "@total-typescript/ts-reset": "0.4.2",
+    "jotai": "2.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-use": "17.4.0",
     "ress": "5.0.2",
-    "ts-pattern": "4.2.2",
-    "valtio": "1.10.3"
+    "ts-pattern": "4.2.2"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f03a8d5..c6f77ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   core-dts: 0.0.3
   eslint: 8.36.0
   eslint-config-with-tsconfig: 1.2.3
+  jotai: 2.0.3
   prettier: 2.8.7
   react: 18.2.0
   react-dom: 18.2.0
@@ -26,7 +27,6 @@ specifiers:
   sass: 1.60.0
   ts-pattern: 4.2.2
   typescript: 5.0.2
-  valtio: 1.10.3
   vite: 4.2.1
 
 dependencies:
@@ -38,12 +38,12 @@ dependencies:
   '@swan-io/chicane': 1.3.4_react@18.2.0
   '@tauri-apps/api': 1.2.0
   '@total-typescript/ts-reset': 0.4.2
+  jotai: 2.0.3_react@18.2.0
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
   react-use: 17.4.0_biqbaboplfbrettd7655fr4n2y
   ress: 5.0.2
   ts-pattern: 4.2.2
-  valtio: 1.10.3_react@18.2.0
 
 devDependencies:
   '@babel/core': 7.21.3
@@ -3281,6 +3281,18 @@ packages:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
     dev: true
 
+  /jotai/2.0.3_react@18.2.0:
+    resolution: {integrity: sha512-MMjhSPAL3RoeZD9WbObufRT2quThEAEknHHridf2ma8Ml7ZVQmUiHk0ssdbR3F0h3kcwhYqSGJ59OjhPge7RRg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      react: '>=17.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /js-cookie/2.2.1:
     resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
     dev: false
@@ -3802,10 +3814,6 @@ packages:
       react-is: 16.13.1
     dev: true
 
-  /proxy-compare/2.5.0:
-    resolution: {integrity: sha512-f1us0OsVAJ3tdIMXGQx2lmseYS4YXe4W+sKF5g5ww/jV+5ogMadPt+sIZ+88Ga9kvMJsrRNWzCrKPpr6pMWYbA==}
-    dev: false
-
   /punycode/2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -4616,20 +4624,6 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /valtio/1.10.3_react@18.2.0:
-    resolution: {integrity: sha512-t3Ez/+baJ+Z5tIyeaI6nCAbW/hrmcq2jditwg/X++o5IvCdiGirQKTOv1kJq0glgUo13v5oABCVGcinggBfiKw==}
-    engines: {node: '>=12.20.0'}
-    peerDependencies:
-      react: '>=16.8'
-    peerDependenciesMeta:
-      react:
-        optional: true
-    dependencies:
-      proxy-compare: 2.5.0
-      react: 18.2.0
-      use-sync-external-store: 1.2.0_react@18.2.0
-    dev: false
-
   /vite/4.2.1_jbbgimbprg6gc6g7l5xgp24u3u:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 2026240..386f89d 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "SensiMouse",
-    "version": "0.0.1"
+    "version": "0.0.2"
   },
   "tauri": {
     "allowlist": {
diff --git a/src/app.tsx b/src/app.tsx
index d3c19fd..1983fdf 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,9 +1,11 @@
 import { type MantineThemeOverride } from '@mantine/core'
 import { MantineProvider } from '@mantine/core'
+import { Provider } from 'jotai/react'
 import { lazy, useMemo } from 'react'
 import { match } from 'ts-pattern'
 
 import { Router } from './router'
+import { store } from './store'
 import { styled } from './theme'
 
 const Main = lazy(() => import('./pages/Main'))
@@ -40,7 +42,9 @@ export const App = () => {
     return (
         <MantineProvider withGlobalStyles withCSSVariables theme={theme}>
             <AppShellScreen id="app-shell-screen">
-                <MainContent>{contentView}</MainContent>
+                <Provider store={store}>
+                    <MainContent>{contentView}</MainContent>
+                </Provider>
             </AppShellScreen>
         </MantineProvider>
     )
diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx
index 94950d1..51a1155 100644
--- a/src/pages/Main/index.tsx
+++ b/src/pages/Main/index.tsx
@@ -1,7 +1,7 @@
 import { Input, Text } from '@mantine/core'
-import { useSnapshot } from 'valtio'
+import { useAtom } from 'jotai/react'
 
-import { state, updateAccEnabled, updateSen } from '@/store'
+import { accEnabledAtom, senAtom } from '@/store'
 
 import * as SC from './styles'
 
@@ -14,7 +14,8 @@ const marks = [
 ]
 
 const Main = () => {
-    const data = useSnapshot(state)
+    const [sen, setSen] = useAtom(senAtom)
+    const [accEnabled, setAccEnabled] = useAtom(accEnabledAtom)
 
     return (
         <SC.Container>
@@ -23,12 +24,11 @@ const Main = () => {
                 <Input.Wrapper label="Sensitivity">
                     <SC.xSlider
                         size="lg"
-                        labelAlwaysOn
                         marks={marks}
                         min={0}
                         max={100}
-                        value={data.sen}
-                        onChange={updateSen}
+                        value={sen}
+                        onChange={setSen}
                         styles={theme => ({
                             markLabel: {
                                 color: '#55585f'
@@ -41,9 +41,9 @@ const Main = () => {
                         size="md"
                         onLabel="ON"
                         offLabel="OFF"
-                        checked={data.accEnabled}
+                        checked={accEnabled}
                         onChange={event => {
-                            updateAccEnabled(event.target.checked)
+                            setAccEnabled(event.target.checked)
                         }}
                     />
                 </Input.Wrapper>
diff --git a/src/pages/Main/styles.ts b/src/pages/Main/styles.ts
index 975d0cc..7bddaeb 100644
--- a/src/pages/Main/styles.ts
+++ b/src/pages/Main/styles.ts
@@ -32,7 +32,8 @@ export const xSlider = styled(Slider, {
 })
 
 export const xSwitch = styled(Switch, {
-    marginTop: '4px'
+    marginTop: '4px',
+    cursor: 'pointer'
 })
 
 export const xDivider = styled(Divider, {
diff --git a/src/store.ts b/src/store.ts
index 2fa1300..9760751 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,29 +1,25 @@
-/* eslint-disable functional/immutable-data */
 import { invoke } from '@tauri-apps/api/tauri'
-import { proxy } from 'valtio'
+import { atom, createStore } from 'jotai'
 
 import { on } from './helper'
 
-export const state = proxy({
-    sen: 0,
-    accEnabled: false
+export const store = createStore()
+
+export const senAtom = atom(0, (get, set, sen: number) => {
+    set(senAtom, sen)
+    invoke('set_mouse_cfg', { sen, accEnabled: get(accEnabledAtom) })
+})
+
+export const accEnabledAtom = atom(false, (get, set, accEnabled: boolean) => {
+    set(accEnabledAtom, accEnabled)
+    invoke('set_mouse_cfg', { sen: get(senAtom), accEnabled })
 })
 
 export const fetchState = async () => {
     const [sen, accEnabled] = await invoke<[number, boolean]>('get_mouse_cfg')
 
-    state.sen = sen
-    state.accEnabled = accEnabled
-}
-
-export const updateSen = async (sen: number) => {
-    state.sen = sen
-    await invoke('set_mouse_cfg', { sen, accEnabled: state.accEnabled })
-}
-
-export const updateAccEnabled = async (accEnabled: boolean) => {
-    state.accEnabled = accEnabled
-    await invoke('set_mouse_cfg', { sen: state.sen, accEnabled })
+    store.set(senAtom, sen)
+    store.set(accEnabledAtom, accEnabled)
 }
 
 fetchState()