diff --git a/src/components/SubscribeButton/NotificationPreference/Header.tsx b/src/components/SubscribeButton/NotificationPreference/Header.tsx
deleted file mode 100644
index 36dbd37764..0000000000
--- a/src/components/SubscribeButton/NotificationPreference/Header.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Trans, t } from '@lingui/macro'
-import { X } from 'react-feather'
-import { useNavigate } from 'react-router-dom'
-import styled from 'styled-components'
-
-import MailIcon from 'components/Icons/MailIcon'
-import TransactionSettingsIcon from 'components/Icons/TransactionSettingsIcon'
-import Row, { RowBetween } from 'components/Row'
-import { MouseoverTooltip } from 'components/Tooltip'
-import { APP_PATHS } from 'constants/index'
-import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
-
-const CloseIcon = styled(X)`
-  cursor: pointer;
-  color: ${({ theme }) => theme.subText};
-`
-export default function Header({ toggleModal }: { toggleModal: () => void }) {
-  const navigate = useNavigate()
-  return (
-    <RowBetween>
-      <Row fontSize={20} fontWeight={500} gap="10px">
-        <MailIcon /> <Trans>Email Notifications</Trans>
-      </Row>
-      <MouseoverTooltip text={t`Notification Preferences`} placement="top" width="fit-content">
-        <TransactionSettingsIcon
-          size={24}
-          style={{ cursor: 'pointer' }}
-          onClick={() => {
-            navigate(`${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.PREFERENCE}`)
-            toggleModal()
-          }}
-        />
-      </MouseoverTooltip>
-      <CloseIcon onClick={toggleModal} style={{ marginLeft: 16 }} />
-    </RowBetween>
-  )
-}
diff --git a/src/components/SubscribeButton/NotificationPreference/ActionButtons.tsx b/src/pages/NotificationCenter/NotificationPreference/ActionButtons.tsx
similarity index 100%
rename from src/components/SubscribeButton/NotificationPreference/ActionButtons.tsx
rename to src/pages/NotificationCenter/NotificationPreference/ActionButtons.tsx
diff --git a/src/components/SubscribeButton/NotificationPreference/InputEmail.tsx b/src/pages/NotificationCenter/NotificationPreference/InputEmail.tsx
similarity index 100%
rename from src/components/SubscribeButton/NotificationPreference/InputEmail.tsx
rename to src/pages/NotificationCenter/NotificationPreference/InputEmail.tsx
diff --git a/src/components/SubscribeButton/NotificationPreference/index.tsx b/src/pages/NotificationCenter/NotificationPreference/index.tsx
similarity index 93%
rename from src/components/SubscribeButton/NotificationPreference/index.tsx
rename to src/pages/NotificationCenter/NotificationPreference/index.tsx
index 2086585c85..8c6b68098b 100644
--- a/src/components/SubscribeButton/NotificationPreference/index.tsx
+++ b/src/pages/NotificationCenter/NotificationPreference/index.tsx
@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro'
-import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
@@ -9,14 +9,13 @@ import Column from 'components/Column'
 import MailIcon from 'components/Icons/MailIcon'
 import Loader from 'components/Loader'
 import Row from 'components/Row'
-import ActionButtons from 'components/SubscribeButton/NotificationPreference/ActionButtons'
-import Header from 'components/SubscribeButton/NotificationPreference/Header'
-import InputEmail from 'components/SubscribeButton/NotificationPreference/InputEmail'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { PRICE_ALERT_TOPIC_ID } from 'constants/env'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useNotification, { Topic, TopicType } from 'hooks/useNotification'
 import useTheme from 'hooks/useTheme'
+import ActionButtons from 'pages/NotificationCenter/NotificationPreference/ActionButtons'
+import InputEmail from 'pages/NotificationCenter/NotificationPreference/InputEmail'
 import VerifyCodeModal from 'pages/Verify/VerifyCodeModal'
 import { useNotify } from 'state/application/hooks'
 import { useSessionInfo } from 'state/authen/hooks'
