diff --git a/UI/css/style.css b/UI/css/style.css
new file mode 100644
index 0000000..d8fd35e
--- /dev/null
+++ b/UI/css/style.css
@@ -0,0 +1,170 @@
+body{
+ font: 15px/1.5 'Montserrat', sans-serif;
+ padding: o;
+ margin: 0;
+ background-color: #A2D7E9;
+}
+
+/* Global */
+.container{
+ width: 70%;
+ margin: auto;
+ overflow: hidden;
+}
+
+ul{
+ margin: 0;
+ padding: 0;
+}
+
+/* header */
+header{
+ background: #0B5068;
+ color: #ffffff;
+ padding-top: 30px;
+ min-height: 70px;
+}
+
+header a{
+ color: #ffffff;
+ text-decoration: none;
+ text-transform: uppercase;
+ font-size: 16px;
+}
+header li{
+ float: left;
+ display: inline;
+ padding: 0 20px 0 20px;
+}
+header #brand{
+ float: left;
+}
+header #brand h1{
+ margin: 0;
+}
+header nav{
+ float: right;
+ margin-top: 10px;
+}
+header .highlight{
+ color: #A2D7E9;
+ font-weight: bold;
+}
+header a:hover{
+ color: #cccccc;
+ font-weight: bold;
+}
+
+/* showcase */
+
+#showcase{
+ min-height: 400px;
+ background: url('../img/showcase.jpg') no-repeat 0 -400px;
+ text-align: center;
+
+}
+#showcase h1{
+ margin-top: 130px;
+ font-size: 55px;
+ margin-bottom: 10px;
+
+}
+#showcase p{
+ font-size: 20px;
+}
+/* boxes */
+#boxes{
+ margin-top: 20px;
+}
+
+#boxes .box{
+ float: left;
+ text-align: center;
+ width: 30%;
+ padding: 10px;
+}
+#boxes .box img{
+ width: 90px;
+}
+
+/* footer */
+footer{
+ padding: 20px;
+ margin-top: 20px;
+ color: #ffffff;
+ background-color: #0B5068;
+ text-align: center;
+}
+
+/**** login-page ****/
+/* Bordered form */
+form {
+ border: 3px solid #f1f1f1;
+}
+
+/* Full-width inputs */
+input[type=text], input[type=password] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ box-sizing: border-box;
+}
+
+/* Set a style for all buttons */
+button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 14px 20px;
+ margin: 8px 0;
+ border: none;
+ cursor: pointer;
+ width: 100%;
+}
+
+/* Add a hover effect for buttons */
+button:hover {
+ opacity: 0.8;
+}
+
+/* Extra style for the cancel button (red) */
+.cancelbtn {
+ width: auto;
+ padding: 10px 18px;
+ background-color: #f44336;
+}
+
+/* Center the avatar image inside this container */
+.imgcontainer {
+ text-align: center;
+ margin: 24px 0 12px 0;
+}
+
+/* Avatar image */
+img.avatar {
+ width: 40%;
+ border-radius: 50%;
+}
+
+/* Add padding to containers */
+.container {
+ padding: 16px;
+}
+
+/* The "Forgot password" text */
+span.psw {
+ float: right;
+ padding-top: 16px;
+}
+
+/* Change styles for span and cancel button on extra small screens */
+@media screen and (max-width: 300px) {
+ span.psw {
+ display: block;
+ float: none;
+ }
+ .cancelbtn {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/img/box1.jpg b/UI/img/box1.jpg
similarity index 100%
rename from img/box1.jpg
rename to UI/img/box1.jpg
diff --git a/img/box2.jpg b/UI/img/box2.jpg
similarity index 100%
rename from img/box2.jpg
rename to UI/img/box2.jpg
diff --git a/img/box3.jpg b/UI/img/box3.jpg
similarity index 100%
rename from img/box3.jpg
rename to UI/img/box3.jpg
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/img/showcase.jpg b/UI/img/showcase.jpg
similarity index 100%
rename from img/showcase.jpg
rename to UI/img/showcase.jpg
diff --git a/index.html b/UI/index.html
similarity index 100%
rename from index.html
rename to UI/index.html
diff --git a/UI/login.html b/UI/login.html
new file mode 100644
index 0000000..4fb0111
--- /dev/null
+++ b/UI/login.html
@@ -0,0 +1,62 @@
+
+
+
+
+
+ Login
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file