diff --git a/index.html b/index.html
index b341ef7..116ddeb 100644
--- a/index.html
+++ b/index.html
@@ -7,22 +7,20 @@
     <title>Invoice Email Sender</title>
     <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet">
     <style>
+        /* Global styles */
         :root {
-            /* color scheme */
+            /* Color scheme variables */
             --primary-color: #007bff;
             --primary-dark: #0056b3;
             --secondary-color: #333;
             --light-color: #f4f7fa;
             --lighter-color: #f8f9fa;
             --error-color: #ee5555;
-
-            /* Font and border styling */
+            /* Font, border, shadow, and transition variables */
             --font-family: 'Lora', serif;
             --border-radius: 10px;
             --border-color: #ccc;
             --border-focus-color: #007bff;
-
-            /* Shadow and transitions */
             --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
             --transition-speed: 0.3s;
         }
@@ -46,6 +44,7 @@
             text-align: center;
         }
 
+        /* Navigation tab styling */
         .nav-tab {
             display: inline-block;
             margin-right: 15px;
@@ -60,17 +59,19 @@
             border-bottom: 3px solid var(--primary-color);
         }
 
+        /* Tab content area styling */
         .tab-content {
             display: none; /* Hide all tab content by default */
         }
 
         .tab-content.active {
-            display: block;
+            display: block; /* Display active tab content */
             padding: 20px;
             text-align: left;
             border-top: 1px solid #eee;
         }
 
+        /* Button styling */
         .button {
             background: var(--primary-color);
             color: #fff;
@@ -88,6 +89,7 @@
             background-color: var(--primary-dark);
         }
 
+        /* Form element styling */
         input[type="text"], input[type="password"], textarea {
             width: calc(100% - 20px);
             padding: 10px;
@@ -113,6 +115,7 @@
             text-align: left;
         }
 
