diff --git a/css/entrar.css b/css/entrar.css
new file mode 100644
index 0000000..553d263
--- /dev/null
+++ b/css/entrar.css
@@ -0,0 +1,153 @@
+body, main {
+  min-height: 100vh;
+}
+
+body {
+  background-color: var(--cinza-escuro);
+  color: var(--branco);
+  text-align: center;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.titulo {
+  margin: 4rem 0 1rem 0;
+}
+
+.sub {
+  margin-bottom: 3rem;
+}
+
+.container {
+  background-color: var(--branco);
+  color: var(--cinza);
+  border-radius: 20px 20px 0 0;
+  padding: 2rem;
+  flex: 1;
+}
+
+.container form {
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.email, .senha {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: left;
+  margin-bottom: 1.5rem;
+}
+
+.senha .senha-area {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.senha .senha-area .olho {
+  position: absolute;
+  right: 2px;
+  padding: 6px;
+  border: none;
+  background: none;
+  color: var(--cinza);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: opacity 50ms, color 0.2s ease;
+  opacity: 1;
+}
+
+.senha .senha-area .olho:focus {
+  color: var(--cinza-escuro);
+  outline: none;
+}
+
+.senha .senha-area .olho:hover {
+  color: var(--laranja);
+}
+
+.senha .senha-area .olho.trocando {
+  opacity: 0;
+}
+
+#email,
+#senha {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 1rem;
+  border: 2px solid transparent;
+  border-radius: 10px;
+  background-color: var(--branco-escuro);
+  color: var(--cinza-escuro);
+  transition: border-color 0.2s ease;
+}
+
+#email:focus,
+#senha:focus {
+  border-color: var(--laranja);
+  outline: none;
+}
+
+#email:not(:focus):not(:placeholder-shown):invalid,
+#senha:not(:focus):not(:placeholder-shown):invalid {
+  border: 2px solid var(--perigo);
+}
+
+#email:not(:focus):not(:placeholder-shown):valid,
+#senha:not(:focus):not(:placeholder-shown):valid {
+  border: 2px solid var(--sucesso);
+}
+
+#senha {
+  padding-right: 2rem;
+}
+
+label {
+  font-weight: 600;
+  color: var(--cinza-escuro);
+}
+
+button[type="submit"] {
+  width: 100%;
+  padding: 1rem;
+  border: none;
+  border-radius: 10px;
+  background-color: var(--laranja);
+  color: var(--branco);
+  font-size: 1rem;
+  font-weight: bold;
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+  transition: background-color 0.2s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: var(--laranja-claro);
+}
+
+button[type="submit"]:focus {
+  outline: none;
+  background-color: var(--laranja-claro);
+}
+
+.registrar a, .esqueci-senha a {
+  color: var(--laranja);
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.registrar a:focus, .esqueci-senha a:focus {
+  outline: none;
+  text-decoration: underline;
+}
+
+.registrar {
+  margin-bottom: 5px;
+}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..78dcbad
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,30 @@
+:root {
+  /* produto */
+  --laranja: #ff7622;
+  --laranja-claro: #fb6d3a;
+  /* base */
+  --cinza-escuro: #32343E;
+  --cinza: #6B6E82;
+  --cinza-claro: #d2d4e4;
+  --branco: #F0F5FA;
+  --branco-escuro: #ECECEC;
+  /* feedback */
+  --sucesso: #2A7138;
+  --perigo: #CD1422;
+  --verde-claro: #29Cb41;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
diff --git a/js/entrar.js b/js/entrar.js
new file mode 100644
index 0000000..238504f
--- /dev/null
+++ b/js/entrar.js
@@ -0,0 +1,49 @@
+const baseApiUrl = 'https://back-mjk6.onrender.com/api'
+
+const olho = document.querySelector('#olho')
+const button = document.querySelector('#btn-entrar')
+
+function mudarVisibilidadeSenha() {
+  olho.classList.add('trocando')
+
+  setTimeout(() => {
+    const senhaInput = document.querySelector('#senha')
+    const isPasswordVisible = senhaInput.type === 'text'
+
+    senhaInput.type = isPasswordVisible ? 'password' : 'text'
+    olho.innerHTML = isPasswordVisible ? '<i class="fa-regular fa-eye"></i>' : '<i class="fa-regular fa-eye-slash"></i>'
+
+    olho.classList.remove('trocando');
+  }, 50)
+}
+
+async function entrar(e) {
+  e.preventDefault()
+
+  const email = document.querySelector('#email').value
+  const senha = document.querySelector('#senha').value
+
+  if (!email || !senha) {
+    alert('Preencha todos os campos')
+    return
+  }
+
+  button.disabled = true
+  button.textContent = 'Entrando...'
+
+  try {
+    const response = await axios.post(`${baseApiUrl}/auth/login`, {
+      email: email,
+      password: senha
+    })
+
+    localStorage.setItem('token', response.data.token)
+    window.location.href = '/Front2'
+  } catch (error) {
+    console.error('Erro:', error)
+    alert('Ocorreu um erro ao tentar entrar. Tente novamente.')
+
+    button.disabled = false
+    button.textContent = 'Entrar'
+  }
+}
diff --git a/login/entrar.html b/login/entrar.html
new file mode 100644
index 0000000..42dd60f
--- /dev/null
+++ b/login/entrar.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Entre na sua conta Pizza Stars para fazer pedidos e gerenciar suas informações.">
+  <title>Pizza Stars - Entrar</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="../css/entrar.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+  <main>
+    <h1 class="titulo" tabindex="0">Entrar</h1>
+    <p class="sub">Por favor entre com sua conta existente</p>
+    <div class="container">
+      <form onsubmit="entrar(event)" role="form" aria-label="Formulário de Login">
+        <div class="email">
+          <label for="email">Email</label>
+          <input type="email" id="email" placeholder="email@gmail.com" autocomplete="email" autofocus required aria-required="true">
+        </div>
+        <div class="senha">
+          <label for="senha">Senha</label>
+          <div class="senha-area">
+            <input type="password" id="senha" placeholder="••••••••" minlength="6" autocomplete="current-password" required aria-required="true">
+            <button type="button" class="olho" id="olho" onclick="mudarVisibilidadeSenha()" aria-label="Mostrar ou ocultar senha">
+              <i class="fa-regular fa-eye" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+        <button type="submit" id="btn-entrar">Entrar</button>
+      </form>
+      <div class="registrar">
+        Não tem uma conta? <a href="registrar.html">registre-se</a>
+      </div>
+      <div class="esqueci-senha">
+        Não sabe a senha? <a href="recuperar.html">alterar senha</a>
+      </div>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="../js/entrar.js"></script>
+</body>
+</html>
diff --git a/login/login1.html b/login/login1.html
deleted file mode 100644
index ce29c50..0000000
--- a/login/login1.html
+++ /dev/null
@@ -1,173 +0,0 @@
-<!DOCTYPE html>
-<html lang="pt-BR">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Tela de Login</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      font-family: 'Inter', sans-serif;
-    }
-
-    body {
-      background-color: #ff5722;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-    }
-
-    .container {
-      background-color: #1d1b25;
-      border-radius: 10px;
-      width: 350px;
-      padding: 20px;
-    }
-
-    .form-box {
-      background-color: #fff;
-      border-radius: 15px;
-      padding: 30px 20px;
-      margin-top: 10px;
-    }
-
-    h2 {
-      color: #fff;
-      text-align: center;
-    }
-
-    p.sub {
-      color: #ccc;
-      text-align: center;
-      font-size: 14px;
-      margin-top: 5px;
-    }
-
-    label {
-      display: block;
-      margin-bottom: 5px;
-      color: #333;
-      font-weight: 600;
-    }
-
-    input[type="email"],
-    input[type="password"] {
-      width: 100%;
-      padding: 10px;
-      margin-bottom: 15px;
-      border-radius: 8px;
-      border: 1px solid #ddd;
-    }
-
-    .senha-area {
-      position: relative;
-    }
-
-    .senha-area input {
-      padding-right: 35px;
-    }
-
-    .senha-area .eye {
-      position: absolute;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-
-    .remember-forgot {
-      display: flex;
-      justify-content: space-between;
-      font-size: 13px;
-      margin-bottom: 15px;
-    }
-
-    .remember-forgot label {
-      display: flex;
-      align-items: center;
-    }
-
-    .remember-forgot a {
-      color: #ff5722;
-      text-decoration: none;
-    }
-
-    button {
-      width: 100%;
-      padding: 12px;
-      background-color: #ff5722;
-      color: white;
-      border: none;
-      border-radius: 8px;
-      font-weight: bold;
-      cursor: pointer;
-      margin-bottom: 15px;
-    }
-
-    .register {
-      text-align: center;
-      font-size: 14px;
-    }
-
-    .register span {
-      color: #ff5722;
-      font-weight: bold;
-      cursor: pointer;
-    }
-
-    .social-login {
-      display: flex;
-      justify-content: center;
-      gap: 15px;
-      margin-top: 10px;
-    }
-
-    .social-login img {
-      width: 30px;
-      cursor: pointer;
-    }
-  </style>
-</head>
-<body>
-
-  <div class="container">
-    <h2>Entrar</h2>
-    <p class="sub">Por favor entre com sua conta existente</p>
-
-    <div class="form-box">
-      <form>
-        <label for="email">Email</label>
-        <input type="email" id="email" placeholder="lucas@gmail.com">
-
-        <label for="password">Senha</label>
-        <div class="senha-area">
-          <input type="password" id="password" placeholder="••••••••">
-          <span class="eye">👁️</span>
-        </div>
-
-        <div class="remember-forgot">
-          <label><input type="checkbox"> Lembrar-me</label>
-          <a href="#">Esqueci a senha</a>
-        </div>
-
-        <button type="submit">Entrar</button>
-      </form>
-
-      <div class="register">
-        Não tem conta? <span>REGISTRE-SE</span>
-      </div>
-
-      <div class="social-login">
-        <img src="https://cdn-icons-png.flaticon.com/512/300/300221.png" alt="Google">
-        <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook">
-        <img src="https://cdn-icons-png.flaticon.com/512/732/732228.png" alt="Apple">
-      </div>
-    </div>
-  </div>
-
-</body>
-</html>
diff --git a/login/login4.html b/login/recuperar.html
similarity index 100%
rename from login/login4.html
rename to login/recuperar.html
diff --git a/login/login2.html b/login/registrar.html
similarity index 100%
rename from login/login2.html
rename to login/registrar.html