diff --git a/style2.css b/form.css
similarity index 89%
rename from style2.css
rename to form.css
index 100f26a..0a60436 100644
--- a/style2.css
+++ b/form.css
@@ -8,14 +8,6 @@
 	margin: 0;
 }
 
-#registration{
-	display: none;
-	position: fixed;
-	top: 00px;
-	background: #fff;
-	border-radius: 5px;
-}
-
 form a{
 	color: #9682c2;
 }
@@ -32,6 +24,7 @@ form{
 	bottom: 0:;
 	margin: auto;
 	padding: 10px;
+
 }
 
 h3{
diff --git a/index.html b/index.html
index fb84319..c759a8c 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,27 @@
 <html>
 <head>
 	<title>Invoicer</title>
-	<link rel="stylesheet" href="style2.css">
+	<link rel="stylesheet" href="form.css">
 	<link rel="stylesheet" href="style.css">
 	<meta charset="utf-8">
+	<script type="text/javascript">
+	function showPopup(){
+		$("#popup").show();
+		return false;
+	}
+	function hidePopup(){
+		$("#popup").hide();
+		return false;
+	}
+	function showPopup(){
+		document.getElementById("popup").style.display = "block";
+		return false;
+}
+	function hidePopup(){
+		document.getElementById("popup").style.display = "none";
+		return false;
+}
+	</script>
 </head>
 <body>
 	<div class="header-block">
@@ -19,7 +37,7 @@
 				<a href="#">About us</a>
 				<a href="#">Faq</a>
 				<a href="#">Tutorials</a>
-				<a href="#" class="transparent-button" onclick="document.getElementById('registration').style.display = 'block';">Sign up</a>
+				<a href="#" class="transparent-button" onclick="showPopup()">Sign up</a>
 			</nav>
 		</header>
 
@@ -39,7 +57,7 @@ <h1>Easiest invoices</h1>
 
 	<div id="our_features">
 		<h2>Our features</h2>
-		<div class="text right">
+		<div class="text right clearfix">
 			<div class="description">
 				<img src="img/book.png">
 				<h3>Easy invoices that save time</h3>
@@ -117,58 +135,61 @@ <h2>Don't forget to sign up</h2>
 		</footer>
 	</div>
 
-	<form id="registration" method="post">
-		<h3>Sign up</h3><hr color="#B1BBD8">
-		<div class="name">
-			<div>Username<input type="text" name="Username"></div>
-			<div>Email<input type="email" name="E-mail"></div>
-			<div class="double pas">
-				<div>Password
-					<input type="password" name="Password" required>
-				</div>
-				<div>Confirm password
-					<input type="password" name="C_password" required>
+	<div class="popup" id="popup">
+		<form id="registration" method="post">
+			<a style="float:right; font-size:20px; text-decoration:none;" onclick="hidePopup()" href="#">x</a>
+			<h3>Sign up</h3><hr color="#B1BBD8">
+			<div class="name">
+				<div>Username<input type="text" name="Username" max-length="50" required></div>
+				<div>Email<input type="email" name="E-mail" max-length="50"></div>
+				<div class="double pas">
+					<div>Password
+						<input type="password" name="Password" max-length="50" required>
+					</div>
+					<div>Confirm password
+						<input type="password" name="C_password" max-length="50" required>
+					</div>
 				</div>
-			</div>
-		</div><hr color="#eeeeee">
+			</div><hr color="#eeeeee">
 
-		<div class="data">
-			<div class="double name">
-				<div>First name<input type="text" name="F_name"></div>
-				<div>Last name<input type="text" name="L_name"></div>
-			</div>
-			
-			<div>Sex<br>
-				<div class="double sex">
-					<div>
-						<input type="radio" name="gender" checked>
-						<label for="man">Male</label>
-					</div>
-					<div>
-						<input type="radio" name="gender">
-						<label for="woman">Female</label>
+			<div class="data">
+				<div class="double name">
+					<div>First name<input type="text" name="F_name" max-length="50" required></div>
+					<div>Last name<input type="text" name="L_name" max-length="50" required></div>
+				</div>
+				
+				<div>Sex<br>
+					<div class="double sex">
+						<div>
+							<input type="radio" name="gender" checked>
+							<label for="man">Male</label>
+						</div>
+						<div>
+							<input type="radio" name="gender">
+							<label for="woman">Female</label>
+						</div>
 					</div>
 				</div>
-			</div>
+				
+				<div>City
+					<select name="city">
+			  			<option value="odessa">Одесса</option>
+			  			<option value="kiev">Киев</option>
+			 			<option value="lviv">Львов</option>
+			  			<option value="sumy">Сумы</option>
+			 			<option value="rivne">Ровно</option>
+					</select><br>
+				</div>
+
+				<textarea name="comment" placeholder="Few words about me" rows="25"></textarea>
+			</div><hr color="#eeeeee">
 			
-			<div>City
-				<select name="city">
-		  			<option value="odessa">Одесса</option>
-		  			<option value="kiev">Киев</option>
-		 			<option value="lviv">Львов</option>
-		  			<option value="sumy">Сумы</option>
-		 			<option value="rivne">Ровно</option>
-				</select><br>
+			<input type="checkbox" name="agree" value="agree" required>I agree with <a href="/">Terms and conditions</a>
+			<div class="bottom">			
+				<input type="submit" value="Register">
+				<input type="reset" value="Clear">
 			</div>
-
-			<textarea name="comment" placeholder="Few words about me" rows="25"></textarea>
-		</div><hr color="#eeeeee">
-		
-		<input type="checkbox" name="agree" value="agree" required>I agree with <a href="/">Terms and conditions</a>
-		<div class="bottom">			
-			<input type="submit" value="Register">
-			<input type="reset" value="Clear">
-		</div>
-	</form>
+		</form>
+	</div>
 </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index eb25fc2..85ba15c 100644
--- a/style.css
+++ b/style.css
@@ -15,6 +15,7 @@
          url(font/Apercu/apercu_regular-webfont.ttf) format("truetype");
 }
 
+a,
 body {
 	font-family: "Apercu", Arial, sans-serif;
 	color: #827e86;
@@ -22,10 +23,27 @@ body {
 
 a{
 	text-decoration: none;
-	color: #fff;
+	color: inherit;
+}
+
+.popup {
+	width: 100%;
+	min-height: 100%;
+	background-color: rgba(0,0,0,0.5);
+	overflow: hidden;
+	position: fixed;
+	top: 0px;
+	display: none;
 }
 
-/* Header block style*/
+#registration{
+	position: fixed;
+	top: 00px;
+	background: #fff;
+	border-radius: 5px;
+}
+
+/******* Header block style *******/
 
 .header-block {
 	height: 100vh;
@@ -85,11 +103,12 @@ header nav {
 .header-controls{
 	position: absolute;
 	width: 500px;
+	height: 200px;
 	left:0;
 	top: 0;
 	right: 0;
 	bottom: 0;
-	margin: 230px auto;
+	margin: auto;
 }
 
 .header-controls>h1{
@@ -137,7 +156,7 @@ header nav {
 	right: 0;
 }
 
-/* Main block style*/
+/******* Main block style *******/
 
 #our_features h2{
 	text-align: center;
@@ -200,7 +219,7 @@ header nav {
 	color: #fff;
 }
 
-/* Footer block style*/
+/******* Footer block style *******/
 
 .users_reviews{
 	text-align: center;	
@@ -308,8 +327,13 @@ footer li{
 	margin: 10px 10px;
 }
 
+.clearfix,
 footer::after {
 	content: "";
 	display: block;
 	clear: both;
 }
+
+.description{
+
+}
\ No newline at end of file
