diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33f14aadd44643361f50efd8f3e0c832bd0249f9..719320ed5b620e383db7e92f5cd79ce099365cc4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,6 +7,7 @@ import './i18n'
 import { Button } from './components/button'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
+import { Link } from './components/link'
 
 const App = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -31,16 +32,16 @@ const App = () => {
   }
 
   return (
-    <Suspense fallback="loading">
-      <div className="App">
-        <header className="App-header">
-          <Button href="https://example.com" target="_blank" rel="noopener">
+    <Suspense fallback='loading'>
+      <div className='App'>
+        <header className='App-header'>
+          <Button href='https://example.com' target='_blank' rel='noopener'>
             Knapp
           </Button>
           <Button
-            href="https://example.com"
-            target="_blank"
-            rel="noopener"
+            href='https://example.com'
+            target='_blank'
+            rel='noopener'
             pink
           >
             Rosa knapp
@@ -70,6 +71,9 @@ const App = () => {
             <br />
             API reachable? {apiHealth}
           </p>
+
+          <Link to='test' external={false}>Test</Link>
+          <Link to='test2' external={true}>Test2</Link>
         </header>
       </div>
     </Suspense>
diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..65a9e8e041098733d35c3787ac198e5d030d221b
--- /dev/null
+++ b/frontend/src/components/link/index.tsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components/macro'
+
+
+interface LinkProps {
+  children?: React.ReactNode
+  external?: boolean
+  to?: string
+}
+
+const StyledLink = styled.a<LinkProps>`
+  background: ${(props) => props.external ? 'green' : 'red'};
+`
+
+export function Link(props: LinkProps) {
+
+  if (props.external) {
+    return (
+      <StyledLink href={props.to} {...props} />
+    )
+  }
+
+  return (
+    <StyledLink href={props.to} {...props} />
+  )
+}
\ No newline at end of file