diff --git a/src/lib/common/classes.ts b/src/lib/common/classes.ts
index e6b5dd0..5615284 100644
--- a/src/lib/common/classes.ts
+++ b/src/lib/common/classes.ts
@@ -7,6 +7,9 @@ export class Device {
 	public forcedTags: string[] = [];
 	public validTags: string[] = [];
 	public invalidTags: string[] = [];
+	public approvedRoutes: string[] = [];
+	public availableRoutes: string[] = [];
+	public subnetRoutes: string[] = [];
 	public user: { name: string } = { name: '' };
 	public online?: boolean;
 
diff --git a/src/lib/devices/DeviceCard/DeviceRoutes.svelte b/src/lib/devices/DeviceCard/DeviceRoutes.svelte
index 59f606f..5e37eb4 100644
--- a/src/lib/devices/DeviceCard/DeviceRoutes.svelte
+++ b/src/lib/devices/DeviceCard/DeviceRoutes.svelte
@@ -1,67 +1,21 @@
 <script lang="ts">
-	import { getDeviceRoutes, modifyDeviceRoutes } from './DeviceRoutesAPI.svelte';
-	import { Device, Route } from '$lib/common/classes';
-	import { onMount } from 'svelte';
+	import { modifyDeviceRoutes } from './DeviceRoutes/DeviceRouteAPI.svelte';
+	import { Device } from '$lib/common/classes';
+	import DeviceRoute from './DeviceRoutes/DeviceRoute.svelte';
+	import { getDevices } from '$lib/common/apiFunctions.svelte';
 	import { alertStore } from '$lib/common/stores';
 
 	export let device = new Device();
-	let routesList: Route[] = [];
-	let routeID = 0;
 
-	onMount(async () => {
-		getDeviceRoutesAction();
-	});
 
-	function getDeviceRoutesAction() {
-		getDeviceRoutes(device.id)
-			.then((routes) => {
-				routesList = routes;
-			})
-			.catch((error) => {
-				$alertStore = error;
-			});
-	}
-
-	function modifyDeviceRoutesAction() {
-		modifyDeviceRoutes(device.id, routesList, routeID)
-			.then((response) => {
-				getDeviceRoutesAction();
-			})
-			.catch((error) => {
-				$alertStore = error;
-			});
-	}
 </script>
 
 <th>Device Routes</th>
 <td
 	><ul class="list-disc list-inside">
-		{#each routesList as route, index}
+		{#each device.availableRoutes as route}
 			<li>
-				{route.prefix}
-				{#if route.enabled}
-					<button
-						on:click={() => {
-							routesList[index].enabled = false;
-							routeID = route.id;
-							modifyDeviceRoutesAction();
-						}}
-						type="button"
-						class="btn btn-xs tooltip capitalize bg-success text-success-content mx-1"
-						data-tip="press to disable route">active</button
-					>
-				{:else}
-					<button
-						on:click={() => {
-							routesList[index].enabled = true;
-							routeID = route.id
-							modifyDeviceRoutesAction();
-						}}
-						type="button"
-						class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1"
-						data-tip="press to enable route">pending</button
-					>
-				{/if}
+				<DeviceRoute {route} {device}></DeviceRoute>
 			</li>
 		{/each}
 	</ul></td
diff --git a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte
new file mode 100644
index 0000000..9d0b73d
--- /dev/null
+++ b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRoute.svelte
@@ -0,0 +1,41 @@
+<script>
+	import { getDevices } from '$lib/common/apiFunctions.svelte';
+    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();
+
+	let routeDisabled = false;
+	function approveRouteAction() {
+		approveDeviceRoute(device.id, [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>
+{:else}
+	<button
+		on:click={() => {
+			routeDisabled = true;
+			approveRouteAction();
+			routeDisabled = false;
+		}}
+		type="button"
+		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}
+{#if device.subnetRoutes.includes(route)}
+	<button type="button" class="btn btn-xs tooltip capitalize bg-secondary text-secondary-content mx-1">subnet</button>
+{/if}
diff --git a/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte
new file mode 100644
index 0000000..3c1c4e6
--- /dev/null
+++ b/src/lib/devices/DeviceCard/DeviceRoutes/DeviceRouteAPI.svelte
@@ -0,0 +1,35 @@
+<script context="module" lang="ts">
+	import type { Route } from '$lib/common/classes';
+
+	export async function approveDeviceRoute(deviceID: string, routes: [string]): Promise<any> {
+		// variables in local storage
+		let headscaleURL = localStorage.getItem('headscaleURL') || '';
+		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
+
+		let endpointURL = `/api/v1/node/${deviceID}/approve_routes`;
+
+		await fetch(headscaleURL + endpointURL, {
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+				Authorization: `Bearer ${headscaleAPIKey}`
+			},
+			body: JSON.stringify({
+				routes: routes
+			})
+		})
+			.then((response) => {
+				if (response.ok) {
+					// return the api data
+					return response;
+				} else {
+					return response.text().then((text) => {
+						throw JSON.parse(text).message;
+					});
+				}
+			})
+			.catch((error) => {
+				throw error;
+			});
+	}
+</script>
diff --git a/src/lib/devices/DeviceCard/DeviceRoutesAPI.svelte b/src/lib/devices/DeviceCard/DeviceRoutesAPI.svelte
deleted file mode 100644
index 4ffff36..0000000
--- a/src/lib/devices/DeviceCard/DeviceRoutesAPI.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script context="module" lang="ts">
-	import type { Route } from '$lib/common/classes';
-
-	export async function getDeviceRoutes(deviceID: string): Promise<Route[]> {
-
-		// variables in local storage
-		let headscaleURL = localStorage.getItem('headscaleURL') || '';
-		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
-
-		// endpoint url for getting users
-		let endpointURL = `/api/v1/node/${deviceID}/routes`;
-
-		//returning variables
-		let headscaleRouteList: Route[] = [];
-		let headscaleDeviceResponse: Response = new Response();
-
-		await fetch(headscaleURL + endpointURL, {
-			method: 'GET',
-			headers: {
-				Accept: 'application/json',
-				Authorization: `Bearer ${headscaleAPIKey}`
-			}
-		})
-			.then((response) => {
-				if (response.ok) {
-					// return the api data
-					headscaleDeviceResponse = response;
-				} else {
-					return response.text().then((text) => {
-						throw JSON.parse(text).message;
-					});
-				}
-			})
-			.catch((error) => {
-				throw error;
-			});
-
-		await headscaleDeviceResponse.json().then((data) => {
-			headscaleRouteList = data.routes;
-		});
-		return headscaleRouteList;
-	}
-
-	export async function modifyDeviceRoutes(deviceID: string, routeList: Route[], routeID: number): Promise<any> {
-		// variables in local storage
-		let headscaleURL = localStorage.getItem('headscaleURL') || '';
-		let headscaleAPIKey = localStorage.getItem('headscaleAPIKey') || '';
-		let endpointURL = '';
-
-		routeList.forEach((route) => {
-			if (route.id == routeID) {
-				endpointURL = `/api/v1/routes/${routeID}/`;
-				if (route.enabled) {
-					endpointURL += 'enable';
-				} else {
-					endpointURL += 'disable';
-				}
-			}
-		});
-		//returning variables
-		let headscaleDeviceResponse: Response = new Response();
-
-		await fetch(headscaleURL + endpointURL, {
-			method: 'POST',
-			headers: {
-				Accept: 'application/json',
-				Authorization: `Bearer ${headscaleAPIKey}`
-			}
-		})
-			.then((response) => {
-				if (response.ok) {
-					// return the api data
-					headscaleDeviceResponse = response;
-				} else {
-					return response.text().then((text) => {
-						throw JSON.parse(text).message;
-					});
-				}
-			})
-			.catch((error) => {
-				throw error;
-			});
-	}
-</script>