diff --git a/index.html b/index.html
index 2136266..bdb8aa5 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Semester 3 Study Planner">
+    <meta name="referrer" content="strict-origin-when-cross-origin">
     <title>Semester 3 Study Planner</title>
     <link rel="stylesheet" href="style.css">
-
 </head>
 <body>
     <div class="container">
@@ -14,14 +15,8 @@ <h1>Semester 3 Study Planner</h1>
             <p class="subtitle">Made By Yug Shah 🦋 with love</p>
         </header>
 
-        <nav class="nav-tabs">
-            <button class="nav-tab active" data-tab="study-plan">Study Plan Generator</button>
-            <button class="nav-tab" data-tab="folder-manager">Folder Manager</button>
-            <button class="nav-tab" data-tab="cgpa-calculator">CGPA Calculator</button>
-            <button class="nav-tab" data-tab="performance-modes">Performance Modes</button>
-        </nav>
+        <nav class="nav-tabs" id="navTabs"></nav>
 
-        <!-- Section 1: Study Plan Generator -->
         <section id="study-plan" class="tab-content active">
             <div class="card">
                 <div class="card__header">
@@ -29,27 +24,8 @@ <h2>Smart Study Plan Generator</h2>
                     <p>Generate personalized study schedules based on your preferred intensity</p>
                 </div>
                 <div class="card__body">
-                    <div class="form-row">
-                        <div class="form-group">
-                            <label class="form-label">Study Mode</label>
-                            <select id="studyMode" class="form-control">
-                                <option value="easy">Easy Mode (1 chapter/day)</option>
-                                <option value="normal" selected>Normal Mode (2 chapters/day)</option>
-                                <option value="intense">Intense Mode (7-day crash)</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Semester Start Date</label>
-                            <input type="date" id="startDate" class="form-control">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">End Semester Exam Date</label>
-                            <input type="date" id="examDate" class="form-control">
-                        </div>
-                    </div>
-                    
-                    <button id="generatePlan" class="btn btn--primary">Generate Study Plan</button>
-                    
+                    <div class="form-row" id="studyPlanFormRow"></div>
+                    <button id="generatePlan" class="btn btn--primary" type="button">Generate Study Plan</button>
                     <div id="studyPlanOutput" class="study-plan-output hidden">
                         <h3>Your Study Schedule</h3>
                         <div class="progress-summary">
@@ -64,7 +40,6 @@ <h3>Your Study Schedule</h3>
             </div>
         </section>
 
-        <!-- Section 2: Folder Manager -->
         <section id="folder-manager" class="tab-content">
             <div class="card">
                 <div class="card__header">
@@ -74,18 +49,14 @@ <h2>Study Material Organizer</h2>
                 </div>
                 <div class="card__body">
                     <div class="folder-controls">
-                        <input type="text" id="searchMaterials" class="form-control" placeholder="Search materials...">
-                        <button id="addMaterial" class="btn btn--secondary">Add Material</button>
-                    </div>
-                    
-                    <div class="folder-structure" id="folderStructure">
-                        <!-- Folder tree will be generated by JavaScript -->
+                        <input type="text" id="searchMaterials" class="form-control" placeholder="Search materials..." maxlength="120" autocomplete="off">
+                        <button id="addMaterial" class="btn btn--secondary" type="button">Add Material</button>
                     </div>
+                    <div class="folder-structure" id="folderStructure"></div>
                 </div>
             </div>
         </section>
 
-        <!-- Section 3: CGPA Calculator -->
         <section id="cgpa-calculator" class="tab-content">
             <div class="card">
                 <div class="card__header">
@@ -94,37 +65,11 @@ <h2>CGPA Target Calculator</h2>
                 </div>
                 <div class="card__body">
                     <div class="subject-selector">
-                        <label class="form-label">Select Subject</label>
-                        <select id="subjectSelect" class="form-control">
-                            <!-- Options will be populated by JavaScript -->
-                        </select>
+                        <label class="form-label" for="subjectSelect">Select Subject</label>
+                        <select id="subjectSelect" class="form-control" autocomplete="off"></select>
                     </div>
-
-                    <div class="marks-input-grid">
-                        <div class="form-group">
-                            <label class="form-label">Class Test 1 (10 marks)</label>
-                            <input type="number" id="ct1" class="form-control" max="10" min="0">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Class Test 2 (10 marks)</label>
-                            <input type="number" id="ct2" class="form-control" max="10" min="0">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Assignment (10 marks)</label>
-                            <input type="number" id="assignment" class="form-control" max="10" min="0">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">Mid Semester (20 marks)</label>
-                            <input type="number" id="midSem" class="form-control" max="20" min="0">
-                        </div>
-                        <div class="form-group">
-                            <label class="form-label">End Semester (60 marks)</label>
-                            <input type="number" id="endSem" class="form-control" max="60" min="0">
-                        </div>
-                    </div>
-
-                    <button id="calculateCGPA" class="btn btn--primary">Calculate CGPA</button>
-
+                    <div class="marks-input-grid" id="marksInputGrid"></div>
+                    <button id="calculateCGPA" class="btn btn--primary" type="button">Calculate CGPA</button>
                     <div id="cgpaResults" class="cgpa-results hidden">
                         <div class="results-grid">
                             <div class="result-card">
