diff --git a/src/App.tsx b/src/App.tsx
index 9a8022a..955a8fa 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,8 @@ import 'react-toastify/dist/ReactToastify.css';
 import LandingPage from "./components/landing";
 import ConfigurationPage from "./components/configuration";
 import DocumentationPage from "./components/documentation";
+import LoginPage from "./components/login";
+import PasswordResetPage from "./components/password-reset";
 
 const App: React.FC = () => {
   return (
@@ -12,6 +14,8 @@ const App: React.FC = () => {
       <div className="min-h-screen w-full">
         <Routes>
           <Route path="/" element={<LandingPage />} />
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/password_reset" element={<PasswordResetPage />} />
           <Route path="/configure" element={<ConfigurationPage />} />
           <Route path="/documentation" element={<DocumentationPage />} />
         </Routes>
diff --git a/src/components/login/index.tsx b/src/components/login/index.tsx
new file mode 100644
index 0000000..abd7417
--- /dev/null
+++ b/src/components/login/index.tsx
@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { LogIn, UserPlus, Eye, EyeOff } from "lucide-react";
+
+const LoginPage: React.FC = () => {
+  const [isLogin, setIsLogin] = useState(true);
+  const [firstName, setFirstName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const passwordsMatch = isLogin || !confirmPassword || password === confirmPassword;
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (isLogin) {
+      console.log("Login attempt:", { email, password });
+    } else {
+      if (password !== confirmPassword) {
+        return; 
+      }
+      
+      console.log("Register attempt:", { firstName, email, password, confirmPassword });
+    }
+  };
+
+  const togglePanel = () => {
+    setIsLogin(!isLogin);
+    setFirstName("");
+    setEmail("");
+    setPassword("");
+    setConfirmPassword("");
+    setShowPassword(false);
+    setShowConfirmPassword(false);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-900 p-4">
+      <div className="w-full max-w-md space-y-8 rounded-xl bg-gray-800 p-8 shadow-lg border border-gray-700 transition-all duration-500">
+        <div className="text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-600 shadow-md">
+            {isLogin ? <LogIn className="h-6 w-6 text-white" /> : <UserPlus className="h-6 w-6 text-white" />}
+          </div>
+          <h2 className="mt-6 text-3xl font-bold tracking-tight text-white">
+            {isLogin ? "Acessar Prisma" : "Criar sua conta"}
+          </h2>
+        </div>
+        
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4 rounded-md">
+            {!isLogin && (
+              <div className="animate-in fade-in slide-in-from-top-2 duration-300">
+                <label className="text-sm font-medium text-gray-300">Primeiro Nome</label>
+                <input
+                  type="text"
+                  required={!isLogin}
+                  className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm transition-all"
+                  placeholder="Seu nome"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                />
+              </div>
+            )}
+
+            <div>
+              <label className="text-sm font-medium text-gray-300">Email</label>
+              <input
+                type="email"
+                required
+                className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm transition-all"
+                placeholder="seu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            <div>
+              <div className="flex items-center justify-between">
+                <label className="text-sm font-medium text-gray-300">Senha</label>
+                {isLogin && (
+                  <Link to="/password_reset" className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">
+                    Esqueceu a senha?
+                  </Link>
+                )}
+              </div>
+              <div className="relative mt-1"> 
+                <input
+                  type={showPassword ? "text" : "password"}
+                  required
+                  className="block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 pr-10 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm transition-all"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-indigo-400 transition-colors"
+                >
+                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                </button>
+              </div>
+            </div>
+
+            {!isLogin && (
+              <div className="animate-in fade-in slide-in-from-top-2 duration-300">
+                <label className="text-sm font-medium text-gray-300">Confirmar Senha</label>
+                <div className="relative mt-1"> 
+                  <input
+                    type={showConfirmPassword ? "text" : "password"}
+                    required={!isLogin}
+                    className={`block w-full rounded-md border bg-gray-700 px-3 py-2 pr-10 text-white placeholder-gray-400 focus:outline-none focus:ring-2 sm:text-sm transition-all ${
+                      passwordsMatch 
+                        ? 'border-gray-600 focus:border-indigo-500 focus:ring-indigo-500' 
+                        : 'border-red-500 focus:ring-red-500/50'
+                    }`}
+                    placeholder="••••••••"
+                    value={confirmPassword}
+                    onChange={(e) => setConfirmPassword(e.target.value)}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-indigo-400 transition-colors"
+                  >
+                    {showConfirmPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+                {!passwordsMatch && (
+                  <p className="mt-1 text-xs text-red-500 animate-in fade-in duration-200">
+                    As senhas não coincidem.
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+          <button
+            type="submit"
+            disabled={!passwordsMatch}
+            className={`w-full py-3 px-4 rounded-lg font-semibold text-white transition-all duration-300 transform ${
+              passwordsMatch 
+                ? 'bg-indigo-600 hover:bg-indigo-700 shadow-lg hover:shadow-xl hover:-translate-y-0.5' 
+                : 'bg-gray-600 cursor-not-allowed opacity-50'
+            }`}
+          >
+            {isLogin ? "Entrar" : "Finalizar Cadastro"}
+          </button>
+          <div className="pt-6 mt-6 border-t border-gray-700 text-center">
+            <p className="text-sm text-gray-400">
+              {isLogin ? "Não tem uma conta?" : "Já possui uma conta?"}{' '}
+              <button
+                type="button"
+                onClick={togglePanel}
+                className="font-semibold text-indigo-400 hover:text-indigo-300 transition-colors"
+              >
+                {isLogin ? "Crie sua conta aqui" : "Acesse aqui"}
+              </button>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/components/password-reset/index.tsx b/src/components/password-reset/index.tsx
new file mode 100644
index 0000000..2725ce4
--- /dev/null
+++ b/src/components/password-reset/index.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { ArrowLeft, Mail, CheckCircle } from "lucide-react";
+import { Link } from "react-router-dom";
+
+const PasswordResetPage: React.FC = () => {
+  const [email, setEmail] = useState("");
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // logica de envio de email de recuperacao
+    console.log("Reset password attempt:", { email });
+    setIsSubmitted(true);
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-900 p-4">
+      <div className="w-full max-w-md space-y-8 rounded-xl bg-gray-800 p-8 shadow-lg border border-gray-700">
+        <Link
+          to="/login"
+          className="inline-flex items-center text-sm text-indigo-400 hover:text-indigo-300 transition-colors mb-4"
+        >
+          <ArrowLeft className="h-4 w-4 mr-2" />
+          Voltar para login
+        </Link>
+
+        <div className="text-center">
+          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-600 shadow-md">
+            <Mail className="h-6 w-6 text-white" />
+          </div>
+          <h2 className="mt-6 text-3xl font-bold tracking-tight text-white">
+            Recuperar Senha
+          </h2>
+          <p className="mt-2 text-sm text-gray-400">
+            {isSubmitted
+              ? "Verifique seu email"
+              : "Digite seu email para receber um link de recuperação"}
+          </p>
+        </div>
+
+        {!isSubmitted ? (
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            <div>
+              <label className="text-sm font-medium text-gray-300">Email</label>
+              <input
+                type="email"
+                required
+                className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 sm:text-sm transition-all"
+                placeholder="seu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full py-3 px-4 rounded-lg font-semibold text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
+            >
+              Enviar Link de Recuperação
+            </button>
+          </form>
+        ) : (
+          <div className="mt-8 space-y-6">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <CheckCircle className="h-16 w-16 text-green-500" />
+              <p className="text-center text-gray-300">
+                Enviamos um link de recuperação para <span className="font-semibold">{email}</span>
+              </p>
+              <p className="text-center text-sm text-gray-400">
+                Verifique sua caixa de entrada e clique no link para redefinir sua senha.
+              </p>
+            </div>
+
+            <button
+              onClick={() => {
+                setEmail("");
+                setIsSubmitted(false);
+              }}
+              className="w-full py-3 px-4 rounded-lg font-semibold text-white bg-indigo-600 hover:bg-indigo-700 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5"
+            >
+              Enviar outro email
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PasswordResetPage;