diff --git a/src/api/hardware-keyboardio-preonic/components/Keymap.js b/src/api/hardware-keyboardio-preonic/components/Keymap.js
index 85022d23a..756ce89f6 100644
--- a/src/api/hardware-keyboardio-preonic/components/Keymap.js
+++ b/src/api/hardware-keyboardio-preonic/components/Keymap.js
@@ -99,9 +99,9 @@ const Keymap = (props) => {
     <svg
       viewBox="0 0 855 400"
       xmlns="http://www.w3.org/2000/svg"
-      preserveAspectRatio=""
+      preserveAspectRatio="xMinYMin meet"
       style={{
-        maxHeight: "150%",
+        maxHeight: maxHeight || "100%",
         background: `url(${Preonic})`,
         backgroundRepeat: "no-repeat",
         backgroundSize: "100%",
diff --git a/src/api/hardware/index.js b/src/api/hardware/index.js
index 4294407ce..8fb140bde 100644
--- a/src/api/hardware/index.js
+++ b/src/api/hardware/index.js
@@ -16,6 +16,7 @@
 
 import { Atreus2 } from "@api/hardware-keyboardio-atreus2";
 import { Model01, Model100 } from "@api/hardware-keyboardio-model01";
+import { Preonic } from "@api/hardware-keyboardio-preonic";
 
 // We have two arrays here: the `serial` array contains hardware descriptors
 // where a serial device is to be used in either application or bootloader mode.
@@ -30,9 +31,9 @@ import { Model01, Model100 } from "@api/hardware-keyboardio-model01";
 // but the application mode is, so it's in both.
 //
 export const Hardware = {
-  devices: [Model01, Model100, Atreus2],
+  devices: [Model01, Model100, Atreus2, Preonic],
   serial: [Model01, Model100, Atreus2],
-  nonSerial: [Model100],
+  nonSerial: [Model100, Preonic],
 };
 
 function getDeviceProtocol(vid, pid) {