diff --git a/staff/rafael-infante/unsocial copy/.gitkeep b/staff/rafael-infante/unsocial copy/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial copy/images/boy.png b/staff/rafael-infante/unsocial copy/images/boy.png
new file mode 100644
index 00000000..fc4e8b35
Binary files /dev/null and b/staff/rafael-infante/unsocial copy/images/boy.png differ
diff --git a/staff/rafael-infante/unsocial copy/images/girl.png b/staff/rafael-infante/unsocial copy/images/girl.png
new file mode 100644
index 00000000..27f367db
Binary files /dev/null and b/staff/rafael-infante/unsocial copy/images/girl.png differ
diff --git a/staff/rafael-infante/unsocial copy/images/users-avatar.png b/staff/rafael-infante/unsocial copy/images/users-avatar.png
new file mode 100644
index 00000000..7ac2ff60
Binary files /dev/null and b/staff/rafael-infante/unsocial copy/images/users-avatar.png differ
diff --git a/staff/rafael-infante/unsocial copy/images/users-avatar2.png b/staff/rafael-infante/unsocial copy/images/users-avatar2.png
new file mode 100644
index 00000000..ccee2bf7
Binary files /dev/null and b/staff/rafael-infante/unsocial copy/images/users-avatar2.png differ
diff --git a/staff/rafael-infante/unsocial/index.1.html b/staff/rafael-infante/unsocial copy/index.1.html
similarity index 100%
rename from staff/rafael-infante/unsocial/index.1.html
rename to staff/rafael-infante/unsocial copy/index.1.html
diff --git a/staff/rafael-infante/unsocial/index.2.html b/staff/rafael-infante/unsocial copy/index.2.html
similarity index 100%
rename from staff/rafael-infante/unsocial/index.2.html
rename to staff/rafael-infante/unsocial copy/index.2.html
diff --git a/staff/rafael-infante/unsocial/index.3.html b/staff/rafael-infante/unsocial copy/index.3.html
similarity index 100%
rename from staff/rafael-infante/unsocial/index.3.html
rename to staff/rafael-infante/unsocial copy/index.3.html
diff --git a/staff/rafael-infante/unsocial copy/index.html b/staff/rafael-infante/unsocial copy/index.html
new file mode 100644
index 00000000..a6ed574c
--- /dev/null
+++ b/staff/rafael-infante/unsocial copy/index.html	
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Unsocial</title>
+  <link rel="shortcut icon" href="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+    :root {
+      --font: 'Poppins';
+      font-family: var(--font);
+      background-color: #e4b834;
+    }
+
+    .logo-container {
+      display: flex;
+      text-decoration: none;
+      color: black;
+      align-items: center;
+      margin: 0;
+      padding-left: 15px;
+    }
+
+    .logo {
+      max-height: 45px;
+      margin-right: 5px;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 15px;
+    }
+
+    .section-container {
+      background-color: white;
+      padding: 20px;
+      margin: 10px;
+      width: 85%;
+      max-width: 500px;
+      min-height: 500px;
+      border-radius: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    label {
+      padding-bottom: 8px;
+    }
+
+    input {
+      margin-bottom: 20px;
+      padding: 10px;
+      border-radius: 5px;
+      border: 1px solid gray;
+    }
+
+    h4 {
+      font-size: 15px;
+      font-weight: 400;
+    }
+
+    button {
+      color: white;
+      background-color: black;
+      margin-top: 25px;
+      padding: 15px;
+      border-radius: 15px;
+      cursor: pointer;
+      font-weight: bolder;
+      border: none;
+    }
+
+    button:hover {
+      color: black;
+      background-color: #e7cc79;
+      border: none;
+    }
+
+    #btn-register {
+      margin: 0;
+    }
+
+    #bottom-text,
+    p {
+      font-size: 12px;
+      color: grey;
+      margin-top: 20px;
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: bold;
+      color: black;
+      cursor: pointer;
+    }
+
+    a:hover {
+      color: #dda600;
+    }
+
+    h4 {
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <header class="logo-container">
+    <img src="/staff/rafael-infante/unsocial/images/users-avatar.png" alt="" class="logo">
+    <h1>unSocial</h1>
+  </header>
+
+  <script>
+
+    var users = [
+      { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+      { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+    ]
+
+    var loggedUser = null
+    // Login section
+    var loginSection = document.createElement('section')
+    var loginParagraph = document.createElement('p')
+    var loginTitle = document.createElement('h2')
+    var loginText = document.createElement('h4')
+    var loginForm = document.createElement('form')
+    var loginUsernameLabel = document.createElement('label')
+    var loginUsernameInput = document.createElement('input')
+    var loginPasswordLabel = document.createElement('label')
+    var loginPasswordInput = document.createElement('input')
+    var loginButton = document.createElement('button')
+    var loginBottomText = document.createElement('p')
+
+    loginParagraph.innerText = 'Welcome !'
+    loginTitle.innerText = 'Sign in to unSocial'
+    loginText.innerText = 'Write username and password to access'
+    loginSection.appendChild(loginParagraph)
+    loginSection.appendChild(loginTitle)
+    loginSection.appendChild(loginText)
+    loginSection.classList.add('section-container')
+    loginSection.appendChild(loginForm)
+    loginForm.classList.add('form-container')
+    loginForm.appendChild(loginUsernameLabel)
+    loginForm.appendChild(loginUsernameInput)
+    loginUsernameLabel.htmlFor = 'login-user'
+    loginUsernameLabel.innerText = 'User name'
+    loginUsernameInput.id = 'login-user'
+    loginUsernameInput.placeholder = 'Enter your user name'
+    loginUsernameInput.required = true
+    loginForm.appendChild(loginPasswordLabel)
+    loginForm.appendChild(loginPasswordInput)
+    loginPasswordLabel.htmlFor = 'login-password'
+    loginPasswordLabel.innerText = 'Password'
+    loginPasswordLabel.id = 'login-password'
+    loginPasswordInput.type = 'password'
+    loginPasswordInput.id = 'login-password'
+    loginPasswordInput.placeholder = 'Enter your Password'
+    loginPasswordInput.required = true
+    loginForm.appendChild(loginButton)
+    loginButton.id = 'btn-login'
+    loginButton.type = 'submit'
+    loginButton.innerText = 'Login'
+    loginSection.appendChild(loginBottomText)
+    loginBottomText.id = 'bottom-text'
+    loginBottomText.innerHTML = `Don't have an account? <a id="registerAnchor" href="">Register</a>`
+
+    var body = document.querySelector('body')
+    body.appendChild(loginSection)
+
+    var registerAnchor = document.getElementById('registerAnchor')
+    // Send user to register section when clicking on register anchor
+    registerAnchor.addEventListener('click', function (event) {
+      event.preventDefault()
+      loginSection.remove()
+      // Register Section
+      var registerSection = document.createElement('section')
+      var registerTitle = document.createElement('h2')
+      var registerText = document.createElement('h4')
+      var registerForm = document.createElement('form')
+      var registerNameLabel = document.createElement('label')
+      var registerNameInput = document.createElement('input')
+      var registerEmailLabel = document.createElement('label')
+      var registerEmailInput = document.createElement('input')
+      var registerUsernameLabel = document.createElement('label')
+      var registerUsernameInput = document.createElement('input')
+      var registerPasswordLabel = document.createElement('label')
+      var registerPasswordInput = document.createElement('input')
+      var registerButton = document.createElement('button')
+
+
+      registerSection.classList.add('section-container')
+      body.appendChild(registerSection)
+      registerTitle.innerText = 'Register to unSocial'
+      registerSection.appendChild(registerTitle)
+      registerText.innerText = 'Enter your details to register'
+      registerSection.appendChild(registerText)
+      registerForm.classList.add('form-container')
+      registerSection.appendChild(registerForm)
+      registerNameLabel.htmlFor = 'name'
+      registerNameLabel.innerText = 'Name'
+      registerEmailLabel.htmlFor = 'email'
+      registerEmailLabel.innerText = 'E-mail'
+      registerUsernameLabel.htmlFor = 'username'
+      registerUsernameLabel.innerText = 'User name'
+      registerPasswordLabel.htmlFor = 'name'
+      registerPasswordLabel.innerText = 'Password'
+
+      registerNameInput.type = 'text'
+      registerNameInput.id = 'name'
+      registerNameInput.placeholder = 'Enter your name'
+      registerNameInput.required = true
+
+      registerEmailInput.type = 'email'
+      registerEmailInput.id = 'email'
+      registerEmailInput.placeholder = 'Enter your E-mail'
+      registerEmailInput.required = true
+
+      registerUsernameInput.type = 'text'
+      registerUsernameInput.id = 'username'
+      registerUsernameInput.placeholder = 'Enter your user name'
+      registerUsernameInput.required = true
+
+      registerPasswordInput.type = 'password'
+      registerPasswordInput.id = 'password'
+      registerPasswordInput.placeholder = 'Enter your password'
+      registerPasswordInput.required = true
+
+      registerForm.appendChild(registerNameLabel)
+      registerForm.appendChild(registerNameInput)
+      registerForm.appendChild(registerEmailLabel)
+      registerForm.appendChild(registerEmailInput)
+      registerForm.appendChild(registerUsernameLabel)
+      registerForm.appendChild(registerUsernameInput)
+      registerForm.appendChild(registerPasswordLabel)
+      registerForm.appendChild(registerPasswordInput)
+
+      registerButton.id = 'btn-register'
+      registerButton.type = 'submit'
+      registerButton.innerText = 'Register'
+      registerForm.appendChild(registerButton)
+
+      var registerAnchorText = document.createElement('p')
+      registerAnchorText.innerText = 'Already have an account? '
+      registerSection.appendChild(registerAnchorText)
+      var registerLoginLink = document.createElement('a')
+      registerLoginLink.id = 'loginAnchor'
+      registerLoginLink.innerText = 'Login'
+      registerLoginLink.href = ''
+      registerAnchorText.appendChild(registerLoginLink)
+      // Send user to login section when clicking on login anchor
+      registerLoginLink.addEventListener('click', function (event) {
+        event.preventDefault();
+        registerSection.remove()
+        body.appendChild(loginSection)
+      })
+      // Save data of new user when clicking on register button
+      registerForm.addEventListener('submit', function (event) {
+        event.preventDefault()
+        var name = registerNameInput.value
+        var email = registerEmailInput.value
+        var username = registerUsernameInput.value
+        var password = registerPasswordInput.value
+
+        //TODO add rules
+        // if name.length < 2 -> name too short
+        // email includes @ and .
+        // separate concerns: data, presentation, business logic
+
+        var user = {
+          name: name,
+          email: email,
+          username: username,
+          password: password
+        }
+        users.push(user)
+        registerForm.reset()
+        registerSection.remove()
+        body.appendChild(loginSection)
+      })
+    })
+    // Compare data entered by the user with our users list
+    loginForm.addEventListener('submit', function (event) {
+      event.preventDefault()
+      var loginUsername = loginUsernameInput.value
+      var loginPassword = loginPasswordInput.value
+
+      var user = users.find(function (user) {
+        return user.username === loginUsername && user.password === loginPassword
+      })
+
+      if (user === undefined) {
+        alert('Please enter a valid user name and password')
+        loginForm.reset()
+      } else {
+        loggedUser = user
+        loginForm.reset()
+        loginSection.remove()
+        // Home Section
+        var homeSection = document.createElement('section')
+        var homeTitle = document.createElement('h2')
+        var homeText = document.createElement('h3')
+        var image = document.createElement('img')
+        var logoutButton = document.createElement('button')
+
+        body.appendChild(homeSection)
+        homeSection.appendChild(homeTitle)
+        homeSection.appendChild(homeText)
+        homeSection.appendChild(image)
+        homeSection.appendChild(logoutButton)
+
+        homeSection.id = 'home'
+        homeSection.classList.add('section-container')
+        homeTitle.innerText = 'Home'
+        homeText.innerText = 'Hello, ' + user.name + '!'
+        image.style.height = '300px'
+        image.src = '/staff/rafael-infante/unsocial/images/boy.png'
+        logoutButton.id = 'btn-logout'
+        logoutButton.innerText = 'Logout'
+        // Send user to login page when clicking on logout button
+        logoutButton.addEventListener('click', function (event) {
+          var condition = prompt('Are you sure? (y/n)')
+          if (condition === 'y') {
+            event.preventDefault()
+            loggedUser = null
+            homeSection.remove()
+            body.appendChild(loginSection)
+          }
+        })
+      }
+    })
+
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/data.js b/staff/rafael-infante/unsocial/data.js
new file mode 100644
index 00000000..f98e7df4
--- /dev/null
+++ b/staff/rafael-infante/unsocial/data.js
@@ -0,0 +1,4 @@
+var users = [
+  { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
+  { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
+]
\ No newline at end of file
diff --git a/staff/rafael-infante/unsocial/index.html b/staff/rafael-infante/unsocial/index.html
index 8659490e..1acf7ecb 100644
--- a/staff/rafael-infante/unsocial/index.html
+++ b/staff/rafael-infante/unsocial/index.html
@@ -6,115 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Unsocial</title>
   <link rel="shortcut icon" href="/staff/rafael-infante/unsocial/images/users-avatar2.png" type="image/x-icon">
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
-
-    :root {
-      --font: 'Poppins';
-      font-family: var(--font);
-      background-color: #e4b834;
-    }
-
-    .logo-container {
-      display: flex;
-      text-decoration: none;
-      color: black;
-      align-items: center;
-      margin: 0;
-      padding-left: 15px;
-    }
-
-    .logo {
-      max-height: 45px;
-      margin-right: 5px;
-    }
-
-    body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      margin: 15px;
-    }
-
-    .section-container {
-      background-color: white;
-      padding: 20px;
-      margin: 10px;
-      width: 85%;
-      max-width: 500px;
-      min-height: 500px;
-      border-radius: 10px;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .form-container {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
-
-    label {
-      padding-bottom: 8px;
-    }
-
-    input {
-      margin-bottom: 20px;
-      padding: 10px;
-      border-radius: 5px;
-      border: 1px solid gray;
-    }
-
-    h4 {
-      font-size: 15px;
-      font-weight: 400;
-    }
-
-    button {
-      color: white;
-      background-color: black;
-      margin-top: 25px;
-      padding: 15px;
-      border-radius: 15px;
-      cursor: pointer;
-      font-weight: bolder;
-      border: none;
-    }
-
-    button:hover {
-      color: black;
-      background-color: #e7cc79;
-      border: none;
-    }
-
-    #btn-register {
-      margin: 0;
-    }
-
-    #bottom-text,
-    p {
-      font-size: 12px;
-      color: grey;
-      margin-top: 20px;
-    }
-
-    a {
-      text-decoration: none;
-      font-weight: bold;
-      color: black;
-      cursor: pointer;
-    }
-
-    a:hover {
-      color: #dda600;
-    }
-
-    h4 {
-      margin: 0;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -123,12 +15,9 @@
     <h1>unSocial</h1>
   </header>
 
-  <script>
+  <script src="data.js"></script>
 
-    var users = [
-      { name: 'Peter Pan', email: 'peter@pan.com', username: 'peterpan', password: '123123123' },
-      { name: 'Wendy Darling', email: 'wendy@darling.com', username: 'wendydarling', password: '123123123' }
-    ]
+  <script>
 
     var loggedUser = null
     // Login section
@@ -274,6 +163,11 @@ <h1>unSocial</h1>
         var username = registerUsernameInput.value
         var password = registerPasswordInput.value
 
+        //TODO add rules
+        // if name.length < 2 -> name too short
+        // email includes @ and .
+        // separate concerns: data, presentation, business logic
+
         var user = {
           name: name,
           email: email,
diff --git a/staff/rafael-infante/unsocial/logic.js b/staff/rafael-infante/unsocial/logic.js
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial/main.js b/staff/rafael-infante/unsocial/main.js
new file mode 100644
index 00000000..e69de29b
diff --git a/staff/rafael-infante/unsocial/style.css b/staff/rafael-infante/unsocial/style.css
new file mode 100644
index 00000000..e934b386
--- /dev/null
+++ b/staff/rafael-infante/unsocial/style.css
@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
+
+:root {
+  --font: 'Poppins';
+  font-family: var(--font);
+  background-color: #e4b834;
+}
+
+.logo-container {
+  display: flex;
+  text-decoration: none;
+  color: black;
+  align-items: center;
+  margin: 0;
+  padding-left: 15px;
+}
+
+.logo {
+  max-height: 45px;
+  margin-right: 5px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 15px;
+}
+
+.section-container {
+  background-color: white;
+  padding: 20px;
+  margin: 10px;
+  width: 85%;
+  max-width: 500px;
+  min-height: 500px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.form-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+label {
+  padding-bottom: 8px;
+}
+
+input {
+  margin-bottom: 20px;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid gray;
+}
+
+h4 {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+button {
+  color: white;
+  background-color: black;
+  margin-top: 25px;
+  padding: 15px;
+  border-radius: 15px;
+  cursor: pointer;
+  font-weight: bolder;
+  border: none;
+}
+
+button:hover {
+  color: black;
+  background-color: #e7cc79;
+  border: none;
+}
+
+#btn-register {
+  margin: 0;
+}
+
+#bottom-text,
+p {
+  font-size: 12px;
+  color: grey;
+  margin-top: 20px;
+}
+
+a {
+  text-decoration: none;
+  font-weight: bold;
+  color: black;
+  cursor: pointer;
+}
+
+a:hover {
+  color: #dda600;
+}
+
+h4 {
+  margin: 0;
+}
\ No newline at end of file
