diff --git a/core/static/css/index.css b/core/static/css/index.css
index b335f1d..3c187d7 100644
--- a/core/static/css/index.css
+++ b/core/static/css/index.css
@@ -12,6 +12,16 @@
   --feature-title-color: #12241f;
   --feature-description-color: #F0F7E6;
 }
+.trail-dot {
+    position: fixed;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: #6024eb;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+  }
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 100%);
diff --git a/core/static/js/index.js b/core/static/js/index.js
index 802d347..f2a2135 100644
--- a/core/static/js/index.js
+++ b/core/static/js/index.js
@@ -1,54 +1,5 @@
-// Theme management
-const THEME_KEY = "peerprep_theme";
-
-function applyThemeFromStorage() {
-    let theme = localStorage.getItem(THEME_KEY);
-    
-    // Set default theme to dark if not set
-    if (!theme) {
-        theme = "dark";
-        localStorage.setItem(THEME_KEY, theme);
-    }
-
-    if (theme === "light") {
-        document.body.classList.add("light-mode");
-        setLightModeIcon(true);
-    } else {
-        document.body.classList.remove("light-mode");
-        setLightModeIcon(false);
-    }
-}
-
-function setLightModeIcon(isLight) {
-    const icon = document.getElementById("modeToggle")?.querySelector("i");
-    if (!icon) return;
-    
-    if (isLight) {
-        icon.classList.remove("fa-moon");
-        icon.classList.add("fa-sun");
-        icon.title = "Switch to Dark Mode";
-    } else {
-        icon.classList.remove("fa-sun");
-        icon.classList.add("fa-moon");
-        icon.title = "Switch to Light Mode";
-    }
-}
-
-function toggleMode() {
-    const isNowLight = !document.body.classList.contains("light-mode");
-    
-    if (isNowLight) {
-        document.body.classList.add("light-mode");
-    } else {
-        document.body.classList.remove("light-mode");
-    }
-    
-    setLightModeIcon(isNowLight);
-    localStorage.setItem(THEME_KEY, isNowLight ? "light" : "dark");
-}
-
 // Smooth scrolling for navigation links
-document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
         e.preventDefault();
         const target = document.querySelector(this.getAttribute('href'));
@@ -62,7 +13,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 });
 
 // Form submission with Django backend
