diff --git a/dashboard/src/components/Section.vue b/dashboard/src/components/Section.vue
index 020753e04..352145b15 100644
--- a/dashboard/src/components/Section.vue
+++ b/dashboard/src/components/Section.vue
@@ -1,6 +1,10 @@
 <script setup>
 
-import { inject } from 'vue';
+import { inject, useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
+
+const mobileFilterBar = useTemplateRef('mobileFilterBar');
+
+const isMobile = ref(false);
 
 defineProps({
   title: String,
@@ -16,6 +20,19 @@ function onTitleBadge() {
   subscriptionRequiredDialog.value.open();
 }
 
+function checkForMobile() {
+  isMobile.value = window.innerWidth <= 576;
+}
+
+onMounted(() => {
+  checkForMobile();
+  window.addEventListener('resize', checkForMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkForMobile);
+});
+
 </script>
 
 <template>
@@ -28,8 +45,9 @@ function onTitleBadge() {
         </div>
         <div class="section-header-title-badge" v-if="titleBadge" @click="onTitleBadge()">{{ titleBadge }}</div>
       </div>
-      <div><slot name="header-buttons"></slot></div>
+      <div><Teleport :disabled="!isMobile" :to="mobileFilterBar"><slot name="filter-bar"></slot></Teleport><slot name="header-buttons"></slot></div>
     </h2>
+    <div class="section-mobile-filter-bar" ref="mobileFilterBar"></div>
     <hr class="section-divider"/>
     <div class="section-body">
       <slot></slot>
@@ -102,4 +120,11 @@ function onTitleBadge() {
   cursor: pointer;
 }
 
+.section-mobile-filter-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 10px 15px;
+}
+
 </style>
\ No newline at end of file
diff --git a/dashboard/src/views/DomainsView.vue b/dashboard/src/views/DomainsView.vue
index 86f8a92e0..0ae84c204 100644
--- a/dashboard/src/views/DomainsView.vue
+++ b/dashboard/src/views/DomainsView.vue
@@ -141,8 +141,10 @@ onMounted(async () => {
       <template #header-title-extra>
         <span style="font-weight: normal; font-size: 14px">({{ busy ? '-' : filteredDomains.length }})</span>
       </template>
+      <template #filter-bar>
+        <TextInput v-model="search" :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;"/>
+      </template>
       <template #header-buttons>
-        <TextInput v-model="search" :placeholder="$t('main.searchPlaceholder')"/>
         <Button @click="onAdd()">{{ $t('main.action.add') }}</Button>
       </template>
 
diff --git a/dashboard/src/views/UsersView.vue b/dashboard/src/views/UsersView.vue
index a468ad4d1..7d794afe9 100644
--- a/dashboard/src/views/UsersView.vue
+++ b/dashboard/src/views/UsersView.vue
@@ -230,9 +230,11 @@ onMounted(async () => {
       <template #header-title-extra>
         <span style="font-weight: normal; font-size: 14px">({{ busy ? '-' : filteredUsers.length }})</span>
       </template>
-      <template #header-buttons>
-        <TextInput v-model="search" placeholder="Search ..." />
+      <template #filter-bar>
+        <TextInput v-model="search" placeholder="Search ..." style="flex-grow: 1"/>
         <SingleSelect :options="filterOptions" option-key="id" option-label="name" v-model="filter" />
+      </template>
+      <template #header-buttons>
         <Button @click="onEditOrAddUser()">{{ $t('main.action.add') }}</Button>
       </template>