diff --git a/client/src/App.jsx b/client/src/App.jsx
index 951cf40..95f68d0 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -35,6 +35,7 @@ import ForgotPassword from "./component/ForgotPassword";
 import ResetPassword from "./component/ResetPassword";
 import VerifyEmail from "./component/Verify";
 import NotFound from "./component/NotFound";
+import Faq from './component/Faq';
 import ProgressBar from "./component/ProgressBar/ProgressBar";
 
 import Cursor from './component/Cursor';
@@ -145,6 +146,10 @@ function App() {
                 <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/blog' element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+
+                <Route exact path='/faq' element={<Faq mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+                
+
                 <Route exact path='/collab' element={<Collab mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 {/* <Route exact path='/myprofile' element={<ProtectedRoute loggedin={islogged}><MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} /> */}
                 <Route exact path='/ai' element={<Ai mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
diff --git a/client/src/component/Faq.jsx b/client/src/component/Faq.jsx
new file mode 100644
index 0000000..2797bb9
--- /dev/null
+++ b/client/src/component/Faq.jsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import '../css/Faq.css';
+
+const FAQ = () => {
+  const [openIndex, setOpenIndex] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(5); // Initially show 5 FAQs
+
+  const toggleAnswer = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  const loadMoreFAQs = () => {
+    setVisibleCount((prevCount) => prevCount + 2); // Load 2 more FAQs
+  };
+
+  const faqs = [
+    {
+      question: "What is BitBox?",
+      answer: "BitBox is a user-friendly platform that simplifies version control and collaboration for developers.",
+    },
+    {
+      question: "How does BitBox enhance collaboration?",
+      answer: "BitBox offers intuitive tools that enable both solo programmers and large teams to manage projects efficiently.",
+    },
+    {
+      question: "How do I get started with BitBox?",
+      answer: "You can sign up for an account on BitBox and start managing your projects right away.",
+    },
+    {
+      question: "Is BitBox compatible with modern development workflows?",
+      answer: "Yes, BitBox seamlessly integrates with modern development workflows, providing fast and reliable performance.",
+    },
+    {
+      question: "How can I contact support if I need help?",
+      answer: "You can reach out to support through the 'Contact Us' page or by emailing support@example.com.",
+    },
+    {
+      question: "What programming languages does BitBox support?",
+      answer: "BitBox supports a wide range of programming languages including Python, Java, JavaScript, and more.",
+    },
+    {
+      question: "Are there any tutorials available for BitBox?",
+      answer: "Yes, we offer comprehensive tutorials and documentation to help users get the most out of BitBox.",
+    },
+    {
+      question: "Can I use BitBox for open-source projects?",
+      answer: "Absolutely! BitBox is designed to support both open-source and private projects.",
+    },
+    {
+      question: "What are the system requirements for using BitBox?",
+      answer: "BitBox is a web-based platform, so you only need a modern web browser and an internet connection.",
+    },
+    {
+      question: "Is there a mobile app for BitBox?",
+      answer: "Currently, BitBox does not have a dedicated mobile app, but the platform is mobile-friendly and accessible via web browsers.",
+    },
+  ];
+
+  return (
+    <div className="faq-container">
+      <h2>Frequently Asked Questions</h2>
+      <div className="faq-list">
+        {faqs.slice(0, visibleCount).map((faq, index) => (
+          <div key={index} className="faq-card">
+            <h4 
+              className="faq-question" 
+              onClick={() => toggleAnswer(index)}
+              aria-expanded={openIndex === index}
+              aria-controls={`faq-answer-${index}`}
+              tabIndex="0"
+            >
+              {faq.question}
+            </h4>
+            {openIndex === index && (
+              <p id={`faq-answer-${index}`} className="faq-answer">
+                {faq.answer}
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+      {visibleCount < faqs.length && (
+        <button className="view-more" onClick={loadMoreFAQs}>
+          View More
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default FAQ;
diff --git a/client/src/component/Footer.jsx b/client/src/component/Footer.jsx
index 3f200fd..5405f56 100644
--- a/client/src/component/Footer.jsx
+++ b/client/src/component/Footer.jsx
@@ -199,8 +199,9 @@ const Footer = (props) => {
                                 <li className='nav-item'>
                                     <Link to='/blog'>Blog</Link>
                                 </li>
-                                <li className='nav-item'>
-                                    <Link to='/FAQ'>FAQ</Link>
+
+                                <li>
+                                    <Link to='/faq'>FAQ</Link>
                                 </li>
 
                             </ul>
diff --git a/client/src/css/Faq.css b/client/src/css/Faq.css
new file mode 100644
index 0000000..0e92737
--- /dev/null
+++ b/client/src/css/Faq.css
@@ -0,0 +1,72 @@
+.faq-container {
+    max-width: 700px;
+    margin: 40px auto;
+    padding: 30px;
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  }
+  
+  h2 {
+    margin-top: 60px;
+    text-align: center;
+    color: #333;
+    margin-bottom: 30px;
+    font-size: 2rem;
+    font-family: 'Arial', sans-serif;
+  }
+  
+  .faq-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+  
+  .faq-card {
+    background-color: #f7f7f7;
+    border-radius: 8px;
+    padding: 15px 20px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    border-left: 4px solid #01356d;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  }
+  .view-more {
+    margin-top: 1rem;
+    padding: 10px 20px;
+    background-color: #003064; /* Bootstrap primary color */
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    
+  }
+  
+  .view-more:hover {
+    background-color: #054486; /* Darker shade on hover */
+  }
+  
+  .faq-card:hover {
+    background-color: #f5faff;
+    transform: translateY(-3px);
+  }
+  
+  .faq-question {
+    cursor: pointer;
+    font-size: 1.1em;
+    color: #003a77;
+    margin: 0;
+    font-family: 'Arial', sans-serif;
+  }
+  
+  .faq-question:hover {
+    color: #0056b3;
+  }
+  
+  .faq-answer {
+    margin-top: 10px;
+    font-size: 0.95em;
+    color: #555;
+    line-height: 1.6;
+  }
+  
\ No newline at end of file