diff --git a/README.md b/README.md
index a91b61d..3aee200 100644
--- a/README.md
+++ b/README.md
@@ -122,7 +122,7 @@ The original mapping used in the repository is:
 
 ## 🧠 Model Performance
 
-The ML pipeline was trained on the **Earthquake Alert Prediction Dataset** using `RandomizedSearchCV` for hyperparameter tuning and **SMOTE** to handle class imbalance.  
+The ML pipeline was trained on the **Earthquake Alert Prediction Dataset** using `XGBClassifier` for hyperparameter tuning and **SMOTE** to handle class imbalance. The model configuration was chosen by running `RandomizedSearchCV`.
 
 **Classification Report on Test Set (260 samples):**
 
@@ -192,8 +192,6 @@ SEISMOSENSE/
 
 - Add user authentication and log predictions for research purposes.
 
-**Note:** Due to the absence of front-end web development expertise and the absence of other contributors for the project, I was compelled to utilize AI tools (such as LLM services like ChatGPT™, Grok™, and GitHub Copilot™) to develop a sophisticated front-end for the web app. I am looking forward to human contribution on this project in order to scale it even further.
-
 ---
 
 ## 📄 License
diff --git a/app.py b/app.py
index 9e0f47c..a192d6f 100644
--- a/app.py
+++ b/app.py
@@ -1,11 +1,13 @@
 # app.py
-from flask import Flask, render_template, request
+from flask import Flask, render_template, request, redirect, url_for, session
 import joblib
 import numpy as np
 from pathlib import Path
 from fit import main
+import secrets
 
 app = Flask(__name__)
+app.secret_key = secrets.token_hex(32)
 
 # paths to the pickle files
 MODEL_PATH = Path("models/estimator.pkl")
@@ -36,8 +38,6 @@ def ensure_models():
 # main routes
 @app.route("/", methods=["GET", "POST"])
 def index():
-    result = None
-    confidence = None
     if request.method == "POST":
         try:
             magnitude = float(request.form["magnitude"])
@@ -49,14 +49,23 @@ def index():
             X = np.array([[magnitude, depth, cdi, mmi, sig]])
 
             pred_label = model.predict(X)[0]
+            confidence = None
             if hasattr(model.named_steps["model"], "predict_proba"):
                 proba_array = model.predict_proba(X)[0]
-                confidence = round(100 * proba_array[pred_label], 2)
+                confidence = round((float(100 * proba_array[pred_label])),2)
 
-            result = label_map[pred_label]
+            session["result"] = label_map[pred_label]
+            session["confidence"] = confidence
         except Exception as e:
-            result = f"Error: {str(e)}"
+            session["result"] = f"Error: {str(e)}"
+            session["confidence"] = None
 
+        # PRG: redirect so a page refresh won't re-submit the form
+        return redirect(url_for("index"))
+
+    # GET: consume the result from session (one-time display)
+    result = session.pop("result", None)
+    confidence = session.pop("confidence", None)
     return render_template("index.html", result=result, confidence=confidence)
 
 if __name__ == "__main__":
diff --git a/conf_mat.py b/conf_mat.py
index 1b94db7..9f12e74 100644
--- a/conf_mat.py
+++ b/conf_mat.py
@@ -34,7 +34,7 @@ def load_data(path="dataset/earthquake_data.csv") -> np.ndarray:
 
 def plotting(x, y) -> None:
     x_train, x_test, y_train, y_test = train_test_split(
-        x, y, test_size=2/10, random_state=120, shuffle=True, stratify=y
+        x, y, test_size=2/10, random_state=4, shuffle=True, stratify=y
     )
 
     labels = ALERT_LABELS
@@ -46,11 +46,10 @@ def plotting(x, y) -> None:
     # Professional dark theme matching the frontend
     plt.style.use('dark_background')
     
-    BG_COLOR = '#0f1419'          # Dark background
-    CARD_BG = '#1a1f26'           # Card background
+    BG_COLOR = '#151C26'          # Dark background
+    CARD_BG = "#050506"           # Card background
     TEXT_PRIMARY = '#e2e8f0'      # Primary text
     TEXT_SECONDARY = '#94a3b8'     # Muted text
