diff --git a/.gitignore b/.gitignore
index 2eea525d..f0610051 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,14 @@
-.env
\ No newline at end of file
+# Python
+venv/
+__pycache__/
+*.pyc
+
+# Env
+.env
+
+# Database
+*.db
+
+# OS
+.DS_Store
+Thumbs.db
\ No newline at end of file
diff --git a/.python-version b/.python-version
new file mode 100644
index 00000000..2419ad5b
--- /dev/null
+++ b/.python-version
@@ -0,0 +1 @@
+3.11.9
diff --git a/Procfile b/Procfile
new file mode 100644
index 00000000..bdf56bb0
--- /dev/null
+++ b/Procfile
@@ -0,0 +1,2 @@
+web: gunicorn -c gunicorn.conf.py "app:create_app('production')"
+worker: celery -A celery_worker.celery worker --loglevel=info --concurrency=2
diff --git a/README.md b/README.md
index 2f9c517a..b1aeb9f9 100644
--- a/README.md
+++ b/README.md
@@ -1,160 +1,211 @@
-# 🚀 PinFlow – Pinterest Content Automation System
-
-PinFlow is a web-based application designed to **automate Pinterest content creation** from product links .
-
-It streamlines affiliate marketing workflows by generating **ready-to-use titles, descriptions, hashtags, and visuals** — all in one place .
+# PinFlow📌
+> AI-powered Pinterest pin creator for Amazon affiliate marketers in which they can automate there task of findind trendy titles and captions.
+> Paste a link → pick an image → get 5 AI titles generated + 5 descriptions→ post to Pinterest directly.  
+ 
+---
+ 
+## Tech Stack 
+
+| Layer | Technology |
+|-------|-----------|
+| Backend | Flask 3, Flask-Login, Flask-Bcrypt, Flask-Limiter |
+| Database | PostgreSQL + SQLAlchemy |
+| Jobs | Celery + Redis |
+| AI | Anthropic Claude (Sonnet 4) |
+| Pinterest | Pinterest API v5 (OAuth 2.0) |
+| Frontend | Vanilla JS, CSS custom properties, Syne + Inter fonts |
 
 ---
 
-## 📌 Introduction
 
-Creating Pinterest content manually is repetitive and time-consuming .  
-Each post typically requires:
+## Project Structure 
+ 
+```
+pinflow/
+├── app/
+│   ├── __init__.py          # App factory, extension init
+│   ├── models.py            # User, Pin, BoardCache models
+│   ├── tasks.py             # Celery async tasks
+│   ├── routes/
+│   │   ├── auth.py          # /auth/login, /auth/signup, /auth/logout
+│   │   ├── api.py           # /api/fetch, /api/generate, /api/post-pin, /api/boards, /api/history
+│   │   ├── pinterest.py     # /pinterest/connect, /pinterest/callback, /pinterest/disconnect
+│   │   └── main.py          # / and /dashboard
+│   ├── services/
+│   │   ├── ai_service.py    # Claude API — generates 5 titles + 5 descriptions
+│   │   ├── scraper.py       # Amazon product scraper
+│   │   ├── pinterest_service.py  # Pinterest OAuth + API calls 
+│   │   └── image_service.py # Image download + local storage
+│   ├── templates/
+│   │   ├── base.html
+│   │   ├── login.html
+│   │   ├── signup.html
+│   │   └── dashboard.html
+│   └── static/
+│       ├── style.css        # Dark Pinterest UI
+│       └── script.js        # Dashboard UI interactions 
+├── config.py                # Dev / Prod / Test config classes
+├── run.py                   # Dev server entry point
+├── celery_worker.py         # Celery worker entry point
+├── gunicorn.conf.py         # Production Gunicorn config
+├── Procfile                 # Render/Railway process definitions
+├── requirements.txt
+└── .env.example
+```
 
-- Finding relevant images  
-- Writing engaging titles  
-- Creating descriptions  
-- Adding hashtags  
+It streamlines affiliate marketing workflows by generating **ready-to-use titles, descriptions, hashtags, and visuals** — all in one place .
 
-**PinFlow automates this entire workflow**, helping creators focus on scaling instead of manual work.
 
 ---
 
-## 🧠 Problem Statement
+## Local Setup 
 
-Content creators and affiliate marketers often struggle with:
+### Prerequisites
 
-- ⏳ Time-consuming manual processes  
-- 🔁 Repetitive tasks for every product  
-- 📉 Inconsistent content quality  
-- 🚫 Lack of automation tools  
+- Python 3.11+
+- PostgreSQL running locally
+- Redis running locally on web (`redis-server`)
 
-These challenges reduce productivity and make scaling difficult.
+### 1. Clone & install
 
----
+```bash
+git clone https://github.com/yourname/pinflow.git
+cd pinflow
+python -m venv venv
+source venv/bin/activate          # Windows: venv\Scripts\activate 
+pip install -r requirements.txt
+```
 
-## 💡 Solution
+### 2. Configure environment in .env
 
-PinFlow provides a simple and efficient pipeline:
+```bash
+cp .env.example .env
+# Edit .env — fill in your keys (see below) 
+```
 
-- 🔗 Accepts a product link  
-- 🧾 Extracts product information  
-- 🖼️ Fetches relevant images  
-- ✍️ Generates structured content  
-- 👀 Displays a ready-to-use preview  
+**Required keys:**
 
-✅ Result: Faster workflow, better consistency, and improved efficiency.
+| Variable | Where to get it |
+|----------|----------------|
+| `SECRET_KEY` | Generate: `python -c "import secrets; print(secrets.token_hex(32))"` |
+| `DATABASE_URL` | Your local Postgres URL |
+| `REDIS_URL` | `redis://localhost:6379/0` |
+| `ANTHROPIC_API_KEY` | https://console.anthropic.com |
+| `PINTEREST_CLIENT_ID` | https://developers.pinterest.com/apps/ |
+| `PINTEREST_CLIENT_SECRET` | Same Pinterest app |
+| `PINTEREST_REDIRECT_URI` | Set to `http://localhost:5000/pinterest/callback` |
 
----
+### 3. Create the database in psql 
 
-## ⚙️ System Architecture
+```bash
+# Create the DB in psql:
+createdb pinflow_dev
 
-### 🔹 Frontend
-- Built with **HTML + CSS**
-- Handles user input and UI rendering  
+# Then initialise tables:
+python run.py          # tables auto-created on first run 
+# OR use the CLI command:
+flask --app run init-db
+```
 
-### 🔹 Backend
-- Built with **Python + Flask**
-- Handles routing, logic, and processing  
+### 4. Run the development server
 
-### 🔹 Data Layer
-- **BeautifulSoup** → HTML parsing  
-- **Requests** → HTTP handling  
+**Terminal 1 — Flask:**
+```bash
+python run.py
+```
 
----
+**Terminal 2 — Celery worker (required for Pinterest posting):**
+```bash
+celery -A celery_worker.celery worker --loglevel=info
+```
 
-## 🔄 Workflow
+Open http://localhost:5000 → sign up → connect Pinterest → start creating pins.
 
-1. User enters product link  
-2. Application extracts product title  
-3. Keywords are generated  
-4. Images are fetched  
-5. User selects an image  
-6. Content is generated  
-7. Final preview is displayed  
+---
+
+## API Reference
+
+| Method | Endpoint | Auth | Description |
+|--------|----------|------|-------------|
+| POST | `/api/fetch` | ✅ | Scrape Amazon link |
+| POST | `/api/generate` | ✅ | Generate 5 titles + 5 descriptions |
+| POST | `/api/post-pin` | ✅ | Queue pin for posting |
+| GET | `/api/boards` | ✅ | List Pinterest boards (cached) |
+| POST | `/api/boards/refresh` | ✅ | Clear board cache |
+| GET | `/api/history` | ✅ | Last 50 pins |
+| DELETE | `/api/history/<id>` | ✅ | Delete a pin |
+| GET | `/pinterest/connect` | ✅ | Start OAuth flow |
+| GET | `/pinterest/callback` | ✅ | OAuth callback |
+| POST | `/pinterest/disconnect` | ✅ | Remove Pinterest tokens |
 
 ---
 
-## 🧩 Features
+## Deployment (Render)
 
-- ✅ Product link input  
-- 🧾 Product title extraction  
-- 🖼️ Dynamic image generation  
-- 🎯 Image selection system  
-- ✍️ Content generation (title, description, tags)  
-- 📌 Pinterest-style preview UI  
+### Services to create
 
----
+1. **Web Service** — Python, runs Flask
+2. **Background Worker** — Python, runs Celery
+3. **PostgreSQL** — Render managed DB
+4. **Redis** — Render managed Redis 
+
+### Steps
+
+1. Push code to GitHub
+2. In Render dashboard → New → Web Service → connect repo
+3. Build command: `pip install -r requirements.txt`
+4. Start command: `gunicorn -c gunicorn.conf.py "app:create_app('production')"`
+5. Add all environment variables from `.env.example`
+6. Set `FLASK_ENV=production`
+7. Create a second Render service (Background Worker) with start command in render:
+   ```
+   celery -A celery_worker.celery worker --loglevel=info --concurrency=2
+   ```
+8. Set `PINTEREST_REDIRECT_URI` to your Render domain:
+   ```
+   https://your-app.onrender.com/pinterest/callback
+   ```
+9. Update this URL in your Pinterest app settings too.
 
-## 🧱 Tech Stack
+### Database migration on deploy and see usage
 
-### Backend
-- Python  
-- Flask  
+In Render shell or as a one-off job :
+```bash
+flask --app run init-db
+```
 
-### Frontend
-- HTML  
-- CSS  
+---
 
-### Libraries
-- BeautifulSoup  
-- Requests  
+## Pinterest App Setup on pinflow with api connection
 
-### Tools
-- Git  
-- GitHub  
+1. Go to https://developers.pinterest.com/apps/
+2. Create a new app
+3. Add OAuth redirect URI: `https://yourdomain.com/pinterest/callback`
+4. Request scopes: `boards:read`, `pins:write`, `user_accounts:read`
+5. Copy Client ID and Client Secret to your `.env`
 
 ---
 
+## Rate Limits
+
+- `/api/fetch` — 30 requests/minute per user
+- `/api/generate` — 20 requests/minute per user
+- `/api/post-pin` — 10 requests/minute per user
+- Global default — 200/day, 50/hour
 
+Limits are enforced via Flask-Limiter backed by Redis on web.
+
+---
 
