diff --git a/resources/views/dashboard/indikator-pertanian.blade.php b/resources/views/dashboard/indikator-pertanian.blade.php
index 29eb233..5984364 100644
--- a/resources/views/dashboard/indikator-pertanian.blade.php
+++ b/resources/views/dashboard/indikator-pertanian.blade.php
@@ -14,41 +14,37 @@
         margin-bottom: .35rem;
     }
 
+    .indicator-filter-row {
+        padding-bottom: 1.5rem;
+        padding-top: 1.5rem;
+    }
+
     .indicator-filter-bar {
-        align-items: end;
+        display: block;
+    }
+
+    .indicator-filter-line {
+        align-items: center;
         display: flex;
         flex-wrap: wrap;
-        gap: .75rem;
-        margin-bottom: 1.25rem;
+        gap: .5rem;
     }
 
-    .indicator-filter-group {
-        flex: 1 1 150px;
-        min-width: 150px;
-    }
-
-    .indicator-filter-actions {
+    .indicator-filter-section-label {
+        align-items: center;
         display: flex;
-        flex: 999 1 240px;
-        gap: .75rem;
-        justify-content: space-between;
+        font-weight: 500;
+        margin-right: .5rem;
+        white-space: nowrap;
     }
 
-    .indicator-filter-primary-actions {
-        display: flex;
-        gap: .75rem;
-    }
-
-    .indicator-filter-label {
-        color: var(--bs-body-color);
-        font-size: .75rem;
-        font-weight: 600;
-        margin-bottom: .3rem;
+    .indicator-filter-export-action {
+        margin-left: auto;
     }
 
     .indicator-filter-bar .form-select,
     .indicator-filter-bar .btn {
-        min-height: 38px;
+        min-height: 31px;
     }
 
     .indicator-filter-bar .form-select {
@@ -56,15 +52,10 @@
         border-color: var(--bs-border-color);
         border-radius: var(--bs-border-radius);
         color: var(--bs-body-color);
-        font-size: .8125rem;
-        padding-bottom: .375rem;
-        padding-top: .375rem;
     }
 
     .indicator-filter-bar .btn {
-        font-size: .8125rem;
-        padding-bottom: .375rem;
-        padding-top: .375rem;
+        white-space: nowrap;
     }
 
     .indicator-filter-bar .form-select:focus {
@@ -90,29 +81,16 @@
         color: var(--bs-body-color);
         display: flex;
         font-size: .8125rem;
-        min-height: 38px;
-        padding: .375rem .75rem;
+        min-height: 31px;
+        padding: .25rem .75rem;
     }
 
     .indicator-filter-bar .input-group-text {
         background: var(--bs-paper-bg);
         border-color: var(--bs-border-color);
         color: var(--bs-secondary-color);
-        padding-left: .625rem;
-        padding-right: .625rem;
-    }
-
-    .indicator-export-btn {
-        border-color: #28a745;
-        color: #28a745;
-        white-space: nowrap;
-    }
-
-    .indicator-export-btn:hover,
-    .indicator-export-btn:focus {
-        background: rgba(40, 167, 69, .08);
-        border-color: #28a745;
-        color: #28a745;
+        padding-left: .5rem;
+        padding-right: .5rem;
     }
 
     .indicator-summary-value {
@@ -190,16 +168,18 @@
     }
 
     @media (max-width: 767.98px) {
-        .indicator-filter-bar,
-        .indicator-filter-actions,
-        .indicator-filter-primary-actions {
+        .indicator-filter-line {
             display: grid;
             grid-template-columns: 1fr;
             width: 100%;
         }
 
-        .indicator-filter-group {
-            min-width: 100%;
+        .indicator-filter-section-label {
+            margin-right: 0;
+        }
+
+        .indicator-filter-export-action {
+            margin-left: 0;
         }
 
         .indicator-filter-bar .btn {
@@ -225,96 +205,133 @@
         </p>
     </div>
 
-    <div class="indicator-filter-bar" id="indicator-filter-bar" aria-label="Filter dashboard indikator pertanian">
-        @foreach ($filterOptions as $filter)
-            <div class="indicator-filter-group">
-                <label for="filter-{{ $filter['key'] }}" class="indicator-filter-label">
-                    {{ $filter['label'] }}
-                </label>
+    @php
+        $filtersByKey = collect($filterOptions)->keyBy('key');
+    @endphp
 
-                @if (!empty($filter['icon']))
-                    <div class="input-group">
-                        <span class="input-group-text" aria-hidden="true">
-                            <i class="ti {{ $filter['icon'] }}"></i>
-                        </span>
-                        @if (!empty($filter['readonly']))
-                            @php
-                                $selectedOption = collect($filter['options'])
-                                    ->firstWhere('value', $initialFilters[$filter['key']]);
-                            @endphp
-
-                            <div
-                                id="filter-{{ $filter['key'] }}"
-                                class="form-control indicator-filter-static"
-                                data-filter-key="{{ $filter['key'] }}"
-                                data-filter-value="{{ $initialFilters[$filter['key']] }}"
-                                aria-label="Filter {{ $filter['label'] }}"
-                                role="text"
-                            >
-                                {{ $selectedOption['label'] ?? 'Ngada' }}
+    <div class="row g-6 indicator-filter-row">
+        <div class="col-12">
+            <div class="card card-border-shadow-primary">
+                <div class="card-body py-3">
+                    <div class="indicator-filter-bar" id="indicator-filter-bar" aria-label="Filter dashboard indikator pertanian">
+                        <div class="indicator-filter-line">
+                            <div class="indicator-filter-section-label">
+                                <i class="icon-base ti tabler-map-2 me-2"></i>
+                                <span>Wilayah</span>
                             </div>
-                        @else
-                            <select
-                                id="filter-{{ $filter['key'] }}"
-                                class="form-select indicator-filter-select"
-                                data-filter-key="{{ $filter['key'] }}"
-                                aria-label="Filter {{ $filter['label'] }}"
-                            >
-                                @foreach ($filter['options'] as $option)
-                                    <option
-                                        value="{{ $option['value'] }}"
-                                        @selected($initialFilters[$filter['key']] === $option['value'])
+
+                            @foreach (['kabupaten', 'kecamatan', 'desa'] as $filterKey)
+                                @php
+                                    $filter = $filtersByKey[$filterKey];
+                                @endphp
+
+                                <div class="filter-item">
+                                    @if (!empty($filter['readonly']))
+                                        @php
+                                            $selectedOption = collect($filter['options'])
+                                                ->firstWhere('value', $initialFilters[$filter['key']]);
+                                        @endphp
+
+                                        <div
+                                            id="filter-{{ $filter['key'] }}"
+                                            class="form-control form-control-sm indicator-filter-static"
+                                            data-filter-key="{{ $filter['key'] }}"
+                                            data-filter-value="{{ $initialFilters[$filter['key']] }}"
+                                            aria-label="Filter {{ $filter['label'] }}"
+                                            role="text"
+                                        >
+                                            {{ $selectedOption['label'] ?? 'Ngada' }}
+                                        </div>
+                                    @else
+                                        <select
+                                            id="filter-{{ $filter['key'] }}"
+                                            class="form-select form-select-sm indicator-filter-select"
+                                            data-filter-key="{{ $filter['key'] }}"
+                                            aria-label="Filter {{ $filter['label'] }}"
+                                            @disabled($filter['key'] === 'desa' && $initialFilters['kecamatan'] === 'all')
+                                        >
+                                            @foreach ($filter['options'] as $option)
+                                                <option
+                                                    value="{{ $option['value'] }}"
+                                                    @if (isset($option['parent'])) data-parent="{{ $option['parent'] }}" @endif
+                                                    @selected($initialFilters[$filter['key']] === $option['value'])
+                                                >
+                                                    {{ $option['label'] }}
+                                                </option>
+                                            @endforeach
+                                        </select>
+                                    @endif
+                                </div>
+                            @endforeach
+                        </div>
+
+                        <hr class="my-3">
+
+                        <div class="indicator-filter-line">
+                            <div class="indicator-filter-section-label">
+                                <i class="icon-base ti tabler-adjustments-horizontal me-2"></i>
+                                <span>Data</span>
+                            </div>
+
+                            @foreach (['komoditas', 'segmentasi'] as $filterKey)
+                                @php
+                                    $filter = $filtersByKey[$filterKey];
+                                @endphp
+
+                                <div class="filter-item">
+                                    <select
+                                        id="filter-{{ $filter['key'] }}"
+                                        class="form-select form-select-sm indicator-filter-select"
+                                        data-filter-key="{{ $filter['key'] }}"
+                                        aria-label="Filter {{ $filter['label'] }}"
                                     >
-                                        {{ $option['label'] }}
-                                    </option>
-                                @endforeach
-                            </select>
-                        @endif
-                    </div>
-                @else
-                    <select
-                        id="filter-{{ $filter['key'] }}"
-                        class="form-select indicator-filter-select"
-                        data-filter-key="{{ $filter['key'] }}"
-                        aria-label="Filter {{ $filter['label'] }}"
-                        @disabled($filter['key'] === 'desa' && $initialFilters['kecamatan'] === 'all')
-                    >
-                        @foreach ($filter['options'] as $option)
-                            <option
-                                value="{{ $option['value'] }}"
-                                @if (isset($option['parent'])) data-parent="{{ $option['parent'] }}" @endif
-                                @selected($initialFilters[$filter['key']] === $option['value'])
+                                        @foreach ($filter['options'] as $option)
+                                            <option
+                                                value="{{ $option['value'] }}"
+                                                @selected($initialFilters[$filter['key']] === $option['value'])
+                                            >
+                                                {{ $option['label'] }}
+                                            </option>
+                                        @endforeach
+                                    </select>
+                                </div>
+                            @endforeach
+
+                            <button
+                                type="button"
+                                class="btn btn-outline-secondary btn-sm"
+                                id="indicator-apply-filter"
+                                aria-label="Terapkan filter indikator pertanian"
                             >
-                                {{ $option['label'] }}
-                            </option>
-                        @endforeach
-                    </select>
-                @endif
-            </div>
-        @endforeach
+                                <i class="icon-base ti tabler-filter me-1"></i>
+                                Filter
+                            </button>
 
-        <div class="indicator-filter-actions">
-            <div class="indicator-filter-primary-actions">
-                <button
-                    type="button"
-                    class="btn btn-outline-secondary"
-                    id="indicator-reset-filter"
-                    aria-label="Reset filter indikator pertanian"
-                >
-                    <i class="ti tabler-rotate-clockwise-2 me-1"></i>
-                    Reset Filter
-                </button>
-            </div>
+                            <button
+                                type="button"
+                                class="btn btn-outline-secondary btn-sm"
+                                id="indicator-reset-filter"
+                                aria-label="Reset filter indikator pertanian"
+                            >
+                                <i class="icon-base ti tabler-refresh me-1"></i>
+                                Reset
+                            </button>
 
-            <button
-                type="button"
-                class="btn btn-outline-success indicator-export-btn"
-                id="indicator-export-data"
-                aria-label="Export data indikator pertanian"
-            >
-                <i class="ti tabler-download me-1"></i>
-                Export Data
-            </button>
+                            <div class="indicator-filter-export-action">
+                                <button
+                                    type="button"
+                                    class="btn btn-outline-secondary btn-sm"
+                                    id="indicator-export-data"
+                                    aria-label="Export data indikator pertanian"
+                                >
+                                    <i class="icon-base ti tabler-download me-1"></i>
+                                    Export Data
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -685,6 +702,7 @@
         const komoditasSelect = document.querySelector('[data-filter-key="komoditas"]');
         const segmentasiSelect = document.querySelector('[data-filter-key="segmentasi"]');
         const selectedKabupaten = kabupatenFilter?.dataset.filterValue || initialFilters.kabupaten || 'all';
+        const applyFilterButton = document.getElementById('indicator-apply-filter');
         const resetButton = document.getElementById('indicator-reset-filter');
         const exportButton = document.getElementById('indicator-export-data');
         const chartInstances = {};
@@ -729,6 +747,10 @@
                 resetButton.disabled = isLoading;
             }
 
+            if (applyFilterButton) {
+                applyFilterButton.disabled = isLoading;
+            }
+
             if (exportButton) {
                 exportButton.disabled = isLoading;
             }
@@ -970,11 +992,13 @@
                     filters.desa = 'all';
                     await loadDesaOptions('all');
                 }
-
-                loadIndicatorData();
             });
         });
 
+        applyFilterButton?.addEventListener('click', function () {
+            loadIndicatorData();
+        });
+
         resetButton?.addEventListener('click', async function () {
             Object.assign(filters, {
                 kecamatan: 'all',