diff --git a/frontend/backend/OCR/client.ts b/frontend/backend/OCR/client.ts
new file mode 100644
index 00000000..f5d4ae5e
--- /dev/null
+++ b/frontend/backend/OCR/client.ts
@@ -0,0 +1,5 @@
+import * as genai from '@google/generative-ai'
+
+export function createGeminiClient(apiKey: string) {
+  return new genai.GoogleGenerativeAI(apiKey)
+}
diff --git a/frontend/backend/OCR/handlers.ts b/frontend/backend/OCR/handlers.ts
new file mode 100644
index 00000000..cc52a60f
--- /dev/null
+++ b/frontend/backend/OCR/handlers.ts
@@ -0,0 +1,113 @@
+import { createGeminiClient } from './client';
+
+const RATE_LIMIT_SECONDS = 300;
+const userLastRequest: Map<string, number> = new Map();
+
+export type OCRResponse = {
+  text: string;
+  confidence?: number;
+  language?: string;
+  products?: Array<Record<string, unknown>>;
+};
+
+export function parseAuthHeader(authHeader: string | null | undefined) {
+  if (!authHeader) return 'anonymous';
+  return authHeader.startsWith('Bearer ')
+    ? authHeader.replace('Bearer ', '')
+    : authHeader;
+}
+
+export const ALLOWED_TYPES = [
+  'image/png',
+  'image/jpg',
+  'image/jpeg',
+  'image/webp',
+  'application/pdf',
+];
+
+export async function processImageFile(params: {
+  file: File;
+  authHeader: string | null | undefined;
+  env: any;
+}): Promise<OCRResponse> {
+  const { file, authHeader, env } = params;
+  const userId = parseAuthHeader(authHeader);
+  const now = Date.now() / 1000;
+  const last = userLastRequest.get(userId) ?? 0;
+  if (now - last < RATE_LIMIT_SECONDS)
+    throw { status: 429, message: 'rate_limited' };
+  userLastRequest.set(userId, now);
+
+  if (!ALLOWED_TYPES.includes(file.type))
+    throw { status: 400, message: 'invalid_type' };
+
+  const apiKey = env.GEMINI_API_KEY;
+  if (!apiKey) throw { status: 500, message: 'GEMINI_API_KEY not configured' };
+
+  const client = createGeminiClient(apiKey);
+
+  const arrayBuffer = await file.arrayBuffer();
+  const uint8 = new Uint8Array(arrayBuffer);
+  const base64Data = Buffer.from(uint8).toString('base64');
+
+  const prompt = env.OCR_PROMPT || '';
+
+  const parts = [
+    { text: prompt },
+    { inlineData: { mimeType: file.type, data: base64Data } },
+  ];
+
+  const model = client.getGenerativeModel({ model: 'gemini-1.5-flash' });
+  const result = await model.generateContent(parts);
+  const response = result.response;
+
+  let extractedText = response.text();
+
+  extractedText = extractedText.trim();
+  if (extractedText.startsWith('```json'))
+    extractedText = extractedText.slice(7);
+  if (extractedText.endsWith('```')) extractedText = extractedText.slice(0, -3);
+  extractedText = extractedText.trim();
+
+  try {
+    const parsed = JSON.parse(extractedText);
+    let products = null;
+    if (Array.isArray(parsed)) products = parsed;
+    else if (parsed && typeof parsed === 'object') {
+      if ('productos' in parsed) products = (parsed as any).productos;
+      else products = [parsed];
+    }
+
+    return { text: extractedText, confidence: 0.95, language: 'es', products };
+  } catch (e) {
+    return { text: extractedText, confidence: 0.95, language: 'es' };
+  }
+}
+
+export async function sendBulk(params: {
+  data: any;
+  authHeader: string | null | undefined;
+  env: any;
+}) {
+  const { data, authHeader, env } = params;
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+  if (authHeader) {
+    const token = authHeader.startsWith('Bearer ')
+      ? authHeader.replace('Bearer ', '')
+      : authHeader;
+    headers['Authorization'] = `Bearer ${token}`;
+  }
+  const res = await fetch(`/api/products/bulk`, {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(data),
+  });
+  const text = await res.text();
+  try {
+    return { status: res.status, ok: res.ok, body: JSON.parse(text) };
+  } catch {
+    return { status: res.status, ok: res.ok, body: text };
+  }
+}
diff --git a/frontend/backend/auth/models.ts b/frontend/backend/auth/models.ts
new file mode 100644
index 00000000..1e79ff0e
--- /dev/null
+++ b/frontend/backend/auth/models.ts
@@ -0,0 +1,36 @@
+export type RoleUser = 'admin' | 'manager' | 'user';
+
+export interface UserItem {
+  id: string;
+  full_name: string;
+  email: string;
+  password?: string | null;
+  role?: RoleUser;
+  phone?: string | null;
+  profile_image?: string | null;
+  polar_api_key?: string | null;
+  polar_organization_id?: string | null;
+}
+
+export interface LoginRequest {
+  email: string;
+  password: string;
+}
+
+export interface RegisterRequest {
+  full_name: string;
+  email: string;
+  password: string;
+  phone?: string | null;
+}
+
+export interface UserInfo {
+  id: string;
+  email: string;
+  full_name: string;
+  phone?: string | null;
+  address?: string | null;
+  role: RoleUser;
+  created_at: string;
+  last_updated: string;
+}
diff --git a/frontend/backend/auth/repository.ts b/frontend/backend/auth/repository.ts
new file mode 100644
index 00000000..a0f567ff
--- /dev/null
+++ b/frontend/backend/auth/repository.ts
@@ -0,0 +1,109 @@
+import { createClient } from '@/utils/supabase/server';
+import type { UserItem } from './models';
+import { encryptString, decryptString } from '@/utils/crypto';
+import { getCurrentTimeWithTimezone } from '@/utils/timezone';
+
+export class UserRepository {
+  table = 'users';
+
+  async findAllUsers(): Promise<UserItem[]> {
+    const supabase = await createClient();
+    const { data } = await supabase.from(this.table).select('*');
+    return (data || []) as UserItem[];
+  }
+
+  async findByEmail(email: string): Promise<UserItem | null> {
+    if (!email) return null;
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('email', email)
+      .limit(1);
+    if (!data || data.length === 0) return null;
+    return data[0] as UserItem;
+  }
+
+  async findByUserId(user_id: string): Promise<UserItem | null> {
+    if (!user_id) return null;
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('id', user_id)
+      .limit(1);
+    if (!data || data.length === 0) return null;
+    return data[0] as UserItem;
+  }
+
+  async createUser(payload: Record<string, any>): Promise<string> {
+    const supabase = await createClient();
+    const now = getCurrentTimeWithTimezone('UTC');
+    const insertPayload = {
+      full_name: payload.full_name,
+      email: payload.email,
+      password: payload.password,
+      phone: payload.phone || null,
+      role: payload.role || 'user',
+      profile_image: payload.profile_image || null,
+      polar_api_key: payload.polar_api_key || null,
+      polar_organization_id: payload.polar_organization_id || null,
+      created_at: now,
+      last_updated: now,
+    };
+    const { data, error } = await supabase
+      .from(this.table)
+      .insert(insertPayload)
+      .select()
+      .single();
+    if (error) throw error;
+    return (data && data.id) || '';
+  }
+
+  async updateProfile(
+    user_id: string,
+    updates: Record<string, any>
+  ): Promise<UserItem> {
+    const supabase = await createClient();
+    const now = getCurrentTimeWithTimezone('UTC');
+    updates.last_updated = now;
+    if (typeof updates.polar_api_key !== 'undefined') {
+      updates.polar_api_key = updates.polar_api_key || null;
+    }
+    if (typeof updates.polar_organization_id !== 'undefined') {
+      updates.polar_organization_id = updates.polar_organization_id || null;
+    }
+    const { data, error } = await supabase
+      .from(this.table)
+      .update(updates)
+      .eq('id', user_id)
+      .select()
+      .single();
+    if (error) throw error;
+    return data as UserItem;
+  }
+
+  async getDecryptedPolarKey(user_id: string): Promise<string | null> {
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .select('polar_api_key')
+      .eq('id', user_id)
+      .limit(1)
+      .single();
+    if (!data || !data.polar_api_key) return null;
+    return data.polar_api_key as string;
+  }
+
+  async deleteUser(user_id: string): Promise<UserItem | null> {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .delete()
+      .eq('id', user_id)
+      .select()
+      .single();
+    if (error) throw error;
+    return (data as UserItem) || null;
+  }
+}
diff --git a/frontend/backend/auth/service.ts b/frontend/backend/auth/service.ts
new file mode 100644
index 00000000..4ccbd97a
--- /dev/null
+++ b/frontend/backend/auth/service.ts
@@ -0,0 +1,227 @@
+import jwt, { SignOptions, Secret } from 'jsonwebtoken';
+import { UserRepository } from './repository';
+import type { UserItem } from './models';
+import { hashPassword, verifyPassword } from '@/utils/password';
+import { uploadProfileImage } from '@/utils/cloudinary';
+
+const SECRET_KEY = process.env.SECRET_KEY;
+const ALGORITHM = 'HS256';
+const ACCESS_TOKEN_EXPIRE_MINUTES = Number(
+  process.env.ACCESS_TOKEN_EXPIRE_MINUTES || 60 * 24 * 7
+);
+
+export class AuthService {
+  repo: UserRepository;
+  blacklisted: Set<string>;
+  constructor(repo?: UserRepository) {
+    this.repo = repo || new UserRepository();
+    this.blacklisted = new Set();
+  }
+
+  createAccessToken(
+    data: Record<string, any>,
+    expiresMinutes?: number
+  ): string {
+    const payload = { ...data };
+    const expiresIn = `${expiresMinutes || ACCESS_TOKEN_EXPIRE_MINUTES}m`;
+    const options: SignOptions = {
+      algorithm: ALGORITHM as unknown as SignOptions['algorithm'],
+      expiresIn: expiresIn as any,
+    };
+    return jwt.sign(payload, SECRET_KEY as unknown as Secret, options);
+  }
+
+  async login(
+    email: string,
+    password: string,
+    expiresMinutes?: number
+  ): Promise<{ user: UserItem; token: string }> {
+    if (!email || !password) throw new Error('Email and password are required');
+    let user = await this.repo.findByEmail(email);
+
+    if (user && (user as any).password) {
+      try {
+        const hashed = (user as any).password as string;
+        if (!verifyPassword(password, hashed))
+          throw new Error('Invalid credentials');
+        const userData: UserItem = { ...user };
+        delete (userData as any).password;
+        const token = this.createAccessToken(
+          { user_id: user.id },
+          expiresMinutes
+        );
+        return { user: userData, token };
+      } catch (e) {
+        throw new Error('Invalid credentials');
+      }
+    }
+
+    const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+    const serviceKey =
+      process.env.SUPABASE_SERVICE_KEY ||
+      process.env.SUPABASE_SERVICE_ROLE_KEY ||
+      process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
+    if (!supabaseUrl || !serviceKey) throw new Error('Authentication error');
+    try {
+      const res = await fetch(
+        `${supabaseUrl}/auth/v1/token?grant_type=password`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            apikey: serviceKey,
+          },
+          body: JSON.stringify({ email, password }),
+        }
+      );
+      const data = await res.json();
+      if (!res.ok || data.error) throw new Error('Invalid credentials');
+      const supaUser = data.user;
+      if (!supaUser) throw new Error('Invalid credentials');
+
+      user = await this.repo.findByEmail(email);
+      if (!user) {
+        const fullName =
+          supaUser.user_metadata?.full_name ||
+          supaUser.user_metadata?.name ||
+          email;
+        const newId = await this.repo.createUser({
+          full_name: fullName,
+          email,
+          password: null,
+        });
+        user = await this.repo.findByUserId(String(newId));
+      }
+
+      if (!user) throw new Error('Authentication error');
+      const userData: UserItem = { ...user };
+      delete (userData as any).password;
+      const token = this.createAccessToken(
+        { user_id: user.id },
+        expiresMinutes
+      );
+      return { user: userData, token };
+    } catch (e) {
+      throw new Error('Invalid credentials');
+    }
+  }
+
+  async register(
+    full_name: string,
+    email: string,
+    password: string,
+    phone?: string,
+    expiresMinutes?: number
+  ): Promise<{ user: UserItem; token: string }> {
+    if (!email || !password || !full_name)
+      throw new Error('Email, password and fullname are required');
+    const existing = await this.repo.findByEmail(email);
+    if (existing) throw new Error('Email already exists');
+    const hashed = hashPassword(password);
+    const user_id = await this.repo.createUser({
+      full_name,
+      email,
+      password: hashed,
+      phone,
+    });
+    return this.login(email, password, expiresMinutes);
+  }
+
+  logout(token: string) {
+    this.blacklisted.add(token);
+    return { success: true, message: 'Successful logout' };
+  }
+
+  async verifyToken(token: string): Promise<UserItem> {
+    try {
+      const payload: any = jwt.verify(token, SECRET_KEY as unknown as Secret);
+      const user_id = payload.user_id;
+      if (!user_id) throw new Error('Invalid Token');
+      const user = await this.repo.findByUserId(String(user_id));
+      if (!user) throw new Error('User not found');
+      return user;
+    } catch (e) {
+      throw new Error('Invalid Token');
+    }
+  }
+
+  isTokenBlacklisted(token: string) {
+    return this.blacklisted.has(token);
+  }
+
+  async getListUsers(): Promise<{ success: true; users: UserItem[] }> {
+    const users = await this.repo.findAllUsers();
+    return { success: true, users };
+  }
+
+  async getProfileUser(
+    user_id: string
+  ): Promise<{ success: true; user: UserItem | null }> {
+    const user = await this.repo.findByUserId(user_id);
+    return { success: true, user };
+  }
+
+  async updateProfile(
+    user_id: string,
+    updates: Record<string, any>
+  ): Promise<{ success: true; user: UserItem }> {
+    const user = await this.repo.updateProfile(user_id, updates);
+    return { success: true, user };
+  }
+
+  async setPolarApiKey(user_id: string, apiKey: string | null) {
+    await this.repo.updateProfile(user_id, { polar_api_key: apiKey });
+    return { success: true };
+  }
+
+  async getPolarApiKey(user_id: string): Promise<string | null> {
+    const key = await this.repo.getDecryptedPolarKey(user_id);
+    return key;
+  }
+
+  async uploadProfileImage(
+    user_id: string,
+    file: File
+  ): Promise<{ success: true; user: UserItem }> {
+    try {
+      const url = await uploadProfileImage(file as any);
+      const user = await this.repo.updateProfile(user_id, {
+        profile_image: url,
+      });
+      return { success: true, user };
+    } catch (e: any) {
+      throw new Error(String(e?.message ?? e));
+    }
+  }
+
+  async deleteProfileImage(
+    user_id: string
+  ): Promise<{ success: true; user: UserItem }> {
+    const user = await this.repo.updateProfile(user_id, {
+      profile_image: null,
+    });
+    return { success: true, user };
+  }
+
+  async updateProfileImage(
+    user_id: string,
+    file: File
+  ): Promise<{ success: true; user: UserItem }> {
+    try {
+      const url = await uploadProfileImage(file as any);
+      const user = await this.repo.updateProfile(user_id, {
+        profile_image: url,
+      });
+      return { success: true, user };
+    } catch (e: any) {
+      throw new Error(String(e?.message ?? e));
+    }
+  }
+
+  async deleteUser(
+    user_id: string
+  ): Promise<{ success: true; user: UserItem | null }> {
+    const user = await this.repo.deleteUser(user_id);
+    return { success: true, user };
+  }
+}
diff --git a/frontend/backend/back/category/models.ts b/frontend/backend/back/category/models.ts
new file mode 100644
index 00000000..a5de36c2
--- /dev/null
+++ b/frontend/backend/back/category/models.ts
@@ -0,0 +1,16 @@
+export interface Category {
+  id: string;
+  name: string;
+  created_at?: string | null;
+  last_updated?: string | null;
+}
+
+export interface CategoryResponse {
+  success: boolean;
+  category: Category;
+}
+
+export interface CategoriesResponse {
+  success: boolean;
+  categories: Category[];
+}
diff --git a/frontend/backend/back/category/repository.ts b/frontend/backend/back/category/repository.ts
new file mode 100644
index 00000000..de6d489f
--- /dev/null
+++ b/frontend/backend/back/category/repository.ts
@@ -0,0 +1,23 @@
+import { createClient } from '@/utils/supabase/server';
+
+export class CategoryRepository {
+  table = 'categories';
+
+  async list() {
+    const supabase = await createClient();
+    const { data, error } = await supabase.from(this.table).select('*');
+    if (error) throw error;
+    return data || [];
+  }
+
+  async get(category_id: string) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('id', category_id)
+      .single();
+    if (error) return null;
+    return data;
+  }
+}
diff --git a/frontend/backend/back/category/service.ts b/frontend/backend/back/category/service.ts
new file mode 100644
index 00000000..d131813e
--- /dev/null
+++ b/frontend/backend/back/category/service.ts
@@ -0,0 +1,18 @@
+import { CategoryRepository } from './repository';
+
+export class CategoryService {
+  repo: CategoryRepository;
+  constructor(repo?: CategoryRepository) {
+    this.repo = repo || new CategoryRepository();
+  }
+
+  async listCategories() {
+    return this.repo.list();
+  }
+
+  async getCategory(category_id: string) {
+    const category = await this.repo.get(category_id);
+    if (!category) throw new Error('Category not found');
+    return category;
+  }
+}
diff --git a/frontend/backend/back/inventory/models.ts b/frontend/backend/back/inventory/models.ts
new file mode 100644
index 00000000..0e116769
--- /dev/null
+++ b/frontend/backend/back/inventory/models.ts
@@ -0,0 +1,21 @@
+export interface Product {
+  id: string;
+  name?: string;
+  status?: string;
+}
+
+export interface Inventory {
+  id?: string | null;
+  inventory_owner?: string | null;
+  products: Product[];
+  created_at?: string | null;
+  last_updated?: string | null;
+}
+
+export interface InventoryResponse {
+  success: boolean;
+  inventory?: Inventory | null;
+  total_products?: number;
+  total_stock?: number | null;
+  low_stock_count?: number | null;
+}
diff --git a/frontend/backend/back/inventory/repository.ts b/frontend/backend/back/inventory/repository.ts
new file mode 100644
index 00000000..6e2c4024
--- /dev/null
+++ b/frontend/backend/back/inventory/repository.ts
@@ -0,0 +1,165 @@
+import { createClient } from '@/utils/supabase/server';
+import type { Inventory, Product } from './models';
+
+export class InventoryRepository {
+  table = 'inventory';
+
+  async getInventoryByOwner(owner_id: string): Promise<Inventory | null> {
+    const supabase = await createClient();
+    const resp = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('inventory_owner', owner_id)
+      .limit(1);
+    const data: any =
+      resp.data && resp.data.length ? resp.data[0] : resp.data || null;
+    if (!data) return null;
+    let products = data.products || [];
+    if (products && typeof products === 'object' && !Array.isArray(products)) {
+      try {
+        products = Object.values(products as Record<string, any>);
+      } catch {
+        products = [];
+      }
+    }
+    data.products = products;
+    return data as Inventory;
+  }
+
+  async createInventory(owner_id: string): Promise<Inventory> {
+    const supabase = await createClient();
+    const payload = { inventory_owner: owner_id, products: [] };
+    const res = await supabase
+      .from(this.table)
+      .insert(payload)
+      .select()
+      .single();
+    const data: any = res.data;
+    if (!data) throw new Error('Error creating inventory');
+    return data as Inventory;
+  }
+
+  async getOrCreateInventory(owner_id: string): Promise<Inventory> {
+    const inv = await this.getInventoryByOwner(owner_id);
+    if (inv) return inv;
+    return this.createInventory(owner_id);
+  }
+
+  async getInventoryItems(owner_id: string): Promise<Product[]> {
+    const inv = await this.getInventoryByOwner(owner_id);
+    if (!inv || !inv.products) return [];
+    return inv.products as Product[];
+  }
+
+  async getInventoryItem(
+    owner_id: string,
+    product_id: string
+  ): Promise<Product | null> {
+    const inv = await this.getInventoryByOwner(owner_id);
+    if (!inv || !inv.products) return null;
+    for (const p of inv.products) {
+      const pid =
+        typeof p === 'object' && 'id' in p ? (p as any).id : undefined;
+      if (String(pid) === String(product_id)) return p as Product;
+    }
+    return null;
+  }
+
+  async updateInventoryItem(
+    owner_id: string,
+    product_id: string,
+    updates: Record<string, any>
+  ): Promise<Product> {
+    const supabase = await createClient();
+    const inv = await this.getOrCreateInventory(owner_id);
+    const products = inv.products || [];
+    let foundIndex = -1;
+    for (let i = 0; i < products.length; i++) {
+      const p = products[i];
+      const pid =
+        typeof p === 'object' && 'id' in p ? (p as any).id : undefined;
+      if (String(pid) === String(product_id)) {
+        foundIndex = i;
+        break;
+      }
+    }
+    let currentProduct: any = null;
+    if (foundIndex === -1) {
+      const productResp = await supabase
+        .from('products')
+        .select('id,name,status')
+        .eq('id', product_id)
+        .limit(1);
+      const productData: any =
+        productResp.data && productResp.data.length
+          ? productResp.data[0]
+          : null;
+      if (!productData) throw new Error('Product not found');
+      const newProduct = {
+        id: productData.id,
+        name: productData.name,
+        status: productData.status || 'active',
+      };
+      products.push(newProduct);
+      currentProduct = newProduct;
+    } else {
+      const existing = products[foundIndex];
+      currentProduct = typeof existing === 'object' ? existing : existing;
+      for (const [k, v] of Object.entries(updates)) {
+        if (k === 'name' || k === 'status') currentProduct[k] = v;
+      }
+      products[foundIndex] = currentProduct;
+    }
+    const serializable = products.map((p) => (typeof p === 'object' ? p : p));
+    const resp = await supabase
+      .from(this.table)
+      .update({ products: serializable })
+      .eq('inventory_owner', owner_id)
+      .select();
+    const data: any = resp.data;
+    if (!data) throw new Error('Error updating inventory');
+    return currentProduct as Product;
+  }
+
+  async removeInventoryItem(
+    owner_id: string,
+    product_id: string
+  ): Promise<boolean> {
+    const supabase = await createClient();
+    const inv = await this.getInventoryByOwner(owner_id);
+    if (!inv || !inv.products) return false;
+    const products = inv.products;
+    const newProducts = products.filter(
+      (p) => String((p as any).id) !== String(product_id)
+    );
+    const resp = await supabase
+      .from(this.table)
+      .update({ products: newProducts })
+      .eq('inventory_owner', owner_id)
+      .select();
+    const data: any = resp.data;
+    return data != null;
+  }
+
+  async getInventorySummary(
+    owner_id: string
+  ): Promise<{
+    total_products: number;
+    total_stock: null;
+    low_stock_count: null;
+  }> {
+    const items = await this.getInventoryItems(owner_id);
+    return {
+      total_products: items.length,
+      total_stock: null,
+      low_stock_count: null,
+    };
+  }
+
+  async checkLowStock(
+    owner_id: string,
+    threshold: number = 0
+  ): Promise<Product[]> {
+    return [];
+  }
+}
diff --git a/frontend/backend/back/inventory/service.ts b/frontend/backend/back/inventory/service.ts
new file mode 100644
index 00000000..bb088917
--- /dev/null
+++ b/frontend/backend/back/inventory/service.ts
@@ -0,0 +1,58 @@
+import { InventoryRepository } from './repository';
+import type { Product, InventoryResponse } from './models';
+
+export class InventoryService {
+  repo: InventoryRepository;
+
+  constructor() {
+    this.repo = new InventoryRepository();
+  }
+
+  async getInventory(user_id: string): Promise<Product[]> {
+    return this.getInventoryByUser(user_id);
+  }
+
+  async getInventoryByUser(user_id: string): Promise<Product[]> {
+    return this.repo.getInventoryItems(user_id);
+  }
+
+  async updateStock(): Promise<never> {
+    throw new Error('Updating stock on inventory.jsonb is not supported');
+  }
+
+  async getInventoryItem(
+    user_id: string,
+    product_id: string
+  ): Promise<Product | null> {
+    return this.repo.getInventoryItem(user_id, product_id);
+  }
+
+  async checkLowStock(
+    user_id: string,
+    min_threshold: number = 0
+  ): Promise<Product[]> {
+    return this.repo.checkLowStock(user_id, min_threshold);
+  }
+
+  async getInventorySummary(user_id: string) {
+    return this.repo.getInventorySummary(user_id);
+  }
+
+  async getInventoryResponse(user_id: string): Promise<InventoryResponse> {
+    const items = await this.getInventoryByUser(user_id);
+    const summary = await this.getInventorySummary(user_id);
+    return {
+      success: true,
+      inventory: {
+        id: null,
+        inventory_owner: user_id,
+        products: items,
+        created_at: null,
+        last_updated: null,
+      },
+      total_products: summary.total_products,
+      total_stock: summary.total_stock,
+      low_stock_count: summary.low_stock_count,
+    };
+  }
+}
diff --git a/frontend/backend/back/layout/models.ts b/frontend/backend/back/layout/models.ts
new file mode 100644
index 00000000..a5b7cd7f
--- /dev/null
+++ b/frontend/backend/back/layout/models.ts
@@ -0,0 +1,24 @@
+export interface CreateLayoutRequest {
+  slug: string;
+  inventory_id: string;
+  hero_title?: string | null;
+  web_description?: string | null;
+  social_links?: Record<string, unknown> | null;
+}
+
+export interface UpdateLayoutRequest {
+  hero_title?: string | null;
+  web_description?: string | null;
+  social_links?: Record<string, unknown> | null;
+}
+
+export interface LayoutResponse {
+  slug: string;
+  owner_id: string;
+  inventory_id: string;
+  hero_title?: string | null;
+  web_description?: string | null;
+  social_links?: Record<string, unknown> | null;
+  created_at?: string | null;
+  last_updated?: string | null;
+}
diff --git a/frontend/backend/back/layout/repository.ts b/frontend/backend/back/layout/repository.ts
new file mode 100644
index 00000000..d220d71f
--- /dev/null
+++ b/frontend/backend/back/layout/repository.ts
@@ -0,0 +1,78 @@
+import { createClient } from '@/utils/supabase/server';
+
+export class LayoutRepository {
+  table = 'layouts';
+
+  async createLayout(payload: any) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .insert(payload)
+      .select()
+      .single();
+    if (error) throw error;
+    return data;
+  }
+
+  async updateLayout(slug: string, updates: any) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .update(updates)
+      .eq('slug', slug)
+      .select()
+      .single();
+    if (error) throw error;
+    return data;
+  }
+
+  async findAll() {
+    const supabase = await createClient();
+    const { data, error } = await supabase.from(this.table).select('*');
+    if (error) throw error;
+    return data || [];
+  }
+
+  async findBySlug(slug: string) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('slug', slug)
+      .single();
+    if (error) return null;
+    return data;
+  }
+
+  async findByOwner(owner_id: string) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('owner_id', owner_id);
+    if (error) throw error;
+    return data || [];
+  }
+
+  async findByInventory(inventory_id: string) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('inventory_id', inventory_id);
+    if (error) throw error;
+    return data || [];
+  }
+
+  async deleteLayout(slug: string) {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .delete()
+      .eq('slug', slug)
+      .select()
+      .single();
+    if (error) throw error;
+    return data;
+  }
+}
diff --git a/frontend/backend/back/layout/service.ts b/frontend/backend/back/layout/service.ts
new file mode 100644
index 00000000..d486fad7
--- /dev/null
+++ b/frontend/backend/back/layout/service.ts
@@ -0,0 +1,48 @@
+import { LayoutRepository } from './repository';
+
+export class LayoutService {
+  repo: LayoutRepository;
+  constructor(repo?: LayoutRepository) {
+    this.repo = repo || new LayoutRepository();
+  }
+
+  async createLayout(layoutData: any, owner_id: string) {
+    return this.repo.createLayout({ ...layoutData, owner_id });
+  }
+
+  async listLayouts() {
+    return this.repo.findAll();
+  }
+
+  async getLayout(layout_slug: string) {
+    if (!layout_slug || typeof layout_slug !== 'string')
+      throw new Error('Invalid layout slug');
+    const layout = await this.repo.findBySlug(layout_slug);
+    if (!layout) throw new Error('Layout not found');
+    return layout;
+  }
+
+  async updateLayout(layout_slug: string, updates: any) {
+    const allowed = ['hero_title', 'web_description', 'social_links'];
+    for (const k of Object.keys(updates)) {
+      if (!allowed.includes(k)) throw new Error(`Invalid field: ${k}`);
+    }
+    for (const fld of ['hero_title', 'web_description', 'social_links']) {
+      const val = updates[fld];
+      if (val === '' || val == null) delete updates[fld];
+    }
+    return this.repo.updateLayout(layout_slug, updates);
+  }
+
+  async deleteLayout(layout_slug: string) {
+    return this.repo.deleteLayout(layout_slug);
+  }
+
+  async listLayoutsByOwner(owner_id: string) {
+    return this.repo.findByOwner(owner_id);
+  }
+
+  async listLayoutsByInventory(inventory_id: string) {
+    return this.repo.findByInventory(inventory_id);
+  }
+}
diff --git a/frontend/backend/back/product/models.ts b/frontend/backend/back/product/models.ts
new file mode 100644
index 00000000..4934188f
--- /dev/null
+++ b/frontend/backend/back/product/models.ts
@@ -0,0 +1,59 @@
+export interface CreateProductRequest {
+  name: string;
+  description?: string | null;
+  price: number;
+  stock: number;
+  unit?: string | null;
+  product_type?: string | null;
+  category_ids?: string[] | null;
+  sku?: string | null;
+  min_stock?: number | null;
+  status?: string | null;
+  weight?: number | null;
+  localization?: string | null;
+}
+
+export interface UpdateProductRequest {
+  name?: string;
+  description?: string | null;
+  price?: number;
+  stock?: number;
+  unit?: string | null;
+  product_type?: string | null;
+  category_ids?: string[] | null;
+  sku?: string | null;
+  min_stock?: number | null;
+  status?: string | null;
+  weight?: number | null;
+  localization?: string | null;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  description?: string | null;
+  price: number;
+  stock: number;
+  unit?: string | null;
+  product_type?: string | null;
+  category_ids?: string[] | null;
+  sku?: string | null;
+  min_stock?: number | null;
+  status?: string | null;
+  weight?: number | null;
+  localization?: string | null;
+  images?: string[];
+  creator_id?: string | null;
+  created_at?: string | null;
+  last_updated?: string | null;
+}
+
+export interface ProductResponse {
+  success: boolean;
+  product?: Product | null;
+}
+
+export interface ProductsResponse {
+  success: boolean;
+  products: Product[];
+}
diff --git a/frontend/backend/back/product/repository.ts b/frontend/backend/back/product/repository.ts
new file mode 100644
index 00000000..191c25d5
--- /dev/null
+++ b/frontend/backend/back/product/repository.ts
@@ -0,0 +1,117 @@
+import { createClient } from '@/utils/supabase/server';
+import type { Product } from './models';
+
+export class ProductRepository {
+  table = 'products';
+
+  async createProduct(payload: Record<string, any>): Promise<Product> {
+    const supabase = await createClient();
+    const res = await supabase
+      .from(this.table)
+      .insert(payload)
+      .select()
+      .single();
+    const data: any = res.data;
+    if (!data) throw new Error('Error creating product');
+    return data as Product;
+  }
+
+  async updateProduct(
+    product_id: string,
+    updates: Record<string, any>
+  ): Promise<Product> {
+    const supabase = await createClient();
+    const resp = await supabase
+      .from(this.table)
+      .update(updates)
+      .eq('id', product_id)
+      .select()
+      .single();
+    const data: any = resp.data;
+    if (!data) throw new Error('Product not found');
+    return data as Product;
+  }
+
+  async findAll(): Promise<Product[]> {
+    const supabase = await createClient();
+    const { data } = await supabase.from(this.table).select('*');
+    return (data || []) as Product[];
+  }
+
+  async findById(product_id: string): Promise<Product | null> {
+    const supabase = await createClient();
+    const { data, error } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('id', product_id)
+      .limit(1);
+    if (error) return null;
+    if (!data || data.length === 0) return null;
+    return data[0] as Product;
+  }
+
+  async deleteProduct(product_id: string): Promise<Product> {
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .delete()
+      .eq('id', product_id)
+      .select()
+      .single();
+    if (!data) throw new Error('Product not found');
+    return data as Product;
+  }
+
+  async findByCreator(creator_id: string): Promise<Product[]> {
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .select('*')
+      .eq('creator_id', creator_id);
+    return (data || []) as Product[];
+  }
+
+  async findByName(name: string): Promise<Product[]> {
+    const supabase = await createClient();
+    const { data } = await supabase
+      .from(this.table)
+      .select('*')
+      .ilike('name', name);
+    return (data || []) as Product[];
+  }
+
+  async addImages(product_id: string, new_images: string[]): Promise<Product> {
+    const prod = await this.findById(product_id);
+    if (!prod) throw new Error('Product not found');
+    const current = prod.images || [];
+    const updated = current.concat(new_images);
+    if (updated.length > 4) throw new Error('Maximum 4 images allowed');
+    return this.updateProduct(product_id, { images: updated });
+  }
+
+  async getImages(product_id: string): Promise<string[]> {
+    const prod = await this.findById(product_id);
+    if (!prod) throw new Error('Product not found');
+    return prod.images || [];
+  }
+
+  async deleteImage(product_id: string, image_index: number): Promise<Product> {
+    const prod = await this.findById(product_id);
+    if (!prod) throw new Error('Product not found');
+    const current = prod.images || [];
+    if (image_index < 0 || image_index >= current.length)
+      throw new Error('Invalid image index');
+    const updated = current
+      .slice(0, image_index)
+      .concat(current.slice(image_index + 1));
+    return this.updateProduct(product_id, { images: updated });
+  }
+
+  async updateImages(
+    product_id: string,
+    new_images: string[]
+  ): Promise<Product> {
+    if (new_images.length > 4) throw new Error('Maximum 4 images allowed');
+    return this.updateProduct(product_id, { images: new_images });
+  }
+}
diff --git a/frontend/backend/back/product/service.ts b/frontend/backend/back/product/service.ts
new file mode 100644
index 00000000..910777a1
--- /dev/null
+++ b/frontend/backend/back/product/service.ts
@@ -0,0 +1,175 @@
+import { ProductRepository } from './repository';
+import type {
+  CreateProductRequest,
+  UpdateProductRequest,
+  Product,
+} from './models';
+
+const MAX_IMAGES = 4;
+
+export class ProductService {
+  repo: ProductRepository;
+  constructor(repo?: ProductRepository) {
+    this.repo = repo || new ProductRepository();
+  }
+
+  async createProduct(
+    product_data: CreateProductRequest,
+    creator_id: string
+  ): Promise<Product> {
+    const unit_val = (product_data as any).unit ?? product_data.unit;
+    const type_val =
+      (product_data as any).product_type ?? product_data.product_type;
+    const category_ids_val = (product_data as any).category_ids || [];
+    if (!Array.isArray(category_ids_val))
+      throw new Error('category_ids must be a list');
+    for (const cid of category_ids_val) {
+      if (typeof cid !== 'string' || !cid)
+        throw new Error('Invalid category id in category_ids');
+    }
+    const initial_images: string[] = [];
+    if (initial_images.length > MAX_IMAGES)
+      throw new Error('Maximum 4 images allowed');
+    return this.repo.createProduct({
+      name: product_data.name,
+      description: product_data.description ?? null,
+      price: Number(product_data.price),
+      stock: Number(product_data.stock),
+      unit: unit_val,
+      product_type: type_val,
+      category_ids: category_ids_val,
+      sku: product_data.sku ?? null,
+      min_stock: Number((product_data as any).min_stock ?? 0),
+      status: (product_data as any).status ?? 'active',
+      weight: (product_data as any).weight ?? null,
+      localization: (product_data as any).localization ?? null,
+      creator_id: String(creator_id),
+      images: initial_images,
+    });
+  }
+
+  async listProducts(creator_id: string) {
+    return this.repo.findByCreator(creator_id);
+  }
+
+  async searchByCategory(category: string) {
+    return this.repo.findByName(category);
+  }
+
+  async searchByName(name: string) {
+    return this.repo.findByName(name);
+  }
+
+  async getProduct(product_id: string) {
+    if (!product_id) throw new Error('Invalid product ID');
+    const product = await this.repo.findById(product_id);
+    if (!product) throw new Error('Product not found');
+    return product;
+  }
+
+  async updateProduct(
+    product_id: string,
+    updates: Record<string, any>,
+    user_timezone: string = 'UTC'
+  ) {
+    if (!product_id) throw new Error('Invalid product ID');
+    const allowed_fields = [
+      'name',
+      'description',
+      'price',
+      'stock',
+      'category_ids',
+      'images',
+      'sku',
+      'weight',
+      'localization',
+      'min_stock',
+      'status',
+      'product_type',
+      'unit',
+    ];
+    for (const field of Object.keys(updates)) {
+      if (!allowed_fields.includes(field))
+        throw new Error(`Invalid field: ${field}`);
+    }
+    for (const fld of [
+      'product_type',
+      'unit',
+      'category_ids',
+      'description',
+      'localization',
+      'sku',
+      'status',
+    ]) {
+      const val = updates[fld];
+      if (val === '' || val === null || val === undefined) delete updates[fld];
+    }
+    if ('category_ids' in updates) {
+      if (!Array.isArray(updates['category_ids']))
+        throw new Error('category_ids must be a list');
+      const cleaned: string[] = [];
+      for (const cid of updates['category_ids']) {
+        if (typeof cid !== 'string' || !cid)
+          throw new Error('Invalid category id in category_ids');
+        cleaned.push(cid);
+      }
+      updates['category_ids'] = cleaned;
+    }
+    if ('price' in updates) {
+      const v = Number(updates['price']);
+      if (Number.isNaN(v) || v <= 0) throw new Error('Invalid price value');
+      updates['price'] = v;
+    }
+    if ('stock' in updates) {
+      const v = Number(updates['stock']);
+      if (!Number.isInteger(v) || v < 0) throw new Error('Invalid stock value');
+      updates['stock'] = v;
+    }
+    if ('min_stock' in updates) {
+      const v = Number(updates['min_stock']);
+      if (!Number.isInteger(v) || v < 0)
+        throw new Error('Invalid min_stock value');
+      updates['min_stock'] = v;
+    }
+    if ('weight' in updates) {
+      const v = Number(updates['weight']);
+      if (Number.isNaN(v) || v < 0) throw new Error('Invalid weight value');
+      updates['weight'] = v;
+    }
+    return this.repo.updateProduct(product_id, updates);
+  }
+
+  async addImages(product_id: string, new_images: string[]) {
+    if (!product_id) throw new Error('Invalid product ID');
+    if (new_images.length > MAX_IMAGES)
+      throw new Error('Maximum 4 images allowed');
+    const product = await this.repo.findById(product_id);
+    if (!product) throw new Error('Product not found');
+    const current = product.images || [];
+    if (current.length + new_images.length > MAX_IMAGES)
+      throw new Error('Maximum 4 images allowed');
+    return this.repo.addImages(product_id, new_images);
+  }
+
+  async getImages(product_id: string) {
+    if (!product_id) throw new Error('Invalid product ID');
+    return this.repo.getImages(product_id);
+  }
+
+  async deleteImage(product_id: string, image_index: number) {
+    if (!product_id) throw new Error('Invalid product ID');
+    return this.repo.deleteImage(product_id, image_index);
+  }
+
+  async updateImages(product_id: string, new_images: string[]) {
+    if (!product_id) throw new Error('Invalid product ID');
+    if (new_images.length > MAX_IMAGES)
+      throw new Error('Maximum 4 images allowed');
+    return this.repo.updateImages(product_id, new_images);
+  }
+
+  async deleteProduct(product_id: string) {
+    if (!product_id) throw new Error('Invalid product ID');
+    return this.repo.deleteProduct(product_id);
+  }
+}
diff --git a/frontend/package.json b/frontend/package.json
index aed25987..bf959b8f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@google/generative-ai": "^0.24.1",
     "@polar-sh/nextjs": "^0.4.6",
     "@polar-sh/sdk": "^0.34.16",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -41,7 +42,9 @@
     "@supabase/ssr": "^0.7.0",
     "@supabase/supabase-js": "^2.56.0",
     "axios": "^1.7.7",
