diff --git a/.storybook/preview.js b/.storybook/preview.js
index 9abcbfcb0..b8aef7430 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -6,6 +6,7 @@ import { MockedProvider } from '@apollo/client/testing';
 
 // Import design system component styles for our Stories.
 import '../src/design-system/components/Badge/Badge.css';
+import '../src/design-system/components/Button/Button.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
diff --git a/cypress/e2e/desktop/index.cy.ts b/cypress/e2e/desktop/index.cy.ts
index 0bc49cc28..e1a531c10 100644
--- a/cypress/e2e/desktop/index.cy.ts
+++ b/cypress/e2e/desktop/index.cy.ts
@@ -566,6 +566,7 @@ describe('Home page tests', () => {
 
       cy.findByText('Directions')
         .scrollIntoView()
+        .parent()
         .invoke('attr', 'href')
         .should('include', 'https://maps.apple.com/?dirflg=w&daddr=');
     });
diff --git a/src/components/Button/Button.md b/src/components/Button/Button.md
deleted file mode 100644
index a8274fa33..000000000
--- a/src/components/Button/Button.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### Primary
-
-```jsx
-<Button>Click me!</Button>
-```
-
-### Secondary
-
-```jsx
-<Button variant="secondary">Click me!</Button>
-```
-
-### Link
-
-The most common use can would be combine the `link` variant with `as="a"` to render the component as an anchor element.
-
-```jsx
-<Button as="a" href="" variant="link">
-  Click me!
-</Button>
-```
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
deleted file mode 100644
index eeca2db18..000000000
--- a/src/components/Button/Button.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Meta } from '@storybook/react';
-import { default as ButtonComponent } from '.';
-
-export default {
-  name: 'Button',
-  component: ButtonComponent,
-} as Meta;
-
-export const Default = (props) => (
-  <ButtonComponent variant="primary" {...props}>
-    Click me!
-  </ButtonComponent>
-);
-
-export const Secondary = (props) => (
-  <ButtonComponent variant="secondary" {...props}>
-    Click me!
-  </ButtonComponent>
-);
-
-export const Tertiary = (props) => (
-  <ButtonComponent variant="tertiary" {...props}>
-    Click me!
-  </ButtonComponent>
-);
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
deleted file mode 100644
index f8b884be0..000000000
--- a/src/components/Button/Button.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { variant } from 'styled-system';
-
-import Box from '../Box';
-import Text from '../Text';
-
-const BUTTON_HEIGHT = 34;
-
-const StyledButton = styled.button(
-  (props) =>
-    `
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    user-select: none;
-    min-height: ${BUTTON_HEIGHT}px;
-    max-width: 300px;
-    border-radius: ${BUTTON_HEIGHT / 2}px;
-    border: none;
-    padding: 0 ${props.theme.space[3]}px;
-    border-style: solid;
-    border-width: 2px;
-    color: ${props.theme.colors.primary};
-    box-sizing: border-box;
-
-    &:disabled {
-      border-color: ${props.theme.colors.lightGrey};
-      background-color: ${props.theme.colors.lightGrey};
-    }
-
-    &:disabled:hover {
-      color: ${props.theme.colors.primary};
-    }
-  `,
-  variant({
-    variants: {
-      primary: {
-        color: 'primary',
-        fontWeight: 'bold',
-        bg: 'secondary',
-        borderColor: 'secondary',
-        ':not(:disabled):hover, :not(:disabled):focus': {
-          color: 'aqua',
-          bg: 'primary',
-          borderColor: 'primary',
-        },
-      },
-      secondary: {
-        color: 'primary',
-        bg: 'white',
-        fontWeight: 'bold',
-        borderColor: 'primary',
-        ':not(:disabled):hover, :not(:disabled):focus': {
-          color: 'white',
-          bg: 'primary',
-          borderColor: 'primary',
-        },
-      },
-      link: {
-        color: 'primary',
-        border: 'none',
-        background: 'none',
-        textDecoration: 'underline',
-        fontWeight: 'normal',
-        padding: 0,
-        minHeight: 0,
-      },
-    },
-  })
-);
-
-const ButtonIcon = ({ icon }) => {
-  return <Box mr={2}>{icon}</Box>;
-};
-
-const Button = ({ children, icon, ...props }) => (
-  <StyledButton type="button" {...props}>
-    {Boolean(icon) && <ButtonIcon icon={icon} />}
-
-    <Text as="span">{children}</Text>
-  </StyledButton>
-);
-
-// eslint-disable-next-line functional/immutable-data
-Button.defaultProps = {
-  variant: 'primary',
-  as: 'button',
-};
-
-/** @component */
-export default StyledButton;
diff --git a/src/components/Drawer/Drawer.md b/src/components/Drawer/Drawer.md
index d22abbee8..6b8a3939d 100644
--- a/src/components/Drawer/Drawer.md
+++ b/src/components/Drawer/Drawer.md
@@ -1,11 +1,18 @@
 ```jsx
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import Spacer from '../Spacer';
 
 const [isVisible, setIsVisible] = React.useState(false);
 
 <>
-  <Button onClick={() => setIsVisible(true)}>Open drawer</Button>
+  <Button
+    htmlElement="button"
+    type="button"
+    variant="primary"
+    onClick={() => setIsVisible(true)}
+  >
+    Open drawer
+  </Button>
   <Drawer visible={isVisible} animateFrom="right">
     <p>Drawer content here!</p>
 
diff --git a/src/components/Feedback/Feedback.tsx b/src/components/Feedback/Feedback.tsx
index 7896b49bb..53a3ffa65 100644
--- a/src/components/Feedback/Feedback.tsx
+++ b/src/components/Feedback/Feedback.tsx
@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import React, { useRef, useState } from 'react';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import Box from '../Box';
 import Badge from '../../design-system/components/Badge';
 
@@ -60,7 +60,14 @@ const Feedback = () => {
 
 We'd be so grateful if you could take a moment to give us feedback on how we could make your experience even better.`}
       />
