diff --git a/README.md b/README.md
index 22e1c320..746f5499 100644
--- a/README.md
+++ b/README.md
@@ -222,3 +222,4 @@ If you have any questions or feedback, feel free to reach out via **GitHub**. Yo
 We look forward to hearing from you! ✨
 
 💙 Thank You !!! 💙
+# TODO: 
diff --git a/client/public/index.html b/client/public/index.html
index 492424c4..e263dfef 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -102,6 +102,8 @@
       document.addEventListener("DOMContentLoaded", function () {
         const coords = { x: 0, y: 0 };
         const circles = document.querySelectorAll(".circle");
+        const container = document.querySelector(".circle-container");
+        let hidden = false;
 
         circles.forEach(function (circle) {
           circle.x = 0;
@@ -110,7 +112,21 @@
 
         window.addEventListener("mousemove", function (e) {
           coords.x = e.pageX;
-          coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+          coords.y = e.pageY - window.scrollY;
+        });
+
+        document.addEventListener("mouseleave", function () {
+          hidden = true;
+          circles.forEach(function (circle) {
+            circle.style.opacity = "0";
+          });
+        });
+
+        document.addEventListener("mouseenter", function () {
+          hidden = false;
+          circles.forEach(function (circle) {
+            circle.style.opacity = "1";
+          });
         });
 
         function animateCircles() {
@@ -137,4 +153,11 @@
       });
 
     </script>
+    <script>
+      if ("serviceWorker" in navigator) {
+        window.addEventListener("load", function () {
+          navigator.serviceWorker.register("/service-worker.js");
+        });
+      }
+    </script>
   </body>
diff --git a/client/public/manifest.json b/client/public/manifest.json
index 080d6c77..89332952 100644
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -1,6 +1,7 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "BookSales",
+  "name": "Online Book Sales - Your Digital Bookstore",
+  "description": "Browse, discover, and purchase books online. Your one-stop digital bookstore.",
   "icons": [
     {
       "src": "favicon.ico",
@@ -15,11 +16,15 @@
     {
       "src": "logo512.png",
       "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "512x512",
+      "purpose": "any maskable"
     }
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "orientation": "portrait-primary",
+  "theme_color": "#002147",
+  "background_color": "#ffffff",
+  "categories": ["books", "education", "shopping"],
+  "lang": "en-US"
 }
diff --git a/client/public/service-worker.js b/client/public/service-worker.js
new file mode 100644
index 00000000..fe93208f
--- /dev/null
+++ b/client/public/service-worker.js
@@ -0,0 +1,65 @@
+const CACHE_NAME = "online-book-sales-v1";
+
+const PRECACHE_URLS = [
+  "/",
+  "/index.html",
+  "/manifest.json",
+  "/logo192.png",
+  "/logo512.png",
+  "/favicon.ico",
+  "/styles.css",
+];
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(PRECACHE_URLS);
+    })
+  );
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames
+          .filter((name) => name !== CACHE_NAME)
+          .map((name) => caches.delete(name))
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  if (event.request.method !== "GET") return;
+
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      if (cachedResponse) {
+        return cachedResponse;
+      }
+
+      return fetch(event.request)
+        .then((response) => {
+          if (!response || response.status !== 200 || response.type !== "basic") {
+            return response;
+          }
+
+          const responseToCache = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, responseToCache);
+          });
+
+          return response;
+        })
+        .catch(() => {
+          if (event.request.mode === "navigate") {
+            return caches.match("/index.html");
+          }
+          return new Response("Offline", { status: 503 });
+        });
+    })
+  );
+});
diff --git a/client/src/Pages/Faq.jsx b/client/src/Pages/Faq.jsx
index eb0619c5..af0d1b49 100644
--- a/client/src/Pages/Faq.jsx
+++ b/client/src/Pages/Faq.jsx
@@ -105,7 +105,7 @@ const FAQ = () => {
       </div>
     </button>
     {openIndex === index && (
-      <p className="p-4 text-base text-gray-900 dark:text-gray-50">{faq.answer}</p>
+      <p className="p-4 text-base text-gray-900 dark:text-gray-100 font-sans leading-relaxed">{faq.answer}</p>
     )}
   </div>
 ))}
