diff --git a/client/package-lock.json b/client/package-lock.json
index 20bac142..694951ee 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -17925,6 +17925,9 @@
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
       "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+
+      "license": "Apache-2.0",
+
       "peer": true,
       "bin": {
         "tsc": "bin/tsc",
diff --git a/client/src/Pages/Home.jsx b/client/src/Pages/Home.jsx
index 5ac19dfc..26df3cd7 100644
--- a/client/src/Pages/Home.jsx
+++ b/client/src/Pages/Home.jsx
@@ -39,6 +39,42 @@ const Home = () => {
           <SearchBar onSearch={handleSearch} />
 
 
+      {/* Book Categories Section */}
+      <section className="container mx-auto my-8">
+        <h2 className="text-3xl font-bold mb-6 text-gray-800">Book Categories</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Romance</h3>
+            <p className="text-gray-600">Explore our collection of romantic novels.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Action</h3>
+            <p className="text-gray-600">Dive into thrilling action-packed stories.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer  hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Thriller</h3>
+            <p className="text-gray-600">Get your adrenaline pumping with our thrillers.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Fiction</h3>
+            <p className="text-gray-600">Discover imaginative and captivating fiction.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Tech</h3>
+            <p className="text-gray-600">Stay updated with the latest in technology.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Philosophy</h3>
+            <p className="text-gray-600">Dive deep into philosophical thoughts and ideas.</p>
+          </div>
+          <div className="bg-white rounded-lg shadow-lg p-6 slide-in hover:cursor-pointer hover:bg-gray-300 hover:duration-500 hover:scale-105 hover:opacity-90">
+            <h3 className="text-xl font-bold mb-2">Manga</h3>
+            <p className="text-gray-600">Explore our extensive collection of Manga.</p>
+          </div>
+        </div>
+      </section>
+
+
           {/* Image Container */}
           <header className="bg-white shadow">
             <div className="container mx-auto p-6">