diff --git a/src/App.jsx b/src/App.jsx
index a92239f..6832ff8 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,12 @@
 import "./App.css";
 import Navbar from "./components/Navbar";
 import Home from "./pages/Home";
+import Events from "./pages/Events"; // Import the Events component
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Footer from "./pages/Footer";
 import React from "react";
 import BarLoader from "react-spinners/BarLoader ";
+
 function App() {
   const [loading, setLoading] = React.useState(false);
 
@@ -14,14 +16,20 @@ function App() {
       setLoading(false);
     }, 5000);
   }, []);
+
   return (
     <div className="App">
-      { (
+      {loading ? (
+        <div>
+          <BarLoader />
+        </div>
+      ) : (
         <div>
           <Router>
             <Navbar />
             <Routes>
               <Route path="/" element={<Home />} />
+              <Route path="/events" element={<Events />} /> {/* Add this line */}
             </Routes>
             <Footer />
           </Router>
diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 5bb492d..527f064 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { ImBullhorn } from "react-icons/im";
-
+import styles from "../styles/Blogs.module.css";
 import EventImg from "../assets/images/event.jpg";
-import styles from "../styles/Event.module.css";
+import FAQ from "./FAQ"; // Import the FAQ component at the beginning of the file
 
 const Events = () => {
   return (
@@ -33,6 +33,9 @@ const Events = () => {
         <div>
           <a>Ongoing Event</a>
         </div>
+
+        {/* Rendering the FAQ component here */}
+        <FAQ />
       </div>
     </div>
   );
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 0c25f2f..0fa4ae3 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -19,22 +19,22 @@ const Navbar = () => {
           setActive(false);
         }}
       >
-        <Link to="/resources">
-          <li>Resources</li>
-        </Link>
-        <Link to="/events">
-          <li>Events</li>
-        </Link>
-        <Link to="/blogs">
-          <li>Blogs</li>
-        </Link>
-        <Link to="/community">
-          <li>Community</li>
-        </Link>
+        <li>
+          <Link to="/resources">Resources</Link>
+        </li>
+        <li>
+          <Link to="/events">Events</Link>
+        </li>
+        <li>
+          <Link to="/blogs">Blogs</Link>
+        </li>
+        <li>
+          <Link to="/community">Community</Link>
+        </li>
         {isAuthenticated && (
-          <Link to="/partner">
-            <li>Partner with us</li>
-          </Link>
+          <li>
+            <Link to="/partner">Partner with us</Link>
+          </li>
         )}
       </ul>
       <button
@@ -43,7 +43,7 @@ const Navbar = () => {
           setActive(!active);
         }}
       >
-        {active ? <FaTimes></FaTimes> : <FaBars />}
+        {active ? <FaTimes /> : <FaBars />}
       </button>
     </div>
   );
diff --git a/src/styles/Navbar.module.css b/src/styles/Navbar.module.css
index f3f9aa3..0727d01 100644
--- a/src/styles/Navbar.module.css
+++ b/src/styles/Navbar.module.css
@@ -12,7 +12,7 @@
   justify-content: space-around;
   align-items: center;
   height: 75px;
-  background-color: var(--primary-color);
+  background-color:#5C4CE4
 }
 
 /* .navbar .navLeft {