diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index fbb8194..4c7d045 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -7,7 +7,6 @@ import { ToggleField } from './components/ToggleField';
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';
 import { __ } from '@/lib/i18n';
@@ -34,8 +33,9 @@ export default function ShippingPage() {
   const [togglingMethod, setTogglingMethod] = useState<string | null>(null);
   const [selectedZone, setSelectedZone] = useState<any | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState('methods');
   const [showAddMethod, setShowAddMethod] = useState(false);
+  const [editingMethod, setEditingMethod] = useState<any | null>(null);
+  const [showEditDialog, setShowEditDialog] = useState(false);
   const isDesktop = useMediaQuery("(min-width: 768px)");
   
   // Fetch shipping zones from WooCommerce
@@ -87,14 +87,38 @@ export default function ShippingPage() {
   // Delete shipping method mutation
   const deleteMethodMutation = useMutation({
     mutationFn: async ({ zoneId, instanceId }: { zoneId: number; instanceId: number }) => {
-      return api.delete(`/settings/shipping/zones/${zoneId}/methods/${instanceId}`);
+      return api.del(`/settings/shipping/zones/${zoneId}/methods/${instanceId}`);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
-      toast.success(__('Shipping method deleted successfully'));
+      toast.success(__('Delivery option deleted'));
     },
     onError: (error: any) => {
-      toast.error(error?.message || __('Failed to delete shipping method'));
+      toast.error(error?.message || __('Failed to delete delivery option'));
+    },
+  });
+
+  // Fetch method settings for editing
+  const { data: methodSettings, isLoading: isLoadingSettings } = useQuery({
+    queryKey: ['method-settings', selectedZone?.id, editingMethod?.instance_id],
+    queryFn: () => api.get(`/settings/shipping/zones/${selectedZone.id}/methods/${editingMethod.instance_id}/settings`),
+    enabled: !!editingMethod && !!selectedZone,
+  });
+
+  // Update method settings mutation
+  const updateSettingsMutation = useMutation({
+    mutationFn: async ({ zoneId, instanceId, settings }: { zoneId: number; instanceId: number; settings: any }) => {
+      return api.post(`/settings/shipping/zones/${zoneId}/methods/${instanceId}/settings`, { settings });
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['shipping-zones'] });
+      queryClient.invalidateQueries({ queryKey: ['method-settings'] });
+      toast.success(__('Settings saved'));
+      setShowEditDialog(false);
+      setEditingMethod(null);
+    },
+    onError: (error: any) => {
+      toast.error(error?.message || __('Failed to save settings'));
     },
   });
 
@@ -278,88 +302,65 @@ export default function ShippingPage() {
                   {selectedZone.regions}
                 </p>
               </DialogHeader>
-              <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col min-h-0">
-                <TabsList className="mx-6 mt-4">
-                  <TabsTrigger value="methods">{__('Shipping Methods')}</TabsTrigger>
-                  <TabsTrigger value="details">{__('Zone Details')}</TabsTrigger>
-                </TabsList>
-                
-                <TabsContent value="methods" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
-                  <div className="space-y-4 mt-4">
-                    {/* Add Method Button */}
-                    <Button
-                      variant="outline"
-                      className="w-full"
-                      onClick={() => setShowAddMethod(true)}
-                    >
-                      <Plus className="h-4 w-4 mr-2" />
-                      {__('Add Shipping Method')}
-                    </Button>
+              <div className="flex-1 overflow-y-auto p-6 min-h-0">
+                <div className="space-y-4">
+                  {/* Add Delivery Option Button */}
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setShowAddMethod(true)}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    {__('Add Delivery Option')}
+                  </Button>
 