+    "bcryptjs": "^3.0.2",
     "class-variance-authority": "^0.7.1",
+    "cloudinary": "^2.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
@@ -49,6 +52,7 @@
     "geist": "^1.3.1",
     "input-otp": "^1.4.2",
     "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.344.0",
     "next": "15.5.0",
     "next-themes": "^0.4.6",
@@ -73,6 +77,7 @@
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
     "@types/js-cookie": "^3.0.6",
+    "@types/jsonwebtoken": "^9.0.10",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 5daae71b..58f286a9 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@google/generative-ai':
+        specifier: ^0.24.1
+        version: 0.24.1
       '@polar-sh/nextjs':
         specifier: ^0.4.6
         version: 0.4.6(next@15.5.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))
@@ -104,9 +107,15 @@ importers:
       axios:
         specifier: ^1.7.7
         version: 1.11.0
+      bcryptjs:
+        specifier: ^3.0.2
+        version: 3.0.2
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
+      cloudinary:
+        specifier: ^2.7.0
+        version: 2.7.0
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -128,6 +137,9 @@ importers:
       js-cookie:
         specifier: ^3.0.5
         version: 3.0.5
+      jsonwebtoken:
+        specifier: ^9.0.2
+        version: 9.0.2
       lucide-react:
         specifier: ^0.344.0
         version: 0.344.0(react@19.1.0)
@@ -195,6 +207,9 @@ importers:
       '@types/js-cookie':
         specifier: ^3.0.6
         version: 3.0.6
+      '@types/jsonwebtoken':
+        specifier: ^9.0.10
+        version: 9.0.10
       '@types/node':
         specifier: ^20
         version: 20.19.11
@@ -302,6 +317,10 @@ packages:
   '@floating-ui/utils@0.2.10':
     resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
+  '@google/generative-ai@0.24.1':
+    resolution: {integrity: sha512-MqO+MLfM6kjxcKoy0p1wRzG3b4ZZXtPI+z2IE26UogS2Cm/XHO+7gGRBh6gcJsOiIVoH93UwKvW4HdgiOZCy9Q==}
+    engines: {node: '>=18.0.0'}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -1716,6 +1735,12 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/jsonwebtoken@9.0.10':
+    resolution: {integrity: sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==}
+
+  '@types/ms@2.1.0':
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+
   '@types/node@20.19.11':
     resolution: {integrity: sha512-uug3FEEGv0r+jrecvUUpbY8lLisvIjg6AAic6a2bSP5OEOLeJsDSnvhCDov7ipFFMXS3orMpzlmi0ZcuGkBbow==}
 
@@ -2008,6 +2033,10 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  bcryptjs@3.0.2:
+    resolution: {integrity: sha512-k38b3XOZKv60C4E2hVsXTolJWfkGRMbILBIe2IBITXciy5bOsTKot5kDrf3ZfufQtQOUN5mXceUEpU1rTl9Uog==}
+    hasBin: true
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -2018,6 +2047,9 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
+  buffer-equal-constant-time@1.0.1:
+    resolution: {integrity: sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==}
+
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
@@ -2066,6 +2098,10 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  cloudinary@2.7.0:
+    resolution: {integrity: sha512-qrqDn31+qkMCzKu1GfRpzPNAO86jchcNwEHCUiqvPHNSFqu7FTNF9FuAkBUyvM1CFFgFPu64NT0DyeREwLwK0w==}
+    engines: {node: '>=9'}
+
   clsx@2.1.1:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
@@ -2254,6 +2290,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  ecdsa-sig-formatter@1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+
   embla-carousel-react@8.6.0:
     resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
     peerDependencies:
@@ -2822,10 +2861,20 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
+  jsonwebtoken@9.0.2:
+    resolution: {integrity: sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==}
+    engines: {node: '>=12', npm: '>=6'}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  jwa@1.4.2:
+    resolution: {integrity: sha512-eeH5JO+21J78qMvTIDdBXidBd6nG2kZjg5Ohz/1fpa28Z4CcsWUzJ1ZZyFq/3z3N17aZy+ZuBoHljASbL1WfOw==}
+
+  jws@3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -2914,9 +2963,30 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
+  lodash.includes@4.3.0:
+    resolution: {integrity: sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==}
+
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+
+  lodash.isinteger@4.0.4:
+    resolution: {integrity: sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==}
+
+  lodash.isnumber@3.0.3:
+    resolution: {integrity: sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==}
+
+  lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isstring@4.0.1:
+    resolution: {integrity: sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==}
+
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  lodash.once@4.1.1:
+    resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
+
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
@@ -3182,6 +3252,14 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  q@1.5.1:
+    resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==}
+    engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
+    deprecated: |-
+      You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.
+
+      (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -3934,6 +4012,8 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@google/generative-ai@0.24.1': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -5542,6 +5622,13 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/jsonwebtoken@9.0.10':
+    dependencies:
+      '@types/ms': 2.1.0
+      '@types/node': 20.19.11
+
+  '@types/ms@2.1.0': {}
+
   '@types/node@20.19.11':
     dependencies:
       undici-types: 6.21.0
@@ -5866,6 +5953,8 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  bcryptjs@3.0.2: {}
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -5879,6 +5968,8 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
+  buffer-equal-constant-time@1.0.1: {}
+
   buffer@6.0.3:
     dependencies:
       base64-js: 1.5.1
@@ -5926,6 +6017,11 @@ snapshots:
 
   client-only@0.0.1: {}
 
+  cloudinary@2.7.0:
+    dependencies:
+      lodash: 4.17.21
+      q: 1.5.1
+
   clsx@2.1.1: {}
 
   cmdk@1.1.1(@types/react-dom@19.1.7(@types/react@19.1.10))(@types/react@19.1.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
@@ -6098,6 +6194,10 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  ecdsa-sig-formatter@1.0.11:
+    dependencies:
+      safe-buffer: 5.2.1
+
   embla-carousel-react@8.6.0(react@19.1.0):
     dependencies:
       embla-carousel: 8.6.0
@@ -6813,6 +6913,19 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
+  jsonwebtoken@9.0.2:
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 7.7.2
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -6820,6 +6933,17 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  jwa@1.4.2:
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+
+  jws@3.2.2:
+    dependencies:
+      jwa: 1.4.2
+      safe-buffer: 5.2.1
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -6888,8 +7012,22 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
+  lodash.includes@4.3.0: {}
+
+  lodash.isboolean@3.0.3: {}
+
+  lodash.isinteger@4.0.4: {}
+
+  lodash.isnumber@3.0.3: {}
+
+  lodash.isplainobject@4.0.6: {}
+
+  lodash.isstring@4.0.1: {}
+
   lodash.merge@4.6.2: {}
 
+  lodash.once@4.1.1: {}
+
   lodash@4.17.21: {}
 
   loose-envify@1.4.0:
@@ -7139,6 +7277,8 @@ snapshots:
 
   punycode@2.3.1: {}
 
+  q@1.5.1: {}
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
diff --git a/frontend/src/app/api/auth/login/route.ts b/frontend/src/app/api/auth/login/route.ts
new file mode 100644
index 00000000..947300d4
--- /dev/null
+++ b/frontend/src/app/api/auth/login/route.ts
@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AuthService } from '@/../backend/auth/service';
+import { UserRepository } from '@/../backend/auth/repository';
+
+const service = new AuthService(new UserRepository());
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const res = await service.login(body.email, body.password);
+    return NextResponse.json(res);
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/auth/register/route.ts b/frontend/src/app/api/auth/register/route.ts
new file mode 100644
index 00000000..7bf13d59
--- /dev/null
+++ b/frontend/src/app/api/auth/register/route.ts
@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AuthService } from '@/../backend/auth/service';
+import { UserRepository } from '@/../backend/auth/repository';
+
+const service = new AuthService(new UserRepository());
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const res = await service.register(
+      body.full_name,
+      body.email,
+      body.password,
+      body.phone
+    );
+    return NextResponse.json(res);
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/categories/route.ts b/frontend/src/app/api/categories/route.ts
new file mode 100644
index 00000000..41eef479
--- /dev/null
+++ b/frontend/src/app/api/categories/route.ts
@@ -0,0 +1,26 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { CategoryService } from '@/../backend/back/category/service';
+
+const service = new CategoryService();
+
+export async function GET(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/categories', '') || '/';
+  try {
+    if (pathname === '/' || pathname === '') {
+      const categories = await service.listCategories();
+      return NextResponse.json({ success: true, categories });
+    }
+    const parts = pathname.split('/').filter(Boolean);
+    if (parts[0]) {
+      const category = await service.getCategory(parts[0]);
+      return NextResponse.json({ success: true, category });
+    }
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/checkout/polar/route.ts b/frontend/src/app/api/checkout/polar/route.ts
new file mode 100644
index 00000000..23decf11
--- /dev/null
+++ b/frontend/src/app/api/checkout/polar/route.ts
@@ -0,0 +1,134 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { polarAPI } from '@/utils/polar.utils';
+import { AuthService } from '@/../backend/auth/service';
+import { cookies } from 'next/headers';
+
+function getBearerFromHeader(req: NextRequest): string | undefined {
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader || !authHeader.startsWith('Bearer ')) return undefined;
+  return authHeader.split(' ')[1];
+}
+
+async function getCurrentUser(req: NextRequest) {
+  const cookieStore = await cookies();
+  const cookieToken = cookieStore.get('zatobox_token')?.value;
+  const headerToken = getBearerFromHeader(req);
+  const authToken = cookieToken || headerToken;
+  if (!authToken) throw new Error('Missing authentication token');
+
+  const authService = new AuthService();
+  const user = await authService.verifyToken(authToken);
+  const profile = await authService.getProfileUser(String(user.id));
+  const polarApiKey = profile.user?.polar_api_key || '';
+  if (!polarApiKey) throw new Error('Missing Polar API key for user');
+  return {
+    userId: user.id,
+    userEmail: user.email,
+    polarApiKey,
+    polarOrganizationId: profile.user?.polar_organization_id || '',
+  };
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { polarApiKey, polarOrganizationId } = await getCurrentUser(req);
+    const { userId, items, successUrl, metadata } = await req.json();
+
+    if (!userId || !items || !Array.isArray(items) || items.length === 0) {
+      return NextResponse.json(
+        { success: false, message: 'Invalid cart data' },
+        { status: 400 }
+      );
+    }
+
+    const totalPrice = items.reduce((sum: number, item: any) => {
+      const itemPrice = item.productData?.prices?.[0]?.price_amount || 0;
+      return sum + itemPrice * item.quantity;
+    }, 0);
+
+    const cartDescription = items
+      .map(
+        (item: any) =>
+          `${item.productData?.name || 'Producto'} (x${item.quantity})`
+      )
+      .join(', ');
+
+    const allImages = items.reduce((images: any[], item: any) => {
+      if (item.productData?.medias) {
+        images.push(...item.productData.medias);
+      }
+      return images;
+    }, []);
+
+    const combinedMetadata = {
+      user_id: userId,
+      cart_total: totalPrice.toString(),
+      item_count: items.length.toString(),
+      items: JSON.stringify(
+        items.map((item: any) => ({
+          name: item.productData?.name,
+          quantity: item.quantity,
+          price: item.productData?.prices?.[0]?.price_amount,
+          metadata: item.productData?.metadata,
+        }))
+      ),
+      ...metadata,
+    };
+
+    const cartProduct = await polarAPI.createProduct(polarApiKey, {
+      name: `Order #${Math.floor(Math.random() * 1000000)}`,
+      description: `Products: ${cartDescription}`,
+      prices: [
+        {
+          amount_type: 'fixed',
+          price_amount: totalPrice,
+          price_currency: 'usd',
+        },
+      ],
+      metadata: combinedMetadata,
+      medias: allImages.slice(0, 5),
+    });
+
+    const checkoutData = {
+      product_id: cartProduct.id,
+      success_url:
+        successUrl ||
+        `${process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'}/success`,
+      metadata: {
+        user_id: userId,
+        cart_product_id: cartProduct.id,
+        ...metadata,
+      },
+    };
+
+    const checkout = await fetch('https://api.polar.sh/v1/checkouts', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${polarApiKey}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(checkoutData),
+    });
+
+    if (!checkout.ok) {
+      const errorText = await checkout.text();
+      throw new Error(`Polar checkout error: ${errorText}`);
+    }
+
+    const checkoutResponse = await checkout.json();
+
+    return NextResponse.json({
+      success: true,
+      checkout_url: checkoutResponse.url,
+      checkout_id: checkoutResponse.id,
+      cart_product_id: cartProduct.id,
+    });
+  } catch (error: any) {
+    console.error('Polar checkout error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to create checkout' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/inventory/route.ts b/frontend/src/app/api/inventory/route.ts
new file mode 100644
index 00000000..a3523a3a
--- /dev/null
+++ b/frontend/src/app/api/inventory/route.ts
@@ -0,0 +1,85 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { InventoryService } from '@/../backend/back/inventory/service';
+
+const service = new InventoryService();
+
+export async function GET(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/inventory', '') || '/';
+  try {
+    if (pathname === '/' || pathname === '') {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const inventory = await service.getInventoryResponse(userId);
+      return NextResponse.json(inventory);
+    }
+    const parts = pathname.split('/').filter(Boolean);
+    if (parts[0] === 'user') {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const inventory = await service.getInventoryResponse(userId);
+      return NextResponse.json(inventory);
+    }
+    if (parts[0] === 'summary') {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const summary = await service.getInventorySummary(userId);
+      return NextResponse.json({ success: true, summary });
+    }
+    if (parts[0] === 'low-stock') {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const q = url.searchParams.get('threshold') || '0';
+      const threshold = parseInt(q, 10) || 0;
+      const items = await service.checkLowStock(userId, threshold);
+      return NextResponse.json({ success: true, low_stock_products: items });
+    }
+    if (parts[0] === 'user' || parts[0] === '') {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const inventory = await service.getInventoryResponse(userId);
+      return NextResponse.json(inventory);
+    }
+    if (parts[0]) {
+      const userId = req.headers.get('x-user-id') || 'anonymous';
+      const item = await service.getInventoryItem(userId, parts[0]);
+      if (!item)
+        return NextResponse.json(
+          { success: false, message: 'Product not found in inventory' },
+          { status: 404 }
+        );
+      return NextResponse.json({ success: true, product: item });
+    }
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  try {
+    const url = new URL(req.url);
+    const parts = url.pathname
+      .replace('/api/inventory', '')
+      .split('/')
+      .filter(Boolean);
+    if (!parts[0])
+      return NextResponse.json(
+        { success: false, message: 'Missing product id' },
+        { status: 400 }
+      );
+    const productId = parts[0];
+    const body = await req.json();
+    const quantity = body.quantity as number;
+    const reason = body.reason as string | undefined;
+    const userId = req.headers.get('x-user-id') || 'anonymous';
+    await service.updateStock();
+    return NextResponse.json(
+      { success: false, message: 'Updating stock not supported' },
+      { status: 400 }
+    );
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/layouts/route.ts b/frontend/src/app/api/layouts/route.ts
new file mode 100644
index 00000000..963c3cb2
--- /dev/null
+++ b/frontend/src/app/api/layouts/route.ts
@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { LayoutService } from '@/../backend/back/layout/service';
+
+const service = new LayoutService();
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = await req.json();
+    const owner = req.headers.get('x-user-id') || 'anonymous';
+    const layout = await service.createLayout(body, owner);
+    return NextResponse.json({
+      success: true,
+      message: 'Layout created successfully',
+      layout,
+    });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/layouts', '') || '/';
+  try {
+    if (pathname === '/' || pathname === '') {
+      const layouts = await service.listLayouts();
+      return NextResponse.json({ success: true, layouts });
+    }
+    const parts = pathname.split('/').filter(Boolean);
+    if (parts[0] === 'owner' && parts[1]) {
+      const layouts = await service.listLayoutsByOwner(parts[1]);
+      return NextResponse.json({ success: true, layouts });
+    }
+    if (parts[0] === 'inventory' && parts[1]) {
+      const layouts = await service.listLayoutsByInventory(parts[1]);
+      return NextResponse.json({ success: true, layouts });
+    }
+    if (parts[0]) {
+      const layout = await service.getLayout(parts[0]);
+      return NextResponse.json({
+        success: true,
+        message: 'Layout found',
+        layout,
+      });
+    }
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/layouts', '') || '/';
+  const parts = pathname.split('/').filter(Boolean);
+  if (!parts[0])
+    return NextResponse.json(
+      { success: false, message: 'Missing layout slug' },
+      { status: 400 }
+    );
+  try {
+    const updates = await req.json();
+    const updated = await service.updateLayout(parts[0], updates);
+    return NextResponse.json({
+      success: true,
+      message: 'Layout updated successfully',
+      layout: updated,
+    });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/layouts', '') || '/';
+  const parts = pathname.split('/').filter(Boolean);
+  if (!parts[0])
+    return NextResponse.json(
+      { success: false, message: 'Missing layout slug' },
+      { status: 400 }
+    );
+  try {
+    const deleted = await service.deleteLayout(parts[0]);
+    return NextResponse.json({
+      success: true,
+      message: 'Layout deleted successfully',
+      layout: deleted,
+    });
+  } catch (err: any) {
+    return NextResponse.json(
+      { success: false, message: String(err?.message ?? err) },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/ocr/route.ts b/frontend/src/app/api/ocr/route.ts
new file mode 100644
index 00000000..57c85c15
--- /dev/null
+++ b/frontend/src/app/api/ocr/route.ts
@@ -0,0 +1,60 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { processImageFile, sendBulk } from '@/../backend/OCR/handlers';
+
+export async function GET() {
+  return NextResponse.json({ message: 'ZatoBox OCR API con Gemini' });
+}
+
+export async function POST(req: NextRequest) {
+  const url = new URL(req.url);
+  const pathname = url.pathname.replace('/api/ocr', '') || '/';
+
+  try {
+    if (pathname === '/' || pathname === '' || pathname === '/ocr') {
+      const contentType = req.headers.get('content-type') || '';
+
+      if (!contentType.includes('multipart/form-data')) {
+        return NextResponse.json({ message: 'ZatoBox OCR API with Gemini' });
+      }
+
+      const form = await req.formData();
+      const file = form.get('file') as File | null;
+      if (!file)
+        return NextResponse.json(
+          { detail: 'No file found in form-data' },
+          { status: 400 }
+        );
+      const authHeader = req.headers.get('authorization');
+      const result = await processImageFile({
+        file,
+        authHeader,
+        env: process.env,
+      });
+      return NextResponse.json(result);
+    }
+
+    if (pathname === '/bulk') {
+      const body = await req.json();
+      const authHeader = req.headers.get('authorization');
+      const out = await sendBulk({ data: body, authHeader, env: process.env });
+      return NextResponse.json(out, { status: out.status });
+    }
+
+    return NextResponse.json({ error: 'Not found' }, { status: 404 });
+  } catch (err: any) {
+    if (err?.status === 429)
+      return NextResponse.json(
+        { detail: 'Too many requests. Please wait a moment and try again.' },
+        { status: 429 }
+      );
+    if (err?.status === 400)
+      return NextResponse.json(
+        { detail: 'Invalid file type' },
+        { status: 400 }
+      );
+    return NextResponse.json(
+      { detail: `Error: ${err?.message ?? String(err)}` },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/products/bulk/route.ts b/frontend/src/app/api/products/bulk/route.ts
new file mode 100644
index 00000000..42932500
--- /dev/null
+++ b/frontend/src/app/api/products/bulk/route.ts
@@ -0,0 +1,90 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { polarAPI } from '@/utils/polar.utils';
+import { AuthService } from '@/../backend/auth/service';
+import { cookies } from 'next/headers';
+
+function getBearerFromHeader(req: NextRequest): string | undefined {
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader || !authHeader.startsWith('Bearer ')) return undefined;
+  return authHeader.split(' ')[1];
+}
+
+async function getCurrentUser(req: NextRequest) {
+  const cookieStore = await cookies();
+  const cookieToken = cookieStore.get('zatobox_token')?.value;
+  const headerToken = getBearerFromHeader(req);
+  const authToken = cookieToken || headerToken;
+  if (!authToken) throw new Error('Missing authentication token');
+
+  const authService = new AuthService();
+  const user = await authService.verifyToken(authToken);
+  const profile = await authService.getProfileUser(String(user.id));
+  const polarApiKey = profile.user?.polar_api_key || '';
+  if (!polarApiKey) throw new Error('Missing Polar API key for user');
+  
+  return {
+    userId: user.id,
+    userEmail: user.email,
+    polarApiKey,
+    polarOrganizationId: profile.user?.polar_organization_id || '',
+  };
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { polarApiKey } = await getCurrentUser(req);
+    const { products } = await req.json();
+
+    if (!products || !Array.isArray(products) || products.length === 0) {
+      return NextResponse.json(
+        { success: false, message: 'No products provided' },
+        { status: 400 }
+      );
+    }
+
+    const createdProducts = [];
+    const errors = [];
+
+    for (const productData of products) {
+      try {
+        if (!productData.name) {
+          errors.push({ error: 'Product name is required', data: productData });
+          continue;
+        }
+
+        const product = await polarAPI.createProduct(polarApiKey, {
+          name: productData.name,
+          description: productData.description || '',
+          recurring_interval: null,
+          prices: productData.prices || [{
+            amount_type: 'fixed',
+            price_currency: 'usd',
+            price_amount: productData.price_amount || 0
+          }],
+          metadata: productData.metadata || {}
+        });
+
+        createdProducts.push(product);
+      } catch (error: any) {
+        errors.push({ 
+          error: error.message || 'Failed to create product', 
+          data: productData 
+        });
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      created: createdProducts.length,
+      errors: errors.length,
+      products: createdProducts,
+      failed: errors
+    });
+
+  } catch (error: any) {
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to create products' },
+      { status: 500 }
+    );
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/api/products/route.ts b/frontend/src/app/api/products/route.ts
new file mode 100644
index 00000000..161e00c4
--- /dev/null
+++ b/frontend/src/app/api/products/route.ts
@@ -0,0 +1,194 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { polarAPI } from '@/utils/polar.utils';
+import { AuthService } from '@/../backend/auth/service';
+
+async function getCurrentUser(req: NextRequest) {
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader || !authHeader.startsWith('Bearer ')) {
+    throw new Error('Missing authentication token');
+  }
+
+  const token = authHeader.split(' ')[1];
+  const authService = new AuthService();
+
+  try {
+    const user = await authService.verifyToken(token);
+    const profile = await authService.getProfileUser(String(user.id));
+
+    const polarApiKey = profile.user?.polar_api_key || '';
+    if (!polarApiKey) {
+      throw new Error('Missing Polar API key for user');
+    }
+
+    return {
+      userId: user.id,
+      userEmail: user.email,
+      polarApiKey: polarApiKey,
+      polarOrganizationId: profile.user?.polar_organization_id || '',
+    };
+  } catch (error) {
+    throw new Error('Invalid authentication');
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { polarApiKey } = await getCurrentUser(req);
+    const url = new URL(req.url);
+    const productId = url.searchParams.get('id');
+    const organizationId = url.searchParams.get('organization_id') || undefined;
+
+    if (productId) {
+      const product = await polarAPI.getProduct(polarApiKey, productId);
+      return NextResponse.json({ success: true, product });
+    } else {
+      const products = await polarAPI.listProducts(polarApiKey, organizationId);
+      const filteredProducts = products.filter(
+        (product) => !product.name || !product.name.startsWith('Order #')
+      );
+      return NextResponse.json({ success: true, products: filteredProducts });
+    }
+  } catch (error: any) {
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to fetch products' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { polarApiKey, polarOrganizationId } = await getCurrentUser(req);
+    const contentType = req.headers.get('content-type') || '';
+
+    if (contentType.includes('multipart/form-data')) {
+      const form = await req.formData();
+      const name = String(form.get('name') || '');
+      const description = String(form.get('description') || '');
+      const organizationId = String(polarOrganizationId || '');
+      const billing = String(form.get('billing_interval') || 'once');
+      const priceStr = String(form.get('price') || '0');
+      const stockStr = String(form.get('stock') || '0');
+      const file = form.get('image') as File | null;
+
+      if (!name) {
+        return NextResponse.json(
+          { success: false, message: 'name is required' },
+          { status: 400 }
+        );
+      }
+
+      if (file && file.size > 0) {
+        try {
+          await polarAPI.uploadFile(
+            polarApiKey,
+            file,
+            organizationId,
+            'product_media'
+          );
+        } catch {}
+      }
+
+      const priceAmount = Math.round(Number(priceStr) * 100);
+      const isOnce = billing === 'once';
+      const prices = [
+        {
+          amount_type: 'fixed',
+          price_currency: 'usd',
+          price_amount: priceAmount,
+          type: isOnce ? 'one_time' : 'recurring',
+          recurring_interval: isOnce ? undefined : billing,
+          legacy: false,
+          is_archived: false,
+        },
+      ];
+
+      const product = await polarAPI.createProduct(polarApiKey, {
+        name,
+        description: description || undefined,
+        recurring_interval: isOnce ? null : billing,
+        prices,
+        metadata: { quantity: Number(stockStr || '0') },
+      });
+      return NextResponse.json({ success: true, product });
+    } else {
+      const body: any = await req.json();
+      if (!body.name) {
+        return NextResponse.json(
+          { success: false, message: 'name is required' },
+          { status: 400 }
+        );
+      }
+      const prices = Array.isArray(body.prices) ? body.prices : [];
+      const product = await polarAPI.createProduct(polarApiKey, {
+        name: body.name,
+        description: body.description,
+        recurring_interval:
+          typeof body.recurring_interval === 'string'
+            ? body.recurring_interval
+            : null,
+        prices,
+        metadata: body.metadata || {},
+      });
+      return NextResponse.json({ success: true, product });
+    }
+  } catch (error: any) {
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to create product' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const { polarApiKey } = await getCurrentUser(req);
+    const url = new URL(req.url);
+    const productId = url.searchParams.get('id');
+
+    if (!productId) {
+      return NextResponse.json(
+        { success: false, message: 'Product ID is required' },
+        { status: 400 }
+      );
+    }
+
+    const body: any = await req.json();
+    const product = await polarAPI.updateProduct(polarApiKey, productId, body);
+    return NextResponse.json({ success: true, product });
+  } catch (error: any) {
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to update product' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { polarApiKey } = await getCurrentUser(req);
+    const url = new URL(req.url);
+    const productId = url.searchParams.get('id');
+
+    if (!productId) {
+      return NextResponse.json(
+        { success: false, message: 'Product ID is required' },
+        { status: 400 }
+      );
+    }
+
+    const product = await polarAPI.updateProduct(polarApiKey, productId, {
+      is_archived: true,
+    });
+    return NextResponse.json({
+      success: true,
+      message: 'Product archived successfully',
+      product,
+    });
+  } catch (error: any) {
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to archive product' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/api/profile/image/route.ts b/frontend/src/app/api/profile/image/route.ts
new file mode 100644
index 00000000..fbb7992b
--- /dev/null
+++ b/frontend/src/app/api/profile/image/route.ts
@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AuthService } from '@/../backend/auth/service';
+
+const service = new AuthService();
+
+async function getBearerToken(req: NextRequest) {
+  const header = req.headers.get('authorization') || '';
+  if (!header) return null;
+  const parts = header.split(' ');
+  if (parts.length === 2 && parts[0].toLowerCase() === 'bearer')
+    return parts[1];
+  return header;
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const form = await req.formData();
+    const file = form.get('file') as File | null;
+    if (!file)
+      return NextResponse.json(
+        { success: false, message: 'Missing file' },
+        { status: 400 }
+      );
+    const res = await service.uploadProfileImage(String(user.id), file);
+    return NextResponse.json(res);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const form = await req.formData();
+    const file = form.get('file') as File | null;
+    if (!file)
+      return NextResponse.json(
+        { success: false, message: 'Missing file' },
+        { status: 400 }
+      );
+    const res = await service.updateProfileImage(String(user.id), file);
+    return NextResponse.json(res);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const res = await service.deleteProfileImage(String(user.id));
+    return NextResponse.json(res);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 500 }
+    );
+  }
+}
+
+export const runtime = 'nodejs';
diff --git a/frontend/src/app/api/profile/route.ts b/frontend/src/app/api/profile/route.ts
new file mode 100644
index 00000000..68ec837c
--- /dev/null
+++ b/frontend/src/app/api/profile/route.ts
@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AuthService } from '@/../backend/auth/service';
+
+const service = new AuthService();
+
+async function getBearerToken(req: NextRequest) {
+  const header = req.headers.get('authorization') || '';
+  if (!header) return null;
+  const parts = header.split(' ');
+  if (parts.length === 2 && parts[0].toLowerCase() === 'bearer')
+    return parts[1];
+  return header;
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const out = await service.getProfileUser(String(user.id));
+    return NextResponse.json(out);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 401 }
+    );
+  }
+}
+
+export async function PATCH(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const body = await req.json();
+    const res = await service.updateProfile(String(user.id), body || {});
+    return NextResponse.json(res);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const token = await getBearerToken(req);
+    if (!token)
+      return NextResponse.json(
+        { success: false, message: 'Missing token' },
+        { status: 401 }
+      );
+    const user = await service.verifyToken(token);
+    const res = await service.deleteUser(String(user.id));
+    return NextResponse.json(res);
+  } catch (e: any) {
+    return NextResponse.json(
+      { success: false, message: String(e?.message ?? e) },
+      { status: 500 }
+    );
+  }
+}
+
+export const runtime = 'nodejs';
diff --git a/frontend/src/app/api/webhooks/polar/route.ts b/frontend/src/app/api/webhooks/polar/route.ts
index 17d6a13a..856d9902 100644
--- a/frontend/src/app/api/webhooks/polar/route.ts
+++ b/frontend/src/app/api/webhooks/polar/route.ts
@@ -1,5 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { createClient } from '@/utils/supabase/server';
+import { AuthService } from '@/../backend/auth/service';
+import { polarAPI } from '@/utils/polar.utils';
 import crypto from 'crypto';
 
 function verifyPolarSignature(payload: string, signature: string): boolean {
@@ -22,6 +24,8 @@ export async function POST(request: NextRequest) {
   try {
     const payload = await request.text();
     const signature = request.headers.get('x-polar-signature') || '';
+    const url = new URL(request.url);
+    const userId = url.searchParams.get('user_id');
 
     if (!verifyPolarSignature(payload, signature)) {
       return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
@@ -31,6 +35,12 @@ export async function POST(request: NextRequest) {
     const eventType = data.type;
     const eventData = data.data || {};
 
+    console.log(`Webhook received${userId ? ` for user ${userId}` : ''}:`, {
+      type: eventType,
+      id: eventData.id,
+      status: eventData.status,
+    });
+
     if (
       ![
         'subscription.created',
@@ -38,78 +48,200 @@ export async function POST(request: NextRequest) {
         'subscription.active',
         'subscription.canceled',
         'subscription.revoked',
+        'checkout.created',
+        'checkout.updated',
+        'order.created',
+        'order.paid',
       ].includes(eventType)
     ) {
       return NextResponse.json({ status: 'ignored' });
     }
 
     const supabase = await createClient();
-    const polarSubId = eventData.id;
 
-    if (!polarSubId) {
-      return NextResponse.json(
-        { error: 'Missing subscription ID' },
-        { status: 400 }
-      );
+    if (eventType.startsWith('subscription.')) {
+      await handleSubscriptionEvent(supabase, eventType, eventData);
+    } else if (eventType.startsWith('checkout.')) {
+      await handleCheckoutEvent(supabase, userId, eventType, eventData);
+    } else if (eventType.startsWith('order.')) {
+      await handleOrderEvent(supabase, userId, eventType, eventData);
     }
 
-    if (eventType === 'subscription.created') {
-      const subscriptionData = {
-        user_id: eventData.customer_id || '',
-        plan: eventData.product?.name || '',
-        cycle: eventData.recurring_interval || 'monthly',
-        status: 'created',
-        start_date: new Date(eventData.created_at).toISOString(),
-        polar_subscription_id: polarSubId,
-        created_at: new Date().toISOString(),
-        updated_at: new Date().toISOString(),
-      };
-
-      await supabase.from('subscriptions').insert(subscriptionData);
-    } else if (
-      [
-        'subscription.updated',
-        'subscription.active',
-        'subscription.canceled',
-        'subscription.revoked',
-      ].includes(eventType)
-    ) {
-      const statusMap: Record<string, string> = {
-        'subscription.active': 'active',
-        'subscription.canceled': 'canceled',
-        'subscription.revoked': 'revoked',
-        'subscription.updated': eventData.status || 'active',
-      };
-
-      const updateData: any = {
-        status: statusMap[eventType],
-        updated_at: new Date().toISOString(),
-      };
-
-      if (eventData.product?.name) {
-        updateData.plan = eventData.product.name;
-      }
+    return NextResponse.json({ status: 'success' });
+  } catch (error) {
+    console.error('Webhook error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+
+async function handleSubscriptionEvent(
+  supabase: any,
+  eventType: string,
+  eventData: any
+) {
+  const polarSubId = eventData.id;
+  if (!polarSubId) return;
+
+  if (eventType === 'subscription.created') {
+    const subscriptionData = {
+      user_id: eventData.customer_id || '',
+      plan: eventData.product?.name || '',
+      cycle: eventData.recurring_interval || 'monthly',
+      status: 'created',
+      start_date: new Date(eventData.created_at).toISOString(),
+      polar_subscription_id: polarSubId,
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+    };
+
+    await supabase.from('subscriptions').insert(subscriptionData);
+  } else {
+    const statusMap: Record<string, string> = {
+      'subscription.active': 'active',
+      'subscription.canceled': 'canceled',
+      'subscription.revoked': 'revoked',
+      'subscription.updated': eventData.status || 'active',
+    };
+
+    const updateData: any = {
+      status: statusMap[eventType],
+      updated_at: new Date().toISOString(),
+    };
+
+    if (eventData.product?.name) updateData.plan = eventData.product.name;
+    if (eventData.recurring_interval)
+      updateData.cycle = eventData.recurring_interval;
+    if (eventData.canceled_at)
+      updateData.end_date = new Date(eventData.canceled_at).toISOString();
+
+    await supabase
+      .from('subscriptions')
+      .update(updateData)
+      .eq('polar_subscription_id', polarSubId);
+  }
+}
+
+async function handleCheckoutEvent(
+  supabase: any,
+  userId: string | null,
+  eventType: string,
+  eventData: any
+) {
+  const status = eventData.status;
+
+  if (eventType === 'checkout.created') {
+    console.log(
+      `Checkout created${userId ? ` for user ${userId}` : ''}:`,
+      eventData.id
+    );
+  } else if (eventType === 'checkout.updated') {
+    if (status === 'succeeded') {
+      console.log(
+        `Checkout succeeded${userId ? ` for user ${userId}` : ''}:`,
+        eventData.id
+      );
 
-      if (eventData.recurring_interval) {
-        updateData.cycle = eventData.recurring_interval;
+      if (userId) {
+        await updateProductStock(userId, eventData);
       }
+    } else if (status === 'failed') {
+      console.log(
+        `Checkout failed${userId ? ` for user ${userId}` : ''}:`,
+        eventData.id
+      );
+    }
+  }
+}
+
+async function handleOrderEvent(
+  supabase: any,
+  userId: string | null,
+  eventType: string,
+  eventData: any
+) {
+  if (eventType === 'order.created') {
+    console.log(
+      `Order created${userId ? ` for user ${userId}` : ''}:`,
+      eventData.id
+    );
+  } else if (eventType === 'order.paid') {
+    console.log(
+      `Order paid${userId ? ` for user ${userId}` : ''}:`,
+      eventData.id
+    );
 
-      if (eventData.canceled_at) {
-        updateData.end_date = new Date(eventData.canceled_at).toISOString();
+    if (userId) {
+      try {
+        const authService = new AuthService();
+        await authService.updateProfile(userId, {
+          last_successful_order: eventData.id,
+          last_order_date: new Date().toISOString(),
+        });
+
+        console.log(
+          `Updated user profile for successful order: ${eventData.id}`
+        );
+      } catch (error) {
+        console.error('Failed to update user profile:', error);
       }
+    }
+  }
+}
 
-      await supabase
-        .from('subscriptions')
-        .update(updateData)
-        .eq('polar_subscription_id', polarSubId);
+async function updateProductStock(userId: string, checkoutData: any) {
+  try {
+    const authService = new AuthService();
+    const profile = await authService.getProfileUser(userId);
+    const polarApiKey = profile.user?.polar_api_key;
+
+    if (!polarApiKey) {
+      console.error('No Polar API key found for user:', userId);
+      return;
     }
 
-    return NextResponse.json({ status: 'success' });
+    const product = checkoutData.product;
+    if (!product || !product.metadata) {
+      console.error('No product or metadata found in checkout data');
+      return;
+    }
+
+    const cartItems = JSON.parse(product.metadata.items || '[]');
+
+    for (const item of cartItems) {
+      if (!item.metadata || !item.metadata.product_id) continue;
+
+      const productId = item.metadata.product_id;
+      const quantityPurchased = item.quantity || 1;
+
+      try {
+        const currentProduct = await polarAPI.getProduct(
+          polarApiKey,
+          productId
+        );
+        const currentStock = currentProduct.metadata?.quantity || 0;
+        const newStock = Math.max(0, currentStock - quantityPurchased);
+
+        await polarAPI.updateProduct(polarApiKey, productId, {
+          metadata: {
+            ...currentProduct.metadata,
+            quantity: newStock,
+          },
+        });
+
+        console.log(
+          `Updated stock for product ${productId}: ${currentStock} -> ${newStock}`
+        );
+      } catch (error) {
+        console.error(
+          `Failed to update stock for product ${productId}:`,
+          error
+        );
+      }
+    }
   } catch (error) {
-    console.error('Webhook error:', error);
-    return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
-    );
+    console.error('Error updating product stock:', error);
   }
 }
diff --git a/frontend/src/app/api/webhooks/setup/route.ts b/frontend/src/app/api/webhooks/setup/route.ts
new file mode 100644
index 00000000..ae42e7f5
--- /dev/null
+++ b/frontend/src/app/api/webhooks/setup/route.ts
@@ -0,0 +1,183 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { AuthService } from '@/../backend/auth/service';
+import { cookies } from 'next/headers';
+
+function getBearerFromHeader(req: NextRequest): string | undefined {
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader || !authHeader.startsWith('Bearer ')) return undefined;
+  return authHeader.split(' ')[1];
+}
+
+async function getCurrentUser(req: NextRequest) {
+  const cookieStore = await cookies();
+  const cookieToken = cookieStore.get('zatobox_token')?.value;
+  const headerToken = getBearerFromHeader(req);
+  const authToken = cookieToken || headerToken;
+  if (!authToken) throw new Error('Missing authentication token');
+
+  const authService = new AuthService();
+  const user = await authService.verifyToken(authToken);
+  const profile = await authService.getProfileUser(String(user.id));
+  const polarApiKey = profile.user?.polar_api_key || '';
+  const polarOrganizationId = profile.user?.polar_organization_id || '';
+  if (!polarApiKey) throw new Error('Missing Polar API key for user');
+  if (!polarOrganizationId)
+    throw new Error('Missing Polar organization ID for user');
+
+  return {
+    userId: user.id,
+    userEmail: user.email,
+    polarApiKey,
+    polarOrganizationId,
+  };
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId, polarApiKey, polarOrganizationId } = await getCurrentUser(
+      req
+    );
+
+    const webhookUrl = `https://zatobox.io/api/webhooks/polar?user_id=${userId}`;
+    const webhookSecret = `zatobox_${userId}_${Date.now()}`;
+
+    const webhookData = {
+      url: webhookUrl,
+      secret: webhookSecret,
+      format: 'raw',
+      events: [
+        'checkout.created',
+        'checkout.updated',
+        'order.created',
+        'order.paid',
+        'subscription.created',
+        'subscription.updated',
+      ],
+      organization_id: polarOrganizationId,
+    };
+
+    const response = await fetch('https://api.polar.sh/v1/webhooks/endpoints', {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${polarApiKey}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(webhookData),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to create webhook: ${errorText}`);
+    }
+
+    const webhook = await response.json();
+
+    const authService = new AuthService();
+    await authService.updateProfile(String(userId), {
+      webhook_endpoint_id: webhook.id,
+      webhook_secret: webhookSecret,
+      webhook_url: webhookUrl,
+    });
+
+    return NextResponse.json({
+      success: true,
+      webhook: {
+        id: webhook.id,
+        url: webhookUrl,
+        events: webhookData.events,
+        organization_id: polarOrganizationId,
+      },
+      message: 'Webhook configured successfully',
+    });
+  } catch (error: any) {
+    console.error('Webhook setup error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to setup webhook' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { polarApiKey, polarOrganizationId } = await getCurrentUser(req);
+
+    const response = await fetch(
+      `https://api.polar.sh/v1/webhooks/endpoints?organization_id=${polarOrganizationId}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${polarApiKey}`,
+          Accept: 'application/json',
+        },
+      }
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to list webhooks: ${errorText}`);
+    }
+
+    const webhooks = await response.json();
+
+    return NextResponse.json({
+      success: true,
+      webhooks: webhooks.items || webhooks,
+    });
+  } catch (error: any) {
+    console.error('Webhook list error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to list webhooks' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { userId, polarApiKey } = await getCurrentUser(req);
+    const { endpointId } = await req.json();
+
+    if (!endpointId) {
+      return NextResponse.json(
+        { success: false, message: 'Endpoint ID is required' },
+        { status: 400 }
+      );
+    }
+
+    const response = await fetch(
+      `https://api.polar.sh/v1/webhooks/endpoints/${endpointId}`,
+      {
+        method: 'DELETE',
+        headers: {
+          Authorization: `Bearer ${polarApiKey}`,
+          Accept: 'application/json',
+        },
+      }
+    );
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Failed to delete webhook: ${errorText}`);
+    }
+
+    const authService = new AuthService();
+    await authService.updateProfile(String(userId), {
+      webhook_endpoint_id: null,
+      webhook_secret: null,
+      webhook_url: null,
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: 'Webhook deleted successfully',
+    });
+  } catch (error: any) {
+    console.error('Webhook delete error:', error);
+    return NextResponse.json(
+      { success: false, message: error.message || 'Failed to delete webhook' },
+      { status: 500 }
+    );
+  }
+}
diff --git a/frontend/src/app/edit-product/[id]/page.tsx b/frontend/src/app/edit-product/[id]/page.tsx
index eef3030a..77fe2e5c 100644
--- a/frontend/src/app/edit-product/[id]/page.tsx
+++ b/frontend/src/app/edit-product/[id]/page.tsx
@@ -1,16 +1,14 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { productsAPI, categoriesAPI } from '@/services/api.service';
-import { Product } from '@/types/index';
 import { useAuth } from '@/context/auth-store';
-import EditHeader from '@/components/edit-product/EditHeader';
-import ProductForm from '@/components/edit-product/ProductForm';
-import ImagesUploader from '@/components/edit-product/ImagesUploader';
-import Categorization from '@/components/edit-product/Categorization';
-import InventoryPanel from '@/components/edit-product/InventoryPanel';
-import DeleteConfirmModal from '@/components/inventory/DeleteConfirmModal';
+import { Formik, Form } from 'formik';
+import * as Yup from 'yup';
+import { FaRegFolder } from 'react-icons/fa6';
+import { IoMdArrowRoundBack } from 'react-icons/io';
+import ImagesUploader from '@/components/new-product/ImagesUploader';
 
 const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
 const MAX_FILES = 4;
@@ -19,32 +17,15 @@ const MAX_SIZE = 5 * 1024 * 1024;
 const EditProductPage: React.FC = () => {
   const router = useRouter();
   const params = useParams();
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, user } = useAuth();
   const id = (params as any)?.id as string | undefined;
 
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [formData, setFormData] = useState({
-    productType: '',
-    name: '',
-    description: '',
-    location: '',
-    weight: '',
-    price: '',
-    inventoryQuantity: '',
-    lowStockAlert: '',
-    sku: '',
-  });
-  const [originalProduct, setOriginalProduct] = useState<Product | null>(null);
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [saving, setSaving] = useState(false);
-  const [togglingStatus, setTogglingStatus] = useState(false);
-  const [status, setStatus] = useState<'active' | 'inactive' | ''>('');
+  const [error, setError] = useState<string | null>(null);
+  const [files, setFiles] = useState<File[]>([]);
   const [existingImages, setExistingImages] = useState<string[]>([]);
-  const [newFiles, setNewFiles] = useState<File[]>([]);
-  const [uploadingImages, setUploadingImages] = useState(false);
-  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [productData, setProductData] = useState<any>(null);
 
   const [categories, setCategories] = useState<{ id: string; name: string }[]>(
     []
@@ -57,8 +38,8 @@ const EditProductPage: React.FC = () => {
       setLoadingCategories(true);
       try {
         const res = await categoriesAPI.list();
-        if (active && (res as any).success)
-          setCategories((res as any).categories);
+        if (active && res.success) setCategories(res.categories);
+      } catch {
       } finally {
         if (active) setLoadingCategories(false);
       }
@@ -70,13 +51,12 @@ const EditProductPage: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    if (!id || typeof id !== 'string') {
-      setError('Invalid product id');
+    if (!id) {
+      setError('Product ID is required');
       setLoading(false);
       return;
     }
     fetchProduct();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
   const fetchProduct = async () => {
@@ -84,31 +64,19 @@ const EditProductPage: React.FC = () => {
     setError(null);
     try {
       const res = await productsAPI.getById(id!);
-      const prod = (res as any).product as Product;
-      if (!prod) {
+      if (res && res.success && res.product) {
+        const product = res.product;
+        setProductData(product);
+        setExistingImages(
+          product.medias
+            ?.filter(
+              (m: any) => m.public_url && m.mime_type?.startsWith('image/')
+            )
+            .map((m: any) => m.public_url) || []
+        );
+      } else {
         setError('Product not found');
-        setLoading(false);
-        return;
       }
-      setOriginalProduct(prod);
-      setStatus((prod.status as 'active' | 'inactive') ?? '');
-      setFormData({
-        productType: prod.product_type ?? '',
-        name: prod.name ?? '',
-        description: prod.description ?? '',
-        location: prod.localization ?? '',
-        weight: prod.weight != null ? String(prod.weight) : '',
-        price: prod.price != null ? String(prod.price) : '',
-        inventoryQuantity: prod.stock != null ? String(prod.stock) : '',
-        lowStockAlert: prod.min_stock != null ? String(prod.min_stock) : '',
-        sku: prod.sku ?? '',
-      });
-      setSelectedCategories(
-        Array.isArray((prod as any).category_ids)
-          ? (prod as any).category_ids
-          : []
-      );
-      setExistingImages((prod.images || []).slice(0, MAX_FILES));
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Error loading product');
     } finally {
@@ -116,227 +84,310 @@ const EditProductPage: React.FC = () => {
     }
   };
 
-  const handleInputChange = (field: string, value: string) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
+  const billingOptions = [
+    { label: 'One-time', value: 'once' },
+    { label: 'Monthly', value: 'month' },
+    { label: 'Yearly', value: 'year' },
+  ];
 
-  const handleCategoryToggle = (category: string) => {
-    setSelectedCategories((prev) =>
-      prev.includes(category)
-        ? prev.filter((c) => c !== category)
-        : [...prev, category]
-    );
+  const handleAddFiles = (f: FileList | null) => {
+    if (!f) return;
+    let current = [...files];
+    for (const file of Array.from(f)) {
+      if (current.length >= MAX_FILES) break;
+      if (!ALLOWED_TYPES.includes(file.type)) continue;
+      if (file.size > MAX_SIZE) continue;
+      current.push(file);
+    }
+    setFiles(current.slice(0, MAX_FILES));
   };
 
-  const handleSave = async () => {
-    if (!id) return;
+  const handleRemoveFile = (index: number) =>
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+
+  const onSubmit = async (values: any) => {
     setSaving(true);
     setError(null);
     if (!isAuthenticated) {
-      setError('You must be logged in to update products');
+      setError('You must log in to update products');
       setSaving(false);
       return;
     }
 
-    if (!formData.name || !formData.price) {
-      setError('Name and price are required');
-      setSaving(false);
-      return;
-    }
+    try {
+      const prices = [
+        {
+          amount_type: 'fixed',
+          price_currency: 'usd',
+          price_amount: Math.round(Number(values.price) * 100),
+          type: values.billingInterval === 'once' ? 'one_time' : 'recurring',
+          recurring_interval:
+            values.billingInterval === 'once'
+              ? undefined
+              : values.billingInterval,
+          legacy: false,
+          is_archived: false,
+        },
+      ];
 
-    const priceNum = Number(formData.price);
-    if (!Number.isFinite(priceNum) || priceNum <= 0) {
-      setError('Price must be greater than 0');
-      setSaving(false);
-      return;
-    }
+      const metadata: any = { quantity: Number(values.stock || 0) };
+      if (values.category && String(values.category).trim() !== '')
+        metadata.category = String(values.category).trim();
+      if (values.subcategory && String(values.subcategory).trim() !== '')
+        metadata.subcategory = String(values.subcategory).trim();
+      if (values.tags && String(values.tags).trim() !== '') {
+        const arr = String(values.tags)
+          .split(',')
+          .map((t) => t.trim())
+          .filter((t) => t.length > 0);
+        if (arr.length > 0) metadata.tags = arr.join(',');
+      }
 
-    const stockNum = parseInt(formData.inventoryQuantity || '0', 10);
-    if (!Number.isFinite(stockNum) || Number.isNaN(stockNum) || stockNum < 0) {
-      setError('Inventory quantity must be 0 or more');
-      setSaving(false);
-      return;
-    }
-    try {
       const payload: Record<string, unknown> = {
-        name: formData.name,
-        description: formData.description || null,
-        price: priceNum,
-        stock: stockNum,
-        product_type: formData.productType || undefined,
-        weight: formData.weight ? Number(formData.weight) : undefined,
-        sku: formData.sku || undefined,
-        min_stock: formData.lowStockAlert
-          ? Number(formData.lowStockAlert)
-          : undefined,
-        category_ids:
-          selectedCategories.length > 0 ? selectedCategories : undefined,
+        name: values.name,
+        description:
+          values.description && values.description.trim() !== ''
+            ? values.description
+            : undefined,
+        recurring_interval:
+          values.billingInterval === 'once' ? null : values.billingInterval,
+        prices,
+        metadata,
       };
 
-      // eliminar claves undefined para no provocar 422
-      Object.keys(payload).forEach((k) => {
-        if (payload[k] === undefined) delete payload[k];
-      });
-
-      await productsAPI.update(id, payload as any);
-      if (newFiles.length > 0) {
-        await uploadNewImages();
-      }
+      await productsAPI.update(id!, payload as any);
       router.push('/inventory');
-    } catch (err) {
+    } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'Error updating product');
     } finally {
       setSaving(false);
     }
   };
 
-  const uploadNewImages = async () => {
-    if (!id || newFiles.length === 0) return;
-    setUploadingImages(true);
-    try {
-      await productsAPI.addImages(id, newFiles);
-      setNewFiles([]);
-      await fetchProduct();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Error uploading images');
-    } finally {
-      setUploadingImages(false);
-    }
-  };
-
-  const handleDelete = () => {
-    setDeleteConfirmOpen(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!id) return;
-    try {
-      setIsDeleting(true);
-      await productsAPI.delete(id);
-      router.push('/inventory');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Error deleting product');
-    } finally {
-      setIsDeleting(false);
-      setDeleteConfirmOpen(false);
-    }
-  };
+  const validationSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    price: Yup.number()
+      .typeError('Price must be a number')
+      .positive('Price must be greater than 0')
+      .required('Price is required'),
+    stock: Yup.number()
+      .typeError('Stock must be a number')
+      .integer('Stock must be an integer')
+      .min(0, 'Stock must be 0 or more')
+      .required('Stock is required'),
+    billingInterval: Yup.string()
+      .oneOf(['once', 'month', 'year'])
+      .required('Billing interval is required'),
+  });
 
-  const handleDeleteCancel = () => {
-    setDeleteConfirmOpen(false);
-    setIsDeleting(false);
-  };
+  if (loading) {
+    return <div className='min-h-screen bg-bg-main'>Loading product...</div>;
+  }
 
-  const handleToggleStatus = async () => {
-    if (!id) return;
-    setTogglingStatus(true);
-    try {
-      const newStatus = status === 'active' ? 'inactive' : 'active';
-      await productsAPI.update(id, { status: newStatus } as any);
-      setStatus(newStatus as 'active' | 'inactive');
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Error toggling status');
-    } finally {
-      setTogglingStatus(false);
-    }
-  };
+  if (!productData) {
+    return <div className='min-h-screen bg-bg-main'>Product not found</div>;
+  }
 
-  const handleAddFiles = (files: FileList | null) => {
-    if (!files) return;
-    let current = [...newFiles];
-    for (const f of Array.from(files)) {
-      const total = existingImages.length + current.length;
-      if (total >= MAX_FILES) break;
-      if (!ALLOWED_TYPES.includes(f.type)) continue;
-      if (f.size > MAX_SIZE) continue;
-      current.push(f);
-    }
-    setNewFiles(current.slice(0, MAX_FILES - existingImages.length));
-  };
-  const handleRemoveExisting = async (index: number) => {
-    if (!id) return;
-    try {
-      await productsAPI.deleteImage(id, index);
-      setExistingImages((prev) => prev.filter((_, i) => i !== index));
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Error deleting image');
-    }
-  };
-  const handleRemoveNew = (index: number) => {
-    setNewFiles((prev) => prev.filter((_, i) => i !== index));
-  };
-  const handleReplaceAll = async (files: FileList | null) => {
-    if (!id || !files) return;
-    try {
-      const valid = Array.from(files)
-        .filter((f) => ALLOWED_TYPES.includes(f.type) && f.size <= MAX_SIZE)
-        .slice(0, MAX_FILES);
-      if (valid.length === 0) return;
-      await productsAPI.updateImages(id, valid as any);
-      setNewFiles([]);
-      await fetchProduct();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : 'Error replacing images');
-    }
-  };
+  const primaryPrice = productData.prices?.[0];
+  const currentPrice = primaryPrice ? primaryPrice.price_amount / 100 : 0;
+  const currentInterval = productData.recurring_interval || 'once';
+  const currentStock = productData.metadata?.quantity || 0;
+  const currentCategory = productData.metadata?.category || '';
+  const currentSubcategory = productData.metadata?.subcategory || '';
+  const currentTags = productData.metadata?.tags || '';
 
-  if (loading)
-    return <div className='min-h-screen  bg-bg-main'>Loading product...</div>;
+  const initialValues = {
+    name: productData.name || '',
+    description: productData.description || '',
+    price: String(currentPrice),
+    stock: String(currentStock),
+    billingInterval: currentInterval,
+    category: currentCategory,
+    subcategory: currentSubcategory,
+    tags: currentTags,
+  } as any;
 
   return (
-    <div className='min-h-screen  bg-bg-main'>
-      <EditHeader
-        onBack={() => router.push('/inventory')}
-        onDelete={handleDelete}
-        onToggleStatus={handleToggleStatus}
-        onSave={handleSave}
-        status={status}
-        saving={saving || uploadingImages}
-        togglingStatus={togglingStatus}
-      />
-
-      <div className='px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8'>
-        {error && (
-          <div className='p-2 mb-4 text-sm text-white bg-red-600 rounded'>
-            {error}
-          </div>
+    <div className='min-h-screen bg-bg-main'>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={onSubmit}
+      >
+        {(formik) => (
+          <>
+            <div className='flex flex-col sm:flex-row items-center justify-between h-auto sm:h-16 px-4 sm:px-6 py-4 sm:py-0 border-b border-[#CBD5E1] bg-white gap-4 sm:gap-0'>
+              <div className='flex items-center w-full sm:w-auto gap-2'>
+                <button
+                  onClick={() => router.push('/inventory')}
+                  className='p-2 transition-colors rounded-full hover:bg-gray-50 flex-shrink-0'
+                >
+                  <IoMdArrowRoundBack className='w-6 h-6 text-[#F88612]' />
+                </button>
+                <h1 className='text-xl font-semibold text-[#F88612] ml-2 sm:ml-4 md:ml-0'>
+                  Edit Product
+                </h1>
+              </div>
+              <div className='flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-3 w-full sm:w-auto'>
+                <div className='w-full sm:w-[158px] h-[40px] flex items-center justify-center bg-white rounded-lg border border-[#CBD5E1] gap-2'>
+                  <span className='text-black font-medium'>Status:</span>
+                  <span className='text-[#F88612] font-medium'>Active</span>
+                </div>
+                {error && <div className='text-sm text-red-500'>{error}</div>}
+                <button
+                  type='button'
+                  onClick={() => formik.handleSubmit()}
+                  disabled={saving}
+                  className={`bg-[#F88612] hover:bg-[#D9740F] text-white font-semibold rounded-lg transition-colors flex items-center justify-center space-x-1 w-full sm:w-[82px] h-[40px] ${
+                    saving ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {saving ? (
+                    <div className='w-4 h-4 border-b-2 border-white rounded-full animate-spin'></div>
+                  ) : (
+                    <>
+                      <FaRegFolder className='w-4 h-4 self-center' />
+                      <span>Save</span>
+                    </>
+                  )}
+                </button>
+              </div>
+            </div>
+            <div className='px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8'>
+              <Form>
+                <div className='grid grid-cols-1 gap-8 lg:grid-cols-2'>
+                  <div className='space-y-6'>
+                    <ImagesUploader
+                      files={files}
+                      onAddFiles={handleAddFiles}
+                      onRemove={handleRemoveFile}
+                    />
+                    <div className='p-6 border rounded-lg shadow-sm bg-white border-[#CBD5E1]'>
+                      <div className='space-y-4'>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Description
+                          </label>
+                          <textarea
+                            name='description'
+                            value={formik.values.description}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Category
+                          </label>
+                          <input
+                            name='category'
+                            value={formik.values.category}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Subcategory
+                          </label>
+                          <input
+                            name='subcategory'
+                            value={formik.values.subcategory}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Tags (comma separated)
+                          </label>
+                          <input
+                            name='tags'
+                            value={formik.values.tags}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className='space-y-6'>
+                    <div className='p-6 border rounded-lg shadow-sm bg-white border-[#CBD5E1]'>
+                      <div className='space-y-4'>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Name *
+                          </label>
+                          <input
+                            name='name'
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.name as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Billing *
+                          </label>
+                          <select
+                            name='billingInterval'
+                            value={formik.values.billingInterval}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          >
+                            {billingOptions.map((opt) => (
+                              <option key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </option>
+                            ))}
+                          </select>
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.billingInterval as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Price *
+                          </label>
+                          <input
+                            name='price'
+                            type='number'
+                            step='0.01'
+                            value={formik.values.price}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.price as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Stock *
+                          </label>
+                          <input
+                            name='stock'
+                            type='number'
+                            value={formik.values.stock}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.stock as any}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </Form>
+            </div>
+          </>
         )}
-        <div className='grid grid-cols-1 gap-8 lg:grid-cols-2'>
-          <div className='space-y-6'>
-            <ImagesUploader
-              existingImages={existingImages}
-              newFiles={newFiles}
-              onAddFiles={handleAddFiles}
-              onRemoveExisting={handleRemoveExisting}
-              onRemoveNew={handleRemoveNew}
-              onReplaceAll={handleReplaceAll}
-            />
-            <ProductForm
-              formData={formData as any}
-              onChange={handleInputChange}
-            />
-            <Categorization
-              categories={categories}
-              selectedCategories={selectedCategories}
-              onToggle={handleCategoryToggle}
-              loading={loadingCategories}
-            />
-          </div>
-
-          <div className='space-y-6'>
-            <InventoryPanel
-              formData={formData as any}
-              onChange={handleInputChange}
-            />
-          </div>
-        </div>
-      </div>
-      <DeleteConfirmModal
-        open={deleteConfirmOpen}
-        onCancel={handleDeleteCancel}
-        onConfirm={handleDeleteConfirm}
-        loading={isDeleting}
-      />
+      </Formik>
     </div>
   );
 };
diff --git a/frontend/src/app/home/page.tsx b/frontend/src/app/home/page.tsx
index 3148ac92..66c5eb67 100644
--- a/frontend/src/app/home/page.tsx
+++ b/frontend/src/app/home/page.tsx
@@ -5,14 +5,9 @@ import HomeHeader from '@/components/home/HomeHeader';
 import ProductGrid from '@/components/home/ProductGrid';
 import HomeStats from '@/components/home/HomeStats';
 import SalesDrawer from '@/components/SalesDrawer';
-import PaymentScreen from '@/components/PaymentScreen';
-import PaymentSuccessScreen from '@/components/PaymentSuccessScreen';
-import {
-  getActiveProducts,
-  salesAPI,
-  categoriesAPI,
-} from '@/services/api.service';
+import { getActiveProducts, salesAPI } from '@/services/api.service';
 import type { Product } from '@/types/index';
+import { PolarProduct } from '@/types/polar';
 import { useAuth } from '@/context/auth-store';
 
 interface HomePageProps {
@@ -23,6 +18,7 @@ interface HomePageProps {
 const HomePage: React.FC<HomePageProps> = ({
   searchTerm: externalSearchTerm = '',
 }) => {
+  const { user } = useAuth();
   const { isAuthenticated } = useAuth();
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const [isPaymentOpen, setIsPaymentOpen] = useState(false);
@@ -34,41 +30,87 @@ const HomePage: React.FC<HomePageProps> = ({
   const [products, setProducts] = useState<Product[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [categories, setCategories] = useState<{ id: string; name: string }[]>(
-    []
-  );
 
   // Shopping cart
   interface CartItem {
     id: string;
+    polarProductId: string;
     name: string;
     price: number;
+    priceId: string;
     stock: number;
     quantity: number;
+    recurring_interval?: string | null;
+    productData: any;
   }
   const [cartItems, setCartItems] = useState<CartItem[]>([]);
 
   // Use local search term (takes priority over external)
   const activeSearchTerm = localSearchTerm || externalSearchTerm;
 
+  const mapPolarProductToProduct = (p: any): Product => {
+    const prices = Array.isArray(p.prices) ? p.prices : [];
+    let price = 0;
+    if (prices.length > 0) {
+      const pr = prices[0] || {};
+      const amt = pr.price_amount ?? pr.priceAmount;
+      const amtType = pr.amount_type ?? pr.amountType;
+      if (typeof amt === 'number') {
+        price = amtType === 'free' ? 0 : amt / 100;
+      }
+    }
+    const imageUrls = Array.isArray(p.medias)
+      ? p.medias
+          .filter(
+            (m: any) =>
+              m &&
+              typeof m.public_url === 'string' &&
+              m.mime_type &&
+              m.mime_type.startsWith('image/')
+          )
+          .map((m: any) => m.public_url)
+      : [];
+    const product = {
+      id: String(p.id),
+      name: p.name || 'Unnamed Product',
+      description: p.description || '',
+      price,
+      stock: p.metadata?.quantity || 0,
+      min_stock: 0,
+      category_ids: [],
+      images: imageUrls,
+      status: 'active' as any,
+      weight: 0,
+      sku: String(p.id),
+      creator_id: '',
+      unit: 'Per item' as any,
+      product_type: 'Physical Product' as any,
+      localization: '',
+      created_at: p.created_at || p.createdAt || new Date().toISOString(),
+      last_updated:
+        p.modified_at ||
+        p.modifiedAt ||
+        p.updatedAt ||
+        new Date().toISOString(),
+    } as Product;
+    (product as any).prices = prices;
+    (product as any).recurring_interval = p.recurring_interval;
+    (product as any).metadata = p.metadata;
+    return product;
+  };
+
   // Fetch products from backend
   useEffect(() => {
     const fetchProducts = async () => {
-      if (!isAuthenticated) {
-        setLoading(false);
-        return;
-      }
-
       try {
         setLoading(true);
         const response = await getActiveProducts();
         if (response && response.success && Array.isArray(response.products)) {
-          const availableProducts = response.products.map((product: any) => {
-            return {
-              ...product,
-              stock: Number(product.stock ?? 0),
-            } as Product;
-          });
+          const rows: any[] = response.products;
+          const filtered = rows.filter(
+            (p: any) => !(p.is_archived ?? p.is_archived)
+          );
+          const availableProducts = filtered.map(mapPolarProductToProduct);
           setProducts(availableProducts);
         } else {
           setProducts([]);
@@ -82,34 +124,11 @@ const HomePage: React.FC<HomePageProps> = ({
     };
 
     fetchProducts();
-  }, [isAuthenticated]);
-
-  // Fetch categories
-  useEffect(() => {
-    const loadCategories = async () => {
-      try {
-        const res = await categoriesAPI.list();
-        if ((res as any).success) setCategories((res as any).categories);
-      } catch {}
-    };
-    loadCategories();
   }, []);
 
-  // Map category ids to names
-  const categoryIdMap: Record<string, string> = useMemo(
-    () => Object.fromEntries(categories.map((c) => [c.id, c.name])),
-    [categories]
-  );
-
   const enrichedProducts = useMemo(() => {
-    return products.map((p: any) => {
-      const ids = Array.isArray(p.category_ids) ? p.category_ids : [];
-      const names = ids.map((id: string) => categoryIdMap[id]).filter(Boolean);
-      return { ...p, category_names: names } as Product & {
-        category_names?: string[];
-      };
-    });
-  }, [products, categoryIdMap]);
+    return products;
+  }, [products]);
 
   // Filter products based on search term
   const filteredProducts = useMemo(() => {
@@ -123,28 +142,33 @@ const HomePage: React.FC<HomePageProps> = ({
   }, [activeSearchTerm, enrichedProducts]);
 
   // When clicking on a product, add it to cart
-  const handleProductClick = (product: Product) => {
+  const handleProductClick = (productUntyped: Product | PolarProduct) => {
+    const product = productUntyped as Product;
     setSelectedProduct(product);
     setIsDrawerOpen(true);
     setCartItems((prevCart) => {
       const pid = String(product.id);
       const existing = prevCart.find((item) => item.id === pid);
       if (existing) {
-        // Add quantity, respecting stock
         return prevCart.map((item) =>
           item.id === pid
             ? { ...item, quantity: Math.min(item.quantity + 1, product.stock) }
             : item
         );
       } else {
+        const primaryPrice = (product as any).prices?.[0];
         return [
           ...prevCart,
           {
             id: pid,
+            polarProductId: pid,
             name: product.name,
             price: product.price,
+            priceId: primaryPrice?.id || '',
             stock: product.stock,
             quantity: 1,
+            recurring_interval: (product as any).recurring_interval || null,
+            productData: product,
           },
         ];
       }
@@ -155,75 +179,42 @@ const HomePage: React.FC<HomePageProps> = ({
     setIsDrawerOpen(false);
   };
 
-  const handleNavigateToPayment = (total: number) => {
-    setPaymentTotal(total);
-    setIsPaymentOpen(true);
-  };
-
-  const handleBackFromPayment = () => {
-    setIsPaymentOpen(false);
-  };
+  const handleNavigateToPayment = async (total: number) => {
+    if (!user?.id) {
+      alert('Please log in to checkout');
+      return;
+    }
 
-  const handlePaymentSuccess = async (method: string) => {
     try {
-      // Prepare sale data
-      const saleData: any = {
+      const { checkoutPolarCart } = await import('@/services/payments-service');
+
+      const cartData = {
+        userId: user.id,
         items: cartItems.map((item) => ({
-          product_id: item.id,
+          polarProductId: item.polarProductId,
+          priceId: item.priceId,
           quantity: item.quantity,
-          price: item.price,
+          productData: item.productData,
         })),
-        total: paymentTotal,
-        payment_method: method,
+        successUrl: `${window.location.origin}/success`,
+        metadata: {
+          total_amount: total.toString(),
+        },
       };
 
-      // Send sale to backend
-      const saleResponse: any = await salesAPI.create(saleData);
+      const response = await checkoutPolarCart(cartData);
 
-      if (saleResponse && saleResponse.success) {
-        console.log('Sale created successfully:', saleResponse);
-
-        // Update local inventory immediately
-        setProducts((prevProducts) =>
-          prevProducts.map((product) => {
-            const pid = String(product.id);
-            const cartItem = cartItems.find((item) => item.id === pid);
-            if (cartItem) {
-              return {
-                ...product,
-                stock: Math.max(0, product.stock - cartItem.quantity),
-              };
-            }
-            return product;
-          })
-        );
-
-        // Show success message
-        setPaymentMethod(method);
-        setIsPaymentOpen(false);
-        setIsSuccessOpen(true);
+      if (response.success && response.checkout_url) {
+        window.location.href = response.checkout_url;
       } else {
-        console.error('Error creating sale:', saleResponse);
-        alert('Error processing sale. Please try again.');
+        throw new Error(response.message || 'Failed to create checkout');
       }
     } catch (error) {
-      console.error('Error processing sale:', error);
-      alert('Error processing sale. Please try again.');
+      console.error('Checkout error:', error);
+      alert('Failed to create checkout. Please try again.');
     }
   };
 
-  const handleNewOrder = () => {
-    // Reset all states to start fresh
-    setIsSuccessOpen(false);
-    setIsDrawerOpen(false);
-    setIsPaymentOpen(false);
-    setSelectedProduct(null);
-    setPaymentTotal(0);
-    setPaymentMethod('');
-    // Reset cart items to initial state
-    setCartItems([]);
-  };
-
   const handleLocalSearchChange = (value: string) => {
     setLocalSearchTerm(value);
   };
@@ -234,11 +225,18 @@ const HomePage: React.FC<HomePageProps> = ({
     change: number
   ) => {
     setCartItems((prev) => {
-      const updatedItems = prev.map((item) =>
-        item.id === String(productId)
-          ? { ...item, quantity: Math.max(0, item.quantity + change) }
-          : item
-      );
+      const updatedItems = prev.map((item) => {
+        if (item.id === String(productId)) {
+          const actualStock =
+            item.productData?.metadata?.quantity || item.stock;
+          const newQuantity = Math.max(
+            0,
+            Math.min(item.quantity + change, actualStock)
+          );
+          return { ...item, quantity: newQuantity };
+        }
+        return item;
+      });
       return updatedItems.filter((item) => item.quantity > 0);
     });
   };
@@ -261,14 +259,12 @@ const HomePage: React.FC<HomePageProps> = ({
       setLoading(true);
       setError(null);
       const response = await getActiveProducts();
-
       if (response && response.success && Array.isArray(response.products)) {
-        const availableProducts = response.products.map((product: any) => {
-          return {
-            ...product,
-            stock: Number(product.stock ?? 0),
-          } as Product;
-        });
+        const rows: any[] = response.products;
+        const filtered = rows.filter(
+          (p: any) => !(p.is_archived ?? p.is_archived)
+        );
+        const availableProducts = filtered.map(mapPolarProductToProduct);
         setProducts(availableProducts);
       } else {
         setProducts([]);
@@ -365,29 +361,14 @@ const HomePage: React.FC<HomePageProps> = ({
       </div>
 
       <SalesDrawer
-        isOpen={isDrawerOpen && !isPaymentOpen && !isSuccessOpen}
+        isOpen={isDrawerOpen}
         onClose={handleCloseDrawer}
         onNavigateToPayment={handleNavigateToPayment}
-        cartItems={cartItems.map((ci) => ({ ...ci, id: Number(ci.id) })) as any}
+        cartItems={cartItems as any}
         updateCartItemQuantity={updateCartItemQuantity}
         removeCartItem={removeFromCart}
         clearCart={clearCart}
       />
-
-      <PaymentScreen
-        isOpen={isPaymentOpen}
-        onBack={handleBackFromPayment}
-        onPaymentSuccess={handlePaymentSuccess}
-        cartAmount={paymentTotal}
-      />
-
-      <PaymentSuccessScreen
-        isOpen={isSuccessOpen}
-        onNewOrder={handleNewOrder}
-        paymentMethod={paymentMethod}
-        total={paymentTotal}
-        items={cartItems.map((ci) => ({ ...ci, id: Number(ci.id) })) as any}
-      />
     </>
   );
 };
diff --git a/frontend/src/app/inventory/page.tsx b/frontend/src/app/inventory/page.tsx
index 60942a08..11fa4c58 100644
--- a/frontend/src/app/inventory/page.tsx
+++ b/frontend/src/app/inventory/page.tsx
@@ -3,7 +3,11 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { Package } from 'lucide-react';
-import { productsAPI, categoriesAPI } from '@/services/api.service';
+import {
+  productsAPI,
+  categoriesAPI,
+  getActiveProducts,
+} from '@/services/api.service';
 import { Product } from '@/types/index';
 import { useAuth } from '@/context/auth-store';
 import InventoryHeader from '@/components/inventory/InventoryHeader';
@@ -27,6 +31,52 @@ const InventoryPage: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const mapPolarProductToProduct = (p: any): Product => {
+    const prices = Array.isArray(p.prices) ? p.prices : [];
+    let price = 0;
+    if (prices.length > 0) {
+      const pr = prices[0] || {};
+      const amt = pr.price_amount ?? pr.priceAmount;
+      const amtType = pr.amount_type ?? pr.amountType;
+      if (typeof amt === 'number') {
+        price = amtType === 'free' ? 0 : amt / 100;
+      }
+    }
+    const imageUrls = Array.isArray(p.medias)
+      ? p.medias
+          .filter(
+            (m: any) =>
+              m &&
+              typeof m.public_url === 'string' &&
+              m.mime_type &&
+              m.mime_type.startsWith('image/')
+          )
+          .map((m: any) => m.public_url)
+      : [];
+    return {
+      id: String(p.id),
+      name: p.name || 'Unnamed Product',
+      description: p.description || '',
+      price,
+      stock: p.metadata?.quantity || 0,
+      min_stock: 0,
+      category_ids: [],
+      images: imageUrls,
+      status: 'active' as any,
+      weight: 0,
+      sku: String(p.id),
+      creator_id: '',
+      unit: 'Per item' as any,
+      product_type: 'Physical Product' as any,
+      localization: '',
+      created_at: p.created_at || p.createdAt || new Date().toISOString(),
+      last_updated:
+        p.modified_at ||
+        p.modifiedAt ||
+        p.updatedAt ||
+        new Date().toISOString(),
+    } as Product;
+  };
 
   useEffect(() => {
     const fetchInventory = async () => {
@@ -42,15 +92,21 @@ const InventoryPage: React.FC = () => {
 
       try {
         setLoading(true);
-        const response = await productsAPI.list();
-        if (!response || !response.products) {
+        const response = await getActiveProducts();
+        if (response && response.success && Array.isArray(response.products)) {
+          const rows: any[] = response.products;
+          const filtered = rows.filter(
+            (p: any) => !(p.is_archived ?? p.is_archived)
+          );
+          const availableProducts = filtered.map(mapPolarProductToProduct);
+          setInventoryItems(availableProducts);
+          setError(null);
+        } else {
+          setInventoryItems([]);
           setError('Error loading inventory');
-          return;
         }
-
-        setInventoryItems(response.products);
-        setError(null);
       } catch (err) {
+        setInventoryItems([]);
         setError('Error loading inventory');
       } finally {
         setLoading(false);
diff --git a/frontend/src/app/new-product/page.tsx b/frontend/src/app/new-product/page.tsx
index 33bd5efd..a6930d15 100644
--- a/frontend/src/app/new-product/page.tsx
+++ b/frontend/src/app/new-product/page.tsx
@@ -4,12 +4,10 @@ import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import Header from '@/components/new-product/Header';
 import ImagesUploader from '@/components/new-product/ImagesUploader';
-import NewProductForm from '@/components/new-product/NewProductForm';
+import { productsAPI } from '@/services/api.service';
 import { useAuth } from '@/context/auth-store';
-import { productsAPI, categoriesAPI } from '@/services/api.service';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
-import ProductInfoForm from '@/components/new-product/ProductInfoForm';
 
 const ALLOWED_TYPES = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'];
 const MAX_FILES = 4;
@@ -17,45 +15,15 @@ const MAX_SIZE = 5 * 1024 * 1024;
 
 const NewProductPage: React.FC = () => {
   const router = useRouter();
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated, user } = useAuth();
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [files, setFiles] = useState<File[]>([]);
 
-  const [categories, setCategories] = useState<{ id: string; name: string }[]>(
-    []
-  );
-  const [loadingCategories, setLoadingCategories] = useState(false);
-
-  useEffect(() => {
-    let active = true;
-    const load = async () => {
-      setLoadingCategories(true);
-      try {
-        const res = await categoriesAPI.list();
-        if (active && res.success) setCategories(res.categories);
-      } catch {
-      } finally {
-        if (active) setLoadingCategories(false);
-      }
-    };
-    load();
-    return () => {
-      active = false;
-    };
-  }, []);
-
-  const unitOptions = [
-    { label: 'Per item', value: 'Per item' },
-    { label: 'Per kilogram', value: 'Per kilogram' },
-    { label: 'Per liter', value: 'Per liter' },
-    { label: 'Per meter', value: 'Per meter' },
-  ];
-
-  const productTypeOptions = [
-    { label: 'Physical Product', value: 'Physical Product' },
-    { label: 'Service', value: 'Service' },
-    { label: 'Digital', value: 'Digital' },
+  const billingOptions = [
+    { label: 'One-time', value: 'once' },
+    { label: 'Monthly', value: 'month' },
+    { label: 'Yearly', value: 'year' },
   ];
 
   const handleAddFiles = (f: FileList | null) => {
@@ -83,47 +51,60 @@ const NewProductPage: React.FC = () => {
     }
 
     try {
+      if (!user?.polar_organization_id) {
+        setError('Polar organization ID is required in profile');
+        setSaving(false);
+        return;
+      }
+
+      const organizationId = user.polar_organization_id;
+      const prices = [
+        {
+          amount_type: 'fixed',
+          price_currency: 'usd',
+          price_amount: Math.round(Number(values.price) * 100),
+          type: values.billingInterval === 'once' ? 'one_time' : 'recurring',
+          recurring_interval:
+            values.billingInterval === 'once'
+              ? undefined
+              : values.billingInterval,
+          legacy: false,
+          is_archived: false,
+        },
+      ];
+
+      const metadata: any = { quantity: Number(values.stock || 0) };
+      if (values.category && String(values.category).trim() !== '')
+        metadata.category = String(values.category).trim();
+      if (values.subcategory && String(values.subcategory).trim() !== '')
+        metadata.subcategory = String(values.subcategory).trim();
+      if (values.tags && String(values.tags).trim() !== '') {
+        const arr = String(values.tags)
+          .split(',')
+          .map((t) => t.trim())
+          .filter((t) => t.length > 0);
+        if (arr.length > 0) metadata.tags = arr.join(',');
+      }
+
       const payload: Record<string, unknown> = {
         name: values.name,
         description:
           values.description && values.description.trim() !== ''
             ? values.description
-            : '',
-        price: Number(values.price),
-        stock: Number(values.inventoryQuantity),
-        unit: values.unit,
-        product_type: values.productType || 'Physical Product',
-        status: 'active',
-        sku:
-          values.sku && values.sku.trim() !== ''
-            ? values.sku
-            : 'SKU-' + Date.now(),
-        min_stock: values.lowStockAlert ? Number(values.lowStockAlert) : 0,
-        category_ids: Array.isArray(values.category_ids)
-          ? values.category_ids
-          : [],
-        weight: values.weight ? Number(values.weight) : undefined,
-        localization:
-          values.location && values.location.trim() !== ''
-            ? values.location
             : undefined,
+        organization_id: organizationId,
+        recurring_interval:
+          values.billingInterval === 'once' ? null : values.billingInterval,
+        prices,
+        metadata,
       };
 
-      Object.keys(payload).forEach((k) => {
-        if (payload[k] === undefined) delete payload[k];
-      });
-
-      const res = await productsAPI.create(payload as any);
-      const productObj = (res as any).product ? (res as any).product : res;
-      const newId = productObj?.id;
-      if (!newId) {
-        setError('No se pudo obtener el ID del producto');
-        setSaving(false);
-        return;
-      }
+      const body: any = { ...payload };
       if (files.length > 0) {
-        await productsAPI.addImages(newId, files);
+        body.images = files.slice(0, 1);
       }
+
+      await productsAPI.create(body as any, organizationId);
       router.push('/inventory');
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : 'Error creating product');
@@ -134,35 +115,30 @@ const NewProductPage: React.FC = () => {
 
   const validationSchema = Yup.object().shape({
     name: Yup.string().required('Name is required'),
-    unit: Yup.string().required('Unit is required'),
     price: Yup.number()
       .typeError('Price must be a number')
       .positive('Price must be greater than 0')
       .required('Price is required'),
-    inventoryQuantity: Yup.number()
-      .typeError('Inventory must be a number')
-      .integer('Inventory must be an integer')
-      .min(0, 'Inventory must be 0 or more')
-      .required('Inventory is required'),
-    category_ids: Yup.array()
-      .of(Yup.string().uuid('Invalid id'))
-      .min(1, 'At least one category')
-      .required('At least one category'),
+    stock: Yup.number()
+      .typeError('Stock must be a number')
+      .integer('Stock must be an integer')
+      .min(0, 'Stock must be 0 or more')
+      .required('Stock is required'),
+    billingInterval: Yup.string()
+      .oneOf(['once', 'month', 'year'])
+      .required('Billing interval is required'),
   });
 
   const initialValues = {
-    productType: 'Physical Product',
     name: '',
     description: '',
-    location: '',
-    unit: 'Per item',
-    weight: '',
     price: '',
-    inventoryQuantity: '',
-    lowStockAlert: '',
-    sku: '',
-    category_ids: [],
-  };
+    stock: '',
+    billingInterval: 'once',
+    category: '',
+    subcategory: '',
+    tags: '',
+  } as any;
 
   return (
     <div className='min-h-screen bg-bg-main'>
@@ -188,13 +164,126 @@ const NewProductPage: React.FC = () => {
                       onAddFiles={handleAddFiles}
                       onRemove={handleRemoveFile}
                     />
-                    <ProductInfoForm formik={formik} categories={categories} />
+                    <div className='p-6 border rounded-lg shadow-sm bg-white border-[#CBD5E1]'>
+                      <div className='space-y-4'>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Description
+                          </label>
+                          <textarea
+                            name='description'
+                            value={formik.values.description}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Category
+                          </label>
+                          <input
+                            name='category'
+                            value={formik.values.category}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Subcategory
+                          </label>
+                          <input
+                            name='subcategory'
+                            value={formik.values.subcategory}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Tags (comma separated)
+                          </label>
+                          <input
+                            name='tags'
+                            value={formik.values.tags}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className='space-y-6'>
+                    <div className='p-6 border rounded-lg shadow-sm bg-white border-[#CBD5E1]'>
+                      <div className='space-y-4'>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Name *
+                          </label>
+                          <input
+                            name='name'
+                            value={formik.values.name}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.name as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Billing *
+                          </label>
+                          <select
+                            name='billingInterval'
+                            value={formik.values.billingInterval}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          >
+                            {billingOptions.map((opt) => (
+                              <option key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </option>
+                            ))}
+                          </select>
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.billingInterval as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Price *
+                          </label>
+                          <input
+                            name='price'
+                            type='number'
+                            step='0.01'
+                            value={formik.values.price}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.price as any}
+                          </div>
+                        </div>
+                        <div>
+                          <label className='block mb-2 text-sm font-medium text-black'>
+                            Initial Stock *
+                          </label>
+                          <input
+                            name='stock'
+                            type='number'
+                            value={formik.values.stock}
+                            onChange={formik.handleChange}
+                            className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent'
+                          />
+                          <div className='mt-1 text-xs text-red-500'>
+                            {formik.errors.stock as any}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                  <NewProductForm
-                    formik={formik}
-                    unitOptions={unitOptions}
-                    productTypeOptions={productTypeOptions}
-                  />
                 </div>
               </Form>
             </div>
diff --git a/frontend/src/app/ocr-result/page.tsx b/frontend/src/app/ocr-result/page.tsx
index 15ef43dc..93938eb6 100644
--- a/frontend/src/app/ocr-result/page.tsx
+++ b/frontend/src/app/ocr-result/page.tsx
@@ -70,7 +70,7 @@ const OCRResultPage: React.FC = () => {
     setIsAddingToInventory(true);
     setError('');
     try {
-      const toCreate: CreateProductRequest[] = (result.line_items || [])
+      const polarProducts = (result.line_items || [])
         .map((it) => {
           const name =
             (it.name || it.description || '').trim().substring(0, 50) ||
@@ -83,42 +83,35 @@ const OCRResultPage: React.FC = () => {
             parseFloat(String(it.unit_price).replace(/[^\d.-]/g, '')) || 0;
           const stock =
             parseInt(String(it.quantity).replace(/[^\d]/g, '')) || 1;
-          const sku =
-            (it as any).sku && String((it as any).sku).trim().length >= 3
-              ? String((it as any).sku)
-                  .trim()
-                  .substring(0, 32)
-              : Array.from(
-                  { length: 8 },
-                  () =>
-                    'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'[
-                      Math.floor(Math.random() * 32)
-                    ]
-                ).join('');
+          const priceInCents = Math.round(price * 100);
+
           return {
             name,
             description,
-            price,
-            stock,
-            unit: ProductUnity.PER_ITEM,
-            product_type: ProductType.PHYSICAL_PRODUCT,
-            category_id: undefined,
-            sku,
-            weight: undefined,
-            localization: undefined,
-            status: ProductStatus.ACTIVE,
-            min_stock: 0,
-          } as CreateProductRequest;
+            prices: [
+              {
+                amount_type: 'fixed',
+                price_currency: 'usd',
+                price_amount: priceInCents,
+              },
+            ],
+            metadata: {
+              quantity: stock,
+              category: 'General',
+              subcategory: 'OCR Import',
+              tags: 'ocr,imported',
+            },
+          };
         })
-        .filter((p) => p.name && p.price >= 0);
+        .filter((p) => p.name && p.prices[0].price_amount >= 0);
 
-      if (toCreate.length === 0) {
+      if (polarProducts.length === 0) {
         setError('No valid products to create');
         setIsAddingToInventory(false);
         return;
       }
 
-      await productsAPI.createBulk(toCreate);
+      await productsAPI.createBulk(polarProducts);
       router.push('/inventory');
     } catch (err: any) {
       setError(err.message || 'Error adding products');
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index b1cac603..047b56a6 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -1,35 +1,25 @@
-"use client";
+'use client';
 
-import React, { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import Header from "@/components/profile/Header";
-import Sidebar from "@/components/profile/Sidebar";
-import AvatarUploader from "@/components/profile/AvatarUploader";
-import ProfileForm from "@/components/profile/ProfileForm";
-import { profileAPI, authAPI } from "@/services/api.service";
-import { useAuth } from "@/context/auth-store";
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Header from '@/components/profile/Header';
+import AvatarUploader from '@/components/profile/AvatarUploader';
+import { profileAPI, authAPI } from '@/services/api.service';
+import { useAuth } from '@/context/auth-store';
 
 const ProfilePage: React.FC = () => {
   const router = useRouter();
-  const [activeSection, setActiveSection] = useState("profile");
   const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
   const [profileData, setProfileData] = useState<Record<string, any>>({});
-  const [avatarFile, setAvatarFile] = useState<File | null>(null);
-  const [submitSignal, setSubmitSignal] = useState(0);
+  const [editingFields, setEditingFields] = useState<Record<string, boolean>>(
+    {}
+  );
+  const [editValues, setEditValues] = useState<Record<string, string>>({});
   const { user, initialized, setUser } = useAuth();
 
-  const sections = [
-    { id: "profile", name: "Profile" },
-    { id: "personal", name: "Personal Data" },
-    { id: "security", name: "Security" },
-    { id: "preferences", name: "Preferences" },
-    { id: "notifications", name: "Notifications" },
-    { id: "billing", name: "Billing & Plan" },
-    { id: "support", name: "Support & Help" },
-  ];
-
   useEffect(() => {
     let canceled = false;
     const load = async () => {
@@ -52,7 +42,6 @@ const ProfilePage: React.FC = () => {
           }
         }
       } catch (err) {
-        // non-critical
       } finally {
         if (!canceled) setLoading(false);
       }
@@ -67,31 +56,45 @@ const ProfilePage: React.FC = () => {
     };
   }, [initialized, user, setUser]);
 
-  const handleSave = async (values: Record<string, any>) => {
+  const handleSave = async () => {
     setSaving(true);
     setError(null);
+    setSuccess(null);
     try {
-      const payload: Record<string, unknown> = {
-        full_name: values.full_name,
-        email: values.email,
-        phone: values.phone,
-        address: values.address,
-        language: values.language,
-        timezone: values.timezone,
-        dateFormat: values.dateFormat,
-        currency: values.currency,
-        twoFactorEnabled: values.twoFactorEnabled,
-      };
+      const payload: Record<string, unknown> = {};
+
+      Object.keys(editValues).forEach((field) => {
+        const newValue = editValues[field]?.trim();
+        const oldValue = profileData[field];
+
+        if (newValue !== oldValue && field !== 'email') {
+          if (
+            field === 'phone' ||
+            field === 'polar_api_key' ||
+            field === 'polar_organization_id'
+          ) {
+            payload[field] = newValue || null;
+          } else if (newValue) {
+            payload[field] = newValue;
+          }
+        }
+      });
+
+      if (Object.keys(payload).length === 0) {
+        setSuccess('No changes to save');
+        setTimeout(() => setSuccess(null), 3000);
+        return;
+      }
 
       const res = await profileAPI.update(payload as any);
       if (res && (res as any).user) {
         const updated = (res as any).user;
         setProfileData(updated);
-        try {
-          setUser(updated as any);
-        } catch {
-          // ignore if store setUser fails
-        }
+        setUser(updated as any);
+        setEditingFields({});
+        setEditValues({});
+        setSuccess('Profile updated successfully');
+        setTimeout(() => setSuccess(null), 3000);
       }
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -100,74 +103,175 @@ const ProfilePage: React.FC = () => {
     }
   };
 
-  return (
-    <div className="min-h-screen bg-bg-main">
-      <Header
-        onBack={() => router.push("/")}
-        onSave={() => setSubmitSignal((s) => s + 1)}
-        saving={saving}
-      />
+  const handleImageUpdated = async (
+    newImageUrl: string | null,
+    updatedUser?: any
+  ) => {
+    if (updatedUser) {
+      setProfileData(updatedUser);
+      setUser(updatedUser as any);
+    } else {
+      const updated = { ...profileData, profile_image: newImageUrl };
+      setProfileData(updated);
+      setUser(updated as any);
+    }
+    setSuccess('Avatar updated successfully');
+    setTimeout(() => setSuccess(null), 3000);
+  };
 
-      <div className="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-4">
-          <div className="hidden lg:block">
-            <Sidebar
-              sections={sections}
-              active={activeSection}
-              onSelect={setActiveSection}
-            />
-          </div>
+  const handleError = (errorMsg: string) => {
+    setError(errorMsg);
+    setTimeout(() => setError(null), 5000);
+  };
+
+  const startEditing = (field: string) => {
+    setEditingFields((prev) => ({ ...prev, [field]: true }));
+    setEditValues((prev) => ({ ...prev, [field]: profileData[field] || '' }));
+  };
+
+  const cancelEditing = (field: string) => {
+    setEditingFields((prev) => ({ ...prev, [field]: false }));
+    setEditValues((prev) => {
+      const newValues = { ...prev };
+      delete newValues[field];
+      return newValues;
+    });
+  };
+
+  const updateEditValue = (field: string, value: string) => {
+    setEditValues((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const hasChanges = Object.keys(editingFields).some(
+    (field) => editingFields[field] && field !== 'email'
+  );
 
-          <div className="mb-6 lg:hidden">
-            <div className="overflow-hidden border rounded-lg shadow-sm bg-[#FFFFFF] border-[#CBD5E1]">
-              {sections.map((s) => (
-                <button
-                  key={s.id}
-                  onClick={() => setActiveSection(s.id)}
-                  className={`w-full flex items-center space-x-3 px-3 py-2 rounded-lg text-left transition-colors ${
-                    activeSection === s.id
-                      ? "bg-[#FBEFCA] text-[#000000] border border-[#F6DE91]"
-                      : "text-[#888888] hover:bg-[#F6DE91] hover:text-[#000000]"
-                  } border-b  border-[#F6DE91] shadow-sm`}
-                >
-                  <span className="text-sm font-medium">{s.name}</span>
-                </button>
-              ))}
+  const renderField = (field: string, label: string, type: string = 'text') => {
+    const isEditing = editingFields[field];
+    const currentValue = profileData[field] || '';
+    const editValue = editValues[field] || '';
+
+    return (
+      <div className='p-4 border rounded-lg bg-[#FFFFFF] border-[#CBD5E1] hover:border-[#F6DE91] transition-colors'>
+        <div className='flex items-center justify-between mb-2'>
+          <label className='text-sm font-medium text-[#000000]'>{label}</label>
+          {!isEditing && field !== 'email' && (
+            <button
+              onClick={() => startEditing(field)}
+              className='text-sm text-[#A94D14] hover:text-[#8A3D16] font-medium transition-colors'
+            >
+              Edit
+            </button>
+          )}
+        </div>
+
+        {isEditing ? (
+          <div className='space-y-3'>
+            <input
+              type={type}
+              value={
+                field === 'polar_api_key' || field === 'polar_organization_id'
+                  ? editValue
+                    ? '*******'
+                    : ''
+                  : editValue
+              }
+              onChange={(e) => updateEditValue(field, e.target.value)}
+              className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#F6DE91] focus:border-[#A94D14] bg-[#FFFFFF] text-[#000000]'
+              placeholder={`Enter ${label.toLowerCase()}`}
+            />
+            <div className='flex space-x-2'>
+              <button
+                onClick={() => cancelEditing(field)}
+                className='px-3 py-1 text-sm text-[#888888] hover:text-[#000000] transition-colors'
+              >
+                Cancel
+              </button>
             </div>
           </div>
+        ) : (
+          <div className='text-[#000000]'>
+            {field === 'polar_api_key' || field === 'polar_organization_id' ? (
+              currentValue ? (
+                '*******'
+              ) : (
+                <span className='text-[#888888] italic'>Not set</span>
+              )
+            ) : (
+              currentValue || (
+                <span className='text-[#888888] italic'>Not set</span>
+              )
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className='min-h-screen bg-bg-main'>
+      <Header
+        onBack={() => router.push('/')}
+        onSave={hasChanges ? () => handleSave() : () => {}}
+        saving={saving}
+      />
 
-          <div className="lg:col-span-3">
-            <div className="p-6 mb-6 border rounded-lg shadow-sm bg-bg-surface border-[#CBD5E1] min-h-[600px]">
-              <h2 className="mb-6 text-xl font-semibold text-text-primary">
-                {sections.find((s) => s.id === activeSection)?.name}
+      <div className='px-4 py-6 mx-auto max-w-4xl sm:px-6 lg:px-8'>
+        <div className='flex justify-center'>
+          <div className='w-full max-w-2xl'>
+            <div className='p-6 mb-6 border rounded-lg shadow-sm bg-bg-surface border-[#CBD5E1] min-h-[600px]'>
+              <h2 className='mb-6 text-xl font-semibold text-text-primary'>
+                Profile
               </h2>
 
-              {activeSection === "profile" ? (
-                <div className="flex flex-col gap-6">
-                  <div className="flex flex-col items-start space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-6">
-                    <AvatarUploader
-                      imageUrl={profileData.image || null}
-                      onChange={setAvatarFile}
-                    />
-                    <div className="flex-1">
-                      <h2 className="text-xl font-bold text-text-primary">
-                        {profileData.full_name}
-                      </h2>
-                      <p className="text-text-secondary">{profileData.email}</p>
-                    </div>
-                  </div>
+              {error && (
+                <div className='p-4 mb-4 text-red-700 bg-red-100 border border-red-300 rounded-lg'>
+                  {error}
+                </div>
+              )}
 
-                  <ProfileForm
-                    initialValues={profileData}
-                    onSubmit={handleSave}
-                    submitSignal={submitSignal}
+              {success && (
+                <div className='p-4 mb-4 text-green-700 bg-green-100 border border-green-300 rounded-lg'>
+                  {success}
+                </div>
+              )}
+
+              <div className='flex flex-col gap-6'>
+                <div className='flex flex-col items-start space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-6'>
+                  <AvatarUploader
+                    imageUrl={profileData.profile_image || null}
+                    onImageUpdated={handleImageUpdated}
+                    onError={handleError}
                   />
+                  <div className='flex-1'>
+                    <h2 className='text-xl font-bold text-text-primary'>
+                      {profileData.full_name || 'User'}
+                    </h2>
+                    <p className='text-text-secondary'>
+                      {profileData.email || ''}
+                    </p>
+                  </div>
                 </div>
-              ) : (
-                <div className="text-sm text-text-secondary min-h-[150px]">
-                  Section content moved to components.
+
+                <div className='space-y-4'>
+                  <h3 className='text-lg font-semibold text-[#000000] mb-4'>
+                    Profile Information
+                  </h3>
+
+                  <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+                    {renderField('full_name', 'Full Name')}
+                    {renderField('email', 'Email', 'email')}
+                    {renderField('phone', 'Phone')}
+                    {renderField('polar_api_key', 'Polar API Key', 'password')}
+                    {renderField(
+                      'polar_organization_id',
+                      'Polar Organization ID'
+                    )}
+                  </div>
+
+                  {/* Removed bottom save button - only keep the one in header */}
                 </div>
-              )}
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/success/page.tsx b/frontend/src/app/success/page.tsx
new file mode 100644
index 00000000..60712549
--- /dev/null
+++ b/frontend/src/app/success/page.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import React, { useEffect, useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { CheckCircle, ArrowLeft } from 'lucide-react';
+
+const SuccessContent: React.FC = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [checkoutId, setCheckoutId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const id = searchParams.get('checkout_id');
+    setCheckoutId(id);
+  }, [searchParams]);
+
+  return (
+    <div className='min-h-screen bg-bg-main flex items-center justify-center p-4'>
+      <div className='max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center'>
+        <div className='mb-6'>
+          <CheckCircle className='w-16 h-16 text-green-500 mx-auto mb-4' />
+          <h1 className='text-2xl font-bold text-gray-900 mb-2'>
+            Payment Successful!
+          </h1>
+          <p className='text-gray-600'>
+            Thank you for your purchase. Your order has been confirmed.
+          </p>
+        </div>
+
+        {checkoutId && (
+          <div className='mb-6 p-4 bg-gray-50 rounded-lg'>
+            <p className='text-sm text-gray-500 mb-1'>Order ID:</p>
+            <p className='text-sm font-mono text-gray-900 break-all'>
+              {checkoutId}
+            </p>
+          </div>
+        )}
+
+        <div className='space-y-3'>
+          <button
+            onClick={() => router.push('/home')}
+            className='w-full bg-[#F88612] hover:bg-[#D9740F] text-white font-semibold py-3 px-6 rounded-lg transition-colors'
+          >
+            Continue Shopping
+          </button>
+
+          <button
+            onClick={() => router.push('/inventory')}
+            className='w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-3 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2'
+          >
+            <ArrowLeft className='w-4 h-4' />
+            <span>View Inventory</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SuccessPage: React.FC = () => {
+  return (
+    <Suspense
+      fallback={
+        <div className='min-h-screen bg-bg-main flex items-center justify-center p-4'>
+          <div className='max-w-md w-full bg-white rounded-lg shadow-lg p-8 text-center'>
+            <div className='mb-6'>
+              <div className='w-16 h-16 bg-gray-200 rounded-full mx-auto mb-4 animate-pulse'></div>
+              <div className='h-8 bg-gray-200 rounded mx-auto mb-2 animate-pulse'></div>
+              <div className='h-4 bg-gray-200 rounded mx-auto animate-pulse'></div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <SuccessContent />
+    </Suspense>
+  );
+};
+
+export default SuccessPage;
diff --git a/frontend/src/app/upgrade/page.tsx b/frontend/src/app/upgrade/page.tsx
new file mode 100644
index 00000000..fd03df5f
--- /dev/null
+++ b/frontend/src/app/upgrade/page.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { PricingSectionCompact } from '@/components/landing/pricing-section-compact';
+
+export default function UpgradePage() {
+  return (
+    <div className='min-h-screen bg-white'>
+      <div className='flex justify-center mt-0'>
+        <div className='w-full max-w-6xl'>
+          <PricingSectionCompact />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/LayoutWrapper.tsx b/frontend/src/components/LayoutWrapper.tsx
index 1dcc1109..b2549be5 100644
--- a/frontend/src/components/LayoutWrapper.tsx
+++ b/frontend/src/components/LayoutWrapper.tsx
@@ -12,6 +12,8 @@ const LayoutWrapper: React.FC<{ children: React.ReactNode }> = ({
     '/',
     '/login',
     '/register',
+    '/upgrade',
+    '/landing',
     '/auth/login',
     '/auth/register',
   ];
diff --git a/frontend/src/components/PaymentScreen.tsx b/frontend/src/components/PaymentScreen.tsx
deleted file mode 100644
index 5b95cecc..00000000
--- a/frontend/src/components/PaymentScreen.tsx
+++ /dev/null
@@ -1,324 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ArrowLeft, Banknote } from 'lucide-react';
-import { checkoutCart } from '@/services/payments-service';
-
-interface PaymentScreenProps {
-  isOpen: boolean;
-  onBack: () => void;
-  onPaymentSuccess: (method: string) => void;
-  cartAmount: number;
-}
-
-type PaymentMethod = 'cash' | 'polar';
-
-const PaymentScreen: React.FC<PaymentScreenProps> = ({
-  isOpen,
-  onBack,
-  onPaymentSuccess,
-  cartAmount,
-}) => {
-  const [selectedMethod, setSelectedMethod] = useState<PaymentMethod | null>(
-    null
-  );
-  const [formData, setFormData] = useState({
-    cashAmount: (isNaN(cartAmount) ? 0 : cartAmount).toString(),
-    needsChange: false,
-    changeFor: '',
-  });
-
-  // States for change calculation
-  const [cashReceived, setCashReceived] = useState<number>(0);
-  const [changeAmount, setChangeAmount] = useState<number>(0);
-  const [isSufficientAmount, setIsSufficientAmount] = useState<boolean>(false);
-
-  // Calculate change automatically when received amount changes
-  useEffect(() => {
-    const received = parseFloat(cashReceived.toString()) || 0;
-    const validCartAmount = isNaN(cartAmount) ? 0 : cartAmount;
-    const change = received - validCartAmount;
-    setChangeAmount(change);
-    setIsSufficientAmount(received >= validCartAmount);
-  }, [cashReceived, cartAmount]);
-
-  const handleInputChange = (field: string, value: string | boolean) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
-  const handleCashReceivedChange = (value: string) => {
-    const amount = parseFloat(value) || 0;
-    setCashReceived(amount);
-  };
-
-  const isFormValid = () => {
-    switch (selectedMethod) {
-      case 'cash':
-        return cashReceived >= (isNaN(cartAmount) ? 0 : cartAmount);
-      case 'polar':
-        return true;
-      default:
-        return false;
-    }
-  };
-
-  const getPaymentMethodName = (method: PaymentMethod | null) => {
-    switch (method) {
-      case 'cash':
-        return 'Cash on Delivery';
-      case 'polar':
-        return 'Polar';
-      default:
-        return 'Payment method';
-    }
-  };
-
-  const handleConfirmPayment = async () => {
-    if (isFormValid() && selectedMethod) {
-      if (selectedMethod === 'polar') {
-        if (!cartAmount || cartAmount <= 0) {
-          console.error('Invalid cart amount');
-          return;
-        }
-
-        try {
-          const response = await checkoutCart({
-            cartAmount,
-            userId: '',
-            items: []
-          });
-          window.location.href = response.url;
-        } catch (error) {
-          console.error('Error creating checkout:', error);
-        }
-      } else {
-        onPaymentSuccess(getPaymentMethodName(selectedMethod));
-      }
-    }
-  };
-
-  // Function to format currency
-  const formatCurrency = (amount: number) => {
-    const validAmount = isNaN(amount) ? 0 : amount;
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 2,
-    }).format(validAmount);
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className='fixed inset-0 z-50 flex flex-col bg-white animate-scale-in'>
-      {/* Header */}
-      <div className='flex items-center justify-between p-4 border-b border-[#CBD5E1] bg-[#F9FAFB]'>
-        <button
-          onClick={onBack}
-          className='p-2 transition-all duration-300 rounded-full hover:bg-gray-50 hover:scale-110 icon-bounce'
-        >
-          <ArrowLeft size={20} className='text-black' />
-        </button>
-        <h1 className='text-lg font-semibold text-black animate-slide-in-left'>
-          Payment Options
-        </h1>
-        <div className='w-10'></div> {/* Spacer */}
-      </div>
-
-      {/* Content */}
-      <div className='flex-1 p-4 pb-24 overflow-y-auto'>
-        {/* Total Amount */}
-        <div className='p-4 mb-6 border rounded-lg bg-gray-50 border-[#CBD5E1] animate-bounce-in'>
-          <div className='text-center'>
-            <span className='text-sm text-[#6B7280]'>Total to pay</span>
-            <div className='text-2xl font-bold text-black'>
-              {formatCurrency(cartAmount)}
-            </div>
-          </div>
-        </div>
-
-        {/* Payment Methods */}
-        <div className='mb-6 space-y-4 animate-stagger'>
-          {/* Cash on Delivery */}
-          <div
-            className={`border rounded-lg p-4 cursor-pointer transition-all duration-300 hover-lift ${
-              selectedMethod === 'cash'
-                ? 'border-zatobox-500 bg-zatobox-100 shadow-lg'
-                : 'border-[#CBD5E1] hover:bg-[#FEF9EC] bg-white'
-            }`}
-            onClick={() => setSelectedMethod('cash')}
-          >
-            <div className='flex items-center space-x-3'>
-              <div
-                className={`w-4 h-4 rounded-full border-2 transition-all duration-300 ${
-                  selectedMethod === 'cash'
-                    ? 'border-zatobox-500 bg-zatobox-500'
-                    : 'border-gray-300 hover:border-[#F88612] hover:bg-[#F88612]'
-                }`}
-              >
-                {selectedMethod === 'cash' && (
-                  <div className='w-2 h-2 bg-white rounded-full mx-auto mt-0.5 animate-scale-in'></div>
-                )}
-              </div>
-              <Banknote size={20} className='text-black icon-bounce' />
-              <div>
-                <div className='font-medium text-black text-glow'>
-                  Cash on Delivery
-                </div>
-                <div className='text-sm text-[#CBD5E1]'>
-                  Pay with cash upon delivery
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Polar */}
-          <div
-            className={`border rounded-lg p-4 cursor-pointer transition-all duration-300 hover-lift ${
-              selectedMethod === 'polar'
-                ? 'border-zatobox-500 bg-zatobox-100 shadow-lg'
-                : 'border-[#CBD5E1] hover:bg-[#FEF9EC] bg-white'
-            }`}
-            onClick={() => setSelectedMethod('polar')}
-          >
-            <div className='flex items-center space-x-3'>
-              <div
-                className={`w-4 h-4 rounded-full border-2 transition-all duration-300 ${
-                  selectedMethod === 'polar'
-                    ? 'border-zatobox-500 bg-zatobox-500'
-                    : 'border-gray-300 hover:border-[#F88612] hover:bg-[#F88612]'
-                }`}
-              >
-                {selectedMethod === 'polar' && (
-                  <div className='w-2 h-2 bg-white rounded-full mx-auto mt-0.5 animate-scale-in'></div>
-                )}
-              </div>
-              <div className='w-5 h-5 bg-black rounded-full flex items-center justify-center'>
-                <span className='text-white text-xs font-bold'>P</span>
-              </div>
-              <div>
-                <div className='font-medium text-black text-glow'>Polar</div>
-                <div className='text-sm text-[#CBD5E1]'>
-                  Secure payment with Polar
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Payment Method Forms */}
-        {selectedMethod && (
-          <div className='p-6 mb-6 border rounded-lg bg-white border-[#CBD5E1] animate-fade-in'>
-            {selectedMethod === 'cash' && (
-              <div className='space-y-4'>
-                <h3 className='mb-4 text-lg font-semibold text-black'>
-                  Cash Payment
-                </h3>
-
-                <div>
-                  <label className='block mb-2 text-sm font-medium text-black'>
-                    Amount Received
-                  </label>
-                  <input
-                    type='number'
-                    value={cashReceived}
-                    onChange={(e) => handleCashReceivedChange(e.target.value)}
-                    placeholder='0.00'
-                    className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-zatobox-500 focus:border-transparent ${
-                      isSufficientAmount
-                        ? 'border-green-500'
-                        : 'border-[#CBD5E1]'
-                    }`}
-                    min={isNaN(cartAmount) ? 0 : cartAmount}
-                    step='0.01'
-                  />
-                  {!isSufficientAmount && cashReceived > 0 && (
-                    <p className='mt-1 text-sm text-red-500'>
-                      Insufficient amount. Please enter at least{' '}
-                      {formatCurrency(cartAmount)}
-                    </p>
-                  )}
-                </div>
-
-                {/* Quick Amount Buttons */}
-                <div>
-                  <label className='block mb-2 text-sm font-medium text-black'>
-                    Quick Amount
-                  </label>
-                  <div className='grid grid-cols-3 gap-2'>
-                    {[10, 20, 50, 100, 200, 500].map((amount) => (
-                      <button
-                        key={amount}
-                        type='button'
-                        onClick={() =>
-                          handleCashReceivedChange(amount.toString())
-                        }
-                        className='px-3 py-2 text-sm transition-colors border rounded-lg border-[#CBD5E1] hover:bg-gray-50'
-                      >
-                        ${amount}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                {/* Change Calculator */}
-                {cashReceived > 0 && (
-                  <div className='p-4 rounded-lg bg-gray-50'>
-                    <div className='flex items-center justify-between mb-2'>
-                      <span className='text-sm text-[#CBD5E1]'>
-                        Change to return:
-                      </span>
-                      <span
-                        className={`text-lg font-bold ${
-                          changeAmount >= 0 ? 'text-green-600' : 'text-red-600'
-                        }`}
-                      >
-                        {formatCurrency(Math.abs(changeAmount))}
-                      </span>
-                    </div>
-                    {changeAmount < 0 && (
-                      <p className='text-sm text-red-500'>
-                        Additional amount needed:{' '}
-                        {formatCurrency(Math.abs(changeAmount))}
-                      </p>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {selectedMethod === 'polar' && (
-              <div className='py-8 text-center'>
-                <div className='mb-4 text-4xl'>🔒</div>
-                <h3 className='mb-2 text-lg font-semibold text-black'>
-                  Polar Checkout
-                </h3>
-                <p className='text-[#CBD5E1]'>
-                  You will be redirected to Polar to complete your payment
-                  securely
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Confirm Payment Button */}
-        <button
-          onClick={handleConfirmPayment}
-          disabled={!isFormValid()}
-          className={`w-full py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 ${
-            isFormValid()
-              ? 'bg-zatobox-500 hover:bg-zatobox-600 text-white shadow-lg'
-              : 'bg-gray-300 text-gray-500 cursor-not-allowed'
-          }`}
-        >
-          {selectedMethod === 'cash' || selectedMethod === 'polar'
-            ? `Confirm Payment - ${formatCurrency(cartAmount)}`
-            : 'Confirm Payment'}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default PaymentScreen;
diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index 602afbdf..364dead4 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -1,35 +1,95 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Package } from 'lucide-react';
+import { Package, Archive, Repeat } from 'lucide-react';
 import { Product } from '@/types/index';
+import { PolarProduct } from '@/types/polar';
 
 interface ProductCardProps {
-  product: Product;
-  onClick: (product: Product) => void;
+  product: Product | PolarProduct;
+  onClick: (product: Product | PolarProduct) => void;
 }
 
 const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
+  const isPolarProduct = (p: any): p is PolarProduct => {
+    return 'medias' in p && 'organization_id' in p;
+  };
+
   const getImageUrls = () => {
-    if (
-      !product.images ||
-      !Array.isArray(product.images) ||
-      product.images.length === 0
-    )
-      return [];
-    const apiBase = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4444';
-    return product.images
-      .filter((v) => typeof v === 'string' && v.trim() !== '')
-      .map((raw) => {
-        if (/^(https?:\/\/|data:|blob:)/i.test(raw)) return raw;
-        if (/^\/\//.test(raw)) return `https:${raw}`;
-        return `${apiBase.replace(/\/$/, '')}${
-          raw.startsWith('/') ? '' : '/'
-        }${raw}`;
-      });
+    if (isPolarProduct(product)) {
+      return (
+        product.medias
+          ?.filter(
+            (media) => media.mime_type.startsWith('image/') && media.public_url
+          )
+          .map((media) => media.public_url) || []
+      );
+    } else {
+      if (
+        !product.images ||
+        !Array.isArray(product.images) ||
+        product.images.length === 0
+      )
+        return [];
+      const apiBase =
+        process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4444';
+      return product.images
+        .filter((v) => typeof v === 'string' && v.trim() !== '')
+        .map((raw) => {
+          if (/^(https?:\/\/|data:|blob:)/i.test(raw)) return raw;
+          if (/^\/\//.test(raw)) return `https:${raw}`;
+          return `${apiBase.replace(/\/$/, '')}${
+            raw.startsWith('/') ? '' : '/'
+          }${raw}`;
+        });
+    }
+  };
+
+  const getProductInfo = () => {
+    if (isPolarProduct(product)) {
+      const primaryPrice = product.prices?.[0];
+      const formattedPrice = primaryPrice
+        ? `${primaryPrice.price_amount / 100} ${primaryPrice.price_currency}`
+        : 'Free';
+
+      const stock = product.metadata?.quantity || 0;
+
+      return {
+        name: product.name,
+        description: product.description,
+        price: formattedPrice,
+        unit: primaryPrice?.recurring_interval
+          ? `per ${primaryPrice.recurring_interval}`
+          : 'one-time',
+        stock: stock,
+        sku: product.id.slice(-8),
+        categoryNames: [],
+        isArchived: product.is_archived,
+        isRecurring: product.is_recurring,
+        recurringInterval: product.recurring_interval,
+      };
+    } else {
+      const unitLabel = (product as any).unit_name ?? 'per unit';
+      return {
+        name: product.name,
+        description: product.description,
+        price: `$${product.price.toFixed(2)}`,
+        unit: unitLabel,
+        stock: product.stock,
+        sku: product.sku,
+        categoryNames:
+          (product as any).category_names || product.category_ids || [],
+        isArchived: false,
+        isRecurring: false,
+        recurringInterval: null,
+      };
+    }
   };
+
   const images = getImageUrls();
+  const fallbackImg = '/images/placeholder-product.png';
   const [index, setIndex] = useState(0);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const unitLabel = (product as any).unit_name ?? 'per unit';
+  const productInfo = getProductInfo();
+
   const startSlide = () => {
     if (images.length <= 1) return;
     if (intervalRef.current) return;
@@ -37,6 +97,7 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
       setIndex((prev) => (prev + 1) % images.length);
     }, 2000);
   };
+
   const stopSlide = () => {
     if (intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -44,12 +105,14 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
     }
     setIndex(0);
   };
+
   useEffect(
     () => () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     },
     []
   );
+
   return (
     <div
       onClick={() => onClick(product)}
@@ -57,28 +120,43 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
       onMouseLeave={stopSlide}
       className='relative overflow-hidden transition-all duration-300 ease-in-out transform bg-white border rounded-lg cursor-pointer group border-gray-300 hover:scale-105 hover:shadow-lg hover:border-gray-300 animate-fade-in'
     >
-      <div className='absolute z-10 top-3 right-3'>
-        <span
-          className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-[#FEF3C7] ${
-            product.stock > 10
-              ? 'text-success-800'
-              : product.stock > 0
-              ? 'text-warning-800'
-              : 'text-error-800'
-          }`}
-        >
-          <div
-            className={`w-2 h-2 rounded-full mr-1 transition-all duration-300 ${
-              product.stock > 10
-                ? 'bg-[#10B981]'
-                : product.stock > 0
-                ? 'bg-[#f0ad4e]'
-                : 'bg-[#d9534f]'
+      <div className='absolute z-10 top-3 right-3 flex gap-2'>
+        {productInfo.isArchived && (
+          <span className='inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800'>
+            <Archive className='w-3 h-3 mr-1' />
+            Archived
+          </span>
+        )}
+        {productInfo.isRecurring && (
+          <span className='inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800'>
+            <Repeat className='w-3 h-3 mr-1' />
+            {productInfo.recurringInterval}
+          </span>
+        )}
+        {productInfo.stock !== null && (
+          <span
+            className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium transition-all duration-300 bg-[#FEF3C7] ${
+              productInfo.stock > 10
+                ? 'text-success-800'
+                : productInfo.stock > 0
+                ? 'text-warning-800'
+                : 'text-error-800'
             }`}
-          ></div>
-          {product.stock} in stock
-        </span>
+          >
+            <div
+              className={`w-2 h-2 rounded-full mr-1 transition-all duration-300 ${
+                productInfo.stock > 10
+                  ? 'bg-[#10B981]'
+                  : productInfo.stock > 0
+                  ? 'bg-[#f0ad4e]'
+                  : 'bg-[#d9534f]'
+              }`}
+            ></div>
+            {productInfo.stock} in stock
+          </span>
+        )}
       </div>
+
       <div className='relative h-48 overflow-hidden bg-gradient-to-br from-gray-100 via-gray-50 to-gray-100'>
         {images.length > 0 ? (
           <div className='w-full h-full overflow-hidden'>
@@ -89,19 +167,30 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
               {images.map((src, i) => (
                 <div key={i} className='w-full h-48 shrink-0 relative'>
                   <img
-                    src={src}
-                    alt={product.name}
+                    src={src || fallbackImg}
+                    alt={productInfo.name}
                     loading='lazy'
                     draggable={false}
                     className='object-cover w-full h-full select-none'
                     onError={(e) => {
-                      (e.target as HTMLImageElement).style.visibility =
-                        'hidden';
+                      (e.target as HTMLImageElement).src = fallbackImg;
                     }}
                   />
                 </div>
               ))}
             </div>
+            {images.length > 1 && (
+              <div className='absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-1'>
+                {images.map((_, i) => (
+                  <div
+                    key={i}
+                    className={`w-2 h-2 rounded-full transition-all ${
+                      i === index ? 'bg-white' : 'bg-white/50'
+                    }`}
+                  />
+                ))}
+              </div>
+            )}
           </div>
         ) : (
           <div className='absolute inset-0 flex items-center justify-center'>
@@ -112,45 +201,51 @@ const ProductCard: React.FC<ProductCardProps> = ({ product, onClick }) => {
         )}
         <div className='absolute inset-0 transition-all duration-300 bg-black/0 group-hover:bg-black/10' />
       </div>
+
       <div className='p-4 space-y-3'>
         <div className='flex items-center justify-between'>
-          {Array.isArray((product as any).category_names) &&
-          (product as any).category_names.length > 0 ? (
+          {Array.isArray(productInfo.categoryNames) &&
+          productInfo.categoryNames.length > 0 ? (
             <span className='text-xs font-medium tracking-wide uppercase transition-colors duration-300 text-zatobox-900 group-hover:text-zatobox-900'>
-              {(product as any).category_names.join(', ')}
-            </span>
-          ) : product.category_ids && product.category_ids.length > 0 ? (
-            <span className='text-xs font-medium tracking-wide uppercase transition-colors duration-300 text-zatobox-900 group-hover:text-zatobox-900'>
-              {product.category_ids.join(', ')}
+              {productInfo.categoryNames.join(', ')}
             </span>
           ) : (
-            <span />
-          )}
-          {product.sku && (
-            <span className='text-xs transition-colors duration-300 text-zatobox-900 group-hover:text-zatobox-900'>
-              {product.sku}
+            <span className='text-xs font-medium tracking-wide uppercase transition-colors duration-300 text-zatobox-900 group-hover:text-zatobox-900'>
+              Product
             </span>
           )}
         </div>
+
         <h3 className='text-lg font-semibold transition-colors duration-300 text-black/75 group-hover:text-black line-clamp-2'>
-          {product.name}
+          {productInfo.name}
         </h3>
-        {product.description ? (
+
+        {productInfo.description && (
           <p className='text-sm transition-colors duration-300 text-gray-500 line-clamp-2 group-hover:text-gray-500'>
-            {product.description}
+            {productInfo.description}
           </p>
-        ) : null}
+        )}
+
         <div className='flex items-center justify-between pt-2'>
           <div className='flex flex-col'>
-            <span className='text-2xl font-bold transition-colors duration-300  text-black group-hover:text-zatobox-500'>
-              ${product.price.toFixed(2)}
+            <span className='text-2xl font-bold transition-colors duration-300 text-black group-hover:text-zatobox-500'>
+              {productInfo.price}
             </span>
-            <span className='text-xs transition-colors duration-300 text-gray-500  group-hover:text-gray-500'>
-              {unitLabel}
+            <span className='text-xs transition-colors duration-300 text-gray-500 group-hover:text-gray-500'>
+              {productInfo.unit}
             </span>
           </div>
+
+          {images.length > 0 && (
+            <div className='text-right'>
+              <span className='text-xs text-gray-500'>
+                {images.length} image{images.length !== 1 ? 's' : ''}
+              </span>
+            </div>
+          )}
         </div>
       </div>
+
       <div className='absolute inset-0 transition-all duration-300 border-2 border-transparent rounded-lg pointer-events-none group-hover:border-zatobox-500/20'></div>
     </div>
   );
diff --git a/frontend/src/components/SalesDrawer.tsx b/frontend/src/components/SalesDrawer.tsx
index e881ba1d..8bc2c961 100644
--- a/frontend/src/components/SalesDrawer.tsx
+++ b/frontend/src/components/SalesDrawer.tsx
@@ -1,12 +1,18 @@
-import React, { useState } from 'react';
+'use client';
+
+import React from 'react';
 import { X, Minus, Plus, Trash2, ShoppingCart } from 'lucide-react';
 
 interface SalesItem {
-  id: number;
+  id: string | number;
+  polarProductId: string;
   name: string;
   quantity: number;
   price: number;
+  priceId: string;
   stock: number;
+  recurring_interval?: string | null;
+  productData: any;
 }
 
 interface SalesDrawerProps {
@@ -14,8 +20,8 @@ interface SalesDrawerProps {
   onClose: () => void;
   onNavigateToPayment: (total: number) => void;
   cartItems: SalesItem[];
-  updateCartItemQuantity: (id: number, change: number) => void;
-  removeCartItem: (id: number) => void;
+  updateCartItemQuantity: (id: string | number, change: number) => void;
+  removeCartItem: (id: string | number) => void;
   clearCart: () => void;
 }
 
@@ -68,15 +74,22 @@ const SalesDrawer: React.FC<SalesDrawerProps> = ({
       <div className='flex-1 p-4 overflow-y-auto'>
         {cartItems.length > 0 ? (
           <div className='space-y-4 animate-stagger'>
-            {cartItems.map((item) => (
+            {cartItems.map((item, index) => (
               <div
-                key={item.id}
+                key={`cart-item-${index}-${item.id || 'unknown'}`}
                 className='p-4 bg-white border rounded-lg shadow-sm border-[#CBD5E1] hover-lift'
               >
                 <div className='flex items-center justify-between mb-2'>
-                  <h3 className='font-medium text-black text-glow'>
-                    {item.name}
-                  </h3>
+                  <div>
+                    <h3 className='font-medium text-black text-glow'>
+                      {item.name}
+                    </h3>
+                    {item.recurring_interval && (
+                      <span className='text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full'>
+                        {item.recurring_interval}ly
+                      </span>
+                    )}
+                  </div>
                   <button
                     onClick={() => removeCartItem(item.id)}
                     className='transition-colors duration-300 text-error hover:text-error-600 icon-bounce'
@@ -99,7 +112,10 @@ const SalesDrawer: React.FC<SalesDrawerProps> = ({
                     </span>
                     <button
                       onClick={() => updateCartItemQuantity(item.id, 1)}
-                      disabled={item.quantity >= item.stock}
+                      disabled={
+                        item.quantity >=
+                        (item.productData?.metadata?.quantity || item.stock)
+                      }
                       className='flex items-center justify-center w-8 h-8 transition-all duration-300 bg-gray-100 rounded-full hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed hover:scale-110'
                     >
                       <Plus size={14} />
@@ -112,6 +128,10 @@ const SalesDrawer: React.FC<SalesDrawerProps> = ({
                     <div className='text-sm text-gray-500'>
                       ${item.price.toFixed(2)} each
                     </div>
+                    <div className='text-xs text-gray-400'>
+                      Stock:{' '}
+                      {item.productData?.metadata?.quantity || item.stock}
+                    </div>
                   </div>
                 </div>
               </div>
diff --git a/frontend/src/components/SideMenu.tsx b/frontend/src/components/SideMenu.tsx
index 739e9d5f..5906a01e 100644
--- a/frontend/src/components/SideMenu.tsx
+++ b/frontend/src/components/SideMenu.tsx
@@ -8,6 +8,7 @@ import {
   Plus,
   Archive,
   Brain,
+  Sparkles,
   LogOut,
   User,
   Menu,
@@ -164,6 +165,13 @@ const SideMenu: React.FC = () => {
       description: 'Browse modules',
       alwaysVisible: true,
     },
+    {
+      name: 'Profile',
+      icon: User,
+      path: '/profile',
+      description: 'Manage account',
+      alwaysVisible: true,
+    },
   ];
 
   const handleNavigation = (path: string) => {
@@ -311,7 +319,18 @@ const SideMenu: React.FC = () => {
           {renderMenuItems(menuItems)}
         </nav>
 
-        {/* User Info */}
+        <div className='px-4 py-2'>
+          <div className='mb-2 flex justify-center'>
+            <button
+              onClick={() => router.push('/upgrade')}
+              className='w-48 h-11 max-w-full flex items-center justify-center rounded-[8px] border border-[#CBD5E1] bg-white text-black gap-2 transition-all duration-200 ease-in-out hover:scale-105 hover:bg-[#FEF9EC] hover:border-[#F88612] hover:text-[#F88612]'
+            >
+              <Sparkles size={16} className='text-current' />
+              <span className='font-medium'>Upgrade</span>
+            </button>
+          </div>
+        </div>
+
         <div className='px-4 py-4 border-t border-[#CBD5E1]'>
           <div className='flex items-center p-3 space-x-3 rounded-lg hover:bg-gray-50'>
             <div className='flex items-center justify-center w-8 h-8 rounded-full bg-[#F88612]'>
@@ -351,7 +370,18 @@ const SideMenu: React.FC = () => {
           {renderMenuItems(menuItems)}
         </nav>
 
-        {/* User Info with Hover Animation */}
+        <div className='px-4 py-2'>
+          <div className='mb-2 flex justify-center'>
+            <button
+              onClick={() => router.push('/upgrade')}
+              className='w-48 h-11 max-w-full flex items-center justify-center rounded-[8px] border border-[#CBD5E1] bg-white text-black gap-2 transition-all duration-200 ease-in-out hover:scale-105 hover:bg-[#FEF9EC] hover:border-[#F88612] hover:text-[#F88612]'
+            >
+              <Sparkles size={16} className='text-current' />
+              <span className='font-medium'>Upgrade</span>
+            </button>
+          </div>
+        </div>
+
         <div className='px-4 py-4 border-t border-[#CBD5E1]'>
           <div
             ref={userInfoRef}
diff --git a/frontend/src/components/auth/login/LoginForm.tsx b/frontend/src/components/auth/login/LoginForm.tsx
index 75b48ff5..e4577c2b 100644
--- a/frontend/src/components/auth/login/LoginForm.tsx
+++ b/frontend/src/components/auth/login/LoginForm.tsx
@@ -28,7 +28,7 @@ const LoginForm: React.FC = () => {
   }) => {
     setError('');
     try {
-      await login(values.email, values.password, values.remember);
+      await login(values.email, values.password);
       router.push('/home');
     } catch (err: any) {
       setError(err?.message || 'Error logging in');
diff --git a/frontend/src/components/auth/register/RegisterForm.tsx b/frontend/src/components/auth/register/RegisterForm.tsx
index 0cde7db2..18ba01cf 100644
--- a/frontend/src/components/auth/register/RegisterForm.tsx
+++ b/frontend/src/components/auth/register/RegisterForm.tsx
@@ -43,8 +43,8 @@ const RegisterForm: React.FC = () => {
         phone: values.phone,
       };
 
-      await registerUser(payload as any, true);
-      router.push('/home');
+      await registerUser(payload as any);
+      router.push('/upgrade');
     } catch (e: any) {
       console.error('[RegisterForm] error', e);
       const msg =
diff --git a/frontend/src/components/home/ProductGrid.tsx b/frontend/src/components/home/ProductGrid.tsx
index 027951c7..82ebb754 100644
--- a/frontend/src/components/home/ProductGrid.tsx
+++ b/frontend/src/components/home/ProductGrid.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { Product } from '@/types/index';
+import { PolarProduct } from '@/types/polar';
 import ProductCard from '../ProductCard';
 
 interface Props {
-  products: Product[];
-  onProductClick: (p: Product) => void;
+  products: (Product | PolarProduct)[];
+  onProductClick: (p: Product | PolarProduct) => void;
 }
 
 const ProductGrid: React.FC<Props> = ({ products, onProductClick }) => {
@@ -32,7 +33,7 @@ const ProductGrid: React.FC<Props> = ({ products, onProductClick }) => {
   }
 
   return (
-    <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-6 animate-stagger'>
+    <div className='grid grid-cols-2 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 sm:gap-6 animate-stagger'>
       {products.map((product) => (
         <ProductCard
           key={product.id}
diff --git a/frontend/src/components/landing/pricing-section-compact.tsx b/frontend/src/components/landing/pricing-section-compact.tsx
new file mode 100644
index 00000000..a87a6f5b
--- /dev/null
+++ b/frontend/src/components/landing/pricing-section-compact.tsx
@@ -0,0 +1,334 @@
+'use client';
+
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useLanguageContext } from '@/context/language-context';
+import { getTranslation } from '@/utils/translations';
+import { useAuth } from '@/context/auth-store';
+import { createCheckout } from '@/services/payments-service';
+
+export function PricingSectionCompact() {
+  const { language } = useLanguageContext();
+  const [isAnnual, setIsAnnual] = useState(true);
+  const { user } = useAuth();
+
+  const pricingPlans = [
+    {
+      name: getTranslation(language, 'pricing.plans.tester.name'),
+      monthlyPrice: '$0',
+      annualPrice: '$0',
+      description: getTranslation(language, 'pricing.plans.tester.description'),
+      features: getTranslation(language, 'pricing.plans.tester.features'),
+      buttonText: getTranslation(language, 'pricing.plans.tester.buttonText'),
+      buttonClass:
+        'bg-zinc-300 shadow-[0px_1px_1px_-0.5px_rgba(16,24,40,0.20)] outline outline-0.5 outline-[#1e29391f] outline-offset-[-0.5px] text-gray-800 text-shadow-[0px_1px_1px_rgba(16,24,40,0.08)] hover:bg-zinc-400',
+    },
+    {
+      name: getTranslation(language, 'pricing.plans.starter.name'),
+      monthlyPrice: '$30',
+      annualPrice: '$200',
+      description: getTranslation(
+        language,
+        'pricing.plans.starter.description'
+      ),
+      features: getTranslation(language, 'pricing.plans.starter.features'),
+      buttonText: getTranslation(language, 'pricing.plans.starter.buttonText'),
+      buttonClass:
+        'bg-white shadow-[0px_1px_1px_-0.5px_rgba(16,24,40,0.20)] text-orange-500 text-shadow-[0px_1px_1px_rgba(16,24,40,0.08)] hover:bg-white/90',
+      popular: true,
+    },
+    {
+      name: getTranslation(language, 'pricing.plans.enterprise.name'),
+      monthlyPrice: '',
+      annualPrice: '',
+      description: getTranslation(
+        language,
+        'pricing.plans.enterprise.description'
+      ),
+      features: getTranslation(language, 'pricing.plans.enterprise.features'),
+      buttonText: getTranslation(
+        language,
+        'pricing.plans.enterprise.buttonText'
+      ),
+      buttonClass:
+        'bg-[#F2F2F2] shadow-[0px_1px_1px_-0.5px_rgba(16,24,40,0.20)] text-black text-shadow-[0px_1px_1px_rgba(16,24,40,0.08)] hover:bg-[#F2F2F2]/90',
+    },
+  ];
+
+  const handleSubscribe = async () => {
+    try {
+      const userId = user?.id;
+      const cycle = isAnnual ? 'annual' : 'monthly';
+      const plan = 'starter';
+      const res = await createCheckout(userId || '', plan, cycle);
+      if (res?.url) {
+        window.location.href = res.url;
+      }
+    } catch {}
+  };
+
+  return (
+    <section className='flex flex-col items-center justify-start w-full px-5 py-8 my-0 overflow-hidden md:py-14'>
+      <h1 className='mt-2 text-3xl font-bold mb-2'>Upgrade Plan</h1>
+      <div className='relative flex flex-col items-center self-stretch justify-center gap-2 py-0'>
+        <div className='flex flex-col items-center justify-start gap-4'>
+          <div className='pt-4'>
+            <div className='p-0.5 bg-muted rounded-lg outline-1 outline-[#0307120a] outline-offset-[-1px] flex justify-start items-center gap-1 md:mt-0'>
+              <button
+                onClick={() => setIsAnnual(true)}
+                className={`pl-2 pr-1 py-1 flex justify-start items-start gap-2 rounded-md ${
+                  isAnnual
+                    ? 'bg-[#F2F2F2] shadow-[0px_1px_1px_-0.5px_rgba(0,0,0,0.08)]'
+                    : ''
+                }`}
+              >
+                <span
+                  className={`text-center text-sm font-medium leading-tight ${
+                    isAnnual ? 'text-black' : 'text-[#404040]'
+                  }`}
+                >
+                  {getTranslation(language, 'pricing.toggle.annual')}
+                </span>
+              </button>
+              <button
+                onClick={() => setIsAnnual(false)}
+                className={`px-2 py-1 flex justify-start items-start rounded-md ${
+                  !isAnnual
+                    ? 'bg-[#F2F2F2] shadow-[0px_1px_1px_-0.5px_rgba(0,0,0,0.08)]'
+                    : ''
+                }`}
+              >
+                <span
+                  className={`text-center text-sm font-medium leading-tight ${
+                    !isAnnual ? 'text-black' : 'text-[#404040]'
+                  }`}
+                >
+                  {getTranslation(language, 'pricing.toggle.monthly')}
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='self-stretch px-5 flex flex-col md:flex-row justify-start items-start gap-4 md:gap-6 mt-6 max-w-[1100px] mx-auto'>
+        {pricingPlans.map((plan) => {
+          const parseNumber = (s: string) => {
+            const n = Number(String(s).replace(/[^0-9.]/g, ''));
+            return Number.isFinite(n) ? n : 0;
+          };
+          const monthlyFromAnnual = plan.annualPrice
+            ? `$${Math.floor(parseNumber(plan.annualPrice) / 12)}`
+            : plan.monthlyPrice;
+          const displayMainPrice =
+            isAnnual && plan.annualPrice ? plan.annualPrice : plan.monthlyPrice;
+          const displaySecondaryPrice =
+            isAnnual && plan.annualPrice
+              ? `${Math.floor(parseNumber(plan.annualPrice) / 12)}/mes`
+              : '';
+          return (
+            <div
+              key={plan.name}
+              className={`flex-1 p-4 overflow-hidden rounded-xl flex flex-col justify-start items-start gap-6 h-full min-h-[600px] ${
+                plan.popular
+                  ? 'bg-[#FF9D14] shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.10)]'
+                  : 'bg-transparent'
+              }`}
+              style={
+                plan.popular
+                  ? {}
+                  : {
+                      outline: '1px solid rgba(128, 128, 128, 0.12)',
+                      outlineOffset: '-1px',
+                    }
+              }
+            >
+              <div className='flex flex-col items-start self-stretch justify-between h-full gap-6'>
+                <div className='flex flex-col items-start self-stretch justify-start gap-8'>
+                  <div
+                    className={`w-full h-5 text-sm font-medium leading-tight ${
+                      plan.popular ? 'text-white' : 'text-black'
+                    }`}
+                  >
+                    {plan.name}
+                    {plan.popular && (
+                      <div className='ml-2 px-2 overflow-hidden rounded-full justify-center items-center gap-2.5 inline-flex mt-0 py-0.5 bg-gradient-to-b from-white/30 to-[#FFC44D]'>
+                        <div className='text-xs font-normal leading-tight text-center break-words text-white'>
+                          {getTranslation(language, 'pricing.popular')}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                  <div className='flex flex-col items-start self-stretch justify-start gap-1'>
+                    {(plan.monthlyPrice || plan.annualPrice) && (
+                      <div className='flex justify-start items-center gap-1.5'>
+                        <div className='flex flex-col items-start'>
+                          <div
+                            className={`relative h-10 flex items-center text-3xl font-medium leading-10 ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                          >
+                            <span className='invisible'>
+                              {displayMainPrice}
+                            </span>
+                            <span
+                              className='absolute inset-0 flex items-center transition-all duration-500'
+                              style={{
+                                opacity: isAnnual ? 1 : 0,
+                                transform: `scale(${isAnnual ? 1 : 0.8})`,
+                                filter: `blur(${isAnnual ? 0 : 4}px)`,
+                              }}
+                              aria-hidden={!isAnnual}
+                            >
+                              {displayMainPrice}
+                            </span>
+                            <span
+                              className='absolute inset-0 flex items-center transition-all duration-500'
+                              style={{
+                                opacity: !isAnnual ? 1 : 0,
+                                transform: `scale(${!isAnnual ? 1 : 0.8})`,
+                                filter: `blur(${!isAnnual ? 0 : 4}px)`,
+                              }}
+                              aria-hidden={isAnnual}
+                            >
+                              {plan.monthlyPrice}
+                            </span>
+                          </div>
+                          {displaySecondaryPrice ? (
+                            <div
+                              className={`text-sm mt-1 ${
+                                plan.popular ? 'text-white/70' : 'text-black/70'
+                              }`}
+                            >
+                              {displaySecondaryPrice}
+                            </div>
+                          ) : null}
+                        </div>
+                        {!isAnnual && (
+                          <div
+                            className={`text-center text-sm font-medium leading-tight ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                          >
+                            {plan.name ===
+                            getTranslation(
+                              language,
+                              'pricing.plans.tester.name'
+                            )
+                              ? getTranslation(
+                                  language,
+                                  'pricing.period.tester'
+                                )
+                              : getTranslation(
+                                  language,
+                                  'pricing.period.other'
+                                )}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    <div
+                      className={`self-stretch text-sm font-medium leading-tight ${
+                        plan.popular ? 'text-white/70' : 'text-black/70'
+                      }`}
+                    >
+                      {plan.description}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='flex flex-col items-start self-stretch justify-start gap-4'>
+                  <div
+                    className={`self-stretch text-sm font-medium leading-tight ${
+                      plan.popular ? 'text-white/70' : 'text-black/70'
+                    }`}
+                  >
+                    {plan.name ===
+                    getTranslation(language, 'pricing.plans.tester.name')
+                      ? getTranslation(language, 'pricing.includes')
+                      : plan.name}
+                  </div>
+                  <div className='flex flex-col items-start self-stretch justify-start gap-3'>
+                    {plan.features.map((feature: string) => (
+                      <div
+                        key={feature}
+                        className='flex items-center self-stretch justify-start gap-2'
+                      >
+                        <div className='flex items-center justify-center w-4 h-4'>
+                          <Check
+                            className={`w-full h-full ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                            strokeWidth={2}
+                          />
+                        </div>
+                        <div
+                          className={`leading-tight font-normal text-sm text-left ${
+                            plan.popular ? 'text-white' : 'text-black'
+                          }`}
+                        >
+                          {feature}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {plan.name ===
+                getTranslation(language, 'pricing.plans.starter.name') ? (
+                  <Button
+                    onClick={handleSubscribe}
+                    className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
+                  >
+                    <div className='px-1.5 flex justify-center items-center gap-2'>
+                      <span
+                        className={`text-center text-sm font-medium leading-tight ${
+                          plan.name ===
+                          getTranslation(language, 'pricing.plans.tester.name')
+                            ? 'text-gray-800'
+                            : plan.name ===
+                              getTranslation(
+                                language,
+                                'pricing.plans.starter.name'
+                              )
+                            ? 'text-orange-500'
+                            : 'text-black'
+                        }`}
+                      >
+                        {plan.buttonText}
+                      </span>
+                    </div>
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={handleSubscribe}
+                    className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
+                  >
+                    <div className='px-1.5 flex justify-center items-center gap-2'>
+                      <span
+                        className={`text-center text-sm font-medium leading-tight ${
+                          plan.name ===
+                          getTranslation(language, 'pricing.plans.tester.name')
+                            ? 'text-gray-800'
+                            : plan.name ===
+                              getTranslation(
+                                language,
+                                'pricing.plans.starter.name'
+                              )
+                            ? 'text-orange-500'
+                            : 'text-black'
+                        }`}
+                      >
+                        {plan.buttonText}
+                      </span>
+                    </div>
+                  </Button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/frontend/src/components/landing/pricing-section.tsx b/frontend/src/components/landing/pricing-section.tsx
index cec00ee8..72cd9b2d 100644
--- a/frontend/src/components/landing/pricing-section.tsx
+++ b/frontend/src/components/landing/pricing-section.tsx
@@ -59,12 +59,12 @@ export function PricingSection() {
   const handleSubscribe = async () => {
     try {
       if (process.env.NEXT_PUBLIC_ENABLE_POLAR !== 'true') {
-        window.location.href = '/auth/login';
+        window.location.href = '/login';
         return;
       }
       const userId = user?.id;
       if (!userId) {
-        window.location.href = '/auth/login';
+        window.location.href = '/login';
         return;
       }
       const cycle = isAnnual ? 'annual' : 'monthly';
@@ -125,185 +125,222 @@ export function PricingSection() {
         </div>
       </div>
       <div className='self-stretch px-5 flex flex-col md:flex-row justify-start items-start gap-4 md:gap-6 mt-6 max-w-[1100px] mx-auto'>
-        {pricingPlans.map((plan) => (
-          <div
-            key={plan.name}
-            className={`flex-1 p-4 overflow-hidden rounded-xl flex flex-col justify-start items-start gap-6 h-full min-h-[600px] ${
-              plan.popular
-                ? 'bg-[#FF9D14] shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.10)]'
-                : 'bg-transparent'
-            }`}
-            style={
-              plan.popular
-                ? {}
-                : {
-                    outline: '1px solid rgba(128, 128, 128, 0.12)',
-                    outlineOffset: '-1px',
-                  }
-            }
-          >
-            <div className='flex flex-col items-start self-stretch justify-between h-full gap-6'>
-              <div className='flex flex-col items-start self-stretch justify-start gap-8'>
-                <div
-                  className={`w-full h-5 text-sm font-medium leading-tight ${
-                    plan.popular ? 'text-white' : 'text-black'
-                  }`}
-                >
-                  {plan.name}
-                  {plan.popular && (
-                    <div className='ml-2 px-2 overflow-hidden rounded-full justify-center items-center gap-2.5 inline-flex mt-0 py-0.5 bg-gradient-to-b from-white/30 to-[#FFC44D]'>
-                      <div className='text-xs font-normal leading-tight text-center break-words text-white'>
-                        {getTranslation(language, 'pricing.popular')}
-                      </div>
-                    </div>
-                  )}
-                </div>
-                <div className='flex flex-col items-start self-stretch justify-start gap-1'>
-                  {(plan.monthlyPrice || plan.annualPrice) && (
-                    <div className='flex justify-start items-center gap-1.5'>
-                      <div
-                        className={`relative h-10 flex items-center text-3xl font-medium leading-10 ${
-                          plan.popular ? 'text-white' : 'text-black'
-                        }`}
-                      >
-                        <span className='invisible'>
-                          {isAnnual ? plan.annualPrice : plan.monthlyPrice}
-                        </span>
-                        <span
-                          className='absolute inset-0 flex items-center transition-all duration-500'
-                          style={{
-                            opacity: isAnnual ? 1 : 0,
-                            transform: `scale(${isAnnual ? 1 : 0.8})`,
-                            filter: `blur(${isAnnual ? 0 : 4}px)`,
-                          }}
-                          aria-hidden={!isAnnual}
-                        >
-                          {plan.annualPrice}
-                        </span>
-                        <span
-                          className='absolute inset-0 flex items-center transition-all duration-500'
-                          style={{
-                            opacity: !isAnnual ? 1 : 0,
-                            transform: `scale(${!isAnnual ? 1 : 0.8})`,
-                            filter: `blur(${!isAnnual ? 0 : 4}px)`,
-                          }}
-                          aria-hidden={isAnnual}
-                        >
-                          {plan.monthlyPrice}
-                        </span>
+        {pricingPlans.map((plan) => {
+          const parseNumber = (s: string) => {
+            const n = Number(String(s).replace(/[^0-9.]/g, ''));
+            return Number.isFinite(n) ? n : 0;
+          };
+          const monthlyFromAnnual = plan.annualPrice
+            ? `$${Math.floor(parseNumber(plan.annualPrice) / 12)}`
+            : plan.monthlyPrice;
+          const displayMainPrice =
+            isAnnual && plan.annualPrice ? plan.annualPrice : plan.monthlyPrice;
+          const displaySecondaryPrice =
+            isAnnual && plan.annualPrice
+              ? `${Math.floor(parseNumber(plan.annualPrice) / 12)}/mes`
+              : '';
+          return (
+            <div
+              key={plan.name}
+              className={`flex-1 p-4 overflow-hidden rounded-xl flex flex-col justify-start items-start gap-6 h-full min-h-[600px] ${
+                plan.popular
+                  ? 'bg-[#FF9D14] shadow-[0px_4px_8px_-2px_rgba(0,0,0,0.10)]'
+                  : 'bg-transparent'
+              }`}
+              style={
+                plan.popular
+                  ? {}
+                  : {
+                      outline: '1px solid rgba(128, 128, 128, 0.12)',
+                      outlineOffset: '-1px',
+                    }
+              }
+            >
+              <div className='flex flex-col items-start self-stretch justify-between h-full gap-6'>
+                <div className='flex flex-col items-start self-stretch justify-start gap-8'>
+                  <div
+                    className={`w-full h-5 text-sm font-medium leading-tight ${
+                      plan.popular ? 'text-white' : 'text-black'
+                    }`}
+                  >
+                    {plan.name}
+                    {plan.popular && (
+                      <div className='ml-2 px-2 overflow-hidden rounded-full justify-center items-center gap-2.5 inline-flex mt-0 py-0.5 bg-gradient-to-b from-white/30 to-[#FFC44D]'>
+                        <div className='text-xs font-normal leading-tight text-center break-words text-white'>
+                          {getTranslation(language, 'pricing.popular')}
+                        </div>
                       </div>
-                      <div
-                        className={`text-center text-sm font-medium leading-tight ${
-                          plan.popular ? 'text-white' : 'text-black'
-                        }`}
-                      >
-                        {plan.name ===
-                        getTranslation(language, 'pricing.plans.tester.name')
-                          ? getTranslation(language, 'pricing.period.tester')
-                          : getTranslation(language, 'pricing.period.other')}
+                    )}
+                  </div>
+                  <div className='flex flex-col items-start self-stretch justify-start gap-1'>
+                    {(plan.monthlyPrice || plan.annualPrice) && (
+                      <div className='flex justify-start items-center gap-1.5'>
+                        <div className='flex flex-col items-start'>
+                          <div
+                            className={`relative h-10 flex items-center text-3xl font-medium leading-10 ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                          >
+                            <span className='invisible'>
+                              {displayMainPrice}
+                            </span>
+                            <span
+                              className='absolute inset-0 flex items-center transition-all duration-500'
+                              style={{
+                                opacity: isAnnual ? 1 : 0,
+                                transform: `scale(${isAnnual ? 1 : 0.8})`,
+                                filter: `blur(${isAnnual ? 0 : 4}px)`,
+                              }}
+                              aria-hidden={!isAnnual}
+                            >
+                              {displayMainPrice}
+                            </span>
+                            <span
+                              className='absolute inset-0 flex items-center transition-all duration-500'
+                              style={{
+                                opacity: !isAnnual ? 1 : 0,
+                                transform: `scale(${!isAnnual ? 1 : 0.8})`,
+                                filter: `blur(${!isAnnual ? 0 : 4}px)`,
+                              }}
+                              aria-hidden={isAnnual}
+                            >
+                              {plan.monthlyPrice}
+                            </span>
+                          </div>
+                          {displaySecondaryPrice ? (
+                            <div
+                              className={`text-sm mt-1 ${
+                                plan.popular ? 'text-white/70' : 'text-black/70'
+                              }`}
+                            >
+                              {displaySecondaryPrice}
+                            </div>
+                          ) : null}
+                        </div>
+                        {!isAnnual && (
+                          <div
+                            className={`text-center text-sm font-medium leading-tight ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                          >
+                            {plan.name ===
+                            getTranslation(
+                              language,
+                              'pricing.plans.tester.name'
+                            )
+                              ? getTranslation(
+                                  language,
+                                  'pricing.period.tester'
+                                )
+                              : getTranslation(
+                                  language,
+                                  'pricing.period.other'
+                                )}
+                          </div>
+                        )}
                       </div>
+                    )}
+                    <div
+                      className={`self-stretch text-sm font-medium leading-tight ${
+                        plan.popular ? 'text-white/70' : 'text-black/70'
+                      }`}
+                    >
+                      {plan.description}
                     </div>
-                  )}
+                  </div>
+                </div>
+
+                <div className='flex flex-col items-start self-stretch justify-start gap-4'>
                   <div
                     className={`self-stretch text-sm font-medium leading-tight ${
                       plan.popular ? 'text-white/70' : 'text-black/70'
                     }`}
                   >
-                    {plan.description}
+                    {plan.name ===
+                    getTranslation(language, 'pricing.plans.tester.name')
+                      ? getTranslation(language, 'pricing.includes')
+                      : plan.name}
                   </div>
-                </div>
-              </div>
-
-              <div className='flex flex-col items-start self-stretch justify-start gap-4'>
-                <div
-                  className={`self-stretch text-sm font-medium leading-tight ${
-                    plan.popular ? 'text-white/70' : 'text-black/70'
-                  }`}
-                >
-                  {plan.name ===
-                  getTranslation(language, 'pricing.plans.tester.name')
-                    ? getTranslation(language, 'pricing.includes')
-                    : plan.name}
-                </div>
-                <div className='flex flex-col items-start self-stretch justify-start gap-3'>
-                  {plan.features.map((feature: string) => (
-                    <div
-                      key={feature}
-                      className='flex items-center self-stretch justify-start gap-2'
-                    >
-                      <div className='flex items-center justify-center w-4 h-4'>
-                        <Check
-                          className={`w-full h-full ${
+                  <div className='flex flex-col items-start self-stretch justify-start gap-3'>
+                    {plan.features.map((feature: string) => (
+                      <div
+                        key={feature}
+                        className='flex items-center self-stretch justify-start gap-2'
+                      >
+                        <div className='flex items-center justify-center w-4 h-4'>
+                          <Check
+                            className={`w-full h-full ${
+                              plan.popular ? 'text-white' : 'text-black'
+                            }`}
+                            strokeWidth={2}
+                          />
+                        </div>
+                        <div
+                          className={`leading-tight font-normal text-sm text-left ${
                             plan.popular ? 'text-white' : 'text-black'
                           }`}
-                          strokeWidth={2}
-                        />
+                        >
+                          {feature}
+                        </div>
                       </div>
-                      <div
-                        className={`leading-tight font-normal text-sm text-left ${
-                          plan.popular ? 'text-white' : 'text-black'
+                    ))}
+                  </div>
+                </div>
+
+                {plan.name ===
+                getTranslation(language, 'pricing.plans.starter.name') ? (
+                  <Button
+                    onClick={handleSubscribe}
+                    className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
+                  >
+                    <div className='px-1.5 flex justify-center items-center gap-2'>
+                      <span
+                        className={`text-center text-sm font-medium leading-tight ${
+                          plan.name ===
+                          getTranslation(language, 'pricing.plans.tester.name')
+                            ? 'text-gray-800'
+                            : plan.name ===
+                              getTranslation(
+                                language,
+                                'pricing.plans.starter.name'
+                              )
+                            ? 'text-orange-500'
+                            : 'text-black'
                         }`}
                       >
-                        {feature}
-                      </div>
+                        {plan.buttonText}
+                      </span>
                     </div>
-                  ))}
-                </div>
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={handleSubscribe}
+                    className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
+                  >
+                    <div className='px-1.5 flex justify-center items-center gap-2'>
+                      <span
+                        className={`text-center text-sm font-medium leading-tight ${
+                          plan.name ===
+                          getTranslation(language, 'pricing.plans.tester.name')
+                            ? 'text-gray-800'
+                            : plan.name ===
+                              getTranslation(
+                                language,
+                                'pricing.plans.starter.name'
+                              )
+                            ? 'text-orange-500'
+                            : 'text-black'
+                        }`}
+                      >
+                        {plan.buttonText}
+                      </span>
+                    </div>
+                  </Button>
+                )}
               </div>
-
-              {plan.name ===
-              getTranslation(language, 'pricing.plans.starter.name') ? (
-                <Button
-                  onClick={handleSubscribe}
-                  className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
-                >
-                  <div className='px-1.5 flex justify-center items-center gap-2'>
-                    <span
-                      className={`text-center text-sm font-medium leading-tight ${
-                        plan.name ===
-                        getTranslation(language, 'pricing.plans.tester.name')
-                          ? 'text-gray-800'
-                          : plan.name ===
-                            getTranslation(
-                              language,
-                              'pricing.plans.starter.name'
-                            )
-                          ? 'text-orange-500'
-                          : 'text-black'
-                      }`}
-                    >
-                      {plan.buttonText}
-                    </span>
-                  </div>
-                </Button>
-              ) : (
-                <Button
-                  onClick={handleSubscribe}
-                  className={`self-stretch px-5 py-2 rounded-[40px] flex justify-center items-center ${plan.buttonClass}`}
-                >
-                  <div className='px-1.5 flex justify-center items-center gap-2'>
-                    <span
-                      className={`text-center text-sm font-medium leading-tight ${
-                        plan.name ===
-                        getTranslation(language, 'pricing.plans.tester.name')
-                          ? 'text-gray-800'
-                          : plan.name ===
-                            getTranslation(
-                              language,
-                              'pricing.plans.starter.name'
-                            )
-                          ? 'text-orange-500'
-                          : 'text-black'
-                      }`}
-                    >
-                      {plan.buttonText}
-                    </span>
-                  </div>
-                </Button>
-              )}
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </section>
   );
diff --git a/frontend/src/components/profile/AvatarUploader.tsx b/frontend/src/components/profile/AvatarUploader.tsx
index d96199ab..6dbdbbd7 100644
--- a/frontend/src/components/profile/AvatarUploader.tsx
+++ b/frontend/src/components/profile/AvatarUploader.tsx
@@ -1,20 +1,80 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { authAPI } from '@/services/api.service';
 
 type Props = {
   imageUrl?: string | null;
-  onChange: (file: File | null) => void;
+  onImageUpdated: (newImageUrl: string | null, updatedUser?: any) => void;
+  onError?: (error: string) => void;
 };
 
-const AvatarUploader: React.FC<Props> = ({ imageUrl, onChange }) => {
+const AvatarUploader: React.FC<Props> = ({
+  imageUrl,
+  onImageUpdated,
+  onError,
+}) => {
+  const [uploading, setUploading] = useState(false);
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 5 * 1024 * 1024) {
+      onError?.('File size must be less than 5MB');
+      return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+      onError?.('Please select an image file');
+      return;
+    }
+
+    setUploading(true);
+    try {
+      const res = await authAPI.uploadProfileImage(file);
+      if (res.success && res.user && res.user.profile_image) {
+        onImageUpdated(res.user.profile_image, res.user);
+      } else if (res.success) {
+        onImageUpdated(null, res.user);
+      } else {
+        onError?.('Upload failed');
+      }
+    } catch (err) {
+      onError?.(err instanceof Error ? err.message : 'Upload failed');
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleDeleteImage = async () => {
+    if (!imageUrl) return;
+    setUploading(true);
+    try {
+      const res = await authAPI.deleteProfileImage();
+      if (res.success) {
+        onImageUpdated(null, res.user);
+      } else {
+        onError?.('Delete failed');
+      }
+    } catch (err) {
+      onError?.(err instanceof Error ? err.message : 'Delete failed');
+    } finally {
+      setUploading(false);
+    }
+  };
+
   return (
-    <div className='flex items-center space-x-4  '>
+    <div className='flex items-center space-x-4'>
       <div className='relative'>
-        <div className='flex items-center justify-center w-20 h-20 rounded-full bg-[#E28E18] '>
-          {imageUrl ? (
+        <div className='flex items-center justify-center w-32 h-32 rounded-full bg-[#E28E18]'>
+          {uploading ? (
+            <div className='flex items-center justify-center w-8 h-8'>
+              <div className='w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
+            </div>
+          ) : imageUrl ? (
             <img
               src={imageUrl}
               alt='avatar'
-              className='object-cover w-20 h-20 rounded-full'
+              className='object-cover w-32 h-32 rounded-full'
             />
           ) : (
             <svg
@@ -33,35 +93,57 @@ const AvatarUploader: React.FC<Props> = ({ imageUrl, onChange }) => {
             </svg>
           )}
         </div>
-        <label className='absolute flex items-center justify-center w-8 h-8 transition-colors rounded-full cursor-pointer -bottom-1 -right-1 bg-[#A94D14] hover:bg-[#8A3D16]'>
-          <input
-            type='file'
-            accept='image/*'
-            className='hidden'
-            onChange={(e) =>
-              onChange(e.target.files ? e.target.files[0] : null)
-            }
-          />
-          <svg
-            width='16'
-            height='16'
-            viewBox='0 0 24 24'
-            fill='none'
-            stroke='currentColor'
-            strokeWidth='2'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-            className='text-white'
+        {!uploading && (
+          <label className='absolute flex items-center justify-center w-8 h-8 transition-colors rounded-full cursor-pointer -bottom-1 -right-1 bg-[#A94D14] hover:bg-[#8A3D16]'>
+            <input
+              type='file'
+              accept='image/*'
+              className='hidden'
+              onChange={handleFileChange}
+              disabled={uploading}
+            />
+            <svg
+              width='16'
+              height='16'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              className='text-white'
+            >
+              <path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' />
+              <polyline points='7 10 12 15 17 10' />
+              <line x1='12' y1='15' x2='12' y2='3' />
+            </svg>
+          </label>
+        )}
+        {imageUrl && !uploading && (
+          <button
+            onClick={handleDeleteImage}
+            className='absolute flex items-center justify-center w-6 h-6 transition-colors rounded-full cursor-pointer -top-1 -right-1 bg-red-500 hover:bg-red-600'
           >
-            <path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' />
-            <polyline points='7 10 12 15 17 10' />
-            <line x1='12' y1='15' x2='12' y2='3' />
-          </svg>
-        </label>
+            <svg
+              width='12'
+              height='12'
+              viewBox='0 0 24 24'
+              fill='none'
+              stroke='currentColor'
+              strokeWidth='2'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              className='text-white'
+            >
+              <line x1='18' y1='6' x2='6' y2='18'></line>
+              <line x1='6' y1='6' x2='18' y2='18'></line>
+            </svg>
+          </button>
+        )}
       </div>
       <div>
         <div className='text-sm font-medium text-[#A94D14]'>
-          Change avatar
+          {uploading ? 'Uploading...' : 'Change avatar'}
         </div>
         <div className='text-sm text-[#88888888]'>PNG, JPG up to 5MB</div>
       </div>
diff --git a/frontend/src/components/profile/ProfileForm.tsx b/frontend/src/components/profile/ProfileForm.tsx
index 200b7f21..a4de9529 100644
--- a/frontend/src/components/profile/ProfileForm.tsx
+++ b/frontend/src/components/profile/ProfileForm.tsx
@@ -1,19 +1,14 @@
-"use client";
+'use client';
 
-import React, { useEffect, useRef } from "react";
-import { Formik, Form, Field, ErrorMessage } from "formik";
-import * as Yup from "yup";
+import React, { useEffect, useRef } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import * as Yup from 'yup';
 
 type Values = {
   full_name: string;
   email: string;
   phone?: string;
   address?: string;
-  language: string;
-  timezone: string;
-  dateFormat: string;
-  currency: string;
-  twoFactorEnabled: boolean;
 };
 
 type Props = {
@@ -23,8 +18,10 @@ type Props = {
 };
 
 const schema = Yup.object().shape({
-  full_name: Yup.string().required("Full name is required"),
-  email: Yup.string().email("Invalid email").required("Email is required"),
+  full_name: Yup.string(),
+  email: Yup.string().email('Invalid email'),
+  phone: Yup.string(),
+  address: Yup.string(),
 });
 
 const ProfileForm: React.FC<Props> = ({
@@ -39,15 +36,10 @@ const ProfileForm: React.FC<Props> = ({
   }, [submitSignal]);
 
   const defaults: Values = {
-    full_name: initialValues.full_name || "",
-    email: initialValues.email || "",
-    phone: initialValues.phone || "",
-    address: initialValues.address || "",
-    language: (initialValues.language as string) || "en",
-    timezone: (initialValues.timezone as string) || "America/New_York",
-    dateFormat: (initialValues.dateFormat as string) || "MM/DD/YYYY",
-    currency: (initialValues.currency as string) || "USD",
-    twoFactorEnabled: !!initialValues.twoFactorEnabled,
+    full_name: initialValues.full_name || '',
+    email: initialValues.email || '',
+    phone: initialValues.phone || '',
+    address: initialValues.address || '',
   };
 
   return (
@@ -60,146 +52,56 @@ const ProfileForm: React.FC<Props> = ({
         submitRef.current = formik.submitForm;
         return (
           <Form>
-            <div className="p-6 mb-6 border rounded-lg shadow-sm bg-[#FFFFFF] border-[#CBD5E1]">
-              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div className='p-6 mb-6 border rounded-lg shadow-sm bg-[#FFFFFF] border-[#CBD5E1]'>
+              <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
                 <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
+                  <label className='block mb-2 text-sm font-medium text-[#000000]'>
                     Full Name
                   </label>
                   <Field
-                    name="full_name"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
+                    name='full_name'
+                    className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]'
                   />
-                  <div className="mt-1 text-xs text-red-500">
-                    <ErrorMessage name="full_name" />
+                  <div className='mt-1 text-xs text-red-500'>
+                    <ErrorMessage name='full_name' />
                   </div>
                 </div>
 
                 <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
+                  <label className='block mb-2 text-sm font-medium text-[#000000]'>
                     Email
                   </label>
                   <Field
-                    name="email"
-                    type="email"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
+                    name='email'
+                    type='email'
+                    className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]'
                   />
-                  <div className="mt-1 text-xs text-red-500">
-                    <ErrorMessage name="email" />
+                  <div className='mt-1 text-xs text-red-500'>
+                    <ErrorMessage name='email' />
                   </div>
                 </div>
 
                 <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
+                  <label className='block mb-2 text-sm font-medium text-[#000000]'>
                     Phone
                   </label>
                   <Field
-                    name="phone"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
+                    name='phone'
+                    className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]'
                   />
                 </div>
 
                 <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
+                  <label className='block mb-2 text-sm font-medium text-[#000000]'>
                     Address
                   </label>
                   <Field
-                    name="address"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
+                    name='address'
+                    className='w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]'
                   />
                 </div>
               </div>
             </div>
-
-            <div className="p-6 mb-6 border rounded-lg shadow-sm bg-[#FFFFFF] border-[#CBD5E1]">
-              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
-                    Language
-                  </label>
-                  <Field
-                    as="select"
-                    name="language"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
-                  >
-                    <option value="en">English</option>
-                    <option value="es">Spanish</option>
-                    <option value="fr">French</option>
-                    <option value="pt">Português</option>
-                  </Field>
-                </div>
-
-                <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
-                    Timezone
-                  </label>
-                  <Field
-                    as="select"
-                    name="timezone"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
-                  >
-                    <option value="America/Mexico_City">
-                      Mexico City (GMT-6)
-                    </option>
-                    <option value="America/New_York">New York (GMT-5)</option>
-                    <option value="America/Los_Angeles">
-                      Los Angeles (GMT-8)
-                    </option>
-                    <option value="Europe/Madrid">Madrid (GMT+1)</option>
-                  </Field>
-                </div>
-
-                <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
-                    Date Format
-                  </label>
-                  <Field
-                    as="select"
-                    name="dateFormat"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
-                  >
-                    <option value="DD/MM/YYYY">DD/MM/YYYY</option>
-                    <option value="MM/DD/YYYY">MM/DD/YYYY</option>
-                    <option value="YYYY-MM-DD">YYYY-MM-DD</option>
-                  </Field>
-                </div>
-
-                <div>
-                  <label className="block mb-2 text-sm font-medium text-[#000000]">
-                    Currency
-                  </label>
-                  <Field
-                    as="select"
-                    name="currency"
-                    className="w-full p-3 border rounded-lg border-[#CBD5E1] focus:ring-2 focus:ring-[#CBD5E1] focus:border-transparent bg-[#FFFFFF] text-[#000000]"
-                  >
-                    <option value="USD">USD - US Dollar</option>
-                    <option value="MXN">MXN - Mexican Peso</option>
-                    <option value="EUR">EUR - Euro</option>
-                    <option value="GBP">GBP - British Pound</option>
-                  </Field>
-                </div>
-
-                <div>
-                  <label className="flex items-center space-x-2 cursor-pointer">
-                    <Field name="twoFactorEnabled">
-                      {({ field }: any) => (
-                        <input
-                          {...field}
-                          type="checkbox"
-                          className="peer w-4 h-4 rounded border border-[#CBD5E1] bg-white
-                            checked:bg-[#EEB131] checked:border-[#767676]
-                            focus:outline-none  focus:ring-[#767676] appearance-none"
-                        />
-                      )}
-                    </Field>
-                    <span className="text-sm text-[#888888] peer-checked:text-[#000000]">
-                      Two-factor authentication
-                    </span>
-                  </label>
-                </div>
-              </div>
-            </div>
           </Form>
         );
       }}
diff --git a/frontend/src/context/auth-store.tsx b/frontend/src/context/auth-store.tsx
index 773e30e7..3ecc4cab 100644
--- a/frontend/src/context/auth-store.tsx
+++ b/frontend/src/context/auth-store.tsx
@@ -20,16 +20,13 @@ interface AuthState {
   loading: boolean;
   error: string | null;
   initialized: boolean;
-  login: (email: string, password: string, remember?: boolean) => Promise<void>;
-  register: (
-    data: {
-      full_name: string;
-      email: string;
-      password: string;
-      phone?: string;
-    },
-    remember?: boolean
-  ) => Promise<void>;
+  login: (email: string, password: string) => Promise<void>;
+  register: (data: {
+    full_name: string;
+    email: string;
+    password: string;
+    phone?: string;
+  }) => Promise<void>;
   logout: () => Promise<void>;
   loadFromCookies: () => Promise<void>;
   setUser: (user: User | null) => void;
@@ -79,16 +76,14 @@ export const useAuthStore = create<AuthState>((set, get) => {
         }
       }
     },
-    login: async (email, password, remember = false) => {
+    login: async (email, password) => {
       set({ loading: true, error: null });
       try {
         const res = await authAPI.login({ email, password });
         if (!res.token) throw new Error('Token no recibido');
-        setAuthToken(res.token, remember);
+        setAuthToken(res.token);
         if (res.user) {
-          setCookie(USER_COOKIE, JSON.stringify(res.user), {
-            expires: remember ? 30 : 7,
-          });
+          setCookie(USER_COOKIE, JSON.stringify(res.user), { expires: 7 });
         }
         set({ token: res.token, user: res.user || null, loading: false });
       } catch (e: any) {
@@ -99,16 +94,14 @@ export const useAuthStore = create<AuthState>((set, get) => {
         throw e;
       }
     },
-    register: async (data, remember = false) => {
+    register: async (data) => {
       set({ loading: true, error: null });
       try {
         const res = await authAPI.register(data);
         if (!res.token) throw new Error('Token no recibido');
-        setAuthToken(res.token, remember);
+        setAuthToken(res.token);
         if (res.user) {
-          setCookie(USER_COOKIE, JSON.stringify(res.user), {
-            expires: remember ? 30 : 7,
-          });
+          setCookie(USER_COOKIE, JSON.stringify(res.user), { expires: 7 });
         }
         set({ token: res.token, user: res.user || null, loading: false });
       } catch (e: any) {
diff --git a/frontend/src/services/api.service.ts b/frontend/src/services/api.service.ts
index a2da1ee9..5cac8dbc 100644
--- a/frontend/src/services/api.service.ts
+++ b/frontend/src/services/api.service.ts
@@ -32,24 +32,19 @@ import type {
 } from '@/types';
 import { getAuthToken as getCookieAuthToken } from '@/services/cookies.service';
 
-const apiEnv = process.env.NEXT_PUBLIC_API_URL;
-const ocrEnv = process.env.NEXT_PUBLIC_OCR_API_URL;
 const appName = process.env.NEXT_PUBLIC_APP_NAME;
 const appVersion = process.env.NEXT_PUBLIC_APP_VERSION;
 const ocrMaxFileSize = process.env.NEXT_PUBLIC_OCR_MAX_FILE_SIZE;
 const ocrSupportedFormats = process.env.NEXT_PUBLIC_OCR_SUPPORTED_FORMATS;
 
-if (!apiEnv) throw new Error('Missing NEXT_PUBLIC_API_URL');
-if (!ocrEnv) throw new Error('Missing NEXT_PUBLIC_OCR_API_URL');
 if (!appName) throw new Error('Missing NEXT_PUBLIC_APP_NAME');
 if (!appVersion) throw new Error('Missing NEXT_PUBLIC_APP_VERSION');
 if (!ocrMaxFileSize) throw new Error('Missing NEXT_PUBLIC_OCR_MAX_FILE_SIZE');
 if (!ocrSupportedFormats)
   throw new Error('Missing NEXT_PUBLIC_OCR_SUPPORTED_FORMATS');
 
-const API_BASE_URL: string = apiEnv;
-const OCR_API_BASE_URL_RAW: string = ocrEnv;
-const OCR_API_BASE_URL: string = OCR_API_BASE_URL_RAW.replace(/\/+$/g, '');
+const API_BASE_URL: string = '';
+const OCR_API_BASE_URL: string = '/api/ocr';
 
 export const API_CONFIG = {
   BASE_URL: API_BASE_URL,
@@ -71,14 +66,26 @@ const getAuthToken = (): string | undefined => {
 };
 
 const axiosInstance: AxiosInstance = axios.create({
-  baseURL: API_BASE_URL,
+  baseURL: '/api',
   timeout: API_CONFIG.TIMEOUT,
   headers: { 'Content-Type': 'application/json' },
 });
 
 axiosInstance.interceptors.request.use((cfg) => {
   const token = getAuthToken();
-  if (token) cfg.headers.Authorization = `Bearer ${token}`;
+  if (token) {
+    cfg.headers.Authorization = `Bearer ${token}`;
+  } else if (typeof window !== 'undefined') {
+    const userStr = localStorage.getItem('user');
+    if (userStr) {
+      try {
+        const user = JSON.parse(userStr);
+        if (user && user.access_token) {
+          cfg.headers.Authorization = `Bearer ${user.access_token}`;
+        }
+      } catch {}
+    }
+  }
   return cfg;
 });
 
@@ -106,33 +113,36 @@ const apiRequest = async <T>(
 /// Auth
 export const authAPI = {
   login: (credentials: LoginRequest): Promise<AuthResponse> =>
-    apiRequest('/api/auth/login', { method: 'POST', data: credentials }),
+    apiRequest('/auth/login', { method: 'POST', data: credentials }),
   register: (userData: RegisterRequest): Promise<AuthResponse> =>
-    apiRequest('/api/auth/register', { method: 'POST', data: userData }),
-  getCurrentUser: (): Promise<User> => apiRequest('/api/auth/me'),
+    apiRequest('/auth/register', { method: 'POST', data: userData }),
+  getCurrentUser: (): Promise<User> => apiRequest('/auth/me'),
   getUserById: (userId: string): Promise<User> =>
-    apiRequest(`/api/auth/users/${userId}`),
-  getAllUsers: (): Promise<User[]> => apiRequest('/api/auth/users'),
+    apiRequest(`/auth/users/${userId}`),
+  getAllUsers: (): Promise<User[]> => apiRequest('/auth/users'),
   uploadProfileImage: (
     file: File
-  ): Promise<{ success: boolean; message: string; image_url?: string }> => {
+  ): Promise<{ success: boolean; user?: any; message?: string }> => {
     const formData = new FormData();
     formData.append('file', file);
-    return apiRequest('/api/auth/upload-profile-image', {
+    return apiRequest('/profile/image', {
       method: 'POST',
       data: formData,
       headers: { 'Content-Type': 'multipart/form-data' },
     });
   },
-  deleteProfileImage: (): Promise<{ success: boolean; message: string }> =>
-    apiRequest('/api/auth/delete-profile-image', { method: 'DELETE' }),
+  deleteProfileImage: (): Promise<{
+    success: boolean;
+    user?: any;
+    message?: string;
+  }> => apiRequest('/profile/image', { method: 'DELETE' }),
   updateProfileImage: (
     file: File
-  ): Promise<{ success: boolean; message: string; image_url?: string }> => {
+  ): Promise<{ success: boolean; user?: any; message?: string }> => {
     const formData = new FormData();
     formData.append('file', file);
-    return apiRequest('/api/auth/update-profile-image', {
-      method: 'PUT',
+    return apiRequest('/profile/image', {
+      method: 'PATCH',
       data: formData,
       headers: { 'Content-Type': 'multipart/form-data' },
     });
@@ -141,80 +151,80 @@ export const authAPI = {
 
 /// Products
 export const productsAPI = {
-  create: (productData: CreateProductRequest): Promise<ProductResponse> =>
-    apiRequest('/api/products/', { method: 'POST', data: productData }),
-  createBulk: (
-    productsData: CreateProductRequest[]
-  ): Promise<ProductResponse[]> =>
-    apiRequest('/api/products/bulk', { method: 'POST', data: productsData }),
-  getById: (
-    productId: string
-  ): Promise<{ success: boolean; message: string; product: Product }> =>
-    apiRequest(`/api/products/${productId}`),
-  update: (
-    productId: string,
-    updates: UpdateProductRequest
-  ): Promise<{ success: boolean; message: string; product: Product }> =>
-    apiRequest(`/api/products/${productId}`, { method: 'PUT', data: updates }),
-  delete: (
-    productId: string
-  ): Promise<{ success: boolean; message: string; product: Product }> =>
-    apiRequest(`/api/products/${productId}`, { method: 'DELETE' }),
-  list: (): Promise<ProductsResponse> => apiRequest('/api/products/'),
-  addImages: (
-    productId: string,
-    images: File[]
-  ): Promise<{ success: boolean; message: string; product: Product }> => {
-    const formData = new FormData();
-    images.forEach((image) => formData.append('images', image));
-    return apiRequest(`/api/products/${productId}/images`, {
+  create: (productData: any, organizationId?: string): Promise<any> => {
+    if (productData && productData.images && productData.images.length > 0) {
+      const form = new FormData();
+      form.append('name', productData.name);
+      if (productData.description)
+        form.append('description', productData.description);
+      form.append(
+        'billing_interval',
+        productData.billing_interval || productData.recurring_interval || 'once'
+      );
+      form.append(
+        'price',
+        String(
+          productData.price ||
+            (productData.prices?.[0]?.price_amount || 0) / 100
+        )
+      );
+      form.append(
+        'stock',
+        String(productData.metadata?.quantity || productData.stock || 0)
+      );
+      const img = productData.images[0];
+      form.append('image', img);
+      return apiRequest('/products/', {
+        method: 'POST',
+        data: form,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+    }
+    return apiRequest('/products/', {
       method: 'POST',
-      data: formData,
-      headers: { 'Content-Type': 'multipart/form-data' },
-    });
-  },
-  getImages: (
-    productId: string
-  ): Promise<{ success: boolean; images: string[] }> =>
-    apiRequest(`/api/products/${productId}/images`),
-  updateImages: (
-    productId: string,
-    images: File[]
-  ): Promise<{ success: boolean; message: string; product: Product }> => {
-    const formData = new FormData();
-    images.forEach((image) => formData.append('images', image));
-    return apiRequest(`/api/products/${productId}/images`, {
-      method: 'PUT',
-      data: formData,
-      headers: { 'Content-Type': 'multipart/form-data' },
+      data: { ...productData },
     });
   },
-  deleteImage: (
-    productId: string,
-    imageIndex: number
-  ): Promise<{ success: boolean; message: string; product: Product }> =>
-    apiRequest(`/api/products/${productId}/images/${imageIndex}`, {
-      method: 'DELETE',
+  createBulk: (products: any[]): Promise<any> =>
+    apiRequest('/products/bulk', {
+      method: 'POST',
+      data: { products },
     }),
+  getById: (productId: string): Promise<any> =>
+    apiRequest(`/products/?id=${productId}`),
+  update: (productId: string, updates: any): Promise<any> =>
+    apiRequest(`/products/?id=${productId}`, {
+      method: 'PATCH',
+      data: updates,
+    }),
+  delete: (productId: string): Promise<any> =>
+    apiRequest(`/products/?id=${productId}`, { method: 'DELETE' }),
+  list: (organizationId?: string): Promise<any> => {
+    const params = organizationId ? `?organization_id=${organizationId}` : '';
+    return apiRequest(`/products/${params}`);
+  },
 };
 
-export const getActiveProducts = async (): Promise<ProductsResponse> => {
-  return apiRequest('/api/products/active');
+export const getActiveProducts = async (
+  organizationId?: string
+): Promise<any> => {
+  const params = organizationId ? `?organization_id=${organizationId}` : '';
+  return apiRequest(`/products/${params}`);
 };
 
 export const getAllProducts = getActiveProducts;
 
 /// Inventory
 export const inventoryAPI = {
-  get: (): Promise<InventoryResponse> => apiRequest('/api/inventory'),
-  getUser: (): Promise<InventoryResponse> => apiRequest('/api/inventory/user'),
+  get: (): Promise<InventoryResponse> => apiRequest('/inventory'),
+  getUser: (): Promise<InventoryResponse> => apiRequest('/inventory/user'),
   getSummary: (): Promise<{ success: boolean; summary: InventorySummary }> =>
-    apiRequest('/api/inventory/summary'),
+    apiRequest('/inventory/summary'),
   getLowStock: (
     threshold?: number
   ): Promise<{ success: boolean; low_stock_products: InventoryProduct[] }> =>
     apiRequest(
-      `/api/inventory/low-stock${
+      `/inventory/low-stock${
         threshold !== undefined ? `?threshold=${threshold}` : ''
       }`
     ),
@@ -224,7 +234,7 @@ export const inventoryAPI = {
     success: boolean;
     message?: string;
     product?: InventoryProduct;
-  }> => apiRequest(`/api/inventory/${productId}`),
+  }> => apiRequest(`/inventory/${productId}`),
 };
 
 const ocrAxios: AxiosInstance = axios.create({
@@ -264,7 +274,7 @@ export const ocrAPI = {
   process: (file: File): Promise<OCRResponse> => {
     const formData = new FormData();
     formData.append('file', file);
-    return ocrRequest('/ocr', {
+    return ocrRequest('/', {
       method: 'POST',
       data: formData,
       headers: { 'Content-Type': 'multipart/form-data' },
@@ -278,48 +288,47 @@ export const ocrAPI = {
 /// Sales
 export const salesAPI = {
   create: (saleData: CreateSaleRequest): Promise<Sale> =>
-    apiRequest('/api/sales/', { method: 'POST', data: saleData }),
-  getById: (saleId: string): Promise<Sale> =>
-    apiRequest(`/api/sales/${saleId}`),
-  getHistory: (): Promise<Sale[]> => apiRequest('/api/sales/'),
+    apiRequest('/sales/', { method: 'POST', data: saleData }),
+  getById: (saleId: string): Promise<Sale> => apiRequest(`/sales/${saleId}`),
+  getHistory: (): Promise<Sale[]> => apiRequest('/sales/'),
 };
-
 export const profileAPI = {
-  get: (): Promise<{ success: boolean; user: User }> =>
-    apiRequest('/api/profile'),
+  get: (): Promise<{ success: boolean; user: User }> => apiRequest('/profile'),
   update: (
     profileData: Partial<User>
   ): Promise<{ success: boolean; message: string; user: User }> =>
-    apiRequest('/api/profile', { method: 'PUT', data: profileData }),
+    apiRequest('/profile', { method: 'PATCH', data: profileData }),
   changePassword: (passwordData: {
     oldPassword: string;
     newPassword: string;
   }): Promise<{ success: boolean; message: string }> =>
-    apiRequest('/api/profile/password', { method: 'PUT', data: passwordData }),
+    apiRequest('/profile/password', { method: 'PUT', data: passwordData }),
+  deleteUser: (): Promise<{ success: boolean; user?: User }> =>
+    apiRequest('/profile', { method: 'DELETE' }),
 };
 
 /// Layouts
 export const layoutsAPI = {
   create: (layoutData: CreateLayoutRequest): Promise<LayoutResponse> =>
-    apiRequest('/api/layouts/', { method: 'POST', data: layoutData }),
+    apiRequest('/layouts/', { method: 'POST', data: layoutData }),
   getBySlug: (layoutSlug: string): Promise<LayoutResponse> =>
-    apiRequest(`/api/layouts/${layoutSlug}`),
+    apiRequest(`/layouts/${layoutSlug}`),
   update: (
     layoutSlug: string,
     updates: UpdateLayoutRequest
   ): Promise<LayoutResponse> =>
-    apiRequest(`/api/layouts/${layoutSlug}`, { method: 'PUT', data: updates }),
+    apiRequest(`/layouts/${layoutSlug}`, { method: 'PUT', data: updates }),
   delete: (layoutSlug: string): Promise<LayoutResponse> =>
-    apiRequest(`/api/layouts/${layoutSlug}`, { method: 'DELETE' }),
-  list: (): Promise<LayoutsResponse> => apiRequest('/api/layouts/'),
+    apiRequest(`/layouts/${layoutSlug}`, { method: 'DELETE' }),
+  list: (): Promise<LayoutsResponse> => apiRequest('/layouts/'),
   listByOwner: (ownerId: string): Promise<LayoutsResponse> =>
-    apiRequest(`/api/layouts/owner/${ownerId}`),
+    apiRequest(`/layouts/owner/${ownerId}`),
   listByInventory: (inventoryId: string): Promise<LayoutsResponse> =>
-    apiRequest(`/api/layouts/inventory/${inventoryId}`),
+    apiRequest(`/layouts/inventory/${inventoryId}`),
 };
 
 export const categoriesAPI = {
-  list: (): Promise<CategoriesResponse> => apiRequest('/api/categories/'),
+  list: (): Promise<CategoriesResponse> => apiRequest('/categories/'),
   getById: (id: string): Promise<{ success: boolean; category: Category }> =>
-    apiRequest(`/api/categories/${id}`),
+    apiRequest(`/categories/${id}`),
 };
diff --git a/frontend/src/services/cart-cache.service.ts b/frontend/src/services/cart-cache.service.ts
index 99b5bb25..c3df1ce9 100644
--- a/frontend/src/services/cart-cache.service.ts
+++ b/frontend/src/services/cart-cache.service.ts
@@ -1,10 +1,13 @@
 interface CartItem {
   id: string;
+  polarProductId: string;
   name: string;
+  description?: string;
   price: number;
+  priceId: string;
   quantity: number;
-  description?: string;
-  metadata?: Record<string, any>;
+  recurring_interval?: string | null;
+  productData: any;
 }
 
 interface CartData {
diff --git a/frontend/src/services/cookies.service.ts b/frontend/src/services/cookies.service.ts
index f0bcf9cb..48c261a7 100644
--- a/frontend/src/services/cookies.service.ts
+++ b/frontend/src/services/cookies.service.ts
@@ -13,11 +13,8 @@ const defaultOptions = (): CookieOptions => {
   };
 };
 
-export function setAuthToken(token: string, remember = false) {
+export function setAuthToken(token: string) {
   const opts = defaultOptions();
-  if (remember) {
-    opts.expires = 30;
-  }
   Cookies.set(TOKEN_KEY, token, opts as Cookies.CookieAttributes);
 }
 
diff --git a/frontend/src/services/payments-service.ts b/frontend/src/services/payments-service.ts
index a1d496d7..bd9c4d39 100644
--- a/frontend/src/services/payments-service.ts
+++ b/frontend/src/services/payments-service.ts
@@ -18,14 +18,17 @@ export const createCheckout = async (
   return response.data;
 };
 
-export const checkoutCart = async (cartData: {
-  cartAmount: number;
+export const checkoutPolarCart = async (cartData: {
   userId: string;
-  items: any[];
-  billingInfo?: any;
-  shippingInfo?: any;
+  items: Array<{
+    polarProductId: string;
+    priceId: string;
+    quantity: number;
+    productData: any;
+  }>;
+  successUrl?: string;
   metadata?: any;
 }) => {
-  const response = await axios.post('/api/checkout', cartData);
+  const response = await axios.post('/api/checkout/polar', cartData);
   return response.data;
 };
diff --git a/frontend/src/services/polar.service.ts b/frontend/src/services/polar.service.ts
new file mode 100644
index 00000000..e0f01d55
--- /dev/null
+++ b/frontend/src/services/polar.service.ts
@@ -0,0 +1,138 @@
+import axios, { AxiosInstance } from 'axios';
+import {
+  PolarProduct,
+  PolarProductsListResponse,
+  PolarProductsListParams,
+  PolarProductCreateBody,
+  PolarProductUpdateBody,
+  PolarFileUploadRequest,
+  PolarFileUploadResponse,
+  PolarFilesListResponse,
+} from '@/types/polar';
+
+class PolarService {
+  private api: AxiosInstance;
+
+  constructor() {
+    const baseURL = 'https://api.polar.sh/v1';
+    const accessToken = process.env.POLAR_ACCESS_TOKEN;
+
+    if (!accessToken) {
+      throw new Error('POLAR_ACCESS_TOKEN is required');
+    }
+
+    this.api = axios.create({
+      baseURL,
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        'Content-Type': 'application/json',
+      },
+    });
+  }
+
+  async getProducts(
+    params?: PolarProductsListParams
+  ): Promise<PolarProductsListResponse> {
+    const response = await this.api.get('/products/', { params });
+    return response.data;
+  }
+
+  async getProduct(id: string): Promise<PolarProduct> {
+    const response = await this.api.get(`/products/${id}`);
+    return response.data;
+  }
+
+  async createProduct(data: PolarProductCreateBody): Promise<PolarProduct> {
+    const response = await this.api.post('/products/', data);
+    return response.data;
+  }
+
+  async updateProduct(
+    id: string,
+    data: PolarProductUpdateBody
+  ): Promise<PolarProduct> {
+    const response = await this.api.patch(`/products/${id}`, data);
+    return response.data;
+  }
+
+  async deleteProduct(id: string): Promise<PolarProduct> {
+    const response = await this.api.patch(`/products/${id}`, {
+      is_archived: true,
+    });
+    return response.data;
+  }
+
+  async uploadFile(
+    file: File,
+    organizationId: string
+  ): Promise<PolarFileUploadResponse> {
+    const fileData: PolarFileUploadRequest = {
+      name: file.name,
+      mime_type: file.type,
+      size: file.size,
+      organization_id: organizationId,
+    };
+
+    const createResponse = await this.api.post('/files/', fileData);
+    const fileInfo: PolarFileUploadResponse = createResponse.data;
+
+    if (fileInfo.upload_url) {
+      await axios.put(fileInfo.upload_url, file, {
+        headers: {
+          'Content-Type': file.type,
+        },
+      });
+
+      await this.api.post(`/files/${fileInfo.id}/uploaded`);
+    }
+
+    return fileInfo;
+  }
+
+  async getFiles(organizationId?: string): Promise<PolarFilesListResponse> {
+    const params = organizationId ? { organization_id: organizationId } : {};
+    const response = await this.api.get('/files/', { params });
+    return response.data;
+  }
+
+  async deleteFile(id: string): Promise<void> {
+    await this.api.delete(`/files/${id}`);
+  }
+
+  async addImageToProduct(
+    productId: string,
+    fileId: string
+  ): Promise<PolarProduct> {
+    const product = await this.getProduct(productId);
+    const mediaIds = product.medias?.map((m) => m.id) || [];
+
+    if (!mediaIds.includes(fileId)) {
+      mediaIds.push(fileId);
+    }
+
+    return this.updateProduct(productId, {
+      metadata: {
+        ...product.metadata,
+        media_ids: mediaIds,
+      },
+    });
+  }
+
+  async removeImageFromProduct(
+    productId: string,
+    fileId: string
+  ): Promise<PolarProduct> {
+    const product = await this.getProduct(productId);
+    const mediaIds =
+      product.medias?.map((m) => m.id).filter((id) => id !== fileId) || [];
+
+    return this.updateProduct(productId, {
+      metadata: {
+        ...product.metadata,
+        media_ids: mediaIds,
+      },
+    });
+  }
+}
+
+export const polarService = new PolarService();
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 57784093..3ee3cbe2 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -20,6 +20,8 @@ export interface User {
   email: string;
   full_name: string;
   phone?: string;
+  polar_api_key?: string;
+  polar_organization_id?: string;
   role: RoleUser;
   profile_image?: string;
   created_at?: string;
diff --git a/frontend/src/types/polar.ts b/frontend/src/types/polar.ts
new file mode 100644
index 00000000..839f1cd6
--- /dev/null
+++ b/frontend/src/types/polar.ts
@@ -0,0 +1,128 @@
+export interface PolarProductPrice {
+  created_at: string;
+  modified_at: string;
+  id: string;
+  amount_type: string;
+  is_archived: boolean;
+  product_id: string;
+  type: string;
+  recurring_interval?: 'day' | 'week' | 'month' | 'year';
+  price_currency: string;
+  price_amount: number;
+  legacy: boolean;
+}
+
+export interface PolarBenefit {
+  id: string;
+  created_at: string;
+  modified_at: string;
+  type: 'custom' | 'discord' | 'github_repository' | 'ads';
+  description: string;
+  selectable: boolean;
+  deletable: boolean;
+  organization_id: string;
+  metadata: Record<string, any>;
+  properties: {
+    note?: string;
+  };
+}
+
+export interface PolarMedia {
+  id: string;
+  organization_id: string;
+  name: string;
+  path: string;
+  mime_type: string;
+  size: number;
+  public_url: string;
+  storage_version?: string;
+  checksum_etag?: string;
+  checksum_sha256_base64?: string;
+  checksum_sha256_hex?: string;
+  last_modified_at?: string;
+  version?: string;
+  service?: string;
+  is_uploaded?: boolean;
+  created_at?: string;
+  size_readable?: string;
+}
+
+export interface PolarProduct {
+  created_at: string;
+  modified_at: string;
+  id: string;
+  name: string;
+  description: string;
+  recurring_interval?: 'day' | 'week' | 'month' | 'year';
+  is_recurring: boolean;
+  is_archived: boolean;
+  organization_id: string;
+  metadata: Record<string, any>;
+  prices: PolarProductPrice[];
+  benefits: PolarBenefit[];
+  medias: PolarMedia[];
+}
+
+export interface PolarPagination {
+  total_count: number;
+  max_page: number;
+}
+
+export interface PolarProductsListResponse {
+  items: PolarProduct[];
+  pagination: PolarPagination;
+}
+
+export interface PolarProductsListParams {
+  organization_id?: string;
+  is_archived?: boolean;
+  is_recurring?: boolean;
+  query?: string;
+  page?: number;
+  limit?: number;
+}
+
+export interface PolarProductCreateBody {
+  name: string;
+  description?: string;
+  organization_id: string;
+  recurring_interval?: 'day' | 'week' | 'month' | 'year';
+  is_recurring?: boolean;
+  prices?: Partial<PolarProductPrice>[];
+  benefits?: string[];
+  metadata?: Record<string, any>;
+}
+
+export interface PolarProductUpdateBody {
+  name?: string;
+  description?: string;
+  prices?: Partial<PolarProductPrice>[];
+  benefits?: string[];
+  is_archived?: boolean;
+  metadata?: Record<string, any>;
+}
+
+export interface PolarFileUploadRequest {
+  name: string;
+  mime_type: string;
+  size: number;
+  organization_id?: string;
+}
+
+export interface PolarFileUploadResponse {
+  id: string;
+  organization_id: string;
+  name: string;
+  path: string;
+  mime_type: string;
+  size: number;
+  upload_url?: string;
+  public_url?: string;
+  created_at: string;
+  is_uploaded: boolean;
+}
+
+export interface PolarFilesListResponse {
+  items: PolarMedia[];
+  pagination: PolarPagination;
+}
diff --git a/frontend/src/utils/cloudinary.ts b/frontend/src/utils/cloudinary.ts
new file mode 100644
index 00000000..76e3d0ac
--- /dev/null
+++ b/frontend/src/utils/cloudinary.ts
@@ -0,0 +1,104 @@
+import cloudinary from 'cloudinary';
+
+const { CLOUDINARY_CLOUD_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET } =
+  process.env;
+
+cloudinary.v2.config({
+  cloud_name: CLOUDINARY_CLOUD_NAME,
+  api_key: CLOUDINARY_API_KEY,
+  api_secret: CLOUDINARY_API_SECRET,
+});
+
+const ALLOWED_EXTENSIONS = new Set(['jpg', 'jpeg', 'png', 'webp']);
+const MAX_FILE_SIZE = 5 * 1024 * 1024;
+
+export async function uploadImageFromBase64(
+  base64String: string
+): Promise<string> {
+  if (!base64String.startsWith('data:image/'))
+    throw new Error('Invalid base64 format');
+  const parts = base64String.split(',');
+  if (parts.length < 2) throw new Error('Invalid base64 format');
+  const data = Buffer.from(parts[1], 'base64');
+  if (data.length > MAX_FILE_SIZE)
+    throw new Error('File size exceeds 5MB limit');
+  const res = await new Promise<any>((resolve, reject) => {
+    const stream = cloudinary.v2.uploader.upload_stream(
+      { folder: 'products' },
+      (error: unknown, result: any) => {
+        if (error) return reject(error);
+        resolve(result);
+      }
+    );
+    stream.end(data);
+  });
+  return res.secure_url;
+}
+
+export async function uploadMultipleImagesFromBase64(
+  base64Strings: string[]
+): Promise<string[]> {
+  const urls: string[] = [];
+  for (const s of base64Strings) {
+    if (!s) continue;
+    const url = await uploadImageFromBase64(s);
+    urls.push(url);
+  }
+  return urls;
+}
+
+export async function uploadImageToCloudinary(file: File): Promise<string> {
+  const size = (file as any).size || 0;
+  if (size > MAX_FILE_SIZE) throw new Error('File size exceeds 5MB limit');
+  const name = (file as any).name || '';
+  const lower = name.toLowerCase();
+  if (![...ALLOWED_EXTENSIONS].some((ext) => lower.endsWith(ext)))
+    throw new Error('Invalid file type. Only jpg, jpeg, png, webp allowed');
+  const arrayBuffer = await file.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  const res = await new Promise<any>((resolve, reject) => {
+    const stream = cloudinary.v2.uploader.upload_stream(
+      { folder: 'products' },
+      (error: unknown, result: any) => {
+        if (error) return reject(error);
+        resolve(result);
+      }
+    );
+    stream.end(buffer);
+  });
+  return res.secure_url;
+}
+
+export async function uploadProfileImage(file: File): Promise<string> {
+  const size = (file as any).size || 0;
+  if (size > MAX_FILE_SIZE) throw new Error('File size exceeds 5MB limit');
+  const name = (file as any).name || '';
+  const lower = name.toLowerCase();
+  if (![...ALLOWED_EXTENSIONS].some((ext) => lower.endsWith(ext)))
+    throw new Error('Invalid file type. Only jpg, jpeg, png, webp allowed');
+  const arrayBuffer = await file.arrayBuffer();
+  const buffer = Buffer.from(arrayBuffer);
+  const res = await new Promise<any>((resolve, reject) => {
+    const stream = cloudinary.v2.uploader.upload_stream(
+      { folder: 'profiles' },
+      (error: unknown, result: any) => {
+        if (error) return reject(error);
+        resolve(result);
+      }
+    );
+    stream.end(buffer);
+  });
+  return res.secure_url;
+}
+
+export async function uploadMultipleImagesFromFiles(
+  files: File[]
+): Promise<string[]> {
+  const urls: string[] = [];
+  for (const f of files) {
+    if (!f) continue;
+    const url = await uploadImageToCloudinary(f);
+    urls.push(url);
+  }
+  return urls;
+}
diff --git a/frontend/src/utils/crypto.ts b/frontend/src/utils/crypto.ts
new file mode 100644
index 00000000..33adcc24
--- /dev/null
+++ b/frontend/src/utils/crypto.ts
@@ -0,0 +1,27 @@
+import crypto from 'crypto';
+
+const ALGORITHM = 'aes-256-gcm';
+
+function getKey(): Buffer {
+  const master = process.env.MASTER_KEY || '';
+  return crypto.createHash('sha256').update(master).digest();
+}
+
+export function encryptString(plain: string): string {
+  return plain;
+}
+
+export function decryptString(payload: string): string {
+  const raw = Buffer.from(payload, 'base64');
+  const iv = raw.slice(0, 12);
+  const tag = raw.slice(12, 28);
+  const encrypted = raw.slice(28);
+  const key = getKey();
+  const decipher = crypto.createDecipheriv(ALGORITHM, key, iv);
+  decipher.setAuthTag(tag);
+  const decrypted = Buffer.concat([
+    decipher.update(encrypted),
+    decipher.final(),
+  ]);
+  return decrypted.toString('utf8');
+}
diff --git a/frontend/src/utils/crypto.utils.ts b/frontend/src/utils/crypto.utils.ts
new file mode 100644
index 00000000..94cf86a6
--- /dev/null
+++ b/frontend/src/utils/crypto.utils.ts
@@ -0,0 +1,4 @@
+export function decryptAny(encrypted: string): string {
+  if (!encrypted) return '';
+  return encrypted;
+}
diff --git a/frontend/src/utils/password.ts b/frontend/src/utils/password.ts
new file mode 100644
index 00000000..cc03e4a8
--- /dev/null
+++ b/frontend/src/utils/password.ts
@@ -0,0 +1,10 @@
+import bcrypt from 'bcryptjs';
+
+export function hashPassword(password: string): string {
+  const salt = bcrypt.genSaltSync(10);
+  return bcrypt.hashSync(password, salt);
+}
+
+export function verifyPassword(password: string, hashed: string): boolean {
+  return bcrypt.compareSync(password, hashed);
+}
diff --git a/frontend/src/utils/polar.utils.ts b/frontend/src/utils/polar.utils.ts
new file mode 100644
index 00000000..0ecda1c8
--- /dev/null
+++ b/frontend/src/utils/polar.utils.ts
@@ -0,0 +1,194 @@
+const BASE_URL = 'https://api.polar.sh/v1';
+
+export const decryptApiKey = (rawKey: string): string => {
+  if (!rawKey || rawKey.trim() === '') throw new Error('Missing Polar API key');
+  return rawKey;
+};
+
+export const polarAPI = {
+  async listProducts(apiKey: string, organizationId?: string): Promise<any[]> {
+    const token = decryptApiKey(apiKey);
+    const params = new URLSearchParams();
+
+    params.set('expand', 'medias,prices,benefits');
+
+    if (organizationId && organizationId.trim() !== '') {
+      params.set('organization_id', organizationId.trim());
+    }
+
+    const url = `${BASE_URL}/products${
+      params.toString() ? `?${params.toString()}` : ''
+    }`;
+    const res = await fetch(url, {
+      method: 'GET',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+      },
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || 'Failed to list products');
+    }
+    const data: any = await res.json();
+    const items = Array.isArray(data)
+      ? data
+      : Array.isArray(data.items)
+      ? data.items
+      : [];
+    return items;
+  },
+
+  async getProduct(apiKey: string, productId: string): Promise<any> {
+    const token = decryptApiKey(apiKey);
+    const params = new URLSearchParams();
+    params.set('include', 'medias,prices,benefits');
+
+    const res = await fetch(
+      `${BASE_URL}/products/${productId}?${params.toString()}`,
+      {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          Accept: 'application/json',
+        },
+      }
+    );
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || 'Failed to get product');
+    }
+    const product = await res.json();
+    return product;
+  },
+
+  async createProduct(apiKey: string, productData: any): Promise<any> {
+    const token = decryptApiKey(apiKey);
+    const body: any = {
+      name: productData.name,
+      description: productData.description,
+      recurring_interval:
+        typeof productData.recurring_interval === 'undefined'
+          ? null
+          : productData.recurring_interval,
+      prices: Array.isArray(productData.prices) ? productData.prices : [],
+      metadata: productData.metadata || undefined,
+    };
+    const res = await fetch(`${BASE_URL}/products`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || 'Failed to create product');
+    }
+    return res.json();
+  },
+
+  async updateProduct(
+    apiKey: string,
+    productId: string,
+    productData: any
+  ): Promise<any> {
+    const token = decryptApiKey(apiKey);
+    const body: any = {
+      name: productData.name,
+      description: productData.description,
+      prices: productData.prices,
+      is_archived: productData.is_archived,
+      metadata: productData.metadata,
+    };
+    const res = await fetch(`${BASE_URL}/products/${productId}`, {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || 'Failed to update product');
+    }
+    return res.json();
+  },
+
+  async deleteProduct(apiKey: string, productId: string): Promise<void> {
+    const token = decryptApiKey(apiKey);
+    const res = await fetch(`${BASE_URL}/products/${productId}`, {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ is_archived: true }),
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || 'Failed to archive product');
+    }
+  },
+
+  async uploadFile(
+    apiKey: string,
+    file: File,
+    organizationId: string,
+    service: string = 'product_media'
+  ): Promise<any> {
+    const token = decryptApiKey(apiKey);
+    const initRes = await fetch(`${BASE_URL}/files`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        name: file.name,
+        mime_type: (file as any).type || 'application/octet-stream',
+        size: (file as any).size || 0,
+        organization_id: organizationId,
+        service,
+      }),
+    });
+    if (!initRes.ok) {
+      const text = await initRes.text();
+      throw new Error(text || 'Failed to initialize file upload');
+    }
+    const info = await initRes.json();
+    if (info.upload_url) {
+      const putRes = await fetch(info.upload_url, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': (file as any).type || 'application/octet-stream',
+        },
+        body: file as any,
+      });
+      if (!putRes.ok) {
+        const text = await putRes.text();
+        throw new Error(text || 'Failed to upload file');
+      }
+      const confirmRes = await fetch(`${BASE_URL}/files/${info.id}/uploaded`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          Accept: 'application/json',
+        },
+      });
+      if (!confirmRes.ok) {
+        const text = await confirmRes.text();
+        throw new Error(text || 'Failed to confirm upload');
+      }
+      const confirmed = await confirmRes.json();
+      return confirmed || info;
+    }
+    return info;
+  },
+};
diff --git a/frontend/src/utils/supabase/server.ts b/frontend/src/utils/supabase/server.ts
index d313146b..f7f1bf61 100644
--- a/frontend/src/utils/supabase/server.ts
+++ b/frontend/src/utils/supabase/server.ts
@@ -2,7 +2,10 @@ import { createServerClient, type CookieOptions } from '@supabase/ssr';
 import { cookies } from 'next/headers';
 
 const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
+const supabaseKey =
+  process.env.SUPABASE_SERVICE_KEY ||
+  process.env.SUPABASE_SERVICE_ROLE_KEY ||
+  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
 
 export const createClient = async () => {
   const cookieStore = await cookies();
diff --git a/frontend/src/utils/timezone.ts b/frontend/src/utils/timezone.ts
new file mode 100644
index 00000000..ab15add4
--- /dev/null
+++ b/frontend/src/utils/timezone.ts
@@ -0,0 +1,3 @@
+export function getCurrentTimeWithTimezone(_tz: string = 'UTC'): string {
+  return new Date().toISOString();
+}