+        /* Status bar styling */
         .status-bar {
             padding: 10px;
             margin-top: 20px;
@@ -123,84 +126,109 @@
 </head>
 <body>
 <div class="container" id="appContainer">
-    <div>
-        <div class="nav-tab active" id="configTab">Configuration</div>
-        <div class="nav-tab" id="csvTab">CSV Management</div>
-        <div class="nav-tab" id="emailTab">Email Operations</div>
-    </div>
-    <div id="config" class="tab-content active">
-        <label for="user">User:</label>
-        <input type="text" id="user" name="user">
-
-        <label for="password">Password:</label>
-        <input type="password" id="password" name="password">
-
-        <label for="ccEmail">CC Email:</label>
-        <input type="text" id="ccEmail" name="ccEmail">
-
-        <label for="bccEmail">BCC Email:</label>
-        <input type="text" id="bccEmail" name="bccEmail">
-
-        <label for="emailTemplate">Email Template:</label>
-        <textarea id="emailTemplate" rows="6"></textarea>
-
-        <button class="button" id="loadConfigBtn">Load Config</button>
-        <button class="button" id="saveConfigBtn">Save Config</button>
-    </div>
-
-    <div id="csv" class="tab-content">
-        <!-- CSV Management Content -->
-        <label for="csvPath">CSV Path:</label>
-        <input type="text" id="csvPath" name="csvPath">
-        <button class="button">Load CSV</button>
-    </div>
-
-    <div id="email" class="tab-content">
-        <!-- Email Operations Content -->
-        <button class="button">Send Emails</button>
-        <label>
-            <textarea rows="10">Log output here...</textarea>
-        </label>
-    </div>
-
+    <!-- Navigation Tabs -->
+    <nav>
+        <div class="nav-tab active" data-target="config">Configuration</div>
+        <div class="nav-tab" data-target="csv">CSV Management</div>
+        <div class="nav-tab" data-target="email">Email Operations</div>
+    </nav>
+    <!-- Configuration Form -->
+    <section id="config" class="tab-content active">
+        <form id="configForm">
+            <!-- Configuration Fields -->
+            <div class="form-group">
+                <label for="user">User:</label>
+                <input type="text" id="user" name="user">
+            </div>
+            <div class="form-group">
+                <label for="password">Password:</label>
+                <input type="password" id="password" name="password">
+            </div>
+            <div class="form-group">
+                <label for="ccEmail">CC Email:</label>
+                <input type="text" id="ccEmail" name="ccEmail">
+            </div>
+            <div class="form-group">
+                <label for="bccEmail">BCC Email:</label>
+                <input type="text" id="bccEmail" name="bccEmail">
+            </div>
+            <div class="form-group">
+                <label for="emailTemplate">Email Template:</label>
+                <textarea id="emailTemplate" rows="6"></textarea>
+            </div>
+            <!-- Form Action Buttons -->
+            <div class="form-actions">
+                <button class="button" type="button" id="loadConfigBtn">Load Config</button>
+                <button class="button" type="button" id="saveConfigBtn">Save Config</button>
+            </div>
+        </form>
+    </section>
+    <!-- CSV Management Form -->
+    <section id="csv" class="tab-content">
+        <form id="csvForm">
+            <div class="form-group">
+                <label for="csvPath">CSV Path:</label>
+                <input type="text" id="csvPath" name="csvPath">
+            </div>
+            <div class="form-actions">
+                <button class="button" type="button">Load CSV</button>
+            </div>
+        </form>
+    </section>
+    <!-- Email Operations Form -->
+    <section id="email" class="tab-content">
+        <form id="emailForm">
+            <div class="form-actions">
+                <button class="button" type="button">Send Emails</button>
+            </div>
+            <div class="form-group">
+                <label for="emailLogs">Email Logs:</label>
+                <textarea id="emailLogs" rows="10">Log output here...</textarea>
+            </div>
+        </form>
+    </section>
+    <!-- Status Bar -->
     <div class="status-bar" id="statusMessage">Status: Ready</div>
 </div>
 <script>
+    // Page Initialization
     document.addEventListener("DOMContentLoaded", function () {
+        document.querySelectorAll('.nav-tab').forEach(tab => {
+            tab.addEventListener('click', function () {
+                changeTab(this.getAttribute('data-target'));
+            });
+        });
+
         document.getElementById('loadConfigBtn').addEventListener('click', loadConfig);
         document.getElementById('saveConfigBtn').addEventListener('click', saveConfig);
-        document.getElementById('configTab').addEventListener('click', function (event) {
-            changeTab(event, 'config')
-        });
-        document.getElementById('csvTab').addEventListener('click', function (event) {
-            changeTab(event, 'csv')
-        });
-        document.getElementById('emailTab').addEventListener('click', function (event) {
-            changeTab(event, 'email')
-        });
     });
 
-    function changeTab(event, tabId) {
-        const tabContents = document.getElementsByClassName("tab-content");
-        const tabs = document.getElementsByClassName("nav-tab");
+    // Tab change function
+    function changeTab(targetId) {
+        const tabContents = document.querySelectorAll(".tab-content");
+        const tabs = document.querySelectorAll(".nav-tab");
 
-        // Hide all tab contents
-        for (let i = 0; i < tabContents.length; i++) {
-            tabContents[i].style.display = "none"; // Hide
-            tabContents[i].classList.remove("active");
+        tabContents.forEach(tab => {
+            tab.style.display = "none";
+            tab.classList.remove("active");
+        });
+
+        tabs.forEach(tab => tab.classList.remove("active"));
+
+        const targetTabContent = document.getElementById(targetId);
+        const targetTab = document.querySelector(`.nav-tab[data-target="${targetId}"]`);
+
+        if (targetTabContent) {
+            targetTabContent.style.display = "block";
+            targetTabContent.classList.add("active");
         }
 
-        // Remove 'active' class from all tabs
-        for (let i = 0; i < tabs.length; i++) {
-            tabs[i].classList.remove("active");
+        if (targetTab) {
+            targetTab.classList.add("active");
         }
-
-        // Show the clicked tab content and add 'active' class
-        document.getElementById(tabId).style.display = "block";
-        document.getElementById(tabId).classList.add("active");
-        event.currentTarget.classList.add("active");
     }
 
+    // Configuration load function
     function loadConfig() {
         fetch('/data')
             .then(response => {
@@ -226,6 +254,7 @@
             });
     }
 
+    // Configuration save function
     function saveConfig() {
         const emailData = {
             user: document.getElementById('user').value,
@@ -266,13 +295,14 @@
             });
     }
 
+    // Status bar update function
     function updateStatusBar(message, isError = false) {
         const statusBar = document.getElementById('statusMessage');
         statusBar.textContent = message;
         if (isError) {
             statusBar.style.color = 'var(--error-color)';
         } else {
-            statusBar.style.color = 'initial'; // or any other color for normal messages
+            statusBar.style.color = 'initial';
         }
     }
 </script>