-      <Button onClick={submitFeedback}>Submit</Button>
+      <Button
+        htmlElement="button"
+        variant="primary"
+        type="submit"
+        onClick={submitFeedback}
+      >
+        Submit
+      </Button>
     </Stack>
   );
 };
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index f770c580b..c1db4472b 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { faBars, faComments } from '@fortawesome/free-solid-svg-icons';
+import Link from 'next/link';
 
 import Box from '../Box';
 import VisuallyHidden from '../VisuallyHidden';
@@ -10,7 +11,6 @@ import Logo from '../Logo';
 import MainMenu from './MainMenu';
 import { useMapState } from '../MapState';
 import { useRouter } from 'next/router';
-import Button from '../Button';
 
 import dynamic from 'next/dynamic';
 import { useFeedbackPopover } from './hooks';
@@ -43,14 +43,14 @@ const Header = ({ children }) => {
         minHeight={'60px'}
       >
         <Box flexShrink={0}>
-          <Button
+          <Link
             role="link"
             onClick={navigateAway}
-            variant="link"
+            href="/"
             aria-label="Navigate to the home page"
           >
             <Logo />
-          </Button>
+          </Link>
         </Box>
 
         <Box as="nav" width="100%" aria-labelledby="menu-main">
@@ -59,16 +59,12 @@ const Header = ({ children }) => {
           </h2>
 
           <Media at="sm" css={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <Button
-              aria-describedby={feedbackPopoverId}
-              onClick={handleClick}
-              variant={'link'}
-            >
+            <button aria-describedby={feedbackPopoverId} onClick={handleClick}>
               <Icon icon={faComments} size="2x" />
               <VisuallyHidden>
                 <Text>Feedback</Text>
               </VisuallyHidden>
-            </Button>
+            </button>
 
             <Box ml={4}>
               <button
diff --git a/src/components/Header/MainMenu.tsx b/src/components/Header/MainMenu.tsx
index 699f7553f..6f6c098da 100644
--- a/src/components/Header/MainMenu.tsx
+++ b/src/components/Header/MainMenu.tsx
@@ -6,7 +6,7 @@ import Text from '../Text';
 import { Media } from '../Media';
 import { useUser } from '@auth0/nextjs-auth0';
 import { useMapState } from '../MapState';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import { useFeedbackPopover } from './hooks';
 
 const StyledNavLink = styled(Link)<
@@ -55,6 +55,7 @@ const MainMenu = ({ children }: IMainMenu) => {
           flexDirection={['column', 'row']}
           height={['100%', 'auto']}
           width="100%"
+          alignItems="center"
         >
           <Box as="li" ml={[0, 4]}>
             <StyledNavLink href="/">Find a Toilet</StyledNavLink>
@@ -76,7 +77,9 @@ const MainMenu = ({ children }: IMainMenu) => {
               <Button
                 aria-describedby={feedbackPopoverId}
                 onClick={handleClick}
-                variant={'link'}
+                htmlElement="button"
+                variant="secondary"
+                type="button"
               >
                 Feedback
               </Button>
@@ -86,7 +89,9 @@ const MainMenu = ({ children }: IMainMenu) => {
               <Button
                 aria-describedby={feedbackPopoverId}
                 onClick={handleClick}
-                variant={'link'}
+                htmlElement="button"
+                variant="secondary"
+                type="button"
               >
                 Feedback
               </Button>
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 7002e70fb..2972426bc 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -17,7 +17,7 @@ import Text from '../Text';
 import Icon from '../Icon';
 import LocationSearch from '../LocationSearch';
 import Filters from '../Filters';
-import Button from '../Button';
+import Button from '../../design-system/components/Button';
 import { useMapState } from '../MapState';
 import config from '../../config';
 import { usePlausible } from 'next-plausible';
@@ -117,9 +117,9 @@ const Sidebar = () => {
         <Box display="flex" flexWrap="wrap" justifyContent="center">
           <Box display="flex" mt={3} mr={1}>
             <Button
-              ref={filterToggleRef}
+              htmlElement="button"
               variant="secondary"
-              icon={<FontAwesomeIcon icon={faFilter} />}
+              ref={filterToggleRef}
               aria-expanded={isFiltersExpanded}
               onClick={() => {
                 const stateText = isFiltersExpanded ? 'Close' : 'Open';
@@ -129,11 +129,13 @@ const Sidebar = () => {
               aria-label="Filters Panel"
               data-cy="mobile-filter"
             >
-              Filter
+              <FontAwesomeIcon icon={faFilter} />
+              <span>Filter</span>
             </Button>
           </Box>
           <Box display="flex" mt={3}>
             <Button
+              htmlElement="button"
               type="button"
               variant="primary"
               onClick={() => mapState?.locationServices?.startLocate()}
@@ -175,6 +177,9 @@ const Sidebar = () => {
 
           <Box display="flex" justifyContent="center" mt={4}>
             <Button
+              htmlElement="button"
+              variant="secondary"
+              type="button"
               onClick={() => {
                 setIsFiltersExpanded(false);
 
diff --git a/src/components/ToiletDetailsPanel.tsx b/src/components/ToiletDetailsPanel.tsx
index 812652ab4..07b4ba943 100644
--- a/src/components/ToiletDetailsPanel.tsx
+++ b/src/components/ToiletDetailsPanel.tsx
@@ -19,10 +19,11 @@ import Link from 'next/link';
 import { Loo } from '../api-client/graphql';
 
 import Box from './Box';
-import Button from './Button';
 import Text from './Text';
 import Spacer from './Spacer';
 import Icon from './Icon';
+import Badge from '../design-system/components/Badge';
+import Button from '../design-system/components/Button';
 import { Media } from './Media';
 // Suppress Opening Hours Heading during COVID-19
 import { WEEKDAYS, getTimeRangeLabel } from '../lib/openingTimes';
@@ -31,7 +32,6 @@ import type L from 'leaflet';
 import { useRouter } from 'next/router';
 import { useSubmitVerificationReportMutationMutation } from '../api-client/graphql';
 import { usePlausible } from 'next-plausible';
-import Badge from '../design-system/components/Badge';
 import { getFeatures } from '../lib/features';
 
 const Grid = styled(Box)`
@@ -167,26 +167,18 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
   );
 
   const getDirectionsFragment = (
-    <Link
-      passHref
+    <Button
+      variant="primary"
+      htmlElement="a"
+      rel="noopener noreferrer"
       href={`https://maps.apple.com/?dirflg=w&daddr=${[
         data.location.lat,
         data.location.lng,
       ]}`}
-      legacyBehavior
     >
-      <Button
-        variant="primary"
-        as="a"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Box mr="2">
-          <Icon icon={faDirections} />
-        </Box>
-        Directions
-      </Button>
-    </Link>
+      <Icon icon={faDirections} />
+      <span>Directions</span>
+    </Button>
   );
 
   const openingTimes = data.openingTimes || WEEKDAYS.map(() => null);
@@ -221,6 +213,8 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
         <Box display="flex" alignItems="center">
           <Button
             variant="primary"
+            htmlElement="button"
+            type="button"
             onClick={() => {
               plausible('Verification Report');
               submitVerificationReportMutation({
@@ -230,25 +224,24 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
             }}
             disabled={verificationReportState.loading === true}
           >
-            Yes
+            <span>Yes</span>
             {verificationReportState.loading === true && (
-              <Box ml="2">
-                <Icon spin={true} icon={faSpinner} />
-              </Box>
+              <Icon spin={true} icon={faSpinner} />
             )}
           </Button>
           <Spacer mr={4} />
           <Box display="flex" alignItems="center">
             No?
             <Spacer mr={2} />
-            <Link passHref href={editUrl} legacyBehavior>
-              <Button as="a" variant="secondary" data-testid="edit-button">
-                <Box mr={2}>
-                  <Icon icon={faEdit} />
-                </Box>
-                Edit
-              </Button>
-            </Link>
+            <Button
+              htmlElement="a"
+              href={editUrl}
+              variant="secondary"
+              data-testid="edit-button"
+            >
+              <Icon icon={faEdit} />
+              <span>Edit</span>
+            </Button>
           </Box>
         </Box>
         <Spacer mb={[0, 2]} />
@@ -442,10 +435,8 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
               <Text fontSize={1} color="grey">
                 Hours may vary with national holidays or seasonal changes. If
                 you know these hours to be out of date please{' '}
-                <Link passHref href={editUrl} legacyBehavior>
-                  <Button as="a" variant="link" data-testid="edit-link">
-                    edit this toilet
-                  </Button>
+                <Link href={editUrl} data-testid="edit-link">
+                  edit this toilet
                 </Link>
                 .
               </Text>
@@ -464,9 +455,7 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
                 padding={2}
                 marginBottom={2}
               >
-                <Button as="a" variant="link" href="#toilet-details-heading">
-                  Back to top
-                </Button>
+                <Link href="#toilet-details-heading">Back to top</Link>
               </Box>
             </Media>
           </Grid>
@@ -523,23 +512,27 @@ const ToiletDetailsPanel: React.FC<ToiletDetailsPanelProps> = ({
           {getDirectionsFragment}
           <Spacer mr={2} />
           <Button
+            htmlElement="button"
+            type="button"
             variant="secondary"
-            icon={<Icon icon={faList} />}
             onClick={() => setIsExpanded(true)}
             aria-expanded="false"
             data-testid="details-button"
           >
-            Details
+            <Icon icon={faList} />
+            <span>Details</span>
           </Button>
           <Spacer mr={2} />
           <Button
             variant="secondary"
-            icon={<Icon icon={faList} />}
+            htmlElement="button"
+            type="button"
             onClick={navigateAway}
             aria-expanded="false"
             data-testid="close-button"
           >
-            Close
+            <Icon icon={faTimes} />
+            <span>Close</span>
           </Button>
         </Box>
       </Grid>
diff --git a/src/design-system/components/Button/Button.css b/src/design-system/components/Button/Button.css
new file mode 100644
index 000000000..4c56b3d72
--- /dev/null
+++ b/src/design-system/components/Button/Button.css
@@ -0,0 +1,48 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  user-select: none;
+  min-height: 34px;
+  max-width: 300px;
+  border-radius: 17px;
+  padding: 0 var(--space-s);
+  border-style: solid;
+  border-width: 2px;
+  border-color: var(--color-turquoise);
+  color: var(--color-blue);
+  font-weight: bold;
+  background-color: var(--color-turquoise);
+}
+
+.button > * + * {
+  margin-left: var(--space-2xs);
+}
+
+.button:disabled {
+  border-color: var(--color-light-grey);
+  background-color: var(--color-light-grey);
+}
+
+.button:disabled:hover {
+  color: var(--color-blue);
+  cursor: not-allowed;
+}
+
+.button:not(:disabled):hover,
+.button:not(:disabled):focus {
+  color: var(--color-turquoise);
+  background-color: var(--color-blue);
+  border-color: var(--color-blue);
+}
+
+.button--secondary {
+  background-color: var(--color-white);
+  border-color: var(--color-blue);
+}
+
+.button--secondary:not(:disabled):hover,
+.button--secondary:not(:disabled):focus {
+  color: var(--color-white);
+}
diff --git a/src/design-system/components/Button/Button.stories.tsx b/src/design-system/components/Button/Button.stories.tsx
new file mode 100644
index 000000000..e4dfe734d
--- /dev/null
+++ b/src/design-system/components/Button/Button.stories.tsx
@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Button from './Button';
+
+export default {
+  title: 'Design-System/Button',
+  component: Button,
+  argTypes: {
+    children: { table: { disable: true } },
+    variant: { table: { disable: true } },
+  },
+  args: { href: 'www.google.com' },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  children: <span>Primary button</span>,
+  variant: 'primary',
+  htmlElement: 'button',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+  children: 'Secondary button',
+  variant: 'secondary',
+  htmlElement: 'button',
+};
diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx
new file mode 100644
index 000000000..4dee1f2f7
--- /dev/null
+++ b/src/design-system/components/Button/Button.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+import { ButtonProps } from './Button.types';
+import { forwardRef } from 'react';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  if (props.htmlElement === 'a') {
+    return (
+      <Link
+        href={props.href}
+        className={`button ${
+          props.variant === 'secondary' ? `button--secondary` : ''
+        }`}
+        {...props}
+      >
+        {props.children}
+      </Link>
+    );
+  }
+  return (
+    <button
+      className={`button ${
+        props.variant === 'secondary' ? `button--secondary` : ''
+      }`}
+      ref={ref}
+      {...props}
+    >
+      {props.children}
+    </button>
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;
diff --git a/src/design-system/components/Button/Button.types.tsx b/src/design-system/components/Button/Button.types.tsx
new file mode 100644
index 000000000..1f1fd8f03
--- /dev/null
+++ b/src/design-system/components/Button/Button.types.tsx
@@ -0,0 +1,14 @@
+interface Button extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  htmlElement: 'button';
+  variant: 'primary' | 'secondary';
+  children: React.ReactNode;
+}
+
+interface Link extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  htmlElement: 'a';
+  variant: 'primary' | 'secondary';
+  children: React.ReactNode;
+  href: string;
+}
+
+export type ButtonProps = Link | Button;
diff --git a/src/components/Button/index.ts b/src/design-system/components/Button/index.tsx
similarity index 100%
rename from src/components/Button/index.ts
rename to src/design-system/components/Button/index.tsx
diff --git a/src/design-system/components/stylesheet.css b/src/design-system/components/stylesheet.css
new file mode 100644
index 000000000..f5105cac9
--- /dev/null
+++ b/src/design-system/components/stylesheet.css
@@ -0,0 +1,2 @@
+@import 'src/design-system/components/Badge/Badge.css';
+@import 'src/design-system/components/Button/Button.css';
diff --git a/src/pages/404.page.tsx b/src/pages/404.page.tsx
index 34cc09a69..d3734928e 100644
--- a/src/pages/404.page.tsx
+++ b/src/pages/404.page.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import Link from 'next/link';
+
 import Box from '../components/Box';
 import Spacer from '../components/Spacer';
 import Text from '../components/Text';
-import Button from '../components/Button';
 
 const NotFound = ({ children }) => (
   <>
@@ -31,9 +32,7 @@ const NotFound = ({ children }) => (
 
           <Spacer mt={4} />
 
-          <Button as={'a'} variant="link" href="/">
-            Take me back home!
-          </Button>
+          <Link href="/">Take me back home!</Link>
         </div>
       </Box>
     </Box>
diff --git a/src/pages/500.page.tsx b/src/pages/500.page.tsx
index 9887d1717..44ddf2a51 100644
--- a/src/pages/500.page.tsx
+++ b/src/pages/500.page.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import Link from 'next/link';
+
 import Box from '../components/Box';
 import Spacer from '../components/Spacer';
 import Text from '../components/Text';
-import Button from '../components/Button';
 
 const ThereWasAProblem = ({ children }) => (
   <>
@@ -27,17 +28,15 @@ const ThereWasAProblem = ({ children }) => (
           <p>
             Please try again later or, if the problem persists, please contact
             us at{' '}
-            <Button variant="link" as="a" href="mailto:gbtoiletmap@gmail.com">
+            <Link href="mailto:gbtoiletmap@gmail.com">
               gbtoiletmap@gmail.com
-            </Button>
+            </Link>
             .
           </p>
 
           <Spacer mt={4} />
 
-          <Button as={'a'} variant="link" href="/">
-            Take me back home!
-          </Button>
+          <Link href="/">Take me back home!</Link>
         </div>
       </Box>
     </Box>
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
index f303ed753..ef054b014 100644
--- a/src/pages/_app.page.tsx
+++ b/src/pages/_app.page.tsx
@@ -9,7 +9,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css';
 config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 import { useRouter } from 'next/router';
 import LooMap from '../components/LooMap/LooMapLoader';
-import '../design-system/components/Badge/Badge.css';
+import '../design-system/components/stylesheet.css';
 
 const App = (props) => {
   const router = useRouter();
diff --git a/src/pages/about.page.tsx b/src/pages/about.page.tsx
index eaea0f63e..d97bdf0f7 100644
--- a/src/pages/about.page.tsx
+++ b/src/pages/about.page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import Head from 'next/head';
 import styled from '@emotion/styled';
 import Container from '../components/Container';
-import Button from '../components/Button';
+import Button from '../design-system/components/Button';
 import Text, { TextProps } from '../components/Text';
 import Spacer from '../components/Spacer';
 import Box, { BoxProps } from '../components/Box';
@@ -56,34 +56,25 @@ const AboutPage = () => {
           joint venture between researchers Dr Jo-Anne Bichard and Gail Ramster
           (who created the map at the RCA Helen Hamlyn Centre for Design) and
           software development company{' '}
-          <Link passHref href="https://www.neontribe.co.uk/" legacyBehavior>
-            <Button
-              variant="link"
-              as="a"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Neontribe
-            </Button>
+          <Link
+            href="https://www.neontribe.co.uk/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Neontribe
           </Link>{' '}
           (who designed and built it).
         </p>
         <p>
           The information comes from the public - anyone can go on the website
-          and{' '}
-          <Link href="/" passHref legacyBehavior>
-            <Button variant="link">add, edit or remove toilets</Button>
-          </Link>
-          . We also use open data and request information from councils,{' '}
-          <Link passHref href="https://www.openstreetmap.org/" legacyBehavior>
-            <Button
-              variant="link"
-              as="a"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              OpenStreetMap
-            </Button>
+          and <Link href="/">add, edit or remove toilets</Link>. We also use
+          open data and request information from councils,{' '}
+          <Link
+            href="https://www.openstreetmap.org/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            OpenStreetMap
           </Link>
           , private companies and organisations.
         </p>
@@ -94,20 +85,15 @@ const AboutPage = () => {
           to download below.
         </p>
         <Spacer mb={2} />
-        <Link
-          passHref
+        <Button
+          htmlElement="a"
+          variant="primary"
+          target="_blank"
+          rel="noopener noreferrer"
           href="Toilet.Map.Volunteer.Help.Guide.pdf"
-          legacyBehavior
         >
-          <Button
-            as="a"
-            variant="primary"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Download volunteer help guide
-          </Button>
-        </Link>
+          Download volunteer help guide
+        </Button>
         <Spacer mb={3} />
         <p>
           A handy printable checklist designed to make it easier for you to
@@ -115,16 +101,15 @@ const AboutPage = () => {
           also available for download.
         </p>
         <Spacer mb={2} />
-        <Link passHref href={'/GBPTM.Toilet.Checklist.pdf'} legacyBehavior>
-          <Button
-            as="a"
-            variant="primary"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Download toilet checklist
-          </Button>
-        </Link>
+        <Button
+          htmlElement="a"
+          variant="primary"
+          href={'/GBPTM.Toilet.Checklist.pdf'}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Download toilet checklist
+        </Button>
         <SubHeading>Publicly Accessible Toilets</SubHeading>
         <p>
           The project aims to map all publicly-accessible toilets - that means
@@ -163,19 +148,13 @@ const AboutPage = () => {
         <p>
           If you have any problems updating the toilets, or wish to send us
           toilet details or comments, please contact{' '}
-          <Link passHref href="mailto:gbtoiletmap@gmail.com" legacyBehavior>
-            <Button variant="link" as="a">
-              gbtoiletmap@gmail.com
-            </Button>
-          </Link>
+          <Link href="mailto:gbtoiletmap@gmail.com">gbtoiletmap@gmail.com</Link>
           .
         </p>
         <SubHeading>The Explorer</SubHeading>
         <p>
-          <Link passHref href="/explorer" prefetch={false} legacyBehavior>
-            <Button variant="link" as="a">
-              Visit the Explorer
-            </Button>
+          <Link href="/explorer" prefetch={false}>
+            Visit the Explorer
           </Link>
           &nbsp;to get an overview of the statistics and details related to the
           Toilet Map. These statistics are calculated on-demand, so will be up
diff --git a/src/pages/contact.page.tsx b/src/pages/contact.page.tsx
index 54808a76a..030f82cc3 100644
--- a/src/pages/contact.page.tsx
+++ b/src/pages/contact.page.tsx
@@ -1,11 +1,12 @@
 import Head from 'next/head';
+import Link from 'next/link';
+import { NextPage } from 'next';
+
 import Container from '../components/Container';
-import Button from '../components/Button';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import Box from '../components/Box';
 import config from '../config';
-import { NextPage } from 'next';
 
 const ContactPage = () => {
   return (
@@ -22,9 +23,7 @@ const ContactPage = () => {
         <p>
           If you have any problems updating the toilets, or wish to send us
           toilet details or comments, please contact{' '}
-          <Button variant="link" as="a" href="mailto:gbtoiletmap@gmail.com">
-            gbtoiletmap@gmail.com
-          </Button>
+          <Link href="mailto:gbtoiletmap@gmail.com">gbtoiletmap@gmail.com</Link>
           .
         </p>
       </Container>
diff --git a/src/pages/explorer/search.page.tsx b/src/pages/explorer/search.page.tsx
index 049f22860..1ad247130 100644
--- a/src/pages/explorer/search.page.tsx
+++ b/src/pages/explorer/search.page.tsx
@@ -12,7 +12,7 @@ import Spacer from '../../components/Spacer';
 import Box from '../../components/Box';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
-import Button from '../../components/Button';
+import Button from '../../design-system/components/Button';
 import { css } from '@emotion/react';
 import theme from '../../theme';
 import Link from 'next/link';
@@ -246,7 +246,7 @@ const UnstyledTable = () => {
             }
           ></input>
         </OptionLabel>
-        <Button type="submit" variant="primary">
+        <Button htmlElement="button" type="submit" variant="primary">
           Search
         </Button>
       </Box>
diff --git a/src/pages/login.page.tsx b/src/pages/login.page.tsx
index 806fe22ca..f2a5d9526 100644
--- a/src/pages/login.page.tsx
+++ b/src/pages/login.page.tsx
@@ -1,14 +1,15 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import styled from '@emotion/styled';
+import Link from 'next/link';
+
 import Container from '../components/Container';
-import Button from '../components/Button';
+import Button from '../design-system/components/Button';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
 import Box, { BoxProps } from '../components/Box';
 
 import config from '../config';
-import Link from 'next/link';
 
 const List = styled.ul`
   list-style: initial;
@@ -40,14 +41,14 @@ const LoginPage = () => {
           Up:
         </p>
         <Spacer mb={3} />
-        <Link
-          passHref
+
+        <Button
+          htmlElement="a"
+          variant="primary"
           href={`/api/auth/login?returnTo=${router.asPath}`}
-          legacyBehavior>
-          <Button as={'a'} variant="primary">
-            Log In/Sign Up
-          </Button>
-        </Link>
+        >
+          Log In/Sign Up
+        </Button>
         <Spacer mb={4} />
         <Text fontSize={3} fontWeight="bold">
           <h2>Examples of Public toilets</h2>
@@ -91,9 +92,7 @@ const LoginPage = () => {
         <p>
           If you have any problems updating the toilets, or wish to send us
           toilet details or comments, please contact{' '}
-          <Button variant="link" as="a" href="mailto:gbtoiletmap@gmail.com">
-            gbtoiletmap@gmail.com
-          </Button>
+          <Link href="mailto:gbtoiletmap@gmail.com">gbtoiletmap@gmail.com</Link>
           .
         </p>
       </Container>
diff --git a/src/pages/loos/[id]/edit.page.tsx b/src/pages/loos/[id]/edit.page.tsx
index 35178c03f..5a50412ff 100644
--- a/src/pages/loos/[id]/edit.page.tsx
+++ b/src/pages/loos/[id]/edit.page.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-
 import Head from 'next/head';
-import Link from 'next/link';
-
 import { useUser } from '@auth0/nextjs-auth0';
-import Button from '../../../components/Button';
+import { useEffect } from 'react';
+import { css } from '@emotion/react';
+
+import Button from '../../../design-system/components/Button';
 import Spacer from '../../../components/Spacer';
 import EntryForm from '../../../components/EntryForm';
 import Box from '../../../components/Box';
@@ -22,9 +22,7 @@ import {
   UpdateLooMutationVariables,
   useUpdateLooMutation,
 } from '../../../api-client/graphql';
-import { useEffect } from 'react';
 import LocationSearch from '../../../components/LocationSearch';
-import { css } from '@emotion/react';
 import NotFound from '../../404.page';
 
 const EditPage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> = (
@@ -158,10 +156,9 @@ const EditPage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> = (
         >
           <Box display="flex" flexDirection="column" alignItems="center">
             <Button
+              htmlElement="button"
               type="submit"
-              css={{
-                width: '100%',
-              }}
+              variant="primary"
               data-testid="update-toilet-button"
             >
               Update the toilet
@@ -170,11 +167,9 @@ const EditPage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> = (
             <Spacer mt={2} />
 
             <Button
-              as={Link}
+              htmlElement="a"
+              variant="secondary"
               href={`/loos/${loo.id}/remove`}
-              css={{
-                width: '100%',
-              }}
               data-testid="remove-toilet-button"
             >
               Remove the toilet
diff --git a/src/pages/loos/[id]/remove.page.tsx b/src/pages/loos/[id]/remove.page.tsx
index 57a775685..b95ae8f70 100644
--- a/src/pages/loos/[id]/remove.page.tsx
+++ b/src/pages/loos/[id]/remove.page.tsx
@@ -8,7 +8,7 @@ import Container from '../../../components/Container';
 import Box from '../../../components/Box';
 import Spacer from '../../../components/Spacer';
 import Text from '../../../components/Text';
-import Button from '../../../components/Button';
+import Button from '../../../design-system/components/Button';
 import Notification from '../../../components/Notification';
 import Login from '../../login.page';
 import PageLoading from '../../../components/PageLoading';
@@ -153,7 +153,9 @@ const RemovePage: PageFindLooByIdComp | React.FC<{ notFound?: boolean }> =
 
             <Spacer mb={3} />
 
-            <Button type="submit">Remove</Button>
+            <Button htmlElement="button" variant="primary" type="submit">
+              Remove
+            </Button>
           </form>
 
           {loadingRemove && (
diff --git a/src/pages/loos/add.page.tsx b/src/pages/loos/add.page.tsx
index b5ec55e3a..5d62d8645 100644
--- a/src/pages/loos/add.page.tsx
+++ b/src/pages/loos/add.page.tsx
@@ -5,7 +5,7 @@ import { useUser } from '@auth0/nextjs-auth0';
 import EntryForm from '../../components/EntryForm';
 import Box from '../../components/Box';
 import Spacer from '../../components/Spacer';
-import Button from '../../components/Button';
+import Button from '../../design-system/components/Button';
 import LocationSearch from '../../components/LocationSearch';
 import Login from '../login.page';
 
@@ -119,7 +119,12 @@ const AddPage = () => {
         onSubmit={saveLoo}
       >
         <Box display="flex" flexDirection="column" alignItems="center">
-          <Button type="submit" data-testid="add-the-toilet">
+          <Button
+            htmlElement="button"
+            variant="primary"
+            type="submit"
+            data-testid="add-the-toilet"
+          >
             Save toilet
           </Button>
         </Box>
diff --git a/src/pages/privacy.page.tsx b/src/pages/privacy.page.tsx
index b8e9fac07..14dfc3557 100644
--- a/src/pages/privacy.page.tsx
+++ b/src/pages/privacy.page.tsx
@@ -1,9 +1,9 @@
 import Head from 'next/head';
+import Link from 'next/link';
 
 import Container from '../components/Container';
 import Text from '../components/Text';
 import Spacer from '../components/Spacer';
-import Button from '../components/Button';
 import Box from '../components/Box';
 
 import config from '../config';
@@ -72,15 +72,13 @@ const PrivacyPage = () => {
           If you&apos;d like to know what we&apos;ve stored about you, or ask us
           to forget you, or to let us know about something you&apos;d like
           changed please drop us a line at{' '}
-          <Button
-            as="a"
-            variant="link"
+          <Link
             href="mailto:gbtoiletmap@gmail.com"
             target="_blank"
             rel="noopener noreferrer"
           >
             gbtoiletmap@gmail.com
-          </Button>
+          </Link>
           . If you&apos;d like to exercise any of your rights under the GDPR
           that&apos;s the address to use.
         </p>