diff --git a/src/app/(main)/websites/[id]/WebsiteFilterButton.js b/src/app/(main)/websites/[id]/WebsiteFilterButton.js
new file mode 100644
index 00000000..e96856f6
--- /dev/null
+++ b/src/app/(main)/websites/[id]/WebsiteFilterButton.js
@@ -0,0 +1,54 @@
+import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
+import PopupForm from 'app/(main)/reports/[id]/PopupForm';
+import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
+import { useMessages, useNavigation } from 'components/hooks';
+
+export function WebsiteFilterButton({ websiteId, className }) {
+  const { formatMessage, labels } = useMessages();
+  const { makeUrl, router } = useNavigation();
+
+  const fieldOptions = [
+    { name: 'url', type: 'string', label: formatMessage(labels.url) },
+    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
+    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
+    { name: 'os', type: 'string', label: formatMessage(labels.os) },
+    { name: 'device', type: 'string', label: formatMessage(labels.device) },
+    { name: 'country', type: 'string', label: formatMessage(labels.country) },
+    { name: 'region', type: 'string', label: formatMessage(labels.region) },
+    { name: 'city', type: 'string', label: formatMessage(labels.city) },
+  ];
+
+  const handleAddFilter = ({ name, value }) => {
+    router.push(makeUrl({ [name]: value }));
+  };
+
+  return (
+    <PopupTrigger>
+      <Button className={className}>
+        <Icon>
+          <Icons.Plus />
+        </Icon>
+        <Text>{formatMessage(labels.filter)}</Text>
+      </Button>
+      <Popup position="bottom" alignment="start">
+        {close => {
+          return (
+            <PopupForm onClose={close}>
+              <FilterSelectForm
+                websiteId={websiteId}
+                items={fieldOptions}
+                onSelect={value => {
+                  handleAddFilter(value);
+                  close();
+                }}
+                allowFilterSelect={false}
+              />
+            </PopupForm>
+          );
+        }}
+      </Popup>
+    </PopupTrigger>
+  );
+}
+
+export default WebsiteFilterButton;
diff --git a/src/app/(main)/websites/[id]/WebsiteMetricsBar.js b/src/app/(main)/websites/[id]/WebsiteMetricsBar.js
index 3fba284e..0dd6a4e2 100644
--- a/src/app/(main)/websites/[id]/WebsiteMetricsBar.js
+++ b/src/app/(main)/websites/[id]/WebsiteMetricsBar.js
@@ -3,22 +3,17 @@ import { useApi, useDateRange, useMessages, useNavigation, useSticky } from 'com
 import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
 import MetricCard from 'components/metrics/MetricCard';
 import MetricsBar from 'components/metrics/MetricsBar';
-import FilterSelectForm from 'app/(main)/reports/[id]/FilterSelectForm';
-import PopupForm from 'app/(main)/reports/[id]/PopupForm';
 import { formatShortTime } from 'lib/format';
-import { Button, Icon, Icons, Popup, PopupTrigger } from 'react-basics';
+import WebsiteFilterButton from './WebsiteFilterButton';
 import styles from './WebsiteMetricsBar.module.css';
 
 export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
   const { formatMessage, labels } = useMessages();
-
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
   const { ref, isSticky } = useSticky({ enabled: sticky });
   const {
-    makeUrl,
-    router,
     query: { url, referrer, title, os, browser, device, country, region, city },
   } = useNavigation();
 
@@ -43,17 +38,6 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
       }),
   );
 
-  const fieldOptions = [
-    { name: 'url', type: 'string', label: formatMessage(labels.url) },
-    { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
-    { name: 'browser', type: 'string', label: formatMessage(labels.browser) },
-    { name: 'os', type: 'string', label: formatMessage(labels.os) },
-    { name: 'device', type: 'string', label: formatMessage(labels.device) },
-    { name: 'country', type: 'string', label: formatMessage(labels.country) },
-    { name: 'region', type: 'string', label: formatMessage(labels.region) },
-    { name: 'city', type: 'string', label: formatMessage(labels.city) },
-  ];
-
   const { pageviews, uniques, bounces, totaltime } = data || {};
   const num = Math.min(data && uniques.value, data && bounces.value);
   const diffs = data && {
@@ -63,40 +47,6 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
     totaltime: totaltime.value - totaltime.change,
   };
 
-  const handleAddFilter = ({ name, value }) => {
-    router.push(makeUrl({ [name]: value }));
-  };
-
-  const WebsiteFilterButton = () => {
-    return (
-      <PopupTrigger>
-        <Button>
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-          {formatMessage(labels.filter)}
-        </Button>
-        <Popup position="bottom" alignment="start" className={styles.popup}>
-          {close => {
-            return (
-              <PopupForm onClose={close}>
-                <FilterSelectForm
-                  websiteId={websiteId}
-                  items={fieldOptions}
-                  onSelect={value => {
-                    handleAddFilter(value);
-                    close();
-                  }}
-                  allowFilterSelect={false}
-                />
-              </PopupForm>
-            );
-          }}
-        </Popup>
-      </PopupTrigger>
-    );
-  };
-
   return (
     <div
       ref={ref}
@@ -152,7 +102,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
         )}
       </MetricsBar>
       <div className={styles.actions}>
-        {showFilter && <WebsiteFilterButton />}
+        {showFilter && <WebsiteFilterButton websiteId={websiteId} className={styles.button} />}
         <WebsiteDateFilter websiteId={websiteId} />
       </div>
     </div>
diff --git a/src/app/(main)/websites/[id]/WebsiteMetricsBar.module.css b/src/app/(main)/websites/[id]/WebsiteMetricsBar.module.css
index 4d642d70..db48bd55 100644
--- a/src/app/(main)/websites/[id]/WebsiteMetricsBar.module.css
+++ b/src/app/(main)/websites/[id]/WebsiteMetricsBar.module.css
@@ -17,7 +17,7 @@
   gap: 10px;
 }
 
-@media only screen and (max-width: 1200px) {
+@media screen and (max-width: 1200px) {
   .container {
     grid-template-columns: 1fr;
   }
@@ -27,7 +27,7 @@
   }
 }
 
-@media only screen and (min-width: 992px) {
+@media screen and (min-width: 992px) {
   .sticky {
     position: sticky;
     top: -1px;
@@ -38,3 +38,9 @@
     border-bottom: 1px solid var(--base300);
   }
 }
+
+@media screen and (max-width: 768px) {
+  .button {
+    display: none;
+  }
+}