diff --git a/src/lib/devices/SortDevices.svelte b/src/lib/devices/SortDevices.svelte
index e6e42ce..a177fdb 100644
--- a/src/lib/devices/SortDevices.svelte
+++ b/src/lib/devices/SortDevices.svelte
@@ -1,5 +1,5 @@
 <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>
+	<button class="btn btn-xs btn-active">ID</button>
+	<button class="btn btn-xs capitalize">Device Name</button>
+	<button class="btn btn-xs capitalize">Last Seen</button>
 </span>
diff --git a/src/routes/devices.html.svelte b/src/routes/devices.html.svelte
index 55f6b11..223db18 100644
--- a/src/routes/devices.html.svelte
+++ b/src/routes/devices.html.svelte
@@ -58,9 +58,9 @@
 						><!-- 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>
+								<button on:click={() => (newDeviceCardVisible = true)} class="btn btn-primary btn-xs 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>
+								<button on:click={() => (newDeviceCardVisible = false)} class="btn btn-secondary btn-xs capitalize" type="button">- Hide New Device</button>
 							{/if}
 						</div></td
 					><td><SortDevices /></td></tr