diff --git a/web/src/lib/components/app-sidebar.svelte b/web/src/lib/components/app-sidebar.svelte
index 59a3809..d7d9e4a 100644
--- a/web/src/lib/components/app-sidebar.svelte
+++ b/web/src/lib/components/app-sidebar.svelte
@@ -35,12 +35,6 @@
                 url: '/dashboard/settings',
                 icon: Settings,
                 isActive: true,
-                items: [
-                    {
-                        title: 'Users',
-                        url: '/dashboard/settings#users'
-                    }
-                ]
             }
         ],
         navSecondary: [
diff --git a/web/src/lib/components/nav-user.svelte b/web/src/lib/components/nav-user.svelte
index b3282a4..715253f 100644
--- a/web/src/lib/components/nav-user.svelte
+++ b/web/src/lib/components/nav-user.svelte
@@ -59,28 +59,6 @@
 					</div>
 				</DropdownMenu.Label>
 				<DropdownMenu.Separator/>
-				<DropdownMenu.Group>
-					<DropdownMenu.Item>
-						<Sparkles/>
-						Upgrade to Pro
-					</DropdownMenu.Item>
-				</DropdownMenu.Group>
-				<DropdownMenu.Separator/>
-				<DropdownMenu.Group>
-					<DropdownMenu.Item>
-						<BadgeCheck/>
-						Account
-					</DropdownMenu.Item>
-					<DropdownMenu.Item>
-						<CreditCard/>
-						Billing
-					</DropdownMenu.Item>
-					<DropdownMenu.Item>
-						<Bell/>
-						Notifications
-					</DropdownMenu.Item>
-				</DropdownMenu.Group>
-				<DropdownMenu.Separator/>
 				<DropdownMenu.Item onclick={() => handleLogout()}>
 					<LogOut/>
 					Log out
diff --git a/web/src/lib/components/user-settings.svelte b/web/src/lib/components/user-settings.svelte
new file mode 100644
index 0000000..308f1c6
--- /dev/null
+++ b/web/src/lib/components/user-settings.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+    import type {User} from '$lib/types.js';
+    import CheckmarkX from '$lib/components/checkmark-x.svelte';
+    import * as Table from '$lib/components/ui/table/index.js';
+    import {Button} from "$lib/components/ui/button/index.js";
+    import {env} from "$env/dynamic/public";
+    import {toast} from "svelte-sonner";
+    import * as Dialog from "$lib/components/ui/dialog/index.js";
+    import {getTorrentQualityString} from "$lib/utils";
+    import {Label} from "$lib/components/ui/label/index.js";
+    import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
+    import {Input} from "$lib/components/ui/input/index.js";
+    import {invalidateAll} from "$app/navigation";
+    import {getContext} from 'svelte';
+
+    let newPassword: string = $state('');
+    let newEmail: string = $state('');
+    let dialogOpen = $state(false);
+
+    async function saveUser() {
+        try {
+            const response = await fetch(`${env.PUBLIC_API_URL}/users/me`, {
+                method: 'PATCH',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                credentials: 'include',
+                body: JSON.stringify({
+                    ...newPassword !== "" && {password: newPassword},
+                    ...newEmail !== "" && {password: newEmail}
+
+                })
+            });
+
+            if (response.ok) {
+                toast.success(`Updated details successfully.`);
+                dialogOpen = false;
+            } else {
+                const errorText = await response.text();
+                console.error(`Failed to update user: ${response.statusText}`, errorText);
+                toast.error(`Failed to update user: ${response.statusText}`);
+            }
+        } catch (error) {
+            console.error('Error updating user:', error);
+            toast.error('Error updating user: ' + (error instanceof Error ? error.message : String(error)));
+        } finally {
+            newPassword = '';
+            newEmail = '';
+        }
+    }
+</script>
+
+<Dialog.Root bind:open={dialogOpen}>
+    <Dialog.Trigger>
+        <Button class="w-full" onclick={() => dialogOpen = true} variant="outline">
+            Edit my details
+        </Button>
+    </Dialog.Trigger>
+    <Dialog.Content class="max-w-[600px] w-full rounded-lg shadow-lg bg-white p-6">
+        <Dialog.Header>
+            <Dialog.Title class="text-xl font-semibold mb-1">
+                Edit User Details
+            </Dialog.Title>
+            <Dialog.Description class="text-sm text-gray-500 mb-4">
+                Change your email or password. Leave fields empty to not change them.
+            </Dialog.Description>
+        </Dialog.Header>
+        <div class="space-y-6">
+            <!-- Email -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="email">Email</Label>
+                <Input
+                        bind:value={newEmail}
+                        class="w-full"
+                        id="email"
+                        placeholder="Keep empty to not change the email"
+                        type="email"
+                />
+            </div>
+            <!-- Password -->
+            <div>
+                <Label class="block text-sm font-medium mb-1" for="password">Password</Label>
+                <Input
+                        bind:value={newPassword}
+                        class="w-full"
+                        id="password"
+                        placeholder="Keep empty to not change the password"
+                        type="password"
+                />
+            </div>
+        </div>
+        <div class="mt-8 flex justify-end gap-2">
+            <Button onclick={() => saveUser()} variant="destructive">Save</Button>
+        </div>
+    </Dialog.Content>
+</Dialog.Root>
\ No newline at end of file
diff --git a/web/src/routes/dashboard/settings/+page.svelte b/web/src/routes/dashboard/settings/+page.svelte
index 5497b4b..912f61e 100644
--- a/web/src/routes/dashboard/settings/+page.svelte
+++ b/web/src/routes/dashboard/settings/+page.svelte
@@ -2,22 +2,36 @@
     import UserTable from '$lib/components/user-data-table.svelte';
     import {page} from '$app/state';
     import * as Card from "$lib/components/ui/card/index.js";
+    import {getContext} from "svelte";
+    import UserSettings from '$lib/components/user-settings.svelte';
 
-
+    let currentUser = getContext("user")
     let users = page.data.users;
 </script>
-<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0">
+
+<div class="flex w-full flex-1 flex-col gap-4 p-4 pt-0 max-w-[1000px] mx-auto">
     <h1 class="scroll-m-20 my-6 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
         Settings
     </h1>
-    <Card.Root id="users">
+    <Card.Root id="me">
         <Card.Header>
-            <Card.Title>Users</Card.Title>
-            <Card.Description>Edit or delete users</Card.Description>
+            <Card.Title>You</Card.Title>
+            <Card.Description>Change your email or password</Card.Description>
         </Card.Header>
         <Card.Content>
-            <UserTable bind:users={users}/>
+            <UserSettings/>
         </Card.Content>
     </Card.Root>
+    {#if currentUser().is_superuser}
+        <Card.Root id="users">
+            <Card.Header>
+                <Card.Title>Users</Card.Title>
+                <Card.Description>Edit or delete users</Card.Description>
+            </Card.Header>
+            <Card.Content>
+                <UserTable bind:users={users}/>
+            </Card.Content>
+        </Card.Root>
+    {/if}
 </div>