diff --git a/src/renderer/components/dialog/dialog-changelog.tsx b/src/renderer/components/dialog/dialog-changelog.tsx
index 40255d11..ff7e3e17 100644
--- a/src/renderer/components/dialog/dialog-changelog.tsx
+++ b/src/renderer/components/dialog/dialog-changelog.tsx
@@ -82,9 +82,13 @@ const DialogChangelog = () => {
     setCheckUsingLastVersion(false)
   }
 
-  useOnKeyUp('Escape', () => {
-    setShowChangelog(false)
-  })
+  useOnKeyUp(
+    'Escape',
+    () => {
+      setShowChangelog(false)
+    },
+    isShowChangelog,
+  )
 
   return (
     <>
@@ -109,6 +113,7 @@ const DialogChangelog = () => {
       />
 
       <Dialog
+        id="user-note"
         open={isUserShowNotes}
         onClose={onCloseDialog}
         actions={
diff --git a/src/renderer/components/dialog/dialog-recent-files.tsx b/src/renderer/components/dialog/dialog-recent-files.tsx
index 96a7676d..348b6bb9 100644
--- a/src/renderer/components/dialog/dialog-recent-files.tsx
+++ b/src/renderer/components/dialog/dialog-recent-files.tsx
@@ -273,6 +273,7 @@ const DialogRecentFiles = ({ isOpen, onClose }: Props) => {
 
   return (
     <Dialog
+      id="recent-files"
       open={isOpen}
       title={t('page.compilation.actions.recentFiles')}
       onClose={onDialogClose}
diff --git a/src/renderer/components/dialog/dialog.tsx b/src/renderer/components/dialog/dialog.tsx
index 4b7d03b5..ce26aa13 100644
--- a/src/renderer/components/dialog/dialog.tsx
+++ b/src/renderer/components/dialog/dialog.tsx
@@ -23,6 +23,7 @@ type DialogProps = {
     content?: string
     child?: string
   }
+  id: string
 }
 
 enum CloseReason {
@@ -40,26 +41,33 @@ const Dialog = ({
   content: Content,
   contentClassNames = {},
   children,
+  id,
 }: React.PropsWithChildren<DialogProps>) => {
   const container = useRef<HTMLDivElement | null>(null)
 
   useDocumentClick(
     () => {
-      onClose?.(CloseReason.outside)
+      if (open) {
+        onClose?.(CloseReason.outside)
+      }
     },
     clicked => clicked === container.current,
   )
 
   const onEscape = useCallback(() => {
-    onClose?.(CloseReason.escape)
-  }, [onClose])
+    if (open) {
+      onClose?.(CloseReason.escape)
+    }
+  }, [onClose, open])
 
   const onEnter = useCallback(() => {
-    onClose?.(CloseReason.enter)
-  }, [onClose])
+    if (open) {
+      onClose?.(CloseReason.enter)
+    }
+  }, [onClose, open])
 
-  useOnKeyUp('Escape', onEscape)
-  useOnKeyUp('Enter', onEnter)
+  useOnKeyUp('Escape', onEscape, open)
+  useOnKeyUp('Enter', onEnter, open)
 
   const dialogContent = useMemo(
     () => (
@@ -111,6 +119,7 @@ const Dialog = ({
       </>
     ) : null,
     document.body,
+    id,
   )
 }
 
diff --git a/src/renderer/components/groups/groups-dialog.tsx b/src/renderer/components/groups/groups-dialog.tsx
index 321547cd..93c1f0bd 100644
--- a/src/renderer/components/groups/groups-dialog.tsx
+++ b/src/renderer/components/groups/groups-dialog.tsx
@@ -137,6 +137,7 @@ const GroupsDialog = ({
 
   return (
     <Dialog
+      id="group"
       open={open}
       onClose={onDialogClose}
       actions={
diff --git a/src/renderer/components/open-compilation-logs.tsx b/src/renderer/components/open-compilation-logs.tsx
index d54aacac..6a1583e6 100644
--- a/src/renderer/components/open-compilation-logs.tsx
+++ b/src/renderer/components/open-compilation-logs.tsx
@@ -90,6 +90,7 @@ const OpenCompilationLogs = () => {
       </NavItem>
 
       <Dialog
+        id="compilation-logs"
         open={isDialogOpen}
         onClose={onClickButtonCloseLogs}
         actions={
diff --git a/src/renderer/components/open-documentation.tsx b/src/renderer/components/open-documentation.tsx
index 4cb53e16..806ecad3 100644
--- a/src/renderer/components/open-documentation.tsx
+++ b/src/renderer/components/open-documentation.tsx
@@ -55,6 +55,7 @@ const OpenDocumentation = () => {
   return (
     <>
       <Dialog
+        id="documentation"
         open={isDialogOpen}
         maxWidth={70}
         title={t('nav.help.title')}
diff --git a/src/renderer/components/page-app-bar.tsx b/src/renderer/components/page-app-bar.tsx
index 10da24f1..ab3c85a5 100644
--- a/src/renderer/components/page-app-bar.tsx
+++ b/src/renderer/components/page-app-bar.tsx
@@ -10,7 +10,7 @@ import { useFocus } from '../hooks/use-focus'
 
 type Props = {
   title?: string
-  actions?: ReactNode[]
+  actions?: ReactNode
 }
 
 const PageAppBar = ({ title, actions = [] }: Props) => {
@@ -26,11 +26,7 @@ const PageAppBar = ({ title, actions = [] }: Props) => {
     >
       <div className="flex h-16 items-center px-4">
         <h2 className="font-nova text-3xl font-bold">{title}</h2>
-        <div className="ml-auto flex items-center gap-2">
-          {actions.map((action, index) => {
-            return <React.Fragment key={index}>{action}</React.Fragment>
-          })}
-        </div>
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
       </div>
     </div>
   )
diff --git a/src/renderer/hooks/use-groups.ts b/src/renderer/hooks/use-groups.ts
new file mode 100644
index 00000000..a1466837
--- /dev/null
+++ b/src/renderer/hooks/use-groups.ts
@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2022 Kiyozz~WK~WushuLate.
+ *
+ * All rights reserved.
+ */
+
+import is from '@sindresorhus/is'
+
+import { TelemetryEvent } from '../../common/telemetry-event'
+import { Group, GroupRenderer } from '../types'
+import { useApp } from './use-app'
+import { useTelemetry } from './use-telemetry'
+
+type EditGroupParams = {
+  group: GroupRenderer
+  lastGroupName: string
+}
+
+type UseGroupsReturns = {
+  add: (group: GroupRenderer) => void
+  edit: (params: EditGroupParams) => void
+  remove: (group: GroupRenderer) => void
+}
+
+export const useGroups = (): UseGroupsReturns => {
+  const { groups, setConfig } = useApp()
+  const { send } = useTelemetry()
+
+  const addGroup = (group: GroupRenderer) => {
+    if (
+      !is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    send(TelemetryEvent.groupCreated, { scripts: group.scripts.length })
+    setConfig({
+      groups: [
+        ...groups,
+        {
+          name: group.name,
+          scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
+        },
+      ],
+    })
+  }
+
+  const editGroup = ({ group, lastGroupName }: EditGroupParams) => {
+    if (
+      group.name.trim().toLowerCase() !== lastGroupName.trim().toLowerCase() &&
+      !is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    send(TelemetryEvent.groupEdited, { scripts: group.scripts.length })
+    setConfig({
+      groups: groups.map((g: Group) => {
+        if (g.name === lastGroupName) {
+          return {
+            scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
+            name: group.name,
+          }
+        }
+
+        return {
+          ...g,
+          scripts: g.scripts.map(s => ({ name: s.name, path: s.path })),
+        }
+      }),
+    })
+  }
+
+  const removeGroup = (group: GroupRenderer) => {
+    if (
+      is.undefined(
+        groups.find(
+          g => g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
+        ),
+      )
+    ) {
+      return
+    }
+
+    setConfig(
+      {
+        groups: groups
+          .map(g => ({ name: g.name, scripts: g.scripts }))
+          .filter(g => g.name !== group.name),
+      },
+      true,
+    )
+  }
+
+  return {
+    add: addGroup,
+    edit: editGroup,
+    remove: removeGroup,
+  }
+}
diff --git a/src/renderer/hooks/use-on-key-up.ts b/src/renderer/hooks/use-on-key-up.ts
index b562d5ff..0090df48 100644
--- a/src/renderer/hooks/use-on-key-up.ts
+++ b/src/renderer/hooks/use-on-key-up.ts
@@ -15,6 +15,7 @@ type UseOnKeyUpOptions = {
 export const useOnKeyUp = (
   key: string,
   action: () => void,
+  isActive: boolean,
   options?: UseOnKeyUpOptions,
 ) => {
   const onKeyUp = useCallback(
@@ -43,10 +44,18 @@ export const useOnKeyUp = (
   )
 
   useEffect(() => {
-    document.body.addEventListener('keyup', onKeyUp)
+    const unSub = () => {
+      document.body.removeEventListener('keyup', onKeyUp)
+    }
+
+    if (isActive) {
+      document.body.addEventListener('keyup', onKeyUp)
+    } else {
+      unSub()
+    }
 
     return () => {
-      document.body.removeEventListener('keyup', onKeyUp)
+      unSub()
     }
-  }, [onKeyUp])
+  }, [onKeyUp, isActive])
 }
diff --git a/src/renderer/pages/groups/groups.tsx b/src/renderer/pages/groups/groups.tsx
index 8c3272b5..5af1dbb3 100644
--- a/src/renderer/pages/groups/groups.tsx
+++ b/src/renderer/pages/groups/groups.tsx
@@ -5,204 +5,101 @@
  */
 
 import CreateIcon from '@mui/icons-material/Create'
-import is from '@sindresorhus/is'
-import React, { useCallback, useState } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { TelemetryEvent } from '../../../common/telemetry-event'
 import GroupsDialog from '../../components/groups/groups-dialog'
 import Page from '../../components/page'
 import PageAppBar from '../../components/page-app-bar'
 import { useApp } from '../../hooks/use-app'
-import { useTelemetry } from '../../hooks/use-telemetry'
-import { Group, GroupRenderer } from '../../types'
+import { useGroups } from '../../hooks/use-groups'
+import { GroupRenderer } from '../../types'
 import GroupsListItem from './groups-list-item'
 
-type EditGroupParams = {
-  group: GroupRenderer
-  lastGroupName: string
-}
-
 const Groups = () => {
   const { t } = useTranslation()
-  const { groups, setConfig } = useApp()
-  const { send } = useTelemetry()
+  const { groups } = useApp()
+  const { add, edit, remove } = useGroups()
 
   const [showAddPopup, setShowPopup] = useState(false)
   const [editingGroup, setEditingGroup] = useState<GroupRenderer | undefined>()
 
-  const addGroup = useCallback(
-    (group: GroupRenderer) => {
-      if (
-        !is.undefined(
-          groups.find(
-            g =>
-              g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
-          ),
-        )
-      ) {
-        return
-      }
-
-      send(TelemetryEvent.groupCreated, { scripts: group.scripts.length })
-      setConfig({
-        groups: [
-          ...groups,
-          {
-            name: group.name,
-            scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
-          },
-        ],
-      })
-    },
-    [setConfig, groups, send],
-  )
-  const editGroup = useCallback(
-    ({ group, lastGroupName }: EditGroupParams) => {
-      if (
-        group.name.trim().toLowerCase() !==
-          lastGroupName.trim().toLowerCase() &&
-        !is.undefined(
-          groups.find(
-            g =>
-              g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
-          ),
-        )
-      ) {
-        return
-      }
-
-      send(TelemetryEvent.groupEdited, { scripts: group.scripts.length })
-      setConfig({
-        groups: groups.map((g: Group) => {
-          if (g.name === lastGroupName) {
-            return {
-              scripts: group.scripts.map(s => ({ name: s.name, path: s.path })),
-              name: group.name,
-            }
-          }
-
-          return {
-            ...g,
-            scripts: g.scripts.map(s => ({ name: s.name, path: s.path })),
-          }
-        }),
-      })
-    },
-    [groups, setConfig, send],
-  )
-  const removeGroup = useCallback(
-    (group: GroupRenderer) => {
-      if (
-        is.undefined(
-          groups.find(
-            g =>
-              g.name.trim().toLowerCase() === group.name.trim().toLowerCase(),
-          ),
-        )
-      ) {
-        return
-      }
-
-      setConfig(
-        {
-          groups: groups
-            .map(g => ({ name: g.name, scripts: g.scripts }))
-            .filter(g => g.name !== group.name),
-        },
-        true,
-      )
-    },
-    [groups, setConfig],
-  )
-
-  const onClickRemoveGroup = useCallback(
-    (group: GroupRenderer) => {
-      return () => {
-        removeGroup(group)
-      }
-    },
-    [removeGroup],
-  )
+  const onClickRemoveGroup = (group: GroupRenderer) => {
+    return () => {
+      remove(group)
+    }
+  }
 
-  const onClickEditGroup = useCallback((group: GroupRenderer) => {
+  const onClickEditGroup = (group: GroupRenderer) => {
     return () => {
       setEditingGroup(group)
       setShowPopup(true)
     }
-  }, [])
+  }
 
-  const onClickAddButton = useCallback(() => {
+  const onClickAddButton = () => {
     setEditingGroup(undefined)
     setShowPopup(true)
-  }, [])
+  }
 
-  const onGroupAdd = useCallback(
-    (group: Partial<GroupRenderer>) => {
-      setShowPopup(false)
-      addGroup(group as GroupRenderer)
-    },
-    [setShowPopup, addGroup],
-  )
+  const onGroupAdd = (group: GroupRenderer) => {
+    setShowPopup(false)
+    add(group)
+  }
 
-  const onGroupEdit = useCallback(
-    (lastGroupName: string, group: GroupRenderer) => {
-      setShowPopup(false)
-      editGroup({ group, lastGroupName })
-    },
-    [setShowPopup, editGroup],
-  )
+  const onGroupEdit = (lastGroupName: string, group: GroupRenderer) => {
+    setShowPopup(false)
+    edit({ group, lastGroupName })
+  }
 
-  const onClosePopup = useCallback(() => {
+  const onClosePopup = () => {
     setShowPopup(false)
-  }, [])
+  }
 
   return (
     <>
       <PageAppBar
         title={t('page.groups.title')}
-        actions={[
-          <button key={1} className="btn" onClick={onClickAddButton}>
+        actions={
+          <button className="btn" onClick={onClickAddButton}>
             <div className="icon">
               <CreateIcon />
             </div>
             {t('page.groups.actions.create')}
-          </button>,
-        ]}
+          </button>
+        }
       />
 
       <Page mainClassName="h-full">
-        <>
-          <GroupsDialog
-            group={editingGroup}
-            open={showAddPopup}
-            onGroupAdd={onGroupAdd}
-            onGroupEdit={onGroupEdit}
-            onClose={onClosePopup}
-          />
-
-          {groups.length > 0 ? (
-            <div className="relative flex flex-col gap-2">
-              {groups.map(group => {
-                return (
-                  <GroupsListItem
-                    onDelete={onClickRemoveGroup}
-                    onEdit={onClickEditGroup}
-                    group={group}
-                    key={group.name}
-                  />
-                )
-              })}
-            </div>
-          ) : (
-            <div className="h-full w-full justify-center gap-4 text-lg">
-              <p className="font-medium text-black-600 dark:text-white">
-                {t('page.groups.createGroupText')}
-              </p>
-              <p>{t('page.groups.whatIsAGroup')}</p>
-            </div>
-          )}
-        </>
+        <GroupsDialog
+          group={editingGroup}
+          open={showAddPopup}
+          onGroupAdd={onGroupAdd}
+          onGroupEdit={onGroupEdit}
+          onClose={onClosePopup}
+        />
+
+        {groups.length > 0 ? (
+          <div className="relative flex flex-col gap-2">
+            {groups.map(group => {
+              return (
+                <GroupsListItem
+                  onDelete={onClickRemoveGroup}
+                  onEdit={onClickEditGroup}
+                  group={group}
+                  key={group.name}
+                />
+              )
+            })}
+          </div>
+        ) : (
+          <div className="h-full w-full justify-center gap-4 text-lg">
+            <p className="font-medium text-black-600 dark:text-white">
+              {t('page.groups.createGroupText')}
+            </p>
+            <p>{t('page.groups.whatIsAGroup')}</p>
+          </div>
+        )}
       </Page>
     </>
   )
diff --git a/src/renderer/pages/settings/settings.tsx b/src/renderer/pages/settings/settings.tsx
index fd834bf5..4f427ece 100644
--- a/src/renderer/pages/settings/settings.tsx
+++ b/src/renderer/pages/settings/settings.tsx
@@ -182,24 +182,25 @@ const Settings = () => {
     <>
       <PageAppBar
         title={t('page.settings.title')}
-        actions={[
-          <button
-            key={2}
-            className="btn"
-            onClick={() => openDocumentation('settings-app-bar')}
-          >
-            <span className="icon">
-              <HelpIcon />
-            </span>
-            {t('common.documentation')}
-          </button>,
-          <button className="btn" key={1} onClick={onClickPageRefresh}>
-            <div className="icon">
-              <RefreshIcon />
-            </div>
-            {t('common.refresh')}
-          </button>,
-        ]}
+        actions={
+          <>
+            <button
+              className="btn"
+              onClick={() => openDocumentation('settings-app-bar')}
+            >
+              <span className="icon">
+                <HelpIcon />
+              </span>
+              {t('common.documentation')}
+            </button>
+            <button className="btn" onClick={onClickPageRefresh}>
+              <div className="icon">
+                <RefreshIcon />
+              </div>
+              {t('common.refresh')}
+            </button>
+          </>
+        }
       />
 
       <Page>