-document.querySelector('.contact-form')?.addEventListener('submit', function(e) {
+document.querySelector('.contact-form').addEventListener('submit', function(e) {
     e.preventDefault();
 
     const submitBtn = document.querySelector('.submit-btn');
@@ -155,9 +106,104 @@ document.querySelectorAll('.form-input').forEach(input => {
         this.parentElement.style.transform = 'translateY(0)';
     });
 });
+// Adding success stories
+
+document.addEventListener("DOMContentLoaded", function () {
+    const modal = document.getElementById("storyModal");
+    const btn = document.getElementById("addStoryBtn");
+    const span = document.querySelector(".modal .close");
+    const form = document.getElementById("storyForm");
+    const storiesContainer = document.getElementById("storiesContainer");
+
+    // Open modal
+    btn?.addEventListener("click", () => modal.style.display = "block");
+
+    // Close modal
+    span?.addEventListener("click", () => modal.style.display = "none");
+    window.addEventListener("click", e => {
+        if (e.target == modal) modal.style.display = "none";
+    });
+
+    // AJAX form submission
+    form?.addEventListener("submit", function (e) {
+        e.preventDefault();
+        const url = form.action;
+        const formData = new FormData(form);
+
+        fetch(url, {
+            method: "POST",
+            headers: { "X-Requested-With": "XMLHttpRequest" },
+            body: formData,
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                // Close modal
+                modal.style.display = "none";
+                form.reset();
+
+                // Append new story
+                const newStory = document.createElement("div");
+                newStory.classList.add("feature-card");
+                newStory.innerHTML = `
+                    <div class="feature-icon">🏆</div>
+                    <h3 class="feature-title">${data.title}</h3>
+                    <p class="feature-description">${data.story}</p>
+                    <small>By ${data.user}</small>
+                `;
+                storiesContainer.prepend(newStory);
+            } else {
+                alert("Error: " + JSON.stringify(data.errors));
+            }
+        })
+        .catch(err => console.error(err));
+    });
+});
+
+// Dark Mode to Light Mode toggle
+
+const THEME_KEY="theme";
 
-// Login form handling
-document.querySelector('.login-form')?.addEventListener('submit', function(e) {
+function applyThemeFromStorage() { 
+  let theme = localStorage.getItem(THEME_KEY); 
+  if (!theme) {
+    theme = "dark";
+    localStorage.setItem(THEME_KEY, theme);
+  }
+
+  if (theme === "light") { 
+    document.body.classList.add("light-mode");
+    document.body.classList.remove("dark-mode"); 
+    setLightModeIcon(true); 
+  } else { 
+    document.body.classList.remove("light-mode");
+    document.body.classList.add("dark-mode");
+    setLightModeIcon(false); 
+  } 
+}
+
+function setLightModeIcon(isLight){
+  const icon = document.getElementById("modeToggle").querySelector("i"); 
+  if (!icon) return; 
+  if (isLight) { 
+    icon.classList.remove("fa-sun"); 
+    icon.classList.add("fa-moon"); 
+  } else { 
+    icon.classList.remove("fa-moon"); 
+    icon.classList.add("fa-sun"); 
+  } 
+}
+function toggleMode()
+{
+    const isNowLight=!document.body.classList.contains("light-mode");
+    document.body.classList.toggle("light-mode");
+    setLightModeIcon(isNowLight);
+    localStorage.setItem(THEME_KEY, isNowLight ? "light" : "dark");
+    applyThemeFromStorage();
+}
+window.addEventListener("DOMContentLoaded", applyThemeFromStorage);
+// Add this new section for the login form
+document.querySelector('.login-form').addEventListener('submit', function(e) {
     e.preventDefault();
 
     const submitBtn = this.querySelector('.submit-btn');
@@ -167,6 +213,7 @@ document.querySelector('.login-form')?.addEventListener('submit', function(e) {
     submitBtn.textContent = 'Signing In...';
     submitBtn.disabled = true;
 
+    // The fetch URL should be the login endpoint
     fetch(this.action, {
         method: 'POST',
         body: formData,
@@ -181,7 +228,8 @@ document.querySelector('.login-form')?.addEventListener('submit', function(e) {
             submitBtn.style.background = 'linear-gradient(135deg, #10b981, #059669)';
             showNotification('Login successful!', 'success');
 
-            window.location.href = data.redirect_url || '/dashboard/';
+            // Redirect to dashboard or home page on successful login
+            window.location.href = data.redirect_url || '{% url "dashboard" %}';
         } else {
             submitBtn.textContent = 'Try Again';
             submitBtn.disabled = false;
@@ -203,80 +251,32 @@ document.querySelector('.login-form')?.addEventListener('submit', function(e) {
     });
 });
 
-// Initialize theme on page load
-document.addEventListener('DOMContentLoaded', function() {
-    applyThemeFromStorage();
-});
-// Enhanced theme management with session storage fallback
-function getStoredTheme() {
-    // Try localStorage first, then sessionStorage, then default to dark
-    return localStorage.getItem(THEME_KEY) || 
-           sessionStorage.getItem(THEME_KEY) || 
-           'dark';
-}
-
-function setStoredTheme(theme) {
-    // Store in both localStorage and sessionStorage for redundancy
-    localStorage.setItem(THEME_KEY, theme);
-    sessionStorage.setItem(THEME_KEY, theme);
-}
-
-function applyThemeFromStorage() {
-    const theme = getStoredTheme();
-    
-    if (theme === "light") {
-        document.body.classList.add("light-mode");
-        setLightModeIcon(true);
-    } else {
-        document.body.classList.remove("light-mode");
-        setLightModeIcon(false);
-    }
-}
-
-function toggleMode() {
-    const isNowLight = !document.body.classList.contains("light-mode");
-    const newTheme = isNowLight ? "light" : "dark";
-    
-    if (isNowLight) {
-        document.body.classList.add("light-mode");
-    } else {
-        document.body.classList.remove("light-mode");
+ // Number of trail dots
+  const trailCount = 15;
+  const trail = [];
+
+  for (let i = 0; i < trailCount; i++) {
+    const dot = document.createElement('div');
+    dot.className = 'trail-dot';
+    document.body.appendChild(dot);
+    trail.push({el: dot, x: 0, y: 0});
+  }
+
+  document.addEventListener('mousemove', (e) => {
+    trail[0].x = e.clientX;
+    trail[0].y = e.clientY;
+  });
+
+  function animateTrail() {
+    for (let i = trail.length - 1; i > 0; i--) {
+      trail[i].x += (trail[i-1].x - trail[i].x) * 0.25;
+      trail[i].y += (trail[i-1].y - trail[i].y) * 0.25;
+      trail[i].el.style.left = trail[i].x + 'px';
+      trail[i].el.style.top = trail[i].y + 'px';
     }
-    
-    setLightModeIcon(isNowLight);
-    setStoredTheme(newTheme);
-    
-    // Sync with server session
-    syncThemeWithServer(newTheme);
-}
-
-function syncThemeWithServer(theme) {
-    // Optional: Sync theme preference with server
-    fetch('/api/toggle-theme/', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-CSRFToken': getCookie('csrftoken'),
-        },
-        body: JSON.stringify({theme: theme})
-    }).catch(error => {
-        console.log('Theme sync failed, but local storage will persist');
-    });
-}
+    trail[0].el.style.left = trail[0].x + 'px';
+    trail[0].el.style.top = trail[0].y + 'px';
+    requestAnimationFrame(animateTrail);
+  }
 
-// Helper function to get CSRF token
-function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        const cookies = document.cookie.split(';');
-        for (let i = 0; i < cookies.length; i++) {
-            const cookie = cookies[i].trim();
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
\ No newline at end of file
+  animateTrail();
\ No newline at end of file
diff --git a/core/templates/about.html b/core/templates/about.html
index 5e7d7a5..2d2a2b4 100644
--- a/core/templates/about.html
+++ b/core/templates/about.html
@@ -83,46 +83,6 @@
   transform: translateY(-10px) scale(1.03);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }
-.feature {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-    opacity: 0;
-    transform: translateY(30px);
-    animation: fadeInUp 0.8s forwards;
-}
-
-.feature-icon i {
-    font-size: 2rem;
-    color: #00e6ff;
-}
-
-.card.fade-in {
-    opacity: 0;
-    transform: translateY(20px);
-    animation: fadeInUp 0.5s forwards;
-    animation-delay: 0.2s;
-}
-
-@keyframes fadeInUp {
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .cards {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    .feature {
-        flex-direction: column;
-        text-align: center;
-    }
-}
 
     </style>
     <!-- About Header -->
@@ -133,50 +93,34 @@ <h1>About PeerPrep</h1>
 
     <!-- About Content Sections -->
     <section class="about-section">
-    <h2>Our Mission</h2>
-    <div class="feature">
-        <div class="feature-icon">
-            <i class="fas fa-bullseye"></i>
-        </div>
-        <div class="feature-text">
-            <p>At PeerPrep, our mission is to empower open-source communities by giving project maintainers and contributors the tools they need to collaborate effectively.</p>
-        </div>
-    </div>
-</section>
+        <h2>Our Mission</h2>
+        <p>At PeerPrep, our mission is to empower open-source communities by giving project maintainers and contributors the tools they need to collaborate effectively. 
+        We believe in making project management transparent, efficient, and engaging.</p>
+    </section>
 
-<section class="about-section">
-    <h2>Our Vision</h2>
-    <div class="feature">
-        <div class="feature-icon">
-            <i class="fas fa-eye"></i>
-        </div>
-        <div class="feature-text">
-            <p>We envision a future where open-source development is seamless, contributors feel valued, and maintainers focus on innovation.</p>
-        </div>
-    </div>
-</section>
+    <section class="about-section">
+        <h2>Our Vision</h2>
+        <p>We envision a future where open-source development is seamless, where contributors feel valued, and where project maintainers 
+        can focus on innovation instead of repetitive management tasks.</p>
+    </section>
 
-<section class="about-section">
-    <h2>What We Offer</h2>
-    <div class="cards">
-        <div class="card fade-in">
-            <i class="fas fa-users fa-2x"></i>
-            <h3>Collaboration</h3>
-            <p>Streamlined dashboards for admins and contributors to stay in sync.</p>
-        </div>
-        <div class="card fade-in">
-            <i class="fas fa-search fa-2x"></i>
-            <h3>Transparency</h3>
-            <p>Track contributions, pull requests, and issues with clear visibility.</p>
-        </div>
-        <div class="card fade-in">
-            <i class="fas fa-handshake fa-2x"></i>
-            <h3>Community</h3>
-            <p>Encourage growth and engagement within open-source projects.</p>
+    <section class="about-section">
+        <h2>What We Offer</h2>
+        <div class="cards">
+            <div class="card">
+                <h3>Collaboration</h3>
+                <p>Streamlined dashboards for project admins and contributors to stay in sync.</p>
+            </div>
+            <div class="card">
+                <h3>Transparency</h3>
+                <p>Track contributions, pull requests, and issues with clear visibility.</p>
+            </div>
+            <div class="card">
+                <h3>Community</h3>
+                <p>Encourage growth and engagement within open-source projects.</p>
+            </div>
         </div>
-    </div>
-</section>
-
+    </section>
 
     <section class="about-section">
         <h2>Looking Ahead</h2>
diff --git a/core/templates/dashboard.html b/core/templates/dashboard.html
index 2bf9db8..33e0a5e 100644
--- a/core/templates/dashboard.html
+++ b/core/templates/dashboard.html
@@ -1,5 +1,46 @@
-{% extends "base.html" %}
-{% block content %}
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - Peer Prep</title>
+    <link rel="stylesheet" href="{% static 'css/index.css' %}">
+</head>
+<body>
+    <!-- Background Orbs -->
+    <div class="bg-orb bg-orb-1"></div>
+    <div class="bg-orb bg-orb-2"></div>
+    <div class="bg-orb bg-orb-3"></div>
+    <div class="bg-orb bg-orb-4"></div>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <img src="/static/PeerPrep.png" alt="PeerPrep Logo">
+            </div>
+            <ul class="nav-menu">
+                <li><a href="{% url 'dashboard' %}" class="nav-link active">Dashboard</a></li>
+                <li><a href="/" class="nav-link">Home</a></li>
+                <li><a href="{% url 'faq' %}" class="nav-link">FAQ</a></li>
+
+                <li>
+                    <form method="post" action="{% url 'logout' %}" style="display:inline;">
+                        {% csrf_token %}
+                        <button type="submit" class="nav-link" style="background:none; border:none; color:white; font-size:1rem; cursor:pointer;">
+                            Logout
+                        </button>
+                    </form>
+                </li>
+                 <li class="profile-dropdown">
+    <a href="{% url 'profile' %}" class="profile-icon">👤</a>
+</li>
+
+            </ul>
+        </div>
+    </nav>
+
     <!-- Dashboard Content -->
     <main class="main-content">
         <div class="container" style="grid-template-columns: 1fr;">
@@ -42,28 +83,8 @@ <h3 class="feature-title">Reminders & Timetable</h3>
                 <div class="feature-card">
                     <div class="feature-icon">👥</div>
                     <h3 class="feature-title">Find Study Partners</h3>
-                    <p class="feature-description">Connect with peers who share your learning goals and interests.</p>
-                    <a href="{% url 'find_study_partners' %}">
-                        <button class="submit-btn" style="margin-top: 1rem;">Find Partners</button>
-                    </a>
-                </div>
-                
-                <div class="feature-card">
-                    <div class="feature-icon">🤝</div>
-                    <h3 class="feature-title">My Study Partners</h3>
-                    <p class="feature-description">Manage your study partnerships and schedule collaborative sessions.</p>
-                    <a href="{% url 'my_study_partners' %}">
-                        <button class="submit-btn" style="margin-top: 1rem;">My Partners</button>
-                    </a>
-                </div>
-                
-                <div class="feature-card">
-                    <div class="feature-icon">📧</div>
-                    <h3 class="feature-title">Partner Requests</h3>
-                    <p class="feature-description">View and respond to study partner requests from other students.</p>
-                    <a href="{% url 'my_partner_requests' %}">
-                        <button class="submit-btn" style="margin-top: 1rem;">View Requests</button>
-                    </a>
+                    <p class="feature-description">Connect with peers who share your learning goals and interests. Find</p>
+                    <button class="submit-btn" style="margin-top: 1rem;">Coming Soon</button>
                 </div>
                 
                 <div class="feature-card">
@@ -76,10 +97,8 @@ <h3 class="feature-title">Study Materials</h3>
                 <div class="feature-card">
                     <div class="feature-icon">📈</div>
                     <h3 class="feature-title">Progress Tracking</h3>
-                    <p class="feature-description">Monitor your learning progress, set goals, and track achievements with detailed analytics.</p>
-                    <a href="{% url 'progress_tracking' %}">
-                        <button class="submit-btn" style="margin-top: 1rem;">Track Progress</button>
-                    </a>
+                    <p class="feature-description">Monitor your learning progress and achievements.</p>
+                    <button class="submit-btn" style="margin-top: 1rem;">Coming Soon</button>
                 </div>
                 
                 <div class="feature-card">
@@ -119,4 +138,7 @@ <h3 class="feature-title">Live Chat</h3>
             border-color: rgba(59, 130, 246, 0.4);
         }
     </style>
-{% endblock content %}
\ No newline at end of file
+    {% include "footer.html" %}
+    <script src="{% static 'js/index.js' %}"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/profile.html b/core/templates/profile.html
new file mode 100644
index 0000000..5adf2f5
--- /dev/null
+++ b/core/templates/profile.html
@@ -0,0 +1,138 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile - Peer Prep</title>
+    <link rel="stylesheet" href="{% static 'css/index.css' %}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <style>
+        /* Profile Page Custom Styling */
+        body {
+            color: #f0f0f0;
+            background: linear-gradient(135deg, #0b0c10, #1f2833);
+            font-family: 'Poppins', sans-serif;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+        }
+
+        .profile-container {
+            max-width: 900px;
+            margin: 5rem auto;
+            padding: 2rem;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            box-shadow: 0 0 20px rgba(0, 230, 255, 0.4);
+            backdrop-filter: blur(8px);
+            animation: fadeIn 0.8s ease-in-out;
+        }
+
+        .profile-header h1 {
+            font-size: 2.8rem;
+            color: #00e6ff;
+            text-shadow: 0 0 12px rgba(0,230,255,0.8);
+            margin-bottom: 0.5rem;
+        }
+
+        .profile-header p {
+            font-size: 1.2rem;
+            color: #dcdcdc;
+            margin-bottom: 2rem;
+        }
+
+        .profile-details {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .profile-card {
+            background: rgba(255, 255, 255, 0.08);
+            border-radius: 12px;
+            padding: 1.5rem 2rem;
+            width: 80%;
+            text-align: left;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+
+        .profile-card:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 0 15px rgba(0,230,255,0.5);
+        }
+
+        .profile-card h3 {
+            color: #00e6ff;
+            margin-bottom: 0.6rem;
+            font-size: 1.4rem;
+        }
+
+        .profile-card p {
+            color: #cccccc;
+            font-size: 1.1rem;
+            margin: 0;
+        }
+
+        .profile-actions {
+            margin-top: 2.5rem;
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+        }
+
+        .profile-actions a, .profile-actions form button {
+            text-decoration: none;
+            color: white;
+            background-color: #00e6ff;
+            padding: 0.8rem 1.6rem;
+            border-radius: 10px;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: 0.3s ease;
+        }
+
+        .profile-actions a:hover, .profile-actions form button:hover {
+            background-color: #00c8e0;
+            transform: scale(1.05);
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="profile-container">
+        <div class="profile-header">
+            <h1>Hello {{ user.username }} 👋</h1>
+            <p>Welcome back to Peer Prep!</p>
+        </div>
+
+        <div class="profile-details">
+            <div class="profile-card">
+                <h3><i class="fa-solid fa-envelope"></i> Email</h3>
+                <p>{{ user.email }}</p>
+            </div>
+
+            <div class="profile-card">
+                <h3><i class="fa-solid fa-calendar"></i> Joined On</h3>
+                <p>{{ user.date_joined|date:"F j, Y" }}</p>
+            </div>
+        </div>
+
+        <div class="profile-actions">
+            <a href="{% url 'dashboard' %}"><i class="fa-solid fa-gauge"></i> Dashboard</a>
+            <a href="{% url 'forgot_password' %}"><i class="fa-solid fa-key"></i> Change Password</a>
+            <form method="post" action="{% url 'logout' %}">
+                {% csrf_token %}
+                <button type="submit"><i class="fa-solid fa-right-from-bracket"></i> Logout</button>
+            </form>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/core/templates/questions.html b/core/templates/questions.html
new file mode 100644
index 0000000..fea0e3d
--- /dev/null
+++ b/core/templates/questions.html
@@ -0,0 +1,1516 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Questions & Answers - PeerPrep</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 30%, #334155 100%);
+            min-height: 100vh;
+            color: white;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Background orbs */
+        .bg-orb {
+            position: absolute;
+            border-radius: 50%;
+            background: rgba(59, 130, 246, 0.15);
+            filter: blur(2px);
+            animation: float 20s infinite ease-in-out;
+            z-index: 1;
+        }
+
+        .bg-orb-1 {
+            width: 350px;
+            height: 350px;
+            top: -100px;
+            left: -100px;
+            animation-delay: 0s;
+        }
+
+        .bg-orb-2 {
+            width: 250px;
+            height: 250px;
+            bottom: 200px;
+            left: 150px;
+            animation-delay: 7s;
+        }
+
+        .bg-orb-3 {
+            width: 400px;
+            height: 400px;
+            top: -150px;
+            right: -150px;
+            animation-delay: 3s;
+        }
+
+        /* Navbar */
+        .navbar {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(12px);
+            z-index: 1000;
+            padding: 1.2rem 2rem;
+            border-bottom: 1px solid rgba(59, 130, 246, 0.1);
+        }
+
+        .nav-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            font-size: 1.8rem;
+            font-weight: 700;
+            color: white;
+        }
+
+        .logo img {
+            width: 40px;
+            height: 40px;
+        }
+
+        .nav-menu {
+            display: flex;
+            list-style: none;
+            gap: 3rem;
+            align-items: center;
+        }
+
+        .nav-link {
+            text-decoration: none;
+            color: rgba(255, 255, 255, 0.8);
+            font-weight: 500;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 0.5rem 0;
+        }
+
+        .nav-link:hover {
+            color: #3b82f6;
+            transform: translateY(-1px);
+        }
+
+        .nav-link.active {
+            color: white;
+        }
+
+        /* Main Content */
+        .main-content {
+            padding-top: 120px;
+            min-height: 100vh;
+            position: relative;
+            z-index: 2;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 2rem;
+        }
+
+        /* Header Section */
+        .header-section {
+            background: rgba(30, 41, 59, 0.4);
+            backdrop-filter: blur(15px);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 24px;
+            padding: 3rem;
+            margin-bottom: 3rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 3rem;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
+            animation: slideInUp 1s ease;
+        }
+
+        .header-text {
+            flex: 2;
+        }
+
+        .header-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #ffffff 0%, #3b82f6 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .header-subtitle {
+            font-size: 1.2rem;
+            color: rgba(255, 255, 255, 0.7);
+            line-height: 1.6;
+        }
+
+        .ask-section {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+        }
+
+        .ask-question-btn {
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+            color: white;
+            border: none;
+            border-radius: 16px;
+            padding: 1.5rem 2.5rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            gap: 0.8rem;
+            text-decoration: none;
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
+            text-align: center;
+        }
+
+        .ask-question-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 35px rgba(59, 130, 246, 0.4);
+        }
+
+        /* Filters Section */
+        .filters-section {
+            background: rgba(30, 41, 59, 0.3);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 16px;
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+
+        .filter-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .filter-label {
+            font-weight: 500;
+            color: rgba(255, 255, 255, 0.8);
+        }
+
+        .filter-select {
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 8px;
+            padding: 0.5rem 1rem;
+            color: white;
+            font-size: 0.9rem;
+            outline: none;
+        }
+
+        .filter-select:focus {
+            border-color: #3b82f6;
+        }
+
+        /* Questions Grid */
+        .questions-grid {
+            display: grid;
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+
+        .question-card {
+            background: rgba(30, 41, 59, 0.6);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 16px;
+            padding: 1.5rem;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .question-card:hover {
+            transform: translateY(-3px);
+            border-color: rgba(59, 130, 246, 0.4);
+            box-shadow: 0 15px 30px rgba(59, 130, 246, 0.1);
+        }
+
+        .question-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .user-avatar {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            font-weight: 600;
+            color: white;
+        }
+
+        .question-meta {
+            flex: 1;
+        }
+
+        .question-author {
+            font-size: 1rem;
+            font-weight: 600;
+            color: white;
+            margin-bottom: 0.2rem;
+        }
+
+        .question-date {
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        .question-subject {
+            background: rgba(59, 130, 246, 0.2);
+            color: #3b82f6;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+        }
+
+        .solved-badge {
+            background: rgba(34, 197, 94, 0.2);
+            color: #4ade80;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            border: 1px solid rgba(34, 197, 94, 0.3);
+        }
+
+        .question-title {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: white;
+            margin-bottom: 0.8rem;
+            line-height: 1.3;
+        }
+
+        .question-description {
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+
+        .question-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .tag {
+            background: rgba(51, 65, 85, 0.6);
+            color: rgba(255, 255, 255, 0.8);
+            padding: 0.2rem 0.6rem;
+            border-radius: 10px;
+            font-size: 0.75rem;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .question-stats {
+            display: flex;
+            align-items: center;
+            gap: 2rem;
+            padding-top: 1rem;
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .stat {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 0.9rem;
+        }
+
+        .upvote-btn {
+            display: flex;
+            align-items: center;
+            gap: 0.3rem;
+            background: none;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            color: rgba(255, 255, 255, 0.7);
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 0.9rem;
+        }
+
+        .upvote-btn:hover {
+            background: rgba(59, 130, 246, 0.1);
+            border-color: rgba(59, 130, 246, 0.6);
+            color: #3b82f6;
+        }
+
+        .upvote-btn.active {
+            background: rgba(59, 130, 246, 0.2);
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+
+        /* Modal Styling */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 10000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(5px);
+        }
+
+        .modal-content {
+            background: rgba(30, 41, 59, 0.95);
+            backdrop-filter: blur(15px);
+            margin: 5% auto;
+            padding: 2.5rem;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            width: 90%;
+            max-width: 700px;
+            max-height: 80vh;
+            overflow-y: auto;
+            border-radius: 20px;
+            color: white;
+            position: relative;
+            animation: modalSlideIn 0.3s ease;
+        }
+
+        .close {
+            position: absolute;
+            right: 1.5rem;
+            top: 1.5rem;
+            font-size: 2rem;
+            font-weight: bold;
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.6);
+            transition: all 0.3s ease;
+        }
+
+        .close:hover {
+            color: #3b82f6;
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        .form-input, .form-textarea, .form-select {
+            width: 100%;
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 12px;
+            padding: 1rem;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            outline: none;
+        }
+
+        .form-input:focus, .form-textarea:focus, .form-select:focus {
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .form-textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+
+        .submit-btn {
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 1rem 2rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
+        }
+
+        /* Question Detail Modal */
+        .question-detail {
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+
+        .question-full {
+            margin-bottom: 2rem;
+            padding-bottom: 2rem;
+            border-bottom: 2px solid rgba(59, 130, 246, 0.2);
+        }
+
+        .answers-section h3 {
+            color: #3b82f6;
+            margin-bottom: 1.5rem;
+            font-size: 1.4rem;
+        }
+
+        .answer-card {
+            background: rgba(15, 23, 42, 0.6);
+            border: 1px solid rgba(59, 130, 246, 0.2);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            transition: all 0.3s ease;
+        }
+
+        .answer-card.accepted {
+            border-color: rgba(34, 197, 94, 0.4);
+            background: rgba(34, 197, 94, 0.1);
+        }
+
+        .answer-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+        }
+
+        .answer-meta {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .accepted-badge {
+            background: rgba(34, 197, 94, 0.2);
+            color: #4ade80;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            border: 1px solid rgba(34, 197, 94, 0.3);
+        }
+
+        .answer-content {
+            color: rgba(255, 255, 255, 0.9);
+            line-height: 1.6;
+            margin-bottom: 1rem;
+        }
+
+        .answer-actions {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .accept-btn {
+            background: rgba(34, 197, 94, 0.2);
+            color: #4ade80;
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+        }
+
+        .accept-btn:hover {
+            background: rgba(34, 197, 94, 0.3);
+        }
+
+        .answer-form {
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 2px solid rgba(59, 130, 246, 0.2);
+        }
+
+        /* Loading and Error States */
+        .loading {
+            text-align: center;
+            padding: 3rem;
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.1rem;
+        }
+
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(59, 130, 246, 0.3);
+            border-top: 3px solid #3b82f6;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+
+        .error-message {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+            padding: 1rem;
+            border-radius: 12px;
+            margin-bottom: 1rem;
+        }
+
+        .success-message {
+            background: rgba(34, 197, 94, 0.1);
+            border: 1px solid rgba(34, 197, 94, 0.3);
+            color: #4ade80;
+            padding: 1rem;
+            border-radius: 12px;
+            margin-bottom: 1rem;
+        }
+
+        /* Animations */
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(20px, -30px) rotate(90deg); }
+            50% { transform: translate(-10px, 20px) rotate(180deg); }
+            75% { transform: translate(-30px, -10px) rotate(270deg); }
+        }
+
+        @keyframes slideInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        @keyframes modalSlideIn {
+            from {
+                opacity: 0;
+                transform: translateY(-50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .header-section {
+                flex-direction: column;
+                text-align: center;
+                gap: 2rem;
+            }
+            
+            .header-title {
+                font-size: 2rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .nav-menu {
+                gap: 1rem;
+                font-size: 0.9rem;
+            }
+            
+            .container {
+                padding: 0 1rem;
+            }
+            
+            .header-section {
+                padding: 2rem;
+            }
+            
+            .header-title {
+                font-size: 1.8rem;
+            }
+            
+            .modal-content {
+                width: 95%;
+                padding: 1.5rem;
+            }
+
+            .filters-section {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 1rem;
+            }
+
+            .filter-group {
+                justify-content: space-between;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Background orbs -->
+    <div class="bg-orb bg-orb-1"></div>
+    <div class="bg-orb bg-orb-2"></div>
+    <div class="bg-orb bg-orb-3"></div>
+
+    <!-- Navbar -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <img src="/static/PeerPrep.png" alt="PeerPrep Logo">
+                PeerPrep
+            </div>
+            <ul class="nav-menu">
+                <li><a href="/" class="nav-link">Home</a></li>
+                <li><a href="/feature/" class="nav-link">Features</a></li>
+                <li><a href="/about/" class="nav-link">About</a></li>
+                <li><a href="/contact/" class="nav-link">Contact</a></li>
+                <li><a href="/success-stories/" class="nav-link">Success Stories</a></li>
+                <li><a href="/questions/" class="nav-link active">Q&A</a></li>
+                <li><a href="/dashboard/" class="nav-link">Dashboard</a></li>
+                <li><a href="/logout/" class="nav-link">Logout</a></li>
+            </ul>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="container">
+            <!-- Header Section -->
+            <section class="header-section">
+                <div class="header-text">
+                    <h1 class="header-title">Questions & Answers</h1>
+                    <p class="header-subtitle">
+                        Get help from the community! Ask questions, share knowledge, and learn together.
+                    </p>
+                </div>
+                <div class="ask-section">
+                    <button id="askBtn" class="ask-question-btn" onclick="openQuestionModal()">
+                        <span>❓</span>
+                        Ask Question
+                    </button>
+                </div>
+            </section>
+
+            <!-- Filters Section -->
+            <section class="filters-section">
+                <div class="filter-group">
+                    <label class="filter-label">Subject:</label>
+                    <select id="subjectFilter" class="filter-select" onchange="filterQuestions()">
+                        <option value="">All Subjects</option>
+                        <option value="math">Mathematics</option>
+                        <option value="science">Science</option>
+                        <option value="physics">Physics</option>
+                        <option value="chemistry">Chemistry</option>
+                        <option value="biology">Biology</option>
+                        <option value="computer_science">Computer Science</option>
+                        <option value="programming">Programming</option>
+                        <option value="english">English</option>
+                        <option value="history">History</option>
+                        <option value="geography">Geography</option>
+                        <option value="economics">Economics</option>
+                        <option value="psychology">Psychology</option>
+                        <option value="philosophy">Philosophy</option>
+                        <option value="engineering">Engineering</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label class="filter-label">Sort by:</label>
+                    <select id="sortFilter" class="filter-select" onchange="filterQuestions()">
+                        <option value="newest">Newest</option>
+                        <option value="oldest">Oldest</option>
+                        <option value="most_upvoted">Most Upvoted</option>
+                        <option value="most_answers">Most Answers</option>
+                        <option value="unsolved">Unsolved Only</option>
+                    </select>
+                </div>
+                <div class="filter-group">
+                    <label class="filter-label">Status:</label>
+                    <select id="statusFilter" class="filter-select" onchange="filterQuestions()">
+                        <option value="">All Questions</option>
+                        <option value="solved">Solved</option>
+                        <option value="unsolved">Unsolved</option>
+                    </select>
+                </div>
+            </section>
+
+            <!-- Questions Section -->
+            <section class="questions-section">
+                <!-- Loading State -->
+                <div id="loading" class="loading">
+                    <div class="spinner"></div>
+                    Loading questions...
+                </div>
+
+                <!-- Questions Grid -->
+                <div id="questions-grid" class="questions-grid" style="display: none;">
+                    <!-- Questions will be loaded here dynamically -->
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <!-- Ask Question Modal -->
+    <div id="questionModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeQuestionModal()">&times;</span>
+            <h2>Ask a Question</h2>
+            
+            <div id="questionErrorMessage" class="error-message" style="display: none;"></div>
+            <div id="questionSuccessMessage" class="success-message" style="display: none;"></div>
+            
+            <form id="questionForm">
+                <div class="form-group">
+                    <label class="form-label" for="subject">Subject *</label>
+                    <select id="subject" name="subject" class="form-select" required>
+                        <option value="">Select a subject</option>
+                        <option value="math">Mathematics</option>
+                        <option value="science">Science</option>
+                        <option value="physics">Physics</option>
+                        <option value="chemistry">Chemistry</option>
+                        <option value="biology">Biology</option>
+                        <option value="computer_science">Computer Science</option>
+                        <option value="programming">Programming</option>
+                        <option value="english">English</option>
+                        <option value="history">History</option>
+                        <option value="geography">Geography</option>
+                        <option value="economics">Economics</option>
+                        <option value="psychology">Psychology</option>
+                        <option value="philosophy">Philosophy</option>
+                        <option value="engineering">Engineering</option>
+                        <option value="other">Other</option>
+                    </select>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="title">Question Title *</label>
+                    <input type="text" id="title" name="title" class="form-input" placeholder="Enter a clear, descriptive title..." required>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="description">Description *</label>
+                    <textarea id="description" name="description" class="form-textarea" placeholder="Provide detailed description of your question..." required></textarea>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label" for="tags">Tags</label>
+                    <input type="text" id="tags" name="tags" class="form-input" placeholder="homework, algebra, calculus (comma separated)">
+                </div>
+                
+                <button type="submit" class="submit-btn">
+                    Post Question
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Question Detail Modal -->
+    <div id="questionDetailModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeQuestionDetailModal()">&times;</span>
+            <div id="questionDetailContent" class="question-detail">
+                <!-- Question details and answers will be loaded here -->
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Global variables
+        let isAuthenticated = false;
+        let csrfToken = null;
+        let allQuestions = [];
+        let currentQuestion = null;
+        
+        /* ---- Helper Functions ---- */
+        function getCookie(name) {
+            const cookieArr = document.cookie.split(';');
+            for (let cookie of cookieArr) {
+                cookie = cookie.trim();
+                if (cookie.startsWith(name + '=')) {
+                    return decodeURIComponent(cookie.substring(name.length + 1));
+                }
+            }
+            return null;
+        }
+
+        function showError(message, containerId = 'questionErrorMessage') {
+            const errorDiv = document.getElementById(containerId);
+            errorDiv.textContent = message;
+            errorDiv.style.display = 'block';
+            setTimeout(() => {
+                errorDiv.style.display = 'none';
+            }, 5000);
+        }
+
+        function showSuccess(message, containerId = 'questionSuccessMessage') {
+            const successDiv = document.getElementById(containerId);
+            successDiv.textContent = message;
+            successDiv.style.display = 'block';
+            setTimeout(() => {
+                successDiv.style.display = 'none';
+            }, 3000);
+        }
+
+        function formatDate(dateString) {
+            const date = new Date(dateString);
+            const now = new Date();
+            const diffTime = Math.abs(now - date);
+            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+            
+            if (diffDays === 1) {
+                return 'Yesterday';
+            } else if (diffDays < 7) {
+                return `${diffDays} days ago`;
+            } else {
+                return date.toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'short',
+                    day: 'numeric'
+                });
+            }
+        }
+
+        function getInitials(name) {
+            if (!name) return 'AN';
+            return name
+                .split(' ')
+                .map(part => part[0])
+                .join('')
+                .toUpperCase()
+                .substring(0, 2);
+        }
+
+        function getSubjectDisplayName(subject) {
+            const subjectMap = {
+                'math': 'Mathematics',
+                'science': 'Science',
+                'physics': 'Physics',
+                'chemistry': 'Chemistry',
+                'biology': 'Biology',
+                'computer_science': 'Computer Science',
+                'programming': 'Programming',
+                'english': 'English',
+                'history': 'History',
+                'geography': 'Geography',
+                'economics': 'Economics',
+                'psychology': 'Psychology',
+                'philosophy': 'Philosophy',
+                'engineering': 'Engineering',
+                'other': 'Other'
+            };
+            return subjectMap[subject] || subject;
+        }
+
+        /* ---- Authentication Check ---- */
+        function checkAuthentication() {
+            const sessionId = getCookie('sessionid');
+            if (sessionId) {
+                isAuthenticated = true;
+            }
+            updateAuthUI();
+
+            fetch('/auth-check/', {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                isAuthenticated = data.authenticated;
+                updateAuthUI();
+            })
+            .catch((error) => {
+                console.error('Auth check failed:', error);
+                updateAuthUI();
+            });
+        }
+
+        function updateAuthUI() {
+            const askBtn = document.getElementById('askBtn');
+            
+            if (isAuthenticated) {
+                askBtn.innerHTML = '<span>❓</span> Ask Question';
+                askBtn.disabled = false;
+            } else {
+                askBtn.innerHTML = '<span>🔐</span> Login to Ask';
+                askBtn.disabled = false;
+            }
+        }
+
+        /* ---- Modal Functions ---- */
+        function openQuestionModal() {
+            if (!isAuthenticated) {
+                if (confirm('You need to log in to ask a question. Would you like to go to the login page?')) {
+                    window.location.href = '/login/';
+                }
+                return;
+            }
+            document.getElementById('questionErrorMessage').style.display = 'none';
+            document.getElementById('questionSuccessMessage').style.display = 'none';
+            document.getElementById('questionModal').style.display = 'block';
+        }
+        
+        function closeQuestionModal() {
+            document.getElementById('questionModal').style.display = 'none';
+            document.getElementById('questionForm').reset();
+        }
+
+        function openQuestionDetailModal(questionId) {
+            loadQuestionDetail(questionId);
+            document.getElementById('questionDetailModal').style.display = 'block';
+        }
+
+        function closeQuestionDetailModal() {
+            document.getElementById('questionDetailModal').style.display = 'none';
+            currentQuestion = null;
+        }
+        
+        window.onclick = function (event) {
+            const questionModal = document.getElementById('questionModal');
+            const detailModal = document.getElementById('questionDetailModal');
+            if (event.target === questionModal) {
+                closeQuestionModal();
+            }
+            if (event.target === detailModal) {
+                closeQuestionDetailModal();
+            }
+        };
+
+        /* ---- Question Display Functions ---- */
+        function createQuestionCard(question) {
+            return `
+            <div class="question-card" onclick="openQuestionDetailModal(${question.id})">
+                <div class="question-header">
+                    <div class="user-avatar">${question.user_initials || getInitials(question.author_name)}</div>
+                    <div class="question-meta">
+                        <div class="question-author">${question.author_name || 'Anonymous'}</div>
+                        <div class="question-date">${formatDate(question.created_at)}</div>
+                    </div>
+                    <div style="display: flex; gap: 0.5rem; align-items: center;">
+                        <div class="question-subject">${getSubjectDisplayName(question.subject)}</div>
+                        ${question.is_solved ? '<div class="solved-badge">✓ Solved</div>' : ''}
+                    </div>
+                </div>
+                <h3 class="question-title">${question.title}</h3>
+                <p class="question-description">${question.description}</p>
+                ${question.tags && question.tags.length ? `
+                    <div class="question-tags">
+                        ${question.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+                    </div>` : ''
+                }
+                <div class="question-stats">
+                    <div class="stat">
+                        <span>👍</span>
+                        <span>${question.upvotes_count || 0} upvotes</span>
+                    </div>
+                    <div class="stat">
+                        <span>💬</span>
+                        <span>${question.answers_count || 0} answers</span>
+                    </div>
+                </div>
+            </div>`;
+        }
+
+        /* ---- Load Questions ---- */
+        function loadQuestions() {
+            fetch('/api/questions/', {
+                credentials: 'include',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Questions loaded:', data);
+                
+                document.getElementById('loading').style.display = 'none';
+                const grid = document.getElementById('questions-grid');
+                grid.style.display = 'grid';
+
+                allQuestions = data.questions || [];
+                
+                if (allQuestions.length > 0) {
+                    displayQuestions(allQuestions);
+                } else {
+                    grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: rgba(255,255,255,0.7); padding: 2rem;">No questions yet. Be the first to ask!</p>';
+                }
+            })
+            .catch((error) => {
+                console.error('Failed to load questions:', error);
+                document.getElementById('loading').innerHTML = 
+                    '<p>Unable to load questions. Please refresh the page or try again later.</p>';
+            });
+        }
+
+        function displayQuestions(questions) {
+            const grid = document.getElementById('questions-grid');
+            if (questions.length === 0) {
+                grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: rgba(255,255,255,0.7); padding: 2rem;">No questions match your filters.</p>';
+                return;
+            }
+            grid.innerHTML = questions.map(createQuestionCard).join('');
+        }
+
+        /* ---- Filter Questions ---- */
+        function filterQuestions() {
+            const subjectFilter = document.getElementById('subjectFilter').value;
+            const sortFilter = document.getElementById('sortFilter').value;
+            const statusFilter = document.getElementById('statusFilter').value;
+
+            let filteredQuestions = [...allQuestions];
+
+            // Apply subject filter
+            if (subjectFilter) {
+                filteredQuestions = filteredQuestions.filter(q => q.subject === subjectFilter);
+            }
+
+            // Apply status filter
+            if (statusFilter === 'solved') {
+                filteredQuestions = filteredQuestions.filter(q => q.is_solved);
+            } else if (statusFilter === 'unsolved') {
+                filteredQuestions = filteredQuestions.filter(q => !q.is_solved);
+            }
+
+            // Apply sorting
+            switch (sortFilter) {
+                case 'oldest':
+                    filteredQuestions.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
+                    break;
+                case 'most_upvoted':
+                    filteredQuestions.sort((a, b) => (b.upvotes_count || 0) - (a.upvotes_count || 0));
+                    break;
+                case 'most_answers':
+                    filteredQuestions.sort((a, b) => (b.answers_count || 0) - (a.answers_count || 0));
+                    break;
+                case 'unsolved':
+                    filteredQuestions = filteredQuestions.filter(q => !q.is_solved);
+                    break;
+                case 'newest':
+                default:
+                    filteredQuestions.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+                    break;
+            }
+
+            displayQuestions(filteredQuestions);
+        }
+
+        /* ---- Question Submission ---- */
+        document.getElementById('questionForm').addEventListener('submit', function (e) {
+            e.preventDefault();
+    
+            if (!isAuthenticated) {
+                showError('Please log in to ask a question.');
+                return;
+            }
+
+            if (!csrfToken) {
+                csrfToken = getCookie('csrftoken');
+            }
+
+            if (!csrfToken) {
+                showError('CSRF token not found. Please refresh the page and try again.');
+                return;
+            }
+    
+            const formData = new FormData();
+            formData.append('subject', document.getElementById('subject').value);
+            formData.append('title', document.getElementById('title').value.trim());
+            formData.append('description', document.getElementById('description').value.trim());
+            formData.append('tags', document.getElementById('tags').value.trim());
+    
+            const submitButton = document.querySelector('#questionForm button[type="submit"]');
+            const originalText = submitButton.innerHTML;
+            submitButton.innerHTML = '<span>⏳</span> Posting...';
+            submitButton.disabled = true;
+
+            fetch('/api/ask-question/', {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'include',
+                body: formData
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(json => {
+                if (json.success) {
+                    showSuccess(json.message || 'Question posted successfully!');
+                    setTimeout(() => {
+                        closeQuestionModal();
+                        loadQuestions();
+                    }, 1500);
+                } else {
+                    let errorMessage = 'Failed to post question:\n';
+                    if (json.errors) {
+                        Object.entries(json.errors).forEach(([field, errors]) => {
+                            if (Array.isArray(errors)) {
+                                errorMessage += `${field}: ${errors.join(', ')}\n`;
+                            } else {
+                                errorMessage += `${field}: ${errors}\n`;
+                            }
+                        });
+                    } else if (json.error) {
+                        errorMessage += json.error;
+                    }
+                    showError(errorMessage);
+                }
+            })
+            .catch(error => {
+                console.error('Submit failed:', error);
+                showError('Error posting question: ' + error.message);
+            })
+            .finally(() => {
+                submitButton.innerHTML = originalText;
+                submitButton.disabled = false;
+            });
+        });
+
+        /* ---- Question Detail Functions ---- */
+        function loadQuestionDetail(questionId) {
+            fetch(`/api/question/${questionId}/`, {
+                credentials: 'include',
+                headers: {
+                    'X-Requested-With': 'XMLHttpRequest'
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    currentQuestion = data.question;
+                    displayQuestionDetail(data.question, data.answers);
+                } else {
+                    showError('Failed to load question details');
+                }
+            })
+            .catch(error => {
+                console.error('Failed to load question detail:', error);
+                showError('Error loading question details');
+            });
+        }
+
+        function displayQuestionDetail(question, answers) {
+            const content = document.getElementById('questionDetailContent');
+            
+            const answersHtml = answers.length > 0 ? 
+                answers.map(answer => createAnswerCard(answer)).join('') :
+                '<p style="text-align: center; color: rgba(255,255,255,0.6); padding: 2rem;">No answers yet. Be the first to help!</p>';
+
+            content.innerHTML = `
+                <div class="question-full">
+                    <div class="question-header">
+                        <div class="user-avatar">${question.user_initials || getInitials(question.author_name)}</div>
+                        <div class="question-meta">
+                            <div class="question-author">${question.author_name || 'Anonymous'}</div>
+                            <div class="question-date">${formatDate(question.created_at)}</div>
+                        </div>
+                        <div style="display: flex; gap: 0.5rem; align-items: center;">
+                            <div class="question-subject">${getSubjectDisplayName(question.subject)}</div>
+                            ${question.is_solved ? '<div class="solved-badge">✓ Solved</div>' : ''}
+                        </div>
+                    </div>
+                    <h2 class="question-title">${question.title}</h2>
+                    <p style="color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin-bottom: 1rem;">${question.description}</p>
+                    ${question.tags && question.tags.length ? `
+                        <div class="question-tags">
+                            ${question.tags.map(tag => `<span class="tag">${tag}</span>`).join('')}
+                        </div>` : ''
+                    }
+                    <div class="question-stats">
+                        <button class="upvote-btn ${question.user_upvoted ? 'active' : ''}" onclick="upvoteQuestion(${question.id})">
+                            <span>👍</span>
+                            <span>${question.upvotes_count || 0}</span>
+                        </button>
+                        <div class="stat">
+                            <span>💬</span>
+                            <span>${answers.length} answers</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="answers-section">
+                    <h3>Answers (${answers.length})</h3>
+                    ${answersHtml}
+                    
+                    ${isAuthenticated ? `
+                        <div class="answer-form">
+                            <h4 style="color: #3b82f6; margin-bottom: 1rem;">Your Answer</h4>
+                            <form id="answerForm" onsubmit="submitAnswer(event, ${question.id})">
+                                <div class="form-group">
+                                    <textarea id="answerContent" class="form-textarea" placeholder="Share your answer and explanation..." required></textarea>
+                                </div>
+                                <button type="submit" class="submit-btn">Post Answer</button>
+                            </form>
+                        </div>
+                    ` : `
+                        <div style="text-align: center; padding: 2rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 12px; margin-top: 2rem;">
+                            <p style="color: #fca5a5; margin-bottom: 1rem;">Please log in to post an answer</p>
+                            <a href="/login/" style="color: #3b82f6; text-decoration: none;">Go to Login</a>
+                        </div>
+                    `}
+                </div>
+            `;
+        }
+
+        function createAnswerCard(answer) {
+            return `
+                <div class="answer-card ${answer.is_accepted ? 'accepted' : ''}">
+                    <div class="answer-header">
+                        <div class="answer-meta">
+                            <div class="user-avatar">${answer.user_initials || getInitials(answer.author_name)}</div>
+                            <div>
+                                <div class="question-author">${answer.author_name || 'Anonymous'}</div>
+                                <div class="question-date">${formatDate(answer.created_at)}</div>
+                            </div>
+                        </div>
+                        <div style="display: flex; gap: 0.5rem; align-items: center;">
+                            ${answer.is_accepted ? '<div class="accepted-badge">✓ Accepted</div>' : ''}
+                        </div>
+                    </div>
+                    <div class="answer-content">${answer.content}</div>
+                    <div class="answer-actions">
+                        <button class="upvote-btn ${answer.user_upvoted ? 'active' : ''}" onclick="upvoteAnswer(${answer.id}); event.stopPropagation();">
+                            <span>👍</span>
+                            <span>${answer.upvotes_count || 0}</span>
+                        </button>
+                        ${currentQuestion && currentQuestion.user_id === getCurrentUserId() && !answer.is_accepted && !currentQuestion.is_solved ? `
+                            <button class="accept-btn" onclick="acceptAnswer(${answer.id}); event.stopPropagation();">
+                                ✓ Accept Answer
+                            </button>
+                        ` : ''}
+                    </div>
+                </div>
+            `;
+        }
+
+        function getCurrentUserId() {
+            return window.currentUserId || null;
+        }
+
+        /* ---- Answer Submission ---- */
+        function submitAnswer(event, questionId) {
+            event.preventDefault();
+            
+            if (!isAuthenticated) {
+                showError('Please log in to post an answer.');
+                return;
+            }
+
+            const content = document.getElementById('answerContent').value.trim();
+            if (!content) {
+                showError('Please enter your answer.');
+                return;
+            }
+
+            if (!csrfToken) {
+                csrfToken = getCookie('csrftoken');
+            }
+
+            const formData = new FormData();
+            formData.append('content', content);
+
+            const submitButton = document.querySelector('#answerForm button[type="submit"]');
+            const originalText = submitButton.innerHTML;
+            submitButton.innerHTML = 'Posting...';
+            submitButton.disabled = true;
+
+            fetch(`/api/answer-question/${questionId}/`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'include',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(json => {
+                if (json.success) {
+                    document.getElementById('answerContent').value = '';
+                    loadQuestionDetail(questionId); 
+                    loadQuestions(); 
+                } else {
+                    showError(json.error || 'Failed to post answer');
+                }
+            })
+            .catch(error => {
+                console.error('Answer submission failed:', error);
+                showError('Error posting answer: ' + error.message);
+            })
+            .finally(() => {
+                submitButton.innerHTML = originalText;
+                submitButton.disabled = false;
+            });
+        }
+
+        /* ---- Upvoting Functions ---- */
+        function upvoteQuestion(questionId) {
+            if (!isAuthenticated) {
+                if (confirm('Please log in to upvote questions. Go to login page?')) {
+                    window.location.href = '/login/';
+                }
+                return;
+            }
+
+            if (!csrfToken) {
+                csrfToken = getCookie('csrftoken');
+            }
+
+            fetch(`/api/upvote-question/${questionId}/`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'include'
+            })
+            .then(response => response.json())
+            .then(json => {
+                if (json.success) {
+                    loadQuestionDetail(questionId); 
+                    loadQuestions(); 
+                } else {
+                    showError(json.error || 'Failed to upvote');
+                }
+            })
+            .catch(error => {
+                console.error('Upvote failed:', error);
+                showError('Error upvoting question');
+            });
+        }
+
+        function upvoteAnswer(answerId) {
+            if (!isAuthenticated) {
+                if (confirm('Please log in to upvote answers. Go to login page?')) {
+                    window.location.href = '/login/';
+                }
+                return;
+            }
+
+            if (!csrfToken) {
+                csrfToken = getCookie('csrftoken');
+            }
+
+            fetch(`/api/upvote-answer/${answerId}/`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'include'
+            })
+            .then(response => response.json())
+            .then(json => {
+                if (json.success) {
+                    if (currentQuestion) {
+                        loadQuestionDetail(currentQuestion.id); 
+                    }
+                } else {
+                    showError(json.error || 'Failed to upvote');
+                }
+            })
+            .catch(error => {
+                console.error('Upvote failed:', error);
+                showError('Error upvoting answer');
+            });
+        }
+
+        function acceptAnswer(answerId) {
+            if (!csrfToken) {
+                csrfToken = getCookie('csrftoken');
+            }
+
+            fetch(`/api/accept-answer/${answerId}/`, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': csrfToken,
+                    'X-Requested-With': 'XMLHttpRequest'
+                },
+                credentials: 'include'
+            })
+            .then(response => response.json())
+            .then(json => {
+                if (json.success) {
+                    if (currentQuestion) {
+                        loadQuestionDetail(currentQuestion.id); 
+                        loadQuestions(); 
+                    }
+                } else {
+                    showError(json.error || 'Failed to accept answer');
+                }
+            })
+            .catch(error => {
+                console.error('Accept answer failed:', error);
+                showError('Error accepting answer');
+            });
+        }
+
+        /* ---- Initialize ---- */
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('Questions page loaded, initializing...');
+            checkAuthentication();
+            loadQuestions();
+            
+            // Get CSRF token
+            csrfToken = getCookie('csrftoken');
+            console.log('CSRF token:', csrfToken);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/timetable.html b/core/templates/timetable.html
index 33576b6..db1692f 100644
--- a/core/templates/timetable.html
+++ b/core/templates/timetable.html
@@ -6,19 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Reminders & Timetable - PeerPrep</title>
   <link rel="stylesheet" href="{% static 'css/index.css' %}">
-  <style>
-  .trail-dot {
-    position: fixed;
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: #6024eb;
-    pointer-events: none;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-  }
-</style>
-
   <style>
     /* Form & Input Styling */
     .form-container {
@@ -180,37 +167,6 @@ <h3>📋 Upcoming Events</h3>
     });
   </script>
 
-<script>
-  // Number of trail dots
-  const trailCount = 15;
-  const trail = [];
-
-  for (let i = 0; i < trailCount; i++) {
-    const dot = document.createElement('div');
-    dot.className = 'trail-dot';
-    document.body.appendChild(dot);
-    trail.push({el: dot, x: 0, y: 0});
-  }
-
-  document.addEventListener('mousemove', (e) => {
-    trail[0].x = e.clientX;
-    trail[0].y = e.clientY;
-  });
-
-  function animateTrail() {
-    for (let i = trail.length - 1; i > 0; i--) {
-      trail[i].x += (trail[i-1].x - trail[i].x) * 0.25;
-      trail[i].y += (trail[i-1].y - trail[i].y) * 0.25;
-      trail[i].el.style.left = trail[i].x + 'px';
-      trail[i].el.style.top = trail[i].y + 'px';
-    }
-    trail[0].el.style.left = trail[0].x + 'px';
-    trail[0].el.style.top = trail[0].y + 'px';
-    requestAnimationFrame(animateTrail);
-  }
-
-  animateTrail();
-</script>
   {% include "footer.html" %}
 </body>
 </html>
diff --git a/core/urls.py b/core/urls.py
index 7bd7f99..be8c2e1 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -17,6 +17,9 @@
     path('about/', views.about, name='about'),
     path('contact/', views.contact, name='contact'),
     path("forgot-password/", views.forgot_password, name="forgot_password"),
+    path("timetable/", views.timetable, name="timetable"),
+    path('profile/', views.profile_view, name='profile'),
+
 
     # Success Stories URLs
     path('success-stories/', views.success_stories, name='success_stories'),
diff --git a/core/views.py b/core/views.py
index f1e3b6c..977e6db 100644
--- a/core/views.py
+++ b/core/views.py
@@ -49,6 +49,7 @@ def user_login(request):
 def timetable(request):
     return render(request, "timetable.html")
 
+
 @require_GET
 def auth_check(request):
     """API endpoint to check if user is authenticated"""