diff --git a/web-svelte/src/components/SciFi-Button.svelte b/web-svelte/src/components/SciFi-Button.svelte
index 35b219f..c9000f3 100644
--- a/web-svelte/src/components/SciFi-Button.svelte
+++ b/web-svelte/src/components/SciFi-Button.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 export let height: string|number = "50px";
 export let width: string|number = "unset";
+export let textColour: string = "#000000";
+export let hoverTextColour: string = "#000000";
 export let background: string = "#00aa00";
 export let hoverBackground: string = "transparent";
 export let classes: string = "";
@@ -39,7 +41,9 @@ $: if (typeof(width) == "string") {
 		--height: {height};
 		--width: {width};
 		--background-colour: {background};
-		--hover-background-colour: {hoverBackground};"
+		--hover-background-colour: {hoverBackground};
+		--text-colour: {textColour};
+		--hover-text-colour: {hoverTextColour};"
 	class="button-container {classes}"
 >
 	<button
@@ -61,12 +65,15 @@ div.button-container {
 
 $button-background: var(--background-colour);
 $hover-background: var(--hover-background-colour);
+$text-colour: var(--text-colour);
+$hover-text-colour: var(--hover-text-colour);
 
 button {
 	background: $button-background;
 	border-radius: 5px;
 	border: 3px solid $button-background;
 	box-sizing: border-box;
+	color: $text-colour;
 	font-family: 'Orbitron', sans-serif;
 	height: calc(100% - 20px);
 	margin: 10px;
@@ -84,7 +91,7 @@ button {
 	&:hover, &:focus {
 		background-color: $hover-background;
 		border-radius: 20px;
-		color: white;
+		color: $hover-text-colour;
 
 		&:before {
 			border-radius: min(