diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 098c07286..ed354e3a0 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -1,8 +1,24 @@
 <template>
     <div class="shadow-box mb-3 p-0" :style="boxStyle">
         <div class="list-header">
-            <div class="header-top">
-                <div class="select-checkbox-wrapper">
+            <!-- Line 1: Checkbox + Status + Tags + Search Bar -->
+            <div class="filter-row">
+                <div class="search-wrapper">
+                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
+                        <font-awesome-icon icon="times" />
+                    </a>
+                    <form @submit.prevent>
+                        <input
+                            v-model="searchText"
+                            class="form-control search-input"
+                            :placeholder="$t('Search...')"
+                            :aria-label="$t('Search monitored sites')"
+                            autocomplete="off"
+                        />
+                    </form>
+                </div>
+
+                <div class="filters-group">
                     <input
                         v-if="!selectMode"
                         v-model="selectMode"
@@ -18,33 +34,17 @@
                         type="checkbox"
                         :aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
                     />
-                </div>
 
-                <div class="header-filter">
                     <MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
                 </div>
-
-                <div class="search-wrapper ms-auto">
-                    <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
-                        <font-awesome-icon icon="times" />
-                    </a>
-                    <form @submit.prevent>
-                        <input
-                            v-model="searchText"
-                            class="form-control search-input"
-                            :placeholder="$t('Search...')"
-                            :aria-label="$t('Search monitored sites')"
-                            autocomplete="off"
-                        />
-                    </form>
-                </div>
             </div>
 
-            <div v-if="selectMode && selectedMonitorCount > 0" class="selected-count-row">
+            <!-- Line 2: Cancel + Actions (shown when selection mode is active) -->
+            <div v-if="selectMode && selectedMonitorCount > 0" class="selection-row">
                 <button class="btn btn-outline-normal" @click="cancelSelectMode">
                     {{ $t("Cancel") }}
                 </button>
-                <div class="actions-wrapper ms-2">
+                <div class="actions-wrapper">
                     <div class="dropdown">
                         <button
                             class="btn btn-outline-normal dropdown-toggle"
@@ -82,7 +82,7 @@
                         </ul>
                     </div>
                 </div>
-                <span class="selected-count ms-2">
+                <span class="selected-count">
                     {{ $t("selectedMonitorCountMsg", selectedMonitorCount) }}
                 </span>
             </div>
