diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index ba4d18df83..54f2ceffff 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/src/common/search/FilterPlays.jsx
@@ -228,7 +228,7 @@ const FilterPlays = ({ onChange, query }) => {
       >
         {FIELD_TEMPLATE.map((field, field_i) => {
           return (
-            <div className="flex flex-col md:flex-row p-2" key={field_i}>
+            <div className="flex-filter-modal flex-col md:flex-row p-2" key={field_i}>
               <div className="w-32">
                 {field.display}
                 {field.required ? '*' : ''}
diff --git a/src/common/search/SearchBox.jsx b/src/common/search/SearchBox.jsx
index 3550715d8f..5c338754b2 100644
--- a/src/common/search/SearchBox.jsx
+++ b/src/common/search/SearchBox.jsx
@@ -29,7 +29,7 @@ export const SearchBox = ({ reset }) => {
   return (
     <div className="filter">
       <div
-        className="flex flex-1 search-input items-center filter-area px-4"
+        className="flex flex-1 search-input items-center filter-area pl-4 pr-2"
         data-testid="plays-search-box-container"
       >
         <BiSearch className="mr-2" data-testid="plays-search-box-icon" size="24px" />
diff --git a/src/common/search/search.css b/src/common/search/search.css
index d01d2bee29..6b7154c9cf 100644
--- a/src/common/search/search.css
+++ b/src/common/search/search.css
@@ -8,6 +8,12 @@
   align-items: center;
 }
 
+@media screen and (max-width: 576px) {
+  .app-header-search {
+    width: 70%;
+  }
+}
+
 /* Filter*/
 .filter {
   width: 100%;
@@ -63,6 +69,9 @@
 }
 
 @media screen and (max-width: 576px) {
+  .filter {
+    padding: 0.5rem 0;
+  }
   .filter .search-input-icon {
     left: 0.6rem;
     width: 20px;
@@ -118,6 +127,7 @@
 
 @media screen and (max-width: 576px) {
   .btn-filter {
+    padding: 0 0.2rem;
   }
   .btn-filter .icon {
     width: 24px;
@@ -208,6 +218,13 @@
   font-size: var(--fs-rg);
 }
 
+.flex-filter-modal {
+  display: flex;
+  width: 500px;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+
 /* CSS attributes for clear All button */
 
 .modal-clear-filter {