addition Stripe payment integration work

Feat discrete accounts

backend-go/README.md

@@ -2,7 +2,6 @@ Start DB:
 
 brew services start postgresql@15
 
-
 From the backend-go directory, you have a few options:
 
 Option 1: Single command (both API + poller)
@@ -13,3 +12,9 @@ Terminal 1 (API server):
 cd /Users/kjannette/workspace/koin_ping_0.2.0/backend-go go run ./cmd/api
 Terminal 2 (Poller):
 cd /Users/kjannette/workspace/koin_ping_0.2.0/backend-go go run ./cmd/poller
+
+make run — Builds and runs the API server.
+make dev — Runs the API server with auto-reload via air (falls back to go run if air isn't installed).
+make poller — Builds and runs the poller.
+make poller-dev — Runs the poller with auto-reload.
+make dev-all — Runs both the API and poller concurrently.

backend-go/cmd/api/main.go

@@ -44,6 +44,7 @@ func main() {
 
 	defer database.Close()
 
+	userModel := models.NewUserModel(pool)
 	addressModel := models.NewAddressModel(pool)
 	alertRuleModel := models.NewAlertRuleModel(pool)
 	alertEventModel := models.NewAlertEventModel(pool)
@@ -60,6 +61,15 @@ func main() {
 	notifConfigHandler := handlers.NewNotificationConfigHandler(notifConfigModel, cfg)
 	emailDigestHandler := handlers.NewEmailDigestHandler(emailDigestSvc, notifConfigModel)
 	statusHandler := handlers.NewStatusHandler(checkpointModel)
+	stripeHandler := handlers.NewStripeHandler(userModel, cfg)
+
+	authenticate := middleware.Authenticate(userModel)
+	requireSub := middleware.RequireSubscription(userModel)
+
+	// authAndSub chains authentication + subscription check for protected routes.
+	authAndSub := func(h http.Handler) http.Handler {
+		return authenticate(requireSub(h))
+	}
 
 	mux := http.NewServeMux()
 	b := cfg.APIBasePath // e.g. "/v1"
@@ -68,45 +78,54 @@ func main() {
 	mux.HandleFunc("GET "+b+"/health", handlers.HealthCheck)
 	mux.HandleFunc("GET "+b+"/status", statusHandler.GetStatus)
 
-	// Authenticated routes — addresses
+	// Stripe webhook (public — called by Stripe, not authenticated)
+	mux.HandleFunc("POST "+b+"/stripe/webhook", stripeHandler.HandleWebhook)
+
+	// Stripe routes (auth required, NO subscription required)
+	mux.Handle("POST "+b+"/stripe/create-checkout-session",
+		authenticate(http.HandlerFunc(stripeHandler.CreateCheckoutSession)))
+	mux.Handle("GET "+b+"/stripe/subscription-status",
+		authenticate(http.HandlerFunc(stripeHandler.GetSubscriptionStatus)))
+
+	// Authenticated + subscribed routes — addresses
 	mux.Handle("POST "+b+"/addresses",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.Create)))
+		authAndSub(http.HandlerFunc(addressHandler.Create)))
 	mux.Handle("GET "+b+"/addresses",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.List)))
+		authAndSub(http.HandlerFunc(addressHandler.List)))
 	mux.Handle("DELETE "+b+"/addresses/{addressId}",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.Remove)))
+		authAndSub(http.HandlerFunc(addressHandler.Remove)))
 	mux.Handle("PATCH "+b+"/addresses/{addressId}",
-		middleware.Authenticate(http.HandlerFunc(addressHandler.UpdateLabel)))
+		authAndSub(http.HandlerFunc(addressHandler.UpdateLabel)))
 
-	// Authenticated routes for alert rules
+	// Authenticated + subscribed routes — alert rules
 	mux.Handle("POST "+b+"/addresses/{addressId}/alerts",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.Create)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.Create)))
 	mux.Handle("GET "+b+"/addresses/{addressId}/alerts",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.ListByAddress)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.ListByAddress)))
 	mux.Handle("PATCH "+b+"/alerts/{alertId}",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.UpdateStatus)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.UpdateStatus)))
 	mux.Handle("DELETE "+b+"/alerts/{alertId}",
-		middleware.Authenticate(http.HandlerFunc(alertRuleHandler.Remove)))
+		authAndSub(http.HandlerFunc(alertRuleHandler.Remove)))
 
-	// Authenticated routes — alert events
+	// Authenticated + subscribed routes — alert events
 	mux.Handle("GET "+b+"/alert-events",
-		middleware.Authenticate(http.HandlerFunc(alertEventHandler.List)))
+		authAndSub(http.HandlerFunc(alertEventHandler.List)))
 
-	// Authenticated routes — notification config
+	// Authenticated + subscribed routes — notification config
 	mux.Handle("GET "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.GetConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.GetConfig)))
 	mux.Handle("PUT "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.UpdateConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.UpdateConfig)))
 	mux.Handle("DELETE "+b+"/notification-config",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.DeleteConfig)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.DeleteConfig)))
 	mux.Handle("POST "+b+"/notification-config/test",
-		middleware.Authenticate(http.HandlerFunc(notifConfigHandler.TestChannels)))
+		authAndSub(http.HandlerFunc(notifConfigHandler.TestChannels)))
 
-	// Authenticated routes — email digest
+	// Authenticated + subscribed routes — email digest
 	mux.Handle("POST "+b+"/email/setup",
-		middleware.Authenticate(http.HandlerFunc(emailDigestHandler.SetupEmail)))
+		authAndSub(http.HandlerFunc(emailDigestHandler.SetupEmail)))
 	mux.Handle("POST "+b+"/email/digest",
-		middleware.Authenticate(http.HandlerFunc(emailDigestHandler.SendDigest)))
+		authAndSub(http.HandlerFunc(emailDigestHandler.SendDigest)))
 
 	handler := corsMiddleware(mux)
 

backend-go/go.mod

