diff --git a/src/alternative_interface/views.py b/src/alternative_interface/views.py
index 9286a64..830da55 100644
--- a/src/alternative_interface/views.py
+++ b/src/alternative_interface/views.py
@@ -1,6 +1,6 @@
 from django.shortcuts import render
 from indicators.models import Indicator
-from base.models import Pathogen
+from base.models import Pathogen, Geography
 
 
 HEADER_DESCRIPTION = "Discover, display and download real-time infectious disease indicators (time series) that track a variety of pathogens, diseases and syndromes in a variety of locations (primarily within the USA). Browse the list, or filter it first by locations and pathogens of interest, by surveillance categories, and more. Expand any row to expose and select from a set of related indicators, then hit 'Show Selected Indicators' at bottom to plot or export your selected indicators, or to generate code snippets to retrieve them from the Delphi Epidata API. Most indicators are served from the Delphi Epidata real-time repository, but some may be available only from third parties or may require prior approval."
@@ -18,16 +18,28 @@ def alternative_interface_view(request):
             )
         )
 
-        # Get pathogen filter from URL parameters
+        # Fetch geographies for dropdown
+        ctx["geographies"] = list(
+            Geography.objects.filter(used_in="indicatorsets").order_by(
+                "display_order_number"
+            )
+        )
+
+        # Get filters from URL parameters
         pathogen_filter = request.GET.get("pathogen", "")
+        geography_filter = request.GET.get("geography", "")
         ctx["selected_pathogen"] = pathogen_filter
+        ctx["selected_geography"] = geography_filter
 
-        # Build queryset with optional pathogen filtering
-        indicators_qs = Indicator.objects.prefetch_related("pathogens").all()
+        # Build queryset with optional filtering
+        indicators_qs = Indicator.objects.prefetch_related("pathogens", "available_geographies").all()
 
         if pathogen_filter:
             indicators_qs = indicators_qs.filter(pathogens__id=pathogen_filter)
 
