diff --git a/.DS_Store b/.DS_Store
index 5ae79e5..d65980b 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/components/kit/components/commerce/index.tsx b/components/kit/components/commerce/index.tsx
index b1fcb51..8edcc2a 100644
--- a/components/kit/components/commerce/index.tsx
+++ b/components/kit/components/commerce/index.tsx
@@ -11,7 +11,7 @@ const Commerce: FC = () => {
     },
     {
       title: "Shopping cards",
-      items: 7,
+      items: 8,
       img: "images/sections/shopping.png",
       link: "/components/shopping",
     },
diff --git a/components/kit/components/commerce/shopping/BookingCard.tsx b/components/kit/components/commerce/shopping/BookingCard.tsx
new file mode 100644
index 0000000..a974091
--- /dev/null
+++ b/components/kit/components/commerce/shopping/BookingCard.tsx
@@ -0,0 +1,96 @@
+import React, { FC } from "react";
+
+const BookingCard: FC = () => {
+  return (
+    <div className="lg:flex  max-w-2xl mx-auto overflow-hidden rounded-lg dark:text-gray-50 dark:bg-gray-900 shadow-lg">
+      <img
+        className="lg:w-1/3 w-full lg:h-auto h-48  object-cover"
+        src="/images/landscape/9.jpg"
+      />
+
+      <div>
+        <div className="bg-white dark:bg-gray-900  p-4">
+          <h2 className="font-bold text-gray-900 dark:text-gray-50 text-2xl">
+            Amsterdam Walking Tour
+          </h2>
+
+          <div className="text-gray-500 dark:text-gray-200 py-2">
+            Explore popular destinations as well as hidden local favourtes
+          </div>
+        </div>
+        <div className="bg-gray-50 dark:bg-gray-800 w-full p-4 flex h-full justify-between">
+          <div>
+            <div className="text-lg py-1 text-gray-500 dark:text-gray-200">
+              <span className="font-bold text-black dark:text-white pr-1">
+                $17
+              </span>{" "}
+              per person
+              <sup>*</sup>
+            </div>
+            <div className="text-gray-400 dark:text-gray-100 flex items-center">
+              <div className="flex mr-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  className="fill-current text-green-400"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  className="fill-current text-green-400"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  className="fill-current text-green-400"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  className="fill-current text-green-400"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
+                </svg>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  className="fill-current text-green-400"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />
+                </svg>
+              </div>{" "}
+              28 reviews
+            </div>
+            <div className="text-gray-400 dark:text-gray-200 py-6">
+              Price may very depending on selected date
+            </div>
+          </div>
+
+          <div>
+            <button className="bg-blue-700  dark:bg-blue-100 dark:text-gray-900 text-white px-4 py-2 focus:bg-blue-600 focus:border rounded shadow-lg ">
+              Book now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookingCard;
diff --git a/pages/components/shopping/index.tsx b/pages/components/shopping/index.tsx
index fd1a14b..037a138 100644
--- a/pages/components/shopping/index.tsx
+++ b/pages/components/shopping/index.tsx
@@ -9,6 +9,7 @@ import ClassicShoppingCard from "../../../components/kit/components/commerce/sho
 import SimpleShoppingCard from "../../../components/kit/components/commerce/shopping/SimpleShoppingCard";
 import ShippedCard from "../../../components/kit/components/commerce/shopping/ShippedCard";
 import ProductWithEval from "../../../components/kit/components/commerce/shopping/ProductWithEval";
+import BookingCard from "../../../components/kit/components/commerce/shopping/BookingCard";
 
 const ShoppingPage: FC = () => {
   return (
@@ -56,6 +57,12 @@ const ShoppingPage: FC = () => {
         element={<ShippedCard />}
         component={ShippedCard}
       />
+      <ComponentLayout
+        title="Booking"
+        showSwitchMode={true}
+        element={<BookingCard />}
+        component={BookingCard}
+      />
     </AppLayout>
   );
 };
diff --git a/public/.DS_Store b/public/.DS_Store
index e2ea82d..f6d5db5 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
index 0a8df7d..5b6fce7 100644
Binary files a/public/images/.DS_Store and b/public/images/.DS_Store differ
diff --git a/public/images/landscape/9.jpg b/public/images/landscape/9.jpg
new file mode 100644
index 0000000..3d70265
Binary files /dev/null and b/public/images/landscape/9.jpg differ
diff --git a/public/images/sections/.DS_Store b/public/images/sections/.DS_Store
index 246e6c1..ffc1825 100644
Binary files a/public/images/sections/.DS_Store and b/public/images/sections/.DS_Store differ