From 1fe121db7f83d2b3526e432afe8070524663cdc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kol=C3=A1rik?= <martin@kolarik.sk>
Date: Sat, 17 Aug 2024 16:46:59 +0200
Subject: [PATCH] fix: improve login page style

---
 assets/images/login-bg-dark.svg | 194 ++++++++++++++++----------------
 assets/images/login-bg.svg      |  68 +++++------
 pages/login.vue                 |   8 +-
 3 files changed, 130 insertions(+), 140 deletions(-)

diff --git a/assets/images/login-bg-dark.svg b/assets/images/login-bg-dark.svg
index a443caa5..e8672ca2 100644
--- a/assets/images/login-bg-dark.svg
+++ b/assets/images/login-bg-dark.svg
@@ -1,98 +1,100 @@
 <svg width="936" height="1008" viewBox="0 0 936 1008" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_596_39)">
-<rect width="936" height="1008" rx="12" fill="#17D4A7"/>
-<g filter="url(#filter0_i_596_39)">
-<circle cy="444" r="1160" fill="#ECFFFA"/>
-</g>
-<g filter="url(#filter1_i_596_39)">
-<circle cy="444" r="812" fill="#ECFFFA"/>
-</g>
-<g filter="url(#filter2_i_596_39)">
-<ellipse cy="444" rx="1101" ry="1070" fill="#17233a"/>
-</g>
-<g filter="url(#filter3_i_596_39)">
-<ellipse cy="444" rx="836" ry="812" fill="#17233a"/>
-</g>
-<g filter="url(#filter4_i_596_39)">
-<ellipse cy="444" rx="477" ry="464" fill="#17233a"/>
-</g>
-<g filter="url(#filter5_di_596_39)">
-<ellipse cy="444" rx="30" ry="29" fill="#17D4A7"/>
-</g>
-<path d="M198 444C198 550.01 109.381 636 0 636C-109.381 636 -198 550.01 -198 444C-198 337.99 -109.381 252 0 252C109.381 252 198 337.99 198 444Z" stroke="#17D4A7" stroke-width="2"/>
-<path opacity="0.4" d="M334 444C334 623.467 184.489 769 0 769C-184.489 769 -334 623.467 -334 444C-334 264.533 -184.489 119 0 119C184.489 119 334 264.533 334 444Z" stroke="#17D4A7" stroke-width="2"/>
-<path opacity="0.24" d="M476 444C476 699.682 262.914 907 0 907C-262.914 907 -476 699.682 -476 444C-476 188.318 -262.914 -19 0 -19C262.914 -19 476 188.318 476 444Z" stroke="#17D4A7" stroke-width="2"/>
-<path opacity="0.24" d="M655 444C655 795.779 361.773 1081 0 1081C-361.773 1081 -655 795.779 -655 444C-655 92.2207 -361.773 -193 0 -193C361.773 -193 655 92.2207 655 444Z" stroke="#17D4A7" stroke-width="2"/>
-</g>
-<defs>
-<filter id="filter0_i_596_39" x="-1160" y="-770.36" width="2320" height="2374.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-54.36"/>
-<feGaussianBlur stdDeviation="45.3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.952941 0 0 0 0 0.337255 0 0 0 0 0.203922 0 0 0 0.48 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
-</filter>
-<filter id="filter1_i_596_39" x="-812" y="-422.36" width="1624" height="1678.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-54.36"/>
-<feGaussianBlur stdDeviation="45.3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.952941 0 0 0 0 0.337255 0 0 0 0 0.203922 0 0 0 0.48 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
-</filter>
-<filter id="filter2_i_596_39" x="-1101" y="-680.36" width="2202" height="2194.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-54.36"/>
-<feGaussianBlur stdDeviation="45.3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
-</filter>
-<filter id="filter3_i_596_39" x="-836" y="-422.36" width="1672" height="1678.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-54.36"/>
-<feGaussianBlur stdDeviation="45.3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
-</filter>
-<filter id="filter4_i_596_39" x="-477" y="-74.36" width="954" height="982.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-54.36"/>
-<feGaussianBlur stdDeviation="45.3"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
-</filter>
-<filter id="filter5_di_596_39" x="-43.3" y="415" width="86.6" height="86.3" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="15"/>
-<feGaussianBlur stdDeviation="6.65"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0.0901961 0 0 0 0 0.831373 0 0 0 0 0.654902 0 0 0 0.48 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_596_39"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_596_39" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="7"/>
-<feGaussianBlur stdDeviation="5.35"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
-<feBlend mode="normal" in2="shape" result="effect2_innerShadow_596_39"/>
-</filter>
-<clipPath id="clip0_596_39">
-<rect width="936" height="1008" rx="12" fill="white"/>
-</clipPath>
-</defs>
+	<g filter="url(#filter2_i_596_39)">
+		<ellipse cy="444" rx="1101" ry="1070" fill="#1a2842"/>
+	</g>
+	<g filter="url(#filter3_i_596_39)">
+		<ellipse cy="444" rx="836" ry="812" fill="#1a2842"/>
+	</g>
+	<g filter="url(#filter4_i_596_39)">
+		<ellipse cy="444" rx="477" ry="464" fill="#1a2842"/>
+	</g>
+	<g filter="url(#filter5_di_596_39)">
+		<ellipse cy="444" rx="30" ry="29" fill="#17D4A7"/>
+	</g>
+	<path
+		d="M198 444C198 550.01 109.381 636 0 636C-109.381 636 -198 550.01 -198 444C-198 337.99 -109.381 252 0 252C109.381 252 198 337.99 198 444Z"
+		stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.4"
+	      d="M334 444C334 623.467 184.489 769 0 769C-184.489 769 -334 623.467 -334 444C-334 264.533 -184.489 119 0 119C184.489 119 334 264.533 334 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.24"
+	      d="M476 444C476 699.682 262.914 907 0 907C-262.914 907 -476 699.682 -476 444C-476 188.318 -262.914 -19 0 -19C262.914 -19 476 188.318 476 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.24"
+	      d="M655 444C655 795.779 361.773 1081 0 1081C-361.773 1081 -655 795.779 -655 444C-655 92.2207 -361.773 -193 0 -193C361.773 -193 655 92.2207 655 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
+	<defs>
+		<filter id="filter0_i_596_39" x="-1160" y="-770.36" width="2320" height="2374.36" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="-54.36"/>
+			<feGaussianBlur stdDeviation="45.3"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.952941 0 0 0 0 0.337255 0 0 0 0 0.203922 0 0 0 0.48 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
+		</filter>
+		<filter id="filter1_i_596_39" x="-812" y="-422.36" width="1624" height="1678.36" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="-54.36"/>
+			<feGaussianBlur stdDeviation="45.3"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.952941 0 0 0 0 0.337255 0 0 0 0 0.203922 0 0 0 0.48 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
+		</filter>
+		<filter id="filter2_i_596_39" x="-1101" y="-680.36" width="2202" height="2194.36" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="-54.36"/>
+			<feGaussianBlur stdDeviation="45.3"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
+		</filter>
+		<filter id="filter3_i_596_39" x="-836" y="-422.36" width="1672" height="1678.36" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="-54.36"/>
+			<feGaussianBlur stdDeviation="45.3"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
+		</filter>
+		<filter id="filter4_i_596_39" x="-477" y="-74.36" width="954" height="982.36" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="-54.36"/>
+			<feGaussianBlur stdDeviation="45.3"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.624754 0 0 0 0 0.906901 0 0 0 0 0.839723 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="shape" result="effect1_innerShadow_596_39"/>
+		</filter>
+		<filter id="filter5_di_596_39" x="-43.3" y="415" width="86.6" height="86.3" filterUnits="userSpaceOnUse"
+		        color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="15"/>
+			<feGaussianBlur stdDeviation="6.65"/>
+			<feComposite in2="hardAlpha" operator="out"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0.0901961 0 0 0 0 0.831373 0 0 0 0 0.654902 0 0 0 0.48 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_596_39"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_596_39" result="shape"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feOffset dy="7"/>
+			<feGaussianBlur stdDeviation="5.35"/>
+			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+			<feBlend mode="normal" in2="shape" result="effect2_innerShadow_596_39"/>
+		</filter>
+	</defs>
 </svg>
