diff --git a/src/api.py b/src/api.py
index ed324fa..d5b9ef4 100644
--- a/src/api.py
+++ b/src/api.py
@@ -135,6 +135,7 @@ async def train(
     test_size: float = Form(0.2),
     random_state: int = Form(42),
     n_estimators: int = Form(100),
+    max_depth: str = Form(""),  # Empty string means None
     kernel: str = Form("linear"),
     C: float = Form(1.0),
 ):
@@ -182,6 +183,7 @@ async def train(
             strategy,
             {
                 "n_estimators": n_estimators,
+                "max_depth": int(max_depth) if max_depth else None,
                 "kernel": kernel,
                 "C": C,
                 "random_state": random_state,
diff --git a/static/index.html b/static/index.html
index 6fea884..7832c39 100644
--- a/static/index.html
+++ b/static/index.html
@@ -34,6 +34,7 @@
             padding: 20px;
             overflow-y: auto;
             border-right: 1px solid #0f3460;
+            color: #e0e0e0;
         }
 
         .sidebar h1 {
@@ -45,11 +46,20 @@
         .sidebar h2 {
             font-size: 1.1rem;
             margin: 20px 0 10px;
-            color: #0f3460;
+            color: #ff6b6b;
             border-bottom: 2px solid #e94560;
             padding-bottom: 5px;
         }
 
+        .sidebar h3 {
+            color: #ff8e8e;
+            font-size: 0.95rem;
+        }
+
+        .sidebar p {
+            color: #c0c0c0;
+        }
+
         .form-group {
             margin-bottom: 15px;
         }
@@ -58,7 +68,8 @@
             display: block;
             margin-bottom: 5px;
             font-size: 0.9rem;
-            color: #aaa;
+            color: #ccc;
+            font-weight: 500;
         }
 
         .form-group input,
@@ -79,7 +90,7 @@
         .form-group small {
             display: block;
             margin-top: 3px;
-            color: #666;
+            color: #888;
             font-size: 0.8rem;
         }
 
@@ -337,7 +348,33 @@
                 </select>
             </div>
 
-            <h2>3. Train & Classify</h2>
+            <div class="form-group">
+                <label for="maxDepth">Max Depth (Random Forest, optional)</label>
+                <input type="number" id="maxDepth" value="" min="1" max="100" placeholder="None (auto)">
+                <small>Leave empty for automatic depth</small>
+            </div>
+
+            <div class="form-group">
+                <label for="cValue">C Parameter (SVM, Logistic Regression)</label>
+                <input type="number" id="cValue" value="1.0" min="0.001" step="0.1">
+                <small>Regularization strength (default: 1.0)</small>
+            </div>
+
+            <h3 style="color: #0f3460; margin: 20px 0 10px; font-size: 1rem;">Training Parameters</h3>
+
+            <div class="form-group">
+                <label for="testSize">Validation Split</label>
+                <input type="number" id="testSize" value="0.2" min="0.1" max="0.5" step="0.05">
+                <small>Fraction of data for validation (default: 0.2)</small>
+            </div>
+
+            <div class="form-group">
+                <label for="randomState">Random Seed</label>
+                <input type="number" id="randomState" value="42">
+                <small>For reproducibility (default: 42)</small>
+            </div>
+
+            <h2>3. Train classifier</h2>
             <button class="btn btn-primary" id="trainBtn" onclick="train()">
                 Train Model
             </button>
@@ -369,7 +406,7 @@
                 </div>
             </div>
 
-            <h2>4. Class Templates</h2>
+            <h2>4. Classify and visualize</h2>
             <div class="form-group">
                 <label for="templateSelect">Load Template</label>
                 <select id="templateSelect" onchange="loadTemplate()">
@@ -521,8 +558,10 @@
             formData.append('class_column', document.getElementById('classColumn').value);
             formData.append('n_estimators', document.getElementById('nEstimators').value);
             formData.append('kernel', document.getElementById('kernel').value);
-            formData.append('test_size', '0.2');
-            formData.append('random_state', '42');
+            formData.append('max_depth', document.getElementById('maxDepth').value || '');
+            formData.append('C', document.getElementById('cValue').value);
+            formData.append('test_size', document.getElementById('testSize').value);
+            formData.append('random_state', document.getElementById('randomState').value);
 
             const trainBtn = document.getElementById('trainBtn');
             trainBtn.disabled = true;
@@ -630,7 +669,7 @@
                 // Add GeoRaster layer
                 geoRasterLayer = createGeoRasterLayer(geoRaster, palette);
                 geoRasterLayer.addTo(map);
-                
+
                 // Apply initial opacity from slider
                 const initialOpacity = document.getElementById('opacitySlider').value / 100;
                 geoRasterLayer.setOpacity(initialOpacity);