diff --git a/static/css/style.css b/static/css/style.css
index 53ec5d1..f30b839 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -242,6 +242,8 @@ body {
     justify-content: center;
     gap: 10px;
     padding: 1rem;
+    backdrop-filter: blur(5px);
+    border-radius: 12px;
 }
 
 .alert i {
@@ -249,29 +251,29 @@ body {
 }
 
 .alert-success {
-    background-color: #28a745;
+    background: rgba(40, 167, 69, 0.95);
     color: white;
 }
 
 .alert-danger {
-    background-color: #dc3545;
+    background: rgba(220, 53, 69, 0.95);
     color: white;
 }
 
 .alert-warning {
-    background-color: #ffc107;
+    background: rgba(255, 193, 7, 0.95);
     color: #333;
 }
 
 .alert-info {
-    background-color: #17a2b8;
+    background: rgba(23, 162, 184, 0.95);
     color: white;
 }
 
 /* Animações para feedback */
 @keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from { opacity: 0; transform: translate(-50%, -20px); }
+    to { opacity: 1; transform: translate(-50%, 0); }
 }
 
 .alert {
diff --git a/static/img/logo002-alpha.png b/static/img/logo002-alpha.png
index 9867303..3243c83 100644
Binary files a/static/img/logo002-alpha.png and b/static/img/logo002-alpha.png differ
diff --git a/templates/login.html b/templates/login.html
index 6b4e454..869f62a 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,60 +3,59 @@
 {% block title %}Login{% endblock %}
 
 {% block content %}
-<div class="row justify-content-center align-items-center min-vh-100 m-0">
-    <div class="col-md-6 col-lg-4 px-3">
-        <div class="card shadow-lg animate__animated animate__fadeIn">
-            <div class="card-body p-4 p-sm-5">
-                <div class="text-center mb-4">
-                    <img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo">
-                    <h2 class="card-title mb-4">Controles OCI</h2>
+<div class="login-container">
+    <div class="login-content">
+        <div class="text-center mb-4">
+            <img src="{{ url_for('static', filename='img/logo002-alpha.png') }}" alt="Logo OCI" class="login-logo mb-3">
+            <h4 class="login-title">Controles OCI</h4>
+            <p class="login-subtitle">Prossiga com sua conta</p>
+        </div>
+
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
+                        {{ message }}
+                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+
+        <form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
+            <div class="form-floating mb-3">
+                <input type="email" class="form-control" id="email" name="email" placeholder="Email" required autofocus>
+                <label for="email">Email</label>
+                <div class="invalid-feedback">
+                    Por favor, informe seu email.
                 </div>
-
-                {% with messages = get_flashed_messages(with_categories=true) %}
-                    {% if messages %}
-                        {% for category, message in messages %}
-                            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
-                                {{ message }}
-                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                            </div>
-                        {% endfor %}
-                    {% endif %}
-                {% endwith %}
-
-                <form method="POST" action="{{ url_for('login') }}" class="needs-validation" novalidate>
-                    <div class="form-floating mb-3">
-                        <input type="email" class="form-control" id="email" name="email" placeholder="Email" required autofocus>
-                        <label for="email">Email</label>
-                        <div class="invalid-feedback">
-                            Por favor, informe seu email.
-                        </div>
-                    </div>
-
-                    <div class="form-floating mb-4">
-                        <input type="password" class="form-control" id="senha" name="senha" placeholder="Senha" required>
-                        <label for="senha">Senha</label>
-                        <div class="invalid-feedback">
-                            Por favor, informe sua senha.
-                        </div>
-                        <button class="btn btn-link text-secondary position-absolute end-0 top-50 translate-middle-y me-2" type="button" id="togglePassword">
-                            <i class="fas fa-eye"></i>
-                        </button>
-                    </div>
-
-                    <div class="d-grid">
-                        <button type="submit" class="btn btn-danger btn-lg">
-                            <i class="fas fa-sign-in-alt me-2"></i>Entrar
-                        </button>
-                    </div>
-                </form>
             </div>
-        </div>
 
-        <div class="text-center mt-4">
-            <small class="text-dark">
-                Precisa de ajuda? Entre em contato com o administrador.
-            </small>
-        </div>
+            <div class="form-floating mb-3">
+                <input type="password" class="form-control" id="senha" name="senha" placeholder="Senha" required>
+                <label for="senha">Senha</label>
+                <div class="invalid-feedback">
+                    Por favor, informe sua senha.
+                </div>
+                <button class="btn btn-link text-secondary position-absolute end-0 top-50 translate-middle-y me-2" type="button" id="togglePassword">
+                    <i class="fas fa-eye"></i>
+                </button>
+            </div>
+
+            <div class="form-floating mb-4">
+                <input type="text" class="form-control" id="otp" name="otp" placeholder="Código OTP" required>
+                <label for="otp">Código OTP</label>
+                <div class="invalid-feedback">
+                    Por favor, informe o código OTP do seu autenticador.
+                </div>
+            </div>
+
+            <div class="d-grid">
+                <button type="submit" class="btn btn-danger btn-lg">
+                    <i class="fas fa-sign-in-alt me-2"></i>Entrar
+                </button>
+            </div>
+        </form>
     </div>
 </div>
 
@@ -99,36 +98,60 @@ document.addEventListener('DOMContentLoaded', function() {
 body {
     background: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
     min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
 }
 
-.card {
-    background-color: white;
-    border: none;
-    border-radius: 15px;
+.login-container {
+    width: 100%;
+    max-width: 400px;
+    margin: auto;
+}
+
+.login-content {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    padding: 2rem;
+    border-radius: 20px;
 }
 
 .login-logo {
-    height: 100px;
+    height: 60px;
     width: auto;
-    margin-bottom: 1rem;
 }
 
-.form-control:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 0.25rem rgba(232, 0, 12, 0.25);
+.login-title {
+    color: var(--secondary-color);
+    font-weight: 500;
+    margin-bottom: 0.5rem;
 }
 
-.form-floating > .form-control:focus ~ label,
-.form-floating > .form-control:not(:placeholder-shown) ~ label {
-    color: var(--primary-color);
+.login-subtitle {
+    color: var(--secondary-light);
+    font-size: 0.9rem;
+    margin-bottom: 2rem;
+}
+
+.form-floating > .form-control {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    height: calc(3.5rem + 2px);
+    line-height: 1.25;
+}
+
+.form-floating > label {
+    padding: 1rem;
 }
 
 .btn-danger {
     background: var(--primary-color);
     border: none;
-    padding: 12px;
+    border-radius: 12px;
     font-weight: 500;
-    letter-spacing: 0.5px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
 }
 
 .btn-danger:hover {
@@ -137,45 +160,20 @@ body {
     box-shadow: 0 4px 12px rgba(232, 0, 12, 0.25);
 }
 
-/* Mobile adjustments */
 @media (max-width: 768px) {
-    .card {
-        margin: 1rem;
+    .login-container {
+        max-width: 100%;
     }
     
-    .card-body {
+    .login-content {
         padding: 1.5rem;
+        border-radius: 16px;
     }
     
     .login-logo {
-        height: 80px;
+        height: 50px;
     }
 }
-
-/* Alert adjustments */
-.alert {
-    position: fixed;
-    top: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1050;
-    min-width: 300px;
-    max-width: 90%;
-    text-align: center;
-    backdrop-filter: blur(5px);
-}
-
-.alert-info {
-    background-color: rgba(255,255,255,0.9);
-    border: none;
-    color: var(--secondary-color);
-}
-
-.alert-danger {
-    background-color: var(--primary-color);
-    color: white;
-    border: none;
-}
 </style>
 {% endblock %}
 {% endblock %} 
\ No newline at end of file