diff --git a/frontend/src/components/Footer/Footer.jsx b/frontend/src/components/Footer/Footer.jsx
index 1537bc34..1ed8b3c1 100644
--- a/frontend/src/components/Footer/Footer.jsx
+++ b/frontend/src/components/Footer/Footer.jsx
@@ -34,7 +34,18 @@ function Footer() {
         <p>Copyright© Spotnet {new Date().getFullYear()}</p>
       </div>
       <nav className="footer-docs">
-        <Link to="/documentation">Documentation</Link>
+        <NavLink
+          to="/documentation"
+          className={({ isActive }) => (isActive ? 'footer-link-active' : '')}
+          onClick={(e) => {
+            if (window.location.pathname === '/documentation') {
+              e.preventDefault();
+            }
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+        >
+          Documentation
+        </NavLink>
         <Link to="/overview">Overview</Link>
         <Link to="/terms">Terms & Conditions</Link>
         <Link to="/defi">Defi Spring Rewards</Link>
diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
index 9924fc3f..af9c6814 100644
--- a/frontend/src/components/Footer/footer.css
+++ b/frontend/src/components/Footer/footer.css
@@ -176,3 +176,7 @@
     flex-direction: column;
   }
 }
+
+.footer-link-active {
+  color: var(--nav-button-hover) !important;
+}
diff --git a/frontend/src/components/scrollButton/ScrollButton.css b/frontend/src/components/scrollButton/ScrollButton.css
new file mode 100644
index 00000000..0e5a6576
--- /dev/null
+++ b/frontend/src/components/scrollButton/ScrollButton.css
@@ -0,0 +1,62 @@
+.scroll-button-wrapper {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    z-index: 50;
+  }
+  
+  .scroll-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: rgba(20, 20, 40, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+    color: var(--primary);
+    font-family: var(--font-family);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(8px);
+  }
+  
+  .scroll-button:hover {
+    background: rgba(30, 30, 50, 0.9);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+  
+  .scroll-text {
+    font-weight: 500;
+  }
+  
+  .scroll-chevron {
+    transform: translateY(1px);
+    transition: transform 0.2s ease;
+  }
+  
+  .scroll-button:hover .scroll-chevron {
+    transform: translateY(2px);
+  }
+  
+  .scroll-button::after {
+    content: '';
+    position: absolute;
+    inset: -1px;
+    border-radius: 9999px;
+    padding: 1px;
+    background: linear-gradient(45deg, 
+      rgba(111, 63, 245, 0.4),
+      rgba(111, 63, 245, 0) 50%
+    );
+    mask: linear-gradient(#fff 0 0) content-box, 
+          linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  
+  .scroll-button:hover::after {
+    opacity: 1;
+  }
\ No newline at end of file
diff --git a/frontend/src/components/scrollButton/ScrollButton.jsx b/frontend/src/components/scrollButton/ScrollButton.jsx
new file mode 100644
index 00000000..dc331f25
--- /dev/null
+++ b/frontend/src/components/scrollButton/ScrollButton.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import './ScrollButton.css';
+
+const ScrollButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      const scrollHeight = document.documentElement.scrollHeight;
+      const scrollPosition = window.innerHeight + window.pageYOffset;
+      if (scrollHeight - scrollPosition > 100) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+    toggleVisibility();
+
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  const scrollToBottom = () => {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: 'smooth'
+    });
+  };
+
+  return isVisible ? (
+    <div className="scroll-button-wrapper">
+      <button onClick={scrollToBottom} className="scroll-button">
+        <span className="scroll-text">Scroll down</span>
+        <svg 
+          className="scroll-chevron" 
+          width="12" 
+          height="12" 
+          viewBox="0 0 12 12" 
+          fill="none" 
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path 
+            d="M2 4L6 8L10 4" 
+            stroke="currentColor" 
+            strokeWidth="2" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  ) : null;
+};
+
+export default ScrollButton;
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/documentation/Documentation.jsx b/frontend/src/pages/spotnet/documentation/Documentation.jsx
index 2d87c60d..1600d4d5 100644
--- a/frontend/src/pages/spotnet/documentation/Documentation.jsx
+++ b/frontend/src/pages/spotnet/documentation/Documentation.jsx
@@ -1,17 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import './documentation.css';
-import { useNavigate } from 'react-router-dom';
+import Section from './Section';
+import TableOfContents from './TableOfContents';
+import ScrollButton from '../../../components/scrollButton/ScrollButton';
 
 const Documentation = () => {
-  const navigate = useNavigate();
-  
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+
   const tableOfContents = [
-    {
-      title: 'Introduction',
-      link: '#introduction'
-    },
-    {
-      title: 'Overview',
+    { title: 'Introduction', link: '#introduction' },
+    { 
+      title: 'Overview', 
       link: '#overview',
       subItems: [
         { title: 'Cosmos Overview', link: '#cosmos-1' },
@@ -20,105 +23,77 @@ const Documentation = () => {
         { title: 'Cosmos Overview', link: '#cosmos-4' }
       ]
     },
-    {
-      title: 'Getting Started',
-      link: '#getting-started'
-    },
-    {
-      title: 'Features Overview',
-      link: '#features'
-    },
-    {
-      title: 'The Hub And Zones',
-      link: '#hub-1'
-    },
-    {
-      title: 'The Hub And Zones',
-      link: '#hub-2'
-    },
-    {
-      title: 'The Hub And Zones',
-      link: '#hub-3'
-    },
-    {
-      title: 'The Hub And Zones',
-      link: '#hub-4'
-    },
-    {
-      title: 'The Hub And Zones',
-      link: '#hub-5'
-    }
+    { title: 'Getting Started', link: '#getting-started' },
+    { title: 'Features Overview', link: '#features' },
+    { title: 'The Hub And Zones', link: '#hub-1' },
+    { title: 'The Hub And Zones', link: '#hub-2' },
+    { title: 'The Hub And Zones', link: '#hub-3' },
+    { title: 'The Hub And Zones', link: '#hub-4' },
+    { title: 'The Hub And Zones', link: '#hub-5' }
   ];
 
   return (
-    <div className="documentation-container">
-      <div className="table-of-contents">
-        <h3 className="toc-title">Table of Content</h3>
-        <nav className="toc-nav">
-          {tableOfContents.map((item, index) => (
-            <div key={index} className="toc-item">
-              <a href={item.link} className="toc-link">• {item.title}</a>
-              {item.subItems && (
-                <div className="toc-subitems">
-                  {item.subItems.map((subItem, subIndex) => (
-                    <a 
-                      key={subIndex} 
-                      href={subItem.link} 
-                      className="toc-sublink"
-                    >
-                      {subItem.title}
-                    </a>
-                  ))}
-                </div>
-              )}
-            </div>
-          ))}
-        </nav>
-      </div>
-
+    <div className="documentation-page">
+      <TableOfContents items={tableOfContents} />
+      
       <div className="main-content">
         <h1 className="main-title">zkLend Documentation</h1>
 
-        <section id="introduction">
-          <h2 className="section-title">• Introduction</h2>
-          <p className="section-text">
-            Welcome to [Product Name] Documentation<br/>
-            [Product Name] is a decentralized platform designed to [describe purpose, e.g., "empower users to securely manage digital assets and access DeFi tools effortlessly"]. This documentation provides a comprehensive guide on using [Product Name] and making the most of its features.
-          </p>
-        </section>
+        <Section 
+          id="introduction" 
+          title="Introduction"
+          content={[
+            {
+              type: 'text',
+              value: "Welcome to [Product Name] Documentation\n[Product Name] is a decentralized platform designed to [describe purpose, e.g., \"empower users to securely manage digital assets and access DeFi tools effortlessly\"]. This documentation provides a comprehensive guide on using [Product Name] and making the most of its features."
+            }
+          ]}
+        />
 
-        <section id="overview">
-          <h2 className="section-title">• Overview</h2>
-          <p className="section-text">
-            What is [Product Name]?<br/>
-            [Product Name] is a Web3 platform that leverages blockchain technology to [describe primary functionalities, e.g., "facilitate secure transactions, staking, and asset management without intermediaries"].
-          </p>
-          <p className="section-text">
-            Core features include:
-          </p>
-          <ul className="feature-list">
-            <li>• Decentralized Finance (DeFi): Access a suite of DeFi services, including lending, borrowing, and yield farming.</li>
-            <li>• Security-First Design: Built on smart contracts to ensure safety and transparency.</li>
-            <li>• Cross-Chain Compatibility: [Product Name] supports multiple blockchains for a seamless user experience.</li>
-          </ul>
-        </section>
+        <Section 
+          id="overview" 
+          title="Overview"
+          content={[
+            {
+              type: 'text',
+              value: "What is [Product Name]?\n[Product Name] is a Web3 platform that leverages blockchain technology to [describe primary functionalities, e.g., \"facilitate secure transactions, staking, and asset management without intermediaries\"]."
+            },
+            {
+              type: 'text',
+              value: "Core features include:"
+            },
+            {
+              type: 'list',
+              items: [
+                "Decentralized Finance (DeFi): Access a suite of DeFi services, including lending, borrowing, and yield farming.",
+                "Security-First Design: Built on smart contracts to ensure safety and transparency.",
+                "Cross-Chain Compatibility: [Product Name] supports multiple blockchains for a seamless user experience."
+              ]
+            }
+          ]}
+        />
 
-        <section id="getting-started">
-          <h2 className="section-title">• Getting Started</h2>
-          <p className="section-text">Setting Up Your Wallet</p>
-          <ol className="setup-steps">
-            <li>1. Download a compatible Web3 wallet (e.g., MetaMask).</li>
-            <li>2. Fund your wallet with the supported cryptocurrency.</li>
-          </ol>
-        </section>
+        <Section 
+          id="getting-started" 
+          title="Getting Started"
+          content={[
+            {
+              type: 'text',
+              value: "Setting Up Your Wallet"
+            },
+            {
+              type: 'orderedList',
+              items: [
+                "Download a compatible Web3 wallet (e.g., MetaMask).",
+                "Fund your wallet with the supported cryptocurrency.",
+                "Connect your wallet to [Product Name]."
+              ]
+            }
+          ]}
+        />
       </div>
 
-      <div className="scroll-indicator">
-        <button className="scroll-down">
-          Scroll down
-          <span className="scroll-icon">↓</span>
-        </button>
-      </div>
+      <ScrollButton />
     </div>
   );
 };
diff --git a/frontend/src/pages/spotnet/documentation/Section.jsx b/frontend/src/pages/spotnet/documentation/Section.jsx
new file mode 100644
index 00000000..9f9c342a
--- /dev/null
+++ b/frontend/src/pages/spotnet/documentation/Section.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import './documentation.css';
+
+const Section = ({ id, title, content }) => {
+  const renderContent = (item, index) => {
+    switch (item.type) {
+      case 'text':
+        return (
+          <p key={index} className="section-text">
+            {item.value.split('\n').map((text, i) => (
+              <React.Fragment key={i}>
+                {text}
+                {i < item.value.split('\n').length - 1 && <br />}
+              </React.Fragment>
+            ))}
+          </p>
+        );
+      case 'list':
+        return (
+          <ul key={index} className="feature-list">
+            {item.items.map((listItem, i) => (
+              <li key={i}>• {listItem}</li>
+            ))}
+          </ul>
+        );
+      case 'orderedList':
+        return (
+          <ol key={index} className="setup-steps">
+            {item.items.map((listItem, i) => (
+              <li key={i}>{i + 1}. {listItem}</li>
+            ))}
+          </ol>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <section id={id} className="documentation-section">
+      <h2 className="section-title">• {title}</h2>
+      {content.map((item, index) => renderContent(item, index))}
+    </section>
+  );
+};
+
+export default Section;
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/documentation/TableOfContents.jsx b/frontend/src/pages/spotnet/documentation/TableOfContents.jsx
new file mode 100644
index 00000000..c3dc1c9d
--- /dev/null
+++ b/frontend/src/pages/spotnet/documentation/TableOfContents.jsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const TableOfContents = ({ items }) => {
+  const location = useLocation();
+  const [activeId, setActiveId] = useState('introduction');
+
+  useEffect(() => {
+    if (location.pathname === '/documentation') {
+      setActiveId('introduction');
+    }
+
+    const handleScroll = () => {
+      const sections = document.querySelectorAll('.documentation-section');
+      const scrollPosition = window.scrollY;
+
+      sections.forEach((section) => {
+        const sectionTop = section.offsetTop - 100;
+        const sectionHeight = section.offsetHeight;
+
+        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
+          setActiveId(section.id);
+        }
+      });
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    handleScroll();
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [location]);
+
+  const handleClick = (e, link) => {
+    e.preventDefault();
+    const targetId = link.replace('#', '');
+    const element = document.getElementById(targetId);
+    
+    if (element) {
+      const headerHeight = 80;
+      const elementPosition = element.getBoundingClientRect().top + window.scrollY;
+      const offsetPosition = elementPosition - headerHeight;
+
+      window.scrollTo({
+        top: targetId === 'introduction' ? 0 : offsetPosition,
+        behavior: 'smooth'
+      });
+
+      setActiveId(targetId);
+    }
+  };
+
+  return (
+    <div className="table-of-contents">
+      <h3 className="toc-title">Table of Content</h3>
+      <nav className="toc-nav">
+        {items.map((item, index) => (
+          <div key={index} className="toc-item">
+            <a 
+              href={item.link}
+              onClick={(e) => handleClick(e, item.link)}
+              className={`toc-link ${activeId === item.link.replace('#', '') ? 'active' : ''}`}
+            >
+              • {item.title}
+            </a>
+            {item.subItems && (
+              <div className="toc-subitems">
+                {item.subItems.map((subItem, subIndex) => (
+                  <a 
+                    key={subIndex}
+                    href={subItem.link}
+                    onClick={(e) => handleClick(e, subItem.link)}
+                    className={`toc-sublink ${activeId === subItem.link.replace('#', '') ? 'active' : ''}`}
+                  >
+                    {subItem.title}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+        ))}
+      </nav>
+    </div>
+  );
+};
+
+export default TableOfContents;
\ No newline at end of file
diff --git a/frontend/src/pages/spotnet/documentation/documentation.css b/frontend/src/pages/spotnet/documentation/documentation.css
index f5fee5e5..456f865d 100644
--- a/frontend/src/pages/spotnet/documentation/documentation.css
+++ b/frontend/src/pages/spotnet/documentation/documentation.css
@@ -1,146 +1,270 @@
 .documentation-container {
-    display: flex;
-    min-height: 100vh;
-    background: linear-gradient(to bottom right, #0B0B14, #1A1A2E);
-    color: #fff;
-    position: relative;
-    padding: 2rem;
-  }
-  
+  display: flex;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #0B0B14 0%, #1A1A2E 100%);
+  color: var(--primary);
+  position: relative;
+  padding-top: 80px;
+}
+
+.documentation-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-image: 
+    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.25) 1px, transparent 1px),
+    radial-gradient(circle at 15% 85%, rgba(255,255,255,0.25) 1px, transparent 1px),
+    radial-gradient(circle at 75% 75%, rgba(255,255,255,0.25) 1px, transparent 1px);
+  background-size: 100px 100px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.table-of-contents {
+  width: 280px;
+  padding: 2rem;
+  background: rgba(0, 0, 0, 0.3);
+  height: calc(100vh - 80px);
+  position: fixed;
+  overflow-y: auto;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toc-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+}
+
+.toc-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.toc-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.toc-link {
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  opacity: 0.8;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: 100%;
+  position: relative;
+}
+
+.toc-link:hover {
+  background: transparent;
+  color: #74D6FD;
+}
+
+.toc-link.active {
+  color: #74D6FD;
+  opacity: 1;
+  background: transparent;
+}
+
+.toc-link.active::after {
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 0;
+  bottom: -2px;
+  height: 1px;
+  background: linear-gradient(to right, #74D6FD 0%, transparent 100%);
+}
+
+.toc-subitems {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-left: 1.5rem;
+}
+
+.toc-sublink {
+  color: var(--primary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  opacity: 0.6;
+  padding: 4px 8px;
+  border-radius: 4px;
+  width: 100%;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.toc-sublink:hover {
+  background: transparent;
+  color: #74D6FD;
+}
+
+.toc-sublink.active {
+  color: #74D6FD;
+  opacity: 1;
+  background: transparent;
+}
+
+.toc-sublink.active::after {
+  content: '';
+  position: absolute;
+  left: 8px;
+  right: 0;
+  bottom: -2px;
+  height: 1px;
+  background: linear-gradient(to right, #74D6FD 0%, transparent 100%);
+}
+
+.main-content {
+  margin-left: 280px;
+  flex: 1;
+  padding: 2rem 3rem;
+  position: relative;
+}
+
+.main-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 3rem;
+  color: #74D6FD;
+  background: linear-gradient(73deg, #74D6FD 1.13%, #E01DEE 103.45%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.documentation-section {
+  margin-bottom: 4rem;
+  position: relative;
+  scroll-margin-top: 80px;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+  color: var(--primary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.section-text {
+  font-size: 1rem;
+  line-height: 1.8;
+  margin-bottom: 1.5rem;
+  opacity: 0.9;
+  color: var(--primary);
+}
+
+.feature-list,
+.setup-steps {
+  list-style: none;
+  padding: 0;
+  margin: 0.5rem 0 1.5rem 1.5rem;
+}
+
+.feature-list li,
+.setup-steps li {
+  margin-bottom: 0.75rem;
+  line-height: 1.6;
+  opacity: 0.9;
+  color: var(--primary);
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.scroll-button-wrapper {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 50;
+}
+
+.scroll-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
+  background: rgba(20, 20, 40, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 9999px;
+  color: var(--primary);
+  font-family: var(--font-family);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  backdrop-filter: blur(8px);
+}
+
+.scroll-button:hover {
+  background: rgba(30, 30, 50, 0.9);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.scroll-text {
+  font-weight: 500;
+}
+
+.scroll-chevron {
+  transform: translateY(1px);
+  transition: transform 0.2s ease;
+}
+
+.scroll-button:hover .scroll-chevron {
+  transform: translateY(2px);
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 80px;
+}
+
+@media (max-width: 768px) {
   .table-of-contents {
-    width: 280px;
-    padding: 2rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    position: fixed;
-    height: calc(100vh - 4rem);
-    overflow-y: auto;
-  }
-  
-  .toc-title {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin-bottom: 1.5rem;
-  }
-  
-  .toc-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-  
-  .toc-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  
-  .toc-link {
-    color: #fff;
-    text-decoration: none;
-    font-size: 0.875rem;
-    opacity: 0.8;
-    transition: opacity 0.2s;
-  }
-  
-  .toc-link:hover {
-    opacity: 1;
-  }
-  
-  .toc-subitems {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-left: 1.5rem;
-  }
-  
-  .toc-sublink {
-    color: #fff;
-    text-decoration: none;
-    font-size: 0.875rem;
-    opacity: 0.6;
+    display: none;
   }
-  
-  .toc-sublink:hover {
-    opacity: 0.8;
-  }
-  
+
   .main-content {
-    margin-left: 300px;
-    flex: 1;
-    padding: 2rem;
+    margin-left: 0;
+    padding: 1rem;
   }
-  
+
   .main-title {
     font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 2rem;
-    background: linear-gradient(45deg, #6B46C1, #9F7AEA);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-  
-  .section-title {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: #9F7AEA;
-  }
-  
-  .section-text {
-    font-size: 1rem;
-    line-height: 1.6;
-    margin-bottom: 1.5rem;
-    opacity: 0.9;
-  }
-  
-  .feature-list, .setup-steps {
-    list-style: none;
-    padding: 0;
-    margin: 0 0 1.5rem 1rem;
-  }
-  
-  .feature-list li, .setup-steps li {
-    margin-bottom: 0.5rem;
-    line-height: 1.6;
-    opacity: 0.9;
-  }
-  
-  .scroll-indicator {
-    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
-  }
-  
-  .scroll-down {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: rgba(111, 63, 245, 0.1);
-    border: 1px solid rgba(111, 63, 245, 0.3);
-    color: #fff;
-    padding: 0.75rem 1.5rem;
-    border-radius: 9999px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-  
-  .scroll-down:hover {
-    background: rgba(111, 63, 245, 0.2);
   }
-  
-  .scroll-icon {
-    font-size: 1.25rem;
+
+  .scroll-button-wrapper {
+    bottom: 1rem;
+    right: 1rem;
   }
-  
-  .documentation-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 1px, transparent 1px);
-    background-size: 50px 50px;
-    pointer-events: none;
-  }
\ No newline at end of file
+}
+
+.table-of-contents::-webkit-scrollbar {
+  width: 6px;
+}
+
+.table-of-contents::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.table-of-contents::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+}
+
+.table-of-contents::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
\ No newline at end of file