diff --git a/frontend/src/lib/components/textfield/PasswordField.svelte b/frontend/src/lib/components/textfield/PasswordField.svelte
new file mode 100644
index 0000000..b332cdc
--- /dev/null
+++ b/frontend/src/lib/components/textfield/PasswordField.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Lock from '../icons/Lock.svelte';
+	import TextField from './TextField.svelte';
+
+	export let placeholder: string = '';
+	export let value: string = '';
+	export let error: string = '';
+</script>
+
+<TextField
+	bind:error
+	bind:value
+	on:click
+	on:keydown
+	on:keyup
+	{placeholder}
+	on:change
+	type="password"
+	icon
+>
+	<div slot="icon" class="flex items-center justify-center">
+		<Lock />
+	</div>
+</TextField>
+
+<style>
+	div {
+		@apply text-sspsBlue;
+	}
+</style>
diff --git a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
index b29a942..f1771ae 100644
--- a/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
+++ b/frontend/src/routes/(admin)/admin/auth/login/+page.svelte
@@ -7,14 +7,16 @@
 	import Lock from '$lib/components/icons/Lock.svelte';
 	import { apiLogin } from '$lib/@api/admin';
 	import { goto } from '$app/navigation';
+	import Submit from '$lib/components/button/Submit.svelte';
+	import PasswordField from '$lib/components/textfield/PasswordField.svelte';
 
 	let adminIdValue = '';
 	let adminPasswordValue = '';
 
 	const login = async () => {
 		try {
-			await apiLogin({adminId: Number(adminIdValue), password: adminPasswordValue});
-			goto("/admin/dashboard");
+			await apiLogin({ adminId: Number(adminIdValue), password: adminPasswordValue });
+			goto('/admin/dashboard');
 		} catch (e) {
 			console.log(e);
 		}
@@ -37,19 +39,12 @@
 				<TextField bind:value={adminIdValue} placeholder="Admin id" type="number" />
 			</span>
 			<span class="mt-8">
-				<TextField bind:value={adminPasswordValue} placeholder="Heslo" type="password" icon>
-					<div slot="icon" class="flex items-center justify-center">
-						<Lock />
-					</div>
-				</TextField>
+				<PasswordField bind:value={adminPasswordValue} placeholder="Heslo" />
 			</span>
 		</div>
-		<input
-			class="bg-sspsBlue hover:bg-sspsBlueDark mt-8 w-3/5 rounded-lg p-3 text-xl font-semibold text-white transition-colors duration-300"
-			type="submit"
-			value="Odeslat"
-			on:click={login}
-		/>
+		<div class="mt-8  w-3/5">
+			<Submit value="Odeslat" on:click={login} />
+		</div>
 	</div>
 </SplitLayout>