diff --git a/loginform/css/style.css b/loginform/css/style.css
new file mode 100644
index 0000000..02d54b7
--- /dev/null
+++ b/loginform/css/style.css
@@ -0,0 +1,298 @@
+body {
+  margin: 0;
+
+  background-color: white;
+
+  font-family: 'Montserrat', sans-serif;
+  font-size: 18px;
+  line-height: 1;
+  color: #161616;
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
+ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.img {
+    display: block;
+    padding: 0;
+    list-style: none;
+    width: 100%;
+}
+
+
+body::-webkit-scrollbar {
+  width: 12px;               /* width of the entire scrollbar */
+}
+
+body::-webkit-scrollbar-track {
+  background: #FF7171;        /* color of the tracking area */
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #FF9C9C;    /* color of the scroll thumb */
+  border-radius: 20px;       /* roundness of the scroll thumb */
+  border: white;  /* creates padding around scroll thumb */
+}
+
+/************************************************************/
+
+.container {
+    opacity: 1;
+    visibility: visible;
+    display: flex;
+    flex-direction: row;
+    max-height: 1080px;
+    max-width: 1920px;
+    height: 100vh;
+    overflow: hidden;
+}
+.right_side {
+    width: 50%;
+    background: url('../img/list.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+
+.right_side img {
+    width: 100%;
+}
+
+.left_side {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    background: #FBFDFE;
+}
+
+.connection {
+    position: relative;
+    top: 17%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+}
+
+.connection h1 {
+    font-weight: 400;
+    font-size: 46px;
+    line-height: 56px;
+    color: #000000;
+
+    margin-bottom: 20px;
+}
+
+.next {
+    flex: none;
+    position: relative;
+    bottom: 40px;
+    right: 40px;
+}
+
+.next a {
+    bottom: -40px;
+    float: right;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0 20px 0;
+}
+
+.form input {
+    width: 400px;
+    height: 80px;
+
+    background: #FFFFFF;
+    border: 3px solid rgba(70, 82, 157, 0.4);
+    border-radius: 30px;
+
+    font-weight: 300;
+    font-size: 20px;
+    font-family: "Montserrat";
+
+    color: #000000;
+    opacity: 0.6;
+    text-indent: 20px;
+    text-align: left;
+}
+
+.inpt {
+  margin-bottom: 30px;
+}
+
+.error {
+    color: red;
+    font-size: 16px;
+}
+
+.reg_login {
+  margin-bottom: 7px;
+}
+
+.password {
+  margin-bottom: 25px;
+}
+
+.password_confirm {
+  margin-bottom: 7px;
+}
+
+.login_error {
+  color:red;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  font-size: 16px;
+}
+
+.password_error {
+  color: red;
+  margin-bottom: 15px;
+  padding-left: 20px;
+  font-size: 16px;
+}
+
+.connection a {
+    margin-top: 20px;
+    font-weight: 400;
+    font-size: 19px;
+    line-height: 23px;
+    text-decoration-line: underline;
+    color: #46529D;
+    text-align: left;
+}
+
+.connection a:hover {
+    color: #46529D;
+}
+
+.connection a:visited {
+    color: #46529D;
+}
+
+
+@media only screen and (min-width: 992px) and (max-width:1424px) {
+    .connection h1 {
+        font-size: 36px;
+    }
+
+}
+
+@media only screen and (min-width: 767px) and (max-width:991px) {
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form input {
+        width: 330px;
+        font-size: 19px;
+    }
+
+}
+
+@media only screen and (min-width: 480px) and (max-width:766px) {
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+    .next a {
+        padding: 21px;
+        float: right;
+    }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+    .next a {
+        padding: 21px;
+        float: right;
+    }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form {
+        width: 90%;
+    }
+
+    .form input {
+        width: 100%;
+        font-size: 20px;
+    }
+
+}
+
+@keyframes preloader-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes preloader-bounce {
+
+    0%,
+    100% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+}
diff --git a/loginform/img/btnArrow.png b/loginform/img/btnArrow.png
new file mode 100644
index 0000000..0b2187d
Binary files /dev/null and b/loginform/img/btnArrow.png differ
diff --git a/loginform/img/image.png b/loginform/img/image.png
new file mode 100644
index 0000000..372e04e
Binary files /dev/null and b/loginform/img/image.png differ
diff --git a/loginform/img/list.jpg b/loginform/img/list.jpg
new file mode 100644
index 0000000..7dfd1ce
Binary files /dev/null and b/loginform/img/list.jpg differ
diff --git a/loginform/js/main.js b/loginform/js/main.js
new file mode 100644
index 0000000..522742d
--- /dev/null
+++ b/loginform/js/main.js
@@ -0,0 +1,8 @@
+// прелоудер при загрузке страницы
+window.onload = function () {
+    document.body.classList.add('loaded_hiding');
+    window.setTimeout(function () {
+        document.body.classList.add('loaded');
+        document.body.classList.remove('loaded_hiding');
+    }, 500);
+}
\ No newline at end of file
diff --git a/loginform/login.html b/loginform/login.html
new file mode 100644
index 0000000..43d7619
--- /dev/null
+++ b/loginform/login.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="wide wow-animation" lang="en">
+
+<head>
+    <title>Login</title>
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport"
+        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <!-- <link rel="icon" href="images/favicon.ico" type="image/x-icon"> -->
+
+    <link rel="stylesheet" type="text/css"
+        href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">
+    <link rel="stylesheet" type="text/css" href="css/style.css">
+    <script type="text/javascript" src="js/main.js"></script>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="left_side">
+            <div class="connection">
+                <h1>Login</h1>
+                <p class="error">Wrong username or password entered</p>
+                <form class="form">
+                    <input type="text" name="Login" class="inpt" placeholder="Login">
+                    <input type="password" name="Password" placeholder="Password">
+                </form>
+                    <a href="registration.html" tile="Don’t have an account? Create one!">Don’t have an
+                        account? Create one!</a>
+            </div>
+            <div class="next">
+                <a href="registration.html" title="Next"><img src="img/btnArrow.png"></a>
+            </div>
+        </div>
+        <div class="right_side">
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/loginform/registration.html b/loginform/registration.html
new file mode 100644
index 0000000..f0ea622
--- /dev/null
+++ b/loginform/registration.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html class="wide wow-animation" lang="en">
+
+<head>
+    <title>Registration</title>
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport"
+        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <!-- <link rel="icon" href="images/favicon.ico" type="image/x-icon"> -->
+
+    <link rel="stylesheet" type="text/css"
+        href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">
+    <link rel="stylesheet" href="css/style.css">
+    <script type="text/javascript" src="js/main.js"></script>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="left_side">
+            <div class="connection">
+                <h1>Registration</h1>
+                <form class="form">
+                    <input type="text" name="Login" placeholder="Login" class="reg_login">
+                    <p class="login_error">login is already taken</p>
+                    <input type="password" placeholder="Password" class="password">
+                    <input type="password" placeholder="Confirm password" class="password_confirm">
+                    <p class="password_error">Password do not coincide</p>
+                </form>
+            </div>
+            <div class="next">
+                <a href="index.html" title="Next"><img src="img/btnArrow.png"></a>
+            </div>
+        </div>
+        <div class="right_side">
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/public/bebra.ico b/public/bebra.ico
new file mode 100644
index 0000000..15a7250
Binary files /dev/null and b/public/bebra.ico differ
diff --git a/public/css/login_style.css b/public/css/login_style.css
new file mode 100644
index 0000000..02d54b7
--- /dev/null
+++ b/public/css/login_style.css
@@ -0,0 +1,298 @@
+body {
+  margin: 0;
+
+  background-color: white;
+
+  font-family: 'Montserrat', sans-serif;
+  font-size: 18px;
+  line-height: 1;
+  color: #161616;
+  -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}
+
+ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.img {
+    display: block;
+    padding: 0;
+    list-style: none;
+    width: 100%;
+}
+
+
+body::-webkit-scrollbar {
+  width: 12px;               /* width of the entire scrollbar */
+}
+
+body::-webkit-scrollbar-track {
+  background: #FF7171;        /* color of the tracking area */
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #FF9C9C;    /* color of the scroll thumb */
+  border-radius: 20px;       /* roundness of the scroll thumb */
+  border: white;  /* creates padding around scroll thumb */
+}
+
+/************************************************************/
+
+.container {
+    opacity: 1;
+    visibility: visible;
+    display: flex;
+    flex-direction: row;
+    max-height: 1080px;
+    max-width: 1920px;
+    height: 100vh;
+    overflow: hidden;
+}
+.right_side {
+    width: 50%;
+    background: url('../img/list.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+
+.right_side img {
+    width: 100%;
+}
+
+.left_side {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    background: #FBFDFE;
+}
+
+.connection {
+    position: relative;
+    top: 17%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+}
+
+.connection h1 {
+    font-weight: 400;
+    font-size: 46px;
+    line-height: 56px;
+    color: #000000;
+
+    margin-bottom: 20px;
+}
+
+.next {
+    flex: none;
+    position: relative;
+    bottom: 40px;
+    right: 40px;
+}
+
+.next a {
+    bottom: -40px;
+    float: right;
+}
+
+.form {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0 20px 0;
+}
+
+.form input {
+    width: 400px;
+    height: 80px;
+
+    background: #FFFFFF;
+    border: 3px solid rgba(70, 82, 157, 0.4);
+    border-radius: 30px;
+
+    font-weight: 300;
+    font-size: 20px;
+    font-family: "Montserrat";
+
+    color: #000000;
+    opacity: 0.6;
+    text-indent: 20px;
+    text-align: left;
+}
+
+.inpt {
+  margin-bottom: 30px;
+}
+
+.error {
+    color: red;
+    font-size: 16px;
+}
+
+.reg_login {
+  margin-bottom: 7px;
+}
+
+.password {
+  margin-bottom: 25px;
+}
+
+.password_confirm {
+  margin-bottom: 7px;
+}
+
+.login_error {
+  color:red;
+  margin-bottom: 10px;
+  padding-left: 20px;
+  font-size: 16px;
+}
+
+.password_error {
+  color: red;
+  margin-bottom: 15px;
+  padding-left: 20px;
+  font-size: 16px;
+}
+
+.connection a {
+    margin-top: 20px;
+    font-weight: 400;
+    font-size: 19px;
+    line-height: 23px;
+    text-decoration-line: underline;
+    color: #46529D;
+    text-align: left;
+}
+
+.connection a:hover {
+    color: #46529D;
+}
+
+.connection a:visited {
+    color: #46529D;
+}
+
+
+@media only screen and (min-width: 992px) and (max-width:1424px) {
+    .connection h1 {
+        font-size: 36px;
+    }
+
+}
+
+@media only screen and (min-width: 767px) and (max-width:991px) {
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form input {
+        width: 330px;
+        font-size: 19px;
+    }
+
+}
+
+@media only screen and (min-width: 480px) and (max-width:766px) {
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+    .next a {
+        padding: 21px;
+        float: right;
+    }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+    .next a {
+        padding: 21px;
+        float: right;
+    }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form {
+        width: 90%;
+    }
+
+    .form input {
+        width: 100%;
+        font-size: 20px;
+    }
+
+}
+
+@keyframes preloader-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes preloader-bounce {
+
+    0%,
+    100% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+}
diff --git a/public/img/btnArrow.png b/public/img/btnArrow.png
new file mode 100644
index 0000000..0b2187d
Binary files /dev/null and b/public/img/btnArrow.png differ
diff --git a/public/img/image.png b/public/img/image.png
new file mode 100644
index 0000000..372e04e
Binary files /dev/null and b/public/img/image.png differ
diff --git a/public/img/list.jpg b/public/img/list.jpg
new file mode 100644
index 0000000..7dfd1ce
Binary files /dev/null and b/public/img/list.jpg differ
diff --git a/public/index.html b/public/index.html
index 35ae054..f725335 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,14 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <link rel="shortcut icon" href="%PUBLIC_URL%/bebra.ico" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description"
+          content="Web site created using create-react-app" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -23,11 +21,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React Hooks & Redux example</title>
+    <title>TodoList TP</title>
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="login_style.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  </head>
+</head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
diff --git a/public/js/main.js b/public/js/main.js
new file mode 100644
index 0000000..522742d
--- /dev/null
+++ b/public/js/main.js
@@ -0,0 +1,8 @@
+// прелоудер при загрузке страницы
+window.onload = function () {
+    document.body.classList.add('loaded_hiding');
+    window.setTimeout(function () {
+        document.body.classList.add('loaded');
+        document.body.classList.remove('loaded_hiding');
+    }, 500);
+}
\ No newline at end of file
diff --git a/public/login.html b/public/login.html
new file mode 100644
index 0000000..159de21
--- /dev/null
+++ b/public/login.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="wide wow-animation" lang="en">
+
+<head>
+    <title>ToDoList TP</title>
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport"
+        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <!-- <link rel="icon" href="images/favicon.ico" type="image/x-icon"> -->
+
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">
+    <link rel="stylesheet" type="text/css" href="css/login_style.css">
+    <script type="text/javascript" src="js/main.js"></script>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="left_side">
+            <div class="connection">
+                <h1>Login</h1>
+                <p class="error">Wrong username or password entered</p>
+                <form class="form">
+                    <input type="text" name="Login" class="inpt" placeholder="Login">
+                    <input type="password" name="Password" placeholder="Password">
+                </form>
+                    <a href="registration.html" tile="Don’t have an account? Create one!">Don’t have an
+                        account? Create one!</a>
+            </div>
+            <div class="next">
+                <a href="registration.html" title="Next"><img src="img/btnArrow.png"></a>
+            </div>
+        </div>
+        <div class="right_side">
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/public/manifest.json b/public/manifest.json
index 1f2f141..6b190fa 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "bebra.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     }
diff --git a/public/registration.html b/public/registration.html
new file mode 100644
index 0000000..93628c3
--- /dev/null
+++ b/public/registration.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="wide wow-animation" lang="en">
+
+<head>
+    <title>ToDoList TP</title>
+    <meta name="format-detection" content="telephone=no">
+    <meta name="viewport"
+        content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8">
+    <!-- <link rel="icon" href="images/favicon.ico" type="image/x-icon"> -->
+
+    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400">
+    <link rel="stylesheet" href="css/login_style.css">
+    <script type="text/javascript" src="js/main.js"></script>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="left_side">
+            <div class="connection">
+                <h1>Registration</h1>
+                <form class="form">
+                    <input type="text" name="Login" placeholder="Login" class="reg_login">
+                    <p class="login_error">login is already taken</p>
+                    <input type="password" placeholder="Password" class="password">
+                    <input type="password" placeholder="Confirm password" class="password_confirm">
+                    <p class="password_error">Password do not coincide</p>
+                </form>
+            </div>
+            <div class="next">
+                <a href="index.html" title="Next"><img src="img/btnArrow.png"></a>
+            </div>
+        </div>
+        <div class="right_side">
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/public/style.css b/public/style.css
index 24790ae..6b05c6d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -373,3 +373,249 @@ body::-webkit-scrollbar-thumb {
   background-color: rgba(255, 113, 113, 1);
   cursor: pointer;
 }
+.quit_butt {
+    color: white;
+    text-decoration: none;
+}
+
+.quit_visited {
+    color: white;
+}
+
+/*              LIZAAAAAAAAA            */
+
+.container {
+    opacity: 1;
+    visibility: visible;
+    display: flex;
+    flex-direction: row;
+    max-height: 1080px;
+    max-width: 1920px;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.right_side {
+    width: 50%;
+    background: url('../img/list.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+}
+
+    .right_side img {
+        width: 100%;
+    }
+
+.left_side {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    background: #FBFDFE;
+}
+
+.connection {
+    position: relative;
+    top: 17%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+}
+
+    .connection h1 {
+        font-weight: 400;
+        font-size: 46px;
+        line-height: 56px;
+        color: #000000;
+        margin-bottom: 20px;
+    }
+
+.next {
+    flex: none;
+    position: relative;
+    bottom: 40px;
+    right: 40px;
+}
+
+    .next a {
+        bottom: -40px;
+        float: right;
+    }
+
+.form {
+    display: flex;
+    flex-direction: column;
+    padding: 10px 0 20px 0;
+}
+
+    .form input {
+        width: 400px;
+        height: 80px;
+        background: #FFFFFF;
+        border: 3px solid rgba(70, 82, 157, 0.4);
+        border-radius: 30px;
+        font-weight: 300;
+        font-size: 20px;
+        font-family: "Montserrat";
+        color: #000000;
+        opacity: 0.6;
+        text-indent: 20px;
+        text-align: left;
+    }
+
+.inpt {
+    margin-bottom: 30px;
+}
+
+.error {
+    color: red;
+    font-size: 16px;
+    visibility: hidden;
+}
+
+.reg_login {
+    margin-bottom: 7px;
+}
+
+.password {
+    margin-bottom: 25px;
+}
+
+.password_confirm {
+    margin-bottom: 7px;
+}
+
+.login_error {
+    visibility: hidden;
+    color: red;
+    margin-bottom: 10px;
+    padding-left: 20px;
+    font-size: 16px;
+}
+
+.password_error {
+    visibility: hidden;
+    color: red;
+    margin-bottom: 15px;
+    padding-left: 20px;
+    font-size: 16px;
+}
+
+.connection a {
+    margin-top: 20px;
+    font-weight: 400;
+    font-size: 19px;
+    line-height: 23px;
+    text-decoration-line: underline;
+    color: #46529D;
+    text-align: left;
+}
+
+    .connection a:hover {
+        color: #46529D;
+    }
+
+    .connection a:visited {
+        color: #46529D;
+    }
+
+
+@media only screen and (min-width: 992px) and (max-width:1424px) {
+    .connection h1 {
+        font-size: 36px;
+    }
+}
+
+@media only screen and (min-width: 767px) and (max-width:991px) {
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form input {
+        width: 330px;
+        font-size: 19px;
+    }
+}
+
+@media only screen and (min-width: 480px) and (max-width:766px) {
+    .container {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+        .next a {
+            padding: 21px;
+            float: right;
+        }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 480px) {
+    .container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .next {
+        flex: none;
+    }
+
+        .next a {
+            padding: 21px;
+            float: right;
+        }
+
+    .left_side {
+        width: 100%;
+    }
+
+    .right_side {
+        display: none;
+    }
+
+    .connection h1 {
+        font-size: 30px;
+    }
+
+    .form {
+        width: 90%;
+    }
+
+        .form input {
+            width: 100%;
+            font-size: 20px;
+        }
+}
+
+@keyframes preloader-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes preloader-bounce {
+
+    0%, 100% {
+        transform: scale(0);
+    }
+
+    50% {
+        transform: scale(1);
+    }
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 78e10b0..4d51cbe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,16 +5,16 @@ function App() {
 
     return (
         
-
-        <div className="App">
+        
+        <span className="App">
             <main className="container">
 
-                <div className="divider"></div>
+                <span className="spanider"></span>
 
-                {/* Please check /views/TodoList.js for detail*/}
                 <TodoList/>
             </main>
-        </div>
+        </span >
+        
     );
 }
 
diff --git a/src/components/TodoItem.js b/src/components/TodoItem.js
index 7e8863d..61dcd12 100644
--- a/src/components/TodoItem.js
+++ b/src/components/TodoItem.js
@@ -28,7 +28,6 @@ const TodoItem = (props) => {
         //filter to get the todoId which need to be remove
         let newTodoList = todoList.filter(item => item.id !== todoId);
         dispatch({type: 'REMOVE_TODO', payload: newTodoList})
-
     }
 
     return (
diff --git a/src/views/Login.js b/src/views/Login.js
new file mode 100644
index 0000000..e7f6350
--- /dev/null
+++ b/src/views/Login.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+
+
+
+const Login = () => {
+
+    const url = 'https://localhost:5001/api/Task';
+    const data = {
+        "username": "Dimas",
+        "taskname": "Srat",
+        "iscompleted": false,
+        "isimportant": true
+    };
+
+    return (
+        <section id="section-todo">
+
+            <span className="menu animate__animated animate__fadeInLeft">
+                <span className="menu_inner">
+                    <span className="profile">
+                        <span className="profile_pic"><img className="avatar" src="bang.jpg" alt="" /></span>
+                        <span className="profile_name text"><p>NAME</p></span>
+                        <span className="profile_lastname text"><p>LASTNAME</p></span>
+                        <span className="profile_line"></span>
+                        <span className="profile_sex">MALE</span>
+                    </span>
+
+                    <span className="quit">
+                        <span className="quit_inner">
+                            <span className="quit_butt">QUIT</span>
+                        </span>
+                    </span>
+                </span>
+            </span>
+        </section>
+    );
+}
+
+export default Login;
diff --git a/src/views/Registration.js b/src/views/Registration.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/TodoList.js b/src/views/TodoList.js
index d6118e2..8b7e1e7 100644
--- a/src/views/TodoList.js
+++ b/src/views/TodoList.js
@@ -2,9 +2,7 @@ import React,{useState} from 'react';
 import { useSelector,useDispatch } from 'react-redux';
 import TodoItem from '../components/TodoItem';
 
-
 const TodoList = () => {
-
   //#2 Used to get a single attribute or object inside the Reducer
 
   //Get todoList from todoReducer
@@ -22,6 +20,28 @@ const TodoList = () => {
   const handleInput = (e)=>{
     setInputTodo(e.target.value);
   }
+  // eslint-disable-next-line
+  const url = 'https://localhost:5001/api/Task';
+  const data = {
+      "username":"Dimas",
+      "taskname":"Srat",
+      "iscompleted":false,
+      "isimportant":true
+  };
+
+   function addItem() {
+
+       fetch('https://localhost:5001/api/Task', {
+           method: 'post',
+           mode: 'no-cors',
+           headers: {
+               'Accept': 'application/json, text/plain, */*',
+               'Content-Type': 'application/json'
+           },
+           body: JSON.stringify(data)
+       }).then(res => res.json())
+           .then(res => console.log(res));
+   }
 
   //Handle onClick event
   const addNewTodo = ()=>{
@@ -37,13 +57,15 @@ const TodoList = () => {
         dispatch({type:'ADD_TODO',payload:newTodoObject});
         //Empty input 
         setInputTodo('');
+        console.log(data);
+        addItem();
     }
     else{
         //Display Error message
         setErrMsg('');
     }
 
-   
+
   }
 
     return (
@@ -60,8 +82,8 @@ const TodoList = () => {
                 </span>
 
                 <span className="quit">
-                    <span className="quit_inner">
-                        <span className="quit_butt">QUIT</span>
+                        <span className="quit_inner">
+                            <a className="quit_butt" href="login.html">QUIT</a>
                     </span>
                 </span>
             </span>
@@ -88,10 +110,6 @@ const TodoList = () => {
             <div className="task_plus" onClick={addNewTodo} ></div>
         </div>
       </section>
-
-
-
-
       );
 }