diff --git a/client/public/thumbnails/thumbnail-1.png b/client/public/thumbnails/thumbnail-1.png
new file mode 100644
index 0000000..9d7a248
Binary files /dev/null and b/client/public/thumbnails/thumbnail-1.png differ
diff --git a/client/public/thumbnails/thumbnail-2.png b/client/public/thumbnails/thumbnail-2.png
new file mode 100644
index 0000000..9a69b7e
Binary files /dev/null and b/client/public/thumbnails/thumbnail-2.png differ
diff --git a/client/public/thumbnails/thumbnail-3.png b/client/public/thumbnails/thumbnail-3.png
new file mode 100644
index 0000000..9f14207
Binary files /dev/null and b/client/public/thumbnails/thumbnail-3.png differ
diff --git a/client/src/components/cards/Member-cart.tsx b/client/src/components/cards/Member-cart.tsx
index 09a8efa..9fc752f 100644
--- a/client/src/components/cards/Member-cart.tsx
+++ b/client/src/components/cards/Member-cart.tsx
@@ -17,15 +17,15 @@ const MemberCard: Component<Props> = ({ props }) => {
       data-aos="zoom-out-down"
     >
       <img
-        class="mx-auto mb-4 w-52 h-52 rounded-full"
+        class="mx-auto mb-4 w-full h-full md:w-48 md:h-48 rounded-full"
         src={props.image}
         alt="Bonnie Avatar"
       />
-      <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+      <h3 class="mb-1 text-md md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
         <A href="#">{props.name}</A>
       </h3>
 
-      <p>{props.position}</p>
+      <p class="text-xs md:text-lg">{props.position}</p>
     </div>
   );
 };
diff --git a/client/src/components/cards/NewsCard.tsx b/client/src/components/cards/NewsCard.tsx
index 5e88d4c..3bb0149 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]" data-aos="zoom-out-down">
+        <div class="mx-auto mb-3 max-w-[370px]">
           <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 aa892d5..212777c 100644
