diff --git a/client/src/app/pages/guest/sign/sign.component.html b/client/src/app/pages/guest/sign/sign.component.html
index b51f17c..7ca742f 100644
--- a/client/src/app/pages/guest/sign/sign.component.html
+++ b/client/src/app/pages/guest/sign/sign.component.html
@@ -1,4 +1,5 @@
-<div class="auth-wrapper">
+
+<div class="auth-wrapper" >
 	<div class="auth__wrap">
 		<div class="auth__img">
 			<icon-spider
@@ -15,7 +16,7 @@
 					dark_mode
 				</span>
 				<span
-					class="material-icons"
+					class="material-icons auth__icon"
 					*ngIf="us.mode"
 					(click)="us.setMode()"
 				>
diff --git a/client/src/app/pages/guest/sign/sign.component.scss b/client/src/app/pages/guest/sign/sign.component.scss
index 3d8d589..e69de29 100644
--- a/client/src/app/pages/guest/sign/sign.component.scss
+++ b/client/src/app/pages/guest/sign/sign.component.scss
@@ -1,217 +0,0 @@
-@use 'src/scss/utils/mixins' as mixins;
-@use 'src/scss/utils/media' as media;
-@use 'src/scss/utils/vars' as vars;
-
-:host {
-	position: fixed;
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-}
-
-.auth-wrapper {
-	@include mixins.flexBox(flex, null, center, center, null);
-	background: var(--c-bg-primary);
-	flex-grow: 1;
-	padding: 20px;
-	transition: all 0.3s;
-}
-
-.auth {
-	max-width: 340px;
-	width: 100%;
-	padding: 30px;
-	border-radius: vars.$b-radius-card;
-	box-shadow: 0px 0px 6px var(--c-shadow);
-	background: var(--c-bg-secondary);
-	display: flex;
-	flex-flow: row wrap;
-	position: relative;
-
-	span {
-		position: absolute;
-		right: 25px;
-		top: 25px;
-		z-index: 9;
-		cursor: pointer;
-	}
-
-	@include media.bp-max(sm) {
-		padding: 25px;
-		flex-flow: column wrap;
-	}
-
-	&__title {
-		font-size: vars.$fs + 8px;
-		font-weight: vars.$ff-bold;
-		color: var(--c-text-primary);
-		text-align: center;
-		margin-bottom: 15px;
-
-		@include media.bp-max(sm) {
-			font-size: vars.$fs + 2px;
-		}
-	}
-
-	&__btn {
-		text-align: center;
-		margin-top: 30px;
-
-		.w-btn {
-			margin: 0;
-			width: 100%;
-		}
-	}
-
-	&__wrap {
-		display: flex;
-		flex-flow: row wrap;
-		align-items: center;
-		max-width: 880px;
-		width: 100%;
-
-		@include media.bp-max(sm) {
-			padding: 25px;
-			flex-flow: column wrap;
-		}
-	}
-
-	&__img {
-		flex: 0 0 50%;
-		max-width: 50%;
-		display: flex;
-		position: relative;
-		padding-right: 40px;
-
-		span {
-			left: 50%;
-			transform: translate(-78%);
-			position: absolute;
-			font-size: 320px;
-			position: absolute;
-			opacity: 0;
-			cursor: pointer;
-
-			@include media.bp-max(sm) {
-				font-size: 70px;
-				transform: translate(-50%);
-			}
-		}
-
-		img {
-			max-width: 260px;
-			width: 100%;
-			object-fit: cover;
-		}
-
-		svg {
-			max-width: 260px;
-			width: 100%;
-			height: 100%;
-		}
-
-		@include media.bp-max(sm) {
-			max-width: 60px;
-			margin: 0 auto;
-			flex: 0 0 100%;
-			padding: 0 0 30px 0;
-
-			svg {
-				height: 100%;
-				width: 100%;
-			}
-		}
-	}
-
-	&__form {
-		width: 95%;
-		flex: 0 0 50%;
-		max-width: 50%;
-		padding-left: 40px;
-		display: flex;
-		justify-content: flex-end;
-
-		@include media.bp-max(sm) {
-			flex: 0 0 100%;
-			max-width: 100%;
-			justify-content: center;
-			padding: 0;
-		}
-	}
-
-	@include media.bp-max(sm) {
-		.form__title {
-			font-size: vars.$fs - 2px;
-		}
-	}
-}
-
-wform {
-	flex: 1 0;
-
-	@include media.bp-max(sm) {
-		flex: 0 0 100%;
-		padding: 0;
-	}
-}
-
-.w-forms {
-	position: relative;
-
-	&__level {
-		top: 5px;
-		right: 5px;
-		position: absolute;
-		display: inline-block;
-		color: var(--c-text-secondary);
-		// font-size: calc(#{$fs} - 6px);
-		font-size: 22px;
-		letter-spacing: vars.$letter-spacing;
-		transition: vars.$transition;
-
-		&._sky {
-			color: vars.$c-info;
-		}
-
-		&._orange {
-			color: vars.$c-warn;
-		}
-
-		&._green {
-			color: vars.$c-success;
-		}
-	}
-
-	&__input {
-		padding-right: 35px;
-	}
-
-	&__input-block {
-		position: relative;
-	}
-
-	&__toggle {
-		display: flex;
-		position: absolute;
-		right: 10px;
-		top: 50%;
-		color: var(--c-placeholder);
-		transform: translateY(-50%);
-		cursor: pointer;
-
-		i {
-			font-size: 21px;
-		}
-	}
-
-	.icon-visibility {
-		color: var(--c-primary);
-	}
-}
-@media screen and (max-width: 768px) {
-	.auth__img {
-		display: none;
-	}
-}
diff --git a/client/src/scss/layout/_base.scss b/client/src/scss/layout/_base.scss
index 0d89cdc..28c2ab6 100644
--- a/client/src/scss/layout/_base.scss
+++ b/client/src/scss/layout/_base.scss
@@ -35,4 +35,213 @@ body {
 
 .showTable{
     padding: 20px 20px 0 20px !important;
-}
\ No newline at end of file
+}
+
+
+.auth-wrapper {
+	display: flex;
+    justify-content: center;
+    align-items: center;
+	background: var(--c-bg-primary);
+	flex-grow: 1;
+	padding: 20px;
+	transition: all 0.3s;
+	height: 100vh;
+}
+
+.auth {
+	max-width: 340px;
+	width: 100%;
+	padding: 30px;
+	border-radius: vars.$b-radius-card;
+	box-shadow: 0px 0px 6px var(--c-shadow);
+	background: var(--c-bg-secondary);
+	display: flex;
+	flex-flow: row wrap;
+	position: relative;
+
+	&__icon {
+		position: absolute;
+		right: 25px;
+		top: 25px;
+		z-index: 9;
+		cursor: pointer;
+	}
+
+	@include media.bp-max(sm) {
+		padding: 25px;
+		flex-flow: column wrap;
+	}
+
+	&__title {
+		font-size: vars.$fs + 8px;
+		font-weight: vars.$ff-bold;
+		color: var(--c-text-primary);
+		text-align: center;
+		margin-bottom: 15px;
+
+		@include media.bp-max(sm) {
+			font-size: vars.$fs + 2px;
+		}
+	}
+
+	&__btn {
+		text-align: center;
+		margin-top: 30px;
+
+		.w-btn {
+			margin: 0;
+			width: 100%;
+		}
+	}
+
+	&__wrap {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
+		max-width: 880px;
+		width: 100%;
+
+		@include media.bp-max(sm) {
+			padding: 25px;
+			flex-flow: column wrap;
+		}
+	}
+
+	&__img {
+		flex: 0 0 50%;
+		max-width: 50%;
+		display: flex;
+		position: relative;
+		padding-right: 40px;
+
+		span {
+			left: 50%;
+			transform: translate(-78%);
+			position: absolute;
+			font-size: 320px;
+			position: absolute;
+			opacity: 0;
+			cursor: pointer;
+
+			@include media.bp-max(sm) {
+				font-size: 70px;
+				transform: translate(-50%);
+			}
+		}
+
+		img {
+			max-width: 260px;
+			width: 100%;
+			object-fit: cover;
+		}
+
+		svg {
+			max-width: 260px;
+			width: 100%;
+			height: 100%;
+		}
+
+		@include media.bp-max(sm) {
+			max-width: 60px;
+			margin: 0 auto;
+			flex: 0 0 100%;
+			padding: 0 0 30px 0;
+
+			svg {
+				height: 100%;
+				width: 100%;
+			}
+		}
+	}
+
+	&__form {
+		width: 95%;
+		flex: 0 0 50%;
+		max-width: 50%;
+		padding-left: 40px;
+		display: flex;
+		justify-content: flex-end;
+
+		@include media.bp-max(sm) {
+			flex: 0 0 100%;
+			max-width: 100%;
+			justify-content: center;
+			padding: 0;
+		}
+	}
+
+	@include media.bp-max(sm) {
+		.form__title {
+			font-size: vars.$fs - 2px;
+		}
+	}
+}
+
+wform {
+	flex: 1 0;
+
+	@include media.bp-max(sm) {
+		flex: 0 0 100%;
+		padding: 0;
+	}
+}
+
+.w-forms {
+	position: relative;
+
+	&__level {
+		top: 5px;
+		right: 5px;
+		position: absolute;
+		display: inline-block;
+		color: var(--c-text-secondary);
+		// font-size: calc(#{$fs} - 6px);
+		font-size: 22px;
+		letter-spacing: vars.$letter-spacing;
+		transition: vars.$transition;
+
+		&._sky {
+			color: vars.$c-info;
+		}
+
+		&._orange {
+			color: vars.$c-warn;
+		}
+
+		&._green {
+			color: vars.$c-success;
+		}
+	}
+
+	&__input {
+		padding-right: 35px;
+	}
+
+	&__input-block {
+		position: relative;
+	}
+
+	&__toggle {
+		display: flex;
+		position: absolute;
+		right: 10px;
+		top: 50%;
+		color: var(--c-placeholder);
+		transform: translateY(-50%);
+		cursor: pointer;
+
+		i {
+			font-size: 21px;
+		}
+	}
+
+	.icon-visibility {
+		color: var(--c-primary);
+	}
+}
+@media screen and (max-width: 768px) {
+	.auth__img {
+		display: none;
+	}
+}