diff --git a/.env.example b/.env.example
index 2409227..83e4bf2 100644
--- a/.env.example
+++ b/.env.example
@@ -2,11 +2,16 @@
 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
-NODE_ENV=development
 
 # Database Configuration
+# Why not URL? to be honest don't know.
 DB_HOST=localhost
 DB_PORT=3306
 DB_NAME=vorel
@@ -14,4 +19,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/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
 
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/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 a1fa46e..56effe6 100644
--- a/docker-compose-dockploy.yml
+++ b/docker-compose-dockploy.yml
@@ -10,15 +10,20 @@ 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
       - 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:
-      - app-network
+      - vorel-app-network
       - dokploy-network
     healthcheck:
       test: ["CMD", "wget", "-qO-", "http://localhost:${Port:-3002}/api/health"]
@@ -42,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
@@ -63,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 c7e52a0..35b5e1c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -12,15 +12,20 @@ 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
       - 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:
-      - app-network
+      - vorel-app-network
     healthcheck:
       test: ["CMD", "wget", "-qO-", "http://localhost:${Port:-3002}/api/health"]
       interval: 30s
@@ -39,11 +44,11 @@ services:
       - MYSQL_ROOT_PASSWORD=${DB_ROOT_PASSWORD}
       - MYSQL_DATABASE=vorel
       - MYSQL_USER=${DB_USER:-vorel}
-      - MYSQL_PASSWORD=${DB_PASSWORD}    
+      - MYSQL_PASSWORD=${DB_PASSWORD}
     volumes:
       - mariadb_data:/var/lib/mysql
     networks:
-      - app-network
+      - vorel-app-network
     healthcheck:
       test: ["CMD", "healthcheck.sh", "--connect", "--innodb_initialized"]
       interval: 30s
@@ -64,5 +69,5 @@ volumes:
   mariadb_data:
 
 networks:
-  app-network:
+  vorel-app-network:
     driver: bridge
diff --git a/package-lock.json b/package-lock.json
index 2aafec0..04efc19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,16 @@
       "license": "GPL-3.0",
       "dependencies": {
         "axios": "^1.12.2",
+        "bcryptjs": "^3.0.2",
         "compression": "^1.8.1",
         "cors": "^2.8.5",
         "dotenv": "^17.2.3",
         "ejs": "^3.1.10",
         "express": "^5.1.0",
-        "mariadb": "^3.4.5"
+        "express-session": "^1.18.2",
+        "mariadb": "^3.4.5",
+        "passport": "^0.7.0",
+        "passport-github2": "^0.1.12"
       }
     },
     "node_modules/@types/geojson": {
@@ -99,6 +103,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": "2.2.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
@@ -518,6 +540,40 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-session": {
+      "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.1.0",
+        "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/express/node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -968,6 +1024,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",
@@ -1028,6 +1090,63 @@
         "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": "8.3.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
@@ -1038,6 +1157,11 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "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",
@@ -1072,6 +1196,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",
@@ -1359,6 +1492,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": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
@@ -1374,6 +1525,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 2df3408..87aafb8 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.12.2",
+    "bcryptjs": "^3.0.2",
     "compression": "^1.8.1",
     "cors": "^2.8.5",
     "dotenv": "^17.2.3",
     "ejs": "^3.1.10",
     "express": "^5.1.0",
-    "mariadb": "^3.4.5"
+    "express-session": "^1.18.2",
+    "mariadb": "^3.4.5",
+    "passport": "^0.7.0",
+    "passport-github2": "^0.1.12"
   },
   "keywords": [
     "frc",
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..1b45fce
--- /dev/null
+++ b/src/server/helpers/auth.js
@@ -0,0 +1,229 @@
+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
+  },
+  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) => {
+    // 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,
+      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);
+  });
+}
+
+// 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] || process.env[key].trim() === '');
+  
+  if (missing.length > 0) {
+    console.error('Missing required environment variables for GitHub OAuth:');
+    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;
+}
+
+module.exports = {
+  initializeAuth,
+  requireAuth,
+  requireAuthAPI,
+  checkAuthConfig,
+  passport,
+  updateAdminCache,
+  isAdminAuthorized,
+  resetDatabaseModeCheck
+};
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/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 57774f7..2d964ec 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,127 +13,258 @@ 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();
+
+// 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");
+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`);
+  
+  const sessionMiddleware = session({
+    secret: encryptionKey,
+    resave: false,
+    saveUninitialized: false,
+    rolling: true, // Reset session expiration on each request
+    cookie: {
+      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
+    },
+    name: 'vorel.sid', // Custom session name
+    // Cleanup function to prevent memory leaks
+    genid: function() {
+      return require('crypto').randomBytes(16).toString('hex');
     }
-    originalRender.call(this, view, options, (err, html) => {
-      if (err) {
-        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 CSS comment blocks and JavaScript comments from non-JSON-LD content
-      cleanedHtml = cleanedHtml.replace(/\/\*[\s\S]*?\*\//g, '');
-      
-      // 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);
+  });
+  
+  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`);
+        }
       });
