diff --git a/web/analyzer/analyzer.css b/web/analyzer/analyzer.css
index 6514d510..174817ca 100644
--- a/web/analyzer/analyzer.css
+++ b/web/analyzer/analyzer.css
@@ -1,9 +1,4 @@
-.container {
-    max-width: 1200px;
-    margin: 6rem auto 2rem;
-    padding: 2rem;
-}
-
+/* Hero Section */
 .hero {
     text-align: center;
     margin-bottom: 3rem;
@@ -24,99 +19,166 @@
 
 /* Analysis Container */
 .analysis-container {
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 2rem;
+    margin: 2rem 0;
+    min-height: calc(100vh - 400px);
+}
+
+/* Sidebar */
+.analysis-sidebar {
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 2rem;
-    margin-bottom: 3rem;
+    position: sticky;
+    top: 6rem;
+    height: fit-content;
 }
 
-/* Tabs */
-.analysis-tabs {
-    display: flex;
-    gap: 1rem;
+.sidebar-section {
     margin-bottom: 2rem;
+    padding-bottom: 2rem;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding-bottom: 1rem;
 }
 
-.tab-button {
+.sidebar-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.sidebar-section h3 {
+    color: var(--gradient-end);
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+}
+
+/* History List */
+.history-list {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    padding: 1rem;
+}
+
+.history-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: rgba(255, 255, 255, 0.7);
+    padding: 0.75rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.history-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Quick Actions */
+.quick-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.action-btn {
     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;
-    border-radius: 8px;
+    color: rgba(255, 255, 255, 0.9);
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 1.1rem;
+    gap: 0.75rem;
+    width: 100%;
+    font-size: 0.95rem;
 }
 
-.tab-button i {
-    font-size: 1.2rem;
+.action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
 }
 
-.tab-button:hover {
-    background: rgba(255, 255, 255, 0.1);
+.action-btn i {
+    color: var(--gradient-end);
 }
 
-.tab-button.active {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    border-color: transparent;
-    color: white;
+/* Resource Links */
+.resource-links {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.tab-content {
-    display: none;
+.resource-link {
+    color: rgba(255, 255, 255, 0.9);
+    text-decoration: none;
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    transition: all 0.3s ease;
 }
 
-.tab-content.active {
-    display: block;
+.resource-link:hover {
+    background: rgba(255, 255, 255, 0.05);
+    transform: translateX(5px);
 }
 
-/* Input Methods */
-.input-methods {
+.resource-link i {
+    color: var(--gradient-end);
+}
+
+/* Analysis Tabs */
+.analysis-tabs {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 1rem;
 }
 
-.method-button {
+.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: 0.75rem 1.5rem;
+    padding: 1rem 2rem;
     border-radius: 8px;
     cursor: pointer;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
+    font-size: 1.1rem;
+    flex: 1;
+    justify-content: center;
 }
 
-.method-button i {
-    font-size: 1.1rem;
+.tab-button i {
+    font-size: 1.2rem;
 }
 
-.method-button:hover {
+.tab-button:hover {
     background: rgba(255, 255, 255, 0.1);
+    transform: translateY(-2px);
 }
 
-.method-button.active {
+.tab-button.active {
     background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
     border-color: transparent;
     color: white;
 }
 
-/* Input Areas */
-.input-area {
+.tab-content {
     display: none;
-    margin-bottom: 2rem;
 }
 
-.input-area.active {
+.tab-content.active {
     display: block;
 }
 
@@ -124,100 +186,58 @@
 .file-drop-zone {
     border: 2px dashed rgba(255, 255, 255, 0.2);
     border-radius: 12px;
-    padding: 3rem;
+    padding: 4rem 2rem;
     text-align: center;
     transition: all 0.3s ease;
     cursor: pointer;
+    background: rgba(0, 0, 0, 0.2);
+    margin-bottom: 2rem;
 }
 
 .file-drop-zone:hover,
 .file-drop-zone.drag-active {
     border-color: var(--gradient-end);
     background: rgba(255, 255, 255, 0.05);
+    transform: translateY(-2px);
 }
 
 .file-drop-zone i {
-    font-size: 3rem;
+    font-size: 4rem;
     color: var(--gradient-end);
+    margin-bottom: 1.5rem;
+}
+
+.file-drop-zone h3 {
+    font-size: 1.5rem;
     margin-bottom: 1rem;
+    color: var(--gradient-end);
 }
 
 .file-drop-zone p {
-    margin: 0.5rem 0;
     color: rgba(255, 255, 255, 0.9);
-}
-
-.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;
-    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;
-    padding: 1rem;
-    border-radius: 8px;
-    font-family: inherit;
-}
-
-.fetch-button {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    color: white;
-    border: none;
-    padding: 0 2rem;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
-/* 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;
+    margin-bottom: 1rem;
 }
 
 /* Analysis Options */
-.options-grid {
+.analysis-options {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
-    margin-bottom: 2rem;
+    margin: 2rem 0;
 }
 
 .option-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
+    border-radius: 12px;
     padding: 1.5rem;
+    transition: all 0.3s ease;
+}
+
+.option-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--gradient-end);
+    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.2);
 }
 
 .option-header {
@@ -241,74 +261,43 @@
 .checkbox-container {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.75rem;
     margin-bottom: 1rem;
     cursor: pointer;
     color: rgba(255, 255, 255, 0.9);
+    padding: 0.5rem;
+    border-radius: 6px;
+    transition: all 0.3s ease;
 }
 
-.checkbox-container input {
-    width: 18px;
-    height: 18px;
-}
-
-/* Advanced Settings */
-.advanced-settings {
+.checkbox-container:hover {
     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);
+.checkbox-container input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    appearance: none;
     cursor: pointer;
-    font-size: 1.2rem;
-}
-
-.settings-content {
-    display: none;
-    padding: 1.5rem;
-}
-
-.settings-content.show {
-    display: block;
-}
-
-.setting-group {
-    margin-bottom: 1.5rem;
+    position: relative;
+    transition: all 0.3s ease;
 }
 
-.setting-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    color: rgba(255, 255, 255, 0.9);
+.checkbox-container input[type="checkbox"]:checked {
+    background: var(--gradient-end);
+    border-color: var(--gradient-end);
 }
 
-.setting-group input,
-.setting-group select {
-    width: 100%;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+.checkbox-container input[type="checkbox"]:checked::after {
+    content: '✓';
+    position: absolute;
     color: white;
-    padding: 0.75rem;
-    border-radius: 6px;
-    font-family: inherit;
+    font-size: 12px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
 
 /* Analyze Button */
@@ -318,7 +307,7 @@
     color: white;
     border: none;
     padding: 1.25rem;
-    border-radius: 8px;
+    border-radius: 12px;
     font-size: 1.2rem;
     font-weight: 600;
     cursor: pointer;
@@ -326,15 +315,14 @@
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
+    margin-top: 2rem;
+    transition: all 0.3s ease;
 }
 
-.analyze-btn i {
-    font-size: 1.2rem;
-}
-
-.analyze-btn:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
+.analyze-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(0, 122, 255, 0.4);
+    filter: brightness(1.1);
 }
 
 /* Results Section */
@@ -342,95 +330,108 @@
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 2rem;
-    margin-top: 3rem;
+    margin-top: 2rem;
 }
 
-.results-section h2 {
+.results-header {
+    padding: 1.5rem 2rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.results-header h2 {
     color: var(--gradient-end);
-    margin-bottom: 2rem;
+    margin: 0;
 }
 
-.result-tabs {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 2rem;
+.result-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    padding: 2rem;
 }
 
-.result-tab {
+.result-card {
     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;
     border-radius: 8px;
-    cursor: pointer;
+    padding: 1.5rem;
+    text-align: center;
+    transition: all 0.3s ease;
 }
 
-.result-tab.active {
-    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-    border-color: transparent;
-    color: white;
+.result-card:hover {
+    transform: translateY(-2px);
+    border-color: var(--gradient-end);
+}
+
+.result-value {
+    font-size: 2.5rem;
+    font-weight: 600;
+    color: var(--gradient-end);
+    margin-bottom: 0.5rem;
+}
+
+.result-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 1rem;
 }
 
 /* Coming Soon */
 .coming-soon {
     text-align: center;
-    padding: 4rem 2rem;
+    padding: 6rem 2rem;
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .coming-soon i {
-    font-size: 3rem;
+    font-size: 4rem;
     color: var(--gradient-end);
-    margin-bottom: 1.5rem;
+    margin-bottom: 2rem;
 }
 
 .coming-soon h2 {
-    color: var(--gradient-end);
+    font-size: 2rem;
     margin-bottom: 1rem;
-}
-
-.coming-soon p {
-    color: rgba(255, 255, 255, 0.9);
+    color: var(--gradient-end);
 }
 
 /* Responsive Design */
-@media screen and (max-width: 768px) {
-    .container {
-        padding: 1rem;
+@media screen and (max-width: 1024px) {
+    .analysis-container {
+        grid-template-columns: 1fr;
     }
 
-    .hero h1 {
-        font-size: 2.5rem;
+    .analysis-sidebar {
+        position: static;
+        width: 100%;
+        height: auto;
+        margin-bottom: 2rem;
     }
+}
 
+@media screen and (max-width: 768px) {
     .analysis-tabs {
         flex-direction: column;
     }
 
     .tab-button {
         width: 100%;
-        justify-content: center;
     }
 
-    .input-methods {
-        flex-direction: column;
+    .analysis-options {
+        grid-template-columns: 1fr;
     }
 
-    .method-button {
-        width: 100%;
-        justify-content: center;
+    .result-grid {
+        grid-template-columns: 1fr;
     }
 
-    .url-input-container {
+    .results-header {
         flex-direction: column;
-    }
-
-    .fetch-button {
-        width: 100%;
-        padding: 1rem;
-    }
-
-    .options-grid {
-        grid-template-columns: 1fr;
+        gap: 1rem;
+        text-align: center;
     }
 }
\ No newline at end of file
diff --git a/web/analyzer/analyzer.html b/web/analyzer/analyzer.html
index 5b6ff543..07e9c4e1 100644
--- a/web/analyzer/analyzer.html
+++ b/web/analyzer/analyzer.html
@@ -39,67 +39,80 @@ <h1>DNA Sequence Analysis</h1>
         </section>
 
         <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>
+            <aside class="analysis-sidebar">
+                <div class="sidebar-section">
+                    <h3>Analysis History</h3>
+                    <div class="history-list">
+                        <div class="history-item">
+                            <i class="fas fa-history"></i>
+                            <span>No recent analyses</span>
+                        </div>
+                    </div>
+                </div>
 
-            <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
+                <div class="sidebar-section">
+                    <h3>Quick Actions</h3>
+                    <div class="quick-actions">
+                        <button class="action-btn">
+                            <i class="fas fa-file-import"></i>
+                            Import Sample
                         </button>
-                        <button class="method-button" data-method="url">
-                            <i class="fas fa-link"></i>
-                            URL Input
+                        <button class="action-btn">
+                            <i class="fas fa-save"></i>
+                            Save Settings
                         </button>
-                        <button class="method-button" data-method="text">
-                            <i class="fas fa-keyboard"></i>
-                            Text Input
+                        <button class="action-btn">
+                            <i class="fas fa-cog"></i>
+                            Preferences
                         </button>
                     </div>
+                </div>
 
-                    <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 class="sidebar-section">
+                    <h3>Resources</h3>
+                    <div class="resource-links">
+                        <a href="../docs/docs.html" class="resource-link">
+                            <i class="fas fa-book"></i>
+                            Documentation
+                        </a>
+                        <a href="https://github.com/VerisimilitudeX/DNAnalyzer/issues" class="resource-link">
+                            <i class="fas fa-bug"></i>
+                            Report Issue
+                        </a>
+                        <a href="https://discord.gg/xNpujz49gj" class="resource-link">
+                            <i class="fab fa-discord"></i>
+                            Community
+                        </a>
                     </div>
+                </div>
+            </aside>
 
-                    <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="analysis-main">
+                <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-area" id="text-input">
-                        <textarea placeholder="Paste your DNA sequence here..." class="sequence-input"></textarea>
+                <div class="tab-content active" id="dna-analysis">
+                    <div class="file-drop-zone">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                        <h3>Upload DNA Sequence</h3>
+                        <p>Drag and drop your sequence file here or click to browse</p>
+                        <input type="file" hidden accept=".fa,.fasta,.fastq">
+                        <p class="file-info">Supported formats: .fa, .fasta, .fastq</p>
                     </div>
-                </div>
 
-                <div class="analysis-options">
-                    <h2>Analysis Options</h2>
-                    <div class="options-grid">
+                    <div class="analysis-options">
                         <div class="option-card">
                             <div class="option-header">
                                 <i class="fas fa-microscope"></i>
@@ -173,67 +186,62 @@ <h3>Advanced Features</h3>
                         </div>
                     </div>
 
-                    <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">
+                    <button class="analyze-btn">
+                        <i class="fas fa-play"></i>
+                        Start Analysis
+                    </button>
+
+                    <div class="results-section" style="display: none;">
+                        <div class="results-header">
+                            <h2>Analysis Results</h2>
+                            <div class="result-actions">
+                                <button class="action-btn">
+                                    <i class="fas fa-download"></i>
+                                    Export
+                                </button>
+                                <button class="action-btn">
+                                    <i class="fas fa-share"></i>
+                                    Share
+                                </button>
                             </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 class="results-content">
+                            <div class="result-grid">
+                                <div class="result-card">
+                                    <div class="result-value">1,234</div>
+                                    <div class="result-label">Sequence Length</div>
+                                </div>
+                                <div class="result-card">
+                                    <div class="result-value">45.6%</div>
+                                    <div class="result-label">GC Content</div>
+                                </div>
+                                <div class="result-card">
+                                    <div class="result-value">8</div>
+                                    <div class="result-label">Start Codons</div>
+                                </div>
+                                <div class="result-card">
+                                    <div class="result-value">12</div>
+                                    <div class="result-label">Stop Codons</div>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <button class="analyze-btn">
-                    <i class="fas fa-play"></i>
-                    Start Analysis
-                </button>
-            </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="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 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>
-        </div>
 
-        <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="result-content">
-                    <!-- Results will be dynamically populated here -->
+                <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>
         </div>
diff --git a/web/analyzer/analyzer.js b/web/analyzer/analyzer.js
index 4fcc1e41..6dc5efcf 100644
--- a/web/analyzer/analyzer.js
+++ b/web/analyzer/analyzer.js
@@ -3,175 +3,129 @@ document.addEventListener('DOMContentLoaded', function() {
     const tabButtons = document.querySelectorAll('.tab-button');
     const tabContents = document.querySelectorAll('.tab-content');
     
-    tabButtons.forEach(button => {
-        button.addEventListener('click', () => {
-            const tabId = button.getAttribute('data-tab');
-            
-            // Update active states
-            tabButtons.forEach(btn => btn.classList.remove('active'));
-            tabContents.forEach(content => content.classList.remove('active'));
-            
-            button.classList.add('active');
-            document.getElementById(tabId).classList.add('active');
-        });
-    });
-
-    // Input method switching
-    const methodButtons = document.querySelectorAll('.method-button');
-    const inputAreas = document.querySelectorAll('.input-area');
-    
-    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');
+    if (tabButtons && tabContents) {
+        tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                const tabId = button.getAttribute('data-tab');
+                
+                // Update active states
+                tabButtons.forEach(btn => btn.classList.remove('active'));
+                tabContents.forEach(content => content.classList.remove('active'));
+                
+                button.classList.add('active');
+                document.getElementById(tabId)?.classList.add('active');
+            });
         });
-    });
+    }
 
-    // File drag and drop
+    // File Drop Zone
     const dropZone = document.querySelector('.file-drop-zone');
-    const fileInput = dropZone.querySelector('input[type="file"]');
+    if (dropZone) {
+        const fileInput = dropZone.querySelector('input[type="file"]');
 
-    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        dropZone.addEventListener(eventName, preventDefaults, false);
-    });
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
 
-    function preventDefaults(e) {
-        e.preventDefault();
-        e.stopPropagation();
-    }
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
 
-    ['dragenter', 'dragover'].forEach(eventName => {
-        dropZone.addEventListener(eventName, highlight, false);
-    });
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
 
-    ['dragleave', 'drop'].forEach(eventName => {
-        dropZone.addEventListener(eventName, unhighlight, false);
-    });
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
 
-    function highlight(e) {
-        dropZone.classList.add('drag-active');
-    }
+        function highlight() {
+            dropZone.classList.add('drag-active');
+        }
 
-    function unhighlight(e) {
-        dropZone.classList.remove('drag-active');
-    }
+        function unhighlight() {
+            dropZone.classList.remove('drag-active');
+        }
 
-    dropZone.addEventListener('drop', handleDrop, false);
+        dropZone.addEventListener('drop', handleDrop, false);
+        dropZone.addEventListener('click', () => fileInput?.click());
 
-    function handleDrop(e) {
-        const dt = e.dataTransfer;
-        const files = dt.files;
-        handleFiles(files);
-    }
+        if (fileInput) {
+            fileInput.addEventListener('change', (e) => {
+                handleFiles(e.target.files);
+            });
+        }
+
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            handleFiles(files);
+        }
 
-    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 {
-                alert('Please upload a valid DNA sequence file (.fa, .fasta, .fastq)');
+        function handleFiles(files) {
+            if (files && files.length > 0) {
+                const file = files[0];
+                if (file.name.match(/\.(fa|fasta|fastq)$/)) {
+                    const fileInfo = dropZone.querySelector('.file-info');
+                    if (fileInfo) {
+                        fileInfo.textContent = `Selected file: ${file.name}`;
+                        fileInfo.style.color = 'var(--gradient-end)';
+                    }
+                    dropZone.style.borderColor = 'var(--gradient-end)';
+                } else {
+                    alert('Please upload a valid DNA sequence file (.fa, .fasta, .fastq)');
+                }
             }
         }
     }
 
-    // Advanced settings toggle
-    const settingsToggle = document.querySelector('.toggle-settings');
-    const settingsContent = document.querySelector('.settings-content');
-
-    settingsToggle.addEventListener('click', () => {
-        settingsContent.classList.toggle('show');
-        settingsToggle.classList.toggle('active');
-    });
-
-    // Analysis button
+    // Analyze Button
     const analyzeButton = document.querySelector('.analyze-btn');
     const resultsSection = document.querySelector('.results-section');
 
-    analyzeButton.addEventListener('click', () => {
-        // Show loading state
-        analyzeButton.disabled = true;
-        analyzeButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
-
-        // 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);
-    });
+    if (analyzeButton && resultsSection) {
+        analyzeButton.addEventListener('click', () => {
+            // Show loading state
+            analyzeButton.disabled = true;
+            analyzeButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
+
+            // 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);
+        });
+    }
 
-    // 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);
+    // Checkboxes
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    checkboxes.forEach(checkbox => {
+        checkbox.addEventListener('change', () => {
+            const container = checkbox.closest('.checkbox-container');
+            if (container) {
+                if (checkbox.checked) {
+                    container.style.background = 'rgba(255, 255, 255, 0.05)';
+                } else {
+                    container.style.background = 'transparent';
+                }
+            }
         });
     });
 
-    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>
-                    </div>
-                `;
-                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>
-                `;
-                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;
-        }
-    }
+    // Action Buttons
+    const actionButtons = document.querySelectorAll('.action-btn');
+    actionButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            // Add ripple effect
+            const ripple = document.createElement('div');
+            ripple.classList.add('ripple');
+            button.appendChild(ripple);
+            setTimeout(() => ripple.remove(), 1000);
+        });
+    });
 });
\ No newline at end of file
diff --git a/web/docs/docs.html b/web/docs/docs.html
index c3ea1574..dfb6ec93 100644
--- a/web/docs/docs.html
+++ b/web/docs/docs.html
@@ -32,60 +32,62 @@
         </nav>
     </header>
 
-    <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>
+    <main class="container">
+        <div class="docs-container">
+            <aside class="docs-sidebar">
+                <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>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="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>
 
-    <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="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="code-block">
-                <div class="code-header">
-                    <span class="code-language">bash</span>
-                    <button class="copy-button">Copy</button>
+                <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>
-                <pre><code># Clone the repository
+            </aside>
+
+            <div 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
@@ -93,176 +95,93 @@ <h2>Installation</h2>
 
 # Build the project
 ./gradlew clean bootJar</code></pre>
-            </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
+                    </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="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
+                    </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>
-
-            <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>
-
-            <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="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>
-</body>
-</html>
\ No newline at end of file
+                    </div>
+
+                    <h3>Available Options</h3>
+                    <table class="docs-table">
+                        <thead>
+                            <tr>
+                                <th>Option</th>
+                                <th>Description</th>
+                                <th>Example</th>
+                            </tr>
+                        </thead>
+                        <tbody>
diff --git a/web/style.css b/web/style.css
index a6a0ff88..d12aff95 100644
--- a/web/style.css
+++ b/web/style.css
@@ -66,6 +66,14 @@ body {
     right: auto;
 }
 
+/* Container */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    flex: 1;
+}
+
 /* Navbar */
 .floating-header {
     position: fixed;
@@ -255,11 +263,13 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    transform-style: preserve-3d;
+    animation: rotate3D 20s linear infinite;
 }
 
 .base {
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
@@ -268,41 +278,49 @@ body {
     font-weight: bold;
     color: white;
     position: absolute;
+    transform-style: preserve-3d;
 }
 
 .left-base {
     background: var(--gradient-start);
-    left: calc(50% - 100px);
-    animation: moveLeft 4s ease-in-out infinite;
+    left: calc(50% - 120px);
+    animation: moveLeft3D 4s ease-in-out infinite;
 }
 
 .right-base {
     background: var(--gradient-end);
-    right: calc(50% - 100px);
-    animation: moveRight 4s ease-in-out infinite;
+    right: calc(50% - 120px);
+    animation: moveRight3D 4s ease-in-out infinite;
 }
 
 .base-connector {
-    width: 160px;
-    height: 2px;
+    width: 200px;
+    height: 3px;
     background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
     position: absolute;
-    animation: stretch 4s ease-in-out infinite;
+    transform-origin: center;
+    animation: stretch3D 4s ease-in-out infinite;
 }
 
-@keyframes moveLeft {
-    0%, 100% { transform: translateX(-20px); }
-    50% { transform: translateX(20px); }
+@keyframes rotate3D {
+    0% { transform: rotateY(0deg) rotateX(0deg); }
+    50% { transform: rotateY(180deg) rotateX(10deg); }
+    100% { transform: rotateY(360deg) rotateX(0deg); }
 }
 
-@keyframes moveRight {
-    0%, 100% { transform: translateX(20px); }
-    50% { transform: translateX(-20px); }
+@keyframes moveLeft3D {
+    0%, 100% { transform: translateX(-30px) translateZ(20px); }
+    50% { transform: translateX(30px) translateZ(-20px); }
 }
 
-@keyframes stretch {
-    0%, 100% { width: 160px; }
-    50% { width: 200px; }
+@keyframes moveRight3D {
+    0%, 100% { transform: translateX(30px) translateZ(-20px); }
+    50% { transform: translateX(-30px) translateZ(20px); }
+}
+
+@keyframes stretch3D {
+    0%, 100% { width: 200px; transform: rotateY(0deg); }
+    50% { width: 240px; transform: rotateY(180deg); }
 }
 
 /* Scroll Indicator */
@@ -352,235 +370,6 @@ body {
     }
 }
 
-/* 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;
-    align-items: center;
-}
-
-.feature-visual {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 5rem;
-    color: var(--gradient-end);
-}
-
-.feature-content h3 {
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
-    color: var(--gradient-end);
-}
-
-.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;
-}
-
-/* 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;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.step i {
-    font-size: 3rem;
-    color: var(--gradient-end);
-    margin: 1.5rem 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;
@@ -608,24 +397,6 @@ body {
     .cta-buttons {
         justify-content: center;
     }
-
-    .stats-grid {
-        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 screen and (max-width: 768px) {
@@ -661,8 +432,4 @@ body {
     .primary-btn, .secondary-btn {
         width: 100%;
     }
-
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
 }