diff --git a/index.html b/index.html
index fc49ab1..993d974 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,7 @@
             <li><a href="./pages/about.html">About</a></li>
             <li><a href="./pages/contact.html">Contact</a></li>
             <li><a href="./pages/badges.html">Badges</a></li>
+            <li><a href="./pages/FAQ.html">FAQ</a></li>
           </ul>
         </nav>
       </div>
diff --git a/pages/FAQ.html b/pages/FAQ.html
new file mode 100644
index 0000000..4745c9c
--- /dev/null
+++ b/pages/FAQ.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Badges</title>
+    
+    <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+    <header>
+        <div class="header-container">
+            <div class="logo">
+                <img src="../Favicon/favicon-32x32.png" alt="Logo" />
+                <a href="/"><h1>Badge Website</h1></a>
+                
+            </div>
+            <nav class="nav-links">
+                <ul>
+                    <li><a  href="../index.html">Home</a></li>
+                    <li><a href="./about.html">About</a></li>
+                    <li><a href="./contact.html">Contact</a></li>
+                    <li><a href="./FAQ.html">FAQ</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <div class="faq">
+        <h2>Frequently Asked Questions</h2>
+        <ul class="accordion">
+           <li>
+               <input type="radio" name="accordion" id="first">
+               <label for="first">1.What is this badge website?</label>
+               <div class="content">
+                   <p>Our badge website is a cutting-edge platform designed to recognize and reward individuals for their achievements, skills, 
+                    and accomplishments, providing a unique opportunity to showcase expertise and enhance professional profiles.</p>
+               </div>
+           </li>
+           <li>
+               <input type="radio" name="accordion" id="second">
+               <label for="second">2.How do I earn badges?</label>
+               <div class="content">
+                   <p>Badges are earned by completing specific challenges, courses, 
+                    or achieving predetermined milestones, which demonstrate mastery over particular skills
+                     or knowledge areas, and are typically awarded upon successful completion of these requirements..</p>
+               </div>
+           </li>
+           <li>
+               <input type="radio" name="accordion" id="third">
+               <label for="third"> 3.What types of badges are available?</label>
+               <div class="content">
+                   <p> Our platform offers a comprehensive range of badges for programming languages, including Python, Java, JavaScript
+                    , C++,web devlopment,cloud and many others, allowing developers to demonstrate their expertise and proficiency in specific coding skills.</p>
+               </div>
+           </li>
+           <li>
+               <input type="radio" name="accordion" id="four">
+               <label for="four">4.How do I know which badges I'm eligible for?
+            </label>
+               <div class="content">
+                   <p>  Eligibility for badges is determined by reviewing the specific requirements and criteria listed on each badge
+                     page, and users can also contact our support team for personalized guidance and recommendations.
+                    .</p>
+               </div>
+           </li>
+           <li>
+               <input type="radio" name="accordion" id="fifth">
+               <label for="fifth">5.How do I claim a badge?</label>
+               <div class="content">
+                   <p>To claim a badge, simply click the "Claim Badge" button on the badge page, verify your eligibility, and follow the prompts to complete the claim process,
+                     which typically involves providing evidence or confirmation of achievement.</p>
+               </div>
+           </li>
+           <li>
+               <input type="radio" name="accordion" id="sixth">
+               <label for="sixth"> 6.if I'm experiencing issues claiming a badge.</label>
+               <div class="content">
+                   <p> If you encounter any issues claiming a badge, please contact our dedicated support team at 
+                    support@badgewebsite.com, providing detailed information about the problem, and we will promptly assist in resolving the matter.
+                </p>
+               </div>
+           </li>
+           <li>
+            <input type="radio" name="accordion" id="seven">
+            <label for="seven">7.Can I display badges on other platforms?</label>
+            <div class="content">
+                <p>Yes, our platform allows users to embed badges on other websites, social media profiles, 
+                    or blogs, using our customizable embed code, enabling seamless showcase of achievements..</p>
+            </div>
+        </li>
+       </ul>
+    </div>
+    <footer>
+        <div class="footer-text">
+          <p>
+            Follow us on
+            <a href="https://github.com/rajatuiwebdev/badge-website">Github</a> |
+            <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a>
+          </p>
+          <p>&copy; 2024 Rajat Rajput | All rights reserved</p>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/styles.css b/styles.css
index 5179299..2e7e76e 100644
--- a/styles.css
+++ b/styles.css
@@ -584,4 +584,69 @@ footer a {
   }
   
 
-}
\ No newline at end of file
+}
+<!--------FAQ------->
+
+.faq{
+  padding: 10px 12%;
+  text-align: center;
+  font-size: 18px;
+
+}
+
+
+
+.faq h2{
+  font-weight: 500;
+  font-size: 40px;
+  text-align: center;
+}
+.accordion{
+  margin: 60px auto;
+  width: 100%;
+  max-width: 750px;
+}
+.accordion li{
+  list-style: none;
+  width: 100%;
+  padding: 5px;
+}
+.accordion li label{
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  font-size: 18px;
+  font-weight: 500;
+  background: linear-gradient(300deg ,#00435f,#2786cf ,rgb(157, 48, 153));
+  /*background: #303030;*/
+  margin-bottom: 2px;
+  cursor: pointer;
+  position: relative;
+}
+label::after{
+  content: '+';
+  font-size: 34px;
+  position: absolute;
+  right: 20px;
+  transition: transform 0.5s;
+
+}
+input[type="radio"]{
+  display: none;
+}
+.accordion .content{
+  background: linear-gradient(300deg ,#00435f,#369ae6 ,rgb(164, 53, 161));
+ /* background: #303030;*/
+  text-align: left;
+  padding: 0 20px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s,padding 0.5s;
+}
+.accordion input[type="radio"]:checked + label + .content{
+  max-height: 600px;
+  padding: 30px 20px;
+}
+.accordion input[type="radio"]:checked + label::after{
+  transform: rotate(135deg);
+}