@@ -149,7 +94,6 @@ <h4>Overall CGPA</h4>
             </div>
         </section>
 
-        <!-- Section 4: Performance Modes -->
         <section id="performance-modes" class="tab-content">
             <div class="card">
                 <div class="card__header">
@@ -157,68 +101,7 @@ <h2>Performance Modes Comparison</h2>
                     <p>Compare different study approaches and select your preferred method</p>
                 </div>
                 <div class="card__body">
-                    <div class="modes-grid">
-                        <div class="mode-card" data-mode="easy">
-                            <h3>Easy Mode</h3>
-                            <div class="mode-stats">
-                                <div class="stat">
-                                    <span class="stat-label">Chapters per day:</span>
-                                    <span class="stat-value">1</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Study duration:</span>
-                                    <span class="stat-value" id="easyDuration">- days</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Daily workload:</span>
-                                    <span class="stat-value">Light</span>
-                                </div>
-                            </div>
-                            <p class="mode-description">Relaxed pace with plenty of time for revision</p>
-                            <button class="btn btn--outline mode-select" data-mode="easy">Select Easy Mode</button>
-                        </div>
-
-                        <div class="mode-card" data-mode="normal">
-                            <h3>Normal Mode</h3>
-                            <div class="mode-stats">
-                                <div class="stat">
-                                    <span class="stat-label">Chapters per day:</span>
-                                    <span class="stat-value">2</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Study duration:</span>
-                                    <span class="stat-value" id="normalDuration">- days</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Daily workload:</span>
-                                    <span class="stat-value">Moderate</span>
-                                </div>
-                            </div>
-                            <p class="mode-description">Balanced approach with steady progress</p>
-                            <button class="btn btn--outline mode-select" data-mode="normal">Select Normal Mode</button>
-                        </div>
-
-                        <div class="mode-card" data-mode="intense">
-                            <h3>Intense Mode</h3>
-                            <div class="mode-stats">
-                                <div class="stat">
-                                    <span class="stat-label">Chapters per day:</span>
-                                    <span class="stat-value" id="intenseChapters">4+</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Study duration:</span>
-                                    <span class="stat-value">7 days</span>
-                                </div>
-                                <div class="stat">
-                                    <span class="stat-label">Daily workload:</span>
-                                    <span class="stat-value">Heavy</span>
-                                </div>
-                            </div>
-                            <p class="mode-description">Last-minute preparation with high intensity</p>
-                            <button class="btn btn--outline mode-select" data-mode="intense">Select Intense Mode</button>
-                        </div>
-                    </div>
-
+                    <div class="modes-grid" id="modesGrid"></div>
                     <div id="selectedModeDetails" class="selected-mode-details hidden">
                         <h3>Selected Mode Details</h3>
                         <div id="modeBreakdown" class="mode-breakdown"></div>
@@ -228,48 +111,133 @@ <h3>Selected Mode Details</h3>
         </section>
     </div>
 
