diff --git a/UI/css/style.css b/UI/css/style.css
index 5687755..af7259c 100644
--- a/UI/css/style.css
+++ b/UI/css/style.css
@@ -16,6 +16,7 @@ ul{
     margin: 0;
     padding: 0;
 }
+
 .button_1{
     height: 38px;
     background: #08242D;
@@ -89,7 +90,6 @@ header a:hover{
 }
 
 /* squares */
-
 #squares{
     margin-top: 20px;
 }
@@ -131,6 +131,75 @@ footer{
     text-align: center;
 }
 
+/***** Registration page styles ******/
+
+/* form input fields */
+input[type=text], input[type=password] {
+    width: 100%;
+    padding: 15px;
+    margin: 5px 0 22px 0;
+    display: inline-block;
+    border: none;
+    background: #f1f1f1;
+  }
+  
+  input[type=text]:focus, input[type=password]:focus {
+    background-color: #ddd;
+    outline: none;
+  }
+  
+  hr {
+    border: 1px solid #f1f1f1;
+    margin-bottom: 25px;
+  }
+  
+  /* style buttons */
+  .delbtn, .regbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    opacity: 0.9;
+  }
+  
+  button:hover {
+    opacity:1;
+  }
+  
+  /* more style for cancel button */
+  .delbtn {
+    padding: 14px 20px;
+    background-color: #f44336;
+  }
+  
+  /* Float cancel and register account buttons*/
+  .delbtn, .regbtn {
+    float: left;
+    width: 50%;
+  }
+  
+  /* Add padding to container elements */
+  .regisdiv {
+    padding: 16px;
+  }
+  
+  /* float the buttons on the same line */
+  .clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+  
+  /* Change styles for cancel button and signup button on extra small screens */
+  @media screen and (max-width: 300px) {
+    .cancelbtn, .signupbtn {
+      width: 100%;
+    }
+  }
+
 /* social media icons*/
 .fab {
     padding: 15px;
@@ -187,4 +256,4 @@ footer{
         font-size: 20px;
         padding: 10px;
     }
-}
\ No newline at end of file
+}
diff --git a/UI/img/download.png b/UI/img/download.png
new file mode 100644
index 0000000..d0889f9
Binary files /dev/null and b/UI/img/download.png differ
diff --git a/UI/index.html b/UI/index.html
index ec90bef..9aa651e 100644
--- a/UI/index.html
+++ b/UI/index.html
@@ -24,6 +24,7 @@ <h1><span class="highlight">Send</span>-IT</h1>
         </div>
     </header>
 
+
     <section id="display">
         <div class="container">
             <h1>Welcome to Send-IT</h1>
@@ -31,7 +32,9 @@ <h1>Welcome to Send-IT</h1>
         </div>
     </section>
 
+
     <section id="squares">
+
         <div class="container">
             <div class="box">
                 <img src="./img/box1.jpg">
diff --git a/UI/registration.html b/UI/registration.html
new file mode 100644
index 0000000..ba73785
--- /dev/null
+++ b/UI/registration.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Register Account</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./css/style.css" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div id="brand">
+                <h1><span class="highlight">Regis</span>tration</h1>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="login.html">Login</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <section>
+        <div class="container">
+            <form action="">
+                <div class="regisdiv">
+                    <h1>REGISTER TO SEND-IT</h1>
+                    <p>kINDLY FILL IN YOUR PERSONAL DETAILS</p>
+                    <hr>
+                      
+                    <label for="uname"><b>USERNAME</b></label>
+                    <input type="text" placeholder="Provide Username" name="uname" required>
+                      
+                    <label for="secretword"><b>PASSOWRD</b></label>
+                    <input type="password" placeholder="Provide a Password" name="secretword" required>
+                      
+                    <label for="secretword-repeat"><b>CONFIRM PASSOWRD</b></label>
+                    <input type="password" placeholder="Confirm Password" name="secretword-repeat" required>
+                      
+                    <label>
+                    <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
+                    </label>
+                      
+                    <p>Already have an account? <a href="login.html">login here</a>.</p>
+                      
+                    <div class="downfix">
+                    <button type="button" class="delbtn">Cancel</button>
+                    <button type="submit" class="regbtn">Register Account</button>
+                    </div>
+                </div>
+            </form>   
+           
+        </div>
+    </section>
+
+   
+
+    <footer>
+        <p>Send-IT, Copyright &copy; 2018</p>
+    </footer>
+    
+</body>
+</html>
\ No newline at end of file