-                    {/* Methods List */}
-                    <div className="space-y-3">
-                      {selectedZone.rates?.map((rate: any) => (
-                        <div key={rate.id} className="border rounded-lg p-4">
-                          <div className="flex items-start justify-between gap-3 mb-3">
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 mb-1">
-                                <Truck className="h-4 w-4 text-muted-foreground" />
-                                <span className="font-medium" dangerouslySetInnerHTML={{ __html: rate.name }} />
-                              </div>
-                              <div className="text-sm text-muted-foreground">
-                                <span>{__('Cost')}:</span>{' '}
-                                <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
-                              </div>
+                  {/* Delivery Options List */}
+                  <div className="space-y-3">
+                    {selectedZone.rates?.map((rate: any) => (
+                      <div key={rate.id} className="border rounded-lg p-4 hover:border-primary/50 transition-colors">
+                        <div className="flex items-start justify-between gap-3">
+                          <div className="flex-1">
+                            <div className="flex items-center gap-2 mb-2">
+                              <Truck className="h-4 w-4 text-muted-foreground" />
+                              <span className="font-medium" dangerouslySetInnerHTML={{ __html: rate.name }} />
                             </div>
-                            <div className="flex items-center gap-2">
-                              <span className={`text-xs px-2 py-1 rounded-full ${
+                            <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                              <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
+                              <span className={`text-xs px-2 py-0.5 rounded-full ${
                                 rate.enabled 
                                   ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
                                   : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                               }`}>
                                 {rate.enabled ? __('Active') : __('Inactive')}
                               </span>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleDeleteMethod(rate.instance_id)}
-                                disabled={deleteMethodMutation.isPending}
-                              >
-                                <Trash2 className="h-4 w-4 text-destructive" />
-                              </Button>
                             </div>
                           </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </TabsContent>
-
-                <TabsContent value="details" className="flex-1 overflow-y-auto px-6 pb-6 mt-0">
-                  <div className="space-y-4 mt-4">
-                    <div className="bg-muted/50 rounded-lg p-4">
-                      <div className="space-y-3">
-                        <div>
-                          <p className="text-sm font-medium mb-1">{__('Zone Name')}</p>
-                          <p className="text-sm text-muted-foreground">{selectedZone.name}</p>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium mb-1">{__('Regions')}</p>
-                          <p className="text-sm text-muted-foreground">{selectedZone.regions}</p>
-                        </div>
-                        <div>
-                          <p className="text-sm font-medium mb-1">{__('Zone Order')}</p>
-                          <p className="text-sm text-muted-foreground">{selectedZone.order}</p>
-                          <p className="text-xs text-muted-foreground mt-1">{__('Priority in shipping calculations')}</p>
+                          <div className="flex items-center gap-1">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => {
+                                setEditingMethod(rate);
+                                setShowEditDialog(true);
+                              }}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleDeleteMethod(rate.instance_id)}
+                              disabled={deleteMethodMutation.isPending}
+                            >
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
                         </div>
                       </div>
-                    </div>
-                    <p className="text-sm text-muted-foreground">
-                      {__('To edit zone name, regions, or order, use WooCommerce.')}
-                    </p>
+                    ))}
                   </div>
-                </TabsContent>
-              </Tabs>
+                </div>
+              </div>
               <div className="px-6 py-4 border-t flex justify-between gap-3">
                 <Button
                   variant="outline"
@@ -385,52 +386,64 @@ export default function ShippingPage() {
                   {selectedZone.regions}
                 </p>
               </DrawerHeader>
-              <div className="flex-1 overflow-y-auto px-4 py-6 min-h-0">
-                <div className="space-y-6">
-                  {/* Zone Summary */}
-                  <div className="bg-muted/50 rounded-lg p-4">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="text-sm font-medium">{__('Zone Order')}</p>
-                        <p className="text-xs text-muted-foreground">{__('Priority in shipping calculations')}</p>
-                      </div>
-                      <span className="text-2xl font-bold text-muted-foreground">{selectedZone.order}</span>
-                    </div>
-                  </div>
+              <div className="flex-1 overflow-y-auto px-4 py-4 min-h-0">
+                <div className="space-y-3">
+                  {/* Add Delivery Option Button */}
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    onClick={() => setShowAddMethod(true)}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    {__('Add Delivery Option')}
+                  </Button>
 
-                  {/* Shipping Methods */}
-                  <div>
-                    <div className="flex items-center justify-between mb-3">
-                      <h4 className="font-semibold">{__('Shipping Methods')}</h4>
-                      <span className="text-sm text-muted-foreground">
-                        {selectedZone.rates?.length} {selectedZone.rates?.length === 1 ? 'method' : 'methods'}
-                      </span>
-                    </div>
-                    <div className="space-y-3">
-                      {selectedZone.rates?.map((rate: any) => (
-                        <div key={rate.id} className="border rounded-lg p-3">
-                          <div className="flex items-start justify-between gap-3">
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2 mb-1">
-                                <Truck className="h-4 w-4 text-muted-foreground" />
-                                <span className="font-medium text-sm" dangerouslySetInnerHTML={{ __html: rate.name }} />
-                              </div>
-                              <div className="text-sm text-muted-foreground">
-                                <span>{__('Cost')}:</span>{' '}
-                                <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
-                              </div>
+                  {/* Delivery Options List */}
+                  <div className="space-y-2">
+                    {selectedZone.rates?.map((rate: any) => (
+                      <div key={rate.id} className="border rounded-lg p-3">
+                        <div className="flex items-start justify-between gap-2">
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1">
+                              <Truck className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                              <span className="font-medium text-sm line-clamp-1" dangerouslySetInnerHTML={{ __html: rate.name }} />
                             </div>
-                            <span className={`text-xs px-2 py-1 rounded-full whitespace-nowrap ${
-                              rate.enabled 
-                                ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' 
-                                : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
-                            }`}>
-                              {rate.enabled ? __('Active') : __('Inactive')}
-                            </span>
+                            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                              <span className="font-semibold" dangerouslySetInnerHTML={{ __html: rate.price }} />
+                              <span className={`px-2 py-0.5 rounded-full whitespace-nowrap ${
+                                rate.enabled 
+                                  ? 'bg-green-100 text-green-700' 
+                                  : 'bg-gray-100 text-gray-600'
+                              }`}>
+                                {rate.enabled ? __('On') : __('Off')}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="flex items-center gap-1 flex-shrink-0">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 w-8 p-0"
+                              onClick={() => {
+                                setEditingMethod(rate);
+                                setShowEditDialog(true);
+                              }}
+                            >
+                              <Edit className="h-3.5 w-3.5" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-8 w-8 p-0"
+                              onClick={() => handleDeleteMethod(rate.instance_id)}
+                              disabled={deleteMethodMutation.isPending}
+                            >
+                              <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                            </Button>
                           </div>
                         </div>
-                      ))}
-                    </div>
+                      </div>
+                    ))}
                   </div>
                 </div>
               </div>
@@ -454,16 +467,15 @@ export default function ShippingPage() {
         )
       )}
 
-      {/* Add Method Dialog */}
+      {/* Add Delivery Option Dialog */}
       <Dialog open={showAddMethod} onOpenChange={setShowAddMethod}>
         <DialogContent className="max-w-md">
           <DialogHeader>
-            <DialogTitle>{__('Add Shipping Method')}</DialogTitle>
+            <DialogTitle>{__('Add Delivery Option')}</DialogTitle>
           </DialogHeader>
           <div className="space-y-4 py-4">
             <p className="text-sm text-muted-foreground">
-              {__('Select a shipping method to add to this zone:')}
-            </p>
+              {__('Select a delivery option to add:')}</p>
             <div className="space-y-2">
               {availableMethods.map((method: any) => (
                 <button
@@ -484,6 +496,110 @@ export default function ShippingPage() {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* Edit Settings Dialog */}
+      <Dialog open={showEditDialog} onOpenChange={(open) => {
+        setShowEditDialog(open);
+        if (!open) setEditingMethod(null);
+      }}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{__('Edit Delivery Option')}</DialogTitle>
+          </DialogHeader>
+          {isLoadingSettings ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            </div>
+          ) : methodSettings ? (
+            <div className="space-y-4 py-4">
+              <div>
+                <label className="text-sm font-medium mb-2 block">
+                  {__('Display Name')}
+                </label>
+                <input
+                  type="text"
+                  className="w-full px-3 py-2 border rounded-md"
+                  defaultValue={methodSettings.settings?.title?.value || ''}
+                  id="method-title"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  {__('Name shown to customers at checkout')}
+                </p>
+              </div>
+
+              {methodSettings.settings?.cost && (
+                <div>
+                  <label className="text-sm font-medium mb-2 block">
+                    {methodSettings.settings.cost.title || __('Cost')}
+                  </label>
+                  <input
+                    type="text"
+                    className="w-full px-3 py-2 border rounded-md"
+                    defaultValue={methodSettings.settings.cost.value || ''}
+                    id="method-cost"
+                    placeholder={methodSettings.settings.cost.placeholder || '0'}
+                  />
+                  {methodSettings.settings.cost.description && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {methodSettings.settings.cost.description}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {methodSettings.settings?.min_amount && (
+                <div>
+                  <label className="text-sm font-medium mb-2 block">
+                    {methodSettings.settings.min_amount.title || __('Minimum Order')}
+                  </label>
+                  <input
+                    type="text"
+                    className="w-full px-3 py-2 border rounded-md"
+                    defaultValue={methodSettings.settings.min_amount.value || ''}
+                    id="method-min-amount"
+                    placeholder={methodSettings.settings.min_amount.placeholder || '0'}
+                  />
+                  {methodSettings.settings.min_amount.description && (
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {methodSettings.settings.min_amount.description}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div className="flex justify-end gap-2 pt-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowEditDialog(false)}
+                >
+                  {__('Cancel')}
+                </Button>
+                <Button
+                  onClick={() => {
+                    const settings: any = {};
+                    const titleInput = document.getElementById('method-title') as HTMLInputElement;
+                    const costInput = document.getElementById('method-cost') as HTMLInputElement;
+                    const minAmountInput = document.getElementById('method-min-amount') as HTMLInputElement;
+                    
+                    if (titleInput) settings.title = titleInput.value;
+                    if (costInput) settings.cost = costInput.value;
+                    if (minAmountInput) settings.min_amount = minAmountInput.value;
+                    
+                    updateSettingsMutation.mutate({
+                      zoneId: selectedZone.id,
+                      instanceId: editingMethod.instance_id,
+                      settings
+                    });
+                  }}
+                  disabled={updateSettingsMutation.isPending}
+                >
+                  {updateSettingsMutation.isPending ? __('Saving...') : __('Save')}
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
     </SettingsLayout>
   );
 }