From 2887503c49c064530326f3088c4d9383cdd303dd Mon Sep 17 00:00:00 2001
From: lakshmiholla <tlholla100@gmail.com>
Date: Sun, 12 Oct 2025 10:34:50 +0530
Subject: [PATCH] Add styled profile.html page with user details

---
 core/static/css/index.css     |   10 +
 core/static/js/index.js       |   30 +
 core/templates/about.html     |  106 +--
 core/templates/dashboard.html |    4 +
 core/templates/profile.html   |  138 +++
 core/templates/questions.html | 1516 +++++++++++++++++++++++++++++++++
 core/templates/timetable.html |   44 -
 core/urls.py                  |    2 +
 core/views.py                 |    7 +-
 peerprep/urls.py              |    3 +-
 10 files changed, 1733 insertions(+), 127 deletions(-)
 create mode 100644 core/templates/profile.html
 create mode 100644 core/templates/questions.html

diff --git a/core/static/css/index.css b/core/static/css/index.css
index c68dea6e..f1b30119 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 ab13b981..f2a2135f 100644
--- a/core/static/js/index.js
+++ b/core/static/js/index.js
@@ -250,3 +250,33 @@ document.querySelector('.login-form').addEventListener('submit', function(e) {
         }, 2000);
     });
 });
+
+ // 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();
\ No newline at end of file
diff --git a/core/templates/about.html b/core/templates/about.html
index e9c90eec..3ccea9cd 100644
--- a/core/templates/about.html
+++ b/core/templates/about.html
@@ -90,46 +90,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>
 </head>
@@ -174,50 +134,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 c42dbe06..33e0a5eb 100644
--- a/core/templates/dashboard.html
+++ b/core/templates/dashboard.html
@@ -33,6 +33,10 @@
                         </button>
                     </form>
                 </li>
+                 <li class="profile-dropdown">
+    <a href="{% url 'profile' %}" class="profile-icon">👤</a>
+</li>
+
             </ul>
         </div>
     </nav>
diff --git a/core/templates/profile.html b/core/templates/profile.html
new file mode 100644
index 00000000..5adf2f51
--- /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 00000000..fea0e3d6
--- /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 33576b68..db1692fc 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 b1f5ce50..1cdc3c2d 100644
--- a/core/urls.py
+++ b/core/urls.py
@@ -12,6 +12,8 @@
     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 630e0ae9..249a009c 100644
--- a/core/views.py
+++ b/core/views.py
@@ -43,6 +43,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"""
@@ -547,4 +548,8 @@ def add_faq(request):
 def delete_faq(request, faq_id):
     faq = FAQ.objects.get(id=faq_id)
     faq.delete()
-    return redirect('faq')
\ No newline at end of file
+    return redirect('faq')
+
+
+def profile_view(request):
+    return render(request, 'profile.html', {'user': request.user})
diff --git a/peerprep/urls.py b/peerprep/urls.py
index 0e6583ce..872634bb 100644
--- a/peerprep/urls.py
+++ b/peerprep/urls.py
@@ -14,7 +14,8 @@
     path('feature/', views.feature, name='feature'),
     path('about/', views.about, name='about'),
     path('contact/', views.contact, name='contact'),
-    
+    path('profile/', views.profile_view, name='profile'),
+
     # Auth pages
     path('contact-success/', views.contact_success, name='contact_success'),
     path('register/', views.register, name='register'),