diff --git a/views/css/style.css b/views/css/style.css
index 66269f0..2760192 100644
--- a/views/css/style.css
+++ b/views/css/style.css
@@ -80,6 +80,14 @@ footer a {
 	box-shadow: 0px 2px 3px #A5A5A5;
 }
 
+.user-name {
+	float: left;
+	position: relative;
+	font-family: osl;
+	font-size: 23px;
+	color: #898989;
+}
+
 .logon-crumbs button {
 	float: left;
 	position: relative;
@@ -106,6 +114,28 @@ footer a {
 	width: 35px;
 }
 
+.btn-login:hover {
+	color: red;
+	transition: 0.3s;
+	cursor: pointer;
+}
+
+.btn-g-login:hover {
+	box-shadow: 0px 2px 3px #A5A5A5;
+	transition: 0.3s;
+	cursor: pointer;
+}
+
+.btn-login:active {
+	color: white;
+	transition: 0.1s;
+}
+
+.btn-g-login:active {
+	box-shadow: 0px 2px 3px red;
+	transition: 0.1s;
+}
+
 .user-info {
 	float: right;
 	position: relative;
@@ -238,4 +268,20 @@ footer a {
 	margin-top: 5px;
 	font-size: 19px;
 	color: #737373;
+}
+
+.user-logout {
+	float: left;
+	padding-left: 10px;
+	padding-top: 11px;
+	position: relative;
+	font-family: osl;
+	font-size: 13px;
+	color: #393939;
+	cursor: pointer;
+}
+
+.user-logout:hover {
+	color: red;
+	transition: 0.3s;
 }
\ No newline at end of file
diff --git a/views/home.ejs b/views/home.ejs
index a9f4a69..b73113a 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -9,6 +9,27 @@
   <meta name="author" content="Max">
 
   <link rel="stylesheet" href="css/style.css">
+
+  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-auth.js"></script>
+  <script>
+  // Your web app's Firebase configuration
+  var firebaseConfig = {
+    apiKey: "AIzaSyCrhgibbVUCOu3Vz3pw9iutGwTXen724eU",
+    authDomain: "project-gg-3b754.firebaseapp.com",
+    databaseURL: "https://project-gg-3b754.firebaseio.com",
+    projectId: "project-gg-3b754",
+    storageBucket: "project-gg-3b754.appspot.com",
+    messagingSenderId: "338558477178",
+    appId: "1:338558477178:web:f1b9069d1da04749a26cc3",
+    measurementId: "G-Y42R9NNJXS"
+  };
+  // Initialize Firebase
+  firebase.initializeApp(firebaseConfig);
+  firebase.analytics();
+</script>
+
 </head>
 
 <body>
@@ -16,10 +37,18 @@
 		<div class="page">
 			<div class="navbar">
 				<div class="logon-crumbs">
-					<input id="fuid" type="text" placeholder="Username">
-					<input id="fpwd" type="password" placeholder="Password">
-					<button id="blogin" class="btn-login">&#x27a4;</button>
-					<button id="blogin_g" class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button>
+					<div id="uname-field" style="display: none;">
+						<a id="uname-dom" class="user-name" href="#">Unregistered user</a>
+						<div class="user-logout">
+							<a onclick={signout()}>Log out</a>
+						</div>
+					</div>
+						<div id="login-field" style="display: block;">
+						<input id="fuid" type="text" placeholder="Username">
+						<input id="fpwd" type="password" placeholder="Password">
+						<button id="blogin" onclick={signinwithemail()} class="btn-login">&#x27a4;</button>
+						<button id="blogin_g" onclick={signinwithgoogle()} class="btn-g-login"><img src="media/g_logon.png" class="img-g-login" alt="img"></button>
+					</div>
 				</div>
 				<div class="user-info">
 					<div class="notifications">
@@ -108,5 +137,6 @@
 			GG Sales US 🇺🇸
 		</div>
 	</footer>
+	<script src="js/fAuth.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/js/fAuth.js b/views/js/fAuth.js
new file mode 100644
index 0000000..c91eef4
--- /dev/null
+++ b/views/js/fAuth.js
@@ -0,0 +1,60 @@
+function checkAuth(){
+	firebase.auth().onAuthStateChanged(function(user){
+		if (user) {
+			document.getElementById('uname-field').setAttribute("style", "display: block;")
+			document.getElementById('login-field').setAttribute("style", "display: none;")
+			document.getElementById('uname-dom').innerHTML = "Hello, " + user.displayName
+		}
+		else {
+			document.getElementById('uname-field').setAttribute("style", "display: none;")
+			document.getElementById('login-field').setAttribute("style", "display: block;")
+			document.getElementById('uname-dom').innerHTML = "Unregistered"
+		}
+	})
+}
+
+window.onload = function(){
+	checkAuth()
+}
+
+function signinwithgoogle(){
+	var googleAuthProvider = new firebase.auth.GoogleAuthProvider()
+	firebase.auth().signInWithPopup(googleAuthProvider)
+		.then(function(data){
+			console.log('User signed in...')
+		})
+		.catch(function(error){
+			console.log(error)
+		})
+}
+
+function signinwithemail(){
+	const txtEmail = document.getElementById('fuid')
+	const txtPassword = document.getElementById('fpwd')
+
+	var email = txtEmail.value
+	var pass = txtPassword.value
+	var auth = firebase.auth()
+
+	auth.signInWithEmailAndPassword(email, pass)
+		.catch(e => console.log(e.message))
+		.then(function(){
+			txtPassword.value = ''
+			txtEmail.value = ''
+		})
+
+
+}
+
+function signout(){
+	firebase.auth().signOut()
+}
+
+
+var pwField = document.getElementById("fpwd");
+pwField.addEventListener("keyup", function(event) {
+  if (event.keyCode === 13) {
+   event.preventDefault();
+   document.getElementById("blogin").click();
+  }
+});
