diff --git a/popup/popup.css b/popup/popup.css
index f17d38f..8e5cf6a 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -225,11 +225,17 @@ button.danger:hover {
 
 .color-row {
   display: flex;
-  gap: 12px;
+  gap: 24px;
   align-items: center;
   margin-bottom: 8px;
 }
 
+.color-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
 #wordList {
   margin-top: 8px;
   position: relative;
diff --git a/popup/popup.html b/popup/popup.html
index 62ccc52..8ff2037 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -35,8 +35,14 @@
       <h2><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h2>
       <label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName" /></label>
       <div class="color-row">
-        <label><span data-i18n="background">Background:</span> <input type="color" id="listBg" /></label>
-        <label><span data-i18n="foreground">Foreground:</span> <input type="color" id="listFg" /></label>
+        <div class="color-label">
+          <span data-i18n="background">Background:</span>
+          <input type="color" id="listBg" />
+        </div>
+        <div class="color-label">
+          <span data-i18n="foreground">Foreground:</span>
+          <input type="color" id="listFg" />
+        </div>
       </div>
       <label>
         <span data-i18n="enable_highlight">Enable Highlighting</span>