diff --git a/components/purchase-step-shipping.html b/components/purchase-step-shipping.html
new file mode 100644
index 0000000..4a607fc
--- /dev/null
+++ b/components/purchase-step-shipping.html
@@ -0,0 +1,157 @@
+<div class="mb-10 xl:mb-0 xl:grid xl:grid-cols-12">
+    <div
+        class="bg-gray-800 text-center text-yellow-200 flex xl:flex-col items-center justify-around col-span-2 py-4 lg:py-0"
+    >
+        <h1 class="xl:text-5xl text-2xl font-bold">S.</h1>
+        <p class="hidden lg:block"><i class="fa fa-bars fa-2x"></i></p>
+        <p class="lg:hidden"><i class="fa fa-bars"></i></p>
+        <p class="hidden lg:block"><i class="fa fa-info-circle fa-2x"></i></p>
+        <p class="lg:hidden"><i class="fa fa-info-circle"></i></p>
+    </div>
+
+    <div class="bg-white col-span-7 pb-12">
+        <h1 class="text-5xl pl-10 pt-8 pb-6 font-semibold">
+            Step 1: &nbsp;&nbsp;Shipping Method
+        </h1>
+        <div class="flex flex-col mx-6 lg:mx-0 lg:flex-row justify-around">
+            <div
+                class="flex flex-row items-center lg:w-2/5 justify-between bg-gray-100 shadow-lg py-4 px-5"
+            >
+                <input type="radio" name="Shipping" id="" />
+                <div>
+                    <p class="font-bold">UPS Ground Shipping</p>
+                    <p class="text-sm text-gray-500">
+                        Standard delivery in 5-7 days.
+                    </p>
+                </div>
+                <p class="font-bold">$9.99</p>
+            </div>
+            <div
+                class="flex flex-row items-center lg:w-2/5 justify-between bg-gray-100 shadow-lg py-4 px-5"
+            >
+                <input type="radio" name="Shipping" id="" />
+                <div>
+                    <p class="font-bold">Priority Express</p>
+                    <p class="text-sm text-gray-500">
+                        Delivery within 24 hours.
+                    </p>
+                </div>
+                <p class="font-bold">$29.99</p>
+            </div>
+        </div>
+
+        <h1 class="text-5xl pl-10 pt-8 pb-6 font-semibold">
+            Step 2: &nbsp;&nbsp;Address Details
+        </h1>
+        <div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around">
+            <p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="First Name"
+                    class="py-3 w-full"
+                />
+            </p>
+            <p class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="Last Name"
+                    class="py-3 w-full"
+                />
+            </p>
+        </div>
+
+        <div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around mt-4">
+            <p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="Email Address"
+                    class="py-3 w-full"
+                />
+            </p>
+            <p class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="Phone Number"
+                    class="py-3 w-full"
+                />
+            </p>
+        </div>
+
+        <div class="flex flex-col lg:flex-row mx-6 lg:mx-0 justify-around mt-4">
+            <p class="lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <input
+                    type="text"
+                    name=""
+                    id=""
+                    placeholder="City"
+                    class="py-3 w-full"
+                />
+            </p>
+            <div class="mt-4 lg:mt-0 lg:w-2/5 bg-gray-100 shadow-lg py-2 px-5">
+                <select name="" id="" class="py-3 w-full">
+                    <option value="">United States</option>
+                    <option value="">Canada</option>
+                    <option value="">Australia</option>
+                    <option value="">United Kingdom</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-span-3">
+        <div
+            class="flex flex-row font-bold mx-8 justify-between text-2xl mt-16"
+        >
+            <p>Shopping Cart</p>
+            <p>(03)</p>
+        </div>
+        <div class="flex flex-row mx-8 justify-between mt-6 mb-2">
+            <img
+                src="https://source.unsplash.com/random/400x300"
+                class="w-24 h-18"
+            />
+            <div>
+                <p class="text-sm font-bold">Item 1</p>
+                <p class="text-xs text-gray-500">Small, Blue</p>
+                <p class="text-xs text-gray-500">Qty: 1</p>
+            </div>
+            <p>$12.49</p>
+        </div>
+        <div class="flex flex-row mx-8 justify-between mt-6 mb-2">
+            <img
+                src="https://source.unsplash.com/random/401x300"
+                class="w-24 h-18"
+            />
+            <div>
+                <p class="text-sm font-bold">Item 2</p>
+                <p class="text-xs text-gray-500">Medium, Red</p>
+                <p class="text-xs text-gray-500">Qty: 2</p>
+            </div>
+            <p>$8.99</p>
+        </div>
+        <p class="underline text-xs text-gray-600 ml-8">Modify Cart</p>
+        <hr class="m-8" />
+        <div class="flex flex-row justify-between mx-8">
+            <p class="font-bold">SUBTOTAL</p>
+            <p class="font-bold">$21.48</p>
+        </div>
+        <hr class="m-8" />
+        <div class="flex flex-row gap-32 mx-8 items-center justify-between">
+            <p class="text-gray-500 font-bold text-sm">Shipping to USA</p>
+            <p class="font-bold">$9.99</p>
+        </div>
+        <hr class="m-8" />
+        <div class="flex flex-row gap-32 mx-8 justify-between">
+            <p class="font-extrabold">TOTAL</p>
+            <p class="font-extrabold">$31.47</p>
+        </div>
+    </div>
+</div>