diff --git a/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx
new file mode 100644
index 000000000000..d4cfc5791694
--- /dev/null
+++ b/packages/mask/src/extension/popups/pages/Personas/Home/UI.tsx
@@ -0,0 +1,197 @@
+// ! We're going to SSR this UI, so DO NOT import anything new!
+
+// TODO: Migrate following files before we can SSR
+// ProfileList
+// EnterDashboard
+// useI18N
+
+import { memo, useCallback, useState } from 'react'
+import { makeStyles } from '@masknet/theme'
+import { DeleteIcon, MasksIcon, EditIcon } from '@masknet/icons'
+import { Button, Typography } from '@mui/material'
+import {
+    PopupRoutes,
+    formatPersonaFingerprint,
+    MAX_PERSONA_LIMIT,
+    PersonaInformation,
+    ECKeyIdentifier,
+} from '@masknet/shared-base'
+import { ChevronDown, ChevronUp } from 'react-feather'
+import { ProfileList } from '../components/ProfileList'
+import { EnterDashboard } from '../../../components/EnterDashboard'
+import { PersonaListUI } from '../components/PersonaList'
+import { useI18N } from '../../../../../utils/i18n-next-ui'
+import urlcat from 'urlcat'
+import type { NavigateFunction } from 'react-router-dom'
+
+const useStyles = makeStyles()({
+    content: {
+        flex: 1,
+        backgroundColor: '#F7F9FA',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    header: {
+        padding: '12px 10px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        backgroundColor: '#EFF5FF',
+    },
+    iconContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        marginRight: '4px',
+    },
+    name: {
+        display: 'flex',
+        alignItems: 'center',
+        fontSize: 14,
+        color: '#1C68F3',
+        fontWeight: 500,
+    },
+    identifier: {
+        fontSize: 12,
+        color: '#1C68F3',
+        display: 'flex',
+        alignItems: 'center',
+        wordBreak: 'break-all',
+    },
+    trashIcon: {
+        fontSize: 16,
+        stroke: '#1C68F3',
+        marginLeft: 6,
+        cursor: 'pointer',
+    },
+    chevronIcon: {
+        width: 18,
+        height: 18,
+        color: '#1C68F3',
+        cursor: 'pointer',
+    },
+    controller: {
+        padding: 16,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(2,1fr)',
+        gap: 20,
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        backgroundColor: '#ffffff',
+    },
+    button: {
+        fontWeight: 600,
+        padding: '10px 0',
+        borderRadius: 20,
+        fontSize: 14,
+        lineHeight: '20px',
+    },
+    editIcon: {
+        fontSize: 16,
+        stroke: '#1C68F3',
+        fill: 'none',
+        marginLeft: 10,
+        cursor: 'pointer',
+    },
+    secondaryButton: {
+        backgroundColor: '#F7F9FA',
+        color: '#1C68F3',
+    },
+})
+
+export interface PersonaHomeUIProps {
+    navigate: NavigateFunction
+    currentPersona: PersonaInformation | undefined
+    personas: PersonaInformation[] | undefined
+    onChangeCurrentPersona: (identifier: ECKeyIdentifier) => void
+    onDeletePersona: (persona: PersonaInformation | undefined) => void
+}
+export const PersonaHomeUI = memo((props: PersonaHomeUIProps) => {
+    const { navigate, currentPersona, personas, onDeletePersona, onChangeCurrentPersona } = props
+
+    const { t } = useI18N()
+    const { classes, cx } = useStyles()
+    const [isExpand, setExpand] = useState(true)
+
+    const onLogout = useCallback(
+        (persona: PersonaInformation) => {
+            onDeletePersona(persona)
+            navigate(PopupRoutes.Logout)
+        },
+        [onDeletePersona],
+    )
+    const onLogoutCurrent = useCallback(() => currentPersona && onLogout(currentPersona), [onLogout, currentPersona])
+
+    return (
+        <>
+            <div className={classes.content}>
+                <div className={classes.header}>
+                    <div style={{ display: 'flex' }}>
+                        <div className={classes.iconContainer}>
+                            <MasksIcon />
+                        </div>
+                        <div>
+                            <Typography className={classes.name}>
+                                {currentPersona?.nickname}
+                                <EditIcon
+                                    className={classes.editIcon}
+                                    onClick={() => navigate(PopupRoutes.PersonaRename)}
+                                />
+                            </Typography>
+                            <Typography className={classes.identifier}>
+                                {formatPersonaFingerprint(currentPersona?.identifier.compressedPoint ?? '', 10)}
+                                <DeleteIcon className={classes.trashIcon} onClick={onLogoutCurrent} />
+                            </Typography>
+                        </div>
+                    </div>
+                    <div onClick={() => setExpand((pre) => !pre)}>
+                        {isExpand ? (
+                            <ChevronDown className={classes.chevronIcon} />
+                        ) : (
+                            <ChevronUp className={classes.chevronIcon} />
+                        )}
+                    </div>
+                </div>
+                {isExpand ? (
+                    <ProfileList />
+                ) : (
+                    <PersonaListUI
+                        onLogout={onLogout}
+                        personas={personas}
+                        onChangeCurrentPersona={onChangeCurrentPersona}
+                    />
+                )}
+            </div>
+            {isExpand ? (
+                <EnterDashboard />
+            ) : (
+                <div className={classes.controller}>
+                    <Button
+                        variant="contained"
+                        className={cx(classes.button, classes.secondaryButton)}
+                        disabled={personas && personas.length >= MAX_PERSONA_LIMIT - 1}
+                        onClick={() => {
+                            browser.tabs.create({
+                                active: true,
+                                url: browser.runtime.getURL('/dashboard.html#/sign-up'),
+                            })
+                        }}>
+                        {t('create')}
+                    </Button>
+                    <Button
+                        variant="contained"
+                        className={classes.button}
+                        onClick={() => {
+                            browser.tabs.create({
+                                active: true,
+                                url: browser.runtime.getURL(urlcat('/dashboard.html#/sign-in', { from: 'popups' })),
+                            })
+                        }}>
+                        {t('import')}
+                    </Button>
+                </div>
+            )}
+        </>
+    )
+})
diff --git a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
index f9e0ab588bca..f78f3ec0262f 100644
--- a/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/Home/index.tsx
@@ -1,169 +1,27 @@
-import { memo, useState } from 'react'
-import { makeStyles } from '@masknet/theme'
+import { memo, useCallback } from 'react'
 import { PersonaContext } from '../hooks/usePersonaContext'
 import { useNavigate } from 'react-router-dom'
