diff --git a/src/components/order/ConfirmOrderForm.tsx b/src/components/order/ConfirmOrderForm.tsx
index 156c915..8a34e85 100644
--- a/src/components/order/ConfirmOrderForm.tsx
+++ b/src/components/order/ConfirmOrderForm.tsx
@@ -8,8 +8,9 @@ export function ConfirmOrderForm() {
   return (
     <>
       <div>ConfirmOrderForm</div>
-      <Button onClick={() => setOrderStep(4)}>Confirm</Button>
+      <Button onClick={() => setOrderStep(5)}>Confirm</Button>
       <Button onClick={() => setOrderStep(2)}>Back</Button>
+      <Button onClick={() => setOrderStep(4)}>Print wallet</Button>
     </>
   );
 }
diff --git a/src/components/order/OrderSuccessForm.tsx b/src/components/order/OrderSuccessForm.tsx
new file mode 100644
index 0000000..981fe8e
--- /dev/null
+++ b/src/components/order/OrderSuccessForm.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@material-tailwind/react';
+import { useOrderWorkflowStore } from '@states/order';
+
+// Tan's third-task in here.
+export function OrderSuccessForm() {
+  const { setOrderStep } = useOrderWorkflowStore();
+
+  return (
+    <>
+      <div>OrderSuccessForm</div>
+      <Button onClick={() => setOrderStep(5)}>Track this order</Button>
+      <Button onClick={() => setOrderStep(3)}>Back</Button>
+    </>
+  );
+}
diff --git a/src/components/order/OrderWorkflowBox.tsx b/src/components/order/OrderWorkflowBox.tsx
index dffe4d1..31b6f0d 100644
--- a/src/components/order/OrderWorkflowBox.tsx
+++ b/src/components/order/OrderWorkflowBox.tsx
@@ -1,6 +1,12 @@
 import { useState } from 'react';
 import { Dialog, DialogBody } from '@material-tailwind/react';
-import { UploadDocumentForm, OrderListForm, ConfirmOrderForm } from '@components/order';
+import {
+  UploadDocumentForm,
+  OrderListForm,
+  ConfirmOrderForm,
+  TopupWalletForm,
+  OrderSuccessForm
+} from '@components/order';
 import { useOrderWorkflowStore } from '@states/order';
 
 export function useOrderWorkflowBox() {
@@ -14,6 +20,10 @@ export function useOrderWorkflowBox() {
       return <OrderListForm />;
     } else if (orderStep === 3) {
       return <ConfirmOrderForm />;
+    } else if (orderStep === 4) {
+      return <TopupWalletForm />;
+    } else if (orderStep === 5) {
+      return <OrderSuccessForm />;
     }
   };
 
diff --git a/src/components/order/TopupWalletForm.tsx b/src/components/order/TopupWalletForm.tsx
new file mode 100644
index 0000000..a3002bb
--- /dev/null
+++ b/src/components/order/TopupWalletForm.tsx
@@ -0,0 +1,14 @@
+import { Button } from '@material-tailwind/react';
+import { useOrderWorkflowStore } from '@states/order';
+
+// Tue's task in here.
+export function TopupWalletForm() {
+  const { setOrderStep } = useOrderWorkflowStore();
+
+  return (
+    <>
+      <div>TopupWalletForm</div>
+      <Button onClick={() => setOrderStep(3)}>Top up wallet</Button>
+    </>
+  );
+}
diff --git a/src/components/order/index.ts b/src/components/order/index.ts
index 597872c..81f9c5e 100644
--- a/src/components/order/index.ts
+++ b/src/components/order/index.ts
@@ -4,5 +4,7 @@
 
 export * from './ConfirmOrderForm';
 export * from './OrderListForm';
+export * from './OrderSuccessForm';
 export * from './OrderWorkflowBox';
+export * from './TopupWalletForm';
 export * from './UploadDocumentForm';