diff --git a/src/popupChrome/popup.html b/src/popupChrome/popup.html
index 5ba67ca..ebb088b 100644
--- a/src/popupChrome/popup.html
+++ b/src/popupChrome/popup.html
@@ -119,7 +119,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             <input
                                 type="color"
                                 id="colorChoice1"
-                                class="w-7 h-5 p-0 border-0 rounded-full cursor-pointer" />
+                                class="w-7 h-5 rounded-none p-0 border-0 cursor-pointer" />
                             <input type="text" id="colorText1" class="border-0" />
                         </div>
                     </div>
@@ -189,7 +189,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             <input
                                 type="color"
                                 id="colorChoice2"
-                                class="w-7 h-5 p-0 border-0 rounded-full cursor-pointer" />
+                                class="w-7 h-5 rounded-none p-0 border-0 cursor-pointer" />
                             <input type="text" id="colorText2" class="border-0" />
                         </div>
                     </div>
@@ -249,7 +249,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             <input
                                 type="color"
                                 id="colorChoice3"
-                                class="w-7 h-5 p-0 border-0 rounded-full cursor-pointer" />
+                                class="w-7 h-5 rounded-none p-0 border-0 cursor-pointer" />
                             <input type="text" id="colorText3" class="border-0" />
                         </div>
                     </div>
diff --git a/src/popupFirefox/popup.html b/src/popupFirefox/popup.html
index f921f52..9f85de8 100644
--- a/src/popupFirefox/popup.html
+++ b/src/popupFirefox/popup.html
@@ -118,7 +118,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             class="w-full border border-black rounded-md p-1 box-content flex items-center gap-2">
                             <span
                                 id="colorPreview1"
-                                class="w-5 h-5 p-0 border rounded-full cursor-pointer border-black"></span>
+                                class="w-6 h-3.5 p-0 border rounded-sm cursor-pointer border-black"></span>
                             <input type="text" id="colorText1" class="border-0" />
                         </div>
                     </div>
@@ -198,7 +198,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             class="w-full border border-black rounded-md p-1 box-content flex items-center gap-2">
                             <span
                                 id="colorPreview2"
-                                class="w-5 h-5 p-0 border rounded-full cursor-pointer border-black"></span>
+                                class="w-6 h-3.5 p-0 border rounded-sm cursor-pointer border-black"></span>
                             <input type="text" id="colorText2" class="border-0" />
                         </div>
                     </div>
@@ -266,7 +266,7 @@ <h2 id="tabTitle" data-i18n="title" class="text-lg font-bold"></h2>
                             class="w-full border border-black rounded-md p-1 box-content flex items-center gap-2">
                             <span
                                 id="colorPreview3"
-                                class="w-5 h-5 p-0 border rounded-full cursor-pointer border-black"></span>
+                                class="w-6 h-3.5 p-0 border rounded-sm cursor-pointer border-black"></span>
                             <input type="text" id="colorText3" class="border-0" />
                         </div>
                     </div>