diff --git a/templates/about.html b/templates/about.html
index 7094e2a..47dec62 100644
--- a/templates/about.html
+++ b/templates/about.html
@@ -4,7 +4,56 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About Multus Bot</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://stackpath.bootstr    <div class="content-container">
+        <div class="section-card">
+            <h2><i class="fas fa-rocket"></i> Our Mission</h2>
+            <p>Multus Bot, created by SimolZimol, is designed to simplify server management through AI-powered tools. Whether you're looking for help with moderation, user interactions, or just want to automate server tasks, Multus Bot is here to assist you.</p>
+        </div>
+
+        <div class="section-card">
+            <h2><i class="fas fa-server"></i> Where to Use Multus Bot?</h2>
+            <p>At this time, Multus Bot is only available for the <strong>Ludi et Historia</strong> Discord server. We are exploring ways to extend its reach to more communities in the future.</p>
+        </div>
+
+        <div class="section-card">
+            <h2><i class="fas fa-code"></i> Creator and Support</h2>
+            <p>Multus Bot was created by <strong>SimolZimol</strong>, a dedicated Discord enthusiast and developer. If you need assistance or have any questions about the bot, feel free to reach out to SimolZimol on Discord via <strong>@simolzimol</strong>.</p>
+        </div>
+
+        <div class="section-card">
+            <h2><i class="fas fa-star"></i> Key Features</h2>
+            <div class="feature-grid">
+                <div class="feature-item">
+                    <div class="feature-icon">
+                        <i class="fas fa-brain"></i>
+                    </div>
+                    <h3>AI-Powered</h3>
+                    <p>Advanced artificial intelligence to handle complex server interactions and provide intelligent responses.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3>Moderation Tools</h3>
+                    <p>Comprehensive moderation features to keep your Discord server safe and organized.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon">
+                        <i class="fas fa-cogs"></i>
+                    </div>
+                    <h3>Automation</h3>
+                    <p>Automate repetitive tasks and streamline server management processes.</p>
+                </div>
+                <div class="feature-item">
+                    <div class="feature-icon">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3>User Engagement</h3>
+                    <p>Interactive features designed to enhance community engagement and participation.</p>
+                </div>
+            </div>
+        </div>
+    </div>bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         body {
@@ -234,8 +283,10 @@
         <p>Multus Bot was created by <strong>SimolZimol</strong>, a dedicated Discord enthusiast and developer. If you need assistance or have any questions about the bot, feel free to reach out to SimolZimol on Discord via <strong>@simolzimol</strong>.</p>
     </div>
 
-    <footer class="text-center py-3">
-        <p>&copy; 2025 Multus Bot. Exclusively available on Ludi et Historia.</p>
+    <footer>
+        <div class="footer-content">
+            <p>&copy; 2025 Multus Bot. Exclusively available on Ludi et Historia.</p>
+        </div>
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
diff --git a/templates/navbar.html b/templates/navbar.html
index d0032ea..695b363 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -1,11 +1,158 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="/">Multus Bot</a>
-    <ul class="navbar-nav ml-auto">
-        <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
-        <li class="nav-item"><a class="nav-link" href="/about">About Us</a></li>
-        <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
-        <li class="nav-item"><a class="nav-link" href="/faq">FAQ</a></li>
-        <li class="nav-item"><a class="nav-link" href="/help">Help</a></li>
-        <li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}">Login</a></li>
-    </ul>
+<style>
+.modern-navbar {
+    background: linear-gradient(135deg, rgba(12, 20, 38, 0.95) 0%, rgba(26, 31, 46, 0.95) 100%);
+    backdrop-filter: blur(15px);
+    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
+    padding: 1rem 0;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.modern-navbar .navbar-brand {
+    color: #e2e8f0 !important;
+    font-weight: 700;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.modern-navbar .navbar-brand:hover {
+    color: #667eea !important;
+    transform: scale(1.05);
+}
+
+.brand-icon {
+    color: #667eea;
+    font-size: 1.8rem;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+.modern-navbar .navbar-nav .nav-link {
+    color: #a0aec0 !important;
+    font-weight: 500;
+    padding: 0.5rem 1rem !important;
+    margin: 0 0.25rem;
+    border-radius: 25px;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.modern-navbar .navbar-nav .nav-link::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.modern-navbar .navbar-nav .nav-link:hover::before {
+    left: 100%;
+}
+
+.modern-navbar .navbar-nav .nav-link:hover {
+    color: #e2e8f0 !important;
+    background: rgba(102, 126, 234, 0.1);
+    transform: translateY(-2px);
+}
+
+.login-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border-radius: 25px !important;
+    padding: 0.5rem 1.5rem !important;
+    font-weight: 600 !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    border: none !important;
+}
+
+.login-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
+    color: white !important;
+}
+
+.navbar-toggler {
+    border: 1px solid rgba(102, 126, 234, 0.3);
+    padding: 0.25rem 0.5rem;
+}
+
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28226, 232, 240, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+@media (max-width: 991px) {
+    .modern-navbar .navbar-collapse {
+        background: rgba(26, 31, 46, 0.95);
+        border-radius: 15px;
+        margin-top: 1rem;
+        padding: 1rem;
+        border: 1px solid rgba(102, 126, 234, 0.2);
+    }
+    
+    .modern-navbar .navbar-nav .nav-link {
+        text-align: center;
+        margin: 0.25rem 0;
+    }
+}
+</style>
+
+<nav class="navbar navbar-expand-lg modern-navbar">
+    <div class="container">
+        <a class="navbar-brand" href="/">
+            <i class="fas fa-robot brand-icon"></i>
+            Multus Bot
+        </a>
+        
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="/">
+                        <i class="fas fa-home"></i> Home
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/about">
+                        <i class="fas fa-info-circle"></i> About
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/contact">
+                        <i class="fas fa-envelope"></i> Contact
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/faq">
+                        <i class="fas fa-question-circle"></i> FAQ
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/help">
+                        <i class="fas fa-life-ring"></i> Help
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link login-btn" href="{{ url_for('login') }}">
+                        <i class="fas fa-sign-in-alt"></i> Login
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
 </nav>