diff --git a/package-lock.json b/package-lock.json
index 40226ad..cb9185e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,10 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
+        "react-slick": "^0.30.2",
         "react-snowfall": "^1.2.1",
         "react-tsparticles": "^2.12.2",
+        "slick-carousel": "^1.8.1",
         "tsparticles-engine": "^2.12.0",
         "tsparticles-preset-snow": "^2.12.0",
         "web-vitals": "^2.1.4"
@@ -7237,6 +7239,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
     "node_modules/entities": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -12000,6 +12007,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -12098,6 +12111,14 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -15045,6 +15066,22 @@
         }
       }
     },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-snowfall": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-1.2.1.tgz",
@@ -15298,6 +15335,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -15916,6 +15958,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
@@ -16173,6 +16223,11 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
diff --git a/package.json b/package.json
index 6b4ca50..521fab1 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,10 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-slick": "^0.30.2",
     "react-snowfall": "^1.2.1",
     "react-tsparticles": "^2.12.2",
+    "slick-carousel": "^1.8.1",
     "tsparticles-engine": "^2.12.0",
     "tsparticles-preset-snow": "^2.12.0",
     "web-vitals": "^2.1.4"
diff --git a/src/App.js b/src/App.js
index 1650167..49ba292 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import Chapters from "./components/Chapters";
 import "./App.css";
 import Resources from "./components/Resources";
 import AboutUs from "./components/AboutUs";
+import Chronicle from './components/Chronicle';
 import AppLayout from "./components/AppLayout";
 import Preloader from "./components/Preloader.js";
 import 'aos/dist/aos.css';
@@ -32,6 +33,7 @@ const App = () => {
             <Route path="/api/resources" element={<Resources />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/api/aboutus" element={<AboutUs />} />
+            <Route path='/chronicle' element={<Chronicle/>}/>
           </Route>
           <Route path="*" element={<h1>404 Not Found</h1>} />
         </Routes>
diff --git a/src/components/Carousel_Images/Mahabharat/Karna.jpg b/src/components/Carousel_Images/Mahabharat/Karna.jpg
new file mode 100644
index 0000000..45e53bc
Binary files /dev/null and b/src/components/Carousel_Images/Mahabharat/Karna.jpg differ
diff --git a/src/components/Carousel_Images/Ramyana/JaiShreeRam.jpg b/src/components/Carousel_Images/Ramyana/JaiShreeRam.jpg
new file mode 100644
index 0000000..f169047
Binary files /dev/null and b/src/components/Carousel_Images/Ramyana/JaiShreeRam.jpg differ
diff --git a/src/components/Carousel_Images/Ramyana/ShreeRam.jpg b/src/components/Carousel_Images/Ramyana/ShreeRam.jpg
new file mode 100644
index 0000000..516324c
Binary files /dev/null and b/src/components/Carousel_Images/Ramyana/ShreeRam.jpg differ
diff --git a/src/components/Chronicle.jsx b/src/components/Chronicle.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 3851490..bb90a77 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -43,6 +43,14 @@ const Navbar = () => {
                             Resources
                         </Link>
                     </li>
+                    <li>
+                        <Link
+                            to="/api/chronicle"
+                            className="text-[1rem] text-gray-900 font-bold text-decoration-none hover:text-blue-400"
+                        >
+                            Chronicles
+                        </Link>
+                    </li>
                     <li>
                         <Link
                             to="/api/aboutus"
@@ -95,6 +103,13 @@ const Navbar = () => {
                     >
                         Resources
                     </Link>
+                    <Link
+                        to="/api/chronicle"
+                        className="text-[1.5rem] text-white font-bold hover:text-yellow-300 transition duration-300"
+                        onClick={() => setMenuOpen(false)}
+                    >
+                        Chronicles
+                    </Link>
                     <Link
                         to="/api/aboutus"
                         className="text-[1.5rem] text-white font-bold hover:text-yellow-300 transition duration-300"