diff --git a/resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx b/resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx
index 9e350dc..8029bb8 100644
--- a/resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx
+++ b/resources/js/Components/PurchaseOrder/PurchaseOrderActions.tsx
@@ -25,8 +25,8 @@ export function PurchaseOrderActions({
                 <Button
                     variant="outline"
                     size="sm"
-                    className="button-outlined-primary h-8 w-8 p-0"
-                    title="查看採購單"
+                    className="button-outlined-primary"
+                    title="查看詳情"
                 >
                     <Eye className="h-4 w-4" />
                 </Button>
@@ -35,8 +35,8 @@ export function PurchaseOrderActions({
                 <Button
                     variant="outline"
                     size="sm"
-                    className="button-outlined-primary h-8 w-8 p-0"
-                    title="編輯採購單"
+                    className="button-outlined-primary"
+                    title="編輯"
                 >
                     <Pencil className="h-4 w-4" />
                 </Button>
@@ -44,9 +44,9 @@ export function PurchaseOrderActions({
             <Button
                 variant="outline"
                 size="sm"
-                className="button-outlined-error h-8 w-8 p-0"
-                title="刪除採購單"
-                onClick={handleDelete}
+                className="button-outlined-error"
+                title="刪除"
+                onClick={() => onDelete?.(order.id)}
                 disabled={processing}
             >
                 <Trash2 className="h-4 w-4" />
diff --git a/resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx b/resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
index a85e603..b8df57f 100644
--- a/resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
+++ b/resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
@@ -119,7 +119,7 @@ export default function PurchaseOrderTable({
                 <Table>
                     <TableHeader>
                         <TableRow className="bg-gray-50/50">
-                            <TableHead className="w-[50px]">#</TableHead>
+                            <TableHead className="w-[50px] text-center">#</TableHead>
                             <TableHead className="w-[180px]">
                                 <button
                                     onClick={() => handleSort("poNumber")}
diff --git a/resources/js/Pages/Admin/Role/Index.tsx b/resources/js/Pages/Admin/Role/Index.tsx
index be3e8e5..2a6fec6 100644
--- a/resources/js/Pages/Admin/Role/Index.tsx
+++ b/resources/js/Pages/Admin/Role/Index.tsx
@@ -54,8 +54,8 @@ export default function RoleIndex({ roles }: Props) {
         >
             <Head title="角色管理" />
 
-            <div className="p-8 max-w-7xl mx-auto space-y-6">
-                <div className="flex items-center justify-between">
+            <div className="container mx-auto p-6 max-w-7xl">
+                <div className="flex items-center justify-between mb-6">
                     <div>
                         <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                             <Shield className="h-6 w-6 text-[#01ab83]" />
@@ -66,7 +66,7 @@ export default function RoleIndex({ roles }: Props) {
                         </p>
                     </div>
                     <Link href={route('roles.create')}>
-                        <Button className="bg-[#01ab83] hover:bg-[#019a76]">
+                        <Button className="button-filled-primary">
                             <Plus className="h-4 w-4 mr-2" />
                             新增角色
                         </Button>
@@ -77,7 +77,8 @@ export default function RoleIndex({ roles }: Props) {
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
-                                <TableHead className="w-[200px]">角色名稱</TableHead>
+                                <TableHead className="w-[50px] text-center">#</TableHead>
+                                <TableHead>名稱</TableHead>
                                 <TableHead>代號</TableHead>
                                 <TableHead className="text-center">權限數量</TableHead>
                                 <TableHead className="text-center">使用者人數</TableHead>
@@ -86,13 +87,13 @@ export default function RoleIndex({ roles }: Props) {
                             </TableRow>
                         </TableHeader>
                         <TableBody>
-                            {roles.map((role) => (
+                            {roles.map((role, index) => (
                                 <TableRow key={role.id}>
+                                    <TableCell className="text-gray-500 font-medium text-center">
+                                        {index + 1}
+                                    </TableCell>
                                     <TableCell className="font-medium">
                                         <div className="flex items-center gap-2">
-                                            <div className="p-2 bg-gray-100 rounded-lg">
-                                                <Shield className="h-4 w-4 text-gray-500" />
-                                            </div>
                                             {translateRoleName(role.name)}
                                         </div>
                                     </TableCell>
@@ -120,7 +121,7 @@ export default function RoleIndex({ roles }: Props) {
                                                     <Button
                                                         variant="outline"
                                                         size="sm"
-                                                        className="button-outlined-primary h-8 w-8 p-0"
+                                                        className="button-outlined-primary"
                                                         title="編輯"
                                                     >
                                                         <Pencil className="h-4 w-4" />
@@ -129,7 +130,7 @@ export default function RoleIndex({ roles }: Props) {
                                                 <Button
                                                     variant="outline"
                                                     size="sm"
-                                                    className="button-outlined-error h-8 w-8 p-0"
+                                                    className="button-outlined-error"
                                                     title="刪除"
                                                     disabled={role.users_count > 0}
                                                     onClick={() => handleDelete(role.id, translateRoleName(role.name))}
diff --git a/resources/js/Pages/Admin/User/Index.tsx b/resources/js/Pages/Admin/User/Index.tsx
index 952ecf9..b82437f 100644
--- a/resources/js/Pages/Admin/User/Index.tsx
+++ b/resources/js/Pages/Admin/User/Index.tsx
@@ -32,6 +32,7 @@ interface Pagination {
     last_page: number;
     per_page: number;
     total: number;
+    from: number;
     links: {
         url: string | null;
         label: string;
@@ -76,8 +77,8 @@ export default function UserIndex({ users }: Props) {
         >
             <Head title="使用者管理" />
 
-            <div className="p-8 max-w-7xl mx-auto space-y-6">
-                <div className="flex items-center justify-between">
+            <div className="container mx-auto p-6 max-w-7xl">
+                <div className="flex items-center justify-between mb-6">
                     <div>
                         <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                             <Users className="h-6 w-6 text-[#01ab83]" />
@@ -88,7 +89,7 @@ export default function UserIndex({ users }: Props) {
                         </p>
                     </div>
                     <Link href={route('users.create')}>
-                        <Button className="bg-[#01ab83] hover:bg-[#019a76]">
+                        <Button className="button-filled-primary">
                             <Plus className="h-4 w-4 mr-2" />
                             新增使用者
                         </Button>
@@ -99,6 +100,7 @@ export default function UserIndex({ users }: Props) {
                     <Table>
                         <TableHeader className="bg-gray-50">
                             <TableRow>
+                                <TableHead className="w-[50px] text-center">#</TableHead>
                                 <TableHead className="w-[250px]">使用者</TableHead>
                                 <TableHead>角色</TableHead>
                                 <TableHead className="w-[200px]">加入時間</TableHead>
@@ -106,13 +108,13 @@ export default function UserIndex({ users }: Props) {
                             </TableRow>
                         </TableHeader>
                         <TableBody>
-                            {users.data.map((user) => (
+                            {users.data.map((user, index) => (
                                 <TableRow key={user.id}>
+                                    <TableCell className="text-gray-500 font-medium text-center">
+                                        {users.from + index}
+                                    </TableCell>
                                     <TableCell>
                                         <div className="flex items-center gap-3">
-                                            <div className="h-10 w-10 rounded-full bg-[#01ab83]/10 flex items-center justify-center text-[#01ab83] font-bold">
-                                                {user.name.charAt(0).toUpperCase()}
-                                            </div>
                                             <div>
                                                 <p className="font-medium text-gray-900">{user.name}</p>
                                                 <div className="flex items-center text-xs text-gray-500">
@@ -153,7 +155,7 @@ export default function UserIndex({ users }: Props) {
                                                 <Button
                                                     variant="outline"
                                                     size="sm"
-                                                    className="button-outlined-primary h-8 w-8 p-0"
+                                                    className="button-outlined-primary"
                                                     title="編輯"
                                                 >
                                                     <Pencil className="h-4 w-4" />
@@ -162,7 +164,7 @@ export default function UserIndex({ users }: Props) {
                                             <Button
                                                 variant="outline"
                                                 size="sm"
-                                                className="button-outlined-error h-8 w-8 p-0"
+                                                className="button-outlined-error"
                                                 title="刪除"
                                                 onClick={() => handleDelete(user.id, user.name)}
                                             >
