diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index f209b21..dc04fb3 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -5,9 +5,12 @@ import { SettingsLayout } from './components/SettingsLayout';
 import { SettingsCard } from './components/SettingsCard';
 import { ToggleField } from './components/ToggleField';
 import { Button } from '@/components/ui/button';
-import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink } from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
+import { Globe, Truck, MapPin, Edit, Trash2, RefreshCw, Loader2, ExternalLink, Settings } from 'lucide-react';
 import { toast } from 'sonner';
 import { __ } from '@/lib/i18n';
+import { useMediaQuery } from '@/hooks/use-media-query';
 
 interface ShippingRate {
   id: string;
@@ -28,6 +31,9 @@ export default function ShippingPage() {
   const queryClient = useQueryClient();
   const wcAdminUrl = (window as any).WNW_CONFIG?.wpAdminUrl || '/wp-admin';
   const [togglingMethod, setTogglingMethod] = useState<string | null>(null);
+  const [selectedZone, setSelectedZone] = useState<any | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const isDesktop = useMediaQuery("(min-width: 768px)");
   
   // Fetch shipping zones from WooCommerce
   const { data: zones = [], isLoading, refetch } = useQuery({
@@ -76,27 +82,15 @@ export default function ShippingPage() {
       title={__('Shipping & Delivery')}
       description={__('Manage how you ship products to customers')}
       action={
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => refetch()}
-            disabled={isLoading}
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            {__('Refresh')}
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            asChild
-          >
-            <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
-              <ExternalLink className="h-4 w-4 mr-2" />
-              {__('View in WooCommerce')}
-            </a>
-          </Button>
-        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetch()}
+          disabled={isLoading}
+        >
+          <RefreshCw className="h-4 w-4 mr-2" />
+          {__('Refresh')}
+        </Button>
       }
     >
       {/* Shipping Zones */}
@@ -144,12 +138,13 @@ export default function ShippingPage() {
                   <Button 
                     variant="outline" 
                     size="sm"
-                    asChild
+                    onClick={() => {
+                      setSelectedZone(zone);
+                      setIsModalOpen(true);
+                    }}
                   >
-                    <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${zone.id}`} target="_blank" rel="noopener noreferrer">
-                      <Edit className="h-4 w-4 mr-2" />
-                      {__('Edit zone')}
-                    </a>
+                    <Settings className="h-4 w-4 mr-2" />
+                    {__('Settings')}
                   </Button>
                 </div>
               </div>
@@ -204,8 +199,9 @@ export default function ShippingPage() {
               className="w-full"
               asChild
             >
-              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&action=add_zone`} target="_blank" rel="noopener noreferrer">
-                + {__('Add shipping zone')}
+              <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping`} target="_blank" rel="noopener noreferrer">
+                <ExternalLink className="h-4 w-4 mr-2" />
+                {__('Manage Zones in WooCommerce')}
               </a>
             </Button>
           </div>
diff --git a/includes/Api/ShippingController.php b/includes/Api/ShippingController.php
index 3c2781e..b476178 100644
--- a/includes/Api/ShippingController.php
+++ b/includes/Api/ShippingController.php
@@ -210,8 +210,9 @@ class ShippingController extends WP_REST_Controller {
 					$method_found = true;
 					
 					// Update the enabled status
-					$method->enabled = $enabled ? 'yes' : 'no';
-					update_option( $method->get_instance_option_key(), $method->instance_settings );
+					$settings = get_option( $method->get_instance_option_key(), array() );
+					$settings['enabled'] = $enabled ? 'yes' : 'no';
+					update_option( $method->get_instance_option_key(), $settings );
 					
 					break;
 				}