diff --git a/templates/base.html b/templates/base.html
index d02e83f..c148861 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -4,7 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title }}</title>
-    <link rel="stylesheet" href="/static/styles.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    {% if theme == 'dark' %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/dark_theme.css') }}">
+    {% elif theme == 'modern' %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/modern_theme.css') }}">
+    {% elif theme == 'vampire' %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/vampire_theme.css') }}">
+    {% elif theme == 'nordic' %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/nordic_theme.css') }}">
+    {% elif theme == 'halloween' %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/halloween_theme.css') }}">
+    {% else %}
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/light_theme.css') }}">
+    {% endif %}
 </head>
 <body>
     <header>
@@ -36,19 +49,65 @@
                 </div>
             </div>
             <a href="/rule_creation">Rule Creation</a>
-            <a href="/notebook">Notebook</a>
+
+            {% if current_user.is_authenticated %}
+                <a href="/notebook">Notebook</a>
+                <a href="/profile">{{ current_user.username }}</a>
+            {% else %}
+                <a href="/login">Login</a>
+            {% endif %}
         </nav>
+
+        <!-- Theme Toggle Slider -->
+        <label class="switch">
+            <input type="checkbox" id="theme-toggle">
+            <span class="slider"></span>
+        </label>
     </header>
 
     <div class="tip">
         {{ random_tip }}
     </div>
 
-    <main class="main-content">
+    <main class="{{ theme }}-theme main-content">
         {% block content %}{% endblock %}
     </main>
 
     <script>
+        // Theme toggle functionality
+        const themeToggle = document.getElementById('theme-toggle');
+        const themeStylesheet = document.getElementById('theme-stylesheet');
+        const body = document.body;
+
+        // Check for stored theme in localStorage
+        if (localStorage.getItem('theme') === 'light') {
+            themeToggle.checked = true;
+            body.classList.add('light-theme');
+            body.classList.remove('dark-theme');
+            themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
+        } else {
+            themeToggle.checked = false;
+            body.classList.add('dark-theme');
+            body.classList.remove('light-theme');
+            themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
+        }
+
+        // Event listener for theme toggle
+        themeToggle.addEventListener('change', function() {
+            if (this.checked) {
+                body.classList.remove('dark-theme');
+                body.classList.add('light-theme');
+                themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
+                localStorage.setItem('theme', 'light');
+            } else {
+                body.classList.remove('light-theme');
+                body.classList.add('dark-theme');
+                themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+
+        // Burger menu toggle function for mobile
         function toggleMenu() {
             const navLinks = document.querySelector('.nav-links');
             navLinks.classList.toggle('active');
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..17d88b6
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+{% block content %}
+<h1>Login</h1>
+<form method="POST">
+    <label for="username">Username:</label>
+    <input type="text" name="username" id="username" required><br>
+    <label for="password">Password:</label>
+    <input type="password" name="password" id="password" required><br>
+    <button type="submit">Login</button>
+</form>
+
+<p>Don't have an account? <a href="{{ url_for('register') }}">Register here</a></p>
+{% endblock %}
diff --git a/templates/methodology.html b/templates/methodology.html
index c21b6e5..fa1d538 100644
--- a/templates/methodology.html
+++ b/templates/methodology.html
@@ -30,7 +30,7 @@
 
 <h2>Operating System IOCs</h2>
 <ul>
-    <li><a href="/linux" class="link-button">Linux IOC</a></li>
     <li><a href="/windows" class="link-button">Windows IOC</a></li>
+    <li><a href="/linux" class="link-button">Linux IOC</a></li>  
 </ul>
 {% endblock %}
diff --git a/templates/profile.html b/templates/profile.html
new file mode 100644
index 0000000..12b7408
--- /dev/null
+++ b/templates/profile.html
@@ -0,0 +1,84 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>User Profile</h1>
+<p>Welcome, {{ username }}!</p>
+
+<!-- Display Flash Messages -->
+{% with messages = get_flashed_messages(with_categories=true) %}
+  {% if messages %}
+    <ul>
+      {% for category, message in messages %}
+        <li class="{{ category }}">{{ message }}</li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endwith %}
+
+<!-- Display the username and other information -->
+<div>
+    <h3>Your Information:</h3>
+    <ul>
+        <li><strong>Username:</strong> {{ username }}</li>
+        <li><strong>Email:</strong> {{ email }}</li>
+        <li><strong>Role:</strong> {{ role }}</li>
+        <li><strong>Team:</strong> {{ team }}</li>
+        <li><strong>Manager:</strong> {{ manager }}</li>
+    </ul>
+
+    <!-- Profile Update Form -->
+    <form method="POST">
+        <div>
+            <label for="role">Role:</label>
+            <select name="role" id="role" required>
+                <option value="" disabled selected>Please select a role</option>
+                <option value="Junior Host Analyst" {% if role == 'Junior Host Analyst' %}selected{% endif %}>Junior Host Analyst</option>
+                <option value="Junior Network Analyst" {% if role == 'Junior Network Analyst' %}selected{% endif %}>Junior Network Analyst</option>
+                <option value="Senior Host Analyst" {% if role == 'Senior Host Analyst' %}selected{% endif %}>Senior Host Analyst</option>
+                <option value="Senior Network Analyst" {% if role == 'Senior Network Analyst' %}selected{% endif %}>Senior Network Analyst</option>
+                <option value="Lead Analyst" {% if role == 'Lead Analyst' %}selected{% endif %}>Lead Analyst</option>
+                <option value="DFIR" {% if role == 'DFIR' %}selected{% endif %}>DFIR</option>
+                <option value="Malware Analyst" {% if role == 'Malware Analyst' %}selected{% endif %}>Malware Analyst</option>
+            </select>
+        </div>
+        <div>
+            <label for="theme">Select Theme:</label>
+            <select name="theme" id="theme">
+                <option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark Theme</option>
+                <option value="light" {% if theme == 'light' %}selected{% endif %}>Light Theme</option>
+                <option value="modern" {% if theme == 'modern' %}selected{% endif %}>Modern Theme</option>
+                <option value="vampire" {% if theme == 'vampire' %}selected{% endif %}>Vampire Theme</option>
+                <option value="nordic" {% if theme == 'nordic' %}selected{% endif %}>Nordic Theme</option>
+                <option value="halloween" {% if theme == 'halloween' %}selected{% endif %}>Halloween Theme</option>
+            </select>
+        </div>
+        <div>
+            <label for="team">Team:</label>
+            <input type="text" id="team" name="team" value="{{ team }}" required>
+        </div>
+
+        <div>
+            <label for="manager">Manager:</label>
+            <input type="text" id="manager" name="manager" value="{{ manager }}" required>
+        </div>
+
+        <div>
+            <label for="password">New Password (leave empty if unchanged):</label>
+            <input type="password" id="password" name="password">
+        </div>
+
+        <div>
+            <label for="password_confirm">Confirm New Password:</label>
+            <input type="password" id="password_confirm" name="password_confirm">
+        </div>
+
+        <button type="submit">Save</button>
+    </form>
+
+    <!-- Logout Button -->
+    <form action="{{ url_for('logout') }}" method="POST">
+        <button type="submit">Log Out</button>
+    </form>
+</div>
+
+{% endblock %}
diff --git a/templates/register.html b/templates/register.html
new file mode 100644
index 0000000..284a996
--- /dev/null
+++ b/templates/register.html
@@ -0,0 +1,82 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>Create an Account</h1>
+
+<form method="POST">
+    <div>
+        <label for="username">Username</label>
+        <input type="text" id="username" name="username" required>
+    </div>
+    
+    <div>
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" required>
+    </div>
+    
+    <div>
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" required>
+        <small>Password must be at least 10 characters, contain 1 uppercase letter, 1 special character, and 1 number.</small>
+    </div>
+
+    <div>
+        <label for="confirm_password">Confirm Password</label>
+        <input type="password" id="confirm_password" name="confirm_password" required>
+    </div>
+    
+    <button type="submit" id="submit" disabled>Create Account</button>
+</form>
+
+<div id="password-requirements">
+    <ul>
+        <li id="min-length">Minimum 10 characters: ❌</li>
+        <li id="uppercase">At least 1 uppercase letter: ❌</li>
+        <li id="special-char">At least 1 special character: ❌</li>
+        <li id="number">At least 1 number: ❌</li>
+        <li id="match">Passwords match: ❌</li>
+    </ul>
+</div>
+
+<script>
+    const passwordInput = document.getElementById('password');
+    const confirmPasswordInput = document.getElementById('confirm_password');
+    const submitButton = document.getElementById('submit');
+
+    const minLengthRequirement = document.getElementById('min-length');
+    const uppercaseRequirement = document.getElementById('uppercase');
+    const specialCharRequirement = document.getElementById('special-char');
+    const numberRequirement = document.getElementById('number');
+    const matchRequirement = document.getElementById('match');
+
+    function validatePassword() {
+        const password = passwordInput.value;
+        const confirmPassword = confirmPasswordInput.value;
+
+        // Regex pattern for password validation
+        const passwordPattern = /^(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{10,}$/;
+
+        const passwordValid = passwordPattern.test(password);
+        const passwordsMatch = password === confirmPassword;
+
+        // Check each validation rule and update the corresponding list item
+        minLengthRequirement.textContent = password.length >= 10 ? "Minimum 10 characters: ✔" : "Minimum 10 characters: ❌";
+        uppercaseRequirement.textContent = /[A-Z]/.test(password) ? "At least 1 uppercase letter: ✔" : "At least 1 uppercase letter: ❌";
+        specialCharRequirement.textContent = /[\W_]/.test(password) ? "At least 1 special character: ✔" : "At least 1 special character: ❌";
+        numberRequirement.textContent = /\d/.test(password) ? "At least 1 number: ✔" : "At least 1 number: ❌";
+        matchRequirement.textContent = passwordsMatch ? "Passwords match: ✔" : "Passwords match: ❌";
+
+        // Enable submit button only if all conditions are met
+        if (passwordValid && passwordsMatch) {
+            submitButton.disabled = false;
+        } else {
+            submitButton.disabled = true;
+        }
+    }
+
+    // Event listeners for password input and confirmation
+    passwordInput.addEventListener('input', validatePassword);
+    confirmPasswordInput.addEventListener('input', validatePassword);
+</script>
+
+{% endblock %}