diff --git a/client/src/Pages/Home.jsx b/client/src/Pages/Home.jsx
index 12921475..7a5405d9 100644
--- a/client/src/Pages/Home.jsx
+++ b/client/src/Pages/Home.jsx
@@ -148,49 +148,49 @@ const Home = () => {
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
 
                 <Link to="/romance">
-                  <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900">
+                  <div className="bg-gradient-to-r from-pink-200 to-red-200 dark:from-purple-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-400 hover:to-red-400 dark:hover:from-purple-600 dark:hover:to-purple-900 hover:shadow-xl hover:shadow-pink-300/50 dark:hover:shadow-pink-900/50">
                     <h3 className="text-xl font-bold mb-2 dark:text-white">Romance</h3>
                     <p className="text-gray-700 dark:text-gray-300">Explore our collection of romantic novels.</p>
                   </div>
                 </Link>
 
                 <Link to="/action">
-                  <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800">
+                  <div className="bg-gradient-to-r from-blue-200 to-indigo-200 dark:from-indigo-600 dark:to-blue-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-blue-300 hover:to-indigo-300 dark:hover:from-indigo-500 dark:hover:to-blue-800 hover:shadow-xl hover:shadow-blue-300/50 dark:hover:shadow-blue-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Action</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Dive into thrilling action-packed stories.</p>
                   </div>
                 </Link>
 
                 <Link to="/thriller">
-                  <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black">
+                  <div className="bg-gradient-to-r from-gray-200 to-gray-400 dark:from-gray-800 dark:to-black text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-700 dark:hover:to-black hover:shadow-xl hover:shadow-gray-400/50 dark:hover:shadow-gray-800/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Thriller</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Get your adrenaline pumping with our thrillers.</p>
                   </div>
                 </Link>
 
                 <Link to="/fiction">
-                  <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800">
+                  <div className="bg-gradient-to-r from-green-200 to-teal-200 dark:from-green-700 dark:to-teal-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-green-300 hover:to-teal-300 dark:hover:from-green-600 dark:hover:to-teal-800 hover:shadow-xl hover:shadow-green-300/50 dark:hover:shadow-green-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Fiction</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Discover imaginative and captivating fiction.</p>
                   </div>
                 </Link>
 
                 <Link to="/tech">
-                  <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800">
+                  <div className="bg-gradient-to-r from-yellow-200 to-orange-200 dark:from-yellow-700 dark:to-orange-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-yellow-300 hover:to-orange-300 dark:hover:from-yellow-600 dark:hover:to-orange-800 hover:shadow-xl hover:shadow-yellow-300/50 dark:hover:shadow-yellow-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Tech</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Stay updated with the latest in technology.</p>
                   </div>
                 </Link>
 
                 <Link to="/philosophy">
-                  <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800">
+                  <div className="bg-gradient-to-r from-purple-200 to-pink-200 dark:from-purple-700 dark:to-pink-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-purple-300 hover:to-pink-300 dark:hover:from-purple-600 dark:hover:to-pink-800 hover:shadow-xl hover:shadow-purple-300/50 dark:hover:shadow-purple-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Philosophy</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Dive deep into philosophical thoughts and ideas.</p>
                   </div>
                 </Link>
 
                 <Link to="/manga">
-                  <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800">
+                  <div className="bg-gradient-to-r from-pink-200 to-purple-200 dark:from-pink-700 dark:to-purple-900 text-white rounded-lg shadow-md p-6 transform transition-all duration-500 hover:scale-105 hover:bg-gradient-to-r hover:from-pink-300 hover:to-purple-300 dark:hover:from-pink-600 dark:hover:to-purple-800 hover:shadow-xl hover:shadow-pink-300/50 dark:hover:shadow-pink-900/50">
                     <h3 className="text-xl font-bold mb-2 text-center">Manga</h3>
                     <p className="text-gray-700 dark:text-gray-300 text-center">Explore our extensive collection of Manga.</p>
                   </div>
diff --git a/client/src/Pages/LoginPage.jsx b/client/src/Pages/LoginPage.jsx
index 6d51530a..04521ca4 100644
--- a/client/src/Pages/LoginPage.jsx
+++ b/client/src/Pages/LoginPage.jsx
@@ -178,7 +178,7 @@ const LoginPage = () => {
                     mt: 2,
                     "&:hover": { backgroundColor: "#0069d9" },
                   }}
