diff --git a/src/main/backend/nanodevices.ts b/src/main/backend/nanodevices.ts
index 2de435a..919ffec 100644
--- a/src/main/backend/nanodevices.ts
+++ b/src/main/backend/nanodevices.ts
@@ -45,7 +45,7 @@ class NanoDevices extends EventEmitter {
     })
   }
 
-  _handle_data(connected_port, data) {
+  _handle_data(connected_port, data, serialNumber) {
     connected_port.data += data
     const lines = connected_port.data.split('\n')
     if (lines.length > 1) {
@@ -53,7 +53,7 @@ class NanoDevices extends EventEmitter {
         if (lines[i].length > 0) {
           if (lines[i].startsWith('{'))
             // if its a json object
-            this.emit('nanodevices:update', connected_port.port.serialNumber, lines[i])
+            this.emit('nanodevices:update', serialNumber, lines[i])
           else console.log('Device: ' + lines[i]) // otherwise just log it
         }
       }
@@ -110,7 +110,7 @@ class NanoDevices extends EventEmitter {
         })
         port.on('data', (data) => {
           const connected_port = this.connected_nano_devices[nano_device.serialNumber!]
-          this._handle_data(connected_port, data)
+          this._handle_data(connected_port, data, nano_device.serialNumber)
         })
         port.open((err) => {
           if (err) {
diff --git a/src/main/index.ts b/src/main/index.ts
index 8ab5152..df352fe 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -97,8 +97,8 @@ app.whenReady().then(() => {
 
   ipcMain.handle('nanodevices:list_devices', () => nanodevices.list_devices())
   ipcMain.handle('nanodevices:connect', (event, deviceid) => nanodevices.connect(deviceid))
-  ipcMain.handle('nanodevices:disconnect', nanodevices.disconnect)
-  ipcMain.handle('nanodevices:send', nanodevices.send)
+  ipcMain.handle('nanodevices:disconnect', () => nanodevices.disconnect)
+  ipcMain.handle('nanodevices:send', (event, ...data) => nanodevices.send(data[0], data[1]))
   const mainWindow = createMainWindow()
   ipcMain.on('electron:minimizeWindow', () => mainWindow.minimize())
   ipcMain.on('electron:toggleMaximizeWindow', () => {
diff --git a/src/renderer/src/components/config/keys/KeyLightConfig.vue b/src/renderer/src/components/config/keys/KeyLightConfig.vue
index 2bde622..d56d70d 100644
--- a/src/renderer/src/components/config/keys/KeyLightConfig.vue
+++ b/src/renderer/src/components/config/keys/KeyLightConfig.vue
@@ -8,7 +8,10 @@ import { Palette } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
 import PaletteInput from '@renderer/components/common/PaletteInput.vue'
 import Color from 'color'
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+import { useStore } from '@renderer/store'
+
+const store = useStore()
 
 const keyColors = ref({
   default: {
@@ -20,4 +23,13 @@ const keyColors = ref({
     color: Color('#d0078f')
   }
 })
+
+watch(
+  keyColors,
+  (newVal) => {
+    store.setKeyDefaultColor(newVal.default.color)
+    store.setKeyPressedColor(newVal.pressed.color)
+  },
+  { deep: true }
+)
 </script>
diff --git a/src/renderer/src/data/hwProfile.json b/src/renderer/src/data/hwProfile.json
new file mode 100644
index 0000000..7ed001a
--- /dev/null
+++ b/src/renderer/src/data/hwProfile.json
@@ -0,0 +1,35 @@
+{
+  "id": 0,
+  "name": "Default Profile",
+  "desc": "",
+  "profileTag": "",
+  "profileType": 0,
+  "profile_type": 0,
+  "position_num": 12,
+  "attract_distance": 20,
+  "feedback_strength": 6,
+  "bounce_strength": 3,
+  "haptic_click_strength": 6,
+  "output_ramp": 10000,
+  "ledEnable": true,
+  "ledBrightness": 100,
+  "ledMode": 0,
+  "pointer": 16777215,
+  "primary": 32768,
+  "secondary": 16753920,
+  "buttonAIdle": 16562691,
+  "buttonBIdle": 16562691,
+  "buttonCIdle": 16562691,
+  "buttonDIdle": 16562691,
+  "buttonAPress": 16516075,
+  "buttonBPress": 16516075,
+  "buttonCPress": 16516075,
+  "buttonDPress": 16516075,
+  "internalMacro": false,
+  "knobMap": "1016001255",
+  "switchA": "1016001255",
+  "switchB": "214567",
+  "switchC": "0",
+  "switchD": "0",
+  "guiEnable": false
+}
diff --git a/src/renderer/src/store.ts b/src/renderer/src/store.ts
index a09d963..dbe5fb8 100644
--- a/src/renderer/src/store.ts
+++ b/src/renderer/src/store.ts
@@ -12,6 +12,8 @@ import mockData from '@renderer/data/nanoConfig.json'
 
 // const ajv = new Ajv() // see below
 
+const { nanoDevicesAPI } = window
+
 export const useStore = defineStore('main', {
   state: () => {
     return {
@@ -202,6 +204,18 @@ export const useStore = defineStore('main', {
     cycleScreenOrientation() {
       this.screenOrientation = (this.screenOrientation + 90) % 360
     },
+    setKeyDefaultColor(color) {
+      // this.selectedProfile.keys[this.selectedKey].default = color
+      const props = {}
+      props[`button${this.selectedKey.toUpperCase()}Idle`] = color.rgbNumber()
+      nanoDevicesAPI.send(this.connectedId, { p: { name: 'Default Profile', ...props } })
+    },
+    setKeyPressedColor(color) {
+      // this.selectedProfile.keys[this.selectedKey].pressed = color
+      const props = {}
+      props[`button${this.selectedKey.toUpperCase()}Press`] = color.rgbNumber()
+      nanoDevicesAPI.send(this.connectedId, { p: { name: 'Default Profile', ...props } })
+    },
 
     // devices, device attachment, connection, and disconnection
     init_devices(ids) {
@@ -244,7 +258,7 @@ export const useStore = defineStore('main', {
       this.connectedId = deviceid
       // TODO load profiles from device
       // nanoDevicesAPI.send(deviceid, { profiles: "#all" }) // request profiles
-      // "Default Profile", for now, is the only profile after the device 
+      // "Default Profile", for now, is the only profile after the device
       // starts up, so it is also the current (eg. 'selected') profile
       // nanoDevicesAPI.send(deviceid, { p: "Default Profile" }) // request Default Profile