-import { DeleteIcon, MasksIcon, EditIcon } from '@masknet/icons'
-import { Button, Typography } from '@mui/material'
-import { PopupRoutes, formatPersonaFingerprint, MAX_PERSONA_LIMIT } from '@masknet/shared-base'
-import { ChevronDown, ChevronUp } from 'react-feather'
-import { ProfileList } from '../components/ProfileList'
-import { EnterDashboard } from '../../../components/EnterDashboard'
-import { PersonaList } from '../components/PersonaList'
-import { useI18N } from '../../../../../utils'
-import urlcat from 'urlcat'
-import classNames from 'classnames'
-
-const useStyles = makeStyles()({
-    content: {
-        flex: 1,
-        backgroundColor: '#F7F9FA',
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    header: {
-        padding: '12px 10px',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        backgroundColor: '#EFF5FF',
-    },
-    iconContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        marginRight: '4px',
-    },
-    name: {
-        display: 'flex',
-        alignItems: 'center',
-        fontSize: 14,
-        color: '#1C68F3',
-        fontWeight: 500,
-    },
-    identifier: {
-        fontSize: 12,
-        color: '#1C68F3',
-        display: 'flex',
-        alignItems: 'center',
-        wordBreak: 'break-all',
-    },
-    trashIcon: {
-        fontSize: 16,
-        stroke: '#1C68F3',
-        marginLeft: 6,
-        cursor: 'pointer',
-    },
-    chevronIcon: {
-        width: 18,
-        height: 18,
-        color: '#1C68F3',
-        cursor: 'pointer',
-    },
-    controller: {
-        padding: 16,
-        display: 'grid',
-        gridTemplateColumns: 'repeat(2,1fr)',
-        gap: 20,
-        position: 'fixed',
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        backgroundColor: '#ffffff',
-    },
-    button: {
-        fontWeight: 600,
-        padding: '10px 0',
-        borderRadius: 20,
-        fontSize: 14,
-        lineHeight: '20px',
-    },
-    editIcon: {
-        fontSize: 16,
-        stroke: '#1C68F3',
-        fill: 'none',
-        marginLeft: 10,
-        cursor: 'pointer',
-    },
-    secondaryButton: {
-        backgroundColor: '#F7F9FA',
-        color: '#1C68F3',
-    },
-})
+import { PersonaHomeUI } from './UI'
+import type { ECKeyIdentifier } from '@masknet/shared-base'
+import Services from '../../../../service'
 
 const PersonaHome = memo(() => {
-    const { t } = useI18N()
-    const { classes } = useStyles()
-    const [isExpand, setExpand] = useState(true)
     const { currentPersona, setDeletingPersona, personas } = PersonaContext.useContainer()
     const navigate = useNavigate()
 
+    const onChangeCurrentPersona = useCallback(
+        (identifier: ECKeyIdentifier) => Services.Settings.setCurrentPersonaIdentifier(identifier),
+        [],
+    )
+
     return (
-        <>
-            <div className={classes.content}>
-                <div className={classes.header}>
-                    <div style={{ display: 'flex' }}>
-                        <div className={classes.iconContainer}>
-                            <MasksIcon />
-                        </div>
-                        <div>
-                            <Typography className={classes.name}>
-                                {currentPersona?.nickname}
-                                <EditIcon
-                                    className={classes.editIcon}
-                                    onClick={() => navigate(PopupRoutes.PersonaRename)}
-                                />
-                            </Typography>
-                            <Typography className={classes.identifier}>
-                                {formatPersonaFingerprint(currentPersona?.identifier.compressedPoint ?? '', 10)}
-                                <DeleteIcon
-                                    className={classes.trashIcon}
-                                    onClick={() => {
-                                        setDeletingPersona(currentPersona)
-                                        navigate(PopupRoutes.Logout)
-                                    }}
-                                />
-                            </Typography>
-                        </div>
-                    </div>
-                    <div onClick={() => setExpand((pre) => !pre)}>
-                        {isExpand ? (
-                            <ChevronDown className={classes.chevronIcon} />
-                        ) : (
-                            <ChevronUp className={classes.chevronIcon} />
-                        )}
-                    </div>
-                </div>
-                {isExpand ? <ProfileList /> : <PersonaList />}
-            </div>
-            {isExpand ? (
-                <EnterDashboard />
-            ) : (
-                <div className={classes.controller}>
-                    <Button
-                        variant="contained"
-                        className={classNames(classes.button, classes.secondaryButton)}
-                        disabled={personas && personas.length >= MAX_PERSONA_LIMIT - 1}
-                        onClick={() => {
-                            browser.tabs.create({
-                                active: true,
-                                url: browser.runtime.getURL('/dashboard.html#/sign-up'),
-                            })
-                        }}>
-                        {t('create')}
-                    </Button>
-                    <Button
-                        variant="contained"
-                        className={classes.button}
-                        onClick={() => {
-                            browser.tabs.create({
-                                active: true,
-                                url: browser.runtime.getURL(urlcat('/dashboard.html#/sign-in', { from: 'popups' })),
-                            })
-                        }}>
-                        {t('import')}
-                    </Button>
-                </div>
-            )}
-        </>
+        <PersonaHomeUI
+            currentPersona={currentPersona}
+            navigate={navigate}
+            personas={personas}
+            onDeletePersona={setDeletingPersona}
+            onChangeCurrentPersona={onChangeCurrentPersona}
+        />
     )
 })
 
