diff --git a/client/data/Lates-product.tsx b/client/data/Lates-product.tsx
index d17e3a6..80db06a 100644
--- a/client/data/Lates-product.tsx
+++ b/client/data/Lates-product.tsx
@@ -26,6 +26,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -35,6 +36,7 @@ const latesProducts = [
     rating: 5,
     brand: "FUJIFILM",
     price: 3300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -44,6 +46,7 @@ const latesProducts = [
     rating: 5,
     brand: "RIBBON",
     price: 98,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -63,6 +66,7 @@ const latesProducts = [
     rating: 5,
     brand: "EVOLIS",
     price: 300,
+    category: "sdf",
     quantity: 1,
   },
   {
@@ -72,6 +76,7 @@ const latesProducts = [
     rating: 5,
     brand: "FUJIFILM",
     price: 3100,
+    category: "sdf",
     quantity: 1,
   },
 ];
diff --git a/client/public/images/angkor-rawpixel.jpg b/client/public/images/angkor-rawpixel.jpg
new file mode 100644
index 0000000..9f3ff10
Binary files /dev/null and b/client/public/images/angkor-rawpixel.jpg differ
diff --git a/client/public/images/jcomp.jpg b/client/public/images/jcomp.jpg
new file mode 100644
index 0000000..5dfbb3d
Binary files /dev/null and b/client/public/images/jcomp.jpg differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index f397733..43ad42c 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -13,13 +13,24 @@ import News from "./pages/news";
 import SinglePageNews from "./pages/news/singlePage";
 import Favorite from "./pages/favorite";
 import Order from "./pages/order";
+import Login from "./pages/login";
+import { useLocation } from "@solidjs/router";
+import NotFound from "./pages/404";
+import Register from "./pages/register";
+import Reset from "./pages/reset";
 
 const App: Component = () => {
+  const location = useLocation();
   return (
     <section>
-      <Navbar />
+      {location.pathname !== "/login" &&
+        location.pathname !== "/register" &&
+        location.pathname !== "/reset" && <Navbar />}
       <Routes>
         <Route path="/" component={Home} />
+        <Route path="/login" component={Login} />
+        <Route path="/register" component={Register} />
+        <Route path="/reset" component={Reset} />
         <Route path="/about-us" component={About} />
         <Route path="/contact-us" component={Contact} />
         <Route path="/cart" component={Cart} />
@@ -31,8 +42,11 @@ const App: Component = () => {
         <Route path="/news/:id?" component={SinglePageNews} />
         <Route path="/favorite" component={Favorite} />
         <Route path="/order" component={Order} />
+        <Route path="/*" component={NotFound} />
       </Routes>
-      <Footer />
+      {location.pathname !== "/login" &&
+        location.pathname !== "/register" &&
+        location.pathname !== "/reset" && <Footer />}
     </section>
   );
 };
diff --git a/client/src/components/cards/Cards.tsx b/client/src/components/cards/Cards.tsx
index 8c437e1..e164213 100644
--- a/client/src/components/cards/Cards.tsx
+++ b/client/src/components/cards/Cards.tsx
@@ -12,9 +12,7 @@ export type Product = {
   category: string;
   quantity: number;
 };
-interface Props {
-  props: Product;
-}
+
 const Cards: Component<{ product: Product }> = (props) => {
   const { cartItems, addToCart } = useCartContext();
   const navigate = useNavigate();
@@ -37,7 +35,7 @@ const Cards: Component<{ product: Product }> = (props) => {
           }}
           data-aos="zoom-out-down"
         >
-          <div class="group relative max-w-sm h-[25.5rem] bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 ">
+          <div class="group relative max-w-sm h-[25.5rem] md:h-auto bg-white border border-gray-200 rounded-3xl shadow dark:bg-gray-800 dark:border-gray-700 ">
             <div class="absolute flex flex-col top-0 right-0 p-3">
               <div
                 id="tooltip-light"
@@ -53,13 +51,13 @@ const Cards: Component<{ product: Product }> = (props) => {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                class="z-40 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 text-center p-1"
+                class="z-40 transition ease-in duration-300 bg-gray-50  hover:text-danger shadow hover:shadow-md text-red-300 rounded-full w-8 h-8 lg:h-6 lg:w-6 2xl:h-8 2xl:w-8 text-center p-1"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   fill="currentColor"
-                  class="w-6 h-6"
+                  class="w-6 h-6 lg:w-4 lg:h-4 2xl:w-6 2xl:h-6"
                 >
                   <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
                 </svg>
@@ -67,7 +65,7 @@ const Cards: Component<{ product: Product }> = (props) => {
             </div>
             <div class="w-full">
               <img
-                class="p-3 rounded-t-lg w-60 max-w-sm mx-auto group-hover:scale-110 duration-150"
+                class="p-3 rounded-t-lg w-60 sm:w-48 mx-auto group-hover:scale-110 duration-150"
                 src={props?.product?.image}
                 alt="product image"
               />
@@ -133,7 +131,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                   props?.product?.name?.length > 35 ? "mt-1" : "mt-7"
                 }`}
               >
-                <span class="text-3xl font-bold text-danger dark:text-white ">
+                <span class="text-3xl lg:text-xl 2xl:text-3xl font-bold text-danger dark:text-white ">
                   ${props.product?.price}
                 </span>
                 {!isInCart() ? (
@@ -142,7 +140,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                       e.stopPropagation();
                       handleAddTocart(props.product);
                     }}
-                    class="text-primary hover:text-white border border-primary hover:border-danger hover:bg-danger focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    class="text-primary hover:text-white border border-primary hover:border-danger hover:bg-danger focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 lg:py-1.5 2xl:py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                   >
                     Add to cart
                   </button>
@@ -152,7 +150,7 @@ const Cards: Component<{ product: Product }> = (props) => {
                       e.stopPropagation();
                       navigate(`/cart`);
                     }}
-                    class="text-white hover:text-white border bg-danger hover:bg-red-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+                    class="text-white hover:text-white border bg-danger hover:bg-red-500 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 lg:py-1.5 2xl:py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                   >
                     View Cart
                   </button>
diff --git a/client/src/components/layouts/Footer.tsx b/client/src/components/layouts/Footer.tsx
index 2c2159f..044f5cb 100644
--- a/client/src/components/layouts/Footer.tsx
+++ b/client/src/components/layouts/Footer.tsx
@@ -3,7 +3,7 @@ import { Component } from "solid-js";
 
 const Footer: Component = () => {
   return (
-    <footer class="relative z-10 bg-white pt-20 pb-10 lg:pt-[120px] lg:pb-20">
+    <footer class="relative z-10 bg-white pt-20 pb-10 lg:pt-[120px] lg:pb-20 px-3 md:px-12 lg:px-24">
       <div class="container mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
         <div class="-mx-4 flex flex-wrap">
           <div class="w-full px-4 sm:w-2/3 lg:w-3/12">
@@ -56,7 +56,7 @@ const Footer: Component = () => {
               </p>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Resources</h4>
               <ul>
@@ -95,7 +95,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Company</h4>
               <ul>
@@ -134,7 +134,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-2/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-2/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Quick Links</h4>
               <ul>
@@ -173,7 +173,7 @@ const Footer: Component = () => {
               </ul>
             </div>
           </div>
-          <div class="w-full px-4 sm:w-1/2 lg:w-3/12">
+          <div class="w-1/2 px-4 sm:w-1/2 lg:w-3/12">
             <div class="mb-10 w-full">
               <h4 class="text-dark mb-9 text-lg font-semibold">Follow Us On</h4>
               <div class="mb-6 flex items-center">
diff --git a/client/src/components/layouts/Navbar.tsx b/client/src/components/layouts/Navbar.tsx
index c309d5b..5201d01 100644
--- a/client/src/components/layouts/Navbar.tsx
+++ b/client/src/components/layouts/Navbar.tsx
@@ -15,44 +15,30 @@ 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 flex-wrap items-center justify-between mx-auto p-4">
+      <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">
           <A href="/" class="flex items-center">
             <img class="md:w-24 w-24" src="/images/logo.png" alt="Solid logo" />
           </A>
           <div class="flex items-center md:order-2">
-            <NavActive
-              title="Order"
-              link="/order"
-              isIcon={true}
-              icon={
-                <svg
-                  class="w-5 h-5 text-gray-600 dark:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 16"
-                >
-                  <path d="M19 0H1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM2 6v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6H2Zm11 3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0h2a1 1 0 0 1 2 0v1Z" />
-                </svg>
-              }
-            />
-            <NavActive
-              title="Favorites"
-              link="/favorite"
-              isIcon={true}
-              icon={
-                <svg
-                  class="w-5 h-5 text-gray-600 dark:text-white"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  viewBox="0 0 20 18"
-                >
-                  <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
-                </svg>
-              }
-            />
+            <div class="hidden md:hidden lg:block">
+              <NavActive
+                title="Favorites"
+                link="/favorite"
+                isIcon={true}
+                icon={
+                  <svg
+                    class="w-5 h-5 text-gray-600 dark:text-white "
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 18"
+                  >
+                    <path d="M17.947 2.053a5.209 5.209 0 0 0-3.793-1.53A6.414 6.414 0 0 0 10 2.311 6.482 6.482 0 0 0 5.824.5a5.2 5.2 0 0 0-3.8 1.521c-1.915 1.916-2.315 5.392.625 8.333l7 7a.5.5 0 0 0 .708 0l7-7a6.6 6.6 0 0 0 2.123-4.508 5.179 5.179 0 0 0-1.533-3.793Z" />
+                  </svg>
+                }
+              />
+            </div>
 
             <NavActive
               title="Cart"
@@ -75,6 +61,66 @@ const Navbar: Component<{}> = () => {
                 </div>
               }
             />
+
+            <div
+              id="avatarButton"
+              data-dropdown-toggle="dropdownInformation"
+              data-dropdown-placement="bottom-start"
+              class="relative overflow-hidden bg-gray-100 dark:bg-gray-600 w-8 h-8 rounded-full cursor-pointer ml-3"
+            >
+              <svg
+                class="absolute w-9 h-9 text-gray-600 -left-1"
+                fill="currentColor"
+                viewBox="0 0 18 18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </div>
+
+            <div
+              id="dropdownInformation"
+              class="z-50 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
+            >
+              {/* <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+                <div>Bonnie Green</div>
+                <div class="font-medium truncate">name@flowbite.com</div>
+              </div> */}
+              <ul
+                class="py-2 text-sm text-gray-700 dark:text-gray-200"
+                aria-labelledby="dropdownInformationButton"
+              >
+                <li>
+                  <A
+                    href="/login"
+                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
+                    My Account
+                  </A>
+                </li>
+
+                <li>
+                  <A
+                    href="/order"
+                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+                  >
+                    Orders
+                  </A>
+                </li>
+              </ul>
+              <div class="py-2">
+                <a
+                  href="#"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                >
+                  Sign out
+                </a>
+              </div>
+            </div>
           </div>
           <div
             class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
diff --git a/client/src/context/CartContext.tsx b/client/src/context/CartContext.tsx
index e6bec0a..459c2c0 100644
--- a/client/src/context/CartContext.tsx
+++ b/client/src/context/CartContext.tsx
@@ -1,11 +1,4 @@
-import {
-  Accessor,
-  Setter,
-  createContext,
-  createEffect,
-  createSignal,
-  useContext,
-} from "solid-js";
+import { Show, createContext, createEffect, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 
 type Product = {
diff --git a/client/src/index.css b/client/src/index.css
index f2fef47..6f35ec6 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -6,6 +6,7 @@
 
 html {
   scroll-behavior: smooth !important;
+  overflow-x: hidden !important;
 }
 
 body {
@@ -124,3 +125,9 @@ body {
   width: 100%;
   height: 100%;
 }
+
+/* @media only screen and (max-width: 600px) {
+  body {
+   
+  }
+} */
diff --git a/client/src/pages/404.tsx b/client/src/pages/404.tsx
new file mode 100644
index 0000000..9dc1f09
--- /dev/null
+++ b/client/src/pages/404.tsx
@@ -0,0 +1,30 @@
+import { A } from "@solidjs/router";
+
+const NotFound = () => {
+  return (
+    <section class="bg-white dark:bg-gray-900">
+      <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div class="mx-auto max-w-screen-sm text-center">
+          <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary dark:text-primary">
+            404
+          </h1>
+          <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">
+            Something's missing.
+          </p>
+          <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
+            Sorry, we can't find that page. You'll find lots to explore on the
+            home page.{" "}
+          </p>
+          <A
+            href="/"
+            class="inline-flex rounded-xl text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium text-sm px-5 py-2.5 text-center dark:focus:ring-primary my-4"
+          >
+            Back to Homepage
+          </A>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NotFound;
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 1d72f6a..876d51c 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -9,18 +9,18 @@ const Home: Component = () => {
   return (
     <div>
       <Banner />
-      <div class="md:mx-44 mx-3">
-        <div class="mt-20">
+      <div class="md:mx-24 mx-3">
+        <div class="mt-0 md:mt-20 lg:mt-20">
           <LatestProducts />
         </div>
-        <div class="mt-32">
+        <div class="mt-0 md:mt-32 lg:mt-32">
           <MainProducts />
         </div>
 
         <div>
           <Features />
         </div>
-        <div class="mt-32">
+        <div class="mt-0 md:mt-32 lg:mt-32">
           <News />
         </div>
         <Contact />
@@ -33,7 +33,7 @@ export default Home;
 
 export const Banner: Component = () => {
   return (
-    <section class="w-full h-screen overflow-x-hidden">
+    <section class="w-full h-auto overflow-x-hidden">
       <div class="background-img">
         <div class="py-12 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
           <div>
@@ -71,7 +71,7 @@ export const Banner: Component = () => {
             </p>
           </div>
 
-          <div class="flex flex-col mb-8 lg:mb-16 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
+          <div class="flex flex-col mb-8 lg:mb-4 space-y-4 sm:flex-row sm:justify-center sm:space-y-0 sm:space-x-4">
             <A
               href="/products"
               class="inline-flex justify-center items-center py-3 px-5 text-base font-medium text-center text-white rounded-2xl bg-primary hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900"
@@ -92,7 +92,7 @@ export const Banner: Component = () => {
             </A>
           </div>
 
-          <div class="mt-24 px-4 mx-auto text-center md:max-w-screen-md lg:max-w-screen-lg lg:px-36">
+          <div class="mt-9 md:mt-9 lg:mt-24 px-4 mx-auto text-center md:max-w-screen-md lg:max-w-screen-lg lg:px-36">
             <span class="font-semibold text-gray-400 uppercase">
               Our Clients Believe In Us
             </span>
@@ -101,27 +101,43 @@ export const Banner: Component = () => {
                 href="#"
                 class="mr-5 mb-5 lg:mb-0 hover:text-gray-800 dark:hover:text-gray-400"
               >
-                <img alt="" src="/images/maybank.svg" class="w-48 " />
+                <img
+                  alt=""
+                  src="/images/maybank.svg"
+                  class="w-20 md:32 lg:w-48"
+                />
               </A>
               <A
                 href="#"
                 class="mr-5 mb-5 lg:mb-0 hover:text-gray-800 dark:hover:text-gray-400"
               >
-                <img alt="" src="/images/prince-bank.png" class="w-48" />
+                <img
+                  alt=""
+                  src="/images/prince-bank.png"
+                  class="w-20 md:32 lg:w-48"
+                />
               </A>
               <A
                 href="#"
                 class="mr-5 mb-5 lg:mb-0 hover:text-gray-800 dark:hover:text-gray-400"
               >
-                <img alt="" src="/images/hgb-group.png" class="w-36" />
+                <img
+                  alt=""
+                  src="/images/hgb-group.png"
+                  class="w-16 md:32 lg:w-32"
+                />
               </A>
             </div>
-            <div class="flex flex-wrap justify-center items-center mt-8 text-gray-500 sm:justify-between">
+            <div class="flex flex-wrap justify-center items-center mt-0 md:mt-3 lg:mt-3 text-gray-500 sm:justify-between">
               <A
                 href="#"
                 class="mr-5 mb-5 lg:mb-0 hover:text-gray-800 dark:hover:text-gray-400"
               >
-                <img alt="" src="/images/ph_logo.png" class="w-20" />
+                <img
+                  alt=""
+                  src="/images/ph_logo.png"
+                  class="w-9 md:32 lg:w-20"
+                />
               </A>
               <A
                 href="#"
@@ -130,14 +146,18 @@ export const Banner: Component = () => {
                 <img
                   alt=""
                   src="/images/orkide_development_logo.jpg"
-                  class="w-28"
+                  class="w-12 md:32 lg:w-20"
                 />
               </A>
               <A
                 href="#"
                 class="mr-5 mb-5 lg:mb-0 hover:text-gray-800 dark:hover:text-gray-400"
               >
-                <img alt="" src="/images/CAMPU_BANK.jpg" class="w-72" />
+                <img
+                  alt=""
+                  src="/images/CAMPU_BANK.jpg"
+                  class="w-28 md:32 lg:w-44"
+                />
               </A>
             </div>
           </div>
@@ -150,7 +170,7 @@ export const Banner: Component = () => {
 export const LatestProducts: Component<{}> = () => {
   return (
     <section id="products">
-      <div class="mx-auto max-w-screen-xl">
+      <div class="mx-auto max-w-screen-xl ">
         <h1 class="text-center text-gray-300 font-extrabold md:text-5xl uppercase">
           Latest Products
         </h1>
@@ -222,14 +242,14 @@ export const MainProducts: Component<{}> = () => {
 export const Features: Component = () => {
   return (
     <section>
-      <div class="mt-32 px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
+      <div class="mt-0 px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
         <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
           <div>
             <p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-gray-100">
               Brand new
             </p>
           </div>
-          <h2 class="max-w-lg mb-6 font-sans text-5xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+          <h2 class="max-w-lg mb-6 font-sans text-3xl lg:text-4xl 2xl:text-4xl font-bold leading-none tracking-tight text-gray-900  md:mx-auto">
             <span class="relative inline-block">
               <svg
                 viewBox="0 0 52 24"
@@ -241,8 +261,8 @@ export const Features: Component = () => {
                     id="27df4f81-c854-45de-942a-fe90f7a300f9"
                     x="0"
                     y="0"
-                    width=".135"
-                    height=".30"
+                    width="0.135"
+                    height="0.30"
                   >
                     <circle cx="1" cy="1" r=".7"></circle>
                   </pattern>
@@ -371,7 +391,7 @@ export const Features: Component = () => {
 
 export const News: Component = () => {
   return (
-    <section>
+    <section class="overflow-x-hidden">
       <div class="mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl">
         <h1 class="text-center text-gray-300 font-extrabold md:text-5xl uppercase">
           CHECK LATEST NEWS
diff --git a/client/src/pages/login.tsx b/client/src/pages/login.tsx
new file mode 100644
index 0000000..5857dd5
--- /dev/null
+++ b/client/src/pages/login.tsx
@@ -0,0 +1,152 @@
+import { A } from "@solidjs/router";
+
+const Login = () => {
+  return (
+    <div
+      class=" flex h-screen w-full items-center justify-center bg-gray-900 bg-cover bg-no-repeat"
+      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">
+        <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" />
+        </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">
+              Welcome back!
+            </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"
+              >
+                <svg
+                  class="w-4 h-4 mr-2"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 18 19"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Google
+              </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"
+              >
+                <svg
+                  class="w-4 h-4 mr-2"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 8 19"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Facebook
+              </button>
+            </div>
+
+            <div class="flex items-center justify-center space-x-2">
+              <span class="h-px w-16 bg-gray-500"></span>
+              <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="#">
+              <div>
+                <label
+                  for="email"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Your email
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="name@company.com"
+                  required={true}
+                />
+              </div>
+              <div>
+                <label
+                  for="password"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Password
+                </label>
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  placeholder="••••••••"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                />
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex items-start">
+                  <div class="flex items-center h-5">
+                    <input
+                      id="remember"
+                      aria-describedby="remember"
+                      type="checkbox"
+                      class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+                      required={true}
+                    />
+                  </div>
+                  <div class="ml-3 text-sm">
+                    <label
+                      for="remember"
+                      class="text-gray-500 dark:text-gray-300"
+                    >
+                      Remember me
+                    </label>
+                  </div>
+                </div>
+                <A
+                  href="/reset"
+                  class="text-sm font-medium text-primary hover:underline dark:text-primary"
+                >
+                  Forgot password?
+                </A>
+              </div>
+              <button
+                type="submit"
+                class="w-full text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary dark:focus:ring-primary"
+              >
+                Login
+              </button>
+              <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+                Didn't have an account?{" "}
+                <A
+                  href="/register"
+                  class="font-medium text-primary hover:underline dark:text-primary"
+                >
+                  Sign up here
+                </A>
+              </p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
diff --git a/client/src/pages/news/index.tsx b/client/src/pages/news/index.tsx
index 966e47f..d0113ee 100644
--- a/client/src/pages/news/index.tsx
+++ b/client/src/pages/news/index.tsx
@@ -4,19 +4,9 @@ import NewsData from "../../data/News";
 
 const News: Component = () => {
   return (
-    <section>
-      <Banner />
-    </section>
-  );
-};
-
-export default News;
-
-export const Banner: Component = () => {
-  return (
-    <section class="w-full h-screen overflow-x-hidden ">
-      <div class="news-background">
-        <div class="bg-white/90 w-full h-full bg-white-400 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-40">
+    <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="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">
@@ -54,3 +44,5 @@ export const Banner: Component = () => {
     </section>
   );
 };
+
+export default News;
diff --git a/client/src/pages/products/index.tsx b/client/src/pages/products/index.tsx
index b0a5feb..a590299 100644
--- a/client/src/pages/products/index.tsx
+++ b/client/src/pages/products/index.tsx
@@ -715,7 +715,7 @@ export const Banner: Component = () => {
             <img src="/products/product-2.png" alt="" class="w-1/2" />
           </div>
         </div>
-        <div class="rounded-2xl md:w-4/12 lg:w-5/12 xl:w-4/12 2xl:w-3/12 bg-gray-50 dark:bg-gray-800 py-6 px-6 md:py-0 md:px-4 lg:px-6 flex flex-col justify-center relative">
+        <div class="rounded-2xl md:w-4/12 lg:w-5/12 xl:w-4/12 2xl:w-3/12 bg-gray-50 dark:bg-gray-800 py-6 px-6 md:py-0 md:px-4 lg:px-6 flex flex-col justify-center ">
           <div class="flex flex-col justify-center">
             <h1 class="text-3xl lg:text-4xl font-semibold text-gray-800 dark:text-white">
               RIBBON
@@ -724,12 +724,8 @@ export const Banner: Component = () => {
               Save Upto <span class="font-bold">30%</span>
             </p>
           </div>
-          <div class="flex justify-end md:absolute md:bottom-4 md:right-4 lg:bottom-0 lg:right-0">
-            <img
-              src="/products/product-2.png"
-              alt=""
-              class="md:w-12 md:h-12 lg:w-1/2 lg:h-1/2"
-            />
+          <div class="flex justify-end lg:bottom-0 lg:right-0">
+            <img src="/products/product-2.png" alt="" class="w-1/2" />
           </div>
         </div>
       </div>
diff --git a/client/src/pages/register.tsx b/client/src/pages/register.tsx
new file mode 100644
index 0000000..4fdc6a6
--- /dev/null
+++ b/client/src/pages/register.tsx
@@ -0,0 +1,168 @@
+import { A } from "@solidjs/router";
+
+const Register = () => {
+  return (
+    <div
+      class=" flex h-screen w-full items-center justify-center bg-gray-900 bg-cover bg-no-repeat"
+      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">
+        <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" />
+        </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">
+              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"
+              >
+                <svg
+                  class="w-4 h-4 mr-2"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 18 19"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M8.842 18.083a8.8 8.8 0 0 1-8.65-8.948 8.841 8.841 0 0 1 8.8-8.652h.153a8.464 8.464 0 0 1 5.7 2.257l-2.193 2.038A5.27 5.27 0 0 0 9.09 3.4a5.882 5.882 0 0 0-.2 11.76h.124a5.091 5.091 0 0 0 5.248-4.057L14.3 11H9V8h8.34c.066.543.095 1.09.088 1.636-.086 5.053-3.463 8.449-8.4 8.449l-.186-.002Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Google
+              </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"
+              >
+                <svg
+                  class="w-4 h-4 mr-2"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  viewBox="0 0 8 19"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Facebook
+              </button>
+            </div>
+
+            <div class="flex items-center justify-center space-x-2">
+              <span class="h-px w-16 bg-gray-500"></span>
+              <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="#">
+              <div>
+                <label
+                  for="email"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Your email
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="name@company.com"
+                  required={true}
+                />
+              </div>
+              <div>
+                <label
+                  for="password"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Password
+                </label>
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  placeholder="••••••••"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                />
+              </div>
+              <div>
+                <label
+                  for="confirm-password"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Confirm password
+                </label>
+
+                <input
+                  type="confirm-password"
+                  name="confirm-password"
+                  id="confirm-password"
+                  placeholder="••••••••"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                />
+              </div>
+              <div class="flex items-start">
+                <div class="flex items-center h-5">
+                  <input
+                    id="terms"
+                    aria-describedby="terms"
+                    type="checkbox"
+                    class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary dark:ring-offset-gray-800"
+                    required={true}
+                  />
+                </div>
+                <div class="ml-3 text-sm">
+                  <label
+                    for="terms"
+                    class="font-light text-gray-500 dark:text-gray-300"
+                  >
+                    I accept the{" "}
+                    <a
+                      class="font-medium text-primary hover:underline dark:text-primary"
+                      href="#"
+                    >
+                      Terms and Conditions
+                    </a>
+                  </label>
+                </div>
+              </div>
+
+              <button
+                type="submit"
+                class="w-full text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary dark:focus:ring-primary"
+              >
+                Login
+              </button>
+              <p class="text-sm font-light text-gray-500 dark:text-gray-400">
+                Already have an account?{" "}
+                <A
+                  href="/login"
+                  class="font-medium text-primary hover:underline dark:text-primary"
+                >
+                  Sign in here
+                </A>
+              </p>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Register;
diff --git a/client/src/pages/reset.tsx b/client/src/pages/reset.tsx
new file mode 100644
index 0000000..24a649c
--- /dev/null
+++ b/client/src/pages/reset.tsx
@@ -0,0 +1,88 @@
+import { A } from "@solidjs/router";
+
+const Reset = () => {
+  return (
+    <div
+      class=" flex h-screen w-full items-center justify-center bg-gray-900 bg-cover bg-no-repeat"
+      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">
+        <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" />
+        </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">
+              Reset your password!
+            </h1>
+
+            <form class="space-y-4 md:space-y-6" action="#">
+              <div>
+                <label
+                  for="email"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Your email
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="name@company.com"
+                  required={true}
+                />
+              </div>
+              {/* <div>
+                <label
+                  for="password"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  New password
+                </label>
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  placeholder="••••••••"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                />
+              </div>
+              <div>
+                <label
+                  for="confirm-password"
+                  class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Confirm password
+                </label>
+
+                <input
+                  type="confirm-password"
+                  name="confirm-password"
+                  id="confirm-password"
+                  placeholder="••••••••"
+                  class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                />
+              </div> */}
+
+              <button
+                type="submit"
+                class="w-full text-white bg-primary hover:bg-primary focus:ring-4 focus:outline-none focus:ring-primary font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary dark:focus:ring-primary"
+              >
+                Request
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Reset;