diff --git a/assets/js/app.js b/assets/js/app.js
index 335837e..152b6f5 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -25,11 +25,29 @@ import {LiveSocket} from "phoenix_live_view"
 import {hooks as colocatedHooks} from "phoenix-colocated/simpleshop_theme"
 import topbar from "../vendor/topbar"
 
+// Hook to sync color picker and text input
+const ColorSync = {
+  mounted() {
+    const picker = this.el.querySelector('input[type="color"]')
+    const text = this.el.querySelector('input[type="text"]')
+
+    if (picker && text) {
+      picker.addEventListener('input', (e) => {
+        text.value = e.target.value
+      })
+
+      text.addEventListener('input', (e) => {
+        picker.value = e.target.value
+      })
+    }
+  }
+}
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks},
+  hooks: {...colocatedHooks, ColorSync},
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.html.heex b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
index 00f57f2..a592860 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
@@ -130,22 +130,22 @@
         <!-- Colors -->
         <div>
           <h3 class="font-semibold mb-3">Accent Color</h3>
-          <form phx-change="update_color" phx-value-field="accent_color">
+          <form id="accent-color-form" phx-change="update_color" phx-value-field="accent_color" phx-hook="ColorSync">
             <div class="flex gap-2 items-center">
               <input
                 type="color"
+                id="accent-color-picker"
                 name="value"
                 value={@theme_settings.accent_color}
                 class="w-12 h-10 rounded cursor-pointer"
-                phx-debounce="300"
               />
               <input
                 type="text"
+                id="accent-color-text"
                 name="value"
                 value={@theme_settings.accent_color}
                 class="input input-bordered input-sm flex-1 font-mono text-xs"
                 placeholder="#000000"
-                phx-debounce="blur"
               />
             </div>
           </form>