diff --git a/car-ui-react/src/pages/Order/OrderPage.js b/car-ui-react/src/pages/Order/OrderPage.js
new file mode 100644
index 0000000..af0a7d4
--- /dev/null
+++ b/car-ui-react/src/pages/Order/OrderPage.js
@@ -0,0 +1,12 @@
+import { OrderSuccess } from "./components/OrderSuccess"
+import { OrderFail } from "./components/OrderFail"
+
+export const OrderPage = () => {
+    const status= true;
+
+    return (
+      <main>
+        { status ? <OrderSuccess /> : <OrderFail />}
+      </main>
+    )
+  }
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Order/components/OrderFail.js b/car-ui-react/src/pages/Order/components/OrderFail.js
new file mode 100644
index 0000000..4913946
--- /dev/null
+++ b/car-ui-react/src/pages/Order/components/OrderFail.js
@@ -0,0 +1,16 @@
+export const OrderFail = () => {
+    return (
+      <section className="text-xl text-center max-w-4xl mx-auto my-10 py-5 dark:text-slate-100 border dark:border-slate-700 rounded bg-gray-200">
+          <div className="my-5">
+              <p className="bi bi-exclamation-circle text-red-500 text-7xl mb-5"></p>
+              <p>Payment failed, please try again!</p>     
+          </div>
+          <div className="my-5">
+              <p>Your order is not confirmed.</p>
+              <p>Connect <span className="">AutoMarket@NashTech.com</span> for support.</p>
+          </div>
+          <a href="/" type="button" className="text-white bg-blue-700 hover:bg-blue-800 rounded-lg text-lg px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none">Check Cart Again<i className="ml-2 bi bi-cart"></i></a>
+      </section>
+    )
+  }
+  
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Order/components/OrderSuccess.js b/car-ui-react/src/pages/Order/components/OrderSuccess.js
new file mode 100644
index 0000000..59edb27
--- /dev/null
+++ b/car-ui-react/src/pages/Order/components/OrderSuccess.js
@@ -0,0 +1,17 @@
+export const OrderSuccess = () => {
+    return (
+      <section className="text-xl text-center max-w-4xl mx-auto my-10 py-5 dark:text-slate-100 border dark:border-slate-700 rounded bg-gray-200">
+          <div className="my-5">
+              <p className="bi bi-check-circle text-green-600 text-7xl mb-5"></p>
+              <p>Thank you user name for order!</p>
+              <p>Your Order ID: user id</p>          
+          </div>
+          <div className="my-5">
+              <p>Your order is confirmed.</p>
+              <p>Please check your mail (user@email.com) for the purchased Car.</p>
+              <p className="my-5">Payment ID: xyz_123456789</p>
+          </div>
+          <a href="/" type="button" className="text-white bg-blue-700 hover:bg-blue-800 rounded-lg text-lg px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none">Continue Shopping <i className="ml-2 bi bi-cart"></i></a>
+      </section>
+    )
+  }
\ No newline at end of file