diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index f60bd41..e523db7 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -10,6 +10,8 @@
 
     let name: string;
     let password: string;
+    let passwordVisible: boolean;
+    let passwordInput: HTMLInputElement;
     let error: HTMLSpanElement;
 
     function submit() {
@@ -23,20 +25,32 @@
             });
     }
 
+    function togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        passwordInput.type = passwordVisible ? 'text' : 'password';
+    }
+
     $: if (browser && $token) goto("/account");
 </script>
 
 <Centered>
-    <Form submit={submit} style="padding-right: calc(var(--container-padding) - var(--icon-size) - var(--button-padding));">
+    <Form submit={submit}>
         <div style="display: inline-grid; align-items: center; row-gap: 10px; grid-template-columns: 1fr auto;">
             <h1>Login</h1>
 
             <!-- svelte-ignore a11y-autofocus -->
             <input name="name" type="text" bind:value={name} placeholder="Username or Email" style="grid-column: 1;" required autofocus/>
 
-            <input name="password" type="password" bind:value={password} placeholder="Password" style="grid-column: 1;" required />
+            <div style="position: relative; grid-column: 1;">
+                <input name="password" bind:this={passwordInput} type="password" bind:value={password}
+                       placeholder="Password" required style="padding-right: 34px;"/>
+
+                <button type="button" on:click={togglePasswordVisibility} id="password-toggle">
+                    <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
+                </button>
+            </div>
 
-            <Link location="/forgotPassword" style="margin-inline: calc(var(--button-padding) / 2); grid-column: 2; width: fit-content;"><Icon src="help-circle" /></Link>
+            <Link location="/forgotPassword" style="grid-column: 1;">Password reset</Link>
 
             <button type="submit" style="grid-column: 1;">Login</button>
 
@@ -46,3 +60,17 @@
         </div>
     </Form>
 </Centered>
+
+<style>
+    #password-toggle {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+        border: none !important;
+        background: none !important;
+        width: 24px;
+        height: 24px;
+    }
+</style>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index 239110b..69afb37 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
     import Centered from "$lib/components/centered.svelte";
     import Form from "$lib/components/form.svelte";
-    import { api } from "$lib/api";
-    import { browser } from "$app/environment";
-    import { token } from "$lib/user";
-    import { goto } from "$app/navigation";
-    import { Turnstile } from 'svelte-turnstile';
+    import Icon from "$lib/components/icon.svelte";
+    import {api} from "$lib/api";
+    import {browser} from "$app/environment";
+    import {token} from "$lib/user";
+    import {goto} from "$app/navigation";
+    import {Turnstile} from 'svelte-turnstile';
 
     let username: string;
     let email: string;
     let password: string;
+    let passwordVisible: boolean;
+    let passwordInput: HTMLInputElement;
     let cfToken: string;
     let error: HTMLSpanElement;
 
@@ -40,6 +43,11 @@
             });
     }
 
+    function togglePasswordVisibility() {
+        passwordVisible = !passwordVisible;
+        passwordInput.type = passwordVisible ? 'text' : 'password';
+    }
+
     if (browser && $token) goto("/account");
 </script>
 
@@ -56,23 +64,44 @@
 
             <input bind:value={email} type="email" placeholder="Email" id="email" name="email" required>
 
-            <input bind:value={password} type="password" placeholder="Password" id="password" name="password" required>
+            <div style="position: relative; grid-column: 1;">
+                <input name="password" bind:this={passwordInput} type="password" bind:value={password}
+                       placeholder="Password" required style="padding-right: 34px;"/>
+
+                <button type="button" on:click={togglePasswordVisibility} id="password-toggle">
+                    <Icon src={passwordVisible ? 'eye-off' : 'eye'}/>
+                </button>
+            </div>
 
             <Turnstile
-                    id="captcha"
-                    siteKey="1x00000000000000000000AA"
-                    theme="light"
-                    on:turnstile-callback={onTurnstileSuccess}
-                    on:turnstile-error={onTurnstileError}
-                    on:turnstile-expired={onTurnstileError}
-                    on:turnstile-timeout={onTurnstileError}
+                id="captcha"
+                siteKey="1x00000000000000000000AA"
+                theme="light"
+                on:turnstile-callback={onTurnstileSuccess}
+                on:turnstile-error={onTurnstileError}
+                on:turnstile-expired={onTurnstileError}
+                on:turnstile-timeout={onTurnstileError}
             />
 
             <button type="submit">Register</button>
 
-            <p bind:this={error} class="error" style="display: none;" />
+            <p bind:this={error} class="error" style="display: none;"/>
 
             <p>Have an account? <a href="/login">Login</a></p>
         </Form>
     {/if}
 </Centered>
+
+<style>
+    #password-toggle {
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+        border: none !important;
+        background: none !important;
+        width: 24px;
+        height: 24px;
+    }
+</style>
diff --git a/static/icons/eye-off.svg b/static/icons/eye-off.svg
new file mode 100644
index 0000000..0d7ccb2
--- /dev/null
+++ b/static/icons/eye-off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
\ No newline at end of file
diff --git a/static/icons/eye.svg b/static/icons/eye.svg
new file mode 100644
index 0000000..8ec58f6
--- /dev/null
+++ b/static/icons/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
\ No newline at end of file
diff --git a/static/icons/help-circle.svg b/static/icons/help-circle.svg
index d05cae1..12b3aad 100644
--- a/static/icons/help-circle.svg
+++ b/static/icons/help-circle.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52153 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 17H12.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.09 9C9.3251 8.33167 9.78915 7.76811 10.4 7.40913C11.0108 7.05016 11.7289 6.91894 12.4272 7.03871C13.1255 7.15849 13.7588 7.52153 14.2151 8.06353C14.6713 8.60553 14.9211 9.29152 14.92 10C14.92 12 11.92 13 11.92 13" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 17H12.01" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>