@@ -538,6 +538,9 @@ export default {
     border-radius: 10px 10px 0 0;
     margin-bottom: 10px;
     padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 
     .dark & {
         background-color: $dark-header-bg;
@@ -545,37 +548,26 @@ export default {
     }
 }
 
-.search-row {
-    display: flex;
-    padding: 10px;
-    padding-bottom: 5px;
-}
-
-.header-top {
+.filter-row {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 8px;
-    padding: 10px;
-
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        flex-wrap: wrap;
-    }
-}
-
-.select-checkbox-wrapper {
-    display: flex;
-    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
 
     .form-check-input {
         cursor: pointer;
         margin: 0;
+        margin-left: 6px;
+        flex-shrink: 0;
     }
 }
 
-.header-filter {
+.filters-group {
     display: flex;
     align-items: center;
+    gap: 8px;
 }
 
 .actions-wrapper {
@@ -642,6 +634,13 @@ export default {
     }
 }
 
+.selection-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
 .selected-count {
     white-space: nowrap;
     font-size: 0.9em;
@@ -652,8 +651,7 @@ export default {
     }
 }
 
-.selected-count-row {
-    padding: 5px 10px 0 10px;
+.actions-row {
     display: flex;
     align-items: center;
 }
@@ -676,10 +674,29 @@ export default {
     }
 }
 
+@media (max-width: 975px) {
+    .filter-row {
+        flex-direction: column-reverse;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    .search-wrapper {
+        width: 100% !important;
+        max-width: 100% !important;
+        margin-left: 0 !important;
+        flex: 1 1 100%;
+    }
+
+    .filters-group {
+        width: 100%;
+    }
+}
+
 @media (max-width: 770px) {
     .list-header {
         margin-bottom: 10px;
-        padding: 5px;
+        padding: 20px;
     }
 }
 
@@ -687,15 +704,14 @@ export default {
     display: flex;
     align-items: center;
     position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    max-width: 300px;
+    margin-left: auto;
+    order: 1;
 
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        order: -1;
+    form {
         width: 100%;
-        margin-bottom: 8px;
-
-        form {
-            width: 100%;
-        }
     }
 }
 
@@ -713,13 +729,8 @@ export default {
 }
 
 .search-input {
-    max-width: 15em;
+    width: 100%;
     padding-right: 30px;
-
-    @media (max-width: 549px), (min-width: 770px) and (max-width: 1149px), (min-width: 1200px) and (max-width: 1499px) {
-        max-width: 100%;
-        width: 100%;
-    }
 }
 
 .monitor-item {
diff --git a/src/components/MonitorListFilter.vue b/src/components/MonitorListFilter.vue
index a69a0db98..1635c3353 100644
--- a/src/components/MonitorListFilter.vue
+++ b/src/components/MonitorListFilter.vue
@@ -1,139 +1,142 @@
 <template>
-    <div class="d-flex align-items-center flex-wrap gap-1">
-        <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0">
-            <template #status>
-                <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
-                <span v-else>
-                    {{ $t("Status") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="1" />
-                            <span class="ps-3">
-                                {{ $root.stats.up }}
-                                <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+    <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0 || filterState.active?.length > 0">
+        <template #status>
+            <Status
+                v-if="filterState.status?.length === 1 && !filterState.active?.length"
+                :status="filterState.status[0]"
+            />
+            <span
+                v-else-if="!filterState.status?.length && filterState.active?.length === 1"
+                class="badge status-pill"
+                :class="filterState.active[0] ? 'running' : 'paused'"
+            >
+                <font-awesome-icon :icon="filterState.active[0] ? 'play' : 'pause'" class="icon-small" />
+                {{ filterState.active[0] ? $t("Running") : $t("filterActivePaused") }}
+            </span>
+            <span v-else>
+                {{ $t("Status") }}
+            </span>
+        </template>
+        <template #dropdown>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(1)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="1" />
+                        <span class="ps-3">
+                            {{ $root.stats.up }}
+                            <span v-if="filterState.status?.includes(1)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="0" />
-                            <span class="ps-3">
-                                {{ $root.stats.down }}
-                                <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(0)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="0" />
+                        <span class="ps-3">
+                            {{ $root.stats.down }}
+                            <span v-if="filterState.status?.includes(0)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="2" />
-                            <span class="ps-3">
-                                {{ $root.stats.pending }}
-                                <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(2)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="2" />
+                        <span class="ps-3">
+                            {{ $root.stats.pending }}
+                            <span v-if="filterState.status?.includes(2)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <Status :status="3" />
-                            <span class="ps-3">
-                                {{ $root.stats.maintenance }}
-                                <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleStatusFilter(3)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <Status :status="3" />
+                        <span class="ps-3">
+                            {{ $root.stats.maintenance }}
+                            <span v-if="filterState.status?.includes(3)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.active?.length > 0">
-            <template #status>
-                <span v-if="filterState.active?.length === 1">
-                    <span v-if="filterState.active[0]">{{ $t("Running") }}</span>
-                    <span v-else>{{ $t("filterActivePaused") }}</span>
-                </span>
-                <span v-else>
-                    {{ $t("filterActive") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span>{{ $t("Running") }}</span>
-                            <span class="ps-3">
-                                {{ $root.stats.active }}
-                                <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li><hr class="dropdown-divider" /></li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(true)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span class="badge status-pill running">
+                            <font-awesome-icon icon="play" class="icon-small" />
+                            {{ $t("Running") }}
+                        </span>
+                        <span class="ps-3">
+                            {{ $root.stats.active }}
+                            <span v-if="filterState.active?.includes(true)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li>
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span>{{ $t("filterActivePaused") }}</span>
-                            <span class="ps-3">
-                                {{ $root.stats.pause }}
-                                <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+            <li>
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleActiveFilter(false)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span class="badge status-pill paused">
+                            <font-awesome-icon icon="pause" class="icon-small" />
+                            {{ $t("filterActivePaused") }}
+                        </span>
+                        <span class="ps-3">
+                            {{ $root.stats.pause }}
+                            <span v-if="filterState.active?.includes(false)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-        <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
-            <template #status>
-                <Tag
-                    v-if="filterState.tags?.length === 1"
-                    :item="tagsList.find((tag) => tag.id === filterState.tags[0])"
-                    :size="'sm'"
-                />
-                <span v-else>
-                    {{ $t("Tags") }}
-                </span>
-            </template>
-            <template #dropdown>
-                <li v-for="tag in tagsList" :key="tag.id">
-                    <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
-                        <div class="d-flex align-items-center justify-content-between">
-                            <span><Tag :item="tag" :size="'sm'" /></span>
-                            <span class="ps-3">
-                                {{ getTaggedMonitorCount(tag) }}
-                                <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
-                                    <font-awesome-icon icon="check" />
-                                </span>
+                </div>
+            </li>
+        </template>
+    </MonitorListFilterDropdown>
+    <MonitorListFilterDropdown :filterActive="filterState.tags?.length > 0">
+        <template #status>
+            <Tag
+                v-if="filterState.tags?.length === 1"
+                :item="tagsList.find((tag) => tag.id === filterState.tags[0])"
+                :size="'sm'"
+            />
+            <span v-else>
+                {{ $t("Tags") }}
+            </span>
+        </template>
+        <template #dropdown>
+            <li v-for="tag in tagsList" :key="tag.id">
+                <div class="dropdown-item" tabindex="0" @click.stop="toggleTagFilter(tag)">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <span><Tag :item="tag" :size="'sm'" /></span>
+                        <span class="ps-3">
+                            {{ getTaggedMonitorCount(tag) }}
+                            <span v-if="filterState.tags?.includes(tag.id)" class="px-1 filter-active">
+                                <font-awesome-icon icon="check" />
                             </span>
-                        </div>
+                        </span>
                     </div>
-                </li>
-                <li v-if="tagsList.length === 0">
-                    <div class="dropdown-item disabled px-3">
-                        {{ $t("No tags found.") }}
-                    </div>
-                </li>
-            </template>
-        </MonitorListFilterDropdown>
-    </div>
+                </div>
+            </li>
+            <li v-if="tagsList.length === 0">
+                <div class="dropdown-item disabled px-3">
+                    {{ $t("No tags found.") }}
+                </div>
+            </li>
+        </template>
+    </MonitorListFilterDropdown>
 </template>
 
 <script>
@@ -252,6 +255,17 @@ export default {
     cursor: pointer;
 }
 
+.simple-status {
+    min-width: 64px;
+    border: 1px solid #d1d5db;
+    background-color: transparent !important;
+    color: inherit !important;
+
+    .dark & {
+        border-color: #6b7280;
+    }
+}
+
 .clear-filters-btn {
     font-size: 0.8em;
     margin-right: 5px;
@@ -275,4 +289,37 @@ export default {
         }
     }
 }
+
+.dropdown-divider {
+    margin: 0.5rem 0;
+    border-top: 1px solid #d1d5db;
+
+    .dark & {
+        border-top-color: #6b7280;
+    }
+}
+
+.status-pill {
+    min-width: 64px;
+    display: inline-block;
+    text-align: center;
+
+    &.running,
+    &.paused {
+        background-color: white !important;
+        border: 1px solid #d1d5db;
+        color: inherit;
+
+        .dark & {
+            background-color: transparent !important;
+            border-color: #6b7280;
+            color: $dark-font-color;
+        }
+
+        .icon-small {
+            font-size: 0.75em;
+            margin-right: 4px;
+        }
+    }
+}
 </style>
diff --git a/src/components/MonitorListFilterDropdown.vue b/src/components/MonitorListFilterDropdown.vue
index dbd056af6..29906cb53 100644
--- a/src/components/MonitorListFilterDropdown.vue
+++ b/src/components/MonitorListFilterDropdown.vue
@@ -103,7 +103,7 @@ export default {
     @extend .btn-outline-normal;
     display: flex;
     align-items: center;
-    margin-left: 5px;
+    margin-left: 0;
     color: $link-color;
 
     .dark & {