diff --git a/components/pages/websites/WebsiteHeader.js b/components/pages/websites/WebsiteHeader.js
index f7db6431..0790397f 100644
--- a/components/pages/websites/WebsiteHeader.js
+++ b/components/pages/websites/WebsiteHeader.js
@@ -4,9 +4,9 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import Favicon from 'components/common/Favicon';
 import ActiveUsers from 'components/metrics/ActiveUsers';
-import styles from './WebsiteHeader.module.css';
 import Icons from 'components/icons';
 import { useMessages, useWebsite } from 'hooks';
+import styles from './WebsiteHeader.module.css';
 
 export function WebsiteHeader({ websiteId, showLinks = true, children }) {
   const { formatMessage, labels } = useMessages();
@@ -46,7 +46,7 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
       </Column>
       <Column className={styles.actions} variant="two">
         {showLinks && (
-          <Flexbox alignItems="center">
+          <div className={styles.links}>
             {links.map(({ label, icon, path }) => {
               const selected = path ? pathname.endsWith(path) : pathname === '/websites/[id]';
 
@@ -58,13 +58,13 @@ export function WebsiteHeader({ websiteId, showLinks = true, children }) {
                       [styles.selected]: selected,
                     })}
                   >
-                    <Icon>{icon}</Icon>
-                    <Text>{label}</Text>
+                    <Icon className={styles.icon}>{icon}</Icon>
+                    <Text className={styles.label}>{label}</Text>
                   </Button>
                 </Link>
               );
             })}
-          </Flexbox>
+          </div>
         )}
         {children}
       </Column>
diff --git a/components/pages/websites/WebsiteHeader.module.css b/components/pages/websites/WebsiteHeader.module.css
index 89f78e52..93e622d9 100644
--- a/components/pages/websites/WebsiteHeader.module.css
+++ b/components/pages/websites/WebsiteHeader.module.css
@@ -27,3 +27,29 @@
 .selected {
   font-weight: bold;
 }
+
+.links {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+@media only screen and (max-width: 768px) {
+  .links {
+    justify-content: space-evenly;
+    flex: 1;
+    border-bottom: 1px solid var(--base300);
+    padding-bottom: 10px;
+    margin-bottom: 10px;
+  }
+
+  .label {
+    display: none;
+  }
+
+  .icon,
+  .icon svg {
+    width: 30px;
+    height: 30px;
+  }
+}