diff --git a/web-svelte/src/components/Board.svelte b/web-svelte/src/components/Board.svelte
index 35d346d..768cc3c 100644
--- a/web-svelte/src/components/Board.svelte
+++ b/web-svelte/src/components/Board.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import Spaceship from "./icons/spaceship.svelte";
+import Warpgate from "./icons/warpgate.svelte";
 import Hexagon from "./Hexagon.svelte";
 import { board } from "../stores";
 
@@ -74,7 +75,9 @@ board[53] = {colour: {name: "Magenta",hex: `#f9c80e`},name: `Oliver`,ship: {id:
 			{/if}
 		</Hexagon>
 	</div>
-	<div class="warp-gate inner-grid"></div>
+	<div class="warp-gate inner-grid">
+		<Warpgate></Warpgate>
+	</div>
 	{#each Array(5) as _, row}
 	<div class="main-row {row % 2 == 1 ? `row-reverse` : ``}">
 		{#each Array(10) as _, col}
@@ -179,12 +182,9 @@ main {
 	grid-row: 4 / 6;
 }
 .warp-gate {
-	background-image: url(/assets/nether_portal.png);
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
 	border-radius: 10px;
 	grid-column: -1 / -2;
 	grid-row: -1 / -2;
+	width: 100%;
 }
 </style>
\ No newline at end of file