diff --git a/.prettierignore b/.prettierignore
index d0266ae..0cc4d0b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -8,4 +8,5 @@ node_modules/
 .swc
 .husky
 .prettierignore
-.env.*
\ No newline at end of file
+.env.*
+**/*.svg
\ No newline at end of file
diff --git a/src/assets/icons/MainPage/cross.svg b/src/assets/icons/MainPage/cross.svg
new file mode 100644
index 0000000..35ab54d
--- /dev/null
+++ b/src/assets/icons/MainPage/cross.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1709729147345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7587" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M960 170.56L869.44 80 512 437.44 154.56 80 64 170.56 421.44 528 64 885.44l90.56 90.56L512 618.56 869.44 976 960 885.44 602.56 528 960 170.56z" p-id="7588" fill="#d4237a"></path></svg>
\ No newline at end of file
diff --git a/src/assets/icons/MainPage/tick.svg b/src/assets/icons/MainPage/tick.svg
new file mode 100644
index 0000000..e31ad61
--- /dev/null
+++ b/src/assets/icons/MainPage/tick.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1709729289782" class="icon" viewBox="0 0 1418 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8708" width="44.3125" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M491.191709 1023.803077L0.136305 539.63733l111.888035-110.273886 379.167369 373.89186L1305.549204 0.433064 1417.437238 110.706951 491.191709 1023.803077z" p-id="8709" fill="#12c53d"></path></svg>
\ No newline at end of file
diff --git a/src/pages/index/DutyInfo.tsx b/src/pages/index/DutyInfo.tsx
index e33cf5b..4e3daac 100644
--- a/src/pages/index/DutyInfo.tsx
+++ b/src/pages/index/DutyInfo.tsx
@@ -1,6 +1,9 @@
 import { Component, ReactNode } from 'react';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
+import { AtTimeline } from 'taro-ui';
 import pt from '@/plain-text';
+import tick from '@/assets/icons/MainPage/tick.svg';
+import cross from '@/assets/icons/MainPage/cross.svg';
 
 export class DutyData {
   constructor() {
@@ -18,6 +21,45 @@ export class DutyData {
   dutyRecoverTime: string; // from backend
 }
 
+class Card extends Component {
+  props = {
+    isInDuty: false,
+  };
+  render(): ReactNode {
+    const inDuty = this.props.isInDuty;
+    const dc = pt.get().mainPage.dutyCard;
+    const title = inDuty ? dc.inDuty.title : dc.offDuty.title;
+    const iconsrc = inDuty ? tick : cross;
+    return (
+      <View>
+        <View
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: 20,
+          }}
+        >
+          <Image
+            src={iconsrc}
+            style={{
+              width: 24,
+              height: 24,
+            }}
+          />
+          <View
+            style={{
+              marginLeft: 10,
+              fontSize: 36,
+            }}
+          >
+            {title}
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
 export class DutyInfo extends Component {
   props = {
     data: new DutyData(),
@@ -28,9 +70,13 @@ export class DutyInfo extends Component {
     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>
+        <Card isInDuty={data.isInDuty} />
+        <AtTimeline
+          items={[
+            { title: od.reason(data.offDutyReason) },
+            { title: od.recoverTime(data.dutyRecoverTime) },
+          ]}
+        />
       </View>
     );
   }
@@ -40,9 +86,13 @@ export class DutyInfo extends Component {
     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>
+        <Card isInDuty={data.isInDuty} />
+        <AtTimeline
+          items={[
+            { title: id.currentDutyText(data.currentDuty) },
+            { title: id.inDutyCnt(data.inDutyCnt) },
+          ]}
+        />
       </View>
     );
   }
diff --git a/src/plain-text/MainPage.ts b/src/plain-text/MainPage.ts
index 584b483..e804739 100644
--- a/src/plain-text/MainPage.ts
+++ b/src/plain-text/MainPage.ts
@@ -28,8 +28,8 @@ export interface MainPageText {
 }
 
 export const mainPageZhCn: MainPageText = {
-  mainTitleLine: '您好，这里是E志者协会。',
-  subTitleLine: '维修请移步`东三-204`实验室。',
+  mainTitleLine: '您好，这里是E志者协会',
+  subTitleLine: '维修请至【东三-204】实验室',
   cardTitle: {
     dutyInfo: '204值班情况',
     stepInfo: '维修步骤',