diff --git a/src/components/ForTwoColumns.tsx b/src/components/ForTwoColumns.tsx
index f8d348b..b20b03e 100644
--- a/src/components/ForTwoColumns.tsx
+++ b/src/components/ForTwoColumns.tsx
@@ -1,15 +1,9 @@
-import { JSX, Show, createMemo, createSignal } from 'solid-js'
+import { JSX, Show, createMemo } from 'solid-js'
+import { useWindowWidth } from '~/helpers'
 import { renderInTwoColumn } from '~/signals'
 
-const [windowWidth, setWindowWidth] = createSignal(0)
-
-setWindowWidth(document?.body?.clientWidth)
-
-window.addEventListener('resize', () => {
-  setWindowWidth(document.body.clientWidth)
-})
-
 export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => {
+  const { windowWidth } = useWindowWidth()
   const isShowTwoColumns = createMemo(
     () => windowWidth() >= 640 && renderInTwoColumn(),
   ) // 640 is sm size in daisyui
diff --git a/src/helpers/global.ts b/src/helpers/global.ts
new file mode 100644
index 0000000..67a3343
--- /dev/null
+++ b/src/helpers/global.ts
@@ -0,0 +1,46 @@
+import { createSignal, onCleanup } from 'solid-js'
+
+export const useWindowWidth = () => {
+  const [windowWidth, setWindowWidth] = createSignal(0)
+  const set = () => {
+    setWindowWidth(document.body?.clientWidth ?? 0)
+  }
+
+  set()
+  window.addEventListener('resize', set, {})
+
+  onCleanup(() => {
+    window.removeEventListener('resize', set)
+  })
+
+  return {
+    windowWidth,
+  }
+}
+
+export const useStringBooleanMap = () => {
+  const [map, setMap] = createSignal<Record<string, boolean>>({})
+  const set = (name: string, value: boolean) => {
+    setMap({
+      ...map(),
+      [name]: value,
+    })
+  }
+
+  const setWithCallback = async (
+    name: string,
+    callback: () => Promise<void>,
+  ) => {
+    set(name, true)
+    try {
+      await callback()
+    } catch {}
+    set(name, false)
+  }
+
+  return {
+    map,
+    set,
+    setWithCallback,
+  }
+}
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 19436e4..140a5ea 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1 +1,2 @@
+export * from './global'
 export * from './proxies'
diff --git a/src/helpers/proxies.ts b/src/helpers/proxies.ts
index 0a575fc..c876f1f 100644
--- a/src/helpers/proxies.ts
+++ b/src/helpers/proxies.ts
@@ -1,36 +1,9 @@
 import dayjs from 'dayjs'
-import { createSignal } from 'solid-js'
 import { PROXIES_ORDERING_TYPE } from '~/constants'
 
 export const formatTimeFromNow = (time: number | string) => {
   return dayjs(time).fromNow()
 }
-export const useStringBooleanMap = () => {
-  const [map, setMap] = createSignal<Record<string, boolean>>({})
-  const set = (name: string, value: boolean) => {
-    setMap({
-      ...map(),
-      [name]: value,
-    })
-  }
-
-  const setWithCallback = async (
-    name: string,
-    callback: () => Promise<void>,
-  ) => {
-    set(name, true)
-    try {
-      await callback()
-    } catch {}
-    set(name, false)
-  }
-
-  return {
-    map,
-    set,
-    setWithCallback,
-  }
-}
 
 export const formatProxyType = (type = '') => {
   const t = type.toLowerCase()