diff --git a/src/pages/community/community.css b/src/pages/community/community.css
index d722d320..3eae2f56 100644
--- a/src/pages/community/community.css
+++ b/src/pages/community/community.css
@@ -81,8 +81,15 @@
 }
 
 @keyframes float {
-  0%, 100% { transform: translateY(0px) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(180deg); }
+
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
 }
 
 .container {
@@ -105,9 +112,22 @@
 }
 
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
-  40% { transform: translateY(-10px); }
-  60% { transform: translateY(-5px); }
+
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-10px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
 }
 
 .community-hero-title {
@@ -195,24 +215,27 @@
 }
 
 .contribution-sections {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+  /* tighter gap between cards */
 }
 
+
 /* Contribution Sections */
 .contribution-section {
   background: white;
-  border-radius: 20px;
-  padding: 40px;
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   border: 1px solid rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .contribution-section:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
 }
 
 [data-theme='dark'] .contribution-section {
@@ -225,6 +248,21 @@
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
 }
 
+.contribution-section.active {
+  border: 2px solid #8b5cf6;   
+  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); 
+  transition: box-shadow 0.3s ease, border 0.3s ease;
+}
+
+.contribution-section.selected {
+  border: 2px solid #8b5cf6;   
+  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
+  transition: box-shadow 0.3s ease, border 0.3s ease;
+  transform: translateY(30px)
+}
+
+
+
 /* Table of Contents Sidebar */
 .table-of-contents {
   position: sticky;
@@ -318,6 +356,27 @@
   color: #a78bfa;
 }
 
