diff --git a/.gitignore b/.gitignore
index b1c8d61..0b62f06 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,9 +26,13 @@ Thumbs.db
 # Build and output directories
 /dist
 /build
+
+/out"db.sqlite3" 
+
 /out
 
 # Django-specific
 db.sqlite3
 /media/
-/staticfiles/
\ No newline at end of file
+/staticfiles/
+
diff --git a/core/templates/questions.html b/core/templates/questions.html
deleted file mode 100644
index fea0e3d..0000000
--- a/core/templates/questions.html
+++ /dev/null
@@ -1,1516 +0,0 @@
-<!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/register.html b/core/templates/register.html
index 88458e5..ad7d1a2 100644
--- a/core/templates/register.html
+++ b/core/templates/register.html
@@ -1,5 +1,47 @@
-{% 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>Register - 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>
+  .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>
+
+</head>
+<body>
+    <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>
+
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <img src="/static/PeerPrep.png" alt="PeerPrep Logo">
+            </div>
+            <ul class="nav-menu">
+                <button class="mode-toggle" id="modeToggle" title="Toggle Mode" onclick="toggleMode()">
+                    <i class="fas fa-moon"></i>
+                    </button>
+                <li><a href="/" class="nav-link">Home</a></li>
+                <li><a href="{% url 'login' %}" class="nav-link">Login</a></li>
+            </ul>
+        </div>
+    </nav>
+
     <main class="main-content">
         <div class="container" style="grid-template-columns: 1fr; max-width: 500px;">
             <div class="right-section">
@@ -38,4 +80,38 @@ <h2 class="form-title">Join PeerPrep</h2>
             </div>
         </div>
     </main>
-{% endblock content %}
\ No newline at end of file
+    <script src="{% static 'js/index.js' %}"></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>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/successstories.html b/core/templates/successstories.html
index 67481b2..772d2c3 100644
--- a/core/templates/successstories.html
+++ b/core/templates/successstories.html
@@ -1,5 +1,22 @@
-{% extends "base.html" %}
-{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Success Stories - Peer Prep</title>
+    <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>
         * {
             margin: 0;
@@ -573,6 +590,33 @@
             }
         }
     </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">
+                <div class="logo-icon">P</div>
+                Peer Prep
+            </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 active">Success Stories</a></li>
+                <li><a href="/dashboard/" class="nav-link">Dashboard</a></li>
+                <li><a href="/logout/" class="nav-link">Logout</a></li>
+            </ul>
+            <div id="authStatus" class="auth-status">Checking...</div>
+        </div>
+    </nav>
+
     <!-- Main Content -->
     <main class="main-content">
         <div class="container">
@@ -1057,4 +1101,37 @@ <h3 class="story-title">${story.title}</h3>
             console.log('Session ID from cookie:', getCookie('sessionid'));
         });
     </script>
-{% endblock content %}
\ No newline at end of file
+    
+<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>
+</body>
+</html>
\ No newline at end of file
diff --git a/core/templates/timetable.html b/core/templates/timetable.html
index db1692f..33576b6 100644
--- a/core/templates/timetable.html
+++ b/core/templates/timetable.html
@@ -6,6 +6,19 @@
   <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 {
@@ -167,6 +180,37 @@ <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>
