diff --git a/resources/js/Pages/Inventory/Transfer/Index.tsx b/resources/js/Pages/Inventory/Transfer/Index.tsx
index 7a49110..27721b4 100644
--- a/resources/js/Pages/Inventory/Transfer/Index.tsx
+++ b/resources/js/Pages/Inventory/Transfer/Index.tsx
@@ -48,8 +48,10 @@ import {
 import Pagination from "@/Components/shared/Pagination";
 import { toast } from "sonner";
 import { Can } from '@/Components/Permission/Can';
+import { usePermission } from '@/hooks/usePermission';
 
 export default function Index({ warehouses, orders, filters }: any) {
+    const { can } = usePermission();
     const [searchTerm, setSearchTerm] = useState(filters.search || "");
     const [warehouseFilter, setWarehouseFilter] = useState(filters.warehouse_id || "all");
     const [perPage, setPerPage] = useState(filters.per_page || "10");
@@ -320,35 +322,57 @@ export default function Index({ warehouses, orders, filters }: any) {
                                         <TableCell className="text-sm">{order.created_by}</TableCell>
                                         <TableCell className="text-center">
                                             <div className="flex items-center justify-center gap-2" onClick={(e) => e.stopPropagation()}>
-                                                <Can permission="inventory_transfer.view">
-                                                    <Link href={route('inventory.transfer.show', [order.id])}>
+                                                {(() => {
+                                                    const isEditable = order.status === 'draft';
+                                                    const canEdit = can('inventory_transfer.edit');
+                                                    const canView = can('inventory_transfer.view');
+
+                                                    if (isEditable && canEdit) {
+                                                        return (
+                                                            <Link href={route('inventory.transfer.show', [order.id])}>
+                                                                <Button
+                                                                    variant="outline"
+                                                                    size="sm"
+                                                                    className="button-outlined-primary"
+                                                                    title="編輯"
+                                                                >
+                                                                    <Pencil className="w-4 h-4 ml-0.5" />
+                                                                </Button>
+                                                            </Link>
+                                                        );
+                                                    }
+
+                                                    if (canView) {
+                                                        return (
+                                                            <Link href={route('inventory.transfer.show', [order.id])}>
+                                                                <Button
+                                                                    variant="outline"
+                                                                    size="sm"
+                                                                    className="button-outlined-primary"
+                                                                    title="查閱"
+                                                                >
+                                                                    <Eye className="w-4 h-4 ml-0.5" />
+                                                                </Button>
+                                                            </Link>
+                                                        );
+                                                    }
+
+                                                    return null;
+                                                })()}
+
+                                                {order.status === 'draft' && (
+                                                    <Can permission="inventory_transfer.delete">
                                                         <Button
                                                             variant="outline"
                                                             size="sm"
-                                                            className="button-outlined-primary"
-                                                            title={['completed', 'voided'].includes(order.status) ? '查閱' : '編輯'}
+                                                            className="button-outlined-error"
+                                                            title="刪除"
+                                                            onClick={() => confirmDelete(order.id)}
                                                         >
-                                                            {['completed', 'voided'].includes(order.status) ? (
-                                                                <Eye className="w-4 h-4 ml-0.5" />
-                                                            ) : (
-                                                                <Pencil className="w-4 h-4 ml-0.5" />
-                                                            )}
+                                                            <Trash2 className="w-4 h-4 ml-0.5" />
                                                         </Button>
-                                                    </Link>
-                                                    {order.status === 'draft' && (
-                                                        <Can permission="inventory_transfer.delete">
-                                                            <Button
-                                                                variant="outline"
-                                                                size="sm"
-                                                                className="button-outlined-error"
-                                                                title="刪除"
-                                                                onClick={() => confirmDelete(order.id)}
-                                                            >
-                                                                <Trash2 className="w-4 h-4 ml-0.5" />
-                                                            </Button>
-                                                        </Can>
-                                                    )}
-                                                </Can>
+                                                    </Can>
+                                                )}
                                             </div>
                                         </TableCell>
                                     </TableRow>
diff --git a/resources/js/Pages/Inventory/Transfer/Show.tsx b/resources/js/Pages/Inventory/Transfer/Show.tsx
index 4423655..9c66df2 100644
--- a/resources/js/Pages/Inventory/Transfer/Show.tsx
+++ b/resources/js/Pages/Inventory/Transfer/Show.tsx
@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from "react";
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
 import { Head, router, Link } from "@inertiajs/react";
@@ -37,8 +36,10 @@ import { Plus, Save, Trash2, ArrowLeft, CheckCircle, Package, ArrowLeftRight, Pr
 import { toast } from "sonner";
 import axios from "axios";
 import { Can } from '@/Components/Permission/Can';
+import { usePermission } from '@/hooks/usePermission';
 
 export default function Show({ order }: any) {
+    const { can } = usePermission();
     const [items, setItems] = useState(order.items || []);
     const [remarks, setRemarks] = useState(order.remarks || "");
     const [isSaving, setIsSaving] = useState(false);
@@ -181,7 +182,8 @@ export default function Show({ order }: any) {
         });
     };
 
-    const isReadOnly = order.status !== 'draft';
+    const canEdit = can('inventory_transfer.edit');
+    const isReadOnly = order.status !== 'draft' || !canEdit;
 
     return (
         <AuthenticatedLayout
@@ -234,7 +236,7 @@ export default function Show({ order }: any) {
 
                             {!isReadOnly && (
                                 <div className="flex items-center gap-2">
-                                    <Can permission="inventory.view">
+                                    <Can permission="inventory_transfer.delete">
                                         <AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
                                             <AlertDialogTrigger asChild>
                                                 <Button variant="outline" size="sm" className="button-outlined-error" onClick={() => setDeleteId(order.id)}>
@@ -255,7 +257,9 @@ export default function Show({ order }: any) {
                                                 </AlertDialogFooter>
                                             </AlertDialogContent>
                                         </AlertDialog>
+                                    </Can>
 
+                                    <Can permission="inventory_transfer.edit">
                                         <Button
                                             variant="outline"
                                             size="sm"