diff --git a/src/lib/devices/CreateDevice.svelte b/src/lib/devices/CreateDevice.svelte
index c4eb26d..cabdca2 100644
--- a/src/lib/devices/CreateDevice.svelte
+++ b/src/lib/devices/CreateDevice.svelte
@@ -6,7 +6,7 @@
 	import { base } from '$app/paths';
 
 	// whether the new card html element is visible
-	let newDeviceCardVisible = false;
+	export let newDeviceCardVisible = false;
 	let newDeviceForm: HTMLFormElement;
 	let newDeviceKey = '';
 	let selectedUser = '';
@@ -39,14 +39,6 @@
 </script>
 
 <!-- html -->
-<!-- device creation visibility button -->
-<div class="p-4">
-	{#if newDeviceCardVisible == false}
-		<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button>
-	{:else}
-		<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New Device</button>
-	{/if}
-</div>
 
 {#if newDeviceCardVisible == true}
 	<div in:fade out:fade={{ duration: newDeviceCardVisible ? 0 : 500 }} class="p-2 max-w-screen-lg border border-dashed border-base-content mx-4 rounded-md text-sm text-base-content shadow mb-10">
diff --git a/src/lib/devices/DeviceCard.svelte b/src/lib/devices/DeviceCard.svelte
index 6e808f7..d42438b 100644
--- a/src/lib/devices/DeviceCard.svelte
+++ b/src/lib/devices/DeviceCard.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Device } from '$lib/common/classes';
-	import { fade, slide } from 'svelte/transition';
+	import { slide } from 'svelte/transition';
 	import DeviceRoutes from './DeviceCard/DeviceRoutes.svelte';
-import DeviceTags from './DeviceCard/DeviceTags.svelte';
+	import DeviceTags from './DeviceCard/DeviceTags.svelte';
 	import MoveDevice from './DeviceCard/MoveDevice.svelte';
 	import RemoveDevice from './DeviceCard/RemoveDevice.svelte';
 	import RenameDevice from './DeviceCard/RenameDevice.svelte';
@@ -19,10 +19,8 @@ import DeviceTags from './DeviceCard/DeviceTags.svelte';
 				{device.id}: {device.givenName}
 			{/if}
 			<RenameDevice bind:cardEditing {device} />
-			<DeviceTags {device}></DeviceTags>
-			
-			</span
-		>
+			<DeviceTags {device} />
+		</span>
 		<div class="grow min-w-fit">
 			<RemoveDevice {device} />
 			<button type="button">
diff --git a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
index e761b14..3c1e96f 100644
--- a/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
+++ b/src/lib/devices/DeviceCard/DeviceTags/NewDeviceTag.svelte
@@ -11,24 +11,25 @@
 	function updateTagsAction() {
 		let tagList = device.forcedTags;
 		tagList.push(`tag:${newTag}`);
-    // remove duplicates
-    tagList = [...new Set(tagList)];
+		// remove duplicates
+		tagList = [...new Set(tagList)];
 
-		updateTags(device.id, tagList).then((response) => {
-      editingTag = false;
-      newTag = '';
-			// refresh devices after editing
-			getDevices()
-				.then((devices) => {
-					$headscaleDeviceStore = devices;
-				})
-				.catch((error) => {
-					$alertStore = error;
-				});
-		})
-    .catch((error) => {
-      $alertStore = error;
-    });
+		updateTags(device.id, tagList)
+			.then((response) => {
+				editingTag = false;
+				newTag = '';
+				// refresh devices after editing
+				getDevices()
+					.then((devices) => {
+						$headscaleDeviceStore = devices;
+					})
+					.catch((error) => {
+						$alertStore = error;
+					});
+			})
+			.catch((error) => {
+				$alertStore = error;
+			});
 	}
 </script>
 
@@ -42,9 +43,7 @@
 		<span>+ tag</span>
 	{:else}
 		<!-- svelte-ignore a11y-autofocus -->
-		<form
-			on:submit|preventDefault={updateTagsAction}
-		>
+		<form on:submit|preventDefault={updateTagsAction}>
 			<input bind:value={newTag} autofocus required class="bg-primary w-16" />
 			<button in:fade class="ml-1">
 				<!-- checkmark symbol -->
@@ -58,7 +57,7 @@
 				in:fade
 				on:click|stopPropagation={() => {
 					editingTag = false;
-          newTag = '';
+					newTag = '';
 				}}
 				class="ml-1"
 				><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
diff --git a/src/lib/devices/SortDevices.svelte b/src/lib/devices/SortDevices.svelte
index 283e8e9..e6e42ce 100644
--- a/src/lib/devices/SortDevices.svelte
+++ b/src/lib/devices/SortDevices.svelte
@@ -1,5 +1,5 @@
-<div class="btn-group">
-  <button class="btn btn-sm btn-active">ID</button>
-  <button class="btn btn-sm capitalize">Device Name</button>
-  <button class="btn btn-sm capitalize">Last Seen</button>
-</div>
\ No newline at end of file
+<span class="btn-group">
+	<button class="btn btn-sm btn-active">ID</button>
+	<button class="btn btn-sm capitalize">Device Name</button>
+	<button class="btn btn-sm capitalize">Last Seen</button>
+</span>
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index fae7a8e..55f6b11 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -9,6 +9,8 @@
 	import { getUsers, getDevices } from '$lib/common/apiFunctions.svelte';
 	import { base } from '$app/paths';
 
+	let newDeviceCardVisible = false;
+
 	//
 	// Component Variables
 	//
@@ -50,7 +52,22 @@
 		</div>
 		{#if $apiTestStore === 'succeeded'}
 			<!-- instantiate device based components -->
-			<table><tr><td><CreateDevice /></td><td><SortDevices /></td></tr></table>
+			<table>
+				<tr
+					><td
+						><!-- device creation visibility button -->
+						<div class="p-4">
+							{#if newDeviceCardVisible == false}
+								<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-sm capitalize" type="button">+ New Device</button>
+							{:else}
+								<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-sm capitalize" type="button">- Hide New Device</button>
+							{/if}
+						</div></td
+					><td><SortDevices /></td></tr
+				>
+			</table>
+
+			<CreateDevice bind:newDeviceCardVisible />
 			{#each $headscaleDeviceStore as device}
 				<DeviceCard {device} />
 			{/each}