-      
-      // Restore JSON-LD blocks
-      jsonLdBlocks.forEach((block, index) => {
-        cleanedHtml = cleanedHtml.replace(`__JSON_LD_PLACEHOLDER_${index}__`, block);
+    }
+  }, 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());
+  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';");
+    }
+    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
+        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 CSS comment blocks and JavaScript comments from non-JSON-LD content
+        cleanedHtml = cleanedHtml.replace(/\/\*[\s\S]*?\*\//g, '');
+        
+        // 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);
       });
-      
-      if (callback) return callback(null, cleanedHtml);
-      res.send(cleanedHtml);
-    });
+    };
+    next();
+  });
+
+  // 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
   };
-  next();
-});
+  app.use(express.static(path.join(__dirname, "../../views/public"), staticOptions));
 
-// Set up EJS as the view engine
-app.set("view engine", "ejs");
-app.set("views", path.join(__dirname, "../../views"));
+  // 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"));
+  });
 
-const staticOptions = {
-  maxAge: '7d',
-  immutable: false
-};
-app.use(express.static(path.join(__dirname, "../../views/public"), staticOptions));
+  // Check authentication configuration first
+  const authConfigured = checkAuthConfig();
+  if (authConfigured) {
+    initializeAuth();
+    console.log('Authentication system initialized');
+  } else {
+    console.log('Authentication system disabled - missing configuration');
+  }
 
-// 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);
+  
+  // 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'
+      });
+    });
+  }
 
