diff --git a/assets/css/custom.css b/assets/css/custom.css
new file mode 100644
index 0000000..8047da0
--- /dev/null
+++ b/assets/css/custom.css
@@ -0,0 +1,46 @@
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-image: url('https://picsum.photos/1920/1080');
+    background-size: cover;
+    background-position: center;
+}
+
+.logo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+}
+
+.login-container {
+    max-width: 400px;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    background-color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.btn-primary {
+    background-color: #3996d2;
+    border-color: #3996d2;
+}
+
+.btn-primary:hover {
+    background-color: #2d7bad;
+    border-color: #2d7bad;
+}
+
+.password-wrapper {
+    position: relative;
+}
+
+.password-wrapper .toggle-password {
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..053beb4
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,13 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const togglePassword = document.querySelector('.toggle-password');
+    const passwordInput = document.getElementById('password');
+
+    if (togglePassword && passwordInput) {
+        togglePassword.addEventListener('click', function () {
+            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+            passwordInput.setAttribute('type', type);
+            this.classList.toggle('bi-eye');
+            this.classList.toggle('bi-eye-slash');
+        });
+    }
+});
diff --git a/assets/pasted-20260119-203446-bf56dedb.png b/assets/pasted-20260119-203446-bf56dedb.png
new file mode 100644
index 0000000..05247c4
Binary files /dev/null and b/assets/pasted-20260119-203446-bf56dedb.png differ