+.toc-item.active+.toc-item.active {
+  margin-top: -2px;
+  /* overlap borders */
+  border-top: 1px solid rgba(139, 92, 246, 0.3);
+  /* subtle divider */
+  border-radius: 0;
+  /* flatten middle items */
+}
+
+/* First active in a block keeps rounded top */
+.toc-item.active:first-child,
+.toc-item.active:not(:first-child):not(:last-child) {
+  border-radius: 8px 8px 0 0;
+}
+
+/* Last active in a block keeps rounded bottom */
+.toc-item.active:last-child,
+.toc-item.active+.toc-item:not(.active) {
+  border-radius: 0 0 8px 8px;
+}
+
 .toc-item-icon {
   font-size: 1rem;
   flex-shrink: 0;
@@ -331,7 +390,7 @@
   display: flex;
   align-items: center;
   gap: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .section-icon {
@@ -359,9 +418,9 @@
 }
 
 .section-description {
-  font-size: 1.1rem;
   color: #64748b;
-  margin-bottom: 32px;
+  font-size: 1rem;
+  margin-bottom: 20px;
   line-height: 1.6;
 }
 
@@ -372,15 +431,15 @@
 .section-items {
   list-style: none;
   padding: 0;
-  margin: 0 0 40px 0;
+  margin: 0 0 20px 0;
 }
 
 .section-item {
   display: flex;
   align-items: center;
   gap: 16px;
-  padding: 16px 0;
-  font-size: 1rem;
+  padding: 10px 0;
+  font-size: 0.95rem;
   color: #374151;
   border-bottom: 1px solid #f1f5f9;
 }
@@ -402,8 +461,8 @@
 
 .section-links {
   background: linear-gradient(135deg, #f8fafc, #f1f5f9);
-  border-radius: 16px;
-  padding: 32px;
+  border-radius: 12px;
+  padding: 20px;
   border: 1px solid #e2e8f0;
 }
 
@@ -431,22 +490,23 @@
 
 .links-container {
   display: flex;
-  gap: 16px;
+  gap: 12px;
   flex-wrap: wrap;
 }
 
 .resource-link {
   display: inline-flex;
   align-items: center;
-  padding: 12px 24px;
+  padding: 8px 16px;
   background: white;
   color: var(--link-color, #8b5cf6);
   text-decoration: none;
-  border-radius: 12px;
+  border-radius: 8px;
   font-weight: 600;
   border: 2px solid var(--link-color, #8b5cf6);
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  font-size: 0.9rem;
 }
 
 [data-theme='dark'] .resource-link {
@@ -468,7 +528,8 @@
 
 /* Thank You Section */
 .thank-you-section {
-  margin-top: 32px;
+  grid-column: 1 / -1;
+  margin-top: 40px;
   display: flex;
   justify-content: center;
 }
@@ -492,7 +553,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
+  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
   pointer-events: none;
 }
 
@@ -515,14 +576,35 @@
   animation-delay: var(--delay, 0s);
 }
 
-.thank-icon:nth-child(1) { --delay: 0s; }
-.thank-icon:nth-child(2) { --delay: 0.3s; }
-.thank-icon:nth-child(3) { --delay: 0.6s; }
+.thank-icon:nth-child(1) {
+  --delay: 0s;
+}
+
+.thank-icon:nth-child(2) {
+  --delay: 0.3s;
+}
+
+.thank-icon:nth-child(3) {
+  --delay: 0.6s;
+}
 
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
-  40% { transform: translateY(-10px); }
-  60% { transform: translateY(-5px); }
+
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-10px);
+  }
+
+  60% {
+    transform: translateY(-5px);
+  }
 }
 
 .thank-you-card h3 {
@@ -530,7 +612,7 @@
   font-weight: 800;
   margin: 0 0 8px 0;
   color: white;
-  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .thank-you-subtitle {
@@ -704,6 +786,7 @@
     gap: 12px;
   }
 
+
   .section-icon {
     width: 40px;
     height: 40px;
@@ -793,4 +876,4 @@
   .thank-you-content {
     padding: 0 20px 24px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
index 5a3d8250..0c6fed66 100644
--- a/src/pages/community/index.tsx
+++ b/src/pages/community/index.tsx
@@ -109,36 +109,73 @@ const tableOfContents = [
 ];
 
 export default function CommunityPage(): JSX.Element {
-  const [activeSection, setActiveSection] = useState<string>('how-you-can-contribute');
+  const [activeSections, setActiveSections] = useState<string[]>(['how-you-can-contribute']);
+  const [selectedSection, setSelectedSection] = useState<string | null>(null);
 
-  // Scroll tracking
   useEffect(() => {
     const handleScroll = () => {
       const sections = tableOfContents.map(item => item.id);
-      const scrollPosition = window.scrollY + 100;
+      const midpoint = window.innerHeight * 0.4;
+      const visible: string[] = [];
 
-      for (let i = sections.length - 1; i >= 0; i--) {
-        const element = document.getElementById(sections[i]);
-        if (element && element.offsetTop <= scrollPosition) {
-          setActiveSection(sections[i]);
-          break;
+      sections.forEach(id => {
+        const el = document.getElementById(id);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          if (rect.top <= midpoint && rect.bottom >= midpoint) {
+            visible.push(id);
+          }
+        }
+      });
+
+      if (visible.length === 1) {
+        const current = visible[0];
+        const element = document.getElementById(current);
+        if (element) {
+          const rowTop = element.offsetTop;
+          const siblings = sections.filter(id => {
+            const sib = document.getElementById(id);
+            return sib && sib.offsetTop === rowTop;
+          });
+          visible.push(...siblings.filter(id => id !== current));
+        }
+      }
+
+      if (visible.length > 0) {
+        setActiveSections(visible);
+        if (selectedSection && !visible.includes(selectedSection)) {
+          setSelectedSection(null);
         }
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
-    handleScroll(); // Initial check
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [selectedSection]);
+
 
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
 
   const scrollToSection = (sectionId: string) => {
     const element = document.getElementById(sectionId);
     if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const offset = 80;
+      const top = element.offsetTop - offset;
+      window.scrollTo({ top, behavior: "smooth" });
+      setSelectedSection(sectionId);
     }
   };
 
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+
   return (
     <Layout
       title="Hive Community"
@@ -146,219 +183,223 @@ export default function CommunityPage(): JSX.Element {
     >
       <div className="community-page">
         <Head>
-        <meta property="og:title" content="Hive Community - RecodeHive" />
-        <meta property="og:description" content="Join our thriving community of developers, designers, and creators." />
-      </Head>
+          <meta property="og:title" content="Hive Community - RecodeHive" />
+          <meta property="og:description" content="Join our thriving community of developers, designers, and creators." />
+        </Head>
+
+        <main className="community-page">
+          {/* Hero Section */}
+          <section className="community-hero">
+            <div className="community-hero-background">
+              <div className="hero-particle"></div>
+              <div className="hero-particle"></div>
+              <div className="hero-particle"></div>
+            </div>
+            <div className="container">
+              <motion.div
+                className="community-hero-content"
+                initial={{ opacity: 0, y: 30 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.8 }}
+              >
+                <div className="hero-icon">🐝</div>
+                <h1 className="community-hero-title">
+                  Welcome to Hive Community
+                </h1>
+                <p className="community-hero-description">
+                  Welcome to <strong>RecodeHive</strong> — a community built for everyone to{' '}
+                  <span className="highlight">learn</span>, <span className="highlight">share</span>, and{' '}
+                  <span className="highlight">grow</span>. Whether you're a{' '}
+                  <span className="highlight">developer 👨‍💻</span>, <span className="highlight">designer 🎨</span>, or just someone interested in
+                  exploring new ideas 💡, we're excited to have you here!
+                </p>
+              </motion.div>
+            </div>
+          </section>
 
-      <main className="community-page">
-        {/* Hero Section */}
-        <section className="community-hero">
-          <div className="community-hero-background">
-            <div className="hero-particle"></div>
-            <div className="hero-particle"></div>
-            <div className="hero-particle"></div>
-          </div>
-          <div className="container">
-            <motion.div
-              className="community-hero-content"
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.8 }}
-            >
-              <div className="hero-icon">🐝</div>
-              <h1 className="community-hero-title">
-                Welcome to Hive Community
-              </h1>
-              <p className="community-hero-description">
-                Welcome to <strong>RecodeHive</strong> — a community built for everyone to{' '}
-                <span className="highlight">learn</span>, <span className="highlight">share</span>, and{' '}
-                <span className="highlight">grow</span>. Whether you're a{' '}
-                <span className="highlight">developer 👨‍💻</span>, <span className="highlight">designer 🎨</span>, or just someone interested in
-                exploring new ideas 💡, we're excited to have you here!
-              </p>
-            </motion.div>
-          </div>
-        </section>
+          {/* How You Can Contribute Header */}
+          <section id="how-you-can-contribute" className="contribution-header">
+            <div className="container">
+              <motion.div
+                className="contribution-header-content"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+              >
+                <div className="contribution-icon">⚡</div>
+                <h2 className="contribution-title">How You Can Contribute</h2>
+                <p className="contribution-description">
+                  There are many ways to get involved in RecodeHive. Here's how you can contribute:
+                </p>
+              </motion.div>
+            </div>
+          </section>
 
-        {/* How You Can Contribute Header */}
-        <section id="how-you-can-contribute" className="contribution-header">
-          <div className="container">
-            <motion.div
-              className="contribution-header-content"
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: 0.3 }}
-            >
-              <div className="contribution-icon">⚡</div>
-              <h2 className="contribution-title">How You Can Contribute</h2>
-              <p className="contribution-description">
-                There are many ways to get involved in RecodeHive. Here's how you can contribute:
-              </p>
-            </motion.div>
-          </div>
-        </section>
+          {/* Scrollable Content Sections */}
+          <section className="community-content">
+            <div className="container">
+              <div className="community-layout">
+                {/* Main Content */}
+                <div className="contribution-sections">
+                  {contributionSections.map((section, index) => (
+                    <motion.div
+                      key={section.id}
+                      id={section.id}
+                      className={`contribution-section ${(isMobile ? activeSections.includes(section.id) : selectedSection === section.id)
+                          ? 'selected'
+                          : ''
+                        }`}
+                      initial={{ opacity: 0, y: 30 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: 0.6, delay: 0.1 * index }}
+                    >
+                      <div className="section-header">
+                        <div
+                          className="section-icon"
+                          style={{ backgroundColor: section.color }}
+                        >
+                          {section.icon}
+                        </div>
+                        <h3 className="section-title">{section.title}</h3>
+                      </div>
+
+                      <p className="section-description">{section.description}</p>
+
+                      <ul className="section-items">
+                        {section.items.map((item, itemIndex) => (
+                          <motion.li
+                            key={itemIndex}
+                            className="section-item"
+                            initial={{ opacity: 0, x: -20 }}
+                            animate={{ opacity: 1, x: 0 }}
+                            transition={{ duration: 0.3, delay: (0.1 * index) + (0.05 * itemIndex) }}
+                          >
+                            <span className="item-arrow">▶</span>
+                            {item}
+                          </motion.li>
+                        ))}
+                      </ul>
+
+                      {section.links.length > 0 && (
+                        <div className="section-links">
+                          <div className="links-header">
+                            <span className="links-icon">🔗</span>
+                            <span>Find our {section.id === 'code' ? 'codebase' : section.id === 'design' ? 'design resources' : section.id === 'documentation' ? 'documentation' : section.id === 'community' ? 'conversation' : 'resources'} on:</span>
+                          </div>
+                          <div className="links-container">
+                            {section.links.map((link, linkIndex) => (
+                              <motion.a
+                                key={linkIndex}
+                                href={link.url}
+                                className="resource-link"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                style={{ '--link-color': section.color } as React.CSSProperties}
+                                whileHover={{ scale: 1.05 }}
+                                whileTap={{ scale: 0.95 }}
+                              >
+                                {link.text}
+                              </motion.a>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </motion.div>
+                  ))}
 
-        {/* Scrollable Content Sections */}
-        <section className="community-content">
-          <div className="container">
-            <div className="community-layout">
-              {/* Main Content */}
-              <div className="contribution-sections">
-                {contributionSections.map((section, index) => (
+                  {/* Thank You Section */}
                   <motion.div
-                    key={section.id}
-                    id={section.id}
-                    className="contribution-section"
+                    id="thank-you"
+                    className="thank-you-section"
                     initial={{ opacity: 0, y: 30 }}
                     animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.6, delay: 0.1 * index }}
+                    transition={{ duration: 0.6, delay: 0.8 }}
                   >
-                  <div className="section-header">
-                    <div
-                      className="section-icon"
-                      style={{ backgroundColor: section.color }}
-                    >
-                      {section.icon}
-                    </div>
-                    <h3 className="section-title">{section.title}</h3>
-                  </div>
+                    <div className="thank-you-card">
+                      <div className="thank-you-header">
+                        <div className="thank-you-icons">
+                          <span className="thank-icon">💚</span>
+                          <span className="thank-icon">🎉</span>
+                          <span className="thank-icon">✨</span>
+                        </div>
+                        <h3>Thank You!</h3>
+                        <div className="thank-you-subtitle">You're Amazing</div>
+                      </div>
 
-                  <p className="section-description">{section.description}</p>
+                      <div className="thank-you-content">
+                        <p className="thank-you-main">
+                          Thank you for your interest in <strong>RecodeHive</strong>!
+                        </p>
+                        <p className="thank-you-description">
+                          We're thrilled to have you here and can't wait to{' '}
+                          <span className="highlight collaborate">collaborate</span>,{' '}
+                          <span className="highlight learn">learn</span>, and{' '}
+                          <span className="highlight grow">grow</span> — together. 🌱
+                        </p>
 
-                  <ul className="section-items">
-                    {section.items.map((item, itemIndex) => (
-                      <motion.li
-                        key={itemIndex}
-                        className="section-item"
-                        initial={{ opacity: 0, x: -20 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        transition={{ duration: 0.3, delay: (0.1 * index) + (0.05 * itemIndex) }}
-                      >
-                        <span className="item-arrow">▶</span>
-                        {item}
-                      </motion.li>
-                    ))}
-                  </ul>
+                        <div className="thank-you-features">
+                          <div className="feature-item">
+                            <span className="feature-icon">🚀</span>
+                            <span>Build Amazing Projects</span>
+                          </div>
+                          <div className="feature-item">
+                            <span className="feature-icon">🤝</span>
+                            <span>Connect with Developers</span>
+                          </div>
+                          <div className="feature-item">
+                            <span className="feature-icon">📚</span>
+                            <span>Learn & Share Knowledge</span>
+                          </div>
+                        </div>
 
-                  {section.links.length > 0 && (
-                    <div className="section-links">
-                      <div className="links-header">
-                        <span className="links-icon">🔗</span>
-                        <span>Find our {section.id === 'code' ? 'codebase' : section.id === 'design' ? 'design resources' : section.id === 'documentation' ? 'documentation' : section.id === 'community' ? 'conversation' : 'resources'} on:</span>
-                      </div>
-                      <div className="links-container">
-                        {section.links.map((link, linkIndex) => (
-                          <motion.a
-                            key={linkIndex}
-                            href={link.url}
-                            className="resource-link"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            style={{ '--link-color': section.color } as React.CSSProperties}
-                            whileHover={{ scale: 1.05 }}
-                            whileTap={{ scale: 0.95 }}
-                          >
-                            {link.text}
-                          </motion.a>
-                        ))}
+                        <blockquote className="thank-you-quote">
+                          <div className="quote-icon">🐝</div>
+                          <em>Let's make this community the best it can bee!</em>
+                        </blockquote>
+
+                        <div className="support-section">
+                          <div className="support-icon">💬</div>
+                          <p className="support-text">
+                            We're here to help and support you throughout your journey — don't hesitate to reach out.
+                          </p>
+                        </div>
                       </div>
                     </div>
-                  )}
-                </motion.div>
-              ))}
-
-              {/* Thank You Section */}
-              <motion.div
-                id="thank-you"
-                className="thank-you-section"
-                initial={{ opacity: 0, y: 30 }}
-                animate={{ opacity: 1, y: 0 }}
-                transition={{ duration: 0.6, delay: 0.8 }}
-              >
-              <div className="thank-you-card">
-                <div className="thank-you-header">
-                  <div className="thank-you-icons">
-                    <span className="thank-icon">💚</span>
-                    <span className="thank-icon">🎉</span>
-                    <span className="thank-icon">✨</span>
-                  </div>
-                  <h3>Thank You!</h3>
-                  <div className="thank-you-subtitle">You're Amazing</div>
+                  </motion.div>
                 </div>
 
-                <div className="thank-you-content">
-                  <p className="thank-you-main">
-                    Thank you for your interest in <strong>RecodeHive</strong>!
-                  </p>
-                  <p className="thank-you-description">
-                    We're thrilled to have you here and can't wait to{' '}
-                    <span className="highlight collaborate">collaborate</span>,{' '}
-                    <span className="highlight learn">learn</span>, and{' '}
-                    <span className="highlight grow">grow</span> — together. 🌱
-                  </p>
-
-                  <div className="thank-you-features">
-                    <div className="feature-item">
-                      <span className="feature-icon">🚀</span>
-                      <span>Build Amazing Projects</span>
-                    </div>
-                    <div className="feature-item">
-                      <span className="feature-icon">🤝</span>
-                      <span>Connect with Developers</span>
-                    </div>
-                    <div className="feature-item">
-                      <span className="feature-icon">📚</span>
-                      <span>Learn & Share Knowledge</span>
-                    </div>
+                {/* Table of Contents Sidebar */}
+                <motion.div
+                  className="table-of-contents"
+                  initial={{ opacity: 0, x: 30 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.6, delay: 0.4 }}
+                >
+                  <div className="toc-header">
+                    <span className="toc-icon">⚡</span>
+                    <h4>How You Can Contribute</h4>
                   </div>
+                  <nav className="toc-nav">
+                    {tableOfContents.map((item) => (
+                      <button
+                        key={item.id}
+                        className={`toc-item ${activeSections.includes(item.id) ? 'active' : ''}`}
+                        onClick={() => scrollToSection(item.id)}
+                      >
+                        <span className="toc-item-icon">{item.icon}</span>
+                        <span className="toc-item-text">{item.title}</span>
+                      </button>
+                    ))}
 
-                  <blockquote className="thank-you-quote">
-                    <div className="quote-icon">🐝</div>
-                    <em>Let's make this community the best it can bee!</em>
-                  </blockquote>
-
-                  <div className="support-section">
-                    <div className="support-icon">💬</div>
-                    <p className="support-text">
-                      We're here to help and support you throughout your journey — don't hesitate to reach out.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </motion.div>
+                  </nav>
+                </motion.div>
               </div>
-
-              {/* Table of Contents Sidebar */}
-              <motion.div
-                className="table-of-contents"
-                initial={{ opacity: 0, x: 30 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.6, delay: 0.4 }}
-              >
-                <div className="toc-header">
-                  <span className="toc-icon">⚡</span>
-                  <h4>How You Can Contribute</h4>
-                </div>
-                <nav className="toc-nav">
-                  {tableOfContents.map((item) => (
-                    <button
-                      key={item.id}
-                      className={`toc-item ${activeSection === item.id ? 'active' : ''}`}
-                      onClick={() => scrollToSection(item.id)}
-                    >
-                      <span className="toc-item-icon">{item.icon}</span>
-                      <span className="toc-item-text">{item.title}</span>
-                    </button>
-                  ))}
-                </nav>
-              </motion.div>
             </div>
-          </div>
-        </section>
-      </main>
+          </section>
+        </main>
 
-      {/* Scroll to Top Button - Same as Home Page */}
-      <ScrollBottomToTop />
+        {/* Scroll to Top Button - Same as Home Page */}
+        <ScrollBottomToTop />
       </div>
     </Layout>
   );