diff --git a/frontend/src/components/basics/SelectField.tsx b/frontend/src/components/basics/SelectField.tsx
new file mode 100644
index 0000000..1dc0ecb
--- /dev/null
+++ b/frontend/src/components/basics/SelectField.tsx
@@ -0,0 +1,25 @@
+type SelectFieldProps = {
+    value: string;
+    onChange: (value: string) => void;
+    options: { value: string; label: string }[];
+    className?: string;
+};
+
+/**
+ * SelectField - A dropdown styled consistently with input fields
+ */
+export default function SelectField({value, onChange, options, className = ''}: SelectFieldProps) {
+    return (
+        <select
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className={`p-2 w-full border rounded-md bg-white border-gray-600 hover:border-blue-800 transition-colors text-gray-600 focus:outline-none focus:border-blue-900 cursor-pointer ${className}`}
+        >
+            {options.map((option) => (
+                <option key={option.value} value={option.value}>
+                    {option.label}
+                </option>
+            ))}
+        </select>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/basics/TextLinkButton.tsx b/frontend/src/components/basics/TextLinkButton.tsx
new file mode 100644
index 0000000..733abd6
--- /dev/null
+++ b/frontend/src/components/basics/TextLinkButton.tsx
@@ -0,0 +1,20 @@
+type TextLinkButtonProps = {
+    text: string;
+    onClick: () => void;
+    className?: string;
+};
+
+/**
+ * TextLinkButton - A button styled as a hyperlink
+ */
+export default function TextLinkButton({text, onClick, className = ''}: TextLinkButtonProps) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={`text-blue-600 hover:text-blue-800 hover:underline transition-colors bg-transparent border-none p-0 cursor-pointer ${className}`}
+        >
+            {text}
+        </button>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/components/users/UserManagementPage.tsx b/frontend/src/components/users/UserManagementPage.tsx
index 2e9a83a..9977ee4 100644
--- a/frontend/src/components/users/UserManagementPage.tsx
+++ b/frontend/src/components/users/UserManagementPage.tsx
@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import {createUser, fetchCurrentUser, updateUser} from "../../api/points/UserPoint";
-import type {UserDto} from "../../api/dtos/UserDto.ts"; // @todo add model and mapper!
+import type {UserDto} from "../../api/dtos/UserDto.ts";
 import ContentBackground from "../basics/ContentBackground";
 import ContentBody from "../basics/ContentBody";
 import StickyHeader from "../basics/StickyHeader";
@@ -14,12 +14,14 @@ import ButtonGroupLayout from "../basics/ButtonGroupLayout.tsx";
 import {Plus, X} from "lucide-react";
 import ButtonLink from "../basics/ButtonLink.tsx";
 import {getRecipeListUrl} from "../../routes.ts";
+import TextLinkButton from "../basics/TextLinkButton.tsx";
+import SelectField from "../basics/SelectField.tsx";
 
 /**
  * UserManagementPage
  * -------------------
  * Displays a two-column layout:
- *  - Left: list of all users
+ *  - Left: list of all users (wider on desktop)
  *  - Right: edit form for selected or new user
  *
  * Allows:
@@ -55,6 +57,7 @@ export default function UserManagementPage() {
         setSelectedUser(me);
         //}
     };
+
     /** Handles selecting a user from the list */
     const handleSelectUser = (user: UserDto) => {
         setSelectedUser({...user});
@@ -98,6 +101,11 @@ export default function UserManagementPage() {
         });
     };
 
+    const roleOptions = [
+        {value: "user", label: "Benutzer"},
+        {value: "admin", label: "Administrator"}
+    ];
+
     return (
         <PageContainer>
             <ContentBackground>
@@ -120,17 +128,17 @@ export default function UserManagementPage() {
                 </StickyHeader>
 
                 <ContentBody>
-                    <div className="flex flex-col md:flex-row gap-6">
-                        {/* User List @todo selector component!*/}
-                        <div className="md:w-1/3 border-r border-gray-300">
+                    <div className="flex flex-col md:flex-row gap-0">
+                        {/* User List - Wider on desktop, attached to left */}
+                        <div className="md:w-1/2 lg:w-2/5 border-r border-gray-300 pr-6">
                             <h2>Benutzer</h2>
-                            <ul>
+                            <ul className="space-y-1">
                                 {users.map((user) => (
                                     <li
                                         key={user.id ?? user.userName}
                                         className={clsx(
-                                            "p-2 hover:bg-gray-200",
-                                            selectedUser?.id === user.id && "bg-gray-300 font-semibold"
+                                            "p-3 rounded cursor-pointer hover:bg-gray-200 transition-colors",
+                                            selectedUser?.id === user.id && "bg-blue-100 hover:bg-blue-200 font-semibold"
                                         )}
                                         onClick={() => handleSelectUser(user)}
                                     >
@@ -141,20 +149,13 @@ export default function UserManagementPage() {
                         </div>
 
                         {/* Edit Form */}
-                        <div className="md:w-2/3">
+                        <div className="md:w-1/2 lg:w-3/5 pl-6">
                             {selectedUser ? (
                                 <div>
                                     <h2>
                                         {selectedUser.id ? "Benutzer bearbeiten" : "Neuen Benutzer anlegen"}
                                     </h2>
-                                    <form
-                                        onSubmit={(e) => {
-                                            e.preventDefault();
-                                            handleSave();
-                                        }}
-                                        className="flex flex-col gap-3 max-w-md"
-                                    >
-                                        {/* @todo create component for laben and input field combination */}
+                                    <div className="flex flex-col gap-3 max-w-md">
                                         <label>Benutzername</label>
                                         <input
                                             type="text"
@@ -164,6 +165,7 @@ export default function UserManagementPage() {
                                                 setSelectedUser({...selectedUser, userName: e.target.value})
                                             }
                                         />
+
                                         <label>Vorname</label>
                                         <input
                                             type="text"
@@ -173,6 +175,7 @@ export default function UserManagementPage() {
                                                 setSelectedUser({...selectedUser, firstName: e.target.value})
                                             }
                                         />
+
                                         <label>Nachname</label>
                                         <input
                                             type="text"
@@ -182,6 +185,7 @@ export default function UserManagementPage() {
                                                 setSelectedUser({...selectedUser, lastName: e.target.value})
                                             }
                                         />
+
                                         <label>E-Mail</label>
                                         <input
                                             type="email"
@@ -192,46 +196,47 @@ export default function UserManagementPage() {
                                             }
                                         />
 
-                                        {isAdmin && (<label>Benutzergruppe</label>)}
                                         {isAdmin && (
-                                            // @todo style
-                                            <select
-                                                className="input-field"
-                                                value={selectedUser.role ?? "user"}
-                                                onChange={(e) =>
-                                                    setSelectedUser({...selectedUser, role: e.target.value})
-                                                }
-                                            >
-                                                <option value="user">Benutzer</option>
-                                                <option value="admin">Administrator</option>
-                                            </select>
+                                            <>
+                                                <label>Benutzergruppe</label>
+                                                <SelectField
+                                                    value={selectedUser.role ?? "user"}
+                                                    onChange={(value) =>
+                                                        setSelectedUser({...selectedUser, role: value})
+                                                    }
+                                                    options={roleOptions}
+                                                />
+                                            </>
                                         )}
 
                                         {/* Show password field only when creating new user */}
-                                        {!selectedUser.id && (<label>Passwort</label>)}
                                         {!selectedUser.id && (
-                                            <PasswordField
-                                                onPasswordChanged={setPassword}
-                                                onKeyDown={() => {
-                                                }}
-                                            />
-                                        )}
-                                        {!selectedUser.id && (<label>Passwort bestätigen</label>)}
-                                        {!selectedUser.id && (
-                                            <PasswordField
-                                                placeholder="Passwort bestätigen"
-                                                onPasswordChanged={setConfirmPassword}
-                                                onKeyDown={() => {
-                                                }}
-                                            />
+                                            <>
+                                                <label>Passwort</label>
+                                                <PasswordField
+                                                    onPasswordChanged={setPassword}
+                                                    onKeyDown={() => {
+                                                    }}
+                                                />
+
+                                                <label>Passwort bestätigen</label>
+                                                <PasswordField
+                                                    placeholder="Passwort bestätigen"
+                                                    onPasswordChanged={setConfirmPassword}
+                                                    onKeyDown={() => {
+                                                    }}
+                                                />
+                                            </>
                                         )}
 
-                                        {/* Change password button for existing user */}
+                                        {/* Change password link for existing user */}
                                         {selectedUser.id && (
-                                            <Button
-                                                text="Passwort ändern"
-                                                onClick={openPasswordModal}
-                                            />
+                                            <div className="mt-2 text-right">
+                                                <TextLinkButton
+                                                    text="Passwort ändern"
+                                                    onClick={openPasswordModal}
+                                                />
+                                            </div>
                                         )}
 
                                         <ButtonGroupLayout>
@@ -245,7 +250,7 @@ export default function UserManagementPage() {
                                                 onClick={loadData}
                                             />
                                         </ButtonGroupLayout>
-                                    </form>
+                                    </div>
                                 </div>
                             ) : (
                                 <p className="text-gray-600">Bitte einen Benutzer auswählen.</p>
@@ -264,4 +269,4 @@ export default function UserManagementPage() {
             </ContentBackground>
         </PageContainer>
     );
-}
+}
\ No newline at end of file