--- a/client/src/components/cards/RelatedCard.tsx
+++ b/client/src/components/cards/RelatedCard.tsx
@@ -19,7 +19,7 @@ const RelatedCard: Component<Props> = ({ props }) => {
         <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"
+            class="flex-shrink-0 rounded-lg w-full md:w-24 object-cover object-center sm:mb-0 mb-4"
             src={props?.image}
           />
           <div class="flex-grow sm:pl-8">
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
index 5201d01..76ecc91 100644
--- a/client/src/components/layouts/Navbar.tsx
+++ b/client/src/components/layouts/Navbar.tsx
@@ -16,7 +16,7 @@ const Navbar: Component<{}> = () => {
   return (
     <div>
       <nav class="bg-white-900 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-100 ">
-        <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-24">
+        <div class="max-w-screen-xl flex lg:flex-wrap  items-center justify-between mx-auto p-4 md:px-2 lg:px-24 xl:px-24 2xl:px-2">
           <A href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </A>
diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx
index bcee6a0..760a073 100644
--- a/client/src/pages/about.tsx
+++ b/client/src/pages/about.tsx
@@ -15,11 +15,11 @@ export default About;
 
 export const Banner: Component = () => {
   return (
-    <section class="w-full h-screen overflow-x-hidden">
+    <section class="w-full h-full md:h-screen overflow-x-hidden">
       <div class="background-img-about">
-        <div class="py-12 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-4">
+        <div class="py-12 mx-auto max-w-screen-xl text-center lg:py-16 px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div>
-            <h1 class="sm:mx-auto sm:w-10/12 md:w-2/3 font-black text-primary text-4xl text-center sm:text-5xl md:text-6xl lg:w-auto lg:text-left xl:text-7xl dark:text-white">
+            <h1 class="sm:mx-auto sm:w-10/12 md:w-2/3 font-black text-primary text-2xl md:text-3xl lg:text-5xl xl:text-5xl text-center lg:w-auto lg:text-left dark:text-white">
               We Believe In Hard Work <br />
               <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-cyan-500 dark:from-blue-400 dark:to-cyan-300">
                 And Commitment
@@ -59,8 +59,6 @@ export const Banner: Component = () => {
                     class="relative w-full animate-spin animate-infinite animate-duration-[300000ms]"
                     alt="wath illustration"
                     loading="lazy"
-                    width="320"
-                    height="280"
                   />
                 </div>
               </div>
@@ -76,7 +74,7 @@ export const Missions: Component = () => {
   return (
     <section>
       <section>
-        <div class="pt-60 mx-auto max-w-screen-xl lg:pt-60 lg:px-4">
+        <div class="pt-0 md:pt-60 mx-auto max-w-screen-xl lg:pt-60 px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div>
             <div class="relative flex justify-start">
               <div class="relative w-full pb-16 md:w-11/12 lg:w-10/12 xl:w-8/12 xl:pb-0">
@@ -86,7 +84,7 @@ export const Missions: Component = () => {
                 >
                   <div class="xs:min-w-[368px] mx-auto h-full min-w-[300px] sm:min-w-[508px] sm:p-6 md:min-w-[630px] lg:min-w-[738px] 2xl:min-w-[850px]">
                     <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">
+                      <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] ">
                         <img
                           src="/images/mission-2.png"
                           alt="image"
@@ -415,7 +413,7 @@ export const Missions: Component = () => {
         </div>
       </section>
       <section>
-        <div class=" mx-auto max-w-screen-xl lg:px-4">
+        <div class=" hidden md:block mx-auto max-w-screen-xl px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div>
             <div class="relative flex justify-end">
               <div class="relative w-full pb-16 md:w-11/12 lg:w-10/12 xl:w-8/12 xl:pb-0">
@@ -752,9 +750,346 @@ export const Missions: Component = () => {
             </div>
           </div>
         </div>
+        <div class="block md:hidden pt-0 md:pt-60 mx-auto max-w-screen-xl lg:pt-60 px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
+          <div>
+            <div class="relative flex justify-start">
+              <div class="relative w-full pb-16 md:w-11/12 lg:w-10/12 xl:w-8/12 xl:pb-0">
+                <div
+                  class="snap xs:max-w-[368px] flex-no-wrap mx-auto flex h-auto w-full max-w-[300px] overflow-hidden transition-all sm:max-w-[508px] md:max-w-[630px] lg:max-w-[738px] 2xl:max-w-[850px]"
+                  x-ref="carousel"
+                >
+                  <div class="xs:min-w-[368px] mx-auto h-full min-w-[300px] sm:min-w-[508px] sm:p-6 md:min-w-[630px] lg:min-w-[738px] 2xl:min-w-[850px]">
+                    <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] ">
+                        <img
+                          src="/images/vision.png"
+                          alt="image"
+                          class="w-full"
+                        />
+                        <span class="absolute -top-6 -left-6 z-[-1] hidden sm:block">
+                          <svg
+                            width="77"
+                            height="77"
+                            viewBox="0 0 77 77"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <circle
+                              cx="1.66343"
+                              cy="74.5221"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 74.5221)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="1.66343"
+                              cy="30.94"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 30.94)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="74.5221"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 74.5221)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="30.94"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 30.94)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="74.5221"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 74.5221)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="30.94"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 30.94)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="74.5221"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 74.5221)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="30.94"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 30.94)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="74.5216"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 74.5216)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="74.5216"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 74.5216)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="30.9398"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 30.9398)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="30.9398"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 30.9398)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="1.66343"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="1.66343"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="59.8839"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 59.8839)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="16.3017"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 16.3017)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="1.66343"
+                              cy="45.2455"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 45.2455)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="1.66343"
+                              cy="1.66342"
+                              r="1.66343"
+                              transform="rotate(-90 1.66343 1.66342)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="45.2455"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 45.2455)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="16.3016"
+                              cy="1.66342"
+                              r="1.66343"
+                              transform="rotate(-90 16.3016 1.66342)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="45.2455"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 45.2455)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="30.9398"
+                              cy="1.66342"
+                              r="1.66343"
+                              transform="rotate(-90 30.9398 1.66342)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="45.2455"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 45.2455)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="45.578"
+                              cy="1.66344"
+                              r="1.66343"
+                              transform="rotate(-90 45.578 1.66344)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="45.2458"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 45.2458)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="45.2458"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 45.2458)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="60.2162"
+                              cy="1.66371"
+                              r="1.66343"
+                              transform="rotate(-90 60.2162 1.66371)"
+                              fill="#3056D3"
+                            />
+                            <circle
+                              cx="74.6634"
+                              cy="1.66371"
+                              r="1.66343"
+                              transform="rotate(-90 74.6634 1.66371)"
+                              fill="#3056D3"
+                            />
+                          </svg>
+                        </span>
+                        <span class="absolute  -bottom-8 -right-20 z-[-1]">
+                          <svg
+                            width="217"
+                            height="229"
+                            viewBox="0 0 217 229"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M-64 140.5C-64 62.904 -1.096 1.90666e-05 76.5 1.22829e-05C154.096 5.49924e-06 217 62.904 217 140.5C217 218.096 154.096 281 76.5 281C-1.09598 281 -64 218.096 -64 140.5Z"
+                              fill="url(#paint0_linear_1179_5)"
+                            ></path>
+                            <defs>
+                              <linearGradient
+                                id="paint0_linear_1179_5"
+                                x1="76.5"
+                                y1="281"
+                                x2="76.5"
+                                y2="1.22829e-05"
+                                gradientUnits="userSpaceOnUse"
+                              >
+                                <stop
+                                  stop-color="#3056D3"
+                                  stop-opacity="0.08"
+                                ></stop>
+                                <stop
+                                  offset="1"
+                                  stop-color="#C4C4C4"
+                                  stop-opacity="0"
+                                ></stop>
+                              </linearGradient>
+                            </defs>
+                          </svg>
+                        </span>
+                      </div>
+                      <div class="w-full">
+                        <div>
+                          <div class="mb-7">
+                            <h1 class="sm:mx-auto sm:w-10/12 md:w-2/3 font-black text-primary text-xl text-center sm:text-5xl md:text-3xl lg:w-auto lg:text-left xl:text-4xl dark:text-white">
+                              Our{" "}
+                              <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-cyan-500 dark:from-blue-400 dark:to-cyan-300">
+                                Vission
+                              </span>
+                              .
+                            </h1>
+                          </div>
+                          <p class="text-body-color mb-11 text-base font-medium italic sm:text-lg lg:text-2xl">
+                            Becoming a perfect company in supplying products and
+                            technology services.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
       <section>
