diff --git a/site/components/Faq.js b/site/components/Faq.js
index 7cac793..c514266 100644
--- a/site/components/Faq.js
+++ b/site/components/Faq.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { HelpCircle, Info, CheckCircle, XCircle } from 'lucide-react';
+import { HelpCircle, Info, CheckCircle, Settings } from 'lucide-react';
 
 const Faq = () => {
   const [activeIndex, setActiveIndex] = useState(null);
@@ -20,7 +20,7 @@ const Faq = () => {
     },
     {
       question: 'How can I create a BioTree?',
-      answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It’s quick and easy!',
+      answer: 'To create your BioTree, simply sign up, create an account, and start adding your social media links to your profile. It\'s quick and easy!',
       icon: <Info className="w-8 h-8 text-green-600" />
     },
     {
@@ -31,7 +31,7 @@ const Faq = () => {
     {
       question: 'Can I customize my BioTree?',
       answer: 'Absolutely! You can customize the appearance of your BioTree by selecting from various themes and layouts to match your personal style or brand.',
-      icon: <CheckCircle className="w-8 h-8 text-yellow-600" />
+      icon: <Settings className="w-8 h-8 text-purple-600" />
     }
   ];
 
@@ -40,44 +40,45 @@ const Faq = () => {
       <h2 className="text-4xl font-extrabold text-center mb-10 text-gray-800">Frequently Asked Questions</h2>
       <div className="space-y-8">
         {faqData.map((faq, index) => (
-          <div 
-            key={index} 
-            className={`faq-item-container bg-white rounded-lg shadow-lg p-6 flex transition-transform transform 
-            cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out 
-            ${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
-            onMouseEnter={() => handleMouseEnter(index)}
-            onMouseLeave={handleMouseLeave}
-          >
-            <div className="flex items-start mb-2 space-x-4">
-              <div className="flex-shrink-0">
-                {/* Inline style for 360-degree rotation */}
-                <span
-                  style={{
-                    display: 'inline-block',
-                    transition: 'transform 0.3s ease-in-out',
-                    transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
-                  }}
-                >
-                  {faq.icon}
-                </span>
-              </div>
-              <div>
-                <h3 className="text-2xl font-semibold text-gray-800">{faq.question}</h3>
-              </div>
-            </div>
-            <div
-              className={`overflow-hidden transition-all duration-700 ease-in-out 
-                ${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
-              style={{ height: activeIndex === index ? 'auto' : '0px' }}
-            >
-              <p className="text-gray-600 leading-relaxed transition-opacity duration-500">{faq.answer}</p>
-            </div>
-            <span className="text-sm text-gray-500 mt-2">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
-          </div>
+          <div
+  key={index}
+  className={`faq-item-container bg-white rounded-lg shadow-lg p-6 transition-transform transform
+  cursor-pointer hover:scale-105 hover:shadow-xl hover:bg-gray-50 duration-300 ease-in-out
+  ${activeIndex === index ? 'bg-gray-100 border border-gray-300' : ''}`}
+  onMouseEnter={() => handleMouseEnter(index)}
+  onMouseLeave={handleMouseLeave}
+  onClick={() => setActiveIndex(activeIndex === index ? null : index)} // Add this line
+>
+  <div className="flex items-start mb-4 space-x-4 justify-between">
+  <div className='flex'>
+    <div className="flex-shrink-0">
+      <span
+        style={{
+          display: 'inline-block',
+          transition: 'transform 0.3s ease-in-out',
+          transform: activeIndex === index ? 'rotate(360deg)' : 'rotate(0deg)',
+        }}
+      >
+        {faq.icon}
+      </span>
+    </div>
+   
+      <h3 className="text-2xl font-semibold text-gray-800 ml-4">{faq.question}</h3>
+    </div>
+    <span className="text-sm text-gray-500 mt-2 ml-auto">{activeIndex === index ? 'Hide' : 'Show'} Answer</span>
+  </div>
+  <div
+    className={`overflow-hidden transition-all duration-700 ease-in-out
+      ${activeIndex === index ? 'max-h-[200px] opacity-100' : 'max-h-0 opacity-0'}`}
+    style={{ height: activeIndex === index ? 'auto' : '0px' }}
+  >
+    <p className="text-gray-600 leading-relaxed transition-opacity duration-500 ml-12">{faq.answer}</p>
+  </div>
+</div>
         ))}
       </div>
     </div>
   );
 };
 
-export default Faq;
+export default Faq;
\ No newline at end of file