diff --git a/client/public/images/mission-2.png b/client/public/images/mission-2.png
new file mode 100644
index 0000000..84b8a4e
Binary files /dev/null and b/client/public/images/mission-2.png differ
diff --git a/client/public/images/policy.png b/client/public/images/policy.png
new file mode 100644
index 0000000..37016cf
Binary files /dev/null and b/client/public/images/policy.png differ
diff --git a/client/public/images/shopping.png b/client/public/images/shopping.png
index 5ddaa8d..4eb90a5 100644
Binary files a/client/public/images/shopping.png and b/client/public/images/shopping.png differ
diff --git a/client/public/images/vision.png b/client/public/images/vision.png
new file mode 100644
index 0000000..f4108e6
Binary files /dev/null and b/client/public/images/vision.png differ
diff --git a/client/src/components/Image.tsx b/client/src/components/Image.tsx
new file mode 100644
index 0000000..fa5b5cc
--- /dev/null
+++ b/client/src/components/Image.tsx
@@ -0,0 +1,23 @@
+import { Component } from "solid-js";
+
+export type Image = {
+  image: String;
+  name: String;
+  width: String;
+  heigh: String;
+  is_scale: Boolean;
+};
+
+const Image: Component<Image> = (props) => {
+  return (
+    <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
+      <img
+        src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
+        alt="Two each of gray, white, and black shirts laying flat."
+        class="h-full w-full object-cover object-center hover:scale-125 duration-150"
+      />
+    </div>
+  );
+};
+
+export default Image;
diff --git a/client/src/components/cards/RelatedCard.tsx b/client/src/components/cards/RelatedCard.tsx
new file mode 100644
index 0000000..9b8b87f
--- /dev/null
+++ b/client/src/components/cards/RelatedCard.tsx
@@ -0,0 +1,34 @@
+import { Component } from "solid-js";
+import { NavLink } from "@solidjs/router";
+
+export type NewsData = {
+  id: string;
+  title: string;
+  image: string;
+  des: string;
+  author: string;
+};
+interface Props {
+  props: NewsData;
+}
+
+const RelatedCard: Component<Props> = ({ props }) => {
+  return (
+    <NavLink href={`/news/${props.id}`}>
+      <div class="lg:w-full mt-2 ">
+        <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"
+            class="flex-shrink-0 rounded-lg w-24 h-24 object-cover object-center sm:mb-0 mb-4"
+            src={props?.image}
+          />
+          <div class="flex-grow sm:pl-8">
+            <p class="mb-4">{props.title}</p>
+          </div>
+        </div>
+      </div>
+    </NavLink>
+  );
+};
+
+export default RelatedCard;
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
index 69945be..3b9d491 100644
--- a/client/src/components/layouts/Navbar.tsx
+++ b/client/src/components/layouts/Navbar.tsx
@@ -6,103 +6,6 @@ const Navbar: Component = () => {
   const { cartItems } = useCartContext();
   return (
     <div>
-      {/* <div class="">
-        <div class="md:px-44 navbar sticky top-0 bg-white z-10 backdrop-blur-3xl opacity-90 ">
-          <div class="flex-1">
-            <NavLink href="/">
-              <img
-                class="md:w-24 w-24"
-                src="/images/logo.png"
-                alt="Solid logo"
-              />
-            </NavLink>
-          </div>
-          <div class="flex-none md:gap-6 gap-3 font-bold">
-            <div class="md:flex items-center hidden">
-              <input
-                type="text"
-                placeholder="Search"
-                class="w-full border py-2 px-8 rounded-full bg-white-300"
-              />
-              <img class="w-4 absolute ml-2" src="/images/search.png" />
-            </div>
-            <img class="w-4 md:hidden" src="/images/search.png" />
-            <div class="flex items-center">
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  class="w-6 h-6"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
-                  />
-                </svg>
-              </div>
-              <div class="md:ml-2 md:block hidden ">
-                <NavLink href="/favorite">Favorite</NavLink>
-              </div>
-            </div>
-
-            <NavLink href="/cart" class="md:ml-2 md:mr-0 mr-3">
-              <div class="flex items-center space-x-2">
-                <div class="indicator">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke-width="1.5"
-                    stroke="currentColor"
-                    class="w-6 h-6"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
-                    />
-                  </svg>
-
-                  <span class="badge badge-xs badge-primary indicator-item">
-                    {cartItems.length}
-                  </span>
-                </div>
-                <p class="md:block hidden">Cart</p>
-              </div>
-            </NavLink>
-
-            <div class="dropdown dropdown-end">
-              <label tabindex="0" class="btn btn-ghost btn-circle avatar">
-                <div class="w-10 rounded-full">
-                  <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
-                </div>
-              </label>
-              <ul
-                tabindex="0"
-                class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-white rounded-box w-52"
-              >
-                <li>
-                  <a class="justify-between">
-                    Profile
-                    <span class="badge">New</span>
-                  </a>
-                </li>
-                <li>
-                  <a>Settings</a>
-                </li>
-                <li>
-                  <a>Logout</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div> */}
-
       <nav class=" bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100">
         <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <a href="/" class="flex items-center">
@@ -186,10 +89,10 @@ const Navbar: Component = () => {
               </li>
               <li>
                 <a
-                  href="#contact"
+                  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"
                 >
-                  Contact
+                  News
                 </a>
               </li>
             </ul>
diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
index 97f3059..2217782 100644
--- a/client/src/pages/about.tsx
+++ b/client/src/pages/about.tsx
@@ -1,4 +1,4 @@
-import { Component, For, Show } from "solid-js";
+import { Component, For } from "solid-js";
 import Members from "../data/Members";
 import MemberCard from "../components/cards/Member-cart";
 const About: Component = () => {
@@ -88,7 +88,7 @@ export const Missions: Component = () => {
                     <div class="w-full items-center md:flex">
                       <div class="relative mb-12 w-full max-w-[310px] md:mr-12 md:mb-0 md:max-w-[250px] lg:mr-14 lg:max-w-[280px] 2xl:mr-16">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/mission-2.png"
                           alt="image"
                           class="w-full"
                         />
@@ -444,7 +444,7 @@ export const Missions: Component = () => {
                       </div>
                       <div class="relative mb-12 w-full max-w-[310px] md:ml-12 md:mb-0 md:max-w-[250px] lg:ml-24 lg:max-w-[280px] 2xl:ml-24">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/vision.png"
                           alt="image"
                           class="w-full"
                         />
@@ -766,7 +766,7 @@ export const Missions: Component = () => {
                     <div class="w-full items-center md:flex">
                       <div class="relative mb-12 w-full max-w-[310px] md:mr-12 md:mb-0 md:max-w-[250px] lg:mr-14 lg:max-w-[280px] 2xl:mr-16">
                         <img
-                          src="https://cdn.tailgrids.com/2.0/image/marketing/images/testimonials/testimonial-01/image-01.jpg"
+                          src="../../public/images/policy.png"
                           alt="image"
                           class="w-full"
                         />
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 5956662..deeb1e4 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -500,7 +500,7 @@ export const Contact: Component = () => {
             ></textarea>
           </div>
           <button class="text-white rounded-xl bg-primary border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 text-lg">
-            Button
+            Contact
           </button>
         </div>
       </div>
diff --git a/client/src/pages/news/index.tsx b/client/src/pages/news/index.tsx
index dff3cf5..9872a43 100644
--- a/client/src/pages/news/index.tsx
+++ b/client/src/pages/news/index.tsx
@@ -41,7 +41,7 @@ export const Banner: Component = () => {
                 />
               </div>
             </div>
-            <div class="grid md:grid-cols-4 gap-4 mt-12">
+            <div class=" grid md:grid-cols-4 gap-4 mt-12">
               <For each={NewsData}>
                 {(NewData) => {
                   return <NewsCard props={NewData} />;
diff --git a/client/src/pages/news/singlePage.tsx b/client/src/pages/news/singlePage.tsx
index e6b83db..fb35d1d 100644
--- a/client/src/pages/news/singlePage.tsx
+++ b/client/src/pages/news/singlePage.tsx
@@ -1,11 +1,13 @@
-import { Component } from "solid-js";
+import { Component, For } from "solid-js";
+import RelatedCard from "../../components/cards/RelatedCard";
+import NewsData from "../../data/News";
 
 const SinglePageNews: Component = () => {
   return (
     <>
       <main class="pt-8 pb-16 lg:pt-16 lg:pb-24 bg-white dark:bg-gray-900">
-        <div class="grid grid-cols-5 justify-between px-4 mx-auto max-w-screen-xl ">
-          <article class="col-span-4 mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg format-blue dark:format-invert">
+        <div class="grid grid-cols-3  gap-3 justify-between px-4 mx-auto max-w-screen-xl ">
+          <article class="col-span-2 mx-auto w-full max-w-2xl format format-sm sm:format-base lg:format-lg format-blue dark:format-invert">
             <header class="mb-4 lg:mb-6 not-format">
               <h1 class="mb-4 text-3xl font-extrabold leading-tight text-gray-900 lg:mb-6 lg:text-4xl dark:text-white">
                 King Norodom Sihamoni’s Birthday
@@ -506,9 +508,13 @@ const SinglePageNews: Component = () => {
               </article>
             </section>
           </article>
-          {/* <div class="col-span-auto w-full bg-gray-50 p-3 rounded-xl h-60">
-            <h1>hello world</h1>
-          </div> */}
+          <div class="col-span-auto w-full p-3 rounded-xl ">
+            <For each={NewsData}>
+              {(NewData) => {
+                return <RelatedCard props={NewData} />;
+              }}
+            </For>
+          </div>
         </div>
       </main>
     </>
diff --git a/client/src/pages/products/details.tsx b/client/src/pages/products/details.tsx
index 429c2bf..e1fc699 100644
--- a/client/src/pages/products/details.tsx
+++ b/client/src/pages/products/details.tsx
@@ -1,9 +1,8 @@
-import { Component, For, Show, createEffect, createResource } from "solid-js";
-import CoreProducts from "../../data/Core-Product";
+import { Component, createEffect, createResource, For } from "solid-js";
 import { useParams } from "@solidjs/router";
 import { useCartContext } from "../../context/CartContext";
-import { NavLink } from "@solidjs/router";
-import Cards from "../../components/cards/Cards";
+import { useNavigate } from "@solidjs/router";
+import Image from "../../components/Image";
 
 type Product = {
   id: string;
@@ -21,6 +20,7 @@ const fetchProduct = async (id: string) => {
   return res.json();
 };
 const ProductDetail: Component<{}> = (props) => {
+  const navigate = useNavigate();
   const { addToCart, cartItems } = useCartContext();
   const params = useParams<{ id: string }>();
   const [item] = createResource(params.id, fetchProduct);
@@ -178,7 +178,7 @@ const ProductDetail: Component<{}> = (props) => {
 
     <div class="bg-white">
       <div class="pt-6">
-        {/* <nav aria-label="Breadcrumb">
+        <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"
@@ -186,7 +186,7 @@ const ProductDetail: Component<{}> = (props) => {
             <li>
               <div class="flex items-center">
                 <a href="#" class="mr-2 text-sm font-medium text-gray-900">
-                  Men
+                  Accessories
                 </a>
                 <svg
                   width="16"
@@ -203,7 +203,7 @@ const ProductDetail: Component<{}> = (props) => {
             <li>
               <div class="flex items-center">
                 <a href="#" class="mr-2 text-sm font-medium text-gray-900">
-                  Clothing
+                  Printer
                 </a>
                 <svg
                   width="16"
@@ -224,43 +224,43 @@ const ProductDetail: Component<{}> = (props) => {
                 aria-current="page"
                 class="font-medium text-gray-500 hover:text-gray-600"
               >
-                Basic Tee 6-Pack
+                Ribbon
               </a>
             </li>
           </ol>
-        </nav> */}
+        </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">
-          <div class="aspect-h-4 aspect-w-3 hidden overflow-hidden rounded-lg lg:block">
-            <img
-              src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
-              alt="Two each of gray, white, and black shirts laying flat."
-              class="h-full w-full object-cover object-center"
-            />
-          </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 class="hidden lg:grid lg:grid-cols-1 lg:gap-y-4">
-            <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
-              <img
-                src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-01.jpg"
-                alt="Model wearing plain black basic tee."
-                class="h-full w-full object-cover object-center"
-              />
-            </div>
-            <div class="aspect-h-2 aspect-w-3 overflow-hidden rounded-lg">
-              <img
-                src="https://tailwindui.com/img/ecommerce-images/product-page-02-tertiary-product-shot-02.jpg"
-                alt="Model wearing plain gray basic tee."
-                class="h-full w-full object-cover object-center"
-              />
-            </div>
-          </div>
-          <div class="aspect-h-5 aspect-w-4 lg:aspect-h-4 lg:aspect-w-3 sm:overflow-hidden sm:rounded-lg">
-            <img
-              src="https://tailwindui.com/img/ecommerce-images/product-page-02-featured-product-shot.jpg"
-              alt="Model wearing plain white basic tee."
-              class="h-full w-full object-cover object-center"
+            <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"
+            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">
@@ -344,10 +344,7 @@ const ProductDetail: Component<{}> = (props) => {
                   </svg>
                 </div>
                 <p class="sr-only">4 out of 5 stars</p>
-                <a
-                  href="#"
-                  class="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500"
-                >
+                <a href="#" class="ml-3 text-sm font-medium text-primary">
                   117 reviews
                 </a>
               </div>
@@ -567,13 +564,26 @@ const ProductDetail: Component<{}> = (props) => {
                 </fieldset>
               </div> */}
 
-              <button
-                type="submit"
-                onClick={() => handleAddTocart(item())}
-                class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                Add to cart
-              </button>
+              {!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>
 
diff --git a/client/src/pages/products/index.tsx b/client/src/pages/products/index.tsx
index 55b71c9..a077f01 100644
--- a/client/src/pages/products/index.tsx
+++ b/client/src/pages/products/index.tsx
@@ -1,12 +1,11 @@
 import { Component, For, Show, createResource } from "solid-js";
 import Cards from "../../components/cards/Cards";
-import { NavLink } from "@solidjs/router";
 const fetchData = async () => {
   const res = await fetch("http://localhost:3000/CoreProducts");
   return res.json();
 };
 
-const Products: Component<{}> = (props) => {
+const Products: Component<{}> = () => {
   const [AllCoreProducts] = createResource(fetchData);
 
   return (
@@ -115,7 +114,7 @@ const Products: Component<{}> = (props) => {
                         name="color[]"
                         value="white"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-0"
@@ -130,7 +129,7 @@ const Products: Component<{}> = (props) => {
                         name="color[]"
                         value="beige"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-1"
@@ -146,7 +145,7 @@ const Products: Component<{}> = (props) => {
                         value="blue"
                         type="checkbox"
                         checked
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-2"
@@ -161,7 +160,7 @@ const Products: Component<{}> = (props) => {
                         name="color[]"
                         value="brown"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-3"
@@ -176,7 +175,7 @@ const Products: Component<{}> = (props) => {
                         name="color[]"
                         value="green"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-4"
@@ -191,7 +190,7 @@ const Products: Component<{}> = (props) => {
                         name="color[]"
                         value="purple"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-color-5"
@@ -244,7 +243,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="new-arrivals"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-category-0"
@@ -259,7 +258,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="sale"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-category-1"
@@ -275,7 +274,7 @@ const Products: Component<{}> = (props) => {
                         value="travel"
                         type="checkbox"
                         checked
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-category-2"
@@ -290,7 +289,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="organization"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-category-3"
@@ -305,7 +304,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="accessories"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-category-4"
@@ -358,7 +357,7 @@ const Products: Component<{}> = (props) => {
                         name="size[]"
                         value="2l"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-0"
@@ -373,7 +372,7 @@ const Products: Component<{}> = (props) => {
                         name="size[]"
                         value="6l"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-1"
@@ -388,7 +387,7 @@ const Products: Component<{}> = (props) => {
                         name="size[]"
                         value="12l"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-2"
@@ -403,7 +402,7 @@ const Products: Component<{}> = (props) => {
                         name="size[]"
                         value="18l"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-3"
@@ -418,7 +417,7 @@ const Products: Component<{}> = (props) => {
                         name="size[]"
                         value="20l"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-4"
@@ -434,7 +433,7 @@ const Products: Component<{}> = (props) => {
                         value="40l"
                         type="checkbox"
                         checked
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-mobile-size-5"
@@ -452,7 +451,7 @@ const Products: Component<{}> = (props) => {
       </div>
 
       <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div class="flex items-baseline justify-between border-b border-gray-200 pb-6 pt-24">
+        <div class="flex items-baseline justify-between border-b border-gray-200 pb-6 pt-6">
           <h1 class="text-4xl font-bold tracking-tight text-gray-900">
             Products
           </h1>
@@ -595,7 +594,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="new-arrivals"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-0"
@@ -610,7 +609,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="sale"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-1"
@@ -626,7 +625,7 @@ const Products: Component<{}> = (props) => {
                         value="travel"
                         type="checkbox"
                         checked
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-2"
@@ -641,7 +640,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="organization"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-3"
@@ -656,7 +655,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="accessories"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-4"
@@ -671,7 +670,7 @@ const Products: Component<{}> = (props) => {
                         name="category[]"
                         value="accessories"
                         type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
                       />
                       <label
                         for="filter-category-4"