diff --git a/client/public/images/soon.png b/client/public/images/soon.png
new file mode 100644
index 0000000..3f73c54
Binary files /dev/null and b/client/public/images/soon.png differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 77a5745..c46d969 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -11,6 +11,8 @@ import ProductDetail from "./pages/products/details";
 import Products from "./pages/products";
 import News from "./pages/news";
 import SinglePageNews from "./pages/news/singlePage";
+import Favorite from "./pages/favorite";
+import Order from "./pages/order";
 
 const App: Component = () => {
   return (
@@ -25,6 +27,8 @@ const App: Component = () => {
         <Route path="/products/:id?" component={ProductDetail} />
         <Route path="/news" component={News} />
         <Route path="/news/:id?" component={SinglePageNews} />
+        <Route path="/favorite" component={Favorite} />
+        <Route path="/order" component={Order} />
       </Routes>
       <Footer />
     </section>
diff --git a/client/src/components/cards/Cards.tsx b/client/src/components/cards/Cards.tsx
index 3ef3970..8c437e1 100644
--- a/client/src/components/cards/Cards.tsx
+++ b/client/src/components/cards/Cards.tsx
@@ -35,10 +35,21 @@ const Cards: Component<{ product: Product }> = (props) => {
           onClick={() => {
             navigate(`/products/${props?.product?.id}`);
           }}
+          data-aos="zoom-out-down"
         >
           <div class="group relative max-w-sm h-[25.5rem] bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 ">
             <div class="absolute flex flex-col top-0 right-0 p-3">
+              <div
+                id="tooltip-light"
+                role="tooltip"
+                class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 tooltip"
+              >
+                Available soon
+                <div class="tooltip-arrow" data-popper-arrow></div>
+              </div>
               <button
+                data-tooltip-target="tooltip-light"
+                data-tooltip-style="light"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
index 816232e..b75e746 100644
--- a/client/src/components/cards/Member-cart.tsx
+++ b/client/src/components/cards/Member-cart.tsx
@@ -11,7 +11,10 @@ interface Props {
 }
 const MemberCard: Component<Props> = ({ props }) => {
   return (
-    <div class="text-center text-gray-500 dark:text-gray-400">
+    <div
+      class="text-center text-gray-500 dark:text-gray-400"
+      data-aos="zoom-out-down"
+    >
       <img
         class="mx-auto mb-4 w-52 h-52 rounded-full"
         src={props.image}
diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
index f6871e0..113cfd1 100644
--- a/client/src/components/cards/NewsCard.tsx
+++ b/client/src/components/cards/NewsCard.tsx
@@ -16,7 +16,7 @@ const NewsCard: Component<Props> = ({ props }) => {
   return (
     <div class="w-full ">
       <NavLink href={`/news/${props.id}`}>
-        <div class="mx-auto mb-3 max-w-[370px]">
+        <div class="mx-auto mb-3 max-w-[370px]" data-aos="zoom-out-down">
           <div class="mb-3 overflow-hidden rounded-2xl border-gray-200 shadow hover:scale-105 duration-150">
             <img src={props.image} alt="news" class="w-full" />
           </div>
diff --git a/client/src/components/cards/RelatedCard.tsx b/client/src/components/cards/RelatedCard.tsx
index 9b8b87f..aa892d5 100644
--- a/client/src/components/cards/RelatedCard.tsx
+++ b/client/src/components/cards/RelatedCard.tsx
@@ -15,7 +15,7 @@ interface Props {
 const RelatedCard: Component<Props> = ({ props }) => {
   return (
     <NavLink href={`/news/${props.id}`}>
-      <div class="lg:w-full mt-2 ">
+      <div class="lg:w-full mt-2 " data-aos="zoom-out-down">
         <div class="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left border p-2 rounded-xl">
           <img
             alt="team"
diff --git a/client/src/components/layouts/NavActive.tsx b/client/src/components/layouts/NavActive.tsx
new file mode 100644
index 0000000..c2101a6
--- /dev/null
+++ b/client/src/components/layouts/NavActive.tsx
@@ -0,0 +1,28 @@
+import { Component } from "solid-js";
+import { useLocation } from "@solidjs/router";
+
+export type Nav = {
+  title: string;
+  link: string;
+  isIcon: boolean;
+  icon: any;
+};
+
+const NavActive: Component<Nav> = (props) => {
+  const { title, link, isIcon, icon } = props;
+  const localtion = useLocation();
+
+  return (
+    <a
+      href={link}
+      class={`${
+        localtion.pathname === link && "text-primary font-extrabold"
+      } text-gray-900 flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:opacity-80`}
+    >
+      {isIcon && icon}
+      <span class="font-medium">{title}</span>
+    </a>
+  );
+};
+
+export default NavActive;
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
index 3b9d491..9828f18 100644
--- a/client/src/components/layouts/Navbar.tsx
+++ b/client/src/components/layouts/Navbar.tsx
@@ -1,9 +1,18 @@
-import { Component, createSignal } from "solid-js";
+import { Component } from "solid-js";
 import { NavLink } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
+import NavActive from "./NavActive";
 
-const Navbar: Component = () => {
+export type Nav = {
+  title: string;
+  link: string;
+  isIcon: boolean;
+  icon: any;
+};
+
+const Navbar: Component<{}> = () => {
   const { cartItems } = useCartContext();
+
   return (
     <div>
       <nav class=" bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100">
@@ -12,88 +21,92 @@ const Navbar: Component = () => {
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </a>
           <div class="flex items-center md:order-2">
-            <div class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100">
-              <svg
-                class="w-5 h-5 text-gray-600 dark:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 16"
-              >
-                <path d="M19 0H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM2 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H2Zm11 3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0h2a1 1 0 0 1 2 0v1Z" />
-              </svg>
-              <span class="font-medium">Orders</span>
-            </div>
-            <div class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100">
-              <svg
-                class="w-5 h-5 text-gray-600 dark:text-white"
-                aria-hidden="true"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 18"
-              >
-                <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
-              </svg>
-              <span class="font-medium">Favorites</span>
-            </div>
-            <a
-              href="/cart"
-              class="flex cursor-pointer items-center gap-x-2 rounded-md py-2 px-4 hover:bg-gray-100"
-            >
-              <div class="relative">
+            <NavActive
+              title="Order"
+              link="/order"
+              isIcon={true}
+              icon={
                 <svg
                   class="w-5 h-5 text-gray-600 dark:text-white"
                   aria-hidden="true"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="currentColor"
-                  viewBox="0 0 18 21"
+                  viewBox="0 0 20 16"
                 >
-                  <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" />
+                  <path d="M19 0H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM2 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H2Zm11 3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0h2a1 1 0 0 1 2 0v1Z" />
                 </svg>
-                <span class="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-2 text-xs text-white">
-                  {cartItems.length}
-                </span>
-              </div>
-              <span class="font-medium">Cart</span>
-            </a>
+              }
+            />
+            <NavActive
+              title="Favorites"
+              link="/favorite"
+              isIcon={true}
+              icon={
+                <svg
+                  class="w-5 h-5 text-gray-600 dark:text-white"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 20 18"
+                >
+                  <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
+                </svg>
+              }
+            />
+
+            <NavActive
+              title="Cart"
+              link="/cart"
+              isIcon={true}
+              icon={
+                <div class="relative">
+                  <svg
+                    class="w-5 h-5 text-gray-600 dark:text-white"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 18 21"
+                  >
+                    <path d="M15 12a1 1 0 0 0 .962-.726l2-7A1 1 0 0 0 17 3H3.77L3.175.745A1 1 0 0 0 2.208 0H1a1 1 0 0 0 0 2h.438l.6 2.255v.019l2 7 .746 2.986A3 3 0 1 0 9 17a2.966 2.966 0 0 0-.184-1h2.368c-.118.32-.18.659-.184 1a3 3 0 1 0 3-3H6.78l-.5-2H15Z" />
+                  </svg>
+                  <span class="absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 p-2 text-xs text-white">
+                    {cartItems.length}
+                  </span>
+                </div>
+              }
+            />
           </div>
           <div
             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
             id="navbar-language"
           >
-            <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <ul class="flex flex-col font-medium md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-3 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
-                <a
-                  href="/"
-                  class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
-                  aria-current="page"
-                >
-                  Home
-                </a>
+                <NavActive title="Home" link="/" isIcon={false} icon={null} />
               </li>
               <li>
-                <a
-                  href="/products"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  Products
-                </a>
+                <NavActive
+                  title="Products"
+                  link="/products"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
               <li>
-                <NavLink
-                  href="/about-us"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  About
-                </NavLink>
+                <NavActive
+                  title="About US"
+                  link="/about-us"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
               <li>
-                <a
-                  href="/news"
-                  class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
-                >
-                  News
-                </a>
+                <NavActive
+                  title="News"
+                  link="/news"
+                  isIcon={false}
+                  icon={null}
+                />
               </li>
             </ul>
           </div>
diff --git a/client/src/pages/cart.tsx b/client/src/pages/cart.tsx
index f3248d4..c4445f8 100644
--- a/client/src/pages/cart.tsx
+++ b/client/src/pages/cart.tsx
@@ -26,7 +26,7 @@ const Cart = () => {
 
   return (
     <>
-      <Checkout />
+      {/* <Checkout /> */}
       <div>
         <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl ">
           <h2 class="text-4xl text-[#98A2AE] font-bold text-center">
@@ -378,8 +378,6 @@ export const Checkout: Component = (props) => {
     console.log(formData());
   };
 
-  console.log(formData);
-
   return (
     <>
       <div
@@ -430,8 +428,9 @@ export const Checkout: Component = (props) => {
             </button>
           </div>
 
+          {/* form */}
           <div class="backdrop-blur-sm bg-white bg-opacity-80 md:p-8 p-3">
-            {/* <form onSubmit={handleSubmit}>
+            <form onSubmit={handleSubmit}>
               <div class="grid grid-cols-2 gap-4">
                 <div class="mb-6">
                   <label class="block text-md text-primary-focus">
@@ -521,7 +520,7 @@ export const Checkout: Component = (props) => {
                   </button>
                 )}
               </div>
-            </form> */}
+            </form>
 
             <form>
               <div class="mb-6">
diff --git a/client/src/pages/favorite.tsx b/client/src/pages/favorite.tsx
new file mode 100644
index 0000000..b83594b
--- /dev/null
+++ b/client/src/pages/favorite.tsx
@@ -0,0 +1,27 @@
+import { Component } from "solid-js";
+
+const Favorite: Component = () => {
+  return (
+    <section class="bg-white dark:bg-gray-900">
+      <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div class="mx-auto max-w-screen-sm text-center">
+          <img alt="comming soon" src="./images/soon.png" />
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Coming Soon
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            You'll find lots to explore on the home page.{" "}
+          </p>
+          <a
+            href="/"
+            class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+          >
+            Back to Homepage
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Favorite;
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 9e06d63..ed8f5ad 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -200,7 +200,7 @@ export const LatestProducts: Component<{}> = () => {
 
 export const MainProducts: Component<{}> = () => {
   const fetchData = async () => {
-    const res = await fetch("http://localhost:60011/CoreProducts");
+    const res = await fetch("https://cptdb.koompi.com/CoreProducts");
     return res.json();
   };
   const [coreProducts] = createResource(fetchData);
diff --git a/client/src/pages/order.tsx b/client/src/pages/order.tsx
new file mode 100644
index 0000000..9c0d9ff
--- /dev/null
+++ b/client/src/pages/order.tsx
@@ -0,0 +1,25 @@
+const Order = () => {
+  return (
+    <section class="bg-white dark:bg-gray-900">
+      <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div class="mx-auto max-w-screen-sm text-center">
+          <img alt="comming soon" src="./images/soon.png" />
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Coming Soon
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            You'll find lots to explore on the home page.{" "}
+          </p>
+          <a
+            href="/"
+            class="inline-flex text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-900 my-4"
+          >
+            Back to Homepage
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Order;
diff --git a/client/src/pages/products/details.tsx b/client/src/pages/products/details.tsx
index 2e4f5d4..c11153d 100644
--- a/client/src/pages/products/details.tsx
+++ b/client/src/pages/products/details.tsx
@@ -3,6 +3,8 @@ import { useParams } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
 import { useNavigate } from "@solidjs/router";
 import Image from "../../components/Image";
+import Cards from "../../components/cards/Cards";
+import CoreProducts from "../../data/Core-Product";
 
 type Product = {
   id: string;
@@ -16,7 +18,7 @@ type Product = {
 };
 
 const fetchProduct = async (id: string) => {
-  const res = await fetch(`http://localhost:60011/CoreProducts/` + id);
+  const res = await fetch(`https://cptdb.koompi.com/CoreProducts/` + id);
   return res.json();
 };
 const ProductDetail: Component<{}> = (props) => {
@@ -36,209 +38,62 @@ const ProductDetail: Component<{}> = (props) => {
   });
 
   return (
-    // <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
-    //   <div class="text-sm breadcrumbs">
-    //     <ul>
-    //       <li>
-    //         <a>Home</a>
-    //       </li>
-    //       <li>
-    //         <a>Core Product</a>
-    //       </li>
-    //       <li>Ribbon</li>
-    //       <li>CAM-TONER W1103A</li>
-    //     </ul>
-    //   </div>
-    //   <Show when={item()} fallback={<p>Loading....</p>}>
-    //     {/* //product details */}
-    //     <div class="mt-12">
-    //       <div class="grid md:grid-cols-6 grid-cols-1 gap-4">
-    //         <div class="col-span-2">
-    //           <img class="w-96" src={item()?.image} />
-    //           {/* <div class="mt-12">
-    //             <h1 class="text-gray-600 font-bold">Describtions:</h1>
-    //             <p class="mt-5">
-    //               Lorem Ipsum is simply dummy text of the printing and
-    //               typesetting industry. Lorem Ipsum has been the industry's
-    //               standard dummy text ever since the 1500s, when an unknown
-    //               printer took a galley of type and scrambled it to make a type
-    //               specimen book. It has survived not only five centuries, but
-    //               also the leap into electronic typesetting, remaining
-    //               essentiall y unchanged. It was popularised in the 1960s with
-    //               the release of Letraset sheets containing Lorem Ipsum
-    //               passages, and more recently with desktop publishing software
-    //               like Aldus PageMaker including versions of Lorem Ipsum.
-    //             </p>
-    //           </div> */}
-    //         </div>
-    //         <div class="col-span-4">
-    //           <h1 class="text-gray-600 text-2xl font-bold">{item()?.name}</h1>
-    //           <div>
-    //             <div class="rating rating-md mt-4">
-    //               <input
-    //                 type="radio"
-    //                 name="rating-7"
-    //                 class="mask mask-star-2 bg-yellow-400"
-    //               />
-    //               <input
-    //                 type="radio"
-    //                 name="rating-7"
-    //                 class="mask mask-star-2 bg-yellow-400"
-    //                 checked
-    //               />
-    //               <input
-    //                 type="radio"
-    //                 name="rating-7"
-    //                 class="mask mask-star-2 bg-yellow-400"
-    //               />
-    //               <input
-    //                 type="radio"
-    //                 name="rating-7"
-    //                 class="mask mask-star-2 bg-yellow-400"
-    //               />
-    //               <input
-    //                 type="radio"
-    //                 name="rating-7"
-    //                 class="mask mask-star-2 bg-yellow-400"
-    //               />
-    //             </div>
-    //           </div>
-    //           <div class="mt-5">
-    //             <p class="text-pink-500 font-bold text-xl">
-    //               Price: ${item()?.price}
-    //             </p>
-    //           </div>
-    //           <div class="md:w-[500px] mt-5">
-    //             <p class="text-lg text-gray-60">
-    //               🔍 BADGY 200 Black Ribbon Monochrome Add your review 91Ribbon
-    //               $19.00 Black monochrome ribbon 500 black mono prints per roll
-    //               Evolis CBGR0500K ribbon is for use with the Evolis Badgy200 &
-    //               Badgy100 card printers
-    //             </p>
-    //           </div>
-    //           <div class="flex space-x-3 mt-6 items-center">
-    //             <button class="btn btn-primary tn-md rounded-xl text-xs w-44 text-white">
-    //               Buy now
-    //             </button>
-    //             {isInCart() ? (
-    //               <NavLink href="/cart">
-    //                 <div class="flex justify-center">
-    //                   <button class="btn bg-pink-500 text-white btn-md rounded-xl text-xs w-44 hover:bg-pink-700">
-    //                     View cart
-    //                   </button>
-    //                 </div>
-    //               </NavLink>
-    //             ) : (
-    //               <div class="flex justify-center">
-    //                 <button
-    //                   onClick={() => handleAddTocart(item())}
-    //                   class="btn bg-pink-600 text-white btn-md rounded-xl text-xs w-44 hover:bg-pink-700"
-    //                 >
-    //                   Add to cart
-    //                 </button>
-    //               </div>
-    //             )}
-    //           </div>
-    //         </div>
-    //       </div>
-    //     </div>
-    //   </Show>
-    //   <div class="mt-12">
-    //     <h1 class="text-gray-600 font-bold">Describtions:</h1>
-    //     <p class="mt-5">
-    //       Lorem Ipsum is simply dummy text of the printing and typesetting
-    //       industry. Lorem Ipsum has been the industry's standard dummy text ever
-    //       since the 1500s, when an unknown printer took a galley of type and
-    //       scrambled it to make a type specimen book. It has survived not only
-    //       five centuries, but also the leap into electronic typesetting,
-    //       remaining essentiall y unchanged. It was popularised in the 1960s with
-    //       the release of Letraset sheets containing Lorem Ipsum passages, and
-    //       more recently with desktop publishing software like Aldus PageMaker
-    //       including versions of Lorem Ipsum.
-    //     </p>
-    //   </div>
-    //   <div>
-    //     <h1 class="text-gray-600 font-bold text-xl text-center mt-32">
-    //       Related Products
-    //     </h1>
-
-    //     <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12">
-    //       <For each={CoreProducts.slice(0, 4)}>
-    //         {(CoreProducts) => {
-    //           return (
-    //             <div>
-    //               <Cards product={CoreProducts} />
-    //             </div>
-    //           );
-    //         }}
-    //       </For>
-    //     </div>
-    //   </div>
-    // </div>
-
-    <div class="bg-white">
-      <div class="pt-6">
-        <nav aria-label="Breadcrumb">
-          <ol
-            role="list"
-            class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8"
-          >
-            <li>
-              <div class="flex items-center">
-                <a href="#" class="mr-2 text-sm font-medium text-gray-900">
-                  Accessories
-                </a>
-                <svg
-                  width="16"
-                  height="20"
-                  viewBox="0 0 16 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  class="h-5 w-4 text-gray-300"
+    <>
+      <div class="bg-white">
+        <div class="pt-6">
+          <nav aria-label="Breadcrumb">
+            <ol
+              role="list"
+              class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8"
+            >
+              <li>
+                <div class="flex items-center">
+                  <a href="#" class="mr-2 text-sm font-medium text-gray-900">
+                    Accessories
+                  </a>
+                  <svg
+                    width="16"
+                    height="20"
+                    viewBox="0 0 16 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    class="h-5 w-4 text-gray-300"
+                  >
+                    <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
+                  </svg>
+                </div>
+              </li>
+              <li>
+                <div class="flex items-center">
+                  <a href="#" class="mr-2 text-sm font-medium text-gray-900">
+                    Printer
+                  </a>
+                  <svg
+                    width="16"
+                    height="20"
+                    viewBox="0 0 16 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    class="h-5 w-4 text-gray-300"
+                  >
+                    <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
+                  </svg>
+                </div>
+              </li>
+
+              <li class="text-sm">
+                <a
+                  href="#"
+                  aria-current="page"
+                  class="font-medium text-gray-500 hover:text-gray-600"
                 >
-                  <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
-                </svg>
-              </div>
-            </li>
-            <li>
-              <div class="flex items-center">
-                <a href="#" class="mr-2 text-sm font-medium text-gray-900">
-                  Printer
+                  Ribbon
                 </a>
-                <svg
-                  width="16"
-                  height="20"
-                  viewBox="0 0 16 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  class="h-5 w-4 text-gray-300"
-                >
-                  <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
-                </svg>
-              </div>
-            </li>
-
-            <li class="text-sm">
-              <a
-                href="#"
-                aria-current="page"
-                class="font-medium text-gray-500 hover:text-gray-600"
-              >
-                Ribbon
-              </a>
-            </li>
-          </ol>
-        </nav>
-
-        <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-4 lg:px-8">
-          <Image
-            image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
-            name="undefined"
-            width="undefined"
-            heigh="undefined"
-            is_scale={true}
-          />
-          <div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-4">
+              </li>
+            </ol>
+          </nav>
+
+          <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-4 lg:px-8">
             <Image
               image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
               name="undefined"
@@ -246,6 +101,22 @@ const ProductDetail: Component<{}> = (props) => {
               heigh="undefined"
               is_scale={true}
             />
+            <div class="hidden lg:grid lg:grid-cols-1 lg:gap-y-4">
+              <Image
+                image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+                name="undefined"
+                width="undefined"
+                heigh="undefined"
+                is_scale={true}
+              />
+              <Image
+                image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+                name="undefined"
+                width="undefined"
+                heigh="undefined"
+                is_scale={true}
+              />
+            </div>
             <Image
               image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
               name="undefined"
@@ -254,107 +125,99 @@ const ProductDetail: Component<{}> = (props) => {
               is_scale={true}
             />
           </div>
-          <Image
-            image="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
-            name="undefined"
-            width="undefined"
-            heigh="undefined"
-            is_scale={true}
-          />
-        </div>
 
-        <div class="mx-auto max-w-2xl px-4 pb-16 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pb-24 lg:pt-16">
-          <div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
-            <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
-              BADGY 200 Black Ribbon Monochrome
-            </h1>
-          </div>
+          <div class="mx-auto max-w-2xl px-4 pb-16 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto,auto,1fr] lg:gap-x-8 lg:px-8 lg:pb-24 lg:pt-16">
+            <div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
+              <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">
+                BADGY 200 Black Ribbon Monochrome
+              </h1>
+            </div>
 
-          <div class="mt-4 lg:row-span-3 lg:mt-0">
-            <h2 class="sr-only">Product information</h2>
-            <p class="text-5xl tracking-tight text-danger font-semibold">
-              $192
-            </p>
+            <div class="mt-4 lg:row-span-3 lg:mt-0">
+              <h2 class="sr-only">Product information</h2>
+              <p class="text-5xl tracking-tight text-danger font-semibold">
+                $192
+              </p>
 
-            {/* -----review -------- */}
+              {/* -----review -------- */}
 
-            <div class="mt-6">
-              <h3 class="sr-only">Reviews</h3>
-              <div class="flex items-center">
+              <div class="mt-6">
+                <h3 class="sr-only">Reviews</h3>
                 <div class="flex items-center">
-                  <svg
-                    class="text-gray-900 h-5 w-5 flex-shrink-0"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="text-gray-900 h-5 w-5 flex-shrink-0"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="text-gray-900 h-5 w-5 flex-shrink-0"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="text-gray-900 h-5 w-5 flex-shrink-0"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                  <svg
-                    class="text-gray-200 h-5 w-5 flex-shrink-0"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
+                  <div class="flex items-center">
+                    <svg
+                      class="text-gray-900 h-5 w-5 flex-shrink-0"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                    <svg
+                      class="text-gray-900 h-5 w-5 flex-shrink-0"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                    <svg
+                      class="text-gray-900 h-5 w-5 flex-shrink-0"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                    <svg
+                      class="text-gray-900 h-5 w-5 flex-shrink-0"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                    <svg
+                      class="text-gray-200 h-5 w-5 flex-shrink-0"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <p class="sr-only">4 out of 5 stars</p>
+                  <a href="#" class="ml-3 text-sm font-medium text-primary">
+                    117 reviews
+                  </a>
                 </div>
-                <p class="sr-only">4 out of 5 stars</p>
-                <a href="#" class="ml-3 text-sm font-medium text-primary">
-                  117 reviews
-                </a>
               </div>
-            </div>
 
-            <form class="mt-10">
-              <div>
-                {/* <h3 class="text-sm font-medium text-gray-900">Color</h3> */}
+              <form class="mt-10">
+                <div>
+                  {/* <h3 class="text-sm font-medium text-gray-900">Color</h3> */}
 
-                {/* <fieldset class="mt-4">
+                  {/* <fieldset class="mt-4">
                   <legend class="sr-only">Choose a color</legend>
                   <div class="flex items-center space-x-3">
                     <label class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none ring-gray-400">
@@ -409,9 +272,9 @@ const ProductDetail: Component<{}> = (props) => {
                     </label>
                   </div>
                 </fieldset> */}
-              </div>
+                </div>
 
-              {/* <div class="mt-10">
+                {/* <div class="mt-10">
                 <div class="flex items-center justify-between">
                   <h3 class="text-sm font-medium text-gray-900">Size</h3>
                   <a
@@ -564,180 +427,196 @@ const ProductDetail: Component<{}> = (props) => {
                 </fieldset>
               </div> */}
 
-              {!isInCart() ? (
-                <button
-                  type="submit"
-                  onClick={() => handleAddTocart(item())}
-                  class="mt-10 flex w-full items-center justify-center rounded-full border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  Add to cart
-                </button>
-              ) : (
-                <button
-                  type="submit"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    navigate(`/cart`);
-                  }}
-                  class="mt-10 flex w-full items-center justify-center rounded-full border border-transparent bg-danger px-8 py-3 text-base font-medium text-white hover:bg-danger/90 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                >
-                  View Cart
-                </button>
-              )}
-            </form>
-          </div>
+                {!isInCart() ? (
+                  <button
+                    type="submit"
+                    onClick={() => handleAddTocart(item())}
+                    class="mt-10 flex w-full items-center justify-center rounded-full border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  >
+                    Add to cart
+                  </button>
+                ) : (
+                  <button
+                    type="submit"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      navigate(`/cart`);
+                    }}
+                    class="mt-10 flex w-full items-center justify-center rounded-full border border-transparent bg-danger px-8 py-3 text-base font-medium text-white hover:bg-danger/90 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  >
+                    View Cart
+                  </button>
+                )}
+              </form>
+            </div>
 
-          <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pb-16 lg:pr-8 lg:pt-6">
-            <div>
-              <h3 class="sr-only">Description</h3>
-
-              <div class="space-y-6">
-                <p class="text-base text-gray-900">
-                  For single or dual-sided color printing Ribbon in PET with a
-                  thin layer of specialized coatings. Very low concentration of
-                  colorant insoluble in water. 5 whole panels – Yellow, Magenta,
-                  Cyan, Black, Overlay: 98 mm length Overlay thickness: 1.1
-                  microns Compatible with PVC or composite cards Printing
-                  lifespan: up to 3 years For dye-sublimation and thermal
-                  transfer technologies Printing process: diffusion temperature
-                  above 50°C / 122°F 300 full-color prints per roll YMCKO ribbon
-                  (Yellow, Magenta, Cyan, Black, and Overlay panels) Genuine
-                  ribbon sourced direct
-                </p>
+            <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pb-16 lg:pr-8 lg:pt-6">
+              <div>
+                <h3 class="sr-only">Description</h3>
+
+                <div class="space-y-6">
+                  <p class="text-base text-gray-900">
+                    For single or dual-sided color printing Ribbon in PET with a
+                    thin layer of specialized coatings. Very low concentration
+                    of colorant insoluble in water. 5 whole panels – Yellow,
+                    Magenta, Cyan, Black, Overlay: 98 mm length Overlay
+                    thickness: 1.1 microns Compatible with PVC or composite
+                    cards Printing lifespan: up to 3 years For dye-sublimation
+                    and thermal transfer technologies Printing process:
+                    diffusion temperature above 50°C / 122°F 300 full-color
+                    prints per roll YMCKO ribbon (Yellow, Magenta, Cyan, Black,
+                    and Overlay panels) Genuine ribbon sourced direct
+                  </p>
+                </div>
               </div>
-            </div>
 
-            {/* ------------Key features ---------- */}
-
-            <div class="mt-10">
-              <h3 class="text-sm font-medium text-gray-900">
-                GUARANTEED EXCELLENT PRINTING QUALITY
-              </h3>
-
-              <div class="mt-4">
-                <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      All Evolis High Trust® consumables are tested and approved
-                      by Evolis’ R&D and Quality Control departments.
-                    </span>
-                  </li>
-                </ul>
+              {/* ------------Key features ---------- */}
+
+              <div class="mt-10">
+                <h3 class="text-sm font-medium text-gray-900">
+                  GUARANTEED EXCELLENT PRINTING QUALITY
+                </h3>
+
+                <div class="mt-4">
+                  <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        All Evolis High Trust® consumables are tested and
+                        approved by Evolis’ R&D and Quality Control departments.
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
 
-            <div class="mt-10">
-              <h3 class="text-sm font-medium text-gray-900">
-                AFFORDABLE CARD COST
-              </h3>
-
-              <div class="mt-4">
-                <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Primacy 2 printing ribbons are among the best value for
-                      money on the market.
-                    </span>
-                  </li>
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Panel management is optimized in the driver for color
-                      ribbons, and a ribbon-saving feature for monochrome
-                      ribbons allows you to make the best of your ribbons.
-                    </span>
-                  </li>
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Standard color ribbons combined with lamination enable you
-                      to add security elements visible under UV light easily (no
-                      specific ribbon required).
-                    </span>
-                  </li>
-                </ul>
+              <div class="mt-10">
+                <h3 class="text-sm font-medium text-gray-900">
+                  AFFORDABLE CARD COST
+                </h3>
+
+                <div class="mt-4">
+                  <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Primacy 2 printing ribbons are among the best value for
+                        money on the market.
+                      </span>
+                    </li>
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Panel management is optimized in the driver for color
+                        ribbons, and a ribbon-saving feature for monochrome
+                        ribbons allows you to make the best of your ribbons.
+                      </span>
+                    </li>
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Standard color ribbons combined with lamination enable
+                        you to add security elements visible under UV light
+                        easily (no specific ribbon required).
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
 
-            <div class="mt-10">
-              <h3 class="text-sm font-medium text-gray-900">
-                SIMPLE SET-UP AND OPERATION FEATURES
-              </h3>
-
-              <div class="mt-4">
-                <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Primacy 2 ribbons can be installed in a snap and the
-                      printer automatically senses the ribbon (RFID
-                      communication).
-                    </span>
-                  </li>
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Easy4Pro range without cassette is the option for
-                      experienced high-volume users wishing to reduce their
-                      plastic consumption and their waste.
-                    </span>
-                  </li>
-                </ul>
+              <div class="mt-10">
+                <h3 class="text-sm font-medium text-gray-900">
+                  SIMPLE SET-UP AND OPERATION FEATURES
+                </h3>
+
+                <div class="mt-4">
+                  <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Primacy 2 ribbons can be installed in a snap and the
+                        printer automatically senses the ribbon (RFID
+                        communication).
+                      </span>
+                    </li>
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Easy4Pro range without cassette is the option for
+                        experienced high-volume users wishing to reduce their
+                        plastic consumption and their waste.
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
 
-            <div class="mt-10">
-              <h3 class="text-sm font-medium text-gray-900">
-                MAXIMIZED PRINTER LONGEVITY
-              </h3>
-
-              <div class="mt-4">
-                <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      The printers’ settings are precision-adjusted to the
-                      ribbons’ ink formula for optimal card printing quality and
-                      speed.
-                    </span>
-                  </li>
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      Using genuine Evolis High Trust® consumables extends the
-                      life of Evolis systems’ print heads.
-                    </span>
-                  </li>
-                </ul>
+              <div class="mt-10">
+                <h3 class="text-sm font-medium text-gray-900">
+                  MAXIMIZED PRINTER LONGEVITY
+                </h3>
+
+                <div class="mt-4">
+                  <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        The printers’ settings are precision-adjusted to the
+                        ribbons’ ink formula for optimal card printing quality
+                        and speed.
+                      </span>
+                    </li>
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        Using genuine Evolis High Trust® consumables extends the
+                        life of Evolis systems’ print heads.
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
-            </div>
 
-            <div class="mt-10">
-              <h3 class="text-sm font-medium text-gray-900">
-                YMCKOO NEW RIBBON: A DOUBLE LAYER OF OVERLAY FOR A DOUBLE
-                PROTECTION
-              </h3>
-
-              <div class="mt-4">
-                <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      The double layer of overlay brings to your printed cards
-                      increased protection against wear and tear, without
-                      lamination. The abrasion resistance is 3 times better with
-                      the YMCKOO ribbon compared to standard YMCKO ribbon
-                      protection.
-                    </span>
-                  </li>
-                  <li class="text-gray-400">
-                    <span class="text-gray-600">
-                      The double overlay YMCKOO ribbon also gives you the
-                      ability to use one of the overlay layers to easily insert
-                      UV\light reflective elements for security purposes, and
-                      the other overlay layer to fully protect the card.
-                    </span>
-                  </li>
-                </ul>
+              <div class="mt-10">
+                <h3 class="text-sm font-medium text-gray-900">
+                  YMCKOO NEW RIBBON: A DOUBLE LAYER OF OVERLAY FOR A DOUBLE
+                  PROTECTION
+                </h3>
+
+                <div class="mt-4">
+                  <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        The double layer of overlay brings to your printed cards
+                        increased protection against wear and tear, without
+                        lamination. The abrasion resistance is 3 times better
+                        with the YMCKOO ribbon compared to standard YMCKO ribbon
+                        protection.
+                      </span>
+                    </li>
+                    <li class="text-gray-400">
+                      <span class="text-gray-600">
+                        The double overlay YMCKOO ribbon also gives you the
+                        ability to use one of the overlay layers to easily
+                        insert UV\light reflective elements for security
+                        purposes, and the other overlay layer to fully protect
+                        the card.
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+      <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
+        <h1 class="text-gray-900 font-bold text-2xl">Related products</h1>
+        <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12 ">
+          <For each={CoreProducts.slice(0, 4)}>
+            {(CoreProducts) => {
+              return (
+                <div>
+                  <Cards product={CoreProducts} />
+                </div>
+              );
+            }}
+          </For>
+        </div>
+      </div>
+    </>
   );
 };
 
diff --git a/client/src/pages/products/index.tsx b/client/src/pages/products/index.tsx
index c8bb759..0ae101a 100644
--- a/client/src/pages/products/index.tsx
+++ b/client/src/pages/products/index.tsx
@@ -1,7 +1,7 @@
 import { Component, For, Show, createResource } from "solid-js";
 import Cards from "../../components/cards/Cards";
 const fetchData = async () => {
-  const res = await fetch("http://localhost:60011/CoreProducts");
+  const res = await fetch("https://cptdb.koompi.com/CoreProducts");
   return res.json();
 };
 
diff --git a/client/vite.config.ts b/client/vite.config.ts
index 7d67f78..a0ae3be 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -4,7 +4,7 @@ import solidPlugin from "vite-plugin-solid";
 export default defineConfig({
   plugins: [solidPlugin()],
   server: {
-    port: 60011,
+    port: 8000,
   },
   build: {
     target: "esnext",