diff --git a/components/buttons/Button.vue b/components/buttons/Button.vue
new file mode 100644
index 0000000..20783c0
--- /dev/null
+++ b/components/buttons/Button.vue
@@ -0,0 +1,43 @@
+<!--if you want a button with a different colour, you have to inline CSS or do something similar
+
+    <Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
+
+	if you have multiple buttons with the same style, feel free to make another component
+
+    this is because i couldn't find a way of dynamically taking in colours without using javascript
+	to update the colour during runtime, i REFUSE to do this due to performance -->
+
+<template>
+	<div id="button" @click="props.callback()">
+		{{ props.text }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	text: string,
+	callback: CallableFunction,
+}>();
+
+</script>
+
+<style scoped>
+#button {
+	cursor: pointer;
+
+	background-color: #b35719;
+	color: #ffffff;
+
+	padding: 8px 16px;
+	font-size: 16px;
+	transition: background-color 0.2s;
+
+	border-radius: 16px;
+	text-decoration: none;
+	display: inline-block;
+}
+
+#button:hover {
+	background-color: #934410;
+}
+</style>
\ No newline at end of file
diff --git a/components/buttons/ButtonScary.vue b/components/buttons/ButtonScary.vue
new file mode 100644
index 0000000..71c0bc7
--- /dev/null
+++ b/components/buttons/ButtonScary.vue
@@ -0,0 +1,43 @@
+<!--if you want a button with a different colour, you have to inline CSS or do something similar
+
+    <Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
+
+	if you have multiple buttons with the same style, feel free to make another component
+
+    this is because i couldn't find a way of dynamically taking in colours without using javascript
+	to update the colour during runtime, i REFUSE to do this due to performance -->
+
+<template>
+	<div id="button" @click="props.callback()">
+		{{ props.text }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	text: string,
+	callback: CallableFunction,
+}>();
+
+</script>
+
+<style scoped>
+#button {
+	cursor: pointer;
+
+	background-color: #f02f2f;
+	color: #ffffff;
+
+	padding: 8px 16px;
+	font-size: 16px;
+	transition: background-color 0.2s;
+
+	border-radius: 16px;
+	text-decoration: none;
+	display: inline-block;
+}
+
+#button:hover {
+	background-color: #ff0000;
+}
+</style>
\ No newline at end of file