From 8807e0744dd35bab323e502c1c24e79549abf142 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Sat, 28 Jun 2025 13:32:11 -0400
Subject: [PATCH 01/26] Project Ember (Restyle) Inital Commitment

---
 src/server/helpers/changelog.js | 197 +++++++
 src/server/index.js             |   4 +-
 src/server/routes/apex.js       |  18 +-
 views/pages/404.ejs             |  15 +-
 views/pages/changelog.ejs       | 454 ++++++++-------
 views/pages/home.ejs            |   2 +-
 views/partials/footer.ejs       |  19 +-
 views/style/style-404.ejs       | 223 ++++++--
 views/style/style-embed.ejs     | 292 +++++++---
 views/style/style-home.ejs      | 976 ++++++++++++++++++--------------
 views/style/style-matches.ejs   | 430 +++++++++++---
 11 files changed, 1776 insertions(+), 854 deletions(-)
 create mode 100644 src/server/helpers/changelog.js

diff --git a/src/server/helpers/changelog.js b/src/server/helpers/changelog.js
new file mode 100644
index 0000000..b56b607
--- /dev/null
+++ b/src/server/helpers/changelog.js
@@ -0,0 +1,197 @@
+const https = require('https');
+
+// Cache for changelog data
+let changelogCache = null;
+let lastFetchTime = null;
+const CACHE_DURATION = 10 * 60 * 1000; // 10 minutes in milliseconds
+
+/**
+ * Makes HTTPS request to GitHub API
+ */
+function makeGitHubRequest(url) {
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: 'api.github.com',
+      path: url,
+      method: 'GET',
+      headers: {
+        'User-Agent': 'Vorel-App/1.0',
+        'Accept': 'application/vnd.github.v3+json'
+      }
+    };
+
+    const req = https.request(options, (res) => {
+      let data = '';
+      
+      res.on('data', (chunk) => {
+        data += chunk;
+      });
+      
+      res.on('end', () => {
+        try {
+          const jsonData = JSON.parse(data);
+          resolve(jsonData);
+        } catch (error) {
+          reject(new Error('Failed to parse JSON response'));
+        }
+      });
+    });
+
+    req.on('error', (error) => {
+      reject(error);
+    });
+
+    req.setTimeout(10000, () => {
+      req.abort();
+      reject(new Error('Request timeout'));
+    });
+
+    req.end();
+  });
+}
+
+/**
+ * Fetch commits from GitHub API
+ */
+async function fetchGitHubCommits() {
+  try {
+    console.log('Fetching GitHub commits for changelog...');
+
+    // Fetch commits (last 100)
+    const commits = await makeGitHubRequest('/repos/1334Robotics/vorel-app/commits?per_page=100&sha=main');
+    
+    if (!Array.isArray(commits)) {
+      throw new Error('Invalid commits response from GitHub API');
+    }
+
+    // Group commits by date
+    const commitsByDate = {};
+    
+    commits.forEach(commit => {
+      const commitDate = new Date(commit.commit.author.date);
+      const dateKey = commitDate.toLocaleDateString('en-US', { 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+      });
+      
+      if (!commitsByDate[dateKey]) {
+        commitsByDate[dateKey] = {
+          date: dateKey,
+          timestamp: commitDate.getTime(),
+          commits: []
+        };
+      }
+      
+      // Clean up commit message and add useful info
+      const commitMessage = commit.commit.message.split('\n')[0]; // First line only
+      const author = commit.commit.author.name;
+      const sha = commit.sha.substring(0, 7); // Short SHA
+      const url = commit.html_url;
+      
+      commitsByDate[dateKey].commits.push({
+        message: commitMessage,
+        author: author,
+        sha: sha,
+        url: url,
+        time: commitDate.toLocaleTimeString('en-US', { 
+          hour: '2-digit', 
+          minute: '2-digit' 
+        })
+      });
+    });
+    
+    // Convert to array and sort by date (newest first)
+    const sortedDays = Object.values(commitsByDate)
+      .sort((a, b) => b.timestamp - a.timestamp);
+    
+    console.log(`Successfully fetched and organized ${commits.length} commits into ${sortedDays.length} days`);
+    return sortedDays;
+    
+  } catch (error) {
+    console.error('Error fetching GitHub commits:', error.message);
+    return [];
+  }
+}
+
+/**
+ * Get changelog data with caching
+ */
+async function getChangelogData() {
+  const now = Date.now();
+  
+  // Return cached data if it's still fresh
+  if (changelogCache && lastFetchTime && (now - lastFetchTime) < CACHE_DURATION) {
+    console.log('Returning cached changelog data');
+    return changelogCache;
+  }
+  
+  // Fetch fresh data
+  try {
+    const freshData = await fetchGitHubCommits();
+    changelogCache = freshData;
+    lastFetchTime = now;
+    return freshData;
+  } catch (error) {
+    console.error('Failed to fetch fresh changelog data:', error);
+    // Return cached data if available, even if stale
+    return changelogCache || [];
+  }
+}
+
+/**
+ * Initialize changelog cache on server startup
+ */
+async function initializeChangelog() {
+  console.log('Initializing changelog cache...');
+  try {
+    await getChangelogData();
+    console.log('Changelog cache initialized successfully');
+  } catch (error) {
+    console.error('Failed to initialize changelog cache:', error);
+  }
+}
+
+/**
+ * Get sample/fallback changelog data
+ */
+function getFallbackChangelog() {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  
+  return [
+    {
+      date: today.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }),
+      timestamp: today.getTime(),
+      commits: [
+        {
+          message: 'Updated changelog system with server-side rendering',
+          author: 'Vorel Team',
+          sha: 'abc1234',
+          url: 'https://github.com/1334Robotics/vorel-app',
+          time: '14:30'
+        }
+      ]
+    },
+    {
+      date: yesterday.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }),
+      timestamp: yesterday.getTime(),
+      commits: [
+        {
+          message: 'Improved UI design and responsiveness',
+          author: 'Vorel Team',
+          sha: 'def5678',
+          url: 'https://github.com/1334Robotics/vorel-app',
+          time: '10:15'
+        }
+      ]
+    }
+  ];
+}
+
+module.exports = {
+  initializeChangelog,
+  getChangelogData,
+  getFallbackChangelog
+};
diff --git a/src/server/index.js b/src/server/index.js
index c8c4d5b..3b07ea9 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -13,6 +13,7 @@ under certain conditions. TO VIEW THE LICENSE VISIT OUR [GITHUB](https://github.
 
 // Initialize database connection
 const { initializeDB } = require("./helpers/database");
+const { initializeChangelog } = require("./helpers/changelog");
 
 const app = express();
 const Routes = require("./routes/apex");
@@ -91,8 +92,9 @@ const PORT = process.env.PORT || 3002;
 const server = app.listen(PORT, () => {
   console.log(`Server running on port ${PORT}`);
   
-  // Initialize event cache and database after server starts
+  // Initialize event cache, database, and changelog after server starts
   initializeEventCacheEnhanced();
+  initializeChangelog();
 });
 
 // Configure server timeouts for Cloudflare compatibility
diff --git a/src/server/routes/apex.js b/src/server/routes/apex.js
index 620d0c4..b6ed845 100644
--- a/src/server/routes/apex.js
+++ b/src/server/routes/apex.js
@@ -308,8 +308,22 @@ router.get('/preview', async (req, res) => {
 });
 
 // Add this route for the changelog page
-router.get('/changelog', (req, res) => {
-  res.render('pages/changelog');
+router.get('/changelog', async (req, res) => {
+  try {
+    const { getChangelogData, getFallbackChangelog } = require('../helpers/changelog');
+    let changelogData = await getChangelogData();
+    
+    // If no data, use fallback
+    if (!changelogData || changelogData.length === 0) {
+      changelogData = getFallbackChangelog();
+    }
+    
+    res.render('pages/changelog', { changelogData });
+  } catch (error) {
+    console.error('Error loading changelog:', error);
+    const { getFallbackChangelog } = require('../helpers/changelog');
+    res.render('pages/changelog', { changelogData: getFallbackChangelog() });
+  }
 });
 
 
diff --git a/views/pages/404.ejs b/views/pages/404.ejs
index 5d602b6..b07a288 100644
--- a/views/pages/404.ejs
+++ b/views/pages/404.ejs
@@ -3,22 +3,21 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>404 | Invalid Page</title>
+  <title>404 | Page Not Found - Vorel</title>
   <%- include('../partials/styles') %>
   <%- include('../style/style-404') %>
 </head>
 <body>
-  <div class="container">
-    <div class="header">
-      <div class="header-content">
-        <img src="/banner.avif" alt="Vorel App" class="header-logo" />
-        <div class="header-subtitle">404 | Invalid Page</div>
+  <div class="main-content">
+    <div class="hero">
+      <div class="container">
+        <img src="/banner.avif" alt="Vorel App Banner" class="hero-logo" />
+        <h1 class="hero-title">404</h1>
+        <p class="hero-subtitle">Page Not Found</p>
       </div>
     </div>
     
     <div class="error-container">
-      <div class="error-code">404</div>
-      <div class="error-title">Page Not Found</div>
       <div class="error-message">
         The page you are looking for doesn't exist or has been moved.<br>
         Please check the URL or return to the home page.
diff --git a/views/pages/changelog.ejs b/views/pages/changelog.ejs
index 2f5525a..b9de8f2 100644
--- a/views/pages/changelog.ejs
+++ b/views/pages/changelog.ejs
@@ -25,10 +25,57 @@
     .container {
         min-height: auto;
     }
+
+    /* Override hero styles for changelog */
+    .hero {
+      text-align: center;
+      padding: var(--spacing-2xl) 0;
+    }
+
+    .hero .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 var(--spacing-lg);
+    }
+
+    .hero-logo {
+      max-width: 280px;
+      height: auto;
+      margin: 0 auto var(--spacing-xl) auto;
+      display: block;
+      filter: drop-shadow(var(--shadow-glow));
+      transition: transform 0.3s ease;
+    }
+
+    .hero-title {
+      color: var(--text-primary);
+      font-size: clamp(2.5rem, 6vw, 4rem);
+      font-weight: 800;
+      margin: 0 0 var(--spacing-lg) 0;
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-align: center;
+    }
+
+    .hero-subtitle {
+      color: var(--text-secondary);
+      font-size: var(--text-lg);
+      font-weight: 500;
+      margin: 0;
+      text-align: center;
+      max-width: 600px;
+    }
+
     .changelog-section {
       max-width: 900px;
       margin: 0 auto;
-      padding: 20px;
+      padding: var(--spacing-xl);
     }
     .refresh-overlay {
       position: fixed;
@@ -36,7 +83,8 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.2);
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(4px);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -72,12 +120,13 @@
       position: absolute;
       width: 60px;
       height: 60px;
-      background: rgba(0, 188, 212, 0.7);
-      border: 2px solid #008ba3;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      border: 2px solid var(--primary);
       display: flex;
       align-items: center;
       justify-content: center;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+      box-shadow: var(--shadow-lg);
+      border-radius: var(--radius-sm);
     }
     
     .refresh-spinner .front {
@@ -107,70 +156,206 @@
     .loading-message {
       text-align: center;
       color: var(--text-secondary);
-      margin-top: 20px;
-      font-size: 1.1em;
+      margin-top: var(--spacing-lg);
+      font-size: var(--text-lg);
+      font-weight: 500;
     }
 
     .version-card {
-      background-color: var(--bg-card);
-      border-radius: 8px;
-      padding: 20px;
-      margin-bottom: 20px;
-      border: 1px solid var(--border);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      background: var(--bg-card);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-xl);
+      margin-bottom: var(--spacing-xl);
+      border: 1px solid var(--surface-border);
+      box-shadow: var(--shadow-md);
+      transition: all 0.3s ease;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .version-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
+    }
+
+    .version-card:hover {
+      background: var(--surface-hover);
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-lg);
+      border-color: var(--primary);
     }
     
     .version-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 15px;
+      margin-bottom: var(--spacing-lg);
+      padding-bottom: var(--spacing-md);
+      border-bottom: 2px solid var(--surface-border);
     }
     
     .version-title {
-      font-size: 1.3em;
-      font-weight: 600;
+      font-size: var(--text-xl);
+      font-weight: 700;
+      color: var(--text);
+      text-shadow: 0 1px 2px rgba(0,0,0,0.1);
     }
     
     .version-date {
       color: var(--text-secondary);
+      font-size: var(--text-sm);
+      font-weight: 500;
+      background: var(--bg-secondary);
+      padding: var(--spacing-xs) var(--spacing-sm);
+      border-radius: var(--radius-sm);
+      border: 1px solid var(--surface-border);
     }
     
     .changelog-category {
-      margin-top: 15px;
+      margin-top: var(--spacing-lg);
     }
     
     .category-title {
-      font-size: 1.1em;
-      font-weight: 600;
-      margin-bottom: 10px;
-      padding-bottom: 5px;
-      border-bottom: 1px solid var(--border);
+      font-size: var(--text-lg);
+      font-weight: 700;
+      margin-bottom: var(--spacing-md);
+      padding-bottom: var(--spacing-xs);
+      border-bottom: 2px solid var(--primary);
+      color: var(--text);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      position: relative;
+    }
+
+    .category-title::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 30%;
+      height: 2px;
+      background: linear-gradient(90deg, var(--accent), transparent);
     }
     
     .category-features {
-      color: var(--primary);
+      border-bottom-color: var(--primary);
     }
     
     .change-list {
-      padding-left: 25px;
-      margin: 10px 0;
+      padding-left: var(--spacing-xl);
+      margin: var(--spacing-md) 0;
     }
     
     .change-list li {
-      margin-bottom: 8px;
+      margin-bottom: var(--spacing-sm);
+      color: var(--text);
+      line-height: 1.6;
+      position: relative;
+    }
+
+    .change-list li::marker {
+      color: var(--primary);
     }
     
     .back-link {
       display: inline-flex;
       align-items: center;
-      gap: 5px;
-      margin-bottom: 20px;
+      gap: var(--spacing-xs);
+      margin-bottom: var(--spacing-xl);
       color: var(--primary);
       text-decoration: none;
+      font-weight: 600;
+      padding: var(--spacing-sm) var(--spacing-md);
+      background: var(--bg-card);
+      border-radius: var(--radius-md);
+      border: 2px solid var(--primary);
+      transition: all 0.3s ease;
     }
     
     .back-link:hover {
+      background: var(--primary);
+      color: white;
+      transform: translateX(-4px);
+      box-shadow: var(--shadow-sm);
+    }
+
+    .category-description {
+      color: var(--text);
+      line-height: 1.7;
+      font-size: var(--text-base);
+    }
+
+    .category-description br {
+      margin-bottom: var(--spacing-xs);
+    }
+
+    /* Footer specific styles */
+    .footer {
+      background: var(--surface);
+      border-top: 1px solid var(--surface-border);
+      padding: var(--spacing-2xl) 0;
+      margin-top: var(--spacing-3xl);
+      text-align: center;
+    }
+
+    .footer .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 var(--spacing-lg);
+    }
+
+    .footer-logo {
+      max-width: 200px;
+      height: auto;
+      margin: 0 auto var(--spacing-lg) auto;
+      display: block;
+      filter: drop-shadow(var(--shadow-sm));
+      transition: transform 0.3s ease;
+    }
+
+    .footer-logo:hover {
+      transform: scale(1.02);
+    }
+
+    .footer-subtitle {
+      color: var(--text-primary);
+      font-size: var(--text-lg);
+      font-weight: 600;
+      margin-bottom: var(--spacing-sm);
+      background: var(--gradient-primary);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .footer-info {
+      color: var(--text-secondary);
+      font-size: var(--text-sm);
+      margin-bottom: var(--spacing-sm);
+    }
+
+    .footer-copyright {
+      color: var(--text-tertiary);
+      font-size: var(--text-sm);
+    }
+
+    .footer-copyright a {
+      color: var(--primary);
+      text-decoration: none;
+      transition: color 0.3s ease;
+    }
+
+    .footer-copyright a:hover {
+      color: var(--accent);
       text-decoration: underline;
     }
   </style>
@@ -195,20 +380,46 @@
         Back to Home
       </a>
       
-      <!-- Loading animation -->
-      <div id="loading-container" class="refresh-overlay">
-        <div>
-          <div class="refresh-spinner">
-            <div class="cube-face front"></div>
-            <div class="cube-face back"></div>
-            <div class="cube-face right"></div>
-            <div class="cube-face left"></div>
-            <div class="cube-face top"></div>
-            <div class="cube-face bottom"></div>
+      <!-- Changelog Content -->
+      <% if (changelogData && changelogData.length > 0) { %>
+        <% changelogData.forEach(day => { %>
+          <div class="version-card">
+            <div class="version-header">
+              <div class="version-title"><%= day.date %></div>
+              <div class="version-date"><%= day.commits.length %> commit<%= day.commits.length !== 1 ? 's' : '' %></div>
+            </div>
+            
+            <div class="changelog-category">
+              <div class="category-title category-features">Changes</div>
+              <ul class="change-list">
+                <% day.commits.forEach(commit => { %>
+                  <li>
+                    <a href="<%= commit.url %>" target="_blank" style="color: inherit; text-decoration: none; border-bottom: 1px dotted var(--text-secondary);">
+                      <%= commit.message %>
+                    </a>
+                    <span style="font-size: 0.85em; color: var(--text-secondary); margin-left: 5px;">
+                      by <%= commit.author %> at <%= commit.time %> (<%= commit.sha %>)
+                    </span>
+                  </li>
+                <% }) %>
+              </ul>
+            </div>
+          </div>
+        <% }) %>
+      <% } else { %>
+        <div class="version-card">
+          <div class="version-header">
+            <div class="version-title">No Changelog Data</div>
+          </div>
+          <div class="changelog-category">
+            <p style="color: var(--text-secondary); text-align: center; padding: 20px;">
+              Unable to load changelog data. Please visit our 
+              <a href="https://github.com/1334Robotics/vorel-app/commits/main" target="_blank" style="color: var(--primary);">GitHub repository</a> 
+              to view recent changes.
+            </p>
           </div>
-          <div class="loading-message">Loading changelog data...</div>
         </div>
-      </div>
+      <% } %>
     </div>
   </div>
   
@@ -221,168 +432,5 @@
     </div>
   </footer>
   
-  <script>
-    document.addEventListener('DOMContentLoaded', async () => {
-      const changelogSection = document.querySelector('.changelog-section');
-      const backLink = document.querySelector('.back-link');
-      const loadingContainer = document.getElementById('loading-container');
-      
-      try {
-        // Fetch the repository's releases (tags)
-        const releasesResponse = await fetch('https://api.github.com/repos/1334Robotics/vorel-app/releases');
-        const releases = await releasesResponse.json();
-        
-        // Fetch commits
-        const commitsResponse = await fetch('https://api.github.com/repos/1334Robotics/vorel-app/commits?per_page=30');
-        const commits = await commitsResponse.json();
-        
-        // Remove loading indicator
-        loadingContainer.remove();
-        
-        // If we have releases/tags, organize by version
-        if (releases && releases.length > 0) {
-          // Group commits by release
-          releases.forEach(release => {
-            const versionCard = createVersionCard(
-              release.name || release.tag_name,
-              new Date(release.published_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }),
-              release.body,
-              []
-            );
-            changelogSection.appendChild(versionCard);
-          });
-        } else {
-          // No releases, just show recent commits grouped by month
-          const commitsByMonth = groupCommitsByMonth(commits);
-          
-          for (const [monthYear, monthCommits] of Object.entries(commitsByMonth)) {
-            const versionCard = createVersionCard(
-              monthYear,
-              '',
-              null,
-              monthCommits
-            );
-            changelogSection.appendChild(versionCard);
-          }
-        }
-      } catch (error) {
-        console.error('Error fetching GitHub data:', error);
-        
-        // Replace loading indicator with error message
-        loadingContainer.innerHTML = `
-          <div style="text-align: center; padding: 20px;">
-            <p>Error loading changelog data. Please try again later.</p>
-            <p>If the problem persists, view our commits on 
-            <a href="https://github.com/1334Robotics/vorel-app/commits/main" target="_blank">GitHub</a>.</p>
-          </div>
-        `;
-      }
-    });
-    
-    // The rest of your JavaScript functions remain unchanged
-    function createVersionCard(title, date, description, commits) {
-      const card = document.createElement('div');
-      card.className = 'version-card';
-      
-      // Header with version title and date
-      const header = document.createElement('div');
-      header.className = 'version-header';
-      
-      const titleEl = document.createElement('div');
-      titleEl.className = 'version-title';
-      titleEl.textContent = title;
-      
-      const dateEl = document.createElement('div');
-      dateEl.className = 'version-date';
-      dateEl.textContent = date;
-      
-      header.appendChild(titleEl);
-      if (date) header.appendChild(dateEl);
-      card.appendChild(header);
-      
-      // If we have a description (from release notes)
-      if (description) {
-        const descEl = document.createElement('div');
-        descEl.className = 'changelog-category';
-        descEl.innerHTML = `<div class="category-description">${formatDescription(description)}</div>`;
-        card.appendChild(descEl);
-      }
-      
-      // If we have commits
-      if (commits && commits.length > 0) {
-        const commitsEl = document.createElement('div');
-        commitsEl.className = 'changelog-category';
-        
-        const titleEl = document.createElement('div');
-        titleEl.className = 'category-title category-features';
-        titleEl.textContent = 'Commits';
-        commitsEl.appendChild(titleEl);
-        
-        const listEl = document.createElement('ul');
-        listEl.className = 'change-list';
-        
-        commits.forEach(commit => {
-          const li = document.createElement('li');
-          
-          // Create commit message with link
-          const commitLink = document.createElement('a');
-          commitLink.href = commit.html_url;
-          commitLink.target = '_blank';
-          commitLink.textContent = commit.commit.message.split('\n')[0]; // First line of commit message
-          commitLink.style.color = 'inherit';
-          commitLink.style.textDecoration = 'none';
-          commitLink.style.borderBottom = '1px dotted var(--text-secondary)';
-          
-          li.appendChild(commitLink);
-          
-          // Add author and date info
-          const commitInfo = document.createElement('span');
-          commitInfo.style.fontSize = '0.85em';
-          commitInfo.style.color = 'var(--text-secondary)';
-          commitInfo.style.marginLeft = '5px';
-          
-          // Format date as "MMM D"
-          const commitDate = new Date(commit.commit.author.date);
-          const formattedDate = commitDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-          
-          commitInfo.textContent = `by ${commit.commit.author.name} on ${formattedDate}`;
-          li.appendChild(commitInfo);
-          
-          listEl.appendChild(li);
-        });
-        
-        commitsEl.appendChild(listEl);
-        card.appendChild(commitsEl);
-      }
-      
-      return card;
-    }
-    
-    function formatDescription(description) {
-      // Convert markdown-style lists to HTML
-      return description
-        .replace(/\r\n/g, '\n')
-        .replace(/\n\n/g, '<br><br>')
-        .replace(/\n- /g, '<br>• ')
-        .replace(/\n\* /g, '<br>• ');
-    }
-    
-    function groupCommitsByMonth(commits) {
-      const groups = {};
-      
-      commits.forEach(commit => {
-        const date = new Date(commit.commit.author.date);
-        const monthYear = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
-        
-        if (!groups[monthYear]) {
-          groups[monthYear] = [];
-        }
-        
-        groups[monthYear].push(commit);
-      });
-      
-      return groups;
-    }
-  </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index 6781471..fd1381d 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -168,7 +168,7 @@
             
             <button type="submit" id="viewMatchesBtn">
               <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="white"/>
+                <path d="M15.5 14H14.71L14.43 13.73C15.41 12.59 16 11.11 16 9.5C16 5.91 13.09 3 9.5 3C5.91 3 3 5.91 3 9.5C3 13.09 5.91 16 9.5 16C11.11 16 12.59 15.41 13.73 14.43L14 14.71V15.5L19 20.49L20.49 19L15.5 14ZM9.5 14C7.01 14 5 11.99 5 9.5C5 7.01 7.01 5 9.5 5C11.99 5 14 7.01 14 9.5C14 11.99 11.99 14 9.5 14Z" fill="currentColor"/>
               </svg>
               <span class="btn-text">View Matches</span>
               <span class="loading-bars" style="display:none;">
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 2929353..5c7786a 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -1,4 +1,19 @@
 <div class="footer">
-  <div id="update-status">Data provided by FIRST Nexus & TBA APIs • Last checked: N/A</div>
-  <div id="hash-display">Hash: N/A</div>
+  <div class="container">
+    <div class="footer-content">
+      <div class="footer-main">
+        <div class="footer-info">
+          <span id="update-status">Data provided by FIRST Nexus & TBA APIs • Last checked: N/A</span>
+        </div>
+        <div class="footer-hash">
+          <span id="hash-display">Hash: N/A</span>
+        </div>
+      </div>
+      <div class="footer-links">
+        <a href="/" aria-label="Go to home page">Home</a>
+        <a href="https://github.com/1334Robotics/vorel-app" target="_blank" rel="noopener" aria-label="View source on GitHub">GitHub</a>
+        <a href="/changelog" aria-label="View changelog">Changelog</a>
+      </div>
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/views/style/style-404.ejs b/views/style/style-404.ejs
index 9e0faef..6b540cc 100644
--- a/views/style/style-404.ejs
+++ b/views/style/style-404.ejs
@@ -1,36 +1,116 @@
 <style>
