diff --git a/src/lib/devices/CreateDevice.svelte b/src/lib/devices/CreateDevice.svelte
new file mode 100644
index 0000000..21222dc
--- /dev/null
+++ b/src/lib/devices/CreateDevice.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { alert } from '$lib/common/stores.js';
+
+  // whether the new card html element is visible
+	let newDeviceCardVisible = false;
+</script>
+
+<!-- html -->
+<div in:fade class="p-4"><button on:click={() => (newDeviceCardVisible = true)} class="btn-primary bg-teal-700 hover:bg-teal-900 " type="button">+ New Device</button></div>
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index 3485924..248dfb0 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -1,6 +1,7 @@
 <!-- typescript -->
 <script lang="ts">
 	import DeviceCard from '$lib/devices/DeviceCard.svelte';
+	import CreateDevice from '$lib/devices/CreateDevice.svelte';
 	import { onMount } from 'svelte';
 	import { fade } from 'svelte/transition';
 
@@ -38,6 +39,7 @@
 					// return the api data
 					response.json().then((data) => {
 						headscaleDevices = data.machines;
+						console.log(headscaleDevices);
 					});
 				} else {
 					headscaleAPITest = 'failed';
@@ -54,11 +56,12 @@
 
 <!-- html -->
 {#if componentLoaded}
-	<div in:fade class="px-4 py-4">
-		<h1 class="text-2xl bold green-400 mb-4">Device View</h1>
+	<div in:fade class="px-4 pt-4">
+		<h1 class="text-2xl bold">Device View</h1>
 	</div>
 	{#if headscaleAPITest === 'succeeded'}
 		<!-- instantiate device based components -->
+		<CreateDevice/>
 		{#each headscaleDevices as device}
 			<DeviceCard device={device} />
 		{/each}