diff --git a/admin-spa/src/lib/api.ts b/admin-spa/src/lib/api.ts
index 1c54b59..785f50c 100644
--- a/admin-spa/src/lib/api.ts
+++ b/admin-spa/src/lib/api.ts
@@ -59,6 +59,14 @@ export const api = {
     });
   },
 
+  async put(path: string, body?: any) {
+    return api.wpFetch(path, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: body != null ? JSON.stringify(body) : undefined,
+    });
+  },
+
   async del(path: string) {
     return api.wpFetch(path, { method: 'DELETE' });
   },
diff --git a/admin-spa/src/routes/Settings/Tax.tsx b/admin-spa/src/routes/Settings/Tax.tsx
index f6b1a21..fc1e8e8 100644
--- a/admin-spa/src/routes/Settings/Tax.tsx
+++ b/admin-spa/src/routes/Settings/Tax.tsx
@@ -175,56 +175,15 @@ export default function TaxSettings() {
           description={__('Enable or disable tax calculation for your store')}
         >
           <ToggleField
+            id="calc_taxes"
             label={__('Enable tax rates and calculations')}
             description={__('Calculate and display taxes at checkout based on customer location')}
             checked={settings?.calc_taxes === 'yes'}
-            onChange={(checked) => toggleMutation.mutate(checked)}
+            onCheckedChange={(checked: boolean) => toggleMutation.mutate(checked)}
             disabled={toggleMutation.isPending}
           />
         </SettingsCard>
 
-        {/* Suggested Tax Rates (when enabled) */}
-        {settings?.calc_taxes === 'yes' && suggested?.suggested && suggested.suggested.length > 0 && (
-          <SettingsCard
-            title={__('Suggested Tax Rates')}
-            description={__('Based on your selling locations in WooCommerce settings')}
-          >
-            <div className="space-y-3">
-              {suggested.suggested.map((rate: any) => {
-                const added = isRateAdded(rate.code);
-                return (
-                  <div key={rate.code} className="flex items-center justify-between p-4 border rounded-lg">
-                    <div className="flex-1">
-                      <div className="flex items-center gap-2">
-                        <h3 className="font-medium">{rate.country}</h3>
-                        {added && (
-                          <span className="inline-flex items-center gap-1 text-xs text-green-600 bg-green-50 px-2 py-0.5 rounded">
-                            <Check className="h-3 w-3" />
-                            {__('Added')}
-                          </span>
-                        )}
-                      </div>
-                      <p className="text-sm text-muted-foreground mt-1">
-                        {rate.rate}% • {rate.name}
-                      </p>
-                    </div>
-                    {!added && (
-                      <Button
-                        size="sm"
-                        onClick={() => quickAddMutation.mutate(rate)}
-                        disabled={quickAddMutation.isPending}
-                      >
-                        <Plus className="h-4 w-4 mr-2" />
-                        {__('Add Rate')}
-                      </Button>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          </SettingsCard>
-        )}
-
         {/* Tax Rates */}
         {settings?.calc_taxes === 'yes' && (
           <SettingsCard
@@ -240,6 +199,38 @@ export default function TaxSettings() {
               </Button>
             }
           >
+            {/* Suggested Rates Notice */}
+            {suggested?.suggested && suggested.suggested.length > 0 && suggested.suggested.some((r: any) => !isRateAdded(r.code)) && (
+              <div className="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex-1">
+                    <h4 className="font-medium text-sm text-blue-900 mb-2">
+                      {__('Suggested tax rates based on your selling locations')}
+                    </h4>
+                    <div className="space-y-2">
+                      {suggested.suggested.filter((r: any) => !isRateAdded(r.code)).map((rate: any) => (
+                        <div key={rate.code} className="flex items-center justify-between">
+                          <span className="text-sm text-blue-800">
+                            {rate.country}: {rate.rate}% ({rate.name})
+                          </span>
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            className="h-7 text-xs"
+                            onClick={() => quickAddMutation.mutate(rate)}
+                            disabled={quickAddMutation.isPending}
+                          >
+                            {__('Add')}
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Tax Rates List */}
             {allRates.length === 0 ? (
               <div className="text-center py-8 text-muted-foreground">
                 <p>{__('No tax rates configured yet')}</p>
@@ -441,16 +432,15 @@ export default function TaxSettings() {
 
               <div>
                 <label className="text-sm font-medium">{__('Tax Class (Optional)')}</label>
-                <Select name="tax_class" defaultValue={editingRate?.tax_class || ''}>
-                  <SelectTrigger>
-                    <SelectValue placeholder={__('Standard')} />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="">{__('Standard')}</SelectItem>
-                    <SelectItem value="reduced-rate">{__('Reduced Rate')}</SelectItem>
-                    <SelectItem value="zero-rate">{__('Zero Rate')}</SelectItem>
-                  </SelectContent>
-                </Select>
+                <select
+                  name="tax_class"
+                  defaultValue={editingRate?.tax_class || ''}
+                  className="w-full mt-1.5 px-3 py-2 border rounded-md bg-background"
+                >
+                  <option value="">{__('Standard')}</option>
+                  <option value="reduced-rate">{__('Reduced Rate')}</option>
+                  <option value="zero-rate">{__('Zero Rate')}</option>
+                </select>
               </div>
             </div>