diff --git a/web-svelte/src/components/Card.svelte b/web-svelte/src/components/Card.svelte
index f86a4ba..baef3fe 100644
--- a/web-svelte/src/components/Card.svelte
+++ b/web-svelte/src/components/Card.svelte
@@ -7,6 +7,7 @@ export let hidden: boolean = false;
 export let button: boolean = true;
 export let buttonText: string = "Use Fuel Card";
 export let card: FuelCard;
+export let half: boolean = false;
 
 const emit = createEventDispatcher();
 
@@ -27,7 +28,7 @@ if (card.type == "stationary") {
 
 
 <div
-	class="card {hidden ? 'hidden' : ''}"
+	class="card {hidden ? 'hidden' : ''} {half ? 'half' : ''}"
 	style="--colour: {colour};"
 	on:mouseenter="{() => emit(`hover`, { card, visible: true })}"
 	on:mouseleave="{() => emit(`hover`, { card, visible: false })}"
@@ -40,7 +41,7 @@ if (card.type == "stationary") {
 		<h1>{card.symbol}</h1>
 		{card.name}
 	</div>
-	{#if button}
+	{#if button && !half}
 	<div class="button-container">
 		<SciFiButton
 			classes="use-fuel-card-button"
@@ -99,7 +100,7 @@ $border-radius: 10px;
 		height: $size;
 
 		&.hexagon {
-			background-image: url(/public/assets/hexagon.svg);
+			background-image: url(/assets/hexagon.svg);
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: 85%;
@@ -107,7 +108,7 @@ $border-radius: 10px;
 		}
 
 		&.circle {
-			background-image: url(/public/assets/circle.svg);
+			background-image: url(/assets/circle.svg);
 			background-position: center;
 			background-repeat: no-repeat;
 			background-size: 85%;
@@ -125,5 +126,13 @@ $border-radius: 10px;
 		}
 	}
 
+	&.half {
+		padding-top: 15px;
+		padding-bottom: 15px;
+
+		> .main-content {
+			margin-bottom: unset;
+		}
+	}
 }
 </style>
\ No newline at end of file