diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
index 592dfe1..5cab35b 100644
--- a/src/pages/TicketDetail/TicketDetail.tsx
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -3,10 +3,23 @@ import { View } from '@tarojs/components';
 import { getCurrentInstance } from '@tarojs/runtime';
 import Taro from '@tarojs/taro';
 import pt from '@/plain-text';
+import { AtSteps } from 'taro-ui';
 
-export default class TicketDetail extends Component {
+interface StepItemData {
+  title: string;
+}
+
+interface TicketDetailState {
+  id: number;
+  current: number;
+  items: Array<StepItemData>;
+}
+
+export default class TicketDetail extends Component<{}, TicketDetailState> {
   state = {
     id: 0,
+    current: 0,
+    items: [],
   };
   componentDidMount(): void {
     const navBar = pt.get().navBar;
@@ -14,12 +27,23 @@ export default class TicketDetail extends Component {
       title: navBar.ticketDetail,
     });
     const { router } = getCurrentInstance();
-    const id = router?.params.id;
+    const id = router?.params.id as number;
+    const items = pt.get().ticketDetail.stepItems;
     this.setState({
       id: id,
+      items: items,
     });
   }
   render(): ReactNode {
-    return <View>TicketDetail: {this.state.id}</View>;
+    return (
+      <View>
+        <AtSteps
+          items={this.state.items}
+          current={this.state.current}
+          onChange={() => {}}
+        />
+        <View>TicketDetail: {this.state.id}</View>
+      </View>
+    );
   }
 }
diff --git a/src/plain-text/TicketDetail.ts b/src/plain-text/TicketDetail.ts
new file mode 100644
index 0000000..5de15ab
--- /dev/null
+++ b/src/plain-text/TicketDetail.ts
@@ -0,0 +1,19 @@
+interface StepItem {
+  title: string;
+}
+
+export interface TicketDetailText {
+  stepItems: Array<StepItem>;
+}
+
+export const ticketDetailZhCn: TicketDetailText = {
+  stepItems: [{ title: '创建成功' }, { title: '维修中' }, { title: '待取回' }],
+};
+
+export const ticketDetailEnUs: TicketDetailText = {
+  stepItems: [
+    { title: 'Ticket created' },
+    { title: 'Repairing' },
+    { title: 'Take home' },
+  ],
+};
diff --git a/src/plain-text/index.ts b/src/plain-text/index.ts
index 79765d1..a20d939 100644
--- a/src/plain-text/index.ts
+++ b/src/plain-text/index.ts
@@ -9,6 +9,11 @@ import { ButtonText, buttonEnUs, buttonZhCn } from './Button';
 import { MemberPageText, memberPageEnUs, memberPageZhCn } from './MemberPage';
 import { TicketListText, ticketListEnUs, ticketListZhCn } from './TicketList';
 import { NavBarTitle, navBarTitleEnUs, navBarTitleZhCh } from './NavBarTitle';
+import {
+  TicketDetailText,
+  ticketDetailEnUs,
+  ticketDetailZhCn,
+} from './TicketDetail';
 
 interface TextRecord {
   pageFooter: PageFooterText;
@@ -22,6 +27,7 @@ interface TextRecord {
   memberPage: MemberPageText;
   ticketList: TicketListText;
   navBar: NavBarTitle;
+  ticketDetail: TicketDetailText;
 }
 
 const textZhCn: TextRecord = {
@@ -36,6 +42,7 @@ const textZhCn: TextRecord = {
   memberPage: memberPageZhCn,
   ticketList: ticketListZhCn,
   navBar: navBarTitleZhCh,
+  ticketDetail: ticketDetailZhCn,
 };
 
 const textEnUs: TextRecord = {
@@ -50,6 +57,7 @@ const textEnUs: TextRecord = {
   memberPage: memberPageEnUs,
   ticketList: ticketListEnUs,
   navBar: navBarTitleEnUs,
+  ticketDetail: ticketDetailEnUs,
 };
 
 // type Lang = 'zh_CN' | 'en_US' | ...;