diff --git a/Webserver/src/routes/clock/+page.svelte b/Webserver/src/routes/clock/+page.svelte
index f2491d0..e908e50 100644
--- a/Webserver/src/routes/clock/+page.svelte
+++ b/Webserver/src/routes/clock/+page.svelte
@@ -38,18 +38,7 @@
 		speed: number;
 	}
 
-	// Data structure to keep track of params when displaying clock parts on matrix
-	interface DisplayParams {
-		x: string;
-		y: string;
-		r?: string;
-		position?: {
-			x: string;
-			y: string;
-		};
-	}
-
-	//.System variables
+	// System variables
 	let clockEnabled: boolean = false;
 	let matrix: Matrix;
 	const clock: Clock = {
@@ -64,7 +53,7 @@
 			minute: 0,
 			hour: 0
 		},
-		speed: 1.25
+		speed: 0.4
 	};
 	// Constant system values
 	const TWO_PI = 2 * Math.PI;
@@ -115,76 +104,61 @@
 		if (clockEnabled) await displayMatrixClock();
 	}
 
-	// Displays a clock part on the matrix display
-	async function displayClockPart(
-		part: 'body' | 'seconds' | 'minutes' | 'hours',
-		params: DisplayParams
-	) {
-		const fdata = new FormData();
-		if (part === 'body') {
-			// If part is 'body', append the 'r' parameter to the form data
-			fdata.append('endpoint', 'circle');
-			fdata.append('x', params.x);
-			fdata.append('y', params.y);
-			fdata.append('r', params.r!);
-		} else {
-			// If part is not 'body', convert the position coordinates to matrix coordinates and append to form data
-			const coords = coordsToMatrix(params.position!.x, params.position!.y);
-			fdata.append('endpoint', 'line');
-			fdata.append('x1', params.x);
-			fdata.append('y1', params.y);
-			fdata.append('x2', coords.x);
-			fdata.append('y2', coords.y);
-		}
-		return await redirectAPI({ fdata });
-	}
-
-	// Converts the x and y number values in the given positions object to strings
-	function convertNumbers(positions: { x: number; y: number }): { x: string; y: string } {
+	// Converts the x and y values from percentage to matrix coordinates
+	function coordsToMatrix(x: number, y: number): { x: number; y: number } {
+		// Calculate the matrix coordinates based on the percentage values of x and y
 		return {
-			x: positions.x.toString(),
-			y: positions.y.toString()
+			x: Math.round((Number(x) / 100) * matrix.width),
+			y: Math.round((Number(y) / 100) * matrix.height)
 		};
 	}
 
-	// Converts the x and y values from percentage to matrix coordinates
-	function coordsToMatrix(x: string, y: string): { x: string; y: string } {
-		// Calculate the matrix coordinates based on the percentage values of x and y
-		return convertNumbers({
-			x: Math.round((Number(x) / 100) * matrix.width),
-			y: Math.round((Number(y) / 100) * matrix.height)
-		});
+	// Function to generate line instructions with start and end points
+	function lineInstruction(
+		endpoint: string,
+		x1: number,
+		y1: number,
+		position: { x: number; y: number }
+	) {
+		// Calculate the matrix coordinates of the ending position
+		const coords = coordsToMatrix(position.x, position.y);
+		return {
+			endpoint,
+			x1,
+			y1,
+			x2: coords.x,
+			y2: coords.y
+		};
 	}
 
-	// Displays the clock on the matrix display, converting number values to strings where necessary
+	// Displays the clock on the matrix display
 	async function displayMatrixClock() {
-		const middle = coordsToMatrix('50', '50');
-		// Display the body of the clock
-		await displayClockPart('body', {
-			x: middle.x,
-			y: middle.y,
-			r: ((clock.body / 100) * matrix.height).toFixed(0)
-		});
-		// Display the seconds of the clock, converting position coordinates to strings
-		await displayClockPart('seconds', {
-			x: middle.x,
-			y: middle.y,
-			position: convertNumbers(clock.positions?.second!)
-		});
-		// Display the minutes of the clock, converting position coordinates to strings
-		await displayClockPart('minutes', {
-			x: middle.x,
-			y: middle.y,
-			position: convertNumbers(clock.positions?.minute!)
-		});
-		// Display the hours of the clock, converting position coordinates to strings
-		await displayClockPart('hours', {
-			x: middle.x,
-			y: middle.y,
-			position: convertNumbers(clock.positions?.hour!)
-		});
-		// Update the clock by fetching the update API endpoint
-		await fetch('/api/redirect?endpoint=update');
+		// Calculate the middle coordinates of the matrix
+		const middle = coordsToMatrix(50, 50);
+
+		// Array of instructions for drawing lines and shapes
+		const instructions = [
+			lineInstruction('line', middle.x, middle.y, clock.positions?.second!),
+			lineInstruction('line', middle.x, middle.y, clock.positions?.minute!),
+			lineInstruction('line', middle.x, middle.y, clock.positions?.hour!),
+			{
+				endpoint: 'circle',
+				x: middle.x,
+				y: middle.y,
+				r: ((clock.body / 100) * matrix.height).toFixed(0) // Calculate circle radius based on clock body size
+			},
+			{
+				endpoint: 'update' // Update instruction for the clock display
+			}
+		];
+
+		// Create a new FormData object to send instructions to the server
+		const fdata = new FormData();
+		fdata.append('endpoint', 'instructions');
+		fdata.append('instructions', JSON.stringify(instructions));
+
+		// Send instructions to the server for clock display
+		await redirectAPI({ fdata });
 	}
 
 	onMount(() => {