diff --git a/Webserver/src/lib/client/matrix.ts b/Webserver/src/lib/client/matrix.ts
index 154ef3d..8914ce5 100644
--- a/Webserver/src/lib/client/matrix.ts
+++ b/Webserver/src/lib/client/matrix.ts
@@ -1,14 +1,16 @@
+// Interface to represent a singualr matrix cell object
 export interface MatrixCell {
-	xIndex: number;
-	yIndex: number;
+	x: number;
+	y: number;
 	color: string;
 }
 
+// Create a 2D array containing MatrixCell objects with bg-color: black
 export function initializeMatrix(scaling: number): MatrixCell[][] {
-	return Array.from({ length: 192 / scaling }, (_, yIndex) =>
+	return Array.from({ length: 192 / scaling }, (_, y) =>
 		Array.from(
 			{ length: 192 / scaling },
-			(_, xIndex) => ({ xIndex, yIndex, color: '000000' }) as MatrixCell
+			(_, x) => ({ x, y, color: '000000' }) as MatrixCell
 		)
 	) as MatrixCell[][];
 }
diff --git a/Webserver/src/routes/admin/+page.svelte b/Webserver/src/routes/admin/+page.svelte
index 5396ccc..b77507d 100644
--- a/Webserver/src/routes/admin/+page.svelte
+++ b/Webserver/src/routes/admin/+page.svelte
@@ -579,12 +579,12 @@
 			on:mouseup|preventDefault={() => (mousePressed = false)}
 		>
 			{#each matrix as row}
-				<tr data-y={row[0].yIndex}>
+				<tr data-y={row[0].y}>
 					{#each row as cell}
 						<td
-							data-x={cell.xIndex}
+							data-x={cell.x}
 							style="padding: {padding}rem; background-color: #{getContrastColor(cell.color)}"
-							class="{gamepad && gameCoords.x === cell.xIndex && gameCoords.y === cell.yIndex
+							class="{gamepad && gameCoords.x === cell.x && gameCoords.y === cell.y
 								? 'opacity-50'
 								: 'opacity-0'} hover:opacity-50"
 							on:mousemove={setMousePixel}