diff --git a/client/ui/App.tsx b/client/ui/App.tsx
index 904da2a..dc89420 100644
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -1,8 +1,6 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
 import ChatFragment from "./chat/ChatFragment.tsx"
-import ContactsListItem from "./main/ContactsListItem.jsx"
-import RecentsListItem from "./main/RecentsListItem.jsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
@@ -17,6 +15,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import ContactsList from "./main/ContactsList.tsx";
+import RecentsList from "./main/RecentsList.tsx";
 
 declare global {
     namespace React {
@@ -143,47 +143,15 @@ export default function App() {
             <div id="SideBar">
                 {
                     // 最近聊天
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        paddingRight: '10px',
-                        display: navigationItemSelected == "Recents" ? undefined : 'none'
-                    }}>
-                        {
-                            recentsList.map((v) =>
-                                <RecentsListItem
-                                    key={v.id}
-                                    nickName={v.title}
-                                    avatar={v.avatar}
-                                    content={v.content} />
-                            )
-                        }
-                    </mdui-list>
+                    <RecentsList
+                        display={navigationItemSelected == "Recents"}
+                        recentsList={recentsList} />
                 }
                 {
                     // 联系人列表
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        paddingRight: '10px',
-                        display: navigationItemSelected == "Contacts" ? undefined : 'none'
-                    }}>
-                        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-                            {
-                                Object.keys(contactsMap).map((v) =>
-                                    <mdui-collapse-item key={v} value={v}>
-                                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                                        {
-                                            contactsMap[v].map((v2) =>
-                                                <ContactsListItem
-                                                    key={v2.id}
-                                                    nickName={v2.nickname}
-                                                    avatar={v2.avatar} />
-                                            )
-                                        }
-                                    </mdui-collapse-item>
-                                )
-                            }
-                        </mdui-collapse>
-                    </mdui-list>
+                    <ContactsList
+                        display={navigationItemSelected == "Contacts"}
+                        contactsMap={contactsMap} />
                 }
             </div>
             {
diff --git a/client/ui/AppMobile.tsx b/client/ui/AppMobile.tsx
index 3443297..fd0a66e 100644
--- a/client/ui/AppMobile.tsx
+++ b/client/ui/AppMobile.tsx
@@ -1,12 +1,8 @@
 import Client from "../api/Client.ts"
 import data from "../Data.ts"
-import ChatFragment from "./chat/ChatFragment.tsx"
-import ContactsListItem from "./main/ContactsListItem.jsx"
-import RecentsListItem from "./main/RecentsListItem.jsx"
 import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
-import Avatar from "./Avatar.tsx"
 
 import * as React from 'react'
 import { Dialog, NavigationBar, TextField } from "mdui"
@@ -16,6 +12,8 @@ import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
 import RegisterDialog from "./dialog/RegisterDialog.tsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import UserProfileDialog from "./dialog/UserProfileDialog.tsx"
+import ContactsList from "./main/ContactsList.tsx"
+import RecentsList from "./main/RecentsList.tsx"
 
 declare global {
     namespace React {
@@ -75,9 +73,9 @@ export default function AppMobile() {
 
     const userProfileDialogRef: React.MutableRefObject<Dialog | null> = React.useRef(null)
     const openMyUserProfileDialogButtonRef: React.MutableRefObject<HTMLElement | null> = React.useRef(null)
-/*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
-        userProfileDialogRef.current!.open = true
-    })*/
+    /*    useEventListener(openMyUserProfileDialogButtonRef, 'click', (_event) => {
+            userProfileDialogRef.current!.open = true
+        })*/
 
     const [myUserProfileCache, setMyUserProfileCache]: [User, React.Dispatch<React.SetStateAction<User>>] = React.useState(null as unknown as User)
 
@@ -119,12 +117,12 @@ export default function AppMobile() {
             <UserProfileDialog
                 userProfileDialogRef={userProfileDialogRef}
                 user={myUserProfileCache} />
-            
+
             <mdui-navigation-bar scroll-target="#SideBar" label-visibility="selected" value="Recents" ref={navigationBarRef}>
                 <mdui-navigation-bar-item icon="watch_later--outlined" value="Recents">最近</mdui-navigation-bar-item>
                 <mdui-navigation-bar-item icon="contacts--outlined" value="Contacts">聯絡人</mdui-navigation-bar-item>
             </mdui-navigation-bar>
-            
+
             <div style={{
                 display: 'flex',
                 height: 'calc(100% - 80px)',
@@ -132,51 +130,15 @@ export default function AppMobile() {
             }} id="SideBar">
                 {
                     // 最近聊天
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        marginLeft: '10px',
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Recents" ? undefined : 'none'
-                    }}>
-                        {
-                            recentsList.map((v) =>
-                                <RecentsListItem
-                                    key={v.id}
-                                    nickName={v.title}
-                                    avatar={v.avatar}
-                                    content={v.content} />
-                            )
-                        }
-                    </mdui-list>
+                    <RecentsList
+                        display={navigationItemSelected == "Recents"}
+                        recentsList={recentsList} />
                 }
                 {
                     // 联系人列表
-                    <mdui-list style={{
-                        overflowY: 'auto',
-                        marginLeft: '10px',
-                        marginRight: '10px',
-                        width: '100%',
-                        display: navigationItemSelected == "Contacts" ? undefined : 'none'
-                    }}>
-                        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
-                            {
-                                Object.keys(contactsMap).map((v) =>
-                                    <mdui-collapse-item key={v} value={v}>
-                                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
-                                        {
-                                            contactsMap[v].map((v2) =>
-                                                <ContactsListItem
-                                                    key={v2.id}
-                                                    nickName={v2.nickname}
-                                                    avatar={v2.avatar} />
-                                            )
-                                        }
-                                    </mdui-collapse-item>
-                                )
-                            }
-                        </mdui-collapse>
-                    </mdui-list>
+                    <ContactsList
+                        display={navigationItemSelected == "Contacts"}
+                        contactsMap={contactsMap} />
                 }
             </div>
         </div>
diff --git a/client/ui/main/ContactsList.tsx b/client/ui/main/ContactsList.tsx
new file mode 100644
index 0000000..2a4fd7b
--- /dev/null
+++ b/client/ui/main/ContactsList.tsx
@@ -0,0 +1,40 @@
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    contactsMap: { [key: string]: User[] }
+    display: boolean
+}
+
+export default function ContactsList({
+    contactsMap,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        marginLeft: '10px',
+        marginRight: '10px',
+        width: '100%',
+        display: display ? undefined : 'none'
+    }} {...props}>
+
+        <mdui-collapse accordion value={Object.keys(contactsMap)[0]}>
+            {
+                Object.keys(contactsMap).map((v) =>
+                    <mdui-collapse-item key={v} value={v}>
+                        <mdui-list-subheader slot="header">{v}</mdui-list-subheader>
+                        {
+                            contactsMap[v].map((v2) =>
+                                <ContactsListItem
+                                    key={v2.id}
+                                    nickName={v2.nickname}
+                                    avatar={v2.avatar} />
+                            )
+                        }
+                    </mdui-collapse-item>
+                )
+            }
+        </mdui-collapse>
+    </mdui-list>
+}
\ No newline at end of file
diff --git a/client/ui/main/RecentsList.tsx b/client/ui/main/RecentsList.tsx
new file mode 100644
index 0000000..df98f19
--- /dev/null
+++ b/client/ui/main/RecentsList.tsx
@@ -0,0 +1,31 @@
+import RecentChat from "../../api/client_data/RecentChat.ts"
+import User from "../../api/client_data/User.ts"
+import ContactsListItem from "./ContactsListItem.jsx"
+import RecentsListItem from "./RecentsListItem.jsx"
+
+interface Args extends React.HTMLAttributes<HTMLElement> {
+    recentsList: RecentChat[]
+    display: boolean
+}
+
+export default function RecentsList({
+    recentsList,
+    display,
+    ...props
+}: Args) {
+    return <mdui-list style={{
+        overflowY: 'auto',
+        paddingRight: '10px',
+        display: display ? undefined : 'none'
+    }}>
+        {
+            recentsList.map((v) =>
+                <RecentsListItem
+                    key={v.id}
+                    nickName={v.title}
+                    avatar={v.avatar}
+                    content={v.content} />
+            )
+        }
+    </mdui-list>
+}
\ No newline at end of file