-  .header {
-    background-color: #1d1d1d;
-    padding: 25px 0;
-    width: 100%;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-    position: relative;
-    z-index: 10;
+  :root {
+    /* Color Palette - Red, Orange, Yellow, White theme */
+    --primary: #ff6b35;        /* Vibrant orange */
+    --primary-light: #ff8a65;  /* Light orange */
+    --primary-dark: #d84315;   /* Dark orange */
+    --secondary: #ffab00;      /* Golden yellow */
+    --secondary-light: #ffc947; /* Light yellow */
+    --accent: #d32f2f;         /* Deep red */
+    --accent-light: #f44336;   /* Light red */
+    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ffab00 100%);
+    --gradient-secondary: linear-gradient(135deg, #d32f2f 0%, #ff6b35 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 171, 0, 0.2) 100%);
+    
+    /* Modern color system */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --bg-tertiary: #1a1a1a;
+    --bg-quaternary: #252525;
+    --surface: #1e1e1e;
+    --surface-hover: #2a2a2a;
+    --surface-border: #333333;
+    
+    /* Text colors */
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #888888;
+    --text-muted: #666666;
+    
+    /* Modern spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+    
+    /* Border radius */
+    --radius-sm: 6px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
   }
 
-  .header-content {
+  /* Hero section matching other pages */
+  .hero {
+    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    min-height: 50vh;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0.1;
+    z-index: 1;
+  }
+
+  .hero .container {
+    position: relative;
+    z-index: 2;
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 20px;
-    text-align: center;
+    padding: var(--spacing-2xl) var(--spacing-lg);
   }
 
-  .header-logo {
+  .hero-logo {
+    max-width: 280px;
     height: auto;
-    max-height: 90px;
-    max-width: 90%;
-    margin-bottom: 15px;
-    border-radius: 4px;
+    margin-bottom: var(--spacing-xl);
+    filter: drop-shadow(var(--shadow-glow));
+    transition: transform 0.3s ease;
+  }
+
+  .hero-logo:hover {
+    transform: scale(1.05);
+  }
+
+  .hero-title {
+    font-size: clamp(4rem, 12vw, 8rem);
+    font-weight: 800;
+    margin-bottom: var(--spacing-lg);
+    background: var(--gradient-secondary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    line-height: 1;
+    text-shadow: none;
   }
 
-  .header-subtitle {
-    color: #e0e0e0;
-    font-size: 1.3em;
-    font-weight: 500;
+  .hero-subtitle {
+    color: var(--text-primary);
+    font-size: clamp(1.5rem, 4vw, 2.5rem);
+    font-weight: 600;
+    margin-bottom: 0;
+    opacity: 0.9;
   }
 
   .error-container {
@@ -39,57 +119,96 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    padding: 50px 20px;
-    margin: 30px auto;
+    padding: var(--spacing-2xl) var(--spacing-lg);
+    margin: var(--spacing-xl) auto;
     max-width: 600px;
-    background-color: #1d1d1d;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-  }
-
-  .error-code {
-    font-size: 4em;
-    font-weight: bold;
-    color: #f44336;
-    margin-bottom: 10px;
+    background: var(--surface);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    border: 1px solid var(--surface-border);
+    position: relative;
+    overflow: hidden;
   }
 
-  .error-title {
-    font-size: 1.8em;
-    font-weight: bold;
-    color: #e0e0e0;
-    margin-bottom: 20px;
+  .error-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0.1;
+    z-index: -1;
   }
 
   .error-message {
-    font-size: 1.1em;
-    color: #aaa;
-    margin-bottom: 30px;
-    line-height: 1.5;
+    font-size: var(--text-lg);
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-xl);
+    line-height: 1.6;
+    max-width: 500px;
   }
 
   .home-button {
-    padding: 14px 25px;
-    font-size: 1.1em;
-    background: linear-gradient(135deg, #8b0000, #660000);
+    padding: var(--spacing-lg) var(--spacing-xl);
+    font-size: 1.125rem;
+    background: var(--gradient-secondary);
     color: white;
     border: none;
-    border-radius: 6px;
+    border-radius: var(--radius-md);
     cursor: pointer;
-    font-weight: bold;
-    transition: all 0.3s ease;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: inline-flex;
     align-items: center;
+    gap: var(--spacing-sm);
     text-decoration: none;
+    font-family: inherit;
+    box-shadow: var(--shadow-sm);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .home-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
   }
 
   .home-button:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-    background: linear-gradient(135deg, #a00000, #770000);
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: var(--shadow-lg);
+    filter: brightness(1.1);
+  }
+
+  .home-button:hover::before {
+    left: 100%;
   }
 
-  .home-button svg {
-    margin-right: 8px;
+  .home-button:active {
+    transform: translateY(0) scale(1);
+    transition: transform 0.1s ease;
+  }
+
+  @media (max-width: 768px) {
+    .error-container {
+      margin: var(--spacing-lg) var(--spacing-md);
+      padding: var(--spacing-2xl) var(--spacing-lg);
+    }
+
+    .error-message {
+      font-size: 1rem;
+    }
+
+    .home-button {
+      padding: var(--spacing-md) var(--spacing-lg);
+      font-size: 1rem;
+    }
   }
 </style>
diff --git a/views/style/style-embed.ejs b/views/style/style-embed.ejs
index 2b29053..b8f99e9 100644
--- a/views/style/style-embed.ejs
+++ b/views/style/style-embed.ejs
@@ -1,15 +1,52 @@
 <style>
   :root {
-    --primary: #4fc3f7;
-    --primary-darker: #0288d1;
-    --accent: #8b0000;
-    --accent-hover: #a00000;
-    --bg-dark: #111111;
-    --bg-card: #1a1a1a;
-    --bg-card-hover: #222222;
-    --text: #f0f0f0;
-    --text-secondary: #a0a0a0;
-    --border: #333333;
+    /* Color Palette - Red, Orange, Yellow, White theme */
+    --primary: #ff6b35;        /* Vibrant orange */
+    --primary-light: #ff8a65;  /* Light orange */
+    --primary-dark: #d84315;   /* Dark orange */
+    --secondary: #ffab00;      /* Golden yellow */
+    --secondary-light: #ffc947; /* Light yellow */
+    --accent: #d32f2f;         /* Deep red */
+    --accent-light: #f44336;   /* Light red */
+    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ffab00 100%);
+    --gradient-secondary: linear-gradient(135deg, #d32f2f 0%, #ff6b35 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 171, 0, 0.2) 100%);
+    
+    /* Modern color system */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --bg-tertiary: #1a1a1a;
+    --bg-quaternary: #252525;
+    --surface: #1e1e1e;
+    --surface-hover: #2a2a2a;
+    --surface-border: #333333;
+    
+    /* Text colors */
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #888888;
+    --text-muted: #666666;
+    
+    /* Modern spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+    
+    /* Border radius */
+    --radius-sm: 6px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
   }
 
   html,
@@ -22,11 +59,27 @@
   }
 
   body {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, sans-serif;
-    background-color: var(--bg-dark);
-    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
     line-height: 1.6;
+    position: relative;
+  }
+
+  /* Modern background with gradient overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(255, 171, 0, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(211, 47, 47, 0.1) 0%, transparent 50%);
+    z-index: -1;
+    pointer-events: none;
   }
 
   @keyframes refresh-spin {
@@ -80,12 +133,12 @@
     position: absolute;
     width: 60px;
     height: 60px;
-    background: rgba(0, 188, 212, 0.7);
-    border: 2px solid #008ba3;
+    background: var(--gradient-primary);
+    border: 2px solid var(--primary-dark);
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--shadow-md);
   }
 
   .refresh-spinner .front {
@@ -122,32 +175,45 @@
   }
 
   .header {
-    background-color: var(--bg-card);
-    padding: 15px;
+    background: var(--surface);
+    padding: var(--spacing-lg);
     width: 100%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-sm);
     z-index: 10;
     margin-bottom: 0;
     text-align: center;
     font-weight: 600;
-    font-size: 1.1em;
-    color: var(--text);
-    border-bottom: 1px solid var(--border);
+    font-size: 1.125rem;
+    color: var(--text-primary);
+    border-bottom: 1px solid var(--surface-border);
     flex-shrink: 0;
+    position: relative;
+  }
+
+  .header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    opacity: 0.8;
   }
 
   .event-info {
-    background-color: rgba(37, 37, 37, 0.9);
-    padding: 10px 15px;
+    background: var(--surface);
+    padding: var(--spacing-sm) var(--spacing-lg);
     margin-top: 0;
-    margin-bottom: 10px;
+    margin-bottom: var(--spacing-sm);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--surface-border);
     border-top: none;
     flex-shrink: 0;
+    font-size: 0.875rem;
   }
 
   .now-queuing {
@@ -168,60 +234,108 @@
   }
 
   .content::-webkit-scrollbar-track {
-    background: var(--bg-dark);
+    background: var(--bg-primary);
   }
 
   .content::-webkit-scrollbar-thumb {
-    background-color: var(--border);
-    border-radius: 4px;
+    background: var(--surface-border);
+    border-radius: var(--radius-sm);
+  }
+
+  .content::-webkit-scrollbar-thumb:hover {
+    background: var(--primary);
   }
 
   .match-group {
-    background-color: var(--bg-card);
-    border-radius: 12px;
-    padding: 14px;
-    margin-bottom: 16px;
-    border: 1px solid var(--border);
-    transition: all 0.2s ease;
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-md);
+    border: 1px solid var(--surface-border);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .match-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
   }
 
   .match-group:hover {
-    background-color: var(--bg-card-hover);
+    background: var(--surface-hover);
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary);
+  }
+
+  .match-group:hover::before {
+    opacity: 0.1;
   }
 
   .match-group-title {
-    font-size: 1.1em;
+    font-size: 1.125rem;
     color: var(--primary);
-    margin-bottom: 14px;
+    margin-bottom: var(--spacing-md);
     font-weight: 600;
-    border-bottom: 1px solid var(--border);
-    padding-bottom: 8px;
+    border-bottom: 1px solid var(--surface-border);
+    padding-bottom: var(--spacing-sm);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .match-card {
-    background-color: rgba(37, 37, 37, 0.7);
-    border-radius: 8px;
-    margin-bottom: 12px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-md);
     overflow: hidden;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    transition: all 0.2s ease;
-    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+    transition: all 0.3s ease;
+    border: 1px solid var(--surface-border);
   }
 
   .match-card:hover {
-    background-color: rgba(45, 45, 45, 0.8);
+    background: var(--surface-hover);
     transform: translateY(-2px);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary);
   }
 
   .match-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 12px 15px;
+    padding: var(--spacing-md) var(--spacing-lg);
     cursor: pointer;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .match-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s ease;
+  }
+
+  .match-card:hover .match-header::before {
+    left: 100%;
   }
 
   .match-header-left {
@@ -232,37 +346,46 @@
 
   .match-label {
     font-weight: 600;
-    color: var(--text);
+    color: white;
+    font-size: var(--text-base);
+    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
   }
 
   .match-time {
-    color: var(--text-secondary);
-    font-size: 0.9em;
+    color: rgba(255,255,255,0.9);
+    font-size: var(--text-sm);
+    font-weight: 500;
   }
 
   .match-status {
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 0.8em;
-    font-weight: 500;
-    background-color: var(--bg-card);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    background: var(--bg-card);
     color: var(--text-secondary);
+    border: 1px solid var(--surface-border);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
   }
 
   .status-queuing {
-    background-color: rgba(255, 152, 0, 0.2);
-    color: #ff9800;
+    background: linear-gradient(135deg, var(--accent) 0%, var(--warning) 100%);
+    color: white;
+    border-color: var(--accent);
     animation: pulse 1.5s infinite;
   }
 
   .status-on-deck {
-    background-color: rgba(33, 150, 243, 0.2);
-    color: #2196f3;
+    background: linear-gradient(135deg, var(--info) 0%, #2196f3 100%);
+    color: white;
+    border-color: var(--info);
   }
 
   .status-on-field {
-    background-color: rgba(76, 175, 80, 0.2);
-    color: #4caf50;
+    background: linear-gradient(135deg, var(--success) 0%, #4caf50 100%);
+    color: white;
+    border-color: var(--success);
   }
 
   @keyframes pulse {
@@ -372,7 +495,19 @@
   }
 
   .alliance-section {
-    margin-bottom: 14px;
+    margin-bottom: var(--spacing-md);
+    background: var(--bg-card);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    border: 1px solid var(--surface-border);
+    transition: all 0.3s ease;
+  }
+
+  .alliance-section:hover {
+    background: var(--surface-hover);
+    border-color: var(--primary);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm);
   }
 
   .alliance-section:last-child {
@@ -383,27 +518,36 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
+    margin-bottom: var(--spacing-sm);
+    padding-bottom: var(--spacing-xs);
+    border-bottom: 2px solid var(--surface-border);
   }
 
   .alliance-name {
-    font-weight: 600;
+    font-weight: 700;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: var(--spacing-xs);
+    font-size: var(--text-base);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
   }
 
   .red-alliance {
-    color: #f44336;
+    color: var(--primary);
   }
 
   .blue-alliance {
-    color: #2196f3;
+    color: var(--info);
   }
 
   .alliance-score {
-    font-weight: 600;
-    font-size: 1.1em;
+    font-weight: 700;
+    font-size: var(--text-lg);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--bg-secondary);
+    border-radius: var(--radius-sm);
+    border: 2px solid var(--surface-border);
   }
 
   .alliance-teams {
diff --git a/views/style/style-home.ejs b/views/style/style-home.ejs
index c8abba9..f7f46ff 100644
--- a/views/style/style-home.ejs
+++ b/views/style/style-home.ejs
@@ -1,238 +1,388 @@
 <style>
   :root {
-    --primary: #4fc3f7;
-    --primary-darker: #0288d1;
-    --accent: #8b0000;
-    --accent-hover: #a00000;
-    --bg-dark: #111111;
-    --bg-card: #1a1a1a;
-    --bg-card-hover: #222222;
-    --text: #f0f0f0;
-    --text-secondary: #a0a0a0;
-    --border: #333333;
-  }
-
-  html,
-  body {
-    height: 100%;
+    /* Color Palette - Red, Orange, Yellow, White theme */
+    --primary: #ff6b35;        /* Vibrant orange */
+    --primary-light: #ff8a65;  /* Light orange */
+    --primary-dark: #d84315;   /* Dark orange */
+    --secondary: #ffab00;      /* Golden yellow */
+    --secondary-light: #ffc947; /* Light yellow */
+    --accent: #d32f2f;         /* Deep red */
+    --accent-light: #f44336;   /* Light red */
+    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ffab00 100%);
+    --gradient-secondary: linear-gradient(135deg, #d32f2f 0%, #ff6b35 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 171, 0, 0.2) 100%);
+    
+    /* Modern color system */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --bg-tertiary: #1a1a1a;
+    --bg-quaternary: #252525;
+    --surface: #1e1e1e;
+    --surface-hover: #2a2a2a;
+    --surface-border: #333333;
+    
+    /* Text colors */
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #888888;
+    --text-muted: #666666;
+    
+    /* Status colors */
+    --success: #4caf50;
+    --warning: #ff9800;
+    --error: #f44336;
+    --info: #2196f3;
+    
+    /* Modern spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+    
+    /* Border radius */
+    --radius-sm: 6px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
+  }
+
+  /* Global Reset and Base Styles */
+  * {
     margin: 0;
     padding: 0;
-    display: flex;
-    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  html {
+    height: 100%;
+    scroll-behavior: smooth;
   }
 
   body {
-    background-color: var(--bg-dark);
-    color: var(--text);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, sans-serif;
+    height: 100%;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;
-    min-height: 140vh;
+    overflow-x: hidden;
+    position: relative;
     display: flex;
     flex-direction: column;
-    position: relative;
-    margin: 0;
-    padding: 0;
-    overflow-x: hidden;
+    min-height: 100vh;
+  }
+
+  /* Modern background with gradient overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(255, 171, 0, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(211, 47, 47, 0.1) 0%, transparent 50%);
+    z-index: -1;
+    pointer-events: none;
   }
 
   .container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 0 24px;
+    padding: 0 var(--spacing-lg);
+    width: 100%;
+  }
+
+  /* Main Content Layout */
+  .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
   }
 
+  /* Hero Section - Modern and Clean */
   .hero {
-    padding: 40px 0 50px;
+    padding: var(--spacing-3xl) 0;
     text-align: center;
     position: relative;
-    overflow: hidden;
-    flex: 1 0 auto;
-  }
-
-  .hero::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: radial-gradient(
-      circle at 50% 0%,
-      rgba(139, 0, 0, 0.2),
-      transparent 70%
-    );
-    z-index: -1;
-    pointer-events: none;
+    flex: 1;
   }
 
   .hero-logo {
-    max-width: 250px;
+    max-width: 280px;
     height: auto;
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-xl);
+    filter: drop-shadow(var(--shadow-glow));
+    transition: transform 0.3s ease;
+  }
+
+  .hero-logo:hover {
+    transform: scale(1.05);
   }
 
   .hero-title {
-    font-size: 2.5rem;
+    font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
-    margin: 0 0 12px;
-    background: linear-gradient(135deg, var(--primary), #ffffff);
+    margin-bottom: var(--spacing-md);
+    background: var(--gradient-primary);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
-    line-height: 1.2;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
   }
 
-.section-title {
-  text-align: center;
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 0 15px;
-}
-
-
-@media (max-width: 576px) {
-  .section-title {
-    font-size: 1.5rem; 
-  }
-  
-  .container {
-    padding-left: 15px;
-    padding-right: 15px;
+  .hero-subtitle {
+    font-size: clamp(1rem, 2.5vw, 1.25rem);
+    font-weight: 400;
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-3xl);
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+    line-height: 1.5;
   }
-}
 
+  /* Section Titles */
   .section-title {
-    font-size: 2rem;
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
     font-weight: 700;
-    margin: 0 0 35px;
+    margin-bottom: var(--spacing-2xl);
     text-align: center;
     position: relative;
-    padding-bottom: 15px;
-    background: linear-gradient(135deg, var(--primary), #a3daff);
+    background: var(--gradient-primary);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1.2;
+    letter-spacing: -0.01em;
   }
 
   .section-title::after {
     content: "";
     position: absolute;
-    bottom: 0;
+    bottom: -12px;
     left: 50%;
     transform: translateX(-50%);
-    width: 80px;
-    height: 4px;
-    background: linear-gradient(90deg, rgba(79, 195, 247, 0.2), rgba(79, 195, 247, 0.8), rgba(79, 195, 247, 0.2));
-    border-radius: 4px;
-}
+    width: 60px;
+    height: 3px;
+    background: var(--gradient-primary);
+    border-radius: 2px;
+  }
 
-  .hero-subtitle {
-    font-size: 1.2rem;
-    font-weight: 400;
+  /* Notice Sections - Modern Card Style */
+  .api-update-notice,
+  .championship-notice {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    margin: var(--spacing-xl) 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .api-update-notice::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--gradient-primary);
+  }
+
+  .championship-notice::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--success);
+  }
+
+  .notice-content h3 {
+    margin: 0 0 var(--spacing-sm);
+    color: var(--text-primary);
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .api-update-notice .notice-content h3 {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .notice-content p {
+    margin-bottom: var(--spacing-sm);
     color: var(--text-secondary);
-    margin: 0 0 60px; 
-    max-width: 800px;
-    margin-left: auto;
-    margin-right: auto;
+    line-height: 1.6;
   }
 
-  .features {
-  display: grid;
-  gap: 20px;
-  margin: 0 0 30px;
-  grid-template-columns: 1fr;
-}
+  .notice-content p:last-child {
+    margin-bottom: 0;
+  }
 
+  .notice-content a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+    border-bottom: 1px solid transparent;
+    transition: all 0.2s ease;
+  }
 
-@media (min-width: 600px) {
-  .features {
-    grid-template-columns: repeat(2, 1fr);
+  .notice-content a:hover {
+    border-bottom-color: var(--primary);
   }
-}
 
-@media (min-width: 1100px) {
+  /* Feature Cards - Modern Grid Layout */
   .features {
-    grid-template-columns: repeat(4, 1fr);
+    display: grid;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-2xl);
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .features {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .features {
+      grid-template-columns: repeat(4, 1fr);
+    }
   }
-}
 
   .feature-card {
-    background-color: rgba(26, 26, 26, 0.7);
-    backdrop-filter: blur(4px);
-    border-radius: 12px;
-    padding: 20px;
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+  }
+
+  .feature-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
   }
 
   .feature-card:hover {
-    background-color: rgba(34, 34, 34, 0.8);
-    transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
-      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    transform: translateY(-8px);
+    border-color: var(--primary);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .feature-card:hover::before {
+    opacity: 1;
   }
 
   .feature-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
-    border-radius: 10px;
-    margin-bottom: 12px;
-    background: linear-gradient(135deg, var(--primary-darker), var(--primary));
+    width: 48px;
+    height: 48px;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-md);
+    background: var(--gradient-primary);
     color: white;
+    box-shadow: var(--shadow-sm);
   }
 
   .feature-title {
-    font-size: 1.1rem;
+    font-size: 1.125rem;
     font-weight: 600;
-    margin: 0 0 8px;
-    color: white;
+    margin-bottom: var(--spacing-sm);
+    color: var(--text-primary);
   }
 
   .feature-description {
     color: var(--text-secondary);
-    margin: 0;
-    font-size: 0.9rem;
+    font-size: 0.9375rem;
+    line-height: 1.6;
   }
 
+  /* Search Section - Modern Form Design */
   .search-section {
-    background-color: rgba(26, 26, 26, 0.7);
-    backdrop-filter: blur(4px);
-    border-radius: 16px;
-    padding: 30px;
-    margin: 0 0 20px;
-    border: 1px solid var(--border);
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-2xl);
+    margin-bottom: var(--spacing-xl);
+    position: relative;
+    backdrop-filter: blur(20px);
+    box-shadow: var(--shadow-md);
+  }
+
+  .search-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    border-radius: var(--radius-xl);
+    opacity: 0.1;
+    z-index: -1;
   }
 
   .search-title {
-    font-size: 1.6rem;
+    font-size: clamp(1.25rem, 3vw, 1.75rem);
     font-weight: 700;
-    margin: 0 0 25px;
+    margin-bottom: var(--spacing-2xl);
     text-align: center;
-    color: white;
+    color: var(--text-primary);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .form-row {
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-lg);
   }
 
   label {
     display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-    font-size: 1rem;
+    margin-bottom: var(--spacing-sm);
+    font-weight: 600;
+    font-size: 0.9375rem;
+    color: var(--text-primary);
   }
 
   .input-hint {
     display: block;
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    margin-top: 6px;
+    font-size: 0.8125rem;
+    color: var(--text-tertiary);
+    margin-top: var(--spacing-xs);
+    line-height: 1.4;
   }
 
   .input-hint.auto-selected {
@@ -245,428 +395,420 @@
     font-weight: bold;
   }
 
+  /* Modern Input Styling */
   input[type="text"] {
     width: 100%;
-    padding: 14px 16px;
-    background-color: rgba(255, 255, 255, 0.05);
-    border: 1px solid var(--border);
-    border-radius: 8px;
-    color: white;
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--bg-secondary);
+    border: 2px solid var(--surface-border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
     font-size: 1rem;
-    transition: all 0.2s ease;
+    font-weight: 400;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     box-sizing: border-box;
+    font-family: inherit;
   }
 
   input[type="text"]:focus {
     border-color: var(--primary);
-    box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
+    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
     outline: none;
-    background-color: rgba(255, 255, 255, 0.07);
+    background: var(--bg-tertiary);
   }
 
   input[type="text"]::placeholder {
-    color: var(--text-secondary);
+    color: var(--text-muted);
   }
 
+  /* Modern Button Design */
   button {
     width: 100%;
-    padding: 16px 20px;
-    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+    padding: var(--spacing-lg) var(--spacing-xl);
+    background: var(--gradient-secondary);
     color: white;
     border: none;
-    border-radius: 8px;
-    font-size: 1.1rem;
+    border-radius: var(--radius-md);
+    font-size: 1.0625rem;
     font-weight: 600;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.3s ease;
+    gap: var(--spacing-sm);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+    font-family: inherit;
+    box-shadow: var(--shadow-sm);
+  }
+
+  button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
   }
 
   button:hover {
     transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-lg);
+    filter: brightness(1.1);
   }
 
-  button svg {
-    margin-right: 8px;
+  button:hover::before {
+    left: 100%;
   }
 
+  button:active {
+    transform: translateY(0);
+    transition: transform 0.1s ease;
+  }
+
+  button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    transform: none;
+  }
+
+  /* Search Container and Results */
   .search-container {
     position: relative;
     width: 100%;
-  }  .search-results {
+  }
+
+  .search-results {
     position: absolute;
     width: 100%;
-    max-height: 250px;
+    max-height: 280px;
     overflow-y: auto;
-    background-color: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 8px;
+    background: var(--surface);
+    border: 2px solid var(--surface-border);
+    border-radius: var(--radius-md);
     z-index: 1000;
     display: none;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
-    top: calc(100% + 4px);
+    box-shadow: var(--shadow-lg);
+    top: calc(100% + var(--spacing-xs));
     left: 0;
+    backdrop-filter: blur(20px);
   }
 
   .search-results.show-above {
     top: auto;
-    bottom: calc(100% + 4px);
-    border-radius: 8px;
-    box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.3);
-  }
-
-  /* Ensure dropdown doesn't get cut off on small viewports */
-  @media (max-height: 600px) {
-    .search-results {
-      max-height: 150px;
-    }
-  }
-  
-  @media (max-height: 400px) {
-    .search-results {
-      max-height: 100px;
-    }
+    bottom: calc(100% + var(--spacing-xs));
   }
 
   .search-results.active {
     display: block;
+    animation: slideIn 0.2s ease-out;
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   .search-item {
-    padding: 12px 16px;
+    padding: var(--spacing-md) var(--spacing-lg);
     cursor: pointer;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--surface-border);
+    transition: all 0.2s ease;
+  }
+
+  .search-item:last-child {
+    border-bottom: none;
   }
 
   .search-item:hover,
   .search-item.selected {
-    background-color: rgba(255, 255, 255, 0.05);
+    background: var(--surface-hover);
   }
 
   .search-item .event-name {
     font-weight: 600;
     color: var(--primary);
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-xs);
+    font-size: 0.9375rem;
   }
 
   .search-item .event-details {
-    font-size: 0.9rem;
+    font-size: 0.875rem;
     color: var(--text-secondary);
+    margin-bottom: 2px;
   }
 
   .search-item .event-key {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    opacity: 0.7;
+    font-size: 0.8125rem;
+    color: var(--text-tertiary);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  }
+
+  /* Loading Animation */
+  .loading-bars {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 20px;
+  }
+
+  .loading-bars .bar {
+    width: 3px;
+    height: 12px;
+    background: white;
+    border-radius: 2px;
+    animation: loadingBarPulse 1.2s infinite ease-in-out;
   }
 
+  .loading-bars .bar:nth-child(1) { animation-delay: 0s; }
+  .loading-bars .bar:nth-child(2) { animation-delay: 0.1s; }
+  .loading-bars .bar:nth-child(3) { animation-delay: 0.2s; }
+
+  @keyframes loadingBarPulse {
+    0%, 40%, 100% { 
+      opacity: 0.4; 
+      transform: scaleY(0.6);
+    }
+    20% { 
+      opacity: 1; 
+      transform: scaleY(1);
+    }
+  }
+
+  /* Modern Footer */
   .footer {
-    background-color: var(--bg-card);
-    padding: 20px 0;
+    background: var(--surface);
+    border-top: 1px solid var(--surface-border);
+    padding: var(--spacing-2xl) 0 var(--spacing-xl);
     text-align: center;
-    border-top: 1px solid var(--border);
     margin-top: auto;
-    flex-shrink: 0;
     position: relative;
-    bottom: 0;
-    width: 100%;
+  }
+
+  .footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: var(--gradient-primary);
+    opacity: 0.5;
   }
 
   .footer-logo {
-    max-width: 180px;
+    max-width: 200px;
     height: auto;
-    margin-bottom: 12px;
+    margin-bottom: var(--spacing-md);
+    filter: drop-shadow(var(--shadow-sm));
   }
 
   .footer-subtitle {
     color: var(--primary);
     font-size: 1rem;
-    margin-bottom: 10px;
+    font-weight: 500;
+    margin-bottom: var(--spacing-sm);
   }
 
   .footer-info {
     color: var(--text-secondary);
-    font-size: 0.9rem;
-    margin-top: 6px;
+    font-size: 0.875rem;
+    margin-bottom: var(--spacing-md);
   }
 
   .footer-copyright {
-    color: var(--text-secondary);
-    font-size: 0.8rem;
-    margin-top: 12px;
+    color: var(--text-tertiary);
+    font-size: 0.8125rem;
   }
 
   .footer-copyright a {
-    color: #4dabf7;
+    color: var(--primary);
     text-decoration: none;
     font-weight: 500;
-    position: relative;
     transition: all 0.2s ease;
     padding: 2px 4px;
-    border-radius: 3px;
+    border-radius: 4px;
   }
 
   .footer-copyright a:hover {
-    color: #74c0fc;
-    background-color: rgba(79, 195, 247, 0.1);
-  }
-
-  .footer-copyright a:focus {
-    color: #74c0fc;
-    background-color: rgba(79, 195, 247, 0.15);
-    box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.3);
-    outline: none;
-  }
-
-  .footer-copyright a::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    height: 1px;
-    bottom: 0;
-    left: 0;
-    background-color: currentColor;
-    transform: scaleX(0);
-    transition: transform 0.2s ease;
-  }
-
-  .footer-copyright a:hover::after {
-    transform: scaleX(1);
-  }
-
-
-  .footer-copyright a:focus {
-    outline: 2px solid #74c0fc;
-    outline-offset: 2px;
-  }
-
-  @media (max-width: 768px) {
-    .hero {
-      padding: 30px 0 40px;
-    }
-
-    .hero-title {
-      font-size: 2rem;
-    }
-
-    .hero-subtitle {
-      font-size: 1rem;
-      margin-bottom: 20px;
-    }
-
-    .search-section {
-      padding: 20px;
-    }
-  }
-
-  .hero-logo,
-  .footer-logo {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .main-content {
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-  }
-  .footer .container {
-    min-height: auto;
-  }
-
-  .championship-notice {
-    background-color: rgba(67, 160, 71, 0.15);
-    border-left: 4px solid #43a047;
-    border-radius: 6px;
-    padding: 16px 20px;
-    margin: 24px 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  }
-  
-  .api-update-notice {
-    background-color: rgba(33, 150, 243, 0.15);
-    border-left: 4px solid #2196f3;
-    border-radius: 6px;
-    padding: 16px 20px;
-    margin: 24px 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  }
-  
-  .api-update-notice .notice-content h3 {
-    margin-top: 0;
-    color: #64b5f6;
-    font-size: 1.2rem;
-    margin-bottom: 8px;
-  }
-  
-  .api-update-notice .notice-content p {
-    margin-bottom: 8px;
-    color: #f0f0f0;
-    line-height: 1.5;
-  }
-  
-  .api-update-notice .notice-content p:last-child {
-    margin-bottom: 0;
-  }
-  
-  .api-update-notice .notice-content a {
-    color: #64b5f6;
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: border-bottom-color 0.2s ease;
-  }
-  
-  .api-update-notice .notice-content a:hover {
-    border-bottom-color: #64b5f6;
+    background: rgba(255, 107, 53, 0.1);
+    color: var(--primary-light);
   }
-  
-  .notice-content h3 {
-    margin-top: 0;
-    color: #68db6d;
-    font-size: 1.2rem;
-    margin-bottom: 8px;
-  }
-  
-  .notice-content p {
-    margin-bottom: 0;
-    color: #f0f0f0;
-    line-height: 1.5;
-  }
-  
-  @media (max-width: 768px) {
-    .championship-notice {
-      padding: 12px 16px;
-    }
-    
-    .api-update-notice {
-      padding: 12px 16px;
-    }
-  }
-  .loading-bars {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 8px;
-    height: 20px;
-    vertical-align: middle;
-  }
-  .loading-bars .bar {
-    width: 3px;
-    height: 14px;
-    margin: 0 1px;
-    background: #fff;
-    border-radius: 2px;
-    opacity: 0.5;
-    animation: loadingBarFade 1s infinite;
-  }
-  .loading-bars .bar:nth-child(1) { animation-delay: 0s; }
-  .loading-bars .bar:nth-child(2) { animation-delay: 0.2s; }
-  .loading-bars .bar:nth-child(3) { animation-delay: 0.4s; }
 
-  @keyframes loadingBarFade {
-    0%, 100% { opacity: 0.3; height: 8px; }
-    50% { opacity: 1; height: 16px; }
-  }
-  #viewMatchesBtn:active {
-    transform: scale(0.97);
-    transition: transform 0.12s cubic-bezier(0.4,0,0.2,1);
-  }
-    /* --- Donate Section Styles (Placeholder) --- */
+  /* Donate Section - Modern Design */
   .donate-section {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 16px 0 96px 0;
+    margin: var(--spacing-2xl) 0;
     padding: 0;
-    background: none;
   }
+
   .donate-card {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10);
-    padding: 32px 32px 24px 32px;
-    max-width: 420px;
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    padding: var(--spacing-2xl);
+    max-width: 480px;
     width: 100%;
     text-align: center;
-    margin: 0 auto;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 18px;
+    gap: var(--spacing-lg);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .donate-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0.05;
+    z-index: -1;
   }
+
   .donate-title {
     display: flex;
     align-items: center;
-    font-size: 1.3rem;
+    font-size: 1.375rem;
     font-weight: 700;
-    color: #ff5252;
-    margin-bottom: 0;
-    letter-spacing: 0.5px;
+    color: var(--accent);
+    margin: 0;
+    letter-spacing: -0.01em;
   }
+
   .donate-desc {
     color: var(--text-secondary);
     font-size: 1rem;
-    margin-bottom: 0;
-    margin-top: 0;
-    line-height: 1.5;
+    line-height: 1.6;
+    margin: 0;
   }
+
   .donate-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(90deg, #23272f, #2d2f36);
-    color: #ff5252;
+    background: var(--gradient-secondary);
+    color: white;
     font-weight: 600;
     font-size: 1rem;
-    border: 1px solid #333;
-    border-radius: 8px;
-    padding: 12px 24px;
-    margin-top: 8px;
+    border: none;
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md) var(--spacing-xl);
     text-decoration: none;
-    box-shadow: 0 2px 8px 0 rgba(30,30,30,0.10);
-    transition: background-color 0.6s cubic-bezier(0.4,0,0.2,1),
-                background-image 0.6s cubic-bezier(0.4,0,0.2,1),
-                color 0.6s cubic-bezier(0.4,0,0.2,1),
-                box-shadow 0.4s cubic-bezier(0.4,0,0.2,1),
-                transform 0.25s cubic-bezier(0.4,0,0.2,1);
-    cursor: pointer;
-    outline: none;
-    gap: 6px;
+    box-shadow: var(--shadow-sm);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    gap: var(--spacing-sm);
+    position: relative;
+    overflow: hidden;
   }
-  .donate-btn svg {
-    margin-right: 5px;
-    vertical-align: middle;
+
+  .donate-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
   }