-🚀 Future Roadmap
-Phase 4
-  Pinterest API integration
-  User authentication
-  Board selection
-  Direct pin publishing
-Phase 5
-  AI content generation
-  SEO optimization
-  Smart hashtag suggestions
-Phase 6
-  Post scheduling
-  Analytics dashboard
-  Multi-platform support
-Phase 7
-  Docker containerization
-  CI/CD pipeline
-  Cloud deployment
-🧠 Learning Outcomes
-
-Through this project, I am learning:
-
-Flask-based web development
-Web scraping techniques
-System design fundamentals
-Automation workflows
-Version control using Git
-🤝 Contributing
-
-Contributions are welcome!
-
-Fork the repository
-Create a branch
-Make your changes
-Submit a Pull Request
-💸 Support
-
-If you find this project useful:
-
-⭐ Star the repository
-📢 Share it
-💖 Sponsor development
-
-👉 https://github.com/sponsors/tanvishinde017
-
-👩‍💻 Author
-
-Tanavi Shinde
-BSc IT Student
-Aspiring Developer & DevOps Engineer
+## Features
+
+- **5 AI titles + 5 descriptions** per generation with different marketing angles which are trending
+- **4 content tones**: Viral 🔥 / Luxury ✨ / Casual 💬 / Affiliate 💰
+- **Image selection** from product images + lifestyle grid
+- **Pinterest board selector** with 1-hour caching
+- **Async posting** via Celery with auto-retry (3 attempts)
+- **Pin history** — last 50 pins per user with status badges for user 
+- **Toast notifications** for all actions
+- **Live pin preview** updates as you edit
+- **Rate limiting** per user via Redis
+- **Token refresh** — Pinterest access tokens auto-refreshed
diff --git a/app.py b/app.py
deleted file mode 100644
index 607b47cd..00000000
--- a/app.py
+++ /dev/null
@@ -1,183 +0,0 @@
-from flask import Flask, render_template, request, jsonify
-import requests
-from bs4 import BeautifulSoup
-import re
-import urllib.parse
-
-app = Flask(__name__)
-
-# -----------------------------
-# Extract product data from Amazon
-# -----------------------------
-def get_product_data(link):
-    try:
-        headers = {
-            "User-Agent": (
-                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
-                "AppleWebKit/537.36 (KHTML, like Gecko) "
-                "Chrome/120.0.0.0 Safari/537.36"
-            ),
-            "Accept-Language": "en-US,en;q=0.9",
-            "Accept-Encoding": "gzip, deflate, br",
-            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
-        }
-
-        response = requests.get(link, headers=headers, timeout=12)
-        soup = BeautifulSoup(response.content, "html.parser")
-
-        # Title
-        title_tag = soup.find(id="productTitle")
-        title = title_tag.get_text().strip() if title_tag else "Trending Product"
-
-        # Product image
-        image = None
-        img_tag = soup.find(id="landingImage") or soup.find(id="imgBlkFront")
-        if img_tag:
-            image = img_tag.get("src") or img_tag.get("data-old-hires") or img_tag.get("data-a-dynamic-image")
-            if isinstance(image, str) and image.startswith("{"):
-                # data-a-dynamic-image is a JSON dict of {url: [w,h]}
-                import json
-                try:
-                    img_dict = json.loads(image)
-                    image = max(img_dict, key=lambda u: img_dict[u][0])
-                except Exception:
-                    image = None
-
-        return {"title": title, "image": image}
-
-    except Exception:
-        return {"title": "Trending Product", "image": None}
-
-
-# -----------------------------
-# Smart keyword extraction
-# -----------------------------
-def extract_keywords(title):
-    stopwords = {
-        "with", "for", "and", "the", "in", "of", "to", "a", "an",
-        "by", "at", "from", "on", "is", "it", "or", "as", "be",
-        "up", "set", "pack", "piece", "count", "new", "best", "top",
-        "premium", "high", "quality", "ultra", "super", "pro", "plus",
-        "mini", "max", "xl", "large", "small", "black", "white", "red",
-        "blue", "green", "pink", "2", "3", "4", "5", "6", "10", "12",
-        "inch", "inches", "cm", "mm", "ft", "lbs", "oz", "kg", "g"
-    }
-    words = re.findall(r"[A-Za-z]{3,}", title)
-    keywords = [w for w in words if w.lower() not in stopwords]
-    return keywords[:5]
-
-
-# -----------------------------
-# Generate hashtags
-# -----------------------------
-def generate_hashtags(keywords, category_hint=""):
-    base = ["#amazon", "#shopping", "#musthave", "#deals", "#onlineshopping"]
-    kw_tags = [f"#{k.lower()}" for k in keywords[:5]]
-    extra = ["#trending", "#viral", "#lifestyle", "#newarrival", "#sale"]
-    all_tags = list(dict.fromkeys(kw_tags + base + extra))
-    return " ".join(all_tags[:12])
-
-
-# -----------------------------
-# Generate pin content
-# -----------------------------
-def generate_content(title):
-    keywords = extract_keywords(title)
-    keyword_str = " ".join(keywords[:3])
-
-    short_title = title[:80] + ("..." if len(title) > 80 else "")
-
-    description = (
-        f"✨ Discover the {keywords[0] if keywords else 'amazing'} everyone is talking about! "
-        f"This {keyword_str} is a total game-changer — perfect for gifting, everyday use, or treating yourself. "
-        f"Shop now before it sells out! 🛒💫"
-    )
-
-    hashtags = generate_hashtags(keywords)
-
-    return {
-        "title": short_title,
-        "description": description,
-        "hashtags": hashtags,
-    }
-
-
-# -----------------------------
-# Fetch images from Unsplash
-# -----------------------------
-def get_images(title):
-    keywords = extract_keywords(title)
-    query = "+".join(keywords[:3]) if keywords else "product"
-
-    # Use different seeds/sizes to get varied results
-    sizes = [
-        ("400", "600"),
-        ("400", "500"),
-        ("400", "650"),
-        ("400", "550"),
-        ("400", "700"),
-        ("400", "480"),
-    ]
-    images = []
-    for i, (w, h) in enumerate(sizes):
-        url = f"https://picsum.photos/{w}/{h}?random={i}"
-        images.append(url)
-    return images
-
-
-# -----------------------------
-# Main route (renders page)
-# -----------------------------
-@app.route("/")
-def index():
-    return render_template("index.html")
-
-
-# -----------------------------
-# AJAX: Fetch product data + images
-# -----------------------------
-@app.route("/api/fetch", methods=["POST"])
-def api_fetch():
-    body = request.get_json()
-    link = (body or {}).get("link", "").strip()
-
-    if not link:
-        return jsonify({"error": "No link provided"}), 400
-
-    product = get_product_data(link)
-    images = get_images(product["title"])
-
-    return jsonify({
-        "title": product["title"],
-        "product_image": product["image"],
-        "images": images,
-        "link": link,
-    })
-
-
-# -----------------------------
-# AJAX: Generate pin content
-# -----------------------------
-@app.route("/api/generate", methods=["POST"])
-def api_generate():
-    body = request.get_json()
-    title = (body or {}).get("title", "Trending Product")
-    selected_image = (body or {}).get("selected_image", "")
-    link = (body or {}).get("link", "")
-
-    content = generate_content(title)
-
-    return jsonify({
-        "title": content["title"],
-        "description": content["description"],
-        "hashtags": content["hashtags"],
-        "image": selected_image,
-        "link": link,
-    })
-
-
-# -----------------------------
-# Run
-# -----------------------------
-if __name__ == "__main__":
-    app.run(debug=True, port=5000)
\ No newline at end of file
diff --git a/app/__init__.py b/app/__init__.py
new file mode 100644
index 00000000..375e5acb
--- /dev/null
+++ b/app/__init__.py
@@ -0,0 +1,96 @@
+"""
+PinFlow AI — Application Factory
+Wires together Flask extensions and registers all blueprints.
+"""
+
+import os
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_bcrypt import Bcrypt
+from flask_login import LoginManager
+from flask_limiter import Limiter
+from flask_limiter.util import get_remote_address
+from celery import Celery
+
+from config import config
+
+# ── Extension singletons (bound to app later via init_app) ───────────────────
+db = SQLAlchemy()
+bcrypt = Bcrypt()
+login_manager = LoginManager()
+limiter = Limiter(key_func=get_remote_address)
+
+# Global Celery instance — configured inside create_app
+celery = Celery(__name__)
+
+
+def create_app(config_name: str | None = None) -> Flask:
+    """Create and configure the Flask application."""
+    config_name = config_name or os.environ.get("FLASK_ENV", "default")
+
+    app = Flask(__name__, instance_relative_config=True)
+    app.config.from_object(config[config_name])
+
+    # Ensure the download folder exists
+    os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)
+
+    # ── Initialise extensions ─────────────────────────────────────────────────
+    db.init_app(app)
+    bcrypt.init_app(app)
+    login_manager.init_app(app)
+    limiter.init_app(app)
+
+    login_manager.login_view = "auth.login"
+    login_manager.login_message = "Please log in to access PinFlow AI."
+    login_manager.login_message_category = "info"
+
+    # ── Configure Celery ──────────────────────────────────────────────────────
+    _configure_celery(app)
+
+    # ── Register blueprints ───────────────────────────────────────────────────
+    from app.routes.auth import auth_bp
+    from app.routes.api import api_bp
+    from app.routes.pinterest import pinterest_bp
+    from app.routes.main import main_bp
+
+    app.register_blueprint(auth_bp)
+    app.register_blueprint(api_bp, url_prefix="/api")
+    app.register_blueprint(pinterest_bp, url_prefix="/pinterest")
+    app.register_blueprint(main_bp)
+
+    # ── User loader for Flask-Login ───────────────────────────────────────────
+    from app.models import User
+
+    @login_manager.user_loader
+    def load_user(user_id: str):
+        return User.query.get(int(user_id))
+
+    # ── Shell context ─────────────────────────────────────────────────────────
+    @app.shell_context_processor
+    def make_shell_context():
+        from app.models import User, Pin, BoardCache
+        return {"db": db, "User": User, "Pin": Pin, "BoardCache": BoardCache}
+
+    return app
+
+
+def _configure_celery(app: Flask) -> None:
+    """Push Flask app context into Celery tasks."""
+    celery.conf.update(
+        broker_url=app.config["CELERY_BROKER_URL"],
+        result_backend=app.config["CELERY_RESULT_BACKEND"],
+        task_serializer=app.config["CELERY_TASK_SERIALIZER"],
+        result_serializer=app.config["CELERY_RESULT_SERIALIZER"],
+        accept_content=app.config["CELERY_ACCEPT_CONTENT"],
+        timezone=app.config["CELERY_TIMEZONE"],
+        task_track_started=app.config["CELERY_TASK_TRACK_STARTED"],
+    )
+
+    class ContextTask(celery.Task):
+        """Ensures every Celery task runs inside a Flask app context."""
+
+        def __call__(self, *args, **kwargs):
+            with app.app_context():
+                return self.run(*args, **kwargs)
+
+    celery.Task = ContextTask
diff --git a/app/models.py b/app/models.py
new file mode 100644
index 00000000..c8eee7db
--- /dev/null
+++ b/app/models.py
@@ -0,0 +1,128 @@
+"""
+PinFlow AI — Database Models
+Defines User, Pin, and BoardCache with relationships.
+"""
+
+from datetime import datetime
+from flask_login import UserMixin
+from app import db
+
+
+class User(UserMixin, db.Model):
+    """Registered user with optional Pinterest OAuth tokens."""
+
+    __tablename__ = "users"
+
+    id = db.Column(db.Integer, primary_key=True)
+    email = db.Column(db.String(255), unique=True, nullable=False, index=True)
+    password_hash = db.Column(db.String(255), nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+    # Pinterest OAuth fields
+    pinterest_access_token = db.Column(db.Text, nullable=True)
+    pinterest_refresh_token = db.Column(db.Text, nullable=True)
+    pinterest_token_expires_at = db.Column(db.DateTime, nullable=True)
+    pinterest_user_id = db.Column(db.String(128), nullable=True)
+    pinterest_username = db.Column(db.String(128), nullable=True)
+
+    # Relationship to Pins and BoardCache
+    pins = db.relationship("Pin", backref="owner", lazy="dynamic", cascade="all, delete-orphan")
+    board_caches = db.relationship("BoardCache", backref="owner", lazy="dynamic", cascade="all, delete-orphan")
+
+    def __repr__(self) -> str:
+        return f"<User {self.email}>"
+
+    @property
+    def is_pinterest_connected(self) -> bool:
+        return bool(self.pinterest_access_token)
+
+    def recent_pins(self, limit: int = 50):
+        return self.pins.order_by(Pin.created_at.desc()).limit(limit).all()
+
+
+class Pin(db.Model):
+    """A generated Pinterest pin (draft or posted)."""
+
+    __tablename__ = "pins"
+
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey("users.id"), nullable=False, index=True)
+
+    # Content
+    title = db.Column(db.String(255), nullable=False)
+    description = db.Column(db.Text, nullable=True)
+    hashtags = db.Column(db.Text, nullable=True)
+    cta = db.Column(db.String(255), nullable=True)
+    tone = db.Column(db.String(64), default="viral")
+
+    # Media & Link
+    image_url = db.Column(db.Text, nullable=True)
+    affiliate_link = db.Column(db.Text, nullable=True)
+
+    # Pinterest destination
+    board_id = db.Column(db.String(255), nullable=True)
+    board_name = db.Column(db.String(255), nullable=True)
+    pinterest_pin_id = db.Column(db.String(255), nullable=True)  # ID returned after posting
+
+    # Metadata
+    created_at = db.Column(db.DateTime, default=datetime.utcnow, index=True)
+    status = db.Column(
+        db.String(32),
+        default="draft",
+        nullable=False,
+    )  # draft | posted | failed
+
+    # Raw product data (stored as JSON text for reference)
+    product_title = db.Column(db.Text, nullable=True)
+    product_price = db.Column(db.String(64), nullable=True)
+
+    def __repr__(self) -> str:
+        return f"<Pin {self.id} [{self.status}] {self.title[:40]}>"
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.id,
+            "title": self.title,
+            "description": self.description,
+            "hashtags": self.hashtags,
+            "cta": self.cta,
+            "tone": self.tone,
+            "image_url": self.image_url,
+            "affiliate_link": self.affiliate_link,
+            "board_id": self.board_id,
+            "board_name": self.board_name,
+            "pinterest_pin_id": self.pinterest_pin_id,
+            "status": self.status,
+            "product_title": self.product_title,
+            "product_price": self.product_price,
+            "created_at": self.created_at.isoformat() if self.created_at else None,
+        }
+
+
+class BoardCache(db.Model):
+    """Cached Pinterest boards for a user to avoid repeated API calls."""
+
+    __tablename__ = "board_caches"
+
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey("users.id"), nullable=False, index=True)
+
+    board_id = db.Column(db.String(255), nullable=False)
+    board_name = db.Column(db.String(255), nullable=False)
+    board_description = db.Column(db.Text, nullable=True)
+    board_image_url = db.Column(db.Text, nullable=True)
+    pin_count = db.Column(db.Integer, default=0)
+
+    cached_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+    def __repr__(self) -> str:
+        return f"<BoardCache {self.board_name}>"
+
+    def to_dict(self) -> dict:
+        return {
+            "id": self.board_id,
+            "name": self.board_name,
+            "description": self.board_description,
+            "image_url": self.board_image_url,
+            "pin_count": self.pin_count,
+        }
diff --git a/app/routes/__init__.py b/app/routes/__init__.py
new file mode 100644
index 00000000..d212dab6
--- /dev/null
+++ b/app/routes/__init__.py
@@ -0,0 +1 @@
+# Routes package
diff --git a/app/routes/api.py b/app/routes/api.py
new file mode 100644
index 00000000..00cf550c
--- /dev/null
+++ b/app/routes/api.py
@@ -0,0 +1,215 @@
+"""
+PinFlow AI — Core API Routes
+POST /api/fetch       → scrape Amazon product
+POST /api/generate    → generate AI Pinterest content
+POST /api/post-pin    → queue pin for posting
+GET  /api/boards      → list user's Pinterest boards
+GET  /api/history     → last 50 pins for current user
+"""
+
+from flask import Blueprint, request, jsonify
+from flask_login import login_required, current_user
+from app import db, limiter
+from app.models import Pin, BoardCache
+from app.services import scraper, ai_service, pinterest_service, image_service
+from app.tasks import post_pin_to_pinterest
+
+api_bp = Blueprint("api", __name__)
+
+
+# ── /api/fetch ────────────────────────────────────────────────────────────────
+
+@api_bp.route("/fetch", methods=["POST"])
+@login_required
+@limiter.limit("30 per minute")
+def fetch():
+    """Scrape an Amazon link and return product data + lifestyle image options."""
+    data = request.get_json(silent=True) or {}
+    link = (data.get("link") or "").strip()
+
+    if not link:
+        return jsonify({"error": "No link provided"}), 400
+
+    product = scraper.get_product_data(link)
+    keywords = scraper.extract_keywords(product["title"])
+    lifestyle_images = scraper.get_lifestyle_images(keywords)
+
+    return jsonify({
+        "title":         product["title"],
+        "price":         product["price"],
+        "product_image": product["image"],
+        "images":        lifestyle_images,
+        "link":          link,
+    })
+
+
+# ── /api/generate ─────────────────────────────────────────────────────────────
+
+@api_bp.route("/generate", methods=["POST"])
+@login_required
+@limiter.limit("20 per minute")
+def generate():
+    """
+    Generate 5 titles, 5 descriptions, hashtags and CTA via Claude.
+    Accepts: { title, price, tone }
+    """
+    data = request.get_json(silent=True) or {}
+    title = (data.get("title") or "").strip()
+    price = (data.get("price") or "N/A").strip()
+    tone  = (data.get("tone") or "viral").strip()
+
+    if not title:
+        return jsonify({"error": "Product title is required"}), 400
+
+    valid_tones = {"viral", "luxury", "casual", "affiliate"}
+    if tone not in valid_tones:
+        tone = "viral"
+
+    try:
+        content = ai_service.generate_pin_content(title, price, tone)
+    except Exception as exc:
+        print(f"[api/generate] AI error: {exc}")
+        content = ai_service._fallback_content(title, tone)
+
+    return jsonify(content)
+
+
+# ── /api/post-pin ─────────────────────────────────────────────────────────────
+
+@api_bp.route("/post-pin", methods=["POST"])
+@login_required
+@limiter.limit("10 per minute")
+def post_pin():
+    """
+    Save a pin record and enqueue it for posting to Pinterest via Celery.
+
+    Accepts:
+    {
+        "title":          str,
+        "description":    str,
+        "hashtags":       str,
+        "cta":            str,
+        "tone":           str,
+        "image_url":      str,
+        "affiliate_link": str,
+        "board_id":       str,
+        "board_name":     str,
+        "product_title":  str,
+        "product_price":  str,
+    }
+    """
+    data = request.get_json(silent=True) or {}
+
+    required = ["title", "board_id", "image_url"]
+    for field in required:
+        if not data.get(field):
+            return jsonify({"error": f"'{field}' is required"}), 400
+
+    if not current_user.is_pinterest_connected:
+        return jsonify({"error": "Connect your Pinterest account first"}), 403
+
+    # Optionally download and store the image locally
+    image_url = data["image_url"]
+    local_path = image_service.download_and_save(image_url)
+    if local_path:
+        # Build an absolute URL so Pinterest can fetch it
+        from flask import request as flask_request
+        image_url = flask_request.host_url.rstrip("/") + local_path
+
+    pin = Pin(
+        user_id=current_user.id,
+        title=data["title"],
+        description=data.get("description", ""),
+        hashtags=data.get("hashtags", ""),
+        cta=data.get("cta", ""),
+        tone=data.get("tone", "viral"),
+        image_url=image_url,
+        affiliate_link=data.get("affiliate_link", ""),
+        board_id=data["board_id"],
+        board_name=data.get("board_name", ""),
+        product_title=data.get("product_title", ""),
+        product_price=data.get("product_price", ""),
+        status="draft",
+    )
+    db.session.add(pin)
+    db.session.commit()
+
+    # Dispatch async Celery task
+    task = post_pin_to_pinterest.delay(pin.id)
+
+    return jsonify({
+        "success": True,
+        "pin_id":  pin.id,
+        "task_id": task.id,
+        "message": "Pin queued for posting!",
+    })
+
+
+# ── /api/boards ───────────────────────────────────────────────────────────────
+
+@api_bp.route("/boards", methods=["GET"])
+@login_required
+@limiter.limit("20 per minute")
+def boards():
+    """Return cached boards or fetch fresh ones from Pinterest."""
+    if not current_user.is_pinterest_connected:
+        return jsonify({"error": "Connect Pinterest first", "boards": []}), 403
+
+    # Try DB cache first (valid for 1 hour)
+    cached = BoardCache.query.filter_by(user_id=current_user.id).all()
+    if cached:
+        return jsonify({"boards": [b.to_dict() for b in cached]})
+
+    # Fetch fresh from Pinterest
+    token = pinterest_service.ensure_valid_token(current_user)
+    if not token:
+        return jsonify({"error": "Invalid Pinterest token", "boards": []}), 401
+
+    try:
+        fresh_boards = pinterest_service.get_boards(token)
+    except Exception as exc:
+        return jsonify({"error": str(exc), "boards": []}), 502
+
+    # Cache results
+    BoardCache.query.filter_by(user_id=current_user.id).delete()
+    for b in fresh_boards:
+        db.session.add(BoardCache(
+            user_id=current_user.id,
+            board_id=b["id"],
+            board_name=b["name"],
+            board_description=b.get("description", ""),
+            board_image_url=b.get("image_url"),
+            pin_count=b.get("pin_count", 0),
+        ))
+    db.session.commit()
+
+    return jsonify({"boards": fresh_boards})
+
+
+@api_bp.route("/boards/refresh", methods=["POST"])
+@login_required
+def refresh_boards():
+    """Force-clear the board cache so next /api/boards returns fresh data."""
+    BoardCache.query.filter_by(user_id=current_user.id).delete()
+    db.session.commit()
+    return jsonify({"success": True})
+
+
+# ── /api/history ──────────────────────────────────────────────────────────────
+
+@api_bp.route("/history", methods=["GET"])
+@login_required
+def history():
+    """Return the last 50 pins for the current user."""
+    pins = current_user.recent_pins(limit=50)
+    return jsonify({"pins": [p.to_dict() for p in pins]})
+
+
+@api_bp.route("/history/<int:pin_id>", methods=["DELETE"])
+@login_required
+def delete_pin(pin_id: int):
+    """Delete a specific pin from the current user's history."""
+    pin = Pin.query.filter_by(id=pin_id, user_id=current_user.id).first_or_404()
+    db.session.delete(pin)
+    db.session.commit()
+    return jsonify({"success": True})
diff --git a/app/routes/auth.py b/app/routes/auth.py
new file mode 100644
index 00000000..5b18d209
--- /dev/null
+++ b/app/routes/auth.py
@@ -0,0 +1,94 @@
+"""
+PinFlow AI — Authentication Routes
+Handles signup, login, and logout with Flask-Login and Flask-Bcrypt.
+"""
+
+from flask import Blueprint, render_template, redirect, url_for, request, flash, jsonify
+from flask_login import login_user, logout_user, login_required, current_user
+from app import db, bcrypt
+from app.models import User
+
+auth_bp = Blueprint("auth", __name__, url_prefix="/auth")
+
+
+@auth_bp.route("/signup", methods=["GET", "POST"])
+def signup():
+    """Render signup form (GET) or create a new user account (POST)."""
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+
+    if request.method == "POST":
+        data = request.get_json(silent=True) or request.form
+        email = (data.get("email") or "").strip().lower()
+        password = data.get("password") or ""
+
+        # ── Validation ────────────────────────────────────────────────────────
+        if not email or not password:
+            msg = "Email and password are required."
+            return _respond(request, 400, error=msg)
+
+        if len(password) < 8:
+            msg = "Password must be at least 8 characters."
+            return _respond(request, 400, error=msg)
+
+        if User.query.filter_by(email=email).first():
+            msg = "An account with that email already exists."
+            return _respond(request, 409, error=msg)
+
+        # ── Create user ───────────────────────────────────────────────────────
+        hashed_pw = bcrypt.generate_password_hash(password).decode("utf-8")
+        user = User(email=email, password_hash=hashed_pw)
+        db.session.add(user)
+        db.session.commit()
+
+        login_user(user, remember=True)
+
+        if request.is_json:
+            return jsonify({"success": True, "redirect": url_for("main.dashboard")})
+        flash("Welcome to PinFlow AI! 🎉", "success")
+        return redirect(url_for("main.dashboard"))
+
+    return render_template("signup.html")
+
+
+@auth_bp.route("/login", methods=["GET", "POST"])
+def login():
+    """Render login form (GET) or authenticate user (POST)."""
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+
+    if request.method == "POST":
+        data = request.get_json(silent=True) or request.form
+        email = (data.get("email") or "").strip().lower()
+        password = data.get("password") or ""
+
+        user = User.query.filter_by(email=email).first()
+        if not user or not bcrypt.check_password_hash(user.password_hash, password):
+            msg = "Invalid email or password."
+            return _respond(request, 401, error=msg)
+
+        login_user(user, remember=True)
+
+        if request.is_json:
+            return jsonify({"success": True, "redirect": url_for("main.dashboard")})
+        return redirect(url_for("main.dashboard"))
+
+    return render_template("login.html")
+
+
+@auth_bp.route("/logout")
+@login_required
+def logout():
+    logout_user()
+    flash("You've been logged out.", "info")
+    return redirect(url_for("auth.login"))
+
+
+# ── Helper ────────────────────────────────────────────────────────────────────
+
+def _respond(req, status: int, error: str):
+    """Return JSON or redirect based on whether request is AJAX."""
+    if req.is_json:
+        return jsonify({"error": error}), status
+    flash(error, "danger")
+    return redirect(req.url)
diff --git a/app/routes/main.py b/app/routes/main.py
new file mode 100644
index 00000000..f4f746fb
--- /dev/null
+++ b/app/routes/main.py
@@ -0,0 +1,22 @@
+"""
+PinFlow AI — Main Routes
+Index redirect and dashboard.
+"""
+
+from flask import Blueprint, render_template, redirect, url_for
+from flask_login import login_required, current_user
+
+main_bp = Blueprint("main", __name__)
+
+
+@main_bp.route("/")
+def index():
+    if current_user.is_authenticated:
+        return redirect(url_for("main.dashboard"))
+    return redirect(url_for("auth.login"))
+
+
+@main_bp.route("/dashboard")
+@login_required
+def dashboard():
+    return render_template("dashboard.html", user=current_user)
diff --git a/app/routes/pinterest.py b/app/routes/pinterest.py
new file mode 100644
index 00000000..7dac26b0
--- /dev/null
+++ b/app/routes/pinterest.py
@@ -0,0 +1,236 @@
+"""
+PinFlow AI — Pinterest OAuth Routes
+Handles the OAuth 2.0 connect/callback flow and account disconnection.
+
+Fixes applied vs original:
+  1. Removed @login_required from /callback — it breaks OAuth redirects
+     when the session cookie isn't forwarded cleanly by the browser/proxy.
+     We verify identity via the session state token instead.
+  2. session.permanent = True set before storing OAuth state, so the
+     session cookie survives the cross-site redirect back from Pinterest
+     (required when SESSION_COOKIE_SAMESITE="Lax" in production).
+  3. Added token expiry check on connect attempt — avoids duplicate OAuth
+     flows if token is still valid.
+  4. Improved error logging so you can actually debug failures.
+  5. /status now returns token expiry info for frontend polling.
+"""
+
+import secrets
+import logging
+from flask import Blueprint, redirect, url_for, request, flash, session, jsonify
+from flask_login import login_required, current_user, login_user
+from app import db
+from app.services import pinterest_service
+
+log = logging.getLogger(__name__)
+
+pinterest_bp = Blueprint("pinterest", __name__)
+
+
+@pinterest_bp.route("/connect")
+@login_required
+def connect():
+    """
+    Step 1: Redirect user to Pinterest's OAuth consent screen.
+    Stores a CSRF state token in the session to verify the callback.
+    """
+    # Skip OAuth entirely if token is still valid
+    if current_user.is_pinterest_connected:
+        try:
+            # get_valid_token refreshes silently if near-expiry
+            pinterest_service.get_valid_token(current_user)
+            db.session.commit()
+            flash("Pinterest is already connected.", "info")
+            return redirect(url_for("main.dashboard"))
+        except ValueError:
+            # Token invalid/expired — fall through to re-auth
+            pass
+
+    state = secrets.token_urlsafe(32)
+
+    # FIX: mark session permanent BEFORE storing state.
+    # Without this, SESSION_COOKIE_SAMESITE="Lax" can drop the cookie
+    # on the cross-site redirect back from Pinterest, losing the state
+    # and causing a guaranteed state-mismatch error.
+    session.permanent = True
+    session["pinterest_oauth_state"] = state
+
+    auth_url = pinterest_service.get_auth_url(state)
+    log.info("Redirecting user %s to Pinterest OAuth", current_user.id)
+    return redirect(auth_url)
+
+
+@pinterest_bp.route("/callback")
+def callback():
+    """
+    Step 2: Pinterest redirects here with ?code=...&state=...
+
+    FIX: Removed @login_required.
+    Flask-Login's @login_required will redirect to /login if it considers
+    the session invalid at the moment of the external redirect — which
+    swallows the ?code= parameter and silently breaks the entire flow.
+    Instead, we recover the user from the session manually after validating
+    the CSRF state token (which is equivalent security).
+    """
+    # ── Validate CSRF state ────────────────────────────────────────────────
+    returned_state = request.args.get("state", "")
+    stored_state   = session.pop("pinterest_oauth_state", "")
+
+    if not returned_state or returned_state != stored_state:
+        log.warning(
+            "Pinterest OAuth state mismatch. returned=%r stored=%r",
+            returned_state[:8] if returned_state else "",
+            stored_state[:8]   if stored_state   else "",
+        )
+        flash("Pinterest authorisation failed (state mismatch). Please try again.", "danger")
+        return redirect(url_for("main.dashboard"))
+
+    # ── Ensure user is still authenticated ────────────────────────────────
+    # (session is valid — we just confirmed the state — but be explicit)
+    if not current_user.is_authenticated:
+        flash("Your session expired during Pinterest login. Please log in again.", "warning")
+        return redirect(url_for("auth.login"))
+
+    # ── Check for OAuth errors from Pinterest ─────────────────────────────
+    error = request.args.get("error")
+    if error:
+        error_desc = request.args.get("error_description", error)
+        log.warning("Pinterest OAuth error for user %s: %s", current_user.id, error_desc)
+        flash(f"Pinterest declined access: {error_desc}", "warning")
+        return redirect(url_for("main.dashboard"))
+
+    code = request.args.get("code")
+    if not code:
+        flash("No authorisation code received from Pinterest.", "danger")
+        return redirect(url_for("main.dashboard"))
+
+    # ── Exchange code for tokens ───────────────────────────────────────────
+    try:
+        token_data = pinterest_service.exchange_code_for_token(code)
+    except Exception as exc:
+        log.error("Token exchange failed for user %s: %s", current_user.id, exc)
+        flash(f"Token exchange failed: {exc}", "danger")
+        return redirect(url_for("main.dashboard"))
+
+    # ── Persist tokens ────────────────────────────────────────────────────
+    _save_tokens(current_user, token_data)
+
+    # ── Fetch Pinterest profile (non-fatal) ───────────────────────────────
+    try:
+        profile = pinterest_service.get_user_info(current_user.pinterest_access_token)
+        current_user.pinterest_user_id = profile.get("id")
+        current_user.pinterest_username = profile.get("username")
+        log.info(
+            "Pinterest connected for user %s as @%s",
+            current_user.id,
+            current_user.pinterest_username,
+        )
+    except Exception as exc:
+        # Non-fatal: token is saved, profile is cosmetic
+        log.warning("Could not fetch Pinterest profile for user %s: %s", current_user.id, exc)
+
+    db.session.commit()
+
+    flash("Pinterest account connected successfully! 🎉", "success")
+    return redirect(url_for("main.dashboard"))
+
+
+@pinterest_bp.route("/disconnect", methods=["POST"])
+@login_required
+def disconnect():
+    """Remove all Pinterest tokens from the user's account."""
+    current_user.pinterest_access_token     = None
+    current_user.pinterest_refresh_token    = None
+    current_user.pinterest_token_expires_at = None
+    current_user.pinterest_user_id          = None
+    current_user.pinterest_username         = None
+    db.session.commit()
+
+    log.info("Pinterest disconnected for user %s", current_user.id)
+
+    if request.is_json:
+        return jsonify({"success": True})
+    flash("Pinterest account disconnected.", "info")
+    return redirect(url_for("main.dashboard"))
+
+
+@pinterest_bp.route("/status")
+@login_required
+def status():
+    """
+    Return Pinterest connection status for the current user.
+    Includes token expiry so the frontend can prompt re-auth proactively.
+    """
+    expires_at = current_user.pinterest_token_expires_at
+    return jsonify({
+        "connected":  current_user.is_pinterest_connected,
+        "username":   current_user.pinterest_username,
+        "expires_at": expires_at.isoformat() if expires_at else None,
+    })
+
+
+@pinterest_bp.route("/boards")
+@login_required
+def boards():
+    """
+    Return the user's Pinterest boards (from cache or live API).
+    Used by the dashboard board-selector dropdown.
+    """
+    from app.models import BoardCache
+
+    # Try cache first
+    cached = (
+        BoardCache.query
+        .filter_by(user_id=current_user.id)
+        .order_by(BoardCache.cached_at.desc())
+        .all()
+    )
+    if cached:
+        return jsonify({"boards": [b.to_dict() for b in cached], "from_cache": True})
+
+    # Live fetch
+    try:
+        token  = pinterest_service.get_valid_token(current_user)
+        db.session.commit()  # persist any token refresh
+        boards_data = pinterest_service.get_boards(token)
+    except Exception as exc:
+        log.error("Board fetch failed for user %s: %s", current_user.id, exc)
+        return jsonify({"error": str(exc)}), 502
+
+    # Update cache
+    BoardCache.query.filter_by(user_id=current_user.id).delete()
+    for b in boards_data:
+        media = b.get("media") or {}
+        db.session.add(BoardCache(
+            user_id           = current_user.id,
+            board_id          = b["id"],
+            board_name        = b["name"],
+            board_description = b.get("description"),
+            board_image_url   = media.get("image_cover_url"),
+            pin_count         = b.get("pin_count", 0),
+        ))
+    db.session.commit()
+
+    return jsonify({"boards": boards_data, "from_cache": False})
+
+
+# ── Helpers ───────────────────────────────────────────────────────────────────
+
+def _save_tokens(user, token_data: dict) -> None:
+    """
+    Apply token data from Pinterest onto the User model.
+    Does NOT commit — caller is responsible for db.session.commit().
+    """
+    from datetime import datetime, timedelta
+    user.pinterest_access_token  = token_data.get("access_token")
+    # Pinterest may not return a new refresh_token on every exchange;
+    # keep the old one if the new response omits it.
+    new_refresh = token_data.get("refresh_token")
+    if new_refresh:
+        user.pinterest_refresh_token = new_refresh
+
+    expires_in = token_data.get("expires_in")
+    if expires_in:
+        user.pinterest_token_expires_at = (
+            datetime.utcnow() + timedelta(seconds=int(expires_in))
+        )
\ No newline at end of file
diff --git a/app/services/__init__.py b/app/services/__init__.py
new file mode 100644
index 00000000..208998af
--- /dev/null
+++ b/app/services/__init__.py
@@ -0,0 +1,4 @@
+# Services package — exposes all service modules
+from app.services import ai_service, scraper, pinterest_service, image_service
+
+__all__ = ["ai_service", "scraper", "pinterest_service", "image_service"]
diff --git a/app/services/ai_service.py b/app/services/ai_service.py
new file mode 100644
index 00000000..5d5173f5
--- /dev/null
+++ b/app/services/ai_service.py
@@ -0,0 +1,134 @@
+"""
+PinFlow AI — AI Content Generation Service
+Uses Anthropic Claude to generate Pinterest-optimised titles, descriptions, and hashtags.
+Returns 5 title variants and 5 description variants for maximum A/B flexibility.
+"""
+
+import re
+import json
+import anthropic
+from flask import current_app
+
+
+# Tone style guide passed into Claude's system prompt
+_TONE_GUIDE = {
+    "viral":     "energetic, hype-driven, uses 1-2 relevant emojis, FOMO-inducing, trending language",
+    "luxury":    "elegant, aspirational, refined, no emojis, prestige-focused, sophisticated vocabulary",
+    "casual":    "friendly, conversational, relatable, light emoji use, like a best-friend recommendation",
+    "affiliate": "benefit-focused, deal-oriented, call-to-action heavy, value/savings-highlighted",
+}
+
+
+def _get_client() -> anthropic.Anthropic:
+    """Create Anthropic client using the key stored in Flask config."""
+    return anthropic.Anthropic(api_key=current_app.config["ANTHROPIC_API_KEY"])
+
+
+def generate_pin_content(title: str, price: str, tone: str = "viral") -> dict:
+    """
+    Generate 5 Pinterest titles, 5 descriptions, hashtags, and a CTA for a product.
+
+    Args:
+        title: Product title from Amazon
+        price: Product price string
+        tone:  One of 'viral' | 'luxury' | 'casual' | 'affiliate'
+
+    Returns:
+        {
+            "titles":       [str, str, str, str, str],
+            "descriptions": [str, str, str, str, str],
+            "hashtags":     "string of 10-15 hashtags",
+            "cta":          "short call-to-action",
+            "tone":         tone,
+        }
+    """
+    style = _TONE_GUIDE.get(tone, _TONE_GUIDE["viral"])
+
+    prompt = f"""You are a Pinterest marketing expert specialising in affiliate content.
+
+Product title: {title}
+Price: {price}
+Tone: {tone} — {style}
+
+Generate Pinterest content for this product. Return ONLY valid JSON (no markdown, no preamble) with EXACTLY this structure:
+{{
+  "titles": [
+    "Title option 1 — max 100 chars",
+    "Title option 2 — max 100 chars",
+    "Title option 3 — max 100 chars",
+    "Title option 4 — max 100 chars",
+    "Title option 5 — max 100 chars"
+  ],
+  "descriptions": [
+    "Description 1 — 150-200 chars, engaging, ends naturally",
+    "Description 2 — 150-200 chars, different angle",
+    "Description 3 — 150-200 chars, lifestyle-focused",
+    "Description 4 — 150-200 chars, problem/solution angle",
+    "Description 5 — 150-200 chars, social proof angle"
+  ],
+  "hashtags": "#tag1 #tag2 #tag3 ... (10-15 relevant hashtags as one string)",
+  "cta": "Short call-to-action phrase, max 10 words"
+}}
+
+Rules:
+- Each title must be meaningfully different (not just rephrasing)
+- Each description must take a clearly different marketing angle
+- Hashtags must be relevant to the product category
+- Match the {tone} tone throughout"""
+
+    client = _get_client()
+
+    message = client.messages.create(
+        model="claude-sonnet-4-20250514",
+        max_tokens=1024,
+        messages=[{"role": "user", "content": prompt}],
+    )
+
+    raw = message.content[0].text.strip()
+
+    # Strip markdown code fences if Claude wraps output
+    raw = re.sub(r"^```[a-z]*\n?", "", raw)
+    raw = re.sub(r"\n?```$", "", raw)
+
+    parsed = json.loads(raw)
+    parsed["tone"] = tone
+    return parsed
+
+
+def generate_all_tones(title: str, price: str) -> dict:
+    """
+    Generate content for all four tones in parallel (one call each).
+    Returns a dict keyed by tone name.
+    """
+    results = {}
+    for tone in _TONE_GUIDE:
+        try:
+            results[tone] = generate_pin_content(title, price, tone)
+        except Exception as exc:
+            print(f"[ai_service] Tone '{tone}' failed: {exc}")
+            results[tone] = _fallback_content(title, tone)
+    return results
+
+
+def _fallback_content(title: str, tone: str) -> dict:
+    """Graceful fallback when Claude API is unavailable."""
+    short = title[:60]
+    return {
+        "titles": [
+            f"🔥 {short}",
+            f"✨ You Need This: {short}",
+            f"Shop This Trending {short}",
+            f"Discover: {short}",
+            f"Don't Miss This {short}",
+        ],
+        "descriptions": [
+            f"This {short} is taking over Pinterest! Perfect for every lifestyle. Tap to see why everyone loves it.",
+            f"Looking for something special? This {short} checks every box. See the details inside!",
+            f"Upgrade your everyday with this {short}. Quality you can see and feel. Shop the link!",
+            f"Struggling to find the perfect item? {short} solves that problem. Available now!",
+            f"Thousands already love this {short}. Join the trend and discover why it's everywhere right now.",
+        ],
+        "hashtags": "#amazonfinds #trending #viral #musthave #deals #shopping #style #lifestyle #inspo #discover",
+        "cta": "Shop now before it's gone!",
+        "tone": tone,
+    }
diff --git a/app/services/image_service.py b/app/services/image_service.py
new file mode 100644
index 00000000..e0f4cdb9
--- /dev/null
+++ b/app/services/image_service.py
@@ -0,0 +1,38 @@
+"""
+PinFlow AI — Image Service
+Downloads and stores images locally, returning a web-accessible path.
+"""
+
+import os
+import requests
+from io import BytesIO
+from datetime import datetime
+from PIL import Image
+from flask import current_app
+
+
+def download_and_save(url: str) -> str | None:
+    """
+    Download an image from a URL, convert to RGB JPEG, save to UPLOAD_FOLDER.
+
+    Returns:
+        Web path string like '/static/downloads/1234567890.jpg',
+        or None on failure.
+    """
+    try:
+        resp = requests.get(url, timeout=12)
+        resp.raise_for_status()
+
+        img = Image.open(BytesIO(resp.content)).convert("RGB")
+
+        filename = f"{int(datetime.utcnow().timestamp() * 1000)}.jpg"
+        folder = current_app.config["UPLOAD_FOLDER"]
+        save_path = os.path.join(folder, filename)
+        img.save(save_path, format="JPEG", quality=92, optimize=True)
+
+        # Return the path relative to the static root so it can be served
+        return f"/static/downloads/{filename}"
+
+    except Exception as exc:
+        print(f"[image_service] Failed to download {url}: {exc}")
+        return None
diff --git a/app/services/pinterest_service.py b/app/services/pinterest_service.py
new file mode 100644
index 00000000..a1553ef4
--- /dev/null
+++ b/app/services/pinterest_service.py
@@ -0,0 +1,232 @@
+"""
+PinFlow AI — Pinterest Service
+Handles all Pinterest API v5 interactions:
+  - OAuth URL generation
+  - Authorization code → token exchange
+  - Token refresh
+  - User profile fetch
+  - Board listing
+  - Pin creation
+"""
+
+import base64
+from datetime import datetime, timedelta
+from urllib.parse import urlencode
+
+import requests
+from flask import current_app
+
+
+# ── Constants ─────────────────────────────────────────────────────────────────
+
+PINTEREST_AUTH_URL   = "https://www.pinterest.com/oauth/"
+PINTEREST_TOKEN_URL  = "https://api.pinterest.com/v5/oauth/token"
+PINTEREST_API_BASE   = "https://api.pinterest.com/v5"
+
+
+# ── OAuth helpers ─────────────────────────────────────────────────────────────
+
+def get_auth_url(state: str) -> str:
+    """
+    Build the Pinterest OAuth consent-screen URL.
+    Uses v5 OAuth endpoint — the old /oauth/authorize endpoint is deprecated.
+    """
+    params = {
+        "client_id":     current_app.config["PINTEREST_CLIENT_ID"],
+        "redirect_uri":  current_app.config["PINTEREST_REDIRECT_URI"],
+        "response_type": "code",
+        "scope":         current_app.config["PINTEREST_SCOPE"],
+        "state":         state,
+    }
+    return f"{PINTEREST_AUTH_URL}?{urlencode(params)}"
+
+
+def exchange_code_for_token(code: str) -> dict:
+    """
+    Exchange an authorization code for access + refresh tokens.
+
+    Pinterest v5 requires HTTP Basic Auth using client_id:client_secret,
+    NOT passing them as body params (a common mistake with older guides).
+
+    Returns dict with: access_token, refresh_token, expires_in, token_type, scope
+    Raises: requests.HTTPError on failure (caller should catch)
+    """
+    client_id     = current_app.config["PINTEREST_CLIENT_ID"]
+    client_secret = current_app.config["PINTEREST_CLIENT_SECRET"]
+    redirect_uri  = current_app.config["PINTEREST_REDIRECT_URI"]
+
+    # Pinterest v5 requires Basic Auth — credentials in Authorization header
+    credentials = base64.b64encode(f"{client_id}:{client_secret}".encode()).decode()
+
+    headers = {
+        "Authorization": f"Basic {credentials}",
+        "Content-Type":  "application/x-www-form-urlencoded",
+    }
+    payload = {
+        "grant_type":   "authorization_code",
+        "code":         code,
+        "redirect_uri": redirect_uri,
+    }
+
+    resp = requests.post(PINTEREST_TOKEN_URL, headers=headers, data=payload, timeout=15)
+
+    # Raise with the actual Pinterest error body so the caller can log it
+    if not resp.ok:
+        raise requests.HTTPError(
+            f"Pinterest token exchange failed [{resp.status_code}]: {resp.text}",
+            response=resp,
+        )
+
+    return resp.json()
+
+
+def refresh_access_token(refresh_token: str) -> dict:
+    """
+    Use a refresh token to get a new access token.
+    Call this when `user.pinterest_token_expires_at` is in the past.
+
+    Returns the same shape as exchange_code_for_token.
+    """
+    client_id     = current_app.config["PINTEREST_CLIENT_ID"]
+    client_secret = current_app.config["PINTEREST_CLIENT_SECRET"]
+
+    credentials = base64.b64encode(f"{client_id}:{client_secret}".encode()).decode()
+
+    headers = {
+        "Authorization": f"Basic {credentials}",
+        "Content-Type":  "application/x-www-form-urlencoded",
+    }
+    payload = {
+        "grant_type":    "refresh_token",
+        "refresh_token": refresh_token,
+    }
+
+    resp = requests.post(PINTEREST_TOKEN_URL, headers=headers, data=payload, timeout=15)
+
+    if not resp.ok:
+        raise requests.HTTPError(
+            f"Pinterest token refresh failed [{resp.status_code}]: {resp.text}",
+            response=resp,
+        )
+
+    return resp.json()
+
+
+# ── API helpers ───────────────────────────────────────────────────────────────
+
+def _get(endpoint: str, access_token: str, params: dict = None) -> dict:
+    """Authenticated GET against the Pinterest v5 API."""
+    url  = f"{PINTEREST_API_BASE}{endpoint}"
+    resp = requests.get(
+        url,
+        headers={"Authorization": f"Bearer {access_token}"},
+        params=params or {},
+        timeout=15,
+    )
+    resp.raise_for_status()
+    return resp.json()
+
+
+def _post(endpoint: str, access_token: str, payload: dict) -> dict:
+    """Authenticated POST against the Pinterest v5 API."""
+    url  = f"{PINTEREST_API_BASE}{endpoint}"
+    resp = requests.post(
+        url,
+        headers={
+            "Authorization": f"Bearer {access_token}",
+            "Content-Type":  "application/json",
+        },
+        json=payload,
+        timeout=15,
+    )
+    resp.raise_for_status()
+    return resp.json()
+
+
+# ── Business logic ────────────────────────────────────────────────────────────
+
+def get_user_info(access_token: str) -> dict:
+    """
+    Fetch the connected Pinterest user's profile.
+    Returns dict with at least: username, id, profile_image
+    """
+    return _get("/user_account", access_token)
+
+
+def get_boards(access_token: str, page_size: int = 50) -> list[dict]:
+    """
+    Return a list of the user's Pinterest boards.
+    Handles pagination automatically up to `page_size` boards.
+
+    Each board dict has: id, name, description, media (cover image), pin_count
+    """
+    data   = _get("/boards", access_token, params={"page_size": page_size})
+    return data.get("items", [])
+
+
+def create_pin(
+    access_token: str,
+    board_id: str,
+    title: str,
+    description: str,
+    image_url: str,
+    link: str = None,
+    alt_text: str = None,
+) -> dict:
+    """
+    Create a pin on the specified board via the v5 API.
+
+    Pinterest v5 requires media.source.url — NOT image_url at the top level
+    (a very common source of 400 errors from people following old tutorials).
+
+    Returns the created pin object including its id.
+    """
+    payload: dict = {
+        "board_id": board_id,
+        "title":    title,
+        "description": description,
+        "media_source": {
+            "source_type": "image_url",
+            "url":         image_url,
+        },
+    }
+    if link:
+        payload["link"] = link
+    if alt_text:
+        payload["alt_text"] = alt_text
+
+    return _post("/pins", access_token, payload)
+
+
+# ── Token management utility ──────────────────────────────────────────────────
+
+def get_valid_token(user) -> str:
+    """
+    Return a valid access token for `user`, refreshing it first if expired.
+    Updates `user` in-place but does NOT commit — caller must db.session.commit().
+
+    Raises ValueError if the user has no tokens at all.
+    """
+    if not user.pinterest_access_token:
+        raise ValueError("User has no Pinterest access token.")
+
+    # Check expiry — refresh if within 5 minutes of expiry
+    if user.pinterest_token_expires_at:
+        buffer = timedelta(minutes=5)
+        if datetime.utcnow() >= (user.pinterest_token_expires_at - buffer):
+            if not user.pinterest_refresh_token:
+                raise ValueError("Access token expired and no refresh token available.")
+
+            token_data = refresh_access_token(user.pinterest_refresh_token)
+            _apply_tokens(user, token_data)
+
+    return user.pinterest_access_token
+
+
+def _apply_tokens(user, token_data: dict) -> None:
+    """Write token fields onto user object. Does NOT commit."""
+    user.pinterest_access_token  = token_data.get("access_token")
+    user.pinterest_refresh_token = token_data.get("refresh_token", user.pinterest_refresh_token)
+    expires_in = token_data.get("expires_in")
+    if expires_in:
+        user.pinterest_token_expires_at = datetime.utcnow() + timedelta(seconds=int(expires_in))
\ No newline at end of file
diff --git a/app/services/scraper.py b/app/services/scraper.py
new file mode 100644
index 00000000..a8fe8c80
--- /dev/null
+++ b/app/services/scraper.py
@@ -0,0 +1,100 @@
+"""
+PinFlow AI — Amazon Scraper Service
+Extracts product title, price, and images from Amazon product pages.
+"""
+
+import re
+import requests
+from bs4 import BeautifulSoup
+
+
+# Realistic browser headers to avoid bot detection
+_HEADERS = {
+    "User-Agent": (
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+        "AppleWebKit/537.36 (KHTML, like Gecko) "
+        "Chrome/124.0.0.0 Safari/537.36"
+    ),
+    "Accept-Language": "en-US,en;q=0.9",
+    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+    "Accept-Encoding": "gzip, deflate, br",
+    "DNT": "1",
+    "Connection": "keep-alive",
+    "Upgrade-Insecure-Requests": "1",
+}
+
+
+def get_product_data(link: str) -> dict:
+    """
+    Scrape an Amazon product URL and return title, price, and hero image.
+
+    Returns a safe fallback dict on any failure so callers never crash.
+    """
+    try:
+        resp = requests.get(link, headers=_HEADERS, timeout=14)
+        resp.raise_for_status()
+        soup = BeautifulSoup(resp.content, "html.parser")
+
+        title = _extract_title(soup)
+        price = _extract_price(soup)
+        image = _extract_image(soup)
+
+        return {"title": title, "price": price, "image": image}
+
+    except Exception as exc:
+        print(f"[scraper] Error fetching {link}: {exc}")
+        return {"title": "Trending Product", "price": "N/A", "image": None}
+
+
+def _extract_title(soup: BeautifulSoup) -> str:
+    el = soup.find(id="productTitle")
+    return el.get_text(strip=True) if el else "Trending Product"
+
+
+def _extract_price(soup: BeautifulSoup) -> str:
+    # Try multiple selectors Amazon uses for price
+    for selector in [
+        {"class": "a-offscreen"},
+        {"id": "priceblock_ourprice"},
+        {"id": "priceblock_dealprice"},
+        {"class": "a-price-whole"},
+    ]:
+        el = soup.find("span", selector)
+        if el:
+            price_text = el.get_text(strip=True)
+            if price_text:
+                return price_text
+    return "N/A"
+
+
+def _extract_image(soup: BeautifulSoup) -> str | None:
+    img_el = soup.find(id="landingImage")
+    if not img_el:
+        img_el = soup.find(id="imgBlkFront")
+    if not img_el:
+        return None
+
+    # Prefer the higher-resolution data attribute
+    for attr in ("data-old-hires", "data-src", "src"):
+        val = img_el.get(attr)
+        if val and val.startswith("http"):
+            return val
+
+    return None
+
+
+def get_lifestyle_images(keywords: list[str]) -> list[str]:
+    """
+    Return placeholder lifestyle images based on product keywords.
+    In production, replace with a real stock-photo API (Unsplash, Pexels, etc.).
+    """
+    seeds = [abs(hash(k)) % 1000 for k in keywords[:4]] or [42, 73, 99, 11]
+    images = []
+    for i, seed in enumerate(seeds * 3):
+        images.append(f"https://picsum.photos/seed/{seed + i * 7}/600/800")
+    return images[:9]
+
+
+def extract_keywords(title: str) -> list[str]:
+    """Pull meaningful words (4+ chars) from a product title."""
+    return re.findall(r"[A-Za-z]{4,}", title)[:8]
diff --git a/app/static/script.js b/app/static/script.js
new file mode 100644
index 00000000..3e8c7f3d
--- /dev/null
+++ b/app/static/script.js
@@ -0,0 +1,470 @@
+/* ════════════════════════════════════════════════════════════════════
+   PinFlow AI — Dashboard Script
+   Handles all UI interactions: fetch → generate → post flow
+   ════════════════════════════════════════════════════════════════════ */
+
+"use strict";
+
+// ── Toast Notification System ─────────────────────────────────────────────────
+
+const Toast = {
+  container: null,
+
+  init() {
+    this.container = document.getElementById("toast-container");
+    // Show any server-side flash messages
+    if (window.__flashMessages) {
+      window.__flashMessages.forEach(([cat, msg]) => {
+        const type = { success: "success", danger: "error", warning: "warning", info: "info" }[cat] || "info";
+        this.show(msg, type);
+      });
+    }
+  },
+
+  show(message, type = "info", duration = 4000) {
+    const icons = { success: "✓", error: "✕", warning: "⚠", info: "ℹ" };
+    const toast = document.createElement("div");
+    toast.className = `toast toast-${type}`;
+    toast.innerHTML = `
+      <span class="toast-icon">${icons[type] || "ℹ"}</span>
+      <span class="toast-msg">${message}</span>
+    `;
+    this.container.appendChild(toast);
+
+    setTimeout(() => {
+      toast.classList.add("fade-out");
+      toast.addEventListener("animationend", () => toast.remove());
+    }, duration);
+  },
+};
+
+
+// ── API Helper ───────────────────────────────────────────────────────────────
+
+async function api(endpoint, options = {}) {
+  const defaults = {
+    headers: { "Content-Type": "application/json" },
+    ...options,
+  };
+  const res = await fetch(endpoint, defaults);
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
+
+// ── Panel Navigation ──────────────────────────────────────────────────────────
+
+function initNavigation() {
+  document.querySelectorAll(".nav-item[data-panel]").forEach((link) => {
+    link.addEventListener("click", (e) => {
+      e.preventDefault();
+      const panelId = link.dataset.panel;
+
+      document.querySelectorAll(".nav-item").forEach((el) => el.classList.remove("active"));
+      link.classList.add("active");
+
+      document.querySelectorAll(".panel").forEach((p) => {
+        p.classList.remove("active");
+        p.classList.add("hidden");
+      });
+
+      const target = document.getElementById(`panel-${panelId}`);
+      if (target) {
+        target.classList.remove("hidden");
+        target.classList.add("active");
+      }
+
+      if (panelId === "history") loadHistory();
+    });
+  });
+}
+
+
+// ── Step 1: Fetch Product ─────────────────────────────────────────────────────
+
+function initFetch() {
+  const btn       = document.getElementById("btn-fetch");
+  const urlInput  = document.getElementById("amazon-url");
+  const stepProd  = document.getElementById("step-product");
+  const stepGen   = document.getElementById("step-generate");
+  const stepPost  = document.getElementById("step-post");
+
+  btn.addEventListener("click", async () => {
+    const link = urlInput.value.trim();
+    if (!link) { Toast.show("Paste an Amazon link first.", "warning"); return; }
+
+    btn.classList.add("loading");
+    btn.querySelector("span").textContent = "Fetching…";
+
+    try {
+      const data = await api("/api/fetch", {
+        method: "POST",
+        body: JSON.stringify({ link }),
+      });
+
+      window.PF.productData = data;
+      window.PF.selectedImage = data.product_image || (data.images && data.images[0]);
+
+      renderProductInfo(data);
+      renderImageGrid(data.images, data.product_image);
+
+      stepProd.classList.remove("hidden");
+      stepGen.classList.remove("hidden");
+      stepPost.classList.add("hidden");  // reset if re-fetching
+
+      Toast.show("Product fetched! Select an image.", "success");
+    } catch (err) {
+      Toast.show(err.message || "Failed to fetch product.", "error");
+    } finally {
+      btn.classList.remove("loading");
+      btn.querySelector("span").textContent = "Fetch Product";
+    }
+  });
+}
+
+
+function renderProductInfo(data) {
+  const el = document.getElementById("product-info");
+  el.innerHTML = `
+    ${data.product_image
+      ? `<img class="product-thumb" src="${data.product_image}" alt="" loading="lazy" onerror="this.style.display='none'" />`
+      : ""}
+    <div class="product-meta">
+      <p class="product-title">${escHtml(data.title)}</p>
+      <p class="product-price">${escHtml(data.price)}</p>
+    </div>
+  `;
+}
+
+
+function renderImageGrid(images = [], productImage = null) {
+  const grid = document.getElementById("image-grid");
+  grid.innerHTML = "";
+
+  const all = productImage ? [productImage, ...images.filter((u) => u !== productImage)] : images;
+
+  all.slice(0, 9).forEach((url, idx) => {
+    const div = document.createElement("div");
+    div.className = "image-option" + (idx === 0 ? " selected" : "");
+    div.innerHTML = `<img src="${url}" alt="Option ${idx + 1}" loading="lazy" />`;
+    div.addEventListener("click", () => {
+      document.querySelectorAll(".image-option").forEach((el) => el.classList.remove("selected"));
+      div.classList.add("selected");
+      window.PF.selectedImage = url;
+      updatePreviewImage(url);
+    });
+    grid.appendChild(div);
+  });
+
+  if (all.length === 0) {
+    grid.innerHTML = `<p style="color:var(--text-muted);font-size:.85rem;grid-column:1/-1">No images found. The product image will be used.</p>`;
+  }
+}
+
+
+// ── Step 2: Tone + Generate ───────────────────────────────────────────────────
+
+function initGenerate() {
+  // Tone selector
+  document.querySelectorAll(".tone-btn").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      document.querySelectorAll(".tone-btn").forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+      window.PF.selectedTone = btn.dataset.tone;
+    });
+  });
+
+  // Generate button
+  document.getElementById("btn-generate").addEventListener("click", async () => {
+    if (!window.PF.productData) { Toast.show("Fetch a product first.", "warning"); return; }
+
+    const btn = document.getElementById("btn-generate");
+    btn.classList.add("loading");
+    btn.querySelector("span").textContent = "Generating…";
+
+    try {
+      const content = await api("/api/generate", {
+        method: "POST",
+        body: JSON.stringify({
+          title: window.PF.productData.title,
+          price: window.PF.productData.price,
+          tone:  window.PF.selectedTone,
+        }),
+      });
+
+      window.PF.generatedContent = content;
+      renderContentEditor(content);
+      document.getElementById("step-post").classList.remove("hidden");
+      loadBoards();
+      Toast.show("AI content generated! Review and post.", "success");
+    } catch (err) {
+      Toast.show(err.message || "AI generation failed.", "error");
+    } finally {
+      btn.classList.remove("loading");
+      btn.querySelector("span").textContent = "Generate with AI";
+    }
+  });
+}
+
+
+function renderContentEditor(content) {
+  // Titles
+  const titlesList = document.getElementById("titles-list");
+  titlesList.innerHTML = "";
+  (content.titles || []).forEach((t, i) => {
+    const div = createVariantItem(t, i === 0, () => {
+      document.getElementById("selected-title").value = t;
+      updatePreviewTitle(t);
+    });
+    titlesList.appendChild(div);
+  });
+
+  // Descriptions
+  const descList = document.getElementById("descriptions-list");
+  descList.innerHTML = "";
+  (content.descriptions || []).forEach((d, i) => {
+    const div = createVariantItem(d, i === 0, () => {
+      document.getElementById("selected-description").value = d;
+      updatePreviewDesc(d);
+    });
+    descList.appendChild(div);
+  });
+
+  // Pre-fill fields with first option
+  const firstTitle = (content.titles || [])[0] || "";
+  const firstDesc  = (content.descriptions || [])[0] || "";
+  document.getElementById("selected-title").value       = firstTitle;
+  document.getElementById("selected-description").value = firstDesc;
+  document.getElementById("selected-hashtags").value    = content.hashtags || "";
+
+  // Live preview updates
+  document.getElementById("selected-title").addEventListener("input", (e) => updatePreviewTitle(e.target.value));
+  document.getElementById("selected-description").addEventListener("input", (e) => updatePreviewDesc(e.target.value));
+  document.getElementById("selected-hashtags").addEventListener("input", (e) => updatePreviewTags(e.target.value));
+
+  // Initial preview
+  updatePreviewTitle(firstTitle);
+  updatePreviewDesc(firstDesc);
+  updatePreviewTags(content.hashtags || "");
+  updatePreviewImage(window.PF.selectedImage || "");
+}
+
+
+function createVariantItem(text, selectedByDefault, onSelect) {
+  const div = document.createElement("div");
+  div.className = "variant-item" + (selectedByDefault ? " selected" : "");
+  div.textContent = text;
+  div.addEventListener("click", () => {
+    div.closest(".variant-list").querySelectorAll(".variant-item").forEach((el) => el.classList.remove("selected"));
+    div.classList.add("selected");
+    onSelect();
+  });
+  return div;
+}
+
+
+// ── Preview ────────────────────────────────────────────────────────────────────
+
+function updatePreviewImage(url) {
+  const img = document.getElementById("preview-image");
+  if (img && url) img.src = url;
+}
+
+function updatePreviewTitle(text) {
+  const el = document.getElementById("preview-title");
+  if (el) el.textContent = text;
+}
+
+function updatePreviewDesc(text) {
+  const el = document.getElementById("preview-desc");
+  if (el) el.textContent = text;
+}
+
+function updatePreviewTags(text) {
+  const el = document.getElementById("preview-tags");
+  if (el) el.textContent = text;
+}
+
+
+// ── Boards ────────────────────────────────────────────────────────────────────
+
+async function loadBoards() {
+  if (!window.PF.pinterestConnected) return;
+
+  const sel = document.getElementById("board-select");
+  sel.innerHTML = `<option value="">Loading boards…</option>`;
+
+  try {
+    const data = await api("/api/boards");
+    sel.innerHTML = `<option value="">— Select a board —</option>`;
+    (data.boards || []).forEach((b) => {
+      const opt = document.createElement("option");
+      opt.value       = b.id;
+      opt.textContent = `${b.name} (${b.pin_count || 0} pins)`;
+      sel.appendChild(opt);
+    });
+  } catch (err) {
+    sel.innerHTML = `<option value="">Failed to load boards</option>`;
+    Toast.show("Could not load boards: " + err.message, "error");
+  }
+}
+
+
+function initBoardRefresh() {
+  document.getElementById("btn-refresh-boards")?.addEventListener("click", async () => {
+    try {
+      await api("/api/boards/refresh", { method: "POST" });
+      await loadBoards();
+      Toast.show("Boards refreshed!", "success");
+    } catch (err) {
+      Toast.show("Refresh failed: " + err.message, "error");
+    }
+  });
+}
+
+
+// ── Step 3: Post Pin ─────────────────────────────────────────────────────────
+
+function initPost() {
+  document.getElementById("btn-post").addEventListener("click", async () => {
+    if (!window.PF.pinterestConnected) {
+      Toast.show("Connect your Pinterest account first.", "warning");
+      return;
+    }
+
+    const boardId = document.getElementById("board-select").value;
+    const boardName = document.getElementById("board-select").selectedOptions[0]?.text || "";
+    const title       = document.getElementById("selected-title").value.trim();
+    const description = document.getElementById("selected-description").value.trim();
+    const hashtags    = document.getElementById("selected-hashtags").value.trim();
+    const imageUrl    = window.PF.selectedImage;
+
+    if (!title)   { Toast.show("Please enter a title.", "warning"); return; }
+    if (!boardId) { Toast.show("Please select a Pinterest board.", "warning"); return; }
+    if (!imageUrl){ Toast.show("Please select an image.", "warning"); return; }
+
+    const btn = document.getElementById("btn-post");
+    btn.classList.add("loading");
+    btn.querySelector("span").textContent = "Posting…";
+
+    try {
+      const result = await api("/api/post-pin", {
+        method: "POST",
+        body: JSON.stringify({
+          title,
+          description,
+          hashtags,
+          tone:           window.PF.selectedTone,
+          image_url:      imageUrl,
+          affiliate_link: window.PF.productData?.link || "",
+          board_id:       boardId,
+          board_name:     boardName.split(" (")[0],
+          product_title:  window.PF.productData?.title || "",
+          product_price:  window.PF.productData?.price || "",
+        }),
+      });
+
+      Toast.show("🎉 Pin queued for posting!", "success");
+    } catch (err) {
+      Toast.show(err.message || "Post failed.", "error");
+    } finally {
+      btn.classList.remove("loading");
+      btn.querySelector("span").textContent = "Post to Pinterest";
+    }
+  });
+}
+
+
+// ── History ──────────────────────────────────────────────────────────────────
+
+async function loadHistory() {
+  const grid = document.getElementById("history-grid");
+  grid.innerHTML = `<div class="loading-state"><span class="spinner"></span>Loading…</div>`;
+
+  try {
+    const data = await api("/api/history");
+    const pins = data.pins || [];
+
+    if (pins.length === 0) {
+      grid.innerHTML = `<div class="empty-state">No pins yet. Create your first one!</div>`;
+      return;
+    }
+
+    grid.innerHTML = "";
+    pins.forEach((pin) => {
+      const card = createHistoryCard(pin);
+      grid.appendChild(card);
+    });
+  } catch (err) {
+    grid.innerHTML = `<div class="empty-state">Failed to load history.</div>`;
+  }
+}
+
+
+function createHistoryCard(pin) {
+  const card = document.createElement("div");
+  card.className = "history-card";
+
+  const imgSrc   = pin.image_url || "https://picsum.photos/seed/42/600/800";
+  const date     = pin.created_at ? new Date(pin.created_at).toLocaleDateString() : "";
+  const badgeCls = { posted: "badge-posted", draft: "badge-draft", failed: "badge-failed" }[pin.status] || "badge-draft";
+
+  card.innerHTML = `
+    <img src="${escHtml(imgSrc)}" alt="" loading="lazy" onerror="this.src='https://picsum.photos/seed/42/600/800'" />
+    <div class="history-card-body">
+      <p class="history-card-title">${escHtml(pin.title || "Untitled")}</p>
+      <p class="history-card-desc">${escHtml((pin.description || "").substring(0, 80))}…</p>
+      <div class="history-card-meta">
+        <span class="badge ${badgeCls}">${pin.status || "draft"}</span>
+        <span class="history-date">${date}</span>
+      </div>
+    </div>
+  `;
+  return card;
+}
+
+
+// ── Utils ─────────────────────────────────────────────────────────────────────
+
+function escHtml(str) {
+  const d = document.createElement("div");
+  d.appendChild(document.createTextNode(String(str || "")));
+  return d.innerHTML;
+}
+
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+
+document.addEventListener("DOMContentLoaded", () => {
+  Toast.init();
+  initNavigation();
+  initFetch();
+  initGenerate();
+  initPost();
+  initBoardRefresh();
+});
+
+
+// Global (for long operations like auth, which may redirect away and back)
+function showLoader() {
+  document.getElementById("global-loader").classList.remove("hidden");
+}
+function hideLoader() {
+  document.getElementById("global-loader").classList.add("hidden");
+}
+
+// Button click animation for better feedback on slow operations
+document.querySelectorAll("button").forEach(btn => {
+  btn.addEventListener("click", () => {
+    btn.style.transform = "scale(0.96)";
+    setTimeout(() => btn.style.transform = "", 120);
+  });
+});
+
+// Progress update (used during multi-step operations)
+function updateProgress(step) {
+  const fill = document.getElementById("progress-fill");
+  if (!fill) return;
+  fill.style.width = (step * 25) + "%";
+}
\ No newline at end of file
diff --git a/app/static/style.css b/app/static/style.css
new file mode 100644
index 00000000..f28f2654
--- /dev/null
+++ b/app/static/style.css
@@ -0,0 +1,785 @@
+/* ════════════════════════════════════════════════════════════════════
+   PinFlow AI — Design System
+   Dark Pinterest-inspired UI with Syne display font
+   ════════════════════════════════════════════════════════════════════ */
+
+/* ── Variables ──────────────────────────────────────────────────────── */
+:root {
+  --bg-base:      #0d0d0f;
+  --bg-card:      #161618;
+  --bg-card-2:    #1e1e21;
+  --bg-hover:     #252528;
+  --border:       rgba(255,255,255,.07);
+  --border-focus: rgba(230, 0, 35, .5);
+
+  --red:          #e60023;
+  --red-hover:    #c0001d;
+  --red-glow:     rgba(230, 0, 35, .25);
+
+  --text-primary:   #f0f0f2;
+  --text-secondary: #9494a0;
+  --text-muted:     #5a5a68;
+
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error:   #ef4444;
+  --info:    #3b82f6;
+
+  --radius-sm: 8px;
+  --radius:    12px;
+  --radius-lg: 18px;
+
+  --shadow-card: 0 2px 20px rgba(0,0,0,.4);
+  --shadow-glow: 0 0 60px var(--red-glow);
+
+  --sidebar-w: 240px;
+  --transition: .18s cubic-bezier(.4,0,.2,1);
+
+  font-size: 15px;
+}
+
+/* ── Reset ──────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.6;
+}
+a { color: var(--red); text-decoration: none; transition: opacity var(--transition); }
+a:hover { opacity: .8; }
+img { max-width: 100%; display: block; }
+button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; }
+
+/* ════════════════════════════════════════════════════════════════════
+   AUTH PAGES
+   ════════════════════════════════════════════════════════════════════ */
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-glow {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(230,0,35,.15), transparent 70%);
+  pointer-events: none;
+}
+
+.auth-card {
+  width: 420px;
+  max-width: calc(100vw - 2rem);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 2.5rem 2rem;
+  box-shadow: var(--shadow-card);
+  position: relative;
+  animation: slide-up .4s ease both;
+}
+
+@keyframes slide-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.auth-logo {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  margin-bottom: 2rem;
+}
+
+.logo-mark {
+  width: 36px; height: 36px;
+  background: var(--red);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Syne", sans-serif;
+  font-weight: 800;
+  font-size: 1.1rem;
+  color: #fff;
+}
+
+.logo-text {
+  font-family: "Syne", sans-serif;
+  font-weight: 700;
+  font-size: 1.15rem;
+  color: var(--text-primary);
+}
+
+.logo-text .accent { color: var(--red); }
+
+.auth-title {
+  font-family: "Syne", sans-serif;
+  font-size: 1.6rem;
+  font-weight: 800;
+  margin-bottom: .25rem;
+}
+
+.auth-subtitle { color: var(--text-secondary); margin-bottom: 1.75rem; }
+
+.auth-error {
+  background: rgba(239,68,68,.12);
+  border: 1px solid rgba(239,68,68,.3);
+  color: #fca5a5;
+  border-radius: var(--radius-sm);
+  padding: .65rem 1rem;
+  font-size: .875rem;
+  margin-bottom: 1rem;
+}
+
+.auth-switch { margin-top: 1.25rem; text-align: center; color: var(--text-secondary); font-size: .9rem; }
+
+/* ════════════════════════════════════════════════════════════════════
+   APP SHELL
+   ════════════════════════════════════════════════════════════════════ */
+.app-shell {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* ── Sidebar ──────────────────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  min-height: 100vh;
+  background: var(--bg-card);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1rem;
+  position: sticky;
+  top: 0;
+  flex-shrink: 0;
+}
+
+.sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  padding: .25rem .5rem 1.5rem;
+}
+
+.sidebar-nav {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: .25rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: .65rem;
+  padding: .65rem .75rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-size: .875rem;
+  font-weight: 500;
+  transition: all var(--transition);
+}
+
+.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
+
+.nav-item:hover  { background: var(--bg-hover); color: var(--text-primary); opacity: 1; }
+.nav-item.active { background: rgba(230,0,35,.1); color: var(--red); }
+
+.sidebar-footer { margin-top: auto; }
+
+/* Pinterest status widget */
+.pinterest-status {
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: .75rem;
+  margin-bottom: .75rem;
+  font-size: .8rem;
+}
+
+.status-connected, .status-disconnected {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.connected    { background: var(--success); box-shadow: 0 0 6px var(--success); }
+.status-dot.disconnected { background: var(--text-muted); }
+
+.status-label { color: var(--text-primary); font-weight: 500; }
+.status-user  { color: var(--text-secondary); font-size: .75rem; }
+
+.user-row {
+  display: flex;
+  align-items: center;
+  gap: .6rem;
+  padding: .5rem;
+  border-radius: var(--radius-sm);
+}
+
+.user-avatar {
+  width: 32px; height: 32px;
+  background: var(--red);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: .85rem;
+  flex-shrink: 0;
+}
+
+.user-info { flex: 1; overflow: hidden; }
+.user-email { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.logout-btn {
+  color: var(--text-muted);
+  display: flex;
+  transition: color var(--transition);
+}
+.logout-btn:hover { color: var(--error); opacity: 1; }
+.logout-btn svg { width: 16px; height: 16px; }
+
+/* ── Main content ─────────────────────────────────────────────────── */
+.main-content {
+  flex: 1;
+  padding: 2rem;
+  max-width: 780px;
+  overflow-x: hidden;
+}
+
+/* ── Panel ──────────────────────────────────────────────────────────── */
+.panel { display: none; }
+.panel.active { display: block; animation: fade-in .25s ease; }
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.panel-header { margin-bottom: 1.5rem; }
+.panel-header h2 {
+  font-family: "Syne", sans-serif;
+  font-size: 1.5rem;
+  font-weight: 800;
+}
+.panel-header p { color: var(--text-secondary); font-size: .9rem; margin-top: .2rem; }
+
+/* ── Cards ──────────────────────────────────────────────────────────── */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+  transition: all var(--transition);
+}
+
+.card.hidden { display: none; }
+
+.card-label {
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+   FORM ELEMENTS
+   ════════════════════════════════════════════════════════════════════ */
+.field-group {
+  margin-bottom: 1.1rem;
+}
+
+.field-group label {
+  display: block;
+  font-size: .8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  margin-bottom: .4rem;
+}
+
+.hint {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+.input-field, .input-url {
+  width: 100%;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  padding: .6rem .9rem;
+  font-size: .9rem;
+  transition: border-color var(--transition), box-shadow var(--transition);
+  outline: none;
+}
+
+.input-field:focus, .input-url:focus {
+  border-color: var(--border-focus);
+  box-shadow: 0 0 0 3px rgba(230,0,35,.12);
+}
+
+textarea.input-field { resize: vertical; font-family: inherit; }
+
+.input-row {
+  display: flex;
+  gap: .75rem;
+}
+
+.input-row .input-url { flex: 1; }
+
+.board-select-row {
+  display: flex;
+  gap: .5rem;
+  align-items: center;
+}
+
+.board-select-row select { flex: 1; }
+
+select.input-field {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right .75rem center;
+  padding-right: 2.5rem;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+   BUTTONS
+   ════════════════════════════════════════════════════════════════════ */
+.btn-primary {
+  background: var(--red);
+  color: #fff;
+  padding: .6rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: .9rem;
+  transition: all var(--transition);
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  white-space: nowrap;
+}
+
+.btn-primary:hover     { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 4px 16px var(--red-glow); }
+.btn-primary:active    { transform: none; }
+.btn-primary.btn-full  { width: 100%; justify-content: center; padding: .75rem; }
+
+.btn-pinterest {
+  background: var(--red);
+  color: #fff;
+  padding: .65rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  font-size: .9rem;
+  display: inline-flex;
+  align-items: center;
+  gap: .6rem;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+
+.btn-pinterest:hover  { background: var(--red-hover); transform: translateY(-1px); box-shadow: 0 4px 20px var(--red-glow); opacity: 1; color: #fff; }
+.btn-pinterest.btn-full { width: 100%; justify-content: center; padding: .8rem; }
+.btn-pinterest.btn-sm { font-size: .8rem; padding: .4rem .75rem; }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  padding: .6rem 1rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: .85rem;
+  transition: all var(--transition);
+}
+
+.btn-ghost:hover  { background: var(--bg-hover); color: var(--text-primary); border-color: rgba(255,255,255,.15); }
+.btn-ghost.btn-sm { padding: .4rem .75rem; font-size: .8rem; }
+.btn-ghost.btn-icon { padding: .5rem; }
+.btn-ghost.btn-icon svg { width: 16px; height: 16px; display: block; }
+
+/* Loading state */
+.btn-primary.loading, .btn-pinterest.loading {
+  opacity: .7;
+  pointer-events: none;
+}
+
+/* ════════════════════════════════════════════════════════════════════
+   PRODUCT PREVIEW
+   ════════════════════════════════════════════════════════════════════ */
+.product-info {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  margin-bottom: 1.25rem;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1rem;
+}
+
+.product-thumb {
+  width: 64px; height: 64px;
+  object-fit: cover;
+  border-radius: 8px;
+  flex-shrink: 0;
+  background: var(--bg-hover);
+}
+
+.product-meta { flex: 1; }
+.product-title { font-weight: 600; font-size: .9rem; margin-bottom: .3rem; line-height: 1.4; }
+.product-price { color: var(--red); font-weight: 700; font-size: .9rem; }
+
+/* ── Image Grid ──────────────────────────────────────────────────────── */
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: .75rem;
+}
+
+.image-option {
+  aspect-ratio: 3/4;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all var(--transition);
+  position: relative;
+}
+
+.image-option img {
+  width: 100%; height: 100%;
+  object-fit: cover;
+  transition: transform var(--transition);
+}
+
+.image-option:hover img { transform: scale(1.04); }
+.image-option:hover { border-color: var(--border-focus); }
+.image-option.selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-glow); }
+.image-option.selected::after {
+  content: "✓";
+  position: absolute;
+  top: 6px; right: 6px;
+  background: var(--red);
+  color: #fff;
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: .75rem;
+  font-weight: 700;
+}
+
+/* ── Tone Selector ──────────────────────────────────────────────────── */
+.tone-selector {
+  display: flex;
+  gap: .5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.tone-btn {
+  padding: .45rem .9rem;
+  border-radius: 100px;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  font-size: .85rem;
+  font-weight: 500;
+  transition: all var(--transition);
+}
+
+.tone-btn:hover  { border-color: rgba(255,255,255,.2); color: var(--text-primary); }
+.tone-btn.active {
+  background: var(--red);
+  border-color: var(--red);
+  color: #fff;
+  box-shadow: 0 2px 12px var(--red-glow);
+}
+
+/* ── Variant Lists (Titles / Descriptions) ───────────────────────────── */
+.variant-list {
+  display: flex;
+  flex-direction: column;
+  gap: .4rem;
+  margin-bottom: .6rem;
+}
+
+.variant-item {
+  padding: .6rem .9rem;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: .875rem;
+  cursor: pointer;
+  transition: all var(--transition);
+  color: var(--text-secondary);
+}
+
+.variant-item:hover  { border-color: rgba(255,255,255,.2); color: var(--text-primary); }
+.variant-item.selected {
+  border-color: var(--red);
+  background: rgba(230,0,35,.06);
+  color: var(--text-primary);
+}
+
+/* ── Pin Preview ─────────────────────────────────────────────────────── */
+.pin-preview {
+  margin-top: 1.25rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+.preview-label {
+  padding: .5rem 1rem;
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--text-muted);
+  background: var(--bg-card-2);
+  border-bottom: 1px solid var(--border);
+}
+
+.preview-inner {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: var(--bg-card-2);
+}
+
+.preview-inner img {
+  width: 80px; height: 108px;
+  object-fit: cover;
+  border-radius: 8px;
+  flex-shrink: 0;
+  background: var(--bg-hover);
+}
+
+.preview-content { flex: 1; }
+.preview-title { font-weight: 600; font-size: .9rem; margin-bottom: .35rem; line-height: 1.4; }
+.preview-desc  { color: var(--text-secondary); font-size: .8rem; line-height: 1.5; margin-bottom: .5rem; }
+.preview-tags  { color: var(--red); font-size: .75rem; line-height: 1.6; }
+
+/* ════════════════════════════════════════════════════════════════════
+   HISTORY GRID
+   ════════════════════════════════════════════════════════════════════ */
+.history-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.history-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  transition: all var(--transition);
+  animation: slide-up .3s ease both;
+}
+
+.history-card:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); box-shadow: var(--shadow-card); }
+
+.history-card img {
+  width: 100%; height: 180px;
+  object-fit: cover;
+  background: var(--bg-hover);
+}
+
+.history-card-body { padding: .9rem; }
+.history-card-title { font-weight: 600; font-size: .85rem; margin-bottom: .25rem; line-height: 1.4; }
+.history-card-desc  { color: var(--text-secondary); font-size: .75rem; line-height: 1.5; margin-bottom: .6rem; }
+
+.history-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: .72rem;
+}
+
+.badge {
+  padding: .2rem .55rem;
+  border-radius: 100px;
+  font-size: .7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+}
+
+.badge-posted  { background: rgba(34,197,94,.15); color: var(--success); }
+.badge-draft   { background: rgba(148,148,160,.12); color: var(--text-muted); }
+.badge-failed  { background: rgba(239,68,68,.15); color: var(--error); }
+
+.history-date { color: var(--text-muted); }
+
+/* ════════════════════════════════════════════════════════════════════
+   TOAST NOTIFICATIONS
+   ════════════════════════════════════════════════════════════════════ */
+#toast-container {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: .5rem;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: all;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: .75rem 1rem .75rem .85rem;
+  min-width: 260px;
+  max-width: 360px;
+  display: flex;
+  align-items: flex-start;
+  gap: .65rem;
+  font-size: .875rem;
+  box-shadow: var(--shadow-card);
+  animation: toast-in .3s cubic-bezier(.34,1.56,.64,1) both;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(40px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+.toast.fade-out { animation: toast-out .3s ease forwards; }
+@keyframes toast-out {
+  to { opacity: 0; transform: translateX(40px); }
+}
+
+.toast-icon { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }
+.toast-msg  { flex: 1; color: var(--text-primary); line-height: 1.45; }
+
+.toast-success { border-left: 3px solid var(--success); }
+.toast-error   { border-left: 3px solid var(--error);   }
+.toast-info    { border-left: 3px solid var(--info);    }
+.toast-warning { border-left: 3px solid var(--warning); }
+
+/* ════════════════════════════════════════════════════════════════════
+   LOADING / EMPTY STATES
+   ════════════════════════════════════════════════════════════════════ */
+.loading-state, .empty-state {
+  padding: 3rem 1rem;
+  text-align: center;
+  color: var(--text-muted);
+  grid-column: 1 / -1;
+  font-size: .9rem;
+}
+
+.spinner {
+  display: inline-block;
+  width: 20px; height: 20px;
+  border: 2px solid var(--border);
+  border-top-color: var(--red);
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+  vertical-align: middle;
+  margin-right: .5rem;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ════════════════════════════════════════════════════════════════════
+   UTILITY
+   ════════════════════════════════════════════════════════════════════ */
+.hidden { display: none !important; }
+
+/* Scrollbar */
+::-webkit-scrollbar       { width: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.15); }
+
+/* ════════════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ════════════════════════════════════════════════════════════════════ */
+@media (max-width: 640px) {
+  .sidebar { display: none; }
+  .main-content { padding: 1rem; }
+  .input-row { flex-direction: column; }
+  .image-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
+  .history-grid { grid-template-columns: 1fr 1fr; }
+}
+
+
+/* Loader */
+.global-loader {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader-ring {
+  width: 40px;
+  height: 40px;
+  border: 3px solid #333;
+  border-top: 3px solid #e60023;
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+}
+
+/* Password */
+.password-group {
+  position: relative;
+}
+.password-group button {
+  position: absolute;
+  right: 10px;
+  top: 8px;
+  background: none;
+  color: #aaa;
+}
+
+/* Strength */
+.strength-bar {
+  height: 4px;
+  background: #222;
+  margin-top: 5px;
+}
+#strength-fill {
+  height: 100%;
+  width: 0%;
+  background: #e60023;
+}
+
+/* Progress */
+.progress-bar {
+  height: 4px;
+  background: #222;
+  margin-bottom: 1rem;
+}
+#progress-fill {
+  height: 100%;
+  width: 0%;
+  background: #e60023;
+  transition: .3s;
+}
\ No newline at end of file
diff --git a/app/tasks.py b/app/tasks.py
new file mode 100644
index 00000000..8a687769
--- /dev/null
+++ b/app/tasks.py
@@ -0,0 +1,69 @@
+"""
+PinFlow AI — Celery Background Tasks
+Handles async Pinterest posting with automatic retry on failure .
+"""
+
+from app import celery, db
+from app.models import Pin, User
+from app.services import pinterest_service
+
+
+@celery.task(
+    bind=True,
+    max_retries=3,
+    default_retry_delay=30,  # seconds between retries on failure of this task
+    name="tasks.post_pin_to_pinterest",
+)
+def post_pin_to_pinterest(self, pin_id: int) -> dict:
+    """
+    Background task: post a saved Pin to Pinterest.
+
+    Retries up to 3 times with 30-second delays on transient errors.
+    Updates Pin.status to 'posted' or 'failed' upon completion.
+
+    Args:
+        pin_id: Primary key of the Pin record to post.
+    """
+    pin = Pin.query.get(pin_id)
+    if not pin:
+        return {"success": False, "error": f"Pin {pin_id} not found"}
+
+    user = User.query.get(pin.user_id)
+    if not user:
+        pin.status = "failed"
+        db.session.commit()
+        return {"success": False, "error": "User not found"}
+
+    # Ensure we have a valid (possibly refreshed) access token for the user before posting
+    access_token = pinterest_service.ensure_valid_token(user)
+    if not access_token:
+        pin.status = "failed"
+        db.session.commit()
+        return {"success": False, "error": "No valid Pinterest token"}
+
+    try:
+        result = pinterest_service.post_pin(
+            access_token=access_token,
+            board_id=pin.board_id,
+            title=pin.title,
+            description=f"{pin.description}\n\n{pin.hashtags}",
+            image_url=pin.image_url,
+            link=pin.affiliate_link,
+        )
+
+        pin.status = "posted"
+        pin.pinterest_pin_id = result.get("id")
+        db.session.commit()
+
+        return {"success": True, "pinterest_pin_id": pin.pinterest_pin_id}
+
+    except Exception as exc:
+        print(f"[celery] post_pin_to_pinterest failed for pin {pin_id}: {exc}")
+
+        # Retry on transient errors ; mark failed after exhausting retries or on non-retryable errors
+        try:
+            raise self.retry(exc=exc)
+        except self.MaxRetriesExceededError:
+            pin.status = "failed"
+            db.session.commit()
+            return {"success": False, "error": str(exc)}
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 00000000..dc75a5c5
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{% block title %}PinFlow AI{% endblock %}</title>
+
+  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+
+  {% block head %}{% endblock %}
+</head>
+
+<body>
+
+<!-- Global Loader -->
+<div id="global-loader" class="global-loader hidden">
+  <div class="loader-ring"></div>
+</div>
+
+<!-- Toast -->
+<div id="toast-container"></div>
+
+{% block body %}{% endblock %}
+
+<script src="{{ url_for('static', filename='script.js') }}"></script>
+{% block scripts %}{% endblock %}
+
+</body>
+</html>
\ No newline at end of file
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
new file mode 100644
index 00000000..4f4e5b22
--- /dev/null
+++ b/app/templates/dashboard.html
@@ -0,0 +1,194 @@
+{% extends "base.html" %}
+{% block title %}Dashboard — PinFlow AI{% endblock %}
+
+{% block body %}
+<div class="app-shell">
+
+  <!-- ── Sidebar ── -->
+  <aside class="sidebar">
+    <div class="sidebar-logo">
+      <div class="logo-mark">P</div>
+      <span class="logo-text">PinFlow <span class="accent">AI</span></span>
+    </div>
+
+    <nav class="sidebar-nav">
+      <a href="#" class="nav-item active" data-panel="create">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+        Create Pin
+      </a>
+      <a href="#" class="nav-item" data-panel="history">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
+        History
+      </a>
+    </nav>
+
+    <div class="sidebar-footer">
+      <!-- Pinterest connection status -->
+      <div class="pinterest-status" id="pinterest-status-widget">
+        {% if user.is_pinterest_connected %}
+          <div class="status-connected">
+            <div class="status-dot connected"></div>
+            <div>
+              <p class="status-label">Pinterest Connected</p>
+              <p class="status-user">@{{ user.pinterest_username or "Connected" }}</p>
+            </div>
+          </div>
+          <form action="{{ url_for('pinterest.disconnect') }}" method="post" style="margin-top:8px">
+            <button type="submit" class="btn-ghost btn-sm">Disconnect</button>
+          </form>
+        {% else %}
+          <div class="status-disconnected">
+            <div class="status-dot disconnected"></div>
+            <p class="status-label">Pinterest not connected</p>
+          </div>
+          <a href="{{ url_for('pinterest.connect') }}" class="btn-pinterest btn-sm" style="margin-top:8px;display:block;text-align:center">
+            Connect Pinterest
+          </a>
+        {% endif %}
+      </div>
+
+      <div class="user-row">
+        <div class="user-avatar">{{ user.email[0].upper() }}</div>
+        <div class="user-info">
+          <p class="user-email">{{ user.email }}</p>
+        </div>
+        <a href="{{ url_for('auth.logout') }}" class="logout-btn" title="Logout">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+        </a>
+      </div>
+    </div>
+  </aside>
+
+  <!-- ── Main content ── -->
+  <main class="main-content">
+
+  <div class="progress-bar">
+  <div id="progress-fill"></div>
+  </div>
+
+    <!-- ══ CREATE PANEL ══ -->
+    <section id="panel-create" class="panel active">
+      <div class="panel-header">
+        <h2>Create Pin</h2>
+        <p>Paste an Amazon affiliate link to get started</p>
+      </div>
+
+      <!-- Step 1: URL input -->
+      <div class="card" id="step-fetch">
+        <div class="card-label">Step 1 — Product Link</div>
+        <div class="input-row">
+          <input
+            type="url"
+            id="amazon-url"
+            placeholder="https://www.amazon.com/dp/..."
+            class="input-url"
+          />
+          <button id="btn-fetch" class="btn-primary">
+            <span>Fetch Product</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 2: Product preview + image selection -->
+      <div class="card hidden" id="step-product">
+        <div class="card-label">Step 2 — Select Image</div>
+        <div id="product-info" class="product-info"></div>
+        <div id="image-grid" class="image-grid"></div>
+      </div>
+
+      <!-- Step 3: AI generation -->
+      <div class="card hidden" id="step-generate">
+        <div class="card-label">Step 3 — Generate Content</div>
+        <div class="tone-selector">
+          <button class="tone-btn active" data-tone="viral">🔥 Viral</button>
+          <button class="tone-btn" data-tone="luxury">✨ Luxury</button>
+          <button class="tone-btn" data-tone="casual">💬 Casual</button>
+          <button class="tone-btn" data-tone="affiliate">💰 Affiliate</button>
+        </div>
+        <button id="btn-generate" class="btn-primary">
+          <span>Generate with AI</span>
+        </button>
+      </div>
+
+      <!-- Step 4: Content editor + board selector + post -->
+      <div class="card hidden" id="step-post">
+        <div class="card-label">Step 4 — Edit &amp; Publish</div>
+
+        <!-- Title picker -->
+        <div class="field-group">
+          <label>Pin Title <span class="hint">— pick one or edit</span></label>
+          <div id="titles-list" class="variant-list"></div>
+          <input type="text" id="selected-title" class="input-field" placeholder="Or type a custom title…" />
+        </div>
+
+        <!-- Description picker -->
+        <div class="field-group">
+          <label>Description</label>
+          <div id="descriptions-list" class="variant-list"></div>
+          <textarea id="selected-description" class="input-field" rows="3" placeholder="Or type a custom description…"></textarea>
+        </div>
+
+        <!-- Hashtags -->
+        <div class="field-group">
+          <label>Hashtags</label>
+          <input type="text" id="selected-hashtags" class="input-field" />
+        </div>
+
+        <!-- Board selector -->
+        <div class="field-group">
+          <label>Pinterest Board</label>
+          <div class="board-select-row">
+            <select id="board-select" class="input-field">
+              <option value="">— Select a board —</option>
+            </select>
+            <button id="btn-refresh-boards" class="btn-ghost btn-icon" title="Refresh boards">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <!-- Preview card -->
+        <div class="pin-preview" id="pin-preview">
+          <div class="preview-label">Preview</div>
+          <div class="preview-inner">
+            <img id="preview-image" src="" alt="" />
+            <div class="preview-content">
+              <p id="preview-title" class="preview-title"></p>
+              <p id="preview-desc" class="preview-desc"></p>
+              <p id="preview-tags" class="preview-tags"></p>
+            </div>
+          </div>
+        </div>
+
+        <button id="btn-post" class="btn-pinterest btn-full">
+          <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg>
+          <span>Post to Pinterest</span>
+        </button>
+      </div>
+    </section>
+
+    <!-- ══ HISTORY PANEL ══ -->
+    <section id="panel-history" class="panel hidden">
+      <div class="panel-header">
+        <h2>Pin History</h2>
+        <p>Your last 50 generated pins</p>
+      </div>
+      <div id="history-grid" class="history-grid">
+        <div class="loading-state">Loading history…</div>
+      </div>
+    </section>
+
+  </main>
+</div>
+
+<!-- Hidden state store -->
+<script>
+  window.PF = {
+    productData: null,
+    selectedImage: null,
+    generatedContent: null,
+    selectedTone: "viral",
+    pinterestConnected: {{ "true" if user.is_pinterest_connected else "false" }},
+  };
+</script>
+{% endblock %}
diff --git a/app/templates/login.html b/app/templates/login.html
new file mode 100644
index 00000000..abd4fb8d
--- /dev/null
+++ b/app/templates/login.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+{% block title %}Login — PinFlow{% endblock %}
+
+{% block body %}
+<div class="auth-page">
+
+  <div class="auth-card">
+    <h1>Welcome Back</h1>
+
+    <div id="auth-error" class="auth-error hidden"></div>
+
+    <form id="login-form">
+
+      <div class="field-group">
+        <input type="email" id="email" placeholder="Email" required />
+      </div>
+
+      <div class="field-group password-group">
+        <input type="password" id="password" placeholder="Password" required />
+        <button type="button" id="toggle-pass">👁</button>
+      </div>
+
+      <button class="btn-primary btn-full">Login</button>
+
+    </form>
+
+    <p class="auth-switch">
+      No account? <a href="{{ url_for('auth.signup') }}">Signup</a>
+    </p>
+  </div>
+
+</div>
+
+<script>
+document.getElementById("toggle-pass").onclick = () => {
+  const p = document.getElementById("password");
+  p.type = p.type === "password" ? "text" : "password";
+};
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/signup.html b/app/templates/signup.html
new file mode 100644
index 00000000..4d63a5f6
--- /dev/null
+++ b/app/templates/signup.html
@@ -0,0 +1,47 @@
+{% extends "base.html" %}
+{% block title %}Signup — PinFlow{% endblock %}
+
+{% block body %}
+<div class="auth-page">
+
+  <div class="auth-card">
+    <h1>Create Account</h1>
+
+    <div id="auth-error" class="auth-error hidden"></div>
+
+    <form id="signup-form">
+
+      <div class="field-group">
+        <input type="email" id="email" placeholder="Email" required />
+      </div>
+
+      <div class="field-group">
+        <input type="password" id="password" placeholder="Password" required />
+        <div class="strength-bar">
+          <div id="strength-fill"></div>
+        </div>
+      </div>
+
+      <button class="btn-primary btn-full">Signup</button>
+
+    </form>
+
+  </div>
+</div>
+
+<script>
+const pass = document.getElementById("password");
+const fill = document.getElementById("strength-fill");
+
+pass.addEventListener("input", () => {
+  let s = 0;
+  if (pass.value.length > 6) s++;
+  if (/[A-Z]/.test(pass.value)) s++;
+  if (/[0-9]/.test(pass.value)) s++;
+  if (/[^A-Za-z0-9]/.test(pass.value)) s++;
+
+  fill.style.width = (s * 25) + "%";
+});
+</script>
+
+{% endblock %}
\ No newline at end of file
diff --git a/celery_worker.py b/celery_worker.py
new file mode 100644
index 00000000..87a66ecd
--- /dev/null
+++ b/celery_worker.py
@@ -0,0 +1,19 @@
+"""
+PinFlow AI — Celery Worker Entry Point
+
+Run with:
+  celery -A celery_worker.celery worker --loglevel=info
+"""
+
+import os
+from app import create_app, celery
+
+# Create Flask app and configure Celery within its context to ensure it has access to the app's configuration
+app = create_app(os.environ.get("FLASK_ENV", "development"))
+
+# Import tasks so Celery discovers them when the worker starts. This should be done after creating the app to ensure tasks have access to the app context.  
+import app.tasks  # noqa: F401, E402
+
+
+# This allows `celery -A celery_worker.celery worker` to work without needing to set the FLASK_APP environment variable
+__all__ = ["celery"]
diff --git a/config.py b/config.py
new file mode 100644
index 00000000..8f3bc2d4
--- /dev/null
+++ b/config.py
@@ -0,0 +1,176 @@
+"""
+PinFlow AI — Configuration
+"""
+
+import os
+from datetime import timedelta
+from dotenv import load_dotenv
+
+# Load environment variables
+
+load_dotenv()
+
+BASE_DIR = os.path.abspath(os.path.dirname(**file**))
+
+class Config:
+# ------------------------------------------------------------------
+# Core Settings
+# ------------------------------------------------------------------
+SECRET_KEY = os.environ.get(
+"SECRET_KEY",
+"dev-secret-change-in-production"
+)
+
+```
+DEBUG = False
+TESTING = False
+
+# ------------------------------------------------------------------
+# Database
+# ------------------------------------------------------------------
+DATABASE_URL = os.environ.get(
+    "DATABASE_URL",
+    "postgresql://localhost/pinflow"
+)
+
+# Fix for Heroku/Railway
+if DATABASE_URL.startswith("postgres://"):
+    DATABASE_URL = DATABASE_URL.replace(
+        "postgres://",
+        "postgresql://",
+        1
+    )
+
+SQLALCHEMY_DATABASE_URI = DATABASE_URL
+SQLALCHEMY_TRACK_MODIFICATIONS = False
+
+SQLALCHEMY_ENGINE_OPTIONS = {
+    "pool_pre_ping": True,
+    "pool_recycle": 300,
+}
+
+# ------------------------------------------------------------------
+# Session Settings
+# ------------------------------------------------------------------
+PERMANENT_SESSION_LIFETIME = timedelta(days=7)
+
+SESSION_COOKIE_HTTPONLY = True
+SESSION_COOKIE_SAMESITE = "Lax"
+
+# ------------------------------------------------------------------
+# File Uploads
+# ------------------------------------------------------------------
+UPLOAD_FOLDER = os.path.join(
+    BASE_DIR,
+    "app",
+    "static",
+    "downloads"
+)
+
+MAX_CONTENT_LENGTH = 16 * 1024 * 1024  # 16 MB
+
+# ------------------------------------------------------------------
+# Redis / Celery
+# ------------------------------------------------------------------
+REDIS_URL = os.environ.get(
+    "REDIS_URL",
+    "redis://localhost:6379/0"
+)
+
+CELERY_BROKER_URL = REDIS_URL
+CELERY_RESULT_BACKEND = REDIS_URL
+
+CELERY_TASK_SERIALIZER = "json"
+CELERY_RESULT_SERIALIZER = "json"
+CELERY_ACCEPT_CONTENT = ["json"]
+
+CELERY_TIMEZONE = "UTC"
+CELERY_TASK_TRACK_STARTED = True
+CELERY_TASK_MAX_RETRIES = 3
+
+# ------------------------------------------------------------------
+# Rate Limiting
+# ------------------------------------------------------------------
+RATELIMIT_DEFAULT = "200 per day;50 per hour"
+RATELIMIT_STORAGE_URL = REDIS_URL
+
+# ------------------------------------------------------------------
+# AI API
+# ------------------------------------------------------------------
+ANTHROPIC_API_KEY = os.environ.get(
+    "ANTHROPIC_API_KEY",
+    ""
+)
+
+# ------------------------------------------------------------------
+# Pinterest API
+# ------------------------------------------------------------------
+PINTEREST_CLIENT_ID = os.environ.get(
+    "PINTEREST_CLIENT_ID",
+    ""
+)
+
+PINTEREST_CLIENT_SECRET = os.environ.get(
+    "PINTEREST_CLIENT_SECRET",
+    ""
+)
+
+PINTEREST_REDIRECT_URI = os.environ.get(
+    "PINTEREST_REDIRECT_URI",
+    "http://localhost:5000/pinterest/callback"
+)
+
+PINTEREST_SCOPE = (
+    "boards:read,"
+    "pins:read,"
+    "pins:write,"
+    "user_accounts:read"
+)
+
+PINTEREST_ACCESS_TOKEN = os.environ.get(
+    "PINTEREST_ACCESS_TOKEN",
+    ""
+)
+
+# ------------------------------------------------------------------
+# Logging
+# ------------------------------------------------------------------
+LOG_LEVEL = os.environ.get(
+    "LOG_LEVEL",
+    "INFO"
+)
+```
+
+class DevelopmentConfig(Config):
+DEBUG = True
+
+```
+SQLALCHEMY_DATABASE_URI = os.environ.get(
+    "DATABASE_URL",
+    "postgresql://localhost/pinflow_dev"
+)
+```
+
+class ProductionConfig(Config):
+DEBUG = False
+
+```
+SESSION_COOKIE_SECURE = True
+SESSION_COOKIE_HTTPONLY = True
+SESSION_COOKIE_SAMESITE = "Lax"
+```
+
+class TestingConfig(Config):
+TESTING = True
+
+```
+SQLALCHEMY_DATABASE_URI = "sqlite:///:memory:"
+WTF_CSRF_ENABLED = False
+```
+
+config = {
+"development": DevelopmentConfig,
+"production": ProductionConfig,
+"testing": TestingConfig,
+"default": DevelopmentConfig,
+}
diff --git a/gunicorn.conf.py b/gunicorn.conf.py
new file mode 100644
index 00000000..63ffea63
--- /dev/null
+++ b/gunicorn.conf.py
@@ -0,0 +1,24 @@
+"""
+PinFlow AI — Gunicorn Production Config
+Deploy with: gunicorn -c gunicorn.conf.py "app:create_app('production')"
+"""
+
+import multiprocessing
+
+# ── Workers ───────────────────────────────────────────────────────────────────
+workers     = multiprocessing.cpu_count() * 2 + 1
+worker_class = "sync"
+threads     = 2
+
+# ── Networking ────────────────────────────────────────────────────────────────
+bind    = "0.0.0.0:8000"
+timeout = 120
+keepalive = 5
+
+# ── Logging ───────────────────────────────────────────────────────────────────
+accesslog  = "-"   # stdout
+errorlog   = "-"   # stderr
+loglevel   = "info"
+
+# ── Process Name ─────────────────────────────────────────────────────────────
+proc_name = "pinflow_ai"
diff --git a/requirements.txt b/requirements.txt
index 3afb5ced..a969dc45 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,71 @@
-flask
-requests
-beautifulsoup4
\ No newline at end of file
+# =============================================================================
+
+# PinFlow AI - Requirements
+
+# =============================================================================
+
+# ── Web Framework ────────────────────────────────────────────────────────────
+
+Flask==3.0.3
+gunicorn==22.0.0
+Werkzeug==3.0.3
+
+# ── Database ────────────────────────────────────────────────────────────────
+
+Flask-SQLAlchemy==3.1.1
+Flask-Migrate==4.0.7
+SQLAlchemy==2.0.31
+psycopg2-binary==2.9.12
+
+# ── Authentication & Security ───────────────────────────────────────────────
+
+Flask-Login==0.6.3
+Flask-Bcrypt==1.0.1
+Flask-WTF==1.2.1
+email-validator==2.2.0
+
+# ── Rate Limiting ───────────────────────────────────────────────────────────
+
+Flask-Limiter==3.7.0
+
+# ── Background Tasks ────────────────────────────────────────────────────────
+
+celery==5.4.0
+redis==5.0.7
+
+# ── AI Integration ──────────────────────────────────────────────────────────
+
+anthropic==0.30.1
+
+# ── HTTP Requests & Scraping ────────────────────────────────────────────────
+
+requests==2.32.3
+beautifulsoup4==4.12.3
+lxml==5.2.2
+
+# ── Image Processing ────────────────────────────────────────────────────────
+
+Pillow==10.4.0
+
+# ── Environment Variables ───────────────────────────────────────────────────
+
+python-dotenv==1.0.1
+
+# ── Logging & Monitoring ────────────────────────────────────────────────────
+
+colorlog==6.8.2
+
+# ── Date & Time Utilities ───────────────────────────────────────────────────
+
+python-dateutil==2.9.0.post0
+
+# ── Testing ─────────────────────────────────────────────────────────────────
+
+pytest==7.3.1
+pytest-cov==4.0.0
+
+# ── Development Tools ───────────────────────────────────────────────────────
+
+black==24.4.2
+flake8==7.1.0
+isort==5.13.2
diff --git a/run.py b/run.py
new file mode 100644
index 00000000..94d56cf5
--- /dev/null
+++ b/run.py
@@ -0,0 +1,59 @@
+"""
+PinFlow AI — Development Entry Point
+
+Run:
+    python run.py
+
+Starts the Flask development server on:
+    http://localhost:5000
+
+CLI Commands:
+    flask init-db
+        Creates database tables manually .
+"""
+
+import os
+from app import create_app, db
+
+# Get environment (default = development)
+ENV = os.environ.get("FLASK_ENV", "development")
+
+# Create Flask application
+app = create_app(ENV)
+
+
+@app.cli.command("init-db")
+def init_db():
+    """
+    Create all database tables.
+
+    Usage:
+        flask init-db
+    """
+    with app.app_context():
+        db.create_all()
+        print("✅ Database tables created successfully.")
+
+
+def initialize_database():
+    """
+    Automatically create tables in development mode only.
+    """
+    if ENV == "development":
+        with app.app_context():
+            db.create_all()
+            print("✅ Database initialized (development mode).")
+
+
+if __name__ == "__main__":
+    # Auto-create tables only in development
+    initialize_database()
+
+    print(f"🚀 Starting PinFlow AI in {ENV} mode...")
+    print("🌐 Server running at: http://localhost:5000")
+
+    app.run(
+        debug=(ENV == "development"),
+        host="0.0.0.0",
+        port=5000
+    )
diff --git a/runtime.txt b/runtime.txt
new file mode 100644
index 00000000..038c4c8c
--- /dev/null
+++ b/runtime.txt
@@ -0,0 +1,3 @@
+# Python runtime version
+
+python-3.11.9
diff --git a/static/script.js b/static/script.js
deleted file mode 100644
index a9417008..00000000
--- a/static/script.js
+++ /dev/null
@@ -1,271 +0,0 @@
-/* ═══════════════════════════════════════
-   PINFLOW · script.js
-═══════════════════════════════════════ */
-
-let state = {
-  title: "",
-  link: "",
-  selectedImage: null,
-  images: [],
-};
-
-/* ─────────────────────────────────────
-   FETCH PRODUCT + IMAGES
-───────────────────────────────────── */
-async function fetchProduct() {
-  const link = document.getElementById("linkInput").value.trim();
-  if (!link) return shakInput();
-
-  setLoading(true, "Fetching product data…");
-  hide("productStrip");
-  hide("gridSection");
-  hide("resultSection");
-
-  try {
-    const res = await fetch("/api/fetch", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ link }),
-    });
-
-    if (!res.ok) throw new Error("Server error");
-    const data = await res.json();
-
-    state.title = data.title;
-    state.link = data.link;
-    state.images = data.images;
-    state.selectedImage = null;
-
-    // Product strip
-    document.getElementById("stripTitle").textContent = data.title;
-    const stripLink = document.getElementById("stripLink");
-    stripLink.href = data.link;
-
-    const stripImgWrap = document.getElementById("stripImgWrap");
-    if (data.product_image) {
-      document.getElementById("stripImg").src = data.product_image;
-      show("stripImgWrap");
-    } else {
-      hide("stripImgWrap");
-    }
-
-    show("productStrip");
-
-    // Render grid
-    setLoading(true, "Loading images…");
-    renderGrid(data.images);
-
-    setTimeout(() => {
-      setLoading(false);
-      show("gridSection");
-      scrollTo("gridSection");
-    }, 300);
-
-  } catch (err) {
-    setLoading(false);
-    alert("Could not fetch product. Check the link and try again.");
-  }
-}
-
-
-/* ─────────────────────────────────────
-   RENDER MASONRY GRID
-───────────────────────────────────── */
-function renderGrid(images) {
-  const grid = document.getElementById("masonryGrid");
-  grid.innerHTML = "";
-
-  images.forEach((src, i) => {
-    const item = document.createElement("div");
-    item.className = "grid-item";
-    item.dataset.index = i;
-    item.onclick = () => selectImage(item, src);
-
-    const img = document.createElement("img");
-    img.src = src;
-    img.alt = "Product image option";
-    img.loading = "lazy";
-
-    const overlay = document.createElement("div");
-    overlay.className = "grid-item-overlay";
-
-    const chip = document.createElement("button");
-    chip.className = "select-chip";
-    chip.textContent = "Select";
-    chip.onclick = (e) => { e.stopPropagation(); selectImage(item, src); };
-    overlay.appendChild(chip);
-
-    const badge = document.createElement("div");
-    badge.className = "selected-badge";
-    badge.textContent = "✓ Selected";
-
-    item.appendChild(img);
-    item.appendChild(overlay);
-    item.appendChild(badge);
-    grid.appendChild(item);
-  });
-
-  hide("generateBar");
-}
-
-
-/* ─────────────────────────────────────
-   SELECT IMAGE
-───────────────────────────────────── */
-function selectImage(item, src) {
-  document.querySelectorAll(".grid-item").forEach(el => el.classList.remove("selected"));
-  item.classList.add("selected");
-  state.selectedImage = src;
-
-  // Update generate bar
-  const bar = document.getElementById("generateBar");
-  document.getElementById("genThumb").src = src;
-  document.getElementById("genLabel").textContent = "1 image selected";
-  show("generateBar");
-}
-
-
-/* ─────────────────────────────────────
-   GENERATE PIN CONTENT
-───────────────────────────────────── */
-async function generatePin() {
-  if (!state.selectedImage) return;
-
-  setLoading(true, "Generating your Pinterest card…");
-  hide("gridSection");
-  hide("resultSection");
-
-  try {
-    const res = await fetch("/api/generate", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        title: state.title,
-        selected_image: state.selectedImage,
-        link: state.link,
-      }),
-    });
-
-    if (!res.ok) throw new Error("Server error");
-    const data = await res.json();
-
-    // Populate result
-    document.getElementById("pinImage").src = data.image;
-    document.getElementById("pinCardTitle").textContent = data.title;
-    document.getElementById("pinCardTags").textContent = data.hashtags;
-
-    document.getElementById("titleField").value = data.title;
-    document.getElementById("descField").value = data.description;
-    document.getElementById("tagsField").value = data.hashtags;
-
-    const pl = document.getElementById("productLink");
-    pl.href = data.link || state.link;
-
-    setLoading(false);
-    show("gridSection");
-    show("resultSection");
-    scrollTo("resultSection");
-
-  } catch (err) {
-    setLoading(false);
-    show("gridSection");
-    alert("Generation failed. Please try again.");
-  }
-}
-
-
-/* ─────────────────────────────────────
-   COPY FIELD
-───────────────────────────────────── */
-function copyField(fieldId, btn) {
-  const el = document.getElementById(fieldId);
-  const text = el.value;
-
-  navigator.clipboard.writeText(text).then(() => {
-    const orig = btn.textContent;
-    btn.textContent = "✓ Copied!";
-    btn.classList.add("copied");
-    setTimeout(() => {
-      btn.textContent = orig;
-      btn.classList.remove("copied");
-    }, 2000);
-  }).catch(() => {
-    el.select();
-    document.execCommand("copy");
-  });
-}
-
-
-/* ─────────────────────────────────────
-   RESET
-───────────────────────────────────── */
-function resetAll() {
-  state = { title: "", link: "", selectedImage: null, images: [] };
-  document.getElementById("linkInput").value = "";
-  hide("productStrip");
-  hide("gridSection");
-  hide("resultSection");
-  hide("loaderWrap");
-  window.scrollTo({ top: 0, behavior: "smooth" });
-}
-
-
-/* ─────────────────────────────────────
-   HELPERS
-───────────────────────────────────── */
-function show(id) {
-  const el = document.getElementById(id);
-  if (el) el.style.display = "";
-}
-
-function hide(id) {
-  const el = document.getElementById(id);
-  if (el) el.style.display = "none";
-}
-
-function setLoading(on, msg) {
-  const wrap = document.getElementById("loaderWrap");
-  const txt  = document.getElementById("loaderText");
-  const btn  = document.getElementById("fetchBtn");
-
-  if (on) {
-    if (txt && msg) txt.textContent = msg;
-    wrap.style.display = "flex";
-    if (btn) btn.disabled = true;
-  } else {
-    wrap.style.display = "none";
-    if (btn) btn.disabled = false;
-  }
-}
-
-function scrollTo(id) {
-  const el = document.getElementById(id);
-  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
-}
-
-function shakInput() {
-  const box = document.getElementById("searchBox");
-  box.style.animation = "none";
-  box.offsetHeight; // reflow
-  box.style.animation = "shake 0.4s ease";
-  setTimeout(() => { box.style.animation = ""; }, 400);
-}
-
-/* shake animation injected */
-const style = document.createElement("style");
-style.textContent = `
-@keyframes shake {
-  0%,100% { transform: translateX(0); }
-  20%      { transform: translateX(-8px); }
-  40%      { transform: translateX(8px); }
-  60%      { transform: translateX(-5px); }
-  80%      { transform: translateX(5px); }
-}`;
-document.head.appendChild(style);
-
-/* Enter key triggers fetch */
-document.addEventListener("DOMContentLoaded", () => {
-  document.getElementById("linkInput").addEventListener("keydown", (e) => {
-    if (e.key === "Enter") fetchProduct();
-  });
-});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
deleted file mode 100644
index f33a768b..00000000
--- a/static/style.css
+++ /dev/null
@@ -1,716 +0,0 @@
-/* ═══════════════════════════════════════════════
-   PINFLOW · style.css
-   Pinterest-inspired · Production Grade
-═══════════════════════════════════════════════ */
-
-:root {
-  --red: #e60023;
-  --red-dark: #b8001a;
-  --red-soft: #fff0f1;
-  --dark: #111111;
-  --dark-2: #1e1e1e;
-  --gray-1: #4a4a4a;
-  --gray-2: #767676;
-  --gray-3: #adadad;
-  --gray-4: #e0e0e0;
-  --gray-5: #f5f5f5;
-  --white: #ffffff;
-  --radius-sm: 8px;
-  --radius-md: 16px;
-  --radius-lg: 24px;
-  --radius-xl: 32px;
-  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
-  --shadow-md: 0 6px 24px rgba(0,0,0,0.12);
-  --shadow-lg: 0 16px 48px rgba(0,0,0,0.18);
-  --font-display: 'Playfair Display', Georgia, serif;
-  --font-body: 'DM Sans', system-ui, sans-serif;
-  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html { scroll-behavior: smooth; }
-
-body {
-  font-family: var(--font-body);
-  background: var(--gray-5);
-  color: var(--dark);
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* ── SCROLLBAR ── */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: var(--gray-5); }
-::-webkit-scrollbar-thumb { background: var(--gray-3); border-radius: 99px; }
-
-/* ════════════════════════════
-   NAVBAR
-════════════════════════════ */
-.navbar {
-  background: var(--white);
-  border-bottom: 1px solid var(--gray-4);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(12px);
-}
-
-.nav-inner {
-  max-width: 1200px;
-  margin: auto;
-  padding: 14px 24px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
-.nav-logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-family: var(--font-display);
-  font-size: 1.5rem;
-  font-weight: 900;
-  color: var(--dark);
-  letter-spacing: -0.5px;
-}
-
-.logo-pin { font-size: 1.3rem; }
-.logo-accent { color: var(--red); }
-
-.nav-tagline {
-  font-size: 0.8rem;
-  color: var(--gray-2);
-  margin-left: 4px;
-  letter-spacing: 0.01em;
-}
-
-.nav-badge {
-  margin-left: auto;
-  background: var(--red-soft);
-  color: var(--red);
-  font-size: 0.7rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 4px 10px;
-  border-radius: 99px;
-}
-
-/* ════════════════════════════
-   HERO
-════════════════════════════ */
-.hero {
-  text-align: center;
-  padding: 72px 24px 56px;
-  max-width: 760px;
-  margin: auto;
-}
-
-.hero-eyebrow {
-  font-size: 0.8rem;
-  font-weight: 600;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--red);
-  margin-bottom: 18px;
-}
-
-.hero-title {
-  font-family: var(--font-display);
-  font-size: clamp(2.2rem, 5vw, 3.4rem);
-  font-weight: 900;
-  line-height: 1.12;
-  letter-spacing: -1.5px;
-  color: var(--dark);
-  margin-bottom: 18px;
-}
-
-.hero-sub {
-  font-size: 1.05rem;
-  color: var(--gray-1);
-  line-height: 1.6;
-  margin-bottom: 40px;
-  font-weight: 400;
-}
-
-/* ── SEARCH BOX ── */
-.search-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
-
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  background: var(--white);
-  border: 2px solid var(--gray-4);
-  border-radius: 99px;
-  padding: 6px 6px 6px 20px;
-  width: 100%;
-  max-width: 640px;
-  box-shadow: var(--shadow-md);
-  transition: border-color var(--transition), box-shadow var(--transition);
-}
-
-.search-box:focus-within {
-  border-color: var(--red);
-  box-shadow: 0 0 0 4px rgba(230,0,35,0.1), var(--shadow-md);
-}
-
-.search-icon { font-size: 1rem; margin-right: 10px; flex-shrink: 0; }
-
-.search-box input {
-  flex: 1;
-  border: none;
-  outline: none;
-  font-family: var(--font-body);
-  font-size: 0.95rem;
-  color: var(--dark);
-  background: transparent;
-}
-
-.search-box input::placeholder { color: var(--gray-3); }
-
-.btn-fetch {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--red);
-  color: var(--white);
-  border: none;
-  border-radius: 99px;
-  padding: 12px 22px;
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background var(--transition), transform var(--transition);
-  flex-shrink: 0;
-}
-
-.btn-fetch:hover { background: var(--red-dark); transform: scale(1.02); }
-.btn-fetch:active { transform: scale(0.98); }
-.btn-fetch:disabled { background: var(--gray-3); cursor: not-allowed; transform: none; }
-
-.btn-arrow { font-size: 1rem; transition: transform var(--transition); }
-.btn-fetch:hover .btn-arrow { transform: translateX(3px); }
-
-.search-hint {
-  font-size: 0.76rem;
-  color: var(--gray-3);
-}
-
-/* ════════════════════════════
-   PRODUCT STRIP
-════════════════════════════ */
-.product-strip {
-  background: var(--white);
-  border-top: 1px solid var(--gray-4);
-  border-bottom: 1px solid var(--gray-4);
-  padding: 20px 24px;
-  animation: slideDown 0.3s ease;
-}
-
-.strip-inner {
-  max-width: 1200px;
-  margin: auto;
-  display: flex;
-  align-items: center;
-  gap: 18px;
-}
-
-.strip-img-wrap {
-  width: 60px;
-  height: 60px;
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  flex-shrink: 0;
-  background: var(--gray-5);
-  border: 1px solid var(--gray-4);
-}
-
-.strip-img-wrap img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.strip-label {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--gray-3);
-  margin-bottom: 4px;
-}
-
-.strip-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--dark);
-  line-height: 1.3;
-  max-width: 700px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.strip-link {
-  display: inline-block;
-  margin-top: 6px;
-  font-size: 0.78rem;
-  color: var(--red);
-  text-decoration: none;
-  font-weight: 500;
-}
-.strip-link:hover { text-decoration: underline; }
-
-/* ════════════════════════════
-   LOADER
-════════════════════════════ */
-.loader-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 80px 24px;
-}
-
-.loader-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-
-.loader-pins {
-  display: flex;
-  gap: 10px;
-  align-items: flex-end;
-}
-
-.lpin {
-  width: 14px;
-  border-radius: 99px;
-  background: var(--red);
-  animation: pinBounce 1.2s ease-in-out infinite;
-}
-
-.lpin1 { height: 40px; animation-delay: 0s; }
-.lpin2 { height: 56px; animation-delay: 0.2s; }
-.lpin3 { height: 32px; animation-delay: 0.4s; }
-
-@keyframes pinBounce {
-  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
-  50% { transform: scaleY(1); opacity: 1; }
-}
-
-.loader-text {
-  font-size: 0.9rem;
-  color: var(--gray-2);
-  font-weight: 500;
-}
-
-/* ════════════════════════════
-   GRID SECTION
-════════════════════════════ */
-.grid-section {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 48px 24px 32px;
-  animation: fadeUp 0.4s ease;
-}
-
-.section-header { text-align: center; margin-bottom: 36px; }
-
-.section-title {
-  font-family: var(--font-display);
-  font-size: 1.9rem;
-  font-weight: 900;
-  color: var(--dark);
-  letter-spacing: -0.5px;
-  margin-bottom: 8px;
-}
-
-.section-sub {
-  font-size: 0.9rem;
-  color: var(--gray-2);
-}
-
-/* ── MASONRY GRID ── */
-.masonry-grid {
-  column-count: 4;
-  column-gap: 16px;
-}
-
-@media (max-width: 1100px) { .masonry-grid { column-count: 3; } }
-@media (max-width: 768px)  { .masonry-grid { column-count: 2; } }
-@media (max-width: 480px)  { .masonry-grid { column-count: 2; } }
-
-.grid-item {
-  break-inside: avoid;
-  margin-bottom: 16px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  background: var(--white);
-  box-shadow: var(--shadow-sm);
-  cursor: pointer;
-  position: relative;
-  transition: transform var(--transition), box-shadow var(--transition);
-  animation: fadeUp 0.4s ease both;
-}
-
-.grid-item:hover {
-  transform: translateY(-6px) scale(1.01);
-  box-shadow: var(--shadow-lg);
-}
-
-.grid-item.selected {
-  outline: 3px solid var(--red);
-  outline-offset: 2px;
-}
-
-.grid-item img {
-  display: block;
-  width: 100%;
-  height: auto;
-  border-radius: var(--radius-md);
-  transition: filter var(--transition);
-}
-
-.grid-item:hover img { filter: brightness(0.88); }
-
-/* hover overlay */
-.grid-item-overlay {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 40px 14px 14px;
-  background: linear-gradient(transparent, rgba(0,0,0,0.55));
-  border-radius: 0 0 var(--radius-md) var(--radius-md);
-  opacity: 0;
-  transition: opacity var(--transition);
-  display: flex;
-  justify-content: center;
-}
-
-.grid-item:hover .grid-item-overlay { opacity: 1; }
-
-.select-chip {
-  background: var(--white);
-  color: var(--red);
-  font-size: 0.78rem;
-  font-weight: 700;
-  padding: 6px 14px;
-  border-radius: 99px;
-  border: none;
-  cursor: pointer;
-  transition: background var(--transition);
-}
-
-.select-chip:hover { background: var(--red-soft); }
-
-/* selected badge */
-.selected-badge {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: var(--red);
-  color: white;
-  font-size: 0.72rem;
-  font-weight: 700;
-  padding: 4px 10px;
-  border-radius: 99px;
-  display: none;
-}
-
-.grid-item.selected .selected-badge { display: block; }
-
-/* ── GENERATE BAR ── */
-.generate-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  background: var(--white);
-  border: 1.5px solid var(--red);
-  border-radius: var(--radius-xl);
-  padding: 14px 20px;
-  margin-top: 28px;
-  box-shadow: 0 4px 20px rgba(230,0,35,0.12);
-  animation: fadeUp 0.3s ease;
-}
-
-.gen-preview {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.gen-preview img {
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-sm);
-  object-fit: cover;
-  border: 2px solid var(--red);
-}
-
-.gen-preview span {
-  font-size: 0.88rem;
-  font-weight: 600;
-  color: var(--dark);
-}
-
-.btn-generate {
-  background: var(--red);
-  color: white;
-  border: none;
-  border-radius: 99px;
-  padding: 12px 26px;
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 700;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background var(--transition), transform var(--transition);
-}
-
-.btn-generate:hover { background: var(--red-dark); transform: scale(1.02); }
-.btn-generate:active { transform: scale(0.98); }
-
-/* ════════════════════════════
-   RESULT SECTION
-════════════════════════════ */
-.result-section {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 48px 24px 64px;
-  animation: fadeUp 0.5s ease;
-}
-
-.result-layout {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 40px;
-  align-items: start;
-  margin-top: 32px;
-}
-
-@media (max-width: 860px) {
-  .result-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ── PIN PREVIEW CARD ── */
-.pin-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
-
-.pin-card {
-  width: 100%;
-  max-width: 300px;
-  background: white;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: var(--shadow-lg);
-  cursor: pointer;
-}
-
-.pin-img-wrap { position: relative; overflow: hidden; }
-
-.pin-img-wrap img {
-  display: block;
-  width: 100%;
-  height: auto;
-  min-height: 220px;
-  object-fit: cover;
-}
-
-.pin-overlay {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  opacity: 0;
-  transition: opacity var(--transition);
-}
-
-.pin-card:hover .pin-overlay { opacity: 1; }
-
-.pin-save-btn {
-  background: var(--red);
-  color: white;
-  font-size: 0.8rem;
-  font-weight: 700;
-  padding: 7px 14px;
-  border-radius: 99px;
-}
-
-.pin-card-body { padding: 14px 16px 16px; }
-
-.pin-card-title {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--dark);
-  line-height: 1.3;
-  margin-bottom: 8px;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.pin-card-tags {
-  font-size: 0.75rem;
-  color: var(--red);
-  font-weight: 500;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.preview-label {
-  font-size: 0.72rem;
-  color: var(--gray-3);
-  font-weight: 500;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-/* ── RESULT FIELDS ── */
-.result-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.field-group {
-  background: var(--white);
-  border: 1.5px solid var(--gray-4);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  transition: border-color var(--transition);
-}
-
-.field-group:focus-within { border-color: var(--red); }
-
-.field-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px 8px;
-  border-bottom: 1px solid var(--gray-5);
-}
-
-.field-header label {
-  font-size: 0.78rem;
-  font-weight: 700;
-  color: var(--gray-1);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.copy-btn {
-  background: var(--gray-5);
-  border: none;
-  border-radius: 99px;
-  padding: 4px 12px;
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--gray-1);
-  cursor: pointer;
-  transition: background var(--transition), color var(--transition);
-}
-
-.copy-btn:hover { background: var(--red-soft); color: var(--red); }
-.copy-btn.copied { background: #e8f5e9; color: #2e7d32; }
-
-.field-input {
-  width: 100%;
-  border: none;
-  outline: none;
-  resize: vertical;
-  font-family: var(--font-body);
-  font-size: 0.93rem;
-  color: var(--dark);
-  padding: 12px 16px 14px;
-  background: transparent;
-  line-height: 1.55;
-}
-
-.hashtag-field { color: var(--red); font-weight: 500; }
-
-/* ── ACTION BUTTONS ── */
-.result-actions {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  margin-top: 4px;
-}
-
-.btn-open-product {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  background: var(--red);
-  color: white;
-  text-decoration: none;
-  border-radius: 99px;
-  padding: 13px 24px;
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 700;
-  transition: background var(--transition), transform var(--transition);
-}
-
-.btn-open-product:hover { background: var(--red-dark); transform: scale(1.02); }
-
-.btn-reset {
-  background: var(--white);
-  color: var(--gray-1);
-  border: 1.5px solid var(--gray-4);
-  border-radius: 99px;
-  padding: 13px 24px;
-  font-family: var(--font-body);
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: border-color var(--transition), color var(--transition);
-}
-
-.btn-reset:hover { border-color: var(--gray-2); color: var(--dark); }
-
-/* ════════════════════════════
-   FOOTER
-════════════════════════════ */
-.footer {
-  text-align: center;
-  padding: 32px 24px;
-  font-size: 0.78rem;
-  color: var(--gray-3);
-  border-top: 1px solid var(--gray-4);
-  background: var(--white);
-}
-
-/* ════════════════════════════
-   ANIMATIONS
-════════════════════════════ */
-@keyframes fadeUp {
-  from { opacity: 0; transform: translateY(18px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideDown {
-  from { opacity: 0; transform: translateY(-10px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* stagger grid items */
-.grid-item:nth-child(1)  { animation-delay: 0.03s; }
-.grid-item:nth-child(2)  { animation-delay: 0.06s; }
-.grid-item:nth-child(3)  { animation-delay: 0.09s; }
-.grid-item:nth-child(4)  { animation-delay: 0.12s; }
-.grid-item:nth-child(5)  { animation-delay: 0.15s; }
-.grid-item:nth-child(6)  { animation-delay: 0.18s; }
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
deleted file mode 100644
index e8f7d9d8..00000000
--- a/templates/index.html
+++ /dev/null
@@ -1,168 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>PinFlow — Pinterest Automation</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet" />
-  <link rel="stylesheet" href="/static/style.css" />
-</head>
-<body>
-
-  <!-- ═══════════════════ NAVBAR ═══════════════════ -->
-  <nav class="navbar">
-    <div class="nav-inner">
-      <div class="nav-logo">
-        <span class="logo-pin">📌</span>
-        <span class="logo-text">Pin<span class="logo-accent">Flow</span></span>
-      </div>
-      <div class="nav-tagline">Amazon → Pinterest, automated.</div>
-      <div class="nav-badge">Beta</div>
-    </div>
-  </nav>
-
-  <!-- ═══════════════════ HERO ═══════════════════ -->
-  <section class="hero">
-    <p class="hero-eyebrow">✦ AI-Powered Pinterest Tool</p>
-    <h1 class="hero-title">Turn any Amazon product<br>into a viral Pin.</h1>
-    <p class="hero-sub">Paste a link. Pick an image. Get a ready-to-post Pinterest card in seconds.</p>
-
-    <!-- SEARCH BOX -->
-    <div class="search-wrap">
-      <div class="search-box" id="searchBox">
-        <span class="search-icon">🔗</span>
-        <input
-          type="url"
-          id="linkInput"
-          placeholder="Paste your Amazon product URL here..."
-          autocomplete="off"
-          spellcheck="false"
-        />
-        <button class="btn-fetch" id="fetchBtn" onclick="fetchProduct()">
-          <span class="btn-label">Fetch Images</span>
-          <span class="btn-arrow">→</span>
-        </button>
-      </div>
-      <p class="search-hint">Works with any amazon.com product link</p>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ PRODUCT INFO STRIP ═══════════════════ -->
-  <div class="product-strip" id="productStrip" style="display:none;">
-    <div class="strip-inner">
-      <div class="strip-img-wrap" id="stripImgWrap" style="display:none;">
-        <img id="stripImg" src="" alt="Product" />
-      </div>
-      <div class="strip-info">
-        <p class="strip-label">Detected Product</p>
-        <h3 class="strip-title" id="stripTitle">—</h3>
-        <a class="strip-link" id="stripLink" href="#" target="_blank">Open on Amazon ↗</a>
-      </div>
-    </div>
-  </div>
-
-  <!-- ═══════════════════ LOADER ═══════════════════ -->
-  <div class="loader-wrap" id="loaderWrap" style="display:none;">
-    <div class="loader-card">
-      <div class="loader-pins">
-        <div class="lpin lpin1"></div>
-        <div class="lpin lpin2"></div>
-        <div class="lpin lpin3"></div>
-      </div>
-      <p class="loader-text" id="loaderText">Fetching product data…</p>
-    </div>
-  </div>
-
-  <!-- ═══════════════════ IMAGE GRID ═══════════════════ -->
-  <section class="grid-section" id="gridSection" style="display:none;">
-    <div class="section-header">
-      <h2 class="section-title">Choose your Pin image</h2>
-      <p class="section-sub">Click any image to select it, then generate your Pin.</p>
-    </div>
-    <div class="masonry-grid" id="masonryGrid"></div>
-
-    <div class="generate-bar" id="generateBar" style="display:none;">
-      <div class="gen-preview">
-        <img id="genThumb" src="" alt="" />
-        <span id="genLabel">1 image selected</span>
-      </div>
-      <button class="btn-generate" onclick="generatePin()">
-        ✦ Generate Pin Content
-      </button>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ RESULT ═══════════════════ -->
-  <section class="result-section" id="resultSection" style="display:none;">
-    <div class="section-header">
-      <h2 class="section-title">Your Pinterest Card</h2>
-      <p class="section-sub">Ready to copy and post. Everything's editable.</p>
-    </div>
-
-    <div class="result-layout">
-
-      <!-- Pin Preview Card -->
-      <div class="pin-preview">
-        <div class="pin-card">
-          <div class="pin-img-wrap">
-            <img id="pinImage" src="" alt="Pin Image" />
-            <div class="pin-overlay">
-              <span class="pin-save-btn">📌 Save</span>
-            </div>
-          </div>
-          <div class="pin-card-body">
-            <p class="pin-card-title" id="pinCardTitle">—</p>
-            <p class="pin-card-tags" id="pinCardTags">—</p>
-          </div>
-        </div>
-        <p class="preview-label">Pinterest Preview</p>
-      </div>
-
-      <!-- Editable Fields -->
-      <div class="result-fields">
-
-        <div class="field-group">
-          <div class="field-header">
-            <label>📝 Title</label>
-            <button class="copy-btn" onclick="copyField('titleField', this)">Copy</button>
-          </div>
-          <textarea id="titleField" class="field-input" rows="2"></textarea>
-        </div>
-
-        <div class="field-group">
-          <div class="field-header">
-            <label>📄 Description</label>
-            <button class="copy-btn" onclick="copyField('descField', this)">Copy</button>
-          </div>
-          <textarea id="descField" class="field-input" rows="4"></textarea>
-        </div>
-
-        <div class="field-group">
-          <div class="field-header">
-            <label>#️⃣ Hashtags</label>
-            <button class="copy-btn" onclick="copyField('tagsField', this)">Copy</button>
-          </div>
-          <textarea id="tagsField" class="field-input hashtag-field" rows="3"></textarea>
-        </div>
-
-        <div class="result-actions">
-          <a id="productLink" href="#" target="_blank" class="btn-open-product">
-            🛒 Open Product on Amazon
-          </a>
-          <button class="btn-reset" onclick="resetAll()">Start Over</button>
-        </div>
-
-      </div>
-    </div>
-  </section>
-
-  <!-- ═══════════════════ FOOTER ═══════════════════ -->
-  <footer class="footer">
-    <p>Built with ❤️ · PinFlow Beta · Not affiliated with Pinterest or Amazon</p>
-  </footer>
-
-  <script src="/static/script.js"></script>
-</body>
-</html>
\ No newline at end of file