+        if geography_filter:
+            indicators_qs = indicators_qs.filter(available_geographies__id=geography_filter)
+
         # Convert to list of dictionaries
         ctx["indicators"] = [
             {
diff --git a/src/assets/css/alter_dashboard.css b/src/assets/css/alter_dashboard.css
index c7a4536..9784c3c 100644
--- a/src/assets/css/alter_dashboard.css
+++ b/src/assets/css/alter_dashboard.css
@@ -78,33 +78,52 @@ body {
     z-index: 1;
 }
 
-/* Hero Controls */
-.hero-controls {
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-radius: var(--border-radius);
-    padding: 1.5rem;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+/* Filter Hero Section */
+.filter-hero-section {
+    background: linear-gradient(135deg, #475569 0%, #334155 100%);
+    padding: 2rem 0;
+    margin-bottom: 3rem;
+    position: relative;
+    overflow: hidden;
+}
+
+.filter-hero-content {
+    position: relative;
+    z-index: 1;
+}
+
+/* Filter Form Inline */
+.filter-form-inline {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: nowrap;
+    justify-content: center;
+    white-space: nowrap;
 }
 
-.hero-controls .form-label {
+.filter-label {
+    color: rgba(255, 255, 255, 0.9);
     font-weight: 500;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+    font-size: 1rem;
+    white-space: nowrap;
 }
 
-.hero-controls .form-select {
-    background-color: rgba(255, 255, 255, 0.9);
+.filter-select {
+    min-width: 220px;
+    padding: 0.75rem 1rem;
     border: 1px solid rgba(255, 255, 255, 0.3);
-    color: var(--dark-text);
+    border-radius: var(--border-radius);
+    background-color: rgba(255, 255, 255, 0.95);
     font-weight: 500;
+    transition: var(--transition);
 }
 
-.hero-controls .form-select:focus {
+.filter-select:focus {
     background-color: white;
     border-color: rgba(255, 255, 255, 0.5);
     box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
+    outline: none;
 }
 
 
@@ -122,21 +141,7 @@ body {
     font-weight: 400;
 }
 
-/* Card Enhancements */
-.card {
-    border: none;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-sm);
-    transition: var(--transition);
-    background: white;
-    overflow: hidden;
-}
-
-.card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-}
-
+/* Card Header */
 .card-header {
     background: white;
     border-bottom: 1px solid var(--border-color);
@@ -151,224 +156,31 @@ body {
     color: var(--dark-text);
 }
 
-.card-body {
-    padding: 1.5rem;
-}
-
-/* Chart Container */
-.chart-container {
-    position: relative;
-    height: 300px;
-    padding: 1rem;
-}
-
-.chart-container canvas {
-    max-height: 100%;
-}
-
-/* Stats Grid */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin-bottom: 3rem;
-}
-
-.stat-card {
-    background: white;
-    padding: 2rem;
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-sm);
-    text-align: center;
-    transition: var(--transition);
-    border: 1px solid var(--border-color);
-}
-
-.stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-}
-
-.stat-number {
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    margin-bottom: 0.5rem;
-    line-height: 1;
-}
-
-.stat-label {
-    color: var(--secondary-color);
-    font-weight: 500;
-    font-size: 0.875rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-/* Filter Section */
-.filter-section {
-    background: white;
-    padding: 2rem;
-    border-radius: var(--border-radius);
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow-sm);
-    border: 1px solid var(--border-color);
-}
-
-.filter-title {
-    font-weight: 600;
-    margin-bottom: 1rem;
-    color: var(--dark-text);
-    font-size: 1.125rem;
-}
-
-.form-label {
-    font-weight: 500;
-    color: var(--dark-text);
-    margin-bottom: 0.5rem;
-}
-
-.form-select {
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 0.75rem;
-    font-size: 0.875rem;
-    transition: var(--transition);
-}
-
-.form-select:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-}
-
-/* Button Styles */
-.btn {
-    border-radius: 8px;
-    font-weight: 500;
-    padding: 0.75rem 1.5rem;
-    font-size: 0.875rem;
-    transition: var(--transition);
-    border: none;
-}
-
-.btn-primary {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.btn-primary:hover {
-    background-color: var(--primary-dark);
-    transform: translateY(-1px);
-}
-
-.btn-outline-secondary {
-    border: 1px solid var(--border-color);
-    color: var(--secondary-color);
-}
-
-.btn-outline-secondary:hover {
-    background-color: var(--light-bg);
-    border-color: var(--secondary-color);
-}
-
-.btn-sm {
-    padding: 0.5rem 1rem;
-    font-size: 0.75rem;
-}
-
-/* Table Styles */
-.table-container {
+/* Chart Section */
+.chart-section {
     background: white;
     border-radius: var(--border-radius);
+    margin-top: 3rem;
     overflow: hidden;
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--border-color);
 }
 
-.table {
-    margin: 0;
-    font-size: 0.875rem;
-}
-
-.table th {
-    background-color: var(--light-bg);
-    border: none;
-    padding: 1rem;
-    font-weight: 600;
-    color: var(--dark-text);
-    font-size: 0.75rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+.chart-container-wrapper {
+    padding: 1.5rem;
 }
 
-.table td {
-    border: none;
+/* Chart Container */
+.chart-container {
+    position: relative;
+    height: 400px;
     padding: 1rem;
-    border-bottom: 1px solid var(--border-color);
-    vertical-align: middle;
-}
-
-.table tbody tr:hover {
-    background-color: rgba(37, 99, 235, 0.05);
 }
 
-/* Badge Styles */
-.badge {
-    font-size: 0.75rem;
-    padding: 0.5rem 0.75rem;
-    border-radius: 6px;
-    font-weight: 500;
-}
-
-.bg-primary {
-    background-color: var(--primary-color) !important;
-}
-
-.bg-secondary {
-    background-color: var(--secondary-color) !important;
-}
-
-.bg-success {
-    background-color: var(--success-color) !important;
-}
-
-.bg-warning {
-    background-color: var(--warning-color) !important;
-}
-
-.bg-danger {
-    background-color: var(--danger-color) !important;
-}
-
-/* Data Source Badges */
-.data-source-badge {
-    background-color: var(--light-bg);
-    color: var(--secondary-color);
-    padding: 0.25rem 0.75rem;
-    border-radius: 6px;
-    font-size: 0.75rem;
-    margin-right: 0.5rem;
-    margin-bottom: 0.25rem;
-    display: inline-block;
-    font-weight: 500;
-}
-
-/* Loading Spinner */
-.loading-spinner {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid rgba(37, 99, 235, 0.3);
-    border-radius: 50%;
-    border-top-color: var(--primary-color);
-    animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
+.chart-container canvas {
+    max-height: 100%;
 }
 
-
 /* Footer */
 footer {
     background: white;
@@ -387,41 +199,41 @@ footer {
         font-size: 1rem;
     }
     
-    .hero-controls {
-        margin-top: 2rem;
-        padding: 1rem;
+    .filter-hero-section {
+        padding: 1.5rem 0;
+        margin-bottom: 2rem;
     }
     
-    
-    .stats-grid {
-        grid-template-columns: 1fr;
-        gap: 1rem;
+    .filter-form-inline {
+        flex-wrap: wrap;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.75rem;
     }
     
-    .stat-card {
-        padding: 1.5rem;
+    .filter-select {
+        width: 100%;
+        min-width: auto;
     }
     
-    .stat-number {
-        font-size: 2rem;
+    .filter-label {
+        text-align: center;
     }
     
-    .filter-section {
-        padding: 1.5rem;
+    .card-header {
+        padding: 1rem;
     }
     
-    .card-header,
-    .card-body {
-        padding: 1rem;
+    .chart-section {
+        margin-top: 2rem;
     }
     
     .chart-container {
-        height: 250px;
+        height: 300px;
     }
     
-    .table th,
-    .table td {
-        padding: 0.75rem 0.5rem;
+    .chart-container-wrapper {
+        padding: 1rem;
     }
 }
 
@@ -438,71 +250,26 @@ footer {
         font-size: 0.875rem;
     }
     
-    .stat-number {
-        font-size: 1.75rem;
+    .filter-hero-section {
+        padding: 1rem 0;
+        margin-bottom: 1.5rem;
     }
     
-    .btn {
-        padding: 0.625rem 1.25rem;
-        font-size: 0.75rem;
+    .filter-label {
+        font-size: 0.875rem;
+    }
+    
+    .filter-select {
+        padding: 0.625rem 0.875rem;
+        font-size: 0.875rem;
+    }
+    
+    .chart-section {
+        margin-top: 1.5rem;
+    }
+    
+    .chart-container {
+        height: 250px;
     }
 }
 
-/* Animation Classes */
-.fade-in {
-    animation: fadeIn 0.5s ease-in;
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-.slide-up {
-    animation: slideUp 0.3s ease-out;
-}
-
-@keyframes slideUp {
-    from { transform: translateY(10px); opacity: 0; }
-    to { transform: translateY(0); opacity: 1; }
-}
-
-/* Utility Classes */
-.text-muted {
-    color: var(--secondary-color) !important;
-}
-
-.border-0 {
-    border: 0 !important;
-}
-
-.shadow-none {
-    box-shadow: none !important;
-}
-
-/* Chart.js Customizations */
-.chartjs-tooltip {
-    background-color: rgba(0, 0, 0, 0.8) !important;
-    border-radius: 6px !important;
-    padding: 0.5rem !important;
-    font-size: 0.75rem !important;
-}
-
-/* Custom Scrollbar */
-.table-responsive::-webkit-scrollbar {
-    height: 8px;
-}
-
-.table-responsive::-webkit-scrollbar-track {
-    background: var(--light-bg);
-    border-radius: 4px;
-}
-
-.table-responsive::-webkit-scrollbar-thumb {
-    background: var(--border-color);
-    border-radius: 4px;
-}
-
-.table-responsive::-webkit-scrollbar-thumb:hover {
-    background: var(--secondary-color);
-}
diff --git a/src/assets/js/alter_dashboard.js b/src/assets/js/alter_dashboard.js
index 128a104..bb9fcde 100644
--- a/src/assets/js/alter_dashboard.js
+++ b/src/assets/js/alter_dashboard.js
@@ -9,144 +9,177 @@ class AlterDashboard {
     }
 
     init() {
-        this.setupEventListeners();
-        this.loadInitialData();
+        this.initChart();
     }
 
-    loadInitialData() {
-        // All data is already loaded in the template
-        this.renderTable(window.djangoIndicators || []);
-    }
-
-
-    setupEventListeners() {
-        // No event listeners needed for filtering - handled by Django
-    }
-
-
-    renderTable(indicators) {
-        const tbody = document.getElementById('indicatorsTableBody');
-        if (!tbody) return;
-
-        if (indicators.length === 0) {
-            tbody.innerHTML = `
-                <tr>
-                    <td colspan="4" class="text-center text-muted py-4">
-                        No indicators found matching your criteria.
-                    </td>
-                </tr>
-            `;
-            return;
-        }
-
-        // Use DocumentFragment for better performance
-        const fragment = document.createDocumentFragment();
-        
-        indicators.forEach(indicator => {
-            const row = document.createElement('tr');
-            row.className = 'fade-in';
-            row.innerHTML = `
-                <td><strong>${this.escapeHtml(indicator.name)}</strong></td>
-                <td>${this.renderPathogens(indicator.pathogens)}</td>
-                <td>${this.escapeHtml(indicator.description || '')}</td>
-                <td>${this.escapeHtml(indicator.temporal_scope_end || '')}</td>
-                <td>
-                    <button class="btn btn-sm btn-outline-primary" onclick="dashboard.viewIndicator(${indicator.id})">
-                        View Details
-                    </button>
-                </td>
-            `;
-            fragment.appendChild(row);
+    initChart() {
+        const ctx = document.getElementById('indicatorChart');
+        if (!ctx) return;
+
+        // Sample data for the chart - similar to Delphi EpiVis
+        const labels = this.generateDateLabels(30);
+        const datasets = [
+            {
+                label: 'Claims hosp (COVID:down-adjusted)',
+                data: this.generateSampleData(30, 100),
+                borderColor: '#0076aa',
+                backgroundColor: 'rgba(0, 118, 170, 0.1)',
+                borderWidth: 2,
+                fill: true,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 4
+            },
+            {
+                label: 'Claims hosp (COVID:)',
+                data: this.generateSampleData(30, 120),
+                borderColor: '#5489a2',
+                backgroundColor: 'rgba(84, 137, 162, 0.1)',
+                borderWidth: 2,
+                fill: true,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 4
+            },
+            {
+                label: 'Claims OV (COVID-related:down-adjusted)',
+                data: this.generateSampleData(30, 90),
+                borderColor: '#de1dbb',
+                backgroundColor: 'rgba(222, 29, 187, 0.1)',
+                borderWidth: 2,
+                fill: true,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 4
+            },
+            {
+                label: 'Claims OV (COVID-related:)',
+                data: this.generateSampleData(30, 110),
+                borderColor: '#a67c83',
+                backgroundColor: 'rgba(166, 124, 131, 0.1)',
+                borderWidth: 2,
+                fill: true,
+                tension: 0.4,
+                pointRadius: 0,
+                pointHoverRadius: 4
+            }
+        ];
+
+        this.chart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: labels,
+                datasets: datasets
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        display: true,
+                        position: 'top',
+                        labels: {
+                            usePointStyle: true,
+                            padding: 15,
+                            font: {
+                                size: 12,
+                                weight: '500'
+                            }
+                        }
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false,
+                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                        padding: 12,
+                        titleFont: {
+                            size: 14,
+                            weight: '600'
+                        },
+                        bodyFont: {
+                            size: 12
+                        },
+                        displayColors: true,
+                        callbacks: {
+                            title: function(context) {
+                                return context[0].label;
+                            },
+                            label: function(context) {
+                                return context.dataset.label + ': ' + context.parsed.y.toFixed(2);
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        display: true,
+                        grid: {
+                            display: false,
+                            drawBorder: false
+                        },
+                        ticks: {
+                            font: {
+                                size: 11
+                            },
+                            color: '#64748b',
+                            maxTicksLimit: 8
+                        }
+                    },
+                    y: {
+                        display: true,
+                        beginAtZero: false,
+                        grid: {
+                            color: 'rgba(226, 232, 240, 0.8)',
+                            drawBorder: false
+                        },
+                        ticks: {
+                            font: {
+                                size: 11
+                            },
+                            color: '#64748b',
+                            callback: function(value) {
+                                return value.toFixed(1);
+                            }
+                        }
+                    }
+                },
+                interaction: {
+                    mode: 'nearest',
+                    axis: 'x',
+                    intersect: false
+                },
+                animation: {
+                    duration: 1000,
+                    easing: 'easeInOutQuart'
+                }
+            }
         });
-        
-        tbody.innerHTML = '';
-        tbody.appendChild(fragment);
     }
 
-    renderPathogens(pathogens) {
-        if (!pathogens || pathogens.length === 0) {
-            return '<span class="text-muted">None</span>';
+    generateDateLabels(days) {
+        const labels = [];
+        const today = new Date();
+        for (let i = days - 1; i >= 0; i--) {
+            const date = new Date(today);
+            date.setDate(date.getDate() - i);
+            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+            const day = date.getDate().toString().padStart(2, '0');
+            labels.push(`${month}/${day}`);
         }
-        
-        return pathogens.map(pathogen => 
-            `<span class="badge bg-secondary me-2 mb-1">${this.escapeHtml(pathogen)}</span>`
-        ).join('');
+        return labels;
     }
 
-
-    viewIndicator(indicatorId) {
-        // Find indicator in the original data
-        const allIndicators = window.djangoIndicators || [];
-        const indicator = allIndicators.find(i => i.id === indicatorId);
-        
-        if (!indicator) {
-            console.error('Indicator not found:', indicatorId);
-            return;
+    generateSampleData(count, startValue = 100) {
+        const data = [];
+        let baseValue = startValue;
+        for (let i = 0; i < count; i++) {
+            // Generate realistic-looking data with trend and noise
+            const trend = Math.sin(i / count * Math.PI * 2) * 10;
+            const noise = (Math.random() - 0.5) * 15;
+            baseValue += trend / count + noise;
+            data.push(Math.max(50, Math.round(baseValue)));
         }
-
-        // Create detailed view modal
-        const modal = document.createElement('div');
-        modal.className = 'modal fade';
-        modal.innerHTML = `
-            <div class="modal-dialog modal-dialog-centered modal-lg modal-fullscreen-sm-down">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title text-truncate pe-3">${this.escapeHtml(indicator.name)}</h5>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                    </div>
-                    <div class="modal-body">
-                        <div class="row g-3">
-                            <div class="col-12 col-lg-6">
-                                <div class="card h-100">
-                                    <div class="card-header">
-                                        <h6 class="card-title mb-0">Basic Information</h6>
-                                    </div>
-                                    <div class="card-body">
-                                        <div class="mb-3">
-                                            <strong class="d-block text-muted small">Data Source</strong>
-                                            <span class="badge bg-primary">${this.escapeHtml(indicator.source ? indicator.source.name : 'Unknown')}</span>
-                                        </div>
-                                        <div class="mb-3">
-                                            <strong class="d-block text-muted small">Geographic Scope</strong>
-                                            <span>${this.escapeHtml(indicator.geographic_scope ? indicator.geographic_scope.name : 'Unknown')}</span>
-                                        </div>
-                                        <div class="mb-3">
-                                            <strong class="d-block text-muted small">Pathogens</strong>
-                                            <div class="mt-1">${this.renderPathogens(indicator.pathogens)}</div>
-                                        </div>
-                                        <div class="mb-0">
-                                            <strong class="d-block text-muted small">Temportal Scope End</strong>
-                                            <span class="badge bg-success">${this.escapeHtml(indicator.temporal_scope_end || 'Active')}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-12 col-lg-6">
-                                <div class="card h-100">
-                                    <div class="card-header">
-                                        <h6 class="card-title mb-0">Description</h6>
-                                    </div>
-                                    <div class="card-body">
-                                        <p class="mb-0 text-break">${this.escapeHtml(indicator.description || 'No description available')}</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    </div>
-                </div>
-            </div>
-        `;
-        
-        document.body.appendChild(modal);
-        const bsModal = new bootstrap.Modal(modal);
-        bsModal.show();
-        
-        modal.addEventListener('hidden.bs.modal', () => {
-            document.body.removeChild(modal);
-        });
+        return data;
     }
 
     escapeHtml(text) {
@@ -156,11 +189,6 @@ class AlterDashboard {
     }
 }
 
-// Global functions for template compatibility
-function viewIndicator(indicatorId) {
-    dashboard.viewIndicator(indicatorId);
-}
-
 // Initialize dashboard when DOM is loaded
 let dashboard;
 document.addEventListener('DOMContentLoaded', function() {
diff --git a/src/templates/alternative_interface/alter_dashboard.html b/src/templates/alternative_interface/alter_dashboard.html
index 6553a63..6d31bf0 100644
--- a/src/templates/alternative_interface/alter_dashboard.html
+++ b/src/templates/alternative_interface/alter_dashboard.html
@@ -42,73 +42,56 @@
         <div class="container">
             <div class="hero-content">
                 <div class="row align-items-center">
-                    <div class="col-lg-8">
+                    <div class="col-lg-12">
                         <h1 class="hero-title">Respiratory Diseases Dashboard</h1>
                         <p class="hero-subtitle">
                             Track COVID-19, influenza, and RSV activity across the United States with real-time data from multiple sources.
                         </p>
                     </div>
-                    <div class="col-lg-4">
-                        <div class="hero-controls">
-                            <form method="get" id="pathogenFilterForm">
-                                <div class="mb-3">
-                                    <label for="heroPathogenSelect" class="form-label text-white-50 mb-2">Select Pathogen</label>
-                                    <select class="form-select form-select-lg" id="heroPathogenSelect" name="pathogen" onchange="this.form.submit()">
-                                        <option value="">All Pathogens</option>
-                                        {% for pathogen in pathogens %}
-                                            <option value="{{ pathogen.id }}" {% if pathogen.id|stringformat:"s" == selected_pathogen %}selected{% endif %}>
-                                                {{ pathogen.name }}
-                                            </option>
-                                        {% endfor %}
-                                    </select>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="container">
-        <!-- Stats Grid -->
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="stat-number" id="totalIndicators">{{ indicators|length }}</div>
-                <div class="stat-label">Total Indicators</div>
+    <!-- Filter Hero Section -->
+    <div class="filter-hero-section">
+        <div class="container">
+            <div class="filter-hero-content">
+                <form method="get" id="filterForm" class="filter-form-inline">
+                    <span class="filter-label">Show</span>
+                    <select class="form-select filter-select" id="pathogenSelect" name="pathogen" onchange="this.form.submit()">
+                        <option value="">All Pathogens</option>
+                        {% for pathogen in pathogens %}
+                            <option value="{{ pathogen.id }}" {% if pathogen.id|stringformat:"s" == selected_pathogen %}selected{% endif %}>
+                                {{ pathogen.display_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                    <span class="filter-label">in</span>
+                    <select class="form-select filter-select" id="geographySelect" name="geography" onchange="this.form.submit()">
+                        <option value="">All Geographies</option>
+                        {% for geography in geographies %}
+                            <option value="{{ geography.id }}" {% if geography.id|stringformat:"s" == selected_geography %}selected{% endif %}>
+                                {{ geography.display_name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </form>
             </div>
         </div>
+    </div>
 
-
-        <!-- Indicators Table -->
-        <div class="table-container">
+    <div class="container">
+        <!-- Chart Section -->
+        <div class="chart-section">
             <div class="card-header">
-                <h5 class="card-title">Available Indicators</h5>
-                <p class="text-muted mb-0">Explore detailed information about each indicator</p>
-            </div>
-            <div class="table-responsive">
-                <table class="table table-hover" id="indicatorsTable">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Pathogens</th>
-                            <th>Description</th>
-                            <th>Temporal Scope End</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody id="indicatorsTableBody">
-                        
-                    </tbody>
-                </table>
+                <h5 class="card-title">Indicator Visualization</h5>
+                <p class="text-muted mb-0">Visualize trends and patterns</p>
             </div>
-            
-            <!-- Loading indicator -->
-            <div id="loadingIndicator" class="text-center py-4" style="display: none;">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="visually-hidden">Loading...</span>
+            <div class="chart-container-wrapper">
+                <div class="chart-container">
+                    <canvas id="indicatorChart"></canvas>
                 </div>
-                <p class="mt-2">Loading indicators...</p>
             </div>
         </div>