diff --git a/assets/images/login-bg.svg b/assets/images/login-bg.svg
index 44afb535..43272816 100644
--- a/assets/images/login-bg.svg
+++ b/assets/images/login-bg.svg
@@ -1,43 +1,34 @@
 <svg width="936" height="1008" viewBox="0 0 936 1008" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<g clip-path="url(#clip0_596_39)">
-		<rect width="936" height="1008" rx="12" fill="#17D4A7"/>
-		<g filter="url(#filter0_i_596_39)">
-			<circle cy="444" r="1160" fill="#ECFFFA"/>
-		</g>
-		<g filter="url(#filter1_i_596_39)">
-			<circle cy="444" r="812" fill="#ECFFFA"/>
-		</g>
-		<g filter="url(#filter2_i_596_39)">
-			<ellipse cy="444" rx="1101" ry="1070" fill="#FAFAFA"/>
-		</g>
-		<g filter="url(#filter3_i_596_39)">
-			<ellipse cy="444" rx="836" ry="812" fill="#FAFAFA"/>
-		</g>
-		<g filter="url(#filter4_i_596_39)">
-			<ellipse cy="444" rx="477" ry="464" fill="#FAFAFA"/>
-		</g>
-		<g filter="url(#filter5_di_596_39)">
-			<ellipse cy="444" rx="30" ry="29" fill="#17D4A7"/>
-		</g>
-		<path
-			d="M198 444C198 550.01 109.381 636 0 636C-109.381 636 -198 550.01 -198 444C-198 337.99 -109.381 252 0 252C109.381 252 198 337.99 198 444Z"
-			stroke="#17D4A7" stroke-width="2"/>
-		<path opacity="0.4"
-		      d="M334 444C334 623.467 184.489 769 0 769C-184.489 769 -334 623.467 -334 444C-334 264.533 -184.489 119 0 119C184.489 119 334 264.533 334 444Z"
-		      stroke="#17D4A7" stroke-width="2"/>
-		<path opacity="0.24"
-		      d="M476 444C476 699.682 262.914 907 0 907C-262.914 907 -476 699.682 -476 444C-476 188.318 -262.914 -19 0 -19C262.914 -19 476 188.318 476 444Z"
-		      stroke="#17D4A7" stroke-width="2"/>
-		<path opacity="0.24"
-		      d="M655 444C655 795.779 361.773 1081 0 1081C-361.773 1081 -655 795.779 -655 444C-655 92.2207 -361.773 -193 0 -193C361.773 -193 655 92.2207 655 444Z"
-		      stroke="#17D4A7" stroke-width="2"/>
+	<g filter="url(#filter2_i_596_39)">
+		<ellipse cy="444" rx="1101" ry="1070" fill="#FAFAFA"/>
 	</g>
