diff --git a/Drola_Base_Node/web/css/style.css b/Drola_Base_Node/web/css/style.css
index db54ef5..a2cf5ff 100644
--- a/Drola_Base_Node/web/css/style.css
+++ b/Drola_Base_Node/web/css/style.css
@@ -1138,6 +1138,7 @@ ul.dropdown-menu li {
 }
 /**** Search ********/
 /*-------LOGIN STARTS HERE -------*/
+
 #loginContainer {
     position:relative;
 }
@@ -4309,13 +4310,14 @@ button.rew:hover {
 /*-- //login-form --*/
 /*-- sign-up --*/
 .sign-up-form{
-	padding:6em 0;
+	padding:6em 6em;
 	background:#b8c9f1;
 	}
 .sign-up{
-	width: 60%;
-	padding: 2em 1em;
-	margin: 0 auto;
+	width: 100%;
+	padding: 2em 2em 2em 20px;
+	background:#ffffff;
+	border-radius:2%;
 	}
 .sign-up-form h3{
 	color: #EEEEEE;
@@ -4335,7 +4337,7 @@ button.rew:hover {
 	}
 .sign-up1 h4{
 	color:#fff;
-	margin:1.6em 0 1em;
+	margin:1.6em 0em 1em 3em;
 	font-size:18px;
 	}
 .sign-up2{
@@ -4641,16 +4643,33 @@ span.badge1 {
 }
 /*-- //typo --*/
 /*-- sign-in --*/
-.sign-in-up{
-	background:#f9f9f9 !important;
-	min-height: 830px;
+.sign-in-up {
+  background:#000000;
+   background-image: url("../images/score.png");
+   background-size: cover;
+   -webkit-background-size: cover;
+   -moz-background-size: cover;
+   -o-background-size: cover;
+    background-position: center;
+  min-height: 830px;
+}
+#sign-in {
+
+	background:#000000;
+   background-image: url("../images/score.png");
+   background-size: cover;
+   -webkit-background-size: cover;
+   -moz-background-size: cover;
+   -o-background-size: cover;
+    background-position: center;
 }
 .sign-in-form{
 	margin:2em auto 4em;
 	width:35%;
 }
 .sign-in-wrapper{
-	background:#f9f9f9;
+	// background:#ffffff;
+
 }
 .new_people{
 	padding:3em 0 0;
@@ -4679,7 +4698,7 @@ span.badge1 {
 	border:1px solid #F44336;
 }
 .sign-in-form-top{
-	background:url(../images/3.jpg) no-repeat 0px -55px;
+	background: url(../images/3.jpg) no-repeat 0px -55px;
 	display:block;
 	min-height:150px;
 	padding:3em 0 0;
@@ -4694,17 +4713,19 @@ span.badge1 {
 }
 .sign-in-form-top p a{
 	color:#fff;
+	text-decoration:underline;
 }
 .sign-in-form-top p a:hover{
 	text-decoration:none;
 }
 .sign-in-form-top p span{
-	color:#8BC34A;
+	color:#fff;
 }
 .signin {
     padding: 2em;
 	position:relative;
 	background: #fff;
+	opacity:1;
 }
 .signin:after {
     content: '';
@@ -4724,7 +4745,7 @@ span.badge1 {
   font-size: 0.95em;
   padding: 10px 15px 10px 37px;
   width: 98%;
-  color: #A8A8A8;
+  color: #000000;
   outline: none;
   border: 1px solid #D3D3D3;
   border-radius: 4px;
@@ -4737,15 +4758,37 @@ span.badge1 {
 }
 .log-input input.lock {
   background: url(../images/lock.png)no-repeat 8px 10px #fff;
+
 }
 .log-input-left {
   float: left;
   width: 90%;
+  position: relative;
+}
+.reveal {
+position: absolute;
+ right: 10px;
+  top: 10px;
+  width:5%;
+  cursor: pointer;
+}
+.reveal2 {
+position: absolute;
+ right: 10px;
+  top: 25px;
+  width:5%;
+  cursor: pointer;
 }
 span.checkbox1 {
-  float: left;
-  width: 43%;
+  width: 100%;
+  color: #000;
+}
+span.checkbox1 a:hover{
+  width: 100%;
+  color: #000;
+  text-decoration: underline;
 }
+
 .signin .checkbox {
 	margin-bottom: 4px;
 	font-size: 1.2em;
@@ -4845,8 +4888,8 @@ span.checkbox2 {
   -o-transition: 0.5s all;
 }
 .signin-rit p {
-	float: right;
-    width: 30%;
+	float: left;
+    width: 100%;
 	font-size: 1em;
 }
 .signin-rit p a{
@@ -4857,9 +4900,11 @@ span.checkbox2 {
 }
 /*-- sign-up --*/
 .sign-up{
-	width: 40%;
-    padding:2em 0 4em;
-    margin: 0 auto;
+    padding: 2em;
+	position:relative;
+	left:30%;
+	background: #fff;
+	opacity:1;
 	}
 .sign-up h3 {
     text-align: center;
@@ -6508,7 +6553,8 @@ div#container-rpm1{
     margin: 6px 0px 0px 0;
 }
 div#page-wrapper {
-    padding: 2em 2em 0.1em;
+    padding: 2em 2em 0.1em 2em;
+    background-color: #ffffff
 }
 .activity-img1 {
     width: 25%;
@@ -6804,7 +6850,7 @@ canvas#bar1 {
     min-height: 95px;
 }
 span.checkbox1 {
-    width: 55%;
+    width: 100%;
 }
 .log-input:nth-child(1) {
     margin: 1em 0 0;
@@ -7582,3 +7628,65 @@ textarea.form-control1.control2 {
  .dontshow{
 	 display: none;
  }
+ .loginBtn {
+  box-sizing: border-box;
+  position: relative;
+  /* width: 13em;  - apply for fixed size */
+  margin: 0.6em;
+  padding: 0 15px 0 46px;
+  border: none;
+  text-align: left;
+  line-height: 34px;
+  white-space: nowrap;
+  border-radius: 0.2em;
+  font-size: 16px;
+  color: #FFF;
+}
+.loginBtn:before {
+  content: "";
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 34px;
+  height: 100%;
+}
+.loginBtn:focus {
+  outline: none;
+}
+.loginBtn:active {
+  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
+}
+
+
+/* Facebook */
+.loginBtn--facebook {
+  background-color: #4C69BA;
+  background-image: linear-gradient(#4C69BA, #3B55A0);
+  /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
+  text-shadow: 0 -1px 0 #354C8C;
+}
+.loginBtn--facebook:before {
+  border-right: #364e92 1px solid;
+  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
+}
+.loginBtn--facebook:hover,
+.loginBtn--facebook:focus {
+  background-color: #5B7BD5;
+  background-image: linear-gradient(#5B7BD5, #4864B1);
+}
+
+
+/* Google */
+.loginBtn--google {
+  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
+  background: #DD4B39;
+}
+.loginBtn--google:before {
+  border-right: #BB3F30 1px solid;
+  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
+}
+.loginBtn--google:hover,
+.loginBtn--google:focus {
+  background: #E74B37;
+}
diff --git a/Drola_Base_Node/web/images/passrev.png b/Drola_Base_Node/web/images/passrev.png
new file mode 100644
index 0000000..d58d87d
Binary files /dev/null and b/Drola_Base_Node/web/images/passrev.png differ
diff --git a/Drola_Base_Node/web/images/score.png b/Drola_Base_Node/web/images/score.png
new file mode 100644
index 0000000..fe57a7b
Binary files /dev/null and b/Drola_Base_Node/web/images/score.png differ
diff --git a/Drola_Base_Node/web/sign-in.html b/Drola_Base_Node/web/sign-in.html
index c780541..9b20af9 100644
--- a/Drola_Base_Node/web/sign-in.html
+++ b/Drola_Base_Node/web/sign-in.html
@@ -12,6 +12,7 @@
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="Easy Admin Panel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
 Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
+
 <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  <!-- Bootstrap Core CSS -->
 <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
@@ -31,7 +32,18 @@
 <script src="js/wow.min.js"></script>
 	<script>
 		 new WOW().init();
+
+		 function clicked() {
+    var x = document.getElementById("myinp");
+    if (x.type === "password") {
+        x.type = "text";
+    } else {
+        x.type = "password";
+    }
+}
+
 	</script>
+	
 <!--//end-animate-->
 <!----webfonts--->
 <link href='//fonts.googleapis.com/css?family=Cabin:400,400italic,500,500italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
@@ -42,43 +54,46 @@
 
 </head> 
    
- <body class="sign-in-up">
+ <body class="sign-in-up" id="sign-in">
     <section>
 			<div id="page-wrapper" class="sign-in-wrapper">
 				<div class="graphs">
 					<div class="sign-in-form">
 						<div class="sign-in-form-top">
-							<p><span>Sign In to</span> <a href="index.html">Admin</a></p>
+							<p><span>Sign in to</span> <a href="index.html">Admin</a></p>
 						</div>
 						<div class="signin">
-							<div class="signin-rit">
-								<span class="checkbox1">
-									 <label class="checkbox"><input type="checkbox" name="checkbox" checked="">Forgot Password ?</label>
-								</span>
-								<p><a href="#">Click Here</a> </p>
-								<div class="clearfix"> </div>
-							</div>
 							<form action="doLogin" method="post">
 							<div class="log-input">
 								<div class="log-input-left">
-								   <input type="text" name="uname" class="user" value="Yourname" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}"/>
+								   <input type="text" name="uname" class="user" placeholder="Email Address" required />
 								</div>
 								<span class="checkbox2">
-									 <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label>
+									<!-- <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label> -->
 								</span>
 								<div class="clearfix"> </div>
 							</div>
 							<div class="log-input">
 								<div class="log-input-left">
-								   <input type="password" name="pwd" class="lock" value="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}"/>
+								   <input type="password" name="pwd" class="lock" id="myinp" placeholder="Password" required />
+								    <img class="reveal" src="images/passrev.png" onclick="clicked()" >
 								</div>
 								<span class="checkbox2">
-									 <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label>
+									<!-- <label class="checkbox"><i> </i></label> -->
 								</span>
 								<div class="clearfix"> </div>
 							</div>
 							<input type="submit" value="Login to your account">
 						</form>	 
+						<div class="signin-rit">
+								<span class="checkbox1">
+									 <p>Don't have an account?  <a href='sign-up.html'>Sign Up</a> || <a href="#">Forgot Password?</a></p>
+								</span><hr>
+								<button class="loginBtn loginBtn--facebook"> Login with Facebook</button>
+                                <button class="loginBtn loginBtn--google">Login with Google</button>
+								<!--<p><a href="#">Click Here</a> </p> -->
+								<div class="clearfix"> </div>
+							</div>
 						</div>
 						<div class="new_people dontshow">
 							<h4>For New People</h4>
diff --git a/Drola_Base_Node/web/sign-up.html b/Drola_Base_Node/web/sign-up.html
index 74a7a70..c904ce3 100644
--- a/Drola_Base_Node/web/sign-up.html
+++ b/Drola_Base_Node/web/sign-up.html
@@ -31,6 +31,15 @@
 <script src="js/wow.min.js"></script>
 	<script>
 		 new WOW().init();
+
+		 	 function clicked() {
+    var x = document.getElementById("myinp");
+    if (x.type === "password") {
+        x.type = "text";
+    } else {
+        x.type = "password";
+    }
+}
 	</script>
 <!--//end-animate-->
 <!----webfonts--->
@@ -49,7 +58,7 @@
 					<div class="sign-up">
 						<h3>Register Here</h3>
 						<p class="creating">Having hands on experience in creating innovative designs,I do offer design 
-							solutions which harness.</p>
+							solutions which harness.</p><hr>
 						<h5>Personal Information</h5>
 						<div class="sign-u">
 							<div class="sign-up1">
@@ -57,7 +66,8 @@ <h4>First Name* :</h4>
 							</div>
 							<div class="sign-up2">
 								<form>
-									<input type="text" placeholder=" " required=" "/>
+								<form>
+									<input type="text" placeholder="eg. John" required/>
 								</form>
 							</div>
 							<div class="clearfix"> </div>
@@ -68,7 +78,7 @@ <h4>Last Name* :</h4>
 							</div>
 							<div class="sign-up2">
 								<form>
-									<input type="text" placeholder=" " required=" "/>
+									<input type="text" placeholder="eg. Doe" required/>
 								</form>
 							</div>
 							<div class="clearfix"> </div>
@@ -79,11 +89,11 @@ <h4>Email Address* :</h4>
 							</div>
 							<div class="sign-up2">
 								<form>
-									<input type="text" placeholder=" " required=" "/>
+									<input type="text" placeholder="eg. johndoe@example.com" required/>
 								</form>
 							</div>
 							<div class="clearfix"> </div>
-						</div>
+						</div><hr>
 						<h6>Login Information</h6>
 						<div class="sign-u">
 							<div class="sign-up1">
@@ -91,7 +101,10 @@ <h4>Password* :</h4>
 							</div>
 							<div class="sign-up2">
 								<form>
-									<input type="password" placeholder=" " required=" "/>
+									<div class="log-input-left">
+									<input type="password" placeholder="**********"  id="myinp" required/>
+									   <img class="reveal2" src="images/passrev.png" onclick="clicked()" >
+								</div>
 								</form>
 							</div>
 							<div class="clearfix"> </div>
@@ -102,7 +115,10 @@ <h4>Confirm Password* :</h4>
 							</div>
 							<div class="sign-up2">
 								<form>
-									<input type="password" placeholder=" " required=" "/>
+									<div class="log-input-left">
+									<input type="password" placeholder="**********"  id="myinp" required/>
+									<img class="reveal2" src="images/passrev.png" onclick="clicked()" >
+								</div>
 								</form>
 							</div>
 							<div class="clearfix"> </div>
@@ -112,11 +128,21 @@ <h4>Confirm Password* :</h4>
 								<form>
 									<input type="submit" value="Submit">
 								</form>
+							</form>
 							</div>
 							<div class="sub_home_right">
 								<p>Go Back to <a href="index.html">Home</a></p>
 							</div>
 							<div class="clearfix"> </div>
+							<div class="signin-rit"><hr>
+								<span class="checkbox1">
+									 <p>Already Registered?  <a href='sign-in.html'>Login</a></p>
+								</span>
+								<button class="loginBtn loginBtn--facebook"> Login with Facebook</button>
+                                <button class="loginBtn loginBtn--google">Login with Google</button>
+								<!--<p><a href="#">Click Here</a> </p> -->
+								<div class="clearfix"> </div>
+							</div>
 						</div>
 					</div>
 				</div>