diff --git a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte
index 9d0b73d..d454488 100644
--- a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte
+++ b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte
@@ -1,15 +1,15 @@
 <script>
 	import { getDevices } from '$lib/common/apiFunctions.svelte';
-    import { Device } from '$lib/common/classes';
+	import { Device } from '$lib/common/classes';
 	import { alertStore } from '$lib/common/stores';
 	import { approveDeviceRoute } from './DeviceRouteAPI.svelte';
 
-    export let route = ""
-    export let device = new Device();
+	export let route = '';
+	export let device = new Device();
 
 	let routeDisabled = false;
 	function approveRouteAction() {
-		approveDeviceRoute(device.id, [route])
+		approveDeviceRoute(device.id, [...device.approvedRoutes, route])
 			.then(() => {
 				// refresh users after editing
 				getDevices();
@@ -19,11 +19,29 @@
 			});
 	}
 
+	function removeRouteAction() {
+		approveDeviceRoute(device.id, device.approvedRoutes.filter((r) => r !== route))
+			.then(() => {
+				// refresh users after editing
+				getDevices();
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
+	}
 </script>
 
 {route}
 {#if device.approvedRoutes.includes(route)}
-	<button type="button" class="btn btn-xs tooltip capitalize bg-success text-success-content mx-1">active</button>
+	<button
+		on:click={() => {
+			routeDisabled = true;
+			removeRouteAction();
+			routeDisabled = false;
+		}}
+		type="button"
+		class="btn btn-xs tooltip capitalize bg-success text-success-content mx-1">active</button
+	>
 {:else}
 	<button
 		on:click={() => {
@@ -32,7 +50,8 @@
 			routeDisabled = false;
 		}}
 		type="button"
-		class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1" class:disabled={routeDisabled}
+		class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1"
+		class:disabled={routeDisabled}
 		data-tip="click to enable route">pending</button
 	>
 {/if}
diff --git a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte
index 23e24a6..1f28ecb 100644
--- a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte
+++ b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte
@@ -1,6 +1,6 @@
 <script context="module" lang="ts">
 
-	export async function approveDeviceRoute(deviceID: string, routes: [string]): Promise<any> {
+	export async function approveDeviceRoute(deviceID: string, routes: string[]): Promise<any> {
 		// variables in local storage
 		let headscaleURL = localStorage.getItem('headscaleURL') || '';
 		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';