-    ACCENT = '#00d4aa'            # Teal accent
     
     # Alert-specific colors for the heatmap
     ALERT_HEATMAP_COLORS = [
diff --git a/static/confusion_matrix.png b/static/confusion_matrix.png
new file mode 100644
index 0000000..d5d263b
Binary files /dev/null and b/static/confusion_matrix.png differ
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..8fd3f37
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,119 @@
+// ========================================
+// SeismoSense - JavaScript
+// ========================================
+
+// Tab Navigation
+const tabs = document.querySelectorAll('.nav-tab');
+const panels = document.querySelectorAll('.tab-panel');
+
+tabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+        // Remove active class from all tabs and panels
+        tabs.forEach(t => t.classList.remove('active'));
+        panels.forEach(p => p.classList.remove('active'));
+        
+        // Add active class to clicked tab and corresponding panel
+        tab.classList.add('active');
+        const panelId = tab.dataset.tab + '-panel';
+        document.getElementById(panelId).classList.add('active');
+    });
+});
+
+// Toast Notification Functions
+function getToastIcon(type) {
+    const icons = {
+        success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
+        error: '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>',
+        warning: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
+        info: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>'
+    };
+    return icons[type] || icons.info;
+}
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    
+    if (!container) return;
+    
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.innerHTML = `
+        <svg class="toast-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            ${getToastIcon(type)}
+        </svg>
+        <span class="toast-message">${message}</span>
+    `;
+    container.appendChild(toast);
+    setTimeout(() => {
+        toast.classList.add('toast-out');
+        setTimeout(() => {
+            toast.remove();
+        }, 300);
+    }, 3000);
+}
+
+// Form Submission - Show loading state and toast
+const form = document.getElementById('seismoForm');
+const btn = document.getElementById('predictBtn');
+const btnText = btn ? btn.querySelector('.btn-text') : null;
+const loader = document.getElementById('loader');
+
+if (form && btn && btnText) {
+    form.addEventListener('submit', () => {
+        // Show loading state
+        btn.disabled = true;
+        btnText.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> Analyzing...';
+        
+        if (loader) {
+            loader.style.display = 'inline-block';
+        }
+    });
+}
+
+// Clear button — reset all inputs
+const clearBtn = document.getElementById('clearBtn');
+if (clearBtn && form) {
+    clearBtn.addEventListener('click', () => {
+        form.querySelectorAll('.form-input').forEach(input => {
+            input.value = '';
+        });
+        form.querySelector('.form-input').focus();
+    });
+}
+
+
+// On page load, reset button state and animate confidence bar
+document.addEventListener('DOMContentLoaded', () => {
+    // Reset button state (in case of page reload with result)
+    if (btn && btnText) {
+        btn.disabled = false;
+        btnText.innerHTML = '<i class="fas fa-bolt"></i> Analyze & Predict';
+        
+        if (loader) {
+            loader.style.display = 'none';
+        }
+    }
+    
+    // Show toast if there's a result
+    const resultCard = document.querySelector('.result-card');
+    if (resultCard) {
+        const result = resultCard.classList.contains('green') ? 'Green Alert' :
+                      resultCard.classList.contains('orange') ? 'Orange Alert' :
+                      resultCard.classList.contains('red') ? 'Red Alert' :
+                      resultCard.classList.contains('yellow') ? 'Yellow Alert' : null;
+        if (result) {
+            showToast('Prediction complete!', 'success');
+        }
+    }
+    
+    // Animate confidence bar if result exists
+    const confFill = document.getElementById('confFill');
+    const confValue = document.getElementById('confValue');
+    
+    if (confFill && confValue) {
+        const width = confValue.textContent.trim();
+        setTimeout(() => {
+            confFill.style.width = width + '%';
+        }, 100);
+    }
+});
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..4cbe0a9
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,834 @@
+/* ========================================
+   SeismoSense - Professional Dark Theme
+   ======================================== */
+
+:root {
+    /* Dark Theme Colors */
+    --bg-primary: #0a0e14;
+    --bg-secondary: #111820;
+    --bg-tertiary: #1a222d;
+    --bg-card: #151c26;
+    --bg-input: #0d1218;
+    
+    /* Accent Colors */
+    --accent: #00d4aa;
+    --accent-hover: #00f5c4;
+    --accent-muted: #00a88a;
+    
+    /* Text Colors */
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --text-muted: #6e7681;
+    
+    /* Alert Colors */
+    --green: #22c55e;
+    --green-bg: rgba(34, 197, 94, 0.15);
+    --orange: #f97316;
+    --orange-bg: rgba(249, 115, 22, 0.15);
+    --red: #ef4444;
+    --red-bg: rgba(239, 68, 68, 0.15);
+    --yellow: #eab308;
+    --yellow-bg: rgba(234, 179, 8, 0.15);
+    
+    /* UI Elements */
+    --border: #30363d;
+    --border-focus: var(--accent);
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
+    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
+    --shadow-glow: 0 0 30px rgba(0, 212, 170, 0.15);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+/* Background Pattern */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+        radial-gradient(ellipse at 20% 20%, rgba(0, 212, 170, 0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, rgba(0, 212, 170, 0.05) 0%, transparent 50%),
+        repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 50px,
+            rgba(0, 212, 170, 0.02) 50px,
+            rgba(0, 212, 170, 0.02) 51px
+        ),
+        repeating-linear-gradient(
+            90deg,
+            transparent,
+            transparent 50px,
+            rgba(0, 212, 170, 0.02) 50px,
+            rgba(0, 212, 170, 0.02) 51px
+        );
+    pointer-events: none;
+    z-index: -1;
+}
+
+/* Header */
+.header {
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    padding: 0 2rem;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+}
+
+.header-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+.logo-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--accent), #00f5c4);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+/* Navigation Tabs */
+.nav-tabs {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.nav-tab {
+    padding: 0.625rem 1.25rem;
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.nav-tab:hover {
+    color: var(--text-primary);
+    background: var(--bg-tertiary);
+}
+
+.nav-tab.active {
+    color: var(--accent);
+    background: rgba(0, 212, 170, 0.1);
+}
+
+.nav-tab i {
+    font-size: 0.85rem;
+}
+
+/* Main Content */
+.main-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+/* Tab Panels */
+.tab-panel {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.tab-panel.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+@media (max-width: 1024px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Cards */
+.card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: var(--shadow-md);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.card-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.card-title i {
+    color: var(--accent);
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 1.25rem;
+}
+
+.form-label {
+    display: block;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.form-label .required {
+    color: var(--red);
+}
+
+.form-input {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    background: var(--bg-input);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    color: var(--text-primary);
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.15);
+}
+
+.form-input::placeholder {
+    color: var(--text-muted);
+}
+
+.form-help {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.375rem;
+}
+
+/* Button */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    background: linear-gradient(135deg, var(--accent), var(--accent-muted));
+    color: var(--bg-primary);
+    font-family: inherit;
+    font-size: 0.95rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    width: 100%;
+    margin-top: 0.5rem;
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-glow);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.btn i {
+    font-size: 1rem;
+}
+
+/* Button row: two buttons side by side */
+.btn-row {
+    display: flex;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.btn-row .btn {
+    margin-top: 0;
+    flex: 1;
+}
+
+/* Secondary / ghost button (Clear) */
+.btn-secondary {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border-color: var(--text-secondary);
+    box-shadow: none;
+}
+
+
+/* Spinner */
+.spinner {
+    display: none;
+    width: 20px;
+    height: 20px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Result Display */
+.result-card {
+    margin-top: 1.5rem;
+    padding: 1.5rem;
+    border-radius: 12px;
+    animation: slideIn 0.4s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.result-card.green {
+    background: var(--green-bg);
+    border: 1px solid var(--green);
+}
+
+.result-card.orange {
+    background: var(--orange-bg);
+    border: 1px solid var(--orange);
+}
+
+.result-card.red {
+    background: var(--red-bg);
+    border: 1px solid var(--red);
+}
+
+.result-card.yellow {
+    background: var(--yellow-bg);
+    border: 1px solid var(--yellow);
+}
+
+.result-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.result-label {
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.result-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.result-card.green .result-value { color: var(--green); }
+.result-card.orange .result-value { color: var(--orange); }
+.result-card.red .result-value { color: var(--red); }
+.result-card.yellow .result-value { color: var(--yellow); }
+
+.confidence-bar {
+    height: 8px;
+    background: var(--bg-tertiary);
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 0.75rem 0;
+}
+
+.confidence-fill {
+    height: 100%;
+    border-radius: 4px;
+    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.confidence-fill.green { background: var(--green); }
+.confidence-fill.orange { background: var(--orange); }
+.confidence-fill.red { background: var(--red); }
+.confidence-fill.yellow { background: var(--yellow); }
+
+.confidence-text {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.confidence-text span {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+/* Stats Grid */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-item {
+    background: var(--bg-tertiary);
+    border-radius: 10px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--accent);
+    font-family: 'JetBrains Mono', monospace;
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-top: 0.25rem;
+}
+
+/* Confusion Matrix */
+.conf-matrix-container {
+    text-align: center;
+    padding: 1rem;
+}
+
+.conf-matrix-img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: var(--shadow-md);
+}
+
+/* Alert Level Cards */
+.alert-levels {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.alert-level {
+    padding: 1rem;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.alert-level.green {
+    background: var(--green-bg);
+    border: 1px solid var(--green);
+}
+
+.alert-level.orange {
+    background: var(--orange-bg);
+    border: 1px solid var(--orange);
+}
+
+.alert-level.red {
+    background: var(--red-bg);
+    border: 1px solid var(--red);
+}
+
+.alert-level.yellow {
+    background: var(--yellow-bg);
+    border: 1px solid var(--yellow);
+}
+
+.alert-level-icon {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.alert-level.green .alert-level-icon { color: var(--green); }
+.alert-level.orange .alert-level-icon { color: var(--orange); }
+.alert-level.red .alert-level-icon { color: var(--red); }
+.alert-level.yellow .alert-level-icon { color: var(--yellow); }
+
+.alert-level-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.alert-level.green .alert-level-name { color: var(--green); }
+.alert-level.orange .alert-level-name { color: var(--orange); }
+.alert-level.red .alert-level-name { color: var(--red); }
+.alert-level.yellow .alert-level-name { color: var(--yellow); }
+
+.alert-level-desc {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    margin-top: 0.25rem;
+}
+
+/* About Section */
+.about-content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.about-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.about-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--accent);
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.about-text {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.7;
+}
+
+.feature-list {
+    list-style: none;
+    margin-top: 1rem;
+}
+
+.feature-list li {
+    padding: 0.5rem 0;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.feature-list li i {
+    color: var(--accent);
+    font-size: 0.85rem;
+}
+
+.tech-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.tech-badge {
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+/* Footer */
+.footer {
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border);
+    padding: 0;
+    margin-top: 2rem;
+}
+
+.footer-content {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.footer-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+    color: var(--text-secondary);
+}
+
+.footer-brand span:first-child {
+    font-weight: 600;
+    color: var(--accent);
+}
+
+.footer-divider {
+    color: var(--text-muted);
+}
+
+.footer-links {
+    display: flex;
+    gap: 1rem;
+}
+
+.footer-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: color 0.2s ease;
+}
+
+.footer-link svg {
+    width: 18px;
+    height: 18px;
+}
+
+.footer-link:hover {
+    color: var(--accent);
+}
+
+.footer-copyright {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+
+.footer-link-inline {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.footer-link-inline:hover {
+    text-decoration: underline;
+}
+
+/* Error State */
+.error-message {
+    background: var(--red-bg);
+    border: 1px solid var(--red);
+    border-radius: 10px;
+    padding: 1rem;
+    color: var(--red);
+    font-size: 0.9rem;
+    margin-top: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Empty Result State */
+.empty-result {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.empty-icon {
+    width: 80px;
+    height: 80px;
+    background: var(--bg-tertiary);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1rem;
+}
+
+.empty-icon i {
+    font-size: 2rem;
+    color: var(--accent);
+    opacity: 0.5;
+}
+
+.empty-text {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 90px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.toast {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    animation: toast-in 0.3s ease;
+    max-width: 350px;
+    box-shadow: var(--shadow-lg);
+}
+
+.toast.toast-out {
+    animation: toast-out 0.3s ease forwards;
+}
+
+@keyframes toast-in {
+    from { opacity: 0; transform: translateX(100%); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toast-out {
+    from { opacity: 1; transform: translateX(0); }
+    to { opacity: 0; transform: translateX(100%); }
+}
+
+.toast-icon {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.toast.success .toast-icon { color: var(--green); }
+.toast.error .toast-icon { color: var(--red); }
+.toast.warning .toast-icon { color: var(--yellow); }
+.toast.info .toast-icon { color: var(--accent); }
+
+.toast-message {
+    font-size: 0.9rem;
+    color: var(--text-primary);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .header {
+        padding: 0 1rem;
+    }
+    
+    .header-content {
+        flex-direction: column;
+        height: auto;
+        padding: 1rem 0;
+        gap: 1rem;
+    }
+    
+    .nav-tabs {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .nav-tab {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
+    
+    .nav-tab span {
+        display: none;
+    }
+    
+    .main-content {
+        padding: 1rem;
+    }
+    
+    .alert-levels {
+        grid-template-columns: 1fr;
+    }
+    
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+    }
+    
+    .toast-container {
+        left: 1rem;
+        right: 1rem;
+    }
+    
+    .toast {
+        max-width: 100%;
+    }
+}
diff --git a/templates/index.html b/templates/index.html
index 82cf5da..0885071 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,331 +5,381 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SeismoSense – AI Earthquake Alert Classifier</title>
 
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <script src="https://unpkg.com/feather-icons"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 
-    <style>
-        :root {
-            --bg-start: #0b1d26;
-            --bg-mid:   #1a3a45;
-            --bg-end:   #2c5364;
-            --card-bg:  rgba(10,20,30,0.78);
-            --accent:   #00d4aa;
-            --accent-dark: #00b894;
-            --text:     #e2e8f0;
-            --muted:    #94a3b8;
-            --danger:   #ef4444;
-            --warning:  #fb923c;
-            --safe:     #22c55e;
-            --info:     #0ea5e9;
-        }
-
-        *{margin:0;padding:0;box-sizing:border-box;}
-        body{
-            font-family:'Inter',sans-serif;
-            background:linear-gradient(135deg,var(--bg-start),var(--bg-mid),var(--bg-end));
-            color:var(--text);
-            min-height:100vh;
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            padding:1rem;
-            overflow-x:hidden;
-        }
-        .container{
-            background:var(--card-bg);
-            backdrop-filter:blur(12px);
-            border-radius:1.2rem;
-            padding:2rem;
-            width:100%;
-            max-width:420px;
-            box-shadow:0 12px 32px rgba(0,0,0,0.35),
-                       0 0 0 1px rgba(0,212,170,0.12);
-            position:relative;
-            overflow:hidden;
-            display:flex;
-            flex-direction:column;
-        }
-        .logo{
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            gap:.5rem;
-            margin-bottom:.5rem;
-        }
-        .logo svg{width:34px;height:34px;stroke:var(--accent);stroke-width:2.4;}
-        .logo h1{
-            font-size:1.75rem;
-            font-weight:700;
-            color:var(--accent);
-        }
-        .tagline{
-            text-align:center;
-            font-size:.92rem;
-            color:var(--muted);
-            margin-bottom:1.5rem;
-        }
-
-        /* Form */
-        .form-group{
-            margin-bottom:1.1rem;
-        }
-        label{
-            display:block;
-            font-weight:600;
-            font-size:.9rem;
-            margin-bottom:.35rem;
-            color:#cbd5e1;
-        }
-        input[type=number]{
-            width:100%;
-            padding:.75rem 1rem;
-            background:rgba(30,35,55,.7);
-            border:1px solid rgba(100,110,140,.4);
-            border-radius:.6rem;
-            color:var(--text);
-            font-size:1rem;
-            transition:border .2s,box-shadow .2s;
-        }
-        input:focus{
-            outline:none;
-            border-color:var(--accent);
-            box-shadow:0 0 0 3px rgba(0,212,170,.2);
-        }
-        .help{
-            font-size:.78rem;
-            color:#64748b;
-            margin-top:.25rem;
-            display:block;
-        }
-
-        button{
-            width:100%;
-            padding:.9rem;
-            margin-top:1rem;
-            background:linear-gradient(135deg,var(--accent),var(--accent-dark));
-            color:#fff;
-            font-weight:600;
-            font-size:1rem;
-            border:none;
-            border-radius:.6rem;
-            cursor:pointer;
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            gap:.5rem;
-            transition:transform .2s,box-shadow .2s;
-        }
-        button:hover{
-            transform:translateY(-2px);
-            box-shadow:0 8px 20px rgba(0,212,170,.3);
-        }
-        .loader{
-            width:18px;height:18px;
-            border:2px solid transparent;
-            border-top:2px solid #fff;
-            border-radius:50%;
-            animation:spin 1s linear infinite;
-        }
-        @keyframes spin{to{transform:rotate(360deg);}}
-
-        /* Result */
-        .result{
-            margin-top:1.5rem;
-            padding:1.2rem;
-            border-radius:.8rem;
-            text-align:center;
-            font-weight:600;
-            animation:fadeIn .4s ease-out;
-        }
-        .result.safe   {background:rgba(34,197,94,.2);border:1px solid var(--safe);color:#86efac;}
-        .result.orange {background:rgba(251,146,60,.2);border:1px solid var(--warning);color:#fb923c;}
-        .result.red    {background:rgba(239,68,68,.2);border:1px solid var(--danger);color:#fca5a5;}
-        .result.yellow {background:rgba(250,204,21,.2);border:1px solid #facc15;color:#fde047;}
-
-        .conf-bar{
-            height:8px;
-            background:#1e293b;
-            border-radius:4px;
-            overflow:hidden;
-            margin: .8rem 0;
-        }
-        .conf-fill{
-            height:100%;
-            width:0;
-            border-radius:4px;
-            transition:width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
-        }
-        .conf-fill.green  {background:#22c55e;}
-        .conf-fill.orange {background:#fb923c;}
-        .conf-fill.red    {background:#ef4444;}
-        .conf-fill.yellow {background:#facc15;}
-
-        .conf-text{
-            font-size:.88rem;
-            color:var(--muted);
-        }
+</head>
+<body>
 
-        /* Footer */
-        .footer {
-            margin-top: 2rem;
-            padding-top: 1.5rem;
-            border-top: 1px solid rgba(100, 110, 140, 0.3);
-            font-size: 0.8rem;
-            color: #64748b;
-            text-align: center;
-            line-height: 1.5;
-        }
-        .footer a {
-            color: var(--accent);
-            text-decoration: none;
-            font-weight: 500;
-        }
-        .footer a:hover {
-            text-decoration: underline;
-        }
-        .footer strong {
-            color: #cbd5e1;
-        }
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <div class="logo">
+                <span class="logo-text">SeismoSense</span>
+            </div>
+            
+            <nav class="nav-tabs">
+                <button class="nav-tab active" data-tab="predict">
+                    <i class="fas fa-bolt"></i>
+                    <span>Predict</span>
+                </button>
+                <button class="nav-tab" data-tab="performance">
+                    <i class="fas fa-chart-line"></i>
+                    <span>Performance</span>
+                </button>
+                <button class="nav-tab" data-tab="about">
+                    <i class="fas fa-info-circle"></i>
+                    <span>About</span>
+                </button>
+            </nav>
+        </div>
+    </header>
 
-        /* Wave animation */
-        .wave-bg{
-            position:absolute;
-            inset:0;
-            overflow:hidden;
-            pointer-events:none;
-            z-index:-1;
-        }
-        .wave{
-            position:absolute;
-            bottom:0;
-            width:200%;
-            height:180px;
-            background:linear-gradient(90deg,transparent,rgba(0,212,170,.04),transparent);
-            animation:wave 9s cubic-bezier(.36,.45,.63,.53) infinite;
-        }
-        .wave:nth-child(1){animation-duration:7s;opacity:.6;}
-        .wave:nth-child(2){animation-duration:11s;opacity:.3;animation-delay:-2s;}
-        @keyframes wave{
-            0%{transform:translateX(0);}
-            100%{transform:translateX(-50%);}
-        }
+    <!-- Main Content -->
+    <main class="main-content">
+        
+        <!-- Predict Tab -->
+        <div class="tab-panel active" id="predict-panel">
+            <div class="dashboard-grid">
+                
+                <!-- Input Form -->
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <i class="fas fa-sliders"></i>
+                            Earthquake Parameters
+                        </h2>
+                    </div>
+                    
+                    <form method="POST" id="seismoForm">
+                        <div class="form-group">
+                            <label class="form-label">
+                                Magnitude <span class="required">*</span>
+                            </label>
+                            <input type="number" step="0.01" name="magnitude" id="magnitude" 
+                                   class="form-input" placeholder="e.g., 5.8" required>
+                            <p class="form-help">Richter scale magnitude (0.0 – 9.0+)</p>
+                        </div>
 
-        @keyframes fadeIn{
-            from{opacity:0;transform:translateY(10px);}
-            to{opacity:1;transform:none;}
-        }
+                        <div class="form-group">
+                            <label class="form-label">
+                                Depth <span class="required">*</span>
+                            </label>
+                            <input type="number" step="0.01" name="depth" id="depth" 
+                                   class="form-input" placeholder="e.g., 33.5" required>
+                            <p class="form-help">Depth of earthquake in kilometers</p>
+                        </div>
 
-        .hidden { display: none; }
-    </style>
-</head>
-<body>
+                        <div class="form-group">
+                            <label class="form-label">
+                                CDI <span class="required">*</span>
+                            </label>
+                            <input type="number" step="0.01" name="cdi" id="cdi" 
+                                   class="form-input" placeholder="e.g., 6.5" required>
+                            <p class="form-help">Community Decimal Intensity (0-10)</p>
+                        </div>
 
-<div class="wave-bg">
-    <div class="wave"></div>
-    <div class="wave"></div>
-</div>
+                        <div class="form-group">
+                            <label class="form-label">
+                                MMI <span class="required">*</span>
+                            </label>
+                            <input type="number" step="0.01" name="mmi" id="mmi" 
+                                   class="form-input" placeholder="e.g., 7.0" required>
+                            <p class="form-help">Modified Mercalli Intensity (0-10)</p>
+                        </div>
 
-<div class="container">
-    <div class="logo">
-        <svg viewBox="0 0 24 24"><path fill="none" d="M12 2v20M3 12h18M5.5 5.5l13 13M5.5 18.5l13-13"/></svg>
-        <h1>SeismoSense</h1>
-    </div>
-    <p class="tagline">AI-Powered Earthquake Alert Classifier</p>
+                        <div class="form-group">
+                            <label class="form-label">
+                                SIG <span class="required">*</span>
+                            </label>
+                            <input type="number" step="0.01" name="sig" id="sig" 
+                                   class="form-input" placeholder="e.g., 850" required>
+                            <p class="form-help">Significance parameter (0-1000)</p>
+                        </div>
 
-    <form method="POST" id="seismoForm">
-        <div class="form-group">
-            <label for="magnitude">Magnitude (Richter)</label>
-            <input type="number" step="0.01" name="magnitude" id="magnitude" required>
-            <small class="help">Typical range: 0.0 – 9.0</small>
-        </div>
+                        <div class="btn-row">
+                            <button type="submit" class="btn" id="predictBtn">
+                                <span class="btn-text">
+                                    <i class="fas fa-bolt"></i>
+                                    Analyze &amp; Predict
+                                </span>
+                                <span class="spinner" id="loader"></span>
+                            </button>
+                            <button type="button" class="btn btn-secondary" id="clearBtn">
+                                <i class="fas fa-times"></i>
+                                Clear
+                            </button>
+                        </div>
+                    </form>
+                </div>
 
-        <div class="form-group">
-            <label for="depth">Depth (km)</label>
-            <input type="number" step="0.01" name="depth" id="depth" required>
+                <!-- Result Panel (Right Side) -->
+                <div class="card" id="resultPanel">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <i class="fas fa-chart-pie"></i>
+                            Prediction Result
+                        </h2>
+                    </div>
+                    
+                    {% if result and result != 'Error' %}
+                    <div class="result-card {{ result }}">
+                        <div class="result-header">
+                            <span class="result-label">Predicted Alert</span>
+                            <span class="result-value">{{ result | upper }}</span>
+                        </div>
+                        {% if confidence %}
+                        <div class="confidence-bar">
+                            <div class="confidence-fill {{ result }}" id="confFill" style="width: 0%;"></div>
+                        </div>
+                        <p class="confidence-text">
+                            Confidence: <span id="confValue">{{ confidence }}</span>%
+                        </p>
+                        {% endif %}
+                    </div>
+                    {% elif result and result.startswith('Error') %}
+                    <div class="error-message">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        {{ result }}
+                    </div>
+                    {% else %}
+                    <div class="empty-result">
+                        <div class="empty-icon">
+                            <i class="fas fa-seismic"></i>
+                        </div>
+                        <p class="empty-text">Enter earthquake parameters and click "Analyze &amp; Predict"</p>
+                    </div>
+                    {% endif %}
+                    
+                    <!-- Alert Level Cards with Descriptions -->
+                    <div style="margin-top: 1.5rem;">
+                        <h4 style="font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem;">
+                            <i class="fas fa-info-circle"></i> Alert Levels Guide
+                        </h4>
+                        <p style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1rem;">
+                            SeismoSense classifies earthquakes into four alert levels based on multiple seismic parameters:
+                        </p>
+                        <div class="alert-levels">
+                            <div class="alert-level green">
+                                <div class="alert-level-icon">
+                                    <i class="fas fa-check-circle"></i>
+                                </div>
+                                <div class="alert-level-name">Green (Low)</div>
+                                <div class="alert-level-desc">Minor seismic activity, minimal risk</div>
+                            </div>
+                            
+                            <div class="alert-level orange">
+                                <div class="alert-level-icon">
+                                    <i class="fas fa-exclamation-circle"></i>
+                                </div>
+                                <div class="alert-level-name">Orange (Moderate)</div>
+                                <div class="alert-level-desc">Moderate earthquake, some damage possible</div>
+                            </div>
+                            
+                            <div class="alert-level red">
+                                <div class="alert-level-icon">
+                                    <i class="fas fa-radiation"></i>
+                                </div>
+                                <div class="alert-level-name">Red (High)</div>
+                                <div class="alert-level-desc">Major earthquake, significant damage expected</div>
+                            </div>
+                            
+                            <div class="alert-level yellow">
+                                <div class="alert-level-icon">
+                                    <i class="fas fa-eye"></i>
+                                </div>
+                                <div class="alert-level-name">Yellow (Watch)</div>
+                                <div class="alert-level-desc">Elevated activity, potential for escalation</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Quick Tip -->
+                    <div style="margin-top: 1.5rem; padding: 1rem; background: var(--bg-tertiary); border-radius: 10px;">
+                        <h4 style="font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent);">
+                            <i class="fas fa-lightbulb"></i> Quick Tip
+                        </h4>
+                        <p style="font-size: 0.8rem; color: var(--text-secondary);">
+                            For accurate predictions, use data from reliable seismic monitoring stations. 
+                            CDI and MMI values are typically derived from crowd-sourced reports and instrumental readings.
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div class="form-group">
-            <label for="cdi">CDI (Community Decimal Intensity)</label>
-            <input type="number" step="0.01" name="cdi" id="cdi" required>
+        <!-- Performance Tab -->
+        <div class="tab-panel" id="performance-panel">
+            <div class="dashboard-grid">
+                <!-- Confusion Matrix -->
+                <div class="card" style="grid-column: 1 / -1;">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <i class="fas fa-th"></i>
+                            Model Performance: Confusion Matrix
+                        </h2>
+                    </div>
+                    
+                    <div class="conf-matrix-container">
+                        <img src="{{ url_for('static', filename='confusion_matrix.png') }}" 
+                             alt="Confusion Matrix" 
+                             class="conf-matrix-img"
+                             style="max-height: 500px;">
+                    </div>
+                    
+                    <div class="stats-grid" style="margin-top: 1.5rem;">
+                        <div class="stat-item">
+                            <div class="stat-value">4</div>
+                            <div class="stat-label">Alert Classes</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value">5</div>
+                            <div class="stat-label">Input Features</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Legend -->
+                <div class="card">
+                    <div class="card-header">
+                        <h2 class="card-title">
+                            <i class="fas fa-book"></i>
+                            Reading the Matrix
+                        </h2>
+                    </div>
+                    
+                    <div class="about-text">
+                        <p style="margin-bottom: 1rem;">
+                            The confusion matrix shows how well the model classifies earthquake alerts:
+                        </p>
+                        <ul class="feature-list">
+                            <li>
+                                <i class="fas fa-check"></i>
+                                <strong>Diagonal values</strong> — Correct predictions
+                            </li>
+                            <li>
+                                <i class="fas fa-times"></i>
+                                <strong>Off-diagonal values</strong> — Misclassifications
+                            </li>
+                            <li>
+                                <i class="fas fa-arrow-right"></i>
+                                <strong>Rows</strong> — True actual labels
+                            </li>
+                            <li>
+                                <i class="fas fa-arrow-down"></i>
+                                <strong>Columns</strong> — Predicted labels
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <div class="form-group">
-            <label for="mmi">MMI (Modified Mercalli Intensity)</label>
-            <input type="number" step="0.01" name="mmi" id="mmi" required>
+        <!-- About Tab -->
+        <div class="tab-panel" id="about-panel">
+            <div class="about-content">
+                <div class="about-card">
+                    <h3 class="about-title">
+                        <i class="fas fa-seismic"></i>
+                        About SeismoSense
+                    </h3>
+                    <p class="about-text">
+                        SeismoSense is an AI-powered earthquake alert classifier that uses machine learning 
+                        to analyze seismic parameters and predict alert levels. The system processes multiple 
+                        input features including magnitude, depth, CDI (Community Decimal Intensity), MMI 
+                        (Modified Mercalli Intensity), and SIG (Significance) to classify earthquakes 
+                        into four alert categories.
+                    </p>
+                </div>
+                
+                <div class="about-card">
+                    <h3 class="about-title">
+                        <i class="fas fa-cogs"></i>
+                        Features
+                    </h3>
+                    <ul class="feature-list">
+                        <li>
+                            <i class="fas fa-bolt"></i>
+                            Real-time earthquake alert prediction
+                        </li>
+                        <li>
+                            <i class="fas fa-brain"></i>
+                            Machine learning-powered classification
+                        </li>
+                        <li>
+                            <i class="fas fa-chart-bar"></i>
+                            Model performance visualization
+                        </li>
+                        <li>
+                            <i class="fas fa-mobile-alt"></i>
+                            Responsive design for all devices
+                        </li>
+                        <li>
+                            <i class="fas fa-shield-alt"></i>
+                            Reliable error handling
+                        </li>
+                    </ul>
+                </div>
+                
+                <div class="about-card">
+                    <h3 class="about-title">
+                        <i class="fas fa-tools"></i>
+                        Technology Stack
+                    </h3>
+                    <div class="tech-stack">
+                        <span class="tech-badge">Python</span>
+                        <span class="tech-badge">Flask</span>
+                        <span class="tech-badge">Scikit-learn</span>
+                        <span class="tech-badge">Pandas</span>
+                        <span class="tech-badge">NumPy</span>
+                        <span class="tech-badge">Seaborn</span>
+                        <span class="tech-badge">Matplotlib</span>
+                        <span class="tech-badge">HTML5</span>
+                        <span class="tech-badge">CSS3</span>
+                        <span class="tech-badge">Font Awesome</span>
+                    </div>
+                </div>
+                
+                <div class="about-card">
+                    <h3 class="about-title">
+                        <i class="fas fa-user"></i>
+                        Credits
+                    </h3>
+                    <p class="about-text">
+                        Built by <strong>Sakib Hossain</strong>. Licensed under the MIT License.<br>
+                        View the source code on <a href="https://github.com/ByteBard58/SeismoSense" target="_blank">GitHub</a>.
+                    </p>
+                </div>
+            </div>
         </div>
 
-        <div class="form-group">
-            <label for="sig">SIG (Significance)</label>
-            <input type="number" step="0.01" name="sig" id="sig" required>
-        </div>
+    </main>
 
-        <button type="submit" id="predictBtn">
-            <span class="btn-text">Predict Alert</span>
-            <span class="loader hidden" id="loader"></span>
-        </button>
-    </form>
+    <!-- Toast Notification Container -->
+    <div id="toast-container" class="toast-container"></div>
 
-    <!-- Result Section -->
-    <div id="resultContainer" class="hidden">
-        {% if result and result != 'Error' %}
-        <div class="result {{ result }}">
-            <strong>Predicted Alert: {{ result | upper }}</strong>
-            {% if confidence %}
-            <p class="conf-text">Confidence: <span id="confValue">{{ confidence }}</span>%</p>
-            <div class="conf-bar">
-                <div id="confFill" class="conf-fill {{ result }}" style="width: 0%;"></div>
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-content">
+            <div class="footer-brand">
+                <span>SeismoSense</span>
+            </div>
+            <div class="footer-links">
+                <a href="https://github.com/ByteBard58/SeismoSense" target="_blank" class="footer-link">
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                    </svg>
+                    GitHub
+                </a>
+            </div>
+            <div class="footer-copyright">
+                &copy; 2026 Sakib Hossain • <a href="https://github.com/ByteBard58/SeismoSense/blob/main/LICENSE" target="_blank" class="footer-link-inline">MIT License</a>
             </div>
-            {% endif %}
-        </div>
-        {% elif result and result.startswith('Error') %}
-        <div class="result red">
-            <strong>{{ result }}</strong>
         </div>
-        {% endif %}
-    </div>
-
-    <!-- Footer -->
-    <div class="footer">
-        <p>
-            Check the official GitHub repo for this web app
-            <a href="https://github.com/ByteBard58/SeismoSense" target="_blank">here</a>.<br>
-            The SeismoSense is licensed under the <strong>MIT License</strong>.<br>
-            &copy; 2025 <strong>Sakib Hossain</strong>. All rights reserved.
-        </p>
-    </div>
-</div>
-
-<script>
-    feather.replace();
-
-    const form = document.getElementById('seismoForm');
-    const btn = document.getElementById('predictBtn');
-    const btnText = btn.querySelector('.btn-text');
-    const loader = document.getElementById('loader');
-    const resultContainer = document.getElementById('resultContainer');
-    const confFill = document.getElementById('confFill');
-    const confValue = document.getElementById('confValue');
+    </footer>
 
-    form.addEventListener('submit', () => {
-        btn.disabled = true;
-        btnText.textContent = 'Analyzing…';
-        loader.classList.remove('hidden');
-        resultContainer.classList.add('hidden');
-    });
+    <script src="{{ url_for('static', filename='script.js') }}"></script>
 
-    document.addEventListener('DOMContentLoaded', () => {
-        if (confFill && confValue) {
-            const width = confValue.textContent.trim();
-            resultContainer.classList.remove('hidden');
-            confFill.style.width = '0%';
-            setTimeout(() => {
-                confFill.style.width = width + '%';
-            }, 100);
-        } else if (resultContainer.querySelector('.result')) {
-            resultContainer.classList.remove('hidden');
-        }
-    });
-</script>
 </body>
-</html>
\ No newline at end of file
+</html>