+	<g filter="url(#filter3_i_596_39)">
+		<ellipse cy="444" rx="836" ry="812" fill="#FAFAFA"/>
+	</g>
+	<g filter="url(#filter4_i_596_39)">
+		<ellipse cy="444" rx="477" ry="464" fill="#FAFAFA"/>
+	</g>
+	<g filter="url(#filter5_di_596_39)">
+		<ellipse cy="444" rx="30" ry="29" fill="#17D4A7"/>
+	</g>
+	<path
+		d="M198 444C198 550.01 109.381 636 0 636C-109.381 636 -198 550.01 -198 444C-198 337.99 -109.381 252 0 252C109.381 252 198 337.99 198 444Z"
+		stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.4"
+	      d="M334 444C334 623.467 184.489 769 0 769C-184.489 769 -334 623.467 -334 444C-334 264.533 -184.489 119 0 119C184.489 119 334 264.533 334 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.24"
+	      d="M476 444C476 699.682 262.914 907 0 907C-262.914 907 -476 699.682 -476 444C-476 188.318 -262.914 -19 0 -19C262.914 -19 476 188.318 476 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
+	<path opacity="0.24"
+	      d="M655 444C655 795.779 361.773 1081 0 1081C-361.773 1081 -655 795.779 -655 444C-655 92.2207 -361.773 -193 0 -193C361.773 -193 655 92.2207 655 444Z"
+	      stroke="#17D4A7" stroke-width="2"/>
 	<defs>
 		<filter id="filter0_i_596_39" x="-1160" y="-770.36" width="2320" height="2374.36" filterUnits="userSpaceOnUse"
 		        color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dy="-54.36"/>
 			<feGaussianBlur stdDeviation="45.3"/>
 			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
