diff --git a/admin-spa/src/routes/Settings/Shipping.tsx b/admin-spa/src/routes/Settings/Shipping.tsx
index 5f6995e..ea49c12 100644
--- a/admin-spa/src/routes/Settings/Shipping.tsx
+++ b/admin-spa/src/routes/Settings/Shipping.tsx
@@ -219,6 +219,136 @@ export default function ShippingPage() {
           <li>• {__('Configure detailed shipping settings in WooCommerce for full control')}</li>
         </ul>
       </div>
+
+      {/* Settings Modal/Drawer */}
+      {selectedZone && (
+        isDesktop ? (
+          <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col p-0">
+              <DialogHeader className="px-6 py-4 border-b">
+                <DialogTitle>{selectedZone.name} {__('Settings')}</DialogTitle>
+              </DialogHeader>
+              <div className="flex-1 overflow-y-auto p-6 min-h-0">
+                <p className="text-sm text-muted-foreground mb-4">
+                  {__('Configure shipping zone and methods. For advanced settings, use WooCommerce.')}
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Zone Information')}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Name')}: {selectedZone.name}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Regions')}: {selectedZone.regions}
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Shipping Methods')}</h4>
+                    <div className="space-y-2">
+                      {selectedZone.rates?.map((rate: any) => (
+                        <div key={rate.id} className="border rounded-lg p-3">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-medium">{rate.name}</span>
+                            <ToggleField
+                              id={`modal-${selectedZone.id}-${rate.instance_id}`}
+                              label=""
+                              checked={rate.enabled}
+                              onCheckedChange={(checked) => {
+                                handleToggle(selectedZone.id, rate.instance_id, checked);
+                              }}
+                              disabled={togglingMethod === `${selectedZone.id}-${rate.instance_id}`}
+                            />
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {__('Price')}: <span dangerouslySetInnerHTML={{ __html: rate.price }} />
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="px-6 py-4 border-t flex justify-between">
+                <Button
+                  variant="outline"
+                  asChild
+                >
+                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    {__('Advanced Settings in WooCommerce')}
+                  </a>
+                </Button>
+                <Button onClick={() => setIsModalOpen(false)}>
+                  {__('Close')}
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        ) : (
+          <Drawer open={isModalOpen} onOpenChange={setIsModalOpen}>
+            <DrawerContent className="max-h-[90vh] flex flex-col">
+              <DrawerHeader className="border-b">
+                <DrawerTitle>{selectedZone.name} {__('Settings')}</DrawerTitle>
+              </DrawerHeader>
+              <div className="flex-1 overflow-y-auto px-4 py-6 min-h-0">
+                <p className="text-sm text-muted-foreground mb-4">
+                  {__('Configure shipping zone and methods. For advanced settings, use WooCommerce.')}
+                </p>
+                <div className="space-y-4">
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Zone Information')}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Name')}: {selectedZone.name}
+                    </p>
+                    <p className="text-sm text-muted-foreground">
+                      {__('Regions')}: {selectedZone.regions}
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="font-medium mb-2">{__('Shipping Methods')}</h4>
+                    <div className="space-y-2">
+                      {selectedZone.rates?.map((rate: any) => (
+                        <div key={rate.id} className="border rounded-lg p-3">
+                          <div className="flex items-center justify-between mb-2">
+                            <span className="font-medium">{rate.name}</span>
+                            <ToggleField
+                              id={`drawer-${selectedZone.id}-${rate.instance_id}`}
+                              label=""
+                              checked={rate.enabled}
+                              onCheckedChange={(checked) => {
+                                handleToggle(selectedZone.id, rate.instance_id, checked);
+                              }}
+                              disabled={togglingMethod === `${selectedZone.id}-${rate.instance_id}`}
+                            />
+                          </div>
+                          <p className="text-sm text-muted-foreground">
+                            {__('Price')}: <span dangerouslySetInnerHTML={{ __html: rate.price }} />
+                          </p>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="px-4 py-4 border-t flex flex-col gap-2">
+                <Button
+                  variant="outline"
+                  asChild
+                  className="w-full"
+                >
+                  <a href={`${wcAdminUrl}/admin.php?page=wc-settings&tab=shipping&zone_id=${selectedZone.id}`} target="_blank" rel="noopener noreferrer">
+                    <ExternalLink className="h-4 w-4 mr-2" />
+                    {__('Advanced Settings in WooCommerce')}
+                  </a>
+                </Button>
+                <Button onClick={() => setIsModalOpen(false)} className="w-full">
+                  {__('Close')}
+                </Button>
+              </div>
+            </DrawerContent>
+          </Drawer>
+        )
+      )}
     </SettingsLayout>
   );
 }