diff --git a/src/components/faqs/faqs.tsx b/src/components/faqs/faqs.tsx
index 5b3465c4..502c0393 100644
--- a/src/components/faqs/faqs.tsx
+++ b/src/components/faqs/faqs.tsx
@@ -44,7 +44,7 @@ const faqData = [
 
 const FAQs: React.FC = () => {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const { colorMode, isDark } = useSafeColorMode();
+  const { isDark } = useSafeColorMode();
 
   const toggleAccordion = (index: number) => {
     setActiveIndex(activeIndex === index ? null : index);
@@ -65,12 +65,12 @@ const FAQs: React.FC = () => {
         padding: "2rem 0",
       }}
     >
-      <div className="mx-auto px-2 sm:px-4 lg:px-6">
+      <div className="mx-auto px-2 sm:px-4 lg:max-w-6xl lg:px-10 xl:max-w-7xl xl:px-14">
         <div className="flex flex-col items-center justify-center gap-x-8 gap-y-12 lg:flex-row lg:justify-between xl:gap-28">
           <div className="w-full">
-            <div className="mb-8 lg:mb-16">
+            <div className="mb-8 text-center lg:mb-16">
               <h6
-                className="mb-2 text-center text-lg font-medium lg:text-left"
+                className="mb-2 text-center text-lg font-medium"
                 style={{
                   color: isDark ? "#a78bfa" : "#8b5cf6",
                   fontWeight: 600,
@@ -79,7 +79,7 @@ const FAQs: React.FC = () => {
                 FAQs
               </h6>
               <h2
-                className={`text-center text-4xl font-bold lg:text-left ${
+                className={`text-center text-4xl font-bold ${
                   isDark ? "text-gray-100" : "text-gray-900"
                 } leading-snug`}
               >
@@ -88,7 +88,7 @@ const FAQs: React.FC = () => {
               <p
                 className={`${
                   isDark ? "text-gray-400" : "text-gray-600"
-                } text-center lg:text-left`}
+                } mx-auto text-center`}
               >
                 Find answers to the most common questions about recode hive.
               </p>
@@ -96,70 +96,105 @@ const FAQs: React.FC = () => {
 
             {/* Accordion Masonry Columns to prevent sibling expansion */}
             <div className="columns-1 md:columns-2 md:gap-x-6">
-              {faqData.map((faq, index) => (
-                <motion.div
-                  key={index}
-                  className="accordion mb-4 h-fit break-inside-avoid border-gray-200 pb-4 dark:border-gray-700"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <button
-                    className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between rounded-lg p-4 text-lg font-medium transition-all duration-300 focus:outline-none ${
-                      isDark
-                        ? "text-gray-200 hover:text-indigo-400"
-                        : "text-gray-700 hover:text-indigo-600"
-                    }`}
+              {faqData.map((faq, index) => {
+                const isExpanded = activeIndex === index;
+                const panelId = `faq-panel-${index}`;
+                const triggerId = `faq-trigger-${index}`;
+
+                return (
+                  <motion.div
+                    key={index}
+                    className="accordion mb-4 h-fit break-inside-avoid overflow-hidden rounded-xl border pb-0 shadow-sm transition-all duration-300 dark:border-gray-700"
                     style={{
                       background: isDark
-                        ? "rgba(30, 27, 75, 0.6)"
-                        : "rgba(237, 233, 254, 0.6)",
-                      border: isDark
-                        ? "1px solid rgba(139, 92, 246, 0.2)"
-                        : "1px solid rgba(139, 92, 246, 0.3)",
-                      backdropFilter: "blur(10px)",
-                    }}
-                    onClick={() => toggleAccordion(index)}
-                  >
-                    {faq.question}
-                    <motion.span
-                      className="transform transition-transform duration-300"
-                      animate={{ rotate: activeIndex === index ? 180 : 0 }}
-                    >
-                      <FiChevronDown size={22} />
-                    </motion.span>
-                  </button>
-                  <motion.div
-                    className="accordion-content overflow-hidden"
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{
-                      height: activeIndex === index ? "auto" : 0,
-                      opacity: activeIndex === index ? 1 : 0,
+                        ? "rgba(30, 27, 75, 0.55)"
+                        : "rgba(237, 233, 254, 0.7)",
+                      borderColor: isDark
+                        ? "rgba(139, 92, 246, 0.25)"
+                        : "rgba(139, 92, 246, 0.28)",
+                      backdropFilter: "blur(12px)",
                     }}
-                    transition={{ duration: 0.3, ease: "easeInOut" }}
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.3 }}
                   >
-                    <div
-                      className={`mt-2 text-base transition-colors duration-200 ${
-                        isDark ? "text-gray-300" : "text-gray-900"
+                    <button
+                      id={triggerId}
+                      aria-expanded={isExpanded}
+                      aria-controls={panelId}
+                      className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between p-4 text-left text-lg font-medium transition-all duration-300 focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-indigo-400 dark:focus-visible:ring-offset-gray-900 ${
+                        isDark
+                          ? "text-gray-200 hover:text-indigo-300"
+                          : "text-gray-700 hover:text-indigo-700"
                       }`}
                       style={{
-                        color: isDark ? "#d1d5db" : "#111827",
+                        background: isExpanded
+                          ? isDark
+                            ? "linear-gradient(135deg, rgba(99,102,241,0.24), rgba(139,92,246,0.16))"
+                            : "linear-gradient(135deg, rgba(224,231,255,0.95), rgba(237,233,254,0.92))"
+                          : isDark
+                            ? "linear-gradient(135deg, rgba(67,56,202,0.18), rgba(76,29,149,0.1))"
+                            : "linear-gradient(135deg, rgba(238,242,255,0.85), rgba(243,232,255,0.78))",
+                        boxShadow: isExpanded
+                          ? isDark
+                            ? "inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -16px rgba(99,102,241,0.7)"
+                            : "inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 26px -18px rgba(99,102,241,0.55)"
+                          : isDark
+                            ? "inset 0 1px 0 rgba(255,255,255,0.08)"
+                            : "inset 0 1px 0 rgba(255,255,255,0.8)",
+                        borderBottom: isExpanded
+                          ? isDark
+                            ? "1px solid rgba(139, 92, 246, 0.35)"
+                            : "1px solid rgba(139, 92, 246, 0.3)"
+                          : "1px solid transparent",
                       }}
-                      dangerouslySetInnerHTML={{
-                        __html: faq.answer
-                          .replace(
-                            /<strong>/g,
-                            `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
-                          )
-                          .replace(
-                            /<a /g,
-                            `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
-                          ),
+                      onClick={() => toggleAccordion(index)}
+                    >
+                      {faq.question}
+                      <motion.span
+                        className="transform transition-transform duration-300"
+                        animate={{ rotate: isExpanded ? 180 : 0 }}
+                      >
+                        <FiChevronDown size={22} />
+                      </motion.span>
+                    </button>
+                    <motion.div
+                      id={panelId}
+                      aria-labelledby={triggerId}
+                      className="accordion-content overflow-hidden"
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{
+                        height: isExpanded ? "auto" : 0,
+                        opacity: isExpanded ? 1 : 0,
                       }}
-                    />
+                      transition={{ duration: 0.3, ease: "easeInOut" }}
+                    >
+                      <div
+                        className={`border-t px-4 pb-4 pt-3 text-base transition-colors duration-200 ${
+                          isDark ? "text-gray-300" : "text-gray-900"
+                        }`}
+                        style={{
+                          borderColor: isDark
+                            ? "rgba(139, 92, 246, 0.22)"
+                            : "rgba(139, 92, 246, 0.24)",
+                          color: isDark ? "#d1d5db" : "#111827",
+                        }}
+                        dangerouslySetInnerHTML={{
+                          __html: faq.answer
+                            .replace(
+                              /<strong>/g,
+                              `<strong style="color: ${isDark ? "#f3f4f6" : "#000000"}; font-weight: 600;">`,
+                            )
+                            .replace(
+                              /<a /g,
+                              `<a style="color: ${isDark ? "#818cf8" : "#4f46e5"};" `,
+                            ),
+                        }}
+                      />
+                    </motion.div>
                   </motion.div>
-                </motion.div>
-              ))}
+                );
+              })}
             </div>
           </div>
         </div>
diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index d9e5be27..ede10889 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -21,7 +21,7 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
   avatar,
   link,
 }) => {
-  const { colorMode, isDark } = useSafeColorMode();
+  const { isDark } = useSafeColorMode();
 
   const formatLinkDisplay = (url: string) => {
     try {
@@ -57,8 +57,9 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
         {/* Header */}
         <div className="mb-6 flex items-center gap-4">
           <div className="relative">
-            <Avatar className="h-16 w-16 border-2 border-gradient-to-r from-purple-500 to-pink-500">
-              <AvatarImage src={avatar} className="object-contain" />
+            <div className="pointer-events-none absolute -inset-1 rounded-full bg-gradient-to-br from-purple-500/35 via-fuchsia-500/25 to-blue-500/35 blur-md" />
+            <Avatar className="relative z-10 h-20 w-20 overflow-hidden border border-white/70 bg-white/70 shadow-[0_10px_30px_-12px_rgba(147,51,234,0.7)] ring-2 ring-purple-300/50">
+              <AvatarImage src={avatar} alt={`${name}'s avatar`} className="h-full w-full scale-[3] object-cover object-center" />
               <AvatarFallback className="bg-gradient-to-br from-purple-500 to-pink-500 text-white font-semibold">
                 {name.charAt(0)}
               </AvatarFallback>