diff --git a/src/App.js b/src/App.js
index b6dd0f9..9bc7dc1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,12 +25,12 @@ import { ThemeProvider } from "./context/ThemeContext";
 import { Toaster } from "react-hot-toast";
 import ProtectedRoute from "./components/ProtectedRoute";
 import NotFoundPage from "./components/Error404";
+import ScrollButton from "./components/ScrollButton";
+import FAQ from "./components/FAQ";
 
-import ScrollButton from "./components/ScrollButton"; // Import the ScrollButton
-
+// Background Wrapper for applying different backgrounds
 function BackgroundWrapper({ children }) {
   const location = useLocation();
-
   return (
     <div
       className={`min-h-screen ${
@@ -44,6 +44,7 @@ function BackgroundWrapper({ children }) {
   );
 }
 
+// Main App Component
 export default function App() {
   return (
     <AuthProvider>
@@ -55,90 +56,22 @@ export default function App() {
               <Route path="/" element={<Home />} />
               <Route path="/login" element={<Login />} />
               <Route path="/register" element={<Register />} />
-              <Route
-                path="/dashboard"
-                element={
-                  <ProtectedRoute>
-                    <DashboardPage />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/profile"
-                element={
-                  <ProtectedRoute>
-                    <ProfilePage />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/qr-code"
-                element={
-                  <ProtectedRoute>
-                    <QRCodePage />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/support"
-                element={
-                  <ProtectedRoute>
-                    <Support />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/settings"
-                element={
-                  <ProtectedRoute>
-                    <Settings />
-                  </ProtectedRoute>
-                }
-              />
+              <Route path="/dashboard" element={<ProtectedRoute><DashboardPage /></ProtectedRoute>} />
+              <Route path="/profile" element={<ProtectedRoute><ProfilePage /></ProtectedRoute>} />
+              <Route path="/qr-code" element={<ProtectedRoute><QRCodePage /></ProtectedRoute>} />
+              <Route path="/support" element={<ProtectedRoute><Support /></ProtectedRoute>} />
+              <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
               <Route path="/more-info" element={<Moreinfo />} />
-              <Route
-                path="/image-qr-code"
-                element={
-                  <ProtectedRoute>
-                    <ImageQRCodeGenerator />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/social-media-qr"
-                element={
-                  <ProtectedRoute>
-                    <SocialMedia />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/bulk-qr-code"
-                element={
-                  <ProtectedRoute>
-                    <BulkQRCode />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/qr-scanner"
-                element={
-                  <ProtectedRoute>
-                    <QRScanner />
-                  </ProtectedRoute>
-                }
-              />
-              <Route
-                path="/pdf-qr-code"
-                element={
-                  <ProtectedRoute>
-                    <PdfQRCodeGenerator />
-                  </ProtectedRoute>
-                }
-              />
+              <Route path="/image-qr-code" element={<ProtectedRoute><ImageQRCodeGenerator /></ProtectedRoute>} />
+              <Route path="/social-media-qr" element={<ProtectedRoute><SocialMedia /></ProtectedRoute>} />
+              <Route path="/bulk-qr-code" element={<ProtectedRoute><BulkQRCode /></ProtectedRoute>} />
+              <Route path="/qr-scanner" element={<ProtectedRoute><QRScanner /></ProtectedRoute>} />
+              <Route path="/pdf-qr-code" element={<ProtectedRoute><PdfQRCodeGenerator /></ProtectedRoute>} />
+              <Route path="/faq" element={<FAQ />} />
               <Route path="*" element={<NotFoundPage />} />
             </Routes>
             <ScrollButton />
+            <FAQ />
           </BackgroundWrapper>
           <Toaster />
         </Router>
diff --git a/src/components/FAQ.js b/src/components/FAQ.js
new file mode 100644
index 0000000..78c4c49
--- /dev/null
+++ b/src/components/FAQ.js
@@ -0,0 +1,31 @@
+// src/components/FAQ.js
+import React, { useState } from "react";
+
+function FAQ() {
+  const [openIndex, setOpenIndex] = useState(null); // State to track which FAQ is open
+
+  const faqs = [
+    { question: "What is this app about?", answer: "This app provides QR code generation and scanning features." },
+    { question: "How do I generate a QR code?", answer: "Go to the QR Code page after logging in, and follow the instructions." },
+    { question: "Can I bulk generate QR codes?", answer: "Yes, our app supports bulk QR code generation." },
+    { question: "How do I switch between dark and light themes?", answer: "You can easily switch between dark and light themes by clicking the theme toggle button." },
+  ];
+
+  const toggleFAQ = (index) => {
+    setOpenIndex(openIndex === index ? null : index); // Toggle the open index
+  };
+
+  return (
+    <div className="faq-container">
+      <h2>Frequently Asked Questions</h2>
+      {faqs.map((faq, index) => (
+        <div className="faq-item" key={index} onClick={() => toggleFAQ(index)}>
+          <h3>{faq.question} <span>{openIndex === index ? "-" : "+"}</span></h3>
+          {openIndex === index && <p>{faq.answer}</p>} {/* Show answer if open */}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default FAQ;
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
index ca39a0d..a1ecf10 100644
--- a/src/css/tailwind.css
+++ b/src/css/tailwind.css
@@ -2,6 +2,50 @@
 @tailwind components;
 @tailwind utilities;
 
+.container_1 {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.accordion__wrapper {
+  padding: 1rem;
+}
+
+.accordion__title {
+  font-size: 2rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.accordion {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+
+.accordion__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background-color: #f9f9f9;
+  cursor: pointer;
+}
+
+.accordion__content {
+  padding: 1rem;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+
+.accordion__icon i {
+  transition: transform 0.3s ease;
+}
+
+
 svg.scan-region-highlight-svg {
     stroke: #3b82f6 !important;
     animation: none !important;
@@ -65,4 +109,47 @@ body {
     background-color: white !important;
     color: black !important;
     box-shadow: 0 0 0px 1000px white inset !important;
-  }
\ No newline at end of file
+  }
+
+.faq-item {
+    background-color: rgba(59, 130, 246, 0.8); /* Semi-transparent blue background */
+    border-radius: 5px; /* Rounded corners */
+    padding: 1rem; /* Padding inside the item */
+    margin: 0 auto; /* Center the item */
+    margin-bottom: 1rem; /* Space between items */
+    transition: background-color 0.3s; /* Smooth transition */
+    max-width: 600px; /* Set a max width for the items */
+}
+
+.faq-item:hover {
+    background-color: rgba(37, 99, 235, 0.8); /* Darker blue on hover */
+}
+
+.faq-item h3 {
+    cursor: pointer; /* Pointer cursor for questions */
+    display: flex; /* Flexbox for alignment */
+    justify-content: center; /* Center question text */
+    align-items: center; /* Center vertically */
+}
+
+.faq-item p {
+    margin: 0; /* Remove default margin */
+    padding-top: 0.5rem; /* Space above the answer */
+    text-align: center; /* Center align answer text */
+}
+
+/* FAQ Section Styles */
+.faq-container {
+    background: transparent; /* Make the background transparent to match the page */
+    color: white; /* Text color */
+    padding: 2rem; /* Padding around the FAQ section */
+    border-radius: 8px; /* Rounded corners */
+    margin-top: 2rem; /* Space above the FAQ section */
+    text-align: center; /* Center align text */
+}
+
+.faq-container h2 {
+    font-size: 2rem; /* Title size */
+    font-weight: bold; /* Title weight */
+    margin-bottom: 1rem; /* Space below the title */
+}