diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index dfbc6a8..a6912f0 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -1,25 +1,151 @@
 @import 'constants';
 
 
-/* (1) Title box
+/* (1) Form
 ---------------------------------------------------------*/
-// [data-title]:before{ content: 'test'; }
+.form{
 
-// [data-title]:before{
+	label{
+		display: block;
 
-// 	content: attr(data-title);
+		margin-top: 2em;
+		margin-bottom: .7em;
 
-// 	display: block;
-// 	position: absolute;
+		font-size: .7em;
+		text-transform: uppercase;
+		letter-spacing: 1px;
+	}
 
-// 	padding: .8em 1em;
+	// input
+	input:not(.flat),
+	.select-box{
+		display: block;
 
-// 	border-radius: 5px / 5px;
+		padding: .7em 1em;
+		margin-bottom: .5em;
 
-// 	color: #ddd;
+		border: 1px solid #222;
+		border-radius: 3px / 3px;
 
-// 	background-color: #000;
+		background-color: #313339;
 
-// 	transform: translateY(-75%) translateX(80%);
+		color: #fff;
 
-// }
\ No newline at end of file
+		transition: border-color .1s ease-in-out;
+
+		&:hover{ border-color: #111; }
+		&:focus{ border-color: #7289da; }
+
+	}
+
+	.select-box[data-type]{
+		padding-left: 4em;
+
+		cursor: pointer;
+
+		transition: background-color .1s ease-in-out,
+					border-color 0s;
+
+		// {1} Trailing icon //
+		&:before{
+			content: '';
+
+			display: inline-block;
+			position: absolute;
+				margin-top: .1em;
+				margin-left: -1.65em;
+				width: 1.3em;
+				height: 1.3em;
+
+			background: center center no-repeat;
+			background-size: auto 80%;
+		}
+
+		// specific images
+		&[data-type='text']:before{  background-image: url('../asset/svg/dialog.text@active.svg');  }
+		&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }
+
+
+		// {2} Checkbox //
+		&:after{
+			content: '';
+
+			display: block;
+			position: absolute;
+				margin-top: -1.4em;
+				margin-left: -3.4em;
+				width: 1.3em;
+				height: 1.3em;
+
+			border: 1px solid #888;
+			border-radius: 3px / 3px;
+
+			background: center center no-repeat;
+			background-size: auto 80%;
+
+		}
+
+
+		// {3} Active item //
+		&[data-selected='1']{
+			background-color: $main;
+			border-color: $main;
+			&:hover{ border-color: $main; }
+
+			&:after{
+				border-color: #fff;
+				background-color: #fff;
+				background-image: url('../asset/svg/checked.svg');
+			}
+
+		}
+
+
+	}
+
+	// flat input
+	input.flat{
+		display: block;
+		width: 100%;
+
+		padding: .5em 0;
+
+		border-radius: 0;
+		border: none;
+
+		border-bottom: 2px solid rgba(192, 192, 192, 0.1);
+
+		background-color: transparent;
+
+		color: #ddd;
+
+		transition: border-color .2s ease-in-out;
+
+		&:focus{
+			border-bottom: 2px solid #ddd;
+		}
+	}
+
+
+	& button.submit{
+
+		padding: .8em 1.5em;
+
+		border: 0;
+		border-radius: 3px / 3px;
+
+		background-color: $main;
+
+		color: #fff;
+		font-size: .8em;
+		font-weight: normal;
+
+		cursor: pointer;
+
+		transition: background-color .1s ease-in-out;
+
+		&:hover{ background-color: darken($main, 5%);}
+		&:active{ background-color: darken($main, 10%);}
+	}
+
+}
\ No newline at end of file
diff --git a/webpack/scss/layout.scss b/webpack/scss/layout.scss
index 5f71d6d..30c1216 100644
--- a/webpack/scss/layout.scss
+++ b/webpack/scss/layout.scss
@@ -40,6 +40,125 @@ body{
 }
 
 
+// LOGIN LAYOUT
+body > #WRAPPER.login{
+
+	display: flex;
+
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+
+	background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat;
+	background-size: 100% auto;
+
+	& > .login-box{
+		display: flex;
+		position: absolute;
+			width: 39.5em;
+			// height: 24.5em;
+
+		border-radius: 5px / 5px;
+
+		flex-direction:  row;
+		justify-content: stretch;
+		align-items:     stretch;
+		flex-wrap:       nowrap;
+
+		overflow: hidden;
+
+		// blur background hack
+		&:before{
+			content: '';
+			display: block;
+			position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+
+			background: url('https://discordapp.com/assets/fa7ba7a4c3d8665d3343fee590382bb9.jpg') center center no-repeat;
+			background-size: 100% auto;
+			background-attachment: fixed;
+
+			-webkit-filter: blur(.3em);
+			-moz-filter:    blur(.3em);
+			-o-filter:      blur(.3em);
+			-ms-filter:     blur(.3em);
+			filter:         blur(.3em);
+
+			z-index: 0;
+		}
+
+		z-index: 100;
+
+
+		& > div.icon{
+			flex: 0 1 14em;
+
+			background-color: rgba(221, 221, 221, 0.9);
+
+			z-index: 101;
+		}
+
+		& > div.form{
+			flex: 1 0 0;
+
+			display: flex;
+			position: relative;
+
+			padding: 2em;
+
+			flex-direction:  row;
+			justify-content: stretch;
+			align-content:   flex-start;
+			flex-wrap:       wrap;
+
+			background-color: rgba(30, 30, 30, 0.9);
+
+			z-index: 101;
+
+			& h3{
+				display: block;
+				margin: auto;
+				margin-bottom: 1em;
+
+				text-transform: uppercase;
+				font-weight: bold;
+			}
+
+			& label{
+				flex: 100%;
+
+				display: block;
+
+				color:          #949494;
+				font-weight:    bold;
+				font-size:      .6em;
+				margin-bottom:  1.5em;
+				margin-top:     1.2em;
+				letter-spacing: .2em;
+
+				&.invalid{ color: #f04747; }
+				&.grey{ color: #5e5e5e; }
+			}
+
+			& button{
+				display: block;
+				flex: 100%;
+				padding: 1.5em 1em;
+
+				margin-top: 1.5em;
+				margin-bottom: .5em;
+			}
+
+		}
+
+
+	}
+
+}
+
 
 
 
diff --git a/webpack/scss/pop-up.scss b/webpack/scss/pop-up.scss
index 81bed8a..54d0f8d 100644
--- a/webpack/scss/pop-up.scss
+++ b/webpack/scss/pop-up.scss
@@ -90,103 +90,6 @@
 	align-items: stretch;
 	flex-wrap: nowrap;
 
-	label{
-		display: block;
-
-		margin-top: 2em;
-		margin-bottom: .7em;
-
-		font-size: .7em;
-		text-transform: uppercase;
-		letter-spacing: 1px;
-	}
-
-	input,
-	.select-box{
-		display: block;
-
-		padding: .7em 1em;
-		margin-bottom: .5em;
-
-		border: 1px solid #222;
-		border-radius: 3px / 3px;
-
-		background-color: #313339;
-
-		color: #fff;
-
-		transition: border-color .1s ease-in-out;
-
-		&:hover{ border-color: #111; }
-		&:focus{ border-color: #7289da; }
-
-	}
-
-	.select-box[data-type]{
-		padding-left: 4em;
-
-		cursor: pointer;
-
-		transition: background-color .1s ease-in-out,
-					border-color 0s;
-
-		// {1} Trailing icon //
-		&:before{
-			content: '';
-
-			display: inline-block;
-			position: absolute;
-				margin-top: .1em;
-				margin-left: -1.65em;
-				width: 1.3em;
-				height: 1.3em;
-
-			background: center center no-repeat;
-			background-size: auto 80%;
-		}
-
-		// specific images
-		&[data-type='text']:before{  background-image: url('../asset/svg/dialog.text@active.svg');  }
-		&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice@active.svg'); }
-
-
-		// {2} Checkbox //
-		&:after{
-			content: '';
-
-			display: block;
-			position: absolute;
-				margin-top: -1.4em;
-				margin-left: -3.4em;
-				width: 1.3em;
-				height: 1.3em;
-
-			border: 1px solid #888;
-			border-radius: 3px / 3px;
-
-			background: center center no-repeat;
-			background-size: auto 80%;
-
-		}
-
-
-		// {3} Active item //
-		&[data-selected='1']{
-			background-color: $main;
-			border-color: $main;
-			&:hover{ border-color: $main; }
-
-			&:after{
-				border-color: #fff;
-				background-color: #fff;
-				background-image: url('../asset/svg/checked.svg');
-			}
-
-		}
-
-
-	}
-
 }
 
 
@@ -222,24 +125,4 @@
 		cursor: pointer;
 	}
 
-	& > button:nth-child(2){
-
-		padding: .8em 1.5em;
-
-		border: 0;
-		border-radius: 3px / 3px;
-
-		background-color: $main;
-
-		color: #fff;
-		font-size: .8em;
-		font-weight: normal;
-
-		cursor: pointer;
-
-		transition: background-color .1s ease-in-out;
-
-		&:hover{ background-color: darken($main, 5%);}
-		&:active{ background-color: darken($main, 10%);}
-	}
 }
diff --git a/webpack/vue/auth/wrapper.vue b/webpack/vue/auth/wrapper.vue
index ab1e8d5..91ae0e9 100644
--- a/webpack/vue/auth/wrapper.vue
+++ b/webpack/vue/auth/wrapper.vue
@@ -20,7 +20,7 @@
 		<div class='popup' v-show='gs.popup.get(`room.create`).active'>
 			<span class='header'>Create {{ gs.popup.get(`room.create`).data.type }} channel</span>
 
-			<span class='body'>
+			<span class='body form'>
 				<label for='channel_name'>Channel Name</label>
 				<input type='text' name='channel_name' v-model='gs.popup.get(`room.create`).data.name'>
 
@@ -31,7 +31,7 @@
 
 			<span class='footer'>
 				<button @click='gs.popup.hide()'>Cancel</button>
-				<button @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
+				<button class='submit' @click='gs.popup.get(`room.create`).submit()'>Create Channel</button>
 			</span>
 		</div>
 
diff --git a/webpack/vue/noauth/login.vue b/webpack/vue/noauth/login.vue
index f01a3f8..381333f 100644
--- a/webpack/vue/noauth/login.vue
+++ b/webpack/vue/noauth/login.vue
@@ -1,13 +1,18 @@
 <template>
 
-	<div class='container'>
+	<div class='login-box'>
 
-		<div class='header'>
+		<div class='icon'></div>
 
-		</div>
-
-		<div class='body'>
+		<div class='form'>
+			<h3>Welcome back!</h3>
+			<label for='email'>EMAIL</label>
+			<input type='text' name='email' class='flat'>
+			<label for='password'>PASSWORD</label>
+			<input type='password' name='password' class='flat'>
+			<label for='fpass' class='grey'>FORGOT YOUR PASSWORD ?</label>
 
+			<button class='submit'>Login</button>
 		</div>
 
 	</div>
diff --git a/webpack/vue/noauth/wrapper.vue b/webpack/vue/noauth/wrapper.vue
index c5c2f09..040db1d 100644
--- a/webpack/vue/noauth/wrapper.vue
+++ b/webpack/vue/noauth/wrapper.vue
@@ -2,7 +2,7 @@
 
 
 
-	<div id="WRAPPER">
+	<div id="WRAPPER" class='login'>
 
 		<!-- Container -->
 		<router-view></router-view>