diff --git a/src/components/Button.astro b/src/components/Button.astro
new file mode 100644
index 0000000..d30ad63
--- /dev/null
+++ b/src/components/Button.astro
@@ -0,0 +1,63 @@
+---
+interface Props {
+  href?: string; // no href = disabled
+  variant?: 'primary' | 'secondary' | 'menu';
+}
+
+const { href, variant = 'primary', ...rest } = Astro.props;
+
+const classes: string[] = [];
+if (!href) classes.push('disabled');
+if (variant !== 'secondary') classes.push('primary');
+if (variant === 'menu') classes.push('menu');
+---
+
+<a
+  class={classes.join(' ')}
+  href={href}
+  target="_blank"
+  referrerpolicy="no-referrer"
+  {...rest}
+>
+  <slot />
+</a>
+
+<style lang="scss">
+  @use '../styles/colors';
+
+  $primary-hover: #6dbeda;
+  $primary-pressed: #53a0bc;
+
+  a {
+    border-radius: 8px;
+    padding: 1.25rem;
+    background-color: colors.$secondary;
+    color: colors.$text;
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: 100ms;
+
+    &.menu {
+      padding: 0.75rem;
+    }
+
+    &.disabled {
+      cursor: default;
+    }
+  }
+
+  a.primary {
+    background-color: colors.$primary;
+
+    &:hover {
+      background-color: $primary-hover;
+    }
+
+    &:active {
+      background-color: $primary-pressed;
+    }
+  }
+</style>
diff --git a/src/graphics/redirect_arrow.svg b/src/graphics/redirect_arrow.svg
new file mode 100644
index 0000000..9c41ec4
--- /dev/null
+++ b/src/graphics/redirect_arrow.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_281_104)">
+<rect width="24" height="24" />
+<path d="M16.979 8.45L16.986 12H19V5H12V7.014L15.55 7.021L5 17.571L6.429 19L16.979 8.45Z" fill="#3D3730"/>
+</g>
+<defs>
+<clipPath id="clip0_281_104">
+<rect width="24" height="24" />
+</clipPath>
+</defs>
+</svg>
diff --git a/src/graphics/stopwatch.svg b/src/graphics/stopwatch.svg
new file mode 100644
index 0000000..43fc9dc
--- /dev/null
+++ b/src/graphics/stopwatch.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_281_103)">
+<rect width="24" height="24" />
+<path d="M12 21C7.58172 21 4 17.4183 4 13C4 8.58172 7.58172 5 12 5C16.4183 5 20 8.58172 20 13C19.995 17.4162 16.4162 20.995 12 21ZM12 7C8.68629 7 6 9.68629 6 13C6 16.3137 8.68629 19 12 19C15.3137 19 18 16.3137 18 13C17.9961 9.68789 15.3121 7.00386 12 7ZM13 14H11V9H13V14ZM19.293 7.707L17.293 5.707L18.707 4.293L20.707 6.293L19.294 7.706L19.293 7.707ZM15 4H9V2H15V4Z" fill="#3D3730"/>
+</g>
+<defs>
+<clipPath id="clip0_281_103">
+<rect width="24" height="24" />
+</clipPath>
+</defs>
+</svg>
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
index a30b5bb..d94ff43 100644
--- a/src/styles/_global.scss
+++ b/src/styles/_global.scss
@@ -66,22 +66,5 @@ a {
 button {
   background: none;
   border: none;
-  border-radius: 8px;
-  display: flex;
-  gap: 0.5rem;
-  font-size: 1.25rem;
   cursor: pointer;
 }
-
-button.primary,
-button.menu {
-  background: colors.$primary;
-}
-
-button.secondary {
-  background: colors.$secondary;
-}
-
-button.menu {
-  font-family: fonts.$mono;
-}