-                  className="w-full text-white my-2 mt-5 font-semibold bg-[#060606] rounded-md p-4 text-center flex items-center justify-center dark:bg-white dark:text-black"
+                  className="w-full text-white my-2 mt-5 font-semibold bg-[#060606] rounded-md p-4 text-center flex items-center justify-center dark:bg-white dark:text-black transition-all duration-300 hover:scale-[1.02] hover:shadow-lg active:scale-95"
                 >
                   Login
                 </button>
diff --git a/client/src/components/Card/ProductCard.css b/client/src/components/Card/ProductCard.css
index 690585fd..ac69cefa 100644
--- a/client/src/components/Card/ProductCard.css
+++ b/client/src/components/Card/ProductCard.css
@@ -1,3 +1,115 @@
+.card-basic {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  width: 100%;
+  max-width: 280px;
+}
+
+.card-basic:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
+}
+
+.card-basic img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+  display: block;
+}
+
+.card-item-details {
+  padding: 14px 16px 16px;
+}
+
+.item-title h4 {
+  margin: 0 0 4px;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #222;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.item-author {
+  margin: 0 0 8px;
+  font-size: 0.85rem;
+  color: #777;
+  font-weight: 400;
+}
+
+.card-basic p {
+  margin: 0 0 10px;
+  font-size: 0.95rem;
+  color: #333;
+}
+
+.card-basic del {
+  color: #999;
+}
+
+.discount-on-card {
+  color: #e53935;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.card-button {
+  margin-top: 6px;
+}
+
+.card-icon-btn {
+  background: none;
+  border: 1px solid #ddd;
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.card-icon-btn:hover {
+  background: #fce4ec;
+  border-color: #e91e63;
+}
+
+.badge-on-card {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: #e53935;
+  color: #fff;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 4px;
+}
+
+.card-text-overlay-container {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+.card-text-overlay-container p {
+  color: #fff;
+  font-size: 1.1rem;
+  font-weight: 700;
+}
+
 .fa-heart
 {
     overflow: hidden;
@@ -17,4 +129,4 @@
 .added-to-wishlist-btn:hover
 {
     background-color: var(--grey);
-}
\ No newline at end of file
+}
diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index b1fcc4d4..0d1d5dba 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -35,7 +35,6 @@ const StyledAppBar = styled(AppBar)(({ darkMode }) => ({
 const Logo = styled("img")({
   width: "220px",
   height: "auto",
-  marginRight: "auto",
 });
 
 const StyledButton = styled(Button)(({ isActive }) => ({
@@ -54,7 +53,8 @@ const MenuContainer = styled("div")({
   display: "flex",
   alignItems: "center",
   gap: "10px",
-  marginLeft: "auto",
+  flex: 1,
+  justifyContent: "center",
 });
 
 const MobileMenu = styled("div")(({ open }) => ({
@@ -148,8 +148,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 onClick={handleMenuClick}
                 style={{ marginBottom: "20px", color: "#fff" }}
               >
-
- 
                 Close
               </IconButton>
               <StyledButton
@@ -159,7 +157,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 isActive={isActive("/")}
                 startIcon={<HomeIcon sx={{ fontSize: "1.5rem" }} />}
                 fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
+                style={{ marginBottom: "15px" }}
               >
                 Home
               </StyledButton>
@@ -175,7 +173,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 isActive={isActive("/shop")}
                 startIcon={<StoreIcon sx={{ fontSize: "1.5rem" }} />}
                 fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
+                style={{ marginBottom: "15px" }}
               >
                 Shop
               </StyledButton>
@@ -186,7 +184,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 isActive={isActive("/wishlist")}
                 startIcon={<FavoriteIcon sx={{ fontSize: "1.5rem" }} />}
                 fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
+                style={{ marginBottom: "15px" }}
               >
                 Wishlist
               </StyledButton>
@@ -197,7 +195,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 isActive={isActive("/cart")}
                 startIcon={<ShoppingCartIcon sx={{ fontSize: "1.5rem" }} />}
                 fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
+                style={{ marginBottom: "15px" }}
               >
                 Cart
               </StyledButton>
@@ -210,7 +208,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                   isActive={isActive("/orders")}
                   startIcon={<ShoppingBagIcon sx={{ fontSize: "1.5rem" }} />}
                   fullWidth
-                  style={{ marginBottom: "15px" }} // Add margin for spacing
+                  style={{ marginBottom: "15px" }}
                 >
                   Orders
                 </StyledButton>
@@ -224,7 +222,7 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 onClick={userLoggedIn ? handleLogout : null}
                 startIcon={<AccountCircleIcon sx={{ fontSize: "1.5rem" }} />}
                 fullWidth
-                style={{ marginBottom: "15px" }} // Add margin for spacing
+                style={{ marginBottom: "15px" }}
               >
                 {userLoggedIn ? "Logout" : "Login"}
               </StyledButton> 
@@ -232,7 +230,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
           </>
         ) : (
           <MenuContainer>
-            <SearchBar />
             <StyledButton
               color="inherit"
               component={Link}
@@ -240,18 +237,6 @@ function Navbar({ darkMode, toggleDarkMode }) {
               isActive={isActive("/")}
               startIcon={<HomeIcon sx={{ fontSize: "1.5rem" }} />}
             >
-                Home
-   </StyledButton>
-              
-         
-            <StyledButton
-              color="inherit"
-              component={Link}
-              to="/shop"
-              isActive={isActive("/shop")}
-              startIcon={<StoreIcon sx={{ fontSize: "1.5rem" }} />}
-            ></StyledButton>
-            <StyledButton color="inherit" component={Link} to="/" isActive={isActive('/')} startIcon={<HomeIcon sx={{ fontSize: '1.5rem' }} />}>
               Home
             </StyledButton>
             {userLoggedIn && (
@@ -259,7 +244,13 @@ function Navbar({ darkMode, toggleDarkMode }) {
                 Profile
               </StyledButton>
             )}
-            <StyledButton color="inherit" component={Link} to="/shop" isActive={isActive('/shop')} startIcon={<StoreIcon sx={{ fontSize: '1.5rem' }} />}>
+            <StyledButton
+              color="inherit"
+              component={Link}
+              to="/shop"
+              isActive={isActive("/shop")}
+              startIcon={<StoreIcon sx={{ fontSize: "1.5rem" }} />}
+            >
               Shop
             </StyledButton>
             <StyledButton
@@ -302,12 +293,14 @@ function Navbar({ darkMode, toggleDarkMode }) {
             >
               {userLoggedIn ? "Logout" : "Login"}
             </StyledButton>
+            <span style={{ flex: 1 }} />
+            <SearchBar />
             <Tooltip
               title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
             >
               <IconButton
                 onClick={toggleDarkMode}
-                style={{ marginLeft: "auto", marginRight: "10px" }}
+                style={{ marginLeft: "10px", marginRight: "10px" }}
               >
                 <img
                   src={darkMode ? sunIcon : moonIcon}
diff --git a/client/src/components/SearchBar.js b/client/src/components/SearchBar.js
index e48206e0..8626c706 100644
--- a/client/src/components/SearchBar.js
+++ b/client/src/components/SearchBar.js
@@ -57,8 +57,12 @@ const SearchBar = () => {
           width: "100%",
           padding: "10px",
           borderRadius: "5px",
-          border: "1px solid #ccc",
+          border: "2px solid #8B5CF6",
+          outline: "none",
+          transition: "border-color 0.3s, box-shadow 0.3s",
         }}
+        onFocus={(e) => { e.target.style.borderColor = "#6D28D9"; e.target.style.boxShadow = "0 0 0 3px rgba(139,92,246,0.2)"; }}
+        onBlur={(e) => { e.target.style.borderColor = "#8B5CF6"; e.target.style.boxShadow = "none"; }}
       />
       {showSuggestions && filteredData.length > 0 && (
         <ul className="list-none p-0 border border-[#ccc] rounded mt-3 max-h-[150px] overflow-y-auto"
diff --git a/client/src/validations/validation.js b/client/src/validations/validation.js
index bafcbbef..4e28d165 100644
--- a/client/src/validations/validation.js
+++ b/client/src/validations/validation.js
@@ -9,7 +9,7 @@ export const loginValidation = yup.object().shape({
 });
 
 export const registerValidation = yup.object().shape({
-  name: yup.string().required("Name is required"),
+  name: yup.string().min(2, "Name must be at least 2 characters").max(50, "Name must not exceed 50 characters").required("Name is required"),
   email: yup
     .string()
     .email("Email format invalid")