diff --git a/src/pages/index/DutyInfo.tsx b/src/pages/index/DutyInfo.tsx
new file mode 100644
index 0000000..e33cf5b
--- /dev/null
+++ b/src/pages/index/DutyInfo.tsx
@@ -0,0 +1,57 @@
+import { Component, ReactNode } from 'react';
+import { View } from '@tarojs/components';
+import pt from '@/plain-text';
+
+export class DutyData {
+  constructor() {
+    this.isInDuty = false;
+    this.inDutyCnt = 3;
+    this.currentDuty = '2';
+    this.offDutyReason = '学园维修';
+    this.dutyRecoverTime = '下周一';
+  }
+
+  isInDuty: boolean;
+  inDutyCnt: number;
+  currentDuty: 'off' | '1' | '2' | '3';
+  offDutyReason: string; // from backend
+  dutyRecoverTime: string; // from backend
+}
+
+export class DutyInfo extends Component {
+  props = {
+    data: new DutyData(),
+  };
+
+  offDutyContent(): ReactNode {
+    const data = this.props.data;
+    const od = pt.get().mainPage.dutyCard.offDuty;
+    return (
+      <View>
+        <View>{od.title}</View>
+        <View>{od.reason(data.offDutyReason)}</View>
+        <View>{od.recoverTime(data.dutyRecoverTime)}</View>
+      </View>
+    );
+  }
+
+  inDutyContent(): ReactNode {
+    const data = this.props.data;
+    const id = pt.get().mainPage.dutyCard.inDuty;
+    return (
+      <View>
+        <View>{id.title}</View>
+        <View>{id.currentDutyText(data.currentDuty)}</View>
+        <View>{id.inDutyCnt(data.inDutyCnt)}</View>
+      </View>
+    );
+  }
+
+  render(): ReactNode {
+    if (this.props.data.isInDuty) {
+      return this.inDutyContent();
+    } else {
+      return this.offDutyContent();
+    }
+  }
+}
diff --git a/src/pages/index/StepTipsInfo.tsx b/src/pages/index/StepTipsInfo.tsx
new file mode 100644
index 0000000..4747016
--- /dev/null
+++ b/src/pages/index/StepTipsInfo.tsx
@@ -0,0 +1,24 @@
+import { Component, ReactNode } from 'react';
+import { View } from '@tarojs/components';
+import { AtTimeline } from 'taro-ui';
+import pt from '@/plain-text';
+
+export class StepInfo extends Component {
+  render(): ReactNode {
+    return (
+      <View>
+        <AtTimeline items={pt.get().mainPage.stepList}></AtTimeline>
+      </View>
+    );
+  }
+}
+
+export class TipsInfo extends Component {
+  render(): ReactNode {
+    return (
+      <View>
+        <AtTimeline items={pt.get().mainPage.tipsList}></AtTimeline>
+      </View>
+    );
+  }
+}
diff --git a/src/pages/index/TitleCard.tsx b/src/pages/index/TitleCard.tsx
new file mode 100644
index 0000000..39fb1ac
--- /dev/null
+++ b/src/pages/index/TitleCard.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import pt from '@/plain-text';
+
+export default class TitleCard extends React.Component {
+  render(): React.ReactNode {
+    const mainPage = pt.get().mainPage;
+    return (
+      <View className='page-title'>
+        <View className='at-article__h1'>{mainPage.mainTitleLine}</View>
+        <View className='at-article__h2'>{mainPage.subTitleLine}</View>
+      </View>
+    );
+  }
+}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index a9a6d2f..f001c83 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,13 +1,16 @@
 import { View } from '@tarojs/components';
 import { Component, ReactNode } from 'react';
 import Taro from '@tarojs/taro';
-import { AtCard, AtTimeline, AtAccordion } from 'taro-ui';
+import { AtCard, AtAccordion } from 'taro-ui';
 import type CustomTabBar from '@/custom-tab-bar';
 import PageFooter from '@/components/PageFooter/PageFooter';
 import pt from '@/plain-text';
 import './index.scss';
+import TitleCard from './TitleCard';
+import { DutyInfo, DutyData } from './DutyInfo';
+import { StepInfo, TipsInfo } from './StepTipsInfo';
 
-interface CardContent {
+class CardContent {
   title: string;
   note: string;
   extra: JSX.Element | string;
@@ -24,22 +27,6 @@ function mainPageCard(c: CardContent): JSX.Element {
   );
 }
 
-class DutyData {
-  constructor() {
-    this.isInDuty = false;
-    this.inDutyCnt = 3;
-    this.currentDuty = '2';
-    this.offDutyReason = '学园维修';
-    this.dutyRecoverTime = '下周一';
-  }
-
-  isInDuty: boolean;
-  inDutyCnt: number;
-  currentDuty: 'off' | '1' | '2' | '3';
-  offDutyReason: string; // from backend
-  dutyRecoverTime: string; // from backend
-}
-
 class ExpandItem extends Component {
   state = {
     open: false,
@@ -68,64 +55,6 @@ class ExpandItem extends Component {
   }
 }
 
-class DutyInfo extends Component {
-  props = {
-    data: new DutyData(),
-  };
-
-  offDutyContent(): ReactNode {
-    const data = this.props.data;
-    const od = pt.get().mainPage.dutyCard.offDuty;
-    return (
-      <View>
-        <View>{od.title}</View>
-        <View>{od.reason(data.offDutyReason)}</View>
-        <View>{od.recoverTime(data.dutyRecoverTime)}</View>
-      </View>
-    );
-  }
-
-  inDutyContent(): ReactNode {
-    const data = this.props.data;
-    const id = pt.get().mainPage.dutyCard.inDuty;
-    return (
-      <View>
-        <View>{id.title}</View>
-        <View>{id.currentDutyText(data.currentDuty)}</View>
-        <View>{id.inDutyCnt(data.inDutyCnt)}</View>
-      </View>
-    );
-  }
-
-  render(): ReactNode {
-    if (this.props.data.isInDuty) {
-      return this.inDutyContent();
-    } else {
-      return this.offDutyContent();
-    }
-  }
-}
-
-class StepInfo extends Component {
-  render(): ReactNode {
-    return (
-      <View>
-        <AtTimeline items={pt.get().mainPage.stepList}></AtTimeline>
-      </View>
-    );
-  }
-}
-
-class TipsInfo extends Component {
-  render(): ReactNode {
-    return (
-      <View>
-        <AtTimeline items={pt.get().mainPage.tipsList}></AtTimeline>
-      </View>
-    );
-  }
-}
-
 export default class Index extends Component {
   state = {
     dutyData: new DutyData(),
@@ -161,10 +90,7 @@ export default class Index extends Component {
     const mainPage = pt.get().mainPage;
     return (
       <View>
-        <View className='page-title'>
-          <View className='at-article__h1'>{mainPage.mainTitleLine}</View>
-          <View className='at-article__h1'>{mainPage.subTitleLine}</View>
-        </View>
+        <TitleCard />
         <View style={{ marginTop: 30 }}>
           {mainPageCard(this.state.dutyInfoCard)}
           {mainPageCard(this.state.tipsInfoCard)}