diff --git a/WEBUI_SRC/package-lock.json b/WEBUI_SRC/package-lock.json
index 9f2f606..9ad399e 100644
--- a/WEBUI_SRC/package-lock.json
+++ b/WEBUI_SRC/package-lock.json
@@ -8,6 +8,7 @@
       "name": "webui",
       "version": "0.0.1",
       "dependencies": {
+        "@jaames/iro": "^5.5.2",
         "@quasar/extras": "^1.16.4",
         "axios": "^1.2.1",
         "js-sha256": "^0.9.0",
@@ -186,6 +187,20 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@irojs/iro-core": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@irojs/iro-core/-/iro-core-1.2.1.tgz",
+      "integrity": "sha512-p2OvsBSSmidsDsTSkID6jEyXDF7lcyxPrkh3qBzasBZFpjkYd6kZ3yMWai3MlAaQ3F7li/Et7rSJVV09Fpei+A=="
+    },
+    "node_modules/@jaames/iro": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@jaames/iro/-/iro-5.5.2.tgz",
+      "integrity": "sha512-Fbi5U4Vdkw6UsF+R3oMlPONqkvUDMkwzh+mX718gQsDFt3+1r1jvGsrfCbedmXAAy0WsjDHOrefK0BkDk99TQg==",
+      "dependencies": {
+        "@irojs/iro-core": "^1.2.1",
+        "preact": "^10.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -3782,6 +3797,15 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/preact": {
+      "version": "10.20.2",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.20.2.tgz",
+      "integrity": "sha512-S1d1ernz3KQ+Y2awUxKakpfOg2CEmJmwOP+6igPx6dgr6pgDvenqYviyokWso2rhHvGtTlWWnJDa7RaPbQerTg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/WEBUI_SRC/package.json b/WEBUI_SRC/package.json
index 7b93511..bcf72c0 100644
--- a/WEBUI_SRC/package.json
+++ b/WEBUI_SRC/package.json
@@ -13,6 +13,7 @@
     "build": "quasar build"
   },
   "dependencies": {
+    "@jaames/iro": "^5.5.2",
     "@quasar/extras": "^1.16.4",
     "axios": "^1.2.1",
     "js-sha256": "^0.9.0",
diff --git a/WEBUI_SRC/src/components/ColorCard.vue b/WEBUI_SRC/src/components/ColorCard.vue
index 4207e70..fa5d6df 100644
--- a/WEBUI_SRC/src/components/ColorCard.vue
+++ b/WEBUI_SRC/src/components/ColorCard.vue
@@ -7,6 +7,7 @@
       <div class="q-pa-md">
         <q-color v-model="hex" :format-model="rgb" @change="UpdateColor" />
       </div>
+      <div class="colorPicker"></div>
     </q-card-section>
   </q-card>
 </template>
@@ -14,7 +15,9 @@
 <script setup>
 import { computed, onUnmounted, reactive, onMounted, ref } from "vue";
 import { PostData } from "components/webguicomp/network";
+import iro from '@jaames/iro';
 
+var colorPicker;
 
 defineOptions({
   name: 'ColorCard'
@@ -36,6 +39,22 @@ function UpdateColor() {
   }
 }
 
+onMounted(() => {
+  colorPicker = new iro.ColorPicker(".colorPicker", {
+    width: 280,
+    color: "rgb(255, 0, 0)",
+    borderWidth: 1,
+    borderColor: "#fff",
+  });
+  colorPicker.on('color:change', function (color) {
+    // log the current color as a HEX string
+    hex.value = color.hexString;
+    UpdateColor();
+  });
+})
+
+
+
 const data = reactive(init);
 PostData(data, 2, 0, null);
 
diff --git a/dependencies.lock b/dependencies.lock
index 50d3085..9e49ac4 100644
--- a/dependencies.lock
+++ b/dependencies.lock
@@ -11,6 +11,12 @@ dependencies:
       service_url: https://api.components.espressif.com/
       type: service
     version: 2.5.3
+  espressif/nghttp:
+    component_hash: 5e55c2fc982f7ddd257818be86f50d60705f3fd3a39d709c399434e81d458e1e
+    source:
+      service_url: https://api.components.espressif.com/
+      type: service
+    version: 1.58.0
   idf:
     component_hash: null
     source:
@@ -30,6 +36,6 @@ dependencies:
       path: .
       type: git
     version: b42825192c6455569f1a047b21140d6d1fe5e4ef
-manifest_hash: 4d4cb17db234a67f0eef5372d15aa4c784cf28c7cc9746b2442a01126ce5775c
+manifest_hash: ba8c8e1bf1956a4d7b47c774d3c07c50258ddf74d313aceb76bc97417ee1419f
 target: esp32s3
 version: 1.0.0
diff --git a/main/idf_component.yml b/main/idf_component.yml
index e36d308..ca272a0 100644
--- a/main/idf_component.yml
+++ b/main/idf_component.yml
@@ -1,5 +1,6 @@
 ## IDF Component Manager Manifest File
 dependencies:
+  espressif/nghttp: "^1.58.0"
   espressif/led_strip: "^2.5.3"
   userbogd/ttn-esp32:
     git: https://github.com/userbogd/ttn-esp32.git