diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..408b799
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index 3729cd4..baf0908 100644
--- a/.gitignore
+++ b/.gitignore
@@ -138,4 +138,10 @@ dmypy.json
 .pytype/
 
 # Cython debug symbols
-cython_debug/
\ No newline at end of file
+cython_debug/
+
+# Old stylesheet backup
+forum/static/old_style.css
+
+.env
+
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..d2b4941
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,13 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 5000
+
+CMD ["gunicorn", "-b", "0.0.0.0:5000", "forum.app:app"]
\ No newline at end of file
diff --git a/Documents/.DS_Store b/Documents/.DS_Store
new file mode 100644
index 0000000..85d348a
Binary files /dev/null and b/Documents/.DS_Store differ
diff --git a/Documents/CircusCircus_uml.png b/Documents/CircusCircus_uml.png
new file mode 100644
index 0000000..d59149a
Binary files /dev/null and b/Documents/CircusCircus_uml.png differ
diff --git a/Documents/Current_Module_Summary.md b/Documents/Current_Module_Summary.md
new file mode 100644
index 0000000..7233eaf
--- /dev/null
+++ b/Documents/Current_Module_Summary.md
@@ -0,0 +1,34 @@
+# CircusCircusLimes — Module Summary
+
+This is a small Flask forum app ("Schooner"). Modules:
+
+## `config.py`
+Flask config class: secret key, SQLite DB URI (`circuscircus.db`), SQLAlchemy settings. Note: secret key is hardcoded (`'kristofer'`), not loaded from env despite the commented-out `load_dotenv`.
+
+## `forum/__init__.py`
+App factory (`create_app`). Builds the Flask app, loads config, registers the `comments` and `routes` blueprints, initializes SQLAlchemy, and creates tables. Comment notes more blueprints (post/subforum routes) may be split out later.
+
+## `forum/app.py`
+Entrypoint. Creates the app via `create_app()`, sets site name/description, wires up `flask_login`'s `LoginManager` with a `user_loader`, seeds default subforums (Forum, Announcements, Bug Reports, General Discussion, Other) on first run via `init_site()`/`add_subforum()`, and defines the `/` index route listing top-level subforums.
+
+## `forum/models.py`
+SQLAlchemy models and shared helpers:
+
+- **`User`** (UserMixin): username/email/password hash, admin flag, relations to posts/comments, password hashing via werkzeug.
+- **`Post`**: title/content/postdate, tied to a user and subforum, has a relative-time cache (`get_time_string`) recalculated every 30s.
+- **`Subforum`**: title/description, self-referential parent/children, list of posts, `hidden` flag.
+- **`Comment`**: content/postdate tied to a user and post, same relative-time caching pattern as `Post`.
+- **Helpers**: `error()` (renders a red-text HTML error string — not escaped, potential XSS if fed user input), `generateLinkPath()` (builds breadcrumb HTML for a subforum chain), and `valid_title`/`valid_content` length validators.
+
+## `forum/routes.py`
+Main blueprint (`rt`) with the bulk of the app's routes: login/logout, account creation, viewing a subforum, the "add post" form, viewing a post with comments, and submitting a new post. Explicit comment in the file flags it as needing to be split into smaller route modules (`post_routes`, `subforum_routes`, etc.).
+
+## `forum/comments.py`
+`comments` blueprint with a single route, `/action_comment`, for posting a comment on a post (login required).
+
+## `forum/user.py`
+Account utility functions: username/password regex validation, and `username_taken`/`email_taken` lookups against the `User` table.
+
+---
+
+**Worth flagging:** the hardcoded `SECRET_KEY`, the unescaped HTML in `error()`, and the author's own TODO to split `routes.py` into per-feature blueprints.
diff --git a/Documents/circuscircus_future_uml.png b/Documents/circuscircus_future_uml.png
new file mode 100644
index 0000000..93ee507
Binary files /dev/null and b/Documents/circuscircus_future_uml.png differ
diff --git a/TASKS.md b/TASKS.md
new file mode 100644
index 0000000..c2a1824
--- /dev/null
+++ b/TASKS.md
@@ -0,0 +1,9 @@
+# Tasks
+
+## Active
+
+## Waiting On
+
+## Someday
+
+## Done
diff --git a/_to_delete/.env.example b/_to_delete/.env.example
new file mode 100644
index 0000000..1db8a2e
--- /dev/null
+++ b/_to_delete/.env.example
@@ -0,0 +1,13 @@
+# Copy this file to .env (already gitignored) and fill in real values.
+# .env is loaded automatically by config.py via python-dotenv.
+
+# Any private, unpredictable string. Used by Flask-Login to sign session
+# cookies -- do not commit a real value, and do not reuse the same value
+# across developers/environments if you can avoid it.
+SECRET_KEY=
+
+# Shared MySQL database credentials (see CircusCircusLimes_MySQL_Team_Setup_Guide).
+DB_USER=
+DB_PASSWORD=
+DB_HOST=localhost
+DB_NAME=circuscircuslimes
diff --git a/compose.yaml b/compose.yaml
new file mode 100644
index 0000000..afc77ed
--- /dev/null
+++ b/compose.yaml
@@ -0,0 +1,43 @@
+services:
+  web:
+    build: .
+    container_name: dishcourse-web
+
+    ports:
+      - "${APP_PORT}:5000"
+
+    environment:
+      DB_USER: ${MYSQL_USER}
+      DB_PASSWORD: ${MYSQL_PASSWORD}
+      DB_HOST: db
+      DB_NAME: ${MYSQL_DATABASE}
+
+    depends_on:
+      db:
+        condition: service_healthy
+
+  db:
+    image: mysql:8.4
+    container_name: dishcourse-mysql
+
+    environment:
+      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
+      MYSQL_DATABASE: ${MYSQL_DATABASE}
+      MYSQL_USER: ${MYSQL_USER}
+      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
+
+    ports:
+      - "127.0.0.1:${DB_PORT}:3306"
+
+    volumes:
+      - dishcourse_mysql_data:/var/lib/mysql
+
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "localhost", "-u", "root", "-p${MYSQL_ROOT_PASSWORD}"]
+      interval: 5s
+      timeout: 5s
+      retries: 10
+      start_period: 10s
+
+volumes:
+  dishcourse_mysql_data:
\ No newline at end of file
diff --git a/config.py b/config.py
index da78fea..4880a32 100644
--- a/config.py
+++ b/config.py
@@ -2,17 +2,32 @@
 Flask configuration variables.
 """
 from os import environ, path
+from sqlalchemy import URL
 
 basedir = path.abspath(path.dirname(__file__))
 # load_dotenv(path.join(basedir, '.env'))
 
 class Config:
-    """Set Flask configuration from .env file."""
-    # General Config
     SECRET_KEY = 'kristofer'
     FLASK_APP = 'forum.app'
 
-    # Database
-    SQLALCHEMY_DATABASE_URI = 'sqlite:///circuscircus.db'
+    # Reject request bodies over 2.5MB outright (avatar uploads are capped at
+    # 2MB in forum/user.py; this is a blunt server-side backstop so an
+    # oversized upload doesn't even get fully read into memory).
+    MAX_CONTENT_LENGTH = int(2.5 * 1024 * 1024)
+
+    DB_USER = environ.get("DB_USER")
+    DB_PASSWORD = environ.get("DB_PASSWORD")
+    DB_HOST = environ.get("DB_HOST", "localhost")
+    DB_NAME = environ.get("DB_NAME", "circuscircuslimes")
+
+    SQLALCHEMY_DATABASE_URI = URL.create(
+        drivername="mysql+pymysql",
+        username=DB_USER,
+        password=DB_PASSWORD,
+        host=DB_HOST,
+        database=DB_NAME
+    )
+
     SQLALCHEMY_ECHO = False
     SQLALCHEMY_TRACK_MODIFICATIONS = False
\ No newline at end of file
diff --git a/dashboard.html b/dashboard.html
new file mode 100644
index 0000000..e2ca8a7
--- /dev/null
+++ b/dashboard.html
@@ -0,0 +1,3111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Productivity</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='2' width='24' height='28' rx='4' fill='%23faf9f5' stroke='%23D97757' stroke-width='2'/%3E%3Crect x='8' y='0' width='16' height='5' rx='2.5' fill='%23D97757'/%3E%3Cpath d='M9 13l3 3 5-5' fill='none' stroke='%23D97757' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='20' y='12' width='5' height='2' rx='1' fill='%23c4c4c2'/%3E%3Crect x='9' y='20' width='10' height='2' rx='1' fill='%23c4c4c2'/%3E%3Crect x='9' y='25' width='7' height='2' rx='1' fill='%23c4c4c2'/%3E%3C/svg%3E">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg-primary: #faf9f5;
+      --bg-secondary: #F5F4EF;
+      --bg-card: #ffffff;
+      --text-primary: #141413;
+      --text-secondary: #5c5c5a;
+      --text-muted: #8c8c8a;
+      --accent: #D97757;
+      --accent-hover: #c4684a;
+      --border: #e5e4df;
+      --border-light: #eeeee9;
+      --shadow: rgba(20, 20, 19, 0.04);
+      --shadow-hover: rgba(20, 20, 19, 0.08);
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      height: 100vh;
+      padding: 20px 24px;
+      line-height: 1.5;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+
+    h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); }
+
+    .header-left {
+      display: flex;
+      align-items: flex-start;
+      gap: 0;
+    }
+
+    .view-toggle {
+      display: flex;
+      gap: 4px;
+      background: var(--bg-secondary);
+      padding: 4px;
+      border-radius: 8px;
+      margin-left: 16px;
+    }
+
+    .view-toggle button {
+      background: transparent;
+      border: none;
+      padding: 6px 14px;
+      font-size: 13px;
+      color: var(--text-muted);
+      border-radius: 6px;
+    }
+
+    .view-toggle button:hover {
+      color: var(--text-primary);
+      background: transparent;
+    }
+
+    .view-toggle button.active {
+      background: var(--bg-card);
+      color: var(--text-primary);
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .buttons { display: flex; gap: 12px; }
+
+    button {
+      background: var(--bg-card);
+      color: var(--text-primary);
+      border: 1px solid var(--border);
+      padding: 10px 18px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+
+    button:hover {
+      background: var(--bg-secondary);
+      border-color: var(--text-muted);
+    }
+
+    button.primary {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+
+    button.primary:hover {
+      background: var(--accent-hover);
+      border-color: var(--accent-hover);
+    }
+
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    /* ===== TASKS STYLES ===== */
+
+    .board {
+      display: flex;
+      gap: 24px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-bottom: 24px;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .column {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      min-width: 340px;
+      max-width: 340px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      max-height: 100%;
+    }
+
+    .column-header {
+      padding: 16px 18px;
+      font-weight: 600;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: grab;
+    }
+
+    .column-header:active {
+      cursor: grabbing;
+    }
+
+    .column.dragging-column {
+      opacity: 0.5;
+    }
+
+    .column-drop-indicator {
+      width: 3px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 -2px;
+      min-height: 100px;
+    }
+
+    .column-header .count {
+      background: var(--bg-card);
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-muted);
+    }
+
+    .cards {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 12px 12px;
+      min-height: 100px;
+    }
+
+    .cards.drag-over {
+      background: rgba(217, 119, 87, 0.05);
+      border-radius: 8px;
+    }
+
+    .task-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 14px 16px;
+      margin-bottom: 10px;
+      cursor: grab;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+      position: relative;
+    }
+
+    .task-card:hover {
+      box-shadow: 0 4px 12px var(--shadow-hover);
+      border-color: var(--border);
+    }
+
+    .task-card .add-on-hover {
+      display: none;
+    }
+
+    .task-card:hover .add-on-hover {
+      display: block;
+    }
+
+    .task-card .delete-btn {
+      display: none;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px 6px;
+      font-size: 14px;
+      line-height: 1;
+      border-radius: 4px;
+    }
+
+    .task-card:hover .delete-btn {
+      display: block;
+    }
+
+    .task-card .delete-btn:hover {
+      background: var(--bg-secondary);
+      color: var(--accent);
+    }
+
+    .task-card.dragging {
+      opacity: 0.5;
+      transform: rotate(2deg);
+    }
+
+    .card-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.5;
+      color: var(--text-primary);
+    }
+
+    .card-note {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 6px;
+      line-height: 1.4;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+
+    .card-subtasks {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--border-light);
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .subtask {
+      padding: 3px 0;
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+    }
+
+    .checkbox {
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+      min-height: 18px;
+      flex-shrink: 0;
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      background: var(--bg-card);
+    }
+
+    .checkbox:hover {
+      border-color: var(--accent);
+    }
+
+    .checkbox.checked {
+      background: var(--accent);
+      border-color: var(--accent);
+    }
+
+    .checkbox.checked::after {
+      content: '';
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      margin-bottom: 2px;
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 80px 40px;
+      color: var(--text-muted);
+    }
+
+    .empty-state button {
+      font-size: 16px;
+      padding: 14px 28px;
+      background: var(--accent);
+      border: none;
+      color: white;
+    }
+
+    .empty-state button:hover {
+      background: var(--accent-hover);
+    }
+
+    .status-bar {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--text-primary);
+      color: var(--bg-primary);
+      padding: 12px 24px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      box-shadow: 0 4px 20px rgba(20, 20, 19, 0.15);
+      z-index: 200;
+    }
+
+    .status-bar.visible { opacity: 1; }
+
+    .add-card {
+      padding: 12px;
+    }
+
+    .add-card button {
+      width: 100%;
+      background: transparent;
+      border: 2px dashed var(--border);
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+
+    .add-card button:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: transparent;
+    }
+
+    .new-task-input {
+      width: 100%;
+      background: var(--bg-card);
+      border: 2px solid var(--accent);
+      border-radius: 8px;
+      padding: 12px;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+    }
+
+    .new-task-input:focus {
+      outline: none;
+    }
+
+    .new-task-input::placeholder {
+      color: var(--text-muted);
+    }
+
+    /* Scrollbar styling */
+    .cards::-webkit-scrollbar,
+    .list-view::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .cards::-webkit-scrollbar-track,
+    .list-view::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .cards::-webkit-scrollbar-thumb,
+    .list-view::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+
+    .cards::-webkit-scrollbar-thumb:hover,
+    .list-view::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    /* List View Styles */
+    .list-view {
+      max-width: 800px;
+      margin: 0 auto;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+    }
+
+    .list-section {
+      margin-bottom: 28px;
+    }
+
+    .list-section.drag-over {
+      background: rgba(217, 119, 87, 0.05);
+      border-radius: 8px;
+      margin: 0 -12px 32px;
+      padding: 0 12px;
+    }
+
+    .list-section-header {
+      font-size: 13px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+      padding: 4px 0;
+      margin-bottom: 6px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .list-section-header .section-title {
+      cursor: pointer;
+    }
+
+    .list-section-header .section-title:hover {
+      color: var(--text-primary);
+    }
+
+    .list-section-header .count {
+      font-size: 12px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+
+    .list-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 14px;
+      margin-bottom: 6px;
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      cursor: grab;
+      position: relative;
+      border-radius: 10px;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .list-item:active {
+      cursor: grabbing;
+    }
+
+    .list-item:hover {
+      box-shadow: 0 4px 12px var(--shadow-hover);
+      border-color: var(--border);
+    }
+
+    .list-item.dragging {
+      opacity: 0.5;
+      background: var(--bg-secondary);
+    }
+
+    .list-item .checkbox {
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+
+    .list-item-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .list-item-title {
+      font-size: 15px;
+      color: var(--text-primary);
+      line-height: 1.4;
+    }
+
+    .list-item-title.checked {
+      color: var(--text-muted);
+      text-decoration: line-through;
+    }
+
+    .list-item-note {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 4px;
+      cursor: pointer;
+    }
+
+    .list-item-note:hover {
+      color: var(--text-secondary);
+    }
+
+    .list-item-note.add-note {
+      font-style: italic;
+      display: none;
+    }
+
+    .list-item:hover .list-item-note.add-note {
+      display: block;
+    }
+
+    .list-item-subtasks {
+      margin-top: 8px;
+      padding-left: 2px;
+    }
+
+    .list-item-subtask {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 3px 0;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+
+    .list-item-subtask .checkbox {
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      margin-top: 1px;
+    }
+
+    .list-item-subtask span {
+      cursor: pointer;
+    }
+
+    .list-item-subtask span:hover {
+      color: var(--text-primary);
+    }
+
+    .list-item-add-subtask {
+      font-size: 13px;
+      color: var(--text-muted);
+      font-style: italic;
+      cursor: pointer;
+      padding: 3px 0;
+      padding-left: 24px;
+      display: none;
+    }
+
+    .list-item:hover .list-item-add-subtask {
+      display: block;
+    }
+
+    .list-item-add-subtask:hover {
+      color: var(--accent);
+    }
+
+    .list-item-section {
+      font-size: 11px;
+      color: var(--text-muted);
+      background: var(--bg-secondary);
+      padding: 2px 8px;
+      border-radius: 4px;
+      white-space: nowrap;
+    }
+
+    .list-item-actions {
+      display: none;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+
+    .list-item:hover .list-item-actions {
+      display: flex;
+      gap: 4px;
+    }
+
+    .list-item-actions button {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px 6px;
+      font-size: 14px;
+      line-height: 1;
+      border-radius: 4px;
+    }
+
+    .list-item-actions button:hover {
+      background: var(--bg-card);
+      color: var(--accent);
+    }
+
+    .list-drop-indicator {
+      height: 3px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 2px -12px;
+    }
+
+    .list-add-section {
+      margin-top: 16px;
+      padding: 16px;
+      border: 2px dashed var(--border);
+      border-radius: 8px;
+      text-align: center;
+      cursor: pointer;
+      color: var(--text-muted);
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.15s ease;
+    }
+
+    .list-add-section:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    .quick-add {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+    }
+
+    .quick-add-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      font-size: 15px;
+      color: var(--text-primary);
+      font-family: inherit;
+      outline: none;
+    }
+
+    .quick-add-input::placeholder {
+      color: var(--text-muted);
+    }
+
+    .quick-add-section {
+      font-size: 12px;
+      color: var(--text-muted);
+      background: var(--bg-secondary);
+      padding: 4px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: 1px solid var(--border);
+    }
+
+    .quick-add-section:hover {
+      border-color: var(--accent);
+    }
+
+    .section-picker {
+      position: absolute;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 4px 20px var(--shadow-hover);
+      padding: 4px;
+      z-index: 100;
+    }
+
+    .section-picker button {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 8px 12px;
+      font-size: 13px;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+    }
+
+    .section-picker button:hover {
+      background: var(--bg-secondary);
+    }
+
+    /* ===== MEMORY STYLES ===== */
+
+    .memory-tabs {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+      background: var(--bg-secondary);
+      padding: 4px;
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+
+    .memory-tab {
+      background: transparent;
+      color: var(--text-muted);
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.15s ease;
+      text-transform: capitalize;
+    }
+
+    .memory-tab:hover { color: var(--text-primary); }
+
+    .memory-tab.active {
+      color: var(--text-primary);
+      background: var(--bg-card);
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .memory-tab .count {
+      background: var(--bg-secondary);
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+      margin-left: 6px;
+      color: var(--text-muted);
+    }
+
+    .memory-tab.active .count {
+      background: var(--border-light);
+    }
+
+    .memory-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 16px;
+    }
+
+    .memory-flat-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    .memory-flat-table th {
+      text-align: left;
+      padding: 10px 16px;
+      font-weight: 500;
+      color: var(--text-muted);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+
+    .memory-flat-table td {
+      padding: 9px 16px;
+      border-bottom: 1px solid var(--border-light);
+      color: var(--text-primary);
+      line-height: 1.4;
+    }
+
+    .memory-flat-table td:first-child {
+      color: var(--text-muted);
+      font-weight: 500;
+      white-space: nowrap;
+      width: 120px;
+    }
+
+    .memory-flat-table tr:last-child td {
+      border-bottom: none;
+    }
+
+    .memory-flat-table tr:hover td {
+      background: var(--bg-secondary);
+    }
+
+    .memory-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 16px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .memory-card:hover {
+      border-color: var(--accent);
+      box-shadow: 0 4px 12px var(--shadow-hover);
+    }
+
+    .memory-card-title {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-primary);
+    }
+
+    .memory-card-meta {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+
+    .memory-card-preview {
+      font-size: 13px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+    }
+
+    .memory-card-fields {
+      margin-top: 10px;
+      font-size: 12px;
+    }
+
+    .memory-card-field {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+
+    .memory-card-field-label {
+      color: var(--text-muted);
+      min-width: 80px;
+    }
+
+    .memory-card-field-value {
+      color: var(--text-secondary);
+    }
+
+    .file-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .file-card-header {
+      padding: 16px;
+      border-bottom: 1px solid var(--border-light);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .file-card-header:hover {
+      background: var(--bg-secondary);
+    }
+
+    .file-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .file-card-content {
+      padding: 16px;
+      font-size: 13px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      overflow-y: auto;
+      display: none;
+      color: var(--text-secondary);
+    }
+
+    .file-card-content.expanded {
+      display: block;
+    }
+
+    .stats {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+    }
+
+    .stat {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 16px 24px;
+      min-width: 100px;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+
+    .stat-value {
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--accent);
+    }
+
+    .stat-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: capitalize;
+      margin-top: 4px;
+    }
+
+    .search-box {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .search-box input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+
+    .search-box input::placeholder {
+      color: var(--text-muted);
+    }
+
+    .add-btn {
+      background: transparent;
+      border: 2px dashed var(--border);
+      color: var(--text-muted);
+      padding: 40px;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .add-btn:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+
+    .markdown-content {
+      line-height: 1.6;
+      color: var(--text-secondary);
+    }
+
+    .markdown-content h1 { font-size: 1.4em; margin: 16px 0 8px; color: var(--text-primary); }
+    .markdown-content h2 { font-size: 1.2em; margin: 14px 0 6px; color: var(--text-primary); }
+    .markdown-content h3 { font-size: 1.1em; margin: 12px 0 4px; color: var(--text-secondary); }
+    .markdown-content p { margin: 8px 0; }
+    .markdown-content ul, .markdown-content ol { margin: 8px 0 8px 20px; }
+    .markdown-content li { margin: 4px 0; }
+    .markdown-content code {
+      background: var(--bg-secondary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      color: var(--text-primary);
+    }
+    .markdown-content pre {
+      background: var(--bg-secondary);
+      padding: 12px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 8px 0;
+      border: 1px solid var(--border-light);
+    }
+    .markdown-content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 8px 0;
+      font-size: 13px;
+    }
+    .markdown-content th, .markdown-content td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--border-light);
+    }
+    .markdown-content th {
+      background: var(--bg-secondary);
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+    }
+
+    /* Modal */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(20, 20, 19, 0.5);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .modal-overlay.visible {
+      display: flex;
+    }
+
+    .modal {
+      background: var(--bg-card);
+      border-radius: 12px;
+      width: 90%;
+      max-width: 800px;
+      max-height: 85vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(20, 20, 19, 0.2);
+    }
+
+    .modal-header {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .modal-header h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+
+    .modal-close {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-size: 24px;
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+    }
+
+    .modal-close:hover { color: var(--text-primary); }
+
+    .modal-body {
+      padding: 20px;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .modal-footer {
+      padding: 16px 20px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+
+    .form-group {
+      margin-bottom: 16px;
+    }
+
+    .form-group label {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 6px;
+    }
+
+    .form-group textarea {
+      width: 100%;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      color: var(--text-primary);
+      font-size: 13px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      line-height: 1.5;
+      min-height: 300px;
+      resize: vertical;
+    }
+
+    .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    /* Tab panel containers */
+    .tab-panel {
+      display: none;
+      flex: 1;
+      min-height: 0;
+      flex-direction: column;
+    }
+
+    .tab-panel.active {
+      display: flex;
+    }
+
+    /* Memory panel scrollable area */
+    .memory-content-area {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+
+    .memory-content-area::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .memory-content-area::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .memory-content-area::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+
+    .memory-content-area::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    .file-card-content::-webkit-scrollbar,
+    .modal-body::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .file-card-content::-webkit-scrollbar-track,
+    .modal-body::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .file-card-content::-webkit-scrollbar-thumb,
+    .modal-body::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+
+    .file-card-content::-webkit-scrollbar-thumb:hover,
+    .modal-body::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    /* File path display */
+    .file-path {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-left">
+      <svg width="28" height="28" viewBox="0 0 32 32" style="margin-right: 12px; flex-shrink: 0;">
+        <rect x="4" y="2" width="24" height="28" rx="4" fill="#faf9f5" stroke="#D97757" stroke-width="2"/>
+        <rect x="8" y="0" width="16" height="5" rx="2.5" fill="#D97757"/>
+        <path d="M9 13l3 3 5-5" fill="none" stroke="#D97757" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <rect x="20" y="12" width="5" height="2" rx="1" fill="#c4c4c2"/>
+        <rect x="9" y="20" width="10" height="2" rx="1" fill="#c4c4c2"/>
+        <rect x="9" y="25" width="7" height="2" rx="1" fill="#c4c4c2"/>
+      </svg>
+      <div>
+        <h1>Productivity</h1>
+        <div id="filePath" class="file-path"></div>
+      </div>
+      <div class="view-toggle" id="mainTabToggle">
+        <button id="tasksTabBtn" class="active">Tasks</button>
+        <button id="memoryTabBtn">Memory</button>
+      </div>
+      <div class="view-toggle" id="taskViewToggle">
+        <button id="boardViewBtn" class="active">Board</button>
+        <button id="listViewBtn">List</button>
+      </div>
+    </div>
+    <div class="buttons">
+      <button id="openTaskBtn">Select File</button>
+      <button id="openMemoryBtn" style="display: none;">Open Folder</button>
+      <button id="saveBtn" class="primary" disabled style="display: none;">Save</button>
+    </div>
+  </header>
+
+  <!-- TASKS TAB PANEL -->
+  <div class="tab-panel active" id="tasksPanel">
+    <div class="list-view" id="listView" style="display: none;"></div>
+    <div class="board" id="board">
+      <div class="empty-state" id="boardEmptyState" style="width: 100%;">
+        <p style="margin-bottom: 24px; font-size: 18px; font-weight: 600; color: var(--text-primary);">Select your TASKS.md file</p>
+        <button id="openBtnLarge">Select TASKS.md</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- MEMORY TAB PANEL -->
+  <div class="tab-panel" id="memoryPanel">
+    <div id="memoryEmptyState" class="empty-state">
+      <p style="margin-bottom: 24px; font-size: 18px; font-weight: 600; color: var(--text-primary);">Select your project folder</p>
+      <button id="openMemoryBtnLarge">Select Folder</button>
+    </div>
+    <div id="memoryMainContent" style="display: none; flex-direction: column; min-height: 0; flex: 1;">
+      <div class="memory-tabs" id="memoryTabsContainer"></div>
+      <div class="memory-content-area">
+        <div id="memoryContentContainer"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- MODAL (shared for memory) -->
+  <div class="modal-overlay" id="modalOverlay">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="modalTitle">Edit</h3>
+        <button class="modal-close" id="modalClose">&times;</button>
+      </div>
+      <div class="modal-body" id="modalBody"></div>
+      <div class="modal-footer">
+        <button id="modalCancel">Cancel</button>
+        <button id="modalSave" class="primary">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="status-bar" id="status"></div>
+
+  <script>
+    // ===== SHARED STATE =====
+    let activeMainTab = 'tasks'; // 'tasks' or 'memory'
+
+    const statusEl = document.getElementById('status');
+    const filePathEl = document.getElementById('filePath');
+
+    function showStatus(msg) {
+      statusEl.textContent = msg;
+      statusEl.classList.add('visible');
+      setTimeout(() => statusEl.classList.remove('visible'), 2000);
+    }
+
+    // ===== MAIN TAB SWITCHING =====
+    const tasksTabBtn = document.getElementById('tasksTabBtn');
+    const memoryTabBtn = document.getElementById('memoryTabBtn');
+    const tasksPanel = document.getElementById('tasksPanel');
+    const memoryPanel = document.getElementById('memoryPanel');
+    const taskViewToggle = document.getElementById('taskViewToggle');
+    const openTaskBtn = document.getElementById('openTaskBtn');
+    const openMemoryBtn = document.getElementById('openMemoryBtn');
+    const saveBtn = document.getElementById('saveBtn');
+
+    function switchMainTab(tab) {
+      activeMainTab = tab;
+
+      tasksTabBtn.classList.toggle('active', tab === 'tasks');
+      memoryTabBtn.classList.toggle('active', tab === 'memory');
+
+      tasksPanel.classList.toggle('active', tab === 'tasks');
+      memoryPanel.classList.toggle('active', tab === 'memory');
+
+      // Show/hide view toggle for tasks
+      taskViewToggle.style.display = tab === 'tasks' ? 'flex' : 'none';
+
+      // Show/hide appropriate buttons
+      openTaskBtn.style.display = tab === 'tasks' ? 'inline-flex' : 'none';
+      openMemoryBtn.style.display = tab === 'memory' ? 'inline-flex' : 'none';
+      saveBtn.style.display = tab === 'tasks' ? 'inline-flex' : 'none';
+
+      // Update file path display
+      if (tab === 'tasks') {
+        filePathEl.textContent = taskFileHandle ? taskFileName : '';
+      } else {
+        filePathEl.textContent = memoryDirHandle ? memoryDirHandle.name : '';
+      }
+    }
+
+    tasksTabBtn.addEventListener('click', () => switchMainTab('tasks'));
+    memoryTabBtn.addEventListener('click', () => switchMainTab('memory'));
+
+    // ============================================================
+    // ===== TASKS FUNCTIONALITY =====
+    // ============================================================
+
+    let taskFileHandle = null;
+    let taskFileName = '';
+    let sections = [];
+    let tasks = {};
+    let hasChanges = false;
+    let currentView = 'board';
+    let quickAddSection = null;
+
+    const board = document.getElementById('board');
+    const listView = document.getElementById('listView');
+    const listViewBtn = document.getElementById('listViewBtn');
+    const boardViewBtn = document.getElementById('boardViewBtn');
+
+    function taskSectionId(name) {
+      return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    }
+
+    function parseTaskMarkdown(content) {
+      const resultSections = [];
+      const resultTasks = {};
+      let currentSection = null;
+      let currentSectionId = null;
+
+      const lines = content.split('\n');
+      let currentTask = null;
+
+      for (const line of lines) {
+        const headerMatch = line.match(/^## \*{0,2}(.+?)\*{0,2}$/);
+        if (headerMatch) {
+          if (currentTask && currentSectionId) {
+            resultTasks[currentSectionId].push(currentTask);
+            currentTask = null;
+          }
+
+          const sectionName = headerMatch[1].trim();
+          currentSectionId = taskSectionId(sectionName);
+          currentSection = sectionName;
+
+          if (!resultTasks[currentSectionId]) {
+            resultSections.push({ id: currentSectionId, name: sectionName });
+            resultTasks[currentSectionId] = [];
+          }
+        } else if (currentSectionId && line.match(/^- \[[ xX]\]/)) {
+          if (currentTask) {
+            resultTasks[currentSectionId].push(currentTask);
+          }
+          const checked = line.match(/\[[xX]\]/) !== null;
+          let text = line.replace(/^- \[[ xX]\]\s*/, '');
+          let title = text;
+          let note = '';
+
+          const boldMatch = text.match(/^\*\*(.+?)\*\*(.*)$/);
+          if (boldMatch) {
+            title = boldMatch[1];
+            note = boldMatch[2].replace(/^\s*-\s*/, '').trim();
+          }
+
+          currentTask = {
+            id: Date.now() + Math.random(),
+            title,
+            note,
+            checked,
+            subtasks: [],
+            section: currentSectionId
+          };
+        } else if (currentTask && line.match(/^\s+- \[[ xX]\]/)) {
+          const checked = line.match(/\[[xX]\]/) !== null;
+          const text = line.replace(/^\s+- \[[ xX]\]\s*/, '');
+          currentTask.subtasks.push({ text, checked });
+        }
+      }
+
+      if (currentTask && currentSectionId) {
+        resultTasks[currentSectionId].push(currentTask);
+      }
+
+      return { sections: resultSections, tasks: resultTasks };
+    }
+
+    function toMarkdown() {
+      let md = '# Tasks\n';
+
+      sections.forEach((section, idx) => {
+        md += `\n## ${section.name}\n`;
+        const sectionTasks = tasks[section.id] || [];
+        sectionTasks.forEach(t => {
+          const checkbox = t.checked ? '[x]' : '[ ]';
+          const note = t.note ? ` - ${t.note}` : '';
+          md += `- ${checkbox} **${t.title}**${note}\n`;
+          t.subtasks.forEach(st => {
+            const stCheckbox = st.checked ? '[x]' : '[ ]';
+            md += `  - ${stCheckbox} ${st.text}\n`;
+          });
+        });
+      });
+
+      return md.trimEnd() + '\n';
+    }
+
+    function createCard(task) {
+      const card = document.createElement('div');
+      card.className = 'task-card';
+      card.draggable = true;
+      card.dataset.id = task.id;
+
+      let html = `
+        <div style="display: flex; align-items: flex-start; gap: 12px;">
+          <button class="delete-btn" data-action="delete" title="Delete task">&times;</button>
+          <span class="checkbox ${task.checked ? 'checked' : ''}" data-action="toggle"></span>
+          <div class="card-title" data-action="edit-title">${escapeHtml(task.title)}</div>
+        </div>
+      `;
+
+      if (task.note) {
+        html += `<div class="card-note" data-action="edit-note" style="cursor: pointer; margin-left: 30px;">${escapeHtml(task.note)}</div>`;
+      } else {
+        html += `<div class="card-note add-on-hover" data-action="edit-note" style="cursor: pointer; margin-left: 30px; font-style: italic;">+ Add note</div>`;
+      }
+
+      if (task.subtasks.length > 0) {
+        html += '<div class="card-subtasks" style="margin-left: 30px;">';
+        task.subtasks.forEach((st, idx) => {
+          html += `<div class="subtask">
+            <span class="checkbox ${st.checked ? 'checked' : ''}" data-action="toggle-sub" data-idx="${idx}" style="width: 16px; height: 16px; min-width: 16px; min-height: 16px;"></span>
+            <span data-action="edit-subtask" data-idx="${idx}" style="cursor: pointer;">${escapeHtml(st.text)}</span>
+          </div>`;
+        });
+        html += `<div class="subtask add-on-hover" data-action="add-subtask" style="color: var(--text-muted); cursor: pointer; font-style: italic; padding-left: 24px;">+ Add subtask</div>`;
+        html += '</div>';
+      } else {
+        html += `<div class="card-subtasks add-on-hover" style="margin-left: 30px;">
+          <div class="subtask" data-action="add-subtask" style="color: var(--text-muted); cursor: pointer; font-style: italic;">+ Add subtask</div>
+        </div>`;
+      }
+
+      card.innerHTML = html;
+
+      card.addEventListener('dragstart', (e) => {
+        card.classList.add('dragging');
+        e.dataTransfer.setData('text/plain', task.id);
+      });
+
+      card.addEventListener('dragend', () => {
+        card.classList.remove('dragging');
+      });
+
+      card.addEventListener('click', (e) => {
+        const action = e.target.dataset.action;
+        if (action === 'toggle') {
+          task.checked = !task.checked;
+          markChanged();
+          renderTasks();
+        } else if (action === 'toggle-sub') {
+          const idx = parseInt(e.target.dataset.idx);
+          task.subtasks[idx].checked = !task.subtasks[idx].checked;
+          markChanged();
+          renderTasks();
+        } else if (action === 'edit-title') {
+          startEditingTitle(e.target, task);
+        } else if (action === 'edit-note') {
+          startEditingNote(e.target, task);
+        } else if (action === 'edit-subtask') {
+          const idx = parseInt(e.target.dataset.idx);
+          startEditingSubtask(e.target, task, idx);
+        } else if (action === 'add-subtask') {
+          startAddingSubtask(e.target, task);
+        } else if (action === 'delete') {
+          deleteTask(task);
+        }
+      });
+
+      return card;
+    }
+
+    function startEditingTitle(titleEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.title;
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 6px 10px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;';
+
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newTitle = input.value.trim();
+        if (newTitle && newTitle !== task.title) {
+          task.title = newTitle;
+          markChanged();
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startEditingNote(noteEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.note || '';
+      input.placeholder = 'Add a note...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      noteEl.replaceWith(input);
+      input.focus();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        task.note = input.value.trim();
+        markChanged();
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startEditingSubtask(subtaskEl, task, idx) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.subtasks[idx].text;
+      input.style.cssText = 'width: calc(100% - 30px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      subtaskEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newText = input.value.trim();
+        if (newText) { task.subtasks[idx].text = newText; }
+        else { task.subtasks.splice(idx, 1); }
+        markChanged();
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startAddingSubtask(el, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'New subtask...';
+      input.style.cssText = 'width: calc(100% - 10px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      el.replaceWith(input);
+      input.focus();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const text = input.value.trim();
+        if (text) { task.subtasks.push({ text, checked: false }); markChanged(); }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startEditingColumnTitle(titleEl, colId) {
+      const section = sections.find(s => s.id === colId);
+      if (!section) return;
+
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = section.name;
+      input.style.cssText = 'width: 180px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit; outline: none;';
+
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newName = input.value.trim();
+        if (newName && newName !== section.name) {
+          const oldId = section.id;
+          section.name = newName;
+          const newId = taskSectionId(newName);
+          if (newId !== oldId) {
+            tasks[newId] = tasks[oldId] || [];
+            delete tasks[oldId];
+            tasks[newId].forEach(t => t.section = newId);
+            section.id = newId;
+          }
+          markChanged();
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function createColumn(id, title, items) {
+      const col = document.createElement('div');
+      col.className = 'column';
+      col.innerHTML = `
+        <div class="column-header">
+          <span class="column-title" data-section-id="${id}" style="cursor: pointer;">${escapeHtml(title)}</span>
+          <span class="count">${items.length}</span>
+        </div>
+        <div class="cards" data-column="${id}"></div>
+        <div class="add-card">
+          <button data-add="${id}">+ Add task</button>
+        </div>
+      `;
+
+      col.querySelector('.column-title').addEventListener('click', (e) => {
+        if (!col.dragging) { startEditingColumnTitle(e.target, id); }
+      });
+
+      const header = col.querySelector('.column-header');
+      header.draggable = true;
+
+      header.addEventListener('dragstart', (e) => {
+        e.stopPropagation();
+        col.classList.add('dragging-column');
+        e.dataTransfer.setData('text/column', id);
+        e.dataTransfer.effectAllowed = 'move';
+      });
+
+      header.addEventListener('dragend', () => {
+        col.classList.remove('dragging-column');
+        board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+      });
+
+      col.addEventListener('dragover', (e) => {
+        if (e.dataTransfer.types.includes('text/column')) {
+          e.preventDefault();
+          e.stopPropagation();
+          board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+          const indicator = document.createElement('div');
+          indicator.className = 'column-drop-indicator';
+          const rect = col.getBoundingClientRect();
+          if (e.clientX < rect.left + rect.width / 2) { col.before(indicator); }
+          else { col.after(indicator); }
+        }
+      });
+
+      col.addEventListener('drop', (e) => {
+        if (e.dataTransfer.types.includes('text/column')) {
+          e.preventDefault();
+          e.stopPropagation();
+          const fromId = e.dataTransfer.getData('text/column');
+          const toId = id;
+          if (fromId !== toId) {
+            const rect = col.getBoundingClientRect();
+            const insertBefore = e.clientX < rect.left + rect.width / 2;
+            moveSection(fromId, toId, insertBefore);
+          }
+          board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+        }
+      });
+
+      const cardsContainer = col.querySelector('.cards');
+      items.forEach(task => { cardsContainer.appendChild(createCard(task)); });
+
+      const getDropPosition = (e) => {
+        const allCards = [...cardsContainer.querySelectorAll('.task-card')];
+        const visibleCards = allCards.filter(c => !c.classList.contains('dragging'));
+        let insertBeforeCard = null;
+        let dropIndex = visibleCards.length;
+        for (let i = 0; i < visibleCards.length; i++) {
+          const rect = visibleCards[i].getBoundingClientRect();
+          if (e.clientY < rect.top + rect.height / 2) {
+            insertBeforeCard = visibleCards[i];
+            dropIndex = i;
+            break;
+          }
+        }
+        return { insertBeforeCard, dropIndex };
+      };
+
+      const showDropIndicator = (e) => {
+        col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        const { insertBeforeCard } = getDropPosition(e);
+        const indicator = document.createElement('div');
+        indicator.className = 'drop-indicator';
+        indicator.style.cssText = 'height: 3px; background: var(--accent); border-radius: 2px; margin: 5px 0;';
+        if (insertBeforeCard) { cardsContainer.insertBefore(indicator, insertBeforeCard); }
+        else { cardsContainer.appendChild(indicator); }
+      };
+
+      col.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        cardsContainer.classList.add('drag-over');
+        showDropIndicator(e);
+      });
+
+      col.addEventListener('dragleave', (e) => {
+        if (!col.contains(e.relatedTarget)) {
+          cardsContainer.classList.remove('drag-over');
+          col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        }
+      });
+
+      col.addEventListener('drop', (e) => {
+        e.preventDefault();
+        cardsContainer.classList.remove('drag-over');
+        col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        const taskId = parseFloat(e.dataTransfer.getData('text/plain'));
+        const { dropIndex } = getDropPosition(e);
+        moveTask(taskId, id, dropIndex);
+      });
+
+      col.querySelector(`[data-add="${id}"]`).addEventListener('click', () => {
+        addNewTask(id, col.querySelector('.cards'));
+      });
+
+      return col;
+    }
+
+    function addNewTask(sectionId, container) {
+      const existing = container.querySelector('.new-task-input');
+      if (existing) return;
+
+      const input = document.createElement('textarea');
+      input.className = 'new-task-input';
+      input.placeholder = 'What needs to be done?';
+      input.rows = 2;
+      container.appendChild(input);
+      input.focus();
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          const title = input.value.trim();
+          if (title) {
+            if (!tasks[sectionId]) tasks[sectionId] = [];
+            tasks[sectionId].push({
+              id: Date.now() + Math.random(),
+              title,
+              note: '',
+              checked: false,
+              subtasks: [],
+              section: sectionId
+            });
+            markChanged();
+            renderTasks();
+          } else { input.remove(); }
+        } else if (e.key === 'Escape') { input.remove(); }
+      });
+
+      input.addEventListener('blur', () => { setTimeout(() => input.remove(), 100); });
+    }
+
+    function moveSection(fromId, toId, insertBefore) {
+      const fromIdx = sections.findIndex(s => s.id === fromId);
+      const toIdx = sections.findIndex(s => s.id === toId);
+      if (fromIdx === -1 || toIdx === -1) return;
+      const [section] = sections.splice(fromIdx, 1);
+      let newIdx = sections.findIndex(s => s.id === toId);
+      if (!insertBefore) newIdx++;
+      sections.splice(newIdx, 0, section);
+      markChanged();
+      renderTasks();
+    }
+
+    function moveTask(taskId, toSectionId, dropIndex = -1) {
+      let task = null;
+      for (const section of sections) {
+        const sectionTasks = tasks[section.id] || [];
+        const idx = sectionTasks.findIndex(t => t.id === taskId);
+        if (idx !== -1) {
+          task = sectionTasks.splice(idx, 1)[0];
+          break;
+        }
+      }
+      if (!task) return;
+      task.section = toSectionId;
+      if (!tasks[toSectionId]) tasks[toSectionId] = [];
+      if (dropIndex >= 0 && dropIndex <= tasks[toSectionId].length) {
+        tasks[toSectionId].splice(dropIndex, 0, task);
+      } else {
+        tasks[toSectionId].push(task);
+      }
+      markChanged();
+      renderTasks();
+    }
+
+    function deleteTask(task) {
+      if (!confirm(`Delete "${task.title}"?`)) return;
+      for (const section of sections) {
+        const sectionTasks = tasks[section.id] || [];
+        const idx = sectionTasks.findIndex(t => t.id === task.id);
+        if (idx !== -1) { sectionTasks.splice(idx, 1); break; }
+      }
+      markChanged();
+      renderTasks();
+    }
+
+    let saveTimeout = null;
+    let lastModified = 0;
+    let watchInterval = null;
+    let isSaving = false;
+
+    function markChanged() {
+      hasChanges = true;
+      saveBtn.disabled = false;
+      if (saveTimeout) clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(autoSave, 500);
+    }
+
+    async function autoSave() {
+      if (!taskFileHandle || !hasChanges || isSaving) return;
+      isSaving = true;
+      try {
+        const writable = await taskFileHandle.createWritable();
+        const content = toMarkdown();
+        await writable.write(content);
+        await writable.close();
+        const file = await taskFileHandle.getFile();
+        lastModified = file.lastModified;
+        hasChanges = false;
+        saveBtn.disabled = true;
+        showStatus('Saved');
+      } catch (e) {
+        showStatus('Save failed: ' + e.message);
+      }
+      isSaving = false;
+    }
+
+    async function checkForExternalChanges() {
+      if (!taskFileHandle || hasChanges || isSaving) return;
+      try {
+        const file = await taskFileHandle.getFile();
+        if (file.lastModified > lastModified) {
+          lastModified = file.lastModified;
+          const content = await file.text();
+          const result = parseTaskMarkdown(content);
+          sections = result.sections;
+          tasks = result.tasks;
+          renderTasks();
+          showStatus('Reloaded');
+        }
+      } catch (e) { console.log('Watch error:', e); }
+    }
+
+    function startWatching() {
+      if (watchInterval) clearInterval(watchInterval);
+      watchInterval = setInterval(checkForExternalChanges, 1000);
+    }
+
+    function stopWatching() {
+      if (watchInterval) { clearInterval(watchInterval); watchInterval = null; }
+    }
+
+    function renderTasks() {
+      if (currentView === 'board') { renderBoard(); }
+      else { renderList(); }
+    }
+
+    function renderBoard() {
+      board.innerHTML = '';
+      sections.forEach(section => {
+        const sectionTasks = tasks[section.id] || [];
+        board.appendChild(createColumn(section.id, section.name, sectionTasks));
+      });
+
+      const addSectionBtn = document.createElement('div');
+      addSectionBtn.className = 'column';
+      addSectionBtn.style.cssText = 'background: transparent; border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 120px;';
+      addSectionBtn.innerHTML = '<span style="color: var(--text-muted); font-size: 14px; font-weight: 500;">+ Add Section</span>';
+      addSectionBtn.addEventListener('click', () => startAddingSection(addSectionBtn));
+      board.appendChild(addSectionBtn);
+    }
+
+    function renderList() {
+      listView.innerHTML = '';
+
+      if (!quickAddSection && sections.length > 0) {
+        quickAddSection = sections[0].id;
+      }
+
+      // Quick add at top
+      const quickAdd = document.createElement('div');
+      quickAdd.className = 'quick-add';
+      quickAdd.style.cssText = 'border-bottom: 2px solid var(--border); margin-bottom: 24px; padding-bottom: 16px;';
+
+      const sectionName = sections.find(s => s.id === quickAddSection)?.name || 'Select section';
+      quickAdd.innerHTML = `
+        <span class="checkbox" style="opacity: 0.3;"></span>
+        <input type="text" class="quick-add-input" placeholder="Add a task..." id="quickAddInput">
+        <span class="quick-add-section" id="quickAddSectionBtn">${escapeHtml(sectionName)}</span>
+      `;
+      listView.appendChild(quickAdd);
+
+      const quickInput = document.getElementById('quickAddInput');
+      const sectionBtn = document.getElementById('quickAddSectionBtn');
+
+      quickInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && quickInput.value.trim()) {
+          const title = quickInput.value.trim();
+          if (!tasks[quickAddSection]) tasks[quickAddSection] = [];
+          tasks[quickAddSection].unshift({
+            id: Date.now() + Math.random(),
+            title,
+            note: '',
+            checked: false,
+            subtasks: [],
+            section: quickAddSection
+          });
+          quickInput.value = '';
+          markChanged();
+          renderTasks();
+          setTimeout(() => document.getElementById('quickAddInput')?.focus(), 10);
+        }
+      });
+
+      sectionBtn.addEventListener('click', (e) => { showSectionPicker(e.target); });
+
+      // Render each section
+      sections.forEach(section => {
+        const sectionTasks = tasks[section.id] || [];
+        const sectionEl = document.createElement('div');
+        sectionEl.className = 'list-section';
+        sectionEl.dataset.sectionId = section.id;
+
+        const header = document.createElement('div');
+        header.className = 'list-section-header';
+        header.innerHTML = `
+          <span class="section-title" data-section-id="${section.id}">${escapeHtml(section.name)}</span>
+          <span class="count">${sectionTasks.length}</span>
+        `;
+
+        header.querySelector('.section-title').addEventListener('click', (e) => {
+          startEditingListSectionTitle(e.target, section);
+        });
+
+        sectionEl.appendChild(header);
+
+        const tasksContainer = document.createElement('div');
+        tasksContainer.className = 'list-tasks-container';
+        tasksContainer.dataset.sectionId = section.id;
+
+        sectionTasks.forEach(task => {
+          tasksContainer.appendChild(createListItem(task, section));
+        });
+
+        sectionEl.appendChild(tasksContainer);
+
+        // Drag-and-drop handlers for section
+        const getDropPosition = (e, container) => {
+          const items = [...container.querySelectorAll('.list-item:not(.dragging)')];
+          let insertBeforeEl = null;
+          let dropIndex = items.length;
+          for (let i = 0; i < items.length; i++) {
+            const rect = items[i].getBoundingClientRect();
+            if (e.clientY < rect.top + rect.height / 2) {
+              insertBeforeEl = items[i];
+              dropIndex = i;
+              break;
+            }
+          }
+          return { insertBeforeEl, dropIndex };
+        };
+
+        const showDropIndicator = (e) => {
+          tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          const { insertBeforeEl } = getDropPosition(e, tasksContainer);
+          const indicator = document.createElement('div');
+          indicator.className = 'list-drop-indicator';
+          if (insertBeforeEl) { tasksContainer.insertBefore(indicator, insertBeforeEl); }
+          else { tasksContainer.appendChild(indicator); }
+        };
+
+        sectionEl.addEventListener('dragover', (e) => {
+          e.preventDefault();
+          sectionEl.classList.add('drag-over');
+          showDropIndicator(e);
+        });
+
+        sectionEl.addEventListener('dragleave', (e) => {
+          if (!sectionEl.contains(e.relatedTarget)) {
+            sectionEl.classList.remove('drag-over');
+            tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          }
+        });
+
+        sectionEl.addEventListener('drop', (e) => {
+          e.preventDefault();
+          sectionEl.classList.remove('drag-over');
+          tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          const taskId = parseFloat(e.dataTransfer.getData('text/plain'));
+          if (!taskId) return;
+          const { dropIndex } = getDropPosition(e, tasksContainer);
+          moveTask(taskId, section.id, dropIndex);
+        });
+
+        listView.appendChild(sectionEl);
+      });
+
+      // Add Section button
+      const addSectionBtn = document.createElement('div');
+      addSectionBtn.className = 'list-add-section';
+      addSectionBtn.textContent = '+ Add Section';
+      addSectionBtn.addEventListener('click', () => { startAddingListSection(addSectionBtn); });
+      listView.appendChild(addSectionBtn);
+    }
+
+    function startEditingListSectionTitle(titleEl, section) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = section.name;
+      input.style.cssText = 'width: 200px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit; outline: none;';
+
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newName = input.value.trim();
+        if (newName && newName !== section.name) {
+          const oldId = section.id;
+          section.name = newName;
+          const newId = taskSectionId(newName);
+          if (newId !== oldId) {
+            tasks[newId] = tasks[oldId] || [];
+            delete tasks[oldId];
+            tasks[newId].forEach(t => t.section = newId);
+            section.id = newId;
+          }
+          markChanged();
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startAddingListSection(btn) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'Section name...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 8px; padding: 12px 16px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; text-align: left;';
+
+      btn.innerHTML = '';
+      btn.style.border = '2px solid var(--accent)';
+      btn.style.cursor = 'default';
+      btn.appendChild(input);
+      input.focus();
+
+      let saved = false;
+      const saveSection = () => {
+        if (saved) return;
+        saved = true;
+        const name = input.value.trim();
+        if (name) {
+          const id = taskSectionId(name);
+          if (!tasks[id]) {
+            sections.push({ id, name });
+            tasks[id] = [];
+            markChanged();
+          }
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveSection(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveSection);
+    }
+
+    function createListItem(task, section) {
+      const item = document.createElement('div');
+      item.className = 'list-item';
+      item.draggable = true;
+      item.dataset.taskId = task.id;
+
+      item.addEventListener('dragstart', (e) => {
+        item.classList.add('dragging');
+        e.dataTransfer.setData('text/plain', task.id);
+        e.dataTransfer.effectAllowed = 'move';
+      });
+
+      item.addEventListener('dragend', () => {
+        item.classList.remove('dragging');
+        document.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+        document.querySelectorAll('.list-section.drag-over').forEach(el => el.classList.remove('drag-over'));
+      });
+
+      const checkbox = document.createElement('span');
+      checkbox.className = `checkbox ${task.checked ? 'checked' : ''}`;
+      checkbox.addEventListener('click', (e) => {
+        e.stopPropagation();
+        task.checked = !task.checked;
+        markChanged();
+        renderTasks();
+      });
+
+      const content = document.createElement('div');
+      content.className = 'list-item-content';
+
+      const title = document.createElement('div');
+      title.className = `list-item-title ${task.checked ? 'checked' : ''}`;
+      title.textContent = task.title;
+      title.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startEditingListItem(title, task);
+      });
+      content.appendChild(title);
+
+      if (task.note) {
+        const note = document.createElement('div');
+        note.className = 'list-item-note';
+        note.textContent = task.note;
+        note.addEventListener('click', (e) => {
+          e.stopPropagation();
+          startEditingListNote(note, task);
+        });
+        content.appendChild(note);
+      } else {
+        const addNote = document.createElement('div');
+        addNote.className = 'list-item-note add-note';
+        addNote.textContent = '+ Add note';
+        addNote.addEventListener('click', (e) => {
+          e.stopPropagation();
+          startEditingListNote(addNote, task);
+        });
+        content.appendChild(addNote);
+      }
+
+      if (task.subtasks && task.subtasks.length > 0) {
+        const subtasksContainer = document.createElement('div');
+        subtasksContainer.className = 'list-item-subtasks';
+
+        task.subtasks.forEach((st, idx) => {
+          const subtaskEl = document.createElement('div');
+          subtaskEl.className = 'list-item-subtask';
+
+          const stCheckbox = document.createElement('span');
+          stCheckbox.className = `checkbox ${st.checked ? 'checked' : ''}`;
+          stCheckbox.addEventListener('click', (e) => {
+            e.stopPropagation();
+            st.checked = !st.checked;
+            markChanged();
+            renderTasks();
+          });
+
+          const stText = document.createElement('span');
+          stText.textContent = st.text;
+          if (st.checked) {
+            stText.style.textDecoration = 'line-through';
+            stText.style.color = 'var(--text-muted)';
+          }
+          stText.addEventListener('click', (e) => {
+            e.stopPropagation();
+            startEditingListSubtask(stText, task, idx);
+          });
+
+          subtaskEl.appendChild(stCheckbox);
+          subtaskEl.appendChild(stText);
+          subtasksContainer.appendChild(subtaskEl);
+        });
+
+        content.appendChild(subtasksContainer);
+      }
+
+      const addSubtask = document.createElement('div');
+      addSubtask.className = 'list-item-add-subtask';
+      addSubtask.textContent = '+ Add subtask';
+      addSubtask.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startAddingListSubtask(addSubtask, task);
+      });
+      content.appendChild(addSubtask);
+
+      const actions = document.createElement('div');
+      actions.className = 'list-item-actions';
+      actions.innerHTML = '<button title="Delete task">&times;</button>';
+      actions.querySelector('button').addEventListener('click', (e) => {
+        e.stopPropagation();
+        deleteTask(task);
+      });
+
+      item.appendChild(checkbox);
+      item.appendChild(content);
+      item.appendChild(actions);
+
+      return item;
+    }
+
+    function startEditingListNote(noteEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.note || '';
+      input.placeholder = 'Add a note...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      noteEl.replaceWith(input);
+      input.focus();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        task.note = input.value.trim();
+        markChanged();
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startEditingListSubtask(subtaskEl, task, idx) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.subtasks[idx].text;
+      input.style.cssText = 'width: calc(100% - 30px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      subtaskEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newText = input.value.trim();
+        if (newText) { task.subtasks[idx].text = newText; }
+        else { task.subtasks.splice(idx, 1); }
+        markChanged();
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startAddingListSubtask(el, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'New subtask...';
+      input.style.cssText = 'width: calc(100% - 10px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+
+      el.replaceWith(input);
+      input.focus();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const text = input.value.trim();
+        if (text) {
+          if (!task.subtasks) task.subtasks = [];
+          task.subtasks.push({ text, checked: false });
+          markChanged();
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function startEditingListItem(titleEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.title;
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 8px 12px; color: var(--text-primary); font-size: 15px; font-family: inherit; outline: none;';
+
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newTitle = input.value.trim();
+        if (newTitle && newTitle !== task.title) {
+          task.title = newTitle;
+          markChanged();
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+
+    function showSectionPicker(anchorEl) {
+      document.querySelectorAll('.section-picker').forEach(el => el.remove());
+      const picker = document.createElement('div');
+      picker.className = 'section-picker';
+      const rect = anchorEl.getBoundingClientRect();
+      picker.style.top = (rect.bottom + 4) + 'px';
+      picker.style.right = (window.innerWidth - rect.right) + 'px';
+
+      sections.forEach(section => {
+        const btn = document.createElement('button');
+        btn.textContent = section.name;
+        btn.addEventListener('click', () => {
+          quickAddSection = section.id;
+          picker.remove();
+          renderTasks();
+          setTimeout(() => document.getElementById('quickAddInput')?.focus(), 10);
+        });
+        picker.appendChild(btn);
+      });
+
+      document.body.appendChild(picker);
+      setTimeout(() => {
+        document.addEventListener('click', function closeHandler(e) {
+          if (!picker.contains(e.target)) {
+            picker.remove();
+            document.removeEventListener('click', closeHandler);
+          }
+        });
+      }, 10);
+    }
+
+    function switchTaskView(view) {
+      currentView = view;
+      if (view === 'list') {
+        listView.style.display = 'block';
+        board.style.display = 'none';
+        listViewBtn.classList.add('active');
+        boardViewBtn.classList.remove('active');
+      } else {
+        listView.style.display = 'none';
+        board.style.display = 'flex';
+        listViewBtn.classList.remove('active');
+        boardViewBtn.classList.add('active');
+      }
+      renderTasks();
+    }
+
+    listViewBtn.addEventListener('click', () => switchTaskView('list'));
+    boardViewBtn.addEventListener('click', () => switchTaskView('board'));
+
+    function startAddingSection(btn) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'Section name...';
+      input.style.cssText = 'width: 220px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 8px; padding: 10px 14px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;';
+
+      btn.innerHTML = '';
+      btn.style.cssText = 'background: var(--bg-secondary); border: 2px dashed var(--accent); display: flex; align-items: center; justify-content: center; cursor: default; min-height: 120px; min-width: 340px; border-radius: 12px;';
+      btn.appendChild(input);
+      input.focus();
+
+      let saved = false;
+      const saveSection = () => {
+        if (saved) return;
+        saved = true;
+        const name = input.value.trim();
+        if (name) {
+          const id = taskSectionId(name);
+          if (!tasks[id]) {
+            sections.push({ id, name });
+            tasks[id] = [];
+            markChanged();
+          }
+        }
+        renderTasks();
+      };
+
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveSection(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveSection);
+    }
+
+    async function openTaskFile() {
+      try {
+        [taskFileHandle] = await window.showOpenFilePicker({
+          types: [{ description: 'Markdown', accept: { 'text/markdown': ['.md'] } }]
+        });
+        const file = await taskFileHandle.getFile();
+        const content = await file.text();
+        lastModified = file.lastModified;
+        const result = parseTaskMarkdown(content);
+        sections = result.sections;
+        tasks = result.tasks;
+        switchTaskView('board');
+        startWatching();
+        taskFileName = file.name;
+        filePathEl.textContent = file.name;
+        showStatus('Loaded ' + file.name);
+      } catch (e) {
+        if (e.name !== 'AbortError') { showStatus('Error: ' + e.message); }
+      }
+    }
+
+    openTaskBtn.addEventListener('click', openTaskFile);
+    document.getElementById('openBtnLarge')?.addEventListener('click', openTaskFile);
+
+    saveBtn.addEventListener('click', async () => {
+      if (!taskFileHandle) return;
+      try {
+        const writable = await taskFileHandle.createWritable();
+        await writable.write(toMarkdown());
+        await writable.close();
+        hasChanges = false;
+        saveBtn.disabled = true;
+        showStatus('Saved');
+      } catch (e) { showStatus('Error: ' + e.message); }
+    });
+
+    window.addEventListener('beforeunload', (e) => {
+      if (hasChanges) { e.preventDefault(); e.returnValue = ''; }
+    });
+
+    // ============================================================
+    // ===== MEMORY FUNCTIONALITY =====
+    // ============================================================
+
+    let memoryDirHandle = null;
+    let memoryData = {
+      claudeMd: null,
+      memoryFiles: [],
+      memoryDirs: {}
+    };
+
+    const memoryEmptyState = document.getElementById('memoryEmptyState');
+    const memoryMainContent = document.getElementById('memoryMainContent');
+    const memoryTabsContainer = document.getElementById('memoryTabsContainer');
+    const memoryContentContainer = document.getElementById('memoryContentContainer');
+    const modalOverlay = document.getElementById('modalOverlay');
+
+    function escapeHtml(text) {
+      return String(text || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function parseMemoryMarkdown(content) {
+      const parsed = {
+        title: '',
+        fields: {},
+        sections: {},
+        tables: [],
+        rawContent: content
+      };
+
+      const lines = content.split('\n');
+      let currentSection = '_intro';
+      parsed.sections[currentSection] = [];
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+
+        if (line.match(/^# /)) {
+          parsed.title = line.replace(/^# /, '').trim();
+          continue;
+        }
+
+        if (line.match(/^## /)) {
+          currentSection = line.replace(/^## /, '').trim();
+          parsed.sections[currentSection] = [];
+          continue;
+        }
+
+        const kvMatch = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
+        if (kvMatch) {
+          parsed.fields[kvMatch[1]] = kvMatch[2];
+          continue;
+        }
+
+        parsed.sections[currentSection].push(line);
+      }
+
+      for (const key in parsed.sections) {
+        parsed.sections[key] = parsed.sections[key].join('\n').trim();
+      }
+
+      const tableRegex = /\|(.+)\|\n\|[-| ]+\|\n((?:\|.+\|\n?)+)/g;
+      let match;
+      while ((match = tableRegex.exec(content)) !== null) {
+        const headers = match[1].split('|').map(h => h.trim()).filter(h => h);
+        const rowLines = match[2].trim().split('\n');
+        const rows = rowLines.map(row => row.split('|').map(c => c.trim()).filter(c => c));
+        parsed.tables.push({ headers, rows });
+      }
+
+      return parsed;
+    }
+
+    function getPreview(content, maxLength = 150) {
+      let preview = content
+        .replace(/^#+ .+$/gm, '')
+        .replace(/\*\*(.+?):\*\*.*/g, '')
+        .replace(/\|.+\|/g, '')
+        .replace(/[-=]{3,}/g, '')
+        .trim()
+        .substring(0, maxLength);
+      if (content.length > maxLength) preview += '...';
+      return preview;
+    }
+
+    function getDisplayName(filename) {
+      return filename
+        .replace('.md', '')
+        .split(/[-_]/)
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+    }
+
+    async function loadMemoryDirectory() {
+      try {
+        memoryDirHandle = await window.showDirectoryPicker();
+
+        memoryData = { claudeMd: null, memoryFiles: [], memoryDirs: {} };
+
+        try {
+          const claudeFileHandle = await memoryDirHandle.getFileHandle('CLAUDE.md');
+          const file = await claudeFileHandle.getFile();
+          memoryData.claudeMd = { content: await file.text(), fileHandle: claudeFileHandle };
+        } catch (e) { console.log('No CLAUDE.md found'); }
+
+        try {
+          const memoryDir = await memoryDirHandle.getDirectoryHandle('memory');
+          for await (const entry of memoryDir.values()) {
+            if (entry.kind === 'file' && entry.name.endsWith('.md')) {
+              const file = await entry.getFile();
+              memoryData.memoryFiles.push({
+                name: entry.name,
+                content: await file.text(),
+                fileHandle: entry
+              });
+            } else if (entry.kind === 'directory') {
+              memoryData.memoryDirs[entry.name] = [];
+              const subDirHandle = entry;
+              for await (const subEntry of subDirHandle.values()) {
+                if (subEntry.kind === 'file' && subEntry.name.endsWith('.md')) {
+                  const file = await subEntry.getFile();
+                  const content = await file.text();
+                  memoryData.memoryDirs[entry.name].push({
+                    name: subEntry.name,
+                    content: content,
+                    fileHandle: subEntry,
+                    dirHandle: subDirHandle,
+                    parsed: parseMemoryMarkdown(content)
+                  });
+                }
+              }
+            }
+          }
+        } catch (e) { console.log('No memory/ directory found'); }
+
+        renderMemory();
+        memoryEmptyState.style.display = 'none';
+        memoryMainContent.style.display = 'flex';
+        filePathEl.textContent = memoryDirHandle.name;
+        showStatus('Loaded memory from ' + memoryDirHandle.name);
+
+      } catch (e) {
+        if (e.name !== 'AbortError') { showStatus('Error: ' + e.message); }
+      }
+    }
+
+    function renderMemory() {
+      renderMemoryTabs();
+      renderMemoryContent();
+    }
+
+    function renderMemoryTabs() {
+      let html = '';
+
+      if (memoryData.claudeMd) {
+        html += `<button class="memory-tab active" data-tab="overview">Overview</button>`;
+      }
+
+      for (const file of memoryData.memoryFiles) {
+        const name = file.name.replace('.md', '');
+        html += `<button class="memory-tab${!memoryData.claudeMd && memoryData.memoryFiles[0] === file ? ' active' : ''}" data-tab="file-${escapeHtml(name)}">${escapeHtml(name)}</button>`;
+      }
+
+      for (const dirName of Object.keys(memoryData.memoryDirs).sort()) {
+        const files = memoryData.memoryDirs[dirName];
+        let count;
+        if (dirName === 'context') {
+          count = 0;
+          for (const file of files) {
+            const p = file.parsed;
+            count += Object.keys(p.fields).length;
+            for (const table of p.tables) {
+              count += table.rows.length;
+            }
+            for (const [sName, sContent] of Object.entries(p.sections)) {
+              if (sContent && sName !== '_intro') {
+                count += sContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|')).length;
+              }
+            }
+          }
+        } else {
+          count = files.length;
+        }
+        html += `<button class="memory-tab" data-tab="dir-${escapeHtml(dirName)}">${escapeHtml(dirName)} <span class="count">${count}</span></button>`;
+      }
+
+      memoryTabsContainer.innerHTML = html;
+
+      memoryTabsContainer.querySelectorAll('.memory-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+          memoryTabsContainer.querySelectorAll('.memory-tab').forEach(t => t.classList.remove('active'));
+          tab.classList.add('active');
+          renderMemoryContent();
+        });
+      });
+    }
+
+    function renderMemoryContent() {
+      const activeTab = memoryTabsContainer.querySelector('.memory-tab.active');
+      if (!activeTab) return;
+
+      const tabId = activeTab.dataset.tab;
+
+      if (tabId === 'overview') { renderMemoryOverview(); }
+      else if (tabId.startsWith('file-')) {
+        const fileName = tabId.replace('file-', '') + '.md';
+        renderMemoryFile(fileName);
+      } else if (tabId.startsWith('dir-')) {
+        const dirName = tabId.replace('dir-', '');
+        renderMemoryDirectory(dirName);
+      }
+    }
+
+    function renderMemoryOverview() {
+      if (!memoryData.claudeMd) return;
+
+      let statsHtml = '<div class="stats">';
+      for (const [dirName, files] of Object.entries(memoryData.memoryDirs)) {
+        let count;
+        if (dirName === 'context') {
+          count = 0;
+          for (const file of files) {
+            const p = file.parsed;
+            count += Object.keys(p.fields).length;
+            for (const table of p.tables) { count += table.rows.length; }
+            for (const [sName, sContent] of Object.entries(p.sections)) {
+              if (sContent && sName !== '_intro') {
+                count += sContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|')).length;
+              }
+            }
+          }
+        } else {
+          count = files.length;
+        }
+        statsHtml += `
+          <div class="stat">
+            <div class="stat-value">${count}</div>
+            <div class="stat-label">${escapeHtml(dirName)}</div>
+          </div>
+        `;
+      }
+      statsHtml += '</div>';
+
+      const claudeContent = renderMarkdownToHtml(memoryData.claudeMd.content);
+
+      memoryContentContainer.innerHTML = `
+        ${statsHtml}
+        <div class="file-card">
+          <div class="file-card-header" onclick="this.nextElementSibling.classList.toggle('expanded'); this.querySelector('.toggle').textContent = this.nextElementSibling.classList.contains('expanded') ? '\u2212' : '+'">
+            <span class="file-card-title">CLAUDE.md</span>
+            <span class="toggle" style="color: var(--text-muted);">&minus;</span>
+          </div>
+          <div class="file-card-content expanded markdown-content">${claudeContent}</div>
+        </div>
+        <button onclick="openEditModal('CLAUDE.md', 'claudeMd')" style="margin-top: 10px;">Edit CLAUDE.md</button>
+      `;
+    }
+
+    function renderMemoryFile(fileName) {
+      const file = memoryData.memoryFiles.find(f => f.name === fileName);
+      if (!file) return;
+
+      const content = renderMarkdownToHtml(file.content);
+
+      memoryContentContainer.innerHTML = `
+        <div class="file-card">
+          <div class="file-card-header">
+            <span class="file-card-title">${escapeHtml(fileName)}</span>
+          </div>
+          <div class="file-card-content expanded markdown-content">${content}</div>
+        </div>
+        <button id="editMemoryFileBtn" style="margin-top: 10px;">Edit ${escapeHtml(fileName)}</button>
+      `;
+
+      document.getElementById('editMemoryFileBtn').addEventListener('click', () => openEditModal(fileName, 'memoryFile'));
+    }
+
+    function renderMemoryDirectory(dirName) {
+      const files = memoryData.memoryDirs[dirName] || [];
+
+      // Context directory uses flat list view
+      if (dirName === 'context') {
+        renderMemoryDirectoryFlat(dirName, files);
+        return;
+      }
+
+      // All other directories use card grid view
+      let html = `
+        <div class="search-box">
+          <span style="color: var(--text-muted);">&#128269;</span>
+          <input type="text" placeholder="Search ${escapeHtml(dirName)}..." id="dirSearch">
+        </div>
+        <div class="memory-grid" id="dirGrid">
+      `;
+
+      for (const file of files) {
+        const p = file.parsed;
+        const title = p.title || getDisplayName(file.name);
+
+        let fieldsHtml = '';
+        const fieldEntries = Object.entries(p.fields).slice(0, 3);
+        if (fieldEntries.length > 0) {
+          fieldsHtml = '<div class="memory-card-fields">';
+          for (const [key, value] of fieldEntries) {
+            fieldsHtml += `
+              <div class="memory-card-field">
+                <span class="memory-card-field-label">${escapeHtml(key)}</span>
+                <span class="memory-card-field-value">${escapeHtml(value)}</span>
+              </div>
+            `;
+          }
+          fieldsHtml += '</div>';
+        }
+
+        let preview = '';
+        for (const [sectionName, sectionContent] of Object.entries(p.sections)) {
+          if (sectionContent && sectionName !== '_intro') {
+            preview = getPreview(sectionContent, 100);
+            break;
+          }
+        }
+        if (!preview) preview = getPreview(p.rawContent, 100);
+
+        html += `
+          <div class="memory-card" data-file-name="${escapeHtml(file.name)}" data-search="${escapeHtml((title + ' ' + JSON.stringify(p.fields) + ' ' + p.rawContent).toLowerCase())}">
+            <div class="memory-card-title">${escapeHtml(title)}</div>
+            ${fieldsHtml}
+            <div class="memory-card-preview">${escapeHtml(preview)}</div>
+          </div>
+        `;
+      }
+
+      html += `
+        <div class="add-btn">
+          + Add to ${escapeHtml(dirName)}
+        </div>
+      </div>`;
+
+      memoryContentContainer.innerHTML = html;
+
+      document.getElementById('dirSearch').addEventListener('input', (e) => filterMemoryDirectory(dirName, e.target.value));
+      memoryContentContainer.querySelectorAll('.memory-card').forEach(cardEl => {
+        cardEl.addEventListener('click', () => openFileModal(dirName, cardEl.dataset.fileName));
+      });
+      memoryContentContainer.querySelector('.add-btn').addEventListener('click', () => openNewFileModal(dirName));
+    }
+
+    function renderMemoryDirectoryFlat(dirName, files) {
+      let html = `
+        <div class="search-box">
+          <span style="color: var(--text-muted);">&#128269;</span>
+          <input type="text" placeholder="Search ${escapeHtml(dirName)}..." id="dirSearch">
+        </div>
+        <div id="dirGrid">
+      `;
+
+      for (const file of files) {
+        const p = file.parsed;
+
+        // Render fields as a key-value table
+        const fieldEntries = Object.entries(p.fields);
+        if (fieldEntries.length > 0) {
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><tbody>`;
+          for (const [key, value] of fieldEntries) {
+            html += `<tr data-search="${escapeHtml((key + ' ' + value).toLowerCase())}"><td>${escapeHtml(key)}</td><td>${escapeHtml(value)}</td></tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+
+        // Render parsed tables (teams, tools, etc.) as proper HTML tables
+        for (const table of p.tables) {
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><thead><tr>`;
+          for (const h of table.headers) {
+            html += `<th>${escapeHtml(h)}</th>`;
+          }
+          html += `</tr></thead><tbody>`;
+          for (const row of table.rows) {
+            const searchData = row.join(' ').toLowerCase();
+            html += `<tr data-search="${escapeHtml(searchData)}">`;
+            for (const cell of row) {
+              html += `<td>${escapeHtml(cell)}</td>`;
+            }
+            html += `</tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+
+        // Render non-table section content as list items
+        for (const [sectionName, sectionContent] of Object.entries(p.sections)) {
+          if (!sectionContent || sectionName === '_intro') continue;
+          const lines = sectionContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|'));
+          if (lines.length === 0) continue;
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><thead><tr><th colspan="2">${escapeHtml(sectionName)}</th></tr></thead><tbody>`;
+          for (const line of lines) {
+            const cleanLine = line.replace(/^[-*]\s*/, '').replace(/\*\*(.+?)\*\*/g, '$1').trim();
+            if (!cleanLine) continue;
+            html += `<tr data-search="${escapeHtml((sectionName + ' ' + cleanLine).toLowerCase())}"><td colspan="2">${escapeHtml(cleanLine)}</td></tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+      }
+
+      html += `</div>`;
+      memoryContentContainer.innerHTML = html;
+
+      document.getElementById('dirSearch').addEventListener('input', (e) => filterMemoryDirectory(dirName, e.target.value));
+    }
+
+    function filterMemoryDirectory(dirName, searchTerm) {
+      const grid = document.getElementById('dirGrid');
+      const items = grid.querySelectorAll('.memory-card, tr[data-search]');
+      const search = searchTerm.toLowerCase();
+      items.forEach(item => {
+        const searchData = item.dataset.search || '';
+        item.style.display = (!search || searchData.includes(search)) ? '' : 'none';
+      });
+    }
+
+    function renderMarkdownToHtml(md) {
+      let html = escapeHtml(md);
+
+      html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+      html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+      html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+      html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+      html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+      html = html.replace(/```[\s\S]*?```/g, match => {
+        const code = match.replace(/```\w*\n?/g, '');
+        return '<pre><code>' + code + '</code></pre>';
+      });
+      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+      html = html.replace(/(\|.+\|\n\|[-| ]+\|\n(?:\|.+\|\n?)+)/g, match => {
+        const lines = match.trim().split('\n');
+        const headers = lines[0].split('|').filter(c => c.trim());
+        const rows = lines.slice(2).map(row => row.split('|').filter(c => c.trim()));
+        let table = '<table><thead><tr>';
+        headers.forEach(h => table += `<th>${h.trim()}</th>`);
+        table += '</tr></thead><tbody>';
+        rows.forEach(row => {
+          table += '<tr>';
+          row.forEach(cell => table += `<td>${cell.trim()}</td>`);
+          table += '</tr>';
+        });
+        table += '</tbody></table>';
+        return table;
+      });
+      html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+      html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+      html = html.replace(/^(?!<[hupol]|<li|<table|<pre)(.+)$/gm, '<p>$1</p>');
+      html = html.replace(/<p><\/p>/g, '');
+      html = html.replace(/<p>\s*<\/p>/g, '');
+
+      return html;
+    }
+
+    // Modal functions
+    function openFileModal(dirName, fileName) {
+      const files = memoryData.memoryDirs[dirName];
+      const file = files.find(f => f.name === fileName);
+      if (!file) return;
+
+      document.getElementById('modalTitle').textContent = getDisplayName(fileName);
+      document.getElementById('modalBody').innerHTML = `
+        <div class="markdown-content" style="margin-bottom: 20px;">
+          ${renderMarkdownToHtml(file.content)}
+        </div>
+        <div class="form-group">
+          <label>Edit Raw Markdown</label>
+          <textarea id="editContent">${escapeHtml(file.content)}</textarea>
+        </div>
+      `;
+
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = 'dirFile';
+      modalOverlay.dataset.dirName = dirName;
+      modalOverlay.dataset.fileName = fileName;
+    }
+
+    function openNewFileModal(dirName) {
+      document.getElementById('modalTitle').textContent = `Add to ${dirName}`;
+
+      let template = '# New Entry\n\n';
+      const existingFiles = memoryData.memoryDirs[dirName];
+      if (existingFiles && existingFiles.length > 0) {
+        const sample = existingFiles[0].parsed;
+        for (const key of Object.keys(sample.fields)) {
+          template += `**${key}:** \n`;
+        }
+        template += '\n';
+        for (const section of Object.keys(sample.sections)) {
+          if (section !== '_intro') {
+            template += `## ${section}\n\n`;
+          }
+        }
+      }
+
+      document.getElementById('modalBody').innerHTML = `
+        <div class="form-group">
+          <label>Filename (without .md)</label>
+          <input type="text" id="newFileName" placeholder="my-new-entry" style="width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font-size: 14px; font-family: inherit; margin-bottom: 16px;">
+        </div>
+        <div class="form-group">
+          <label>Content</label>
+          <textarea id="editContent">${escapeHtml(template)}</textarea>
+        </div>
+      `;
+
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = 'newDirFile';
+      modalOverlay.dataset.dirName = dirName;
+    }
+
+    function openEditModal(fileName, type) {
+      let content = '';
+      if (type === 'claudeMd') {
+        content = memoryData.claudeMd.content;
+      } else if (type === 'memoryFile') {
+        const file = memoryData.memoryFiles.find(f => f.name === fileName);
+        if (file) content = file.content;
+      }
+
+      document.getElementById('modalTitle').textContent = `Edit ${fileName}`;
+      document.getElementById('modalBody').innerHTML = `
+        <div class="form-group">
+          <label>Content</label>
+          <textarea id="editContent" style="min-height: 400px;">${escapeHtml(content)}</textarea>
+        </div>
+      `;
+
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = type;
+      modalOverlay.dataset.fileName = fileName;
+    }
+
+    function closeModal() {
+      modalOverlay.classList.remove('visible');
+    }
+
+    async function saveModal() {
+      const type = modalOverlay.dataset.type;
+      const content = document.getElementById('editContent').value;
+
+      try {
+        if (type === 'claudeMd') {
+          memoryData.claudeMd.content = content;
+          const writable = await memoryData.claudeMd.fileHandle.createWritable();
+          await writable.write(content);
+          await writable.close();
+          showStatus('Saved CLAUDE.md');
+
+        } else if (type === 'memoryFile') {
+          const fileName = modalOverlay.dataset.fileName;
+          const file = memoryData.memoryFiles.find(f => f.name === fileName);
+          if (file) {
+            file.content = content;
+            const writable = await file.fileHandle.createWritable();
+            await writable.write(content);
+            await writable.close();
+            showStatus('Saved ' + fileName);
+          }
+
+        } else if (type === 'dirFile') {
+          const dirName = modalOverlay.dataset.dirName;
+          const fileName = modalOverlay.dataset.fileName;
+          const files = memoryData.memoryDirs[dirName];
+          const file = files.find(f => f.name === fileName);
+          if (file) {
+            file.content = content;
+            file.parsed = parseMemoryMarkdown(content);
+            const writable = await file.fileHandle.createWritable();
+            await writable.write(content);
+            await writable.close();
+            showStatus('Saved ' + fileName);
+          }
+
+        } else if (type === 'newDirFile') {
+          const dirName = modalOverlay.dataset.dirName;
+          let fileName = document.getElementById('newFileName').value.trim();
+          if (!fileName) { showStatus('Please enter a filename'); return; }
+          if (!fileName.endsWith('.md')) fileName += '.md';
+
+          const memoryDir = await memoryDirHandle.getDirectoryHandle('memory');
+          const subDir = await memoryDir.getDirectoryHandle(dirName, { create: true });
+          const fileHandle = await subDir.getFileHandle(fileName, { create: true });
+
+          const writable = await fileHandle.createWritable();
+          await writable.write(content);
+          await writable.close();
+
+          memoryData.memoryDirs[dirName].push({
+            name: fileName,
+            content: content,
+            fileHandle: fileHandle,
+            dirHandle: subDir,
+            parsed: parseMemoryMarkdown(content)
+          });
+
+          showStatus('Created ' + fileName);
+        }
+
+        closeModal();
+        renderMemory();
+
+      } catch (e) {
+        showStatus('Error saving: ' + e.message);
+      }
+    }
+
+    // Memory event listeners
+    openMemoryBtn.addEventListener('click', loadMemoryDirectory);
+    document.getElementById('openMemoryBtnLarge').addEventListener('click', loadMemoryDirectory);
+    document.getElementById('modalClose').addEventListener('click', closeModal);
+    document.getElementById('modalCancel').addEventListener('click', closeModal);
+    document.getElementById('modalSave').addEventListener('click', saveModal);
+
+    modalOverlay.addEventListener('click', (e) => {
+      if (e.target === modalOverlay) closeModal();
+    });
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeModal();
+    });
+
+    // Expose functions to onclick handlers
+    window.openFileModal = openFileModal;
+    window.openNewFileModal = openNewFileModal;
+    window.openEditModal = openEditModal;
+    window.filterMemoryDirectory = filterMemoryDirectory;
+  </script>
+</body>
+</html>
diff --git a/forum/__init__.py b/forum/__init__.py
index c10b0f3..124ec84 100644
--- a/forum/__init__.py
+++ b/forum/__init__.py
@@ -1,5 +1,12 @@
 from flask import Flask
 from forum.routes import rt
+from forum.comments import comments
+from forum.reactions import reactions
+from forum.comment_reactions import comment_reactions
+from forum.posts import posts
+from forum.messages import messages
+from forum.settings import settings
+from forum.profile import profile
 
 def create_app():
     """Construct the core application."""
@@ -9,6 +16,13 @@ def create_app():
     # post_routes
     # subforum_routes
     # etc
+    app.register_blueprint(posts)
+    app.register_blueprint(comments)
+    app.register_blueprint(reactions)
+    app.register_blueprint(comment_reactions)
+    app.register_blueprint(messages)
+    app.register_blueprint(settings)
+    app.register_blueprint(profile)
     app.register_blueprint(rt)
     # Set globals
     from forum.models import db
diff --git a/forum/app.py b/forum/app.py
index 4d8a828..f367afe 100644
--- a/forum/app.py
+++ b/forum/app.py
@@ -37,6 +37,7 @@ def add_subforum(title, description, parent=None):
 
 login_manager = LoginManager()
 login_manager.init_app(app)
+login_manager.login_view = 'routes.loginform'
 
 @login_manager.user_loader
 def load_user(userid):
diff --git a/forum/comment_reactions.py b/forum/comment_reactions.py
new file mode 100644
index 0000000..c6b57e6
--- /dev/null
+++ b/forum/comment_reactions.py
@@ -0,0 +1,45 @@
+from flask import Blueprint, request, redirect
+from flask_login import login_required, current_user
+from forum.models import db, Comment, CommentReaction, error
+
+comment_reactions = Blueprint("comment_reactions", __name__)
+
+@comment_reactions.route("/action_comment_reaction", methods=["POST"])
+@login_required
+def react_to_comment():
+
+    comment_id = request.form.get("comment_id")
+
+    reaction_type = request.form.get("reaction_type")
+
+    if reaction_type not in ["like", "dislike", "heart"]:
+        return error("Invalid reaction.")
+
+    comment = Comment.query.filter(Comment.id == comment_id).first()
+
+    if not comment:
+        return error("That comment does not exist.")
+
+    existing_reaction = CommentReaction.query.filter_by(
+        user_id=current_user.id,
+        comment_id=comment.id
+    ).first()
+
+    if existing_reaction:
+
+        if existing_reaction.reaction_type == reaction_type:
+            db.session.delete(existing_reaction)
+
+        else:
+            existing_reaction.reaction_type = reaction_type
+
+    else:
+
+        reaction = CommentReaction(reaction_type)
+        reaction.user_id = current_user.id
+        reaction.comment_id = comment.id
+        db.session.add(reaction)
+
+    db.session.commit()
+
+    return redirect("/viewpost?post=" + str(comment.post_id))
\ No newline at end of file
diff --git a/forum/comments.py b/forum/comments.py
new file mode 100644
index 0000000..b088a70
--- /dev/null
+++ b/forum/comments.py
@@ -0,0 +1,43 @@
+import datetime
+from flask import Blueprint, request, redirect, flash
+from flask_login import current_user, login_required
+from forum.models import Post, Comment, db, error, valid_comment
+
+comments = Blueprint('comments', __name__)
+
+@comments.route('/action_comment', methods=['POST'])
+@login_required
+def comment():
+    post_value = request.args.get("post")
+
+    if not post_value:
+        flash("A post ID is required.", "error")
+        return redirect("/")
+
+    try:
+        post_id = int(post_value)
+    except ValueError:
+        flash("Invalid post ID.", "error")
+        return redirect("/")
+
+    post = Post.query.filter(Post.id == post_id).first()
+
+    if not post:
+        flash("That post does not exist.", "error")
+        return redirect("/")
+
+    content = request.form.get("content", "").strip()
+
+    if not valid_comment(content):
+        flash("Comment must be between 1 and 1000 characters.", "error")
+        return redirect("/viewpost?post=" + str(post_id))
+
+    postdate = datetime.datetime.now()
+    comment = Comment(content, postdate)
+
+    current_user.comments.append(comment)
+    post.comments.append(comment)
+
+    db.session.commit()
+
+    return redirect("/viewpost?post=" + str(post_id))
\ No newline at end of file
diff --git a/forum/messages.py b/forum/messages.py
new file mode 100644
index 0000000..a588a90
--- /dev/null
+++ b/forum/messages.py
@@ -0,0 +1,102 @@
+import datetime
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from flask_login import current_user, login_required
+from sqlalchemy import or_, and_
+
+from forum.models import User, Message, db, error, valid_message
+
+messages = Blueprint('messages', __name__)
+
+
+@messages.app_context_processor
+def inject_unread_message_count():
+    """Makes the unread DM count available to every template (e.g. for a sidebar badge)."""
+    if current_user.is_authenticated:
+        count = Message.query.filter(
+            Message.recipient_id == current_user.id,
+            Message.is_read == False
+        ).count()
+        return {"unread_message_count": count}
+    return {"unread_message_count": 0}
+
+
+@messages.route('/messages')
+@login_required
+def inbox():
+    thread_messages = Message.query.filter(
+        or_(Message.sender_id == current_user.id, Message.recipient_id == current_user.id)
+    ).order_by(Message.sentdate.desc()).all()
+
+    conversations = {}
+    for m in thread_messages:
+        other = m.recipient if m.sender_id == current_user.id else m.sender
+        if other.id not in conversations:
+            conversations[other.id] = {
+                "user": other,
+                "last_message": m,
+                "unread_count": Message.query.filter(
+                    Message.sender_id == other.id,
+                    Message.recipient_id == current_user.id,
+                    Message.is_read == False
+                ).count(),
+            }
+
+    conversation_list = sorted(
+        conversations.values(),
+        key=lambda c: c["last_message"].sentdate,
+        reverse=True
+    )
+
+    return render_template("messages_inbox.html", conversations=conversation_list)
+
+
+@messages.route('/messages/<username>')
+@login_required
+def conversation(username):
+    other = User.query.filter(User.username == username).first()
+    if not other:
+        return error("That user does not exist!")
+    if other.id == current_user.id:
+        return error("You can't send messages to yourself!")
+
+    thread = Message.query.filter(
+        or_(
+            and_(Message.sender_id == current_user.id, Message.recipient_id == other.id),
+            and_(Message.sender_id == other.id, Message.recipient_id == current_user.id)
+        )
+    ).order_by(Message.sentdate.asc()).all()
+
+    # Mark any messages the other user sent us as read now that we're viewing the thread.
+    unread = [m for m in thread if m.recipient_id == current_user.id and not m.is_read]
+    if unread:
+        for m in unread:
+            m.is_read = True
+        db.session.commit()
+
+    return render_template("conversation.html", other=other, thread_messages=thread)
+
+
+@messages.route('/action_send_message', methods=['POST'])
+@login_required
+def send_message():
+    username = request.form.get('recipient', '').strip()
+    content = request.form.get('content', '').strip()
+
+    recipient = User.query.filter(User.username == username).first()
+    if not recipient:
+        flash("That user does not exist.", "error")
+        return redirect(url_for('messages.inbox'))
+    if recipient.id == current_user.id:
+        flash("You can't send messages to yourself.", "error")
+        return redirect(url_for('messages.inbox'))
+    if not valid_message(content):
+        flash("Message must be between 1 and 2000 characters.", "error")
+        return redirect(url_for('messages.conversation', username=username))
+
+    message = Message(content, datetime.datetime.now())
+    message.sender = current_user
+    message.recipient = recipient
+    db.session.add(message)
+    db.session.commit()
+
+    return redirect(url_for('messages.conversation', username=username))
diff --git a/forum/models.py b/forum/models.py
index 8add9ae..d20102c 100644
--- a/forum/models.py
+++ b/forum/models.py
@@ -9,38 +9,70 @@
 db = SQLAlchemy()
 
 #OBJECT MODELS
+# class User(UserMixin, db.Model):
+#     id = db.Column(db.Integer, primary_key=True)
+#     username = db.Column(db.Text, unique=True)
+#     password_hash = db.Column(db.Text)
+#     email = db.Column(db.Text, unique=True)
+#     admin = db.Column(db.Boolean, default=False)
+#     posts = db.relationship("Post", backref="user")
+#     comments = db.relationship("Comment", backref="user")
+
+#     def __init__(self, email, username, password):
+#         self.email = email
+#         self.username = username
+#         self.password_hash = generate_password_hash(password)
+#     def check_password(self, password):
+#         return check_password_hash(self.password_hash, password)
+
 class User(UserMixin, db.Model):
     id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.Text, unique=True)
-    password_hash = db.Column(db.Text)
-    email = db.Column(db.Text, unique=True)
+    username = db.Column(db.String(40), unique=True)
+    password_hash = db.Column(db.String(255))
+    email = db.Column(db.String(255), unique=True)
     admin = db.Column(db.Boolean, default=False)
+    # Filename only (not a path) of the user's uploaded avatar image, stored
+    # under forum/static/images/avatars/. NULL means "no photo uploaded" --
+    # the UI falls back to the colored-initial avatar in that case.
+    avatar_filename = db.Column(db.String(255), nullable=True)
+
     posts = db.relationship("Post", backref="user")
     comments = db.relationship("Comment", backref="user")
+    reactions = db.relationship("Reaction", backref="user")
+    comment_reactions = db.relationship("CommentReaction", backref="user")      #added 8/21 LJD
 
     def __init__(self, email, username, password):
         self.email = email
         self.username = username
         self.password_hash = generate_password_hash(password)
+
     def check_password(self, password):
         return check_password_hash(self.password_hash, password)
+
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
     
 class Post(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     title = db.Column(db.Text)
     content = db.Column(db.Text)
     comments = db.relationship("Comment", backref="post")
+    reactions = db.relationship("Reaction", backref="post")
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
     subforum_id = db.Column(db.Integer, db.ForeignKey('subforum.id'))
     postdate = db.Column(db.DateTime)
+    is_public = db.Column(db.Boolean,default=True) #added MCC
+    media_url = db.Column(db.Text, default=None) #added MCC
 
     #cache stuff
     lastcheck = None
     savedresponce = None
-    def __init__(self, title, content, postdate):
+    def __init__(self, title, content, postdate, is_public, media_url=None):
         self.title = title
         self.content = content
         self.postdate = postdate
+        self.is_public = is_public #added MCC
+        self.media_url = media_url #added MCC
     def get_time_string(self):
         #this only needs to be calculated every so often, not for every request
         #this can be a rudamentary chache
@@ -69,7 +101,8 @@ def get_time_string(self):
 
 class Subforum(db.Model):
     id = db.Column(db.Integer, primary_key=True)
-    title = db.Column(db.Text, unique=True)
+    # title = db.Column(db.Text, unique=True)
+    title = db.Column(db.String(140), unique=True)   #string is standard in MYSQL
     description = db.Column(db.Text)
     subforums = db.relationship("Subforum")
     parent_id = db.Column(db.Integer, db.ForeignKey('subforum.id'))
@@ -87,6 +120,12 @@ class Comment(db.Model):
     user_id = db.Column(db.Integer, db.ForeignKey('user.id'))
     post_id = db.Column(db.Integer, db.ForeignKey("post.id"))
 
+    reactions = db.relationship(
+        "CommentReaction",
+        backref="comment",
+        cascade="all, delete-orphan"
+    )
+
     lastcheck = None
     savedresponce = None
     def __init__(self, content, postdate):
@@ -115,6 +154,89 @@ def get_time_string(self):
             self.savedresponce =  "Just a moment ago!"
         return self.savedresponce
 
+class Reaction(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    reaction_type = db.Column(db.String(10), nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)
+    post_id = db.Column(db.Integer, db.ForeignKey("post.id"), nullable=False)
+
+    # this prevents one user from having multiple reactions to the same comment/post
+    __table_args__ = (
+        db.UniqueConstraint("user_id", "post_id", name="unique_user_post_reaction"), 
+    )
+
+    def __init__(self, reaction_type):
+        self.reaction_type = reaction_type
+
+class CommentReaction(db.Model):
+
+    id = db.Column(db.Integer, primary_key=True)
+
+    reaction_type = db.Column(db.String(10), nullable=False)
+
+    user_id = db.Column(
+        db.Integer,
+        db.ForeignKey("user.id"),
+        nullable=False
+    )
+
+    comment_id = db.Column(
+        db.Integer,
+        db.ForeignKey("comment.id"),
+        nullable=False
+    )
+
+    __table_args__ = (
+        db.UniqueConstraint(
+            "user_id",
+            "comment_id",
+            name="unique_user_comment_reaction"
+        ),
+    )
+
+    def __init__(self, reaction_type):
+        self.reaction_type = reaction_type
+
+class Message(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    sentdate = db.Column(db.DateTime)
+    is_read = db.Column(db.Boolean, default=False)
+
+    sender_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)
+    recipient_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)
+
+    sender = db.relationship("User", foreign_keys=[sender_id], backref="sent_messages")
+    recipient = db.relationship("User", foreign_keys=[recipient_id], backref="received_messages")
+
+    lastcheck = None
+    savedresponce = None
+    def __init__(self, content, sentdate):
+        self.content = content
+        self.sentdate = sentdate
+    def get_time_string(self):
+        #this only needs to be calculated every so often, not for every request
+        #this can be a rudamentary chache
+        now = datetime.datetime.now()
+        if self.lastcheck is None or (now - self.lastcheck).total_seconds() > 30:
+            self.lastcheck = now
+        else:
+            return self.savedresponce
+
+        diff = now - self.sentdate
+        seconds = diff.total_seconds()
+        if seconds / (60 * 60 * 24 * 30) > 1:
+            self.savedresponce =  " " + str(int(seconds / (60 * 60 * 24 * 30))) + " months ago"
+        elif seconds / (60 * 60 * 24) > 1:
+            self.savedresponce =  " " + str(int(seconds / (60*  60 * 24))) + " days ago"
+        elif seconds / (60 * 60) > 1:
+            self.savedresponce = " " + str(int(seconds / (60 * 60))) + " hours ago"
+        elif seconds / (60) > 1:
+            self.savedresponce = " " + str(int(seconds / 60)) + " minutes ago"
+        else:
+            self.savedresponce =  "Just a moment ago!"
+        return self.savedresponce
+
 def error(errormessage):
 	return "<b style=\"color: red;\">" + errormessage + "</b>"
 
@@ -139,3 +261,11 @@ def valid_title(title):
 def valid_content(content):
 	return len(content) > 10 and len(content) < 5000
 
+# Comment checks
+def valid_comment(content):
+    return len(content.strip()) > 0 and len(content) <= 1000
+
+# Direct message checks
+def valid_message(content):
+    return len(content.strip()) > 0 and len(content) <= 2000
+
diff --git a/forum/posts.py b/forum/posts.py
new file mode 100644
index 0000000..acf2a95
--- /dev/null
+++ b/forum/posts.py
@@ -0,0 +1,110 @@
+
+from flask import render_template, request, redirect, url_for, Blueprint, flash
+from flask_login import current_user, login_user, logout_user
+from flask_login.utils import login_required
+import datetime
+from forum.models import User, Post, Comment, Subforum, Reaction, valid_content, valid_title, db, generateLinkPath, error
+from forum.user import username_taken, email_taken, valid_username
+
+posts = Blueprint('posts', __name__)
+
+
+@posts.route('/addpost')
+@login_required
+def addpost():
+    subforum_id = int(request.args.get("sub"))
+    subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
+    if not subforum:
+        return error("That subforum does not exist!")
+
+    return render_template("createpost.html", subforum=subforum)
+
+
+@posts.route('/viewpost')
+def viewpost():
+    postid = int(request.args.get("post"))
+    post = Post.query.filter(Post.id == postid).first()
+
+    if not post:
+        return error("That post does not exist!")
+
+    if not post.is_public and not current_user.is_authenticated:
+        flash("This post is private. Log in to view it.", "error")
+        return redirect(f"/subforum?sub={post.subforum_id}")
+
+    subforumpath = post.subforum.path
+    if not subforumpath:
+        subforumpath = generateLinkPath(post.subforum.id)
+
+    comments = Comment.query.filter(
+        Comment.post_id == postid
+    ).order_by(Comment.id.desc())
+
+    like_count = Reaction.query.filter_by(
+        post_id=postid,
+        reaction_type="like"
+    ).count()
+
+    dislike_count = Reaction.query.filter_by(
+        post_id=postid,
+        reaction_type="dislike"
+    ).count()
+
+    heart_count = Reaction.query.filter_by(
+        post_id=postid,
+        reaction_type="heart"
+    ).count()
+
+    user_reaction = None
+
+    if current_user.is_authenticated:
+        reaction = Reaction.query.filter_by(
+            post_id=postid,
+            user_id=current_user.id
+        ).first()
+
+        if reaction:
+            user_reaction = reaction.reaction_type
+
+    return render_template(
+        "viewpost.html",
+        post=post,
+        path=subforumpath,
+        comments=comments,
+        like_count=like_count,
+        dislike_count=dislike_count,
+        heart_count=heart_count,
+        user_reaction=user_reaction
+    )
+
+
+@posts.route('/action_post', methods=['POST'])
+@login_required
+def action_post():
+    subforum_id = int(request.args.get("sub"))
+    subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
+    if not subforum:
+        return redirect(url_for("subforums"))
+
+    user = current_user
+    title = request.form['title']
+    content = request.form['content']
+    is_public = request.form.get('is_public')  # added, MCC
+    is_public = (is_public == 'on')  # added, MCC
+    media_url = request.form.get('media_url') # added, MCC
+    # check for valid posting
+    errors = []
+    retry = False
+    if not valid_title(title):
+        errors.append("Title must be between 4 and 140 characters long!")
+        retry = True
+    if not valid_content(content):
+        errors.append("Post must be between 10 and 5000 characters long!")
+        retry = True
+    if retry:
+        return render_template("createpost.html", subforum=subforum, errors=errors)
+    post = Post(title, content, datetime.datetime.now(), is_public, media_url)  # updated, MCC
+    subforum.posts.append(post)
+    user.posts.append(post)
+    db.session.commit()
+    return redirect("/viewpost?post=" + str(post.id))
\ No newline at end of file
diff --git a/forum/profile.py b/forum/profile.py
new file mode 100644
index 0000000..7860853
--- /dev/null
+++ b/forum/profile.py
@@ -0,0 +1,104 @@
+import os
+import uuid
+
+from flask import Blueprint, render_template, request, redirect, url_for, flash, current_app
+from flask_login import current_user, login_required
+from werkzeug.utils import secure_filename
+
+from forum.models import db
+from forum.user import (
+    valid_username, valid_email, username_taken, email_taken,
+    valid_avatar_filename, avatar_extension, MAX_AVATAR_BYTES,
+)
+
+profile = Blueprint('profile', __name__)
+
+AVATAR_SUBDIR = os.path.join('images', 'avatars')
+
+
+def _avatar_dir():
+    path = os.path.join(current_app.root_path, 'static', AVATAR_SUBDIR)
+    os.makedirs(path, exist_ok=True)
+    return path
+
+
+@profile.route('/profile')
+@login_required
+def profile_page():
+    return render_template("profile.html")
+
+
+@profile.route('/action_update_username', methods=['POST'])
+@login_required
+def update_username():
+    username = request.form.get('username', '').strip()
+
+    if not valid_username(username):
+        flash("Username must be 4-40 characters (letters, numbers, and !@#%& only).", "error")
+    elif username != current_user.username and username_taken(username):
+        flash("That username is already taken.", "error")
+    else:
+        current_user.username = username
+        db.session.commit()
+        flash("Your username has been updated.", "success")
+
+    return redirect(url_for('profile.profile_page'))
+
+
+@profile.route('/action_update_email', methods=['POST'])
+@login_required
+def update_email():
+    email = request.form.get('email', '').strip()
+
+    if not valid_email(email):
+        flash("Please enter a valid email address.", "error")
+    elif email != current_user.email and email_taken(email):
+        flash("That email is already in use by another account.", "error")
+    else:
+        current_user.email = email
+        db.session.commit()
+        flash("Your email has been updated.", "success")
+
+    return redirect(url_for('profile.profile_page'))
+
+
+@profile.route('/action_update_avatar', methods=['POST'])
+@login_required
+def update_avatar():
+    upload = request.files.get('avatar')
+
+    if upload is None or upload.filename == '':
+        flash("Please choose an image to upload.", "error")
+        return redirect(url_for('profile.profile_page'))
+
+    filename = secure_filename(upload.filename)
+
+    if not valid_avatar_filename(filename):
+        flash("Profile pictures must be a PNG, JPG, GIF, or WEBP file.", "error")
+        return redirect(url_for('profile.profile_page'))
+
+    # Peek at the size without trusting Content-Length: seek to the end of
+    # the stream, read the position, then rewind before saving.
+    upload.stream.seek(0, os.SEEK_END)
+    size = upload.stream.tell()
+    upload.stream.seek(0)
+
+    if size > MAX_AVATAR_BYTES:
+        flash("Profile pictures must be 2MB or smaller.", "error")
+        return redirect(url_for('profile.profile_page'))
+
+    new_filename = f"user_{current_user.id}_{uuid.uuid4().hex}.{avatar_extension(filename)}"
+    avatar_dir = _avatar_dir()
+    upload.save(os.path.join(avatar_dir, new_filename))
+
+    old_filename = current_user.avatar_filename
+    current_user.avatar_filename = new_filename
+    db.session.commit()
+
+    if old_filename:
+        old_path = os.path.join(avatar_dir, old_filename)
+        if os.path.exists(old_path):
+            os.remove(old_path)
+
+    flash("Your profile picture has been updated.", "success")
+    return redirect(url_for('profile.profile_page'))
diff --git a/forum/reactions.py b/forum/reactions.py
new file mode 100644
index 0000000..ef2dcbe
--- /dev/null
+++ b/forum/reactions.py
@@ -0,0 +1,39 @@
+from flask import Blueprint, request, redirect
+from flask_login import login_required, current_user
+from forum.models import db, Post, Reaction, error
+
+reactions = Blueprint("reactions", __name__)
+
+@reactions.route("/action_reaction", methods=["POST"])
+@login_required
+def react():
+    post_id = request.form.get("post_id")
+    reaction_type = request.form.get("reaction_type")
+
+    if reaction_type not in ["like", "dislike", "heart"]:
+        return error("Invalid reaction.")
+
+    post = Post.query.filter(Post.id == post_id).first()
+
+    if not post:
+        return error("That post does not exist.")
+
+    existing_reaction = Reaction.query.filter_by(
+        user_id=current_user.id,
+        post_id=post.id
+    ).first()
+
+    if existing_reaction:
+        if existing_reaction.reaction_type == reaction_type:
+            db.session.delete(existing_reaction)
+        else:
+            existing_reaction.reaction_type = reaction_type
+    else:
+        reaction = Reaction(reaction_type)
+        reaction.user = current_user
+        reaction.post = post
+        db.session.add(reaction)
+
+    db.session.commit()
+
+    return redirect("/viewpost?post=" + str(post.id))
\ No newline at end of file
diff --git a/forum/routes.py b/forum/routes.py
index 75993e5..0791e4f 100644
--- a/forum/routes.py
+++ b/forum/routes.py
@@ -1,9 +1,9 @@
-from flask import render_template, request, redirect, url_for
+from flask import Blueprint, render_template, request, redirect, url_for
 from flask_login import current_user, login_user, logout_user
 from flask_login.utils import login_required
 import datetime
-from flask import Blueprint, render_template, request, redirect, url_for
-from forum.models import User, Post, Comment, Subforum, valid_content, valid_title, db, generateLinkPath, error
+
+from forum.models import User, Post, Comment, Reaction, Subforum, valid_content, valid_title, db, generateLinkPath, error
 from forum.user import username_taken, email_taken, valid_username
 
 ##
@@ -80,68 +80,128 @@ def subforum():
 def loginform():
 	return render_template("login.html")
 
-
-@login_required
-@rt.route('/addpost')
-def addpost():
-	subforum_id = int(request.args.get("sub"))
-	subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
-	if not subforum:
-		return error("That subforum does not exist!")
-
-	return render_template("createpost.html", subforum=subforum)
-
-@rt.route('/viewpost')
-def viewpost():
-	postid = int(request.args.get("post"))
-	post = Post.query.filter(Post.id == postid).first()
-	if not post:
-		return error("That post does not exist!")
-	if not post.subforum.path:
-		subforumpath = generateLinkPath(post.subforum.id)
-	comments = Comment.query.filter(Comment.post_id == postid).order_by(Comment.id.desc()) # no need for scalability now
-	return render_template("viewpost.html", post=post, path=subforumpath, comments=comments)
-
-@login_required
-@rt.route('/action_comment', methods=['POST', 'GET'])
-def comment():
-	post_id = int(request.args.get("post"))
-	post = Post.query.filter(Post.id == post_id).first()
-	if not post:
-		return error("That post does not exist!")
-	content = request.form['content']
-	postdate = datetime.datetime.now()
-	comment = Comment(content, postdate)
-	current_user.comments.append(comment)
-	post.comments.append(comment)
-	db.session.commit()
-	return redirect("/viewpost?post=" + str(post_id))
-
-@login_required
-@rt.route('/action_post', methods=['POST'])
-def action_post():
-	subforum_id = int(request.args.get("sub"))
-	subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
-	if not subforum:
-		return redirect(url_for("subforums"))
-
-	user = current_user
-	title = request.form['title']
-	content = request.form['content']
-	#check for valid posting
-	errors = []
-	retry = False
-	if not valid_title(title):
-		errors.append("Title must be between 4 and 140 characters long!")
-		retry = True
-	if not valid_content(content):
-		errors.append("Post must be between 10 and 5000 characters long!")
-		retry = True
-	if retry:
-		return render_template("createpost.html",subforum=subforum,  errors=errors)
-	post = Post(title, content, datetime.datetime.now())
-	subforum.posts.append(post)
-	user.posts.append(post)
-	db.session.commit()
-	return redirect("/viewpost?post=" + str(post.id))
-
+@rt.route('/about')
+def about():
+	return render_template("about.html")
+
+@rt.route('/contact')
+def contact():
+    return render_template("contact.html")
+
+@rt.route('/house-rules')
+def house_rules():
+	return render_template("house_rules.html")
+
+
+# THE CODE BELOW WAS MOVED TO VARIOUS .py
+# Moved to forum/posts.py.
+# @login_required
+# @rt.route('/addpost')
+# def addpost():
+# 	subforum_id = int(request.args.get("sub"))
+# 	subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
+# 	if not subforum:
+# 		return error("That subforum does not exist!")
+#
+# 	return render_template("createpost.html", subforum=subforum)
+#
+# @rt.route('/viewpost')
+# def viewpost():
+# 	postid = int(request.args.get("post"))
+# 	post = Post.query.filter(Post.id == postid).first()
+# 	if not post:
+# 		return error("That post does not exist!")
+# 	if not post.subforum.path:
+# 		subforumpath = generateLinkPath(post.subforum.id)
+# 	comments = Comment.query.filter(Comment.post_id == postid).order_by(Comment.id.desc()) # no need for scalability now
+# 	return render_template("viewpost.html", post=post, path=subforumpath, comments=comments)
+
+    # if not post:
+    #     return error("That post does not exist!")
+
+    # if not post.subforum.path:
+    #     subforumpath = generateLinkPath(post.subforum.id)
+
+    # comments = Comment.query.filter(
+    #     Comment.post_id == postid
+    # ).order_by(Comment.id.desc())
+
+    # like_count = Reaction.query.filter_by(
+    #     post_id=postid,
+    #     reaction_type="like"
+    # ).count()
+
+    # dislike_count = Reaction.query.filter_by(
+    #     post_id=postid,
+    #     reaction_type="dislike"
+    # ).count()
+
+    # heart_count = Reaction.query.filter_by(
+    #     post_id=postid,
+    #     reaction_type="heart"
+    # ).count()
+
+    # user_reaction = None
+
+    # if current_user.is_authenticated:
+    #     reaction = Reaction.query.filter_by(
+    #         post_id=postid,
+    #         user_id=current_user.id
+    #     ).first()
+
+    #     if reaction:
+    #         user_reaction = reaction.reaction_type
+
+    # return render_template(
+    #     "viewpost.html",
+    #     post=post,
+    #     path=subforumpath,
+    #     comments=comments,
+    #     like_count=like_count,
+    #     dislike_count=dislike_count,
+    #     heart_count=heart_count,
+    #     user_reaction=user_reaction
+    # )
+# @login_required
+# @rt.route('/action_comment', methods=['POST', 'GET'])
+# def comment():
+# 	post_id = int(request.args.get("post"))
+# 	post = Post.query.filter(Post.id == post_id).first()
+# 	if not post:
+# 		return error("That post does not exist!")
+# 	content = request.form['content']
+# 	postdate = datetime.datetime.now()
+# 	comment = Comment(content, postdate)
+# 	current_user.comments.append(comment)
+# 	post.comments.append(comment)
+# 	db.session.commit()
+# 	return redirect("/viewpost?post=" + str(post_id))
+
+# Moved to forum/posts.py.
+# @login_required
+# @rt.route('/action_post', methods=['POST'])
+# def action_post():
+# 	subforum_id = int(request.args.get("sub"))
+# 	subforum = Subforum.query.filter(Subforum.id == subforum_id).first()
+# 	if not subforum:
+# 		return redirect(url_for("subforums"))
+#
+# 	user = current_user
+# 	title = request.form['title']
+# 	content = request.form['content']
+# 	#check for valid posting
+# 	errors = []
+# 	retry = False
+# 	if not valid_title(title):
+# 		errors.append("Title must be between 4 and 140 characters long!")
+# 		retry = True
+# 	if not valid_content(content):
+# 		errors.append("Post must be between 10 and 5000 characters long!")
+# 		retry = True
+# 	if retry:
+# 		return render_template("createpost.html",subforum=subforum,  errors=errors)
+# 	post = Post(title, content, datetime.datetime.now())
+# 	subforum.posts.append(post)
+# 	user.posts.append(post)
+# 	db.session.commit()
+# 	return redirect("/viewpost?post=" + str(post.id))
diff --git a/forum/settings.py b/forum/settings.py
new file mode 100644
index 0000000..b8e6e0b
--- /dev/null
+++ b/forum/settings.py
@@ -0,0 +1,40 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash
+from flask_login import current_user, login_required
+
+from forum.models import db
+from forum.user import valid_password
+
+settings = Blueprint('settings', __name__)
+
+
+@settings.route('/settings')
+@login_required
+def settings_page():
+    return render_template("settings.html")
+
+
+@settings.route('/action_change_password', methods=['POST'])
+@login_required
+def change_password():
+    current_password = request.form.get('current_password', '')
+    new_password = request.form.get('new_password', '')
+    confirm_password = request.form.get('confirm_password', '')
+
+    errors = []
+
+    if not current_user.check_password(current_password):
+        errors.append("Your current password is incorrect.")
+    if not valid_password(new_password):
+        errors.append("New password must be 6-40 characters (letters, numbers, and !@#%& only).")
+    elif new_password != confirm_password:
+        errors.append("New password and confirmation do not match.")
+
+    if errors:
+        for e in errors:
+            flash(e, "error")
+        return redirect(url_for('settings.settings_page'))
+
+    current_user.set_password(new_password)
+    db.session.commit()
+    flash("Your password has been changed.", "success")
+    return redirect(url_for('settings.settings_page'))
diff --git a/forum/static/images/DishCourseLogo.png b/forum/static/images/DishCourseLogo.png
new file mode 100644
index 0000000..a9dd546
Binary files /dev/null and b/forum/static/images/DishCourseLogo.png differ
diff --git a/forum/static/images/avatars/.gitkeep b/forum/static/images/avatars/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/forum/static/images/avatars/user_5_ab78342e861744ae84b946df6aeca8c8.png b/forum/static/images/avatars/user_5_ab78342e861744ae84b946df6aeca8c8.png
new file mode 100644
index 0000000..5a1aaa2
Binary files /dev/null and b/forum/static/images/avatars/user_5_ab78342e861744ae84b946df6aeca8c8.png differ
diff --git a/forum/static/images/avatars/user_5_bd6274a86c3c4a9d8f43bd4db0293042.png b/forum/static/images/avatars/user_5_bd6274a86c3c4a9d8f43bd4db0293042.png
new file mode 100644
index 0000000..16e7fa7
Binary files /dev/null and b/forum/static/images/avatars/user_5_bd6274a86c3c4a9d8f43bd4db0293042.png differ
diff --git a/forum/static/style.css b/forum/static/style.css
index 2dd2e2e..0f08108 100644
--- a/forum/static/style.css
+++ b/forum/static/style.css
@@ -1,191 +1,2113 @@
-.page{
-	font-family: Verdana;
-	font-style: normal;
-	font-size: 14pt;
+/* =========================================================
+   DISHCOURSE
+   ========================================================= */
 
-	margin-left: auto;
-	margin-right: auto;
-	margin-top: 1%;
-	width: 80%;
-	
-	padding-left: 3%;
-	padding-right: 3%;
+:root {
+	--dc-plum-dark: #26062f;
+	--dc-plum: #3d0a48;
+	--dc-plum-mid: #57125d;
+	--dc-orange: #ff5722;
+	--dc-orange-soft: #ff7a3d;
+	--dc-peach: #ffe6d2;
+	--dc-pink: #f5dceb;
+	--dc-ivory: #fffaf4;
+	--dc-paper: #ffffff;
+	--dc-text: #2d1237;
+	--dc-muted: #786c78;
+	--dc-border: #eee2d7;
+	--dc-shadow: 0 8px 24px rgba(56, 14, 66, 0.08);
+	--dc-radius-lg: 20px;
+	--dc-radius-md: 14px;
+	--dc-radius-sm: 10px;
+}
+
+/* =========================================================
+   GLOBAL
+   ========================================================= */
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	margin: 0;
+	height: 100%;
+	min-height: 100%;
+	overflow: hidden;
+}
+
+html {
+	font-size: 14px;
+}
+
+body {
+	background: var(--dc-ivory);
+	color: var(--dc-text);
+	font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
+	font-size: 1rem;
+	line-height: 1.55;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+input,
+textarea,
+select,
+button {
+	font-family: inherit;
+}
+
+.dc-app-shell {
+	height: 100vh;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+/* =========================================================
+   HEADER
+   ========================================================= */
+
+.dc-top-header {
+	flex-shrink: 0;
+	position: relative;
+	z-index: 1000;
+	background: var(--dc-paper);
+	border-bottom: 1px solid var(--dc-border);
+}
+
+.dc-header-inner {
+	height: 105px;
+	min-height: 105px;
+	display: grid;
+	grid-template-columns: 320px minmax(300px, 520px) minmax(330px, 1fr);
+	align-items: center;
+	gap: 2rem;
+	padding: 0.75rem 2rem;
+}
+
+.dc-logo {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 340px;
+	height: 82px;
+	overflow: hidden;
+}
+
+.dc-logo-image {
+	display: block;
+	width: 320px;
+	height: 78px;
+	object-fit: contain;
+	object-position: left center;
+}
+
+.dc-search {
+	height: 54px;
+	display: flex;
+	align-items: center;
+	gap: 0.8rem;
+	padding: 0 1.25rem;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: 28px;
+}
+
+.dc-search-icon {
+	font-size: 1.35rem;
+	color: var(--dc-plum);
+}
+
+.dc-search input {
+	width: 100%;
+	border: none;
+	outline: none;
+	background: transparent;
+	color: var(--dc-text);
+	font-size: 1rem;
+}
+
+.dc-search input::placeholder {
+	color: #84557e;
+}
+
+.dc-header-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 1.8rem;
+}
+
+.dc-start-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.7rem;
+	background: linear-gradient(135deg, var(--dc-plum), var(--dc-plum-dark));
+	color: #fff;
+	font-weight: 700;
+	padding: 0.95rem 1.5rem;
+	border-radius: 12px;
+	white-space: nowrap;
+	box-shadow: 0 6px 14px rgba(38, 6, 47, 0.15);
+}
+
+.dc-start-button:hover {
+	color: #fff;
+	transform: translateY(-1px);
+}
+
+.dc-plus {
+	font-size: 1.4rem;
+	font-weight: 300;
+}
+
+.dc-header-user {
+	display: flex;
+	align-items: center;
+	gap: 0.8rem;
+	white-space: nowrap;
+}
+
+.dc-avatar {
+	width: 50px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--dc-orange), var(--dc-plum));
+	color: #fff;
+	font-size: 1.05rem;
+	font-weight: 900;
+	overflow: hidden;
+}
+
+.dc-avatar-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.dc-header-user-info {
+	font-weight: 700;
+}
+
+/* =========================================================
+   APPLICATION LAYOUT
+   ========================================================= */
+
+.dc-body-layout {
+	flex: 1;
+	min-height: 0;
+	display: grid;
+	grid-template-columns: 260px minmax(0, 1fr) 330px;
+	align-items: stretch;
+	overflow: hidden;
+}
+
+.dc-left-sidebar {
+	height: 100%;
+	min-height: 0;
+	padding: 1.5rem;
+	overflow-y: auto;
+	background: linear-gradient(165deg, #290531, #3c0a45 58%, #26042c);
+	color: #fff;
+}
+
+.dc-main-content {
+	height: 100%;
+	min-width: 0;
+	min-height: 0;
+	padding: 2rem;
+	overflow-y: auto;
+	background: var(--dc-ivory);
+}
+
+.dc-main-content > .container {
+	max-width: none;
+}
+
+.dc-right-sidebar {
+	height: 100%;
+	min-height: 0;
+	padding: 1.5rem 1.5rem 2rem 0;
+	overflow-y: auto;
+	background: var(--dc-ivory);
+}
+
+/* =========================================================
+   LEFT SIDEBAR
+   ========================================================= */
+
+.dc-sidebar-nav {
+	display: flex;
+	flex-direction: column;
+	gap: 0.45rem;
+}
+
+.dc-sidebar-item {
+	min-height: 54px;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding: 0.8rem 1rem;
+	border-radius: 10px;
+	color: #fff;
+	font-size: 0.92rem;
+	font-weight: 700;
+	transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.dc-sidebar-item:hover {
+	background: rgba(255, 255, 255, 0.08);
+	color: #fff;
+}
+
+.dc-sidebar-item.active {
+	background: linear-gradient(135deg, var(--dc-orange), #ff7041);
+	box-shadow: 0 8px 20px rgba(255, 87, 34, 0.25);
+}
+
+.dc-sidebar-icon {
+	width: 24px;
+	text-align: center;
+	font-size: 1.1rem;
+}
+
+.dc-sidebar-divider {
+	height: 1px;
+	margin: 1.2rem 0;
+	background: rgba(255, 255, 255, 0.22);
+}
+
+.dc-sidebar-community {
+	margin-top: 4rem;
+	padding: 1rem;
+	text-align: center;
+}
+
+.dc-food-art {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.6rem;
+	color: var(--dc-orange);
+	font-size: 2rem;
+	margin-bottom: 1rem;
+}
+
+.dc-sidebar-community p {
+	color: rgba(255, 255, 255, 0.9);
+	font-size: 0.9rem;
+	line-height: 1.6;
+}
+
+.dc-sidebar-community strong {
+	display: block;
+	margin-top: 1rem;
+	color: var(--dc-orange);
+	font-size: 0.9rem;
+}
+
+/* =========================================================
+   RIGHT SIDEBAR
+   ========================================================= */
+
+.dc-side-card {
+	background: rgba(255, 255, 255, 0.75);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 1.4rem;
+	margin-bottom: 1.3rem;
+	box-shadow: 0 4px 16px rgba(67, 20, 70, 0.035);
+}
+
+.dc-side-card h2 {
+	margin: 0 0 1rem;
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.1rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+	color: var(--dc-plum-dark);
+}
+
+.dc-side-card-header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.dc-most-discussed {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.dc-discussed-item {
+	display: grid;
+	grid-template-columns: 44px 1fr auto;
+	align-items: center;
+	gap: 0.7rem;
+}
+
+.dc-mini-food {
+	width: 44px;
+	height: 44px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--dc-peach);
+	font-size: 1rem;
+}
+
+.dc-discussed-title {
+	font-size: 0.88rem;
+	line-height: 1.35;
+	font-weight: 600;
+}
+
+.dc-discussed-count {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	font-size: 0.88rem;
+}
+
+.dc-view-all {
+	display: inline-block;
+	margin-top: 1.5rem;
+	color: var(--dc-orange);
+	font-size: 1rem;
+	font-weight: 800;
+}
+
+.dc-category-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.35rem;
+}
+
+.dc-category {
+	display: flex;
+	align-items: center;
+	gap: 0.8rem;
+	padding: 0.65rem 0.75rem;
+	border-radius: 9px;
+	color: var(--dc-text);
+	font-size: 0.9rem;
+	font-weight: 600;
+}
+
+.dc-category:hover {
+	background: #fff0e5;
+}
+
+.dc-category.active {
+	background: var(--dc-peach);
+}
+
+/* =========================================================
+   SHARED COMPONENTS
+   ========================================================= */
+
+.section-eyebrow {
+	color: var(--dc-orange);
+	font-size: 0.75rem;
+	font-weight: 900;
+	letter-spacing: 0.15em;
+	text-transform: uppercase;
+}
+
+.dishcourse-primary-btn,
+.dishcourse-login-btn {
+	background: var(--dc-orange);
+	border: none;
+	color: #fff;
+	font-weight: 800;
+	padding: 0.7rem 1rem;
+	border-radius: 9px;
+}
+
+.dishcourse-primary-btn:hover,
+.dishcourse-login-btn:hover {
+	background: #e84412;
+	color: #fff;
+}
+
+/* =========================================================
+   LANDING PAGE
+   ========================================================= */
+
+.dishcourse-hero {
+	background: linear-gradient(135deg, #3a0b44, #5b174e);
+	border-radius: var(--dc-radius-lg);
+	padding: 3rem 2rem;
+	margin-bottom: 2rem;
+	color: #fff;
+	box-shadow: var(--dc-shadow);
+}
+
+.hero-content {
+	max-width: 760px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+.hero-eyebrow {
+	color: var(--dc-orange);
+	font-size: 0.72rem;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+	font-weight: 900;
+}
+
+.hero-title {
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 2.4rem;
+	font-weight: 900;
+	line-height: 1.1;
+	letter-spacing: -0.035em;
+}
+
+.hero-text {
+	color: rgba(255, 255, 255, 0.88);
+	font-size: 1.02rem;
+	line-height: 1.7;
+}
+
+.forum-section-heading {
+	display: flex;
+	justify-content: space-between;
+	align-items: end;
+	gap: 2rem;
+	margin-bottom: 1.2rem;
+}
+
+.forum-section-heading h2 {
+	margin: 0;
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.75rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+	color: var(--dc-plum-dark);
+}
+
+.forum-section-intro {
+	color: var(--dc-muted);
+	font-size: 0.98rem;
+}
+
+.forum-card-link {
+	display: block;
+	height: 100%;
+}
+
+.forum-card {
+	min-height: 185px;
+	height: 100%;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-md);
+	padding: 1.45rem;
+	box-shadow: 0 5px 14px rgba(67, 20, 70, 0.04);
+	transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.forum-card:hover {
+	transform: translateY(-4px);
+	box-shadow: var(--dc-shadow);
+}
+
+.forum-card-icon {
+	width: 50px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: var(--dc-peach);
+	margin-bottom: 1rem;
+}
+
+.forum-card-title {
+	color: var(--dc-plum-dark);
+	font-size: 1.05rem;
+	font-weight: 900;
+}
+
+.forum-card-description {
+	color: var(--dc-muted);
+	font-size: 0.98rem;
+	line-height: 1.55;
+}
+
+.forum-card-action {
+	color: var(--dc-orange);
+	font-size: 0.98rem;
+	font-weight: 800;
+}
+
+/* =========================================================
+   SUBFORUM / DISCUSSION PAGE
+   ========================================================= */
+
+.discussion-path {
+	color: var(--dc-muted);
+	font-size: 0.85rem;
+	margin-bottom: 1rem;
+}
+
+.discussion-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 2rem;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 1.8rem;
+	margin-bottom: 1.6rem;
+}
+
+.discussion-title {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 2rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+}
+
+.discussion-description {
+	color: var(--dc-muted);
+	font-size: 1rem;
+}
+
+.related-forum-card {
+	height: 100%;
+	background: var(--dc-peach);
+	border-radius: var(--dc-radius-md);
+	padding: 1rem;
+}
+
+.related-forum-card h3 {
+	color: var(--dc-plum-dark);
+	font-size: 1rem;
+	font-weight: 900;
+}
+
+.related-forum-card p {
+	color: var(--dc-muted);
+	font-size: 0.9rem;
+}
+
+.discussion-list-heading h2 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.8rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+}
+
+.post-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.8rem;
+}
+
+.discussion-post-card {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-md);
+	padding: 1rem 1.2rem;
+}
+
+.discussion-post-title {
+	color: var(--dc-plum-dark);
+	font-size: 1.05rem;
+	font-weight: 900;
+}
+
+.discussion-post-meta {
+	color: var(--dc-muted);
+	font-size: 0.85rem;
+}
+
+/* =========================================================
+   DISCUSSION FEED CARDS
+   ========================================================= */
+
+.feed-post-card {
+	display: grid;
+	grid-template-columns: 56px minmax(0, 1fr) 120px 95px 36px;
+	align-items: center;
+	gap: 1rem;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: 16px;
+	padding: 1.2rem;
+	box-shadow: 0 4px 14px rgba(67, 20, 70, 0.04);
+	transition: transform 0.18s ease, box-shadow 0.18s ease;
+}
+
+.feed-post-card:hover {
+	transform: translateY(-2px);
+	box-shadow: var(--dc-shadow);
+}
+
+.feed-post-avatar {
+	width: 52px;
+	height: 52px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--dc-orange), var(--dc-plum));
+	color: #fff;
+	font-size: 1rem;
+	font-weight: 900;
+}
+
+.feed-post-title {
+	display: inline-block;
+	color: var(--dc-plum-dark);
+	font-size: 1.1rem;
+	font-weight: 900;
+	margin-bottom: 0.25rem;
+}
+
+.feed-post-title:hover {
+	color: var(--dc-orange);
+}
+
+.feed-post-meta {
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	color: var(--dc-muted);
+	font-size: 0.85rem;
+	margin-bottom: 0.7rem;
+}
+
+.feed-meta-dot {
+	color: var(--dc-orange);
+}
+
+.feed-post-tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.45rem;
+}
+
+.feed-tag {
+	background: var(--dc-pink);
+	color: var(--dc-plum);
+	padding: 0.3rem 0.75rem;
+	border-radius: 999px;
+	font-size: 0.78rem;
+	font-weight: 700;
+}
+
+.feed-tag-orange {
+	background: var(--dc-peach);
+	color: #c84011;
+}
+
+.feed-post-media-placeholder {
+	width: 110px;
+	height: 72px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	justify-self: center;
+	border-radius: 10px;
+	background: linear-gradient(135deg, #ffe8d5, #f7d6bf);
+	font-size: 1.6rem;
+}
+
+.feed-post-stats {
+	display: flex;
+	flex-direction: column;
+	gap: 0.9rem;
+	color: var(--dc-plum);
+}
+
+.feed-post-stats > div {
+	display: grid;
+	grid-template-columns: 24px auto;
+	column-gap: 0.4rem;
+	align-items: center;
+}
+
+.feed-stat-icon {
+	grid-row: 1 / span 2;
+	font-size: 1.2rem;
+	color: var(--dc-plum);
+}
+
+.feed-post-stats strong {
+	font-size: 0.95rem;
+	font-weight: 900;
+	color: var(--dc-plum-dark);
+}
+
+.feed-post-stats small {
+	font-size: 0.78rem;
+	font-weight: 600;
+	color: var(--dc-muted);
+}
+
+.feed-post-open {
+	color: var(--dc-plum);
+	font-size: 1.6rem;
+	font-weight: 700;
+	text-align: center;
+}
+
+.feed-post-open:hover {
+	color: var(--dc-orange);
+}
+
+/* =========================================================
+   EMPTY STATES
+   ========================================================= */
+
+.empty-discussion-state,
+.empty-comments-state {
+	background: var(--dc-paper);
+	border: 1px dashed var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 1.4rem 1rem;
+	text-align: center;
+}
+
+.empty-discussion-state h3,
+.empty-comments-state h3 {
+	color: var(--dc-plum-dark);
+	font-weight: 900;
+}
+
+.empty-discussion-state p,
+.empty-comments-state p {
+	color: var(--dc-muted);
+}
+
+.empty-comments-state {
+	margin-top: 0.5rem;
+}
+
+.empty-comments-state h3 {
+	margin-bottom: 0.4rem;
+}
+
+.empty-comments-state p {
+	margin-bottom: 0;
+}
+
+/* =========================================================
+   VIEW POST
+   ========================================================= */
+
+.post-detail-card {
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	overflow: hidden;
+}
+
+.post-detail-header {
+	background: linear-gradient(135deg, #fff1e5, #ffe4d7);
+	padding: 1.6rem 1.8rem;
+}
+
+.post-detail-author-row {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.post-detail-avatar,
+.comment-avatar {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--dc-orange), var(--dc-plum));
+	color: #fff;
+	font-weight: 900;
+}
+
+.post-detail-avatar {
+	width: 58px;
+	height: 58px;
+	font-size: 1.1rem;
+}
+
+.post-detail-title {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.8rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+}
+
+.post-detail-meta {
+	color: var(--dc-muted);
+	font-size: 0.9rem;
+}
+
+.post-detail-content {
+	padding: 1.8rem;
+	font-size: 1.05rem;
+	line-height: 1.7;
+}
+
+.post-detail-tags {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+	padding: 0 1.8rem 1.2rem;
+}
+
+.post-detail-tags .feed-tag {
+	font-size: 0.82rem;
+}
+
+.post-reaction-placeholder {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.9rem 1.8rem;
+	border-top: 1px solid var(--dc-border);
+}
+
+.reaction-placeholder-label {
+	color: var(--dc-muted);
+	font-size: 0.78rem;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+	font-weight: 900;
+}
+
+.reaction-placeholder-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.6rem;
+	color: var(--dc-plum);
+	font-weight: 700;
+}
+
+.reaction-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.3rem;
+	border: 1px solid var(--dc-border);
+	background: var(--dc-paper);
+	color: var(--dc-plum);
+	border-radius: 999px;
+	padding: 0.35rem 0.65rem;
+	font-size: 0.9rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.reaction-button:hover {
+	background: var(--dc-peach);
+	border-color: var(--dc-orange);
+}
+
+.reaction-selected {
+	background: var(--dc-peach);
+	border-color: var(--dc-orange);
+	color: var(--dc-plum-dark);
+	box-shadow: 0 0 0 1px rgba(255, 87, 34, 0.15);
+}
+
+/* =========================================================
+   COMMENTS
+   ========================================================= */
+
+.comments-section-heading {
+	display: flex;
+	justify-content: space-between;
+	align-items: end;
+	margin: 1.5rem 0 1rem;
+}
+
+.comments-section-heading h2 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.6rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+}
+
+.addcomment {
+	display: none;
+}
+
+.comment-form {
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-md);
+	padding: 1.25rem;
+	margin-bottom: 1.2rem;
+}
+
+.comment-textarea {
+	width: 100%;
+	font-size: 1rem;
+}
+
+.comment-card {
+	display: grid;
+	grid-template-columns: 46px minmax(0, 1fr);
+	gap: 0.9rem;
+	align-items: start;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-md);
+	padding: 1rem 1.2rem;
+	margin-bottom: 0.8rem;
+}
+
+.comment-avatar {
+	width: 44px;
+	height: 44px;
+	font-size: 0.95rem;
+}
+
+.comment-card-body {
+	min-width: 0;
+}
+
+.comment-card-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 0.55rem;
+}
+
+.comment-author {
+	color: var(--dc-plum);
+	font-size: 1rem;
+	font-weight: 900;
+}
+
+.comment-date {
+	color: var(--dc-muted);
+	font-size: 0.85rem;
+}
+
+.comment-card-content {
+	font-size: 1rem;
+	line-height: 1.55;
+}
+
+.comment-form-actions {
+	text-align: right;
+	margin-top: 0.8rem;
+}
+.comment-reactions {
+    margin-top: 0.75rem;
+}
+
+.comment-reaction-form {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.dishcourse-submit-btn {
+	background: var(--dc-plum);
+	color: #fff;
+	border: none;
+	font-weight: 800;
+	padding: 0.7rem 1rem;
+	border-radius: 9px;
+}
+
+.dishcourse-submit-btn:hover {
+	background: var(--dc-plum-dark);
+	color: #fff;
+}
+
+/* =========================================================
+   CREATE POST
+   ========================================================= */
 
+.create-post-page {
+	max-width: 850px;
+	margin: 0 auto;
 }
-.header{
-	border: 1px solid black;
-	overflow: hidden;
-	vertical-align: middle;
-	padding: 0.5%;
-	margin-bottom: none;
+
+.create-post-header {
+	margin-bottom: 1.4rem;
 }
-.content{
-	margin-top: 0.5%;
+
+.create-post-header h1 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 2rem;
+	font-weight: 900;
+	margin-bottom: 0.3rem;
 }
-.login{
-	width: 25%;
-	float: right;
-	text-align: center;
 
+.create-post-header p {
+	color: var(--dc-muted);
+	font-size: 1rem;
 }
-.loginbox{
-	margin-right: auto;
-	margin-left: auto;
+
+.create-post-card {
+	max-width: 900px;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 2rem;
+	box-shadow: var(--dc-shadow);
+}
+
+.create-post-field {
+	margin-bottom: 1.3rem;
+}
+
+.create-post-field label {
+	display: block;
+	color: var(--dc-plum);
+	font-weight: 800;
+	margin-bottom: 0.45rem;
+}
+
+.create-post-field input,
+.create-post-field textarea,
+.auth-field input {
+	width: 100%;
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-sm);
+	padding: 0.8rem;
+	background: #fffdfa;
+	font-size: 1rem;
+}
+
+.create-post-field input {
+	min-height: 50px;
+}
+
+.create-post-field input:focus,
+.create-post-field textarea:focus,
+.auth-field input:focus {
+	border-color: var(--dc-orange);
+	outline: none;
+	box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.12);
+}
+
+.create-post-textarea {
+	min-height: 280px;
+	resize: vertical;
+	line-height: 1.6;
+}
+
+.create-post-helper {
+	display: flex;
+	align-items: center;
+	gap: 0.7rem;
+	background: var(--dc-peach);
+	border-radius: 10px;
+	padding: 0.8rem 1rem;
+	margin-top: 0.5rem;
+	color: var(--dc-plum);
+}
+
+.create-post-helper p {
+	margin: 0;
+	font-size: 0.9rem;
+}
+
+.create-post-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 1rem;
+	margin-top: 1.4rem;
+}
+
+.create-post-cancel {
+	color: var(--dc-muted);
+	font-weight: 700;
+}
+
+.create-post-cancel:hover {
+	color: var(--dc-plum);
+}
+
+/* =========================================================
+   LOGIN / REGISTER
+   ========================================================= */
+
+.auth-page {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+.auth-header {
+	margin-bottom: 2rem;
+}
+
+.auth-header h1 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 2rem;
+	font-weight: 900;
+	margin-bottom: 0.4rem;
+}
+
+.auth-header p {
+	color: var(--dc-muted);
+	font-size: 1rem;
+}
+
+.auth-card {
+	position: relative;
+	height: 100%;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 2rem;
+	box-shadow: var(--dc-shadow);
+}
+
+.auth-card h2 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.4rem;
+	font-weight: 900;
+	letter-spacing: -0.025em;
+	margin-bottom: 0.3rem;
+}
+
+.auth-card-intro {
+	color: var(--dc-muted);
+	font-size: 1rem;
+}
+
+.auth-card-icon {
+	width: 50px;
+	height: 50px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--dc-peach);
+	border-radius: 50%;
+	font-size: 1.4rem;
+	margin-bottom: 1rem;
+}
+
+.auth-field {
+	margin-bottom: 1rem;
+}
+
+.auth-field label {
+	display: block;
+	color: var(--dc-plum);
+	font-weight: 800;
+	font-size: 0.85rem;
+	margin-bottom: 0.35rem;
+}
+
+.auth-field input {
+	min-height: 48px;
+}
+
+/* =========================================================
+   FOOTER
+   ========================================================= */
+
+.dc-footer {
+	flex-shrink: 0;
+	background: var(--dc-paper);
+	border-top: 1px solid var(--dc-border);
+	padding: 1.6rem 2rem;
+	font-size: 1rem;
+}
+
+.dc-footer-inner {
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	align-items: center;
+	gap: 2rem;
+}
+
+.dc-footer-links {
+	display: flex;
+	justify-content: center;
+	gap: 2rem;
+}
+
+.dc-footer-links a {
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+.dc-footer-links a:hover {
+	color: var(--dc-orange);
+}
+
+.dc-social-links {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.6rem;
+    /* font-size: 1rem;
+    font-weight: 900; */
+}
+
+.dc-social-links i {
+    width: 34px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+/* =========================================================
+   MESSAGE MODAL
+   ========================================================= */
+
+.dc-modal-overlay {
+	position: fixed;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 9999;
+	padding: 1rem;
+	background: rgba(45, 8, 50, 0.55);
+}
+
+.dc-message-modal {
+	width: min(440px, 100%);
+	background: #fffaf5;
+	border: 1px solid var(--dc-border);
+	border-radius: 22px;
+	padding: 2rem;
 	text-align: center;
-	margin-top: 3%;
+	box-shadow: 0 20px 60px rgba(45, 8, 50, 0.25);
+}
+
+.dc-message-icon {
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+}
+
+.dc-message-modal h2 {
+	margin: 0 0 0.75rem;
+	color: var(--dc-plum-dark);
+	font-weight: 900;
+}
+
+.dc-message-modal p {
+	margin: 0 0 1.5rem;
+	color: var(--dc-text);
+	font-size: 1rem;
+	line-height: 1.5;
+}
+
+.dc-modal-button {
+	min-width: 100px;
+	border: 0;
+	border-radius: 10px;
+	background: var(--dc-orange);
+	color: #fff;
+	padding: 0.7rem 1.5rem;
+	font-weight: 800;
+	cursor: pointer;
+}
+
+.dc-modal-button:hover {
+	opacity: 0.9;
+}
+
+/* =========================================================
+   RESPONSIVE
+   ========================================================= */
+
+@media (max-width: 1250px) {
+	.dc-body-layout {
+		grid-template-columns: 220px minmax(0, 1fr);
+	}
+
+	.dc-right-sidebar {
+		display: none;
+	}
+
+	.dc-header-inner {
+		height: auto;
+		min-height: 100px;
+		grid-template-columns: 280px 1fr auto;
+	}
+
+	.dc-logo {
+		width: 260px;
+	}
+
+	.dc-logo-image {
+		width: 245px;
+	}
+}
+
+@media (max-width: 1050px) {
+	.feed-post-card {
+		grid-template-columns: 52px minmax(0, 1fr) 70px 30px;
+	}
+
+	.feed-post-media-placeholder {
+		display: none;
+	}
+}
+
+@media (max-width: 900px) {
+	.dc-header-inner {
+		grid-template-columns: 1fr auto;
+		min-height: auto;
+	}
+
+	.dc-logo {
+		width: 250px;
+		height: 72px;
+	}
+
+	.dc-logo-image {
+		width: 235px;
+		height: 68px;
+	}
+
+	.dc-search {
+		grid-column: 1 / -1;
+		grid-row: 2;
+	}
+
+	.dc-start-button {
+		display: none;
+	}
+
+	.dc-body-layout {
+		display: block;
+		overflow-y: auto;
+	}
+
+	.dc-left-sidebar {
+		height: auto;
+		min-height: auto;
+		padding: 0.7rem 1rem;
+		overflow: visible;
+	}
+
+	.dc-sidebar-nav {
+		flex-direction: row;
+		overflow-x: visible;
+		justify-content: space-between;
+		gap: 0.25rem;
+	}
+
+	.dc-sidebar-item {
+		flex: 0 1 auto;
+		white-space: nowrap;
+		padding: 0.7rem 0.65rem;
+		font-size: 0.9rem;
+	}
+
+	.dc-sidebar-divider,
+	.dc-sidebar-community {
+		display: none;
+	}
+
+	.dc-main-content {
+		height: auto;
+		padding: 1.3rem;
+		overflow: visible;
+	}
+}
+
+@media (max-width: 700px) {
+	.feed-post-card {
+		grid-template-columns: 48px minmax(0, 1fr) 30px;
+	}
+
+	.feed-post-stats {
+		display: none;
+	}
+
+	.feed-post-avatar {
+		width: 46px;
+		height: 46px;
+	}
+
+	.feed-post-meta {
+		display: block;
+	}
+
+	.feed-meta-dot {
+		display: none;
+	}
+
+	.post-detail-author-row {
+		align-items: flex-start;
+	}
+
+	.post-detail-avatar {
+		width: 48px;
+		height: 48px;
+	}
+
+	.reaction-placeholder-actions {
+		margin-top: 0.7rem;
+		flex-wrap: wrap;
+	}
+
+	.comment-card {
+		grid-template-columns: 40px minmax(0, 1fr);
+	}
+}
+
+@media (max-width: 600px) {
+	html,
+	body {
+		height: auto;
+		min-height: 100%;
+		overflow-y: auto;
+	}
+
+	.dc-app-shell {
+		height: auto;
+		min-height: 100vh;
+	}
+
+	.dc-body-layout {
+		display: block;
+		overflow: visible;
+	}
+
+	.dc-left-sidebar {
+		height: auto;
+		overflow: visible;
+		padding: 0.6rem;
+	}
+
+	.dc-main-content {
+		height: auto;
+		overflow: visible;
+		padding: 1rem;
+	}
+
+	.dc-sidebar-nav {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		gap: 0.4rem;
+	}
+
+	.dc-sidebar-item {
+		justify-content: center;
+		padding: 0.65rem 0.4rem;
+		font-size: 0.8rem;
+		white-space: nowrap;
+	}
+
+	.dc-sidebar-icon {
+		width: auto;
+		font-size: 1rem;
+	}
+
+	.dc-footer {
+		margin-top: auto;
+	}
+
+	.dc-header-inner {
+		padding: 1rem;
+	}
+
+	.dc-logo {
+		width: 210px;
+		height: 64px;
+	}
+
+	.dc-logo-image {
+		width: 200px;
+		height: 60px;
+	}
+
+	.dc-header-user-info {
+		display: none;
+	}
+
+	.dc-footer-inner {
+		display: block;
+		text-align: center;
+	}
+
+	.dc-footer-links {
+		flex-wrap: wrap;
+		gap: 0.7rem 1rem;
+		margin: 1rem 0;
+	}
+
+	.dc-social-links {
+		justify-content: center;
+	}
+
+	.forum-section-heading,
+	.discussion-header,
+	.comments-section-heading,
+	.post-reaction-placeholder {
+		display: block;
+	}
+}
+
+/* =========================================================
+   PUBLIC POST TOGGLE
+   ========================================================= */
+
+.create-post-public {
+	margin: 1.2rem 0 1.5rem;
+}
+
+.public-toggle {
+	display: flex;
+	align-items: center;
+	gap: 0.9rem;
+	cursor: pointer;
+}
+
+.public-toggle input {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.public-toggle-slider {
+	position: relative;
+	width: 48px;
+	height: 26px;
+	flex-shrink: 0;
+	background: var(--dc-border);
+	border-radius: 999px;
+	transition: background 0.2s ease;
+}
+
+.public-toggle-slider::after {
+	content: "";
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 20px;
+	height: 20px;
+	background: #fff;
+	border-radius: 50%;
+	box-shadow: 0 2px 6px rgba(38, 6, 47, 0.18);
+	transition: transform 0.2s ease;
+}
+
+.public-toggle input:checked + .public-toggle-slider {
+	background: var(--dc-orange);
+}
+
+.public-toggle input:checked + .public-toggle-slider::after {
+	transform: translateX(22px);
+}
+
+.public-toggle-text {
+	display: flex;
+	flex-direction: column;
+}
+
+.public-toggle-text strong {
+	color: var(--dc-plum-dark);
+	font-size: 1rem;
+	font-weight: 800;
+}
+
+.public-toggle-text small {
+	color: var(--dc-muted);
+	font-size: 0.85rem;
+	margin-top: 0.15rem;
+}
+
+/* =========================================================
+   ABOUT PAGE
+   ========================================================= */
+
+.about-page {
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+.about-hero {
+	background: linear-gradient(135deg, var(--dc-plum-dark), var(--dc-plum-mid));
+	color: #fff;
+	border-radius: var(--dc-radius-lg);
+	padding: 2.5rem;
+	margin-bottom: 1.5rem;
+	box-shadow: var(--dc-shadow);
+}
+
+.about-hero h1 {
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 2.2rem;
+	font-weight: 900;
+	margin-bottom: 0.8rem;
+}
+
+.about-hero p {
+	max-width: 700px;
+	font-size: 1rem;
+	line-height: 1.7;
+	color: rgba(255, 255, 255, 0.88);
 }
-.loginelement{
-	margin-top: 0.5%;
+
+.about-card {
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 1.8rem;
+	margin-bottom: 1.4rem;
+	box-shadow: 0 5px 14px rgba(67, 20, 70, 0.04);
+}
+
+.about-card h2 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	font-size: 1.5rem;
+	font-weight: 900;
+	margin-bottom: 0.8rem;
+}
+
+.about-card p {
+	color: var(--dc-muted);
+	line-height: 1.7;
+}
+
+.about-team-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 1rem;
+}
+
+.about-team-member {
+	background: var(--dc-peach);
+	border-radius: var(--dc-radius-md);
+	padding: 1.2rem;
+}
+
+.about-team-member h3 {
+	color: var(--dc-plum-dark);
+	font-size: 1.1rem;
+	font-weight: 900;
+	margin-bottom: 0.25rem;
+}
+
+.about-team-member p {
+	color: var(--dc-orange);
+	font-weight: 800;
+	margin-bottom: 0.5rem;
+}
+
+.about-team-member span {
+	color: var(--dc-muted);
+	font-size: 0.9rem;
+	line-height: 1.5;
 }
-.logoutlink{
-	padding-left: 0.5%;
-	font-size: 12pt;
+
+@media (max-width: 700px) {
+	.about-team-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.about-hero {
+		padding: 1.8rem;
+	}
 }
-.postsubmit{
+/* =========================================================
+   DIRECT MESSAGES
+   ========================================================= */
+
+.dc-sidebar-badge {
 	margin-left: auto;
-	margin-right: auto;
+	background: var(--dc-orange);
+	color: #fff;
+	font-size: 0.72rem;
+	font-weight: 800;
+	line-height: 1;
+	padding: 0.28rem 0.5rem;
+	border-radius: 999px;
+	min-width: 1.4rem;
 	text-align: center;
+}
+
+.message-user-link {
+	color: var(--dc-orange);
+	font-weight: 700;
+	font-size: 0.88rem;
+	text-decoration: none;
+}
+
+.message-user-link:hover {
+	text-decoration: underline;
+}
 
+.messages-page,
+.conversation-page {
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-lg);
+	padding: 1.8rem;
+	margin-bottom: 1.6rem;
 }
-.subforumlisting{
-	border-bottom: 1px solid gray;
-	padding: 1%;
-	margin-bottom: 1%;
+
+.messages-heading {
+	margin-bottom: 1.4rem;
+}
+
+.messages-heading h1 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	margin: 0.2rem 0 0;
+}
+
+.conversation-list {
+	display: flex;
+	flex-direction: column;
+	gap: 0.6rem;
 }
-.inputbox{
-	padding: 0.25%;
-	margin-top: 0.5%;
+
+.conversation-item {
+	display: grid;
+	grid-template-columns: 46px minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 0.9rem;
+	background: var(--dc-ivory);
+	border: 1px solid var(--dc-border);
+	border-radius: var(--dc-radius-md);
+	padding: 0.9rem 1.1rem;
+	text-decoration: none;
+	color: inherit;
+	transition: box-shadow 0.15s ease, transform 0.15s ease;
 }
-.errors{
-	border-bottom: 1px solid black;
-	margin-top: 2%;
+
+.conversation-item:hover {
+	box-shadow: 0 5px 14px rgba(67, 20, 70, 0.06);
+	transform: translateY(-1px);
+	color: inherit;
 }
-.error{
-	color: red;
-	font-weight: bold;
+
+.conversation-item.conversation-unread {
+	border-color: var(--dc-orange-soft);
+	background: #fff;
 }
-.subforumtitle{
-	color: blue;
-	font-size: 15pt;
-	font-weight: bold;
+
+.conversation-avatar,
+.message-bubble-row .conversation-avatar {
+	width: 46px;
+	height: 46px;
+	border-radius: 50%;
+	background: var(--dc-plum);
+	color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 800;
+	flex-shrink: 0;
 }
-.subforumdesc{
-	font-size: 13pt;
-	font-style: italic;
+
+.conversation-info {
+	min-width: 0;
 }
-.subforumheader{
-	padding: 0.5%;
-	padding-left: 1%;
-	margin-top: none;
-	padding-bottom: none;
-	margin-bottom: 0.5%;
-	border: 1px solid black;
-	font-size: 15pt;
+
+.conversation-top-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	gap: 0.6rem;
 }
-.subforumheadertitle{
-	display: inline;
-	font-weight: bold;
+
+.conversation-top-row strong {
+	color: var(--dc-plum-dark);
 }
-.subforumheaderdesc{
-	display: inline;
+
+.conversation-time {
+	color: var(--dc-muted);
+	font-size: 0.8rem;
+	white-space: nowrap;
 }
-.post{
-	padding: 1%;
-	border-bottom: 1px solid gray;
+
+.conversation-preview {
+	color: var(--dc-muted);
+	font-size: 0.9rem;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-top: 0.2rem;
 }
-.postusername{
-	font-style: italic;
-	font-size: 12pt;
+
+.conversation-preview-you {
+	color: var(--dc-plum);
+	font-weight: 700;
 }
-.subforumheaderlink{
-	font-style: italic;
-	font-size: 12pt;
-	margin-top: 0.5%;
+
+.conversation-badge {
+	background: var(--dc-orange);
+	color: #fff;
+	font-size: 0.78rem;
+	font-weight: 800;
+	line-height: 1;
+	padding: 0.35rem 0.6rem;
+	border-radius: 999px;
+	min-width: 1.6rem;
+	text-align: center;
 }
-.postinginfo{
-	font-size: 11pt;
-	font-style: italic;
+
+.conversation-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-bottom: 1.4rem;
+	flex-wrap: wrap;
 }
-#nolinks{
+
+.conversation-back {
+	color: var(--dc-muted);
+	font-weight: 700;
 	text-decoration: none;
+	font-size: 0.9rem;
 }
-.noposts{
-	padding: 1%;
+
+.conversation-back:hover {
+	color: var(--dc-plum);
 }
-.subsubforums{
-	border: 1px solid black;
-	padding: 0.5%;
-	margin-top: 0.5%;
-	padding-left: 1%;
+
+.conversation-header-user {
+	display: flex;
+	align-items: center;
+	gap: 0.8rem;
 }
-.subsubforumtitle{
-	font-weight: bolder;
-	text-decoration: none;
-	font-size: 14pt;
+
+.conversation-header-user h1 {
+	color: var(--dc-plum-dark);
+	font-family: "Arial Rounded MT Bold", "Avenir Next", Avenir, sans-serif;
+	margin: 0;
+	font-size: 1.4rem;
+}
+
+.conversation-thread {
+	display: flex;
+	flex-direction: column;
+	gap: 0.7rem;
+	min-height: 200px;
+	margin-bottom: 1.4rem;
+}
+
+.message-bubble-row {
+	display: flex;
+}
+
+.message-bubble-row.message-outgoing {
+	justify-content: flex-end;
+}
+
+.message-bubble-row.message-incoming {
+	justify-content: flex-start;
+}
+
+.message-bubble {
+	max-width: min(70%, 520px);
+	padding: 0.7rem 1rem;
+	border-radius: var(--dc-radius-md);
+}
+
+.message-incoming .message-bubble {
+	background: var(--dc-ivory);
+	border: 1px solid var(--dc-border);
+	color: var(--dc-text);
+}
+
+.message-outgoing .message-bubble {
+	background: var(--dc-plum);
+	color: #fff;
 }
-.subsubforumdesc{
-	font-style: italic;
-	font-size: 12pt;
+
+.message-bubble-content {
+	font-size: 0.95rem;
+	line-height: 1.5;
+	white-space: pre-wrap;
+	word-break: break-word;
 }
-.toplevelinfo{
-	padding: 0.5%;
-	font-weight: bold;
+
+.message-bubble-time {
+	font-size: 0.72rem;
+	opacity: 0.7;
+	margin-top: 0.3rem;
 }
-.actualpost{
-	padding: 1%;
-	border: 1px solid black;
-	border-collapse: collapse;
-	margin-bottom: 1%;
+
+.message-compose-form {
+	display: flex;
+	gap: 0.8rem;
+	align-items: flex-end;
+	border-top: 1px solid var(--dc-border);
+	padding-top: 1.2rem;
 }
-.actualposttitle{
-	border-collapse: collapse;
-	border-bottom: 1px solid black;
-	padding: 1%;
-	font-size: 16pt;
-	font-weight: bold;
+
+.message-compose-textarea {
+	flex: 1;
+	resize: vertical;
 }
-.postcontent{
-	padding: 1%;
+
+/* =========================================================
+   PROFILE
+   ========================================================= */
+
+.profile-card {
+	max-width: 640px;
+	margin: 0 auto;
 }
-.postposter{
-	font-size: 12pt;
-	font-style: italic;
-	color: black;
+
+.profile-avatar-row {
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+	padding-bottom: 1.5rem;
+	margin-bottom: 1.5rem;
+	border-bottom: 1px solid var(--dc-border);
 }
-.posttime{
-	font-style: italic;
-	font-size: 11pt;
+
+.profile-avatar-large {
+	width: 96px;
+	height: 96px;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--dc-orange), var(--dc-plum));
+	color: #fff;
+	font-size: 2.2rem;
+	font-weight: 900;
+	overflow: hidden;
 }
-.whitespace{
-	white-space: pre-line;
+
+.profile-avatar-large img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
-.comments{
-	border: 1px solid gray;
-	padding: 1%;
-	margin-top: 1%;
+
+.profile-field-row {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 1rem;
+	padding: 1rem 0;
+	border-bottom: 1px solid var(--dc-border);
 }
-.comment{
-	border-bottom: 1px solid gray;
+
+.profile-field-row:last-of-type {
+	border-bottom: none;
 }
-.commentuser{
-	display: inline;
-	font-weight: bold;
+
+.profile-field-label {
+	color: var(--dc-muted);
+	font-size: 0.78rem;
+	font-weight: 800;
+	letter-spacing: 0.05em;
+	text-transform: uppercase;
+	margin-bottom: 0.2rem;
 }
-.commentcontent{
-	display: inline;
+
+.profile-field-value {
+	color: var(--dc-text);
+	font-size: 1.05rem;
+	font-weight: 700;
 }
-.commenttime{
-	font-size: 11pt;
-	font-style: italic;
+
+.profile-change {
+	flex-shrink: 0;
 }
 
+.profile-change > summary {
+	list-style: none;
+	cursor: pointer;
+	color: var(--dc-orange);
+	font-size: 0.88rem;
+	font-weight: 800;
+}
 
-.addcomment{
+.profile-change > summary::-webkit-details-marker {
 	display: none;
-	margin-right: auto;
-	margin-left: auto;
-	text-align: center;
 }
-.varwidth{
-	width: 50%;
+
+.profile-change > summary:hover {
+	color: #e84412;
+	text-decoration: underline;
+}
+
+.profile-change-form {
+	margin-top: 0.8rem;
+	display: flex;
+	flex-direction: column;
+	gap: 0.6rem;
+	min-width: 220px;
+}
+
+.profile-change-hint {
+	margin: 0;
+	color: var(--dc-muted);
+	font-size: 0.8rem;
+}
+
+.profile-settings-link {
+	max-width: 640px;
+	margin: 1.25rem auto 0;
+	text-align: right;
+}
+
+.dc-settings-btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	background: var(--dc-paper);
+	border: 1px solid var(--dc-border);
+	color: var(--dc-plum-dark);
+	font-weight: 800;
+	padding: 0.6rem 1.1rem;
+	border-radius: 9px;
+}
+
+.dc-settings-btn:hover {
+	background: var(--dc-peach);
+	color: var(--dc-plum-dark);
+}
+
+.profile-back-link {
+	display: inline-block;
+	margin-top: 0.6rem;
+	color: var(--dc-orange);
+	font-weight: 700;
+	font-size: 0.9rem;
+}
+
+.profile-back-link:hover {
+	color: #e84412;
 }
diff --git a/forum/templates/about.html b/forum/templates/about.html
new file mode 100644
index 0000000..ada0d40
--- /dev/null
+++ b/forum/templates/about.html
@@ -0,0 +1,64 @@
+{% extends 'layout.html' %}
+{% block body %}
+
+<div class="about-page">
+	<section class="about-hero">
+		<p class="section-eyebrow">About DishCourse</p>
+		<h1>Good Food. Better Conversation.</h1>
+		<p>
+			DishCourse is a social food forum created for everyday cooks, foodies,
+			social media chefs, and anyone who enjoys talking about food.
+		</p>
+	</section>
+
+	<section class="about-card">
+		<h2>Our Persona</h2>
+		<p>
+			DishCourse was designed as a welcoming space where people can share
+			recipes, ask questions, exchange ideas, critique dishes, and learn
+			from one another.
+		</p>
+
+		<p>
+			The experience blends the casual energy of a food community with a
+			clean, organized discussion platform that makes conversations easy
+			to follow.
+		</p>
+	</section>
+
+	<section class="about-card">
+		<h2>Meet the Team</h2>
+
+		<div class="about-team-grid">
+            <div class="about-team-member">
+				<h3>Leigh</h3>
+				<p>Interaction & Presentation</p>
+				<span>Comments, reactions, branding, responsive UI, and integration.</span>
+			</div>
+            
+			<div class="about-team-member">
+				<h3>Monah</h3>
+				<p>Posts & Content</p>
+				<span>Post features, content functionality, and related enhancements.</span>
+			</div>
+
+			<div class="about-team-member">
+				<h3>Sloane</h3>
+				<p>Users & Communication</p>
+				<span>User-focused functionality, communication features, and related enhancements.</span>
+			</div>
+		</div>
+	</section>
+
+	<section class="about-card">
+		<h2>Built By CircusCircusLimes</h2>
+		<p>
+			DishCourse was developed as a collaborative software engineering
+			project using Python, Flask, MySQL, Bootstrap, HTML, CSS, Jinja,
+			and GitHub.
+		</p>
+	</section>
+
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/forum/templates/contact.html b/forum/templates/contact.html
new file mode 100644
index 0000000..96e03ef
--- /dev/null
+++ b/forum/templates/contact.html
@@ -0,0 +1,107 @@
+{% extends 'layout.html' %}
+{% block body %}
+
+<div class="contact-page">
+    <section class="contact-hero">
+        <p class="section-eyebrow">Contact DishCourse</p>
+        <h1>Let's Dish!</h1>
+        <p>
+            Have a question, suggestion, recipe idea, or just something
+            you want to get off your plate? We'd love to hear from you.
+        </p>
+    </section>
+
+    <section class="contact-card">
+        <div class="contact-intro">
+            <h2>What's Cooking?</h2>
+            <p>
+                Send the DishCourse team a message. Whether it's feedback,
+                a feature idea, or you simply want to say hello, pull up
+                a chair and join the conversation.
+            </p>
+        </div>
+
+        <form class="contact-form">
+            <div class="contact-field">
+                <label for="contact-name">Your Name</label>
+                <input
+                    type="text"
+                    id="contact-name"
+                    class="form-control"
+                    placeholder="What should we call you?"
+                >
+            </div>
+
+            <div class="contact-field">
+                <label for="contact-email">Email</label>
+                <input
+                    type="email"
+                    id="contact-email"
+                    class="form-control"
+                    placeholder="you@example.com"
+                >
+            </div>
+
+            <div class="contact-field">
+                <label for="contact-topic">What's on the menu?</label>
+
+                <select id="contact-topic" class="form-control">
+                    <option value="">Choose a topic...</option>
+                    <option>General Question</option>
+                    <option>Feedback</option>
+                    <option>Feature Idea</option>
+                    <option>Recipe Talk</option>
+                    <option>Just Saying Hello</option>
+                </select>
+            </div>
+
+            <div class="contact-field">
+                <label for="contact-message">Dish It Out</label>
+
+                <textarea
+                    id="contact-message"
+                    class="form-control"
+                    rows="7"
+                    placeholder="Tell us what's on your mind..."
+                ></textarea>
+            </div>
+
+            <div class="contact-actions">
+                <button
+                    type="button"
+                    class="btn dishcourse-primary-btn"
+                    onclick="document.getElementById('contact-demo-modal').style.display='flex'">
+                    Send It to the Kitchen
+                </button>
+            </div>
+
+        </form>
+        <div id="contact-demo-modal" class="dc-modal-overlay" style="display: none;">
+            <div class="dc-message-modal">
+                <div class="dc-message-icon">🍽️</div>
+
+                <h2>Order Up!</h2>
+
+                <p>
+                    Thanks for reaching out! This is a demo contact form, so no
+                    message was actually sent — but we appreciate you stopping
+                    by the kitchen.
+                </p>
+
+                <button
+                    type="button"
+                    class="dc-modal-button"
+                    onclick="document.getElementById('contact-demo-modal').style.display='none'">
+                    Got It
+                </button>
+            </div>
+        </div>
+
+        <p class="contact-demo-note">
+            DishCourse is a student-developed project. This contact form
+            is for demonstration purposes only.
+        </p>
+    </section>
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/forum/templates/conversation.html b/forum/templates/conversation.html
new file mode 100644
index 0000000..8e986a9
--- /dev/null
+++ b/forum/templates/conversation.html
@@ -0,0 +1,43 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="conversation-page">
+	<div class="conversation-header">
+		<a href="/messages" class="conversation-back">← All Conversations</a>
+
+		<div class="conversation-header-user">
+			<div class="conversation-avatar">{{ other.username[0]|upper }}</div>
+			<h1 {% if other.admin %}class="text-danger"{% endif %}>{{ other.username }}</h1>
+		</div>
+	</div>
+
+	<div class="conversation-thread">
+		{% if thread_messages %}
+			{% for message in thread_messages %}
+			<div class="message-bubble-row {% if message.sender_id == current_user.id %}message-outgoing{% else %}message-incoming{% endif %}">
+				<div class="message-bubble">
+					<div class="message-bubble-content">{{ message.content }}</div>
+					<div class="message-bubble-time">{{ message.get_time_string() }}</div>
+				</div>
+			</div>
+			{% endfor %}
+		{% else %}
+		<div class="empty-discussion-state">
+			<h3>No messages yet.</h3>
+			<p>Send {{ other.username }} a message to start the conversation.</p>
+		</div>
+		{% endif %}
+	</div>
+
+	<form action="/action_send_message" method="POST" class="message-compose-form">
+		<input type="hidden" name="recipient" value="{{ other.username }}">
+		<textarea
+			name="content"
+			class="form-control message-compose-textarea"
+			rows="3"
+			placeholder="Write a message to {{ other.username }}..."
+		></textarea>
+		<input type="submit" value="Send" class="btn dishcourse-primary-btn">
+	</form>
+</div>
+{% endblock %}
diff --git a/forum/templates/createpost.html b/forum/templates/createpost.html
index 85947a6..13e5c22 100644
--- a/forum/templates/createpost.html
+++ b/forum/templates/createpost.html
@@ -1,21 +1,93 @@
 {% extends 'layout.html' %}
+
 {% block body %}
 
+<section class="create-post-page">
+
+    <div class="create-post-heading">
+        <span class="create-post-eyebrow">START A CONVERSATION</span>
+        <h1>Create a Discussion</h1>
+        <p>You're posting in <strong>{{ subforum.name }}</strong></p>
+    </div>
+
+    <section class="create-post-card">
+
+        <form action="action_post?sub={{ subforum.id }}" method="POST" class="create-post-form">
+
+            <div class="create-post-field">
+                <label for="post-title">Discussion Title</label>
+                <input
+                    id="post-title"
+                    type="text"
+                    name="title"
+                    class="form-control"
+                    placeholder="Give your discussion a title..."
+                >
+            </div>
+
+            <div class="create-post-public">
+                <label class="public-toggle" for="is_public">
+                    <input
+                        type="checkbox"
+                        name="is_public"
+                        id="is_public"
+                        checked
+                    >
+                    <span class="public-toggle-slider"></span>
+
+                    <span class="public-toggle-text">
+                        <strong>Make this post public</strong>
+                        <small>Public posts can be viewed by everyone.</small>
+                    </span>
+                </label>
+            </div>
+
+            <div class="create-post-field">
+                <label for="post-content">What would you like to share?</label>
+                <textarea
+                    id="post-content"
+                    name="content"
+                    class="form-control create-post-textarea"
+                    rows="12"
+                    placeholder="Share your recipe, idea, question, or food thought..."
+                ></textarea>
+            </div>
+
+            <div class="create-post-helper">
+                <span>💡</span>
+                <p>Tip: Give people enough detail to jump into the conversation.</p>
+            </div>
+            
+            <div class="create-post-field">
+                <label for="media_url">Image or video link (optional)</label>
+                <input 
+                    id="media_url"
+                    type="text"
+                    name="media_url"
+                    class="form-control"
+                    placeholder="Got receipts? Paste your pic or clip here"
+                >
+            </div>
 
+            <div class="create-post-actions">
+                <a
+                    href="/subforum?sub={{ subforum.id }}"
+                    class="create-post-cancel"
+                >
+                    Cancel
+                </a>
 
-<div class="postsubmit">
-	Enter your post here:<br>
-	<div class="postinginfo">
-	You are posting to {{ subforum.title }}
-	</div>
+                <input
+                    type="submit"
+                    value="Post Discussion"
+                    class="btn dishcourse-primary-btn"
+                >
+            </div>
 
-	<form action="action_post?sub={{ subforum.id }}" method="POST">
+        </form>
 
-		<input class="inputbox" size="100" type="text" placeholder="Title" name="title"><br>
+    </section>
 
-		<textarea class="inputbox" rows="25" cols="100"  name="content" placeholder="Enter post here"></textarea><br>
+</section>
 
-		<input class="inputbox" type="submit" value="Submit Post">
-	</form>
-</div>
 {% endblock %}
\ No newline at end of file
diff --git a/forum/templates/header.html b/forum/templates/header.html
index 9403a0d..fe90b2b 100644
--- a/forum/templates/header.html
+++ b/forum/templates/header.html
@@ -1,8 +1,114 @@
-<a href="/" id="nolinks"><b>{{ config.SITE_NAME }}</b></a>{% if config.SITE_DESCRIPTION %} - {% endif %} <i>{{ config.SITE_DESCRIPTION }}</i>
-<div class="login">
-	{% if current_user.is_authenticated %}
-	<b {% if current_user.admin %} style="color: red;" {% endif %}>{{ current_user.username }}</b><a class="logoutlink" href="/action_logout">(logout)</a>
-	{% else %}
-	<a href="/loginform">Click here to login or register!</a>
-	{% endif %}
+<div class="dc-header-inner">
+
+	<!-- =====================================
+     BRAND
+     ===================================== -->
+
+<a href="/" class="dc-logo">
+    <img
+        src="{{ url_for('static', filename='images/DishCourseLogo.png') }}"
+        alt="DishCourse - Where recipes start conversations"
+        class="dc-logo-image"
+    >
+</a>
+
+	<!-- =====================================
+	     SEARCH
+	     Placeholder for future functionality
+	     ===================================== -->
+
+	<div class="dc-search">
+
+		<span class="dc-search-icon">
+			⌕
+		</span>
+
+		<input
+			type="text"
+			placeholder="Search discussions, recipes, or users..."
+			aria-label="Search DishCourse"
+		>
+
+	</div>
+
+
+	<!-- =====================================
+	     START DISCUSSION
+	     ===================================== -->
+
+	<div class="dc-header-actions">
+
+		{% if current_user.is_authenticated %}
+
+			<a
+				href="/"
+				class="dc-start-button"
+				title="Choose a discussion area to create a post"
+			>
+				<span class="dc-plus">
+					+
+				</span>
+
+				Start a Discussion
+			</a>
+
+		{% else %}
+
+			<a
+				href="/loginform"
+				class="dc-start-button"
+			>
+				<span class="dc-plus">
+					+
+				</span>
+
+				Start a Discussion
+			</a>
+
+		{% endif %}
+
+
+		<!-- User -->
+
+		<div class="dc-header-user">
+
+			<div class="dc-avatar">
+				{% if current_user.is_authenticated and current_user.avatar_filename %}
+					<img
+						src="{{ url_for('static', filename='images/avatars/' ~ current_user.avatar_filename) }}"
+						alt="{{ current_user.username }}'s profile picture"
+						class="dc-avatar-image"
+					>
+				{% elif current_user.is_authenticated %}
+					{{ current_user.username[0]|upper }}
+				{% else %}
+					?
+				{% endif %}
+			</div>
+
+
+			<div class="dc-header-user-info">
+
+				{% if current_user.is_authenticated %}
+
+					<a href="/profile">
+						<strong>
+							{{ current_user.username }}
+						</strong>
+					</a>
+
+				{% else %}
+
+					<a href="/loginform">
+						Login
+					</a>
+
+				{% endif %}
+
+			</div>
+
+		</div>
+
+	</div>
+
 </div>
\ No newline at end of file
diff --git a/forum/templates/house_rules.html b/forum/templates/house_rules.html
new file mode 100644
index 0000000..652a66c
--- /dev/null
+++ b/forum/templates/house_rules.html
@@ -0,0 +1,67 @@
+{% extends 'layout.html' %}
+{% block body %}
+
+<div class="about-page">
+
+    <section class="about-hero">
+        <p class="section-eyebrow">DishCourse Community</p>
+        <h1>House Rules 🍽️</h1>
+        <p>
+            Good food brings people together. Good conversation should too.
+            Pull up a chair, share your thoughts, and help us keep DishCourse
+            welcoming for everyone at the table.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>🥄 Critique the Dish, Not the Cook</h2>
+        <p>
+            Disagree with a recipe, technique, or opinion all you want —
+            just keep it respectful. There's always room for a different
+            taste at the table.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>🌶️ Keep It Flavorful, Not Foul</h2>
+        <p>
+            A little spice makes a conversation interesting. Personal attacks,
+            insults, and disrespect do not.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>🍰 Give Credit Where It's Due</h2>
+        <p>
+            Sharing someone else's recipe, technique, or idea? Give them
+            their flowers — and their credit.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>🥘 Don't Spam the Kitchen</h2>
+        <p>
+            Nobody ordered 37 servings of the same post. Keep discussions
+            relevant and avoid repetitive or promotional spam.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>🍴 Everyone Gets a Seat</h2>
+        <p>
+            New cooks, seasoned chefs, foodies, recipe experimenters, and
+            people who just really love to eat are all welcome here.
+        </p>
+    </section>
+
+    <section class="about-card">
+        <h2>❤️ Enjoy the DishCourse</h2>
+        <p>
+            Ask questions. Share what you know. Learn something new.
+            Laugh a little. And most importantly, enjoy the conversation.
+        </p>
+    </section>
+
+</div>
+
+{% endblock %}
\ No newline at end of file
diff --git a/forum/templates/layout.html b/forum/templates/layout.html
index a2a5e14..4d74329 100644
--- a/forum/templates/layout.html
+++ b/forum/templates/layout.html
@@ -1,30 +1,116 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename="bootstrap.min.css")}}">
-	<link rel="stylesheet" type="text/css" href="{{url_for('static', filename="style.css")}}">
-	<title>{{ config.SITE_NAME }}</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet"
+          type="text/css"
+          href="{{ url_for('static', filename='bootstrap.min.css') }}">
+
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+
+    <link rel="stylesheet"
+          type="text/css"
+          href="{{ url_for('static', filename='style.css') }}">
+
+    <title>DishCourse</title>
 </head>
+
 <body>
-<div class="page">
-	<div class="header">
-		{% include 'header.html' %}
-	</div>
-	{% if errors %}
-	<div class="errors">
-	{% for error in errors %}
-		<p class="error">
-			{{ error }}
-		</p>
-
-	{% endfor %}
-	</div>
-{% endif %}
-	<div class="content">
-		{% block body %}{% endblock %}
-	</div>
-</div>
-</body>
+	<div class="dc-app-shell">
+
+		<!-- Global Header -->
+		<header class="dc-top-header">
+			{% include 'header.html' %}
+		</header>
+
+		<!-- Application Body -->
+		<div class="dc-body-layout">
+
+			<!-- Left Navigation -->
+			<aside class="dc-left-sidebar">
+				{% include 'sidebar.html' %}
+			</aside>
+
+			<!-- Main Content -->
+			<main class="dc-main-content">
 
+				{% if errors %}
+				<div class="dc-errors">
+					{% for error in errors %}
+						<div class="alert alert-danger">{{ error }}</div>
+					{% endfor %}
+				</div>
+			{% endif %}
 
-</html>
+				{% with messages = get_flashed_messages(with_categories=true) %}
+					{% if messages %}
+						{% set ns = namespace(all_success=true) %}
+						{% for category, message in messages %}
+							{% if category != 'success' %}
+								{% set ns.all_success = false %}
+							{% endif %}
+						{% endfor %}
+						<div class="dc-modal-overlay" id="dcMessageModal">
+							<div class="dc-message-modal">
+								<div class="dc-message-icon">{% if ns.all_success %}✅{% else %}⚠️{% endif %}</div>
+								<h2>{% if ns.all_success %}All Set{% else %}Hold That Thought{% endif %}</h2>
+								{% for category, message in messages %}
+									<p>{{ message }}</p>
+								{% endfor %}
+								<button type="button" class="dc-modal-button" onclick="closeMessageModal()">OK</button>
+							</div>
+						</div>
+					{% endif %}
+				{% endwith %}
+
+				{% block body %}{% endblock %}
+			</main>
+
+			<!-- Right Sidebar -->
+			<aside class="dc-right-sidebar">
+				{% include 'right_sidebar.html' %}
+			</aside>
+		</div>
+
+		<!-- Footer -->
+		<footer class="dc-footer">
+			<div class="dc-footer-inner">
+				<div>&copy; 2026 DishCourse</div>
+
+				<div class="dc-footer-links">
+					<a href="/about">About</a>
+					<a href="/house-rules">House Rules</a>
+					<a href="/contact">Contact</a>
+				</div>
+
+				<div class="dc-social-links">
+					<a href="#" aria-label="Instagram">
+						<i class="bi bi-instagram"></i>
+					</a>
+
+					<a href="#" aria-label="Facebook">
+						<i class="bi bi-facebook"></i>
+					</a>
+
+					<a href="#" aria-label="Pinterest">
+						<i class="bi bi-pinterest"></i>
+					</a>
+
+					<a href="#" aria-label="X">
+						<i class="bi bi-twitter-x"></i>
+					</a>
+				</div>
+			</div>
+		</footer>
+
+	</div>
+	<script>
+	function closeMessageModal() {
+		document.getElementById("dcMessageModal").style.display = "none";
+	}
+	</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/forum/templates/login.html b/forum/templates/login.html
index 461533e..be07a27 100644
--- a/forum/templates/login.html
+++ b/forum/templates/login.html
@@ -1,26 +1,73 @@
 {% extends 'layout.html' %}
+
 {% block body %}
+<div class="auth-page">
+	<div class="auth-header text-center">
+		<p class="section-eyebrow">DishCourse Community</p>
+		<h1>Join the Conversation</h1>
+		<p>Log in to continue the discussion, or create an account to get started.</p>
+	</div>
 
+	<div class="row g-4 justify-content-center">
+		<div class="col-12 col-lg-5">
+			<section class="auth-card h-100">
+				<div class="auth-card-icon">👋</div>
+				<h2>Welcome Back</h2>
+				<p class="auth-card-intro">Log in to your DishCourse account.</p>
 
-<div class="loginbox">
-	<h3>Login to Account</h3>
-	<form action="/action_login" method="POST">
-	<input class="loginelement" type="text" placeholder="Username" name="username"><br>
-	<input class="loginelement" type="password" placeholder="Password" name="password"><br>
-	<input class="loginelement" type="submit" value="Login">
-	</form>
-</div>
-<br><br>
-<div class="loginbox">
-	<h3>Create Account</h3>
-	<form action="/action_createaccount" method="POST">
-	<input class="loginelement" type="email" placeholder="Email" name="email"><br>
-	<input class="loginelement" type="text" placeholder="Username" name="username"><br>
-	<input class="loginelement" type="password" placeholder="Password" name="password"><br>
-	<input class="loginelement" type="submit" value="Create">
-	</form>
+				<form action="/action_login" method="POST">
+					<div class="auth-field">
+						<label for="login-username">Username</label>
+						<input id="login-username" type="text" name="username"
+							class="form-control" placeholder="Enter your username">
+					</div>
 
-</div>
+					<div class="auth-field">
+						<label for="login-password">Password</label>
+						<input id="login-password" type="password" name="password"
+							class="form-control" placeholder="Enter your password">
+					</div>
+
+					<div class="auth-actions">
+						<input type="submit" value="Login"
+							class="btn dishcourse-primary-btn w-100">
+					</div>
+				</form>
+			</section>
+		</div>
 
+		<div class="col-12 col-lg-5">
+			<section class="auth-card h-100">
+				<div class="auth-card-icon">🍽️</div>
+				<h2>Create an Account</h2>
+				<p class="auth-card-intro">New to DishCourse? Create an account and join in.</p>
 
+				<form action="/action_createaccount" method="POST">
+					<div class="auth-field">
+						<label for="register-email">Email</label>
+						<input id="register-email" type="email" name="email"
+							class="form-control" placeholder="Enter your email">
+					</div>
+
+					<div class="auth-field">
+						<label for="register-username">Username</label>
+						<input id="register-username" type="text" name="username"
+							class="form-control" placeholder="Choose a username">
+					</div>
+
+					<div class="auth-field">
+						<label for="register-password">Password</label>
+						<input id="register-password" type="password" name="password"
+							class="form-control" placeholder="Create a password">
+					</div>
+
+					<div class="auth-actions">
+						<input type="submit" value="Create Account"
+							class="btn dishcourse-primary-btn w-100">
+					</div>
+				</form>
+			</section>
+		</div>
+	</div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/forum/templates/messages_inbox.html b/forum/templates/messages_inbox.html
new file mode 100644
index 0000000..670481f
--- /dev/null
+++ b/forum/templates/messages_inbox.html
@@ -0,0 +1,39 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="messages-page">
+	<div class="messages-heading">
+		<p class="section-eyebrow">Direct Messages</p>
+		<h1>Your Conversations</h1>
+	</div>
+
+	{% if conversations %}
+	<div class="conversation-list">
+		{% for conv in conversations %}
+		<a href="/messages/{{ conv.user.username }}" class="conversation-item{% if conv.unread_count > 0 %} conversation-unread{% endif %}">
+			<div class="conversation-avatar">{{ conv.user.username[0]|upper }}</div>
+
+			<div class="conversation-info">
+				<div class="conversation-top-row">
+					<strong {% if conv.user.admin %}class="text-danger"{% endif %}>{{ conv.user.username }}</strong>
+					<span class="conversation-time">{{ conv.last_message.get_time_string() }}</span>
+				</div>
+				<div class="conversation-preview">
+					{% if conv.last_message.sender_id == current_user.id %}<span class="conversation-preview-you">You:</span> {% endif %}{{ conv.last_message.content[:80] }}{% if conv.last_message.content|length > 80 %}…{% endif %}
+				</div>
+			</div>
+
+			{% if conv.unread_count > 0 %}
+			<span class="conversation-badge">{{ conv.unread_count }}</span>
+			{% endif %}
+		</a>
+		{% endfor %}
+	</div>
+	{% else %}
+	<div class="empty-discussion-state">
+		<h3>No messages yet.</h3>
+		<p>Visit a post and message its author to start a conversation.</p>
+	</div>
+	{% endif %}
+</div>
+{% endblock %}
diff --git a/forum/templates/profile.html b/forum/templates/profile.html
new file mode 100644
index 0000000..88d856f
--- /dev/null
+++ b/forum/templates/profile.html
@@ -0,0 +1,92 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="auth-page">
+	<div class="auth-header text-center">
+		<p class="section-eyebrow">Account</p>
+		<h1>Your Profile</h1>
+		<p>This is what your DishCourse account looks like.</p>
+	</div>
+
+	<div class="row g-4 justify-content-center">
+		<div class="col-12 col-lg-7">
+			<section class="auth-card profile-card">
+
+				<div class="profile-avatar-row">
+					<div class="profile-avatar-large">
+						{% if current_user.avatar_filename %}
+							<img
+								src="{{ url_for('static', filename='images/avatars/' ~ current_user.avatar_filename) }}"
+								alt="{{ current_user.username }}'s profile picture"
+							>
+						{% else %}
+							<span>{{ current_user.username[0]|upper }}</span>
+						{% endif %}
+					</div>
+
+					<details class="profile-change">
+						<summary>Change profile picture</summary>
+						<form action="/action_update_avatar" method="POST" enctype="multipart/form-data" class="profile-change-form">
+							<input type="file" name="avatar" accept=".png,.jpg,.jpeg,.gif,.webp" required>
+							<p class="profile-change-hint">PNG, JPG, GIF, or WEBP. 2MB max.</p>
+							<input type="submit" value="Upload" class="btn dishcourse-primary-btn">
+						</form>
+					</details>
+				</div>
+
+				<div class="profile-field-row">
+					<div class="profile-field-main">
+						<div class="profile-field-label">Username</div>
+						<div class="profile-field-value">{{ current_user.username }}</div>
+					</div>
+
+					<details class="profile-change">
+						<summary>Change username</summary>
+						<form action="/action_update_username" method="POST" class="profile-change-form">
+							<input
+								type="text" name="username" class="form-control"
+								value="{{ current_user.username }}" placeholder="Choose a username"
+							>
+							<input type="submit" value="Save" class="btn dishcourse-primary-btn">
+						</form>
+					</details>
+				</div>
+
+				<div class="profile-field-row">
+					<div class="profile-field-main">
+						<div class="profile-field-label">Email</div>
+						<div class="profile-field-value">{{ current_user.email }}</div>
+					</div>
+
+					<details class="profile-change">
+						<summary>Change email</summary>
+						<form action="/action_update_email" method="POST" class="profile-change-form">
+							<input
+								type="email" name="email" class="form-control"
+								value="{{ current_user.email }}" placeholder="Enter your email"
+							>
+							<input type="submit" value="Save" class="btn dishcourse-primary-btn">
+						</form>
+					</details>
+				</div>
+
+				{% if current_user.admin %}
+				<div class="profile-field-row">
+					<div class="profile-field-main">
+						<div class="profile-field-label">Role</div>
+						<div class="profile-field-value">Admin</div>
+					</div>
+				</div>
+				{% endif %}
+
+			</section>
+
+			<div class="profile-settings-link">
+				<a href="/settings" class="dc-settings-btn">
+					<span>⚙</span> Settings
+				</a>
+			</div>
+		</div>
+	</div>
+</div>
+{% endblock %}
diff --git a/forum/templates/right_sidebar.html b/forum/templates/right_sidebar.html
new file mode 100644
index 0000000..97e68e6
--- /dev/null
+++ b/forum/templates/right_sidebar.html
@@ -0,0 +1,152 @@
+<!-- =====================================
+     MOST DISCUSSED
+     Static UI for now
+     ===================================== -->
+
+<section class="dc-side-card">
+
+	<div class="dc-side-card-header">
+
+		<h2>
+			Most Discussed
+		</h2>
+
+		<span>
+			🔥
+		</span>
+
+	</div>
+
+
+	<div class="dc-most-discussed">
+
+		<div class="dc-discussed-item">
+
+			<div class="dc-mini-food">
+				🥖
+			</div>
+
+			<div class="dc-discussed-title">
+				Best sourdough tips for beginners?
+			</div>
+
+			<div class="dc-discussed-count">
+				◯ 42
+			</div>
+
+		</div>
+
+
+		<div class="dc-discussed-item">
+
+			<div class="dc-mini-food">
+				🍳
+			</div>
+
+			<div class="dc-discussed-title">
+				Cast iron vs. nonstick
+			</div>
+
+			<div class="dc-discussed-count">
+				◯ 63
+			</div>
+
+		</div>
+
+
+		<div class="dc-discussed-item">
+
+			<div class="dc-mini-food">
+				🍜
+			</div>
+
+			<div class="dc-discussed-title">
+				Air fryer: game changer?
+			</div>
+
+			<div class="dc-discussed-count">
+				◯ 36
+			</div>
+
+		</div>
+
+
+		<div class="dc-discussed-item">
+
+			<div class="dc-mini-food">
+				🥘
+			</div>
+
+			<div class="dc-discussed-title">
+				Weeknight dinners that always hit
+			</div>
+
+			<div class="dc-discussed-count">
+				◯ 29
+			</div>
+
+		</div>
+
+	</div>
+
+
+	<a href="/" class="dc-view-all">
+		View all discussions →
+	</a>
+
+</section>
+
+
+
+<!-- =====================================
+     CATEGORIES
+     Static UI for now
+     ===================================== -->
+
+<section class="dc-side-card">
+
+	<h2>
+		Categories
+	</h2>
+
+
+	<nav class="dc-category-list">
+
+		<a href="/" class="dc-category active">
+			<span>▦</span>
+			All Categories
+		</a>
+
+		<a href="#" class="dc-category">
+			<span>♨</span>
+			Baking
+		</a>
+
+		<a href="#" class="dc-category">
+			<span>🍳</span>
+			Cooking
+		</a>
+
+		<a href="#" class="dc-category">
+			<span>▤</span>
+			Desserts
+		</a>
+
+		<a href="#" class="dc-category">
+			<span>♨</span>
+			Drinks
+		</a>
+
+		<a href="#" class="dc-category">
+			<span>♡</span>
+			Dietary &amp; Health
+		</a>
+
+	</nav>
+
+
+	<a href="#" class="dc-view-all">
+		View all categories →
+	</a>
+
+</section>
\ No newline at end of file
diff --git a/forum/templates/settings.html b/forum/templates/settings.html
new file mode 100644
index 0000000..4f72410
--- /dev/null
+++ b/forum/templates/settings.html
@@ -0,0 +1,46 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="auth-page">
+	<div class="auth-header text-center">
+		<p class="section-eyebrow">Account</p>
+		<h1>Settings</h1>
+		<p>Manage your password and account security.</p>
+		<a href="/profile" class="profile-back-link">← Back to Profile</a>
+	</div>
+
+	<div class="row g-4 justify-content-center">
+		<div class="col-12 col-lg-5">
+			<section class="auth-card h-100">
+				<div class="auth-card-icon">🔒</div>
+				<h2>Password</h2>
+				<p class="auth-card-intro">Change your account password.</p>
+
+				<form action="/action_change_password" method="POST">
+					<div class="auth-field">
+						<label for="settings-current-password">Current Password</label>
+						<input id="settings-current-password" type="password" name="current_password"
+							class="form-control" placeholder="Enter your current password">
+					</div>
+
+					<div class="auth-field">
+						<label for="settings-new-password">New Password</label>
+						<input id="settings-new-password" type="password" name="new_password"
+							class="form-control" placeholder="Enter a new password">
+					</div>
+
+					<div class="auth-field">
+						<label for="settings-confirm-password">Confirm New Password</label>
+						<input id="settings-confirm-password" type="password" name="confirm_password"
+							class="form-control" placeholder="Re-enter the new password">
+					</div>
+
+					<div class="auth-actions">
+						<input type="submit" value="Change Password" class="btn dishcourse-primary-btn w-100">
+					</div>
+				</form>
+			</section>
+		</div>
+	</div>
+</div>
+{% endblock %}
diff --git a/forum/templates/sidebar.html b/forum/templates/sidebar.html
new file mode 100644
index 0000000..e9cda9e
--- /dev/null
+++ b/forum/templates/sidebar.html
@@ -0,0 +1,155 @@
+<nav class="dc-sidebar-nav">
+
+	<a
+		href="/"
+		class="dc-sidebar-item active"
+	>
+
+		<span class="dc-sidebar-icon">
+			⌂
+		</span>
+
+		<span>
+			Home
+		</span>
+
+	</a>
+
+
+	<a
+		href="/"
+		class="dc-sidebar-item"
+	>
+
+		<span class="dc-sidebar-icon">
+			◯
+		</span>
+
+		<span>
+			Discussions
+		</span>
+
+	</a>
+
+
+	{% if current_user.is_authenticated %}
+	<a
+		href="/messages"
+		class="dc-sidebar-item"
+	>
+
+		<span class="dc-sidebar-icon">
+			✉
+		</span>
+
+		<span>
+			Messages
+		</span>
+
+		{% if unread_message_count and unread_message_count > 0 %}
+		<span class="dc-sidebar-badge">{{ unread_message_count }}</span>
+		{% endif %}
+
+	</a>
+	{% endif %}
+
+
+	<!-- Future functionality -->
+	<a
+		href="#"
+		class="dc-sidebar-item"
+	>
+
+		<span class="dc-sidebar-icon">
+			▣
+		</span>
+
+		<span>
+			Recipes
+		</span>
+
+	</a>
+
+
+	<!-- Future functionality -->
+	<a
+		href="#"
+		class="dc-sidebar-item"
+	>
+
+		<span class="dc-sidebar-icon">
+			▱
+		</span>
+
+		<span>
+			My Posts
+		</span>
+
+	</a>
+
+
+	{% if current_user.is_authenticated %}
+	<a
+		href="/profile"
+		class="dc-sidebar-item"
+	>
+
+		<span class="dc-sidebar-icon">
+			👤
+		</span>
+
+		<span>
+			Profile
+		</span>
+
+	</a>
+	{% endif %}
+
+
+	{% if current_user.is_authenticated %}
+
+		<div class="dc-sidebar-divider"></div>
+
+
+		<a
+			href="/action_logout"
+			class="dc-sidebar-item"
+		>
+
+			<span class="dc-sidebar-icon">
+				⇥
+			</span>
+
+			<span>
+				Logout
+			</span>
+
+		</a>
+
+	{% endif %}
+
+</nav>
+
+
+<!-- Sidebar Brand Illustration -->
+
+<div class="dc-sidebar-community">
+
+	<div class="dc-food-art">
+		<span>♡</span>
+		<span>🥄</span>
+		<span>♨</span>
+	</div>
+
+
+	<p>
+		A community of food lovers sharing, critiquing,
+		and celebrating great food.
+	</p>
+
+
+	<strong>
+		Food worth talking about.
+	</strong>
+
+</div>
\ No newline at end of file
diff --git a/forum/templates/subforum.html b/forum/templates/subforum.html
index 8783cd1..15b48c9 100644
--- a/forum/templates/subforum.html
+++ b/forum/templates/subforum.html
@@ -1,63 +1,139 @@
 {% extends 'layout.html' %}
-{% block body %}
 
-{{ path|safe }}
-<div class="subforumheader">
-	<div class="subforumheadertitle">
-	{{ subforum.title}} 
-	</div>
-	--
-	<div class="subforumheaderdesc">
-	{{ subforum.description }}
+{% block body %}
+<div class="discussion-page">
+	<!-- Breadcrumb -->
+	<div class="discussion-path">
+		{{ path|safe }}
 	</div>
 
-		{% if subforums %}
-		
-		{% for sub in subforums %}
-		<div class="subsubforums">
-		<div class="subsubforumtitle">
-		<a href="/subforum?sub={{ sub.id }}">{{ sub.title }}</a>
+	<!-- Subforum Header -->
+	<section class="discussion-header">
+		<div class="discussion-header-content">
+			<p class="section-eyebrow">Discussion</p>
+			<h1 class="discussion-title">{{ subforum.title }}</h1>
+			<p class="discussion-description">{{ subforum.description }}</p>
 		</div>
-		<div class="subsubforumdesc">
-		{{ sub.description }}
+
+		<div class="discussion-action">
+			{% if current_user.is_authenticated %}
+				<a href="/addpost?sub={{ subforum.id }}" class="btn dishcourse-primary-btn">
+					+ Create Post
+				</a>
+			{% else %}
+				<a href="/loginform" class="btn dishcourse-primary-btn">
+					Login to Create a Post
+				</a>
+			{% endif %}
 		</div>
-		 </div>
+	</section>
 
-		{% endfor %}
-		{% endif %}
-	
-	<div class="subforumheaderlink">
-	{% if current_user.is_authenticated %}
-	<a href="/addpost?sub={{ subforum.id }}">Create a post in <b>{{ subforum.title }}</b></a>
-	{% else %}
-	<a href="/loginform">Log in or create an account to make a post in <b>{{ subforum.title }}</b></a>
+	<!-- Child Subforums -->
+	{% if subforums %}
+	<section class="related-forums">
+		<p class="section-eyebrow">Related Discussions</p>
+
+		<div class="row g-3">
+			{% for sub in subforums %}
+			<div class="col-12 col-md-6">
+				<a href="/subforum?sub={{ sub.id }}" class="related-forum-link">
+					<div class="related-forum-card">
+						<h3>{{ sub.title }}</h3>
+						<p>{{ sub.description }}</p>
+					</div>
+				</a>
+			</div>
+			{% endfor %}
+		</div>
+	</section>
 	{% endif %}
-	</div>
-	
-</div>
 
+	<!-- Discussions -->
+	<section class="discussion-list">
+		<div class="discussion-list-heading">
+			<div>
+				<p class="section-eyebrow">Community Posts</p>
+				<h2>Latest Discussions</h2>
+			</div>
+		</div>
+
+		{% if posts.first() %}
+		<div class="post-list">
+			{% for post in posts %}
+			<article class="feed-post-card">
 
+				<!-- Author -->
+				<div class="feed-post-avatar">
+					{{ post.user.username[0]|upper }}
+				</div>
 
+				<!-- Main Content -->
+				<div class="feed-post-content">
+					<a href="/viewpost?post={{ post.id }}" class="feed-post-title">
+						{{ post.title }}
+					</a>
 
+					<div class="feed-post-meta">
+						<span>
+							By
+							<strong {% if post.user.admin %}class="text-danger"{% endif %}>
+								{{ post.user.username }}
+							</strong>
+						</span>
+						<span class="feed-meta-dot">•</span>
+						<span>{{ post.get_time_string() }}</span>
+					</div>
 
-{% if posts.first() %}
-	{% for post in posts %}
-	<div class="post">
-		<div class="posttitle">
-		<a href="/viewpost?post={{ post.id }}">{{ post.title }}</a>
-		</div>
-		<div class="postusername">
-			by <b {% if post.user.admin %} style="color: red;" {% endif %}> {{post.user.username}}</b>
-			<div class="date">
-			{{ post.get_time_string() }}
-			</div>
+					<div class="feed-post-tags">
+						<span class="feed-tag">Discussion</span>
+						<span class="feed-tag feed-tag-orange">Food Talk</span>
+					</div>
+				</div>
+
+				<!-- Future Post Media -->
+				<div class="feed-post-media-placeholder">
+					<span>🍽️</span>
+				</div>
+
+				<!-- Future Reaction Counts -->
+				<div class="feed-post-stats">
+					<div>
+						<span class="feed-stat-icon">♡</span>
+						<strong>{{ post.reactions|length }}</strong>
+						<small>reactions</small>
+					</div>
+					<div>
+						<span class="feed-stat-icon">◯</span>
+						<strong>{{ post.comments|length }}</strong>
+						<small>comments</small>
+					</div>
+				</div>
+
+				<!-- View Post -->
+				<a href="/viewpost?post={{ post.id }}"
+				   class="feed-post-open"
+				   aria-label="Open {{ post.title }}">
+					→
+				</a>
+			</article>
+			{% endfor %}
 		</div>
-	</div>
-	{% endfor %}
 
-{% else %}
-<div class="noposts">
-<b>There are no posts in this subforum</b>
+		{% else %}
+		<div class="empty-discussion-state">
+			<h3>No discussions yet.</h3>
+			<p>
+				Be the first to start a conversation in
+				<strong>{{ subforum.title }}</strong>.
+			</p>
+
+			{% if current_user.is_authenticated %}
+				<a href="/addpost?sub={{ subforum.id }}" class="btn dishcourse-primary-btn">
+					Start the Conversation
+				</a>
+			{% endif %}
+		</div>
+		{% endif %}
+	</section>
 </div>
-{% endif %}
 {% endblock %}
\ No newline at end of file
diff --git a/forum/templates/subforums.html b/forum/templates/subforums.html
index 8cee77d..8eea66f 100644
--- a/forum/templates/subforums.html
+++ b/forum/templates/subforums.html
@@ -1,18 +1,59 @@
 {% extends 'layout.html' %}
-{% block body%}
-<div class="toplevelinfo">
-	Top level subforums:
-</div>
-{% for subforum in subforums %}
-<div class="subforumlisting">
-<div class="subforumtitle">
-<a href="/subforum?sub={{ subforum.id }}">
-{{ subforum.title}}
-</a>
-</div>
-<div class="subforumdesc">
-{{ subforum.description }}
-</div>
-</div>
-{% endfor %}
-{% endblock %}
+
+{% block body %}
+
+<section class="dishcourse-hero text-center">
+	<div class="hero-content">
+		<p class="hero-eyebrow">Welcome to DishCourse</p>
+		<h1 class="hero-title">
+			Where food meets conversation.
+			 <!-- TEST DISHCOURSE PAGE -->
+		</h1>
+		<p class="hero-text">
+			Share recipes, trade ideas, critique dishes, and join the conversation
+			with people who love talking about food as much as you do.
+		</p>
+	</div>
+</section>
+
+<section class="forum-section">
+	<div class="forum-section-heading">
+		<div>
+			<p class="section-eyebrow">Community</p>
+			<h2>Browse Discussions</h2>
+		</div>
+
+		<p class="forum-section-intro">
+			Choose a conversation and see what's cooking.
+		</p>
+	</div>
+
+	<div class="row g-4">
+		{% for subforum in subforums %}
+		<div class="col-12 col-md-6 col-lg-4">
+			<a
+				href="/subforum?sub={{ subforum.id }}"
+				class="forum-card-link"
+			>
+				<div class="forum-card h-100">
+					<div class="forum-card-icon"><span>🍽️</span></div>
+					<div class="forum-card-body">
+						<h3 class="forum-card-title">
+							{{ subforum.title }}
+						</h3>
+						<p class="forum-card-description">
+							{{ subforum.description }}
+						</p>
+						<div class="forum-card-action">
+							Enter Discussion
+							<span aria-hidden="true">→</span>
+						</div>
+					</div>
+				</div>
+			</a>
+		</div>
+		{% endfor %}
+	</div>
+</section>
+
+{% endblock %}
\ No newline at end of file
diff --git a/forum/templates/viewpost.html b/forum/templates/viewpost.html
index 3f489ca..87021e5 100644
--- a/forum/templates/viewpost.html
+++ b/forum/templates/viewpost.html
@@ -1,77 +1,200 @@
 {% extends 'layout.html' %}
-{% block body %}
-{{ path|safe}}
 
-<div class="actualpost">
-	<div class="actualposttitle">
-		<a href="/viewpost?post={{ post.id }}">{{post.title}}</a>
-		<div class="postposter" {% if post.user.admin %} style="color: red;" {% endif %}>
-			{{ post.user.username }}
+{% block body %}
+<div class="post-detail-page">
+	<div class="discussion-path">{{ path|safe }}</div>
 
+	<article class="post-detail-card">
+		<div class="post-detail-header">
+			<div class="post-detail-author-row">
+				<div class="post-detail-avatar">{{ post.user.username[0]|upper }}</div>
+				<div>
+					<p class="section-eyebrow">Discussion Post</p>
+					<h1 class="post-detail-title">{{ post.title }}</h1>
+					<div class="post-detail-meta">
+						<span>Posted by <strong {% if post.user.admin %}class="text-danger"{% endif %}>{{ post.user.username }}</strong></span>
+						<span class="discussion-meta-divider">•</span>
+						<span>{{ post.get_time_string() }}</span>
+						{% if current_user.is_authenticated and current_user.id != post.user_id %}
+						<span class="discussion-meta-divider">•</span>
+						<a href="/messages/{{ post.user.username }}" class="message-user-link">✉ Message</a>
+						{% endif %}
+					</div>
+				</div>
+			</div>
 		</div>
-		<div class="posttime">
-			{{ post.get_time_string() }}
-		</div>
-	</div>
-	<div class="postcontent">
-		{{post.content}}
-	</div>
 
+		<div class="post-detail-content">{{ post.content }}</div>
+
+{% if post.media_url %}
+<div class="post-media">
+    {% if post.media_url.endswith('.mp4') or post.media_url.endswith('.webm') or post.media_url.endswith('.mov') %}
+        <video controls class="post-media-video">
+            <source src="{{ post.media_url }}">
+        </video>
+    {% else %}
+        <img src="{{ post.media_url }}" alt="Post image" class="post-media-image">
+    {% endif %}
 </div>
-<div class="addcomment" id="addcomment">
-	<form action="/action_comment?post={{ post.id }}" method="POST">
-		<textarea class="inputbox varwidth" rows="6" name="content"></textarea><br>
-		<input class="inputbox" style="margin-bottom: 1%;" type="submit" value="Comment">
-	</form>
-</div>
-<div style="text-align: center;">
+{% endif %}
 
-	
+		<div class="post-detail-tags">
+			<span class="feed-tag">Discussion</span>
+			<span class="feed-tag feed-tag-orange">Food Talk</span>
+		</div>
 
-	{% if current_user.is_authenticated %}
-	<input type="button" id="displayaddcomment" onclick="toggle()" value="Add a comment">
+		<div class="post-reaction-placeholder">
+			<span class="reaction-placeholder-label">Reactions</span>
 
-	{% else %}
-	<a href="/loginform">Login or register to make a comment</a>
-	{% endif %}
-</div>
-{%if comments%}
-<div class="comments">
-{% for comment in comments %}
-	
-	<div class="comment">
-		<div class="commentuser">
-			(<span  {% if comment.user.admin %} style="color: red;" {% endif %}>{{ comment.user.username }}</span>) - 
+			{% if current_user.is_authenticated %}
+			<div class="reaction-placeholder-actions">
+				<form action="/action_reaction" method="POST">
+					<input type="hidden" name="post_id" value="{{ post.id }}">
+					<input type="hidden" name="reaction_type" value="like">
+					<button type="submit"
+						class="reaction-button {% if user_reaction == 'like' %}reaction-selected{% endif %}">
+						👍 <span>Like {{ like_count }}</span>
+					</button>
+				</form>
+
+				<form action="/action_reaction" method="POST">
+					<input type="hidden" name="post_id" value="{{ post.id }}">
+					<input type="hidden" name="reaction_type" value="dislike">
+					<button type="submit"
+						class="reaction-button {% if user_reaction == 'dislike' %}reaction-selected{% endif %}">
+						👎 <span>Dislike {{ dislike_count }}</span>
+					</button>
+				</form>
+
+				<form action="/action_reaction" method="POST">
+					<input type="hidden" name="post_id" value="{{ post.id }}">
+					<input type="hidden" name="reaction_type" value="heart">
+					<button type="submit"
+						class="reaction-button {% if user_reaction == 'heart' %}reaction-selected{% endif %}">
+						❤️ <span>Heart {{ heart_count }}</span>
+					</button>
+				</form>
+			</div>
+			{% else %}
+				<a href="/loginform">Login to react to this post</a>
+			{% endif %}
 		</div>
-		<div class="commentcontent">
-			{{ comment.content }}
+	</article>
+
+	<section class="post-comments-section">
+		<div class="comments-section-heading">
+			<div>
+				<p class="section-eyebrow">Community</p>
+				<h2>Comments</h2>
+			</div>
+
+			<div>
+				{% if current_user.is_authenticated %}
+					<input type="button" id="displayaddcomment" onclick="toggle()" value="Add a Comment" class="btn dishcourse-primary-btn">
+				{% else %}
+					<a href="/loginform" class="btn dishcourse-primary-btn">Login to Comment</a>
+				{% endif %}
+			</div>
 		</div>
-		
-		<div class="commenttime">
-			{{ comment.get_time_string() }}
+
+		<div class="addcomment" id="addcomment">
+			<form action="/action_comment?post={{ post.id }}" method="POST" class="comment-form">
+				<label for="comment-content" class="form-label">Add to the conversation</label>
+				<textarea id="comment-content" class="form-control comment-textarea" rows="5" name="content" placeholder="Share your thoughts..."></textarea>
+				<div class="comment-form-actions">
+					<input class="btn dishcourse-submit-btn" type="submit" value="Post Comment">
+				</div>
+			</form>
+		</div>
+
+		{% if comments %}
+		<div class="comments-list">
+			{% for comment in comments %}
+			<article class="comment-card">
+				<div class="comment-avatar">{{ comment.user.username[0]|upper }}</div>
+				<div class="comment-card-body">
+					<div class="comment-card-header">
+						<div class="comment-author">
+							<span {% if comment.user.admin %}class="text-danger"{% endif %}>{{ comment.user.username }}</span>
+							{% if current_user.is_authenticated and current_user.id != comment.user_id %}
+							<a href="/messages/{{ comment.user.username }}" class="message-user-link">✉ Message</a>
+							{% endif %}
+						</div>
+						<div class="comment-date">{{ comment.get_time_string() }}</div>
+					</div>
+					<div class="comment-card-content">{{ comment.content }}</div>
+					<div class="comment-reactions">
+						{% set like_count = comment.reactions
+							| selectattr("reaction_type", "equalto", "like")
+							| list
+							| length %}
+						{% set dislike_count = comment.reactions
+							| selectattr("reaction_type", "equalto", "dislike")
+							| list
+							| length %}
+						{% set heart_count = comment.reactions
+							| selectattr("reaction_type", "equalto", "heart")
+							| list
+							| length %}
+						{% if current_user.is_authenticated %}
+							{% set ns = namespace(user_reaction=none) %}
+							{% for reaction in comment.reactions %}
+								{% if reaction.user_id == current_user.id %}
+									{% set ns.user_reaction = reaction.reaction_type %}
+								{% endif %}
+							{% endfor %}
+							<form action="/action_comment_reaction"
+								method="POST"
+								class="comment-reaction-form">
+								<input type="hidden"
+									name="comment_id"
+									value="{{ comment.id }}">
+								<button type="submit"
+										name="reaction_type"
+										value="like"
+										class="reaction-button {% if ns.user_reaction == 'like' %}reaction-selected{% endif %}">
+									👍 {{ like_count }}
+								</button>
+								<button type="submit"
+										name="reaction_type"
+										value="dislike"
+										class="reaction-button {% if ns.user_reaction == 'dislike' %}reaction-selected{% endif %}">
+									👎 {{ dislike_count }}
+								</button>
+								<button type="submit"
+										name="reaction_type"
+										value="heart"
+										class="reaction-button {% if ns.user_reaction == 'heart' %}reaction-selected{% endif %}">
+									❤️ {{ heart_count }}
+								</button>
+							</form>
+						{% endif %}
+					</div>
+				</div>
+			</article>
+			{% endfor %}
 		</div>
-	</div>
-	<br>
-	
-{% endfor %}
+		{% else %}
+		<div class="empty-comments-state">
+			<h3>No comments yet.</h3>
+			<p>Be the first to join the conversation.</p>
+		</div>
+		{% endif %}
+	</section>
 </div>
-{% endif %}
-<script type="text/javascript">
-function toggle(){
+
+<script>
+function toggle() {
 	var div = document.getElementById("addcomment");
-	var button = document.getElementById("displayaddcomment")
-	if(div.style.display == "none" || div.style.display.trim() == ""){
-		div.style.display = "inline";
-		button.value="Hide";
-	}else{
+	var button = document.getElementById("displayaddcomment");
+
+	if (div.style.display == "none" || div.style.display.trim() == "") {
+		div.style.display = "block";
+		button.value = "Hide Comment Form";
+	} else {
 		div.style.display = "none";
-		button.value="Add a comment"
+		button.value = "Add a Comment";
 	}
-	
 }
 </script>
-
-
-{% endblock %}
-
-
+{% endblock %}
\ No newline at end of file
diff --git a/forum/user.py b/forum/user.py
index 8765da1..d06cd2b 100644
--- a/forum/user.py
+++ b/forum/user.py
@@ -1,6 +1,5 @@
 
 from .models import User
-
 import re
 
 ##
@@ -9,6 +8,7 @@
 
 password_regex = re.compile("^[a-zA-Z0-9!@#%&]{6,40}$")
 username_regex = re.compile("^[a-zA-Z0-9!@#%&]{4,40}$")
+email_regex = re.compile(r"^[^@\s]+@[^@\s]+\.[^@\s]+$")
 #Account checks
 def valid_username(username):
 	if not username_regex.match(username):
@@ -23,3 +23,19 @@ def username_taken(username):
 	return User.query.filter(User.username == username).first()
 def email_taken(email):
 	return User.query.filter(User.email == email).first()
+
+def valid_email(email):
+	return bool(email_regex.match(email))
+
+# Avatar upload checks
+ALLOWED_AVATAR_EXTENSIONS = {"png", "jpg", "jpeg", "gif", "webp"}
+MAX_AVATAR_BYTES = 2 * 1024 * 1024  # 2MB
+
+def valid_avatar_filename(filename):
+	if not filename or "." not in filename:
+		return False
+	ext = filename.rsplit(".", 1)[1].lower()
+	return ext in ALLOWED_AVATAR_EXTENSIONS
+
+def avatar_extension(filename):
+	return filename.rsplit(".", 1)[1].lower()
diff --git a/output/pdf/CircusCircusLimes_Project_Study_Guide.pdf b/output/pdf/CircusCircusLimes_Project_Study_Guide.pdf
new file mode 100644
index 0000000..9e78aea
Binary files /dev/null and b/output/pdf/CircusCircusLimes_Project_Study_Guide.pdf differ
diff --git a/requirements.txt b/requirements.txt
index 39287bc..15651b0 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -8,4 +8,5 @@ MarkupSafe
 SQLAlchemy
 Werkzeug
 wheel
-honcho
\ No newline at end of file
+honcho
+PyMySQL==1.2.0
\ No newline at end of file
diff --git a/tmp/pdfs/study-guide-contact-sheet-v2.png b/tmp/pdfs/study-guide-contact-sheet-v2.png
new file mode 100644
index 0000000..abe3f0a
Binary files /dev/null and b/tmp/pdfs/study-guide-contact-sheet-v2.png differ
diff --git a/tmp/pdfs/study-guide-contact-sheet.png b/tmp/pdfs/study-guide-contact-sheet.png
new file mode 100644
index 0000000..8db8de3
Binary files /dev/null and b/tmp/pdfs/study-guide-contact-sheet.png differ
diff --git a/tmp/pdfs/study-guide-first6.png b/tmp/pdfs/study-guide-first6.png
new file mode 100644
index 0000000..4286dc4
Binary files /dev/null and b/tmp/pdfs/study-guide-first6.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-01.png b/tmp/pdfs/study-guide-render-v2/page-01.png
new file mode 100644
index 0000000..2eb6fa2
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-01.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-02.png b/tmp/pdfs/study-guide-render-v2/page-02.png
new file mode 100644
index 0000000..5e6cc47
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-02.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-03.png b/tmp/pdfs/study-guide-render-v2/page-03.png
new file mode 100644
index 0000000..ba989c7
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-03.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-04.png b/tmp/pdfs/study-guide-render-v2/page-04.png
new file mode 100644
index 0000000..9089a1c
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-04.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-05.png b/tmp/pdfs/study-guide-render-v2/page-05.png
new file mode 100644
index 0000000..ffffc16
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-05.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-06.png b/tmp/pdfs/study-guide-render-v2/page-06.png
new file mode 100644
index 0000000..0e32cde
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-06.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-07.png b/tmp/pdfs/study-guide-render-v2/page-07.png
new file mode 100644
index 0000000..e7a3f3b
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-07.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-08.png b/tmp/pdfs/study-guide-render-v2/page-08.png
new file mode 100644
index 0000000..019387a
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-08.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-09.png b/tmp/pdfs/study-guide-render-v2/page-09.png
new file mode 100644
index 0000000..1222764
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-09.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-10.png b/tmp/pdfs/study-guide-render-v2/page-10.png
new file mode 100644
index 0000000..fe14735
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-10.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-11.png b/tmp/pdfs/study-guide-render-v2/page-11.png
new file mode 100644
index 0000000..cebc6ce
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-11.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-12.png b/tmp/pdfs/study-guide-render-v2/page-12.png
new file mode 100644
index 0000000..6273007
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-12.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-13.png b/tmp/pdfs/study-guide-render-v2/page-13.png
new file mode 100644
index 0000000..e94957e
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-13.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-14.png b/tmp/pdfs/study-guide-render-v2/page-14.png
new file mode 100644
index 0000000..190b6b9
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-14.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-15.png b/tmp/pdfs/study-guide-render-v2/page-15.png
new file mode 100644
index 0000000..8ab9dae
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-15.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-16.png b/tmp/pdfs/study-guide-render-v2/page-16.png
new file mode 100644
index 0000000..e7f0ccc
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-16.png differ
diff --git a/tmp/pdfs/study-guide-render-v2/page-17.png b/tmp/pdfs/study-guide-render-v2/page-17.png
new file mode 100644
index 0000000..068bb5a
Binary files /dev/null and b/tmp/pdfs/study-guide-render-v2/page-17.png differ
diff --git a/tmp/pdfs/study-guide-render/page-01.png b/tmp/pdfs/study-guide-render/page-01.png
new file mode 100644
index 0000000..2eb6fa2
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-01.png differ
diff --git a/tmp/pdfs/study-guide-render/page-02.png b/tmp/pdfs/study-guide-render/page-02.png
new file mode 100644
index 0000000..5e6cc47
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-02.png differ
diff --git a/tmp/pdfs/study-guide-render/page-03.png b/tmp/pdfs/study-guide-render/page-03.png
new file mode 100644
index 0000000..ba989c7
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-03.png differ
diff --git a/tmp/pdfs/study-guide-render/page-04.png b/tmp/pdfs/study-guide-render/page-04.png
new file mode 100644
index 0000000..9089a1c
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-04.png differ
diff --git a/tmp/pdfs/study-guide-render/page-05.png b/tmp/pdfs/study-guide-render/page-05.png
new file mode 100644
index 0000000..68abfcb
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-05.png differ
diff --git a/tmp/pdfs/study-guide-render/page-06.png b/tmp/pdfs/study-guide-render/page-06.png
new file mode 100644
index 0000000..b661cd9
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-06.png differ
diff --git a/tmp/pdfs/study-guide-render/page-07.png b/tmp/pdfs/study-guide-render/page-07.png
new file mode 100644
index 0000000..178eddf
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-07.png differ
diff --git a/tmp/pdfs/study-guide-render/page-08.png b/tmp/pdfs/study-guide-render/page-08.png
new file mode 100644
index 0000000..b231136
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-08.png differ
diff --git a/tmp/pdfs/study-guide-render/page-09.png b/tmp/pdfs/study-guide-render/page-09.png
new file mode 100644
index 0000000..330d852
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-09.png differ
diff --git a/tmp/pdfs/study-guide-render/page-10.png b/tmp/pdfs/study-guide-render/page-10.png
new file mode 100644
index 0000000..ed8d061
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-10.png differ
diff --git a/tmp/pdfs/study-guide-render/page-11.png b/tmp/pdfs/study-guide-render/page-11.png
new file mode 100644
index 0000000..71cf327
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-11.png differ
diff --git a/tmp/pdfs/study-guide-render/page-12.png b/tmp/pdfs/study-guide-render/page-12.png
new file mode 100644
index 0000000..d15862e
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-12.png differ
diff --git a/tmp/pdfs/study-guide-render/page-13.png b/tmp/pdfs/study-guide-render/page-13.png
new file mode 100644
index 0000000..b04943d
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-13.png differ
diff --git a/tmp/pdfs/study-guide-render/page-14.png b/tmp/pdfs/study-guide-render/page-14.png
new file mode 100644
index 0000000..e3add33
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-14.png differ
diff --git a/tmp/pdfs/study-guide-render/page-15.png b/tmp/pdfs/study-guide-render/page-15.png
new file mode 100644
index 0000000..7d2b8f9
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-15.png differ
diff --git a/tmp/pdfs/study-guide-render/page-16.png b/tmp/pdfs/study-guide-render/page-16.png
new file mode 100644
index 0000000..18c24b4
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-16.png differ
diff --git a/tmp/pdfs/study-guide-render/page-17.png b/tmp/pdfs/study-guide-render/page-17.png
new file mode 100644
index 0000000..6d69666
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-17.png differ
diff --git a/tmp/pdfs/study-guide-render/page-18.png b/tmp/pdfs/study-guide-render/page-18.png
new file mode 100644
index 0000000..d6149c1
Binary files /dev/null and b/tmp/pdfs/study-guide-render/page-18.png differ
diff --git a/tools/build_study_guide.py b/tools/build_study_guide.py
new file mode 100644
index 0000000..fb3708e
--- /dev/null
+++ b/tools/build_study_guide.py
@@ -0,0 +1,474 @@
+from reportlab.lib import colors
+from reportlab.lib.enums import TA_CENTER, TA_LEFT
+from reportlab.lib.pagesizes import letter
+from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+from reportlab.lib.units import inch
+from reportlab.platypus import (
+    SimpleDocTemplate, Paragraph, Spacer, PageBreak, Table, TableStyle,
+    KeepTogether, HRFlowable
+)
+from reportlab.pdfbase.ttfonts import TTFont
+from reportlab.pdfbase import pdfmetrics
+from reportlab.lib.colors import HexColor
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+OUT = ROOT / "output" / "pdf" / "CircusCircusLimes_Project_Study_Guide.pdf"
+OUT.parent.mkdir(parents=True, exist_ok=True)
+
+NAVY = HexColor("#17325C")
+BLUE = HexColor("#2E74B5")
+PALE = HexColor("#EAF1F8")
+GREEN = HexColor("#E6F4EA")
+GOLD = HexColor("#FFF4D6")
+RED = HexColor("#FCE8E6")
+INK = HexColor("#172033")
+GRAY = HexColor("#5F6B7A")
+LINE = HexColor("#C8D2DF")
+
+styles = getSampleStyleSheet()
+styles.add(ParagraphStyle(name="CoverTitle", parent=styles["Title"], fontName="Helvetica-Bold", fontSize=27, leading=31, textColor=NAVY, alignment=TA_CENTER, spaceAfter=12))
+styles.add(ParagraphStyle(name="CoverSub", parent=styles["Normal"], fontSize=13, leading=18, textColor=GRAY, alignment=TA_CENTER, spaceAfter=10))
+styles.add(ParagraphStyle(name="H1x", parent=styles["Heading1"], fontName="Helvetica-Bold", fontSize=18, leading=22, textColor=NAVY, spaceBefore=4, spaceAfter=10, keepWithNext=True))
+styles.add(ParagraphStyle(name="H2x", parent=styles["Heading2"], fontName="Helvetica-Bold", fontSize=13, leading=16, textColor=BLUE, spaceBefore=10, spaceAfter=5, keepWithNext=True))
+styles.add(ParagraphStyle(name="H3x", parent=styles["Heading3"], fontName="Helvetica-Bold", fontSize=11, leading=14, textColor=NAVY, spaceBefore=7, spaceAfter=3, keepWithNext=True))
+styles.add(ParagraphStyle(name="Bodyx", parent=styles["BodyText"], fontName="Helvetica", fontSize=10.2, leading=14.2, textColor=INK, spaceAfter=6))
+styles.add(ParagraphStyle(name="Smallx", parent=styles["BodyText"], fontName="Helvetica", fontSize=8.5, leading=11.2, textColor=INK, spaceAfter=3))
+styles.add(ParagraphStyle(name="Tinyx", parent=styles["BodyText"], fontName="Helvetica", fontSize=7.6, leading=9.4, textColor=INK))
+styles.add(ParagraphStyle(name="Codex", parent=styles["BodyText"], fontName="Courier", fontSize=8.4, leading=11.2, textColor=INK, leftIndent=10, rightIndent=10, spaceBefore=3, spaceAfter=6, backColor=HexColor("#F4F6F8"), borderPadding=6))
+styles.add(ParagraphStyle(name="Question", parent=styles["BodyText"], fontName="Helvetica-Bold", fontSize=10.3, leading=13.5, textColor=NAVY, spaceBefore=5, spaceAfter=2))
+styles.add(ParagraphStyle(name="Callout", parent=styles["BodyText"], fontName="Helvetica", fontSize=9.6, leading=13, textColor=INK, leftIndent=10, rightIndent=10, spaceBefore=4, spaceAfter=8, borderPadding=8, borderWidth=.6, borderColor=LINE, backColor=PALE))
+styles.add(ParagraphStyle(name="Bulletx", parent=styles["BodyText"], fontName="Helvetica", fontSize=10, leading=13.5, leftIndent=17, firstLineIndent=-9, bulletIndent=4, spaceAfter=3, textColor=INK))
+
+story = []
+
+def P(text, style="Bodyx"): story.append(Paragraph(text, styles[style]))
+def H1(text): story.append(Paragraph(text, styles["H1x"]))
+def H2(text): story.append(Paragraph(text, styles["H2x"]))
+def H3(text): story.append(Paragraph(text, styles["H3x"]))
+def bullet(text): story.append(Paragraph("• " + text, styles["Bulletx"]))
+def callout(label, text, color=None):
+    s = ParagraphStyle("temp", parent=styles["Callout"], backColor=color or PALE)
+    story.append(Paragraph(f"<b>{label}</b> {text}", s))
+def qa(q, a):
+    story.append(Paragraph(q, styles["Question"]))
+    story.append(Paragraph(a, styles["Bodyx"]))
+def table(rows, widths, header=True, tiny=False):
+    data = [[Paragraph(str(c), styles["Tinyx" if tiny else "Smallx"]) for c in row] for row in rows]
+    t = Table(data, colWidths=widths, repeatRows=1 if header else 0, hAlign="LEFT")
+    cmds = [("VALIGN", (0,0), (-1,-1), "TOP"), ("GRID", (0,0), (-1,-1), .45, LINE),
+            ("LEFTPADDING", (0,0), (-1,-1), 6), ("RIGHTPADDING", (0,0), (-1,-1), 6),
+            ("TOPPADDING", (0,0), (-1,-1), 5), ("BOTTOMPADDING", (0,0), (-1,-1), 5)]
+    if header:
+        cmds += [("BACKGROUND", (0,0), (-1,0), NAVY), ("TEXTCOLOR", (0,0), (-1,0), colors.white)]
+    for i in range(1 if header else 0, len(rows)):
+        if i % 2 == 0: cmds.append(("BACKGROUND", (0,i), (-1,i), HexColor("#F7F9FC")))
+    t.setStyle(TableStyle(cmds)); story.append(t); story.append(Spacer(1,8))
+
+# Cover
+story += [Spacer(1, 0.7*inch), Paragraph("CIRCUSCIRCUSLIMES", styles["CoverTitle"]),
+          Paragraph("Project Study Guide", styles["CoverSub"]), Spacer(1, 8),
+          HRFlowable(width="72%", thickness=2, color=BLUE, hAlign="CENTER"), Spacer(1, 18)]
+P("A plain-language, printable guide to the DishCourse Flask forum: startup, routing, models, templates, MySQL persistence, direct messages, profile updates, and the request-response mental model.", "CoverSub")
+story += [Spacer(1, 24)]
+callout("CURRENT CODE VS. TARGET DESIGN", "This guide treats the files in the repository as the source of truth for what works now. The supplied target UML is used to explain the intended direction. Any mismatch is labeled explicitly.", GREEN)
+story += [Spacer(1, 18)]
+P("Prepared from the project snapshot on August 21, 2026", "CoverSub")
+P("Best use: read one section, cover the answer, and explain it aloud in your own words.", "CoverSub")
+story.append(PageBreak())
+
+H1("How to use this guide")
+P("Do not try to memorize every line. Learn the path a request takes, the job of each module, and the database relationships. Once that mental map is stable, individual functions become much easier to understand.")
+H2("The two-layer reading method")
+table([
+    ["Layer", "Question to ask", "CircusCircusLimes answer"],
+    ["1. Purpose", "What does this thing do?", "It is a Flask discussion forum branded as DishCourse. People can create accounts, browse subforums, publish posts, comment, react, send direct messages, and manage profile details."],
+    ["2. Parts", "What are the main pieces and how do they connect?", "Flask receives requests; blueprints route them to controller functions; SQLAlchemy reads/writes MySQL; Jinja templates and CSS build the response; Flask-Login tracks the current user."],
+], [0.8*inch, 1.55*inch, 4.15*inch])
+H2("Fast mental model")
+P("Browser → Flask app → matching route/controller → validation and business logic → SQLAlchemy/MySQL → Jinja template or redirect → browser", "Codex")
+callout("ONE-SENTENCE EXPLANATION", "CircusCircusLimes is a server-rendered Flask forum organized into feature blueprints, backed by MySQL through SQLAlchemy, with HTML generated from Jinja templates.")
+H2("Reading map")
+table([
+ ["If you want to understand...", "Start here"],
+ ["How the app boots", "<font name='Courier'>forum/app.py</font>, then <font name='Courier'>forum/__init__.py</font>, then <font name='Courier'>config.py</font>"],
+ ["URLs and actions", "The seven blueprint files plus the <font name='Courier'>/</font> route in <font name='Courier'>forum/app.py</font>"],
+ ["Stored information", "<font name='Courier'>forum/models.py</font>"],
+ ["Validation", "<font name='Courier'>forum/user.py</font> and validators at the bottom of <font name='Courier'>forum/models.py</font>"],
+ ["What users see", "<font name='Courier'>forum/templates/</font> and <font name='Courier'>forum/static/</font>"],
+ ["Containers and MySQL", "<font name='Courier'>compose.yaml</font>, <font name='Courier'>Dockerfile</font>, <font name='Courier'>config.py</font>"],
+], [2.25*inch, 4.25*inch])
+story.append(PageBreak())
+
+H1("1. Startup: how the application comes alive")
+H2("Startup components")
+bullet("<b>Dockerfile</b> builds a Python 3.11 image, installs requirements, copies the project, exposes port 5000, and starts Gunicorn.")
+bullet("<b>compose.yaml</b> starts two services: the web application and MySQL 8.4. It passes database environment variables to the web container.")
+bullet("<b>forum/app.py</b> imports and calls <font name='Courier'>create_app()</font>, creates the Flask-Login manager, defines the home route, and seeds starter subforums if the database is empty.")
+bullet("<b>forum/__init__.py</b> contains the app factory, applies configuration, registers seven blueprints, connects SQLAlchemy, and creates tables.")
+bullet("<b>config.py</b> builds the MySQL connection URL from <font name='Courier'>DB_USER</font>, <font name='Courier'>DB_PASSWORD</font>, <font name='Courier'>DB_HOST</font>, and <font name='Courier'>DB_NAME</font>.")
+H2("Exact startup sequence")
+for i, txt in enumerate([
+ "Gunicorn imports the object named <font name='Courier'>app</font> from <font name='Courier'>forum.app</font>.",
+ "Importing <font name='Courier'>forum/app.py</font> runs <font name='Courier'>app = create_app()</font>.",
+ "<font name='Courier'>create_app()</font> constructs Flask, loads <font name='Courier'>config.Config</font>, and registers the posts, comments, reactions, messages, settings, profile, and routes blueprints.",
+ "<font name='Courier'>db.init_app(app)</font> connects the SQLAlchemy extension to this Flask app.",
+ "Inside an application context, <font name='Courier'>db.create_all()</font> creates any missing tables, then the app object is returned.",
+ "Back in <font name='Courier'>forum/app.py</font>, Flask-Login is attached. <font name='Courier'>load_user()</font> tells Flask-Login how to reload a user by ID.",
+ "A second app context runs table creation again and seeds five initial subforums if none exist.",
+ "Gunicorn listens on <font name='Courier'>0.0.0.0:5000</font> inside the web container; Docker maps the host's <font name='Courier'>APP_PORT</font> to that port.",
+], 1): P(f"<b>{i}.</b> {txt}")
+callout("WATCH OUT", "<font name='Courier'>db.create_all()</font> appears twice. It is normally harmless because it creates missing tables rather than recreating existing ones, but it is redundant. It also is not a migration system: schema changes should eventually use a migration tool.", GOLD)
+qa("How does Flask start?", "In production-style container startup, Gunicorn imports <font name='Courier'>forum.app:app</font>. During that import, Python executes <font name='Courier'>app = create_app()</font>. For local development, the Flask command uses <font name='Courier'>FLASK_APP = 'forum.app'</font> and finds the same app object.")
+qa("How does create_app() execute?", "It executes as a normal Python function call during module import. It builds and returns the configured Flask object.")
+qa("How are blueprints registered?", "Each feature file creates a <font name='Courier'>Blueprint</font> object. <font name='Courier'>create_app()</font> imports those objects and calls <font name='Courier'>app.register_blueprint(...)</font> for each one.")
+story.append(PageBreak())
+
+H1("2. Routing: URL to controller function")
+P("A route connects an HTTP method and URL pattern to a Python function. Flask checks its URL map, selects the matching function, and calls it. In this app, route functions are the controllers: they interpret input, apply business rules, use models, and choose a response.")
+H2("Complete live route inventory")
+routes = [
+ ["Method / URL", "Endpoint function", "Module", "Login?"],
+ ["GET /", "index", "app.py", "No"],
+ ["POST /action_login", "action_login", "routes.py", "No"],
+ ["GET /action_logout", "action_logout", "routes.py", "Intended yes*"],
+ ["POST /action_createaccount", "action_createaccount", "routes.py", "No"],
+ ["GET /subforum?sub=ID", "subforum", "routes.py", "No"],
+ ["GET /loginform", "loginform", "routes.py", "No"],
+ ["GET /about | /contact | /house-rules", "about / contact / house_rules", "routes.py", "No"],
+ ["GET /addpost?sub=ID", "addpost", "posts.py", "Yes"],
+ ["GET /viewpost?post=ID", "viewpost", "posts.py", "No; private posts require login"],
+ ["POST /action_post?sub=ID", "action_post", "posts.py", "Yes"],
+ ["POST /action_comment?post=ID", "comment", "comments.py", "Yes"],
+ ["POST /action_reaction", "react", "reactions.py", "Yes"],
+ ["GET /messages", "inbox", "messages.py", "Yes"],
+ ["GET /messages/&lt;username&gt;", "conversation", "messages.py", "Yes"],
+ ["POST /action_send_message", "send_message", "messages.py", "Yes"],
+ ["GET /settings", "settings_page", "settings.py", "Yes"],
+ ["POST /action_change_password", "change_password", "settings.py", "Yes"],
+ ["GET /profile", "profile_page", "profile.py", "Yes"],
+ ["POST /action_update_username", "update_username", "profile.py", "Yes"],
+ ["POST /action_update_email", "update_email", "profile.py", "Yes"],
+ ["POST /action_update_avatar", "update_avatar", "profile.py", "Yes"],
+ ]
+table(routes, [2.2*inch, 1.65*inch, 1.35*inch, 1.3*inch], tiny=True)
+P("* In <font name='Courier'>routes.py</font>, <font name='Courier'>@login_required</font> is placed above <font name='Courier'>@rt.route</font> for logout. Decorator order matters; the conventional and clearly protected form places <font name='Courier'>@rt.route</font> first and <font name='Courier'>@login_required</font> directly above the function.", "Smallx")
+H2("How HTTP requests are routed")
+P("Example: a browser submits a heart reaction. The form sends <font name='Courier'>POST /action_reaction</font>. Flask's URL map points that request to <font name='Courier'>reactions.react</font>. The controller validates the reaction, queries the post and existing reaction, mutates the database, commits, then returns a redirect to the post page.")
+callout("DIAGRAM CORRECTION", "The supplied target UML shows <font name='Courier'>/action_react?post=&lt;id&gt;</font>. The current code actually uses <font name='Courier'>POST /action_reaction</font> and receives <font name='Courier'>post_id</font> plus <font name='Courier'>reaction_type</font> from form data.", RED)
+
+H1("3. Data model: what is stored and how it connects")
+P("A SQLAlchemy model is a Python class mapped to a database table. A model object represents one row. Columns store values, foreign keys connect rows, and relationships let Python navigate those connections.")
+table([
+ ["Model", "Important fields", "Relationships / behavior"],
+ ["User", "id, username, password_hash, email, admin, avatar_filename", "Has posts, comments, reactions, sent_messages, received_messages. Passwords are hashed; <font name='Courier'>check_password</font> verifies them."],
+ ["Post", "id, title, content, postdate, user_id, subforum_id, is_public", "Belongs to one user and one subforum; has many comments and reactions. Computes a cached relative-time string."],
+ ["Comment", "id, content, postdate, user_id, post_id", "Belongs to one user and one post. Also computes relative time."],
+ ["Subforum", "id, title, description, parent_id, hidden", "Can have child subforums and many posts. <font name='Courier'>parent_id</font> makes the hierarchy self-referential."],
+ ["Reaction", "id, reaction_type, user_id, post_id", "Belongs to one user and one post. A unique constraint permits only one reaction per user/post pair."],
+ ["Message", "id, content, sentdate, is_read, sender_id, recipient_id", "Has two separate relationships to User: sender and recipient. Backrefs expose sent and received messages."],
+], [0.85*inch, 2.35*inch, 3.3*inch], tiny=True)
+H2("Relationship map")
+P("User 1 → many Posts\nUser 1 → many Comments\nUser 1 → many Reactions\nSubforum 1 → many Posts\nPost 1 → many Comments\nPost 1 → many Reactions\nUser 1 → many sent Messages; User 1 → many received Messages", "Codex")
+H2("What SQLAlchemy does here")
+bullet("<font name='Courier'>Model.query.filter(...)</font> builds and executes SELECT queries.")
+bullet("<font name='Courier'>db.session.add(object)</font> stages a new row; appending through a relationship can also associate new objects.")
+bullet("<font name='Courier'>db.session.delete(object)</font> stages deletion.")
+bullet("<font name='Courier'>db.session.commit()</font> completes the transaction and makes changes persistent.")
+bullet("A <font name='Courier'>ForeignKey</font> stores the linked row's ID. A <font name='Courier'>relationship</font>/<font name='Courier'>backref</font> gives convenient Python attribute access.")
+callout("TARGET UML MISMATCHES", "There is no live <font name='Courier'>UserSettings</font> class. Theme and email-notification fields are planned, not implemented. Post <font name='Courier'>format</font> and <font name='Courier'>media_url</font> are also absent. The live Message field is named <font name='Courier'>content</font>, not <font name='Courier'>body</font>. The live Reaction field is <font name='Courier'>reaction_type</font>, not <font name='Courier'>type</font>.", GOLD)
+qa("What are the classes and where are they?", "The six database model classes—User, Post, Subforum, Comment, Reaction, and Message—are all in <font name='Courier'>forum/models.py</font>. Flask itself is a class instantiated in <font name='Courier'>create_app()</font>; each Blueprint is also an object created in its feature module.")
+story.append(PageBreak())
+
+H1("4. User utilities and validation")
+P("Validation answers: “Is this input shaped correctly?” Account checks answer: “Does this value already exist?” These are helper functions because several controllers can reuse them.")
+table([
+ ["Helper", "Rule / result", "Used for"],
+ ["valid_username", "4-40 characters; letters, numbers, ! @ # % &", "Account creation and username update"],
+ ["valid_password", "6-40 characters; same allowed character set", "Password change (account creation currently does not enforce it)"],
+ ["valid_email", "Simple pattern requiring text@text.domain", "Profile email update"],
+ ["username_taken", "Queries User and returns a row or None", "Prevent duplicate usernames"],
+ ["email_taken", "Queries User and returns a row or None", "Prevent duplicate emails"],
+ ["valid_avatar_filename", "Allows png, jpg, jpeg, gif, webp", "Avatar upload"],
+ ["avatar_extension", "Returns lower-case extension", "Build stored avatar filename"],
+ ["valid_title / valid_content", "Title >4 and <140; content >10 and <5000", "New posts"],
+ ["valid_comment", "Trimmed content 1-1000 characters", "New comments"],
+ ["valid_message", "Trimmed content 1-2000 characters", "Direct messages"],
+], [1.4*inch, 2.6*inch, 2.5*inch], tiny=True)
+H2("Password handling")
+P("The application never needs to store the original password. The User constructor calls Werkzeug's <font name='Courier'>generate_password_hash()</font>. Login and password change call <font name='Courier'>check_password_hash()</font>. A successful password change replaces the stored hash and commits.")
+callout("IMPORTANT GAP", "Account creation currently has the <font name='Courier'>valid_password(password)</font> check commented out. A password that would be rejected on the settings page may still be accepted during signup.", RED)
+H2("Avatar safety checks")
+P("The controller cleans the original name with <font name='Courier'>secure_filename</font>, allows only selected extensions, checks that the stream is at most 2 MB, creates a random server-side filename, saves into <font name='Courier'>forum/static/images/avatars/</font>, commits that filename to User, and removes the old avatar file.")
+P("The global <font name='Courier'>MAX_CONTENT_LENGTH</font> is about 2.5 MB, providing an earlier request-size backstop.")
+story.append(PageBreak())
+
+H1("5. Presentation: templates, shared layout, and CSS")
+P("The app uses server-side rendering. A controller calls <font name='Courier'>render_template()</font>, Jinja fills placeholders using Python data, and Flask returns completed HTML to the browser.")
+H2("How templates receive data")
+table([
+ ["Controller call", "Template receives"],
+ ["<font name='Courier'>render_template('subforums.html', subforums=subforums)</font>", "A query result containing top-level subforums"],
+ ["<font name='Courier'>render_template('viewpost.html', post=..., comments=..., like_count=...)</font>", "Post, breadcrumb path, comments, three counts, and the current user's reaction"],
+ ["<font name='Courier'>render_template('conversation.html', other=..., thread_messages=...)</font>", "The conversation partner and ordered message history"],
+], [3.45*inch, 3.05*inch])
+H2("Shared presentation structure")
+bullet("Feature templates use or extend <font name='Courier'>layout.html</font>.")
+bullet("The layout includes <font name='Courier'>header.html</font>, <font name='Courier'>sidebar.html</font>, and <font name='Courier'>right_sidebar.html</font> so common UI is not duplicated.")
+bullet("It loads local <font name='Courier'>bootstrap.min.css</font>, Bootstrap Icons from a CDN, and custom <font name='Courier'>style.css</font>.")
+bullet("It displays ordinary validation errors and flashed success/error messages.")
+bullet("The messages blueprint adds <font name='Courier'>unread_message_count</font> to every template through an app context processor.")
+H2("Template vocabulary")
+table([
+ ["Jinja syntax", "Meaning"],
+ ["<font name='Courier'>{{ value }}</font>", "Print a value into HTML (normally escaped)."],
+ ["<font name='Courier'>{% if ... %}</font>", "Conditionally include markup."],
+ ["<font name='Courier'>{% for ... %}</font>", "Repeat markup for each item."],
+ ["<font name='Courier'>{% include 'header.html' %}</font>", "Insert a shared partial."],
+ ["<font name='Courier'>{% block body %}</font>", "Define the region a child template fills."],
+], [2.25*inch, 4.25*inch])
+callout("PRESENTATION VS. BUSINESS LOGIC", "Templates should mainly display decisions already made. Rules such as “cannot message yourself,” “private posts require login,” and “one reaction per user/post” belong in controllers and models, not in CSS or HTML.")
+story.append(PageBreak())
+
+H1("6. Database and persistence")
+qa("What are the database components?", "MySQL 8.4 is the database server; PyMySQL is the Python driver; SQLAlchemy maps Python models to SQL; Flask-SQLAlchemy connects that mapping to Flask; <font name='Courier'>config.py</font> builds the connection URL; and Docker Compose supplies credentials and persistent storage.")
+qa("Where does persistence occur?", "Application code commits through <font name='Courier'>db.session.commit()</font>. MySQL writes data files under <font name='Courier'>/var/lib/mysql</font> inside the database container, backed by the named Docker volume <font name='Courier'>dishcourse_mysql_data</font>. The volume lets data survive replacement of an individual container.")
+H2("Database environment variables")
+table([
+ ["Application variable", "Compose source", "Meaning"],
+ ["DB_USER", "MYSQL_USER", "MySQL account used by Flask"],
+ ["DB_PASSWORD", "MYSQL_PASSWORD", "That account's password"],
+ ["DB_HOST", "db", "Compose service hostname for MySQL"],
+ ["DB_NAME", "MYSQL_DATABASE", "Database/schema name"],
+ ["APP_PORT", "Host .env / shell", "Host port mapped to container port 5000"],
+ ["DB_PORT", "Host .env / shell", "Optional host-only mapping to MySQL port 3306"],
+], [1.35*inch, 1.55*inch, 3.6*inch])
+H2("How the database is created")
+P("Compose starts MySQL with <font name='Courier'>MYSQL_DATABASE</font>. When the Flask app starts, <font name='Courier'>db.create_all()</font> sends CREATE TABLE statements for missing model tables. If the Subforum table is empty, <font name='Courier'>init_site()</font> inserts the default categories and commits them.")
+callout("CURRENT, NOT OLD README", "The README still contains historical SQLite notes, but the current <font name='Courier'>config.py</font> uses <font name='Courier'>mysql+pymysql</font> and <font name='Courier'>compose.yaml</font> defines MySQL. For the current code, MySQL is the correct answer.", GREEN)
+H2("Transaction pattern")
+P("validate input → create or change model objects → <font name='Courier'>db.session.add()</font> if needed → <font name='Courier'>db.session.commit()</font> → redirect", "Codex")
+story.append(PageBreak())
+
+H1("7. Direct messages: complete feature walkthrough")
+H2("Where is the messages blueprint?")
+P("It is created in <font name='Courier'>forum/messages.py</font> as <font name='Courier'>messages = Blueprint('messages', __name__)</font> and registered in <font name='Courier'>forum/__init__.py</font>.")
+H2("What changed for direct messages?")
+bullet("Registered the new messages blueprint in the app factory.")
+bullet("Added the Message model, its sender/recipient foreign keys and relationships, read status, timestamp, and relative-time method.")
+bullet("Added message-content validation.")
+bullet("Added inbox, conversation, and send-message controller routes.")
+bullet("Added <font name='Courier'>messages_inbox.html</font> and <font name='Courier'>conversation.html</font>.")
+bullet("Added navigation and unread-count UI, plus a “message this author” entry point on post pages.")
+bullet("Added message styling to <font name='Courier'>style.css</font>.")
+H2("Routes")
+table([
+ ["Route", "Purpose"],
+ ["GET /messages", "Query all messages involving the current user, collapse them into one summary per conversation partner, sort by newest, and render the inbox."],
+ ["GET /messages/&lt;username&gt;", "Load the two-way thread, reject nonexistent/self conversations, mark received unread messages as read, and render the conversation."],
+ ["POST /action_send_message", "Validate recipient and content, create Message, attach sender and recipient, commit, and redirect to the conversation."],
+], [2.1*inch, 4.4*inch])
+H2("Request-response flow for sending a DM")
+for i, txt in enumerate([
+ "A logged-in user submits the conversation form with <font name='Courier'>recipient</font> and <font name='Courier'>content</font>.",
+ "Flask matches <font name='Courier'>POST /action_send_message</font> to <font name='Courier'>messages.send_message</font>. The login decorator blocks anonymous access.",
+ "The controller trims values and queries User by username.",
+ "It rejects a missing recipient, a self-message, or content outside 1-2000 characters.",
+ "It creates <font name='Courier'>Message(content, now)</font>, sets <font name='Courier'>sender</font> and <font name='Courier'>recipient</font>, adds it, and commits.",
+ "It redirects to <font name='Courier'>/messages/&lt;username&gt;</font>. The browser follows with a GET.",
+ "The conversation controller reloads the ordered thread and renders <font name='Courier'>conversation.html</font>.",
+], 1): P(f"<b>{i}.</b> {txt}")
+callout("WHY TWO USER FOREIGN KEYS?", "A message points to User twice for different roles. Explicit <font name='Courier'>foreign_keys</font> arguments remove ambiguity and let SQLAlchemy expose <font name='Courier'>message.sender</font> and <font name='Courier'>message.recipient</font>.")
+story.append(PageBreak())
+
+H1("8. Profile and settings: complete feature walkthrough")
+H2("What is the profile blueprint?")
+P("<font name='Courier'>forum/profile.py</font> owns the page and three independent update actions: username, email, and avatar. It is registered in <font name='Courier'>create_app()</font>; every profile route requires login.")
+H2("What changed for profile?")
+bullet("Added <font name='Courier'>avatar_filename</font> to User. The database stores only the generated filename; the image itself lives in the static avatar directory.")
+bullet("Added the profile blueprint and its four routes.")
+bullet("Added email and avatar validation helpers plus a 2 MB avatar limit.")
+bullet("Added <font name='Courier'>profile.html</font>, adjusted the settings page so it focuses on password, and updated header/sidebar links.")
+bullet("Added avatar rendering and profile styles; updated request-size configuration.")
+H2("Profile routes")
+table([
+ ["Route", "Purpose"],
+ ["GET /profile", "Render the current user's editable profile."],
+ ["POST /action_update_username", "Validate format and uniqueness, update User.username, commit, flash result."],
+ ["POST /action_update_email", "Validate format and uniqueness, update User.email, commit, flash result."],
+ ["POST /action_update_avatar", "Validate and save image, update User.avatar_filename, commit, then remove the previous file."],
+], [2.35*inch, 4.15*inch])
+H2("Request-response flow: changing profile data")
+P("The page deliberately uses separate forms. That means the server receives one focused change at a time.")
+P("Browser form → matching POST route → <font name='Courier'>@login_required</font> → read form/file input → validate → update current User (and possibly save file) → commit → flash message → redirect to GET /profile → render updated values", "Codex")
+H2("Profile vs. settings")
+P("Profile owns avatar, username, and email. Settings currently owns only password change. The target UML's separate UserSettings record is future architecture, not current behavior.")
+callout("FILE/DB CONSISTENCY NOTE", "The avatar controller commits the new filename before deleting the old file. This avoids losing the old file before the database update succeeds, though a filesystem failure after commit could leave an unused old file.", GOLD)
+story.append(PageBreak())
+
+H1("9. Core concepts in plain English")
+concepts = [
+ ("Flask", "A lightweight Python web framework. It receives HTTP requests, maps them to Python functions, and returns responses."),
+ ("Server", "A program that listens for requests and sends responses. Here, Gunicorn runs the Flask app; MySQL is a separate database server."),
+ ("Tech stack", "Python 3.11, Flask, Gunicorn, Flask-Login, Flask-SQLAlchemy/SQLAlchemy, PyMySQL, MySQL 8.4, Jinja2, HTML/CSS, Bootstrap, Docker and Docker Compose."),
+ ("Blueprint", "A package of related Flask routes and behavior. It keeps one large application organized by feature."),
+ ("Controller", "The route function that coordinates a request: read input, apply rules, call models, and choose a template or redirect."),
+ ("Business logic", "Rules that make the forum behave correctly—for example validation, privacy checks, reaction toggling, and preventing self-messages. It mostly lives in route functions and reusable validators; the uniqueness constraint is in the model."),
+ ("Decorator", "A wrapper written with <font name='Courier'>@</font> that changes function behavior. <font name='Courier'>@route</font> registers a URL; <font name='Courier'>@login_required</font> blocks anonymous users."),
+ ("API", "A defined way for software parts to communicate. Flask's functions are an API for building web apps; the browser also interacts with URL endpoints."),
+ ("REST API", "An HTTP API organized around resources and standard methods, often returning JSON. This project is mainly a server-rendered web app with action-style form routes, not a strict REST API."),
+ ("rt in rt.route", "<font name='Courier'>rt</font> is the variable holding the blueprint named <font name='Courier'>routes</font>. <font name='Courier'>rt.route(...)</font> registers a function on that blueprint."),
+ ("Module", "A Python file that can be imported. Examples: posts.py, messages.py, models.py, and user.py."),
+ ("Template", "An HTML file with Jinja placeholders and control statements. Flask combines it with data to produce final HTML."),
+ ("Persistence", "Data continues to exist after a request or process ends. MySQL plus its Docker volume provide persistence."),
+ ("Virtual environment", "An isolated set of Python packages for one project, preventing dependency conflicts with other projects."),
+ ("Port", "A numbered network doorway. Port 5000 is where the web process listens inside its container."),
+ ("localhost", "The current computer. <font name='Courier'>http://localhost:5000</font> asks your own machine for an HTTP response on port 5000."),
+ ("Docker", "A tool that packages applications and dependencies into containers. Compose describes how the web and database containers run together."),
+]
+for term, definition in concepts:
+    story.append(KeepTogether([Paragraph(term, styles["H3x"]), Paragraph(definition, styles["Bodyx"])]))
+
+H1("10. Feature flow charts and request-response sequences")
+H2("Login")
+P("POST form → routes.action_login → query User by username → verify hash → login_user(user) → redirect / → render subforums", "Codex")
+H2("Create post")
+P("GET /addpost?sub=ID → login check → render form → POST /action_post?sub=ID → validate title/content → create Post → connect User + Subforum → commit → redirect /viewpost?post=ID", "Codex")
+H2("View a post")
+P("GET /viewpost?post=ID → find Post → enforce private-post rule → load breadcrumb, comments, counts, user's reaction → render viewpost.html", "Codex")
+H2("Comment")
+P("POST /action_comment?post=ID → login check → validate ID and content → create Comment → connect User + Post → commit → redirect to post", "Codex")
+H2("Reaction toggle")
+P("POST /action_reaction → login check → validate type → find Post → find user's existing Reaction → same type: delete | different type: update | none: create → commit → redirect", "Codex")
+H2("Password change")
+P("POST /action_change_password → login check → verify current password → validate and compare new password → hash new password → commit → flash success → redirect settings", "Codex")
+H2("General request-response sequence")
+table([
+ ["Stage", "What happens"],
+ ["1. Request", "The browser sends method, URL, query string, form fields, cookies, and possibly a file."],
+ ["2. Routing", "Flask finds the route whose method and URL pattern match."],
+ ["3. Authentication", "If present, <font name='Courier'>login_required</font> checks session state before the controller proceeds."],
+ ["4. Controller", "The route function parses and validates input and applies business rules."],
+ ["5. Model/database", "SQLAlchemy queries or changes mapped objects; commit makes writes persistent."],
+ ["6. Response", "The controller renders HTML, redirects, or returns an error string."],
+ ["7. Browser", "The browser displays HTML or follows the redirect with another request."],
+], [1.2*inch, 5.3*inch])
+story.append(PageBreak())
+
+H1("11. Current architecture vs. target architecture")
+P("The target diagram is useful as a roadmap, but the current repository has moved partway toward it. Use this page to avoid blending present facts with planned work.")
+table([
+ ["Area", "Current repository", "Target / planned"],
+ ["Blueprints", "7 registered: posts, comments, reactions, messages, settings, profile, routes", "Target labels the legacy routes blueprint as auth.py; the current file is still routes.py and also owns subforum/static-page routes."],
+ ["Database", "MySQL through PyMySQL and SQLAlchemy", "Achieved."],
+ ["Comments", "Many comments per post", "Achieved."],
+ ["Reactions", "Like/dislike/heart with one reaction per user/post", "Achieved, but diagram route/name details differ."],
+ ["Messages", "Direct messages, inbox, threads, read status", "Achieved; model uses content/sentdate naming."],
+ ["Profile", "Avatar, username, email updates", "Achieved."],
+ ["Settings", "Password change only; no UserSettings table", "Theme/email notifications via UserSettings are planned."],
+ ["Visibility", "Post.is_public; private view blocked for guests", "Mostly achieved. Subforum listings should also be reviewed to ensure private titles/content are not exposed."],
+ ["Rich content", "Plain text content; media/markdown fields absent", "Post format and media_url planned."],
+ ["UI", "Shared layout, logo, footer, Bootstrap/custom CSS", "Largely achieved."],
+], [1.05*inch, 2.7*inch, 2.75*inch], tiny=True)
+H2("Important files and their jobs")
+table([
+ ["File/folder", "Job"],
+ ["forum/app.py", "Runtime entry point, login manager, home page, seed data"],
+ ["forum/__init__.py", "Application factory and blueprint/SQLAlchemy registration"],
+ ["config.py", "MySQL URL and Flask configuration"],
+ ["forum/models.py", "Database models and content validators/helpers"],
+ ["forum/user.py", "Account and avatar validators/checks"],
+ ["forum/*.py feature modules", "Controllers grouped by feature"],
+ ["forum/templates/", "Jinja presentation files"],
+ ["forum/static/", "CSS, Bootstrap, logo, uploaded avatars"],
+ ["compose.yaml / Dockerfile", "Container startup and web/database wiring"],
+], [2.2*inch, 4.3*inch])
+story.append(PageBreak())
+
+H1("12. Comprehension check")
+P("Try these without looking back. Then use the answer key on the next page.")
+questions = [
+ "1. What line causes the Flask application factory to execute?",
+ "2. Name all seven registered blueprints.",
+ "3. What is the difference between a foreign key and a relationship?",
+ "4. Which route creates a reaction, and what three reaction values are accepted?",
+ "5. Why does Message need two foreign keys to User?",
+ "6. What makes a database change persistent?",
+ "7. Where do avatar bytes live, and what does the User table store?",
+ "8. Which file supplies shared page layout and which file supplies custom styling?",
+ "9. Explain the complete request path for sending a direct message.",
+ "10. Which target-UML model does not exist in the current code?",
+ "11. Is this project primarily a strict REST API? Why or why not?",
+ "12. What does Docker's named MySQL volume protect against?",
+ "13. What does <font name='Courier'>@login_required</font> do?",
+ "14. Which current signup validation rule is commented out?",
+ "15. Explain <font name='Courier'>http://localhost:5000</font> word by word.",
+]
+for q in questions: P(q)
+P("Notes:")
+for _ in range(9):
+    story.append(HRFlowable(width="100%", thickness=.35, color=LINE, spaceBefore=8, spaceAfter=5))
+story.append(PageBreak())
+
+H1("Answer key")
+answers = [
+ ("1", "<font name='Courier'>app = create_app()</font> in <font name='Courier'>forum/app.py</font>."),
+ ("2", "posts, comments, reactions, messages, settings, profile, and routes."),
+ ("3", "A foreign key is the stored ID that enforces a database link. A relationship gives convenient Python navigation between linked objects."),
+ ("4", "<font name='Courier'>POST /action_reaction</font>; like, dislike, and heart."),
+ ("5", "Each message has two User roles: sender and recipient."),
+ ("6", "A successful <font name='Courier'>db.session.commit()</font> completes the transaction."),
+ ("7", "Bytes live in <font name='Courier'>forum/static/images/avatars/</font>; User stores only <font name='Courier'>avatar_filename</font>."),
+ ("8", "<font name='Courier'>forum/templates/layout.html</font> and <font name='Courier'>forum/static/style.css</font>."),
+ ("9", "Form POST → matching route/login check → recipient/content validation → create and link Message → add/commit → redirect → conversation GET/query/render."),
+ ("10", "UserSettings."),
+ ("11", "No. It is mainly a server-rendered HTML app with action-style form endpoints and redirects, not a resource-oriented JSON API."),
+ ("12", "It keeps MySQL data when the database container itself is replaced or recreated."),
+ ("13", "It requires an authenticated Flask-Login user or redirects to the configured login view."),
+ ("14", "The password-format check in account creation."),
+ ("15", "http = protocol; localhost = this computer; 5000 = the network port; / = the root path."),
+]
+for n, a in answers: P(f"<b>{n}.</b> {a}")
+H2("Teach-back prompts")
+bullet("Draw the request-response sequence from memory and label where authentication, validation, database work, and rendering occur.")
+bullet("Pick one blueprint and explain its routes, input, business rules, models, and output.")
+bullet("Explain one current-vs-target mismatch without looking at the guide.")
+bullet("Describe how one user can own posts, comments, reactions, sent messages, and received messages.")
+story.append(PageBreak())
+
+H1("Source notes and accuracy boundaries")
+P("This guide was built from the live repository files, the supplied comprehension-questions PDF, the supplied updated target-architecture image, and recent project history for the direct-message and profile feature commits.")
+H2("Primary project evidence")
+for item in [
+ "Startup/configuration: <font name='Courier'>forum/app.py</font>, <font name='Courier'>forum/__init__.py</font>, <font name='Courier'>config.py</font>, <font name='Courier'>Dockerfile</font>, <font name='Courier'>compose.yaml</font>, <font name='Courier'>requirements.txt</font>.",
+ "Routing/business logic: <font name='Courier'>forum/routes.py</font>, <font name='Courier'>posts.py</font>, <font name='Courier'>comments.py</font>, <font name='Courier'>reactions.py</font>, <font name='Courier'>messages.py</font>, <font name='Courier'>settings.py</font>, and <font name='Courier'>profile.py</font>.",
+ "Models/helpers: <font name='Courier'>forum/models.py</font> and <font name='Courier'>forum/user.py</font>.",
+ "Presentation: <font name='Courier'>forum/templates/</font> and <font name='Courier'>forum/static/</font>.",
+ "Feature history: commits <font name='Courier'>750b831</font> (direct messages), <font name='Courier'>762aaf1</font> (settings), and <font name='Courier'>1db9ff1</font> (profile).",
+]: bullet(item)
+callout("BOUNDARY", "“Current” means visible in this repository snapshot, not necessarily fully tested in a running environment. “Target” means shown or implied in the updated architecture diagram/README feature list. Where names or behavior disagree, the current code is described first.", GOLD)
+H2("Five facts worth memorizing")
+for fact in [
+ "The app factory is <font name='Courier'>create_app()</font> in <font name='Courier'>forum/__init__.py</font>.",
+ "Routes are controllers grouped into seven blueprints, plus the root route in <font name='Courier'>app.py</font>.",
+ "Six current SQLAlchemy models live in <font name='Courier'>models.py</font>; UserSettings is planned only.",
+ "MySQL persistence happens through SQLAlchemy commits and the Docker named volume.",
+ "A request usually ends by rendering a Jinja template or redirecting the browser to another GET.",
+]: bullet(fact)
+
+def footer(canvas, doc):
+    canvas.saveState()
+    w, h = letter
+    canvas.setStrokeColor(LINE); canvas.setLineWidth(.4)
+    canvas.line(0.72*inch, 0.55*inch, w-0.72*inch, 0.55*inch)
+    canvas.setFont("Helvetica", 8); canvas.setFillColor(GRAY)
+    canvas.drawString(0.72*inch, 0.35*inch, "CircusCircusLimes Project Study Guide")
+    canvas.drawRightString(w-0.72*inch, 0.35*inch, f"Page {doc.page}")
+    canvas.restoreState()
+
+doc = SimpleDocTemplate(str(OUT), pagesize=letter, rightMargin=.72*inch, leftMargin=.72*inch,
+                        topMargin=.68*inch, bottomMargin=.7*inch,
+                        title="CircusCircusLimes Project Study Guide",
+                        author="Prepared for the CircusCircusLimes project")
+doc.build(story, onFirstPage=footer, onLaterPages=footer)
+print(OUT)