@@ -48,7 +39,7 @@
 		        color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dy="-54.36"/>
 			<feGaussianBlur stdDeviation="45.3"/>
 			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
@@ -70,7 +61,7 @@
 		        color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dy="-54.36"/>
 			<feGaussianBlur stdDeviation="45.3"/>
 			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
@@ -81,7 +72,7 @@
 		        color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
 			<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dy="-54.36"/>
 			<feGaussianBlur stdDeviation="45.3"/>
 			<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
@@ -91,7 +82,7 @@
 		<filter id="filter5_di_596_39" x="-43.3" y="415" width="86.6" height="86.3" filterUnits="userSpaceOnUse"
 		        color-interpolation-filters="sRGB">
 			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
 			<feOffset dy="15"/>
 			<feGaussianBlur stdDeviation="6.65"/>
 			<feComposite in2="hardAlpha" operator="out"/>
@@ -105,8 +96,5 @@
 			<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
 			<feBlend mode="normal" in2="shape" result="effect2_innerShadow_596_39"/>
 		</filter>
-		<clipPath id="clip0_596_39">
-			<rect width="936" height="1008" rx="12" fill="white"/>
-		</clipPath>
 	</defs>
 </svg>
diff --git a/pages/login.vue b/pages/login.vue
index 04b8b73d..aa401bcb 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,6 +1,6 @@
 <template>
-	<section class="grid grid-cols-[480px_auto] max-md:grid-cols-1">
-		<div class="flex flex-col px-20 py-12" style="box-shadow: 0 20px 25px -5px rgba(0 0 0 / .1), 0 8px 10px -6px rgba(0 0 0 / .1); z-index: 2;">
+	<section class="grid grid-cols-[480px_auto] max-md:grid-cols-1 dark:bg-dark-800">
+		<div class="flex flex-col px-20 py-12 shadow-xl max-[480px]:px-10 dark:shadow-dark-800" style="z-index: 2;">
 			<div class="mb-auto flex flex-col">
 				<div class="flex items-center">
 					<picture class="inline-flex">
@@ -17,7 +17,7 @@
 			</div>
 
 			<div class="mb-auto">
-				<h2 class="text-4xl font-bold">Sign in</h2>
+				<h2 class="text-4xl font-bold">Sign In</h2>
 				<Divider class="h-2 before:border-t-2"/>
 				<Button
 					class="h-12 w-full bg-black !text-left"
@@ -34,7 +34,7 @@
 			</NuxtLink>
 		</div>
 
-		<div class="rounded-xl bg-[url('~/assets/images/login-bg.svg')] bg-cover max-md:hidden dark:bg-[url('~/assets/images/login-bg-dark.svg')]"/>
+		<div class="bg-[url('~/assets/images/login-bg.svg')] bg-cover max-md:hidden dark:bg-[url('~/assets/images/login-bg-dark.svg')]"/>
 	</section>
 </template>