diff --git a/components/BigButton.vue b/components/BigButton.vue
deleted file mode 100644
index 71a6beb..0000000
--- a/components/BigButton.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <div
-    class="select-none w-full sm:w-fit sm:px-20 rounded-xl max-w-full p-8 flex flex-row items-center bg-[var(--brand-background-old)] justify-center"
-  >
-    <slot />
-  </div>
-</template>
diff --git a/components/Button.vue b/components/Button.vue
new file mode 100644
index 0000000..3f0fda7
--- /dev/null
+++ b/components/Button.vue
@@ -0,0 +1,24 @@
+<template>
+  <NuxtLink
+    :to="to"
+    :target="external ? '_blank' : ''"
+    :rel="external ? 'noopener noreferrer' : ''"
+    :class="
+      'flex gap-2 px-10 py-3 rounded-xl items-center text-lg text-inherit font-normal duration-300 active:scale-95 ' +
+      (secondary
+        ? 'border-2 border-[var(--text-colour)] hover:bg-[var(--text-colour)] hover:text-black'
+        : 'border-2 border-[var(--brand-background-old)] bg-[var(--brand-background-old)] hover:brightness-150')
+    "
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup>
+const props = defineProps({
+  to: String,
+  size: String,
+  secondary: Boolean,
+  external: Boolean,
+})
+</script>
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
index c0a75ac..49dab42 100644
--- a/components/ProjectCard.vue
+++ b/components/ProjectCard.vue
@@ -20,12 +20,9 @@
     </div>
     <!-- Buttons -->
     <div class="flex flex-row flex-wrap gap-3 mb-5">
-      <ExternalLink
-        v-for="(link, index) in urls"
-        :to="link"
-        class="flex gap-2 px-10 py-3 rounded-xl items-center text-lg border-2 border-[var(--text-colour)] duration-300 hover:bg-[var(--text-colour)] hover:text-black active:scale-95 text-inherit font-normal"
-        ><LucideDownload />{{ index }}</ExternalLink
-      >
+      <Button v-for="(link, index) in urls" :to="link" secondary external>
+        <LucideDownload />{{ index }}
+      </Button>
     </div>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index c5dd465..61d9afd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,17 +15,13 @@
       {{ $t("landing.reason") }}
     </p>
 
-    <NuxtLink class="w-fit" to="/alternatives">
-      <BigButton>
-        <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
-      </BigButton>
-    </NuxtLink>
+    <Button class="w-fit sm:px-20 px-15 py-8" to="/alternatives">
+      <LucideArrowUpRight /> {{ $t("landing.buttons.alternatives") }}
+    </Button>
   </div>
 </template>
 
 <script setup lang="ts">
-import BigButton from "../components/BigButton.vue"
-
 const minecraftText = ref("MINECRAFT")
 
 if (Math.floor(Math.random() * 10000) === 0) {