diff --git a/web/about/about.css b/web/about/about.css
index f69c6316..81d1b238 100644
--- a/web/about/about.css
+++ b/web/about/about.css
@@ -1,120 +1,269 @@
-/* About page specific styles */
 .container {
     max-width: 1200px;
     margin: 6rem auto 2rem;
     padding: 2rem;
 }
 
-.content-section {
+/* Hero Section */
+.hero {
+    text-align: center;
     margin-bottom: 4rem;
 }
 
-.grid {
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Team Section */
+.team-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.team-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    text-align: center;
+    color: var(--gradient-end);
+}
+
+.team-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 2rem;
-    padding: 2rem 0;
+    margin-top: 3rem;
 }
 
-.glass-card {
+.team-member {
     background: rgba(255, 255, 255, 0.05);
-    padding: 2rem;
-    margin-bottom: 2rem;
     border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }
 
-.glass-card:hover {
+.team-member:hover {
     transform: translateY(-5px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
     border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
-.card-header {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+.member-image {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    margin: 0 auto 1.5rem;
+    overflow: hidden;
+    border: 3px solid var(--gradient-end);
 }
 
-.card-icon {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-    background: none;
-    border-radius: 0;
-    margin: 0;
+.member-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
-.glass-card h2 {
-    margin: 0;
-    font-size: 1.8rem;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+.member-info h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--gradient-end);
+}
+
+.member-info p.role {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+.member-info p.bio {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+/* Mission Section */
+.mission-section {
+    margin: 4rem 0;
+    padding: 3rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+}
+
+.mission-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    color: var(--gradient-end);
 }
 
-.glass-card p {
+.mission-section p {
+    font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
     line-height: 1.8;
-    margin-bottom: 1.5rem;
 }
 
-.feature-image {
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-    margin-top: 1.5rem;
-    transition: transform 0.3s ease;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    padding: 0;
-    background: none;
+/* Values Section */
+.values-section {
+    margin: 4rem 0;
+}
+
+.values-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+}
+
+.value-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.value-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
+}
+
+.value-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.value-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.value-card p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
+/* Contact Section */
+.contact-section {
+    margin: 4rem 0;
+    padding: 3rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+}
+
+.contact-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    color: var(--gradient-end);
+}
+
+.contact-info {
+    display: flex;
+    justify-content: center;
+    gap: 3rem;
+    margin-top: 2rem;
+}
+
+.contact-item {
+    text-align: center;
+}
+
+.contact-item i {
+    font-size: 2rem;
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
 }
 
-.feature-image:hover {
-    transform: scale(1.02);
+.contact-item p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.1rem;
+}
+
+.social-links {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-top: 2rem;
 }
 
-.glass-button {
+.social-link {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
-    color: white;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     transition: all 0.3s ease;
+    color: white;
+    text-decoration: none;
+    font-size: 1.5rem;
 }
 
-.glass-button:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+.social-link:hover {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    transform: translateY(-3px);
 }
 
-@media (max-width: 768px) {
+/* Responsive Design */
+@media screen and (max-width: 768px) {
     .container {
+        margin: 4rem 1rem 2rem;
         padding: 1rem;
-        margin-top: 5rem;
     }
 
-    .grid {
-        grid-template-columns: 1fr;
-        gap: 1.5rem;
+    .hero h1 {
+        font-size: 2.5rem;
     }
 
-    .glass-card {
+    .hero p {
+        font-size: 1.1rem;
+    }
+
+    .team-section,
+    .mission-section,
+    .contact-section {
         padding: 1.5rem;
     }
 
-    .feature-image {
-        margin: 1rem 0;
+    .team-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .contact-info {
+        flex-direction: column;
+        gap: 2rem;
+    }
+
+    .values-grid {
+        grid-template-columns: 1fr;
     }
 
-    h1 {
-        font-size: 2rem;
-        text-align: center;
+    .value-card {
+        padding: 1.5rem;
     }
 }
\ No newline at end of file
diff --git a/web/about/about.html b/web/about/about.html
index 616cc909..96be24a8 100644
--- a/web/about/about.html
+++ b/web/about/about.html
@@ -6,11 +6,14 @@
     <title>About - DNAnalyzer</title>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="about.css">
-    <link href="https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
     <div class="background-blur"></div>
+    <div class="gradient-sphere"></div>
+    <div class="gradient-sphere secondary"></div>
     
     <header class="floating-header">
         <nav class="floating-nav">
@@ -21,52 +24,99 @@
             <a href="../features/features.html" class="nav-link">Features</a>
             <a href="../analyzer/analyzer.html" class="nav-link">Analyzer</a>
             <a href="../server/server.html" class="nav-link">Server</a>
+            <a href="../docs/docs.html" class="nav-link">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
 
     <main class="container">
-        <section class="content-section">
+        <section class="hero">
             <h1>About DNAnalyzer</h1>
-            <div class="grid">
-                <div class="glass-card">
-                    <div class="card-header">
-                        <img src="../assets/icons/Icon_Dark_BG.svg" alt="Analysis Icon" class="card-icon">
-                        <h2>Introduction</h2>
+            <p>Revolutionizing DNA analysis through advanced machine learning and efficient computation</p>
+        </section>
+
+        <section class="mission-section">
+            <h2>Our Mission</h2>
+            <p>DNAnalyzer aims to democratize DNA analysis by providing powerful, accessible tools for researchers, clinicians, and scientists worldwide. We're committed to advancing genomic research through innovative technology and open collaboration.</p>
+        </section>
+
+        <section class="values-section">
+            <div class="values-grid">
+                <div class="value-card">
+                    <i class="fas fa-dna value-icon"></i>
+                    <h3>Innovation</h3>
+                    <p>Leveraging cutting-edge technology and machine learning to provide accurate, comprehensive DNA analysis capabilities.</p>
+                </div>
+                <div class="value-card">
+                    <i class="fas fa-users value-icon"></i>
+                    <h3>Accessibility</h3>
+                    <p>Making advanced DNA analysis tools available to researchers and clinicians worldwide through an intuitive interface.</p>
+                </div>
+                <div class="value-card">
+                    <i class="fas fa-shield-alt value-icon"></i>
+                    <h3>Reliability</h3>
+                    <p>Ensuring accurate results and robust performance through rigorous testing and validation processes.</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="team-section">
+            <h2>Technology</h2>
+            <div class="team-grid">
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="../assets/icons/Icon_Dark_BG.svg" alt="Analysis Features">
+                    </div>
+                    <div class="member-info">
+                        <h3>Advanced Analysis</h3>
+                        <p class="role">Core Features</p>
+                        <p class="bio">Identifies proteins, amino acids, start and stop codons, high coverage regions, and regulatory elements with high accuracy.</p>
                     </div>
-                    <p>DNAnalyzer identifies proteins, amino acids, start and stop codons, high coverage regions,
-                        regions susceptible to neurodevelopmental disorders, transcription factors, and regulatory
-                        elements. Researchers are working to extract valuable information from such software to better
-                        understand human health and disease.</p>
-                    <img src="../assets/mockup/Slide_01.png" alt="DNAnalyzer Interface" class="feature-image">
                 </div>
-                <div class="glass-card">
-                    <div class="card-header">
-                        <img src="../assets/icons/Icon_Base.svg" alt="Science Icon" class="card-icon">
-                        <h2>Background</h2>
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="../assets/icons/Icon_Base.svg" alt="ML Capabilities">
+                    </div>
+                    <div class="member-info">
+                        <h3>Machine Learning</h3>
+                        <p class="role">Smart Processing</p>
+                        <p class="bio">Utilizes advanced algorithms and ML models to process and analyze DNA sequences efficiently.</p>
                     </div>
-                    <p>With DNA sequencing becoming more accessible and affordable, the need for efficient analysis tools 
-                    has grown exponentially. DNAnalyzer was developed to meet this need, providing researchers and 
-                    clinicians with a powerful yet user-friendly platform for DNA sequence analysis.</p>
                 </div>
-                <div class="glass-card">
-                    <div class="card-header">
-                        <img src="../assets/icons/emblem-dark-bg.svg" alt="Technology Icon" class="card-icon">
-                        <h2>Technology</h2>
+                <div class="team-member">
+                    <div class="member-image">
+                        <img src="../assets/icons/emblem-dark-bg.svg" alt="Platform Features">
+                    </div>
+                    <div class="member-info">
+                        <h3>Scalable Platform</h3>
+                        <p class="role">Infrastructure</p>
+                        <p class="bio">Built on modern technology stack ensuring fast processing of large sequences and reliable performance.</p>
                     </div>
-                    <p>Built with cutting-edge technology, DNAnalyzer leverages advanced algorithms and machine learning 
-                    to provide accurate and comprehensive DNA analysis. Our platform supports various file formats and 
-                    can process large sequences efficiently.</p>
                 </div>
             </div>
         </section>
+
+        <section class="contact-section">
+            <h2>Get Involved</h2>
+            <p>Join our community and contribute to the future of DNA analysis</p>
+            <div class="social-links">
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="social-link">
+                    <i class="fab fa-github"></i>
+                </a>
+                <a href="https://discord.gg/xNpujz49gj" class="social-link">
+                    <i class="fab fa-discord"></i>
+                </a>
+            </div>
+        </section>
     </main>
 
-    <footer class="glass-footer">
-        <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+    <footer class="footer-content">
+        <div class="footer-bottom">
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+        </div>
     </footer>
 
     <script src="about.js"></script>
diff --git a/web/analyzer/analyzer.css b/web/analyzer/analyzer.css
index 58720159..6514d510 100644
--- a/web/analyzer/analyzer.css
+++ b/web/analyzer/analyzer.css
@@ -2,51 +2,64 @@
     max-width: 1200px;
     margin: 6rem auto 2rem;
     padding: 2rem;
-    background: rgba(26, 28, 42, 0.95);
-    border-radius: 20px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
 }
 
-h1 {
-    font-size: 3.5rem;
-    margin-bottom: 2rem;
+.hero {
     text-align: center;
+    margin-bottom: 3rem;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
     background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
-.section-title {
-    font-size: 1.8rem;
-    margin-bottom: 1.5rem;
-    color: var(--gradient-end);
-    border-bottom: 2px solid rgba(0, 122, 255, 0.3);
-    padding-bottom: 0.5rem;
+.hero p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.tab-container {
+/* Analysis Container */
+.analysis-container {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    margin-bottom: 3rem;
+}
+
+/* Tabs */
+.analysis-tabs {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
-    justify-content: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 1rem;
 }
 
 .tab-button {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
     padding: 1rem 2rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    color: rgba(255, 255, 255, 0.8);
-    font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: 1.1rem;
 }
 
+.tab-button i {
+    font-size: 1.2rem;
+}
+
 .tab-button:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
+    background: rgba(255, 255, 255, 0.1);
 }
 
 .tab-button.active {
@@ -55,243 +68,369 @@ h1 {
     color: white;
 }
 
-.input-group {
-    margin-bottom: 2rem;
-    padding: 2rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
 }
 
-.input-tabs {
+/* Input Methods */
+.input-methods {
     display: flex;
     gap: 1rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
-.input-tab {
+.method-button {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.8);
     padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    color: rgba(255, 255, 255, 0.8);
-    font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
-    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-.input-tab:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: translateY(-2px);
+.method-button i {
+    font-size: 1.1rem;
 }
 
-.input-tab.active {
+.method-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.method-button.active {
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     border-color: transparent;
     color: white;
 }
 
-.parameter-section {
+/* Input Areas */
+.input-area {
+    display: none;
     margin-bottom: 2rem;
 }
 
-.parameter-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
+.input-area.active {
+    display: block;
+}
+
+/* File Drop Zone */
+.file-drop-zone {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 3rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    cursor: pointer;
 }
 
-.parameter-item {
+.file-drop-zone:hover,
+.file-drop-zone.drag-active {
+    border-color: var(--gradient-end);
     background: rgba(255, 255, 255, 0.05);
-    padding: 1.5rem;
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-label {
-    display: block;
-    margin-bottom: 0.75rem;
-    font-weight: 500;
+.file-drop-zone i {
+    font-size: 3rem;
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
+}
+
+.file-drop-zone p {
+    margin: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
-    font-size: 1.1rem;
 }
 
-input[type="file"],
-input[type="number"],
-input[type="text"],
-input[type="url"],
-select {
-    width: 100%;
-    padding: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+.file-drop-zone .sub-text {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.9rem;
+}
+
+.upload-button {
+    display: inline-block;
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    padding: 0.75rem 1.5rem;
     border-radius: 8px;
-    font-size: 1rem;
+    cursor: pointer;
+    margin: 1rem 0;
+}
+
+.file-info {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+/* URL Input */
+.url-input-container {
+    display: flex;
+    gap: 1rem;
+}
+
+.url-field {
+    flex: 1;
     background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
-    transition: all 0.3s ease;
+    padding: 1rem;
+    border-radius: 8px;
     font-family: inherit;
 }
 
-input[type="file"] {
+.fetch-button {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    border: none;
+    padding: 0 2rem;
+    border-radius: 8px;
     cursor: pointer;
-    padding: 0.75rem;
-}
-
-input[type="file"]:hover,
-input[type="number"]:hover,
-input[type="text"]:hover,
-input[type="url"]:hover,
-select:hover {
-    border-color: var(--gradient-end);
 }
 
-input:focus,
-select:focus {
-    outline: none;
-    border-color: var(--gradient-start);
-    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+/* Text Input */
+.sequence-input {
+    width: 100%;
+    height: 200px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 1rem;
+    border-radius: 8px;
+    font-family: 'IBM Plex Mono', monospace;
+    resize: vertical;
 }
 
+/* Analysis Options */
 .options-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
+    margin-bottom: 2rem;
 }
 
-.checkbox-group {
+.option-card {
     background: rgba(255, 255, 255, 0.05);
-    padding: 1.5rem;
-    border-radius: 8px;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
+    border-radius: 8px;
+    padding: 1.5rem;
 }
 
-.checkbox-group:hover {
-    background: rgba(255, 255, 255, 0.08);
-    transform: translateY(-2px);
-    border-color: var(--gradient-end);
+.option-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.option-header i {
+    font-size: 1.5rem;
+    color: var(--gradient-end);
+}
+
+.option-header h3 {
+    margin: 0;
+    color: var(--gradient-end);
 }
 
-.checkbox-group input[type="checkbox"] {
-    width: 20px;
-    height: 20px;
+/* Checkboxes */
+.checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     margin-bottom: 1rem;
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.checkbox-group label {
-    font-size: 1.1rem;
-    margin-bottom: 0.5rem;
+.checkbox-container input {
+    width: 18px;
+    height: 18px;
+}
+
+/* Advanced Settings */
+.advanced-settings {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    margin-bottom: 2rem;
+}
+
+.settings-header {
+    padding: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.settings-header h3 {
+    margin: 0;
+    color: var(--gradient-end);
+}
+
+.toggle-settings {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.8);
+    cursor: pointer;
+    font-size: 1.2rem;
+}
+
+.settings-content {
+    display: none;
+    padding: 1.5rem;
 }
 
-small {
+.settings-content.show {
     display: block;
-    color: rgba(255, 255, 255, 0.6);
-    margin-top: 0.5rem;
-    font-size: 0.95rem;
-    line-height: 1.5;
 }
 
+.setting-group {
+    margin-bottom: 1.5rem;
+}
+
+.setting-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.setting-group input,
+.setting-group select {
+    width: 100%;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    padding: 0.75rem;
+    border-radius: 6px;
+    font-family: inherit;
+}
+
+/* Analyze Button */
 .analyze-btn {
     width: 100%;
-    padding: 1.25rem;
-    font-size: 1.2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     color: white;
     border: none;
-    border-radius: 12px;
+    padding: 1.25rem;
+    border-radius: 8px;
+    font-size: 1.2rem;
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.3s ease;
-    margin-top: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
 }
 
-.analyze-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.3);
-    filter: brightness(1.1);
+.analyze-btn i {
+    font-size: 1.2rem;
 }
 
-.analyze-btn:active {
-    transform: translateY(0);
+.analyze-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
 }
 
-.results {
-    margin-top: 3rem;
-    padding: 2rem;
+/* Results Section */
+.results-section {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 2rem;
+    margin-top: 3rem;
 }
 
-.results h2 {
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
+.results-section h2 {
     color: var(--gradient-end);
+    margin-bottom: 2rem;
 }
 
-#analysisOutput {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 1rem;
-    line-height: 1.6;
-    padding: 1.5rem;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 8px;
+.result-tabs {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+}
+
+.result-tab {
+    background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    white-space: pre-wrap;
-    overflow-x: auto;
+    color: rgba(255, 255, 255, 0.8);
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    cursor: pointer;
 }
 
-@media screen and (max-width: 768px) {
-    .container {
-        margin: 4rem 1rem 2rem;
-        padding: 1.5rem;
-    }
+.result-tab.active {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-color: transparent;
+    color: white;
+}
 
-    h1 {
-        font-size: 2.5rem;
-    }
+/* Coming Soon */
+.coming-soon {
+    text-align: center;
+    padding: 4rem 2rem;
+}
 
-    .section-title {
-        font-size: 1.5rem;
-    }
+.coming-soon i {
+    font-size: 3rem;
+    color: var(--gradient-end);
+    margin-bottom: 1.5rem;
+}
 
-    .input-group {
-        padding: 1.5rem;
-    }
+.coming-soon h2 {
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
+}
 
-    .options-grid {
-        grid-template-columns: 1fr;
+.coming-soon p {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    .container {
+        padding: 1rem;
     }
 
-    .parameter-grid {
-        grid-template-columns: 1fr;
+    .hero h1 {
+        font-size: 2.5rem;
     }
 
-    .tab-container {
+    .analysis-tabs {
         flex-direction: column;
     }
 
     .tab-button {
         width: 100%;
+        justify-content: center;
     }
 
-    .input-tabs {
+    .input-methods {
         flex-direction: column;
     }
 
-    .input-tab {
+    .method-button {
         width: 100%;
-        text-align: center;
+        justify-content: center;
     }
 
-    label {
-        font-size: 1rem;
+    .url-input-container {
+        flex-direction: column;
     }
 
-    .checkbox-group {
+    .fetch-button {
+        width: 100%;
         padding: 1rem;
     }
+
+    .options-grid {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file
diff --git a/web/analyzer/analyzer.html b/web/analyzer/analyzer.html
index e21b2604..5b6ff543 100644
--- a/web/analyzer/analyzer.html
+++ b/web/analyzer/analyzer.html
@@ -3,14 +3,17 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DNA Analysis - DNAnalyzer</title>
+    <title>DNA Analyzer - DNAnalyzer</title>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="analyzer.css">
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
     <div class="background-blur"></div>
+    <div class="gradient-sphere"></div>
+    <div class="gradient-sphere secondary"></div>
     
     <header class="floating-header">
         <nav class="floating-nav">
@@ -23,182 +26,223 @@
             <a href="../server/server.html" class="nav-link">Server</a>
             <a href="../docs/docs.html" class="nav-link">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
 
-    <div class="container">
-        <h1>DNA Sequence Analysis</h1>
-        
-        <div class="tab-container">
-            <button class="tab-button active" data-tab="dna">DNA Analysis</button>
-            <button class="tab-button" data-tab="genetic">Genetic Testing Data</button>
-        </div>
+    <main class="container">
+        <section class="hero">
+            <h1>DNA Sequence Analysis</h1>
+            <p>Analyze DNA sequences with advanced ML-powered tools</p>
+        </section>
 
-        <form id="analyzerForm" class="tab-content active" data-tab="dna">
-            <div class="input-group">
-                <h2 class="section-title">DNA Input</h2>
-                <div class="input-tabs">
-                    <button type="button" class="input-tab active" data-input="file">Upload File</button>
-                    <button type="button" class="input-tab" data-input="url">URL Input</button>
-                </div>
-                <div class="input-content active" data-input="file">
-                    <label for="dnaFile">DNA Sequence File:</label>
-                    <input type="file" id="dnaFile" accept=".fa,.fasta,.fastq">
-                    <small>Upload a FASTA or FASTQ file containing DNA sequence</small>
-                </div>
-                <div class="input-content" data-input="url" style="display: none;">
-                    <label for="dnaUrl">DNA File URL:</label>
-                    <input type="url" id="dnaUrl" placeholder="Enter URL to FASTA/FASTQ file">
-                    <small>Enter a URL to a publicly accessible FASTA or FASTQ file</small>
-                </div>
+        <div class="analysis-container">
+            <div class="analysis-tabs">
+                <button class="tab-button active" data-tab="dna-analysis">
+                    <i class="fas fa-dna"></i>
+                    DNA Analysis
+                </button>
+                <button class="tab-button" data-tab="genetic-testing">
+                    <i class="fas fa-vial"></i>
+                    Genetic Testing
+                </button>
+                <button class="tab-button" data-tab="batch-analysis">
+                    <i class="fas fa-layer-group"></i>
+                    Batch Analysis
+                </button>
             </div>
 
-            <div class="input-group">
-                <h2 class="section-title">Analysis Parameters</h2>
-                <div class="parameter-section">
-                    <label for="aminoAcid">Start Amino Acid:</label>
-                    <select id="aminoAcid" required>
-                        <option value="met">Methionine (Met) - Most common start codon</option>
-                        <option value="ser">Serine (Ser)</option>
-                        <option value="thr">Threonine (Thr)</option>
-                        <option value="val">Valine (Val)</option>
-                        <option value="custom">Custom</option>
-                    </select>
-                    <input type="text" id="customAmino" placeholder="Enter custom amino acid" style="display: none;">
-                </div>
-
-                <div class="parameter-grid">
-                    <div class="parameter-item">
-                        <label for="minCount">Minimum Count:</label>
-                        <input type="number" id="minCount" value="0" min="0">
+            <div class="tab-content active" id="dna-analysis">
+                <div class="input-section">
+                    <h2>DNA Input</h2>
+                    <div class="input-methods">
+                        <button class="method-button active" data-method="file">
+                            <i class="fas fa-file-upload"></i>
+                            Upload File
+                        </button>
+                        <button class="method-button" data-method="url">
+                            <i class="fas fa-link"></i>
+                            URL Input
+                        </button>
+                        <button class="method-button" data-method="text">
+                            <i class="fas fa-keyboard"></i>
+                            Text Input
+                        </button>
                     </div>
-                    <div class="parameter-item">
-                        <label for="maxCount">Maximum Count:</label>
-                        <input type="number" id="maxCount" value="100" min="1">
+
+                    <div class="input-area active" id="file-input">
+                        <div class="file-drop-zone">
+                            <i class="fas fa-cloud-upload-alt"></i>
+                            <p>Drag and drop your DNA sequence file here</p>
+                            <p class="sub-text">or</p>
+                            <label class="upload-button">
+                                Choose File
+                                <input type="file" accept=".fa,.fasta,.fastq" hidden>
+                            </label>
+                            <p class="file-info">Supported formats: .fa, .fasta, .fastq</p>
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <div class="input-group">
-                <h2 class="section-title">Sequence Operations</h2>
-                <div class="options-grid">
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="reverse" name="reverse">
-                        <label for="reverse">Reverse Sequence</label>
-                        <small>Analyze DNA sequence in reverse direction</small>
+                    <div class="input-area" id="url-input">
+                        <div class="url-input-container">
+                            <input type="url" placeholder="Enter URL to DNA sequence file" class="url-field">
+                            <button class="fetch-button">Fetch</button>
+                        </div>
                     </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="rcomplement" name="rcomplement">
-                        <label for="rcomplement">Show Complement</label>
-                        <small>Show complementary DNA sequence</small>
+
+                    <div class="input-area" id="text-input">
+                        <textarea placeholder="Paste your DNA sequence here..." class="sequence-input"></textarea>
                     </div>
                 </div>
-            </div>
 
-            <div class="input-group">
-                <h2 class="section-title">Analysis Features</h2>
-                <div class="options-grid">
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="gc" name="gc">
-                        <label for="gc">GC Content</label>
-                        <small>Analyze GC content distribution</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="codons" name="codons">
-                        <label for="codons">Codon Distribution</label>
-                        <small>Analyze codon frequency</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="coverage" name="coverage">
-                        <label for="coverage">High Coverage</label>
-                        <small>Identify high coverage regions</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="longest" name="longest">
-                        <label for="longest">Longest Protein</label>
-                        <small>Find longest protein sequence</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="transcription" name="transcription">
-                        <label for="transcription">Transcription Factors</label>
-                        <small>Identify transcription factor binding sites</small>
+                <div class="analysis-options">
+                    <h2>Analysis Options</h2>
+                    <div class="options-grid">
+                        <div class="option-card">
+                            <div class="option-header">
+                                <i class="fas fa-microscope"></i>
+                                <h3>Basic Analysis</h3>
+                            </div>
+                            <div class="option-content">
+                                <label class="checkbox-container">
+                                    <input type="checkbox" checked>
+                                    <span class="checkmark"></span>
+                                    Sequence Length
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox" checked>
+                                    <span class="checkmark"></span>
+                                    GC Content
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox" checked>
+                                    <span class="checkmark"></span>
+                                    Base Composition
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="option-card">
+                            <div class="option-header">
+                                <i class="fas fa-dna"></i>
+                                <h3>Codon Analysis</h3>
+                            </div>
+                            <div class="option-content">
+                                <label class="checkbox-container">
+                                    <input type="checkbox" checked>
+                                    <span class="checkmark"></span>
+                                    Start Codons
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox" checked>
+                                    <span class="checkmark"></span>
+                                    Stop Codons
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox">
+                                    <span class="checkmark"></span>
+                                    Reading Frames
+                                </label>
+                            </div>
+                        </div>
+
+                        <div class="option-card">
+                            <div class="option-header">
+                                <i class="fas fa-chart-line"></i>
+                                <h3>Advanced Features</h3>
+                            </div>
+                            <div class="option-content">
+                                <label class="checkbox-container">
+                                    <input type="checkbox">
+                                    <span class="checkmark"></span>
+                                    Coverage Analysis
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox">
+                                    <span class="checkmark"></span>
+                                    Mutation Detection
+                                </label>
+                                <label class="checkbox-container">
+                                    <input type="checkbox">
+                                    <span class="checkmark"></span>
+                                    Protein Prediction
+                                </label>
+                            </div>
+                        </div>
                     </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="promoter" name="promoter">
-                        <label for="promoter">Promoter Analysis</label>
-                        <small>Identify promoter sequences</small>
+
+                    <div class="advanced-settings">
+                        <div class="settings-header">
+                            <h3>Advanced Settings</h3>
+                            <button class="toggle-settings">
+                                <i class="fas fa-cog"></i>
+                            </button>
+                        </div>
+                        <div class="settings-content">
+                            <div class="setting-group">
+                                <label>Minimum Sequence Length</label>
+                                <input type="number" value="100" min="1">
+                            </div>
+                            <div class="setting-group">
+                                <label>Maximum Sequence Length</label>
+                                <input type="number" value="1000" min="1">
+                            </div>
+                            <div class="setting-group">
+                                <label>Start Amino Acid</label>
+                                <select>
+                                    <option value="met">Methionine (MET)</option>
+                                    <option value="ser">Serine (SER)</option>
+                                    <option value="val">Valine (VAL)</option>
+                                </select>
+                            </div>
+                        </div>
                     </div>
                 </div>
+
+                <button class="analyze-btn">
+                    <i class="fas fa-play"></i>
+                    Start Analysis
+                </button>
             </div>
 
-            <div class="input-group">
-                <h2 class="section-title">Output Options</h2>
-                <div class="options-grid">
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="verbose" name="verbose">
-                        <label for="verbose">Verbose Output</label>
-                        <small>Show detailed analysis information</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="detailed" name="detailed">
-                        <label for="detailed">Detailed Statistics</label>
-                        <small>Include statistical analysis</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="quick" name="quick">
-                        <label for="quick">Quick Analysis</label>
-                        <small>Basic analysis with essential features</small>
-                    </div>
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="format" name="format">
-                        <label for="format">Format Output</label>
-                        <small>Pretty-print the analysis results</small>
-                    </div>
+            <div class="tab-content" id="genetic-testing">
+                <div class="coming-soon">
+                    <i class="fas fa-flask"></i>
+                    <h2>Genetic Testing</h2>
+                    <p>Advanced genetic testing features coming soon!</p>
                 </div>
             </div>
 
-            <div class="input-group">
-                <h2 class="section-title">Optional Files</h2>
-                <div class="file-upload-group">
-                    <label for="proteinFile">Protein Search File:</label>
-                    <input type="file" id="proteinFile" accept=".fa,.fasta">
-                    <small>Optional: Upload a protein file to search within the DNA sequence</small>
+            <div class="tab-content" id="batch-analysis">
+                <div class="coming-soon">
+                    <i class="fas fa-layer-group"></i>
+                    <h2>Batch Analysis</h2>
+                    <p>Batch processing capabilities coming soon!</p>
                 </div>
             </div>
+        </div>
 
-            <button type="submit" class="analyze-btn">Analyze DNA Sequence</button>
-        </form>
-
-        <form id="geneticForm" class="tab-content" data-tab="genetic" style="display: none;">
-            <div class="input-group">
-                <h2 class="section-title">Genetic Testing Data Analysis</h2>
-                <div class="file-upload-group">
-                    <label for="geneticFile">Genetic Testing File:</label>
-                    <input type="file" id="geneticFile" accept=".txt,.csv">
-                    <small>Upload data from genetic testing services (supported: 23andMe, AncestryDNA)</small>
+        <div class="results-section" style="display: none;">
+            <h2>Analysis Results</h2>
+            <div class="results-container">
+                <div class="result-tabs">
+                    <button class="result-tab active" data-result="summary">Summary</button>
+                    <button class="result-tab" data-result="details">Detailed Analysis</button>
+                    <button class="result-tab" data-result="visualization">Visualization</button>
                 </div>
-                <div class="options-grid">
-                    <div class="checkbox-group">
-                        <input type="checkbox" id="snpAnalysis" name="snpAnalysis">
-                        <label for="snpAnalysis">SNP Analysis</label>
-                        <small>Analyze Single Nucleotide Polymorphisms</small>
-                    </div>
+                <div class="result-content">
+                    <!-- Results will be dynamically populated here -->
                 </div>
             </div>
-            <button type="submit" class="analyze-btn">Analyze Genetic Data</button>
-        </form>
-
-        <div id="results" class="results" style="display: none;">
-            <h2>Analysis Results</h2>
-            <div id="analysisOutput"></div>
         </div>
-    </div>
+    </main>
 
-    <footer class="glass-footer">
-        <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+    <footer class="footer-content">
+        <div class="footer-bottom">
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+        </div>
     </footer>
 
     <script src="analyzer.js"></script>
diff --git a/web/analyzer/analyzer.js b/web/analyzer/analyzer.js
index fae6d5ff..4fcc1e41 100644
--- a/web/analyzer/analyzer.js
+++ b/web/analyzer/analyzer.js
@@ -1,391 +1,177 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // Input type tabs
-    const inputTabs = document.querySelectorAll('.input-tab');
-    const inputContents = document.querySelectorAll('.input-content');
-    const loadingIndicator = document.createElement('div');
-    loadingIndicator.className = 'loading-indicator';
-
-    inputTabs.forEach(tab => {
-        tab.addEventListener('click', () => {
-            const inputType = tab.dataset.input;
-            
-            // Update active states
-            inputTabs.forEach(t => t.classList.remove('active'));
-            inputContents.forEach(c => c.classList.remove('active'));
-            tab.classList.add('active');
-            
-            // Show selected input content
-            document.querySelector(`.input-content[data-input="${inputType}"]`).classList.add('active');
-            
-            // Clear other input
-            if (inputType === 'file') {
-                document.getElementById('dnaUrl').value = '';
-            } else {
-                document.getElementById('dnaFile').value = '';
-            }
-        });
-    });
-
-    // Tab handling
+document.addEventListener('DOMContentLoaded', function() {
+    // Tab switching
     const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
-
+    
     tabButtons.forEach(button => {
         button.addEventListener('click', () => {
-            const tabName = button.dataset.tab;
+            const tabId = button.getAttribute('data-tab');
             
             // Update active states
             tabButtons.forEach(btn => btn.classList.remove('active'));
-            tabContents.forEach(content => {
-                content.classList.remove('active');
-                content.style.display = 'none';  // Explicitly hide content
-            });
-            button.classList.add('active');
+            tabContents.forEach(content => content.classList.remove('active'));
             
-            // Show selected tab content
-            const selectedContent = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
-            selectedContent.classList.add('active');
-            selectedContent.style.display = 'block';  // Explicitly show content
+            button.classList.add('active');
+            document.getElementById(tabId).classList.add('active');
         });
     });
 
-    // DNA Analysis Form
-    const analyzerForm = document.getElementById('analyzerForm');
-    const aminoSelect = document.getElementById('aminoAcid');
-    const customAmino = document.getElementById('customAmino');
-    const results = document.getElementById('results');
-    const analysisOutput = document.getElementById('analysisOutput');
-    const outputControls = document.createElement('div');
-    outputControls.className = 'output-controls';
+    // Input method switching
+    const methodButtons = document.querySelectorAll('.method-button');
+    const inputAreas = document.querySelectorAll('.input-area');
     
-    // Create format toggle buttons
-    const formats = [
-        { id: 'text', label: 'Plain Text' },
-        { id: 'json', label: 'JSON' },
-        { id: 'csv', label: 'CSV' }
-    ];
-
-    formats.forEach(format => {
-        const btn = document.createElement('button');
-        btn.className = 'output-format-btn' + (format.id === 'text' ? ' active' : '');
-        btn.dataset.format = format.id;
-        btn.textContent = format.label;
-        outputControls.appendChild(btn);
-    });
-
-    // Analysis option dependencies
-    const quickCheckbox = document.getElementById('quick');
-    const detailedCheckbox = document.getElementById('detailed');
-    const verboseCheckbox = document.getElementById('verbose');
-    const gcCheckbox = document.getElementById('gc');
-    const codonsCheckbox = document.getElementById('codons');
-    const coverageCheckbox = document.getElementById('coverage');
-    const longestCheckbox = document.getElementById('longest');
-    const formatCheckbox = document.getElementById('format');
-    const transcriptionCheckbox = document.getElementById('transcription');
-    const promoterCheckbox = document.getElementById('promoter');
-
-    // Show/hide custom amino acid input
-    aminoSelect.addEventListener('change', (e) => {
-        customAmino.style.display = e.target.value === 'custom' ? 'block' : 'none';
-        if (e.target.value !== 'custom') {
-            customAmino.value = '';
-        }
+    methodButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const methodId = button.getAttribute('data-method');
+            
+            // Update active states
+            methodButtons.forEach(btn => btn.classList.remove('active'));
+            inputAreas.forEach(area => area.classList.remove('active'));
+            
+            button.classList.add('active');
+            document.getElementById(`${methodId}-input`).classList.add('active');
+        });
     });
 
-    // Handle quick analysis mode
-    const toggleAnalysisOptions = (isQuick) => {
-        const checkboxes = [
-            detailedCheckbox, verboseCheckbox, gcCheckbox, 
-            codonsCheckbox, coverageCheckbox, longestCheckbox,
-            formatCheckbox, transcriptionCheckbox, promoterCheckbox
-        ];
-        checkboxes.forEach(checkbox => {
-            checkbox.disabled = isQuick;
-            if (isQuick) {
-                checkbox.checked = false;
-            }
-        });
-    };
+    // File drag and drop
+    const dropZone = document.querySelector('.file-drop-zone');
+    const fileInput = dropZone.querySelector('input[type="file"]');
 
-    quickCheckbox.addEventListener('change', (e) => {
-        toggleAnalysisOptions(e.target.checked);
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, preventDefaults, false);
     });
 
-    // DNA Analysis form submission
-    analyzerForm.addEventListener('submit', async (e) => {
+    function preventDefaults(e) {
         e.preventDefault();
-        
-        if (!validateForm()) return;
+        e.stopPropagation();
+    }
 
-        const formData = buildFormData();
-        await submitAnalysis(formData);
+    ['dragenter', 'dragover'].forEach(eventName => {
+        dropZone.addEventListener(eventName, highlight, false);
     });
 
-    function validateForm() {
-        const activeInput = document.querySelector('.input-content.active').dataset.input;
-        const aminoSelect = document.getElementById('aminoAcid');
-        const customAmino = document.getElementById('customAmino');
-
-        if (activeInput === 'file') {
-            const dnaFile = document.getElementById('dnaFile').files[0];
-            if (!dnaFile) {
-                showError('Input Error', 'Please select a DNA file to analyze.');
-                return false;
-            }
-            if (!validateFileType(dnaFile)) {
-                showError('File Type Error', 'Please upload a valid FASTA or FASTQ file.');
-                return false;
-            }
-        } else {
-            const dnaUrl = document.getElementById('dnaUrl').value.trim();
-            if (!dnaUrl) {
-                showError('Input Error', 'Please enter a valid DNA file URL.');
-                return false;
-            }
-            if (!validateUrl(dnaUrl)) {
-                showError('URL Error', 'Please enter a valid FASTA or FASTQ file URL.');
-                return false;
-            }
-        }
-
-        if (aminoSelect.value === 'custom' && !customAmino.value.trim()) {
-            showError('Input Error', 'Please enter a custom amino acid or select a predefined one.');
-            return false;
-        }
-
-        return true;
-    }
+    ['dragleave', 'drop'].forEach(eventName => {
+        dropZone.addEventListener(eventName, unhighlight, false);
+    });
 
-    function validateFileType(file) {
-        const validTypes = ['.fa', '.fasta', '.fastq'];
-        return validTypes.some(type => file.name.toLowerCase().endsWith(type));
+    function highlight(e) {
+        dropZone.classList.add('drag-active');
     }
 
-    function validateUrl(url) {
-        try {
-            const urlObj = new URL(url);
-            const validExtensions = ['.fa', '.fasta', '.fastq'];
-            return validExtensions.some(ext => urlObj.pathname.toLowerCase().endsWith(ext));
-        } catch {
-            return false;
-        }
+    function unhighlight(e) {
+        dropZone.classList.remove('drag-active');
     }
 
-    function buildFormData() {
-        const formData = new FormData();
-        const activeInput = document.querySelector('.input-content.active').dataset.input;
-        const aminoSelect = document.getElementById('aminoAcid');
-        const customAmino = document.getElementById('customAmino');
-
-        // Add file or URL
-        if (activeInput === 'file') {
-            formData.append('dnaFile', document.getElementById('dnaFile').files[0]);
-        } else {
-            formData.append('dnaUrl', document.getElementById('dnaUrl').value.trim());
-        }
-
-        // Add amino acid selection
-        formData.append('amino', aminoSelect.value === 'custom' ? customAmino.value : aminoSelect.value);
-        formData.append('minCount', document.getElementById('minCount').value);
-        formData.append('maxCount', document.getElementById('maxCount').value);
-
-        // Add analysis options
-        const options = [
-            'reverse', 'rcomplement', 'gc', 'codons', 'coverage', 'longest',
-            'verbose', 'detailed', 'quick', 'format', 'transcription', 'promoter'
-        ];
-        
-        options.forEach(option => {
-            formData.append(option, document.getElementById(option).checked);
-        });
-
-        // Add protein file if provided
-        const proteinFile = document.getElementById('proteinFile').files[0];
-        if (proteinFile) {
-            formData.append('proteinFile', proteinFile);
-        }
-
-        return formData;
-    }
+    dropZone.addEventListener('drop', handleDrop, false);
 
-    function showError(title, message, details = '') {
-        results.style.display = 'block';
-        results.classList.add('error');
-        analysisOutput.innerHTML = `
-            <div class="analysis-error">
-                <h3>${title}</h3>
-                <p>${message}</p>
-                ${details ? `<pre class="error-details">${details}</pre>` : ''}
-            </div>
-        `;
-        results.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        handleFiles(files);
     }
 
-    async function submitAnalysis(formData, endpoint = '/api/analyze') {
-        const analyzeBtn = document.querySelector('form.tab-content.active .analyze-btn');
-        const originalText = analyzeBtn.textContent;
-        
-        try {
-            analyzeBtn.textContent = 'Analyzing...';
-            analyzeBtn.disabled = true;
-            results.style.display = 'block';
-            results.classList.remove('error');
-            
-            analysisOutput.innerHTML = '<div class="processing-indicator">Processing data...</div>';
-
-            const response = await fetch(`http://localhost:8080${endpoint}`, {
-                method: 'POST',
-                body: formData
-            });
-
-            const contentType = response.headers.get('content-type');
-
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.message || 'Analysis failed');
-            }
-
-            const data = contentType?.includes('application/json') ? 
-                await response.json() : 
-                await response.text();
-
-            results.style.display = 'block';
-            
-            if (endpoint === '/api/analyze-genetic') {
-                analysisOutput.innerHTML = '';
-                analysisOutput.appendChild(renderGeneticResults(data));
+    function handleFiles(files) {
+        if (files.length > 0) {
+            const file = files[0];
+            if (file.name.match(/\.(fa|fasta|fastq)$/)) {
+                dropZone.querySelector('.file-info').textContent = `Selected file: ${file.name}`;
             } else {
-                // Handle DNA analysis results as before
-                analysisOutput.innerHTML = `
-                    <div class="success-indicator">Analysis completed successfully</div>
-                    ${outputControls.outerHTML}
-                    <pre>${typeof data === 'string' ? data : JSON.stringify(data, null, 2)}</pre>
-                `;
-
-                // Add format switching functionality
-                const formatBtns = analysisOutput.querySelectorAll('.output-format-btn');
-                formatBtns.forEach(btn => {
-                    btn.addEventListener('click', () => switchFormat(btn.dataset.format));
-                });
+                alert('Please upload a valid DNA sequence file (.fa, .fasta, .fastq)');
             }
-
-        } catch (error) {
-            console.error('Error:', error);
-            showError('Analysis Error', error.message);
-        } finally {
-            analyzeBtn.textContent = originalText;
-            analyzeBtn.disabled = false;
         }
     }
 
-    function switchFormat(format) {
-        // Reset active states
-        outputControls.querySelectorAll('.output-format-btn').forEach(btn => {
-            btn.classList.toggle('active', btn.dataset.format === format);
-        });
+    // Advanced settings toggle
+    const settingsToggle = document.querySelector('.toggle-settings');
+    const settingsContent = document.querySelector('.settings-content');
 
-        // Re-submit with new format
-        const formData = buildFormData();
-        formData.append('format', format);
-        submitAnalysis(formData);
-    }
+    settingsToggle.addEventListener('click', () => {
+        settingsContent.classList.toggle('show');
+        settingsToggle.classList.toggle('active');
+    });
 
-    // Genetic Testing form submission
-    const geneticForm = document.getElementById('geneticForm');
-    geneticForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        
-        const geneticFile = document.getElementById('geneticFile').files[0];
-        if (!geneticFile) {
-            alert('Please select a genetic testing data file.');
-            return;
-        }
+    // Analysis button
+    const analyzeButton = document.querySelector('.analyze-btn');
+    const resultsSection = document.querySelector('.results-section');
 
-        const formData = new FormData();
-        formData.append('geneticFile', geneticFile);
-        formData.append('snpAnalysis', document.getElementById('snpAnalysis').checked);
+    analyzeButton.addEventListener('click', () => {
+        // Show loading state
+        analyzeButton.disabled = true;
+        analyzeButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
 
-        await submitAnalysis(formData, '/api/analyze-genetic');
+        // Simulate analysis (replace with actual analysis logic)
+        setTimeout(() => {
+            resultsSection.style.display = 'block';
+            analyzeButton.disabled = false;
+            analyzeButton.innerHTML = '<i class="fas fa-play"></i> Start Analysis';
+            
+            // Scroll to results
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }, 2000);
     });
 
-    function renderGeneticResults(data) {
-        const container = document.createElement('div');
-        container.className = 'genetic-results';
-
-        // Overview section
-        const overview = document.createElement('div');
-        overview.className = 'results-section';
-        overview.innerHTML = `
-            <h3>Analysis Overview</h3>
-            <div class="stat-grid">
-                <div class="stat-item">
-                    <span class="stat-label">Total SNPs</span>
-                    <span class="stat-value">${data.totalSnps.toLocaleString()}</span>
-                </div>
-                <div class="stat-item">
-                    <span class="stat-label">Chromosomes</span>
-                    <span class="stat-value">${Object.keys(data.chromosomeDistribution).length}</span>
-                </div>
-            </div>
-        `;
-        container.appendChild(overview);
+    // Results tab switching
+    const resultTabs = document.querySelectorAll('.result-tab');
+    
+    resultTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            resultTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            // Update result content (to be implemented)
+            const resultType = tab.getAttribute('data-result');
+            updateResultContent(resultType);
+        });
+    });
 
-        // Chromosome distribution chart
-        const chartSection = document.createElement('div');
-        chartSection.className = 'results-section';
-        chartSection.innerHTML = `
-            <h3>Chromosome Distribution</h3>
-            <div class="chromosome-chart">
-                ${Object.entries(data.chromosomeDistribution).map(([chr, count]) => `
-                    <div class="chart-bar">
-                        <div class="bar-fill" style="height: ${(count / data.totalSnps * 100)}%">
-                            <span class="bar-value">${count}</span>
+    function updateResultContent(type) {
+        const resultContent = document.querySelector('.result-content');
+        
+        // Example content (replace with actual analysis results)
+        switch(type) {
+            case 'summary':
+                resultContent.innerHTML = `
+                    <div class="result-summary">
+                        <div class="metric">
+                            <h3>Sequence Length</h3>
+                            <p>1,234 bp</p>
+                        </div>
+                        <div class="metric">
+                            <h3>GC Content</h3>
+                            <p>45.6%</p>
+                        </div>
+                        <div class="metric">
+                            <h3>Start Codons</h3>
+                            <p>8 found</p>
                         </div>
-                        <span class="bar-label">${chr}</span>
                     </div>
-                `).join('')}
-            </div>
-        `;
-        container.appendChild(chartSection);
-
-        // SNP details if available
-        if (data.snps && data.snps.length > 0) {
-            const snpSection = document.createElement('div');
-            snpSection.className = 'results-section';
-            snpSection.innerHTML = `
-                <h3>SNP Analysis</h3>
-                <div class="snp-table">
-                    <table>
-                        <thead>
-                            <tr>
-                                <th>RSID</th>
-                                <th>Chromosome</th>
-                                <th>Position</th>
-                                <th>Genotype</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            ${data.snps.slice(0, 100).map(snp => `
-                                <tr>
-                                    <td>${snp.rsid}</td>
-                                    <td>${snp.chromosome}</td>
-                                    <td>${snp.position}</td>
-                                    <td>${snp.genotype}</td>
-                                </tr>
-                            `).join('')}
-                        </tbody>
-                    </table>
-                    ${data.snps.length > 100 ? `
-                        <div class="table-note">
-                            Showing first 100 SNPs of ${data.snps.length} total
+                `;
+                break;
+            case 'details':
+                resultContent.innerHTML = `
+                    <div class="result-details">
+                        <pre class="sequence-view">ATCGATCG...</pre>
+                        <div class="analysis-details">
+                            <h3>Detailed Findings</h3>
+                            <ul>
+                                <li>Start codons at positions: 1, 45, 102...</li>
+                                <li>Stop codons at positions: 43, 156, 234...</li>
+                                <li>High coverage regions: 100-200, 300-450...</li>
+                            </ul>
                         </div>
-                    ` : ''}
-                </div>
-            `;
-            container.appendChild(snpSection);
+                    </div>
+                `;
+                break;
+            case 'visualization':
+                resultContent.innerHTML = `
+                    <div class="result-visualization">
+                        <div class="visualization-placeholder">
+                            <i class="fas fa-chart-bar"></i>
+                            <p>Sequence visualization coming soon!</p>
+                        </div>
+                    </div>
+                `;
+                break;
         }
-
-        return container;
     }
 });
\ No newline at end of file
diff --git a/web/docs/docs.css b/web/docs/docs.css
index 17b6391d..0322bab2 100644
--- a/web/docs/docs.css
+++ b/web/docs/docs.css
@@ -4,184 +4,281 @@
     padding: 2rem;
 }
 
+/* Hero Section */
+.hero {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Documentation Navigation */
 .docs-nav {
-    display: flex;
-    gap: 1rem;
+    position: fixed;
+    top: 6rem;
+    left: 0;
+    width: 280px;
+    height: calc(100vh - 6rem);
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+    overflow-y: auto;
+}
+
+.nav-section {
     margin-bottom: 2rem;
-    flex-wrap: wrap;
 }
 
-.docs-nav-item {
-    padding: 0.75rem 1.5rem;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 8px;
-    color: white;
+.nav-section h3 {
+    color: var(--gradient-end);
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-links {
+    list-style: none;
+}
+
+.nav-link {
+    display: block;
+    padding: 0.5rem 0;
+    color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
+    font-size: 1rem;
     transition: all 0.3s ease;
 }
 
-.docs-nav-item:hover {
-    background: rgba(255, 255, 255, 0.15);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+.nav-link:hover {
+    color: var(--gradient-end);
+    transform: translateX(5px);
 }
 
-.glass-card {
-    background: rgba(255, 255, 255, 0.05);
-    padding: 2rem;
-    margin-bottom: 2rem;
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
+.nav-link.active {
+    color: var(--gradient-end);
+    font-weight: 500;
 }
 
-.section-content {
-    margin-top: 1.5rem;
+/* Main Content */
+.docs-content {
+    margin-left: 280px;
+    padding: 2rem;
 }
 
-.section-content h3 {
-    margin: 2rem 0 1rem;
-    color: var(--gradient-end);
+.content-section {
+    margin-bottom: 4rem;
 }
 
-.section-content h3:first-child {
-    margin-top: 0;
+.content-section h2 {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+    color: var(--gradient-end);
 }
 
-.section-content ul, .section-content ol {
-    margin: 1rem 0;
-    padding-left: 1.5rem;
+.content-section h3 {
+    font-size: 1.8rem;
+    margin: 2rem 0 1rem;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.section-content li {
-    margin: 0.5rem 0;
+.content-section p {
     color: rgba(255, 255, 255, 0.9);
+    font-size: 1.1rem;
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
 }
 
+/* Code Blocks */
 .code-block {
     background: rgba(0, 0, 0, 0.3);
-    padding: 1rem 1.2rem;
     border-radius: 8px;
-    margin: 1rem 0;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1.5rem;
+    margin: 1.5rem 0;
     overflow-x: auto;
 }
 
-.code-block code {
+.code-block pre {
+    margin: 0;
     font-family: 'IBM Plex Mono', monospace;
-    color: #10B981;
-    font-size: 0.9rem;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.feature-item {
-    margin-bottom: 2rem;
-    padding: 1.5rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+.code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.feature-item:last-child {
-    margin-bottom: 0;
+.code-language {
+    color: var(--gradient-end);
+    font-size: 0.9rem;
+    font-weight: 500;
 }
 
-.feature-item p {
-    color: rgba(255, 255, 255, 0.9);
-    line-height: 1.8;
-    margin-top: 0.5rem;
+.copy-button {
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: rgba(255, 255, 255, 0.8);
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
 }
 
-.options-list {
-    list-style: none !important;
-    padding-left: 0 !important;
+.copy-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--gradient-end);
 }
 
-.options-list li {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    padding: 0.75rem;
+/* Tables */
+.docs-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
     background: rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-    margin: 0.5rem 0;
+    border-radius: 8px;
+    overflow: hidden;
 }
 
-.options-list code {
-    font-family: 'IBM Plex Mono', monospace;
-    color: #10B981;
-    font-size: 0.9rem;
-    padding: 0.25rem 0.5rem;
+.docs-table th,
+.docs-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.docs-table th {
     background: rgba(0, 0, 0, 0.3);
-    border-radius: 4px;
+    color: var(--gradient-end);
+    font-weight: 600;
 }
 
-.api-list {
-    list-style: none !important;
-    padding-left: 0 !important;
+.docs-table tr:hover {
+    background: rgba(255, 255, 255, 0.05);
 }
 
-.api-list li {
-    margin: 1rem 0;
-    padding: 1rem;
-    background: rgba(0, 0, 0, 0.2);
+/* Lists */
+.content-section ul,
+.content-section ol {
+    margin: 1.5rem 0;
+    padding-left: 2rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.content-section li {
+    margin-bottom: 0.75rem;
+    line-height: 1.6;
+}
+
+/* Notes and Warnings */
+.note-block {
+    padding: 1.5rem;
+    margin: 1.5rem 0;
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-left: 4px solid;
 }
 
-.api-list code {
-    display: block;
-    font-family: 'IBM Plex Mono', monospace;
-    color: #10B981;
-    font-size: 1rem;
-    margin-bottom: 0.5rem;
+.note-info {
+    background: rgba(0, 122, 255, 0.1);
+    border-left-color: var(--gradient-end);
 }
 
-.api-list p {
-    color: rgba(255, 255, 255, 0.9);
-    margin: 0;
-    font-size: 0.95rem;
+.note-warning {
+    background: rgba(255, 149, 0, 0.1);
+    border-left-color: #ff9500;
 }
 
-a {
+.note-block h4 {
     color: var(--gradient-end);
-    text-decoration: none;
-    transition: color 0.3s ease;
+    margin-bottom: 0.75rem;
+    font-size: 1.2rem;
 }
 
-a:hover {
-    color: var(--gradient-start);
+/* Search Bar */
+.search-container {
+    margin-bottom: 2rem;
 }
 
-@media (max-width: 768px) {
-    .container {
-        padding: 1rem;
-        margin-top: 5rem;
-    }
+.search-input {
+    width: 100%;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: var(--gradient-start);
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
+}
 
+/* Responsive Design */
+@media screen and (max-width: 1024px) {
     .docs-nav {
-        flex-direction: column;
+        width: 240px;
     }
 
-    .docs-nav-item {
-        width: 100%;
-        text-align: center;
+    .docs-content {
+        margin-left: 240px;
     }
+}
 
-    .glass-card {
-        padding: 1.5rem;
+@media screen and (max-width: 768px) {
+    .docs-nav {
+        display: none;
     }
 
-    .feature-item {
+    .docs-content {
+        margin-left: 0;
         padding: 1rem;
     }
 
-    .code-block {
-        padding: 0.75rem;
+    .container {
+        margin: 4rem 1rem 2rem;
+        padding: 1rem;
+    }
+
+    .hero h1 {
+        font-size: 2.5rem;
+    }
+
+    .content-section h2 {
+        font-size: 2rem;
+    }
+
+    .content-section h3 {
+        font-size: 1.5rem;
     }
 
-    .options-list li {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.5rem;
+    .docs-table {
+        display: block;
+        overflow-x: auto;
     }
 }
\ No newline at end of file
diff --git a/web/docs/docs.html b/web/docs/docs.html
index fc1825c9..c3ea1574 100644
--- a/web/docs/docs.html
+++ b/web/docs/docs.html
@@ -6,11 +6,14 @@
     <title>Documentation - DNAnalyzer</title>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="docs.css">
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
     <div class="background-blur"></div>
+    <div class="gradient-sphere"></div>
+    <div class="gradient-sphere secondary"></div>
     
     <header class="floating-header">
         <nav class="floating-nav">
@@ -23,151 +26,241 @@
             <a href="../server/server.html" class="nav-link">Server</a>
             <a href="docs.html" class="nav-link active">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
 
-    <main class="container">
-        <section class="content-section">
-            <h1>Documentation</h1>
-            
-            <div class="docs-nav">
-                <a href="#getting-started" class="docs-nav-item">Getting Started</a>
-                <a href="#features" class="docs-nav-item">Features</a>
-                <a href="#cli" class="docs-nav-item">CLI Usage</a>
-                <a href="#api" class="docs-nav-item">API Reference</a>
-                <a href="#contribute" class="docs-nav-item">Contributing</a>
-            </div>
+    <nav class="docs-nav">
+        <div class="search-container">
+            <input type="text" class="search-input" placeholder="Search documentation...">
+        </div>
+        
+        <div class="nav-section">
+            <h3>Getting Started</h3>
+            <ul class="nav-links">
+                <li><a href="#installation" class="nav-link">Installation</a></li>
+                <li><a href="#quickstart" class="nav-link">Quick Start</a></li>
+                <li><a href="#configuration" class="nav-link">Configuration</a></li>
+            </ul>
+        </div>
+
+        <div class="nav-section">
+            <h3>Core Features</h3>
+            <ul class="nav-links">
+                <li><a href="#sequence-analysis" class="nav-link">Sequence Analysis</a></li>
+                <li><a href="#codon-detection" class="nav-link">Codon Detection</a></li>
+                <li><a href="#coverage-analysis" class="nav-link">Coverage Analysis</a></li>
+                <li><a href="#disorder-analysis" class="nav-link">Disorder Analysis</a></li>
+            </ul>
+        </div>
+
+        <div class="nav-section">
+            <h3>Advanced Usage</h3>
+            <ul class="nav-links">
+                <li><a href="#cli-usage" class="nav-link">CLI Usage</a></li>
+                <li><a href="#api-reference" class="nav-link">API Reference</a></li>
+                <li><a href="#configuration-options" class="nav-link">Configuration Options</a></li>
+            </ul>
+        </div>
+
+        <div class="nav-section">
+            <h3>Development</h3>
+            <ul class="nav-links">
+                <li><a href="#building" class="nav-link">Building from Source</a></li>
+                <li><a href="#contributing" class="nav-link">Contributing</a></li>
+                <li><a href="#testing" class="nav-link">Testing</a></li>
+            </ul>
+        </div>
+    </nav>
 
-            <div class="glass-card" id="getting-started">
-                <h2>Getting Started</h2>
-                <div class="section-content">
-                    <h3>System Requirements</h3>
-                    <ul>
-                        <li>Java Development Kit (JDK) 17 or higher</li>
-                        <li>Gradle (bundled with our distribution)</li>
-                        <li>Basic familiarity with command-line interfaces</li>
-                    </ul>
-
-                    <h3>Quick Start</h3>
-                    <ol>
-                        <li>
-                            <strong>Download and Install:</strong>
-                            <div class="code-block">
-                                <code>git clone https://github.com/VerisimilitudeX/DNAnalyzer.git</code>
-                            </div>
-                        </li>
-                        <li>
-                            <strong>Navigate to Directory:</strong>
-                            <div class="code-block">
-                                <code>cd DNAnalyzer</code>
-                            </div>
-                        </li>
-                        <li>
-                            <strong>Build the Project:</strong>
-                            <div class="code-block">
-                                <code>./gradlew clean bootJar</code>
-                            </div>
-                        </li>
-                    </ol>
+    <main class="docs-content">
+        <section id="installation" class="content-section">
+            <h2>Installation</h2>
+            <p>Get started with DNAnalyzer by following these installation steps:</p>
+
+            <div class="code-block">
+                <div class="code-header">
+                    <span class="code-language">bash</span>
+                    <button class="copy-button">Copy</button>
                 </div>
+                <pre><code># Clone the repository
+git clone https://github.com/VerisimilitudeX/DNAnalyzer.git
+
+# Navigate to project directory
+cd DNAnalyzer
+
+# Build the project
+./gradlew clean bootJar</code></pre>
             </div>
 
-            <div class="glass-card" id="features">
-                <h2>Features in Detail</h2>
-                <div class="section-content">
-                    <div class="feature-item">
-                        <h3>Start and Stop Codon Detection</h3>
-                        <p>Understanding where a protein begins and ends is crucial for interpreting genetic data. DNAnalyzer pinpoints these codons, providing insights into the protein synthesis process and potential areas of interest for further study.</p>
-                    </div>
-
-                    <div class="feature-item">
-                        <h3>High Coverage Region Identification</h3>
-                        <p>Regions rich in guanine and cytosine (GC-content) often indicate important promoter sequences. Our tool analyzes these areas, helping to predict gene activity and regulatory potential.</p>
-                    </div>
-
-                    <div class="feature-item">
-                        <h3>Neurodevelopmental Disorders Analysis</h3>
-                        <p>Longer genes are sometimes linked to disorders affecting brain development. By detecting genetic markers associated with conditions like autism and ADHD, DNAnalyzer supports research into complex neurodevelopmental issues.</p>
-                    </div>
-
-                    <div class="feature-item">
-                        <h3>Core Promoter Element Analysis</h3>
-                        <p>Essential sequences such as BRE, TATA, INR, and DPE are critical for initiating transcription. DNAnalyzer not only identifies these elements but also interprets their roles in gene regulation.</p>
-                    </div>
+            <div class="note-block note-info">
+                <h4>System Requirements</h4>
+                <ul>
+                    <li>Java Development Kit (JDK) 17 or higher</li>
+                    <li>Gradle (bundled with distribution)</li>
+                    <li>2GB+ RAM recommended</li>
+                    <li>Basic command-line knowledge</li>
+                </ul>
+            </div>
+        </section>
+
+        <section id="quickstart" class="content-section">
+            <h2>Quick Start</h2>
+            <p>Start analyzing DNA sequences in minutes:</p>
+
+            <div class="code-block">
+                <div class="code-header">
+                    <span class="code-language">bash</span>
+                    <button class="copy-button">Copy</button>
                 </div>
+                <pre><code># Run the analyzer with a sample file
+java -jar build/libs/DNAnalyzer.jar assets/dna/example/test.fa</code></pre>
             </div>
 
-            <div class="glass-card" id="cli">
-                <h2>CLI Usage</h2>
-                <div class="section-content">
-                    <h3>Basic Commands</h3>
-                    <div class="code-block">
-                        <code>java -jar build/libs/DNAnalyzer.jar [file] [options]</code>
-                    </div>
-
-                    <h3>Common Options</h3>
-                    <ul class="options-list">
-                        <li><code>--amino=X</code> - Specify start amino acid (e.g., ser, met)</li>
-                        <li><code>--min=X</code> - Minimum sequence length</li>
-                        <li><code>--max=X</code> - Maximum sequence length</li>
-                        <li><code>-r</code> - Reverse sequence analysis</li>
-                    </ul>
-
-                    <h3>Example Usage</h3>
-                    <div class="code-block">
-                        <code>java -jar build/libs/DNAnalyzer.jar assets/dna/random/dnalong.fa --amino=ser --min=16450 --max=520218 -r</code>
-                    </div>
+            <div class="note-block note-warning">
+                <h4>Important</h4>
+                <p>Make sure your DNA sequence file is in FASTA format (.fa, .fasta)</p>
+            </div>
+        </section>
+
+        <section id="sequence-analysis" class="content-section">
+            <h2>Sequence Analysis</h2>
+            <p>DNAnalyzer provides comprehensive DNA sequence analysis capabilities:</p>
+
+            <table class="docs-table">
+                <thead>
+                    <tr>
+                        <th>Feature</th>
+                        <th>Description</th>
+                        <th>Usage</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Basic Analysis</td>
+                        <td>Sequence length, GC content, base composition</td>
+                        <td><code>--basic</code></td>
+                    </tr>
+                    <tr>
+                        <td>Advanced Analysis</td>
+                        <td>Motif finding, pattern matching</td>
+                        <td><code>--advanced</code></td>
+                    </tr>
+                    <tr>
+                        <td>Full Analysis</td>
+                        <td>Complete sequence analysis with all features</td>
+                        <td><code>--full</code></td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+        <section id="cli-usage" class="content-section">
+            <h2>CLI Usage</h2>
+            <p>DNAnalyzer provides a comprehensive command-line interface:</p>
+
+            <div class="code-block">
+                <div class="code-header">
+                    <span class="code-language">bash</span>
+                    <button class="copy-button">Copy</button>
                 </div>
+                <pre><code># Basic usage
+java -jar build/libs/DNAnalyzer.jar [file] [options]
+
+# Example with options
+java -jar build/libs/DNAnalyzer.jar input.fa --amino=ser --min=100 --max=1000 -r</code></pre>
             </div>
 
-            <div class="glass-card" id="api">
-                <h2>API Reference</h2>
-                <div class="section-content">
-                    <h3>Core Classes</h3>
-                    <ul class="api-list">
-                        <li>
-                            <code>DNAAnalysis</code>
-                            <p>Main analysis class containing core functionality</p>
-                        </li>
-                        <li>
-                            <code>DNAMutation</code>
-                            <p>Handles sequence mutations and variations</p>
-                        </li>
-                        <li>
-                            <code>DNADataUploader</code>
-                            <p>Manages file uploads and data preprocessing</p>
-                        </li>
-                    </ul>
+            <h3>Available Options</h3>
+            <table class="docs-table">
+                <thead>
+                    <tr>
+                        <th>Option</th>
+                        <th>Description</th>
+                        <th>Example</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><code>--amino=X</code></td>
+                        <td>Specify start amino acid</td>
+                        <td><code>--amino=ser</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>--min=X</code></td>
+                        <td>Minimum sequence length</td>
+                        <td><code>--min=100</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>--max=X</code></td>
+                        <td>Maximum sequence length</td>
+                        <td><code>--max=1000</code></td>
+                    </tr>
+                    <tr>
+                        <td><code>-r</code></td>
+                        <td>Reverse sequence analysis</td>
+                        <td><code>-r</code></td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+        <section id="api-reference" class="content-section">
+            <h2>API Reference</h2>
+            <p>Core classes and their functionalities:</p>
+
+            <div class="code-block">
+                <div class="code-header">
+                    <span class="code-language">java</span>
+                    <button class="copy-button">Copy</button>
                 </div>
+                <pre><code>// Initialize analyzer
+DNAAnalysis analyzer = new DNAAnalysis();
+
+// Analyze sequence
+AnalysisResult result = analyzer.analyze(sequence);
+
+// Get specific metrics
+double gcContent = result.getGCContent();
+List<String> codons = result.getCodons();</code></pre>
             </div>
 
-            <div class="glass-card" id="contribute">
-                <h2>Contributing</h2>
-                <div class="section-content">
-                    <h3>How to Contribute</h3>
-                    <ol>
-                        <li>Fork the repository</li>
-                        <li>Create a feature branch</li>
-                        <li>Make your changes</li>
-                        <li>Submit a pull request</li>
-                    </ol>
-
-                    <h3>Development Setup</h3>
-                    <div class="code-block">
-                        <code>./gradlew clean build</code>
-                    </div>
-
-                    <p>For detailed contribution guidelines, please refer to our <a href="https://github.com/VerisimilitudeX/DNAnalyzer/blob/main/CONTRIBUTING.md">Contributing Guide</a>.</p>
+            <h3>Core Classes</h3>
+            <ul>
+                <li><code>DNAAnalysis</code> - Main analysis class</li>
+                <li><code>DNAMutation</code> - Handles sequence mutations</li>
+                <li><code>DNADataUploader</code> - Manages file uploads</li>
+            </ul>
+        </section>
+
+        <section id="contributing" class="content-section">
+            <h2>Contributing</h2>
+            <p>We welcome contributions! Here's how to get started:</p>
+
+            <ol>
+                <li>Fork the repository</li>
+                <li>Create a feature branch (<code>git checkout -b feature/amazing-feature</code>)</li>
+                <li>Commit your changes (<code>git commit -m 'Add amazing feature'</code>)</li>
+                <li>Push to the branch (<code>git push origin feature/amazing-feature</code>)</li>
+                <li>Open a Pull Request</li>
+            </ol>
+
+            <div class="note-block note-info">
+                <h4>Development Setup</h4>
+                <div class="code-block">
+                    <pre><code>./gradlew clean build
+./gradlew test</code></pre>
                 </div>
             </div>
         </section>
     </main>
 
-    <footer class="glass-footer">
-        <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+    <footer class="footer-content">
+        <div class="footer-bottom">
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+        </div>
     </footer>
 
     <script src="docs.js"></script>
diff --git a/web/docs/docs.js b/web/docs/docs.js
index de1eb189..42fff4af 100644
--- a/web/docs/docs.js
+++ b/web/docs/docs.js
@@ -1,52 +1,77 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Smooth scrolling for anchor links
-    document.querySelectorAll('.docs-nav-item').forEach(anchor => {
-        anchor.addEventListener('click', function(e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href').substring(1);
-            const targetElement = document.getElementById(targetId);
+    const searchInput = document.querySelector('.search-input');
+    const navLinks = document.querySelectorAll('.nav-link');
+    const contentSections = document.querySelectorAll('.content-section');
+
+    // Search functionality
+    searchInput.addEventListener('input', function(e) {
+        const searchTerm = e.target.value.toLowerCase();
+        
+        // Search through all content sections
+        contentSections.forEach(section => {
+            const text = section.textContent.toLowerCase();
+            const matches = text.includes(searchTerm);
+            section.style.display = matches || searchTerm === '' ? 'block' : 'none';
             
-            if (targetElement) {
-                const headerOffset = 100;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+            // If section is visible, also highlight the corresponding nav link
+            const id = section.getAttribute('id');
+            const navLink = document.querySelector(`.nav-link[href="#${id}"]`);
+            if (navLink) {
+                navLink.style.display = matches || searchTerm === '' ? 'block' : 'none';
+            }
+        });
 
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: 'smooth'
-                });
+        // If search is empty, show all sections
+        if (searchTerm === '') {
+            contentSections.forEach(section => section.style.display = 'block');
+            navLinks.forEach(link => link.style.display = 'block');
+        }
+    });
 
-                // Update active state
-                document.querySelectorAll('.docs-nav-item').forEach(item => {
-                    item.classList.remove('active');
-                });
+    // Smooth scrolling for navigation links
+    navLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href').substring(1);
+            const targetSection = document.getElementById(targetId);
+            
+            if (targetSection) {
+                // Remove active class from all links
+                navLinks.forEach(link => link.classList.remove('active'));
+                // Add active class to clicked link
                 this.classList.add('active');
+                
+                // Smooth scroll to section
+                targetSection.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
             }
         });
     });
 
-    // Highlight current section based on scroll position
-    let sections = document.querySelectorAll('.glass-card[id]');
-    let navItems = document.querySelectorAll('.docs-nav-item');
-
-    function highlightNavItem() {
-        let scrollPosition = window.scrollY;
-
-        sections.forEach(section => {
-            const sectionTop = section.offsetTop - 120;
-            const sectionBottom = sectionTop + section.offsetHeight;
+    // Highlight current section in navigation based on scroll position
+    window.addEventListener('scroll', function() {
+        let currentSection = '';
+        
+        contentSections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.clientHeight;
+            if (window.pageYOffset >= sectionTop - 100) {
+                currentSection = section.getAttribute('id');
+            }
+        });
 
-            if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
-                const currentId = section.getAttribute('id');
-                navItems.forEach(item => {
-                    item.classList.remove('active');
-                    if (item.getAttribute('href') === `#${currentId}`) {
-                        item.classList.add('active');
-                    }
-                });
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === `#${currentSection}`) {
+                link.classList.add('active');
             }
         });
-    }
+    });
 
-    window.addEventListener('scroll', highlightNavItem);
-});
\ No newline at end of file
+    // Initial highlight of the first nav link
+    if (navLinks.length > 0) {
+        navLinks[0].classList.add('active');
+    }
+});
diff --git a/web/features/features.css b/web/features/features.css
index a5af67da..c26752c2 100644
--- a/web/features/features.css
+++ b/web/features/features.css
@@ -4,167 +4,223 @@
     padding: 2rem;
 }
 
-.hero-section {
+/* Hero Section */
+.hero {
     text-align: center;
-    padding: 4rem 0;
-    position: relative;
+    margin-bottom: 4rem;
 }
 
-.hero-section h1 {
-    font-size: 4rem;
-    margin-bottom: 1rem;
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
     background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-.subtitle {
+.hero p {
     font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.9);
-    max-width: 600px;
+    max-width: 800px;
     margin: 0 auto;
+    line-height: 1.8;
 }
 
-.feature-section {
-    padding: 6rem 0;
-    position: relative;
-    overflow: hidden;
+/* Features Grid */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 2rem;
+    margin: 4rem 0;
 }
 
-.feature-section.alt {
-    background: rgba(0, 0, 0, 0.2);
+.feature-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
 }
 
-.feature-showcase {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4rem;
-    align-items: center;
+.feature-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
-.feature-showcase.reverse {
-    direction: rtl;
+.feature-icon {
+    width: 60px;
+    height: 60px;
+    margin-bottom: 1rem;
 }
 
-.feature-showcase.reverse .feature-content {
-    direction: ltr;
+.feature-card h3 {
+    font-size: 1.8rem;
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
 }
 
-.feature-content {
-    padding: 2rem;
+.feature-card p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.1rem;
+    line-height: 1.6;
+    flex-grow: 1;
 }
 
-.feature-content h2 {
+/* Demo Section */
+.demo-section {
+    margin: 6rem 0;
+    padding: 3rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+}
+
+.demo-section h2 {
     font-size: 2.5rem;
-    margin-bottom: 1.5rem;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    margin-bottom: 2rem;
+    color: var(--gradient-end);
 }
 
-.feature-content p {
-    font-size: 1.1rem;
-    color: rgba(255, 255, 255, 0.9);
-    line-height: 1.8;
+.demo-video {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.demo-video video {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Comparison Table */
+.comparison-section {
+    margin: 6rem 0;
+}
+
+.comparison-section h2 {
+    font-size: 2.5rem;
     margin-bottom: 2rem;
+    text-align: center;
+    color: var(--gradient-end);
 }
 
-.feature-list {
-    list-style: none;
+.comparison-table {
+    width: 100%;
+    border-collapse: collapse;
     margin: 2rem 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    overflow: hidden;
 }
 
-.feature-list li {
-    margin: 1rem 0;
-    padding-left: 2rem;
-    position: relative;
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 1.1rem;
-    opacity: 0;
-    transform: translateX(-20px);
-    transition: all 0.5s ease;
-}
-
-.feature-list li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: 8px;
-    height: 8px;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    border-radius: 50%;
-    transform: translateY(-50%);
+.comparison-table th,
+.comparison-table td {
+    padding: 1.5rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.comparison-table th {
+    background: rgba(0, 0, 0, 0.3);
+    color: var(--gradient-end);
+    font-weight: 600;
+}
+
+.comparison-table tr:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.check-icon {
+    color: #00c853;
+    font-size: 1.2rem;
 }
 
-.feature-visual {
-    position: relative;
-    height: 400px;
+.x-icon {
+    color: #ff3d00;
+    font-size: 1.2rem;
+}
+
+/* Technical Features */
+.technical-section {
+    margin: 6rem 0;
+}
+
+.technical-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+}
+
+.technical-card {
+    background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
 }
 
-.feature-visual video {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.technical-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
-.feature-image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.technical-card h3 {
+    font-size: 1.5rem;
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
 }
 
-.coverage-animation {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg,
-        rgba(0, 122, 255, 0.2) 0%,
-        rgba(0, 191, 255, 0.4) 25%,
-        rgba(0, 122, 255, 0.6) 50%,
-        rgba(0, 191, 255, 0.4) 75%,
-        rgba(0, 122, 255, 0.2) 100%
-    );
-    animation: wave 3s infinite linear;
-}
-
-.server-animation {
-    width: 100%;
-    height: 100%;
-    background: 
-        linear-gradient(45deg, transparent 0%, transparent 45%, 
-        rgba(0, 122, 255, 0.1) 45%, rgba(0, 122, 255, 0.1) 55%, 
-        transparent 55%, transparent 100%),
-        linear-gradient(-45deg, transparent 0%, transparent 45%, 
-        rgba(0, 191, 255, 0.1) 45%, rgba(0, 191, 255, 0.1) 55%, 
-        transparent 55%, transparent 100%);
-    background-size: 30px 30px;
-    animation: serverPulse 2s infinite linear;
+.technical-card ul {
+    list-style: none;
+    padding: 0;
+}
+
+.technical-card li {
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
+.technical-card li::before {
+    content: '•';
+    color: var(--gradient-end);
+    font-size: 1.5rem;
+    line-height: 1;
+}
+
+/* CTA Section */
 .cta-section {
+    margin: 6rem 0;
     text-align: center;
-    padding: 6rem 2rem;
-    background: rgba(255, 255, 255, 0.05);
+    padding: 4rem;
+    background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
-    margin: 4rem 0;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .cta-section h2 {
     font-size: 2.5rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    margin-bottom: 1.5rem;
+    color: var(--gradient-end);
 }
 
 .cta-section p {
     font-size: 1.2rem;
     color: rgba(255, 255, 255, 0.9);
-    margin-bottom: 2rem;
+    max-width: 600px;
+    margin: 0 auto 2rem;
+    line-height: 1.8;
 }
 
 .cta-buttons {
@@ -173,69 +229,36 @@
     justify-content: center;
 }
 
-@keyframes wave {
-    0% {
-        background-position: 0% 50%;
-    }
-    100% {
-        background-position: 100% 50%;
-    }
-}
-
-@keyframes serverPulse {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: 30px 30px;
-    }
-}
-
-@media (max-width: 1024px) {
-    .feature-showcase {
-        grid-template-columns: 1fr;
-        gap: 2rem;
-    }
-
-    .feature-showcase.reverse {
-        direction: ltr;
-    }
-
-    .feature-content {
+/* Responsive Design */
+@media screen and (max-width: 768px) {
+    .container {
+        margin: 4rem 1rem 2rem;
         padding: 1rem;
     }
 
-    .feature-visual {
-        height: 300px;
+    .hero h1 {
+        font-size: 2.5rem;
     }
 
-    .hero-section h1 {
-        font-size: 3rem;
-    }
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 1rem;
-    }
-
-    .hero-section {
-        padding: 2rem 0;
+    .features-grid {
+        grid-template-columns: 1fr;
     }
 
-    .feature-section {
-        padding: 3rem 0;
+    .demo-section,
+    .cta-section {
+        padding: 2rem 1rem;
     }
 
-    .feature-content h2 {
-        font-size: 2rem;
+    .comparison-table {
+        display: block;
+        overflow-x: auto;
     }
 
     .cta-buttons {
         flex-direction: column;
     }
 
-    .cta-section {
-        padding: 3rem 1rem;
+    .technical-grid {
+        grid-template-columns: 1fr;
     }
 }
\ No newline at end of file
diff --git a/web/features/features.html b/web/features/features.html
index 4882ed02..aa89a6cc 100644
--- a/web/features/features.html
+++ b/web/features/features.html
@@ -6,7 +6,8 @@
     <title>Features - DNAnalyzer</title>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="features.css">
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
@@ -25,132 +26,130 @@
             <a href="../server/server.html" class="nav-link">Server</a>
             <a href="../docs/docs.html" class="nav-link">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
 
     <main class="container">
-        <section class="hero-section">
+        <section class="hero">
             <h1>Features</h1>
-            <p class="subtitle">Discover the power of DNAnalyzer's advanced capabilities</p>
+            <p>Discover the power of DNAnalyzer's advanced capabilities</p>
         </section>
 
-        <section class="feature-section">
-            <div class="feature-showcase">
-                <div class="feature-content">
-                    <h2>Web DNA Analyzer</h2>
-                    <p>Analyze DNA sequences directly through your web browser with our powerful web interface. Upload FASTA/FASTQ files and get instant analysis with customizable parameters.</p>
-                    <ul class="feature-list">
-                        <li>Intuitive Web Interface</li>
-                        <li>Real-time Analysis</li>
-                        <li>Customizable Parameters</li>
-                        <li>Multiple File Formats</li>
-                    </ul>
-                    <button class="primary-btn" onclick="window.location.href='../analyzer/analyzer.html'">Try Analyzer</button>
-                </div>
-                <div class="feature-visual">
-                    <video autoplay loop muted playsinline>
-                        <source src="../assets/videos/dna_spiral.mp4" type="video/mp4">
-                    </video>
-                </div>
+        <section class="features-grid">
+            <div class="feature-card">
+                <img src="../assets/icons/Icon_Base.svg" alt="Web Analysis" class="feature-icon">
+                <h3>Web DNA Analyzer</h3>
+                <p>Analyze DNA sequences directly through your web browser. Upload FASTA/FASTQ files and get instant analysis with customizable parameters.</p>
+                <a href="../analyzer/analyzer.html" class="primary-btn">Try Analyzer</a>
+            </div>
+
+            <div class="feature-card">
+                <img src="../assets/icons/Icon_Dark_BG.svg" alt="Codon Analysis" class="feature-icon">
+                <h3>Codon Detection</h3>
+                <p>Identify start and stop codons across all 20 amino acids with high accuracy. Get detailed codon analysis and protein sequence predictions.</p>
+            </div>
+
+            <div class="feature-card">
+                <img src="../assets/icons/emblem-dark-bg.svg" alt="Coverage Analysis" class="feature-icon">
+                <h3>Coverage Analysis</h3>
+                <p>Identify high-coverage regions and analyze sequence depth. Perfect for detecting important genetic elements and variations.</p>
             </div>
         </section>
 
-        <section class="feature-section alt">
-            <div class="feature-showcase reverse">
-                <div class="feature-content">
-                    <h2>Start and Stop Codons</h2>
-                    <p>Identify start and stop codons across all 20 amino acids. Our advanced algorithms detect protein sequences with high accuracy and provide detailed codon analysis.</p>
-                    <ul class="feature-list">
-                        <li>Comprehensive Codon Detection</li>
-                        <li>High Accuracy Analysis</li>
-                        <li>Detailed Results</li>
-                        <li>Multiple Amino Acid Support</li>
-                    </ul>
-                </div>
-                <div class="feature-visual">
-                    <img src="../assets/full.png" alt="Codon Analysis" class="feature-image">
-                </div>
+        <section class="demo-section">
+            <h2>See It In Action</h2>
+            <div class="demo-video">
+                <video autoplay loop muted playsinline>
+                    <source src="../assets/videos/dna_spiral.mp4" type="video/mp4">
+                </video>
             </div>
         </section>
 
-        <section class="feature-section">
-            <div class="feature-showcase">
-                <div class="feature-content">
-                    <h2>Coverage Analysis</h2>
-                    <p>Identify high-coverage regions and analyze sequence depth. Perfect for detecting important genetic elements and potential variations.</p>
-                    <ul class="feature-list">
-                        <li>Depth Analysis</li>
-                        <li>Region Identification</li>
-                        <li>Variation Detection</li>
-                        <li>Statistical Insights</li>
+        <section class="comparison-section">
+            <h2>Feature Comparison</h2>
+            <table class="comparison-table">
+                <thead>
+                    <tr>
+                        <th>Feature</th>
+                        <th>DNAnalyzer</th>
+                        <th>Traditional Tools</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Web Interface</td>
+                        <td><i class="fas fa-check check-icon"></i></td>
+                        <td><i class="fas fa-times x-icon"></i></td>
+                    </tr>
+                    <tr>
+                        <td>Real-time Analysis</td>
+                        <td><i class="fas fa-check check-icon"></i></td>
+                        <td><i class="fas fa-times x-icon"></i></td>
+                    </tr>
+                    <tr>
+                        <td>Multiple File Formats</td>
+                        <td><i class="fas fa-check check-icon"></i></td>
+                        <td><i class="fas fa-check check-icon"></i></td>
+                    </tr>
+                    <tr>
+                        <td>Local Server Support</td>
+                        <td><i class="fas fa-check check-icon"></i></td>
+                        <td><i class="fas fa-times x-icon"></i></td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+        <section class="technical-section">
+            <div class="technical-grid">
+                <div class="technical-card">
+                    <h3>Analysis Features</h3>
+                    <ul>
+                        <li>Start/Stop Codon Detection</li>
+                        <li>High Coverage Region Analysis</li>
+                        <li>Neurodevelopmental Markers</li>
+                        <li>Promoter Element Detection</li>
                     </ul>
                 </div>
-                <div class="feature-visual">
-                    <div class="coverage-animation"></div>
-                </div>
-            </div>
-        </section>
 
-        <section class="feature-section alt">
-            <div class="feature-showcase reverse">
-                <div class="feature-content">
-                    <h2>Local Server Support</h2>
-                    <p>Run analyses locally with our high-performance server. Ensures data privacy and faster processing for large sequences.</p>
-                    <ul class="feature-list">
-                        <li>Private Analysis</li>
-                        <li>Fast Processing</li>
-                        <li>Large File Support</li>
-                        <li>Secure Environment</li>
+                <div class="technical-card">
+                    <h3>File Support</h3>
+                    <ul>
+                        <li>FASTA Format (.fa, .fasta)</li>
+                        <li>FASTQ Format (.fastq)</li>
+                        <li>Plain Text (.txt)</li>
+                        <li>Large File Processing</li>
                     </ul>
-                    <button class="primary-btn" onclick="window.location.href='../server/server.html'">Server Setup</button>
                 </div>
-                <div class="feature-visual">
-                    <div class="server-animation"></div>
+
+                <div class="technical-card">
+                    <h3>Advanced Features</h3>
+                    <ul>
+                        <li>Machine Learning Analysis</li>
+                        <li>Real-time Processing</li>
+                        <li>Custom Parameter Support</li>
+                        <li>Detailed Result Reports</li>
+                    </ul>
                 </div>
             </div>
         </section>
 
         <section class="cta-section">
             <h2>Ready to Start Analyzing?</h2>
-            <p>Experience the power of DNAnalyzer's features firsthand.</p>
+            <p>Experience the power of DNAnalyzer's features firsthand</p>
             <div class="cta-buttons">
-                <button class="primary-btn" onclick="window.location.href='../analyzer/analyzer.html'">Try DNA Analysis</button>
-                <button class="secondary-btn" onclick="window.location.href='../docs/docs.html'">Read Documentation</button>
+                <a href="../analyzer/analyzer.html" class="primary-btn">Try DNA Analysis</a>
+                <a href="../docs/docs.html" class="secondary-btn">Read Documentation</a>
             </div>
         </section>
     </main>
 
-    <footer class="glass-footer">
-        <div class="footer-content">
-            <div class="footer-section">
-                <img src="../assets/icons/Icon_Base.svg" alt="DNAnalyzer Logo" class="footer-logo">
-                <p>DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit.</p>
-                <p>EIN: 81-2908499</p>
-            </div>
-            <div class="footer-section">
-                <h4>Quick Links</h4>
-                <a href="../about/about.html">About</a>
-                <a href="features.html">Features</a>
-                <a href="../docs/docs.html">Documentation</a>
-            </div>
-            <div class="footer-section">
-                <h4>Resources</h4>
-                <a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a>
-                <a href="https://discord.gg/xNpujz49gj">Discord</a>
-                <a href="../docs/docs.html#api">API Reference</a>
-            </div>
-            <div class="footer-section">
-                <h4>Legal</h4>
-                <a href="#">Privacy Policy</a>
-                <a href="#">Terms of Service</a>
-                <a href="#">MIT License</a>
-            </div>
-        </div>
+    <footer class="footer-content">
         <div class="footer-bottom">
-            <p>Copyright © Piyush Acharya 2025. All rights reserved.</p>
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
         </div>
     </footer>
 
diff --git a/web/index.html b/web/index.html
index 07dba634..c8eadb54 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DNAnalyzer - DNA Sequence Analysis Tool</title>
     <link rel="stylesheet" href="style.css">
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
@@ -24,8 +25,8 @@
             <a href="server/server.html" class="nav-link">Server</a>
             <a href="docs/docs.html" class="nav-link">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
@@ -37,15 +38,12 @@
                     <h1>DNAnalyzer</h1>
                     <p class="hero-subtitle">Revolutionizing DNA analysis using ML-powered on-device computation for everyone.</p>
                     <div class="cta-buttons">
-                        <button class="primary-btn" onclick="window.location.href='analyzer/analyzer.html'">Try DNA Analysis</button>
-                        <button class="secondary-btn" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">View on GitHub</button>
+                        <a href="analyzer/analyzer.html" class="primary-btn">Try DNA Analysis</a>
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="secondary-btn">View on GitHub</a>
                     </div>
                 </div>
                 <div class="hero-visual">
-                    <div class="dna-helix">
-                        <div class="strand"></div>
-                        <div class="strand"></div>
-                    </div>
+                    <div class="dna-helix"></div>
                 </div>
             </div>
             <div class="scroll-indicator">
@@ -54,7 +52,7 @@ <h1>DNAnalyzer</h1>
             </div>
         </section>
 
-        <section id="stats" class="scroll-section">
+        <section id="stats">
             <div class="stats-grid">
                 <div class="stat-item">
                     <div class="stat-number">99.9%</div>
@@ -75,15 +73,13 @@ <h1>DNAnalyzer</h1>
             </div>
         </section>
 
-        <section id="features-overview" class="scroll-section">
+        <section id="features-overview">
             <div class="content-wrapper">
                 <h2>Why Choose DNAnalyzer?</h2>
                 <div class="features-showcase">
                     <div class="feature-highlight">
                         <div class="feature-visual">
-                            <video autoplay loop muted playsinline>
-                                <source src="assets/videos/dna_spiral.mp4" type="video/mp4">
-                            </video>
+                            <i class="fas fa-dna"></i>
                         </div>
                         <div class="feature-content">
                             <h3>Advanced Analysis</h3>
@@ -100,7 +96,7 @@ <h3>Advanced Analysis</h3>
             </div>
         </section>
 
-        <section id="workflow" class="scroll-section">
+        <section id="workflow">
             <div class="content-wrapper">
                 <h2>How It Works</h2>
                 <div class="workflow-steps">
@@ -108,25 +104,25 @@ <h2>How It Works</h2>
                         <div class="step-number">01</div>
                         <h3>Upload</h3>
                         <p>Upload your DNA sequence file in FASTA or FASTQ format</p>
-                        <div class="step-visual upload-animation"></div>
+                        <i class="fas fa-upload"></i>
                     </div>
                     <div class="step">
                         <div class="step-number">02</div>
                         <h3>Analyze</h3>
                         <p>Our ML algorithms process and analyze your sequence</p>
-                        <div class="step-visual analyze-animation"></div>
+                        <i class="fas fa-microscope"></i>
                     </div>
                     <div class="step">
                         <div class="step-number">03</div>
                         <h3>Results</h3>
                         <p>Get comprehensive analysis results and insights</p>
-                        <div class="step-visual results-animation"></div>
+                        <i class="fas fa-chart-bar"></i>
                     </div>
                 </div>
             </div>
         </section>
 
-        <section id="security" class="scroll-section">
+        <section id="security">
             <div class="content-wrapper">
                 <div class="security-grid">
                     <div class="security-content">
@@ -134,68 +130,43 @@ <h2>Privacy & Security</h2>
                         <p>Your genetic data never leaves your device. All computations are performed locally using our advanced on-device ML models.</p>
                         <ul class="security-features">
                             <li>
-                                <div class="security-icon local"></div>
+                                <i class="fas fa-laptop-house"></i>
                                 <span>Local Processing</span>
                             </li>
                             <li>
-                                <div class="security-icon encrypted"></div>
+                                <i class="fas fa-shield-alt"></i>
                                 <span>End-to-End Encryption</span>
                             </li>
                             <li>
-                                <div class="security-icon private"></div>
+                                <i class="fas fa-user-shield"></i>
                                 <span>Data Privacy</span>
                             </li>
                         </ul>
                     </div>
                     <div class="security-visual">
-                        <div class="security-animation"></div>
+                        <i class="fas fa-lock"></i>
                     </div>
                 </div>
             </div>
         </section>
 
-        <section id="cta" class="scroll-section">
+        <section id="cta">
             <div class="content-wrapper">
                 <div class="cta-container">
                     <h2>Ready to Start?</h2>
                     <p>Join thousands of researchers and scientists using DNAnalyzer for their genetic analysis needs.</p>
                     <div class="cta-buttons">
-                        <button class="primary-btn" onclick="window.location.href='analyzer/analyzer.html'">Start Analyzing</button>
-                        <button class="secondary-btn" onclick="window.location.href='docs/docs.html'">Read Documentation</button>
+                        <a href="analyzer/analyzer.html" class="primary-btn">Start Analyzing</a>
+                        <a href="docs/docs.html" class="secondary-btn">Read Documentation</a>
                     </div>
                 </div>
             </div>
         </section>
     </main>
 
-    <footer class="glass-footer">
-        <div class="footer-content">
-            <div class="footer-section">
-                <img src="assets/icons/Icon_Base.svg" alt="DNAnalyzer Logo" class="footer-logo">
-                <p>DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit.</p>
-                <p>EIN: 81-2908499</p>
-            </div>
-            <div class="footer-section">
-                <h4>Quick Links</h4>
-                <a href="about/about.html">About</a>
-                <a href="features/features.html">Features</a>
-                <a href="docs/docs.html">Documentation</a>
-            </div>
-            <div class="footer-section">
-                <h4>Resources</h4>
-                <a href="https://github.com/VerisimilitudeX/DNAnalyzer">GitHub</a>
-                <a href="https://discord.gg/xNpujz49gj">Discord</a>
-                <a href="docs/docs.html#api">API Reference</a>
-            </div>
-            <div class="footer-section">
-                <h4>Legal</h4>
-                <a href="#">Privacy Policy</a>
-                <a href="#">Terms of Service</a>
-                <a href="#">MIT License</a>
-            </div>
-        </div>
+    <footer class="footer-content">
         <div class="footer-bottom">
-            <p>Copyright © Piyush Acharya 2025. All rights reserved.</p>
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
         </div>
     </footer>
 
diff --git a/web/index.js b/web/index.js
index 336d923f..dc2463db 100644
--- a/web/index.js
+++ b/web/index.js
@@ -1,164 +1,108 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // Intersection Observer for scroll animations
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('visible');
-                
-                // Animate stats when they come into view
-                if (entry.target.id === 'stats') {
-                    animateStats();
-                }
-            }
-        });
-    }, {
-        threshold: 0.1
-    });
+    // DNA Helix Animation
+    const dnaHelix = document.querySelector('.dna-helix');
+    const numBases = 20;
+    const baseTypes = ['A', 'T', 'C', 'G'];
+    
+    // Create base pairs
+    for (let i = 0; i < numBases; i++) {
+        const baseIndex = Math.floor(Math.random() * baseTypes.length);
+        const complementaryIndex = baseIndex % 2 === 0 ? baseIndex + 1 : baseIndex - 1;
+        
+        const leftBase = document.createElement('div');
+        leftBase.className = 'base left-base';
+        leftBase.textContent = baseTypes[baseIndex];
+        leftBase.style.animationDelay = `${i * 0.2}s`;
+        
+        const rightBase = document.createElement('div');
+        rightBase.className = 'base right-base';
+        rightBase.textContent = baseTypes[complementaryIndex];
+        rightBase.style.animationDelay = `${i * 0.2}s`;
+        
+        const connector = document.createElement('div');
+        connector.className = 'base-connector';
+        connector.style.animationDelay = `${i * 0.2}s`;
+        
+        const basePair = document.createElement('div');
+        basePair.className = 'base-pair';
+        basePair.style.top = `${i * 30}px`;
+        
+        basePair.appendChild(leftBase);
+        basePair.appendChild(connector);
+        basePair.appendChild(rightBase);
+        dnaHelix.appendChild(basePair);
+    }
 
-    // Observe all scroll sections
-    document.querySelectorAll('.scroll-section').forEach(section => {
-        observer.observe(section);
+    // Scroll Indicator
+    const scrollIndicator = document.querySelector('.scroll-indicator');
+    let lastScrollTop = 0;
+
+    window.addEventListener('scroll', () => {
+        const st = window.pageYOffset || document.documentElement.scrollTop;
+        
+        if (st > lastScrollTop) {
+            // Scrolling down
+            scrollIndicator.style.opacity = '0';
+        } else if (st === 0) {
+            // At top
+            scrollIndicator.style.opacity = '1';
+        }
+        
+        lastScrollTop = st <= 0 ? 0 : st;
     });
 
-    // Stats animation
-    function animateStats() {
-        document.querySelectorAll('.stat-number').forEach(stat => {
-            const target = parseInt(stat.textContent);
-            let current = 0;
-            const increment = target / 100;
-            const duration = 2000; // 2 seconds
-            const steps = 100;
-            const stepTime = duration / steps;
+    // Stats Animation
+    const stats = document.querySelectorAll('.stat-number');
+    const statsSection = document.querySelector('#stats');
+    let animated = false;
 
-            const timer = setInterval(() => {
-                current += increment;
-                if (current >= target) {
-                    stat.textContent = target + (stat.textContent.includes('%') ? '%' : '+');
-                    clearInterval(timer);
-                } else {
-                    stat.textContent = Math.floor(current) + (stat.textContent.includes('%') ? '%' : '+');
+    function animateStats() {
+        if (animated) return;
+        
+        stats.forEach(stat => {
+            const value = stat.textContent;
+            const isPercentage = value.includes('%');
+            const number = parseFloat(value);
+            let start = 0;
+            
+            const increment = number / 50; // Animate over 50 steps
+            const interval = setInterval(() => {
+                start += increment;
+                if (start >= number) {
+                    start = number;
+                    clearInterval(interval);
                 }
-            }, stepTime);
+                stat.textContent = isPercentage ? 
+                    start.toFixed(1) + '%' : 
+                    Math.round(start).toLocaleString();
+            }, 30);
         });
+        
+        animated = true;
     }
 
-    // Parallax effect for gradient spheres
-    document.addEventListener('mousemove', (e) => {
-        const spheres = document.querySelectorAll('.gradient-sphere');
-        const mouseX = e.clientX / window.innerWidth;
-        const mouseY = e.clientY / window.innerHeight;
-
-        spheres.forEach((sphere, index) => {
-            const depth = index === 0 ? 20 : 10;
-            const translateX = (mouseX - 0.5) * depth;
-            const translateY = (mouseY - 0.5) * depth;
-            sphere.style.transform = `translate(${translateX}px, ${translateY}px)`;
+    // Intersection Observer for stats animation
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                animateStats();
+            }
         });
-    });
+    }, { threshold: 0.5 });
+
+    observer.observe(statsSection);
 
     // Smooth scroll for navigation
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-        anchor.addEventListener('click', function(e) {
+        anchor.addEventListener('click', function (e) {
             e.preventDefault();
-            const targetId = this.getAttribute('href').substring(1);
-            const targetElement = document.getElementById(targetId);
-            
-            if (targetElement) {
-                const headerOffset = 80;
-                const elementPosition = targetElement.getBoundingClientRect().top;
-                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-
-                window.scrollTo({
-                    top: offsetPosition,
-                    behavior: 'smooth'
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
                 });
             }
         });
     });
-
-    // DNA Helix Animation
-    const dnaHelix = document.querySelector('.dna-helix');
-    if (dnaHelix) {
-        const numBases = 20;
-        for (let i = 0; i < numBases; i++) {
-            const base = document.createElement('div');
-            base.className = 'dna-base';
-            base.style.top = `${(i / numBases) * 100}%`;
-            base.style.animationDelay = `${i * 0.1}s`;
-            dnaHelix.appendChild(base);
-        }
-    }
-
-    // Feature list animation
-    document.querySelectorAll('.feature-list li').forEach((item, index) => {
-        item.style.opacity = '0';
-        item.style.transform = 'translateX(-20px)';
-        setTimeout(() => {
-            item.style.transition = 'all 0.5s ease';
-            item.style.opacity = '1';
-            item.style.transform = 'translateX(0)';
-        }, index * 200);
-    });
-
-    // Security features animation
-    document.querySelectorAll('.security-features li').forEach((item, index) => {
-        item.style.opacity = '0';
-        item.style.transform = 'translateY(20px)';
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    setTimeout(() => {
-                        item.style.transition = 'all 0.5s ease';
-                        item.style.opacity = '1';
-                        item.style.transform = 'translateY(0)';
-                    }, index * 200);
-                    observer.unobserve(item);
-                }
-            });
-        });
-        observer.observe(item);
-    });
-
-    // Workflow steps animation
-    document.querySelectorAll('.step').forEach((step, index) => {
-        step.style.opacity = '0';
-        step.style.transform = 'translateY(20px)';
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    setTimeout(() => {
-                        step.style.transition = 'all 0.5s ease';
-                        step.style.opacity = '1';
-                        step.style.transform = 'translateY(0)';
-                    }, index * 200);
-                    observer.unobserve(step);
-                }
-            });
-        });
-        observer.observe(step);
-    });
-
-    // Scroll indicator fade out
-    const scrollIndicator = document.querySelector('.scroll-indicator');
-    if (scrollIndicator) {
-        window.addEventListener('scroll', () => {
-            const scrollPosition = window.scrollY;
-            if (scrollPosition > 100) {
-                scrollIndicator.style.opacity = '0';
-            } else {
-                scrollIndicator.style.opacity = '1';
-            }
-        });
-    }
-
-    // Initial check for visible sections
-    document.querySelectorAll('.scroll-section').forEach(section => {
-        const rect = section.getBoundingClientRect();
-        if (rect.top < window.innerHeight) {
-            section.classList.add('visible');
-            if (section.id === 'stats') {
-                animateStats();
-            }
-        }
-    });
 });
\ No newline at end of file
diff --git a/web/server/server.css b/web/server/server.css
index 649a4dc7..907f546a 100644
--- a/web/server/server.css
+++ b/web/server/server.css
@@ -1,214 +1,276 @@
-/* Server page specific styles */
 .container {
     max-width: 1200px;
     margin: 6rem auto 2rem;
     padding: 2rem;
 }
 
-.server-setup-section {
+/* Hero Section */
+.hero {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.hero h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1.5rem;
+    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.hero p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    max-width: 800px;
+    margin: 0 auto;
+    line-height: 1.8;
+}
+
+/* Server Status Section */
+.status-section {
+    margin: 4rem 0;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
     margin-top: 2rem;
 }
 
-.glass-card {
+.status-card {
     background: rgba(255, 255, 255, 0.05);
-    padding: 2rem;
-    margin-bottom: 2rem;
     border-radius: 12px;
+    padding: 2rem;
+    text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
     transition: all 0.3s ease;
 }
 
-.glass-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+.status-card:hover {
+    transform: translateY(-5px);
     border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
-.glass-card h2 {
-    font-size: 1.8rem;
-    margin-bottom: 1.5rem;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-align: left;
+.status-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
 }
 
-#server-status {
-    margin-top: 1rem;
-    padding: 1.5rem;
-    border-radius: 8px;
+.status-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.status-value {
+    font-size: 2rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.status-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.1rem;
+}
+
+/* API Key Section */
+.api-section {
+    margin: 4rem 0;
+    padding: 2rem;
     background: rgba(0, 0, 0, 0.2);
-    font-family: 'IBM Plex Mono', monospace;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-#server-status small {
+.api-section h2 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    color: var(--gradient-end);
+}
+
+.api-form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
     display: block;
-    margin-top: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1.1rem;
 }
 
-.command-box {
-    display: flex;
-    align-items: center;
+.form-group input {
+    width: 100%;
+    padding: 1rem;
     background: rgba(0, 0, 0, 0.3);
-    padding: 1rem 1.2rem;
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 8px;
-    margin: 0.5rem 0;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    gap: 1rem;
+    color: white;
+    font-size: 1rem;
+    font-family: 'IBM Plex Mono', monospace;
 }
 
-.command-box code {
-    flex-grow: 1;
-    font-family: 'IBM Plex Mono', monospace;
-    color: #10B981;
-    font-size: 0.9rem;
-    overflow-x: auto;
-    white-space: nowrap;
+.form-group input:focus {
+    outline: none;
+    border-color: var(--gradient-start);
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
 }
 
-.copy-button {
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    color: white;
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
+/* Documentation Section */
+.docs-section {
+    margin: 4rem 0;
+}
+
+.endpoint-list {
+    display: grid;
+    gap: 2rem;
+}
+
+.endpoint-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 2rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
-    font-size: 0.9rem;
 }
 
-.copy-button:hover {
-    background: rgba(255, 255, 255, 0.15);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+.endpoint-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
-.copy-button:active {
-    transform: translateY(0);
+.endpoint-method {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
-.setup-steps {
-    list-style-position: inside;
-    padding: 0;
-    margin: 1.5rem 0;
-    counter-reset: step;
+.method-get {
+    background: rgba(0, 200, 83, 0.2);
+    color: #00c853;
 }
 
-.setup-steps li {
-    margin-bottom: 2rem;
-    position: relative;
-    padding-left: 2.5rem;
+.method-post {
+    background: rgba(0, 122, 255, 0.2);
+    color: #007bff;
 }
 
-.setup-steps li::before {
-    counter-increment: step;
-    content: counter(step);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 1.8rem;
-    height: 1.8rem;
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.9rem;
-    color: white;
+.endpoint-url {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 1rem;
+    padding: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    overflow-x: auto;
 }
 
-.setup-steps li p {
-    margin-bottom: 0.5rem;
+.endpoint-description {
     color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    line-height: 1.6;
+    margin-bottom: 1.5rem;
 }
 
-.troubleshooting {
-    margin-top: 2rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+.endpoint-params {
+    margin-top: 1.5rem;
 }
 
-.issue-item {
-    margin-bottom: 2rem;
+.param-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
 }
 
-.issue-item h4 {
-    color: var(--gradient-end);
-    margin-bottom: 0.8rem;
-    font-size: 1.1rem;
+.param-table th,
+.param-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.issue-item ul {
-    list-style: disc;
-    padding-left: 1.2rem;
-    margin: 0.8rem 0;
+.param-table th {
+    color: var(--gradient-end);
+    font-weight: 600;
 }
 
-.issue-item ul li {
-    color: rgba(255, 255, 255, 0.8);
-    margin: 0.4rem 0;
+.param-required {
+    color: #dc3545;
+    font-weight: 600;
 }
 
-.requirements-note {
+/* Response Section */
+.response-example {
     margin-top: 1.5rem;
     padding: 1.5rem;
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    font-family: 'IBM Plex Mono', monospace;
+    overflow-x: auto;
 }
 
-.requirements-note ul {
-    list-style: none;
-    padding: 0;
-    margin: 0.8rem 0;
+.response-example pre {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.9);
 }
 
-.requirements-note ul li {
-    color: rgba(255, 255, 255, 0.9);
-    margin: 0.4rem 0;
-    display: flex;
-    align-items: center;
+/* Buttons */
+.submit-btn {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    color: white;
+    border: none;
+    padding: 1rem 2rem;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    width: 100%;
 }
 
-.requirements-note ul li::before {
-    content: '✓';
-    color: var(--success-color);
-    margin-right: 0.5rem;
+.submit-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
 }
 
-@media (max-width: 768px) {
+/* Responsive Design */
+@media screen and (max-width: 768px) {
     .container {
         margin: 4rem 1rem 2rem;
         padding: 1rem;
     }
 
-    .glass-card {
-        padding: 1.5rem;
-    }
-
-    .command-box {
-        flex-direction: column;
-        align-items: stretch;
-        gap: 0.5rem;
-    }
-
-    .command-box code {
-        padding: 0.5rem;
-        background: rgba(0, 0, 0, 0.2);
-        border-radius: 4px;
+    .hero h1 {
+        font-size: 2.5rem;
     }
 
-    .copy-button {
-        width: 100%;
+    .status-grid {
+        grid-template-columns: 1fr;
     }
 
-    .setup-steps li {
-        padding-left: 2rem;
+    .endpoint-url {
+        font-size: 0.9rem;
     }
 
-    .glass-card h2 {
-        font-size: 1.5rem;
+    .param-table {
+        display: block;
+        overflow-x: auto;
     }
 }
\ No newline at end of file
diff --git a/web/server/server.html b/web/server/server.html
index 311cec85..6e5bada8 100644
--- a/web/server/server.html
+++ b/web/server/server.html
@@ -6,11 +6,14 @@
     <title>Server Setup - DNAnalyzer</title>
     <link rel="stylesheet" href="../style.css">
     <link rel="stylesheet" href="server.css">
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
     <link rel="shortcut icon" href="../assets/icons/Icon_Dark_BG.svg" type="image/svg+xml">
 </head>
 <body>
     <div class="background-blur"></div>
+    <div class="gradient-sphere"></div>
+    <div class="gradient-sphere secondary"></div>
     
     <header class="floating-header">
         <nav class="floating-nav">
@@ -21,102 +24,119 @@
             <a href="../features/features.html" class="nav-link">Features</a>
             <a href="../analyzer/analyzer.html" class="nav-link">Analyzer</a>
             <a href="server.html" class="nav-link active">Server</a>
+            <a href="../docs/docs.html" class="nav-link">Docs</a>
             <div class="right-links">
-                <button class="glass-button" onclick="window.location.href='https://github.com/VerisimilitudeX/DNAnalyzer'">GitHub</button>
-                <button class="glass-button" onclick="window.location.href='https://discord.gg/xNpujz49gj'">Discord</button>
+                <a href="https://github.com/VerisimilitudeX/DNAnalyzer" class="glass-button">GitHub</a>
+                <a href="https://discord.gg/xNpujz49gj" class="glass-button">Discord</a>
             </div>
         </nav>
     </header>
 
     <main class="container">
-        <section class="content-section">
+        <section class="hero">
             <h1>Server Setup</h1>
-            
-            <div class="glass-card server-setup-section">
-                <h2>Quick Start Guide</h2>
-                <ol class="setup-steps">
-                    <li>
-                        <p>Clone and navigate to the repository:</p>
-                        <div class="command-box">
-                            <code>git clone https://github.com/VerisimilitudeX/DNAnalyzer.git && cd DNAnalyzer</code>
-                            <button class="copy-button" onclick="copyCloneCommand()">Copy</button>
-                        </div>
-                    </li>
-                    <li>
-                        <p>Make the Gradle wrapper executable:</p>
-                        <div class="command-box">
-                            <code>chmod +x ./gradlew</code>
-                            <button class="copy-button" onclick="copyChmodCommand()">Copy</button>
-                        </div>
-                    </li>
-                    <li>
-                        <p>Build the project (this may take a few minutes):</p>
-                        <div class="command-box">
-                            <code>./gradlew clean bootJar</code>
-                            <button class="copy-button" onclick="copyBuildCommand()">Copy</button>
-                        </div>
-                    </li>
-                    <li>
-                        <p>Start the local server:</p>
-                        <div class="command-box">
-                            <code>java -jar build/libs/DNAnalyzer.jar</code>
-                            <button class="copy-button" onclick="copyRunCommand()">Copy</button>
-                        </div>
-                    </li>
-                </ol>
-                <div class="requirements-note">
-                    <p><strong>Requirements:</strong></p>
-                    <ul>
-                        <li>Java 17 or higher</li>
-                        <li>Port 8080 must be available</li>
-                        <li>Git installed</li>
-                        <li>At least 2GB of free RAM</li>
-                    </ul>
+            <p>Get started with DNAnalyzer's local server deployment</p>
+        </section>
+
+        <section class="status-section">
+            <div class="status-grid">
+                <div class="status-card">
+                    <i class="fas fa-server status-icon"></i>
+                    <h3>Server Status</h3>
+                    <div id="server-status" class="status-value">Checking...</div>
+                    <p class="status-label">Local Server</p>
+                </div>
+                <div class="status-card">
+                    <i class="fas fa-memory status-icon"></i>
+                    <h3>System Requirements</h3>
+                    <div class="status-value">2GB+</div>
+                    <p class="status-label">Minimum RAM</p>
+                </div>
+                <div class="status-card">
+                    <i class="fas fa-code-branch status-icon"></i>
+                    <h3>Version</h3>
+                    <div class="status-value">Java 17+</div>
+                    <p class="status-label">Required Runtime</p>
                 </div>
             </div>
+        </section>
 
-            <div class="glass-card">
-                <h2>Server Status</h2>
-                <div id="server-status">
-                    Checking server status...
+        <section class="api-section">
+            <h2>Quick Start Guide</h2>
+            <div class="endpoint-list">
+                <div class="endpoint-card">
+                    <span class="endpoint-method method-get">Step 1</span>
+                    <div class="endpoint-url">
+                        git clone https://github.com/VerisimilitudeX/DNAnalyzer.git && cd DNAnalyzer
+                    </div>
+                    <p class="endpoint-description">Clone and navigate to the repository</p>
                 </div>
-            </div>
 
-            <div class="glass-card">
-                <h2>Troubleshooting</h2>
-                <div class="troubleshooting">
-                    <h3>Common Issues</h3>
-                    <div class="issue-item">
-                        <h4>Port Already in Use</h4>
-                        <p>If port 8080 is already in use, you may see an error like "Address already in use". To fix this:</p>
-                        <ul>
-                            <li>Close any other applications using port 8080</li>
-                            <li>Or modify the port in application.yml</li>
-                        </ul>
+                <div class="endpoint-card">
+                    <span class="endpoint-method method-post">Step 2</span>
+                    <div class="endpoint-url">
+                        chmod +x ./gradlew
                     </div>
-                    <div class="issue-item">
-                        <h4>Java Version</h4>
-                        <p>If you see "UnsupportedClassVersionError", make sure you have Java 17+ installed:</p>
-                        <div class="command-box">
-                            <code>java -version</code>
-                        </div>
+                    <p class="endpoint-description">Make the Gradle wrapper executable</p>
+                </div>
+
+                <div class="endpoint-card">
+                    <span class="endpoint-method method-post">Step 3</span>
+                    <div class="endpoint-url">
+                        ./gradlew clean bootJar
                     </div>
-                    <div class="issue-item">
-                        <h4>Build Failures</h4>
-                        <p>For build errors, try:</p>
-                        <ul>
-                            <li>Running './gradlew clean' first</li>
-                            <li>Checking your Java installation</li>
-                            <li>Ensuring you have write permissions in the directory</li>
-                        </ul>
+                    <p class="endpoint-description">Build the project (this may take a few minutes)</p>
+                </div>
+
+                <div class="endpoint-card">
+                    <span class="endpoint-method method-get">Step 4</span>
+                    <div class="endpoint-url">
+                        java -jar build/libs/DNAnalyzer.jar
                     </div>
+                    <p class="endpoint-description">Start the local server</p>
+                </div>
+            </div>
+        </section>
+
+        <section class="docs-section">
+            <h2>Troubleshooting</h2>
+            <div class="endpoint-list">
+                <div class="endpoint-card">
+                    <h3><i class="fas fa-network-wired"></i> Port Already in Use</h3>
+                    <p class="endpoint-description">
+                        If port 8080 is already in use, you may see an error like "Address already in use". To fix this:
+                    </p>
+                    <ul>
+                        <li>Close any other applications using port 8080</li>
+                        <li>Or modify the port in application.yml</li>
+                    </ul>
+                </div>
+
+                <div class="endpoint-card">
+                    <h3><i class="fab fa-java"></i> Java Version</h3>
+                    <p class="endpoint-description">
+                        If you see "UnsupportedClassVersionError", make sure you have Java 17+ installed:
+                    </p>
+                    <div class="endpoint-url">java -version</div>
+                </div>
+
+                <div class="endpoint-card">
+                    <h3><i class="fas fa-exclamation-triangle"></i> Build Failures</h3>
+                    <p class="endpoint-description">For build errors, try:</p>
+                    <ul>
+                        <li>Running './gradlew clean' first</li>
+                        <li>Checking your Java installation</li>
+                        <li>Ensuring you have write permissions in the directory</li>
+                    </ul>
                 </div>
             </div>
         </section>
     </main>
 
-    <footer class="glass-footer">
-        <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+    <footer class="footer-content">
+        <div class="footer-bottom">
+            <p>Copyright © Piyush Acharya 2025. DNAnalyzer is a fiscally sponsored 501(c)(3) nonprofit (EIN: 81-2908499). MIT License.</p>
+        </div>
     </footer>
 
     <script src="server.js"></script>
diff --git a/web/style.css b/web/style.css
index 7bb13abc..a6a0ff88 100644
--- a/web/style.css
+++ b/web/style.css
@@ -54,7 +54,6 @@ body {
     right: -200px;
     z-index: -1;
     filter: blur(50px);
-    animation: float 20s infinite ease-in-out;
 }
 
 .gradient-sphere.secondary {
@@ -65,7 +64,6 @@ body {
     left: -100px;
     top: auto;
     right: auto;
-    animation-delay: -10s;
 }
 
 /* Navbar */
@@ -138,12 +136,12 @@ body {
     font-size: 0.95rem;
     cursor: pointer;
     transition: all 0.3s ease;
+    text-decoration: none;
 }
 
 .glass-button:hover {
     background: rgba(255, 255, 255, 0.15);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
 }
 
 .primary-btn, .secondary-btn {
@@ -156,6 +154,9 @@ body {
     text-transform: uppercase;
     letter-spacing: 1px;
     min-width: 200px;
+    text-decoration: none;
+    text-align: center;
+    display: inline-block;
 }
 
 .primary-btn {
@@ -172,13 +173,11 @@ body {
 }
 
 .primary-btn:hover {
-    transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
     filter: brightness(1.1);
 }
 
 .secondary-btn:hover {
-    transform: translateY(-2px);
     background: rgba(255, 255, 255, 0.15);
     box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
 }
@@ -190,7 +189,6 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: center;
     padding: 2rem;
     position: relative;
     overflow: hidden;
@@ -208,6 +206,7 @@ body {
 
 .hero-text {
     z-index: 1;
+    text-align: left;
 }
 
 .hero-text h1 {
@@ -217,7 +216,6 @@ body {
     background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .hero-subtitle {
@@ -231,61 +229,80 @@ body {
 .cta-buttons {
     display: flex;
     gap: 1.5rem;
-    margin-top: 2rem;
 }
 
-/* Scroll Sections */
-.scroll-section {
-    padding: 6rem 2rem;
-    opacity: 0;
-    transform: translateY(20px);
-    transition: all 0.6s ease;
+/* DNA Helix Animation */
+.hero-visual {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.scroll-section.visible {
-    opacity: 1;
-    transform: translateY(0);
+.dna-helix {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    perspective: 1000px;
 }
 
-/* Stats Section */
-#stats {
-    background: rgba(0, 0, 0, 0.2);
+.base-pair {
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.stats-grid {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 2rem;
+.base {
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'IBM Plex Mono', monospace;
+    font-weight: bold;
+    color: white;
+    position: absolute;
 }
 
-.stat-item {
-    text-align: center;
-    padding: 2rem;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: all 0.3s ease;
+.left-base {
+    background: var(--gradient-start);
+    left: calc(50% - 100px);
+    animation: moveLeft 4s ease-in-out infinite;
 }
 
-.stat-item:hover {
-    transform: translateY(-5px);
-    border-color: var(--gradient-end);
+.right-base {
+    background: var(--gradient-end);
+    right: calc(50% - 100px);
+    animation: moveRight 4s ease-in-out infinite;
 }
 
-.stat-number {
-    font-size: 3rem;
-    font-weight: 600;
-    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 0.5rem;
+.base-connector {
+    width: 160px;
+    height: 2px;
+    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
+    position: absolute;
+    animation: stretch 4s ease-in-out infinite;
 }
 
-.stat-label {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 1.1rem;
+@keyframes moveLeft {
+    0%, 100% { transform: translateX(-20px); }
+    50% { transform: translateX(20px); }
+}
+
+@keyframes moveRight {
+    0%, 100% { transform: translateX(20px); }
+    50% { transform: translateX(-20px); }
+}
+
+@keyframes stretch {
+    0%, 100% { width: 160px; }
+    50% { width: 200px; }
 }
 
 /* Scroll Indicator */
@@ -300,6 +317,7 @@ body {
     gap: 1rem;
     color: rgba(255, 255, 255, 0.7);
     transition: opacity 0.3s ease;
+    z-index: 10;
 }
 
 .mouse {
@@ -323,83 +341,294 @@ body {
     animation: scroll 2s infinite;
 }
 
-/* Footer */
-.footer-content {
+@keyframes scroll {
+    0% {
+        transform: translate(-50%, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-50%, 20px);
+        opacity: 0;
+    }
+}
+
+/* Stats Section */
+#stats {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 6rem 2rem;
+}
+
+.stats-grid {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
+    gap: 2rem;
+}
+
+.stat-item {
+    text-align: center;
+    padding: 2rem;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.stat-item:hover {
+    border-color: var(--gradient-end);
+}
+
+.stat-number {
+    font-size: 3rem;
+    font-weight: 600;
+    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 0.5rem;
+}
+
+.stat-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1.1rem;
+}
+
+/* Features Overview */
+#features-overview {
+    padding: 6rem 2rem;
+}
+
+.content-wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.content-wrapper h2 {
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+    text-align: center;
+    color: var(--gradient-end);
+}
+
+.features-showcase {
+    display: grid;
+    gap: 4rem;
+}
+
+.feature-highlight {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     gap: 4rem;
-    padding: 4rem 2rem;
+    align-items: center;
 }
 
-.footer-section h4 {
+.feature-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 5rem;
     color: var(--gradient-end);
-    margin-bottom: 1rem;
 }
 
-.footer-section a {
-    display: block;
-    color: rgba(255, 255, 255, 0.7);
-    text-decoration: none;
-    margin: 0.5rem 0;
-    transition: color 0.3s ease;
+.feature-content h3 {
+    font-size: 2rem;
+    margin-bottom: 1.5rem;
+    color: var(--gradient-end);
 }
 
-.footer-section a:hover {
+.feature-content p {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 2rem;
+    line-height: 1.8;
+}
+
+.feature-list {
+    list-style: none;
+}
+
+.feature-list li {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+    position: relative;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.feature-list li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
     color: var(--gradient-end);
+    font-size: 1.5rem;
+    line-height: 1;
 }
 
-.footer-bottom {
+/* Workflow Section */
+#workflow {
+    padding: 6rem 2rem;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.workflow-steps {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-top: 4rem;
+}
+
+.step {
     text-align: center;
     padding: 2rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-/* Animations */
-@keyframes float {
-    0%, 100% {
-        transform: translate(0, 0);
-    }
-    50% {
-        transform: translate(30px, -30px);
-    }
+.step i {
+    font-size: 3rem;
+    color: var(--gradient-end);
+    margin: 1.5rem 0;
 }
 
-@keyframes scroll {
-    0% {
-        transform: translate(-50%, 0);
-        opacity: 1;
-    }
-    100% {
-        transform: translate(-50%, 20px);
-        opacity: 0;
-    }
+.step-number {
+    font-size: 3rem;
+    font-weight: 700;
+    color: var(--gradient-end);
+    margin-bottom: 1.5rem;
+}
+
+.step h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--gradient-end);
+}
+
+.step p {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+/* Security Section */
+#security {
+    padding: 6rem 2rem;
+}
+
+.security-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+    align-items: center;
+}
+
+.security-content h2 {
+    text-align: left;
+    margin-bottom: 2rem;
+}
+
+.security-content p {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 2rem;
+    line-height: 1.8;
+}
+
+.security-features {
+    list-style: none;
+}
+
+.security-features li {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.security-features i {
+    font-size: 1.5rem;
+    color: var(--gradient-end);
+}
+
+.security-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 8rem;
+    color: var(--gradient-end);
+}
+
+/* CTA Section */
+#cta {
+    padding: 6rem 2rem;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.cta-container {
+    text-align: center;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.cta-container h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--gradient-end);
+}
+
+.cta-container p {
+    font-size: 1.2rem;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 2rem;
+    line-height: 1.8;
+}
+
+/* Footer */
+.footer-content {
+    text-align: center;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Responsive Design */
-@media (max-width: 1024px) {
+@media screen and (max-width: 1024px) {
     .hero-content {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 2rem;
     }
 
-    .hero-text h1 {
-        font-size: 3.5rem;
+    .hero-text {
+        text-align: center;
+    }
+
+    .hero-subtitle {
+        margin: 1.5rem auto 2rem;
+    }
+
+    .cta-buttons {
+        justify-content: center;
     }
 
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 
-    .footer-content {
-        grid-template-columns: repeat(2, 1fr);
+    .feature-highlight {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .workflow-steps {
+        grid-template-columns: 1fr;
+    }
+
+    .security-grid {
+        grid-template-columns: 1fr;
         gap: 2rem;
     }
 }
 
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
     .floating-nav {
         flex-direction: column;
         padding: 0.5rem;
@@ -426,7 +655,7 @@ body {
 
     .cta-buttons {
         flex-direction: column;
-        width: 100%;
+        gap: 1rem;
     }
 
     .primary-btn, .secondary-btn {
@@ -436,12 +665,4 @@ body {
     .stats-grid {
         grid-template-columns: 1fr;
     }
-
-    .footer-content {
-        grid-template-columns: 1fr;
-    }
-
-    .scroll-section {
-        padding: 3rem 1rem;
-    }
 }