-    <!-- Add Material Modal -->
-<!--     <div id="addMaterialModal" class="modal hidden">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3>Add Study Material</h3>
-                <button class="modal-close">&times;</button>
-            </div>
-            <div class="modal-body">
-                <div class="form-group">
-                    <label class="form-label">Subject</label>
-                    <select id="materialSubject" class="form-control">
-                        <!-- Options populated by JS -->
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Chapter</label>
-                    <select id="materialChapter" class="form-control">
-                        <!-- Options populated by JS -->
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Material Name</label>
-                    <input type="text" id="materialName" class="form-control" placeholder="e.g., Lecture Notes, Textbook PDF">
-                </div>
-                <div class="form-group">
-                    <label class="form-label">Material Type</label>
-                    <select id="materialType" class="form-control">
-                        <option value="pdf">PDF Document</option>
-                        <option value="ppt">PowerPoint Presentation</option>
-                        <option value="notes">Handwritten Notes</option>
-                        <option value="video">Video Lecture</option>
-                        <option value="other">Other</option>
-                    </select>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn--secondary" id="cancelMaterial">Cancel</button>
-                <button class="btn btn--primary" id="saveMaterial">Add Material</button>
-            </div>
-        </div>
-    </div>
- -->
+    <script>
+    (function() {
+        function el(tag, className, attrs) {
+            var node = document.createElement(tag);
+            if (className) node.className = className;
+            if (attrs) {
+                Object.keys(attrs).forEach(function(key) {
+                    node.setAttribute(key, attrs[key]);
+                });
+            }
+            return node;
+        }
+
+        function textNode(tag, value, className) {
+            var node = el(tag, className);
+            node.textContent = value;
+            return node;
+        }
+
+        function append(parent, children) {
+            children.forEach(function(child) {
+                parent.appendChild(child);
+            });
+            return parent;
+        }
+
+        function createFormGroup(labelText, control) {
+            var group = el('div', 'form-group');
+            var label = el('label', 'form-label');
+            label.htmlFor = control.id;
+            label.textContent = labelText;
+            return append(group, [label, control]);
+        }
+
+        function createSelect(id, options, attrs) {
+            var select = el('select', 'form-control', Object.assign({id: id, autocomplete: 'off'}, attrs || {}));
+            options.forEach(function(opt) {
+                var option = el('option');
+                option.value = opt.value;
+                option.textContent = opt.label;
+                if (opt.selected) option.selected = true;
+                select.appendChild(option);
+            });
+            return select;
+        }
+
+        function createInput(id, type, attrs) {
+            return el('input', 'form-control', Object.assign({id: id, type: type, autocomplete: 'off'}, attrs || {}));
+        }
+
+        var tabs = [
+            {tab: 'study-plan', label: 'Study Plan Generator', active: true},
+            {tab: 'folder-manager', label: 'Folder Manager'},
+            {tab: 'cgpa-calculator', label: 'CGPA Calculator'},
+            {tab: 'performance-modes', label: 'Performance Modes'}
+        ];
+        var navContainer = document.getElementById('navTabs');
+        tabs.forEach(function(item) {
+            var btn = el('button', 'nav-tab' + (item.active ? ' active' : ''), {type: 'button', 'data-tab': item.tab});
+            btn.textContent = item.label;
+            navContainer.appendChild(btn);
+        });
+
+        var studyRow = document.getElementById('studyPlanFormRow');
+        var modeSelect = createSelect('studyMode', [
+            {value: 'easy', label: 'Easy Mode (1 chapter/day)'},
+            {value: 'normal', label: 'Normal Mode (2 chapters/day)', selected: true},
+            {value: 'intense', label: 'Intense Mode (7-day crash)'}
+        ]);
+        var startDate = createInput('startDate', 'date', {required: true});
+        var examDate = createInput('examDate', 'date', {required: true});
+        append(studyRow, [
+            createFormGroup('Study Mode', modeSelect),
+            createFormGroup('Semester Start Date', startDate),
+            createFormGroup('End Semester Exam Date', examDate)
+        ]);
+
+        var marksGrid = document.getElementById('marksInputGrid');
+        var marks = [
+            {id: 'ct1', label: 'Class Test 1 (10 marks)', max: 10, min: 0},
+            {id: 'ct2', label: 'Class Test 2 (10 marks)', max: 10, min: 0},
+            {id: 'assignment', label: 'Assignment (10 marks)', max: 10, min: 0},
+            {id: 'midSem', label: 'Mid Semester (20 marks)', max: 20, min: 0},
+            {id: 'endSem', label: 'End Semester (60 marks)', max: 60, min: 0}
+        ];
+        marks.forEach(function(item) {
+            var input = createInput(item.id, 'number', {min: item.min, max: item.max, required: true});
+            marksGrid.appendChild(createFormGroup(item.label, input));
+        });
+
+        var modesGrid = document.getElementById('modesGrid');
+        var modes = [
+            {mode: 'easy', title: 'Easy Mode', chapters: '1', durationId: 'easyDuration', durationText: '- days', workload: 'Light', description: 'Relaxed pace with plenty of time for revision', button: 'Select Easy Mode'},
+            {mode: 'normal', title: 'Normal Mode', chapters: '2', durationId: 'normalDuration', durationText: '- days', workload: 'Moderate', description: 'Balanced approach with steady progress', button: 'Select Normal Mode'},
+            {mode: 'intense', title: 'Intense Mode', chapters: '4+', durationId: 'intenseChapters', durationText: '7 days', workload: 'Heavy', description: 'Last-minute preparation with high intensity', button: 'Select Intense Mode'}
+        ];
+        modes.forEach(function(mode) {
+            var card = el('div', 'mode-card', {'data-mode': mode.mode});
+
+            var title = el('h3');
+            title.textContent = mode.title;
+
+            var stats = el('div', 'mode-stats');
+            var statRows = [
+                {label: 'Chapters per day:', value: mode.chapters, valueId: mode.mode === 'intense' ? 'intenseChapters' : null},
+                {label: 'Study duration:', value: mode.durationText, valueId: mode.mode !== 'intense' ? mode.durationId : null},
+                {label: 'Daily workload:', value: mode.workload}
+            ];
+            statRows.forEach(function(row) {
+                var stat = el('div', 'stat');
+                var labelSpan = textNode('span', row.label, 'stat-label');
+                var valueSpan = textNode('span', row.value, 'stat-value');
+                if (row.valueId) valueSpan.id = row.valueId;
+                stat.appendChild(labelSpan);
+                stat.appendChild(valueSpan);
+                stats.appendChild(stat);
+            });
+
+            var desc = textNode('p', mode.description, 'mode-description');
+            var btn = el('button', 'btn btn--outline mode-select', {type: 'button', 'data-mode': mode.mode});
+            btn.textContent = mode.button;
+
+            append(card, [title, stats, desc, btn]);
+            modesGrid.appendChild(card);
+        });
+    })();
+    </script>
     <script src="app.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