@@ -99,9 +98,7 @@ const EmailColum = styled(Column)`
   `}
 `
 
-const noop = () => {
-  //
-}
+const noop = () => {}
 
 const sortGroup = (arr: Topic[]) => [...arr].sort((x, y) => y.priority - x.priority)
 
@@ -140,15 +137,7 @@ export const useValidateEmail = (defaultEmail?: string) => {
   return { inputEmail: inputEmail.trim(), onChangeEmail, errorInput, errorColor, hasErrorInput, reset }
 }
 
-function NotificationPreference({
-  header,
-  isOpen,
-  toggleModal = noop,
-}: {
-  header?: ReactNode
-  isOpen: boolean
-  toggleModal?: () => void
-}) {
+function NotificationPreference({ toggleModal = noop }: { toggleModal?: () => void }) {
   const theme = useTheme()
   const { isLoading, saveNotification, topicGroups: topicGroupsGlobal, unsubscribeAll } = useNotification()
 
@@ -190,23 +179,16 @@ function NotificationPreference({
   )
 
   useEffect(() => {
-    if (isOpen) {
-      setEmailPendingVerified('')
-      reset(userInfo?.email)
-    }
-  }, [userInfo, isOpen, reset])
+    setEmailPendingVerified('')
+    reset(userInfo?.email)
+  }, [userInfo, reset])
 
   useEffect(() => {
-    setTimeout(
-      () => {
-        setSelectedTopic(isOpen ? topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id) : [])
-        if (isOpen) {
-          setTopicGroups(sortGroup(topicGroupsGlobal))
-        }
-      },
-      isOpen ? 0 : 400,
-    )
-  }, [isOpen, topicGroupsGlobal])
+    setTimeout(() => {
+      setSelectedTopic(topicGroupsGlobal.filter(e => e.isSubscribed).map(e => e.id))
+      setTopicGroups(sortGroup(topicGroupsGlobal))
+    }, 0)
+  }, [topicGroupsGlobal])
 
   const getDiffChangeTopics = useCallback(
     (topicGroups: Topic[]) => {
@@ -381,7 +363,9 @@ function NotificationPreference({
 
   return (
     <Wrapper>
-      {header || <Header toggleModal={toggleModal} />}
+      <Text fontWeight={'500'} color={theme.text} fontSize="14px">
+        <Trans>Email Notification</Trans>
+      </Text>
 
       <EmailColum>
         <Label>
@@ -460,4 +444,17 @@ function NotificationPreference({
     </Wrapper>
   )
 }
-export default NotificationPreference
+
+const StyledPreference = styled.div`
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    max-width: unset;
+  `}
+`
+
+export default function Overview() {
+  return (
+    <StyledPreference>
+      <NotificationPreference />
+    </StyledPreference>
+  )
+}
diff --git a/src/pages/NotificationCenter/Overview.tsx b/src/pages/NotificationCenter/Overview.tsx
deleted file mode 100644
index 9aaeeb5666..0000000000
--- a/src/pages/NotificationCenter/Overview.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Text } from 'rebass'
-import styled from 'styled-components'
-
-import NotificationPreference from 'components/SubscribeButton/NotificationPreference'
-import useTheme from 'hooks/useTheme'
-
-const StyledPreference = styled.div`
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    max-width: unset;
-  `}
-`
-
-export default function Overview() {
-  const theme = useTheme()
-  return (
-    <StyledPreference>
-      <NotificationPreference
-        isOpen={true}
-        header={
-          <Text fontWeight={'500'} color={theme.text} fontSize="14px">
-            <Trans>Email Notification</Trans>
-          </Text>
-        }
-      />
-    </StyledPreference>
-  )
-}
diff --git a/src/pages/NotificationCenter/Profile/index.tsx b/src/pages/NotificationCenter/Profile/index.tsx
index 6922011efe..e7fd54af1e 100644
--- a/src/pages/NotificationCenter/Profile/index.tsx
+++ b/src/pages/NotificationCenter/Profile/index.tsx
@@ -14,14 +14,14 @@ import CheckBox from 'components/CheckBox'
 import Column from 'components/Column'
 import CopyHelper from 'components/Copy'
 import Input from 'components/Input'
-import { useValidateEmail } from 'components/SubscribeButton/NotificationPreference'
-import InputEmail from 'components/SubscribeButton/NotificationPreference/InputEmail'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import { useUploadImageToCloud } from 'hooks/social'
 import useLogin from 'hooks/useLogin'
 import useTheme from 'hooks/useTheme'
+import { useValidateEmail } from 'pages/NotificationCenter/NotificationPreference'
+import InputEmail from 'pages/NotificationCenter/NotificationPreference/InputEmail'
 import AvatarEdit from 'pages/NotificationCenter/Profile/AvatarEdit'
 import ExportAccountButton from 'pages/NotificationCenter/Profile/ExportAccountButton'
 import WarningSignMessage from 'pages/NotificationCenter/Profile/WarningSignMessage'
diff --git a/src/pages/NotificationCenter/index.tsx b/src/pages/NotificationCenter/index.tsx
index e318449dec..8ce585d8d8 100644
--- a/src/pages/NotificationCenter/index.tsx
+++ b/src/pages/NotificationCenter/index.tsx
@@ -8,7 +8,7 @@ import { APP_PATHS } from 'constants/index'
 import CreateAlert from 'pages/NotificationCenter/CreateAlert'
 import GeneralAnnouncement from 'pages/NotificationCenter/GeneralAnnouncement'
 import Menu from 'pages/NotificationCenter/Menu'
-import Overview from 'pages/NotificationCenter/Overview'
+import Overview from 'pages/NotificationCenter/NotificationPreference'
 import PriceAlerts from 'pages/NotificationCenter/PriceAlerts'
 import Profile from 'pages/NotificationCenter/Profile'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'