diff --git a/resources/views/pages/order_details.blade.php b/resources/views/pages/order_details.blade.php
new file mode 100644
index 00000000..a74f08f4
--- /dev/null
+++ b/resources/views/pages/order_details.blade.php
@@ -0,0 +1,102 @@
+<div class="col-0">
+    <!-- QR Code Structure -->
+    <div class="row">
+        <div class="d-flex flex-row align-items-center">
+            <div class="col">
+                <img class="p-2 border" style="width: 100px; height: 100px;" src="http://eslkidsgames.com/Flash/QR%20Code%20Maker/eslkidsgames.com.png">
+            </div>
+            <div class="d-flex flex-column pl-3">
+                <span class="fs-16" style="color: #a6a6a6;">Order #00012558</span>
+                <span class="py-2 fs-20 bold">Your order(s) are ready for shipment</span>
+                <span class="fs-14" style="color: #a6a6a6;">Ordered at 1:54PM on 12 August, 2021</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Banner Component -->
+    <div class="py-3">
+        <div class="p-3 card b-rad-2 no-border" style="background-color: #f6f6f6;">
+            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
+                <div class="d-flex flex-column">
+                    <span class="fs-14 bold" style="color: #5c5c5c;">Latest Update</span>
+                    <span class="fs-12 bold" style="color: #5c5c5c;">Today <span class="fs-12" style="color: #a6a6a6;">at 3:04PM</span></span>
+                    <div>
+                        <span class="fs-12" style="color: #a6a6a6;">From: Guangzhou, China</span>
+                        <span class="fs-12 pl-3 pl-sm-5" style="color: #a6a6a6;">To: Kuala Lumpur, Malaysia</span>
+                    </div>
+                </div>
+                <div class="d-flex flex-row">
+                    <div class="d-none d-md-inline">
+                        <div class="col-6 border-right" style="height: 50px;"></div>
+                    </div>
+                    <div class="pl-md-4 d-flex flex-column">
+                        <span class="fs-14 text-right" style="color: #a6a6a6;">Carrier Tracking Number</span>
+                        <span class="fs-14 bold text-right text-underline" style="color: #5c5c5c">#1ZYBR067TW403742920</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Stepper Bar -->
+    @include('partials.tab')
+
+    <!-- Order List Item -->
+    <div class="w-100">
+        <div class="border-top border-bottom" style="border-color: #e6e6e6;">
+            <div class="py-3">
+                <div clas="row">
+                    <div class="d-flex flex-column flex-sm-row">
+                        <div class="col-0">
+                            <!-- Placeholder, We Can Simply Remove It Once We Have Another Design -->
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100.181" height="79.5" viewBox="0 0 100.181 79.5">
+                                <g id="Group_1383" data-name="Group 1383" transform="translate(-889.514 -181.288)">
+                                    <path id="Path_4020" data-name="Path 4020" d="M952,332.246l-62.483-19.631V266.054L952,279.356Z" transform="translate(0 -71.459)" fill="#d3b875"/>
+                                    <path id="Path_4021" data-name="Path 4021" d="M1325.213,284.831l-37.7,21.43v-52.89l37.7-18.141Z" transform="translate(-335.518 -45.473)" fill="#b78c58"/>
+                                    <path id="Path_4022" data-name="Path 4022" d="M889.514,194.6l38.136-13.308,62.045,8.468L952,207.9Z" transform="translate(0 0)" fill="#f2d08b"/>
+                                    <path id="Path_4023" data-name="Path 4023" d="M1005.032,216.015l58.887,12.9,1.21,21.085,2.074,3.024,1.026-3.889,1.394,1.21,1.383-2.765,1.037,1.555-1.334-23.749L1010.224,214.2Z" transform="translate(-97.383 -27.748)" fill="#846b3d" opacity="0.6"/>
+                                    <path id="Path_4024" data-name="Path 4024" d="M1053.026,217.9l36.813-15.45,6.263.855-35.319,16.246Z" transform="translate(-137.842 -17.844)" fill="#846b3d" opacity="0.6"/>
+                                    <path id="Path_4025" data-name="Path 4025" d="M1053.026,300.865v49.162l7.757,2.437V302.516Z" transform="translate(-137.842 -100.804)" fill="#846b3d"/>
+                                    <path id="Path_4026" data-name="Path 4026" d="M1330.25,542.961c0,.573-.427.769-1.037,1.037l-6.394,3.228c-.864.43-1.037-.464-1.037-1.037v-9.851c0-.573.374-.708,1.037-1.037l6.394-3.228c1.354-.691.948.714,1.037,3.37Z" transform="translate(-364.405 -295.567)" fill="#fff"/>
+                                    <path id="Path_4027" data-name="Path 4027" d="M1325.959,549.8l6.346-3.084v.354l-6.346,3.191Z" transform="translate(-367.927 -308.06)" fill="#4c402c"/>
+                                    <path id="Path_4028" data-name="Path 4028" d="M1325.959,557.536l6.346-3.084v.355L1325.959,558Z" transform="translate(-367.927 -314.58)" fill="#4c402c"/>
+                                    <path id="Path_4029" data-name="Path 4029" d="M1325.959,566.218l6.346-3.084v.355l-6.346,3.191Z" transform="translate(-367.927 -321.899)" fill="#4c402c"/>
+                                    <path id="Path_4030" data-name="Path 4030" d="M1326.912,596.125l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -348.067)" fill="#4c402c"/>
+                                    <path id="Path_4031" data-name="Path 4031" d="M1326.912,602l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -353.017)" fill="#4c402c"/>
+                                    <path id="Path_4032" data-name="Path 4032" d="M1326.912,607.985l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -358.065)" fill="#4c402c"/>
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="w-100 d-flex flex-column">
+                            <div class="d-flex">
+                                <div class="col pl-4">
+                                    <div class="row">
+                                        <div class="d-flex flex-column pl-3">
+                                            <span class="fs-12 bold" style="color: #5c5c5c;">MY55899874</span>
+                                            <span class="py-2 fs-14 bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
+                                        </div>
+                                    </div>
+                                    <div class="d-flex flex-row">
+                                        <span class="fs-12" style="color: #a6a6a6;">From: Guangzhou, China</span>
+                                        <span class="fs-12 pl-3 pl-sm-5" style="color: #a6a6a6;">To: Kuala Lumpur, Malaysia</span>
+                                    </div>
+                                </div>
+                                <div class="d-flex flex-column">
+                                    <span class="fs-12 all-caps text-right" style="color: #912873;">To Be Shipped</span>
+                                    <span class="py-2 fs-12 text-right bold">52x65x35 CM / 10KG</span>
+                                </div>
+                            </div>
+                            <div class="pt-3 d-flex align-items-center">
+                                <span class="col pl-4 fs-12" style="color: #a6a6a6;">Date: 12 August, 2021</span>
+                                <div class="d-flex flex-row justify-content-between" style="width: 295px;">
+                                    <div class="btn btn-primary b-rad-2" style="width: 145px;">Ship Now</div>
+                                    <div class="btn btn-secondary b-rad-2" style="width: 145px;">Details</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/tab.blade.php b/resources/views/partials/tab.blade.php
new file mode 100644
index 00000000..24e29cdf
--- /dev/null
+++ b/resources/views/partials/tab.blade.php
@@ -0,0 +1,16 @@
+<div class="card-header mb-md-3 bg-white shadow-sm no-border">
+    <div class="nav nav-pills nav-fill" role="tablist">
+        <div class="nav-item">
+            <a class="nav-link active" href="#">To Ship</a>
+        </div>
+        <div class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#" role="tab">In Transit</a>
+        </div>
+        <div class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#" role="tab">To Receive</a>
+        </div>
+        <div class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#" role="tab">Completed</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file