diff --git a/src/components/templates/Search/filterPrice.module.css b/src/components/templates/Search/filterPrice.module.css
index 948283de4..e305feb59 100644
--- a/src/components/templates/Search/filterPrice.module.css
+++ b/src/components/templates/Search/filterPrice.module.css
@@ -1,7 +1,12 @@
-/* .filterList {
-  display: inline-flex;
-  float: left;
-} */
+.filterList,
+div.filterList {
+  white-space: normal;
+  margin-bottom: 0;
+}
+
+.filter {
+  display: inline-block;
+}
 
 .filter,
 button.filter,
@@ -9,14 +14,14 @@ button.filter,
 .filter:active,
 .filter:focus {
   border: 1px solid var(--border-color);
-  text-transform: uppercase;
   border-radius: var(--border-radius);
   margin-right: calc(var(--spacer) / 6);
+  margin-bottom: calc(var(--spacer) / 6);
   color: var(--color-secondary);
   background: var(--background-body);
 
   /* the only thing not possible to overwrite button style="text" with more specifity of selectors, so sledgehammer */
-  padding: calc(var(--spacer) / 5) !important;
+  padding: calc(var(--spacer) / 6) !important;
 }
 
 .filter:hover,
@@ -37,7 +42,3 @@ button.filter,
   margin-left: calc(var(--spacer) / 6);
   color: var(--background-body);
 }
-
-.filterList:first-of-type{
-  margin-bottom: calc(var(--spacer) / 6);
-}
diff --git a/src/components/templates/Search/filterPrice.tsx b/src/components/templates/Search/filterPrice.tsx
index 38274b412..19f24045c 100644
--- a/src/components/templates/Search/filterPrice.tsx
+++ b/src/components/templates/Search/filterPrice.tsx
@@ -107,51 +107,49 @@ export default function FilterPrice({
   }
 
   return (
-    <div>
-      <div className={styles.filterList}>
-        {priceFilterItems.map((e, index) => {
-          const isSelected =
-            e.value === priceType || priceSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-        {serviceFilterItems.map((e, index) => {
-          const isSelected =
-            e.value === serviceType || serviceSelections.includes(e.value)
-          const selectFilter = cx({
-            [styles.selected]: isSelected,
-            [styles.filter]: true
-          })
-          return (
-            <Button
-              size="small"
-              style="text"
-              key={index}
-              className={selectFilter}
-              onClick={async () => {
-                handleSelectedFilter(isSelected, e.value)
-              }}
-            >
-              {e.display}
-            </Button>
-          )
-        })}
-      </div>
+    <div className={styles.filterList}>
+      {priceFilterItems.map((e, index) => {
+        const isSelected =
+          e.value === priceType || priceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
+      {serviceFilterItems.map((e, index) => {
+        const isSelected =
+          e.value === serviceType || serviceSelections.includes(e.value)
+        const selectFilter = cx({
+          [styles.selected]: isSelected,
+          [styles.filter]: true
+        })
+        return (
+          <Button
+            size="small"
+            style="text"
+            key={index}
+            className={selectFilter}
+            onClick={async () => {
+              handleSelectedFilter(isSelected, e.value)
+            }}
+          >
+            {e.display}
+          </Button>
+        )
+      })}
     </div>
   )
 }
diff --git a/src/components/templates/Search/sort.module.css b/src/components/templates/Search/sort.module.css
index dc72f57df..8b64fa684 100644
--- a/src/components/templates/Search/sort.module.css
+++ b/src/components/templates/Search/sort.module.css
@@ -1,11 +1,18 @@
 .sortList {
-  align-self: flex-end;
-  padding: calc(var(--spacer) / 10);
+  padding: 0 calc(var(--spacer) / 10);
   display: flex;
   align-items: center;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
   background: var(--background-body);
+  overflow-y: auto;
+}
+
+@media (min-width: 40rem) {
+  .sortList {
+    align-self: flex-end;
+    overflow-y: unset;
+  }
 }
 
 .sortLabel {
@@ -15,6 +22,7 @@
   margin-right: calc(var(--spacer) / 1.5);
   text-transform: uppercase;
   color: var(--color-secondary);
+  font-size: var(--font-size-small);
 }
 
 .sorted {