diff --git a/components/elements/FAQAccordion.js b/components/elements/FAQAccordion.js
index f7cc29e..943e73a 100644
--- a/components/elements/FAQAccordion.js
+++ b/components/elements/FAQAccordion.js
@@ -2,61 +2,69 @@
 import { useState, useRef, useEffect } from 'react';
 
 export default function FAQAccordion({ faqs = [], className = '' }) {
-    const [activeIndex, setActiveIndex] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
     const refs = useRef([]);
 
     useEffect(() => {
         refs.current = refs.current.slice(0, faqs.length);
     }, [faqs]);
 
+    useEffect(() => {
+        if (faqs.length > 0) {
+            setTimeout(() => {
+                setActiveIndex(0);
+            }, 100);
+        }
+    }, [faqs.length]);
+
     if (!faqs || faqs.length === 0) return null;
 
     return (
         <section className={`faq-section ${className}`}>
-                <div className="sec-title">
-                    {/* <div className="title">FAQ</div> */}
-                    <h2>FAQs</h2>
-                    {/* <div className="separate"></div> */}
-                </div>
+            <div className="sec-title">
+                {/* <div className="title">FAQ</div> */}
+                <h2>FAQs</h2>
+                {/* <div className="separate"></div> */}
+            </div>
 
-                <div className="faq-wrapper">
-                    {faqs.map((item, i) => (
-                        <div
-                            key={i}
-                            className={`faq-block ${activeIndex === i ? 'active' : ''}`}
+            <div className="faq-wrapper">
+                {faqs.map((item, i) => (
+                    <div
+                        key={i}
+                        className={`faq-block ${activeIndex === i ? 'active' : ''}`}
+                    >
+                        <button
+                            type="button"
+                            className="faq-question"
+                            onClick={() => setActiveIndex(activeIndex === i ? null : i)}
+                            aria-expanded={activeIndex === i}
+                            aria-controls={`faq-answer-${i}`}
                         >
-                            <button
-                                type="button"
-                                className="faq-question"
-                                onClick={() => setActiveIndex(activeIndex === i ? null : i)}
-                                aria-expanded={activeIndex === i}
-                                aria-controls={`faq-answer-${i}`}
-                            >
-                                <h3>{item.q}</h3>
-                                <span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
-                            </button>
+                            <h3>{item.q}</h3>
+                            <span className={`icon fa ${activeIndex === i ? 'fa-angle-up' : 'fa-angle-down'}`} />
+                        </button>
 
-                            <div
-                                id={`faq-answer-${i}`}
-                                ref={(el) => (refs.current[i] = el)}
-                                className="faq-answer"
-                                style={{
-                                    maxHeight:
-                                        activeIndex === i
-                                            ? `${refs.current[i]?.scrollHeight || 0}px`
-                                            : "0px",
-                                    overflow: "hidden",
-                                    transition: "max-height 0.4s ease",
-                                }}
-                                aria-hidden={activeIndex !== i}
-                            >
-                                <div className="faq-answer-inner">
-                                    <p dangerouslySetInnerHTML={{ __html: item.a }} />
-                                </div>
+                        <div
+                            id={`faq-answer-${i}`}
+                            ref={(el) => (refs.current[i] = el)}
+                            className="faq-answer"
+                            style={{
+                                maxHeight:
+                                    activeIndex === i
+                                        ? "1000px"
+                                        : "0px",
+                                overflow: "hidden",
+                                transition: "max-height 0.4s ease",
+                            }}
+                            aria-hidden={activeIndex !== i}
+                        >
+                            <div className="faq-answer-inner">
+                                <p dangerouslySetInnerHTML={{ __html: item.a }} />
                             </div>
                         </div>
-                    ))}
-                </div>
+                    </div>
+                ))}
+            </div>
         </section>
     );
 }
diff --git a/utils/constant.utils.js b/utils/constant.utils.js
index 5241ae8..63e82ca 100644
--- a/utils/constant.utils.js
+++ b/utils/constant.utils.js
@@ -5607,8 +5607,8 @@ When you post about your event, mention that Sixty5 Street is supporting it. Tag
 <div class="sec-title new mt-5">
     <h3>Worth the Swing By?</h3>
 </div>
-<p class="mb-5">Yeah, if you're craving casual takeout Brampton delivers on flavor and reliability. Not perfect, but beats defaults. Next late drive from Bramalea, hit <a href="https://sixty5street.com/" target="_blank">Sixty5 Street</a>—order ahead, skip the line.</p>
-<p>I've ordered here more than once. Sticks in rotation.</p>
+<p class="mb-3">Yeah, if you're craving casual takeout Brampton delivers on flavor and reliability. Not perfect, but beats defaults. Next late drive from Bramalea, hit <a href="https://sixty5street.com/" target="_blank">Sixty5 Street</a>—order ahead, skip the line.</p>
+<p class="mb-5">I've ordered here more than once. Sticks in rotation.</p>
 `,
         "faqs": [
             {