diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
index e979731..cbd9da6 100644
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -19,7 +19,7 @@ class UserController extends Controller
     {
         $perPage = $request->input('per_page', 10);
 
-        $users = User::with('roles')
+        $users = User::with(['roles:id,name,display_name'])
             ->orderBy('id')
             ->paginate($perPage)
             ->withQueryString();
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
index 7c0c9f2..914f552 100644
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -352,11 +352,6 @@ export default function AuthenticatedLayout({
                             </span>
                             <span className="text-xs text-slate-500">
                                 {user.username || 'Administrator'}
-                                {user.roles && user.roles.length > 0 && (
-                                    <span className="block text-[10px] text-primary-main">
-                                        [{user.roles.join(', ')}]
-                                    </span>
-                                )}
                             </span>
                         </div>
                         <div className="h-9 w-9 bg-slate-100 rounded-full flex items-center justify-center text-slate-600 group-hover:bg-primary-lightest group-hover:text-primary-main transition-all">
diff --git a/resources/js/Pages/Admin/User/Create.tsx b/resources/js/Pages/Admin/User/Create.tsx
index 329bca6..a2b742b 100644
--- a/resources/js/Pages/Admin/User/Create.tsx
+++ b/resources/js/Pages/Admin/User/Create.tsx
@@ -81,11 +81,24 @@ export default function UserCreate({ roles }: Props) {
                         </div>
                     </div>
 
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-6">
                         {/* Basic Info */}
-                        <div className="md:col-span-2 space-y-6">
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="username" className="flex items-center gap-2">
+                                        <User className="h-4 w-4" /> 使用者名稱 (登入用)
+                                    </Label>
+                                    <Input
+                                        id="username"
+                                        value={data.username}
+                                        onChange={e => setData('username', e.target.value)}
+                                        placeholder="請輸入登入帳號"
+                                    />
+                                    {errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
+                                </div>
 
                                 <div className="space-y-2">
                                     <Label htmlFor="name" className="flex items-center gap-2">
@@ -99,93 +112,80 @@ export default function UserCreate({ roles }: Props) {
                                     />
                                     {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
                                 </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="email" className="flex items-center gap-2">
-                                        <Mail className="h-4 w-4" /> 電子郵件 (選填)
-                                    </Label>
-                                    <Input
-                                        id="email"
-                                        type="email"
-                                        value={data.email}
-                                        onChange={e => setData('email', e.target.value)}
-                                        placeholder="user@example.com (可省略)"
-                                    />
-                                    {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="username" className="flex items-center gap-2">
-                                        <User className="h-4 w-4" /> 使用者名稱 (登入用)
-                                    </Label>
-                                    <Input
-                                        id="username"
-                                        value={data.username}
-                                        onChange={e => setData('username', e.target.value)}
-                                        placeholder="請輸入登入帳號"
-                                    />
-                                    {errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
-                                </div>
                             </div>
 
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">安全設定</h3>
-
-                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                    <div className="space-y-2">
-                                        <Label htmlFor="password" className="flex items-center gap-2">
-                                            <Lock className="h-4 w-4" /> 設定密碼
-                                        </Label>
-                                        <Input
-                                            id="password"
-                                            type="password"
-                                            value={data.password}
-                                            onChange={e => setData('password', e.target.value)}
-                                        />
-                                        {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
-                                    </div>
-
-                                    <div className="space-y-2">
-                                        <Label htmlFor="password_confirmation" className="flex items-center gap-2">
-                                            <Lock className="h-4 w-4" /> 確認密碼
-                                        </Label>
-                                        <Input
-                                            id="password_confirmation"
-                                            type="password"
-                                            value={data.password_confirmation}
-                                            onChange={e => setData('password_confirmation', e.target.value)}
-                                        />
-                                    </div>
-                                </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="email" className="flex items-center gap-2">
+                                    <Mail className="h-4 w-4" /> 電子郵件 (選填)
+                                </Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    value={data.email}
+                                    onChange={e => setData('email', e.target.value)}
+                                    placeholder="user@example.com (可省略)"
+                                />
+                                {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
                             </div>
                         </div>
 
                         {/* Roles */}
-                        <div className="md:col-span-1">
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
-                                <div className="space-y-4">
-                                    {Object.entries(roles).map(([roleName, displayName]) => (
-                                        <div key={roleName} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
-                                            <Checkbox
-                                                id={`role-${roleName}`}
-                                                checked={data.roles.includes(roleName)}
-                                                onCheckedChange={() => toggleRole(roleName)}
-                                            />
-                                            <div className="grid gap-1.5 leading-none">
-                                                <label
-                                                    htmlFor={`role-${roleName}`}
-                                                    className="text-sm font-medium leading-none cursor-pointer"
-                                                >
-                                                    {displayName}
-                                                </label>
-                                                <p className="text-xs text-gray-500 font-mono">
-                                                    {roleName}
-                                                </p>
-                                            </div>
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {Object.entries(roles).map(([roleName, displayName]) => (
+                                    <div key={roleName} className="flex items-center space-x-3 p-3 border border-gray-100 bg-gray-50/50 hover:bg-gray-100 rounded-lg transition-colors">
+                                        <Checkbox
+                                            id={`role-${roleName}`}
+                                            checked={data.roles.includes(roleName)}
+                                            onCheckedChange={() => toggleRole(roleName)}
+                                        />
+                                        <div className="grid gap-1 leading-none">
+                                            <label
+                                                htmlFor={`role-${roleName}`}
+                                                className="text-sm font-medium leading-none cursor-pointer"
+                                                onClick={() => toggleRole(roleName)}
+                                            >
+                                                {displayName}
+                                            </label>
+                                            <p className="text-xs text-gray-500 font-mono">
+                                                {roleName}
+                                            </p>
                                         </div>
-                                    ))}
-                                    {errors.roles && <p className="text-sm text-red-500">{errors.roles}</p>}
+                                    </div>
+                                ))}
+                            </div>
+                            {errors.roles && <p className="text-sm text-red-500 mt-2">{errors.roles}</p>}
+                        </div>
+
+                        {/* Password */}
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">安全設定</h3>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="password" className="flex items-center gap-2">
+                                        <Lock className="h-4 w-4" /> 設定密碼
+                                    </Label>
+                                    <Input
+                                        id="password"
+                                        type="password"
+                                        value={data.password}
+                                        onChange={e => setData('password', e.target.value)}
+                                    />
+                                    {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="password_confirmation" className="flex items-center gap-2">
+                                        <Lock className="h-4 w-4" /> 確認密碼
+                                    </Label>
+                                    <Input
+                                        id="password_confirmation"
+                                        type="password"
+                                        value={data.password_confirmation}
+                                        onChange={e => setData('password_confirmation', e.target.value)}
+                                    />
                                 </div>
                             </div>
                         </div>
diff --git a/resources/js/Pages/Admin/User/Edit.tsx b/resources/js/Pages/Admin/User/Edit.tsx
index ee94f53..b98d018 100644
--- a/resources/js/Pages/Admin/User/Edit.tsx
+++ b/resources/js/Pages/Admin/User/Edit.tsx
@@ -29,7 +29,7 @@ interface Props {
 export default function UserEdit({ user, roles, currentRoles }: Props) {
     const { data, setData, put, processing, errors } = useForm({
         name: user.name,
-        email: user.email,
+        email: user.email || '',
         username: user.username || '',
         password: '',
         password_confirmation: '',
@@ -96,11 +96,24 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
                         </div>
                     </div>
 
-                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div className="space-y-6">
                         {/* Basic Info */}
-                        <div className="md:col-span-2 space-y-6">
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">基本資料</h3>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="username" className="flex items-center gap-2">
+                                        <User className="h-4 w-4" /> 使用者名稱 (登入用)
+                                    </Label>
+                                    <Input
+                                        id="username"
+                                        value={data.username}
+                                        onChange={e => setData('username', e.target.value)}
+                                        placeholder="請輸入登入帳號"
+                                    />
+                                    {errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
+                                </div>
 
                                 <div className="space-y-2">
                                     <Label htmlFor="name" className="flex items-center gap-2">
@@ -114,100 +127,86 @@ export default function UserEdit({ user, roles, currentRoles }: Props) {
                                     />
                                     {errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
                                 </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="email" className="flex items-center gap-2">
-                                        <Mail className="h-4 w-4" /> 電子郵件 (選填)
-                                    </Label>
-                                    <Input
-                                        id="email"
-                                        type="email"
-                                        value={data.email}
-                                        onChange={e => setData('email', e.target.value)}
-                                        placeholder="user@example.com (可省略)"
-                                    />
-                                    {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Label htmlFor="username" className="flex items-center gap-2">
-                                        <User className="h-4 w-4" /> 使用者名稱 (登入用)
-                                    </Label>
-                                    <Input
-                                        id="username"
-                                        value={data.username}
-                                        onChange={e => setData('username', e.target.value)}
-                                        placeholder="請輸入登入帳號"
-                                    />
-                                    {errors.username && <p className="text-sm text-red-500">{errors.username}</p>}
-                                </div>
                             </div>
 
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">重設密碼</h3>
-                                <div className="bg-amber-50 text-amber-800 p-3 rounded-lg text-sm flex items-start gap-2 mb-4">
-                                    <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
-                                    若不修改密碼，請留空以下欄位。
-                                </div>
-
-                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                    <div className="space-y-2">
-                                        <Label htmlFor="password" className="flex items-center gap-2">
-                                            <Lock className="h-4 w-4" /> 新密碼
-                                        </Label>
-                                        <Input
-                                            id="password"
-                                            type="password"
-                                            value={data.password}
-                                            onChange={e => setData('password', e.target.value)}
-                                            placeholder="••••••••"
-                                        />
-                                        {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
-                                    </div>
-
-                                    <div className="space-y-2">
-                                        <Label htmlFor="password_confirmation" className="flex items-center gap-2">
-                                            <Lock className="h-4 w-4" /> 確認新密碼
-                                        </Label>
-                                        <Input
-                                            id="password_confirmation"
-                                            type="password"
-                                            value={data.password_confirmation}
-                                            onChange={e => setData('password_confirmation', e.target.value)}
-                                            placeholder="••••••••"
-                                        />
-                                    </div>
-                                </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="email" className="flex items-center gap-2">
+                                    <Mail className="h-4 w-4" /> 電子郵件 (選填)
+                                </Label>
+                                <Input
+                                    id="email"
+                                    type="email"
+                                    value={data.email}
+                                    onChange={e => setData('email', e.target.value)}
+                                    placeholder="user@example.com (可省略)"
+                                />
+                                {errors.email && <p className="text-sm text-red-500">{errors.email}</p>}
                             </div>
                         </div>
 
                         {/* Roles */}
-                        <div className="md:col-span-1">
-                            <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm h-full">
-                                <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
-                                <div className="space-y-4">
-                                    {roles.map((role) => (
-                                        <div key={role.id} className="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded-lg transition-colors">
-                                            <Checkbox
-                                                id={`role-${role.id}`}
-                                                checked={data.roles.includes(role.name)}
-                                                onCheckedChange={() => toggleRole(role.name)}
-                                            // Prevent changing super-admin if user is editing themselves? Or just backend protection.
-                                            />
-                                            <div className="grid gap-1.5 leading-none">
-                                                <label
-                                                    htmlFor={`role-${role.id}`}
-                                                    className="text-sm font-medium leading-none cursor-pointer"
-                                                >
-                                                    {role.display_name}
-                                                </label>
-                                                <p className="text-xs text-gray-500 font-mono">
-                                                    {role.name}
-                                                </p>
-                                            </div>
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">角色分配</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {roles.map((role) => (
+                                    <div key={role.id} className="flex items-center space-x-3 p-3 border border-gray-100 bg-gray-50/50 hover:bg-gray-100 rounded-lg transition-colors">
+                                        <Checkbox
+                                            id={`role-${role.id}`}
+                                            checked={data.roles.includes(role.name)}
+                                            onCheckedChange={() => toggleRole(role.name)}
+                                        />
+                                        <div className="grid gap-1 leading-none">
+                                            <label
+                                                htmlFor={`role-${role.id}`}
+                                                className="text-sm font-medium leading-none cursor-pointer"
+                                                onClick={() => toggleRole(role.name)}
+                                            >
+                                                {role.display_name}
+                                            </label>
+                                            <p className="text-xs text-gray-500 font-mono">
+                                                {role.name}
+                                            </p>
                                         </div>
-                                    ))}
-                                    {errors.roles && <p className="text-sm text-red-500">{errors.roles}</p>}
+                                    </div>
+                                ))}
+                            </div>
+                            {errors.roles && <p className="text-sm text-red-500 mt-2">{errors.roles}</p>}
+                        </div>
+
+                        {/* Password Reset */}
+                        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm space-y-6">
+                            <h3 className="font-bold text-gray-900 border-b pb-2 mb-4">重設密碼</h3>
+                            <div className="bg-amber-50 text-amber-800 p-3 rounded-lg text-sm flex items-start gap-2 mb-4">
+                                <AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
+                                若不修改密碼，請留空以下欄位。
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                <div className="space-y-2">
+                                    <Label htmlFor="password" className="flex items-center gap-2">
+                                        <Lock className="h-4 w-4" /> 新密碼
+                                    </Label>
+                                    <Input
+                                        id="password"
+                                        type="password"
+                                        value={data.password}
+                                        onChange={e => setData('password', e.target.value)}
+                                        placeholder="••••••••"
+                                    />
+                                    {errors.password && <p className="text-sm text-red-500">{errors.password}</p>}
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Label htmlFor="password_confirmation" className="flex items-center gap-2">
+                                        <Lock className="h-4 w-4" /> 確認新密碼
+                                    </Label>
+                                    <Input
+                                        id="password_confirmation"
+                                        type="password"
+                                        value={data.password_confirmation}
+                                        onChange={e => setData('password_confirmation', e.target.value)}
+                                        placeholder="••••••••"
+                                    />
                                 </div>
                             </div>
                         </div>
diff --git a/resources/js/Pages/Admin/User/Index.tsx b/resources/js/Pages/Admin/User/Index.tsx
index 0370713..ee23ef0 100644
--- a/resources/js/Pages/Admin/User/Index.tsx
+++ b/resources/js/Pages/Admin/User/Index.tsx
@@ -21,6 +21,7 @@ import { SearchableSelect } from "@/Components/ui/searchable-select";
 interface Role {
     id: number;
     name: string;
+    display_name: string;
 }
 
 interface User {
@@ -70,16 +71,7 @@ export default function UserIndex({ users, filters }: Props) {
         );
     };
 
-    const translateRoleName = (name: string) => {
-        const map: Record<string, string> = {
-            'super-admin': '超級管理員',
-            'admin': '管理員',
-            'warehouse-manager': '倉庫主管',
-            'purchaser': '採購人員',
-            'viewer': '檢視者',
-        };
-        return map[name] || name;
-    }
+
 
     return (
         <AuthenticatedLayout
@@ -140,21 +132,31 @@ export default function UserIndex({ users, filters }: Props) {
                                         </div>
                                     </TableCell>
                                     <TableCell>
-                                        <div className="flex flex-wrap gap-1">
+                                        <div className="flex flex-wrap gap-2">
                                             {user.roles.length > 0 ? (
                                                 user.roles.map(role => (
-                                                    <span
+                                                    <div
                                                         key={role.id}
                                                         className={cn(
-                                                            "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium border",
+                                                            "inline-flex flex-col px-3 py-1.5 rounded-md border",
                                                             role.name === 'super-admin'
-                                                                ? "bg-purple-50 text-purple-700 border-purple-200"
-                                                                : "bg-gray-100 text-gray-700 border-gray-200"
+                                                                ? "bg-purple-50 border-purple-200"
+                                                                : "bg-gray-50 border-gray-200"
                                                         )}
                                                     >
-                                                        {role.name === 'super-admin' && <Shield className="h-3 w-3 mr-1" />}
-                                                        {translateRoleName(role.name)}
-                                                    </span>
+                                                        <div className="flex items-center gap-1">
+                                                            {role.name === 'super-admin' && <Shield className="h-3 w-3 text-purple-600" />}
+                                                            <span className={cn(
+                                                                "text-sm font-medium",
+                                                                role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
+                                                            )}>
+                                                                {role.display_name}
+                                                            </span>
+                                                        </div>
+                                                        <span className="text-[10px] text-gray-500 font-mono">
+                                                            {role.name}
+                                                        </span>
+                                                    </div>
                                                 ))
                                             ) : (
                                                 <span className="text-gray-400 text-sm italic">未分配角色</span>