diff --git a/components/common/Link.module.css b/components/common/Link.module.css
index e37c0105..dd2f92f9 100644
--- a/components/common/Link.module.css
+++ b/components/common/Link.module.css
@@ -8,14 +8,12 @@ a.link:visited {
   align-items: center;
 }
 
-a.link:hover:before {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  width: 100%;
-  height: 2px;
-  background: var(--primary400);
-  opacity: 0.5;
+a.link span {
+  border-bottom: 2px solid transparent;
+}
+
+a.link:hover span {
+  border-bottom: 2px solid var(--primary400);
 }
 
 a.link.large {
diff --git a/components/common/MobileMenu.module.css b/components/common/MobileMenu.module.css
index 5bc2a377..416376f0 100644
--- a/components/common/MobileMenu.module.css
+++ b/components/common/MobileMenu.module.css
@@ -28,6 +28,10 @@
   margin-top: 20px;
 }
 
+.item:last-child {
+  margin-top: 60px;
+}
+
 .button {
   margin-right: 15px;
 }
diff --git a/components/common/Table.js b/components/common/Table.js
index 004b5af6..77a07712 100644
--- a/components/common/Table.js
+++ b/components/common/Table.js
@@ -76,12 +76,13 @@ export default Table;
 
 export const TableRow = ({ columns, row }) => (
   <div className={classNames(styles.row, 'row')}>
-    {columns.map(({ key, render, className, style, cell }, index) => (
+    {columns.map(({ key, label, render, className, style, cell }, index) => (
       <div
         key={`${key}-${index}`}
         className={classNames(styles.cell, className, cell?.className)}
         style={{ ...style, ...cell?.style }}
       >
+        {label && <label>{label}</label>}
         {render ? render(row) : row[key]}
       </div>
     ))}
diff --git a/components/common/Table.module.css b/components/common/Table.module.css
index 4d7cd24b..f92338f8 100644
--- a/components/common/Table.module.css
+++ b/components/common/Table.module.css
@@ -3,6 +3,12 @@
   flex-direction: column;
 }
 
+.table label {
+  display: none;
+  font-size: var(--font-size-xsmall);
+  font-weight: bold;
+}
+
 .header {
   border-bottom: 1px solid var(--gray300);
 }
@@ -26,5 +32,24 @@
 
 .cell {
   display: flex;
+  flex-direction: column;
   align-items: flex-start;
 }
+
+@media only screen and (max-width: 992px) {
+  .table label {
+    display: block;
+  }
+
+  .header {
+    display: none;
+  }
+
+  .row {
+    flex-direction: column;
+  }
+
+  .cell {
+    margin-bottom: 20px;
+  }
+}
diff --git a/components/layout/ButtonLayout.module.css b/components/layout/ButtonLayout.module.css
index ef7707e4..5b979360 100644
--- a/components/layout/ButtonLayout.module.css
+++ b/components/layout/ButtonLayout.module.css
@@ -1,6 +1,7 @@
 .buttons {
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .buttons button + * {
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index e2617012..c38cad9d 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -7,7 +7,7 @@ import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import useForceUpdate from 'hooks/useForceUpdate';
-import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
 import ChartTooltip from './ChartTooltip';
 
@@ -16,7 +16,6 @@ export default function BarChart({
   datasets,
   unit,
   records,
-  height = DEFAUL_CHART_HEIGHT,
   animationDuration = DEFAULT_ANIMATION_DURATION,
   className,
   stacked = false,
@@ -215,7 +214,6 @@ export default function BarChart({
         data-tip=""
         data-for={`${chartId}-tooltip`}
         className={classNames(styles.chart, className)}
-        style={{ height }}
       >
         <canvas ref={canvas} />
       </div>
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css
index aea86a4c..593bff91 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -1,3 +1,10 @@
 .chart {
   position: relative;
+  height: 400px;
+}
+
+@media only screen and (max-width: 992px) {
+  .chart {
+    height: 200px;
+  }
 }
diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css
index b21b92b9..5831d837 100644
--- a/components/metrics/DataTable.module.css
+++ b/components/metrics/DataTable.module.css
@@ -95,3 +95,9 @@
   background: var(--primary400);
   z-index: -1;
 }
+
+@media only screen and (max-width: 992px) {
+  .body {
+    height: auto;
+  }
+}
diff --git a/components/metrics/RealtimeViews.js b/components/metrics/RealtimeViews.js
index dca82f2e..d96f0c45 100644
--- a/components/metrics/RealtimeViews.js
+++ b/components/metrics/RealtimeViews.js
@@ -96,7 +96,6 @@ export default function RealtimeViews({ websiteId, data, websites }) {
           title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
           metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           data={referrers}
-          height={400}
         />
       )}
       {filter === FILTER_PAGES && (
@@ -105,7 +104,6 @@ export default function RealtimeViews({ websiteId, data, websites }) {
           metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
           renderLabel={renderLink}
           data={pages}
-          height={400}
         />
       )}
     </>
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index a4fb7df0..d484e708 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
 import OverflowText from 'components/common/OverflowText';
@@ -30,24 +31,28 @@ export default function WebsiteHeader({ websiteId, title, domain, showLink = fal
   );
 
   return (
-    <PageHeader>
-      <div className={styles.title}>{header}</div>
-      <ActiveUsers className={styles.active} websiteId={websiteId} />
-      <ButtonLayout align="right">
-        <RefreshButton websiteId={websiteId} />
-        {showLink && (
-          <Link
-            href="/website/[...id]"
-            as={`/website/${websiteId}/${title}`}
-            className={styles.link}
-            icon={<Arrow />}
-            size="small"
-            iconRight
-          >
-            <FormattedMessage id="label.view-details" defaultMessage="View details" />
-          </Link>
-        )}
-      </ButtonLayout>
+    <PageHeader className="row">
+      <div className={classNames(styles.title, 'col-12 col-lg-4')}>{header}</div>
+      <div className={classNames(styles.active, 'col-6 col-lg-4')}>
+        <ActiveUsers websiteId={websiteId} />
+      </div>
+      <div className="col-6 col-lg-4">
+        <ButtonLayout align="right">
+          <RefreshButton websiteId={websiteId} />
+          {showLink && (
+            <Link
+              href="/website/[...id]"
+              as={`/website/${websiteId}/${title}`}
+              className={styles.link}
+              icon={<Arrow />}
+              size="small"
+              iconRight
+            >
+              <FormattedMessage id="label.view-details" defaultMessage="View details" />
+            </Link>
+          )}
+        </ButtonLayout>
+      </div>
     </PageHeader>
   );
 }
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index 4c9670fa..d869b91b 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -16,8 +16,12 @@
   font-weight: 600;
 }
 
-@media only screen and (max-width: 576px) {
+.active {
+  justify-content: center;
+}
+
+@media only screen and (max-width: 992px) {
   .active {
-    display: none;
+    justify-content: flex-start;
   }
 }
diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js
index a7e69726..cd6d2a80 100644
--- a/components/pages/RealtimeDashboard.js
+++ b/components/pages/RealtimeDashboard.js
@@ -145,7 +145,6 @@ export default function RealtimeDashboard() {
               metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
               data={countries}
               renderLabel={renderCountryName}
-              height={500}
             />
           </GridColumn>
           <GridColumn xs={12} lg={8}>
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index 2767de01..c4297acc 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -68,7 +68,7 @@ export default function TestConsole() {
           {show && (
             <div className={classNames(styles.test, 'row')}>
               <div className="col-4">
-                <PageHeader>Page links</PageHeader>
+                <PageHeader>Page links</PageHeader>Nmo
                 <div>
                   <Link href={`?page=1`}>
                     <a>page one</a>
@@ -79,6 +79,11 @@ export default function TestConsole() {
                     <a>page two</a>
                   </Link>
                 </div>
+                <div>
+                  <Link href={`https://www.google.com`}>
+                    <a className="umami--click--external-link">external link</a>
+                  </Link>
+                </div>
               </div>
               <div className="col-4">
                 <PageHeader>CSS events</PageHeader>
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index 14304bc2..4929b244 100644
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@@ -53,23 +53,23 @@ export default function AccountSettings() {
     {
       key: 'username',
       label: <FormattedMessage id="label.username" defaultMessage="Username" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-4',
     },
     {
       key: 'is_admin',
       label: <FormattedMessage id="label.administrator" defaultMessage="Administrator" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-3',
       render: Checkmark,
     },
     {
       key: 'dashboard',
       label: <FormattedMessage id="label.dashboard" defaultMessage="Dashboard" />,
-      className: 'col-4 col-md-3',
+      className: 'col-12 col-lg-3',
       render: DashboardLink,
     },
     {
       key: 'actions',
-      className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
+      className: classNames(styles.buttons, 'col-12 col-lg-2 pt-2 pt-md-0'),
       render: Buttons,
     },
   ];
diff --git a/components/settings/ThemeSetting.module.css b/components/settings/ThemeSetting.module.css
index b74d21f1..a827c88f 100644
--- a/components/settings/ThemeSetting.module.css
+++ b/components/settings/ThemeSetting.module.css
@@ -7,5 +7,5 @@
 }
 
 .active {
-  border: 1px solid var(--gray500);
+  border: 1px solid var(--primary400);
 }
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 77f923ba..257876be 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -101,19 +101,19 @@ export default function WebsiteSettings() {
     {
       key: 'name',
       label: <FormattedMessage id="label.name" defaultMessage="Name" />,
-      className: 'col-4 col-xl-3',
+      className: 'col-12 col-lg-4 col-xl-3',
       render: DetailsLink,
     },
     {
       key: 'domain',
       label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
-      className: 'col-4 col-xl-3',
+      className: 'col-12 col-lg-4 col-xl-3',
       render: Domain,
     },
     {
       key: 'account',
       label: <FormattedMessage id="label.owner" defaultMessage="Owner" />,
-      className: 'col-4 col-xl-1',
+      className: 'col-12 col-lg-4 col-xl-1',
     },
     {
       key: 'action',
@@ -126,13 +126,13 @@ export default function WebsiteSettings() {
     {
       key: 'name',
       label: <FormattedMessage id="label.name" defaultMessage="Name" />,
-      className: 'col-6 col-xl-4',
+      className: 'col-12 col-lg-6 col-xl-4',
       render: DetailsLink,
     },
     {
       key: 'domain',
       label: <FormattedMessage id="label.domain" defaultMessage="Domain" />,
-      className: 'col-6 col-xl-4',
+      className: 'col-12 col-lg-6 col-xl-4',
       render: Domain,
     },
     {
diff --git a/components/settings/WebsiteSettings.module.css b/components/settings/WebsiteSettings.module.css
index 6ecb34c7..a69d4101 100644
--- a/components/settings/WebsiteSettings.module.css
+++ b/components/settings/WebsiteSettings.module.css
@@ -3,7 +3,9 @@
 }
 
 .buttons {
+  display: flex;
   justify-content: flex-end;
+  width: 100%;
 }
 
 .detailLink {