diff --git a/TODO.md b/TODO.md
index af201b3..33713b9 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,6 +2,7 @@
 
 ## Goals
 - [X] Configure a tunnel in the "road warrior"
-- [ ] Enable two factor authentication with OpenSSL and Apache services
-- [ ] Manage PKI: certification authorities, X.509 certificates, revocation and OCSP.
+- [X] Enable two factor authentication with OpenSSL and Apache services
+- [X] Manage PKI: certification authorities, X.509 certificates, revocation and OCSP.
+
 
diff --git a/VM_OPENSSL_APACHE.sh b/VM_OPENSSL_APACHE.sh
index 2b60fba..6da4c76 100644
--- a/VM_OPENSSL_APACHE.sh
+++ b/VM_OPENSSL_APACHE.sh
@@ -40,7 +40,15 @@ mkdir -p /etc/systemd/system/httpd.service.d
 echo -e "[Service]\nProtectHome=false" > /etc/systemd/system/httpd.service.d/override.conf
 systemctl daemon-reload
 
-# serviço !!!
+# sim, é preciso fazer isto para carregar serviços
+echo "LoadModule session_module modules/mod_session.so" > /etc/httpd/conf.modules.d/01-session.conf
+echo "LoadModule session_cookie_module modules/mod_session_cookie.so" >> /etc/httpd/conf.modules.d/01-session.conf
+echo "LoadModule auth_form_module modules/mod_auth_form.so" > /etc/httpd/conf.modules.d/01-auth_form.conf
+
+# mega paginas webs
+cp -r www/* /var/www/html/
+chown -R apache:apache /var/www/html/
+
 systemctl enable --now httpd
 
 # acho ?????
diff --git a/conf/ssl.conf b/conf/ssl.conf
index e91ad41..060f7be 100644
--- a/conf/ssl.conf
+++ b/conf/ssl.conf
@@ -18,12 +18,40 @@ Listen 443 https
     SSLOCSPOverrideResponder on
     SSLOCSPUseRequestNonce off
 
-    # PAM + TOTP Authentication
+    # Session management for Form Auth
+    Session On
+    SessionCookieName session path=/;HttpOnly;Secure
+
+    # Protected Area
     <Location "/">
-        AuthType Basic
-        AuthName "Enter UNIX Password + Google Authenticator Code"
-        AuthBasicProvider PAM
+        AuthType Form
+        AuthName "Coimbra VPN"
+        AuthFormProvider PAM
         AuthPAMService httpd-totp
+        AuthFormLoginRequiredLocation "/login.html"
         Require valid-user
     </Location>
+
+    # Public Login Page
+    <Location "/login.html">
+        AuthType None
+        Require all granted
+    </Location>
+
+    # Login Handler
+    <Location "/dologin">
+        SetHandler form-login-handler
+        AuthType Form
+        AuthName "Coimbra VPN"
+        AuthFormProvider PAM
+        AuthPAMService httpd-totp
+        AuthFormLoginSuccessLocation "/index.html"
+        AuthFormLoginRequiredLocation "/login.html?error=1"
+    </Location>
+
+    # Logout Handler
+    <Location "/logout">
+        SetHandler form-logout-handler
+        AuthFormLogoutLocation "/login.html?loggedout=1"
+    </Location>
 </VirtualHost>
diff --git a/www/index.html b/www/index.html
new file mode 100644
index 0000000..d12eddb
--- /dev/null
+++ b/www/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Internal Secure Portal - Coimbra VPN</title>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-hover: #4f46e5;
+            --bg: #0f172a;
+            --card-bg: rgba(30, 41, 59, 0.7);
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+            --success: #22c55e;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg);
+            background-image: 
+                radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
+                radial-gradient(at 100% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
+            color: var(--text);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            overflow: hidden;
+        }
+
+        .container {
+            width: 100%;
+            max-width: 600px;
+            padding: 2rem;
+            text-align: center;
+            z-index: 1;
+        }
+
+        .card {
+            background: var(--card-bg);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 1.5rem;
+            padding: 3rem;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            animation: fadeIn 0.8s ease-out;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .icon-wrapper {
+            background: rgba(34, 197, 94, 0.1);
+            color: var(--success);
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto 2rem;
+            font-size: 2.5rem;
+            border: 1px solid rgba(34, 197, 94, 0.2);
+        }
+
+        h1 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(to right, #fff, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        p {
+            color: var(--text-muted);
+            line-height: 1.6;
+            margin-bottom: 2rem;
+        }
+
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: rgba(34, 197, 94, 0.1);
+            color: var(--success);
+            padding: 0.5rem 1rem;
+            border-radius: 9999px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            margin-bottom: 2rem;
+        }
+
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--success);
+            border-radius: 50%;
+            box-shadow: 0 0 10px var(--success);
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.5); opacity: 0.5; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+
+        .logout-btn {
+            display: inline-block;
+            padding: 0.75rem 2rem;
+            background: transparent;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: var(--text-muted);
+            border-radius: 0.75rem;
+            text-decoration: none;
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .logout-btn:hover {
+            background: rgba(255, 255, 255, 0.05);
+            color: var(--text);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="icon-wrapper">
+                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 256 256"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80Zm-112-24a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Zm-80-56a12,12,0,1,1-12-12A12,12,0,0,1,128,152Z"></path></svg>
+            </div>
+            
+            <div class="status-badge">
+                <span class="status-dot"></span>
+                Securely Authenticated (2FA)
+            </div>
+
+            <h1>Protected Portal Access</h1>
+            <p>Welcome to the Coimbra VPN Internal Network. Your identity has been verified via Client Certificate and Two-Factor Authentication (TOTP).</p>
+            
+            <a href="/logout" class="logout-btn">Logout Session</a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/www/login.html b/www/login.html
new file mode 100644
index 0000000..e490111
--- /dev/null
+++ b/www/login.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Identity Verification - Coimbra VPN</title>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-hover: #4f46e5;
+            --bg: #0b0f1a;
+            --card-bg: #161b2c;
+            --input-bg: #1f2937;
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: rgba(255, 255, 255, 0.1);
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg);
+            background-image: 
+                radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
+                radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
+            color: var(--text);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+
+        .login-card {
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            padding: 2.5rem;
+            width: 100%;
+            max-width: 420px;
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+            animation: slideUp 0.6s ease-out;
+        }
+
+        @keyframes slideUp {
+            from { opacity: 0; transform: translateY(30px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .logo {
+            width: 64px;
+            height: 64px;
+            background: linear-gradient(135deg, var(--primary), #8b5cf6);
+            border-radius: 1rem;
+            margin: 0 auto 1.5rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
+        }
+
+        h1 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        p.subtitle {
+            color: var(--text-muted);
+            font-size: 0.875rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.25rem;
+        }
+
+        label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: var(--text-muted);
+        }
+
+        input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: var(--input-bg);
+            border: 1px solid var(--border);
+            border-radius: 0.75rem;
+            color: var(--text);
+            font-size: 1rem;
+            transition: all 0.2s;
+            outline: none;
+        }
+
+        input:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+        }
+
+        .otp-group {
+            position: relative;
+        }
+
+        button {
+            width: 100%;
+            padding: 0.875rem;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 0.75rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-top: 1rem;
+        }
+
+        button:hover {
+            background: var(--primary-hover);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        .error-message {
+            display: none;
+            background: rgba(239, 44, 44, 0.1);
+            color: #ef4444;
+            padding: 0.75rem;
+            border-radius: 0.75rem;
+            font-size: 0.875rem;
+            margin-bottom: 1.5rem;
+            border: 1px solid rgba(239, 44, 44, 0.2);
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-card">
+        <div class="header">
+            <div class="logo">
+                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" viewBox="0 0 256 256"><path d="M160,16a80.09,80.09,0,0,0-80,80,8,8,0,0,0,16,0,64,64,0,1,1,64,64,8,8,0,0,0,0,16,80,80,0,0,0,0-160Zm0,128a48,48,0,1,0-48-48A48.05,48.05,0,0,0,160,144Zm0-80a32,32,0,1,1-32,32A32,32,0,0,1,160,64Zm-48,128a8,8,0,0,1,8,8v16a8,8,0,0,1-16,0V200A8,8,0,0,1,112,192Zm-32,8a8,8,0,0,1,8,8v16a8,8,0,0,1-16,0V208A8,8,0,0,1,80,200Zm80,32a8,8,0,0,1-8,8H120a8,8,0,0,1,0-16h32A8,8,0,0,1,160,232Zm48-32a8,8,0,0,1,8,8v16a8,8,0,0,1-16,0V208A8,8,0,0,1,208,200Zm24,8a8,8,0,0,1-8,8H192a8,8,0,0,1,0-16h32A8,8,0,0,1,232,208ZM48,152a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V160A8,8,0,0,1,48,152ZM24,160a8,8,0,0,1,8,8v16a8,8,0,0,1-16,0V168A8,8,0,0,1,24,160Z"></path></svg>
+            </div>
+            <h1>Two-Factor Auth</h1>
+            <p class="subtitle">Enter your UNIX credentials and TOTP code</p>
+        </div>
+
+        <div id="error-box" class="error-message">Invalid credentials or TOTP code.</div>
+
+        <form id="login-form" action="/dologin" method="POST">
+            <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" id="username" name="httpd_username" placeholder="e.g. john" required autocomplete="username">
+            </div>
+
+            <div class="form-group">
+                <label for="password">UNIX Password</label>
+                <input type="password" id="password" placeholder="••••••••" required autocomplete="current-password">
+            </div>
+
+            <div class="form-group">
+                <label for="otp">TOTP Code</label>
+                <input type="text" id="otp" placeholder="6-digit code" required pattern="[0-9]{6}" inputmode="numeric" autocomplete="one-time-code">
+            </div>
+
+            <input type="hidden" id="httpd_password" name="httpd_password">
+            
+            <button type="submit">Verify & Access</button>
+        </form>
+    </div>
+
+    <script>
+        // Check for error query param
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('error')) {
+            document.getElementById('error-box').style.display = 'block';
+        }
+
+        document.getElementById('login-form').addEventListener('submit', function(e) {
+            const password = document.getElementById('password').value;
+            const otp = document.getElementById('otp').value;
+            
+            // Concatenate password + TOTP as expected by pam_google_authenticator forward_pass
+            document.getElementById('httpd_password').value = password + otp;
+            
+            // Allow form to submit
+        });
+    </script>
+</body>
+</html>