diff --git a/packages/mask/src/extension/popups/pages/Personas/components/PersonaList/index.tsx b/packages/mask/src/extension/popups/pages/Personas/components/PersonaList/index.tsx
index 332f162fee70..96f3a7c3062c 100644
--- a/packages/mask/src/extension/popups/pages/Personas/components/PersonaList/index.tsx
+++ b/packages/mask/src/extension/popups/pages/Personas/components/PersonaList/index.tsx
@@ -1,18 +1,12 @@
-import { memo, useCallback } from 'react'
+// ! We're going to SSR this UI, so DO NOT import anything new!
+
+import { memo } from 'react'
 import { makeStyles } from '@masknet/theme'
-import { PersonaContext } from '../../hooks/usePersonaContext'
-import {
-    formatPersonaFingerprint,
-    PopupRoutes,
-    type PersonaInformation,
-    type ECKeyIdentifier,
-} from '@masknet/shared-base'
+import { formatPersonaFingerprint, type PersonaInformation, type ECKeyIdentifier } from '@masknet/shared-base'
 import { ListItemButton, List, Typography } from '@mui/material'
 import { DeleteIcon, MasksIcon } from '@masknet/icons'
-import { useNavigate } from 'react-router-dom'
-import Services from '../../../../../service'
 
-const useStyles = makeStyles()((theme) => ({
+const useStyles = makeStyles()({
     list: {
         padding: 0,
         height: 'calc(100vh - 185px)',
@@ -52,26 +46,6 @@ const useStyles = makeStyles()((theme) => ({
         marginLeft: 6,
         cursor: 'pointer',
     },
-}))
-
-export const PersonaList = memo(() => {
-    const { personas, setDeletingPersona } = PersonaContext.useContainer()
-    const navigate = useNavigate()
-
-    const onLogout = useCallback(
-        (persona: PersonaInformation) => {
-            setDeletingPersona(persona)
-            navigate(PopupRoutes.Logout)
-        },
-        [setDeletingPersona],
-    )
-
-    const onChangeCurrentPersonas = useCallback(
-        (identifier: ECKeyIdentifier) => Services.Settings.setCurrentPersonaIdentifier(identifier),
-        [],
-    )
-
-    return <PersonaListUI personas={personas} onLogout={onLogout} onChangeCurrentPersona={onChangeCurrentPersonas} />
 })
 
 export interface PersonaListUIProps {