-  .donate-btn:hover, .donate-btn:focus {
-    background: linear-gradient(90deg, #ff1744, #ff5252);
-    box-shadow: 0 4px 16px 0 rgba(255,23,68,0.15);
-    transform: translateY(-2px) scale(1.03);
-    color: #fff;
+
+  .donate-btn:hover {
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: var(--shadow-lg);
     text-decoration: none;
+    color: white;
   }
-  @media (max-width: 600px) {
+
+  .donate-btn:hover::before {
+    left: 100%;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .container {
+      padding: 0 var(--spacing-md);
+    }
+
+    .hero {
+      padding: var(--spacing-2xl) 0;
+    }
+
+    .search-section {
+      padding: var(--spacing-xl);
+    }
+
     .donate-card {
-      padding: 20px 8px 16px 8px;
-      max-width: 98vw;
+      padding: var(--spacing-xl);
+      margin: 0 var(--spacing-md);
+    }
+  }
+
+  @media (max-width: 480px) {
+    .hero-logo {
+      max-width: 240px;
+    }
+
+    .features {
+      gap: var(--spacing-md);
+    }
+
+    .feature-card {
+      padding: var(--spacing-lg);
     }
-    .donate-section {
-      padding: 0 0 20px 0;
-      margin: 32px 0 0 0;
+
+    .search-section {
+      padding: var(--spacing-lg);
     }
-    .donate-title {
-      font-size: 1.1rem;
+
+    .donate-card {
+      padding: var(--spacing-lg);
     }
-    .donate-desc {
-      font-size: 0.95rem;
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :root {
+      --surface-border: #555555;
+      --text-secondary: #cccccc;
+      --text-tertiary: #aaaaaa;
     }
-    .donate-btn {
-      font-size: 0.98rem;
-      padding: 10px 12px;
+  }
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
     }
   }
+
+  /* Focus visible improvements */
+  button:focus-visible,
+  input:focus-visible,
+  a:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
 </style>
diff --git a/views/style/style-matches.ejs b/views/style/style-matches.ejs
index 776f0cf..cf7f178 100644
--- a/views/style/style-matches.ejs
+++ b/views/style/style-matches.ejs
@@ -1,30 +1,89 @@
 <style>
   :root {
-    --primary: #4fc3f7;
-    --primary-darker: #0288d1;
-    --accent: #8b0000;
-    --accent-hover: #a00000;
-    --bg-dark: #111111;
-    --bg-card: #1a1a1a;
-    --bg-card-hover: #222222;
-    --text: #f0f0f0;
-    --text-secondary: #a0a0a0;
-    --border: #333333;
+    /* Color Palette - Red, Orange, Yellow, White theme */
+    --primary: #ff6b35;        /* Vibrant orange */
+    --primary-light: #ff8a65;  /* Light orange */
+    --primary-dark: #d84315;   /* Dark orange */
+    --secondary: #ffab00;      /* Golden yellow */
+    --secondary-light: #ffc947; /* Light yellow */
+    --accent: #d32f2f;         /* Deep red */
+    --accent-light: #f44336;   /* Light red */
+    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ffab00 100%);
+    --gradient-secondary: linear-gradient(135deg, #d32f2f 0%, #ff6b35 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 171, 0, 0.2) 100%);
+    
+    /* Modern color system */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --bg-tertiary: #1a1a1a;
+    --bg-quaternary: #252525;
+    --surface: #1e1e1e;
+    --surface-hover: #2a2a2a;
+    --surface-border: #333333;
+    
+    /* Text colors */
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #888888;
+    --text-muted: #666666;
+    
+    /* Status colors */
+    --success: #4caf50;
+    --warning: #ff9800;
+    --error: #f44336;
+    --info: #2196f3;
+    
+    /* Modern spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+    
+    /* Border radius */
+    --radius-sm: 6px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 24px;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
+    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.3);
   }
 
   body {
-    background-color: var(--bg-dark);
-    color: var(--text);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;
+    position: relative;
+  }
+
+  /* Modern background with gradient overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(circle at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(255, 171, 0, 0.15) 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, rgba(211, 47, 47, 0.1) 0%, transparent 50%);
+    z-index: -1;
+    pointer-events: none;
   }
 
   .header {
-    background-color: var(--bg-card);
-    padding: 25px 0 0 0;
+    background: var(--surface);
+    padding: var(--spacing-xl) 0 0 0;
     width: 100%;
-    box-shadow: none;
+    box-shadow: var(--shadow-sm);
     position: relative;
     z-index: 10;
     margin-bottom: 0;
@@ -42,7 +101,7 @@
   }
 
   .header-subtitle {
-    color: var(--text);
+    color: var(--text-primary);
     font-size: clamp(1em, 4vw, 1.4em);
     font-weight: 600;
     text-align: center;
@@ -51,6 +110,10 @@
     overflow-wrap: break-word;
     white-space: normal;
     line-height: 1.3;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .header-logo {
@@ -177,21 +240,45 @@
   .team-ranking-section,
   .next-match-card,
   .clock-section {
-    background-color: var(--bg-card);
-    border-radius: 12px;
-    padding: 18px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--border);
-    transition: all 0.3s ease;
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--surface-border);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .team-ranking-section::before,
+  .next-match-card::before,
+  .clock-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
   }
 
   .team-ranking-section:hover,
   .next-match-card:hover,
   .clock-section:hover {
-    background-color: var(--bg-card-hover);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background: var(--surface-hover);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary);
+  }
+
+  .team-ranking-section:hover::before,
+  .next-match-card:hover::before,
+  .clock-section:hover::before {
+    opacity: 0.1;
   }
 
   .info-title {
@@ -210,18 +297,28 @@
   }
 
   .stat-card {
-    background-color: rgba(37, 37, 37, 0.7);
-    padding: 12px;
-    border-radius: 8px;
+    background: var(--bg-tertiary);
+    padding: var(--spacing-md);
+    border-radius: var(--radius-md);
     text-align: center;
-    border: 1px solid var(--border);
+    border: 1px solid var(--surface-border);
+    transition: all 0.2s ease;
+  }
+
+  .stat-card:hover {
+    background: var(--bg-quaternary);
+    border-color: var(--primary);
   }
 
   .stat-value {
     font-size: 1.6em;
     font-weight: bold;
     margin-bottom: 5px;
-    color: var(--text);
+    color: var(--text-primary);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .stat-label {
@@ -230,18 +327,19 @@
   }
 
   .next-match-details {
-    background-color: rgba(37, 37, 37, 0.7);
-    padding: 15px;
-    border-radius: 8px;
-    margin-top: 10px;
-    border: 1px solid var(--border);
+    background: var(--bg-tertiary);
+    padding: var(--spacing-lg);
+    border-radius: var(--radius-md);
+    margin-top: var(--spacing-sm);
+    border: 1px solid var(--surface-border);
+    backdrop-filter: blur(10px);
   }
 
   .next-match-time {
     font-size: 1.4em;
     font-weight: bold;
-    margin-bottom: 8px;
-    color: #ff9800;
+    margin-bottom: var(--spacing-sm);
+    color: var(--secondary);
     text-align: center;
   }
 
@@ -256,11 +354,12 @@
   }
 
   .match-number-badge {
-    background-color: var(--bg-card);
-    color: var(--text);
+    background: var(--surface);
+    color: var(--text-primary);
     padding: 4px 8px;
     border-radius: 4px;
     font-weight: bold;
+    border: 1px solid var(--surface-border);
   }
 
   .alliance-indicator {
@@ -268,17 +367,17 @@
     justify-content: center;
     align-items: center;
     gap: 5px;
-    margin-bottom: 8px;
+    margin-bottom: var(--spacing-sm);
     font-weight: bold;
     font-size: 1.1em;
   }
 
   .alliance-indicator.red {
-    color: #f44336;
+    color: var(--accent);
   }
 
   .alliance-indicator.blue {
-    color: #2196f3;
+    color: var(--info);
   }
 
   .alliance-dot {
@@ -291,8 +390,12 @@
     font-size: 1.8em;
     font-weight: bold;
     text-align: center;
-    margin: 10px 0;
-    color: var(--text);
+    margin: var(--spacing-sm) 0;
+    color: var(--text-primary);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .clock-date {
@@ -302,11 +405,11 @@
   }
 
   .next-match-teams {
-    margin-top: 10px;
-    background-color: rgba(45, 45, 45, 0.7);
-    border-radius: 8px;
-    padding: 12px;
-    border: 1px solid var(--border);
+    margin-top: var(--spacing-sm);
+    background: var(--bg-quaternary);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    border: 1px solid var(--surface-border);
   }
 
   .teams-section {
@@ -326,11 +429,11 @@
   }
 
   .red-title {
-    color: #f44336;
+    color: var(--accent);
   }
 
   .blue-title {
-    color: #2196f3;
+    color: var(--info);
   }
 
   .teams-list {
@@ -343,13 +446,15 @@
   .team-item {
     font-size: 0.9em;
     padding: 4px 8px;
-    background-color: rgba(61, 61, 61, 0.7);
+    background: var(--bg-tertiary);
     border-radius: 4px;
-    transition: background-color 0.2s;
+    transition: all 0.2s ease;
+    border: 1px solid var(--surface-border);
   }
 
   .team-item:hover {
-    background-color: rgba(75, 75, 75, 0.8);
+    background: var(--surface-hover);
+    border-color: var(--primary);
   }
 
   .team-item.highlight {
@@ -358,33 +463,33 @@
   }
 
   .team-item.highlight.red-highlight {
-    border-left: 3px solid #f44336;
-    background-color: rgba(63, 36, 36, 0.8);
+    border-left: 3px solid var(--accent);
+    background: rgba(211, 47, 47, 0.2);
   }
 
   .team-item.highlight.blue-highlight {
-    border-left: 3px solid #2196f3;
-    background-color: rgba(26, 42, 58, 0.8);
+    border-left: 3px solid var(--info);
+    background: rgba(33, 150, 243, 0.2);
   }
 
   .team-chip.highlight.red-team {
-    background-color: rgba(63, 36, 36, 0.8);
+    background: rgba(211, 47, 47, 0.2);
     font-weight: bold;
     border-width: 3px;
   }
 
   .team-chip.highlight.blue-team {
-    background-color: rgba(26, 42, 58, 0.8);
+    background: rgba(33, 150, 243, 0.2);
     font-weight: bold;
     border-width: 3px;
   }
 
   .event-info {
-    background-color: rgba(37, 37, 37, 0.9);
-    padding: 12px 60px;
-    border-radius: 0 0 12px 12px;
+    background: var(--surface);
+    padding: var(--spacing-md) var(--spacing-3xl);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
     margin-top: 0;
-    margin-bottom: 25px;
+    margin-bottom: var(--spacing-xl);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -392,13 +497,25 @@
     max-width: 1080px;
     margin-left: auto;
     margin-right: auto;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--surface-border);
     border-top: none;
+    backdrop-filter: blur(10px);
+    position: relative;
+  }
+
+  .event-info::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--gradient-primary);
   }
 
   .event-info span {
-    color: var(--text);
+    color: var(--text-primary);
   }
 
   .now-queuing {
@@ -406,8 +523,112 @@
     font-weight: 500;
   }
 
+  .footer {
+    background: var(--surface);
+    border-top: 1px solid var(--surface-border);
+    padding: var(--spacing-xl) 0;
+    margin-top: var(--spacing-3xl);
+    position: relative;
+  }
+
+  .footer::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    opacity: 0.7;
+  }
+
   .footer .container {
     min-height: auto;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-lg);
+  }
+
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-lg);
+    text-align: center;
+  }
+
+  .footer-main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: center;
+  }
+
+  .footer-info {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .footer-hash {
+    color: var(--text-tertiary);
+    font-size: 0.8125rem;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  }
+
+  .footer-links {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-lg);
+    flex-wrap: wrap;
+  }
+
+  .footer-links a {
+    color: var(--primary);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
+    padding: var(--spacing-xs) var(--spacing-sm);
+    border-radius: var(--radius-sm);
+    position: relative;
+  }
+
+  .footer-links a:hover {
+    background: rgba(255, 107, 53, 0.1);
+    color: var(--primary-light);
+    transform: translateY(-1px);
+  }
+
+  .footer-links a:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 768px) {
+    .footer {
+      padding: var(--spacing-lg) 0;
+      margin-top: var(--spacing-xl);
+    }
+
+    .footer-main {
+      gap: var(--spacing-xs);
+    }
+
+    .footer-info {
+      font-size: 0.8125rem;
+    }
+
+    .footer-hash {
+      font-size: 0.75rem;
+    }
+
+    .footer-links {
+      gap: var(--spacing-md);
+    }
+
+    .footer-links a {
+      font-size: 0.8125rem;
+    }
   }
 
   @media (max-width: 768px) {
@@ -591,51 +812,72 @@
     }
   }
 
-  .content {
-    margin-bottom: 20px;
+  .match-group {
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+    border: 1px solid var(--surface-border);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    overflow: hidden;
   }
 
-  .match-group {
-    background-color: var(--bg-card);
-    border-radius: 12px;
-    padding: 15px;
-    margin-bottom: 20px;
-    border: 1px solid var(--border);
-    transition: all 0.2s ease;
+  .match-group::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--gradient-glow);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: -1;
   }
 
   .match-group:hover {
-    background-color: var(--bg-card-hover);
+    background: var(--surface-hover);
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary);
+  }
+
+  .match-group:hover::before {
+    opacity: 0.05;
   }
 
   .match-group-title {
     font-size: 1.3em;
     color: var(--primary);
-    margin-bottom: 15px;
+    margin-bottom: var(--spacing-lg);
     font-weight: 600;
-    border-bottom: 1px solid var(--border);
-    padding-bottom: 8px;
+    border-bottom: 1px solid var(--surface-border);
+    padding-bottom: var(--spacing-sm);
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
 
   .no-matches {
-    background-color: var(--bg-card);
-    border-radius: 12px;
-    padding: 30px;
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-2xl);
     text-align: center;
     color: var(--text-secondary);
     font-size: 1.1em;
-    border: 1px solid var(--border);
+    border: 1px solid var(--surface-border);
   }
 
   .error-message {
-    background-color: rgba(244, 67, 54, 0.2) !important;
-    color: #f44336 !important;
-    border: 1px solid #f44336;
-    padding: 15px !important;
-    margin: 15px 0 !important;
-    border-radius: 8px !important;
+    background: rgba(244, 67, 54, 0.2) !important;
+    color: var(--error) !important;
+    border: 1px solid var(--error);
+    padding: var(--spacing-lg) !important;
+    margin: var(--spacing-lg) 0 !important;
+    border-radius: var(--radius-md) !important;
     text-align: center !important;
+    backdrop-filter: blur(10px);
   }
 </style>

From 91e137ebd264de031bea9dcccc43388dea260d17 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Sun, 29 Jun 2025 14:05:01 -0400
Subject: [PATCH 02/26] Add notice management and user management pages with
 enhanced UI

- Implemented notice management page with form for creating, editing, and deleting notices.
- Added user management page for adding, suspending, and deleting admin users.
- Created a login page for admin access with GitHub authentication.
- Introduced a modal confirmation system for critical actions (deleting users, suspending access).
- Enhanced styling for better user experience across all admin pages.
- Added error handling and user feedback messages for various actions.
---
 .env.example                      |  13 +
 .gitignore                        |   3 +-
 GITHUB_OAUTH_SETUP.md             | 115 ++++++++
 package-lock.json                 | 153 +++++++++-
 package.json                      |   9 +-
 scripts/create-sample-notice.js   |  60 ++++
 src/server/helpers/api.js         |  28 +-
 src/server/helpers/auth.js        | 206 ++++++++++++++
 src/server/helpers/database.js    | 457 +++++++++++++++++++++++++++++-
 src/server/helpers/encryption.js  | 147 ++++++++++
 src/server/index.js               | 241 ++++++++++------
 src/server/routes/admin.js        | 290 +++++++++++++++++++
 src/server/routes/apex.js         |  11 +-
 src/server/routes/api.js          | 116 ++++++++
 src/server/routes/auth.js         | 103 +++++++
 test-db.js                        |   0
 views/dashboard/admin/index.ejs   | 185 ++++++++++++
 views/dashboard/admin/login.ejs   | 150 ++++++++++
 views/dashboard/admin/notices.ejs | 252 ++++++++++++++++
 views/dashboard/admin/users.ejs   | 386 +++++++++++++++++++++++++
 views/pages/home.ejs              |  25 +-
 views/pages/login.ejs             | 169 +++++++++++
 views/style/style-admin.ejs       | 341 ++++++++++++++++++++++
 views/style/style-home.ejs        |  47 ++-
 24 files changed, 3382 insertions(+), 125 deletions(-)
 create mode 100644 GITHUB_OAUTH_SETUP.md
 create mode 100644 scripts/create-sample-notice.js
 create mode 100644 src/server/helpers/auth.js
 create mode 100644 src/server/helpers/encryption.js
 create mode 100644 src/server/routes/admin.js
 create mode 100644 src/server/routes/auth.js
 create mode 100644 test-db.js
 create mode 100644 views/dashboard/admin/index.ejs
 create mode 100644 views/dashboard/admin/login.ejs
 create mode 100644 views/dashboard/admin/notices.ejs
 create mode 100644 views/dashboard/admin/users.ejs
 create mode 100644 views/pages/login.ejs
 create mode 100644 views/style/style-admin.ejs

diff --git a/.env.example b/.env.example
index 2409227..291e2b6 100644
--- a/.env.example
+++ b/.env.example
@@ -14,4 +14,17 @@ DB_USER=vorel
 DB_PASSWORD=your_secure_password_here
 DB_ROOT_PASSWORD=your_root_password_here
 
+# Authentication Configuration
+# GitHub OAuth App credentials (create at https://github.com/settings/applications/new)
+GITHUB_CLIENT_ID=your_github_client_id_here
+GITHUB_CLIENT_SECRET=your_github_client_secret_here
+GITHUB_CALLBACK_URL=http://localhost:3002/auth/github/callback
+
+# Session secret for secure cookie signing
+SESSION_SECRET=your_very_secure_random_session_secret_here
+
+# Authorized GitHub users (comma-separated usernames)
+# Leave empty to allow any GitHub user in development
+AUTHORIZED_GITHUB_USERS=yourusername,anotheradmin
+
 # Note: In production, make sure to use strong passwords and consider using Docker secrets
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 3a77eff..c266382 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .env
 node_modules
-.cache
\ No newline at end of file
+.cache
+.encryption-key.json
\ No newline at end of file
diff --git a/GITHUB_OAUTH_SETUP.md b/GITHUB_OAUTH_SETUP.md
new file mode 100644
index 0000000..baa3061
--- /dev/null
+++ b/GITHUB_OAUTH_SETUP.md
@@ -0,0 +1,115 @@
+# GitHub OAuth Setup Guide
+
+This guide will help you set up GitHub OAuth authentication for the Vorel admin panel.
+
+## 1. Create a GitHub OAuth App
+
+1. Go to [GitHub Developer Settings](https://github.com/settings/developers)
+2. Click "New OAuth App"
+3. Fill in the application details:
+   - **Application name**: `Vorel Admin` (or your preferred name)
+   - **Homepage URL**: `http://localhost:3002` (for development) or your production URL
+   - **Authorization callback URL**: `http://localhost:3002/auth/github/callback`
+4. Click "Register application"
+5. Copy the **Client ID** and **Client Secret**
+
+## 2. Configure Environment Variables
+
+Create a `.env` file in the root directory (copy from `.env.example`) and add:
+
+```bash
+# GitHub OAuth Configuration
+GITHUB_CLIENT_ID=your_client_id_here
+GITHUB_CLIENT_SECRET=your_client_secret_here
+GITHUB_CALLBACK_URL=http://localhost:3002/auth/github/callback
+
+# Session Secret (generate a secure random string)
+SESSION_SECRET=your_very_secure_random_session_secret_here
+
+# Authorized Users (comma-separated GitHub usernames)
+AUTHORIZED_GITHUB_USERS=yourusername,teammate1,teammate2
+```
+
+## 3. Generate a Secure Session Secret
+
+You can generate a secure session secret using Node.js:
+
+```bash
+node -e "console.log(require('crypto').randomBytes(64).toString('hex'))"
+```
+
+## 4. Set Authorized Users
+
+Add the GitHub usernames of people who should have admin access to the `AUTHORIZED_GITHUB_USERS` environment variable. Separate multiple usernames with commas.
+
+**Important**: If this variable is empty or not set, anyone with a GitHub account can access the admin panel (useful for development, but not recommended for production).
+
+## 5. Production Setup
+
+For production:
+
+1. Update the OAuth app settings in GitHub to use your production domain
+2. Set `NODE_ENV=production` in your environment
+3. Use a secure session secret
+4. Consider using environment variable management tools or secrets management
+5. Ensure HTTPS is enabled (required for secure cookies)
+
+## 6. Testing
+
+1. Start your server: `npm start`
+2. Visit `http://localhost:3002/admin/notices`
+3. You should be redirected to the login page
+4. Click "Sign in with GitHub"
+5. Authorize the application
+6. You should be redirected back to the admin panel
+
+## 7. Admin Panel Features
+
+Once authenticated, you can:
+
+- View all active notices
+- Create new notices with different types (info, warning, success, danger)
+- Edit existing notices
+- Set notice priorities and expiration dates
+- Deactivate or delete notices
+- View your login status and logout
+
+## 8. API Endpoints
+
+The following admin API endpoints now require authentication:
+
+- `POST /api/notices` - Create notice
+- `PUT /api/notices/:id` - Update notice
+- `DELETE /api/notices/:id` - Delete notice
+- `POST /api/notices/:id/deactivate` - Deactivate notice
+
+Public endpoints (no auth required):
+
+- `GET /api/notices` - Get active notices (used by home page)
+
+## 9. Troubleshooting
+
+**"Missing required environment variables for GitHub OAuth"**
+- Make sure you've set `GITHUB_CLIENT_ID` and `GITHUB_CLIENT_SECRET` in your `.env` file
+
+**"User not authorized"**
+- Check that your GitHub username is in the `AUTHORIZED_GITHUB_USERS` list
+- Usernames are case-insensitive but must match exactly
+
+**"Authentication failed"**
+- Verify your OAuth app settings in GitHub
+- Check that the callback URL matches exactly
+- Ensure your client ID and secret are correct
+
+**Session issues**
+- Clear your browser cookies
+- Check that `SESSION_SECRET` is set
+- Restart the server after changing environment variables
+
+## 10. Security Notes
+
+- Never commit your `.env` file to version control
+- Use strong, unique session secrets
+- Regularly review and update authorized users
+- Consider implementing additional security measures for production (rate limiting, etc.)
+- Monitor authentication logs for suspicious activity
diff --git a/package-lock.json b/package-lock.json
index 9c1fd95..b877c29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,16 @@
       "license": "GPL-3.0",
       "dependencies": {
         "axios": "^1.8.4",
+        "bcryptjs": "^3.0.2",
         "compression": "^1.8.0",
         "cors": "^2.8.5",
         "dotenv": "^16.4.7",
         "ejs": "^3.1.10",
         "express": "^4.21.2",
-        "mariadb": "^3.3.2"
+        "express-session": "^1.18.1",
+        "mariadb": "^3.3.2",
+        "passport": "^0.7.0",
+        "passport-github2": "^0.1.12"
       }
     },
     "node_modules/@types/geojson": {
@@ -105,6 +109,24 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64url": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-3.0.1.tgz",
+      "integrity": "sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/bcryptjs": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.2.tgz",
+      "integrity": "sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "bcrypt": "bin/bcrypt"
+      }
+    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -516,6 +538,40 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-session": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.18.1.tgz",
+      "integrity": "sha512-a5mtTqEaZvBCL9A9aqkrtfz+3SMDhOVUnjafjo+s7A9Txkq+SVX2DLvSp1Zrv4uCXa3lMSK3viWnh9Gg07PBUA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "0.7.2",
+        "cookie-signature": "1.0.7",
+        "debug": "2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.0.2",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/express-session/node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express-session/node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+      "license": "MIT"
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -923,6 +979,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/oauth": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.10.2.tgz",
+      "integrity": "sha512-JtFnB+8nxDEXgNyniwz573xxbKSOu3R8D40xQKqcjwJ2CDkYqUDI53o6IuzDJBx60Z8VKCm271+t8iFjakrl8Q==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -974,12 +1036,74 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/passport": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.7.0.tgz",
+      "integrity": "sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "passport-strategy": "1.x.x",
+        "pause": "0.0.1",
+        "utils-merge": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jaredhanson"
+      }
+    },
+    "node_modules/passport-github2": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/passport-github2/-/passport-github2-0.1.12.tgz",
+      "integrity": "sha512-3nPUCc7ttF/3HSP/k9sAXjz3SkGv5Nki84I05kSQPo01Jqq1NzJACgMblCK0fGcv9pKCG/KXU3AJRDGLqHLoIw==",
+      "dependencies": {
+        "passport-oauth2": "1.x.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/passport-oauth2": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/passport-oauth2/-/passport-oauth2-1.8.0.tgz",
+      "integrity": "sha512-cjsQbOrXIDE4P8nNb3FQRCCmJJ/utnFKEz2NX209f7KOHPoX18gF7gBzBbLLsj2/je4KrgiwLLGjf0lm9rtTBA==",
+      "license": "MIT",
+      "dependencies": {
+        "base64url": "3.x.x",
+        "oauth": "0.10.x",
+        "passport-strategy": "1.x.x",
+        "uid2": "0.0.x",
+        "utils-merge": "1.x.x"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jaredhanson"
+      }
+    },
+    "node_modules/passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
+    "node_modules/pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1014,6 +1138,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -1239,6 +1372,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "license": "MIT",
+      "dependencies": {
+        "random-bytes": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/uid2": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.4.tgz",
+      "integrity": "sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==",
+      "license": "MIT"
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
diff --git a/package.json b/package.json
index 0e5acad..0dc7fab 100644
--- a/package.json
+++ b/package.json
@@ -3,18 +3,23 @@
   "version": "1.0.0",
   "description": "A web service for FRC teams that integrates with The Blue Alliance API and FRC Nexus API to track match schedules, alliance partnerships, team performance, and event rankings. Easily embeddable for team websites and competition displays.",
   "main": "src/server/index.js",
-  "homepage": "https://vorel.app",  "scripts": {
+  "homepage": "https://vorel.app",
+  "scripts": {
     "start": "node src/server/index.js",
     "test": "echo \"No tests specified\" && exit 0"
   },
   "dependencies": {
     "axios": "^1.8.4",
+    "bcryptjs": "^3.0.2",
     "compression": "^1.8.0",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "ejs": "^3.1.10",
     "express": "^4.21.2",
-    "mariadb": "^3.3.2"
+    "express-session": "^1.18.1",
+    "mariadb": "^3.3.2",
+    "passport": "^0.7.0",
+    "passport-github2": "^0.1.12"
   },
   "keywords": [
     "frc",
diff --git a/scripts/create-sample-notice.js b/scripts/create-sample-notice.js
new file mode 100644
index 0000000..1594f97
--- /dev/null
+++ b/scripts/create-sample-notice.js
@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/**
+ * Script to create a sample notice in the database
+ * This is a one-time script to test the notice functionality
+ */
+
+require('dotenv').config();
+const { createNotice, initializeDB } = require('../src/server/helpers/database');
+
+async function createSampleNotice() {
+  console.log('Initializing database connection...');
+  
+  const dbInitialized = await initializeDB();
+  if (!dbInitialized) {
+    console.error('Failed to initialize database connection');
+    process.exit(1);
+  }
+
+  console.log('Creating sample notice...');
+  
+  try {
+    const noticeData = {
+      title: '🚀 API Update',
+      content: 'Vorel has received an API update to improve the live event data. If you encounter any issues while using the app, please report them to our <a href="https://github.com/1334Robotics/vorel-app/issues" target="_blank" rel="noopener">GitHub Issues</a> page.',
+      type: 'info',
+      is_active: true,
+      priority: 10
+    };
+
+    const noticeId = await createNotice(noticeData);
+    console.log(`✅ Successfully created notice with ID: ${noticeId}`);
+    
+    // Create another sample notice
+    const noticeData2 = {
+      title: '⚠️ Maintenance Notice',
+      content: 'The site will undergo maintenance from 2:00 AM to 4:00 AM EST tomorrow. Some features may be temporarily unavailable.',
+      type: 'warning',
+      is_active: true,
+      priority: 5,
+      expires_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // Expires in 7 days
+    };
+
+    const noticeId2 = await createNotice(noticeData2);
+    console.log(`✅ Successfully created notice with ID: ${noticeId2}`);
+    
+  } catch (error) {
+    console.error('❌ Error creating sample notice:', error.message);
+    process.exit(1);
+  }
+
+  console.log('✅ Sample notices created successfully!');
+  process.exit(0);
+}
+
+// Run the script
+createSampleNotice().catch(error => {
+  console.error('❌ Script failed:', error);
+  process.exit(1);
+});
diff --git a/src/server/helpers/api.js b/src/server/helpers/api.js
index 659f41a..a9ade6b 100644
--- a/src/server/helpers/api.js
+++ b/src/server/helpers/api.js
@@ -464,18 +464,26 @@ function initializeEventCache() {
 }
 
 // Replace the initializeEventCache function with enhanced version
-function initializeEventCacheEnhanced() {  // Initialize database first
-  initializeDB().then(() => {
-    console.log('Database initialized, starting cache management...');
-    // Initial cache management (which now also populates database)
-    manageEventCache();
-    
-    // Set up hourly checks
-    setInterval(() => {
+function initializeEventCacheEnhanced() {
+  // Initialize database first
+  initializeDB().then((dbConnected) => {
+    if (dbConnected) {
+      console.log('Database initialized, starting cache management...');
+      // Initial cache management (which now also populates database)
       manageEventCache();
-    }, 60 * 60 * 1000); // Check every hour
+      
+      // Set up hourly checks
+      setInterval(() => {
+        manageEventCache();
+      }, 60 * 60 * 1000); // Check every hour
+    } else {
+      console.log('Database initialization failed, using cache-only mode');
+      // Fall back to original cache system
+      initializeEventCache();
+    }
   }).catch(err => {
-    console.error('Database initialization failed, using cache-only mode:', err.message);
+    console.error('Database initialization error:', err.message);
+    console.log('Falling back to cache-only mode');
     // Fall back to original cache system
     initializeEventCache();
   });
diff --git a/src/server/helpers/auth.js b/src/server/helpers/auth.js
new file mode 100644
index 0000000..7892471
--- /dev/null
+++ b/src/server/helpers/auth.js
@@ -0,0 +1,206 @@
+const passport = require('passport');
+const GitHubStrategy = require('passport-github2').Strategy;
+const { isAuthorizedAdmin, initializeAdminUsers } = require('./database');
+
+// Admin cache to reduce database queries
+let adminCache = {
+  users: new Set(),
+  lastUpdated: 0,
+  cacheTimeout: 5 * 60 * 1000, // 5 minutes
+  databaseMode: null, // null = unknown, true = database available, false = env only
+  databaseChecked: false
+};
+
+// Check if database is available for admin management
+async function checkDatabaseMode() {
+  if (adminCache.databaseChecked) {
+    return adminCache.databaseMode;
+  }
+  
+  try {
+    const { pool } = require('./database');
+    if (!pool) {
+      adminCache.databaseMode = false;
+      adminCache.databaseChecked = true;
+      return false;
+    }
+    
+    // Test database connection without creating a new one
+    const connection = await pool.getConnection();
+    const result = await connection.query('SELECT COUNT(*) as count FROM admin_users');
+    connection.release();
+    
+    adminCache.databaseMode = true;
+    adminCache.databaseChecked = true;
+    console.log('Database mode enabled for admin management');
+    return true;
+  } catch (error) {
+    adminCache.databaseMode = false;
+    adminCache.databaseChecked = true;
+    console.log('Database mode disabled, using environment variables');
+    return false;
+  }
+}
+
+// Update admin cache from database or environment
+async function updateAdminCache() {
+  try {
+    const isDatabaseMode = await checkDatabaseMode();
+    
+    if (isDatabaseMode) {
+      // Get admin users directly from database without extra connection
+      const { pool } = require('./database');
+      const connection = await pool.getConnection();
+      const adminUsers = await connection.query('SELECT * FROM admin_users WHERE is_active = 1');
+      connection.release();
+      
+      adminCache.users.clear();
+      adminUsers.forEach(admin => {
+        adminCache.users.add(admin.github_username.toLowerCase());
+      });
+    } else {
+      // Use environment variables
+      const envAdmins = process.env.ADMIN_GITHUB_USERS ? process.env.ADMIN_GITHUB_USERS.split(',') : [];
+      adminCache.users.clear();
+      envAdmins.forEach(username => {
+        adminCache.users.add(username.trim().toLowerCase());
+      });
+    }
+    
+    adminCache.lastUpdated = Date.now();
+    console.log(`Admin cache updated: ${adminCache.users.size} users, database mode: ${adminCache.databaseMode}`);
+  } catch (error) {
+    console.error('Error updating admin cache:', error);
+    // Fall back to environment variables on error
+    adminCache.databaseMode = false;
+    const envAdmins = process.env.ADMIN_GITHUB_USERS ? process.env.ADMIN_GITHUB_USERS.split(',') : [];
+    adminCache.users.clear();
+    envAdmins.forEach(username => {
+      adminCache.users.add(username.trim().toLowerCase());
+    });
+    adminCache.lastUpdated = Date.now();
+  }
+}
+
+// Check if admin cache needs refreshing
+function isAdminCacheStale() {
+  return (Date.now() - adminCache.lastUpdated) > adminCache.cacheTimeout;
+}
+
+// Fast admin authorization check using cache
+async function isAdminAuthorized(username) {
+  if (isAdminCacheStale()) {
+    await updateAdminCache();
+  }
+  
+  return adminCache.users.has(username.toLowerCase());
+}
+
+// Reset database mode check (called when admin users are modified)
+function resetDatabaseModeCheck() {
+  adminCache.databaseChecked = false;
+  adminCache.databaseMode = null;
+}
+
+// Configure GitHub OAuth strategy
+function initializeAuth() {
+  passport.use(new GitHubStrategy({
+    clientID: process.env.GITHUB_CLIENT_ID,
+    clientSecret: process.env.GITHUB_CLIENT_SECRET,
+    callbackURL: process.env.GITHUB_CALLBACK_URL || "http://localhost:3002/auth/github/callback"
+  },
+  async (accessToken, refreshToken, profile, done) => {
+    try {
+      // Check if user is authorized using database-based admin management
+      const isAuthorized = await isAdminAuthorized(profile.username);
+      
+      if (!isAuthorized) {
+        console.log(`Access denied for ${profile.username} - not an authorized admin`);
+        return done(null, false, { message: 'User not authorized' });
+      }
+      
+      // Create user object with relevant information
+      const user = {
+        id: profile.id,
+        username: profile.username,
+        displayName: profile.displayName,
+        email: profile.emails?.[0]?.value || null,
+        avatarUrl: profile.photos?.[0]?.value || null,
+        profileUrl: profile.profileUrl,
+        accessToken: accessToken
+      };
+      
+      console.log(`Admin authenticated: ${user.username} (${user.displayName})`);
+      return done(null, user);
+    } catch (error) {
+      console.error('Authentication error:', error);
+      return done(error, null);
+    }
+  }));
+
+  // Serialize user for session
+  passport.serializeUser((user, done) => {
+    done(null, {
+      id: user.id,
+      username: user.username,
+      displayName: user.displayName,
+      email: user.email,
+      avatarUrl: user.avatarUrl
+    });
+  });
+
+  // Deserialize user from session
+  passport.deserializeUser((user, done) => {
+    done(null, user);
+  });
+}
+
+// Middleware to check if user is authenticated
+function requireAuth(req, res, next) {
+  if (req.isAuthenticated()) {
+    return next();
+  }
+  
+  // Store the original URL they were trying to access
+  req.session.returnTo = req.originalUrl;
+  res.redirect('/auth/login');
+}
+
+// Middleware to check if user is authenticated (API version)
+function requireAuthAPI(req, res, next) {
+  if (req.isAuthenticated()) {
+    return next();
+  }
+  
+  res.status(401).json({ 
+    error: 'Authentication required',
+    loginUrl: '/auth/login'
+  });
+}
+
+// Check if authentication is properly configured
+function checkAuthConfig() {
+  const required = ['GITHUB_CLIENT_ID', 'GITHUB_CLIENT_SECRET'];
+  const missing = required.filter(key => !process.env[key]);
+  
+  if (missing.length > 0) {
+    console.error('Missing required environment variables for GitHub OAuth:');
+    missing.forEach(key => console.error(`   - ${key}`));
+    console.error('   Please set these in your .env file or environment');
+    return false;
+  }
+  
+  console.log('GitHub OAuth configuration found');
+  return true;
+}
+
+module.exports = {
+  initializeAuth,
+  requireAuth,
+  requireAuthAPI,
+  checkAuthConfig,
+  passport,
+  updateAdminCache,
+  isAdminAuthorized,
+  resetDatabaseModeCheck
+};
diff --git a/src/server/helpers/database.js b/src/server/helpers/database.js
index 2c51406..1b2015b 100644
--- a/src/server/helpers/database.js
+++ b/src/server/helpers/database.js
@@ -25,6 +25,7 @@ async function testConnection() {
     return true;
   } catch (err) {
     console.error('MariaDB connection failed:', err.message);
+    console.log('Application will continue without database functionality');
     return false;
   } finally {
     if (conn) conn.release();
@@ -252,11 +253,23 @@ async function initializeDB() {
   const connected = await testConnection();
   
   if (connected) {
-    console.log('Creating database schema if not exists...');
-    await createSchema();
-    
-    const stats = await getDBStats();
-    console.log(`Database stats: ${stats.total_events} events across ${stats.years_count} years`);
+    try {
+      console.log('Creating database schema if not exists...');
+      await createSchema();
+      
+      // Initialize admin users after schema is created
+      await initializeAdminUsers();
+      
+      const stats = await getDBStats();
+      console.log(`Database stats: ${stats.total_events} events across ${stats.years_count} years`);
+      console.log('Database initialized successfully');
+    } catch (error) {
+      console.error('Database schema creation failed:', error.message);
+      console.log('Database will operate in limited mode');
+      return false;
+    }
+  } else {
+    console.log('Database unavailable - application will run without database features');
   }
   
   return connected;
@@ -353,6 +366,56 @@ async function createSchema() {
       ORDER BY year DESC, start_date
     `);
     
+    console.log('Creating notices table...');
+    
+    // Create notices table for managing site-wide notices
+    await conn.query(`
+      CREATE TABLE IF NOT EXISTS notices (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        title VARCHAR(255) NOT NULL,
+        content TEXT NOT NULL,
+        type ENUM('info', 'warning', 'success', 'danger') DEFAULT 'info',
+        is_active BOOLEAN DEFAULT true,
+        priority INT DEFAULT 0,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        starts_at TIMESTAMP NULL,
+        expires_at TIMESTAMP NULL,
+        
+        -- Indexes for fast querying
+        INDEX idx_active (is_active),
+        INDEX idx_priority (priority),
+        INDEX idx_date_range (starts_at, expires_at),
+        INDEX idx_active_priority (is_active, priority DESC)
+      )
+    `);
+
+    console.log('Creating admin users table...');
+    
+    // Create admin users table for managing authorized administrators
+    await conn.query(`
+      CREATE TABLE IF NOT EXISTS admin_users (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        github_username VARCHAR(255) NOT NULL UNIQUE,
+        github_id VARCHAR(20) UNIQUE,
+        role ENUM('admin', 'moderator') DEFAULT 'admin',
+        is_active BOOLEAN DEFAULT true,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+        INDEX idx_username (github_username),
+        INDEX idx_active (is_active),
+        INDEX idx_role (role)
+      )
+    `);
+    
+    // Migrate existing table to allow null github_id
+    try {
+      await conn.query('ALTER TABLE admin_users MODIFY github_id VARCHAR(20) UNIQUE');
+      console.log('Admin users table schema updated to allow null github_id');
+    } catch (err) {
+      // Column might already be nullable, ignore error
+    }
+    
     console.log('Database schema created successfully!');
     
   } catch (err) {
@@ -569,6 +632,136 @@ async function clearOldTeamCaches(hoursOld = 24) {
   }
 }
 
+// Notice Management Functions
+
+// Get active notices for display
+async function getActiveNotices() {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const currentTime = new Date();
+    
+    const sql = `
+      SELECT id, title, content, type, priority, created_at, starts_at, expires_at
+      FROM notices 
+      WHERE is_active = true
+        AND (starts_at IS NULL OR starts_at <= ?)
+        AND (expires_at IS NULL OR expires_at >= ?)
+      ORDER BY priority DESC, created_at DESC
+    `;
+    
+    const notices = await conn.query(sql, [currentTime, currentTime]);
+    return notices;
+    
+  } catch (err) {
+    console.error('Error getting active notices:', err.message);
+    return [];
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Create a new notice
+async function createNotice(noticeData) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const sql = `
+      INSERT INTO notices (title, content, type, is_active, priority, starts_at, expires_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?)
+    `;
+    
+    const params = [
+      noticeData.title,
+      noticeData.content,
+      noticeData.type || 'info',
+      noticeData.is_active !== undefined ? noticeData.is_active : true,
+      noticeData.priority || 0,
+      noticeData.starts_at || null,
+      noticeData.expires_at || null
+    ];
+    
+    const result = await conn.query(sql, params);
+    return result.insertId;
+    
+  } catch (err) {
+    console.error('Error creating notice:', err.message);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Update an existing notice
+async function updateNotice(id, noticeData) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const sql = `
+      UPDATE notices 
+      SET title = ?, content = ?, type = ?, is_active = ?, priority = ?, starts_at = ?, expires_at = ?
+      WHERE id = ?
+    `;
+    
+    const params = [
+      noticeData.title,
+      noticeData.content,
+      noticeData.type || 'info',
+      noticeData.is_active !== undefined ? noticeData.is_active : true,
+      noticeData.priority || 0,
+      noticeData.starts_at || null,
+      noticeData.expires_at || null,
+      id
+    ];
+    
+    const result = await conn.query(sql, params);
+    return result.affectedRows > 0;
+    
+  } catch (err) {
+    console.error('Error updating notice:', err.message);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Delete a notice
+async function deleteNotice(id) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query('DELETE FROM notices WHERE id = ?', [id]);
+    return result.affectedRows > 0;
+    
+  } catch (err) {
+    console.error('Error deleting notice:', err.message);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Deactivate a notice (soft delete)
+async function deactivateNotice(id) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query('UPDATE notices SET is_active = false WHERE id = ?', [id]);
+    return result.affectedRows > 0;
+    
+  } catch (err) {
+    console.error('Error deactivating notice:', err.message);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
 // Graceful shutdown
 async function closeDB() {
   try {
@@ -581,6 +774,241 @@ async function closeDB() {
 
 // Note: Shutdown handlers are now managed by the main server file
 
+// Helper function to check if a user is defined in environment variables
+function isEnvironmentUser(githubUsername) {
+  const envUsers = (process.env.AUTHORIZED_GITHUB_USERS || '').split(',').map(u => u.trim().toLowerCase()).filter(u => u);
+  return envUsers.includes(githubUsername.toLowerCase());
+}
+
+// Helper function to get all environment usernames
+function getEnvironmentUsers() {
+  return (process.env.AUTHORIZED_GITHUB_USERS || '').split(',').map(u => u.trim().toLowerCase()).filter(u => u);
+}
+
+// Admin User Management Functions
+
+// Check if a GitHub user is an authorized admin
+async function isAuthorizedAdmin(githubUsername, githubId) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(
+      'SELECT * FROM admin_users WHERE (github_username = ? OR github_id = ?) AND is_active = true',
+      [githubUsername.toLowerCase(), githubId]
+    );
+    
+    return result.length > 0 ? result[0] : null;
+  } catch (err) {
+    console.error('Error checking admin authorization:', err);
+    return null;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Add or update an admin user
+async function upsertAdminUser(userData) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(`
+      INSERT INTO admin_users (github_username, github_id, display_name, email, avatar_url, last_login)
+      VALUES (?, ?, ?, ?, ?, CURRENT_TIMESTAMP)
+      ON DUPLICATE KEY UPDATE
+        display_name = VALUES(display_name),
+        email = VALUES(email),
+        avatar_url = VALUES(avatar_url),
+        last_login = CURRENT_TIMESTAMP,
+        updated_at = CURRENT_TIMESTAMP
+    `, [
+      userData.username.toLowerCase(),
+      userData.id,
+      userData.displayName,
+      userData.email,
+      userData.avatarUrl
+    ]);
+    
+    // Refresh admin cache after database change
+    refreshAdminCache();
+    
+    return result.affectedRows > 0;
+  } catch (err) {
+    console.error('Error upserting admin user:', err);
+    return false;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Add or update admin user for management purposes
+async function addAdminUser(githubUsername, githubId, role = 'admin', isActive = true) {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(`
+      INSERT INTO admin_users (github_username, github_id, role, is_active)
+      VALUES (?, ?, ?, ?)
+      ON DUPLICATE KEY UPDATE
+        role = VALUES(role),
+        is_active = VALUES(is_active),
+        updated_at = CURRENT_TIMESTAMP
+    `, [
+      githubUsername.toLowerCase(),
+      githubId,
+      role,
+      isActive
+    ]);
+    
+    // Refresh admin cache after database change
+    refreshAdminCache();
+    
+    return result.affectedRows > 0;
+  } catch (err) {
+    console.error('Error adding admin user:', err);
+    return false;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Remove admin user with environment protection
+async function removeAdminUser(githubUsername) {
+  // Protect environment users from removal
+  if (isEnvironmentUser(githubUsername)) {
+    throw new Error('Cannot remove environment-defined admin users');
+  }
+  
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(
+      'DELETE FROM admin_users WHERE github_username = ?',
+      [githubUsername.toLowerCase()]
+    );
+    
+    // Refresh admin cache after database change
+    refreshAdminCache();
+    
+    return result.affectedRows > 0;
+  } catch (err) {
+    console.error('Error removing admin user:', err);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Toggle admin user active status with environment protection
+async function toggleAdminUser(githubUsername, isActive) {
+  // Protect environment users from being deactivated
+  if (isEnvironmentUser(githubUsername) && !isActive) {
+    throw new Error('Cannot deactivate environment-defined admin users');
+  }
+  
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(
+      'UPDATE admin_users SET is_active = ?, updated_at = CURRENT_TIMESTAMP WHERE github_username = ?',
+      [isActive, githubUsername.toLowerCase()]
+    );
+    
+    // Refresh admin cache after database change
+    refreshAdminCache();
+    
+    return result.affectedRows > 0;
+  } catch (err) {
+    console.error('Error toggling admin user:', err);
+    throw err;
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Initialize admin users from environment variables
+async function initializeAdminUsers() {
+  const envUsers = (process.env.AUTHORIZED_GITHUB_USERS || '').split(',').map(u => u.trim()).filter(u => u);
+  
+  if (envUsers.length === 0) {
+    console.log('No admin users specified in environment variables');
+    return;
+  }
+  
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    for (const username of envUsers) {
+      await conn.query(`
+        INSERT IGNORE INTO admin_users (github_username, github_id, role, is_active)
+        VALUES (?, ?, 'admin', true)
+      `, [username.toLowerCase(), 'env_' + username.toLowerCase()]);
+    }
+    
+    console.log(`Initialized ${envUsers.length} admin users from environment variables`);
+  } catch (err) {
+    console.error('Error initializing admin users:', err);
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+// Function to refresh admin cache after database changes
+function refreshAdminCache() {
+  try {
+    const { updateAdminCache, resetDatabaseModeCheck } = require('./auth');
+    resetDatabaseModeCheck(); // Reset database mode check to re-detect
+    updateAdminCache().catch(error => {
+      console.error('Failed to refresh admin cache:', error);
+    });
+  } catch (error) {
+    // Auth module may not be available during initialization
+  }
+}
+
+// Get all admin users
+async function getAllAdminUsers() {
+  let conn;
+  try {
+    conn = await pool.getConnection();
+    
+    const result = await conn.query(
+      'SELECT github_username, display_name, email, role, is_active, created_at, last_login FROM admin_users ORDER BY created_at ASC'
+    );
+    
+    return result;
+  } catch (err) {
+    console.error('Error getting admin users:', err);
+    return [];
+  } finally {
+    if (conn) conn.release();
+  }
+}
+
+async function getAllAdminUsers() {
+  if (!pool) {
+    console.log('Database not available, using environment admin list');
+    const envAdmins = process.env.ADMIN_GITHUB_USERS ? process.env.ADMIN_GITHUB_USERS.split(',') : [];
+    return envAdmins.map(username => ({ github_username: username, role: 'admin', source: 'env' }));
+  }
+
+  try {
+    const connection = await pool.getConnection();
+    const query = 'SELECT * FROM admin_users WHERE is_active = 1 ORDER BY role, github_username';
+    const rows = await connection.query(query);
+    connection.release();
+    return rows;
+  } catch (error) {
+    console.error('Error fetching admin users:', error);
+    return [];
+  }
+}
+
 module.exports = {
   pool,
   testConnection,
@@ -595,5 +1023,22 @@ module.exports = {
   cacheTeamEventsDB,
   getTeamEventsDB,
   clearAllTeamCaches,
-  clearOldTeamCaches
+  clearOldTeamCaches,
+  // Notice functions
+  getActiveNotices,
+  createNotice,
+  updateNotice,
+  deleteNotice,
+  deactivateNotice,
+  // Admin user functions
+  isAuthorizedAdmin,
+  upsertAdminUser,
+  addAdminUser,
+  removeAdminUser,
+  toggleAdminUser,
+  initializeAdminUsers,
+  getAllAdminUsers,
+  refreshAdminCache,
+  isEnvironmentUser,
+  getEnvironmentUsers
 };
diff --git a/src/server/helpers/encryption.js b/src/server/helpers/encryption.js
new file mode 100644
index 0000000..0e1a117
--- /dev/null
+++ b/src/server/helpers/encryption.js
@@ -0,0 +1,147 @@
+const crypto = require('crypto');
+const fs = require('fs').promises;
+const path = require('path');
+
+// Configuration
+const KEY_ROTATION_INTERVAL = 48 * 60 * 60 * 1000; // 48 hours in milliseconds
+const KEY_FILE_PATH = path.join(__dirname, '..', '..', '..', '.encryption-key.json');
+
+// Generate a new encryption key
+function generateEncryptionKey() {
+  return crypto.randomBytes(32).toString('hex'); // 256-bit key
+}
+
+// Get or create encryption key data
+async function getEncryptionKeyData() {
+  try {
+    const data = await fs.readFile(KEY_FILE_PATH, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    // File doesn't exist or is corrupted, create new key data
+    const keyData = {
+      key: generateEncryptionKey(),
+      createdAt: Date.now(),
+      lastRotated: Date.now(),
+      rotationInterval: KEY_ROTATION_INTERVAL
+    };
+    
+    await saveEncryptionKeyData(keyData);
+    console.log('New encryption key generated and saved');
+    return keyData;
+  }
+}
+
+// Save encryption key data
+async function saveEncryptionKeyData(keyData) {
+  try {
+    await fs.writeFile(KEY_FILE_PATH, JSON.stringify(keyData, null, 2), 'utf8');
+  } catch (error) {
+    console.error('Failed to save encryption key data:', error.message);
+    throw error;
+  }
+}
+
+// Check if key needs rotation and rotate if necessary
+async function checkAndRotateKey() {
+  try {
+    const keyData = await getEncryptionKeyData();
+    const now = Date.now();
+    const timeSinceLastRotation = now - keyData.lastRotated;
+    
+    if (timeSinceLastRotation >= KEY_ROTATION_INTERVAL) {
+      console.log('Encryption key rotation due - generating new key');
+      
+      keyData.key = generateEncryptionKey();
+      keyData.lastRotated = now;
+      
+      await saveEncryptionKeyData(keyData);
+      console.log('Encryption key rotated successfully');
+      
+      return keyData.key;
+    } else {
+      const hoursUntilRotation = Math.ceil((KEY_ROTATION_INTERVAL - timeSinceLastRotation) / (60 * 60 * 1000));
+      console.log(`Encryption key is current - next rotation in ${hoursUntilRotation} hours`);
+      return keyData.key;
+    }
+  } catch (error) {
+    console.error('Error during key rotation check:', error.message);
+    // Fall back to generating a new key
+    const newKey = generateEncryptionKey();
+    console.log('Using fallback encryption key');
+    return newKey;
+  }
+}
+
+// Get current encryption key (with automatic rotation check)
+async function getCurrentEncryptionKey() {
+  return await checkAndRotateKey();
+}
+
+// Initialize encryption system
+async function initializeEncryption() {
+  try {
+    const key = await getCurrentEncryptionKey();
+    console.log('Encryption system initialized');
+    
+    // Set up periodic key rotation checks
+    setInterval(async () => {
+      await checkAndRotateKey();
+    }, 60 * 60 * 1000); // Check every hour
+    
+    return key;
+  } catch (error) {
+    console.error('Failed to initialize encryption system:', error.message);
+    return generateEncryptionKey(); // Fallback
+  }
+}
+
+// Get key status for monitoring
+async function getKeyStatus() {
+  try {
+    const keyData = await getEncryptionKeyData();
+    const now = Date.now();
+    const timeSinceLastRotation = now - keyData.lastRotated;
+    const timeUntilNextRotation = KEY_ROTATION_INTERVAL - timeSinceLastRotation;
+    
+    return {
+      createdAt: new Date(keyData.createdAt).toISOString(),
+      lastRotated: new Date(keyData.lastRotated).toISOString(),
+      hoursUntilNextRotation: Math.ceil(timeUntilNextRotation / (60 * 60 * 1000)),
+      rotationIntervalHours: KEY_ROTATION_INTERVAL / (60 * 60 * 1000)
+    };
+  } catch (error) {
+    return {
+      error: 'Unable to get key status',
+      message: error.message
+    };
+  }
+}
+
+// Get the next key rotation time (for setting session expiry)
+function getNextRotationTime() {
+  const keyData = getEncryptionKeyDataSync();
+  if (!keyData) {
+    return new Date(Date.now() + KEY_ROTATION_INTERVAL);
+  }
+  return new Date(keyData.lastRotated + KEY_ROTATION_INTERVAL);
+}
+
+// Synchronous version of getEncryptionKeyData for session configuration
+function getEncryptionKeyDataSync() {
+  try {
+    const fs = require('fs');
+    const data = fs.readFileSync(KEY_FILE_PATH, 'utf8');
+    return JSON.parse(data);
+  } catch (error) {
+    return null;
+  }
+}
+
+module.exports = {
+  initializeEncryption,
+  getCurrentEncryptionKey,
+  getKeyStatus,
+  generateEncryptionKey,
+  getNextRotationTime,
+  KEY_ROTATION_INTERVAL
+};
diff --git a/src/server/index.js b/src/server/index.js
index 3b07ea9..44c5434 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -3,6 +3,7 @@ const cors = require("cors");
 const compression = require("compression");
 const path = require("path");
 const fs = require("fs");
+const session = require("express-session");
 require("dotenv").config();
 
 console.log(`Vorel Copyright (C) 2025 1334Robotics
@@ -12,113 +13,185 @@ under certain conditions. TO VIEW THE LICENSE VISIT OUR [GITHUB](https://github.
 `);
 
 // Initialize database connection
-const { initializeDB } = require("./helpers/database");
+const { initializeDB, initializeAdminUsers } = require("./helpers/database");
 const { initializeChangelog } = require("./helpers/changelog");
+const { initializeAuth, checkAuthConfig, passport, updateAdminCache } = require("./helpers/auth");
+const { initializeEncryption, getNextRotationTime, KEY_ROTATION_INTERVAL } = require("./helpers/encryption");
 
 const app = express();
 const Routes = require("./routes/apex");
 const apiRoutes = require("./routes/api");
 const embedRoutes = require("./routes/embed");
+const authRoutes = require("./routes/auth");
+const adminRoutes = require("./routes/admin");
 const { initializeEventCacheEnhanced } = require("./helpers/api");
 
 // Middleware
 app.use(compression());
 app.use(cors());
 app.use(express.json());
-// Security headers
-app.use((req, res, next) => {
-  // HTTP Strict-Transport-Security
-  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
-  // X-Content-Type-Options
-  res.setHeader('X-Content-Type-Options', 'nosniff');
-  next();
-});
-// Strip HTML comments from rendered views
-app.use((req, res, next) => {
-  const originalRender = res.render;
-  res.render = function(view, options, callback) {
-    if (typeof options === 'function') {
-      callback = options;
-      options = {};
+app.use(express.urlencoded({ extended: true }));
+
+// Initialize encryption and start server
+async function startServer() {
+  // Initialize encryption system
+  const encryptionKey = await initializeEncryption();
+  
+  // Session configuration with dynamic encryption key and secure settings
+  const nextRotationTime = getNextRotationTime();
+  const timeUntilRotation = nextRotationTime.getTime() - Date.now();
+  const sessionMaxAge = Math.min(KEY_ROTATION_INTERVAL, Math.max(timeUntilRotation, 60 * 60 * 1000)); // Minimum 1 hour
+  
+  console.log(`Session max age set to: ${Math.floor(sessionMaxAge / 1000 / 60)} minutes`);
+  
+  app.use(session({
+    secret: encryptionKey,
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+      secure: process.env.NODE_ENV === 'production', // Use secure cookies in production
+      httpOnly: true,
+      maxAge: sessionMaxAge, // Expire with key rotation
+      sameSite: 'lax' // Allow OAuth redirects while maintaining security
+    },
+    name: 'vorel.sid' // Custom session name
+  }));
+
+  // Initialize Passport
+  app.use(passport.initialize());
+  app.use(passport.session());
+
+  // Security headers
+  app.use((req, res, next) => {
+    // HTTP Strict-Transport-Security
+    res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
+    // X-Content-Type-Options
+    res.setHeader('X-Content-Type-Options', 'nosniff');
+    // X-Frame-Options
+    res.setHeader('X-Frame-Options', 'DENY');
+    // X-XSS-Protection
+    res.setHeader('X-XSS-Protection', '1; mode=block');
+    // Referrer Policy
+    res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
+    // Content Security Policy for admin pages
+    if (req.path.startsWith('/admin')) {
+      res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self';");
     }
-    originalRender.call(this, view, options, (err, html) => {
-      if (err) {
-        if (callback) return callback(err);
-        return next(err);
-      }      // Remove HTML comments, CSS comment blocks, and JavaScript comments
-      let cleanedHtml = html
-        .replace(/<!--[\s\S]*?-->/g, '')
-        .replace(/\/\*[\s\S]*?\*\//g, '');
-      
-      // Remove JavaScript single-line comments only within script tags
-      cleanedHtml = cleanedHtml.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (match, scriptContent) => {
-        const cleanedScript = scriptContent.replace(/\/\/.*$/gm, '');
-        return match.replace(scriptContent, cleanedScript);
+    next();
+  });
+
+  // Strip HTML comments from rendered views
+  app.use((req, res, next) => {
+    const originalRender = res.render;
+    res.render = function(view, options, callback) {
+      if (typeof options === 'function') {
+        callback = options;
+        options = {};
+      }
+      originalRender.call(this, view, options, (err, html) => {
+        if (err) {
+          if (callback) return callback(err);
+          return next(err);
+        }
+        
+        // Remove HTML comments, CSS comment blocks, and JavaScript comments
+        let cleanedHtml = html
+          .replace(/<!--[\s\S]*?-->/g, '')
+          .replace(/\/\*[\s\S]*?\*\//g, '');
+        
+        // Remove JavaScript single-line comments only within script tags
+        cleanedHtml = cleanedHtml.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (match, scriptContent) => {
+          const cleanedScript = scriptContent.replace(/\/\/.*$/gm, '');
+          return match.replace(scriptContent, cleanedScript);
+        });
+        
+        if (callback) return callback(null, cleanedHtml);
+        res.send(cleanedHtml);
       });
-      if (callback) return callback(null, cleanedHtml);
-      res.send(cleanedHtml);
-    });
-  };
-  next();
-});
+    };
+    next();
+  });
+
+  // Set up EJS as the view engine
+  app.set("view engine", "ejs");
+  app.set("views", path.join(__dirname, "../../views"));
 
-// Set up EJS as the view engine
-app.set("view engine", "ejs");
-app.set("views", path.join(__dirname, "../../views"));
+  const staticOptions = {
+    maxAge: '7d',
+    immutable: false
+  };
+  app.use(express.static(path.join(__dirname, "../../views/public"), staticOptions));
 
-const staticOptions = {
-  maxAge: '7d',
-  immutable: false
-};
-app.use(express.static(path.join(__dirname, "../../views/public"), staticOptions));
+  // Serve favicon.ico using the icon.avif file
+  app.get("/favicon.ico", (req, res) => {
+    res.set('Cache-Control', 'public, max-age=604800');
+    res.sendFile(path.join(__dirname, "../../views/public/icon.avif"));
+  });
 
-// Serve favicon.ico using the icon.avif file
-app.get("/favicon.ico", (req, res) => {
-  res.set('Cache-Control', 'public, max-age=604800');
-  res.sendFile(path.join(__dirname, "../../views/public/icon.avif"));
-});
+  app.use("/", Routes);
+  app.use("/api", apiRoutes);
+  app.use("/embed", embedRoutes);
+  app.use("/auth", authRoutes);
+  app.use("/admin", adminRoutes);
 
-app.use("/", Routes);
-app.use("/api", apiRoutes);
-app.use("/embed", embedRoutes);
+  // Add 404 handler for all unmatched routes
+  app.use((req, res) => {
+    res.status(404).render("pages/404");
+  });
 
-// Add 404 handler for all unmatched routes
-app.use((req, res) => {
-  res.status(404).render("pages/404");
-});
+  const PORT = process.env.PORT || 3002;
 
-const PORT = process.env.PORT || 3002;
+  const server = app.listen(PORT, () => {
+    console.log(`Server running on port ${PORT}`);
+    
+    // Check authentication configuration
+    const authConfigured = checkAuthConfig();
+    if (authConfigured) {
+      initializeAuth();
+      console.log('Authentication system initialized');
+      
+      // Initialize admin cache
+      updateAdminCache().catch(error => {
+        console.error('Failed to initialize admin cache:', error);
+      });
+    } else {
+      console.log('Authentication system disabled - missing configuration');
+    }
+    
+    // Initialize event cache, database, and changelog after server starts
+    initializeEventCacheEnhanced();
+    initializeChangelog();
+  });
 
-const server = app.listen(PORT, () => {
-  console.log(`Server running on port ${PORT}`);
-  
-  // Initialize event cache, database, and changelog after server starts
-  initializeEventCacheEnhanced();
-  initializeChangelog();
-});
+  // Configure server timeouts for Cloudflare compatibility
+  server.timeout = 90000; // 90 seconds - under Cloudflare's 100-second timeout
+  server.keepAliveTimeout = 85000; // 85 seconds
+  server.headersTimeout = 86000; // 86 seconds (should be longer than keepAliveTimeout)
 
-// Configure server timeouts for Cloudflare compatibility
-server.timeout = 90000; // 90 seconds - under Cloudflare's 100-second timeout
-server.keepAliveTimeout = 85000; // 85 seconds
-server.headersTimeout = 86000; // 86 seconds (should be longer than keepAliveTimeout)
-
-// Graceful shutdown handling
-process.on('SIGINT', async () => {
-  console.log('Received SIGINT, shutting down gracefully...');
-  const { closeDB } = require('./helpers/database');
-  await closeDB();
-  server.close(() => {
-    console.log('Server closed');
-    process.exit(0);
+  // Graceful shutdown handling
+  process.on('SIGINT', async () => {
+    console.log('Received SIGINT, shutting down gracefully...');
+    const { closeDB } = require('./helpers/database');
+    await closeDB();
+    server.close(() => {
+      console.log('Server closed');
+      process.exit(0);
+    });
   });
-});
 
-process.on('SIGTERM', async () => {
-  console.log('Received SIGTERM, shutting down gracefully...');
-  const { closeDB } = require('./helpers/database');
-  await closeDB();
-  server.close(() => {
-    console.log('Server closed');
-    process.exit(0);
+  process.on('SIGTERM', async () => {
+    console.log('Received SIGTERM, shutting down gracefully...');
+    const { closeDB } = require('./helpers/database');
+    await closeDB();
+    server.close(() => {
+      console.log('Server closed');
+      process.exit(0);
+    });
   });
+}
+
+// Start the server
+startServer().catch(error => {
+  console.error('Failed to start server:', error);
+  process.exit(1);
 });
diff --git a/src/server/routes/admin.js b/src/server/routes/admin.js
new file mode 100644
index 0000000..3c5cd5a
--- /dev/null
+++ b/src/server/routes/admin.js
@@ -0,0 +1,290 @@
+const express = require('express');
+const router = express.Router();
+const { requireAuth } = require('../helpers/auth');
+const { getKeyStatus } = require('../helpers/encryption');
+const { pool } = require('../helpers/database');
+
+// Middleware to check if database mode is enabled
+function requireDatabaseMode(req, res, next) {
+  if (!pool) {
+    return res.status(503).json({
+      error: 'Database mode is not enabled',
+      message: 'User management requires database functionality'
+    });
+  }
+  next();
+}
+
+// Admin dashboard route (protected)
+router.get('/', requireAuth, (req, res) => {
+  res.render('dashboard/admin/index', {
+    user: req.user
+  });
+});
+
+// Notices management route (protected)
+router.get('/notices', requireAuth, (req, res) => {
+  res.render('dashboard/admin/notices', {
+    user: req.user
+  });
+});
+
+// User management route (protected, requires database mode)
+router.get('/users', requireAuth, requireDatabaseMode, (req, res) => {
+  res.render('dashboard/admin/users', {
+    user: req.user
+  });
+});
+
+// Get list of admin users (API endpoint)
+router.get('/users/list', requireAuth, requireDatabaseMode, async (req, res) => {
+  try {
+    const { getAllAdminUsers } = require('../helpers/database');
+    
+    // Get admin users from database
+    const dbUsers = await getAllAdminUsers();
+    
+    // Get environment users for protection
+    const envUsers = process.env.AUTHORIZED_GITHUB_USERS ? 
+      process.env.AUTHORIZED_GITHUB_USERS.split(',').map(u => u.trim().toLowerCase()) : [];
+    
+    // Mark environment users as protected
+    const users = dbUsers.map(user => ({
+      ...user,
+      source: envUsers.includes(user.github_username.toLowerCase()) ? 'env' : 'db'
+    }));
+    
+    res.json(users);
+  } catch (error) {
+    console.error('Error getting admin users:', error);
+    res.status(500).json({ error: 'Failed to get admin users' });
+  }
+});
+
+// Add new admin user (API endpoint)
+router.post('/users/add', requireAuth, requireDatabaseMode, async (req, res) => {
+  try {
+    const { github_username, role } = req.body;
+    
+    if (!github_username || !role) {
+      return res.status(400).json({ 
+        success: false, 
+        message: 'Username and role are required' 
+      });
+    }
+    
+    // Validate role
+    if (!['admin', 'moderator'].includes(role)) {
+      return res.status(400).json({ 
+        success: false, 
+        message: 'Invalid role. Must be admin or moderator' 
+      });
+    }
+    
+    // Validate username format
+    if (!/^[a-zA-Z0-9\-_]+$/.test(github_username)) {
+      return res.status(400).json({ 
+        success: false, 
+        message: 'Invalid username format' 
+      });
+    }
+    
+    const { addAdminUser } = require('../helpers/database');
+    const success = await addAdminUser(
+      github_username.trim(),
+      null, // Will be updated when user logs in
+      role,
+      true
+    );
+    
+    if (success) {
+      // Check if this is an HTML form submission or API call
+      if (req.headers.accept && req.headers.accept.includes('application/json')) {
+        res.json({ success: true, message: 'User added successfully' });
+      } else {
+        res.redirect('/admin/users?success=User added successfully');
+      }
+    } else {
+      if (req.headers.accept && req.headers.accept.includes('application/json')) {
+        res.status(500).json({ 
+          success: false, 
+          message: 'Failed to add user to database' 
+        });
+      } else {
+        res.redirect('/admin/users?error=Failed to add user to database');
+      }
+    }
+  } catch (error) {
+    console.error('Error adding admin user:', error);
+    res.status(500).json({ 
+      success: false, 
+      message: 'Internal server error' 
+    });
+  }
+});
+
+// Toggle user active status (API endpoint)
+router.post('/users/toggle', requireAuth, requireDatabaseMode, async (req, res) => {
+  try {
+    const { username, is_active } = req.body;
+    
+    if (!username || typeof is_active !== 'boolean') {
+      return res.status(400).json({ 
+        success: false, 
+        message: 'Username and active status are required' 
+      });
+    }
+    
+    // Prevent users from deactivating themselves
+    if (req.user && req.user.username && req.user.username.toLowerCase() === username.toLowerCase() && !is_active) {
+      return res.status(403).json({ 
+        success: false, 
+        message: 'Cannot deactivate your own account' 
+      });
+    }
+    
+    const { toggleAdminUser } = require('../helpers/database');
+    const success = await toggleAdminUser(username, is_active);
+    
+    if (success) {
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ 
+        success: false, 
+        message: 'User not found' 
+      });
+    }
+  } catch (error) {
+    console.error('Error toggling user status:', error);
+    
+    if (error.message.includes('environment-defined')) {
+      return res.status(403).json({ 
+        success: false, 
+        message: error.message 
+      });
+    }
+    
+    res.status(500).json({ 
+      success: false, 
+      message: 'Failed to update user status' 
+    });
+  }
+});
+
+// Remove admin user (API endpoint)
+router.post('/users/remove', requireAuth, requireDatabaseMode, async (req, res) => {
+  try {
+    const { username } = req.body;
+    
+    if (!username) {
+      return res.status(400).json({ 
+        success: false, 
+        message: 'Username is required' 
+      });
+    }
+    
+    // Prevent users from removing themselves
+    if (req.user && req.user.username && req.user.username.toLowerCase() === username.toLowerCase()) {
+      return res.status(403).json({ 
+        success: false, 
+        message: 'Cannot remove your own account' 
+      });
+    }
+    
+    const { removeAdminUser } = require('../helpers/database');
+    const success = await removeAdminUser(username);
+    
+    if (success) {
+      res.json({ success: true });
+    } else {
+      res.status(404).json({ 
+        success: false, 
+        message: 'User not found' 
+      });
+    }
+  } catch (error) {
+    console.error('Error removing user:', error);
+    
+    if (error.message.includes('environment-defined')) {
+      return res.status(403).json({ 
+        success: false, 
+        message: error.message 
+      });
+    }
+    
+    res.status(500).json({ 
+      success: false, 
+      message: 'Failed to remove user' 
+    });
+  }
+});
+
+// List all admin users (API endpoint)
+router.get('/system-status', requireAuth, async (req, res) => {
+  try {
+    const { getDBStats } = require('../helpers/database');
+    
+    // Check database status without creating new connections
+    // Just check if pool exists, don't test connection every time
+    let dbConnected = !!pool;
+    let dbStats = null;
+    
+    if (dbConnected) {
+      try {
+        const rawStats = await getDBStats();
+        // Convert BigInt values to regular numbers for JSON serialization
+        dbStats = {
+          total_events: Number(rawStats.total_events || 0),
+          years_count: Number(rawStats.years_count || 0)
+        };
+      } catch (error) {
+        console.error('Error getting database stats:', error);
+        // If we can't get stats, the database might be disconnected
+        dbConnected = false;
+      }
+    }
+    
+    // Get encryption key status
+    const encryptionStatus = await getKeyStatus();
+    
+    // Get server status
+    const serverStatus = {
+      uptime: process.uptime(),
+      memory: process.memoryUsage(),
+      nodeVersion: process.version,
+      timestamp: Date.now()
+    };
+    
+    const status = {
+      database: {
+        connected: dbConnected,
+        stats: dbStats
+      },
+      encryption: encryptionStatus,
+      server: serverStatus
+    };
+    
+    res.json(status);
+  } catch (error) {
+    console.error('Error getting system status:', error);
+    res.status(500).json({ 
+      error: 'Failed to get system status',
+      message: error.message 
+    });
+  }
+});
+
+// Future admin routes can be added here
+// router.get('/users', requireAuth, (req, res) => {
+//   res.render('dashboard/admin/users', {
+//     user: req.user
+//   });
+// });
+
+// router.get('/settings', requireAuth, (req, res) => {
+//   res.render('dashboard/admin/settings', {
+//     user: req.user
+//   });
+// });
+
+module.exports = router;
diff --git a/src/server/routes/apex.js b/src/server/routes/apex.js
index b6ed845..1f6b8f4 100644
--- a/src/server/routes/apex.js
+++ b/src/server/routes/apex.js
@@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 const { fetchEventDetails, fetchTeamStatusAtEvent, fetchTBAEventDetails} = require('../helpers/api');
 const { processMatchDataWithTBAResults, calculateRecordFromCompletedMatches } = require('../helpers/matches');
+const { getActiveNotices } = require('../helpers/database');
 // const apiRoutes = require('./api');
 
 // GET /test - Returns raw event data
@@ -19,7 +20,15 @@ router.get('/', async (req, res) => {
   
   // If teamKey or eventKey are not provided, render an input form
   if (!teamKey || !eventKey) {
-    return res.render('pages/home');
+    try {
+      // Fetch active notices from database
+      const notices = await getActiveNotices();
+      return res.render('pages/home', { notices });
+    } catch (error) {
+      console.error('Error fetching notices:', error);
+      // Fallback to home page without notices if database error
+      return res.render('pages/home', { notices: [] });
+    }
   }
   
   // Format team number (remove "frc" prefix if present)
diff --git a/src/server/routes/api.js b/src/server/routes/api.js
index 67dfcf8..7b1ea14 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -2,6 +2,7 @@ const express = require('express');
 const router = express.Router();
 const { fetchEventDetails, fetchTeamStatusAtEvent, fetchEventMatchResults, searchTBAEventsEnhanced, getTeamEventsWithCache } = require('../helpers/api');
 const { extractRPRelevantData } = require('../helpers/matches');
+const { requireAuthAPI } = require('../helpers/auth');
 const crypto = require('crypto');
 
 // SSE connections store with data hashes
@@ -639,4 +640,119 @@ router.get('/db-status', async (req, res) => {
   }
 });
 
+// Notice Management API Endpoints
+
+// GET all active notices (for public display)
+router.get('/notices', async (req, res) => {
+  try {
+    const { getActiveNotices } = require('../helpers/database');
+    const notices = await getActiveNotices();
+    res.json(notices);
+  } catch (error) {
+    console.error('Error fetching notices:', error);
+    res.status(500).json({ error: 'Failed to fetch notices' });
+  }
+});
+
+// POST create a new notice (admin endpoint - requires auth)
+router.post('/notices', requireAuthAPI, async (req, res) => {
+  try {
+    const { createNotice } = require('../helpers/database');
+    const { title, content, type, is_active, priority, starts_at, expires_at } = req.body;
+    
+    if (!title || !content) {
+      return res.status(400).json({ error: 'Title and content are required' });
+    }
+    
+    const noticeData = {
+      title,
+      content,
+      type: type || 'info',
+      is_active: is_active !== undefined ? is_active : true,
+      priority: priority || 0,
+      starts_at: starts_at || null,
+      expires_at: expires_at || null
+    };
+    
+    const noticeId = await createNotice(noticeData);
+    console.log(`Notice created by ${req.user.username}: "${title}"`);
+    res.status(201).json({ id: Number(noticeId), message: 'Notice created successfully' });
+  } catch (error) {
+    console.error('Error creating notice:', error);
+    res.status(500).json({ error: 'Failed to create notice' });
+  }
+});
+
+// PUT update an existing notice (admin endpoint - requires auth)
+router.put('/notices/:id', requireAuthAPI, async (req, res) => {
+  try {
+    const { updateNotice } = require('../helpers/database');
+    const { id } = req.params;
+    const { title, content, type, is_active, priority, starts_at, expires_at } = req.body;
+    
+    if (!title || !content) {
+      return res.status(400).json({ error: 'Title and content are required' });
+    }
+    
+    const noticeData = {
+      title,
+      content,
+      type: type || 'info',
+      is_active: is_active !== undefined ? is_active : true,
+      priority: priority || 0,
+      starts_at: starts_at || null,
+      expires_at: expires_at || null
+    };
+    
+    const updated = await updateNotice(id, noticeData);
+    if (updated) {
+      console.log(`Notice ${id} updated by ${req.user.username}: "${title}"`);
+      res.json({ message: 'Notice updated successfully' });
+    } else {
+      res.status(404).json({ error: 'Notice not found' });
+    }
+  } catch (error) {
+    console.error('Error updating notice:', error);
+    res.status(500).json({ error: 'Failed to update notice' });
+  }
+});
+
+// DELETE a notice (admin endpoint - requires auth)
+router.delete('/notices/:id', requireAuthAPI, async (req, res) => {
+  try {
+    const { deleteNotice } = require('../helpers/database');
+    const { id } = req.params;
+    
+    const deleted = await deleteNotice(id);
+    if (deleted) {
+      console.log(`Notice ${id} deleted by ${req.user.username}`);
+      res.json({ message: 'Notice deleted successfully' });
+    } else {
+      res.status(404).json({ error: 'Notice not found' });
+    }
+  } catch (error) {
+    console.error('Error deleting notice:', error);
+    res.status(500).json({ error: 'Failed to delete notice' });
+  }
+});
+
+// POST deactivate a notice (soft delete - requires auth)
+router.post('/notices/:id/deactivate', requireAuthAPI, async (req, res) => {
+  try {
+    const { deactivateNotice } = require('../helpers/database');
+    const { id } = req.params;
+    
+    const deactivated = await deactivateNotice(id);
+    if (deactivated) {
+      console.log(`Notice ${id} deactivated by ${req.user.username}`);
+      res.json({ message: 'Notice deactivated successfully' });
+    } else {
+      res.status(404).json({ error: 'Notice not found' });
+    }
+  } catch (error) {
+    console.error('Error deactivating notice:', error);
+    res.status(500).json({ error: 'Failed to deactivate notice' });
+  }
+});
+
 module.exports = router;
diff --git a/src/server/routes/auth.js b/src/server/routes/auth.js
new file mode 100644
index 0000000..6d2c821
--- /dev/null
+++ b/src/server/routes/auth.js
@@ -0,0 +1,103 @@
+const express = require('express');
+const router = express.Router();
+const { passport, requireAuth } = require('../helpers/auth');
+
+// Login page
+router.get('/login', (req, res) => {
+  if (req.isAuthenticated()) {
+    // Already logged in, redirect to admin or return URL
+    const returnTo = req.session.returnTo || '/admin';
+    delete req.session.returnTo;
+    return res.redirect(returnTo);
+  }
+  
+  // Render login page
+  res.render('dashboard/admin/login', {
+    error: req.query.error || null,
+    returnTo: req.query.returnTo || null
+  });
+});
+
+// GitHub OAuth initiation
+router.get('/github', passport.authenticate('github', { 
+  scope: ['user:email'] 
+}));
+
+// GitHub OAuth callback
+router.get('/github/callback', 
+  passport.authenticate('github', { 
+    failureRedirect: '/auth/login?error=auth_failed' 
+  }),
+  (req, res) => {
+    // Successful authentication
+    const returnTo = req.session.returnTo || '/admin';
+    delete req.session.returnTo;
+    
+    console.log(`User ${req.user.username} successfully authenticated`);
+    res.redirect(returnTo);
+  }
+);
+
+// Logout
+router.post('/logout', requireAuth, (req, res) => {
+  const username = req.user?.username;
+  req.logout((err) => {
+    if (err) {
+      console.error('Logout error:', err);
+      return res.status(500).json({ error: 'Logout failed' });
+    }
+    
+    req.session.destroy((err) => {
+      if (err) {
+        console.error('Session destroy error:', err);
+      }
+      
+      console.log(`User ${username} logged out`);
+      res.clearCookie('connect.sid'); // Clear session cookie
+      res.redirect('/');
+    });
+  });
+});
+
+// Logout (GET version for direct browser access)
+router.get('/logout', requireAuth, (req, res) => {
+  const username = req.user?.username;
+  req.logout((err) => {
+    if (err) {
+      console.error('Logout error:', err);
+      return res.redirect('/?error=logout_failed');
+    }
+    
+    req.session.destroy((err) => {
+      if (err) {
+        console.error('Session destroy error:', err);
+      }
+      
+      console.log(`User ${username} logged out`);
+      res.clearCookie('connect.sid'); // Clear session cookie
+      res.redirect('/');
+    });
+  });
+});
+
+// Check authentication status (API endpoint)
+router.get('/status', (req, res) => {
+  if (req.isAuthenticated()) {
+    res.json({
+      authenticated: true,
+      user: {
+        username: req.user.username,
+        displayName: req.user.displayName,
+        email: req.user.email,
+        avatarUrl: req.user.avatarUrl
+      }
+    });
+  } else {
+    res.json({
+      authenticated: false,
+      loginUrl: '/auth/login'
+    });
+  }
+});
+
+module.exports = router;
diff --git a/test-db.js b/test-db.js
new file mode 100644
index 0000000..e69de29
diff --git a/views/dashboard/admin/index.ejs b/views/dashboard/admin/index.ejs
new file mode 100644
index 0000000..dd67a30
--- /dev/null
+++ b/views/dashboard/admin/index.ejs
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Dashboard - Vorel</title>
+  <%- include('../../style/style-admin') %>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>Admin Dashboard</h1>
+      <% if (typeof user !== 'undefined' && user) { %>
+        <div class="user-info">
+          <% if (user.avatarUrl) { %>
+            <img src="<%= user.avatarUrl %>" alt="<%= user.username %>" class="user-avatar">
+          <% } %>
+          <span class="user-name"><%= user.displayName || user.username %></span>
+          <form method="post" action="/auth/logout" style="display: inline;">
+            <button type="submit" class="btn-logout">Logout</button>
+          </form>
+        </div>
+      <% } %>
+    </div>
+    
+    <div class="notice-form">
+      <h2>Admin Tools</h2>
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
+        <a href="/admin/notices" style="text-decoration: none;">
+          <div style="background: var(--surface-hover); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 16px; cursor: pointer; transition: background 0.2s;" onmouseover="this.style.background='var(--surface-border)'" onmouseout="this.style.background='var(--surface-hover)'">
+            <h3 style="margin: 0 0 8px 0; color: var(--info);">📢 Notice Management</h3>
+            <p style="margin: 0; color: var(--text-secondary); font-size: 14px;">Create, edit, and manage system-wide notices</p>
+          </div>
+        </a>
+        
+        <!-- User Management - dynamically enabled/disabled based on database mode -->
+        <div id="userManagementCard" style="background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 16px; opacity: 0.6;">
+          <h3 style="margin: 0 0 8px 0; color: var(--text-tertiary);">👥 User Management</h3>
+          <p style="margin: 0; color: var(--text-tertiary); font-size: 14px;">Manage admin user accounts and permissions</p>
+        </div>
+        
+        <div style="background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 16px; opacity: 0.6;">
+          <h3 style="margin: 0 0 8px 0; color: var(--text-tertiary);">⚙️ System Settings</h3>
+          <p style="margin: 0; color: var(--text-tertiary); font-size: 14px;">Configure application settings and preferences (Coming Soon)</p>
+        </div>
+        
+        <div style="background: var(--surface); border: 1px solid var(--surface-border); border-radius: var(--radius-md); padding: 16px; opacity: 0.6;">
+          <h3 style="margin: 0 0 8px 0; color: var(--text-tertiary);">📊 Analytics</h3>
+          <p style="margin: 0; color: var(--text-tertiary); font-size: 14px;">View application usage statistics and metrics (Coming Soon)</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="notices-list">
+      <h2>System Status</h2>
+      <div id="systemStatus">
+        <div class="notice-item">
+          <div class="notice-header">
+            <span class="notice-title">Loading system status...</span>
+            <span class="notice-type type-info">Checking</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    async function loadSystemStatus() {
+      try {
+        const response = await fetch('/admin/system-status');
+        const status = await response.json();
+        
+        const statusDiv = document.getElementById('systemStatus');
+        
+        let statusHtml = '';
+        
+        // Database status
+        statusHtml += `
+          <div class="notice-item">
+            <div class="notice-header">
+              <span class="notice-title">Database Connection</span>
+              <span class="notice-type type-${status.database.connected ? 'success' : 'danger'}">
+                ${status.database.connected ? 'Online' : 'Offline'}
+              </span>
+            </div>
+            <div class="notice-content">
+              ${status.database.connected ? 
+                `Database is connected and operational. ${status.database.stats ? 
+                  `${status.database.stats.total_events} events across ${status.database.stats.years_count} years.` : 
+                  'No stats available.'
+                }` : 
+                'Database connection failed or unavailable.'
+              }
+            </div>
+          </div>
+        `;
+        
+        // Encryption status
+        if (status.encryption.error) {
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">Encryption System</span>
+                <span class="notice-type type-warning">Error</span>
+              </div>
+              <div class="notice-content">${status.encryption.message}</div>
+            </div>
+          `;
+        } else {
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">Encryption System</span>
+                <span class="notice-type type-success">Active</span>
+              </div>
+              <div class="notice-content">
+                Key created: ${new Date(status.encryption.createdAt).toLocaleString()}<br>
+                Last rotated: ${new Date(status.encryption.lastRotated).toLocaleString()}<br>
+                Next rotation: ${status.encryption.hoursUntilNextRotation} hours<br>
+                Rotation interval: ${status.encryption.rotationIntervalHours} hours
+              </div>
+            </div>
+          `;
+        }
+        
+        // Server metrics
+        const uptimeHours = Math.floor(status.server.uptime / 3600);
+        const uptimeMinutes = Math.floor((status.server.uptime % 3600) / 60);
+        const memoryMB = Math.round(status.server.memory.used / 1024 / 1024);
+        
+        statusHtml += `
+          <div class="notice-item">
+            <div class="notice-header">
+              <span class="notice-title">Server Metrics</span>
+              <span class="notice-type type-info">Online</span>
+            </div>
+            <div class="notice-content">
+              Uptime: ${uptimeHours}h ${uptimeMinutes}m<br>
+              Memory usage: ${memoryMB} MB<br>
+              Node.js version: ${status.server.nodeVersion}
+            </div>
+          </div>
+        `;
+        
+        statusDiv.innerHTML = statusHtml;
+        
+        // Enable user management card if database is connected
+        const userManagementCard = document.getElementById('userManagementCard');
+        if (status.database.connected) {
+          userManagementCard.style.opacity = '1';
+          userManagementCard.style.cursor = 'pointer';
+          userManagementCard.onclick = () => window.location.href = '/admin/users';
+          userManagementCard.onmouseover = () => userManagementCard.style.background = 'var(--surface-border)';
+          userManagementCard.onmouseout = () => userManagementCard.style.background = 'var(--surface-hover)';
+          userManagementCard.style.background = 'var(--surface-hover)';
+          
+          // Update text
+          const h3 = userManagementCard.querySelector('h3');
+          const p = userManagementCard.querySelector('p');
+          h3.style.color = 'var(--success)';
+          p.style.color = 'var(--text-secondary)';
+          p.textContent = 'Manage admin user accounts and permissions';
+        }
+      } catch (error) {
+        console.error('Error loading system status:', error);
+        document.getElementById('systemStatus').innerHTML = `
+          <div class="notice-item">
+            <div class="notice-header">
+              <span class="notice-title">System Status</span>
+              <span class="notice-type type-danger">Error</span>
+            </div>
+            <div class="notice-content">Failed to load system status: ${error.message}</div>
+          </div>
+        `;
+      }
+    }
+
+    // Load system status on page load
+    loadSystemStatus();
+    
+    // Refresh status every 30 seconds
+    setInterval(loadSystemStatus, 30000);
+  </script>
+</body>
+</html>
diff --git a/views/dashboard/admin/login.ejs b/views/dashboard/admin/login.ejs
new file mode 100644
index 0000000..9a42df3
--- /dev/null
+++ b/views/dashboard/admin/login.ejs
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Login - Vorel</title>
+  <%- include('../../style/style-admin') %>
+  <style>
+    body {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-lg);
+    }
+    
+    .login-container {
+      background: var(--surface);
+      border: 1px solid var(--surface-border);
+      border-radius: var(--radius-md);
+      padding: var(--spacing-xl);
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    }
+    
+    .logo {
+      max-width: 200px;
+      height: auto;
+      margin-bottom: var(--spacing-lg);
+      filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
+    }
+    
+    h1 {
+      color: var(--primary);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.75rem;
+      font-weight: 700;
+    }
+    
+    .subtitle {
+      color: var(--text-secondary);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+    
+    .error-message {
+      background: rgba(244, 67, 54, 0.2);
+      color: var(--error);
+      border: 1px solid var(--error);
+      border-radius: var(--radius-md);
+      padding: 12px;
+      margin-bottom: var(--spacing-lg);
+      font-size: 0.9rem;
+    }
+    
+    .github-login-btn {
+      background: #24292e;
+      color: white;
+      border: none;
+      border-radius: var(--radius-md);
+      padding: 14px 24px;
+      font-size: 1rem;
+      font-weight: 500;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+    
+    .github-login-btn:hover {
+      background: #1b1f23;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+    
+    .github-icon {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+    
+    .info-text {
+      color: var(--text-secondary);
+      font-size: 0.875rem;
+      margin-top: var(--spacing-lg);
+      line-height: 1.4;
+    }
+    
+    .back-link {
+      color: var(--primary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      margin-top: var(--spacing-lg);
+      display: inline-block;
+      transition: color 0.2s ease;
+    }
+    
+    .back-link:hover {
+      color: var(--primary);
+      filter: brightness(1.1);
+    }
+    
+    @media (max-width: 480px) {
+      .login-container {
+        margin: var(--spacing-lg) 16px;
+        padding: var(--spacing-lg);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="login-container">
+    <img src="/banner2.avif" alt="Vorel Logo" class="logo" />
+    
+    <h1>Admin Login</h1>
+    <p class="subtitle">Sign in with your GitHub account to access the admin panel</p>
+    
+    <% if (error) { %>
+      <div class="error-message">
+        <% if (error === 'auth_failed') { %>
+          Authentication failed. Please try again or contact an administrator if you believe you should have access.
+        <% } else { %>
+          <%= error %>
+        <% } %>
+      </div>
+    <% } %>
+    
+    <a href="/auth/github" class="github-login-btn">
+      <svg class="github-icon" viewBox="0 0 24 24">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
+      </svg>
+      Sign in with GitHub
+    </a>
+    
+    <div class="info-text">
+      Only authorized GitHub users can access the admin panel.
+    </div>
+    
+    <a href="/" class="back-link">← Back to Home</a>
+  </div>
+</body>
+</html>
diff --git a/views/dashboard/admin/notices.ejs b/views/dashboard/admin/notices.ejs
new file mode 100644
index 0000000..e423cad
--- /dev/null
+++ b/views/dashboard/admin/notices.ejs
@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Notice Management - Vorel</title>
+  <%- include('../../style/style-admin') %>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <div>
+        <nav style="margin-bottom: 8px;">
+          <a href="/admin" style="color: var(--text-secondary); text-decoration: none; font-size: 14px;">← Admin Dashboard</a>
+        </nav>
+        <h1>Notice Management</h1>
+      </div>
+      <% if (typeof user !== 'undefined' && user) { %>
+        <div class="user-info">
+          <% if (user.avatarUrl) { %>
+            <img src="<%= user.avatarUrl %>" alt="<%= user.username %>" class="user-avatar">
+          <% } %>
+          <span class="user-name"><%= user.displayName || user.username %></span>
+          <form method="post" action="/auth/logout" style="display: inline;">
+            <button type="submit" class="btn-logout">Logout</button>
+          </form>
+        </div>
+      <% } %>
+    </div>
+    
+    <div id="message"></div>
+    
+    <div class="notice-form">
+      <h2>Create New Notice</h2>
+      <form id="noticeForm">
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input type="text" id="title" name="title" required>
+        </div>
+        
+        <div class="form-group">
+          <label for="content">Content (HTML allowed)</label>
+          <textarea id="content" name="content" required placeholder="Enter notice content. HTML tags like &lt;a&gt; and &lt;strong&gt; are allowed."></textarea>
+        </div>
+        
+        <div class="form-group">
+          <label for="type">Type</label>
+          <select id="type" name="type">
+            <option value="info">Info</option>
+            <option value="warning">Warning</option>
+            <option value="success">Success</option>
+            <option value="danger">Danger</option>
+          </select>
+        </div>
+        
+        <div class="form-group">
+          <label for="priority">Priority (higher numbers appear first)</label>
+          <input type="number" id="priority" name="priority" value="0">
+        </div>
+        
+        <div class="form-group">
+          <label for="expires_at">Expires At (optional)</label>
+          <input type="datetime-local" id="expires_at" name="expires_at">
+        </div>
+        
+        <button type="submit">Create Notice</button>
+        <button type="button" onclick="clearForm()">Clear</button>
+      </form>
+    </div>
+    
+    <div class="notices-list">
+      <h2>Existing Notices</h2>
+      <div id="noticesList">Loading...</div>
+    </div>
+  </div>
+
+  <script>
+    let editingNoticeId = null;
+
+    async function showMessage(text, type = 'success') {
+      const messageDiv = document.getElementById('message');
+      messageDiv.innerHTML = `<div class="message ${type}">${text}</div>`;
+      setTimeout(() => messageDiv.innerHTML = '', 5000);
+    }
+
+    async function handleAPIError(response, defaultMessage) {
+      if (response.status === 401) {
+        showMessage('Session expired. Please log in again.', 'error');
+        setTimeout(() => {
+          window.location.href = '/auth/login?returnTo=' + encodeURIComponent(window.location.pathname);
+        }, 2000);
+        return true;
+      }
+      
+      try {
+        const result = await response.json();
+        showMessage(result.error || defaultMessage, 'error');
+      } catch (e) {
+        // If we can't parse the JSON, use the default message
+        showMessage(defaultMessage, 'error');
+      }
+      return false;
+    }
+
+    async function loadNotices() {
+      try {
+        const response = await fetch('/api/notices');
+        const notices = await response.json();
+        
+        const noticesListDiv = document.getElementById('noticesList');
+        
+        if (notices.length === 0) {
+          noticesListDiv.innerHTML = '<p>No notices found.</p>';
+          return;
+        }
+        
+        noticesListDiv.innerHTML = notices.map(notice => `
+          <div class="notice-item">
+            <div class="notice-header">
+              <span class="notice-title">${notice.title}</span>
+              <span class="notice-type type-${notice.type}">${notice.type}</span>
+            </div>
+            <div class="notice-content">${notice.content}</div>
+            <div class="notice-actions">
+              <button class="btn-info" onclick="editNotice(${notice.id})">Edit</button>
+              <button class="btn-warning" onclick="deactivateNotice(${notice.id})">Deactivate</button>
+              <button class="btn-error" onclick="deleteNotice(${notice.id})">Delete</button>
+            </div>
+          </div>
+        `).join('');
+      } catch (error) {
+        console.error('Error loading notices:', error);
+        showMessage('Failed to load notices', 'error');
+      }
+    }
+
+    async function createOrUpdateNotice(formData) {
+      try {
+        const url = editingNoticeId ? `/api/notices/${editingNoticeId}` : '/api/notices';
+        const method = editingNoticeId ? 'PUT' : 'POST';
+        
+        const response = await fetch(url, {
+          method,
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(formData)
+        });
+        
+        if (response.ok) {
+          const result = await response.json();
+          showMessage(editingNoticeId ? 'Notice updated successfully' : 'Notice created successfully');
+          clearForm();
+          loadNotices();
+        } else {
+          await handleAPIError(response, 'Failed to save notice');
+        }
+      } catch (error) {
+        console.error('Error saving notice:', error);
+        showMessage('Failed to save notice: ' + error.message, 'error');
+      }
+    }
+
+    async function editNotice(id) {
+      try {
+        const response = await fetch('/api/notices');
+        const notices = await response.json();
+        const notice = notices.find(n => n.id === id);
+        
+        if (notice) {
+          document.getElementById('title').value = notice.title;
+          document.getElementById('content').value = notice.content;
+          document.getElementById('type').value = notice.type;
+          document.getElementById('priority').value = notice.priority;
+          
+          if (notice.expires_at) {
+            const expireDate = new Date(notice.expires_at);
+            document.getElementById('expires_at').value = expireDate.toISOString().slice(0, 16);
+          }
+          
+          editingNoticeId = id;
+          document.querySelector('button[type="submit"]').textContent = 'Update Notice';
+        }
+      } catch (error) {
+        console.error('Error loading notice for edit:', error);
+        showMessage('Failed to load notice for editing', 'error');
+      }
+    }
+
+    async function deactivateNotice(id) {
+      if (!confirm('Are you sure you want to deactivate this notice?')) return;
+      
+      try {
+        const response = await fetch(`/api/notices/${id}/deactivate`, { method: 'POST' });
+        const result = await response.json();
+        
+        if (response.ok) {
+          showMessage('Notice deactivated successfully');
+          loadNotices();
+        } else {
+          showMessage(result.error || 'Failed to deactivate notice', 'error');
+        }
+      } catch (error) {
+        console.error('Error deactivating notice:', error);
+        showMessage('Failed to deactivate notice', 'error');
+      }
+    }
+
+    async function deleteNotice(id) {
+      if (!confirm('Are you sure you want to permanently delete this notice?')) return;
+      
+      try {
+        const response = await fetch(`/api/notices/${id}`, { method: 'DELETE' });
+        const result = await response.json();
+        
+        if (response.ok) {
+          showMessage('Notice deleted successfully');
+          loadNotices();
+        } else {
+          showMessage(result.error || 'Failed to delete notice', 'error');
+        }
+      } catch (error) {
+        console.error('Error deleting notice:', error);
+        showMessage('Failed to delete notice', 'error');
+      }
+    }
+
+    function clearForm() {
+      document.getElementById('noticeForm').reset();
+      editingNoticeId = null;
+      document.querySelector('button[type="submit"]').textContent = 'Create Notice';
+    }
+
+    document.getElementById('noticeForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const formData = {
+        title: document.getElementById('title').value,
+        content: document.getElementById('content').value,
+        type: document.getElementById('type').value,
+        priority: parseInt(document.getElementById('priority').value) || 0,
+        expires_at: document.getElementById('expires_at').value || null
+      };
+      
+      await createOrUpdateNotice(formData);
+    });
+
+    // Load notices on page load
+    loadNotices();
+  </script>
+</body>
+</html>
diff --git a/views/dashboard/admin/users.ejs b/views/dashboard/admin/users.ejs
new file mode 100644
index 0000000..64e8291
--- /dev/null
+++ b/views/dashboard/admin/users.ejs
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>User Management - Vorel Admin</title>
+  <%- include('../../style/style-admin') %>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>User Management</h1>
+      <% if (typeof user !== 'undefined' && user) { %>
+        <div class="user-info">
+          <% if (user.avatarUrl) { %>
+            <img src="<%= user.avatarUrl %>" alt="<%= user.username %>" class="user-avatar">
+          <% } %>
+          <span class="user-name"><%= user.displayName || user.username %></span>
+          <form method="post" action="/auth/logout" style="display: inline;">
+            <button type="submit" class="btn-logout">Logout</button>
+          </form>
+        </div>
+      <% } %>
+    </div>
+    
+    <nav style="margin-bottom: var(--spacing-lg);">
+      <a href="/admin" style="color: var(--primary); text-decoration: none;">← Back to Dashboard</a>
+    </nav>
+    
+    <% if (typeof message !== 'undefined' && message) { %>
+      <div class="message <%= message.type %>">
+        <%= message.text %>
+      </div>
+    <% } %>
+    
+    <div id="urlMessage" style="display: none;"></div>
+    
+    <!-- Custom Modal for confirmations -->
+    <div id="confirmModal" class="modal-overlay" style="display: none;">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3 id="modalTitle">Confirm Action</h3>
+        </div>
+        <div class="modal-body">
+          <p id="modalMessage">Are you sure?</p>
+          <div id="modalInput" style="display: none;">
+            <label for="confirmInput">Type <strong id="confirmText">DELETE</strong> to confirm:</label>
+            <input type="text" id="confirmInput" placeholder="Type here...">
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button id="modalConfirm" class="btn-success">Confirm</button>
+          <button id="modalCancel" class="btn-secondary">Cancel</button>
+        </div>
+      </div>
+    </div>
+    
+    <div class="notice-form">
+      <h2>Add New Admin User</h2>
+      <form method="post" action="/admin/users/add">
+        <div class="form-group">
+          <label for="github_username">GitHub Username:</label>
+          <input type="text" id="github_username" name="github_username" required 
+                 placeholder="Enter GitHub username" pattern="[a-zA-Z0-9\-_]+" 
+                 title="GitHub usernames can only contain alphanumeric characters, hyphens, and underscores">
+        </div>
+        
+        <div class="form-group">
+          <label for="role">Role:</label>
+          <select id="role" name="role" required>
+            <option value="admin">Admin</option>
+            <option value="moderator">Moderator</option>
+          </select>
+        </div>
+        
+        <button type="submit" class="btn-success">Add User</button>
+      </form>
+    </div>
+    
+    <div class="notices-list">
+      <h2>Current Admin Users</h2>
+      <div id="adminUsers">
+        <div class="notice-item">
+          <div class="notice-header">
+            <span class="notice-title">Loading admin users...</span>
+            <span class="notice-type type-info">Loading</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Custom Modal Functions
+    function showModal(title, message, options = {}) {
+      return new Promise((resolve) => {
+        const modal = document.getElementById('confirmModal');
+        const modalTitle = document.getElementById('modalTitle');
+        const modalMessage = document.getElementById('modalMessage');
+        const modalInput = document.getElementById('modalInput');
+        const modalConfirm = document.getElementById('modalConfirm');
+        const modalCancel = document.getElementById('modalCancel');
+        const confirmInput = document.getElementById('confirmInput');
+        const confirmText = document.getElementById('confirmText');
+        
+        // Set content
+        modalTitle.textContent = title;
+        modalMessage.textContent = message;
+        
+        // Configure input if needed
+        if (options.requireInput) {
+          modalInput.style.display = 'block';
+          confirmText.textContent = options.confirmText || 'DELETE';
+          confirmInput.value = '';
+          confirmInput.focus();
+        } else {
+          modalInput.style.display = 'none';
+        }
+        
+        // Configure confirm button
+        modalConfirm.textContent = options.confirmText ? 'Delete' : 'Confirm';
+        modalConfirm.className = options.dangerAction ? 'btn-error' : 'btn-success';
+        
+        // Show modal
+        modal.style.display = 'flex';
+        
+        // Handle confirm
+        const handleConfirm = () => {
+          if (options.requireInput) {
+            const inputValue = confirmInput.value;
+            const expectedValue = options.confirmText || 'DELETE';
+            if (inputValue === expectedValue) {
+              cleanup();
+              resolve(true);
+            } else {
+              showMessage('Confirmation text did not match. Action cancelled.', 'error');
+              confirmInput.focus();
+              confirmInput.select();
+            }
+          } else {
+            cleanup();
+            resolve(true);
+          }
+        };
+        
+        // Handle cancel
+        const handleCancel = () => {
+          cleanup();
+          resolve(false);
+        };
+        
+        // Handle escape key
+        const handleEscape = (e) => {
+          if (e.key === 'Escape') {
+            handleCancel();
+          } else if (e.key === 'Enter' && !options.requireInput) {
+            handleConfirm();
+          }
+        };
+        
+        // Cleanup function
+        const cleanup = () => {
+          modal.style.display = 'none';
+          modalConfirm.removeEventListener('click', handleConfirm);
+          modalCancel.removeEventListener('click', handleCancel);
+          document.removeEventListener('keydown', handleEscape);
+        };
+        
+        // Add event listeners
+        modalConfirm.addEventListener('click', handleConfirm);
+        modalCancel.addEventListener('click', handleCancel);
+        document.addEventListener('keydown', handleEscape);
+        
+        // Close modal when clicking outside
+        modal.addEventListener('click', (e) => {
+          if (e.target === modal) {
+            handleCancel();
+          }
+        });
+      });
+    }
+    
+    // Show inline messages
+    function showMessage(message, type = 'info') {
+      const messageDiv = document.getElementById('urlMessage');
+      messageDiv.innerHTML = `<div class="message ${type}">${message}</div>`;
+      messageDiv.style.display = 'block';
+      
+      // Auto-hide after 5 seconds
+      setTimeout(() => {
+        messageDiv.style.display = 'none';
+      }, 5000);
+    }
+
+    // Check for URL parameters and show messages
+    function checkUrlMessages() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const success = urlParams.get('success');
+      const error = urlParams.get('error');
+      const messageDiv = document.getElementById('urlMessage');
+      
+      if (success) {
+        messageDiv.innerHTML = `<div class="message success">${success}</div>`;
+        messageDiv.style.display = 'block';
+        // Clean URL without page reload
+        window.history.replaceState({}, document.title, window.location.pathname);
+      } else if (error) {
+        messageDiv.innerHTML = `<div class="message error">${error}</div>`;
+        messageDiv.style.display = 'block';
+        // Clean URL without page reload
+        window.history.replaceState({}, document.title, window.location.pathname);
+      }
+    }
+
+    async function loadAdminUsers() {
+      try {
+        const response = await fetch('/admin/users/list');
+        const users = await response.json();
+        
+        // Get current user info for self-protection
+        const currentUser = '<%= user && user.username ? user.username : "" %>';
+        
+        const usersDiv = document.getElementById('adminUsers');
+        
+        if (users.length === 0) {
+          usersDiv.innerHTML = `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">No admin users found</span>
+                <span class="notice-type type-warning">Empty</span>
+              </div>
+            </div>
+          `;
+          return;
+        }
+        
+        let usersHtml = '';
+        
+        users.forEach(user => {
+          const isEnvUser = user.source === 'env';
+          const isActive = user.is_active !== false;
+          const isCurrentUser = currentUser && user.github_username.toLowerCase() === currentUser.toLowerCase();
+          const isProtected = isEnvUser || isCurrentUser;
+          
+          usersHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">@${user.github_username}${isCurrentUser ? ' (You)' : ''}</span>
+                <div style="display: flex; gap: 8px; align-items: center;">
+                  <span class="notice-type type-${user.role === 'admin' ? 'success' : 'info'}">${user.role}</span>
+                  ${isEnvUser ? '<span class="notice-type type-warning">ENV</span>' : ''}
+                  ${isCurrentUser ? '<span class="notice-type type-info">SELF</span>' : ''}
+                  <span class="notice-type type-${isActive ? 'success' : 'danger'}">${isActive ? 'Active' : 'Inactive'}</span>
+                </div>
+              </div>
+              <div class="notice-content">
+                ${user.github_id ? `GitHub ID: ${user.github_id}` : 'GitHub ID not available'}
+                ${user.created_at ? `<br>Added: ${new Date(user.created_at).toLocaleString()}` : ''}
+                ${user.last_login ? `<br>Last Login: ${new Date(user.last_login).toLocaleString()}` : ''}
+                ${isEnvUser ? '<br><strong>Protected:</strong> This user is defined in environment variables and cannot be modified.' : ''}
+                ${isCurrentUser ? '<br><strong>Protected:</strong> You cannot remove or deactivate your own account.' : ''}
+                ${!isActive ? '<br><strong>Status:</strong> This user is deactivated and cannot log in.' : ''}
+              </div>
+              ${!isProtected ? `
+                <div class="notice-actions">
+                  ${isActive ? `
+                    <button onclick="toggleUser('${user.github_username}', false)" class="btn-warning" 
+                            title="Temporarily disable login access (user data preserved)">
+                      Suspend Access
+                    </button>
+                  ` : `
+                    <button onclick="toggleUser('${user.github_username}', true)" class="btn-success"
+                            title="Restore login access for this user">
+                      Restore Access
+                    </button>
+                  `}
+                  <button onclick="removeUser('${user.github_username}')" class="btn-error"
+                          title="Permanently delete user from database (cannot be undone)">
+                    Delete Permanently
+                  </button>
+                </div>
+              ` : ''}
+            </div>
+          `;
+        });
+        
+        usersDiv.innerHTML = usersHtml;
+      } catch (error) {
+        console.error('Error loading admin users:', error);
+        document.getElementById('adminUsers').innerHTML = `
+          <div class="notice-item">
+            <div class="notice-header">
+              <span class="notice-title">Error Loading Users</span>
+              <span class="notice-type type-danger">Error</span>
+            </div>
+            <div class="notice-content">Failed to load admin users: ${error.message}</div>
+          </div>
+        `;
+      }
+    }
+
+    async function toggleUser(username, activate) {
+      const action = activate ? 'restore access for' : 'suspend access for';
+      const explanation = activate ? 
+        'This will allow the user to log in again.' : 
+        'This will prevent the user from logging in, but their data will be preserved.';
+      
+      const confirmed = await showModal(
+        `${activate ? 'Restore' : 'Suspend'} User Access`,
+        `Are you sure you want to ${action} user @${username}?\n\n${explanation}`
+      );
+      
+      if (!confirmed) return;
+
+      try {
+        const response = await fetch('/admin/users/toggle', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            username: username,
+            is_active: activate
+          })
+        });
+
+        const result = await response.json();
+        
+        if (result.success) {
+          showMessage(`User @${username} has been ${activate ? 'reactivated' : 'suspended'} successfully.`, 'success');
+          loadAdminUsers(); // Refresh the list
+        } else {
+          showMessage('Error: ' + (result.message || 'Failed to update user'), 'error');
+        }
+      } catch (error) {
+        console.error('Error toggling user:', error);
+        showMessage('Error updating user: ' + error.message, 'error');
+      }
+    }
+
+    async function removeUser(username) {
+      const confirmed = await showModal(
+        'Permanent Deletion Warning',
+        `Are you sure you want to permanently delete user @${username}?\n\nThis will:\n• Completely remove the user from the database\n• Cannot be undone\n• User will need to be re-added manually\n\nConsider "Suspend Access" instead if you want to temporarily disable the user.`,
+        {
+          requireInput: true,
+          confirmText: 'DELETE',
+          dangerAction: true
+        }
+      );
+      
+      if (!confirmed) return;
+
+      try {
+        const response = await fetch('/admin/users/remove', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            username: username
+          })
+        });
+
+        const result = await response.json();
+        
+        if (result.success) {
+          showMessage(`User @${username} has been permanently deleted.`, 'success');
+          loadAdminUsers(); // Refresh the list
+        } else {
+          showMessage('Error: ' + (result.message || 'Failed to remove user'), 'error');
+        }
+      } catch (error) {
+        console.error('Error removing user:', error);
+        showMessage('Error removing user: ' + error.message, 'error');
+      }
+    }
+
+    // Load users on page load
+    document.addEventListener('DOMContentLoaded', () => {
+      checkUrlMessages();
+      loadAdminUsers();
+    });
+  </script>
+</body>
+</html>
diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index fd1381d..e666246 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -85,21 +85,16 @@
           The ultimate companion for FRC teams tracking competition journeys with real-time updates
         </p>
         
-        <div class="api-update-notice">
-          <div class="notice-content">
-            <h3> API Update </h3>
-            <p>Vorel has received an API update to improve the live event data. If you encounter any issues while using the app, please report them to our <a href="https://github.com/1334Robotics/vorel-app/issues" target="_blank" rel="noopener">GitHub Issues</a> page.</p>
-          </div>
-        </div>
-        
-        <!-- <div class="championship-notice">
-          <div class="notice-content">
-            <h3>🎉 Championship Update 🎉</h3>
-            <p>Congratulations to all teams advancing to Championships! We've deployed a temporary workaround for championship division event keys between The Blue Alliance and FIRST Nexus. Your match schedules should now display correctly for all Championship events. </p>
-            <p>We appreciate your patience and apologize for any inconvenience this might have caused!</p>
-          </div>
-        </div>
-         -->
+        <% if (notices && notices.length > 0) { %>
+          <% notices.forEach(notice => { %>
+            <div class="<%= notice.type %>-notice">
+              <div class="notice-content">
+                <h3><%= notice.title %></h3>
+                <p><%- notice.content %></p>
+              </div>
+            </div>
+          <% }); %>
+        <% } %>
         
         <h2 class="section-title">Key Features</h2>
         <div class="features">
diff --git a/views/pages/login.ejs b/views/pages/login.ejs
new file mode 100644
index 0000000..bbdc922
--- /dev/null
+++ b/views/pages/login.ejs
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Admin Login - Vorel</title>
+  <style>
+    :root {
+      --primary: #ff6b35;
+      --primary-dark: #d84315;
+      --bg-primary: #0a0a0a;
+      --bg-secondary: #111111;
+      --surface: #1e1e1e;
+      --surface-border: #333333;
+      --text-primary: #ffffff;
+      --text-secondary: #b3b3b3;
+      --error: #f44336;
+      --spacing-lg: 24px;
+      --spacing-xl: 32px;
+      --radius-md: 12px;
+      --radius-lg: 16px;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      margin: 0;
+      padding: 0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .login-container {
+      background: var(--surface);
+      border: 1px solid var(--surface-border);
+      border-radius: var(--radius-lg);
+      padding: var(--spacing-xl);
+      max-width: 400px;
+      width: 100%;
+      margin: var(--spacing-lg);
+      text-align: center;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    }
+    
+    .logo {
+      max-width: 120px;
+      height: auto;
+      margin-bottom: var(--spacing-lg);
+      filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
+    }
+    
+    h1 {
+      color: var(--primary);
+      margin-bottom: var(--spacing-lg);
+      font-size: 1.75rem;
+      font-weight: 700;
+    }
+    
+    .subtitle {
+      color: var(--text-secondary);
+      margin-bottom: var(--spacing-xl);
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+    
+    .error-message {
+      background: rgba(244, 67, 54, 0.2);
+      color: var(--error);
+      border: 1px solid var(--error);
+      border-radius: var(--radius-md);
+      padding: 12px;
+      margin-bottom: var(--spacing-lg);
+      font-size: 0.9rem;
+    }
+    
+    .github-login-btn {
+      background: #24292e;
+      color: white;
+      border: none;
+      border-radius: var(--radius-md);
+      padding: 14px 24px;
+      font-size: 1rem;
+      font-weight: 500;
+      text-decoration: none;
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+    
+    .github-login-btn:hover {
+      background: #1b1f23;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+    
+    .github-icon {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+    
+    .info-text {
+      color: var(--text-secondary);
+      font-size: 0.875rem;
+      margin-top: var(--spacing-lg);
+      line-height: 1.4;
+    }
+    
+    .back-link {
+      color: var(--primary);
+      text-decoration: none;
+      font-size: 0.9rem;
+      margin-top: var(--spacing-lg);
+      display: inline-block;
+      transition: color 0.2s ease;
+    }
+    
+    .back-link:hover {
+      color: var(--primary-dark);
+    }
+    
+    @media (max-width: 480px) {
+      .login-container {
+        margin: var(--spacing-lg) 16px;
+        padding: var(--spacing-lg);
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="login-container">
+    <img src="/banner2.avif" alt="Vorel Logo" class="logo" />
+    
+    <h1>Admin Login</h1>
+    <p class="subtitle">Sign in with your GitHub account to access the admin panel</p>
+    
+    <% if (error) { %>
+      <div class="error-message">
+        <% if (error === 'auth_failed') { %>
+          Authentication failed. Please try again or contact an administrator if you believe you should have access.
+        <% } else { %>
+          <%= error %>
+        <% } %>
+      </div>
+    <% } %>
+    
+    <a href="/auth/github" class="github-login-btn">
+      <svg class="github-icon" viewBox="0 0 24 24">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
+      </svg>
+      Sign in with GitHub
+    </a>
+    
+    <div class="info-text">
+      Only authorized GitHub users can access the admin panel.
+    </div>
+    
+    <a href="/" class="back-link">← Back to Home</a>
+  </div>
+</body>
+</html>
diff --git a/views/style/style-admin.ejs b/views/style/style-admin.ejs
new file mode 100644
index 0000000..96f0e3a
--- /dev/null
+++ b/views/style/style-admin.ejs
@@ -0,0 +1,341 @@
+<style>
+  :root {
+    --primary: #ff6b35;
+    --success: #4caf50;
+    --warning: #ff9800;
+    --error: #f44336;
+    --info: #2196f3;
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --surface: #1e1e1e;
+    --surface-hover: #2a2a2a;
+    --surface-border: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --text-tertiary: #888888;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --radius-md: 12px;
+  }
+  
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    margin: 0;
+    padding: var(--spacing-lg);
+  }
+  
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+    flex-wrap: wrap;
+    gap: var(--spacing-md);
+  }
+  
+  .user-info {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+  }
+  
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 2px solid var(--surface-border);
+  }
+  
+  .user-name {
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+  
+  .btn-logout {
+    background: var(--error);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-size: 0.9em;
+    font-weight: 500;
+  }
+  
+  .btn-logout:hover {
+    filter: brightness(1.1);
+  }
+  
+  h1 {
+    color: var(--primary);
+    margin: 0;
+  }
+  
+  .notice-form {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+  }
+  
+  .form-group {
+    margin-bottom: var(--spacing-md);
+  }
+  
+  label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+  
+  input, select, textarea {
+    width: 100%;
+    padding: 12px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-family: inherit;
+    box-sizing: border-box;
+  }
+  
+  input:focus, select:focus, textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
+  }
+  
+  textarea {
+    height: 120px;
+    resize: vertical;
+    line-height: 1.5;
+    font-size: 14px;
+  }
+  
+  input::placeholder, textarea::placeholder {
+    color: var(--text-tertiary);
+    opacity: 1;
+  }
+  
+  button {
+    background: var(--primary);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    font-weight: 500;
+    margin-right: 8px;
+  }
+  
+  button:hover {
+    filter: brightness(1.1);
+  }
+  
+  .btn-success { background: var(--success); }
+  .btn-warning { background: var(--warning); }
+  .btn-error { background: var(--error); }
+  .btn-info { background: var(--info); }
+  
+  .notices-list {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-lg);
+  }
+  
+  .notice-item {
+    border-bottom: 1px solid var(--surface-border);
+    padding: var(--spacing-md) 0;
+  }
+  
+  .notice-item:last-child {
+    border-bottom: none;
+  }
+  
+  .notice-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  
+  .notice-title {
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  
+  .notice-type {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 0.8em;
+    font-weight: 500;
+  }
+  
+  .type-info { background: var(--info); color: white; }
+  .type-warning { background: var(--warning); color: white; }
+  .type-success { background: var(--success); color: white; }
+  .type-danger { background: var(--error); color: white; }
+  
+  .notice-content {
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+  }
+  
+  .notice-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  .notice-actions button {
+    padding: 6px 12px;
+    font-size: 0.9em;
+  }
+  
+  .message {
+    padding: 12px;
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-md);
+  }
+  
+  .message.success {
+    background: rgba(76, 175, 80, 0.2);
+    color: var(--success);
+    border: 1px solid var(--success);
+  }
+  
+  .message.error {
+    background: rgba(244, 67, 54, 0.2);
+    color: var(--error);
+    border: 1px solid var(--error);
+  }
+
+  /* Modal Styles */
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    animation: modalFadeIn 0.2s ease-out;
+  }
+  
+  .modal-content {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-md);
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow: auto;
+    animation: modalSlideIn 0.3s ease-out;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  }
+  
+  .modal-header {
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--surface-border);
+  }
+  
+  .modal-header h3 {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 1.2rem;
+  }
+  
+  .modal-body {
+    padding: var(--spacing-lg);
+  }
+  
+  .modal-body p {
+    margin: 0 0 var(--spacing-md) 0;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    white-space: pre-line;
+  }
+  
+  .modal-body #modalInput {
+    margin-top: var(--spacing-md);
+  }
+  
+  .modal-body label {
+    display: block;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+    font-weight: 500;
+  }
+  
+  .modal-body input {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--surface-border);
+    border-radius: 8px;
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+    font-size: 1rem;
+    box-sizing: border-box;
+  }
+  
+  .modal-body input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.2);
+  }
+  
+  .modal-actions {
+    padding: var(--spacing-lg);
+    border-top: 1px solid var(--surface-border);
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+  
+  .modal-actions button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .btn-secondary {
+    background: var(--surface-border);
+    color: var(--text-primary);
+  }
+  
+  .btn-secondary:hover {
+    background: var(--surface-hover);
+  }
+  
+  @keyframes modalFadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  @keyframes modalSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-20px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+</style>
diff --git a/views/style/style-home.ejs b/views/style/style-home.ejs
index f7f46ff..74c0f8e 100644
--- a/views/style/style-home.ejs
+++ b/views/style/style-home.ejs
@@ -181,6 +181,10 @@
   }
 
   /* Notice Sections - Modern Card Style */
