Update script.js

script.js

@@ -205,11 +205,14 @@ function addColumn() {
     const container = document.getElementById('columnInputs');
     const div = document.createElement('div');
     div.innerHTML = `
-        <div class="flex space-x-2">
-            <input type="text" class="column-input flex-1 px-3 py-2 border rounded-md" placeholder="Column name">
-            <button onclick="removeColumn(this)" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">X</button>
-        </div>
-    `;
+ <div class="flex space-x-3 sm:space-x-3">
+                    <input type="text" class="column-input input-field flex-1 px-3 sm:px-4 py-2 rounded-lg" placeholder="Column name (e.g., Category)" value="meaning">
+                    <button onclick="removeColumn(this)" class="delete-btn btn bg-red-600 text-white p-2 rounded-lg">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                    </button>
+                </div> `;
     container.appendChild(div);
     updatePreviews();
 }