diff --git a/Drola_Base_Node/web/css/drolaicon.png b/Drola_Base_Node/web/css/drolaicon.png
new file mode 100644
index 0000000..96871fb
Binary files /dev/null and b/Drola_Base_Node/web/css/drolaicon.png differ
diff --git a/Drola_Base_Node/web/css/sign-in.css b/Drola_Base_Node/web/css/sign-in.css
new file mode 100644
index 0000000..d8fbb89
--- /dev/null
+++ b/Drola_Base_Node/web/css/sign-in.css
@@ -0,0 +1,58 @@
+*{
+    font-family: 'Raleway', sans-serif;
+}
+.main{
+    height:520px;
+    width:31%;
+    margin-top:10%;
+    background-color:#00E676;
+    margin-left:35%;
+}
+.one_box{
+	margin-left:20%;
+	width:60%;
+}
+.two_box{
+	margin-left:20%;
+	width:60%;
+}
+input{
+	border:none;
+	color:#388E3C;
+	background:none;
+	border-bottom:3px solid #388E3C;
+	padding-top:8%;
+	margin-bottom:30px;
+	margin-top:-29%; 
+	font-size:1.2em;
+	outline:none;
+	padding-bottom:14px;
+}
+input:active{
+    border-bottom-color:#fff; 
+    color:#fff;
+    transition:0.4s;
+}
+.mainfont{
+	font-size:2em;
+	color:white;
+	padding-left:26%;
+}
+.btn{
+	color:#fff;
+	font-size:1.5em;
+	margin-left:24%;
+	margin-top:10px;
+	border:1px solid #fff;
+    padding-right:80px;
+    padding-left:80px;
+    padding-top:5px;
+    padding-bottom:5px;
+}
+.vect{
+	height:30%;
+	width:35%;
+	margin-bottom:-17%;
+	margin-left:32%;
+	margin-top:-7%;
+}
diff --git a/Drola_Base_Node/web/sign-in.html b/Drola_Base_Node/web/sign-in.html
index c780541..ac1480f 100644
--- a/Drola_Base_Node/web/sign-in.html
+++ b/Drola_Base_Node/web/sign-in.html
@@ -7,7 +7,7 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-<title>Easy Admin Panel an Admin Panel Category Flat Bootstrap Responsive Website Template | Sign In :: w3layouts</title>
+<title>Drola Sign-In</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <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, 
@@ -17,8 +17,10 @@
 <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
 <!-- Custom CSS -->
 <link href="css/style.css" rel='stylesheet' type='text/css' />
+<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <!-- Graph CSS -->
 <link href="css/font-awesome.css" rel="stylesheet"> 
+<link href="css/sign-in.css" rel="stylesheet"> 
 <!-- jQuery -->
 <!-- lined-icons -->
 <link rel="stylesheet" href="css/icon-font.min.css" type='text/css' />
@@ -32,73 +34,21 @@
 	<script>
 		 new WOW().init();
 	</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'>
-<!---//webfonts---> 
- <!-- Meters graphs -->
 <script src="js/jquery-1.10.2.min.js"></script>
-<!-- Placed js at the end of the document so the pages load faster -->
-
 </head> 
    
  <body class="sign-in-up">
-    <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>
-						</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:';}"/>
-								</div>
-								<span class="checkbox2">
-									 <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:';}"/>
-								</div>
-								<span class="checkbox2">
-									 <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label>
-								</span>
-								<div class="clearfix"> </div>
-							</div>
-							<input type="submit" value="Login to your account">
-						</form>	 
-						</div>
-						<div class="new_people dontshow">
-							<h4>For New People</h4>
-							<p>Having hands on experience in creating innovative designs,I do offer design 
-								solutions which harness.</p>
-							<a href="sign-up.html">Register Now!</a>
-						</div>
-					</div>
-				</div>
-			</div>
-		<!--footer section start-->
-			<footer>
-			   <p>&copy 2015 Easy Admin Panel. All Rights Reserved | Design by <a href="https://w3layouts.com/" target="_blank">w3layouts.</a></p>
-			</footer>
-        <!--footer section end-->
-	</section>
-	
+ 	<div class = "main"><br/><br/><br/>
+    <img src = "css/drolaicon.png" class = "vect">
+ 	<br/><br/><br/><br/><br/><br/>
+ 	<font class ="mainfont">Sign In To <font color = "#388E3C">Dr</font>ola</font>
+ 		<input type="text" class = "one_box" value = "Name" name = "name" style="padding-top:40%;"><br/><br/>
+ 		<input type="text" class = "two_box" value = "Password" name = "pass"><br/>
+ 		<a href="#" class = "btn">Sign In</a>
+ 	</div>
 <script src="js/jquery.nicescroll.js"></script>
 <script src="js/scripts.js"></script>
 <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