+  .info-notice,
+  .warning-notice,
+  .success-notice,
+  .danger-notice,
   .api-update-notice,
   .championship-notice {
     background: var(--surface);
@@ -192,6 +196,7 @@
     overflow: hidden;
   }
 
+  .info-notice::before,
   .api-update-notice::before {
     content: '';
     position: absolute;
@@ -199,9 +204,20 @@
     left: 0;
     width: 4px;
     height: 100%;
-    background: var(--gradient-primary);
+    background: var(--info);
+  }
+
+  .warning-notice::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--warning);
   }
 
+  .success-notice::before,
   .championship-notice::before {
     content: '';
     position: absolute;
@@ -212,6 +228,16 @@
     background: var(--success);
   }
 
+  .danger-notice::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background: var(--error);
+  }
+
   .notice-content h3 {
     margin: 0 0 var(--spacing-sm);
     color: var(--text-primary);
@@ -219,11 +245,22 @@
     font-weight: 600;
   }
 
+  .info-notice .notice-content h3,
   .api-update-notice .notice-content h3 {
-    background: var(--gradient-primary);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--info);
+  }
+
+  .warning-notice .notice-content h3 {
+    color: var(--warning);
+  }
+
+  .success-notice .notice-content h3,
+  .championship-notice .notice-content h3 {
+    color: var(--success);
+  }
+
+  .danger-notice .notice-content h3 {
+    color: var(--error);
   }
 
   .notice-content p {

From 89916f1f6583608e45995c18ca17b404705fd6fa Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Sun, 29 Jun 2025 14:12:28 -0400
Subject: [PATCH 03/26] fix: hide notice actions for inactive users to improve
 UI clarity

---
 views/dashboard/admin/users.ejs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/views/dashboard/admin/users.ejs b/views/dashboard/admin/users.ejs
index 64e8291..2cd74f6 100644
--- a/views/dashboard/admin/users.ejs
+++ b/views/dashboard/admin/users.ejs
@@ -263,6 +263,7 @@
               </div>
               ${!isProtected ? `
                 <div class="notice-actions">
+                  <!--
                   ${isActive ? `
                     <button onclick="toggleUser('${user.github_username}', false)" class="btn-warning" 
                             title="Temporarily disable login access (user data preserved)">
@@ -274,6 +275,7 @@
                       Restore Access
                     </button>
                   `}
+                  -->
                   <button onclick="removeUser('${user.github_username}')" class="btn-error"
                           title="Permanently delete user from database (cannot be undone)">
                     Delete Permanently

From e5a77c39e16658bf949a0fadd56d3b68481884d0 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Mon, 30 Jun 2025 15:56:25 -0400
Subject: [PATCH 04/26] chore: remove unused test database file to clean up the
 repository

---
 test-db.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 test-db.js

diff --git a/test-db.js b/test-db.js
deleted file mode 100644
index e69de29..0000000

From ba032532cb1ab0abb8059bcb032b5080ed96f62b Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Mon, 30 Jun 2025 16:49:35 -0400
Subject: [PATCH 05/26] feat: add session expiration logic to user
 serialization and deserialization

---
 src/server/helpers/auth.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/server/helpers/auth.js b/src/server/helpers/auth.js
index 7892471..d1e1ca3 100644
--- a/src/server/helpers/auth.js
+++ b/src/server/helpers/auth.js
@@ -140,17 +140,25 @@ function initializeAuth() {
 
   // Serialize user for session
   passport.serializeUser((user, done) => {
+    // Store a sessionIssued timestamp for session expiration logic
     done(null, {
       id: user.id,
       username: user.username,
       displayName: user.displayName,
       email: user.email,
-      avatarUrl: user.avatarUrl
+      avatarUrl: user.avatarUrl,
+      sessionIssued: Date.now()
     });
   });
 
   // Deserialize user from session
   passport.deserializeUser((user, done) => {
+    // Check if session is older than 48 hours (172800000 ms)
+    const now = Date.now();
+    if (user.sessionIssued && (now - user.sessionIssued > 172800000)) {
+      // Session is older than 48 hours, force re-authentication
+      return done(null, false);
+    }
     done(null, user);
   });
 }

From 58b1ac5fcd57a0e445781acb34e20400be3a561f Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Mon, 30 Jun 2025 17:44:35 -0400
Subject: [PATCH 06/26] Removed Node_ENV because its useless, added reason why
 database URL is not used

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 291e2b6..f14f05b 100644
--- a/.env.example
+++ b/.env.example
@@ -4,9 +4,9 @@ TBA_API_Key=TBA_API_KEY
 
 # Server Configuration
 PORT=3002
-NODE_ENV=development
 
 # Database Configuration
+# Why not URL? Because the database is connected inside the Docker container and only inside the container, so its flexible if you ever move it out, you just need to change the ip
 DB_HOST=localhost
 DB_PORT=3306
 DB_NAME=vorel

From be50c28ffa9894f265f9248428efc54a0a4f95ea Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Mon, 30 Jun 2025 17:45:34 -0400
Subject: [PATCH 07/26] made it a joke because the last on even through its
 ment to be a reason its not really one tbh

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index f14f05b..2699547 100644
--- a/.env.example
+++ b/.env.example
@@ -6,7 +6,7 @@ TBA_API_Key=TBA_API_KEY
 PORT=3002
 
 # Database Configuration
-# Why not URL? Because the database is connected inside the Docker container and only inside the container, so its flexible if you ever move it out, you just need to change the ip
+# Why not URL? to be honest don't know.
 DB_HOST=localhost
 DB_PORT=3306
 DB_NAME=vorel

From e3bbc16069a919aa91823c6710124ce7c64019c7 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:18:01 -0400
Subject: [PATCH 08/26] fix: update changelog link to use relative URL for
 consistency

---
 views/pages/home.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index e666246..a503663 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -198,7 +198,7 @@
       <div class="footer-info">Data provided by FIRST Nexus API & The Blue Alliance APIs</div>
       <div class="footer-copyright">Vorel App © 2025 • 
   <a href="https://github.com/1334Robotics/vorel-app">GitHub</a> • 
-  <a href="https://vorel.app/changelog">Changelog</a>
+  <a href="/changelog">Changelog</a>
 </div>
     </div>
   </footer>

From 4f31fe75141836ba13a2d27ff3b4a98f6e713fae Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:32:43 -0400
Subject: [PATCH 09/26] fix: remove fallback callback URL for GitHub strategy
 to enforce environment variable usage

---
 src/server/helpers/auth.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/server/helpers/auth.js b/src/server/helpers/auth.js
index d1e1ca3..3c9d294 100644
--- a/src/server/helpers/auth.js
+++ b/src/server/helpers/auth.js
@@ -107,7 +107,7 @@ function initializeAuth() {
   passport.use(new GitHubStrategy({
     clientID: process.env.GITHUB_CLIENT_ID,
     clientSecret: process.env.GITHUB_CLIENT_SECRET,
-    callbackURL: process.env.GITHUB_CALLBACK_URL || "http://localhost:3002/auth/github/callback"
+    callbackURL: process.env.GITHUB_CALLBACK_URL
   },
   async (accessToken, refreshToken, profile, done) => {
     try {

From c24a475ee9205168b0206d1527bf9b32ad73e4da Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:38:33 -0400
Subject: [PATCH 10/26] fix: enhance GitHub OAuth error handling and
 configuration checks

---
 src/server/helpers/auth.js      | 19 +++++++++++++--
 src/server/index.js             | 40 ++++++++++++++++++++++++--------
 src/server/routes/auth.js       | 41 ++++++++++++++++++++++-----------
 views/dashboard/admin/login.ejs |  2 ++
 4 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/src/server/helpers/auth.js b/src/server/helpers/auth.js
index 3c9d294..1b45fce 100644
--- a/src/server/helpers/auth.js
+++ b/src/server/helpers/auth.js
@@ -189,16 +189,31 @@ function requireAuthAPI(req, res, next) {
 // Check if authentication is properly configured
 function checkAuthConfig() {
   const required = ['GITHUB_CLIENT_ID', 'GITHUB_CLIENT_SECRET'];
-  const missing = required.filter(key => !process.env[key]);
+  const missing = required.filter(key => !process.env[key] || process.env[key].trim() === '');
   
   if (missing.length > 0) {
     console.error('Missing required environment variables for GitHub OAuth:');
-    missing.forEach(key => console.error(`   - ${key}`));
+    missing.forEach(key => {
+      const value = process.env[key];
+      if (!value) {
+        console.error(`   - ${key}: not set`);
+      } else if (value.trim() === '') {
+        console.error(`   - ${key}: empty string`);
+      }
+    });
     console.error('   Please set these in your .env file or environment');
+    console.error('   Authentication routes will be disabled until configured');
     return false;
   }
   
+  // Additional validation
+  if (!process.env.GITHUB_CALLBACK_URL) {
+    console.warn('Warning: GITHUB_CALLBACK_URL not set, using default');
+  }
+  
   console.log('GitHub OAuth configuration found');
+  console.log(`   Client ID: ${process.env.GITHUB_CLIENT_ID.substring(0, 8)}...`);
+  console.log(`   Callback URL: ${process.env.GITHUB_CALLBACK_URL || 'not set'}`);
   return true;
 }
 
diff --git a/src/server/index.js b/src/server/index.js
index 44c5434..c83ac07 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -128,11 +128,38 @@ async function startServer() {
     res.sendFile(path.join(__dirname, "../../views/public/icon.avif"));
   });
 
+  // Check authentication configuration first
+  const authConfigured = checkAuthConfig();
+  if (authConfigured) {
+    initializeAuth();
+    console.log('Authentication system initialized');
+  } else {
+    console.log('Authentication system disabled - missing configuration');
+  }
+
   app.use("/", Routes);
   app.use("/api", apiRoutes);
   app.use("/embed", embedRoutes);
-  app.use("/auth", authRoutes);
-  app.use("/admin", adminRoutes);
+  
+  // Only register auth and admin routes if authentication is configured
+  if (authConfigured) {
+    app.use("/auth", authRoutes);
+    app.use("/admin", adminRoutes);
+  } else {
+    // Provide fallback routes when auth is disabled
+    app.use("/auth/*", (req, res) => {
+      res.status(503).json({ 
+        error: 'Authentication system unavailable',
+        message: 'GitHub OAuth is not configured on this server'
+      });
+    });
+    app.use("/admin/*", (req, res) => {
+      res.status(503).json({ 
+        error: 'Admin system unavailable',
+        message: 'Authentication is required for admin access'
+      });
+    });
+  }
 
   // Add 404 handler for all unmatched routes
   app.use((req, res) => {
@@ -144,18 +171,11 @@ async function startServer() {
   const server = app.listen(PORT, () => {
     console.log(`Server running on port ${PORT}`);
     
-    // Check authentication configuration
-    const authConfigured = checkAuthConfig();
+    // Initialize admin cache if auth is configured
     if (authConfigured) {
-      initializeAuth();
-      console.log('Authentication system initialized');
-      
-      // Initialize admin cache
       updateAdminCache().catch(error => {
         console.error('Failed to initialize admin cache:', error);
       });
-    } else {
-      console.log('Authentication system disabled - missing configuration');
     }
     
     // Initialize event cache, database, and changelog after server starts
diff --git a/src/server/routes/auth.js b/src/server/routes/auth.js
index 6d2c821..a472378 100644
--- a/src/server/routes/auth.js
+++ b/src/server/routes/auth.js
@@ -19,24 +19,37 @@ router.get('/login', (req, res) => {
 });
 
 // GitHub OAuth initiation
-router.get('/github', passport.authenticate('github', { 
-  scope: ['user:email'] 
-}));
+router.get('/github', (req, res, next) => {
+  // Check if GitHub strategy is available
+  if (!passport._strategy('github')) {
+    console.error('GitHub OAuth strategy not configured');
+    return res.redirect('/auth/login?error=oauth_not_configured');
+  }
+  
+  passport.authenticate('github', { 
+    scope: ['user:email'] 
+  })(req, res, next);
+});
 
 // GitHub OAuth callback
-router.get('/github/callback', 
+router.get('/github/callback', (req, res, next) => {
+  // Check if GitHub strategy is available
+  if (!passport._strategy('github')) {
+    console.error('GitHub OAuth strategy not configured for callback');
+    return res.redirect('/auth/login?error=oauth_not_configured');
+  }
+  
   passport.authenticate('github', { 
     failureRedirect: '/auth/login?error=auth_failed' 
-  }),
-  (req, res) => {
-    // Successful authentication
-    const returnTo = req.session.returnTo || '/admin';
-    delete req.session.returnTo;
-    
-    console.log(`User ${req.user.username} successfully authenticated`);
-    res.redirect(returnTo);
-  }
-);
+  })(req, res, next);
+}, (req, res) => {
+  // Successful authentication
+  const returnTo = req.session.returnTo || '/admin';
+  delete req.session.returnTo;
+  
+  console.log(`User ${req.user.username} successfully authenticated`);
+  res.redirect(returnTo);
+});
 
 // Logout
 router.post('/logout', requireAuth, (req, res) => {
diff --git a/views/dashboard/admin/login.ejs b/views/dashboard/admin/login.ejs
index 9a42df3..3a261b6 100644
--- a/views/dashboard/admin/login.ejs
+++ b/views/dashboard/admin/login.ejs
@@ -127,6 +127,8 @@
       <div class="error-message">
         <% if (error === 'auth_failed') { %>
           Authentication failed. Please try again or contact an administrator if you believe you should have access.
+        <% } else if (error === 'oauth_not_configured') { %>
+          GitHub OAuth is not configured on this server. Please contact the administrator.
         <% } else { %>
           <%= error %>
         <% } %>

From a6c5cb01b1598c748e82b61119d97a61e40030b7 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:45:16 -0400
Subject: [PATCH 11/26] fix: add GitHub OAuth environment variables to Docker
 Compose files

---
 docker-compose-dockploy.yml | 3 +++
 docker-compose.yml          | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docker-compose-dockploy.yml b/docker-compose-dockploy.yml
index a1fa46e..c0752f7 100644
--- a/docker-compose-dockploy.yml
+++ b/docker-compose-dockploy.yml
@@ -15,6 +15,9 @@ services:
       - DB_NAME=vorel
       - DB_USER=${DB_USER:-vorel}
       - DB_PASSWORD=${DB_PASSWORD}
+      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL}
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
     depends_on:
       - mariadb
     networks:
diff --git a/docker-compose.yml b/docker-compose.yml
index c7e52a0..12f2127 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -39,7 +39,10 @@ services:
       - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASSWORD}
       - MYSQL_DATABASE=vorel
       - MYSQL_USER=${DB_USER:-vorel}
-      - MYSQL_PASSWORD=${DB_PASSWORD}    
+      - MYSQL_PASSWORD=${DB_PASSWORD}
+      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL}
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}    
     volumes:
       - mariadb_data:/var/lib/mysql
     networks:

From 2f9b45439e3da1762fc86382dee0a362e97310d8 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:48:05 -0400
Subject: [PATCH 12/26] fix: enhance session management with cleanup for
 expired sessions

---
 src/server/index.js | 42 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/server/index.js b/src/server/index.js
index c83ac07..9c38ee0 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -44,18 +44,54 @@ async function startServer() {
   
   console.log(`Session max age set to: ${Math.floor(sessionMaxAge / 1000 / 60)} minutes`);
   
-  app.use(session({
+  const sessionMiddleware = session({
     secret: encryptionKey,
     resave: false,
     saveUninitialized: false,
+    rolling: true, // Reset session expiration on each request
     cookie: {
       secure: process.env.NODE_ENV === 'production', // Use secure cookies in production
       httpOnly: true,
       maxAge: sessionMaxAge, // Expire with key rotation
       sameSite: 'lax' // Allow OAuth redirects while maintaining security
     },
-    name: 'vorel.sid' // Custom session name
-  }));
+    name: 'vorel.sid', // Custom session name
+    // Cleanup function to prevent memory leaks
+    genid: function() {
+      return require('crypto').randomBytes(16).toString('hex');
+    }
+  });
+  
+  app.use(sessionMiddleware);
+
+  // Periodic cleanup of expired sessions from memory store
+  setInterval(() => {
+    const store = sessionMiddleware.store;
+    if (store && typeof store.all === 'function') {
+      store.all((err, sessions) => {
+        if (err) return;
+        const now = Date.now();
+        let cleanedCount = 0;
+        
+        Object.keys(sessions || {}).forEach(sessionId => {
+          const session = sessions[sessionId];
+          if (session && session.cookie && session.cookie.expires) {
+            const expiry = new Date(session.cookie.expires).getTime();
+            if (now > expiry) {
+              store.destroy(sessionId, () => {});
+              cleanedCount++;
+            }
+          }
+        });
+        
+        if (cleanedCount > 0) {
+          console.log(`Cleaned up ${cleanedCount} expired sessions from memory`);
+        }
+      });
+    }
+  }, 15 * 60 * 1000); // Clean up every 15 minutes
+  
+  console.log('Session cleanup enabled - expired sessions will be purged every 15 minutes');
 
   // Initialize Passport
   app.use(passport.initialize());

From f22277b755d4ff9224c1ad0ee31b6fd650233fc8 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 22:51:33 -0400
Subject: [PATCH 13/26] fixed docker-compose

---
 docker-compose-dockploy.yml | 1 +
 docker-compose.yml          | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/docker-compose-dockploy.yml b/docker-compose-dockploy.yml
index c0752f7..47a0950 100644
--- a/docker-compose-dockploy.yml
+++ b/docker-compose-dockploy.yml
@@ -18,6 +18,7 @@ services:
       - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL}
       - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
       - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
+      - AUTHORIZED_GITHUB_USERS=${AUTHORIZED_GITHUB_USERS}
     depends_on:
       - mariadb
     networks:
diff --git a/docker-compose.yml b/docker-compose.yml
index 12f2127..d6c6448 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,6 +17,10 @@ services:
       - DB_NAME=vorel
       - DB_USER=${DB_USER:-vorel}
       - DB_PASSWORD=${DB_PASSWORD}
+      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL}
+      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
+      - AUTHORIZED_GITHUB_USERS=${AUTHORIZED_GITHUB_USERS}
     depends_on:
       - mariadb
     networks:
@@ -40,9 +44,6 @@ services:
       - MYSQL_DATABASE=vorel
       - MYSQL_USER=${DB_USER:-vorel}
       - MYSQL_PASSWORD=${DB_PASSWORD}
-      - GITHUB_CALLBACK_URL=${GITHUB_CALLBACK_URL}
-      - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
-      - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}    
     volumes:
       - mariadb_data:/var/lib/mysql
     networks:

From e18473274dbdc01a734bac424dbb8cf7db8fc42e Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 2 Jul 2025 23:00:29 -0400
Subject: [PATCH 14/26] fix: update session cookie name to 'vorel.sid' for
 consistency fix: enable auto-detection of secure cookies for proxy support

---
 src/server/index.js       | 6 +++++-
 src/server/routes/auth.js | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/server/index.js b/src/server/index.js
index 9c38ee0..b32d990 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -19,6 +19,10 @@ const { initializeAuth, checkAuthConfig, passport, updateAdminCache } = require(
 const { initializeEncryption, getNextRotationTime, KEY_ROTATION_INTERVAL } = require("./helpers/encryption");
 
 const app = express();
+
+// Trust proxy for proper HTTPS detection through Cloudflare/reverse proxies
+app.set('trust proxy', true);
+
 const Routes = require("./routes/apex");
 const apiRoutes = require("./routes/api");
 const embedRoutes = require("./routes/embed");
@@ -50,7 +54,7 @@ async function startServer() {
     saveUninitialized: false,
     rolling: true, // Reset session expiration on each request
     cookie: {
-      secure: process.env.NODE_ENV === 'production', // Use secure cookies in production
+      secure: 'auto', // Auto-detect secure connections (works with proxies)
       httpOnly: true,
       maxAge: sessionMaxAge, // Expire with key rotation
       sameSite: 'lax' // Allow OAuth redirects while maintaining security
diff --git a/src/server/routes/auth.js b/src/server/routes/auth.js
index a472378..5451518 100644
--- a/src/server/routes/auth.js
+++ b/src/server/routes/auth.js
@@ -66,7 +66,7 @@ router.post('/logout', requireAuth, (req, res) => {
       }
       
       console.log(`User ${username} logged out`);
-      res.clearCookie('connect.sid'); // Clear session cookie
+      res.clearCookie('vorel.sid'); // Clear session cookie with correct name
       res.redirect('/');
     });
   });
@@ -87,7 +87,7 @@ router.get('/logout', requireAuth, (req, res) => {
       }
       
       console.log(`User ${username} logged out`);
-      res.clearCookie('connect.sid'); // Clear session cookie
+      res.clearCookie('vorel.sid'); // Clear session cookie with correct name
       res.redirect('/');
     });
   });

From 01499039957fa987dfead541a854280f9cd2dcbf Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Thu, 3 Jul 2025 22:09:59 -0400
Subject: [PATCH 15/26] feat: implement FRC Nexus webhook support and
 statistics tracking

---
 .env.example                    |   5 +
 README.md                       |  27 ++++
 docker-compose-dockploy.yml     |   7 +-
 docker-compose.yml              |   7 +-
 src/server/routes/admin.js      |  26 +++-
 src/server/routes/api.js        | 218 ++++++++++++++++++++++++++++++++
 views/dashboard/admin/index.ejs |  95 ++++++++++++++
 views/partials/scripts.ejs      |  17 +++
 8 files changed, 395 insertions(+), 7 deletions(-)

diff --git a/.env.example b/.env.example
index 2699547..83e4bf2 100644
--- a/.env.example
+++ b/.env.example
@@ -2,6 +2,11 @@
 Nexus_Api_Key=API_KEY
 TBA_API_Key=TBA_API_KEY
 
+# Webhook Configuration
+# Token for verifying incoming webhooks from FRC Nexus
+# Get this from https://frc.nexus/api after registering your webhook endpoint
+NEXUS_WEBHOOK_TOKEN=your_nexus_webhook_token_here
+
 # Server Configuration
 PORT=3002
 
diff --git a/README.md b/README.md
index 7eff4f4..f5f8b73 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,33 @@ cp .env.example .env
    - Get a Nexus API key from [FIRST Nexus](https://frc.nexus)
    - Get a TBA API key from [The Blue Alliance](https://www.thebluealliance.com/account)
 
+### Real-time Updates Setup (Optional)
+
+Vorel supports real-time match updates via FRC Nexus webhooks for instant notifications instead of polling:
+
+1. **Configure the webhook token** in your `.env` file:
+   ```bash
+   NEXUS_WEBHOOK_TOKEN=your_webhook_token_here
+   ```
+
+2. **Register your webhook endpoint** at [frc.nexus/api](https://frc.nexus/api):
+   - **Webhook URL**: `https://your-domain.com/api/webhook/nexus`
+   - **Token**: Use the same token you set in `NEXUS_WEBHOOK_TOKEN`
+   - **Event Type**: Live event status (general) or Match status (team-specific)
+
+3. **Benefits of webhook setup**:
+   - Instant updates when match status changes (no 5-second polling delay)
+   - More efficient - only updates when there's actual data changes
+   - Lower server load and API usage
+   - Real-time notifications for teams using your instance
+
+4. **Monitoring**: 
+   - View webhook statistics in the admin dashboard at `/admin`
+   - Check endpoint `/api/webhook-stats` for webhook metrics
+   - Check endpoint `/api/sse-stats` for active connections
+
+Without webhook setup, the system will continue to work using 5-second polling, which is still very responsive.
+
 ## Usage
 
 ### Running locally
diff --git a/docker-compose-dockploy.yml b/docker-compose-dockploy.yml
index 47a0950..56effe6 100644
--- a/docker-compose-dockploy.yml
+++ b/docker-compose-dockploy.yml
@@ -10,6 +10,7 @@ services:
       - PORT=${Port:-3002}
       - Nexus_Api_Key=${Nexus_Api_Key}
       - TBA_API_Key=${TBA_API_Key}
+      - NEXUS_WEBHOOK_TOKEN=${NEXUS_WEBHOOK_TOKEN}
       - DB_HOST=mariadb
       - DB_PORT=3306
       - DB_NAME=vorel
@@ -22,7 +23,7 @@ services:
     depends_on:
       - mariadb
     networks:
-      - app-network
+      - vorel-app-network
       - dokploy-network
     healthcheck:
       test: ["CMD", "wget", "-qO-", "http://localhost:${Port:-3002}/api/health"]
@@ -46,7 +47,7 @@ services:
     volumes:
       - mariadb_data:/var/lib/mysql
     networks:
-      - app-network
+      - vorel-app-network
     healthcheck:
       test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
       interval: 30s
@@ -67,7 +68,7 @@ volumes:
   mariadb_data:
 
 networks:
-  app-network:
+  vorel-app-network:
     driver: bridge
   dokploy-network:
     external: true
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index d6c6448..35b5e1c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,6 +12,7 @@ services:
       - PORT=${Port:-3002}
       - Nexus_Api_Key=${Nexus_Api_Key}
       - TBA_API_Key=${TBA_API_Key}
+      - NEXUS_WEBHOOK_TOKEN=${NEXUS_WEBHOOK_TOKEN}
       - DB_HOST=mariadb
       - DB_PORT=3306
       - DB_NAME=vorel
@@ -24,7 +25,7 @@ services:
     depends_on:
       - mariadb
     networks:
-      - app-network
+      - vorel-app-network
     healthcheck:
       test: ["CMD", "wget", "-qO-", "http://localhost:${Port:-3002}/api/health"]
       interval: 30s
@@ -47,7 +48,7 @@ services:
     volumes:
       - mariadb_data:/var/lib/mysql
     networks:
-      - app-network
+      - vorel-app-network
     healthcheck:
       test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
       interval: 30s
@@ -68,5 +69,5 @@ volumes:
   mariadb_data:
 
 networks:
-  app-network:
+  vorel-app-network:
     driver: bridge
diff --git a/src/server/routes/admin.js b/src/server/routes/admin.js
index 3c5cd5a..ba1fe12 100644
--- a/src/server/routes/admin.js
+++ b/src/server/routes/admin.js
@@ -255,13 +255,37 @@ router.get('/system-status', requireAuth, async (req, res) => {
       timestamp: Date.now()
     };
     
+    // Get webhook statistics from API routes
+    let webhookStats = null;
+    try {
+      const response = await fetch(`http://localhost:${process.env.PORT || 3002}/api/webhook-stats`);
+      if (response.ok) {
+        webhookStats = await response.json();
+      }
+    } catch (error) {
+      console.warn('Could not fetch webhook stats:', error.message);
+    }
+    
+    // Get SSE connection statistics
+    let sseStats = null;
+    try {
+      const response = await fetch(`http://localhost:${process.env.PORT || 3002}/api/sse-stats`);
+      if (response.ok) {
+        sseStats = await response.json();
+      }
+    } catch (error) {
+      console.warn('Could not fetch SSE stats:', error.message);
+    }
+    
     const status = {
       database: {
         connected: dbConnected,
         stats: dbStats
       },
       encryption: encryptionStatus,
-      server: serverStatus
+      server: serverStatus,
+      webhook: webhookStats,
+      sse: sseStats
     };
     
     res.json(status);
diff --git a/src/server/routes/api.js b/src/server/routes/api.js
index 7b1ea14..3baf411 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -9,6 +9,15 @@ const crypto = require('crypto');
 const sseConnections = new Map();
 const lastDataHashes = new Map();
 
+// Webhook statistics tracking
+const webhookStats = {
+  totalReceived: 0,
+  lastReceived: null,
+  eventsReceived: new Map(), // eventKey -> count
+  connectionsTriggered: 0,
+  lastProcessingTime: 0
+};
+
 // Add debug logging to SSE endpoints
 console.log('SSE routes loaded');
 
@@ -44,6 +53,68 @@ router.get('/sse-stats', (req, res) => {
   });
 });
 
+// Webhook statistics endpoint
+router.get('/webhook-stats', (req, res) => {
+  res.json({
+    totalReceived: webhookStats.totalReceived,
+    lastReceived: webhookStats.lastReceived ? new Date(webhookStats.lastReceived).toISOString() : null,
+    eventsReceived: Object.fromEntries(webhookStats.eventsReceived),
+    connectionsTriggered: webhookStats.connectionsTriggered,
+    lastProcessingTime: webhookStats.lastProcessingTime,
+    timestamp: Date.now()
+  });
+});
+
+// Test webhook endpoint for debugging (simulates a Nexus webhook call)
+router.post('/webhook/test', async (req, res) => {
+  try {
+    console.log('Test webhook endpoint called');
+    
+    // Create a test webhook payload
+    const testPayload = {
+      eventKey: req.body.eventKey || '2025test',
+      dataAsOfTime: Date.now(),
+      match: {
+        label: 'Test Match 1',
+        status: 'Now queuing',
+        redTeams: ['1334', '2468', '3692'],
+        blueTeams: ['4816', '5840', '6164']
+      },
+      nowQueuing: req.body.nowQueuing || 'Test Match 1'
+    };
+    
+    console.log('Sending test webhook payload:', JSON.stringify(testPayload, null, 2));
+    
+    // Call our own webhook endpoint
+    const webhookResponse = await fetch(`http://localhost:${process.env.PORT || 3002}/api/webhook/nexus`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Nexus-Token': process.env.NEXUS_WEBHOOK_TOKEN || 'test-token'
+      },
+      body: JSON.stringify(testPayload)
+    });
+    
+    const webhookResult = await webhookResponse.json();
+    
+    res.json({
+      success: true,
+      testPayload,
+      webhookResponse: {
+        status: webhookResponse.status,
+        result: webhookResult
+      }
+    });
+    
+  } catch (error) {
+    console.error('Test webhook error:', error);
+    res.status(500).json({
+      success: false,
+      error: error.message
+    });
+  }
+});
+
 // SSE endpoint for real-time updates
 router.get('/updates-stream', async (req, res) => {
   const { eventKey: rawEventKey, teamKey } = req.query;
@@ -350,6 +421,153 @@ async function getDataHash(eventKey, teamKey) {
 // Start periodic update checks for SSE clients
 setInterval(checkAndNotifyUpdates, 5000); // Check every 5 seconds
 
+// Webhook endpoint for FRC Nexus real-time notifications
+router.post('/webhook/nexus', async (req, res) => {
+  const startTime = Date.now();
+  
+  try {
+    // Update webhook statistics
+    webhookStats.totalReceived++;
+    webhookStats.lastReceived = startTime;
+    
+    // Verify the webhook token if configured
+    const nexusToken = req.headers['nexus-token'];
+    const expectedToken = process.env.NEXUS_WEBHOOK_TOKEN;
+    
+    if (expectedToken && (!nexusToken || nexusToken !== expectedToken)) {
+      console.warn('Invalid or missing Nexus webhook token from IP:', req.ip);
+      return res.status(401).json({ error: 'Invalid webhook token' });
+    }
+    
+    if (!expectedToken) {
+      console.warn('NEXUS_WEBHOOK_TOKEN not configured - webhook verification disabled');
+    }
+
+    const { eventKey, dataAsOfTime, match, nowQueuing, matches } = req.body;
+    
+    if (!eventKey) {
+      console.error('Webhook payload missing eventKey:', req.body);
+      return res.status(400).json({ error: 'Missing eventKey in webhook payload' });
+    }
+
+    // Normalize eventKey to lowercase for consistent matching
+    const normalizedEventKey = eventKey.toLowerCase();
+
+    // Track events received
+    const currentCount = webhookStats.eventsReceived.get(normalizedEventKey) || 0;
+    webhookStats.eventsReceived.set(normalizedEventKey, currentCount + 1);
+
+    console.log(`📥 Received Nexus webhook for event: ${eventKey} at ${new Date(dataAsOfTime).toISOString()}`);
+    
+    // Log additional payload details for debugging
+    if (match) {
+      console.log(`  🏆 Match update: ${match.label} - ${match.status}`);
+      if (match.redTeams && match.blueTeams) {
+        console.log(`  🔴 Red: ${match.redTeams.join(', ')} vs 🔵 Blue: ${match.blueTeams.join(', ')}`);
+      }
+    }
+    if (nowQueuing !== undefined) {
+      console.log(`  ⏳ Now queuing: ${nowQueuing || 'None'}`);
+    }
+    if (matches && Array.isArray(matches)) {
+      console.log(`  📋 Total matches in payload: ${matches.length}`);
+    }
+
+    // Check if we have any active SSE connections watching this event
+    const watchedConnections = [];
+    for (const [connectionId, connection] of sseConnections.entries()) {
+      if (connection.eventKey === normalizedEventKey) {
+        watchedConnections.push({ connectionId, connection });
+      }
+    }
+
+    if (watchedConnections.length > 0) {
+      console.log(`⚡ Found ${watchedConnections.length} active connections watching event ${eventKey} - triggering instant update`);
+      
+      // Trigger immediate update for all connections watching this event
+      let successfulUpdates = 0;
+      const updatePromises = watchedConnections.map(async ({ connectionId, connection }) => {
+        try {
+          const { res, eventKey: connEventKey, teamKey } = connection;
+          
+          // Get current data hash
+          const currentHash = await getDataHash(connEventKey, teamKey);
+          const lastHash = lastDataHashes.get(connectionId);
+          
+          // Only send update if data has actually changed
+          if (currentHash && currentHash !== lastHash) {
+            lastDataHashes.set(connectionId, currentHash);
+            
+            try {
+              res.write(`data: ${JSON.stringify({ 
+                type: 'update', 
+                hash: currentHash,
+                timestamp: Date.now(),
+                source: 'webhook' // Indicate this update came from webhook
+              })}\n\n`);
+              console.log(`✅ Sent webhook-triggered update to connection: ${connectionId}`);
+              return true; // Success
+            } catch (writeError) {
+              // Handle connection errors
+              if (writeError.code === 'ECONNABORTED' || writeError.code === 'ECONNRESET' || 
+                  writeError.message.includes('aborted') || writeError.message.includes('closed')) {
+                console.log(`🔌 Webhook update connection naturally closed: ${connectionId}`);
+              } else {
+                console.error(`❌ Error writing webhook update to ${connectionId}:`, writeError);
+              }
+              // Remove the failed connection
+              sseConnections.delete(connectionId);
+              lastDataHashes.delete(connectionId);
+              return false;
+            }
+          } else {
+            console.log(`🔄 No data change detected for connection ${connectionId} - skipping update`);
+            return false;
+          }
+        } catch (error) {
+          console.error(`❌ Error processing webhook update for connection ${connectionId}:`, error);
+          // Remove failed connection
+          sseConnections.delete(connectionId);
+          lastDataHashes.delete(connectionId);
+          return false;
+        }
+      });
+      
+      // Wait for all updates to complete
+      const results = await Promise.all(updatePromises);
+      successfulUpdates = results.filter(Boolean).length;
+      
+      webhookStats.connectionsTriggered += successfulUpdates;
+      
+      if (successfulUpdates > 0) {
+        console.log(`🎯 Successfully triggered ${successfulUpdates}/${watchedConnections.length} connections`);
+      }
+    } else {
+      console.log(`👀 No active connections watching event ${eventKey} - webhook acknowledged but not processed`);
+    }
+
+    // Record processing time
+    webhookStats.lastProcessingTime = Date.now() - startTime;
+
+    // Return success response
+    res.status(200).json({ 
+      status: 'received', 
+      eventKey: normalizedEventKey,
+      connectionsNotified: watchedConnections.length,
+      processingTime: webhookStats.lastProcessingTime,
+      timestamp: Date.now()
+    });
+
+  } catch (error) {
+    console.error('💥 Error processing Nexus webhook:', error);
+    webhookStats.lastProcessingTime = Date.now() - startTime;
+    res.status(500).json({ 
+      error: 'Internal server error processing webhook',
+      processingTime: webhookStats.lastProcessingTime
+    });
+  }
+});
+
 // Data-check endpoint to detect changes
 router.get("/data-check", async (req, res) => {
   let { eventKey: rawEventKey, teamKey, lastUpdate } = req.query;
diff --git a/views/dashboard/admin/index.ejs b/views/dashboard/admin/index.ejs
index dd67a30..9b1d978 100644
--- a/views/dashboard/admin/index.ejs
+++ b/views/dashboard/admin/index.ejs
@@ -142,6 +142,101 @@
           </div>
         `;
         
+        // Webhook statistics
+        if (status.webhook) {
+          const isConfigured = process.env.NEXUS_WEBHOOK_TOKEN ? 'Configured' : 'Not Configured';
+          const configStatus = process.env.NEXUS_WEBHOOK_TOKEN ? 'success' : 'warning';
+          
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">FRC Nexus Webhooks</span>
+                <span class="notice-type type-${configStatus}">${isConfigured}</span>
+              </div>
+              <div class="notice-content">
+                Total received: ${status.webhook.totalReceived}<br>
+                Last received: ${status.webhook.lastReceived ? new Date(status.webhook.lastReceived).toLocaleString() : 'Never'}<br>
+                Connections triggered: ${status.webhook.connectionsTriggered}<br>
+                Processing time: ${status.webhook.lastProcessingTime}ms<br>
+                ${!process.env.NEXUS_WEBHOOK_TOKEN ? '<br><strong>Warning:</strong> NEXUS_WEBHOOK_TOKEN not configured. Webhooks will work but without verification.' : ''}
+              </div>
+            </div>
+          `;
+          
+          // Show events received breakdown if there are any
+          if (Object.keys(status.webhook.eventsReceived).length > 0) {
+            const eventsBreakdown = Object.entries(status.webhook.eventsReceived)
+              .map(([eventKey, count]) => `${eventKey}: ${count}`)
+              .join('<br>');
+            
+            statusHtml += `
+              <div class="notice-item">
+                <div class="notice-header">
+                  <span class="notice-title">Webhook Events Received</span>
+                  <span class="notice-type type-info">Active</span>
+                </div>
+                <div class="notice-content">${eventsBreakdown}</div>
+              </div>
+            `;
+          }
+        } else {
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">FRC Nexus Webhooks</span>
+                <span class="notice-type type-warning">Unavailable</span>
+              </div>
+              <div class="notice-content">Could not fetch webhook statistics</div>
+            </div>
+          `;
+        }
+        
+        // SSE Connection statistics
+        if (status.sse) {
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">Real-time Connections (SSE)</span>
+                <span class="notice-type type-${status.sse.totalConnections > 0 ? 'success' : 'info'}">${status.sse.totalConnections} Active</span>
+              </div>
+              <div class="notice-content">
+                Total connections: ${status.sse.totalConnections}<br>
+                ${Object.keys(status.sse.connectionsByEvent).length > 0 ? 
+                  'Watched events: ' + Object.keys(status.sse.connectionsByEvent).length : 
+                  'No events currently being watched'
+                }
+              </div>
+            </div>
+          `;
+          
+          // Show connection breakdown if there are active connections
+          if (Object.keys(status.sse.connectionsByEvent).length > 0) {
+            const connectionsBreakdown = Object.entries(status.sse.connectionsByEvent)
+              .map(([eventTeam, data]) => `${eventTeam}: ${data.count} connection${data.count > 1 ? 's' : ''}`)
+              .join('<br>');
+            
+            statusHtml += `
+              <div class="notice-item">
+                <div class="notice-header">
+                  <span class="notice-title">Active Event Watchers</span>
+                  <span class="notice-type type-info">Live</span>
+                </div>
+                <div class="notice-content">${connectionsBreakdown}</div>
+              </div>
+            `;
+          }
+        } else {
+          statusHtml += `
+            <div class="notice-item">
+              <div class="notice-header">
+                <span class="notice-title">Real-time Connections (SSE)</span>
+                <span class="notice-type type-warning">Unavailable</span>
+              </div>
+              <div class="notice-content">Could not fetch SSE connection statistics</div>
+            </div>
+          `;
+        }
+        
         statusDiv.innerHTML = statusHtml;
         
         // Enable user management card if database is connected
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index d372e97..68657b7 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -302,6 +302,23 @@
         } else if (data.type === 'update') {
           console.log('Received update via SSE');
           lastHeartbeatTime = Date.now(); // Reset heartbeat timer on any message
+          
+          // Show different indicators for webhook vs polling updates
+          if (data.source === 'webhook') {
+            console.log('⚡ Real-time webhook update received');
+            // Show a brief flash indicator for webhook updates
+            if (updateStatus) {
+              const originalBg = updateStatus.style.backgroundColor;
+              updateStatus.style.backgroundColor = '#4fc3f7';
+              updateStatus.style.transition = 'background-color 0.3s';
+              setTimeout(() => {
+                updateStatus.style.backgroundColor = originalBg;
+              }, 500);
+            }
+          } else {
+            console.log('🔄 Polling update received');
+          }
+          
           // Update hash display with the hash from SSE
           if (data.hash && hashDisplay) {
             currentDataHash = data.hash;

From 04ab4928dcb8dc3c81fd952f4f83a0a0edef3ec1 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Thu, 3 Jul 2025 22:17:57 -0400
Subject: [PATCH 16/26] fix: enhance webhook token verification and improve
 error logging for FRC Nexus webhook

---
 src/server/routes/api.js | 36 +++++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/src/server/routes/api.js b/src/server/routes/api.js
index 3baf411..226e4e1 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -430,24 +430,42 @@ router.post('/webhook/nexus', async (req, res) => {
     webhookStats.totalReceived++;
     webhookStats.lastReceived = startTime;
     
-    // Verify the webhook token if configured
+    // Verify the webhook token from Nexus-Token header
     const nexusToken = req.headers['nexus-token'];
     const expectedToken = process.env.NEXUS_WEBHOOK_TOKEN;
     
-    if (expectedToken && (!nexusToken || nexusToken !== expectedToken)) {
-      console.warn('Invalid or missing Nexus webhook token from IP:', req.ip);
-      return res.status(401).json({ error: 'Invalid webhook token' });
+    if (expectedToken) {
+      if (!nexusToken || nexusToken !== expectedToken) {
+        console.warn('❌ Invalid or missing Nexus-Token header from IP:', req.ip);
+        console.warn('   Expected:', expectedToken);
+        console.warn('   Received:', nexusToken || 'undefined');
+        return res.status(401).json({ error: 'Invalid or missing Nexus-Token header' });
+      }
+      console.log('✅ Webhook token verified successfully');
+    } else {
+      console.warn('⚠️ NEXUS_WEBHOOK_TOKEN not configured - webhook verification disabled');
     }
-    
-    if (!expectedToken) {
-      console.warn('NEXUS_WEBHOOK_TOKEN not configured - webhook verification disabled');
+
+    // Check if this is just a validation request (empty body or only token)
+    if (!req.body || Object.keys(req.body).length === 0 || (req.body.token && !req.body.eventKey)) {
+      console.log('🔍 Received FRC Nexus webhook validation/test request');
+      return res.status(200).json({ 
+        status: 'validated',
+        message: 'Webhook endpoint ready for FRC Nexus',
+        timestamp: Date.now()
+      });
     }
 
     const { eventKey, dataAsOfTime, match, nowQueuing, matches } = req.body;
     
     if (!eventKey) {
-      console.error('Webhook payload missing eventKey:', req.body);
-      return res.status(400).json({ error: 'Missing eventKey in webhook payload' });
+      console.error('❌ Webhook payload missing eventKey. Received payload:', JSON.stringify(req.body, null, 2));
+      console.error('💡 Expected FRC Nexus webhook format with eventKey, dataAsOfTime, etc.');
+      return res.status(400).json({ 
+        error: 'Missing eventKey in webhook payload',
+        received: req.body,
+        expected: 'FRC Nexus webhook format with eventKey field'
+      });
     }
 
     // Normalize eventKey to lowercase for consistent matching

From b4ef38bf3980af30de174681eedd82cfcfc8544b Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Thu, 3 Jul 2025 22:26:09 -0400
Subject: [PATCH 17/26] fix: streamline logging messages in Nexus webhook
 endpoint for clarity

---
 src/server/routes/api.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/server/routes/api.js b/src/server/routes/api.js
index 226e4e1..51bb6c4 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -436,12 +436,12 @@ router.post('/webhook/nexus', async (req, res) => {
     
     if (expectedToken) {
       if (!nexusToken || nexusToken !== expectedToken) {
-        console.warn('❌ Invalid or missing Nexus-Token header from IP:', req.ip);
-        console.warn('   Expected:', expectedToken);
-        console.warn('   Received:', nexusToken || 'undefined');
+        console.warn('Invalid or missing Nexus-Token header from IP:', req.ip);
+        console.warn('Expected:', expectedToken);
+        console.warn('Received:', nexusToken || 'undefined');
         return res.status(401).json({ error: 'Invalid or missing Nexus-Token header' });
       }
-      console.log('✅ Webhook token verified successfully');
+      console.log('Webhook token verified successfully');
     } else {
       console.warn('⚠️ NEXUS_WEBHOOK_TOKEN not configured - webhook verification disabled');
     }
@@ -459,8 +459,8 @@ router.post('/webhook/nexus', async (req, res) => {
     const { eventKey, dataAsOfTime, match, nowQueuing, matches } = req.body;
     
     if (!eventKey) {
-      console.error('❌ Webhook payload missing eventKey. Received payload:', JSON.stringify(req.body, null, 2));
-      console.error('💡 Expected FRC Nexus webhook format with eventKey, dataAsOfTime, etc.');
+      console.error('Webhook payload missing eventKey. Received payload:', JSON.stringify(req.body, null, 2));
+      console.error('Expected FRC Nexus webhook format with eventKey, dataAsOfTime, etc.');
       return res.status(400).json({ 
         error: 'Missing eventKey in webhook payload',
         received: req.body,
@@ -475,20 +475,20 @@ router.post('/webhook/nexus', async (req, res) => {
     const currentCount = webhookStats.eventsReceived.get(normalizedEventKey) || 0;
     webhookStats.eventsReceived.set(normalizedEventKey, currentCount + 1);
 
-    console.log(`📥 Received Nexus webhook for event: ${eventKey} at ${new Date(dataAsOfTime).toISOString()}`);
+    console.log(`Received Nexus webhook for event: ${eventKey} at ${new Date(dataAsOfTime).toISOString()}`);
     
     // Log additional payload details for debugging
     if (match) {
-      console.log(`  🏆 Match update: ${match.label} - ${match.status}`);
+      console.log(`Match update: ${match.label} - ${match.status}`);
       if (match.redTeams && match.blueTeams) {
-        console.log(`  🔴 Red: ${match.redTeams.join(', ')} vs 🔵 Blue: ${match.blueTeams.join(', ')}`);
+        console.log(`Red: ${match.redTeams.join(', ')} vs Blue: ${match.blueTeams.join(', ')}`);
       }
     }
     if (nowQueuing !== undefined) {
-      console.log(`  ⏳ Now queuing: ${nowQueuing || 'None'}`);
+      console.log(`Now queuing: ${nowQueuing || 'None'}`);
     }
     if (matches && Array.isArray(matches)) {
-      console.log(`  📋 Total matches in payload: ${matches.length}`);
+      console.log(`Total matches in payload: ${matches.length}`);
     }
 
     // Check if we have any active SSE connections watching this event
@@ -500,7 +500,7 @@ router.post('/webhook/nexus', async (req, res) => {
     }
 
     if (watchedConnections.length > 0) {
-      console.log(`⚡ Found ${watchedConnections.length} active connections watching event ${eventKey} - triggering instant update`);
+      console.log(`Found ${watchedConnections.length} active connections watching event ${eventKey} - triggering instant update`);
       
       // Trigger immediate update for all connections watching this event
       let successfulUpdates = 0;
@@ -523,7 +523,7 @@ router.post('/webhook/nexus', async (req, res) => {
                 timestamp: Date.now(),
                 source: 'webhook' // Indicate this update came from webhook
               })}\n\n`);
-              console.log(`✅ Sent webhook-triggered update to connection: ${connectionId}`);
+              console.log(`Sent webhook-triggered update to connection: ${connectionId}`);
               return true; // Success
             } catch (writeError) {
               // Handle connection errors

From b6c50621ffee8c5730b8a933de9cc42c7a09d624 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:13:51 -0400
Subject: [PATCH 18/26] fix: update system status to reflect webhook
 configuration state in admin dashboard

---
 src/server/routes/admin.js      | 2 ++
 views/dashboard/admin/index.ejs | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/server/routes/admin.js b/src/server/routes/admin.js
index ba1fe12..a59974e 100644
--- a/src/server/routes/admin.js
+++ b/src/server/routes/admin.js
@@ -261,6 +261,8 @@ router.get('/system-status', requireAuth, async (req, res) => {
       const response = await fetch(`http://localhost:${process.env.PORT || 3002}/api/webhook-stats`);
       if (response.ok) {
         webhookStats = await response.json();
+        // Add the isConfigured property here in the admin endpoint
+        webhookStats.isConfigured = !!process.env.NEXUS_WEBHOOK_TOKEN;
       }
     } catch (error) {
       console.warn('Could not fetch webhook stats:', error.message);
diff --git a/views/dashboard/admin/index.ejs b/views/dashboard/admin/index.ejs
index 9b1d978..6e3ea3a 100644
--- a/views/dashboard/admin/index.ejs
+++ b/views/dashboard/admin/index.ejs
@@ -144,8 +144,8 @@
         
         // Webhook statistics
         if (status.webhook) {
-          const isConfigured = process.env.NEXUS_WEBHOOK_TOKEN ? 'Configured' : 'Not Configured';
-          const configStatus = process.env.NEXUS_WEBHOOK_TOKEN ? 'success' : 'warning';
+          const isConfigured = status.webhook.isConfigured ? 'Configured' : 'Not Configured';
+          const configStatus = status.webhook.isConfigured ? 'success' : 'warning';
           
           statusHtml += `
             <div class="notice-item">
@@ -158,7 +158,7 @@
                 Last received: ${status.webhook.lastReceived ? new Date(status.webhook.lastReceived).toLocaleString() : 'Never'}<br>
                 Connections triggered: ${status.webhook.connectionsTriggered}<br>
                 Processing time: ${status.webhook.lastProcessingTime}ms<br>
-                ${!process.env.NEXUS_WEBHOOK_TOKEN ? '<br><strong>Warning:</strong> NEXUS_WEBHOOK_TOKEN not configured. Webhooks will work but without verification.' : ''}
+                ${!status.webhook.isConfigured ? '<br><strong>Warning:</strong> NEXUS_WEBHOOK_TOKEN not configured. Webhooks will work but without verification.' : ''}
               </div>
             </div>
           `;

From 6b66619a6781c981a61b98e1bdad47a9838efe71 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:15:33 -0400
Subject: [PATCH 19/26] fix: remove test webhook endpoint for debugging from
 API routes for security issues

---
 src/server/routes/api.js | 50 ----------------------------------------
 1 file changed, 50 deletions(-)

diff --git a/src/server/routes/api.js b/src/server/routes/api.js
index 51bb6c4..5c2c52c 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -65,56 +65,6 @@ router.get('/webhook-stats', (req, res) => {
   });
 });
 
-// Test webhook endpoint for debugging (simulates a Nexus webhook call)
-router.post('/webhook/test', async (req, res) => {
-  try {
-    console.log('Test webhook endpoint called');
-    
-    // Create a test webhook payload
-    const testPayload = {
-      eventKey: req.body.eventKey || '2025test',
-      dataAsOfTime: Date.now(),
-      match: {
-        label: 'Test Match 1',
-        status: 'Now queuing',
-        redTeams: ['1334', '2468', '3692'],
-        blueTeams: ['4816', '5840', '6164']
-      },
-      nowQueuing: req.body.nowQueuing || 'Test Match 1'
-    };
-    
-    console.log('Sending test webhook payload:', JSON.stringify(testPayload, null, 2));
-    
-    // Call our own webhook endpoint
-    const webhookResponse = await fetch(`http://localhost:${process.env.PORT || 3002}/api/webhook/nexus`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Nexus-Token': process.env.NEXUS_WEBHOOK_TOKEN || 'test-token'
-      },
-      body: JSON.stringify(testPayload)
-    });
-    
-    const webhookResult = await webhookResponse.json();
-    
-    res.json({
-      success: true,
-      testPayload,
-      webhookResponse: {
-        status: webhookResponse.status,
-        result: webhookResult
-      }
-    });
-    
-  } catch (error) {
-    console.error('Test webhook error:', error);
-    res.status(500).json({
-      success: false,
-      error: error.message
-    });
-  }
-});
-
 // SSE endpoint for real-time updates
 router.get('/updates-stream', async (req, res) => {
   const { eventKey: rawEventKey, teamKey } = req.query;

From fe4261037375af9a69743bd872d1e4dd3e4e9364 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Fri, 4 Jul 2025 10:59:49 -0400
Subject: [PATCH 20/26] fix: remove sample notice creation script to streamline
 codebase

---
 scripts/create-sample-notice.js | 60 ---------------------------------
 1 file changed, 60 deletions(-)
 delete mode 100644 scripts/create-sample-notice.js

diff --git a/scripts/create-sample-notice.js b/scripts/create-sample-notice.js
deleted file mode 100644
index 1594f97..0000000
--- a/scripts/create-sample-notice.js
+++ /dev/null
@@ -1,60 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Script to create a sample notice in the database
- * This is a one-time script to test the notice functionality
- */
-
-require('dotenv').config();
-const { createNotice, initializeDB } = require('../src/server/helpers/database');
-
-async function createSampleNotice() {
-  console.log('Initializing database connection...');
-  
-  const dbInitialized = await initializeDB();
-  if (!dbInitialized) {
-    console.error('Failed to initialize database connection');
-    process.exit(1);
-  }
-
-  console.log('Creating sample notice...');
-  
-  try {
-    const noticeData = {
-      title: '🚀 API Update',
-      content: 'Vorel has received an API update to improve the live event data. If you encounter any issues while using the app, please report them to our <a href="https://github.com/1334Robotics/vorel-app/issues" target="_blank" rel="noopener">GitHub Issues</a> page.',
-      type: 'info',
-      is_active: true,
-      priority: 10
-    };
-
-    const noticeId = await createNotice(noticeData);
-    console.log(`✅ Successfully created notice with ID: ${noticeId}`);
-    
-    // Create another sample notice
-    const noticeData2 = {
-      title: '⚠️ Maintenance Notice',
-      content: 'The site will undergo maintenance from 2:00 AM to 4:00 AM EST tomorrow. Some features may be temporarily unavailable.',
-      type: 'warning',
-      is_active: true,
-      priority: 5,
-      expires_at: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // Expires in 7 days
-    };
-
-    const noticeId2 = await createNotice(noticeData2);
-    console.log(`✅ Successfully created notice with ID: ${noticeId2}`);
-    
-  } catch (error) {
-    console.error('❌ Error creating sample notice:', error.message);
-    process.exit(1);
-  }
-
-  console.log('✅ Sample notices created successfully!');
-  process.exit(0);
-}
-
-// Run the script
-createSampleNotice().catch(error => {
-  console.error('❌ Script failed:', error);
-  process.exit(1);
-});

From 1e41576546390765eab00a74f453915e98291a2b Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Tue, 8 Jul 2025 09:14:00 -0400
Subject: [PATCH 21/26] hopefully this works? seperated login style sheet from
 login's page for organization

---
 views/pages/login.ejs       | 131 +-----------------------------------
 views/style/style-login.ejs | 131 ++++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 130 deletions(-)
 create mode 100644 views/style/style-login.ejs

diff --git a/views/pages/login.ejs b/views/pages/login.ejs
index bbdc922..7f89ff7 100644
--- a/views/pages/login.ejs
+++ b/views/pages/login.ejs
@@ -4,136 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Admin Login - Vorel</title>
-  <style>
-    :root {
-      --primary: #ff6b35;
-      --primary-dark: #d84315;
-      --bg-primary: #0a0a0a;
-      --bg-secondary: #111111;
-      --surface: #1e1e1e;
-      --surface-border: #333333;
-      --text-primary: #ffffff;
-      --text-secondary: #b3b3b3;
-      --error: #f44336;
-      --spacing-lg: 24px;
-      --spacing-xl: 32px;
-      --radius-md: 12px;
-      --radius-lg: 16px;
-    }
-    
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background: var(--bg-primary);
-      color: var(--text-primary);
-      margin: 0;
-      padding: 0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    
-    .login-container {
-      background: var(--surface);
-      border: 1px solid var(--surface-border);
-      border-radius: var(--radius-lg);
-      padding: var(--spacing-xl);
-      max-width: 400px;
-      width: 100%;
-      margin: var(--spacing-lg);
-      text-align: center;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-    }
-    
-    .logo {
-      max-width: 120px;
-      height: auto;
-      margin-bottom: var(--spacing-lg);
-      filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
-    }
-    
-    h1 {
-      color: var(--primary);
-      margin-bottom: var(--spacing-lg);
-      font-size: 1.75rem;
-      font-weight: 700;
-    }
-    
-    .subtitle {
-      color: var(--text-secondary);
-      margin-bottom: var(--spacing-xl);
-      font-size: 1rem;
-      line-height: 1.5;
-    }
-    
-    .error-message {
-      background: rgba(244, 67, 54, 0.2);
-      color: var(--error);
-      border: 1px solid var(--error);
-      border-radius: var(--radius-md);
-      padding: 12px;
-      margin-bottom: var(--spacing-lg);
-      font-size: 0.9rem;
-    }
-    
-    .github-login-btn {
-      background: #24292e;
-      color: white;
-      border: none;
-      border-radius: var(--radius-md);
-      padding: 14px 24px;
-      font-size: 1rem;
-      font-weight: 500;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 12px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-    
-    .github-login-btn:hover {
-      background: #1b1f23;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-    
-    .github-icon {
-      width: 20px;
-      height: 20px;
-      fill: currentColor;
-    }
-    
-    .info-text {
-      color: var(--text-secondary);
-      font-size: 0.875rem;
-      margin-top: var(--spacing-lg);
-      line-height: 1.4;
-    }
-    
-    .back-link {
-      color: var(--primary);
-      text-decoration: none;
-      font-size: 0.9rem;
-      margin-top: var(--spacing-lg);
-      display: inline-block;
-      transition: color 0.2s ease;
-    }
-    
-    .back-link:hover {
-      color: var(--primary-dark);
-    }
-    
-    @media (max-width: 480px) {
-      .login-container {
-        margin: var(--spacing-lg) 16px;
-        padding: var(--spacing-lg);
-      }
-    }
-  </style>
+  <%- include('../style/style-login') %>
 </head>
 <body>
   <div class="login-container">
diff --git a/views/style/style-login.ejs b/views/style/style-login.ejs
new file mode 100644
index 0000000..202f820
--- /dev/null
+++ b/views/style/style-login.ejs
@@ -0,0 +1,131 @@
+<style>
+  :root {
+    --primary: #ff6b35;
+    --primary-dark: #d84315;
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #111111;
+    --surface: #1e1e1e;
+    --surface-border: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #b3b3b3;
+    --error: #f44336;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+  }
+
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .login-container {
+    background: var(--surface);
+    border: 1px solid var(--surface-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    max-width: 400px;
+    width: 100%;
+    margin: var(--spacing-lg);
+    text-align: center;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  }
+
+  .logo {
+    max-width: 120px;
+    height: auto;
+    margin-bottom: var(--spacing-lg);
+    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
+  }
+
+  h1 {
+    color: var(--primary);
+    margin-bottom: var(--spacing-lg);
+    font-size: 1.75rem;
+    font-weight: 700;
+  }
+
+  .subtitle {
+    color: var(--text-secondary);
+    margin-bottom: var(--spacing-xl);
+    font-size: 1rem;
+    line-height: 1.5;
+  }
+
+  .error-message {
+    background: rgba(244, 67, 54, 0.2);
+    color: var(--error);
+    border: 1px solid var(--error);
+    border-radius: var(--radius-md);
+    padding: 12px;
+    margin-bottom: var(--spacing-lg);
+    font-size: 0.9rem;
+  }
+
+  .github-login-btn {
+    background: #24292e;
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    padding: 14px 24px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    width: 100%;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .github-login-btn:hover {
+    background: #1b1f23;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  }
+
+  .github-icon {
+    width: 20px;
+    height: 20px;
+    fill: currentColor;
+  }
+
+  .info-text {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-top: var(--spacing-lg);
+    line-height: 1.4;
+  }
+
+  .back-link {
+    color: var(--primary);
+    text-decoration: none;
+    font-size: 0.9rem;
+    margin-top: var(--spacing-lg);
+    display: inline-block;
+    transition: color 0.2s ease;
+  }
+
+  .back-link:hover {
+    color: var(--primary-dark);
+  }
+
+  @media (max-width: 480px) {
+    .login-container {
+      margin: var(--spacing-lg) 16px;
+      padding: var(--spacing-lg);
+    }
+  }
+</style>

From b77842b1be275004676c3ebd9ece5d25bbffcb91 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Tue, 8 Jul 2025 09:17:34 -0400
Subject: [PATCH 22/26] updated nodejs in dockerfile to use latest node.js
 alpine

---
 Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile b/Dockerfile
index da7bfcd..dcd19eb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:23-alpine
+FROM node:current-alpine
 
 WORKDIR /app
 

From 44e15b40a6b431fb384dfbe0232bd8064e1bdc95 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Mon, 11 Aug 2025 13:38:43 -0400
Subject: [PATCH 23/26] fix: correct JSON formatting in home.ejs script tag

---
 views/pages/home.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/views/pages/home.ejs b/views/pages/home.ejs
index a503663..f0bae03 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -69,7 +69,7 @@
           "@type": "Answer",
           "text": "Enter your team number and select an event to view your match schedule, results, and ranking information in real-time."
         }
-      } ]
+      }]
     }
   </script>
   

From f6a2f932cdf13b859f5598d63c3c336b7764a97f Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:26:23 -0400
Subject: [PATCH 24/26] chore: upgrade dependencies and regenerate lockfile

Bump axios, compression, express, express-session, mariadb and update package-lock.json.
Includes updated lock entries (path-to-regexp, utils-merge, express sub-deps).
---
 package-lock.json | 61 ++++++++++++++++++++++++++++++++++++++++-------
 package.json      |  2 +-
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8d022ab..7093ca3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,15 +9,15 @@
       "version": "1.0.0",
       "license": "GPL-3.0",
       "dependencies": {
-        "axios": "^1.8.4",
+        "axios": "^1.12.2",
         "bcryptjs": "^3.0.2",
-        "compression": "^1.8.0",
+        "compression": "^1.8.1",
         "cors": "^2.8.5",
         "dotenv": "^17.2.3",
         "ejs": "^3.1.10",
-        "express": "^4.21.2",
+        "express": "^5.1.0",
         "express-session": "^1.18.1",
-        "mariadb": "^3.3.2",
+        "mariadb": "^3.4.5",
         "passport": "^0.7.0",
         "passport-github2": "^0.1.12"
       }
@@ -574,6 +574,38 @@
       "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
+    "node_modules/express-session/node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
     "node_modules/filelist": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.4.tgz",
@@ -1125,10 +1157,14 @@
       }
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
-      "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
-      "license": "MIT"
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
     },
     "node_modules/pause": {
       "version": "0.0.1",
@@ -1498,6 +1534,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 868bd61..87aafb8 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dotenv": "^17.2.3",
     "ejs": "^3.1.10",
     "express": "^5.1.0",
-    "express-session": "^1.18.1",
+    "express-session": "^1.18.2",
     "mariadb": "^3.4.5",
     "passport": "^0.7.0",
     "passport-github2": "^0.1.12"

From a77f2e2f478fe565c3253a37a749306724afe105 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:29:57 -0400
Subject: [PATCH 25/26] chore: bump express-session to 1.18.2 in
 package-lock.json

Update lockfile entry for express-session from 1.18.1 to 1.18.2 (resolved URL + integrity) and bump its on-headers dependency to ~1.1.0; remove outdated nested on-headers 1.0.2 entry.
---
 package-lock.json | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7093ca3..04efc19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
         "dotenv": "^17.2.3",
         "ejs": "^3.1.10",
         "express": "^5.1.0",
-        "express-session": "^1.18.1",
+        "express-session": "^1.18.2",
         "mariadb": "^3.4.5",
         "passport": "^0.7.0",
         "passport-github2": "^0.1.12"
@@ -541,16 +541,16 @@
       }
     },
     "node_modules/express-session": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.18.1.tgz",
-      "integrity": "sha512-a5mtTqEaZvBCL9A9aqkrtfz+3SMDhOVUnjafjo+s7A9Txkq+SVX2DLvSp1Zrv4uCXa3lMSK3viWnh9Gg07PBUA==",
+      "version": "1.18.2",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.18.2.tgz",
+      "integrity": "sha512-SZjssGQC7TzTs9rpPDuUrR23GNZ9+2+IkA/+IJWmvQilTr5OSliEHGF+D9scbIpdC6yGtTI0/VhaHoVes2AN/A==",
       "license": "MIT",
       "dependencies": {
         "cookie": "0.7.2",
         "cookie-signature": "1.0.7",
         "debug": "2.6.9",
         "depd": "~2.0.0",
-        "on-headers": "~1.0.2",
+        "on-headers": "~1.1.0",
         "parseurl": "~1.3.3",
         "safe-buffer": "5.2.1",
         "uid-safe": "~2.1.5"
@@ -574,15 +574,6 @@
       "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
-    "node_modules/express-session/node_modules/on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/express/node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",

From aaa6cb1bc109dd4dfa21d34460477f62c087d400 Mon Sep 17 00:00:00 2001
From: Melody <168307748+MelodyDevelopment@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:40:01 -0400
Subject: [PATCH 26/26] fix: preserve JSON-LD blocks when stripping comments
 from rendered views

Extract <script type="application/ld+json"> blocks to placeholders before
removing HTML/CSS/JS comments, then restore them to avoid corrupting
structured data in rendered responses.
---
 src/server/index.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/server/index.js b/src/server/index.js
index b32d990..2d964ec 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -133,18 +133,31 @@ async function startServer() {
           if (callback) return callback(err);
           return next(err);
         }
+
+        // Remove HTML comments
+        let cleanedHtml = html.replace(/<!--[\s\S]*?-->/g, '');
+        
+        // Extract JSON-LD blocks to protect them from comment stripping
+        const jsonLdBlocks = [];
+        cleanedHtml = cleanedHtml.replace(/<script type="application\/ld\+json">([\s\S]*?)<\/script>/g, (match) => {
+          jsonLdBlocks.push(match);
+          return `__JSON_LD_PLACEHOLDER_${jsonLdBlocks.length - 1}__`;
+        });
         
-        // Remove HTML comments, CSS comment blocks, and JavaScript comments
-        let cleanedHtml = html
-          .replace(/<!--[\s\S]*?-->/g, '')
-          .replace(/\/\*[\s\S]*?\*\//g, '');
+        // Remove CSS comment blocks and JavaScript comments from non-JSON-LD content
+        cleanedHtml = cleanedHtml.replace(/\/\*[\s\S]*?\*\//g, '');
         
-        // Remove JavaScript single-line comments only within script tags
+        // Remove JavaScript single-line comments only within regular script tags
         cleanedHtml = cleanedHtml.replace(/<script\b[^>]*>([\s\S]*?)<\/script>/gi, (match, scriptContent) => {
           const cleanedScript = scriptContent.replace(/\/\/.*$/gm, '');
           return match.replace(scriptContent, cleanedScript);
         });
         
+        // Restore JSON-LD blocks
+        jsonLdBlocks.forEach((block, index) => {
+          cleanedHtml = cleanedHtml.replace(`__JSON_LD_PLACEHOLDER_${index}__`, block);
+        });
+        
         if (callback) return callback(null, cleanedHtml);
         res.send(cleanedHtml);
       });