@@ -44,6 +44,7 @@ require (
 	github.com/planetscale/vtprotobuf v0.6.1-0.20240319094008-0393e58bdf10 // indirect
 	github.com/resend/resend-go/v3 v3.1.1 // indirect
 	github.com/spiffe/go-spiffe/v2 v2.6.0 // indirect
+	github.com/stripe/stripe-go/v82 v82.5.1 // indirect
 	go.opentelemetry.io/auto/sdk v1.2.1 // indirect
 	go.opentelemetry.io/contrib/detectors/gcp v1.39.0 // indirect
 	go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.61.0 // indirect

backend-go/go.sum

@@ -101,6 +101,8 @@ github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UV
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/stripe/stripe-go/v82 v82.5.1 h1:05q6ZDKoe8PLMpQV072obF74HCgP4XJeJYoNuRSX2+8=
+github.com/stripe/stripe-go/v82 v82.5.1/go.mod h1:majCQX6AfObAvJiHraPi/5udwHi4ojRvJnnxckvHrX8=
 github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 go.opentelemetry.io/auto/sdk v1.2.1 h1:jXsnJ4Lmnqd11kwkBV2LgLoFMZKizbCi5fNZ/ipaZ64=
 go.opentelemetry.io/auto/sdk v1.2.1/go.mod h1:KRTj+aOaElaLi+wW1kO/DZRXwkF4C5xPbEe3ZiIhN7Y=

backend-go/infra/migrations/005_create_users_table.sql

@@ -0,0 +1,13 @@
+-- Migration 005: Create users table with UUID primary key
+-- This establishes a local user record for each Firebase-authenticated user.
+
+CREATE TABLE IF NOT EXISTS users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  firebase_uid VARCHAR(128) NOT NULL UNIQUE,
+  email VARCHAR(255) NOT NULL,
+  display_name VARCHAR(255),
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_users_firebase_uid ON users(firebase_uid);

backend-go/infra/migrations/006_migrate_user_ids_to_uuid.sql

@@ -0,0 +1,73 @@
+-- Migration 006: Migrate user_id columns from Firebase UID strings to user UUIDs
+--
+-- Prerequisites: migration 005 (users table) must be applied first.
+-- This migration backfills the users table from existing data, then swaps the
+-- VARCHAR user_id columns for UUID foreign keys referencing users(id).
+
+BEGIN;
+
+-- 1. Backfill users table from existing Firebase UIDs in addresses
+INSERT INTO users (firebase_uid, email)
+  SELECT DISTINCT user_id, ''
+  FROM addresses
+  WHERE user_id IS NOT NULL
+ON CONFLICT (firebase_uid) DO NOTHING;
+
+-- 2. Backfill from notification configs (catches users with configs but no addresses)
+INSERT INTO users (firebase_uid, email)
+  SELECT DISTINCT user_id, ''
+  FROM user_notification_configs
+  WHERE user_id IS NOT NULL
+ON CONFLICT (firebase_uid) DO NOTHING;
+
+-- ============================================================
+-- 3. Migrate addresses.user_id from VARCHAR to UUID
+-- ============================================================
+
+ALTER TABLE addresses ADD COLUMN user_uuid UUID;
+
+UPDATE addresses a
+SET user_uuid = u.id
+FROM users u
+WHERE u.firebase_uid = a.user_id;
+
+-- Drop old constraints and column
+ALTER TABLE addresses DROP CONSTRAINT IF EXISTS addresses_user_id_address_key;
+DROP INDEX IF EXISTS idx_addresses_user_id;
+ALTER TABLE addresses DROP COLUMN user_id;
+
+-- Rename and constrain
+ALTER TABLE addresses RENAME COLUMN user_uuid TO user_id;
+ALTER TABLE addresses ALTER COLUMN user_id SET NOT NULL;
+ALTER TABLE addresses ADD CONSTRAINT fk_addresses_user
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+ALTER TABLE addresses ADD CONSTRAINT addresses_user_id_address_key
+  UNIQUE (user_id, address);
+CREATE INDEX idx_addresses_user_id ON addresses(user_id);
+
+-- ============================================================
+-- 4. Migrate user_notification_configs.user_id from VARCHAR to UUID
+-- ============================================================
+
+-- Drop the PK first (it's on user_id)
+ALTER TABLE user_notification_configs DROP CONSTRAINT IF EXISTS user_notification_configs_pkey;
+DROP INDEX IF EXISTS idx_notification_configs_enabled;
+
+ALTER TABLE user_notification_configs ADD COLUMN user_uuid UUID;
+
+UPDATE user_notification_configs nc
+SET user_uuid = u.id
+FROM users u
+WHERE u.firebase_uid = nc.user_id;
+
+ALTER TABLE user_notification_configs DROP COLUMN user_id;
+ALTER TABLE user_notification_configs RENAME COLUMN user_uuid TO user_id;
+ALTER TABLE user_notification_configs ALTER COLUMN user_id SET NOT NULL;
+ALTER TABLE user_notification_configs ADD CONSTRAINT user_notification_configs_pkey
+  PRIMARY KEY (user_id);
+ALTER TABLE user_notification_configs ADD CONSTRAINT fk_notification_configs_user
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE;
+CREATE INDEX idx_notification_configs_enabled
+  ON user_notification_configs(notification_enabled);
+
+COMMIT;

backend-go/infra/migrations/007_add_stripe_to_users.sql

@@ -0,0 +1,8 @@
+-- Migration 007: Add Stripe subscription fields to users table
+
+ALTER TABLE users ADD COLUMN IF NOT EXISTS stripe_customer_id VARCHAR(255);
+ALTER TABLE users ADD COLUMN IF NOT EXISTS stripe_subscription_id VARCHAR(255);
+ALTER TABLE users ADD COLUMN IF NOT EXISTS subscription_status VARCHAR(50) DEFAULT 'none';
+ALTER TABLE users ADD COLUMN IF NOT EXISTS subscription_created_at TIMESTAMP;
+
+CREATE INDEX IF NOT EXISTS idx_users_stripe_customer_id ON users(stripe_customer_id);

backend-go/infra/schema.sql

@@ -4,15 +4,28 @@ DROP TABLE IF EXISTS alert_rules CASCADE;
 DROP TABLE IF EXISTS address_checkpoints CASCADE;
 DROP TABLE IF EXISTS user_notification_configs CASCADE;
 DROP TABLE IF EXISTS addresses CASCADE;
+DROP TABLE IF EXISTS users CASCADE;
+
+CREATE TABLE users (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  firebase_uid VARCHAR(128) NOT NULL UNIQUE,
+  email VARCHAR(255) NOT NULL,
+  display_name VARCHAR(255),
+  stripe_customer_id VARCHAR(255),
+  stripe_subscription_id VARCHAR(255),
+  subscription_status VARCHAR(50) DEFAULT 'none',
+  subscription_created_at TIMESTAMP,
+  created_at TIMESTAMP DEFAULT NOW(),
+  updated_at TIMESTAMP DEFAULT NOW()
+);
 
 CREATE TABLE addresses (
   id SERIAL PRIMARY KEY,
-  user_id VARCHAR(128) NOT NULL,       -- Firebase user ID (multi-user support)
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
   address VARCHAR(42) NOT NULL,        -- Ethereum address format (0x + 40 hex chars)
   label VARCHAR(255),                  -- Optional human-readable label
   created_at TIMESTAMP DEFAULT NOW(),
 
-  -- Unique users can track the same address independently
   UNIQUE(user_id, address)
 );
 
@@ -51,7 +64,7 @@ CREATE TABLE address_checkpoints (
 );
 
 CREATE TABLE user_notification_configs (
-  user_id VARCHAR(128) PRIMARY KEY,
+  user_id UUID PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
   discord_webhook_url TEXT,            -- Discord webhook URL (nullable)
   telegram_chat_id VARCHAR(128),       -- Telegram chat ID (nullable)
   telegram_bot_token VARCHAR(255),     -- Telegram bot token (nullable)
@@ -63,6 +76,8 @@ CREATE TABLE user_notification_configs (
 );
 
 -- Create indexes for common queries
+CREATE INDEX idx_users_firebase_uid ON users(firebase_uid);
+CREATE INDEX idx_users_stripe_customer_id ON users(stripe_customer_id);
 CREATE INDEX idx_addresses_user_id ON addresses(user_id);
 CREATE INDEX idx_alert_rules_address_id ON alert_rules(address_id);
 CREATE INDEX idx_alert_rules_enabled ON alert_rules(enabled);

backend-go/internal/config/config.go

@@ -32,6 +32,11 @@ type Config struct {
 	ResendAPIKey         string
 	EmailFrom            string
 	DigestIntervalHours  int
+	StripeSecretKey      string
+	StripeWebhookSecret  string
+	StripePriceID        string
+	StripePublishableKey string
+	FrontendURL          string
 }
 
 // Load reads configuration from environment variables and returns a Config.
@@ -52,6 +57,11 @@ func Load() (*Config, error) {
 		ResendAPIKey:        os.Getenv("RESEND_API_KEY"),
 		EmailFrom:           getEnv("EMAIL_FROM", "Koin Ping <alerts@koinping.com>"),
 		DigestIntervalHours:  getEnvInt("DIGEST_INTERVAL_HOURS", defaultDigestIntervalHours),
+		StripeSecretKey:      os.Getenv("STRIPE_SECRET_KEY"),
+		StripeWebhookSecret:  os.Getenv("STRIPE_WEBHOOK_SECRET"),
+		StripePriceID:        os.Getenv("STRIPE_PRICE_ID"),
+		StripePublishableKey: os.Getenv("STRIPE_PUBLISHABLE_KEY"),
+		FrontendURL:          getEnv("FRONTEND_URL", "http://localhost:3000"),
 	}
 
 	if cfg.PollIntervalMS < minPollIntervalMS {

backend-go/internal/domain/types.go

@@ -2,6 +2,19 @@ package domain
 
 import "time"
 
+type User struct {
+	ID                    string     `json:"id"`
+	FirebaseUID           string     `json:"-"`
+	Email                 string     `json:"email"`
+	DisplayName           *string    `json:"display_name"`           //nolint:tagliatelle
+	StripeCustomerID      *string    `json:"-"`
+	StripeSubscriptionID  *string    `json:"-"`
+	SubscriptionStatus    string     `json:"subscription_status"`    //nolint:tagliatelle
+	SubscriptionCreatedAt *time.Time `json:"subscription_created_at,omitempty"` //nolint:tagliatelle
+	CreatedAt             time.Time  `json:"created_at"`             //nolint:tagliatelle
+	UpdatedAt             time.Time  `json:"updated_at"`             //nolint:tagliatelle
+}
+
 type Address struct {
 	ID        int       `json:"id"`
 	UserID    string    `json:"user_id"`    //nolint:tagliatelle

backend-go/internal/handlers/stripe.go

@@ -0,0 +1,199 @@
+package handlers
+
+import (
+	"encoding/json"
+	"io"
+	"log"
+	"net/http"
+
+	"github.com/stripe/stripe-go/v82"
+	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
+	"github.com/stripe/stripe-go/v82/webhook"
+
+	"github.com/kjannette/koin-ping/backend-go/internal/config"
+	"github.com/kjannette/koin-ping/backend-go/internal/middleware"
+	"github.com/kjannette/koin-ping/backend-go/internal/models"
+)
+
+const webhookMaxBodyBytes = 65536
+
+type StripeHandler struct {
+	users *models.UserModel
+	cfg   *config.Config
+}
+
+func NewStripeHandler(users *models.UserModel, cfg *config.Config) *StripeHandler {
+	stripe.Key = cfg.StripeSecretKey
+	return &StripeHandler{users: users, cfg: cfg}
+}
+
+// CreateCheckoutSession creates a Stripe Checkout session for the monthly subscription.
+func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	params := &stripe.CheckoutSessionParams{
+		Mode: stripe.String(string(stripe.CheckoutSessionModeSubscription)),
+		LineItems: []*stripe.CheckoutSessionLineItemParams{
+			{
+				Price:    stripe.String(h.cfg.StripePriceID),
+				Quantity: stripe.Int64(1),
+			},
+		},
+		SuccessURL:        stripe.String(h.cfg.FrontendURL + "/subscribe?payment=success&session_id={CHECKOUT_SESSION_ID}"),
+		CancelURL:         stripe.String(h.cfg.FrontendURL + "/subscribe?payment=cancelled"),
+		ClientReferenceID: stripe.String(userID),
+		CustomerEmail:     stripe.String(user.Email),
+	}
+
+	if user.StripeCustomerID != nil && *user.StripeCustomerID != "" {
+		params.Customer = user.StripeCustomerID
+		params.CustomerEmail = nil
+	}
+
+	s, err := checkoutsession.New(params)
+	if err != nil {
+		log.Printf("Failed to create Stripe checkout session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create checkout session")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
+}
+
+// GetSubscriptionStatus returns the current user's subscription state.
+func (h *StripeHandler) GetSubscriptionStatus(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]any{
+		"subscription_status":     user.SubscriptionStatus,
+		"subscription_created_at": user.SubscriptionCreatedAt,
+	})
+}
+
+// HandleWebhook processes incoming Stripe webhook events.
+// This endpoint must NOT require authentication (Stripe calls it directly).
+func (h *StripeHandler) HandleWebhook(w http.ResponseWriter, r *http.Request) {
+	payload, err := io.ReadAll(io.LimitReader(r.Body, webhookMaxBodyBytes))
+	if err != nil {
+		log.Printf("Error reading webhook body: %v", err)
+		w.WriteHeader(http.StatusServiceUnavailable)
+		return
+	}
+
+	sig := r.Header.Get("Stripe-Signature")
+	event, err := webhook.ConstructEvent(payload, sig, h.cfg.StripeWebhookSecret)
+	if err != nil {
+		log.Printf("Webhook signature verification failed: %v", err)
+		w.WriteHeader(http.StatusBadRequest)
+		return
+	}
+
+	switch event.Type {
+	case "checkout.session.completed":
+		h.handleCheckoutCompleted(r, event)
+	case "customer.subscription.updated":
+		h.handleSubscriptionUpdated(r, event)
+	case "customer.subscription.deleted":
+		h.handleSubscriptionDeleted(r, event)
+	default:
+		log.Printf("Unhandled Stripe event type: %s", event.Type)
+	}
+
+	w.WriteHeader(http.StatusOK)
+}
+
+func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Event) {
+	var session stripe.CheckoutSession
+	if err := json.Unmarshal(event.Data.Raw, &session); err != nil {
+		log.Printf("Error parsing checkout session: %v", err)
+		return
+	}
+
+	userID := session.ClientReferenceID
+	if userID == "" {
+		log.Println("Checkout session missing client_reference_id")
+		return
+	}
+
+	customerID := ""
+	if session.Customer != nil {
+		customerID = session.Customer.ID
+	}
+	subscriptionID := ""
+	if session.Subscription != nil {
+		subscriptionID = session.Subscription.ID
+	}
+
+	if customerID != "" {
+		if err := h.users.UpdateStripeCustomer(r.Context(), userID, customerID); err != nil {
+			log.Printf("Failed to save Stripe customer ID: %v", err)
+		}
+	}
+
+	if subscriptionID != "" && customerID != "" {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active"); err != nil {
+			log.Printf("Failed to activate subscription: %v", err)
+		}
+	}
+
+	log.Printf("Checkout completed for user %s, customer %s, subscription %s", userID, customerID, subscriptionID)
+}
+
+func (h *StripeHandler) handleSubscriptionUpdated(r *http.Request, event stripe.Event) {
+	var sub stripe.Subscription
+	if err := json.Unmarshal(event.Data.Raw, &sub); err != nil {
+		log.Printf("Error parsing subscription update: %v", err)
+		return
+	}
+
+	customerID := ""
+	if sub.Customer != nil {
+		customerID = sub.Customer.ID
+	}
+	if customerID == "" {
+		return
+	}
+
+	status := string(sub.Status)
+	if err := h.users.ActivateSubscription(r.Context(), customerID, sub.ID, status); err != nil {
+		log.Printf("Failed to update subscription status: %v", err)
+	}
+
+	log.Printf("Subscription %s updated to %s for customer %s", sub.ID, status, customerID)
+}
+
+func (h *StripeHandler) handleSubscriptionDeleted(r *http.Request, event stripe.Event) {
+	var sub stripe.Subscription
+	if err := json.Unmarshal(event.Data.Raw, &sub); err != nil {
+		log.Printf("Error parsing subscription deletion: %v", err)
+		return
+	}
+
+	customerID := ""
+	if sub.Customer != nil {
+		customerID = sub.Customer.ID
+	}
+	if customerID == "" {
+		return
+	}
+
+	if err := h.users.UpdateSubscriptionStatus(r.Context(), customerID, "canceled"); err != nil {
+		log.Printf("Failed to mark subscription canceled: %v", err)
+	}
+
+	log.Printf("Subscription canceled for customer %s", customerID)
+}

backend-go/internal/middleware/auth.go

@@ -9,6 +9,7 @@ import (
 	"strings"
 
 	fbauth "github.com/kjannette/koin-ping/backend-go/internal/firebase"
+	"github.com/kjannette/koin-ping/backend-go/internal/models"
 )
 
 type contextKey string
@@ -26,10 +27,14 @@ type errorResponse struct {
 func writeJSON(w http.ResponseWriter, status int, v interface{}) {
 	w.Header().Set("Content-Type", "application/json")
 	w.WriteHeader(status)
-	json.NewEncoder(w).Encode(v)
+	json.NewEncoder(w).Encode(v) //nolint:errcheck
 }
 
-func Authenticate(next http.Handler) http.Handler {
+// Authenticate verifies the Firebase ID token and auto-provisions a local user
+// record. The local user UUID (not the Firebase UID) is placed into context so
+// all downstream handlers use it as the canonical user identifier.
+func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			authHeader := r.Header.Get("Authorization")
 			if authHeader == "" || !strings.HasPrefix(authHeader, "Bearer ") {
@@ -72,17 +77,65 @@ func Authenticate(next http.Handler) http.Handler {
 				return
 			}
 
-		userID := decoded.UID
+			firebaseUID := decoded.UID
 			email, _ := decoded.Claims["email"].(string)
 
-		log.Printf("Token verified! User ID: %s, Email: %s", userID, email)
+			user, err := userModel.FindOrCreateByFirebaseUID(r.Context(), firebaseUID, email)
+			if err != nil {
+				log.Printf("Failed to provision local user for Firebase UID %s: %v", firebaseUID, err)
+				writeJSON(w, http.StatusInternalServerError, errorResponse{
+					Error:   "INTERNAL_ERROR",
+					Message: "Failed to initialize user account",
+				})
+				return
+			}
 
-		ctx := context.WithValue(r.Context(), UserIDKey, userID)
+			log.Printf("Token verified! User UUID: %s, Email: %s", user.ID, email)
+
+			ctx := context.WithValue(r.Context(), UserIDKey, user.ID)
 			ctx = context.WithValue(ctx, UserEmailKey, email)
 
 			next.ServeHTTP(w, r.WithContext(ctx))
 		})
 	}
+}
+
+// RequireSubscription blocks requests from users without an active subscription.
+// Must be applied after Authenticate.
+func RequireSubscription(userModel *models.UserModel) func(http.Handler) http.Handler {
+	return func(next http.Handler) http.Handler {
+		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			userID := GetUserID(r.Context())
+			if userID == "" {
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Authentication required",
+				})
+				return
+			}
+
+			user, err := userModel.GetByID(r.Context(), userID)
+			if err != nil || user == nil {
+				log.Printf("RequireSubscription: failed to load user %s: %v", userID, err)
+				writeJSON(w, http.StatusInternalServerError, errorResponse{
+					Error:   "INTERNAL_ERROR",
+					Message: "Failed to verify subscription",
+				})
+				return
+			}
+
+			if user.SubscriptionStatus != "active" && user.SubscriptionStatus != "trialing" {
+				writeJSON(w, http.StatusForbidden, errorResponse{
+					Error:   "SUBSCRIPTION_REQUIRED",
+					Message: "An active subscription is required to use this feature",
+				})
+				return
+			}
+
+			next.ServeHTTP(w, r)
+		})
+	}
+}
 
 func GetUserID(ctx context.Context) string {
 	if v, ok := ctx.Value(UserIDKey).(string); ok {

backend-go/internal/models/user.go

@@ -0,0 +1,89 @@
+package models
+
+import (
+	"context"
+	"errors"
+
+	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgxpool"
+	"github.com/kjannette/koin-ping/backend-go/internal/domain"
+)
+
+type UserModel struct {
+	pool *pgxpool.Pool
+}
+
+func NewUserModel(pool *pgxpool.Pool) *UserModel {
+	return &UserModel{pool: pool}
+}
+
+const userColumns = `id, firebase_uid, email, display_name,
+	stripe_customer_id, stripe_subscription_id, subscription_status,
+	subscription_created_at, created_at, updated_at`
+
+func scanUser(row pgx.Row) (*domain.User, error) {
+	var u domain.User
+	err := row.Scan(
+		&u.ID, &u.FirebaseUID, &u.Email, &u.DisplayName,
+		&u.StripeCustomerID, &u.StripeSubscriptionID, &u.SubscriptionStatus,
+		&u.SubscriptionCreatedAt, &u.CreatedAt, &u.UpdatedAt,
+	)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return nil, nil //nolint:nilnil
+		}
+		return nil, err
+	}
+	return &u, nil
+}
+
+// FindOrCreateByFirebaseUID returns the local user for a Firebase UID,
+// creating one if it doesn't exist yet. On conflict (returning user) the
+// updated_at timestamp is refreshed.
+func (m *UserModel) FindOrCreateByFirebaseUID(ctx context.Context, firebaseUID, email string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`INSERT INTO users (firebase_uid, email)
+		 VALUES ($1, $2)
+		 ON CONFLICT (firebase_uid) DO UPDATE SET updated_at = NOW()
+		 RETURNING `+userColumns,
+		firebaseUID, email,
+	)
+	return scanUser(row)
+}
+
+func (m *UserModel) GetByID(ctx context.Context, id string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`SELECT `+userColumns+` FROM users WHERE id = $1`, id,
+	)
+	return scanUser(row)
+}
+
+func (m *UserModel) UpdateStripeCustomer(ctx context.Context, userID, stripeCustomerID string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users SET stripe_customer_id = $2, updated_at = NOW() WHERE id = $1`,
+		userID, stripeCustomerID,
+	)
+	return err
+}
+
+func (m *UserModel) ActivateSubscription(ctx context.Context, stripeCustomerID, subscriptionID, status string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users
+		 SET stripe_subscription_id = $2,
+		     subscription_status = $3,
+		     subscription_created_at = COALESCE(subscription_created_at, NOW()),
+		     updated_at = NOW()
+		 WHERE stripe_customer_id = $1`,
+		stripeCustomerID, subscriptionID, status,
+	)
+	return err
+}
+
+func (m *UserModel) UpdateSubscriptionStatus(ctx context.Context, stripeCustomerID, status string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users SET subscription_status = $2, updated_at = NOW()
+		 WHERE stripe_customer_id = $1`,
+		stripeCustomerID, status,
+	)
+	return err
+}

frontend/src/App.jsx

@@ -16,7 +16,7 @@ export default function App() {
             <Routes>
                 <Route path="/login" element={<Login />} />
                 <Route path="/signup" element={<Signup />} />
-                <Route path="/onboarding" element={<Onboarding />} />
+                <Route path="/subscribe" element={<Onboarding />} />
                 <Route path="*" element={<Navigate to="/login" />} />
             </Routes>
         );
@@ -30,7 +30,7 @@ export default function App() {
                 <Route path="/addresses" element={<Addresses />} />
                 <Route path="/alerts" element={<Alerts />} />
                 <Route path="/alertevents" element={<AlertHistory />} />
-                <Route path="/onboarding" element={<Onboarding />} />
+                <Route path="/subscribe" element={<Onboarding />} />
                 <Route path="*" element={<Navigate to="/addresses" />} />
             </Routes>
         </div>

frontend/src/api/stripe.jsx

@@ -0,0 +1,27 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function createCheckoutSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-checkout-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create 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();
+}

frontend/src/components/AddressForm.jsx

@@ -37,7 +37,7 @@ export default function AddressForm({ onSubmit }) {
                 placeholder="Treasury, Cold Wallet, etc."
             />
 
-            <Button type="submit" disabled={!canSubmit}>
+            <Button type="submit" disabled={!canSubmit} className="mt-md">
                 Add Address
             </Button>
         </form>

frontend/src/components/AlertForm.css

@@ -0,0 +1,7 @@
+.alert-form__options {
+  margin-bottom: 1rem;
+}
+
+.alert-form__radio {
+  display: block;
+}

frontend/src/components/AlertForm.jsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import Input from "./Input";
 import Button from "./Button";
+import "./AlertForm.css";
 
 const ALERT_TYPES = [
     { value: "incoming_tx", label: "Incoming transaction" },
@@ -36,9 +37,9 @@ export default function AlertForm({ onSubmit }) {
 
     return (
         <form onSubmit={handleSubmit}>
-            <div style={{ marginBottom: "1rem" }}>
+            <div className="alert-form__options">
                 {ALERT_TYPES.map((opt) => (
-                    <label key={opt.value} style={{ display: "block" }}>
+                    <label key={opt.value} className="alert-form__radio">
                         <input
                             type="radio"
                             name="alertType"

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;
+}

frontend/src/components/Button.jsx

@@ -1,20 +1,19 @@
+import "./Button.css";
+
 export default function Button({
     children,
     onClick,
     disabled = false,
     type = "button",
+    variant = "primary",
+    className = "",
 }) {
     return (
         <button
             type={type}
             onClick={onClick}
             disabled={disabled}
-            style={{
-                padding: "0.5rem 1rem",
-                fontSize: "1rem",
-                cursor: disabled ? "not-allowed" : "pointer",
-                opacity: disabled ? 0.6 : 1,
-            }}
+            className={`btn btn--${variant} ${className}`}
         >
             {children}
         </button>

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);
+}

frontend/src/components/Input.jsx

@@ -1,3 +1,5 @@
+import "./Input.css";
+
 export default function Input({
     label,
     type = "text",
@@ -7,12 +9,12 @@ export default function Input({
     step,
     min,
     disabled = false,
+    required = false,
+    className = "",
 }) {
     return (
-        <label style={{ display: "block", marginBottom: "1rem" }}>
-            <div style={{ marginBottom: "0.25rem", fontSize: "0.9rem" }}>
-                {label}
-            </div>
+        <label className={`form-field ${className}`}>
+            <div className="input__label">{label}</div>
             <input
                 type={type}
                 value={value}
@@ -20,12 +22,9 @@ export default function Input({
                 step={step}
                 min={min}
                 disabled={disabled}
+                required={required}
                 onChange={(e) => onChange(e.target.value)}
-                style={{
-                    width: "100%",
-                    padding: "0.5rem",
-                    fontSize: "1rem",
-                }}
+                className="input__control"
             />
         </label>
     );

frontend/src/components/Navbar.css

@@ -0,0 +1,56 @@
+.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);
+}
+
+.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);
+}
+
+.navbar__user {
+  font-size: 1.275rem;
+  color: #777;
+}
+
+.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;
+}

frontend/src/components/Navbar.jsx

@@ -1,5 +1,6 @@
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import "./Navbar.css";
 
 const navLinks = [
   { to: "/addresses", label: "Addresses" },
@@ -14,43 +15,17 @@ export default function Navbar() {
   if (!currentUser) return null;
 
   return (
-    <nav style={{
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      padding: "1rem 2rem",
-      marginBottom: "1.5rem",
-      backgroundColor: "#1a1a1a",
-      borderBottom: "1px solid #333",
-    }}>
-      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-        <span style={{
-          fontWeight: 700,
-          fontSize: "1.4rem",
-          color: "#e62525",
-          marginRight: "2rem",
-          letterSpacing: "0.5px",
-        }}>
-          Koin Ping
-        </span>
-
-        <div style={{ display: "flex", gap: "0.25rem" }}>
+    <nav className="navbar">
+      <div className="flex flex--center gap-sm">
+        <span className="navbar__brand">Koin Ping</span>
+        <div className="navbar__links">
           {navLinks.map(({ to, label }) => {
             const isActive = location.pathname === to;
             return (
               <Link
                 key={to}
                 to={to}
-                style={{
-                  padding: "0.5rem 1.25rem",
-                  borderRadius: "6px",
-                  textDecoration: "none",
-                  fontSize: "1.425rem",
-                  fontWeight: isActive ? 600 : 200,
-                  color: isActive ? "#fff" : "#999",
-                  backgroundColor: isActive ? "#333" : "transparent",
-                  transition: "all 0.15s ease",
-                }}
+                className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
               >
                 {label}
               </Link>
@@ -59,24 +34,9 @@ export default function Navbar() {
         </div>
       </div>
 
-      <div style={{ display: "flex", alignItems: "center", gap: "1.25rem" }}>
-        <span style={{ fontSize: "1.275rem", color: "#777" }}>
-          {currentUser.email}
-        </span>
-        <button
-          onClick={logout}
-          style={{
-            padding: "0.4rem 1rem",
-            fontSize: "1.275rem",
-            fontWeight: 400,
-            backgroundColor: "transparent",
-            color: "#999",
-            border: "1px solid #444",
-            borderRadius: "6px",
-            cursor: "pointer",
-            transition: "all 0.15s ease",
-          }}
-        >
+      <div className="flex flex--center gap-lg">
+        <span className="navbar__user">{currentUser.email}</span>
+        <button onClick={logout} className="navbar__logout">
           Logout
         </button>
       </div>

frontend/src/index.css

@@ -1,5 +1,43 @@
 @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 {
@@ -21,13 +59,300 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: 'Nunito', sans-serif;
   font-weight: 200;
 }
 
-input, select, textarea, button {
+input,
+select,
+textarea,
+button {
   font-family: 'Nunito', sans-serif;
   font-size: 1rem;
   font-weight: 200;
 }
+
+/* ── 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;
+}

frontend/src/pages/Addresses.css

@@ -0,0 +1,30 @@
+.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;
+}

frontend/src/pages/Addresses.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import AddressForm from "../components/AddressForm";
 import { getAddresses, createAddress, deleteAddress, updateAddress } from "../api/addresses";
+import "./Addresses.css";
 
 export default function Addresses() {
     const [addresses, setAddresses] = useState([]);
@@ -9,7 +10,6 @@ export default function Addresses() {
     const [editingId, setEditingId] = useState(null);
     const [editLabel, setEditLabel] = useState("");
 
-    // Load addresses on mount
     useEffect(() => {
         async function fetchAddresses() {
             try {
@@ -27,7 +27,6 @@ export default function Addresses() {
         fetchAddresses();
     }, []);
 
-    // Handle new address submission
     async function handleAddressSubmit(data) {
         try {
             const newAddress = await createAddress(data);
@@ -78,51 +77,35 @@ export default function Addresses() {
     }
 
     return (
-        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
-            <h1>Tracked Addresses</h1>
+        <div className="page">
+            <h1>Add Addresses to Track</h1>
 
-            <div style={{ marginBottom: "2rem" }}>
+            <div className="mb-xl">
                 <AddressForm onSubmit={handleAddressSubmit} />
             </div>
 
             <div>
-                <h2>Existing Addresses</h2>
+                <h2>Existing Tracked Addresses</h2>
                 {loading && <p>Loading addresses...</p>}
-                {error && <p style={{ color: "red" }}>Error: {error}</p>}
+                {error && <p className="text-error">Error: {error}</p>}
                 {!loading && !error && addresses.length === 0 && (
-                    <p style={{ color: "#808080" }}>
+                    <p className="text-dimmed">
                         No addresses tracked yet. Add one above to get started.
                     </p>
                 )}
                 {addresses.length > 0 && (
-                    <ul style={{ listStyle: "none", padding: 0 }}>
+                    <ul className="list-unstyled">
                         {addresses.map((addr, index) => (
-                            <li
-                                key={addr.id || index}
-                                style={{
-                                    padding: "1rem",
-                                    marginBottom: "0.5rem",
-                                    border: "1px solid #444",
-                                    borderRadius: "4px",
-                                    backgroundColor: "#333",
-                                }}
-                            >
-                                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-                                    <div style={{ flex: 1 }}>
+                            <li key={addr.id || index} className="list-item--card">
+                                <div className="flex flex--between flex--center">
+                                    <div>
                                         {editingId === addr.id ? (
-                                            <div style={{ display: "flex", gap: "0.5rem", alignItems: "center", marginBottom: "0.25rem" }}>
+                                            <div className="flex flex--center gap-sm mb-sm">
                                                 <input
                                                     value={editLabel}
                                                     onChange={(e) => setEditLabel(e.target.value)}
                                                     placeholder="Label (optional)"
-                                                    style={{
-                                                        background: "#444",
-                                                        border: "1px solid #666",
-                                                        borderRadius: "3px",
-                                                        color: "#fff",
-                                                        padding: "0.25rem 0.5rem",
-                                                        fontSize: "0.9rem",
-                                                    }}
+                                                    className="address__edit-input"
                                                     onKeyDown={(e) => {
                                                         if (e.key === "Enter") handleEditSave(addr.id);
                                                         if (e.key === "Escape") handleEditCancel();
@@ -131,61 +114,37 @@ export default function Addresses() {
                                                 />
                                                 <button
                                                     onClick={() => handleEditSave(addr.id)}
-                                                    style={{ cursor: "pointer", padding: "0.25rem 0.6rem", fontSize: "0.85rem" }}
+                                                    className="btn btn--primary btn--sm"
                                                 >
                                                     Save
                                                 </button>
                                                 <button
                                                     onClick={handleEditCancel}
-                                                    style={{ cursor: "pointer", padding: "0.25rem 0.6rem", fontSize: "0.85rem", background: "transparent", color: "#aaa", border: "1px solid #555" }}
+                                                    className="btn btn--ghost btn--sm"
                                                 >
                                                     Cancel
                                                 </button>
                                             </div>
                                         ) : (
-                                            <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.25rem" }}>
-                                                <span style={{ fontWeight: "bold" }}>
+                                            <div className="flex flex--center gap-sm mb-sm">
+                                                <span className="text-bold">
                                                     {addr.label || "Unlabeled"}
                                                 </span>
                                                 <button
                                                     onClick={() => handleEditStart(addr)}
-                                                    style={{
-                                                        cursor: "pointer",
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        color: "#6699cc",
-                                                        fontSize: "0.8rem",
-                                                        padding: "0",
-                                                        textDecoration: "underline",
-                                                    }}
+                                                    className="address__edit-link"
                                                 >
                                                     Edit
                                                 </button>
                                             </div>
                                         )}
-                                        <div
-                                            style={{
-                                                fontFamily: "monospace",
-                                                fontSize: "1.035rem",
-                                                color: "#b3b3b3",
-                                            }}
-                                        >
+                                        <div className="text-mono text-sm text-muted">
                                             {addr.address}
                                         </div>
                                     </div>
                                     <button
                                         onClick={() => handleDelete(addr.id, addr.label)}
-                                        style={{
-                                            cursor: "pointer",
-                                            background: "transparent",
-                                            border: "1px solid #884444",
-                                            color: "#cc6666",
-                                            borderRadius: "3px",
-                                            padding: "0.3rem 0.7rem",
-                                            fontSize: "0.85rem",
-                                            marginLeft: "1rem",
-                                            flexShrink: 0,
-                                        }}
+                                        className="address__remove"
                                     >
                                         Remove
                                     </button>

frontend/src/pages/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);
+}

frontend/src/pages/AlertHistory.jsx

@@ -1,12 +1,12 @@
 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);
 
-    // Fetch alert events on mount
     useEffect(() => {
         async function fetchAlertEvents() {
             try {
@@ -25,49 +25,32 @@ export default function AlertHistory() {
     }, []);
 
     if (loading) {
-        return <div style={{ padding: "2rem" }}>Loading...</div>;
+        return <div className="page">Loading...</div>;
     }
 
     if (error) {
         return (
-            <div style={{ padding: "2rem", color: "red" }}>Error: {error}</div>
+            <div className="page text-error">Error: {error}</div>
         );
     }
 
     return (
-        <div style={{ maxWidth: "800px", margin: "0 auto", padding: "2rem" }}>
+        <div className="page">
             <h1>Recent Alert Events</h1>
 
             {alertEvents.length === 0 ? (
-                <p style={{ color: "#808080" }}>No alerts yet</p>
+                <p className="text-dimmed">No alerts yet</p>
             ) : (
-                <ul style={{ listStyle: "none", padding: 0 }}>
+                <ul className="list-unstyled">
                     {alertEvents.map((event) => (
-                        <li
-                            key={event.id}
-                            style={{
-                                padding: "1rem",
-                                marginBottom: "0.75rem",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                backgroundColor: "#333",
-                            }}
-                        >
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                {event.message}
-                            </div>
+                        <li key={event.id} className="alert-history__item">
+                            <div className="mb-sm">{event.message}</div>
                             {event.address_label && (
-                                <div
-                                    style={{
-                                    fontSize: "1.035rem",
-                                    color: "#808080",
-                                        marginBottom: "0.25rem",
-                                    }}
-                                >
+                                <div className="text-sm text-dimmed">
                                     Address: {event.address_label}
                                 </div>
                             )}
-                            <small style={{ color: "#b3b3b3" }}>
+                            <small className="text-muted">
                                 {formatTimestamp(event.timestamp)}
                             </small>
                         </li>
@@ -78,7 +61,6 @@ export default function AlertHistory() {
     );
 }
 
-// Helper to format timestamp for display
 function formatTimestamp(timestamp) {
     const date = new Date(timestamp);
     return date.toLocaleString();

frontend/src/pages/Alerts.css

@@ -0,0 +1,63 @@
+.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__email-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.alerts__save-test {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}

frontend/src/pages/Alerts.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import AlertForm from "../components/AlertForm";
 import Button from "../components/Button";
+import Input from "../components/Input";
 import { getAddresses } from "../api/addresses";
 import {
     getAlerts,
@@ -15,35 +16,7 @@ import {
     setupEmail,
     sendEmailDigest,
 } from "../api/notificationConfig";
-
-const inputStyle = {
-    width: "100%",
-    padding: "0.5rem",
-    fontSize: "0.9rem",
-    backgroundColor: "#1a1a1a",
-    border: "1px solid #444",
-    borderRadius: "4px",
-    color: "white",
-    fontFamily: "monospace",
-    boxSizing: "border-box",
-};
-
-const labelStyle = {
-    display: "block",
-    marginBottom: "0.25rem",
-    fontSize: "0.9rem",
-    color: "#ccc",
-};
-
-const helpLinkStyle = { color: "#0066cc", fontSize: "0.85rem" };
-
-const sectionStyle = {
-    marginBottom: "1.5rem",
-    padding: "1rem",
-    backgroundColor: "#2a2a2a",
-    borderRadius: "6px",
-    border: "1px solid #3a3a3a",
-};
+import "./Alerts.css";
 
 export default function Alerts() {
     const [addresses, setAddresses] = useState([]);
@@ -52,7 +25,6 @@ export default function Alerts() {
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
 
-    // Notification config state
     const [notificationEnabled, setNotificationEnabled] = useState(false);
     const [discordWebhookUrl, setDiscordWebhookUrl] = useState("");
     const [telegramBotToken, setTelegramBotToken] = useState("");
@@ -273,42 +245,28 @@ export default function Alerts() {
     const selectedAddress = addresses.find((a) => a.id === selectedAddressId);
 
     if (loading) {
-        return <div style={{ padding: "2rem" }}>Loading addresses...</div>;
+        return <div className="page">Loading addresses...</div>;
     }
 
     if (addresses.length === 0) {
         return (
-            <div style={{ padding: "2rem" }}>
-                <p>
-                    No addresses tracked yet. Add an address first to create
-                    alerts.
-                </p>
+            <div className="page">
+                <p>No addresses tracked yet. Add an address first to create alerts.</p>
             </div>
         );
     }
 
     return (
-        <div style={{ maxWidth: "1400px", margin: "0 auto", padding: "2rem" }}>
-            <h1 style={{ marginBottom: "2rem" }}>
-                Alert Rules & Notifications
-            </h1>
+        <div className="page page--wide">
+            <h1 className="mb-xl">Alert Rules & Notifications</h1>
 
-            <div
-                style={{
-                    display: "grid",
-                    gridTemplateColumns: "1fr 1fr",
-                    gap: "2rem",
-                    alignItems: "start",
-                }}
-            >
+            <div className="alerts-grid">
                 {/* LEFT COLUMN: Alert Rules */}
                 <div>
-                    <h2 style={{ marginTop: 0 }}>Alert Rules</h2>
+                    <h2 className="mt-0">Alert Rules</h2>
 
-                    <div style={{ marginBottom: "2rem" }}>
-                        <label
-                            style={{ display: "block", marginBottom: "0.5rem" }}
-                        >
+                    <div className="mb-xl">
+                        <label className="form-label mb-sm">
                             <strong>Select Address:</strong>
                         </label>
                         <select
@@ -316,15 +274,7 @@ export default function Alerts() {
                             onChange={(e) =>
                                 setSelectedAddressId(Number(e.target.value))
                             }
-                            style={{
-                                width: "100%",
-                                padding: "0.5rem",
-                                fontSize: "1rem",
-                                backgroundColor: "#1a1a1a",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                color: "white",
-                            }}
+                            className="form-select"
                         >
                             {addresses.map((addr) => (
                                 <option key={addr.id} value={addr.id}>
@@ -336,43 +286,19 @@ export default function Alerts() {
 
                     {selectedAddress && (
                         <>
-                            <div
-                                style={{
-                                    padding: "1rem",
-                                    marginBottom: "2rem",
-                                    backgroundColor: "#333",
-                                    borderRadius: "4px",
-                                    border: "1px solid #444",
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        fontSize: "1.035rem",
-                                        color: "#b3b3b3",
-                                    }}
-                                >
+                            <div className="alerts__address-info">
+                                <div className="text-sm text-muted">
                                     Managing alerts for:
                                 </div>
-                                <div
-                                    style={{
-                                        fontWeight: "bold",
-                                        marginTop: "0.25rem",
-                                    }}
-                                >
+                                <div className="text-bold">
                                     {selectedAddress.label || "Unlabeled"}
                                 </div>
-                                <div
-                                    style={{
-                                        fontFamily: "monospace",
-                                        fontSize: "1.035rem",
-                                        color: "#b3b3b3",
-                                    }}
-                                >
+                                <div className="text-mono text-sm text-muted">
                                     {selectedAddress.address}
                                 </div>
                             </div>
 
-                            <div style={{ marginBottom: "2rem" }}>
+                            <div className="mb-xl">
                                 <h3>Create New Alert</h3>
                                 <AlertForm onSubmit={handleAlertSubmit} />
                             </div>
@@ -380,112 +306,43 @@ export default function Alerts() {
                             <div>
                                 <h3>Active Alert Rules</h3>
                                 {error && (
-                                    <p style={{ color: "red" }}>
-                                        Error: {error}
-                                    </p>
+                                    <p className="text-error">Error: {error}</p>
                                 )}
                                 {alerts.length === 0 ? (
-                                    <p style={{ color: "#666" }}>
-                                        No alert rules defined yet. Create one
-                                        above.
+                                    <p className="text-dimmed">
+                                        No alert rules defined yet. Create one above.
                                     </p>
                                 ) : (
-                                    <ul
-                                        style={{
-                                            listStyle: "none",
-                                            padding: 0,
-                                        }}
-                                    >
+                                    <ul className="list-unstyled">
                                         {alerts.map((alert) => (
                                             <li
                                                 key={alert.id}
-                                                style={{
-                                                    padding: "1rem",
-                                                    marginBottom: "0.5rem",
-                                                    border: "1px solid #444",
-                                                    borderRadius: "4px",
-                                                    backgroundColor: "#333",
-                                                    opacity: alert.enabled
-                                                        ? 1
-                                                        : 0.6,
-                                                }}
+                                                className={`alerts__rule ${!alert.enabled ? "alerts__rule--disabled" : ""}`}
                                             >
-                                                <div
-                                                    style={{
-                                                        display: "flex",
-                                                        justifyContent:
-                                                            "space-between",
-                                                        alignItems:
-                                                            "flex-start",
-                                                    }}
-                                                >
-                                                    <div style={{ flex: 1 }}>
-                                                        <div
-                                                            style={{
-                                                                fontWeight:
-                                                                    "bold",
-                                                                marginBottom:
-                                                                    "0.25rem",
-                                                            }}
-                                                        >
-                                                            {formatAlertType(
-                                                                alert.type,
-                                                            )}
+                                                <div className="flex flex--between">
+                                                    <div>
+                                                        <div className="text-bold mb-sm">
+                                                            {formatAlertType(alert.type)}
                                                         </div>
                                                         {alert.threshold && (
-                                                            <div
-                                                                style={{
-                                                                    fontSize:
-                                                                        "1.035rem",
-                                                                    color: "#b3b3b3",
-                                                                }}
-                                                            >
-                                                                Threshold:{" "}
-                                                                {
-                                                                    alert.threshold
-                                                                }{" "}
-                                                                ETH
+                                                            <div className="text-sm text-muted">
+                                                                Threshold: {alert.threshold} ETH
                                                             </div>
                                                         )}
-                                                        <div
-                                                            style={{
-                                                                fontSize:
-                                                                    "0.978rem",
-                                                                color: "#808080",
-                                                                marginTop:
-                                                                    "0.25rem",
-                                                            }}
-                                                        >
-                                                            Status:{" "}
-                                                            {alert.enabled
-                                                                ? "Enabled"
-                                                                : "Disabled"}
+                                                        <div className="text-xs text-dimmed">
+                                                            Status: {alert.enabled ? "Enabled" : "Disabled"}
                                                         </div>
                                                     </div>
-                                                    <div
-                                                        style={{
-                                                            display: "flex",
-                                                            gap: "0.5rem",
-                                                        }}
-                                                    >
+                                                    <div className="flex flex--center gap-sm">
                                                         <Button
                                                             onClick={() =>
-                                                                handleToggleAlert(
-                                                                    alert.id,
-                                                                    alert.enabled,
-                                                                )
+                                                                handleToggleAlert(alert.id, alert.enabled)
                                                             }
                                                         >
-                                                            {alert.enabled
-                                                                ? "Disable"
-                                                                : "Enable"}
+                                                            {alert.enabled ? "Disable" : "Enable"}
                                                         </Button>
                                                         <Button
-                                                            onClick={() =>
-                                                                handleDeleteAlert(
-                                                                    alert.id,
-                                                                )
-                                                            }
+                                                            onClick={() => handleDeleteAlert(alert.id)}
                                                         >
                                                             Delete
                                                         </Button>
@@ -502,329 +359,152 @@ export default function Alerts() {
 
                 {/* RIGHT COLUMN: Notification Settings */}
                 <div>
-                    <h2 style={{ marginTop: 0 }}>Notification Settings</h2>
+                    <h2 className="mt-0">Notification Settings</h2>
 
                     {notificationSuccess && (
-                        <div
-                            style={{
-                                padding: "0.75rem",
-                                marginBottom: "1rem",
-                                backgroundColor: "#00ff0020",
-                                border: "1px solid #00ff00",
-                                borderRadius: "4px",
-                                color: "#00ff00",
-                            }}
-                        >
-                            {notificationSuccess}
-                        </div>
+                        <div className="alert alert--success">{notificationSuccess}</div>
                     )}
 
                     {notificationError && (
-                        <div
-                            style={{
-                                padding: "0.75rem",
-                                marginBottom: "1rem",
-                                backgroundColor: "#ff000020",
-                                border: "1px solid #ff0000",
-                                borderRadius: "4px",
-                                color: "#ff6666",
-                            }}
-                        >
-                            {notificationError}
-                        </div>
+                        <div className="alert alert--error">{notificationError}</div>
                     )}
 
                     {/* Master toggle */}
-                    <div
-                        style={{
-                            marginBottom: "1.5rem",
-                            padding: "1rem",
-                            backgroundColor: "#333",
-                            borderRadius: "4px",
-                        }}
-                    >
-                        <label
-                            style={{
-                                display: "flex",
-                                alignItems: "center",
-                                cursor: "pointer",
-                            }}
-                        >
+                    <div className="alerts__toggle-panel">
+                        <label className="alerts__toggle-label">
                             <input
                                 type="checkbox"
                                 checked={notificationEnabled}
                                 onChange={(e) =>
                                     setNotificationEnabled(e.target.checked)
                                 }
-                                style={{
-                                    marginRight: "0.5rem",
-                                    width: "18px",
-                                    height: "18px",
-                                }}
+                                className="alerts__toggle-checkbox"
                             />
-                            <span style={{ fontWeight: "bold" }}>
-                                Enable Notifications
-                            </span>
+                            <span className="text-bold">Enable Notifications</span>
                         </label>
-                        <div
-                            style={{
-                                fontSize: "0.978rem",
-                                color: "#808080",
-                                marginTop: "0.5rem",
-                                marginLeft: "26px",
-                            }}
-                        >
+                        <div className="alerts__toggle-hint">
                             Master switch for all notification channels
                         </div>
                     </div>
 
-                    {/* All channel settings — hidden when master toggle is off */}
-                    <div
-                        style={{
-                            display: notificationEnabled ? "block" : "none",
-                        }}
-                    >
+                    {/* All channel settings -- hidden when master toggle is off */}
+                    {notificationEnabled && (
+                        <>
                             {/* Telegram */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Telegram
-                            </h3>
-
-                            <div style={{ marginBottom: "0.75rem" }}>
-                                <label style={labelStyle}>Bot Token</label>
-                                <input
-                                    type="text"
+                            <div className="section">
+                                <h3 className="mt-0 mb-md">Telegram</h3>
+                                <Input
+                                    label="Bot Token"
                                     value={telegramBotToken}
-                                    onChange={(e) =>
-                                        setTelegramBotToken(e.target.value)
-                                    }
+                                    onChange={setTelegramBotToken}
                                     placeholder="123456789:ABCdefGHIjklMNOpqrSTUvwxYZ"
-                                    style={inputStyle}
                                 />
-                            </div>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>Chat ID</label>
-                                <input
-                                    type="text"
+                                <Input
+                                    label="Chat ID"
                                     value={telegramChatId}
-                                    onChange={(e) =>
-                                        setTelegramChatId(e.target.value)
-                                    }
+                                    onChange={setTelegramChatId}
                                     placeholder="-1001234567890"
-                                    style={inputStyle}
                                 />
-                            </div>
-
                                 <a
                                     href="https://core.telegram.org/bots#how-do-i-create-a-bot"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                style={helpLinkStyle}
+                                    className="help-link"
                                 >
                                     How to create a Telegram bot & get your Chat ID
                                 </a>
                             </div>
 
                             {/* Email */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Email
-                            </h3>
-
-                            <div style={{ marginBottom: "0.75rem" }}>
-                                <label style={labelStyle}>Email Address</label>
-                                <input
+                            <div className="section">
+                                <h3 className="mt-0 mb-md">Email</h3>
+                                <Input
+                                    label="Email Address"
                                     type="email"
                                     value={email}
-                                    onChange={(e) => setEmail(e.target.value)}
+                                    onChange={setEmail}
                                     placeholder="you@example.com"
-                                    style={inputStyle}
                                 />
+                                <div className="help-link text-dimmed mb-md">
+                                    Alert notifications and digests will be sent to this address
                                 </div>
-
-                            <div
-                                style={{
-                                    fontSize: "0.85rem",
-                                    color: "#808080",
-                                    marginBottom: "0.75rem",
-                                }}
-                            >
-                                Alert notifications and digests will be sent to
-                                this address
-                            </div>
-
-                            <div
-                                style={{
-                                    display: "flex",
-                                    gap: "0.5rem",
-                                }}
-                            >
-                                <button
+                                <div className="alerts__email-buttons">
+                                    <Button
                                         onClick={handleSetupEmail}
                                         disabled={settingUpEmail || !email}
-                                    style={{
-                                        padding: "0.5rem 1rem",
-                                        fontSize: "0.85rem",
-                                        backgroundColor:
-                                            settingUpEmail || !email
-                                                ? "#333"
-                                                : "#0066cc",
-                                        color: "white",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        cursor:
-                                            settingUpEmail || !email
-                                                ? "not-allowed"
-                                                : "pointer",
-                                    }}
+                                        className="btn--sm"
                                     >
-                                    {settingUpEmail
-                                        ? "Setting up..."
-                                        : "Verify Email"}
-                                </button>
-
-                                <button
+                                        {settingUpEmail ? "Setting up..." : "Verify Email"}
+                                    </Button>
+                                    <Button
                                         onClick={handleSendDigest}
                                         disabled={sendingDigest || !email}
-                                    style={{
-                                        padding: "0.5rem 1rem",
-                                        fontSize: "0.85rem",
-                                        backgroundColor:
-                                            sendingDigest || !email
-                                                ? "#333"
-                                                : "#6c757d",
-                                        color: "white",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        cursor:
-                                            sendingDigest || !email
-                                                ? "not-allowed"
-                                                : "pointer",
-                                    }}
+                                        variant="secondary"
+                                        className="btn--sm"
                                     >
-                                    {sendingDigest
-                                        ? "Sending..."
-                                        : "Send Digest Now"}
-                                </button>
+                                        {sendingDigest ? "Sending..." : "Send Digest Now"}
+                                    </Button>
                                 </div>
                             </div>
 
                             {/* Discord */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Discord
-                            </h3>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>
-                                    Discord Webhook URL
-                                </label>
-                                <input
-                                    type="text"
+                            <div className="section">
+                                <h3 className="mt-0 mb-md">Discord</h3>
+                                <Input
+                                    label="Discord Webhook URL"
                                     value={discordWebhookUrl}
-                                    onChange={(e) =>
-                                        setDiscordWebhookUrl(e.target.value)
-                                    }
+                                    onChange={setDiscordWebhookUrl}
                                     placeholder="https://discord.com/api/webhooks/..."
-                                    style={inputStyle}
                                 />
-                            </div>
-
                                 <a
                                     href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                style={helpLinkStyle}
+                                    className="help-link"
                                 >
                                     How to get a Discord webhook URL
                                 </a>
                             </div>
 
                             {/* Slack */}
-                        <div style={sectionStyle}>
-                            <h3 style={{ marginTop: 0, marginBottom: "1rem" }}>
-                                Slack
-                            </h3>
-
-                            <div style={{ marginBottom: "0.5rem" }}>
-                                <label style={labelStyle}>
-                                    Slack Webhook URL
-                                </label>
-                                <input
-                                    type="text"
+                            <div className="section">
+                                <h3 className="mt-0 mb-md">Slack</h3>
+                                <Input
+                                    label="Slack Webhook URL"
                                     value={slackWebhookUrl}
-                                    onChange={(e) =>
-                                        setSlackWebhookUrl(e.target.value)
-                                    }
+                                    onChange={setSlackWebhookUrl}
                                     placeholder="https://hooks.slack.com/services/..."
-                                    style={inputStyle}
                                 />
-                            </div>
-
                                 <a
                                     href="https://api.slack.com/messaging/webhooks"
                                     target="_blank"
                                     rel="noopener noreferrer"
-                                style={helpLinkStyle}
+                                    className="help-link"
                                 >
                                     How to set up Slack Incoming Webhooks
                                 </a>
                             </div>
 
-                        {/* Save & Test buttons at the bottom */}
-                        <div
-                            style={{
-                                display: "flex",
-                                gap: "0.75rem",
-                                marginTop: "1rem",
-                            }}
-                        >
-                            <button
+                            {/* Save & Test buttons */}
+                            <div className="alerts__save-test">
+                                <Button
                                     onClick={handleSaveNotificationConfig}
                                     disabled={notificationLoading}
-                                style={{
-                                    padding: "0.75rem 1.5rem",
-                                    fontSize: "1rem",
-                                    backgroundColor: notificationLoading
-                                        ? "#333"
-                                        : "#0066cc",
-                                    color: "white",
-                                    border: "none",
-                                    borderRadius: "4px",
-                                    cursor: notificationLoading
-                                        ? "not-allowed"
-                                        : "pointer",
-                                }}
+                                    className="btn--lg"
                                 >
-                                {notificationLoading
-                                    ? "Saving..."
-                                    : "Save Settings"}
-                            </button>
-
-                            <button
+                                    {notificationLoading ? "Saving..." : "Save Settings"}
+                                </Button>
+                                <Button
                                     onClick={handleTestChannels}
                                     disabled={testingChannels}
-                                style={{
-                                    padding: "0.75rem 1.5rem",
-                                    fontSize: "1rem",
-                                    backgroundColor: testingChannels
-                                        ? "#333"
-                                        : "#28a745",
-                                    color: "white",
-                                    border: "none",
-                                    borderRadius: "4px",
-                                    cursor: testingChannels
-                                        ? "not-allowed"
-                                        : "pointer",
-                                }}
+                                    variant="success"
+                                    className="btn--lg"
                                 >
-                                {testingChannels
-                                    ? "Testing..."
-                                    : "Test All Channels"}
-                            </button>
-                        </div>
+                                    {testingChannels ? "Testing..." : "Test All Channels"}
+                                </Button>
                             </div>
+                        </>
+                    )}
                 </div>
             </div>
         </div>

frontend/src/pages/Login.css

@@ -11,66 +11,28 @@
   margin: 20px auto;
   padding: 2rem;
   padding-top: 8rem;
-  border: 1px solid #333;
-  border-radius: 8px;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
   background-color: rgba(0, 0, 0, 0.75);
 }
 
 .login-heading {
   margin-bottom: 2rem;
   text-align: center;
+  position: relative;
+  top: -20px;
 }
 
 .login-brand {
-  color: #e62525;
-}
-
-.login-error {
-  padding: 0.75rem;
-  margin-bottom: 1rem;
-  background-color: #ff000020;
-  border: 1px solid #ff0000;
-  border-radius: 4px;
-  color: #ff6666;
-}
-
-.login-field {
-  margin-bottom: 1rem;
-}
-
-.login-field-last {
-  margin-bottom: 1.5rem;
-}
-
-.login-label {
-  display: block;
-  margin-bottom: 0.5rem;
-}
-
-.login-input {
-  width: 100%;
-  padding: 0.5rem;
-  font-size: 1.2rem;
-  background-color: #242424;
-  border: 1px solid #444;
-  border-radius: 4px;
-  color: white;
+  color: var(--color-brand);
 }
 
 .login-button {
   width: 100%;
   padding: 0.75rem;
   font-size: 1.2rem;
-  background-color: #0066cc;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.login-button:disabled {
-  background-color: #333;
-  cursor: not-allowed;
+  margin-top: 16px;
+  ;
 }
 
 .login-footer {
@@ -78,11 +40,25 @@
   text-align: center;
 }
 
-.login-footer-text {
-  color: #b3b3b3;
-}
-
 .login-signup-link {
-  color: #0066cc;
+  color: var(--color-primary);
   text-decoration: none;
 }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.login-form-hidden {
+  opacity: 0;
+}
+
+.login-form-visible {
+  animation: fadeIn 2s ease-in-out forwards;
+}

frontend/src/pages/Login.jsx

@@ -1,6 +1,7 @@
 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() {
@@ -16,7 +17,6 @@ export default function Login() {
   async function handleSubmit(e) {
     e.preventDefault();
 
-    // Validation
     if (!email || !password) {
       setError("Please fill in all fields");
       return;
@@ -26,7 +26,7 @@ export default function Login() {
       setError("");
       setLoading(true);
       await login(email, password);
-      navigate("/addresses"); // Redirect to main app
+      navigate("/addresses");
     } catch (err) {
       setError("Failed to log in: " + err.message);
     } finally {
@@ -36,66 +36,42 @@ export default function Login() {
 
   return (
     <div className="login-page">
-      <div
-        className="login-card"
-        onMouseEnter={() => setIsVisible(true)}
-      >
+      <div className="login-card" onMouseEnter={() => setIsVisible(true)}>
         <h1 className="login-heading">
           <span className="login-brand">Koin Ping</span> - Login
         </h1>
 
-        <div style={{ visibility: isVisible ? 'visible' : 'hidden' }}>
-          {error && (
-            <div className="login-error">
-              {error}
-            </div>
-          )}
+        <div className={isVisible ? "login-form-visible" : "login-form-hidden"}>
+          {error && <div className="alert alert--error">{error}</div>}
 
           <form onSubmit={handleSubmit}>
-            <div className="login-field">
-              <label className="login-label">
-                Email
-              </label>
-              <input
+            <Input
+              label="Email"
               type="email"
               value={email}
-                onChange={(e) => setEmail(e.target.value)}
+              onChange={setEmail}
               disabled={loading}
-                className="login-input"
               required
             />
-            </div>
-
-            <div className="login-field-last">
-              <label className="login-label">
-                Password
-              </label>
-              <input
+            <Input
+              label="Password"
               type="password"
               value={password}
-                onChange={(e) => setPassword(e.target.value)}
+              onChange={setPassword}
               disabled={loading}
-                className="login-input"
               required
+              className="form-field--last"
             />
-            </div>
 
-            <button
-              type="submit"
-              disabled={loading}
-              className="login-button"
-            >
+            <button type="submit" disabled={loading} className="btn btn--primary login-button">
               {loading ? "Logging in..." : "Log In"}
             </button>
           </form>
 
           <div className="login-footer">
-            <p className="login-footer-text">
+            <p className="text-muted">
               Don't have an account?{" "}
-              <Link
-                to="/signup"
-                className="login-signup-link"
-              >
+              <Link to="/signup" className="login-signup-link">
                 Sign up here
               </Link>
             </p>

frontend/src/pages/Onboarding.css

@@ -0,0 +1,238 @@
+.onboarding {
+  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;
+}
+
+.onboarding__container {
+  width: 100%;
+  max-width: 540px;
+  padding: 0 1rem;
+}
+
+.onboarding__title {
+  text-align: center;
+  margin-bottom: 2rem;
+  color: var(--color-primary);
+  letter-spacing: 0.5px;
+}
+
+.onboarding__card {
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-xl);
+  padding: 2rem;
+}
+
+.onboarding__login-link {
+  text-align: center;
+  margin-top: 1.25rem;
+  color: #888;
+  font-size: 0.9rem;
+}
+
+.onboarding__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;
+}
+
+/* Step 5 summary */
+.onboarding__summary {
+  background-color: #1e2e1e;
+  border: 1px solid #2d5a2d;
+  border-radius: var(--radius-lg);
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.onboarding__summary-title {
+  margin: 0 0 0.5rem;
+  color: #90ee90;
+  font-weight: bold;
+}
+
+.onboarding__summary-list {
+  margin: 0;
+  padding-left: 1.25rem;
+  color: var(--color-text-label);
+  line-height: 1.8;
+}
+
+/* Checkbox rows */
+.checkbox-row {
+  margin-bottom: 1rem;
+}
+
+.checkbox-row__label {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  cursor: pointer;
+  color: #ddd;
+}
+
+.checkbox-row__input {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--color-primary);
+}
+
+.checkbox-row__nested {
+  margin-top: 0.5rem;
+  margin-left: 1.75rem;
+}
+
+/* Footer navigation */
+.onboarding__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);
+}
+
+/* Test results */
+.test-result {
+  font-size: 0.9rem;
+  margin-bottom: 0.25rem;
+}
+
+.test-result--success {
+  color: #90ee90;
+}
+
+.test-result--failure {
+  color: var(--color-error);
+}
+
+/* Step subtitle */
+.onboarding__subtitle {
+  color: #aaa;
+  margin-bottom: 1.5rem;
+  font-size: 0.9rem;
+}
+
+/* Subscribe card (Step 2) */
+.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;
+}

frontend/src/pages/Onboarding.jsx

@@ -1,11 +1,13 @@
 /**
- * Onboarding Wizard
+ * Subscribe / Onboarding Wizard
  *
- * 5-step guided flow: Create Account → Add Wallet → Alert Rules → Notifications → Done
+ * 5-step guided flow: Create Account -> Add Wallet -> Alert Rules -> Notifications -> Done
+ * After account creation, user is redirected to Stripe Checkout for payment.
+ * On successful payment, they return here at step 2 (Add Wallet).
  */
 
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { createAddress, getAddresses } from "../api/addresses";
 import { createAlert } from "../api/alerts";
@@ -13,6 +15,10 @@ import {
     updateNotificationConfig,
     testNotificationChannels,
 } from "../api/notificationConfig";
+import { createCheckoutSession, getSubscriptionStatus } from "../api/stripe";
+import Input from "../components/Input";
+import Button from "../components/Button";
+import "./Onboarding.css";
 
 const STEPS = [
     "Create Account",
@@ -22,27 +28,10 @@ const STEPS = [
     "Done",
 ];
 
-const inputStyle = {
-    width: "100%",
-    padding: "0.5rem",
-    fontSize: "1rem",
-    backgroundColor: "#2a2a2a",
-    border: "1px solid #444",
-    borderRadius: "4px",
-    color: "white",
-    boxSizing: "border-box",
-};
-
-const labelStyle = {
-    display: "block",
-    marginBottom: "0.4rem",
-    color: "#ccc",
-    fontSize: "0.9rem",
-};
-
 export default function Onboarding() {
     const { currentUser, signup } = useAuth();
     const navigate = useNavigate();
+    const [searchParams, setSearchParams] = useSearchParams();
 
     const [step, setStep] = useState(1);
     const [loading, setLoading] = useState(false);
@@ -51,7 +40,6 @@ export default function Onboarding() {
     const [testResults, setTestResults] = useState(null);
     const [testLoading, setTestLoading] = useState(false);
 
-    // Wizard state
     const [data, setData] = useState({
         email: "",
         password: "",
@@ -68,7 +56,6 @@ export default function Onboarding() {
         discordWebhookUrl: "",
         slackWebhookUrl: "",
         notificationEmail: "",
-        // summary
         alertsCreated: [],
         notificationConfigured: false,
     });
@@ -77,7 +64,6 @@ export default function Onboarding() {
         setData((prev) => ({ ...prev, [field]: value }));
     }
 
-    // On mount: if already fully onboarded, redirect away
     useEffect(() => {
         if (!currentUser) return;
         getAddresses()
@@ -86,9 +72,23 @@ export default function Onboarding() {
                     navigate("/addresses", { replace: true });
                 }
             })
-            .catch(() => {}); // ignore errors (e.g. mid-signup)
+            .catch(() => {});
     }, [currentUser, navigate]);
 
+    // Handle Stripe redirect back from checkout
+    useEffect(() => {
+        if (!currentUser) return;
+        const payment = searchParams.get("payment");
+        if (payment === "success") {
+            setSearchParams({}, { replace: true });
+            setStep(2);
+        } else if (payment === "cancelled") {
+            setSearchParams({}, { replace: true });
+            setStep(1);
+            setError("Payment was cancelled. Please try again.");
+        }
+    }, [currentUser, searchParams, setSearchParams]);
+
     // ── Step handlers ─────────────────────────────────────────────────────────
 
     async function handleStep1() {
@@ -105,11 +105,18 @@ export default function Onboarding() {
             setError("Password must be at least 6 characters");
             return;
         }
-        // If user already exists (browser-close-mid-wizard), skip signup
-        if (!currentUser) {
         try {
             setLoading(true);
+            if (!currentUser) {
                 await signup(data.email, data.password);
+            }
+            const status = await getSubscriptionStatus();
+            if (status.subscription_status === "active" || status.subscription_status === "trialing") {
+                setStep(2);
+                return;
+            }
+            const { url } = await createCheckoutSession();
+            window.location.href = url;
         } catch (err) {
             if (err.code === "auth/email-already-in-use") {
                 setError("Email already in use. Try logging in instead.");
@@ -121,13 +128,8 @@ export default function Onboarding() {
                 setError("Failed to create account: " + err.message);
             }
             setLoading(false);
-                return;
-            } finally {
-                setLoading(false);
         }
     }
-        setStep(2);
-    }
 
     async function handleStep2() {
         setError("");
@@ -237,59 +239,38 @@ export default function Onboarding() {
 
     function ProgressBar() {
         return (
-            <div
-                style={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: "2rem",
-                }}
-            >
+            <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}
-                            style={{ display: "flex", alignItems: "center" }}
-                        >
+                        <div key={label} className="progress-bar__step">
                             {i > 0 && (
                                 <div
-                                    style={{
-                                        width: "40px",
-                                        height: "2px",
-                                        backgroundColor: done || active ? "#0066cc" : "#444",
-                                        margin: "0 4px",
-                                    }}
+                                    className={`progress-bar__connector ${
+                                        done || active
+                                            ? "progress-bar__connector--active"
+                                            : "progress-bar__connector--inactive"
+                                    }`}
                                 />
                             )}
-                            <div style={{ textAlign: "center" }}>
-                                <div
-                                    style={{
-                                        width: "32px",
-                                        height: "32px",
-                                        borderRadius: "50%",
-                                        backgroundColor:
-                                            done ? "#0066cc" : active ? "#0066cc" : "#333",
-                                        border: active ? "2px solid #4499ff" : "2px solid transparent",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        fontWeight: "bold",
-                                        fontSize: "0.85rem",
-                                        color: "white",
-                                        margin: "0 auto 4px",
-                                    }}
-                                >
-                                    {done ? "✓" : stepNum}
+                            <div>
+                                <div className={`progress-bar__dot ${dotClass}`}>
+                                    {done ? "\u2713" : stepNum}
                                 </div>
                                 <div
-                                    style={{
-                                        fontSize: "0.7rem",
-                                        color: active ? "white" : "#888",
-                                        whiteSpace: "nowrap",
-                                    }}
+                                    className={`progress-bar__label ${
+                                        active
+                                            ? "progress-bar__label--active"
+                                            : "progress-bar__label--inactive"
+                                    }`}
                                 >
                                     {label}
                                 </div>
@@ -306,40 +287,32 @@ export default function Onboarding() {
     function Step1() {
         return (
             <>
-                <h2 style={{ marginBottom: "1.5rem" }}>Create your account</h2>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>Email</label>
-                    <input
+                <h2 className="mb-lg">Create your account</h2>
+                <Input
+                    label="Email"
                     type="email"
                     value={data.email}
-                        onChange={(e) => set("email", e.target.value)}
+                    onChange={(v) => set("email", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="you@example.com"
                 />
-                </div>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>Password</label>
-                    <input
+                <Input
+                    label="Password"
                     type="password"
                     value={data.password}
-                        onChange={(e) => set("password", e.target.value)}
+                    onChange={(v) => set("password", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="At least 6 characters"
                 />
-                </div>
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Confirm Password</label>
-                    <input
+                <Input
+                    label="Confirm Password"
                     type="password"
                     value={data.confirmPassword}
-                        onChange={(e) => set("confirmPassword", e.target.value)}
+                    onChange={(v) => set("confirmPassword", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="Repeat your password"
+                    className="form-field--last"
                 />
-                </div>
             </>
         );
     }
@@ -347,32 +320,25 @@ export default function Onboarding() {
     function Step2() {
         return (
             <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Add a wallet address</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
+                <h2 className="mb-sm">Add a wallet address</h2>
+                <p className="onboarding__subtitle">
                     Enter the Ethereum address you want to monitor.
                 </p>
-                <div style={{ marginBottom: "1rem" }}>
-                    <label style={labelStyle}>ETH Address</label>
-                    <input
-                        type="text"
+                <Input
+                    label="ETH Address"
                     value={data.walletAddress}
-                        onChange={(e) => set("walletAddress", e.target.value)}
+                    onChange={(v) => set("walletAddress", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="0x..."
                 />
-                </div>
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Label (optional)</label>
-                    <input
-                        type="text"
+                <Input
+                    label="Label (optional)"
                     value={data.walletLabel}
-                        onChange={(e) => set("walletLabel", e.target.value)}
+                    onChange={(v) => set("walletLabel", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="e.g. My main wallet"
+                    className="form-field--last"
                 />
-                </div>
             </>
         );
     }
@@ -380,8 +346,8 @@ export default function Onboarding() {
     function Step3() {
         return (
             <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Configure alert rules</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
+                <h2 className="mb-sm">Configure alert rules</h2>
+                <p className="onboarding__subtitle">
                     Choose which events trigger notifications. You can change these later.
                 </p>
 
@@ -401,12 +367,12 @@ export default function Onboarding() {
                     label="Large transfer"
                 >
                     {data.alertLargeTransfer && (
-                        <div style={{ marginTop: "0.5rem", marginLeft: "1.75rem" }}>
-                            <input
+                        <div className="checkbox-row__nested">
+                            <Input
                                 type="number"
+                                label=""
                                 value={data.largeTransferThreshold}
-                                onChange={(e) => set("largeTransferThreshold", e.target.value)}
-                                style={{ ...inputStyle, width: "160px" }}
+                                onChange={(v) => set("largeTransferThreshold", v)}
                                 placeholder="Threshold (ETH)"
                                 min="0"
                                 step="0.01"
@@ -420,12 +386,12 @@ export default function Onboarding() {
                     label="Balance below"
                 >
                     {data.alertBalanceBelow && (
-                        <div style={{ marginTop: "0.5rem", marginLeft: "1.75rem" }}>
-                            <input
+                        <div className="checkbox-row__nested">
+                            <Input
                                 type="number"
+                                label=""
                                 value={data.balanceBelowThreshold}
-                                onChange={(e) => set("balanceBelowThreshold", e.target.value)}
-                                style={{ ...inputStyle, width: "160px" }}
+                                onChange={(v) => set("balanceBelowThreshold", v)}
                                 placeholder="Threshold (ETH)"
                                 min="0"
                                 step="0.01"
@@ -440,66 +406,64 @@ export default function Onboarding() {
     function Step4() {
         return (
             <>
-                <h2 style={{ marginBottom: "0.5rem" }}>Set up notifications</h2>
-                <p style={{ color: "#aaa", marginBottom: "1.5rem", fontSize: "0.9rem" }}>
+                <h2 className="mb-sm">Set up notifications</h2>
+                <p className="onboarding__subtitle">
                     Add at least one channel so you receive alerts. All fields are optional.
                 </p>
 
-                <div style={{ marginBottom: "1.25rem" }}>
-                    <label style={labelStyle}>
+                <div className="mb-md">
+                    <label className="form-label">
                         Discord Webhook URL{" "}
                         <a
                             href="https://support.discord.com/hc/en-us/articles/228383668"
                             target="_blank"
                             rel="noreferrer"
-                            style={{ color: "#4499ff", fontSize: "0.8rem" }}
+                            className="help-link"
                         >
                             (how to get one)
                         </a>
                     </label>
-                    <input
+                    <Input
+                        label=""
                         type="url"
                         value={data.discordWebhookUrl}
-                        onChange={(e) => set("discordWebhookUrl", e.target.value)}
+                        onChange={(v) => set("discordWebhookUrl", v)}
                         disabled={loading}
-                        style={inputStyle}
                         placeholder="https://discord.com/api/webhooks/..."
                     />
                 </div>
 
-                <div style={{ marginBottom: "1.25rem" }}>
-                    <label style={labelStyle}>
+                <div className="mb-md">
+                    <label className="form-label">
                         Slack Webhook URL{" "}
                         <a
                             href="https://api.slack.com/messaging/webhooks"
                             target="_blank"
                             rel="noreferrer"
-                            style={{ color: "#4499ff", fontSize: "0.8rem" }}
+                            className="help-link"
                         >
                             (how to get one)
                         </a>
                     </label>
-                    <input
+                    <Input
+                        label=""
                         type="url"
                         value={data.slackWebhookUrl}
-                        onChange={(e) => set("slackWebhookUrl", e.target.value)}
+                        onChange={(v) => set("slackWebhookUrl", v)}
                         disabled={loading}
-                        style={inputStyle}
                         placeholder="https://hooks.slack.com/services/..."
                     />
                 </div>
 
-                <div style={{ marginBottom: "1.5rem" }}>
-                    <label style={labelStyle}>Email address for alerts</label>
-                    <input
+                <Input
+                    label="Email address for alerts"
                     type="email"
                     value={data.notificationEmail}
-                        onChange={(e) => set("notificationEmail", e.target.value)}
+                    onChange={(v) => set("notificationEmail", v)}
                     disabled={loading}
-                        style={inputStyle}
                     placeholder="you@example.com"
+                    className="form-field--last"
                 />
-                </div>
             </>
         );
     }
@@ -510,37 +474,27 @@ export default function Onboarding() {
 
         return (
             <>
-                <h2 style={{ marginBottom: "1rem" }}>You're all set!</h2>
+                <h2 className="mb-md">You're all set!</h2>
 
-                <div
-                    style={{
-                        backgroundColor: "#1e2e1e",
-                        border: "1px solid #2d5a2d",
-                        borderRadius: "6px",
-                        padding: "1rem 1.25rem",
-                        marginBottom: "1.5rem",
-                    }}
-                >
-                    <p style={{ margin: "0 0 0.5rem", color: "#90ee90", fontWeight: "bold" }}>
-                        Summary
-                    </p>
-                    <ul style={{ margin: 0, paddingLeft: "1.25rem", color: "#ccc", lineHeight: "1.8" }}>
+                <div className="onboarding__summary">
+                    <p className="onboarding__summary-title">Summary</p>
+                    <ul className="onboarding__summary-list">
                         <li>
                             Wallet address added:{" "}
-                            <span style={{ color: "white", fontFamily: "monospace", fontSize: "0.85rem" }}>
+                            <span className="text-mono text-white-sm">
                                 {data.walletAddress}
                             </span>
                             {data.walletLabel && ` (${data.walletLabel})`}
                         </li>
                         <li>
                             Alert rules configured:{" "}
-                            <span style={{ color: "white" }}>
+                            <span className="text-white">
                                 {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
                             </span>
                         </li>
                         <li>
                             Notification channels:{" "}
-                            <span style={{ color: "white" }}>
+                            <span className="text-white">
                                 {hasNotif ? "Configured" : "Not set up (skipped)"}
                             </span>
                         </li>
@@ -548,39 +502,27 @@ export default function Onboarding() {
                 </div>
 
                 {hasNotif && (
-                    <div style={{ marginBottom: "1.5rem" }}>
-                        <button
+                    <div className="mb-lg">
+                        <Button
                             onClick={handleTestChannels}
                             disabled={testLoading}
-                            style={{
-                                padding: "0.6rem 1.25rem",
-                                backgroundColor: testLoading ? "#333" : "#1a4d80",
-                                color: "white",
-                                border: "1px solid #0066cc",
-                                borderRadius: "4px",
-                                cursor: testLoading ? "not-allowed" : "pointer",
-                                fontSize: "0.9rem",
-                            }}
+                            variant="ghost"
                         >
                             {testLoading ? "Testing..." : "Test All Channels"}
-                        </button>
+                        </Button>
 
                         {testResults && (
-                            <div style={{ marginTop: "0.75rem" }}>
+                            <div className="mt-md">
                                 {testResults.error ? (
-                                    <p style={{ color: "#ff6666" }}>{testResults.error}</p>
+                                    <p className="text-error">{testResults.error}</p>
                                 ) : (
-                                    <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+                                    <ul className="list-unstyled">
                                         {Object.entries(testResults).map(([channel, result]) => (
                                             <li
                                                 key={channel}
-                                                style={{
-                                                    color: result.success ? "#90ee90" : "#ff6666",
-                                                    fontSize: "0.9rem",
-                                                    marginBottom: "0.25rem",
-                                                }}
+                                                className={`test-result ${result.success ? "test-result--success" : "test-result--failure"}`}
                                             >
-                                                {result.success ? "✓" : "✗"} {channel}:{" "}
+                                                {result.success ? "\u2713" : "\u2717"} {channel}:{" "}
                                                 {result.message || (result.success ? "OK" : "Failed")}
                                             </li>
                                         ))}
@@ -591,21 +533,9 @@ export default function Onboarding() {
                     </div>
                 )}
 
-                <button
-                    onClick={() => navigate("/addresses")}
-                    style={{
-                        padding: "0.75rem 2rem",
-                        backgroundColor: "#0066cc",
-                        color: "white",
-                        border: "none",
-                        borderRadius: "4px",
-                        cursor: "pointer",
-                        fontSize: "1rem",
-                        fontWeight: "bold",
-                    }}
-                >
+                <Button onClick={() => navigate("/addresses")} className="btn--lg text-bold">
                     Go to Dashboard →
-                </button>
+                </Button>
             </>
         );
     }
@@ -614,21 +544,13 @@ export default function Onboarding() {
 
     function CheckboxRow({ checked, onChange, label, children }) {
         return (
-            <div style={{ marginBottom: "1rem" }}>
-                <label
-                    style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.6rem",
-                        cursor: "pointer",
-                        color: "#ddd",
-                    }}
-                >
+            <div className="checkbox-row">
+                <label className="checkbox-row__label">
                     <input
                         type="checkbox"
                         checked={checked}
                         onChange={(e) => onChange(e.target.checked)}
-                        style={{ width: "16px", height: "16px", accentColor: "#0066cc" }}
+                        className="checkbox-row__input"
                     />
                     {label}
                 </label>
@@ -643,7 +565,7 @@ export default function Onboarding() {
         if (step === 5) return null;
 
         const canSkip = step === 3 || step === 4;
-        const canBack = step > 1;
+        const canBack = step > 2;
 
         async function handleNext() {
             setSkipWarning("");
@@ -665,68 +587,43 @@ export default function Onboarding() {
             setStep((s) => s - 1);
         }
 
+        const nextLabel = step === 1
+            ? "Create Account & Subscribe"
+            : step === 4
+              ? "Finish"
+              : "Next →";
+
         return (
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center",
-                    marginTop: "1.5rem",
-                    paddingTop: "1rem",
-                    borderTop: "1px solid #333",
-                }}
-            >
+            <div className="onboarding__footer">
                 <div>
                     {canBack && (
-                        <button
+                        <Button
                             onClick={handleBack}
                             disabled={loading}
-                            style={{
-                                padding: "0.5rem 1rem",
-                                backgroundColor: "transparent",
-                                color: "#aaa",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                cursor: loading ? "not-allowed" : "pointer",
-                            }}
+                            variant="ghost"
                         >
                             ← Back
-                        </button>
+                        </Button>
                     )}
                 </div>
 
-                <div style={{ display: "flex", gap: "0.75rem" }}>
+                <div className="flex gap-md">
                     {canSkip && (
-                        <button
+                        <Button
                             onClick={handleSkip}
                             disabled={loading}
-                            style={{
-                                padding: "0.5rem 1rem",
-                                backgroundColor: "transparent",
-                                color: "#aaa",
-                                border: "1px solid #444",
-                                borderRadius: "4px",
-                                cursor: loading ? "not-allowed" : "pointer",
-                            }}
+                            variant="ghost"
                         >
                             Skip for now
-                        </button>
+                        </Button>
                     )}
-                    <button
+                    <Button
                         onClick={handleNext}
                         disabled={loading}
-                        style={{
-                            padding: "0.5rem 1.25rem",
-                            backgroundColor: loading ? "#333" : "#0066cc",
-                            color: "white",
-                            border: "none",
-                            borderRadius: "4px",
-                            cursor: loading ? "not-allowed" : "pointer",
-                            fontWeight: "bold",
-                        }}
+                        className="text-bold"
                     >
-                        {loading ? "Please wait..." : step === 4 ? "Finish" : "Next →"}
-                    </button>
+                        {loading ? "Please wait..." : nextLabel}
+                    </Button>
                 </div>
             </div>
         );
@@ -735,97 +632,37 @@ export default function Onboarding() {
     // ── Render ────────────────────────────────────────────────────────────────
 
     const stepContent = {
-        1: <Step1 />,
-        2: <Step2 />,
-        3: <Step3 />,
-        4: <Step4 />,
-        5: <Step5 />,
+        1: Step1(),
+        2: Step2(),
+        3: Step3(),
+        4: Step4(),
+        5: Step5(),
     };
 
     return (
-        <div
-            style={{
-                minHeight: "100vh",
-                backgroundColor: "#1a1a1a",
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                justifyContent: "flex-start",
-                paddingTop: "3rem",
-                paddingBottom: "3rem",
-            }}
-        >
-            <div style={{ width: "100%", maxWidth: "540px", padding: "0 1rem" }}>
-                <h1
-                    style={{
-                        textAlign: "center",
-                        marginBottom: "2rem",
-                        color: "#0066cc",
-                        letterSpacing: "0.5px",
-                    }}
-                >
-                    Koin Ping
-                </h1>
+        <div className="onboarding">
+            <div className="onboarding__container">
+                <h1 className="onboarding__title">Koin Ping</h1>
 
-                <ProgressBar />
+                {ProgressBar()}
 
                 {error && (
-                    <div
-                        style={{
-                            padding: "0.75rem 1rem",
-                            marginBottom: "1rem",
-                            backgroundColor: "#3a1a1a",
-                            border: "1px solid #cc3333",
-                            borderRadius: "4px",
-                            color: "#ff6666",
-                            fontSize: "0.9rem",
-                        }}
-                    >
-                        {error}
-                    </div>
+                    <div className="alert alert--error">{error}</div>
                 )}
 
                 {skipWarning && (
-                    <div
-                        style={{
-                            padding: "0.75rem 1rem",
-                            marginBottom: "1rem",
-                            backgroundColor: "#3a2e00",
-                            border: "1px solid #aa7700",
-                            borderRadius: "4px",
-                            color: "#ffcc44",
-                            fontSize: "0.9rem",
-                        }}
-                    >
-                        {skipWarning}
-                    </div>
+                    <div className="alert alert--warning">{skipWarning}</div>
                 )}
 
-                <div
-                    style={{
-                        backgroundColor: "#242424",
-                        border: "1px solid #333",
-                        borderRadius: "8px",
-                        padding: "2rem",
-                    }}
-                >
+                <div className="onboarding__card">
                     {stepContent[step]}
-                    <Footer />
+                    {Footer()}
                 </div>
 
                 {step === 1 && (
-                    <p
-                        style={{
-                            textAlign: "center",
-                            marginTop: "1.25rem",
-                            color: "#888",
-                            fontSize: "0.9rem",
-                        }}
-                    >
+                    <p className="onboarding__login-link">
                         Already have an account?{" "}
-                        <a href="/login" style={{ color: "#0066cc" }}>
-                            Log in here
-                        </a>
+                        <a href="/login">Log in here</a>
                     </p>
                 )}
             </div>

frontend/src/pages/Signup.jsx

@@ -1,5 +1,5 @@
 import { Navigate } from "react-router-dom";
 
 export default function Signup() {
-    return <Navigate to="/onboarding" replace />;
+    return <Navigate to="/subscribe" replace />;
 }