migrating repo from old host server

2026-08-22 18:58:55 -04:00
commit 4968d7f575
153 changed files with 20009 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+.env
+*.log
+.DS_Store
+dist/
+build/
+.vite/
+src/secrets.js
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,41 @@
+# Koin Ping Frontend
+
+React + Vite frontend for the on-chain monitoring and alerting system.
+
+## Getting Started
+
+1. Install dependencies:
+
+    ```bash
+    npm install
+    ```
+
+2. Run the development server:
+
+    ```bash
+    npm run dev
+    ```
+
+3. Build for production:
+
+    ```bash
+    npm run build
+    ```
+
+4. Preview production build:
+    ```bash
+    npm run preview
+    ```
+
+## Project Structure
+
+- `src/api/` - API calls to backend
+- `src/components/` - Reusable UI components
+- `src/pages/` - Top-level page components
+- `src/utils/` - Utility functions
+- `public/` - Static assets
+
+## Development
+
+The frontend runs on port 3000 and proxies API requests to the backend running
+on port 5000.
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Koin Ping - On-Chain Monitoring</title>
+  <script data-goatcounter="https://koinping.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,36 @@
+{
+    "name": "frontend",
+    "version": "1.0.0",
+    "description": "koin_ping blockchain monitor UI",
+    "main": "index.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "test": "vite build",
+        "lint": "prettier --check 'src/**/*.{js,jsx,ts,tsx,css}'",
+        "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css}'"
+    },
+    "keywords": [
+        "cryptocurrency",
+        "blockchain",
+        "blockchain event monitoring"
+    ],
+    "author": "Steven Jannette",
+    "license": "MIT",
+    "type": "module",
+    "dependencies": {
+        "firebase": "^12.7.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-router-dom": "^7.12.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.2.7",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.2",
+        "prettier": "^3.8.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.2"
+    }
+}
--- a/frontend/prettierrc
+++ b/frontend/prettierrc
@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "proseWrap": "always"
+}
--- a/frontend/public/koin_exp_2.mp4
+++ b/frontend/public/koin_exp_2.mp4
--- a/frontend/public/koin_spin.mp4
+++ b/frontend/public/koin_spin.mp4
--- a/frontend/public/ping.png
+++ b/frontend/public/ping.png
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,72 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useAuth } from "./contexts/AuthContext";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
+import Login from "./pages/login/Login";
+import Signup from "./pages/Signup";
+import Subscribe from "./pages/subscribe/Subscribe";
+import CheckoutReturn from "./pages/subscribe/CheckoutReturn";
+import Addresses from "./pages/addresses/Addresses";
+import Alerts from "./pages/alerts/Alerts";
+import AlertHistory from "./pages/alertHistory/AlertHistory";
+import Account from "./pages/user_account/Account";
+import Terms from "./pages/terms/Terms";
+import Privacy from "./pages/privacy/Privacy";
+import Support from "./pages/support/Support";
+
+export default function App() {
+  const { currentUser, isSubscribed } = useAuth();
+
+  if (!currentUser) {
+    return (
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/subscribe" element={<Subscribe />} />
+        <Route path="/subscribe/return/:sessionId" element={<CheckoutReturn />} />
+        <Route path="*" element={<Navigate to="/login" />} />
+      </Routes>
+    );
+  }
+
+  if (!isSubscribed) {
+    return (
+      <div className="app-layout">
+        <div className="app-layout__main">
+          <Routes>
+            <Route path="/subscribe" element={<Subscribe />} />
+            <Route path="/subscribe/return/:sessionId" element={<CheckoutReturn />} />
+            <Route path="/account" element={<><Navbar /><Account /></>} />
+            <Route path="/terms" element={<><Navbar /><Terms /></>} />
+            <Route path="/privacy" element={<><Navbar /><Privacy /></>} />
+            <Route path="/support" element={<><Navbar /><Support /></>} />
+            <Route path="*" element={<Navigate to="/subscribe" />} />
+          </Routes>
+        </div>
+        <Footer />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-layout">
+      <Navbar />
+      <div className="app-layout__main">
+        <Routes>
+          <Route path="/" element={<Addresses />} />
+          <Route path="/addresses" element={<Addresses />} />
+          <Route path="/alerts" element={<Alerts />} />
+          <Route path="/alertevents" element={<AlertHistory />} />
+          <Route path="/account" element={<Account />} />
+          <Route path="/subscribe" element={<Subscribe />} />
+          <Route path="/subscribe/return/:sessionId" element={<CheckoutReturn />} />
+          <Route path="/terms" element={<Terms />} />
+          <Route path="/privacy" element={<Privacy />} />
+          <Route path="/support" element={<Support />} />
+          <Route path="*" element={<Navigate to="/addresses" />} />
+        </Routes>
+      </div>
+      <Footer />
+    </div>
+  );
+}
--- a/frontend/src/api/account.js
+++ b/frontend/src/api/account.js
@@ -0,0 +1,25 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function getAccount() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/user/account`, { headers });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to load account");
+    }
+    return res.json();
+}
+
+export async function createPortalSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-portal-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create portal session");
+    }
+    return res.json();
+}
--- a/frontend/src/api/addresses.jsx
+++ b/frontend/src/api/addresses.jsx
@@ -0,0 +1,152 @@
+// API client for address management
+
+import { getAuthHeaders, getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
+
+/**
+ * Create a new blockchain address to monitor
+ * @param {Object} data - Address data
+ * @param {string} data.address - Blockchain address (0x...)
+ * @param {string} [data.label] - Optional label for the address
+ * @returns {Promise<Object>} Created address with id and metadata
+ */
+export async function createAddress(data) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/addresses`, {
+            method: "POST",
+            headers: headers,
+            body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to create address";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        // Handle network errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Get all tracked addresses
+ * @returns {Promise<Array>} List of all addresses
+ */
+export async function getAddresses() {
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/addresses`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to fetch addresses";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        // Handle network errors or JSON parse errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Update an address (e.g. change its label)
+ * @param {number} addressId - Address ID to update
+ * @param {Object} data - Fields to update (e.g. { label: "New Label" })
+ * @returns {Promise<Object>} Updated address
+ */
+export async function updateAddress(addressId, data) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/addresses/${addressId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify(data),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update address";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error("Cannot connect to server. Is the backend running?");
+        }
+        throw error;
+    }
+}
+
+/**
+ * Delete a tracked address
+ * @param {number} addressId - Address ID to delete
+ * @returns {Promise<void>}
+ */
+export async function deleteAddress(addressId) {
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/addresses/${addressId}`, {
+            method: "DELETE",
+            headers: headers,
+        });
+
+        if (!response.ok && response.status !== 204) {
+            // Try to parse error response, but handle if it's not JSON
+            let errorMessage = "Failed to delete address";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                // If JSON parse fails, use status text
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        // Handle network errors
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
--- a/frontend/src/api/alertEvents.jsx
+++ b/frontend/src/api/alertEvents.jsx
@@ -0,0 +1,37 @@
+// API client for alert event history
+
+import { getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
+
+/**
+ * Get all alert events (history)
+ * @returns {Promise<Array>} List of alert events, sorted by most recent first
+ */
+export async function getAlertEvents() {
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/alert-events`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch alert events";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
--- a/frontend/src/api/alerts.jsx
+++ b/frontend/src/api/alerts.jsx
@@ -0,0 +1,205 @@
+// API client for alert rule management
+
+import { getAuthHeaders, getAuthHeadersSimple } from "./authHeaders";
+import { API_BASE } from "./config";
+
+/**
+ * Alert types supported by the system
+ */
+export const ALERT_TYPES = {
+    INCOMING_TX: "incoming_tx",
+    OUTGOING_TX: "outgoing_tx",
+    LARGE_TRANSFER: "large_transfer",
+    BALANCE_BELOW: "balance_below",
+};
+
+/**
+ * Create a new alert rule for an address
+ * @param {number} addressId - Address ID
+ * @param {Object} data - Alert rule data
+ * @param {string} data.type - Alert type (one of ALERT_TYPES)
+ * @param {string} [data.threshold] - Threshold value (required for large_transfer and balance_below)
+ * @returns {Promise<Object>} Created alert rule
+ */
+export async function createAlert(addressId, data) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(
+            `${API_BASE}/addresses/${addressId}/alerts`,
+            {
+                method: "POST",
+                headers: headers,
+                body: JSON.stringify(data),
+            },
+        );
+
+        if (!response.ok) {
+            let errorMessage = "Failed to create alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Get all alert rules for an address
+ * @param {number} addressId - Address ID
+ * @returns {Promise<Array>} List of alert rules
+ */
+export async function getAlerts(addressId) {
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(
+            `${API_BASE}/addresses/${addressId}/alerts`,
+            {
+                headers: headers,
+            },
+        );
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch alert rules";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Enable or disable an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @param {boolean} enabled - Whether the alert should be enabled
+ * @returns {Promise<Object>} Updated alert rule
+ */
+export async function updateAlertStatus(alertId, enabled) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify({ enabled }),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Update the min/max thresholds on an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @param {number|null} minimum - Minimum amount (null to clear)
+ * @param {number|null} maximum - Maximum amount (null to clear)
+ * @returns {Promise<Object>} Updated alert rule
+ */
+export async function updateAlertThresholds(alertId, minimum, maximum) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify({
+                update_min_max: true,
+                minimum: minimum ?? null,
+                maximum: maximum ?? null,
+            }),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update alert thresholds";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Delete an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @returns {Promise<void>}
+ */
+export async function deleteAlert(alertId) {
+    try {
+        const headers = await getAuthHeadersSimple();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "DELETE",
+            headers: headers,
+        });
+
+        if (!response.ok && response.status !== 204) {
+            let errorMessage = "Failed to delete alert rule";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
--- a/frontend/src/api/authHeaders.js
+++ b/frontend/src/api/authHeaders.js
@@ -0,0 +1,46 @@
+/**
+ * Auth Headers Helper
+ *
+ * Provides authentication headers for API calls
+ * Includes Firebase ID token in Authorization header
+ */
+
+import { auth } from "../firebase/config";
+
+/**
+ * Get headers with authentication token
+ * @returns {Promise<Object>} Headers object with Authorization
+ */
+export async function getAuthHeaders() {
+    const currentUser = auth.currentUser;
+
+    if (!currentUser) {
+        throw new Error("No authenticated user");
+    }
+
+    // Get Firebase ID token
+    const token = await currentUser.getIdToken();
+
+    return {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+    };
+}
+
+/**
+ * Get headers for non-JSON requests (e.g., DELETE with no body)
+ * @returns {Promise<Object>} Headers object with Authorization
+ */
+export async function getAuthHeadersSimple() {
+    const currentUser = auth.currentUser;
+
+    if (!currentUser) {
+        throw new Error("No authenticated user");
+    }
+
+    const token = await currentUser.getIdToken();
+
+    return {
+        Authorization: `Bearer ${token}`,
+    };
+}
--- a/frontend/src/api/config.js
+++ b/frontend/src/api/config.js
@@ -0,0 +1,20 @@
+const DEFAULT_API_BASE = "/v1";
+
+/**
+ * API origin for fetch(): root-relative prefix (e.g. /v1) or absolute URL (https://host/v1).
+ * Root-relative values are forced to start with "/" so requests work from any SPA route
+ * (e.g. /support); otherwise "v1/support" would resolve under the current path and 404.
+ */
+function normalizeApiBase(raw) {
+  const s = String(raw ?? "").trim();
+  const base = s || DEFAULT_API_BASE;
+
+  if (/^https?:\/\//i.test(base)) {
+    return base.replace(/\/+$/, "") || DEFAULT_API_BASE;
+  }
+
+  const path = base.startsWith("/") ? base : `/${base}`;
+  return path.replace(/\/+$/, "") || DEFAULT_API_BASE;
+}
+
+export const API_BASE = normalizeApiBase(import.meta.env.VITE_API_BASE);
--- a/frontend/src/api/notificationConfig.jsx
+++ b/frontend/src/api/notificationConfig.jsx
@@ -0,0 +1,183 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+/**
+ * Get notification configuration for current user
+ * @returns {Promise<Object>} Notification config
+ */
+export async function getNotificationConfig() {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/notification-config`, {
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to fetch notification config";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Update notification configuration
+ * @param {Object} config
+ * @param {string} [config.discord_webhook_url]
+ * @param {string} [config.telegram_chat_id]
+ * @param {string} [config.telegram_bot_token]
+ * @param {string} [config.email]
+ * @param {string} [config.slack_webhook_url]
+ * @param {boolean} [config.notification_enabled]
+ * @returns {Promise<Object>} Updated config
+ */
+export async function updateNotificationConfig(config) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/notification-config`, {
+            method: "PUT",
+            headers: headers,
+            body: JSON.stringify(config),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update notification config";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Set up email notifications via Resend.
+ * Reads the user's saved email from their config and sends a confirmation.
+ * @returns {Promise<Object>} Setup result
+ */
+export async function setupEmail() {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/email/setup`, {
+            method: "POST",
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to set up email";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Send an alert digest email to the user's configured email address.
+ * @returns {Promise<Object>} Digest send result
+ */
+export async function sendEmailDigest() {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/email/digest`, {
+            method: "POST",
+            headers: headers,
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to send digest";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
+/**
+ * Test all configured notification channels via the backend
+ * @returns {Promise<Object>} Results per channel
+ */
+export async function testNotificationChannels() {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(
+            `${API_BASE}/notification-config/test`,
+            {
+                method: "POST",
+                headers: headers,
+            },
+        );
+
+        if (!response.ok) {
+            let errorMessage = "Failed to test notification channels";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
--- a/frontend/src/api/status.jsx
+++ b/frontend/src/api/status.jsx
@@ -0,0 +1,18 @@
+// API client for system status
+
+import { API_BASE } from "./config";
+
+/**
+ * Get system status including latest processed block and health
+ * @returns {Promise<Object>} System status
+ */
+export async function getSystemStatus() {
+    const response = await fetch(`${API_BASE}/status`);
+
+    if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.message || "Failed to fetch system status");
+    }
+
+    return response.json();
+}
--- a/frontend/src/api/stripe.jsx
+++ b/frontend/src/api/stripe.jsx
@@ -0,0 +1,68 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function createCheckoutSession(tier = "premium", interval = "annual") {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-checkout-session`, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({ tier, interval }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
+export async function createOnboardingCheckout(email, tier = "premium") {
+    const res = await fetch(`${API_BASE}/stripe/create-onboarding-checkout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, tier }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
+export async function activateFreeTier() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/activate-free`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to activate free tier");
+    }
+    return res.json();
+}
+
+export async function verifyCheckoutSession(sessionId) {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/verify-checkout`, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({ session_id: sessionId }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to verify checkout session");
+    }
+    return res.json();
+}
+
+export async function getSubscriptionStatus() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/subscription-status`, {
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to get subscription status");
+    }
+    return res.json();
+}
--- a/frontend/src/api/support.js
+++ b/frontend/src/api/support.js
@@ -0,0 +1,23 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function submitSupportRequest({ email, description }) {
+  const headers = await getAuthHeaders();
+  const res = await fetch(`${API_BASE}/support`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({ email, description }),
+  });
+  if (!res.ok) {
+    let message = "Failed to send support request";
+    try {
+      const data = await res.json();
+      if (data.message) message = data.message;
+      else if (data.error && res.status) message = `${data.error} (${res.status})`;
+    } catch {
+      message = `Something went wrong (HTTP ${res.status}). Please try again.`;
+    }
+    throw new Error(message);
+  }
+  return res.json();
+}
--- a/frontend/src/components/AddressForm.jsx
+++ b/frontend/src/components/AddressForm.jsx
@@ -0,0 +1,45 @@
+import { useState } from "react";
+import Input from "./Input";
+import Button from "./Button";
+
+export default function AddressForm({ onSubmit }) {
+    const [address, setAddress] = useState("");
+    const [label, setLabel] = useState("");
+
+    const canSubmit = address.trim().length > 0;
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!canSubmit) return;
+
+        onSubmit({
+            address: address.trim(),
+            label: label.trim(),
+        });
+
+        setAddress("");
+        setLabel("");
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <Input
+                label="Blockchain Address"
+                value={address}
+                onChange={setAddress}
+                placeholder="0x..."
+            />
+
+            <Input
+                label="Label (optional)"
+                value={label}
+                onChange={setLabel}
+                placeholder="Treasury, Cold Wallet, etc."
+            />
+
+            <Button type="submit" disabled={!canSubmit} className="mt-md">
+                Add Address
+            </Button>
+        </form>
+    );
+}
--- a/frontend/src/components/AlertForm.css
+++ b/frontend/src/components/AlertForm.css
@@ -0,0 +1,7 @@
+.alert-form__options {
+  margin-bottom: 1rem;
+}
+
+.alert-form__radio {
+  display: block;
+}
--- a/frontend/src/components/AlertForm.jsx
+++ b/frontend/src/components/AlertForm.jsx
@@ -0,0 +1,72 @@
+import { useState } from "react";
+import Input from "./Input";
+import Button from "./Button";
+import "./AlertForm.css";
+
+const ALERT_TYPES = [
+    { value: "incoming_tx", label: "Incoming transaction" },
+    { value: "outgoing_tx", label: "Outgoing transaction" },
+    { value: "large_transfer", label: "Large transfer" },
+    { value: "balance_below", label: "Balance below threshold" },
+];
+
+export default function AlertForm({ onSubmit }) {
+    const [type, setType] = useState("incoming_tx");
+    const [threshold, setThreshold] = useState("");
+
+    const needsThreshold =
+        type === "large_transfer" || type === "balance_below";
+
+    const canSubmit = needsThreshold
+        ? threshold.trim() !== "" &&
+          !isNaN(Number(threshold)) &&
+          Number(threshold) > 0
+        : true;
+
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!canSubmit) return;
+
+        onSubmit({
+            type,
+            threshold: needsThreshold ? Number(threshold) : undefined,
+        });
+
+        setThreshold("");
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="alert-form__options">
+                {ALERT_TYPES.map((opt) => (
+                    <label key={opt.value} className="alert-form__radio">
+                        <input
+                            type="radio"
+                            name="alertType"
+                            value={opt.value}
+                            checked={type === opt.value}
+                            onChange={() => setType(opt.value)}
+                        />{" "}
+                        {opt.label}
+                    </label>
+                ))}
+            </div>
+
+            {needsThreshold && (
+                <Input
+                    label="Amount (ETH)"
+                    type="number"
+                    step="0.000001"
+                    min="0"
+                    value={threshold}
+                    onChange={setThreshold}
+                    placeholder="e.g. 10"
+                />
+            )}
+
+            <Button type="submit" disabled={!canSubmit}>
+                Create Alert
+            </Button>
+        </form>
+    );
+}
--- a/frontend/src/components/Button.css
+++ b/frontend/src/components/Button.css
@@ -0,0 +1,14 @@
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text);
+  transition: opacity 0.15s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -0,0 +1,21 @@
+import "./Button.css";
+
+export default function Button({
+    children,
+    onClick,
+    disabled = false,
+    type = "button",
+    variant = "primary",
+    className = "",
+}) {
+    return (
+        <button
+            type={type}
+            onClick={onClick}
+            disabled={disabled}
+            className={`btn btn--${variant} ${className}`}
+        >
+            {children}
+        </button>
+    );
+}
--- a/frontend/src/components/Footer.css
+++ b/frontend/src/components/Footer.css
@@ -0,0 +1,36 @@
+.footer {
+  flex-shrink: 0;
+  margin-top: auto;
+  padding: 0.75rem 1rem;
+  background-color: var(--color-bg);
+  border-top: 1px solid var(--color-border-light);
+}
+
+.footer__inner {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: var(--color-text-dimmed);
+}
+
+.footer__copyright {
+  color: var(--color-text-dimmed);
+}
+
+.footer__link {
+  font-size: 1.265em;
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.footer__link:hover {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+import "./Footer.css";
+
+export default function Footer() {
+  const { currentUser } = useAuth();
+
+  if (!currentUser) return null;
+
+  return (
+    <footer className="footer">
+      <div className="footer__inner">
+        <span className="footer__copyright">© 2026 sjDev.co</span>
+        <Link
+          to="/terms"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="footer__link"
+        >
+          Terms
+        </Link>
+        <Link
+          to="/privacy"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="footer__link"
+        >
+          Privacy
+        </Link>
+        <Link
+          to="/support"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="footer__link"
+        >
+          Contact Support
+        </Link>
+      </div>
+    </footer>
+  );
+}
--- a/frontend/src/components/Input.css
+++ b/frontend/src/components/Input.css
@@ -0,0 +1,21 @@
+.input__label {
+  display: block;
+  margin: 0.8rem 0rem 0.4rem 0rem;
+  font-size: 0.9rem;
+}
+
+.input__control {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.input__control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
--- a/frontend/src/components/Input.jsx
+++ b/frontend/src/components/Input.jsx
@@ -0,0 +1,31 @@
+import "./Input.css";
+
+export default function Input({
+    label,
+    type = "text",
+    value,
+    onChange,
+    placeholder,
+    step,
+    min,
+    disabled = false,
+    required = false,
+    className = "",
+}) {
+    return (
+        <label className={`form-field ${className}`}>
+            <div className="input__label">{label}</div>
+            <input
+                type={type}
+                value={value}
+                placeholder={placeholder}
+                step={step}
+                min={min}
+                disabled={disabled}
+                required={required}
+                onChange={(e) => onChange(e.target.value)}
+                className="input__control"
+            />
+        </label>
+    );
+}
--- a/frontend/src/components/Navbar.css
+++ b/frontend/src/components/Navbar.css
@@ -0,0 +1,167 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  margin-bottom: 1.5rem;
+  background-color: var(--color-bg);
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+/* ── Left Group: Brand + Links ───────────────────────────── */
+
+.navbar__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbar__brand-group {
+  display: flex;
+  align-items: center;
+}
+
+.navbar__brand {
+  font-weight: 700;
+  font-size: 1.4rem;
+  color: var(--color-brand);
+  margin-right: 2rem;
+  letter-spacing: 0.5px;
+}
+
+.navbar__links {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.navbar__link {
+  padding: 0.5rem 1.25rem;
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  font-size: 1.425rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  background-color: transparent;
+  transition: all 0.15s ease;
+}
+
+.navbar__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+}
+
+/* ── Right Group: Email + Logout + Hamburger ─────────────── */
+
+.navbar__right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.navbar__user {
+  font-size: 1.275rem;
+  color: #777;
+}
+
+.navbar__user-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.navbar__user-link:hover {
+  color: var(--color-primary-hover);
+}
+
+.navbar__user-link--mobile {
+  display: none;
+}
+
+.navbar__logout {
+  padding: 0.4rem 1rem;
+  font-size: 1.275rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+/* ── Hamburger Icon (hidden on desktop) ──────────────────── */
+
+.navbar__hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.navbar__hamburger-bar {
+  display: block;
+  width: 28px;
+  height: 3px;
+  background-color: var(--color-brand);
+  border-radius: 2px;
+}
+
+/* ── Responsive: Tablet & below (≤ 768px) ────────────────── */
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar__brand-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .navbar__brand {
+    margin-right: 0;
+    font-size: 1.25rem;
+  }
+
+  .navbar__links {
+    display: none;
+  }
+
+  .navbar__user-link--mobile {
+    display: block;
+    font-size: 0.95rem;
+  }
+
+  .navbar__user-link--desktop {
+    display: none;
+  }
+
+  .navbar__logout {
+    display: none;
+  }
+
+  .navbar__hamburger {
+    display: flex;
+  }
+}
+
+/* ── Responsive: Mobile (≤ 480px) ────────────────────────── */
+
+@media (max-width: 480px) {
+  .navbar {
+    padding: 0.75rem;
+  }
+
+  .navbar__brand {
+    font-size: 1.15rem;
+  }
+
+  .navbar__user-link--mobile {
+    font-size: 0.85rem;
+  }
+}
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../contexts/AuthContext";
+import NavPanel from "./navPanel/NavPanel";
+import "./Navbar.css";
+
+const navLinks = [
+  { to: "/addresses", label: "Addresses" },
+  { to: "/alerts", label: "Configure Alerts" },
+  { to: "/alertevents", label: "Alert Event History" },
+];
+
+export default function Navbar() {
+  const { currentUser, logout } = useAuth();
+  const authData = useAuth();
+  const location = useLocation();
+  const [isNavPanelOpen, setIsNavPanelOpen] = useState(false);
+
+  if (!currentUser) return null;
+  console.log(authData)
+
+  return (
+    <>
+      <nav className="navbar">
+        <div className="navbar__left">
+          <div className="navbar__brand-group">
+            <span className="navbar__brand">Koin Ping</span>
+            <Link to="/account" className="navbar__user-link navbar__user-link--mobile">
+              {currentUser.email}
+            </Link>
+          </div>
+          <div className="navbar__links">
+            {navLinks.map(({ to, label }) => {
+              const isActive = location.pathname === to;
+              return (
+                <Link
+                  key={to}
+                  to={to}
+                  className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="navbar__right">
+          <Link to="/account" className="navbar__user navbar__user-link navbar__user-link--desktop">
+            {currentUser.email}
+          </Link>
+          <button onClick={logout} className="navbar__logout">
+            Logout
+          </button>
+          <button
+            className="navbar__hamburger"
+            onClick={() => setIsNavPanelOpen(true)}
+            aria-label="Open navigation menu"
+          >
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+          </button>
+        </div>
+      </nav>
+
+      <NavPanel
+        isOpen={isNavPanelOpen}
+        onClose={() => setIsNavPanelOpen(false)}
+      />
+    </>
+  );
+}
--- a/frontend/src/components/TierPicker.css
+++ b/frontend/src/components/TierPicker.css
@@ -0,0 +1,161 @@
+.tier-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.tier-picker__toggle {
+  display: flex;
+  justify-content: center;
+  gap: 0;
+}
+
+.tier-picker__toggle-btn {
+  padding: 0.75rem 1.5rem;
+  border: 1px solid var(--color-border);
+  background: transparent;
+  color: var(--color-text-dimmed);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.tier-picker__toggle-btn:first-child {
+  border-radius: 8px 0 0 8px;
+}
+
+.tier-picker__toggle-btn:last-child {
+  border-radius: 0 8px 8px 0;
+  border-left: none;
+}
+
+.tier-picker__toggle-btn--active {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.tier-picker__toggle-btn:last-child.tier-picker__toggle-btn--active {
+  border-left: 1px solid var(--color-primary);
+}
+
+.tier-picker__cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.tier-picker__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.25rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  text-align: center;
+}
+
+.tier-picker__card--highlighted {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+.tier-picker__card--selected {
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 1px var(--color-success);
+}
+
+.tier-picker__badge {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--color-primary);
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 2px 12px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.tier-picker__name {
+  margin-bottom: 0.5rem;
+  font-size: 1.05rem;
+  color: var(--color-text);
+}
+
+.tier-picker__price {
+  margin-bottom: 1.25rem;
+}
+
+.tier-picker__amount {
+  font-size: 2rem;
+  font-weight: 700;
+  color: white;
+}
+
+.tier-picker__period {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+}
+
+.tier-picker__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  text-align: left;
+  flex-grow: 1;
+}
+
+.tier-picker__feature {
+  padding: 0.3rem 0;
+  font-size: 0.82rem;
+  color: var(--color-text-label);
+}
+
+.tier-picker__feature--disabled {
+  color: var(--color-text-dimmed);
+  opacity: 0.55;
+}
+
+.tier-picker__check {
+  color: var(--color-primary);
+  font-weight: bold;
+  margin-right: 0.4rem;
+}
+
+.tier-picker__dash {
+  margin-right: 0.4rem;
+}
+
+.tier-picker__btn {
+  width: 100%;
+  padding: 0.6rem;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+}
+
+.tier-picker__btn:hover {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.tier-picker__btn--selected {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .tier-picker__cards {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+}
--- a/frontend/src/components/TierPicker.jsx
+++ b/frontend/src/components/TierPicker.jsx
@@ -0,0 +1,113 @@
+import { useState } from "react";
+import "./TierPicker.css";
+
+const TIERS = [
+  {
+    id: "free",
+    name: "Trial Monitoring",
+    price: { monthly: "$0", annual: "$0" },
+    period: { monthly: "", annual: "" },
+    features: [
+      "Monitor 1 blockchain address 24/7",
+      "Configure alerts to fire on trigger events",
+      "1 transaction alert type per trigger (email digest)",
+    ],
+    disabledFeatures: [],
+  },
+  {
+    id: "premium",
+    name: "Premium Monitoring",
+    price: { monthly: "$8.78", annual: "$94.78" },
+    period: { monthly: "/month", annual: "/year" },
+    features: [
+      "Monitor 3 blockchain addresses",
+      "Configure two types of rule-based alerts to fire on trigger events for each of the three addresses",
+      "Daily email digest alert",
+      "Real-time Discord alerts",
+      "Real-time Telegram alerts",
+    ],
+    disabledFeatures: [],
+    highlighted: true,
+  },
+  {
+    id: "pro",
+    name: "Professional Monitoring",
+    price: { monthly: "$16.78", annual: "$181.78" },
+    period: { monthly: "/month", annual: "/year" },
+    features: [
+      "Monitor unlimited blockchain addresses",
+      "Configure unlimited alert rules to fire on unlimited events on any address",
+      "Daily email digest alert",
+      "Real-time Discord alerts",
+      "Real-time Telegram alerts",
+      "Real-time Slack alerts configurable for multiple Slack groups or channels",
+      "Unlimited transaction alert types per monitored address",
+    ],
+    disabledFeatures: [],
+  },
+];
+
+export default function TierPicker({ onSelect, selectedTier }) {
+  const [isAnnual, setIsAnnual] = useState(true);
+
+  return (
+    <div className="tier-picker">
+      <div className="tier-picker__toggle">
+        <button
+          className={`tier-picker__toggle-btn${!isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
+          onClick={() => setIsAnnual(false)}
+        >
+          Monthly
+        </button>
+        <button
+          className={`tier-picker__toggle-btn${isAnnual ? " tier-picker__toggle-btn--active" : ""}`}
+          onClick={() => setIsAnnual(true)}
+        >
+          Annual
+        </button>
+      </div>
+
+      <div className="tier-picker__cards">
+        {TIERS.map((tier) => (
+          <div
+            key={tier.id}
+            className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
+          >
+            {tier.highlighted && (
+              <div className="tier-picker__badge">Most Popular</div>
+            )}
+            <h3 className="tier-picker__name">{tier.name}</h3>
+            <div className="tier-picker__price">
+              <span className="tier-picker__amount">
+                {isAnnual ? tier.price.annual : tier.price.monthly}
+              </span>
+              {(isAnnual ? tier.period.annual : tier.period.monthly) && (
+                <span className="tier-picker__period">
+                  {isAnnual ? tier.period.annual : tier.period.monthly}
+                </span>
+              )}
+            </div>
+            <ul className="tier-picker__features">
+              {tier.features.map((f) => (
+                <li key={f} className="tier-picker__feature">
+                  <span className="tier-picker__check">&#10003;</span> {f}
+                </li>
+              ))}
+              {tier.disabledFeatures.map((f) => (
+                <li key={f} className="tier-picker__feature tier-picker__feature--disabled">
+                  <span className="tier-picker__dash">&mdash;</span> {f}
+                </li>
+              ))}
+            </ul>
+            <button
+              className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
+              onClick={() => onSelect(tier.id, isAnnual ? "annual" : "monthly")}
+            >
+              {selectedTier === tier.id ? "Selected" : "Select"}
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/UpgradeBanner.css
+++ b/frontend/src/components/UpgradeBanner.css
@@ -0,0 +1,32 @@
+.upgrade-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border-radius: var(--radius-md);
+  background-color: #3a2e00;
+  border: 1px solid #aa7700;
+  color: #ffcc44;
+}
+
+.upgrade-banner__message {
+  font-size: 0.88rem;
+}
+
+.upgrade-banner__link {
+  background: none;
+  border: 1px solid #aa7700;
+  color: #ffcc44;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.upgrade-banner__link:hover {
+  background-color: #4a3800;
+}
--- a/frontend/src/components/UpgradeBanner.jsx
+++ b/frontend/src/components/UpgradeBanner.jsx
@@ -0,0 +1,18 @@
+import { useNavigate } from "react-router-dom";
+import "./UpgradeBanner.css";
+
+export default function UpgradeBanner({ message, linkTo = "/subscribe?upgrade=true" }) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="upgrade-banner">
+      <span className="upgrade-banner__message">{message}</span>
+      <button
+        className="upgrade-banner__link"
+        onClick={() => navigate(linkTo)}
+      >
+        Upgrade
+      </button>
+    </div>
+  );
+}
--- a/frontend/src/components/navPanel/NavPanel.css
+++ b/frontend/src/components/navPanel/NavPanel.css
@@ -0,0 +1,89 @@
+/* ── Overlay Backdrop ─────────────────────────────────────── */
+
+.nav-panel__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 900;
+}
+
+.nav-panel__overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ── Slide-out Panel ─────────────────────────────────────── */
+
+.nav-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 260px;
+  height: 100%;
+  background-color: var(--color-bg-elevated);
+  border-right: 1px solid var(--color-border);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  z-index: 950;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0;
+}
+
+.nav-panel--open {
+  transform: translateX(0);
+}
+
+/* ── Nav Links ───────────────────────────────────────────── */
+
+.nav-panel__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nav-panel__link {
+  padding: 0.9rem 1.5rem;
+  text-decoration: none;
+  font-size: 1.3rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  border-left: 3px solid transparent;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.nav-panel__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+  border-left-color: var(--color-brand);
+}
+
+/* ── Logout Button ───────────────────────────────────────── */
+
+.nav-panel__logout {
+  margin: 1rem 1.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1.15rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+
+@media (max-width: 480px) {
+  .nav-panel__overlay {
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    z-index: 900;
+  }
+}
--- a/frontend/src/components/navPanel/NavPanel.jsx
+++ b/frontend/src/components/navPanel/NavPanel.jsx
@@ -0,0 +1,52 @@
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import "./NavPanel.css";
+
+const navLinks = [
+  { to: "/addresses", label: "Addresses" },
+  { to: "/alerts", label: "Configure Alerts" },
+  { to: "/alertevents", label: "Alert Event History" },
+];
+
+export default function NavPanel({ isOpen, onClose }) {
+  const { logout } = useAuth();
+  const location = useLocation();
+
+  const handleNavClick = () => {
+    onClose();
+  };
+
+  const handleLogout = () => {
+    onClose();
+    logout();
+  };
+
+  return (
+    <>
+      <div
+        className={`nav-panel__overlay${isOpen ? " nav-panel__overlay--visible" : ""}`}
+        onClick={onClose}
+      />
+      <aside className={`nav-panel${isOpen ? " nav-panel--open" : ""}`}>
+        <nav className="nav-panel__nav">
+          {navLinks.map(({ to, label }) => {
+            const isActive = location.pathname === to;
+            return (
+              <Link
+                key={to}
+                to={to}
+                className={`nav-panel__link${isActive ? " nav-panel__link--active" : ""}`}
+                onClick={handleNavClick}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </nav>
+        <button onClick={handleLogout} className="nav-panel__logout">
+          Logout
+        </button>
+      </aside>
+    </>
+  );
+}
--- a/frontend/src/contexts/AuthContext.jsx
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -0,0 +1,122 @@
+import { createContext, useContext, useSyncExternalStore } from "react";
+import {
+  onAuthStateChanged,
+  signInWithEmailAndPassword,
+  createUserWithEmailAndPassword,
+  signOut,
+  sendEmailVerification as firebaseSendEmailVerification,
+} from "firebase/auth";
+import { auth } from "../firebase/config";
+import { getAccount } from "../api/account";
+
+const AuthContext = createContext(undefined);
+
+const DEFAULT_TIER_LIMITS = {
+  max_addresses: 1,
+  max_alert_types: 1,
+  allowed_channels: ["email"],
+};
+
+// External auth store - lives outside React
+const createAuthStore = () => {
+  let state = {
+    currentUser: null,
+    userTier: "free",
+    tierLimits: DEFAULT_TIER_LIMITS,
+    isSubscribed: false,
+    loading: true,
+  };
+  const listeners = new Set();
+
+  const notify = () => listeners.forEach((fn) => fn());
+
+  const setState = (partial) => {
+    state = { ...state, ...partial };
+    notify();
+  };
+
+  const fetchAccount = async () => {
+    try {
+      const data = await getAccount();
+      setState({
+        userTier: data.subscription_tier || "free",
+        tierLimits: data.tier_limits || DEFAULT_TIER_LIMITS,
+        isSubscribed:
+          data.subscription_status === "active" ||
+          data.subscription_status === "trialing",
+      });
+    } catch {
+      setState({ isSubscribed: false });
+    }
+  };
+
+  // Set up Firebase listener once, outside of React
+  onAuthStateChanged(auth, async (user) => {
+    setState({ loading: true, currentUser: user });
+    if (user) {
+      await fetchAccount();
+    } else {
+      setState({ isSubscribed: false, userTier: "free", tierLimits: DEFAULT_TIER_LIMITS });
+    }
+    setState({ loading: false });
+  });
+
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getSnapshot: () => state,
+    refreshAccount: fetchAccount,
+  };
+};
+
+const authStore = createAuthStore();
+
+export function AuthProvider({ children }) {
+  const state = useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
+
+  const signup = (email, password) => createUserWithEmailAndPassword(auth, email, password);
+  const login = (email, password) => signInWithEmailAndPassword(auth, email, password);
+  const logout = () => signOut(auth);
+
+  const sendEmailVerification = () => {
+    if (auth.currentUser) {
+      return firebaseSendEmailVerification(auth.currentUser);
+    }
+  };
+
+  const reloadUser = async () => {
+    if (auth.currentUser) {
+      await auth.currentUser.reload();
+      return auth.currentUser;
+    }
+    return null;
+  };
+
+  const value = {
+    ...state,
+    signup,
+    login,
+    logout,
+    sendEmailVerification,
+    reloadUser,
+    refreshAccount: authStore.refreshAccount,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {!state.loading && children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+export default useAuth;
--- a/frontend/src/contexts/UserPropertiesContext.jsx
+++ b/frontend/src/contexts/UserPropertiesContext.jsx
@@ -0,0 +1,44 @@
+import { createContext, useReducer, useContext } from "react";
+
+const initialState = {
+  email: "",
+  password: "",
+};
+
+const ACTION_TYPES = {
+  SET_USER_PROPERTIES: "SET_USER_PROPERTIES",
+  CLEAR_USER_PROPERTIES: "CLEAR_USER_PROPERTIES",
+};
+
+function userPropertiesReducer(state, action) {
+  switch (action.type) {
+    case ACTION_TYPES.SET_USER_PROPERTIES:
+      return { ...state, ...action.payload };
+    case ACTION_TYPES.CLEAR_USER_PROPERTIES:
+      return { ...initialState };
+    default:
+      return state;
+  }
+}
+
+const UserPropertiesContext = createContext(undefined);
+
+export function UserPropertiesProvider({ children }) {
+  const [state, dispatch] = useReducer(userPropertiesReducer, initialState);
+
+  return (
+    <UserPropertiesContext.Provider value={{ state, dispatch, ACTION_TYPES }}>
+      {children}
+    </UserPropertiesContext.Provider>
+  );
+}
+
+export function useUserProperties() {
+  const context = useContext(UserPropertiesContext);
+  if (context === undefined) {
+    throw new Error(
+      "useUserProperties must be used within a UserPropertiesProvider",
+    );
+  }
+  return context;
+}
--- a/frontend/src/firebase/config.js
+++ b/frontend/src/firebase/config.js
@@ -0,0 +1,27 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import {
+    firebaseApiKey,
+    firebaseAuthDomain,
+    firebaseProjectId,
+    firebaseStorageBucket,
+    firebaseMessagingSenderId,
+    firebaseAppId,
+    firebaseMeasurementId,
+} from "../secrets.js";
+
+const firebaseConfig = {
+    apiKey: firebaseApiKey,
+    authDomain: firebaseAuthDomain,
+    projectId: firebaseProjectId,
+    storageBucket: firebaseStorageBucket,
+    messagingSenderId: firebaseMessagingSenderId,
+    appId: firebaseAppId,
+    measurementId: firebaseMeasurementId,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+
+export default app;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,454 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+
+:root {
+  --color-primary: #0066cc;
+  --color-primary-hover: #0077ee;
+  --color-brand: #e62525;
+  --color-success: #28a745;
+  --color-success-text: #00ff00;
+  --color-success-bg: #00ff0020;
+  --color-success-border: #00ff00;
+  --color-error: #ff6666;
+  --color-error-bg: #ff000020;
+  --color-error-border: #ff0000;
+  --color-warning: #ffcc44;
+  --color-warning-bg: #3a2e00;
+  --color-warning-border: #aa7700;
+  --color-danger: #cc6666;
+  --color-danger-border: #884444;
+
+  --color-bg: #1a1a1a;
+  --color-bg-elevated: #242424;
+  --color-bg-card: #333;
+  --color-bg-section: #2a2a2a;
+
+  --color-border: #444;
+  --color-border-light: #333;
+  --color-border-section: #3a3a3a;
+
+  --color-text: white;
+  --color-text-muted: #b3b3b3;
+  --color-text-dimmed: #808080;
+  --color-text-subtle: #999;
+  --color-text-label: #ccc;
+
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 14px;
+}
+
+body {
+  font-family: 'Nunito', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 200;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Nunito', sans-serif;
+  font-weight: 200;
+}
+
+input,
+select,
+textarea,
+button {
+  font-family: 'Nunito', sans-serif;
+  font-size: 1rem;
+  font-weight: 200;
+}
+
+/* ── App shell (navbar + main + footer) ───────────────────── */
+
+.app-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-layout__main {
+  flex: 1 0 auto;
+}
+
+/* ── Page Layouts ─────────────────────────────────────────── */
+
+.page {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.page--wide {
+  max-width: 1400px;
+}
+
+/* ── Cards & Sections ─────────────────────────────────────── */
+
+.card {
+  padding: 1rem;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.section {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: var(--color-bg-section);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border-section);
+}
+
+/* ── Form Controls ────────────────────────────────────────── */
+
+.form-field {
+  margin-bottom: 1.25rem;
+}
+
+.form-field--last {
+  margin-bottom: 1.75rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+  color: var(--color-text-label);
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
+}
+
+.form-control--mono {
+  font-family: monospace;
+}
+
+.form-select {
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+}
+
+/* ── Buttons ──────────────────────────────────────────────── */
+
+.btn {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text);
+  transition: opacity 0.15s ease;
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn--primary {
+  background-color: var(--color-primary);
+}
+
+.btn--success {
+  background-color: var(--color-success);
+}
+
+.btn--secondary {
+  background-color: #6c757d;
+}
+
+.btn--danger {
+  background-color: transparent;
+  border: 1px solid var(--color-danger-border);
+  color: var(--color-danger);
+}
+
+.btn--ghost {
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-subtle);
+}
+
+.btn--sm {
+  padding: 0.25rem 0.6rem;
+  font-size: 0.85rem;
+}
+
+.btn--lg {
+  padding: 0.75rem 1.5rem;
+}
+
+/* ── Feedback Alerts ──────────────────────────────────────── */
+
+.alert {
+  padding: 0.75rem;
+  margin-bottom: 1rem;
+  border-radius: var(--radius-md);
+}
+
+.alert--error {
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error);
+}
+
+.alert--success {
+  background-color: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  color: var(--color-success-text);
+}
+
+.alert--warning {
+  background-color: var(--color-warning-bg);
+  border: 1px solid var(--color-warning-border);
+  color: var(--color-warning);
+}
+
+/* ── Lists ────────────────────────────────────────────────── */
+
+.list-unstyled {
+  list-style: none;
+  padding: 0;
+}
+
+.list-item--card {
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}
+
+/* ── Typography Helpers ───────────────────────────────────── */
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.text-dimmed {
+  color: var(--color-text-dimmed);
+}
+
+.text-mono {
+  font-family: monospace;
+}
+
+.text-bold {
+  font-weight: bold;
+}
+
+.text-error {
+  color: red;
+}
+
+.text-sm {
+  font-size: 1.035rem;
+}
+
+.text-xs {
+  font-size: 0.978rem;
+}
+
+.help-link {
+  color: var(--color-primary);
+  font-size: 0.85rem;
+}
+
+/* ── Flex Utilities ───────────────────────────────────────── */
+
+.flex {
+  display: flex;
+}
+
+.flex--between {
+  justify-content: space-between;
+}
+
+.flex--center {
+  align-items: center;
+}
+
+.flex--column {
+  flex-direction: column;
+}
+
+.flex--wrap {
+  flex-wrap: wrap;
+}
+
+.gap-xs {
+  gap: 0.25rem;
+}
+
+.gap-sm {
+  gap: 0.5rem;
+}
+
+.gap-md {
+  gap: 0.75rem;
+}
+
+.gap-lg {
+  gap: 1rem;
+}
+
+/* ── Spacing Helpers ──────────────────────────────────────── */
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.mb-sm {
+  margin-bottom: 0.5rem;
+}
+
+.mb-md {
+  margin-bottom: 1rem;
+}
+
+.mb-lg {
+  margin-bottom: 1.5rem;
+}
+
+.mb-xl {
+  margin-bottom: 2rem;
+}
+
+.mt-0 {
+  margin-top: 0;
+}
+
+.mt-md {
+  margin-top: 1rem;
+}
+
+.text-white {
+  color: white;
+}
+
+.text-white-sm {
+  color: white;
+  font-size: 0.85rem;
+}
+
+/* ── Responsive Breakpoints ──────────────────────────────── */
+/* Mobile:  <= 480px                                          */
+/* Tablet:  481px – 768px                                     */
+/* Laptop:  769px – 1024px                                    */
+/* Desktop: >= 1025px (default styles above)                  */
+
+/* Laptop & below */
+@media (max-width: 1024px) {
+  .page--wide {
+    max-width: 100%;
+  }
+}
+
+/* Tablet & below */
+@media (max-width: 768px) {
+  html {
+    font-size: 13px;
+  }
+
+  .page {
+    padding: 1.25rem;
+  }
+
+  .btn--lg {
+    padding: 0.6rem 1.2rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+  }
+}
+
+/* Tier-locked: greyed out, non-interactive overlay for features above the user's plan */
+.tier-locked {
+  opacity: 0.45;
+  pointer-events: none;
+  filter: grayscale(40%);
+  user-select: none;
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+
+  .page {
+    background-color: var(--color-bg);
+    height: 920px;
+    padding: 1rem 0.75rem;
+  }
+
+  .form-control,
+  .form-select {
+    font-size: 0.95rem;
+  }
+
+  .btn {
+    padding: 0.45rem 0.85rem;
+    font-size: 1.45rem !important;
+  }
+
+  .btn--lg {
+    padding: 0.55rem 1rem;
+    font-size: 1rem;
+  }
+
+  .section {
+    padding: 0.75rem;
+  }
+
+  .mb-lg {
+    color: white;
+  }
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./contexts/AuthContext";
+import { UserPropertiesProvider } from "./contexts/UserPropertiesContext";
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+    <React.StrictMode>
+        <BrowserRouter>
+            <UserPropertiesProvider>
+                <AuthProvider>
+                    <App />
+                </AuthProvider>
+            </UserPropertiesProvider>
+        </BrowserRouter>
+    </React.StrictMode>,
+);
--- a/frontend/src/pages/Signup.jsx
+++ b/frontend/src/pages/Signup.jsx
@@ -0,0 +1,5 @@
+import { Navigate } from "react-router-dom";
+
+export default function Signup() {
+    return <Navigate to="/subscribe" replace />;
+}
--- a/frontend/src/pages/addresses/Addresses.css
+++ b/frontend/src/pages/addresses/Addresses.css
@@ -0,0 +1,41 @@
+.address__edit-input {
+  background: var(--color-border);
+  border: 1px solid #666;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.9rem;
+}
+
+.address__edit-link {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  color: #6699cc;
+  font-size: 0.8rem;
+  padding: 0;
+  text-decoration: underline;
+}
+
+.address__remove {
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--color-danger-border);
+  color: var(--color-danger);
+  border-radius: var(--radius-sm);
+  padding: 0.3rem 0.7rem;
+  font-size: 0.85rem;
+  margin-left: 1rem;
+  flex-shrink: 0;
+}
+
+/* ── Addresses Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .address__remove {
+    padding: 0rem 0.9rem;
+    font-size: 0.8rem;
+    margin-left: -3rem;
+    margin-bottom: 2rem;
+  }
+}
--- a/frontend/src/pages/addresses/Addresses.jsx
+++ b/frontend/src/pages/addresses/Addresses.jsx
@@ -0,0 +1,174 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../../contexts/AuthContext";
+import AddressForm from "../../components/AddressForm";
+import UpgradeBanner from "../../components/UpgradeBanner";
+import { getAddresses, createAddress, deleteAddress, updateAddress } from "../../api/addresses";
+import "./Addresses.css";
+
+export default function Addresses() {
+  const { tierLimits, refreshAccount } = useAuth();
+  const [addresses, setAddresses] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [editLabel, setEditLabel] = useState("");
+
+  const maxAddresses = tierLimits.max_addresses;
+  const isUnlimited = maxAddresses === -1;
+  const atLimit = !isUnlimited && addresses.length >= maxAddresses;
+
+  useEffect(() => {
+    async function fetchAddresses() {
+      try {
+        setLoading(true);
+        const data = await getAddresses();
+        setAddresses(data);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch addresses:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAddresses();
+  }, []);
+
+  async function handleAddressSubmit(data) {
+    try {
+      const newAddress = await createAddress(data);
+      setAddresses((prev) => [...prev, newAddress]);
+      setError(null);
+      refreshAccount();
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to create address:", err);
+    }
+  }
+
+  async function handleDelete(id, label) {
+    const displayName = label || "this address";
+    if (!window.confirm(`Remove "${displayName}"? This will also delete all associated alert rules.`)) {
+      return;
+    }
+    try {
+      await deleteAddress(id);
+      setAddresses((prev) => prev.filter((a) => a.id !== id));
+      setError(null);
+      refreshAccount();
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to delete address:", err);
+    }
+  }
+
+  function handleEditStart(addr) {
+    setEditingId(addr.id);
+    setEditLabel(addr.label ?? "");
+  }
+
+  async function handleEditSave(id) {
+    try {
+      const updated = await updateAddress(id, { label: editLabel || null });
+      setAddresses((prev) => prev.map((a) => (a.id === id ? updated : a)));
+      setEditingId(null);
+      setEditLabel("");
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update address:", err);
+    }
+  }
+
+  function handleEditCancel() {
+    setEditingId(null);
+    setEditLabel("");
+  }
+
+  return (
+    <div className="page">
+      <h1>Add Addresses to Track</h1>
+
+      {atLimit && (
+        <UpgradeBanner
+          message={`Your plan allows ${maxAddresses} address${maxAddresses !== 1 ? "es" : ""}. Upgrade to track more.`}
+        />
+      )}
+
+      <div className={`mb-xl${atLimit ? " tier-locked" : ""}`}>
+        <AddressForm onSubmit={handleAddressSubmit} />
+      </div>
+
+      <div>
+        <h2>Existing Tracked Addresses</h2>
+        {loading && <p>Loading addresses...</p>}
+        {error && <p className="text-error">Error: {error}</p>}
+        {!loading && !error && addresses.length === 0 && (
+          <p className="text-dimmed">
+            No addresses tracked yet. Add one above to get started.
+          </p>
+        )}
+        {addresses.length > 0 && (
+          <ul className="list-unstyled">
+            {addresses.map((addr, index) => (
+              <li key={addr.id || index} className="list-item--card">
+                <div className="flex flex--between flex--center">
+                  <div>
+                    {editingId === addr.id ? (
+                      <div className="flex flex--center gap-sm mb-sm">
+                        <input
+                          value={editLabel}
+                          onChange={(e) => setEditLabel(e.target.value)}
+                          placeholder="Label (optional)"
+                          className="address__edit-input"
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") handleEditSave(addr.id);
+                            if (e.key === "Escape") handleEditCancel();
+                          }}
+                          autoFocus
+                        />
+                        <button
+                          onClick={() => handleEditSave(addr.id)}
+                          className="btn btn--primary btn--sm"
+                        >
+                          Save
+                        </button>
+                        <button
+                          onClick={handleEditCancel}
+                          className="btn btn--ghost btn--sm"
+                        >
+                          Cancel
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="flex flex--center gap-sm mb-sm">
+                        <span className="text-bold">
+                          {addr.label || "Unlabeled"}
+                        </span>
+                        <button
+                          onClick={() => handleEditStart(addr)}
+                          className="address__edit-link"
+                        >
+                          Edit
+                        </button>
+                      </div>
+                    )}
+                    <div className="text-mono text-sm text-muted">
+                      {addr.address}
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => handleDelete(addr.id, addr.label)}
+                    className="address__remove"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/alertHistory/AlertHistory.css
+++ b/frontend/src/pages/alertHistory/AlertHistory.css
@@ -0,0 +1,7 @@
+.alert-history__item {
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}
--- a/frontend/src/pages/alertHistory/AlertHistory.jsx
+++ b/frontend/src/pages/alertHistory/AlertHistory.jsx
@@ -0,0 +1,67 @@
+import { useState, useEffect } from "react";
+import { getAlertEvents } from "../../api/alertEvents";
+import "./AlertHistory.css";
+
+export default function AlertHistory() {
+  const [alertEvents, setAlertEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function fetchAlertEvents() {
+      try {
+        setLoading(true);
+        const data = await getAlertEvents();
+        setAlertEvents(data);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alert events:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchAlertEvents();
+  }, []);
+
+  if (loading) {
+    return <div className="page">Loading...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="page text-error">Error: {error}</div>
+    );
+  }
+
+  return (
+    <div className="page">
+      <h1>Recent Alert Events</h1>
+
+      {alertEvents.length === 0 ? (
+        <p className="text-dimmed">No alerts yet</p>
+      ) : (
+        <ul className="list-unstyled">
+          {alertEvents.map((event) => (
+            <li key={event.id} className="alert-history__item">
+              <div className="mb-sm">{event.message}</div>
+              {event.address_label && (
+                <div className="text-sm text-dimmed">
+                  Address: {event.address_label}
+                </div>
+              )}
+              <small className="text-muted">
+                {formatTimestamp(event.timestamp)}
+              </small>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+}
--- a/frontend/src/pages/alerts/Alerts.css
+++ b/frontend/src/pages/alerts/Alerts.css
@@ -0,0 +1,191 @@
+.alerts-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  align-items: start;
+}
+
+.alerts__address-info {
+  padding: 1rem;
+  margin-bottom: 2rem;
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+}
+
+.alerts__toggle-panel {
+  margin-bottom: 1.5rem;
+  padding: 1rem;
+  background-color: var(--color-bg-card);
+  border-radius: var(--radius-md);
+}
+
+.alerts__toggle-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.alerts__toggle-checkbox {
+  margin-right: 0.5rem;
+  width: 18px;
+  height: 18px;
+}
+
+.alerts__toggle-hint {
+  font-size: 0.978rem;
+  color: var(--color-text-dimmed);
+  margin-top: 0.5rem;
+  margin-left: 26px;
+}
+
+.alerts__rule {
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg-card);
+}
+
+.alerts__rule--disabled {
+  opacity: 0.6;
+}
+
+.alerts__accordion-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0 0;
+  border-top: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  background: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+}
+
+.alerts__accordion-toggle:hover {
+  color: var(--color-text);
+}
+
+.alerts__accordion-chevron {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  font-size: 0.7rem;
+}
+
+.alerts__accordion-chevron--open {
+  transform: rotate(90deg);
+}
+
+.alerts__accordion-panel {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+  padding: 0 0.25rem;
+}
+
+.alerts__accordion-panel--open {
+  max-height: 200px;
+  opacity: 1;
+  padding: 0.75rem 0.25rem 0.25rem;
+}
+
+.alerts__threshold-inputs {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.alerts__threshold-inputs .form-field {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.alerts__threshold-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.alerts__email-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.alerts__save-test {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+/* Locked / disabled notification channel */
+.alerts__channel-locked {
+  opacity: 0.55;
+  position: relative;
+}
+
+.alerts__channel-locked .upgrade-banner {
+  opacity: 1;
+}
+
+.alerts__channel-locked input {
+  pointer-events: none;
+}
+
+/* ── Alerts Page Responsive ──────────────────────────────── */
+
+/* Laptop: tighten the gap */
+@media (max-width: 1024px) {
+  .alerts-grid {
+    gap: 1.5rem;
+  }
+}
+
+/* Tablet & below: collapse to single column */
+@media (max-width: 768px) {
+  .alerts-grid {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+}
+
+/* Mobile: compact spacing */
+@media (max-width: 480px) {
+  .alerts-grid {
+    gap: 2rem;
+  }
+
+  .alerts__address-info {
+    padding: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .alerts__rule {
+    padding: 0.75rem;
+  }
+
+  .alerts__rule .flex--between {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .alerts__save-test {
+    flex-direction: column;
+  }
+
+  .alerts__save-test .btn--lg {
+    width: 100%;
+    text-align: center;
+  }
+
+  .alerts__email-buttons {
+    flex-direction: column;
+  }
+}
--- a/frontend/src/pages/alerts/Alerts.jsx
+++ b/frontend/src/pages/alerts/Alerts.jsx
@@ -0,0 +1,709 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../../contexts/AuthContext";
+import AlertForm from "../../components/AlertForm";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import UpgradeBanner from "../../components/UpgradeBanner";
+import { getAddresses } from "../../api/addresses";
+import {
+  getAlerts,
+  createAlert,
+  updateAlertStatus,
+  updateAlertThresholds,
+  deleteAlert,
+} from "../../api/alerts";
+import {
+  getNotificationConfig,
+  updateNotificationConfig,
+  testNotificationChannels,
+  setupEmail,
+  sendEmailDigest,
+} from "../../api/notificationConfig";
+import "./Alerts.css";
+
+export default function Alerts() {
+  const { tierLimits, userTier } = useAuth();
+
+  const [addresses, setAddresses] = useState([]);
+  const [selectedAddressId, setSelectedAddressId] = useState(null);
+  const [alerts, setAlerts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [notificationEnabled, setNotificationEnabled] = useState(false);
+  const [discordWebhookUrl, setDiscordWebhookUrl] = useState("");
+  const [telegramBotToken, setTelegramBotToken] = useState("");
+  const [telegramChatId, setTelegramChatId] = useState("");
+  const [email, setEmail] = useState("");
+  const [slackWebhookUrl, setSlackWebhookUrl] = useState("");
+  const [notificationLoading, setNotificationLoading] = useState(false);
+  const [notificationError, setNotificationError] = useState(null);
+  const [notificationSuccess, setNotificationSuccess] = useState(null);
+  const [testingChannels, setTestingChannels] = useState(false);
+  const [settingUpEmail, setSettingUpEmail] = useState(false);
+  const [sendingDigest, setSendingDigest] = useState(false);
+  const [hasExistingConfig, setHasExistingConfig] = useState(false);
+
+  const [openAccordions, setOpenAccordions] = useState({});
+  const [thresholdEdits, setThresholdEdits] = useState({});
+
+  const allowedChannels = tierLimits.allowed_channels || ["email"];
+  const canTelegram = allowedChannels.includes("telegram");
+  const canDiscord = allowedChannels.includes("discord");
+  const canSlack = allowedChannels.includes("slack");
+
+  const maxAlertTypes = tierLimits.max_alert_types;
+  const isUnlimitedAlerts = maxAlertTypes === -1;
+
+  function distinctAlertTypeCount() {
+    const types = new Set(alerts.map((a) => a.type));
+    return types.size;
+  }
+
+  const atAlertLimit = !isUnlimitedAlerts && distinctAlertTypeCount() >= maxAlertTypes;
+
+  function toggleAccordion(alertId) {
+    setOpenAccordions((prev) => ({ ...prev, [alertId]: !prev[alertId] }));
+  }
+
+  function getThresholdEdit(alert) {
+    if (thresholdEdits[alert.id]) return thresholdEdits[alert.id];
+    return {
+      minimum: alert.minimum != null ? String(alert.minimum) : "",
+      maximum: alert.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  function setThresholdEdit(alertId, field, value) {
+    setThresholdEdits((prev) => {
+      const current = prev[alertId] || getThresholdEditForAlert(alertId);
+      return { ...prev, [alertId]: { ...current, [field]: value } };
+    });
+  }
+
+  function getThresholdEditForAlert(alertId) {
+    const alert = alerts.find((a) => a.id === alertId);
+    return {
+      minimum: alert?.minimum != null ? String(alert.minimum) : "",
+      maximum: alert?.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  async function handleSaveThresholds(alertId) {
+    const edit = thresholdEdits[alertId];
+    if (!edit) return;
+
+    const min = edit.minimum.trim() === "" ? null : Number(edit.minimum);
+    const max = edit.maximum.trim() === "" ? null : Number(edit.maximum);
+
+    if (min !== null && isNaN(min)) return;
+    if (max !== null && isNaN(max)) return;
+    if (min !== null && max !== null && min > max) return;
+
+    try {
+      const updated = await updateAlertThresholds(alertId, min, max);
+      setAlerts((prev) =>
+        prev.map((a) => (a.id === alertId ? updated : a)),
+      );
+      setThresholdEdits((prev) => {
+        const next = { ...prev };
+        delete next[alertId];
+        return next;
+      });
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update thresholds:", err);
+    }
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+
+        const addressData = await getAddresses();
+        setAddresses(addressData);
+        if (addressData.length > 0) {
+          setSelectedAddressId(addressData[0].id);
+        }
+
+        const configData = await getNotificationConfig();
+        setNotificationEnabled(
+          configData.notification_enabled !== false,
+        );
+        setDiscordWebhookUrl(configData.discord_webhook_url || "");
+        setTelegramBotToken(configData.telegram_bot_token || "");
+        setTelegramChatId(configData.telegram_chat_id || "");
+        setEmail(configData.email || "");
+        setSlackWebhookUrl(configData.slack_webhook_url || "");
+
+        const hasSaved =
+          !!configData.discord_webhook_url ||
+          !!configData.telegram_bot_token ||
+          !!configData.telegram_chat_id ||
+          !!configData.email ||
+          !!configData.slack_webhook_url;
+        setHasExistingConfig(hasSaved);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch data:", err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (!selectedAddressId) {
+      setAlerts([]);
+      return;
+    }
+
+    async function fetchAlerts() {
+      try {
+        const data = await getAlerts(selectedAddressId);
+        setAlerts(data);
+        setError(null);
+      } catch (err) {
+        setError(err.message);
+        console.error("Failed to fetch alerts:", err);
+      }
+    }
+
+    fetchAlerts();
+  }, [selectedAddressId]);
+
+  async function handleAlertSubmit(data) {
+    if (!selectedAddressId) return;
+
+    try {
+      const newAlert = await createAlert(selectedAddressId, data);
+      setAlerts((prev) => [...prev, newAlert]);
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to create alert:", err);
+    }
+  }
+
+  async function handleToggleAlert(alertId, currentStatus) {
+    try {
+      const updated = await updateAlertStatus(alertId, !currentStatus);
+      setAlerts((prev) =>
+        prev.map((alert) => (alert.id === alertId ? updated : alert)),
+      );
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update alert:", err);
+    }
+  }
+
+  async function handleDeleteAlert(alertId) {
+    try {
+      await deleteAlert(alertId);
+      setAlerts((prev) => prev.filter((alert) => alert.id !== alertId));
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to delete alert:", err);
+    }
+  }
+
+  async function handleSaveNotificationConfig() {
+    if (hasExistingConfig) {
+      const confirmed = window.confirm(
+        "This will overwrite your previously saved notification settings. Continue?",
+      );
+      if (!confirmed) return;
+    }
+
+    try {
+      setNotificationLoading(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const config = {
+        notification_enabled: notificationEnabled,
+        discord_webhook_url: canDiscord ? (discordWebhookUrl || null) : null,
+        telegram_bot_token: canTelegram ? (telegramBotToken || null) : null,
+        telegram_chat_id: canTelegram ? (telegramChatId || null) : null,
+        email: email || null,
+        slack_webhook_url: canSlack ? (slackWebhookUrl || null) : null,
+      };
+
+      await updateNotificationConfig(config);
+      setHasExistingConfig(true);
+      setNotificationSuccess("Notification settings saved!");
+      setTimeout(() => setNotificationSuccess(null), 3000);
+    } catch (err) {
+      setNotificationError(err.message);
+      console.error("Failed to save notification config:", err);
+    } finally {
+      setNotificationLoading(false);
+    }
+  }
+
+  async function handleTestChannels() {
+    try {
+      setTestingChannels(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const data = await testNotificationChannels();
+      const results = data.results || [];
+
+      const failed = results.filter((r) => !r.success);
+      const succeeded = results.filter((r) => r.success);
+
+      if (failed.length === 0 && succeeded.length > 0) {
+        setNotificationSuccess(
+          `Test sent to: ${succeeded.map((r) => r.channel).join(", ")}`,
+        );
+      } else if (failed.length > 0 && succeeded.length > 0) {
+        setNotificationSuccess(
+          `Sent: ${succeeded.map((r) => r.channel).join(", ")}. Failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
+        );
+      } else if (failed.length > 0) {
+        setNotificationError(
+          `Test failed: ${failed.map((r) => `${r.channel} (${r.error})`).join(", ")}`,
+        );
+      }
+
+      setTimeout(() => {
+        setNotificationSuccess(null);
+        setNotificationError(null);
+      }, 6000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setTestingChannels(false);
+    }
+  }
+
+  async function handleSetupEmail() {
+    try {
+      setSettingUpEmail(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      await handleSaveNotificationConfig();
+
+      const result = await setupEmail();
+      setNotificationSuccess(
+        result.message || "Confirmation email sent!",
+      );
+      setTimeout(() => setNotificationSuccess(null), 5000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setSettingUpEmail(false);
+    }
+  }
+
+  async function handleSendDigest() {
+    try {
+      setSendingDigest(true);
+      setNotificationError(null);
+      setNotificationSuccess(null);
+
+      const result = await sendEmailDigest();
+      setNotificationSuccess(result.message || "Digest email sent!");
+      setTimeout(() => setNotificationSuccess(null), 5000);
+    } catch (err) {
+      setNotificationError(err.message);
+    } finally {
+      setSendingDigest(false);
+    }
+  }
+
+  const selectedAddress = addresses.find((a) => a.id === selectedAddressId);
+
+  if (loading) {
+    return <div className="page">Loading addresses...</div>;
+  }
+
+  if (addresses.length === 0) {
+    return (
+      <div className="page">
+        <p>No addresses tracked yet. Add an address first to create alerts.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page page--wide">
+      <h1 className="mb-xl">Alert Rules & Notifications</h1>
+
+      <div className="alerts-grid">
+        {/* LEFT COLUMN: Alert Rules */}
+        <div>
+          <h2 className="mt-0">Alert Rules</h2>
+
+          <div className="mb-xl">
+            <label className="form-label mb-sm">
+              <strong>Select Address:</strong>
+            </label>
+            <select
+              value={selectedAddressId || ""}
+              onChange={(e) =>
+                setSelectedAddressId(Number(e.target.value))
+              }
+              className="form-select"
+            >
+              {addresses.map((addr) => (
+                <option key={addr.id} value={addr.id}>
+                  {addr.label || "Unlabeled"} - {addr.address}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {selectedAddress && (
+            <>
+              <div className="alerts__address-info">
+                <div className="text-sm text-muted">
+                  Managing alerts for:
+                </div>
+                <div className="text-bold">
+                  {selectedAddress.label || "Unlabeled"}
+                </div>
+                <div className="text-mono text-sm text-muted">
+                  {selectedAddress.address}
+                </div>
+              </div>
+
+              {atAlertLimit && userTier !== "pro" && (
+                <UpgradeBanner
+                  message={`Your ${userTier} plan allows ${maxAlertTypes} alert type${maxAlertTypes !== 1 ? "s" : ""} per address. Upgrade for more.`}
+                />
+              )}
+
+              <div className={`mb-xl${atAlertLimit ? " tier-locked" : ""}`}>
+                <h3>Create New Alert</h3>
+                <AlertForm onSubmit={handleAlertSubmit} />
+              </div>
+
+              <div>
+                <h3>Active Alert Rules</h3>
+                {error && (
+                  <p className="text-error">Error: {error}</p>
+                )}
+                {alerts.length === 0 ? (
+                  <p className="text-dimmed">
+                    No alert rules defined yet. Create one above.
+                  </p>
+                ) : (
+                  <ul className="list-unstyled">
+                    {alerts.map((alert) => {
+                      const hasAccordion =
+                        alert.type === "incoming_tx" ||
+                        alert.type === "outgoing_tx";
+                      const isOpen = !!openAccordions[alert.id];
+                      const edit = getThresholdEdit(alert);
+
+                      return (
+                        <li
+                          key={alert.id}
+                          className={`alerts__rule ${!alert.enabled ? "alerts__rule--disabled" : ""}`}
+                        >
+                          <div className="flex flex--between">
+                            <div>
+                              <div className="text-bold mb-sm">
+                                {formatAlertType(alert.type)}
+                              </div>
+                              {alert.threshold && (
+                                <div className="text-sm text-muted">
+                                  Threshold: {alert.threshold} ETH
+                                </div>
+                              )}
+                              {alert.minimum != null && (
+                                <div className="text-sm text-muted">
+                                  Min: {alert.minimum} ETH
+                                </div>
+                              )}
+                              {alert.maximum != null && (
+                                <div className="text-sm text-muted">
+                                  Max: {alert.maximum} ETH
+                                </div>
+                              )}
+                              <div className="text-xs text-dimmed">
+                                Status:{" "}
+                                {alert.enabled ? "Enabled" : "Disabled"}
+                              </div>
+                            </div>
+                            <div className="flex flex--center gap-sm">
+                              <Button
+                                onClick={() =>
+                                  handleToggleAlert(
+                                    alert.id,
+                                    alert.enabled,
+                                  )
+                                }
+                              >
+                                {alert.enabled ? "Disable" : "Enable"}
+                              </Button>
+                              <Button
+                                onClick={() =>
+                                  handleDeleteAlert(alert.id)
+                                }
+                              >
+                                Delete
+                              </Button>
+                            </div>
+                          </div>
+
+                          {hasAccordion && (
+                            <>
+                              <button
+                                type="button"
+                                className="alerts__accordion-toggle"
+                                onClick={() =>
+                                  toggleAccordion(alert.id)
+                                }
+                              >
+                                <span
+                                  className={`alerts__accordion-chevron ${isOpen ? "alerts__accordion-chevron--open" : ""}`}
+                                >
+                                  &#9654;
+                                </span>
+                                Add optional minimum and maximum
+                                threshold values
+                              </button>
+                              <div
+                                className={`alerts__accordion-panel ${isOpen ? "alerts__accordion-panel--open" : ""}`}
+                              >
+                                <div className="alerts__threshold-inputs">
+                                  <Input
+                                    label="Minimum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.minimum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "minimum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No minimum"
+                                  />
+                                  <Input
+                                    label="Maximum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.maximum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "maximum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No maximum"
+                                  />
+                                </div>
+                                <div className="alerts__threshold-actions">
+                                  <Button
+                                    onClick={() =>
+                                      handleSaveThresholds(alert.id)
+                                    }
+                                    className="btn--sm"
+                                  >
+                                    Save
+                                  </Button>
+                                </div>
+                              </div>
+                            </>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* RIGHT COLUMN: Notification Settings */}
+        <div>
+          <h2 className="mt-0">Notification Settings</h2>
+
+          {notificationSuccess && (
+            <div className="alert alert--success">{notificationSuccess}</div>
+          )}
+
+          {notificationError && (
+            <div className="alert alert--error">{notificationError}</div>
+          )}
+
+          {/* Master toggle */}
+          <div className="alerts__toggle-panel">
+            <label className="alerts__toggle-label">
+              <input
+                type="checkbox"
+                checked={notificationEnabled}
+                onChange={(e) =>
+                  setNotificationEnabled(e.target.checked)
+                }
+                className="alerts__toggle-checkbox"
+              />
+              <span className="text-bold">Enable Notifications</span>
+            </label>
+            <div className="alerts__toggle-hint">
+              Master switch for all notification channels
+            </div>
+          </div>
+
+          {/* All channel settings -- hidden when master toggle is off */}
+          {notificationEnabled && (
+            <>
+              {/* Telegram */}
+              <div className={`section${!canTelegram ? " alerts__channel-locked" : ""}`}>
+                <h3 className="mt-0 mb-md">Telegram</h3>
+                {!canTelegram && (
+                  <UpgradeBanner message="Upgrade to Premium to enable Telegram alerts" />
+                )}
+                <Input
+                  label="Bot Token"
+                  value={telegramBotToken}
+                  onChange={setTelegramBotToken}
+                  placeholder="123456789:ABCdefGHIjklMNOpqrSTUvwxYZ"
+                  disabled={!canTelegram}
+                />
+                <Input
+                  label="Chat ID"
+                  value={telegramChatId}
+                  onChange={setTelegramChatId}
+                  placeholder="-1001234567890"
+                  disabled={!canTelegram}
+                />
+                <a
+                  href="https://core.telegram.org/bots#how-do-i-create-a-bot"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to create a Telegram bot & get your Chat ID
+                </a>
+              </div>
+
+              {/* Email */}
+              <div className="section">
+                <h3 className="mt-0 mb-md">Email</h3>
+                <Input
+                  label="Email Address"
+                  type="email"
+                  value={email}
+                  onChange={setEmail}
+                  placeholder="you@example.com"
+                />
+                <div className="help-link text-dimmed mb-md">
+                  Alert notifications and digests will be sent to this address
+                </div>
+                <div className="alerts__email-buttons">
+                  <Button
+                    onClick={handleSetupEmail}
+                    disabled={settingUpEmail || !email}
+                    className="btn--sm"
+                  >
+                    {settingUpEmail ? "Setting up..." : "Verify Email"}
+                  </Button>
+                  <Button
+                    onClick={handleSendDigest}
+                    disabled={sendingDigest || !email}
+                    variant="secondary"
+                    className="btn--sm"
+                  >
+                    {sendingDigest ? "Sending..." : "Send Digest Now"}
+                  </Button>
+                </div>
+              </div>
+
+              {/* Discord */}
+              <div className={`section${!canDiscord ? " alerts__channel-locked" : ""}`}>
+                <h3 className="mt-0 mb-md">Discord</h3>
+                {!canDiscord && (
+                  <UpgradeBanner message="Upgrade to Premium to enable Discord alerts" />
+                )}
+                <Input
+                  label="Discord Webhook URL"
+                  value={discordWebhookUrl}
+                  onChange={setDiscordWebhookUrl}
+                  placeholder="https://discord.com/api/webhooks/..."
+                  disabled={!canDiscord}
+                />
+                <a
+                  href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to get a Discord webhook URL
+                </a>
+              </div>
+
+              {/* Slack */}
+              <div className={`section${!canSlack ? " alerts__channel-locked" : ""}`}>
+                <h3 className="mt-0 mb-md">Slack</h3>
+                {!canSlack && (
+                  <UpgradeBanner message="Upgrade to Pro to enable Slack alerts" />
+                )}
+                <Input
+                  label="Slack Webhook URL"
+                  value={slackWebhookUrl}
+                  onChange={setSlackWebhookUrl}
+                  placeholder="https://hooks.slack.com/services/..."
+                  disabled={!canSlack}
+                />
+                <a
+                  href="https://api.slack.com/messaging/webhooks"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="help-link"
+                >
+                  How to set up Slack Incoming Webhooks
+                </a>
+              </div>
+
+              {/* Save & Test buttons */}
+              <div className="alerts__save-test">
+                <Button
+                  onClick={handleSaveNotificationConfig}
+                  disabled={notificationLoading}
+                  className="btn--lg"
+                >
+                  {notificationLoading ? "Saving..." : "Save Settings"}
+                </Button>
+                <Button
+                  onClick={handleTestChannels}
+                  disabled={testingChannels}
+                  variant="success"
+                  className="btn--lg"
+                >
+                  {testingChannels ? "Testing..." : "Test All Channels"}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatAlertType(type) {
+  const labels = {
+    incoming_tx: "Incoming transaction",
+    outgoing_tx: "Outgoing transaction",
+    large_transfer: "Large transfer",
+    balance_below: "Balance below threshold",
+  };
+  return labels[type] || type;
+}
--- a/frontend/src/pages/login/Login.css
+++ b/frontend/src/pages/login/Login.css
@@ -0,0 +1,135 @@
+.login-page {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #000000;
+}
+
+.login-bg-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 100%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+  z-index: 0;
+  filter: grayscale(85%);
+  -webkit-filter: grayscale(85%);
+  opacity: 0.05;
+}
+
+.login-card {
+  position: relative;
+  z-index: 1;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 2rem;
+  padding-top: 8rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
+  background-color: rgba(0, 0, 0, 0.75);
+  top: 20px;
+}
+
+.login-heading {
+  margin-bottom: 2rem;
+  text-align: center;
+  position: relative;
+  top: -20px;
+  white-space: nowrap;
+}
+
+.login-brand {
+  color: var(--color-brand);
+}
+
+.login-button {
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 1.2rem;
+  margin-top: 16px;
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+}
+
+.login-signup-link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.login-card-fadein {
+  opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 3s;
+}
+
+.login-tagline {
+  position: relative;
+  z-index: 1;
+  max-width: 630px;
+  margin: 5rem auto 0;
+  padding-left: 2rem;
+  font-style: italic;
+  color: #FFFFFF;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  text-align: center;
+}
+
+.login-interactive-fadein {
+  opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 6s;
+}
+
+/* ── Login Responsive ────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .login-card {
+    max-width: 100%;
+    margin: 0 0.75rem;
+    padding: 1.5rem;
+    padding-top: 6rem;
+  }
+
+  .login-tagline {
+    margin-top: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1.25rem;
+  }
+
+  .login-span {
+    color: red
+  }
+
+  h1 {
+    font-weight: 400 !important
+  }
+
+  .login-bg-video {
+    opacity: 0.135;
+    left: 47%;
+  }
+
+  .login-button {
+    font-size: 1rem;
+  }
+}
--- a/frontend/src/pages/login/Login.jsx
+++ b/frontend/src/pages/login/Login.jsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import Input from "../../components/Input";
+import "./Login.css";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+
+    if (!email || !password) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    try {
+      setError("");
+      setLoading(true);
+      await login(email, password);
+      navigate("/addresses");
+    } catch (err) {
+      setError("Failed to log in: " + err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-page">
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="login-bg-video"
+      >
+        <source src="/koin_exp_2.mp4" type="video/mp4" />
+      </video>
+
+      <div className="login-card login-card-fadein">
+        <h1 className="login-heading">
+          <span className="login-brand">Koin Ping</span><span className="login-span"> - Login</span>
+        </h1>
+
+        <div className="login-interactive-fadein">
+          {error && <div className="alert alert--error">{error}</div>}
+
+          <form onSubmit={handleSubmit}>
+            <Input
+              label="Email"
+              type="email"
+              value={email}
+              onChange={setEmail}
+              disabled={loading}
+              required
+            />
+            <Input
+              label="Password"
+              type="password"
+              value={password}
+              onChange={setPassword}
+              disabled={loading}
+              required
+              className="form-field--last"
+            />
+
+            <button type="submit" disabled={loading} className="btn btn--primary login-button">
+              {loading ? "Logging in..." : "Log In"}
+            </button>
+          </form>
+
+          <div className="login-footer">
+            <p className="text-muted">
+              Don't have an account?{" "}
+              <Link to="/signup" className="login-signup-link">
+                Sign up here
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <p className="login-tagline login-card-fadein">
+        A lightweight, on-chain monitoring system giving users real-time
+        situational awareness over blockchain addresses.
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/pages/privacy/Privacy.css
+++ b/frontend/src/pages/privacy/Privacy.css
@@ -0,0 +1,24 @@
+.privacy-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  color: var(--color-text);
+}
+
+.privacy-container h1 {
+  font-size: 2rem;
+  font-weight: 200;
+  margin-bottom: 1.25rem;
+}
+
+.privacy-para {
+  margin-bottom: 1.25rem;
+  font-size: 1.35rem;
+  font-weight: 200;
+  line-height: 1.65;
+  color: var(--color-text-muted);
+}
+
+.privacy-para:last-child {
+  margin-bottom: 0;
+}
--- a/frontend/src/pages/privacy/Privacy.jsx
+++ b/frontend/src/pages/privacy/Privacy.jsx
@@ -0,0 +1,30 @@
+import "./Privacy.css";
+
+export default function Privacy() {
+  return (
+    <div className="privacy-container">
+      <h1>Privacy</h1>
+      <p className="privacy-para">
+        Koin Ping is committed to protecting the privacy of our users. Koin Ping
+        does not sell or rent user information and we do not share user
+        information without prior consent except as compelled by law.
+      </p>
+      <p className="privacy-para">
+        Koin Ping collects only enough information from users to enable the
+        functioning of this website and its services. It will never collect
+        extra information about you and uses no tracking, cookies or logging
+        with personal information.
+      </p>
+      <p className="privacy-para">
+        The only information ever stored is your chosen email address and
+        contact information that is provided upon signup. Koin Ping is located
+        within the United States, and will process and store your information in
+        the United States.
+      </p>
+      <p className="privacy-para">
+        If you would like to remove your data, or if you have any questions
+        about how your data is used, please contact us.
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/pages/subscribe/CheckoutReturn.jsx
+++ b/frontend/src/pages/subscribe/CheckoutReturn.jsx
@@ -0,0 +1,54 @@
+import { useState, useRef } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { verifyCheckoutSession } from "../../api/stripe";
+import { useAuth } from "../../contexts/AuthContext";
+import "./Subscribe.css";
+
+export default function CheckoutReturn() {
+  const { sessionId } = useParams();
+  const navigate = useNavigate();
+  const { refreshAccount } = useAuth();
+  const [error, setError] = useState(null);
+  const started = useRef(false);
+
+  if (sessionId && !started.current) {
+    started.current = true;
+    verifyCheckoutSession(sessionId)
+      .then(() => refreshAccount())
+      .then(() => navigate("/addresses", { replace: true }))
+      .catch((err) => setError(err.message || "Payment verification failed"));
+  }
+
+  if (!sessionId) {
+    return (
+      <div className="subscribe">
+        <div className="subscribe__container">
+          <h1 className="subscribe__title">Koin Ping</h1>
+          <div className="alert alert--error">No session ID found.</div>
+          <p><a href="/subscribe">Back to Subscribe</a></p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="subscribe">
+        <div className="subscribe__container">
+          <h1 className="subscribe__title">Koin Ping</h1>
+          <div className="alert alert--error">{error}</div>
+          <p><a href="/subscribe">Try again</a></p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="subscribe">
+      <div className="subscribe__container">
+        <h1 className="subscribe__title">Koin Ping</h1>
+        <p>Verifying your payment...</p>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/subscribe/Subscribe.css
+++ b/frontend/src/pages/subscribe/Subscribe.css
@@ -0,0 +1,221 @@
+.subscribe {
+  min-height: 100vh;
+  background-color: var(--color-bg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.subscribe__container {
+  width: 100%;
+  max-width: 540px;
+  padding: 0 1rem;
+}
+
+.subscribe__container--wide {
+  max-width: 920px;
+}
+
+.subscribe__title {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: var(--color-primary);
+  letter-spacing: 0.5px;
+}
+
+.subscribe__card {
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
+  padding: 2rem;
+}
+
+.subscribe__login-link {
+  text-align: center;
+  margin-top: 1.25rem;
+  color: #888;
+  font-size: 0.9rem;
+}
+
+.subscribe__login-link a {
+  color: var(--color-primary);
+}
+
+/* Progress bar */
+.progress-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.progress-bar__step {
+  display: flex;
+  align-items: center;
+}
+
+.progress-bar__connector {
+  width: 40px;
+  height: 2px;
+  margin: 0 4px;
+}
+
+.progress-bar__connector--active {
+  background-color: var(--color-primary);
+}
+
+.progress-bar__connector--inactive {
+  background-color: var(--color-border);
+}
+
+.progress-bar__dot {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: white;
+  margin: 0 auto 4px;
+}
+
+.progress-bar__dot--done,
+.progress-bar__dot--active {
+  background-color: var(--color-primary);
+}
+
+.progress-bar__dot--active {
+  border: 2px solid #4499ff;
+}
+
+.progress-bar__dot--pending {
+  background-color: var(--color-bg-card);
+  border: 2px solid transparent;
+}
+
+.progress-bar__label {
+  font-size: 0.7rem;
+  white-space: nowrap;
+}
+
+.progress-bar__label--active {
+  color: white;
+}
+
+.progress-bar__label--inactive {
+  color: #888;
+}
+
+/* Footer navigation */
+.subscribe__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+/* Step subtitle */
+.subscribe__subtitle {
+  color: #aaa;
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+}
+
+.subscribe__subtitle strong {
+  color: var(--color-primary);
+}
+
+/* Verify email actions */
+.subscribe__verify-actions {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.subscribe__verify-sent {
+  color: var(--color-success, #22c55e);
+  text-align: center;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+/* Subscribe card (Step 2 tier cards) */
+.subscribe-card {
+  background-color: var(--color-bg-card, #1a1a2e);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.subscribe-card__price {
+  margin-bottom: 1.25rem;
+}
+
+.subscribe-card__amount {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: white;
+}
+
+.subscribe-card__period {
+  font-size: 1rem;
+  color: #888;
+  margin-left: 2px;
+}
+
+.subscribe-card__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  text-align: left;
+}
+
+.subscribe-card__features li {
+  padding: 0.35rem 0;
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+.subscribe-card__features li::before {
+  content: "\2713";
+  color: var(--color-primary);
+  margin-right: 0.6rem;
+  font-weight: bold;
+}
+
+.subscribe-card__commitment {
+  color: #999;
+  font-size: 0.8rem;
+  margin: 0;
+  font-style: italic;
+}
+
+/* ── Subscribe Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .subscribe {
+    padding-top: 1.5rem;
+  }
+
+  .subscribe__card {
+    padding: 1.25rem;
+  }
+
+  .progress-bar__connector {
+    width: 24px;
+  }
+
+  .progress-bar__dot {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+  }
+}
--- a/frontend/src/pages/subscribe/Subscribe.jsx
+++ b/frontend/src/pages/subscribe/Subscribe.jsx
@@ -0,0 +1,337 @@
+import { useState } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import {
+  createCheckoutSession,
+  activateFreeTier,
+} from "../../api/stripe";
+import Input from "../../components/Input";
+import Button from "../../components/Button";
+import TierPicker from "../../components/TierPicker";
+import "./Subscribe.css";
+
+const STEPS = ["Create Account", "Verify Email", "Choose Plan"];
+
+export default function Subscribe() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const { currentUser, signup, sendEmailVerification, reloadUser, refreshAccount } = useAuth();
+
+  const queryParameters = new URLSearchParams(window.location.search)
+  const success = queryParameters?.get("payment")
+  const session_id = queryParameters?.get("session_id")
+
+  console.log('success, session_id ------>', success, session_id)
+
+  function forward(success, session_id) {
+    success && session_id ?
+      navigate('/addresses') : console.log('ewps')
+  }
+
+  setTimeout(forward, 2000, success, session_id);
+
+  const [step, setStep] = useState(
+    currentUser ? (currentUser.emailVerified ? 3 : 2) : 1
+  );
+  const [verificationSent, setVerificationSent] = useState(false);
+  const [data, setData] = useState({
+    email: currentUser?.email || "",
+    password: "",
+    confirmPassword: "",
+    selectedTier: null,
+    billingInterval: "annual",
+  });
+  const [error, setError] = useState(
+    searchParams.get("payment") === "cancelled"
+      ? "Payment was cancelled. Please try again."
+      : ""
+  );
+  const [loading, setLoading] = useState(false);
+
+  function set(field, value) {
+    setData((prev) => ({ ...prev, [field]: value }));
+  }
+
+  async function handleStep1() {
+    setError("");
+    if (!data.email || !data.password) {
+      setError("Email and password are required");
+      return;
+    }
+    if (data.password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+    if (data.password !== data.confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    try {
+      await signup(data.email, data.password);
+      await sendEmailVerification();
+      setVerificationSent(true);
+      setStep(2);
+    } catch (err) {
+      setError(err.message || "Failed to create account");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep2() {
+    setError("");
+    setLoading(true);
+    try {
+      const user = await reloadUser();
+      if (user?.emailVerified) {
+        setStep(3);
+      } else {
+        setError("Email not yet verified. Please check your inbox and click the verification link.");
+      }
+    } catch (err) {
+      setError(err.message || "Failed to check verification status");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResendVerification() {
+    setError("");
+    setLoading(true);
+    try {
+      await sendEmailVerification();
+      setVerificationSent(true);
+      setError("");
+    } catch (err) {
+      if (err.code === "auth/too-many-requests") {
+        setError("Too many requests. Please wait a moment before trying again.");
+      } else {
+        setError(err.message || "Failed to resend verification email");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleStep3() {
+    setError("");
+    if (!data.selectedTier) {
+      setError("Please select a plan");
+      return;
+    }
+    setLoading(true);
+    try {
+      if (data.selectedTier === "free") {
+        await activateFreeTier();
+        await refreshAccount();
+        navigate("/addresses", { replace: true });
+      } else {
+        const { url } = await createCheckoutSession(data.selectedTier, data.billingInterval);
+        window.location.href = url;
+      }
+    } catch (err) {
+      setError(err.message || "Something went wrong");
+      setLoading(false);
+    }
+  }
+
+  function ProgressBar() {
+    return (
+      <div className="progress-bar">
+        {STEPS.map((label, i) => {
+          const stepNum = i + 1;
+          const done = step > stepNum;
+          const active = step === stepNum;
+          const dotClass = done
+            ? "progress-bar__dot--done"
+            : active
+              ? "progress-bar__dot--active"
+              : "progress-bar__dot--pending";
+
+          return (
+            <div key={label} className="progress-bar__step">
+              {i > 0 && (
+                <div
+                  className={`progress-bar__connector ${done || active
+                    ? "progress-bar__connector--active"
+                    : "progress-bar__connector--inactive"
+                    }`}
+                />
+              )}
+              <div>
+                <div className={`progress-bar__dot ${dotClass}`}>
+                  {done ? "\u2713" : stepNum}
+                </div>
+                <div
+                  className={`progress-bar__label ${active
+                    ? "progress-bar__label--active"
+                    : "progress-bar__label--inactive"
+                    }`}
+                >
+                  {label}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ── Step content ──────────────────────────────────────────────────────────
+
+  function StepCreateAccount() {
+    return (
+      <>
+        <h2 className="mb-lg">Create your account</h2>
+        <Input
+          label="Email"
+          type="email"
+          value={data.email}
+          onChange={(v) => set("email", v)}
+          disabled={loading}
+          placeholder="you@example.com"
+        />
+        <Input
+          label="Password"
+          type="password"
+          value={data.password}
+          onChange={(v) => set("password", v)}
+          disabled={loading}
+          placeholder="At least 6 characters"
+        />
+        <Input
+          label="Confirm Password"
+          type="password"
+          value={data.confirmPassword}
+          onChange={(v) => set("confirmPassword", v)}
+          disabled={loading}
+          placeholder="Repeat your password"
+          className="form-field--last"
+        />
+      </>
+    );
+  }
+
+  function StepVerifyEmail() {
+    return (
+      <>
+        <h2 className="mb-sm">Verify your email</h2>
+        <p className="subscribe__subtitle">
+          We've sent a verification link to <strong>{currentUser?.email}</strong>.
+          Please check your inbox and click the link to verify your email address.
+        </p>
+        {verificationSent && !error && (
+          <p className="subscribe__verify-sent">Verification email sent!</p>
+        )}
+        <div className="subscribe__verify-actions">
+          <Button
+            onClick={handleResendVerification}
+            disabled={loading}
+            variant="ghost"
+          >
+            {loading ? "Sending..." : "Resend verification email"}
+          </Button>
+        </div>
+      </>
+    );
+  }
+
+  function StepChoosePlan() {
+    return (
+      <>
+        <h2 className="mb-sm">Choose your monitoring plan</h2>
+        <p className="subscribe__subtitle">
+          Select the plan that works best for you. You can upgrade anytime.
+        </p>
+        <TierPicker
+          onSelect={(tier, interval) => {
+            set("selectedTier", tier);
+            set("billingInterval", interval);
+          }}
+          selectedTier={data.selectedTier}
+        />
+      </>
+    );
+  }
+
+  // ── Footer nav  ──────────────────────────────────────────────────────────
+
+  function Footer() {
+    async function handleNext() {
+      if (step === 1) handleStep1();
+      else if (step === 2) await handleStep2();
+      else if (step === 3) await handleStep3();
+    }
+
+    function handleBack() {
+      setError("");
+      setStep((s) => s - 1);
+    }
+
+    const nextLabel =
+      step === 1
+        ? "Create Account"
+        : step === 2
+          ? "I've verified my email"
+          : !data.selectedTier
+            ? "Continue"
+            : data.selectedTier === "free"
+              ? "Start Free Trial"
+              : "Subscribe & Continue";
+
+    return (
+      <div className="subscribe__footer">
+        <div>
+          {step > 1 && (
+            <Button onClick={handleBack} disabled={loading} variant="ghost">
+              ← Back
+            </Button>
+          )}
+        </div>
+
+        <Button
+          onClick={handleNext}
+          disabled={loading || (step === 3 && !data.selectedTier)}
+          className="text-bold"
+        >
+          {loading ? "Please wait..." : nextLabel}
+        </Button>
+      </div>
+    );
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const stepContent = {
+    1: StepCreateAccount(),
+    2: StepVerifyEmail(),
+    3: StepChoosePlan(),
+  };
+
+  return (
+    <div className="subscribe">
+      <div
+        className={`subscribe__container${step === 3 ? " subscribe__container--wide" : ""}`}
+      >
+        <h1 className="subscribe__title">Koin Ping</h1>
+
+        {ProgressBar()}
+
+        {error && <div className="alert alert--error">{error}</div>}
+
+        <div className="subscribe__card">
+          {stepContent[step]}
+          {Footer()}
+        </div>
+
+        {step === 1 && (
+          <p className="subscribe__login-link">
+            Already have an account? <a href="/login">Log in here</a>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/support/Support.css
+++ b/frontend/src/pages/support/Support.css
@@ -0,0 +1,31 @@
+.support-page__title {
+  font-size: 2rem;
+  font-weight: 200;
+  margin-bottom: 0.75rem;
+}
+
+.support-page__intro {
+  font-size: 1.1rem;
+  font-weight: 200;
+  color: var(--color-text-muted);
+  margin-bottom: 1.5rem;
+  line-height: 1.5;
+}
+
+.support-page__alert {
+  margin-bottom: 1rem;
+}
+
+.support-form__description {
+  display: block;
+}
+
+.support-form__textarea {
+  min-height: 10rem;
+  resize: vertical;
+  margin-top: 0.25rem;
+}
+
+.support-form__submit {
+  margin-top: 0.5rem;
+}
--- a/frontend/src/pages/support/Support.jsx
+++ b/frontend/src/pages/support/Support.jsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { useAuth } from "../../contexts/AuthContext";
+import Input from "../../components/Input";
+import Button from "../../components/Button";
+import { submitSupportRequest } from "../../api/support";
+import "./Support.css";
+
+const EMAIL_MAX = 320;
+const DESCRIPTION_MAX = 8000;
+const DESCRIPTION_PATTERN = /^[a-zA-Z0-9\s]+$/;
+
+function validateEmail(value) {
+  const v = value.trim();
+  if (!v) return "Email is required.";
+  if (v.length > EMAIL_MAX) return "Email is too long.";
+  const ok =
+    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/.test(
+      v,
+    );
+  if (!ok) return "Enter a valid email address.";
+  return null;
+}
+
+function validateDescription(value) {
+  const t = value.trim();
+  if (!t) return "Description of issue is required.";
+  if (t.length > DESCRIPTION_MAX) return "Description is too long.";
+  if (!DESCRIPTION_PATTERN.test(t)) {
+    return "Use only letters, numbers, and spaces (no special characters).";
+  }
+  return null;
+}
+
+export default function Support() {
+  const { currentUser } = useAuth();
+  const [email, setEmail] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState(null);
+  const [success, setSuccess] = useState(false);
+  const [sending, setSending] = useState(false);
+
+  useEffect(() => {
+    if (currentUser?.email) {
+      setEmail(currentUser.email);
+    }
+  }, [currentUser?.email]);
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError(null);
+    setSuccess(false);
+
+    const emailErr = validateEmail(email);
+    if (emailErr) {
+      setError(emailErr);
+      return;
+    }
+    const descErr = validateDescription(description);
+    if (descErr) {
+      setError(descErr);
+      return;
+    }
+
+    setSending(true);
+    try {
+      await submitSupportRequest({
+        email: email.trim(),
+        description: description.trim(),
+      });
+      setSuccess(true);
+      setDescription("");
+    } catch (err) {
+      setError(err.message || "Something went wrong.");
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="support-page page">
+      <h1 className="support-page__title">Contact support</h1>
+      <p className="support-page__intro">
+        Describe your issue below. We will reply to the email address you
+        provide.
+      </p>
+
+      {error && <div className="alert alert--error support-page__alert">{error}</div>}
+      {success && (
+        <div className="alert alert--success support-page__alert">
+          Your message was sent. Thank you.
+        </div>
+      )}
+
+      <form className="support-form" onSubmit={handleSubmit} noValidate>
+        <Input
+          label="Email"
+          type="email"
+          value={email}
+          onChange={setEmail}
+          autoComplete="email"
+          required
+        />
+        <label className="form-field support-form__description">
+          <div className="input__label">Description of Issue</div>
+          <textarea
+            className="form-control support-form__textarea"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={8}
+            maxLength={DESCRIPTION_MAX}
+            placeholder="Letters, numbers, and spaces only"
+            aria-required="true"
+          />
+        </label>
+        <Button type="submit" disabled={sending} className="support-form__submit">
+          {sending ? "Sending…" : "Send"}
+        </Button>
+      </form>
+    </div>
+  );
+}
--- a/frontend/src/pages/terms/Terms.css
+++ b/frontend/src/pages/terms/Terms.css
@@ -0,0 +1,29 @@
+.tos-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  color: var(--color-text);
+}
+
+.tos-container h1 {
+  font-size: 2rem;
+  font-weight: 200;
+  margin-bottom: 1.25rem;
+}
+
+.tos-para {
+  margin-bottom: 1.25rem;
+  font-size: 1.35rem;
+  font-weight: 200;
+  line-height: 1.65;
+  color: var(--color-text-muted);
+}
+
+.tos-para:last-child {
+  margin-bottom: 0;
+}
+
+.tos-para strong {
+  font-weight: 700;
+  color: var(--color-text);
+}
--- a/frontend/src/pages/terms/Terms.jsx
+++ b/frontend/src/pages/terms/Terms.jsx
@@ -0,0 +1,141 @@
+import "./Terms.css";
+
+export default function Terms() {
+  return (
+    <div className="tos-container">
+      <h1>Terms of Service And Use</h1>
+      <p className="tos-para">
+        YOU SHOULD READ THESE TERMS OF SERVICE AND USE BEFORE USING THIS WEB
+        SITE.
+      </p>
+      <p className="tos-para">
+        By using the Website, you acknoweldge that you have read this, and
+        that you understand it. The Website which is located at the domain
+        Koin Ping.com and Koin Ping.ai (&quot;Koin Ping&quot;) and/or any mobile
+        apps available for download (collectively, the &quot;Web Site,&quot;
+        &quot;Websites&quot; and &quot;Apps&quot;) are governed by these Terms
+        of Service and Use (the &quot;Agreement,&quot; &quot;Terms of
+        Service&quot;, or &quot;TOS&quot;). Any reference herein to the
+        Website, Websites, and/or Apps is intended, and shall be construed, to
+        pertain to one, all, or any of them, indivuidually and collectively.
+      </p>
+      <p className="tos-para">
+        By using the Web Site and Apps, you (&quot;you&quot; or &quot;User&quot;)
+        signify your acceptance of this Agreement and your acknowledgement that
+        all information that you provide, directly or indirectly, through the Web
+        Sites and App will be managed in accordance with the Privacy Notice. IF
+        YOU DO NOT ACCEPT THESE TERMS OF SERVICE AND USE, YOU ARE NOT AUTHORIZED
+        TO ACCESS OR USE THE WEB SITE OR APPS.
+      </p>
+      <p className="tos-para">
+        <strong>Communications.</strong> You agree that by providing your contact information,
+        you consent to receiving communication, in connection with your
+        Membership subscription. This may include communication about your
+        account, features, and services via e-email, push notification, phone,
+        or text message (including by an automatic telephone dialing system
+        and/or with an artificial or pre-recorded voice) at any of the phone
+        numbers provided by you or on your behalf. Standard text messaging
+        charges applied by your cell phone carrier may apply.
+      </p>
+      <p className="tos-para">
+        <strong>User Eligibility.</strong> The Website should only be accessed and used by
+        individuals who agree to be bound by these Terms of Use and who are at
+        least 18 years of age. The Websites may be accessible worldwide;
+        however, the Websites are intended for use only in the USA and Canada.
+        If you access/use the Websites from outside the USA or Canada, you do
+        so at your own risk and are responsible for complying with the laws
+        and regulations of the territory from which you access/use the
+        Websites.
+      </p>
+      <p className="tos-para">
+        <strong>Intellectual property rights.</strong> The Web Site and the information, computer
+        code, and related functionality appearing, featured or otherwise
+        displayed on the Websites are owned by Koin Ping, its affiliates, and
+        their respective licensors or other third parties and protected under
+        the copyright, trademark and other laws of the United States and other
+        countries sand international treaty provisions.
+      </p>
+      <p className="tos-para">
+        <strong>Limited license.</strong> Koin Ping grants to you a limited, non-exclusive,
+        non-transferable license to use the Web Site in strict accordance with
+        these Terms of Service and Use and the instructions provided by us on
+        the Web Site. The materials provided on the Web Site, including,
+        without limitation, the Information, computer code, and related
+        functionality, are for your personal use only. Except as may be
+        explicitly permitted through the Websites, you may not copy, modify,
+        upload, republish, distribute, display, post, license, create
+        derivative works from, or transmit anything you obtain from the Web
+        Sites, including anything you download from the Websites, unless you
+        first obtain our written consent.
+      </p>
+      <p className="tos-para">
+        Any rights not expressly granted herein are reserved to Koin Ping and
+        its affiliates. You may not remove, obscure, or otherwise deface
+        proprietary notices appearing on the Web Site, or any content or
+        Information. Any unauthorized use of the Websites or its contents may
+        violate copyright laws, trademark laws, the laws of privacy and
+        publicity and communications regulations and statutes.
+      </p>
+      <p className="tos-para">
+        <strong>Restrictions on Use.</strong> As a condition of your use of the Websites, you
+        warrant that you will not use the Websites for any purpose that is
+        unlawful or prohibited by these terms, conditions and notices. You may
+        not use the Websites in any way that could damage, disable, overburden
+        or impair the Websites or interfere with any other party&apos;s use and
+        enjoyment of the Websites. You may not obtain or attempt to obtain any
+        materials or information through any means not intentionally made
+        available or provided for through the Web Site.
+      </p>
+      <p className="tos-para">
+        <strong>Revocation of privileges.</strong> You agree that your use of the Websites may
+        be suspended or terminated immediately upon receipt of any notice which
+        alleges that you have used the Websites in violation of these Terms of
+        Use and/or for any purpose that violates any local, state, federal or
+        law of the USA or other jurisdictions, including, but not limited to,
+        the posting of information that may violate third party rights, may
+        defame a third party, may be obscene or pornographic, may harass or
+        assault others, or may violate any laws, rules or regulations,
+        including, hacking or other criminal regulations. You understand that
+        actions in violation of these Terms of Use may subject you to serious
+        civil and criminal legal penalties and Koin Ping reserves the right to
+        pursue penalties and other remedies to the fullest extent of the law to
+        protect our rights.
+      </p>
+      <p className="tos-para">
+        <strong>No Warranties.</strong> Koin Ping MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT
+        THE WEB SITE, THE SUITABILITY OF THE INFORMATION CONTAINED ON OR
+        RECEIVED THROUGH THE WEB SITE, OR ANY SERVICES OR PRODUCTS RECEIVED
+        THROUGH THE WEB SITE. ALL INFORMATION AND USE OF THE WEB SITE ARE
+        PROVIDED &quot;AS IS&quot; WITHOUT WARRANTY OF ANY KIND. Koin Ping HEREBY
+        EXPRESSLY DISCLAIMS ALL WARRANTIES WITH REGARD TO THE Websites, THE
+        INFORMATION CONTAINED ON OR RECEIVED THROUGH USE OF THE Websites AND
+        ANY SERVICES OR PRODUCTS RECEIVED THROUGH THE Websites, INCLUDING ALL
+        EXPRESS, STATUTORY AND IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS
+        FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT. Koin Ping DOES
+        NOT WARRANT THAT THE CONTENTS OR ANY INFORMATION RECEIVED THROUGH THE
+        Websites ARE ACCURATE, RELIABLE OR CORRECT; THAT THE Websites WILL BE
+        AVAILABLE AT ANY PARTICULAR TIME OR LOCATION; THAT ANY DEFECTS OR
+        ERRORS WILL BE CORRECTED; OR THAT THE CONTENTS OR ANY INFORMATION
+        RECEIVED THROUGH THE Websites ARE FREE OF VIRUSES OR OTHER DESTRUCTIVE
+        OR HARMFUL COMPONENTS. YOUR USE OF THE Websites IS SOLELY AT YOUR OWN
+        RISK. USER EXPRESSLY AGREES THAT IT HAS RELIED ON NO WARRANTIES,
+        REPRESENTATIONS OR STATEMENTS OTHER THAN IN THIS AGREEMENT.
+      </p>
+      <p className="tos-para">
+        <strong>Limitation of Liability.</strong> UNDER NO CIRCUMSTANCES SHALL Koin Ping BE
+        LIABLE FOR ANY DAMAGES, INCLUDING, WITHOUT LIMITATION, DIRECT,
+        INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES OR LOST
+        PROFITS THAT RESULT FROM, OR ARISE OUT OF OR IN CONNECTION WITH THE USE
+        OF, OR INABILITY TO USE THE Websites, THE INFORMATION CONTAINED ON OR
+        RECEIVED THROUGH USE OF THE Websites, OR ANY SERVICES OR PRODUCTS
+        RECEIVED THROUGH THE Websites. THIS LIMITATION APPLIES WHETHER THE
+        ALLEGED LIABILITY IS BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT
+        LIABILITY OR ANY OTHER BASIS, EVEN IF Koin Ping HAS BEEN ADVISED OF THE
+        POSSIBILITY OF SUCH DAMAGES. BECAUSE SOME JURISDICTIONS DO NOT ALLOW THE
+        EXCLUSION OR LIMITATION OF INCIDENTAL OR CONSEQUENTIAL DAMAGES, Koin
+        Ping&apos;s LIABILITY IN SUCH JURISDICTIONS SHALL BE LIMITED TO THE
+        MAXIMUM EXTENT PERMITTED BY THE LAW OF YOUR JURISDICTION.
+      </p>
+    </div>
+  );
+}
--- a/frontend/src/pages/user_account/Account.css
+++ b/frontend/src/pages/user_account/Account.css
@@ -0,0 +1,77 @@
+.account-page h1 {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.account__section-title {
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-bottom: 1.25rem;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border-light);
+  padding-bottom: 0.5rem;
+}
+
+.account__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.account__row--last {
+  border-bottom: none;
+}
+
+.account__label {
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+}
+
+.account__value {
+  color: var(--color-text);
+  font-size: 1.1rem;
+  text-align: right;
+}
+
+.account__uuid {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+  word-break: break-all;
+  max-width: 60%;
+}
+
+.account__status {
+  font-weight: 600;
+}
+
+.account__status--active {
+  color: var(--color-success-text);
+}
+
+.account__status--canceled {
+  color: var(--color-danger);
+}
+
+.account__status--canceling {
+  color: var(--color-warning);
+}
+
+.account__status--past_due {
+  color: var(--color-error);
+}
+
+.account__portal-section {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.account__portal-hint {
+  margin-top: 0.5rem;
+}
+
+.account__password-form {
+  max-width: 400px;
+}
--- a/frontend/src/pages/user_account/Account.jsx
+++ b/frontend/src/pages/user_account/Account.jsx
@@ -0,0 +1,226 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { updatePassword } from "firebase/auth";
+import { auth } from "../../firebase/config";
+import { getAccount, createPortalSession } from "../../api/account";
+import "./Account.css";
+
+const TIER_LABELS = {
+  free: "Free Trial",
+  premium: "Premium",
+  pro: "Pro",
+};
+
+export default function Account() {
+  const navigate = useNavigate();
+  const [account, setAccount] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordMsg, setPasswordMsg] = useState(null);
+  const [passwordErr, setPasswordErr] = useState(null);
+  const [changingPassword, setChangingPassword] = useState(false);
+
+  const [portalLoading, setPortalLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchAccount() {
+      try {
+        const data = await getAccount();
+        setAccount(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchAccount();
+  }, []);
+
+  async function handlePasswordChange(e) {
+    e.preventDefault();
+    setPasswordMsg(null);
+    setPasswordErr(null);
+
+    if (newPassword.length < 6) {
+      setPasswordErr("Password must be at least 6 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordErr("Passwords do not match");
+      return;
+    }
+
+    try {
+      setChangingPassword(true);
+      await updatePassword(auth.currentUser, newPassword);
+      setPasswordMsg("Password updated successfully");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setPasswordErr(err.message);
+    } finally {
+      setChangingPassword(false);
+    }
+  }
+
+  async function handleManageSubscription() {
+    try {
+      setPortalLoading(true);
+      const { url } = await createPortalSession();
+      window.location.href = url;
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setPortalLoading(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="page">Loading...</div>;
+  }
+
+  if (error && !account) {
+    return <div className="page text-error">Error: {error}</div>;
+  }
+
+  const tier = account.subscription_tier || "free";
+  const isCanceling = account.cancel_at_period_end;
+  const statusLabel = isCanceling
+    ? "Canceling"
+    : account.subscription_status === "active"
+      ? "Active"
+      : account.subscription_status.charAt(0).toUpperCase() +
+        account.subscription_status.slice(1);
+
+  const canUpgrade = tier === "free" || tier === "premium";
+  const hasPaidSub = tier !== "free";
+
+  return (
+    <div className="page account-page">
+      <h1 className="mb-lg">Account</h1>
+
+      {error && <div className="alert alert--error mb-lg">{error}</div>}
+
+      {/* ── Profile Section ──────────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Profile</h2>
+        <div className="account__row">
+          <span className="account__label">Email</span>
+          <span className="account__value">{account.email}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">User Name</span>
+          <span className="account__value">{account.user_name}</span>
+        </div>
+        <div className="account__row account__row--last">
+          <span className="account__label">User ID</span>
+          <span className="account__value text-mono account__uuid">{account.user_id}</span>
+        </div>
+      </div>
+
+      {/* ── Subscription Section ─────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Subscription</h2>
+        <div className="account__row">
+          <span className="account__label">Plan</span>
+          <span className="account__value">{TIER_LABELS[tier] || account.subscription_plan}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">Status</span>
+          <span className={`account__value account__status account__status--${isCanceling ? "canceling" : account.subscription_status}`}>
+            {statusLabel}
+          </span>
+        </div>
+        {account.member_since && (
+          <div className="account__row">
+            <span className="account__label">Member Since</span>
+            <span className="account__value">{account.member_since}</span>
+          </div>
+        )}
+        {account.next_billing_date && !isCanceling && (
+          <div className="account__row">
+            <span className="account__label">Next Billing Date</span>
+            <span className="account__value">{account.next_billing_date}</span>
+          </div>
+        )}
+        {isCanceling && account.period_end_date && (
+          <div className="account__row">
+            <span className="account__label">Access Until</span>
+            <span className="account__value">{account.period_end_date}</span>
+          </div>
+        )}
+
+        {isCanceling && (
+          <div className="alert alert--warning mt-md">
+            Your subscription has been canceled and will not renew.
+            You have full access until {account.period_end_date}.
+          </div>
+        )}
+
+        <div className="account__portal-section">
+          {canUpgrade && (
+            <button
+              onClick={() => navigate("/subscribe")}
+              className="btn btn--primary"
+            >
+              Upgrade Plan
+            </button>
+          )}
+          {hasPaidSub && (
+            <button
+              onClick={handleManageSubscription}
+              disabled={portalLoading}
+              className="btn btn--ghost"
+            >
+              {portalLoading ? "Redirecting..." : "Manage Subscription"}
+            </button>
+          )}
+          <p className="text-dimmed text-sm account__portal-hint">
+            {hasPaidSub
+              ? "Cancel subscription, update payment method, or view invoices via Stripe."
+              : "Upgrade to unlock more addresses, alert types, and notification channels."}
+          </p>
+        </div>
+      </div>
+
+      {/* ── Change Password Section ──────────────── */}
+      <div className="section">
+        <h2 className="account__section-title">Change Password</h2>
+
+        {passwordMsg && <div className="alert alert--success mb-md">{passwordMsg}</div>}
+        {passwordErr && <div className="alert alert--error mb-md">{passwordErr}</div>}
+
+        <form onSubmit={handlePasswordChange} className="account__password-form">
+          <div className="form-field">
+            <label className="form-label">New Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <div className="form-field form-field--last">
+            <label className="form-label">Confirm Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <button type="submit" disabled={changingPassword} className="btn btn--primary">
+            {changingPassword ? "Updating..." : "Update Password"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src"
+  ]
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 3000,
+        proxy: {
+            "/v1": {
+                target: "http://localhost:3001",
+                changeOrigin: true,
+            },
+        },
+    },
+});