-        <div class=" mx-auto max-w-screen-xl  lg:px-4">
+        <div class=" mx-auto max-w-screen-xl px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div>
             <div class="relative flex justify-start">
               <div class="relative w-full pb-16 xl:pb-0">
@@ -1116,7 +1451,7 @@ export const Teams: Component = () => {
     <section class="bg-white dark:bg-gray-900">
       <div class="pt-9 py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
         <div class="mx-auto mb-8 max-w-screen-sm lg:mb-16">
-          <h1 class="sm:mx-auto sm:w-10/12 md:w-2/3 font-black text-primary text-4xl text-center sm:text-5xl md:text-6xl lg:w-auto lg:text-left xl:text-7xl dark:text-white">
+          <h1 class="sm:mx-auto font-black text-primary text-center text-2xl md:text-3xl lg:text-5xl xl:text-5xl dark:text-white">
             Our Core{" "}
             <span class="relative text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-cyan-500 dark:from-blue-400 dark:to-cyan-300">
               Teams
@@ -1126,7 +1461,7 @@ export const Teams: Component = () => {
             Meeting Our Amazing Team. We Couldn't Do It Without Them.
           </p>
         </div>
-        <div class="grid gap-8 lg:gap-16 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
+        <div class="grid gap-8 lg:gap-16 grid-cols-2 md:grid-cols-3 lg:grid-cols-3">
           <For each={Members}>
             {(Member) => {
               return (
diff --git a/client/src/pages/cart.tsx b/client/src/pages/cart.tsx
index b2b8b11..26c324d 100644
--- a/client/src/pages/cart.tsx
+++ b/client/src/pages/cart.tsx
@@ -29,7 +29,7 @@ const Cart = () => {
     <>
       {/* <Checkout /> */}
       <div>
-        <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl ">
+        <div class="mx-auto mt-12 sm:max-w-xl md:max-w-full lg:max-w-screen-xl px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <h2 class="text-4xl text-[#98A2AE] font-bold text-center">
             Shopping Cart
           </h2>
@@ -202,7 +202,7 @@ const Cart = () => {
                       </div>
                     </div>
 
-                    <div class="md:col-span-2">
+                    <div class="md:col-span-2 mt-9 md:mt-6">
                       <div class="lg:px-2">
                         <div class="p-4 bg-gray-100 rounded-full">
                           <h1 class="ml-2 font-bold uppercase">Coupon Code</h1>
@@ -331,7 +331,7 @@ const Cart = () => {
                                 d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zM54.1 80h467.8c3.3 0 6 2.7 6 6v42H48.1V86c0-3.3 2.7-6 6-6zm467.8 352H54.1c-3.3 0-6-2.7-6-6V256h479.8v170c0 3.3-2.7 6-6 6zM192 332v40c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v40c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"
                               />
                             </svg>
-                            <span class="ml-2 mt-5px">
+                            <span class="ml-2 mt-1 text-sm md:text-md ">
                               Procceed to checkout
                             </span>
                           </button>
diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
index 5857dd5..890a359 100644
--- a/client/src/pages/login.tsx
+++ b/client/src/pages/login.tsx
@@ -7,16 +7,20 @@ const Login = () => {
       style="background-image:url('./../../public/images/jcomp.jpg')"
     >
       <div class="w-full h-screen absolute bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-5" />
-      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-[27vw] lg:py-0">
+      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-full md:w-[40vw] lg:w-[30vw] xl:w-[36vw] 2xl:w-[27vw] lg:py-0">
         <A
           href="/"
           class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
         >
-          <img class="w-32 z-50" src="/images/logo.png" alt="logo" />
+          <img
+            class="w-32 md:w-16 lg:w-16 xl:w-16 2xl:w-32 z-50"
+            src="/images/logo.png"
+            alt="logo"
+          />
         </A>
         <div class="w-full bg-white/60 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-30 rounded-2xl shadow-md dark:border md:mt-0 sm:max-w-xl:p-0 dark:bg-gray-800 dark:border-gray-700">
           <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <h1 class="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+            <h1 class="text-xl md:text-sm lg:text-sm xl:text-sm 2xl:text-xl text-center font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
               Welcome back!
             </h1>
 
diff --git a/client/src/pages/news/index.tsx b/client/src/pages/news/index.tsx
index d0113ee..81f0426 100644
--- a/client/src/pages/news/index.tsx
+++ b/client/src/pages/news/index.tsx
@@ -4,9 +4,9 @@ import NewsData from "../../data/News";
 
 const News: Component = () => {
   return (
-    <section class="w-full h-screen overflow-x-hidden">
+    <section class="w-full h-screen overflow-x-hidden ">
       <div class="background-img-about">
-        <div class="bg-white/60 w-full h-full bg-opacity-5">
+        <div class="bg-white/60 w-full h-full bg-opacity-5 px-4 md:px-24 lg:px-24 xl:px-24 2xl:px-0">
           <div class="mx-auto max-w-screen-xl py-9 ">
             <div class="flex px-5 md:flex-row flex-col items-center bg-white rounded-3xl">
               <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-left">
diff --git a/client/src/pages/news/singlePage.tsx b/client/src/pages/news/singlePage.tsx
index a4d3f59..f3dd623 100644
--- a/client/src/pages/news/singlePage.tsx
+++ b/client/src/pages/news/singlePage.tsx
@@ -7,10 +7,10 @@ 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-3  gap-3 justify-between px-4 mx-auto max-w-screen-xl ">
+        <div class="grid grid-cols-1 md: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">
+              <h1 class="mb-4 text-xl md:text-2xl font-extrabold leading-tight text-gray-900 lg:mb-6 dark:text-white">
                 King Norodom Sihamoni’s Birthday
               </h1>
             </header>
@@ -506,6 +506,7 @@ const SinglePageNews: Component = () => {
             </section>
           </article>
           <div class="col-span-auto w-full p-3 rounded-xl ">
+            <h3>Related contents</h3>
             <For each={NewsData}>
               {(NewData) => {
                 return <RelatedCard props={NewData} />;
diff --git a/client/src/pages/products/details.tsx b/client/src/pages/products/details.tsx
index dc61b77..a64b3a2 100644
--- a/client/src/pages/products/details.tsx
+++ b/client/src/pages/products/details.tsx
@@ -39,7 +39,7 @@ const ProductDetail: Component<{}> = (props) => {
 
   return (
     <>
-      <div class="bg-white">
+      <div class="px-0 md:px-16">
         <div class="pt-6">
           <nav aria-label="Breadcrumb">
             <ol
@@ -93,7 +93,37 @@ const ProductDetail: Component<{}> = (props) => {
             </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">
+          <div class="block md:hidden relative -z-10 px-4 pt-4">
+            <div id="default-carousel" class="w-full" data-carousel="slide">
+              <div class="relative h-[180px] overflow-hidden rounded-lg">
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-1.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-2.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+
+                <div class="hidden duration-700 ease-in-out" data-carousel-item>
+                  <img
+                    src="/thumbnails/thumbnail-3.png"
+                    alt=""
+                    class="w-full object-contain"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="hidden md:block 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="/products/product1.png"
               name="undefined"
@@ -602,9 +632,9 @@ const ProductDetail: Component<{}> = (props) => {
           </div>
         </div>
       </div>
-      <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
+      <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl px-4 md:px-4 lg:px-24 xl:px-24 2xl:px-4">
         <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 ">
+        <div class="grid md:grid-cols-4 grid-cols-1 gap-4 mt-12">
           <For each={CoreProducts.slice(0, 4)}>
             {(CoreProducts) => {
               return (
diff --git a/client/src/pages/products/index.tsx b/client/src/pages/products/index.tsx
index a590299..bd1a088 100644
--- a/client/src/pages/products/index.tsx
+++ b/client/src/pages/products/index.tsx
@@ -2,457 +2,233 @@ import { Component, For } from "solid-js";
 import Cards from "../../components/cards/Cards";
 import CoreProducts from "../../data/Core-Product";
 import { A } from "@solidjs/router";
+import { Carousel } from "flowbite";
 
 const Products: Component<{}> = () => {
   return (
-    <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
+    <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-2 lg:px-24 xl:px-24 2xl:px-2">
       <div>
         <Banner />
       </div>
 
-      <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
-        <div class="fixed inset-0 bg-black bg-opacity-25"></div>
+      <div
+        id="drawer-right-example"
+        class="fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800"
+        tabindex="-1"
+        aria-labelledby="drawer-right-label"
+      >
+        <h5
+          id="drawer-right-label"
+          class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"
+        >
+          <svg
+            class="w-4 h-4 mr-2.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
+          </svg>
+          Filters
+        </h5>
+        <button
+          type="button"
+          data-drawer-hide="drawer-right-example"
+          aria-controls="drawer-right-example"
+          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 right-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white"
+        >
+          <svg
+            class="w-3 h-3"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 14 14"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+            />
+          </svg>
+          <span class="sr-only">Close menu</span>
+        </button>
 
-        <div class="fixed inset-0 z-40 flex">
-          <div class="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-12 shadow-xl">
-            <div class="flex items-center justify-between px-4">
-              <h2 class="text-lg font-medium text-gray-900">Filters</h2>
-              <button
-                type="button"
-                class="-mr-2 flex h-10 w-10 items-center justify-center rounded-md bg-white p-2 text-gray-400"
-              >
-                <span class="sr-only">Close menu</span>
-                <svg
-                  class="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="1.5"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </div>
-
-            <form class="mt-4 border-t border-gray-200">
-              <h3 class="sr-only">Categories</h3>
-              <ul role="list" class="px-2 py-3 font-medium text-gray-900">
-                <li>
-                  <A href="#" class="block px-2 py-3">
-                    Totes
-                  </A>
-                </li>
-                <li>
-                  <A href="#" class="block px-2 py-3">
-                    Backpacks
-                  </A>
-                </li>
-                <li>
-                  <A href="#" class="block px-2 py-3">
-                    Travel Bags
-                  </A>
-                </li>
-                <li>
-                  <A href="#" class="block px-2 py-3">
-                    Hip Bags
-                  </A>
-                </li>
-                <li>
-                  <A href="#" class="block px-2 py-3">
-                    Laptop Sleeves
-                  </A>
-                </li>
-              </ul>
+        <div>
+          <form class="mt-4 border-t border-gray-200">
+            <h3 class="sr-only">Categories</h3>
+            <ul
+              role="list"
+              class="space-y-4 px-4 py-3 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900"
+            >
+              <li>
+                <A href="#">Equipment</A>
+              </li>
+              <li>
+                <A href="#">Ink Cartridge</A>
+              </li>
+              <li>
+                <A href="#">CAM-TONER CARTRIDGE</A>
+              </li>
+              <li>
+                <A href="#">Printer</A>
+              </li>
+              <li>
+                <A href="#">Bill Counter</A>
+              </li>
+              <li>
+                <A href="#">IT Services</A>
+              </li>
+              <li>
+                <A href="#">Ribbon</A>
+              </li>
+              <li>
+                <A href="#">Accessories</A>
+              </li>
+            </ul>
 
-              <div class="border-t border-gray-200 px-4 py-6">
-                <h3 class="-mx-2 -my-3 flow-root">
-                  <button
-                    type="button"
-                    class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500"
-                    aria-controls="filter-section-mobile-0"
-                    aria-expanded="false"
-                  >
-                    <span class="font-medium text-gray-900">Color</span>
-                    <span class="ml-6 flex items-center">
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-                      </svg>
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z"
-                          clip-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </h3>
-                <div class="pt-6" id="filter-section-mobile-0">
-                  <div class="space-y-6">
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-0"
-                        name="color[]"
-                        value="white"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-color-0"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        White
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-1"
-                        name="color[]"
-                        value="beige"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-color-1"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Beige
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-2"
-                        name="color[]"
-                        value="blue"
-                        type="checkbox"
-                        checked
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-color-2"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Blue
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-3"
-                        name="color[]"
-                        value="brown"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-color-3"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Brown
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-4"
-                        name="color[]"
-                        value="green"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-color-4"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Green
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-color-5"
-                        name="color[]"
-                        value="purple"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+            <div class="border-t border-gray-200 px-4 py-6">
+              <h3 class="-mx-2 -my-3 flow-root">
+                <button
+                  type="button"
+                  class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500"
+                  aria-controls="filter-section-mobile-1"
+                  aria-expanded="false"
+                >
+                  <span class="font-medium text-gray-900">Category</span>
+                  <span class="ml-6 flex items-center">
+                    <svg
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+                    </svg>
+                    <svg
+                      class="h-5 w-5"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z"
+                        clip-rule="evenodd"
                       />
-                      <label
-                        for="filter-mobile-color-5"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Purple
-                      </label>
-                    </div>
+                    </svg>
+                  </span>
+                </button>
+              </h3>
+              <div class="pt-6" id="filter-section-mobile-1">
+                <div class="space-y-4">
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-0"
+                      name="category[]"
+                      value="new-arrivals"
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-0"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      RIBBON
+                    </label>
                   </div>
-                </div>
-              </div>
-              <div class="border-t border-gray-200 px-4 py-6">
-                <h3 class="-mx-2 -my-3 flow-root">
-                  <button
-                    type="button"
-                    class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500"
-                    aria-controls="filter-section-mobile-1"
-                    aria-expanded="false"
-                  >
-                    <span class="font-medium text-gray-900">Category</span>
-                    <span class="ml-6 flex items-center">
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-                      </svg>
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z"
-                          clip-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </h3>
-                <div class="pt-6" id="filter-section-mobile-1">
-                  <div class="space-y-6">
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-category-0"
-                        name="category[]"
-                        value="new-arrivals"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-category-0"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Products
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-category-1"
-                        name="category[]"
-                        value="sale"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-category-1"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Sale
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-category-2"
-                        name="category[]"
-                        value="travel"
-                        type="checkbox"
-                        checked
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-category-2"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Travel
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-category-3"
-                        name="category[]"
-                        value="organization"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-category-3"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Organization
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-category-4"
-                        name="category[]"
-                        value="accessories"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-category-4"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        Accessories
-                      </label>
-                    </div>
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-1"
+                      name="category[]"
+                      value="sale"
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-1"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      EVOLIS
+                    </label>
                   </div>
-                </div>
-              </div>
-              <div class="border-t border-gray-200 px-4 py-6">
-                <h3 class="-mx-2 -my-3 flow-root">
-                  <button
-                    type="button"
-                    class="flex w-full items-center justify-between bg-white px-2 py-3 text-gray-400 hover:text-gray-500"
-                    aria-controls="filter-section-mobile-2"
-                    aria-expanded="false"
-                  >
-                    <span class="font-medium text-gray-900">Size</span>
-                    <span class="ml-6 flex items-center">
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-                      </svg>
-                      <svg
-                        class="h-5 w-5"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z"
-                          clip-rule="evenodd"
-                        />
-                      </svg>
-                    </span>
-                  </button>
-                </h3>
-                <div class="pt-6" id="filter-section-mobile-2">
-                  <div class="space-y-6">
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-0"
-                        name="size[]"
-                        value="2l"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-0"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        2L
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-1"
-                        name="size[]"
-                        value="6l"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-1"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        6L
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-2"
-                        name="size[]"
-                        value="12l"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-2"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        12L
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-3"
-                        name="size[]"
-                        value="18l"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-3"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        18L
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-4"
-                        name="size[]"
-                        value="20l"
-                        type="checkbox"
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-4"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        20L
-                      </label>
-                    </div>
-                    <div class="flex items-center">
-                      <input
-                        id="filter-mobile-size-5"
-                        name="size[]"
-                        value="40l"
-                        type="checkbox"
-                        checked
-                        class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
-                      />
-                      <label
-                        for="filter-mobile-size-5"
-                        class="ml-3 min-w-0 flex-1 text-gray-500"
-                      >
-                        40L
-                      </label>
-                    </div>
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-2"
+                      name="category[]"
+                      value="travel"
+                      type="checkbox"
+                      checked
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-2"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      FUJIFILM
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-3"
+                      name="category[]"
+                      value="organization"
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-3"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      HP
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-4"
+                      name="category[]"
+                      value="accessories"
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-4"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      DELL
+                    </label>
+                  </div>
+                  <div class="flex items-center">
+                    <input
+                      id="filter-category-4"
+                      name="category[]"
+                      value="accessories"
+                      type="checkbox"
+                      class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary/90"
+                    />
+                    <label
+                      for="filter-category-4"
+                      class="ml-3 text-sm text-gray-600"
+                    >
+                      SONY
+                    </label>
                   </div>
                 </div>
               </div>
-            </form>
-          </div>
+            </div>
+          </form>
         </div>
       </div>
 
-      <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <main class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-0">
         <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">
+          <h1 class="text-lg md:text-md lg:text-xl xl:text-xl 2xl:text-4xl font-bold tracking-tight text-gray-900">
             Products
           </h1>
 
-          <div class="flex items-center">
+          <div class="flex items-center space-x-3">
             <div class="relative inline-block text-left">
               <div>
                 <button
@@ -528,6 +304,24 @@ const Products: Component<{}> = () => {
                 </ul>
               </div>
             </div>
+            <button
+              class="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900"
+              type="button"
+              data-drawer-target="drawer-right-example"
+              data-drawer-show="drawer-right-example"
+              data-drawer-placement="right"
+              aria-controls="drawer-right-example"
+            >
+              <svg
+                class="w-4 h-4 text-gray-600 dark:text-white"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 18 18"
+              >
+                <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z" />
+              </svg>
+            </button>
           </div>
         </div>
 
@@ -700,8 +494,8 @@ export default Products;
 
 export const Banner: Component = () => {
   return (
-    <div class="container mx-auto pt-9 md:pt-12 md:px-3">
-      <div class="flex items-strech justify-center flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 lg:space-x-4">
+    <div class="container mx-auto pt-0 md:pt-12 px-4 md:px-0 ">
+      <div class="hidden md:flex items-strech justify-center flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 lg:space-x-4">
         <div class="rounded-2xl flex flex-col md:flex-row items-strech justify-between bg-gray-50 dark:bg-gray-800 py-6 px-6 md:py-12 lg:px-12 md:w-8/12 lg:w-7/12 xl:w-8/12 2xl:w-9/12">
           <div class="flex flex-col justify-center md:w-1/2">
             <h1 class="text-3xl lg:text-4xl font-semibold text-gray-800 dark:text-white">
@@ -729,6 +523,35 @@ export const Banner: Component = () => {
           </div>
         </div>
       </div>
+      <div class="block md:hidden relative -z-50">
+        <div id="default-carousel" class="w-full" data-carousel="slide">
+          <div class="relative h-[180px] overflow-hidden rounded-lg">
+            <div class="hidden duration-700 ease-in-out" data-carousel-item>
+              <img
+                src="/thumbnails/thumbnail-1.png"
+                alt=""
+                class="w-full object-contain"
+              />
+            </div>
+
+            <div class="hidden duration-700 ease-in-out" data-carousel-item>
+              <img
+                src="/thumbnails/thumbnail-2.png"
+                alt=""
+                class="w-full object-contain"
+              />
+            </div>
+
+            <div class="hidden duration-700 ease-in-out" data-carousel-item>
+              <img
+                src="/thumbnails/thumbnail-3.png"
+                alt=""
+                class="w-full object-contain"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/client/src/pages/register.tsx b/client/src/pages/register.tsx
index 4fdc6a6..bcb66ac 100644
--- a/client/src/pages/register.tsx
+++ b/client/src/pages/register.tsx
@@ -7,23 +7,27 @@ const Register = () => {
       style="background-image:url('./../../public/images/jcomp.jpg')"
     >
       <div class="w-full h-screen absolute bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-5" />
-      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-[27vw] lg:py-0">
+      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-full md:w-[40vw] lg:w-[36vw] xl:w-[36vw] 2xl:w-[27vw] ">
         <A
           href="/"
           class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
         >
-          <img class="w-32 z-50" src="/images/logo.png" alt="logo" />
+          <img
+            class="w-32 md:w-16 lg:w-16 xl:w-16 2xl:w-32 z-50"
+            src="/images/logo.png"
+            alt="logo"
+          />
         </A>
         <div class="w-full bg-white/60 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-30 rounded-2xl shadow-md dark:border md:mt-0 sm:max-w-xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-          <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <h1 class="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+          <div class="p-4 md:p-2 lg:p-4 xl:p-4 2xl:p-6 space-y-4 md:space-y-6 sm:p-8">
+            <h1 class="text-xl md:text-sm lg:text-sm xl:text-sm 2xl:text-xl text-center font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
               Register account!
             </h1>
 
             <div class="flex lg:flex-row sm:flex-col justify-between ">
               <button
                 type="button"
-                class="w-full bg-white text-base-900 focus:ring-4 focus:outline-none focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 justify-center text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2"
+                class="w-full bg-white text-base-900 focus:ring-4 focus:outline-none focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm justify-center text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2 md:mb-2 lg:mb-0 xl:mb-0 2xl:mb-2"
               >
                 <svg
                   class="w-4 h-4 mr-2"
@@ -42,7 +46,7 @@ const Register = () => {
               </button>
               <button
                 type="button"
-                class="w-full text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 mr-2 mb-2"
+                class="w-full text-white bg-[#050708] hover:bg-[#050708]/90 focus:ring-4 focus:outline-none focus:ring-[#050708]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-center dark:focus:ring-[#050708]/50 dark:hover:bg-[#050708]/30 mr-2 mb-2 md:mb-2 lg:mb-0 xl:mb-0 2xl:mb-2"
               >
                 <svg
                   class="w-4 h-4 mr-2"
@@ -66,7 +70,7 @@ const Register = () => {
               <span class="text-base-300 font-normal">or continue with</span>
               <span class="h-px w-16 bg-gray-500"></span>
             </div>
-            <form class="space-y-4 md:space-y-6" action="#">
+            <form class="space-y-4 md:space-y-3" action="#">
               <div>
                 <label
                   for="email"
diff --git a/client/src/pages/reset.tsx b/client/src/pages/reset.tsx
index 24a649c..a23aee0 100644
--- a/client/src/pages/reset.tsx
+++ b/client/src/pages/reset.tsx
@@ -7,16 +7,20 @@ const Reset = () => {
       style="background-image:url('./../../public/images/angkor-rawpixel.jpg')"
     >
       <div class="w-full h-screen absolute bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-5" />
-      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-[27vw] lg:py-0">
+      <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen w-full md:w-[40vw] lg:w-[30vw] xl:w-[36vw] 2xl:w-[27vw] lg:py-0">
         <A
           href="/"
           class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
         >
-          <img class="w-32 z-50" src="/images/logo.png" alt="logo" />
+          <img
+            class="w-32 md:w-16 lg:w-16 xl:w-16 2xl:w-32 z-50"
+            src="/images/logo.png"
+            alt="logo"
+          />
         </A>
         <div class="w-full pb-6 bg-white/60 bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-30 rounded-2xl shadow-md dark:border md:mt-0 sm:max-w-xl:p-0 dark:bg-gray-800 dark:border-gray-700">
           <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
-            <h1 class="text-xl text-center font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+            <h1 class="text-xl md:text-sm lg:text-sm xl:text-sm 2xl:text-xl text-center font-bold leading-tight tracking-tight text-gray-900 dark:text-white">
               Reset your password!
             </h1>