-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}`);
+    
+    // Initialize admin cache if auth is configured
+    if (authConfigured) {
+      updateAdminCache().catch(error => {
+        console.error('Failed to initialize admin cache:', error);
+      });
+    }
+    
+    // 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 and database after server starts
-  initializeEventCacheEnhanced();
-});
+  // 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..a59974e
--- /dev/null
+++ b/src/server/routes/admin.js
@@ -0,0 +1,316 @@
+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()
+    };
+    
+    // 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();
+        // 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);
+    }
+    
+    // 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,
+      webhook: webhookStats,
+      sse: sseStats
+    };
+    
+    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 620d0c4..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)
@@ -308,8 +317,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/src/server/routes/api.js b/src/server/routes/api.js
index 67dfcf8..5c2c52c 100644
--- a/src/server/routes/api.js
+++ b/src/server/routes/api.js
@@ -2,12 +2,22 @@ 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
 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');
 
@@ -43,6 +53,18 @@ 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()
+  });
+});
+
 // SSE endpoint for real-time updates
 router.get('/updates-stream', async (req, res) => {
   const { eventKey: rawEventKey, teamKey } = req.query;
@@ -349,6 +371,171 @@ 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 from Nexus-Token header
+    const nexusToken = req.headers['nexus-token'];
+    const expectedToken = process.env.NEXUS_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');
+    }
+
+    // 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. 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
+    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;
@@ -639,4 +826,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..5451518
--- /dev/null
+++ b/src/server/routes/auth.js
@@ -0,0 +1,116 @@
+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', (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', (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, 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) => {
+  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('vorel.sid'); // Clear session cookie with correct name
+      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('vorel.sid'); // Clear session cookie with correct name
+      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/views/dashboard/admin/index.ejs b/views/dashboard/admin/index.ejs
new file mode 100644
index 0000000..6e3ea3a
--- /dev/null
+++ b/views/dashboard/admin/index.ejs
@@ -0,0 +1,280 @@
+<!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>
+        `;
+        
+        // Webhook statistics
+        if (status.webhook) {
+          const isConfigured = status.webhook.isConfigured ? 'Configured' : 'Not Configured';
+          const configStatus = status.webhook.isConfigured ? '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>
+                ${!status.webhook.isConfigured ? '<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
+        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..3a261b6
--- /dev/null
+++ b/views/dashboard/admin/login.ejs
@@ -0,0 +1,152 @@
+<!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 if (error === 'oauth_not_configured') { %>
+          GitHub OAuth is not configured on this server. Please contact the administrator.
+        <% } 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..2cd74f6
--- /dev/null
+++ b/views/dashboard/admin/users.ejs
@@ -0,0 +1,388 @@
+<!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/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 387651a..7e4ea41 100644
--- a/views/pages/home.ejs
+++ b/views/pages/home.ejs
@@ -88,28 +88,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="api-update-notice">
-          <div class="notice-content">
-            <h3> Beta Testing </h3>
-            <p> Want to try out the latest version of vorel before it releases? Visit <a href="https://beta.vorel.app" target="_blank" rel="noopener">beta.vorel.app</a> to try it out</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">
@@ -178,7 +166,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;">
@@ -213,7 +201,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>
diff --git a/views/pages/login.ejs b/views/pages/login.ejs
new file mode 100644
index 0000000..7f89ff7
--- /dev/null
+++ b/views/pages/login.ejs
@@ -0,0 +1,40 @@
+<!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-login') %>
+</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/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/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;
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-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-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..74c0f8e 100644
--- a/views/style/style-home.ejs
+++ b/views/style/style-home.ejs
@@ -1,238 +1,425 @@
 <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 */
+  .info-notice,
+  .warning-notice,
+  .success-notice,
+  .danger-notice,
+  .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;
+  }
+
+  .info-notice::before,
+  .api-update-notice::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    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;
+    top: 0;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    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);
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  .info-notice .notice-content h3,
+  .api-update-notice .notice-content h3 {
+    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 {
+    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;
+  }
 
+  .notice-content a:hover {
+    border-bottom-color: var(--primary);
+  }
 
-@media (min-width: 600px) {
+  /* Feature Cards - Modern Grid Layout */
   .features {
-    grid-template-columns: repeat(2, 1fr);
+    display: grid;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-2xl);
+    grid-template-columns: 1fr;
   }
-}
 
-@media (min-width: 1100px) {
-  .features {
-    grid-template-columns: repeat(4, 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 +432,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:hover::before {
+    left: 100%;
   }
 
-  button svg {
-    margin-right: 8px;
+  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;
+    background: rgba(255, 107, 53, 0.1);
+    color: var(--primary-light);
   }
-  
-  .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;
-  }
-  
-  .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;
+  }
+
+  .donate-btn:hover::before {
+    left: 100%;
   }
-  @media (max-width: 600px) {
+
+  /* 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);
     }
-    .donate-section {
-      padding: 0 0 20px 0;
-      margin: 32px 0 0 0;
+  }
+
+  @media (max-width: 480px) {
+    .hero-logo {
+      max-width: 240px;
     }
-    .donate-title {
-      font-size: 1.1rem;
+
+    .features {
+      gap: var(--spacing-md);
     }
-    .donate-desc {
-      font-size: 0.95rem;
+
+    .feature-card {
+      padding: var(--spacing-lg);
     }
-    .donate-btn {
-      font-size: 0.98rem;
-      padding: 10px 12px;
+
+    .search-section {
+      padding: var(--spacing-lg);
     }
+
+    .donate-card {
+      padding: var(--spacing-lg);
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :root {
+      --surface-border: #555555;
+      --text-secondary: #cccccc;
+      --text-tertiary: #aaaaaa;
+    }
+  }
+
+  /* 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-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>
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>