diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx
index 5343bc64..161f8830 100644
--- a/src/renderer/src/pages/home/HomePage.tsx
+++ b/src/renderer/src/pages/home/HomePage.tsx
@@ -36,7 +36,7 @@ const HomePage: FC = () => {
   }, [state])
 
   return (
-    <Container>
+    <Container id="home-page">
       <Navbar activeAssistant={activeAssistant} activeTopic={activeTopic} setActiveTopic={setActiveTopic} />
       <ContentContainer id="content-container">
         {showAssistants && (
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index e19422c4..87e9394e 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -25,7 +25,7 @@ import { translateText } from '@renderer/services/TranslateService'
 import store, { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setGenerating, setSearching } from '@renderer/store/runtime'
 import { Assistant, FileType, KnowledgeBase, Message, Topic } from '@renderer/types'
-import { delay, getFileExtension, uuid } from '@renderer/utils'
+import { classNames, delay, getFileExtension, uuid } from '@renderer/utils'
 import { documentExts, imageExts, textExts } from '@shared/config/constant'
 import { Button, Popconfirm, Tooltip } from 'antd'
 import TextArea, { TextAreaRef } from 'antd/es/input/TextArea'
@@ -388,9 +388,12 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic }) => {
   }
 
   return (
-    <Container onDragOver={handleDragOver} onDrop={handleDrop}>
+    <Container onDragOver={handleDragOver} onDrop={handleDrop} className="inputbar">
       <AttachmentPreview files={files} setFiles={setFiles} />
-      <InputBarContainer id="inputbar" className={inputFocus ? 'focus' : ''} ref={containerRef}>
+      <InputBarContainer
+        id="inputbar"
+        className={classNames('inputbar-container', inputFocus && 'focus')}
+        ref={containerRef}>
         <Textarea
           value={text}
           onChange={(e) => setText(e.target.value)}
diff --git a/src/renderer/src/pages/home/Messages/MessageHeader.tsx b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
index cdccd24b..c4d542c5 100644
--- a/src/renderer/src/pages/home/Messages/MessageHeader.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageHeader.tsx
@@ -54,7 +54,7 @@ const MessageHeader: FC<Props> = memo(({ assistant, model, message }) => {
     : undefined
 
   return (
-    <Container>
+    <Container className="message-header">
       <AvatarWrapper style={avatarStyle}>
         {isAssistantMessage ? (
           <Avatar
diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
index 1f310065..9dd2fea3 100644
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -41,7 +41,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
   })
 
   return (
-    <Navbar>
+    <Navbar className="home-navbar">
       {showAssistants && (
         <NavbarLeft style={{ justifyContent: 'space-between', borderRight: 'none', padding: '0 8px' }}>
           <NavbarIcon onClick={toggleShowAssistants} style={{ marginLeft: isMac ? 8 : 0 }}>
@@ -52,7 +52,9 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant }) => {
           </NavbarIcon>
         </NavbarLeft>
       )}
-      <NavbarRight style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}>
+      <NavbarRight
+        style={{ justifyContent: 'space-between', paddingRight: isWindows ? 140 : 12, flex: 1 }}
+        className="home-navbar-right">
         <HStack alignItems="center">
           {!showAssistants && (
             <NavbarIcon
diff --git a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
index 4caba9cb..f33c1dd7 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantsTab.tsx
@@ -41,7 +41,7 @@ const Assistants: FC<Props> = ({
 
   const onDelete = useCallback(
     (assistant: Assistant) => {
-      const _assistant = last(assistants.filter((a) => a.id !== assistant.id))
+      const _assistant: Assistant | undefined = last(assistants.filter((a) => a.id !== assistant.id))
       _assistant ? setActiveAssistant(_assistant) : onCreateDefaultAssistant()
       removeAssistant(assistant.id)
     },
@@ -135,7 +135,7 @@ const Assistants: FC<Props> = ({
   )
 
   return (
-    <Container>
+    <Container className="assistants-tab">
       <DragableList
         list={assistants}
         onUpdate={updateAssistants}
diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
index 866e230d..c2c592c9 100644
--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@@ -117,7 +117,7 @@ const SettingsTab: FC<Props> = (props) => {
   }, [assistant])
 
   return (
-    <Container>
+    <Container className="settings-tab">
       <SettingGroup style={{ marginTop: 10 }}>
         <SettingSubtitle style={{ marginTop: 0 }}>
           {t('settings.messages.model.title')}{' '}
diff --git a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
index 377e5253..2682ed58 100644
--- a/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/TopicsTab.tsx
@@ -186,7 +186,7 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
   )
 
   return (
-    <Container right={topicPosition === 'right'}>
+    <Container right={topicPosition === 'right'} className="topics-tab">
       <DragableList list={assistant.topics} onUpdate={updateTopics}>
         {(topic) => {
           const isActive = topic.id === activeTopic?.id
diff --git a/src/renderer/src/pages/home/Tabs/index.tsx b/src/renderer/src/pages/home/Tabs/index.tsx
index ff4b668b..a8024750 100644
--- a/src/renderer/src/pages/home/Tabs/index.tsx
+++ b/src/renderer/src/pages/home/Tabs/index.tsx
@@ -94,7 +94,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
   }, [position, tab, topicPosition])
 
   return (
-    <Container style={border}>
+    <Container style={border} className="home-tabs">
       {showTab && (
         <Segmented
           value={tab}
@@ -125,7 +125,7 @@ const HomeTabs: FC<Props> = ({ activeAssistant, activeTopic, setActiveAssistant,
           block
         />
       )}
-      <TabContent>
+      <TabContent className="home-tabs-content">
         {tab === 'assistants' && (
           <Assistants
             activeAssistant={activeAssistant}