diff --git a/web-svelte/src/components/Card.svelte b/web-svelte/src/components/Card.svelte
index 26b6529..f86a4ba 100644
--- a/web-svelte/src/components/Card.svelte
+++ b/web-svelte/src/components/Card.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import SciFiButton from "./SciFi-Button.svelte";
+import { createEventDispatcher } from "svelte";
 import type { FuelCard } from "common";
 
 export let hidden: boolean = false;
@@ -7,6 +8,8 @@ export let button: boolean = true;
 export let buttonText: string = "Use Fuel Card";
 export let card: FuelCard;
 
+const emit = createEventDispatcher();
+
 let colour: string;
 let magnitudeShape = "";
 if (card.type == "stationary") {
@@ -26,6 +29,8 @@ if (card.type == "stationary") {
 <div
 	class="card {hidden ? 'hidden' : ''}"
 	style="--colour: {colour};"
+	on:mouseenter="{() => emit(`hover`, { card, visible: true })}"
+	on:mouseleave="{() => emit(`hover`, { card, visible: false })}"
 >
 	{#if !hidden}
 	<div class="magnitude {magnitudeShape}">