diff --git a/apps/api/src/__tests__/index.test.ts b/apps/api/src/__tests__/index.test.ts
index fa505a7..d221c4a 100644
--- a/apps/api/src/__tests__/index.test.ts
+++ b/apps/api/src/__tests__/index.test.ts
@@ -40,25 +40,33 @@ vi.mock('../jobs/seedPlans', () => ({
 }))
 
 describe('Server entry point (index.ts)', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
   it('starts the server on the configured port', async () => {
     await import('../index')
-
-    expect(mockListen).toHaveBeenCalledWith(4000, expect.any(Function))
+    await vi.waitFor(() => {
+      expect(mockListen).toHaveBeenCalledWith(4000, expect.any(Function))
+    })
   })
 
   it('logs server start message', async () => {
     await import('../index')
-
-    expect(mockLogger.info).toHaveBeenCalledWith(
-      { port: 4000 },
-      'Server started',
-    )
+    await vi.waitFor(() => {
+      expect(mockLogger.info).toHaveBeenCalledWith(
+        { port: 4000 },
+        'Server started',
+      )
+    })
   })
 
   it('starts health check job when interval is configured', async () => {
     await import('../index')
-
-    expect(mockStartHealthCheckJob).toHaveBeenCalledWith(3600000)
+    await vi.waitFor(() => {
+      expect(mockStartHealthCheckJob).toHaveBeenCalledWith(3600000)
+    })
     expect(mockLogger.info).toHaveBeenCalledWith(
       { interval: 3600000 },
       'Health check job started',
@@ -67,7 +75,8 @@ describe('Server entry point (index.ts)', () => {
 
   it('seeds plans on startup (fire-and-forget)', async () => {
     await import('../index')
-
-    expect(mockSeedPlans).toHaveBeenCalled()
+    await vi.waitFor(() => {
+      expect(mockSeedPlans).toHaveBeenCalled()
+    })
   })
 })
diff --git a/apps/api/src/controllers/__tests__/qr.controller.test.ts b/apps/api/src/controllers/__tests__/qr.controller.test.ts
index 5fd0709..097639c 100644
--- a/apps/api/src/controllers/__tests__/qr.controller.test.ts
+++ b/apps/api/src/controllers/__tests__/qr.controller.test.ts
@@ -1,16 +1,38 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import type { Request, Response, NextFunction } from 'express'
 
+const mockDb = vi.hoisted(() => ({
+  select: vi.fn(),
+}))
+
+vi.mock('../../db', () => ({
+  db: mockDb,
+}))
+
+vi.mock('../../utils/env', () => ({
+  env: { BASE_URL: 'http://localhost:3000' },
+}))
+
 vi.mock('../../services/qr.service', () => ({
   generateQrCode: vi.fn(),
 }))
 
 vi.mock('../../services/url.services', () => ({
-  resolveUrl: vi.fn(),
+  getQrCache: vi.fn(),
+  setQrCache: vi.fn(),
+  deleteAllQrCaches: vi.fn(),
 }))
 
 import * as qrController from '../qr.controller'
 
+function mockChain() {
+  const chain: any = { limit: vi.fn() }
+  chain.where = vi.fn().mockReturnValue(chain)
+  chain.from = vi.fn().mockReturnValue(chain)
+  chain.limit = vi.fn().mockResolvedValue([])
+  return chain
+}
+
 function mockReq(overrides: Partial<Request> = {}): Request {
   return {
     user: { id: 'user-1', role: 'user' } as any,
@@ -34,83 +56,142 @@ beforeEach(() => {
 })
 
 describe('generateQr', () => {
+  function setupDbRow(overrides = {}) {
+    const chain = mockChain()
+    chain.limit.mockResolvedValue([{ qrExpiresAt: null, userId: 'user-1', ...overrides }])
+    mockDb.select.mockReturnValue(chain)
+    return chain
+  }
+
   it('generates PNG QR code', async () => {
+    setupDbRow()
     const req = mockReq({ params: { code: 'abc' }, query: { format: 'png' } })
     const res = mockRes()
     const next = vi.fn()
 
-    const { resolveUrl } = await import('../../services/url.services')
+    const { getQrCache } = await import('../../services/url.services')
     const { generateQrCode } = await import('../../services/qr.service')
 
-    vi.mocked(resolveUrl).mockResolvedValueOnce({ url: 'https://example.com' } as any)
-    vi.mocked(generateQrCode).mockResolvedValueOnce(Buffer.from('png-data'))
+    vi.mocked(getQrCache).mockResolvedValue(null as any)
+    vi.mocked(generateQrCode).mockResolvedValue(Buffer.from('png-data'))
 
     await qrController.generateQr(req, res, next)
 
+    expect(generateQrCode).toHaveBeenCalledWith('http://localhost:3000/abc', 'png', undefined)
     expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'image/png')
     expect(res.send).toHaveBeenCalledWith(Buffer.from('png-data'))
   })
 
   it('generates SVG QR code', async () => {
+    setupDbRow()
     const req = mockReq({ params: { code: 'abc' }, query: { format: 'svg' } })
     const res = mockRes()
     const next = vi.fn()
 
-    const { resolveUrl } = await import('../../services/url.services')
+    const { getQrCache } = await import('../../services/url.services')
     const { generateQrCode } = await import('../../services/qr.service')
 
-    vi.mocked(resolveUrl).mockResolvedValueOnce({ url: 'https://example.com' } as any)
-    vi.mocked(generateQrCode).mockResolvedValueOnce('<svg>...</svg>')
+    vi.mocked(getQrCache).mockResolvedValue(null as any)
+    vi.mocked(generateQrCode).mockResolvedValue('<svg>...</svg>')
 
     await qrController.generateQr(req, res, next)
 
+    expect(generateQrCode).toHaveBeenCalledWith('http://localhost:3000/abc', 'svg', undefined)
     expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'image/svg+xml')
     expect(res.send).toHaveBeenCalledWith('<svg>...</svg>')
   })
 
   it('generates QR with logo', async () => {
+    setupDbRow()
     const req = mockReq({ params: { code: 'abc' }, query: { format: 'png', logo: 'https://example.com/logo.png' } })
     const res = mockRes()
     const next = vi.fn()
 
-    const { resolveUrl } = await import('../../services/url.services')
+    const { getQrCache } = await import('../../services/url.services')
     const { generateQrCode } = await import('../../services/qr.service')
 
-    vi.mocked(resolveUrl).mockResolvedValueOnce({ url: 'https://example.com' } as any)
-    vi.mocked(generateQrCode).mockResolvedValueOnce(Buffer.from('png-with-logo'))
+    vi.mocked(getQrCache).mockResolvedValue(null as any)
+    vi.mocked(generateQrCode).mockResolvedValue(Buffer.from('png-with-logo'))
 
     await qrController.generateQr(req, res, next)
 
-    expect(generateQrCode).toHaveBeenCalledWith('https://example.com', 'png', 'https://example.com/logo.png')
+    expect(generateQrCode).toHaveBeenCalledWith('http://localhost:3000/abc', 'png', 'https://example.com/logo.png')
     expect(res.send).toHaveBeenCalledWith(Buffer.from('png-with-logo'))
   })
 
   it('defaults to PNG format', async () => {
+    setupDbRow()
     const req = mockReq({ params: { code: 'abc' }, query: {} })
     const res = mockRes()
     const next = vi.fn()
 
-    const { resolveUrl } = await import('../../services/url.services')
+    const { getQrCache } = await import('../../services/url.services')
     const { generateQrCode } = await import('../../services/qr.service')
 
-    vi.mocked(resolveUrl).mockResolvedValueOnce({ url: 'https://example.com' } as any)
-    vi.mocked(generateQrCode).mockResolvedValueOnce(Buffer.from('png-data'))
+    vi.mocked(getQrCache).mockResolvedValue(null as any)
+    vi.mocked(generateQrCode).mockResolvedValue(Buffer.from('png-data'))
 
     await qrController.generateQr(req, res, next)
 
-    expect(generateQrCode).toHaveBeenCalledWith('https://example.com', 'png', undefined)
+    expect(generateQrCode).toHaveBeenCalledWith('http://localhost:3000/abc', 'png', undefined)
   })
 
-  it('passes errors to next', async () => {
-    const req = mockReq({ params: { code: 'abc' }, query: {} })
+  it('returns 410 when QR has expired', async () => {
+    setupDbRow({ qrExpiresAt: new Date('2020-01-01') })
+    const req = mockReq({ params: { code: 'abc' }, query: { format: 'png' } })
+    const res = mockRes()
+    const next = vi.fn()
+
+    await qrController.generateQr(req, res, next)
+
+    expect(res.status).toHaveBeenCalledWith(410)
+    expect(res.json).toHaveBeenCalledWith({
+      error: 'QR_CODE_EXPIRED',
+      message: expect.stringContaining('expired'),
+      expiredAt: expect.any(String),
+    })
+  })
+
+  it('returns cached QR without regenerating', async () => {
+    setupDbRow()
+    const req = mockReq({ params: { code: 'abc' }, query: { format: 'png' } })
     const res = mockRes()
     const next = vi.fn()
 
-    const { resolveUrl } = await import('../../services/url.services')
-    vi.mocked(resolveUrl).mockRejectedValueOnce(new Error('not found'))
+    const { getQrCache } = await import('../../services/url.services')
+    const { generateQrCode } = await import('../../services/qr.service')
+
+    vi.mocked(getQrCache).mockResolvedValue({ data: Buffer.from('cached-qr').toString('base64'), createdAt: new Date() })
+
+    await qrController.generateQr(req, res, next)
+
+    expect(generateQrCode).not.toHaveBeenCalled()
+    expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'image/png')
+    expect(res.send).toHaveBeenCalledWith(expect.any(Buffer))
+  })
+
+  it('returns 404 if code does not exist', async () => {
+    const chain = mockChain()
+    chain.limit.mockResolvedValue([])
+    mockDb.select.mockReturnValue(chain)
+
+    const req = mockReq({ params: { code: 'missing' }, query: { format: 'png' } })
+    const res = mockRes()
+    const next = vi.fn()
+
+    await qrController.generateQr(req, res, next)
+
+    expect(next).toHaveBeenCalledWith(expect.objectContaining({ statusCode: 404 }))
+  })
+
+  it('returns 404 if user does not own the URL', async () => {
+    setupDbRow({ userId: 'other-user' })
+    const req = mockReq({ params: { code: 'abc' }, query: { format: 'png' } })
+    const res = mockRes()
+    const next = vi.fn()
 
     await qrController.generateQr(req, res, next)
 
-    expect(next).toHaveBeenCalledWith(expect.any(Error))
+    expect(next).toHaveBeenCalledWith(expect.objectContaining({ statusCode: 404 }))
   })
 })
diff --git a/apps/api/src/controllers/qr.controller.ts b/apps/api/src/controllers/qr.controller.ts
index a7df745..c052cf9 100644
--- a/apps/api/src/controllers/qr.controller.ts
+++ b/apps/api/src/controllers/qr.controller.ts
@@ -1,34 +1,102 @@
 import type { Request, Response, NextFunction } from 'express'
-import { z } from 'zod'
+import { and, eq, isNull } from 'drizzle-orm'
 import { getUrlParamsSchema } from '../validators/url.validators'
+import { qrQuerySchema, regenerateQrSchema } from '../validators/qr.validators'
 import { generateQrCode } from '../services/qr.service'
-import { resolveUrl } from '../services/url.services'
+import { getQrCache, setQrCache, deleteAllQrCaches } from '../services/url.services'
+import { db } from '../db'
+import { urls } from '../db/schema'
 import { env } from '../utils/env'
-
-const qrQuerySchema = z.object({
-  format: z.enum(['png', 'svg']).default('png'),
-  logo: z.string().optional(),
-})
+import { AppError } from '../utils/AppError'
 
 export async function generateQr(req: Request, res: Response, next: NextFunction) {
   try {
     const { code } = getUrlParamsSchema.parse(req.params)
     const { format, logo } = qrQuerySchema.parse(req.query)
 
-    const urlRow = await resolveUrl(code)
-    const targetUrl = urlRow.url
+    const [urlRow] = await db
+      .select({ qrExpiresAt: urls.qrExpiresAt, userId: urls.userId })
+      .from(urls)
+      .where(and(eq(urls.code, code), isNull(urls.deletedAt)))
+      .limit(1)
+
+    if (!urlRow) {
+      throw new AppError('URL not found', 404, 'URL_NOT_FOUND')
+    }
+
+    if (urlRow.userId !== req.user!.id) {
+      throw new AppError('URL not found', 404, 'URL_NOT_FOUND')
+    }
+
+    if (urlRow.qrExpiresAt && urlRow.qrExpiresAt < new Date()) {
+      res.status(410).json({
+        error: 'QR_CODE_EXPIRED',
+        message: `This QR code expired on ${urlRow.qrExpiresAt.toISOString()}`,
+        expiredAt: urlRow.qrExpiresAt.toISOString(),
+      })
+      return
+    }
 
+    const cached = await getQrCache(code, format, logo)
+    if (cached) {
+      const buf = Buffer.from(cached.data, 'base64')
+      res.setHeader('Content-Type', format === 'svg' ? 'image/svg+xml' : 'image/png')
+      res.setHeader('Content-Disposition', `attachment; filename="${code}-qr.${format}"`)
+      res.send(buf)
+      return
+    }
+
+    const targetUrl = `${env.BASE_URL}/${code}`
     const result = await generateQrCode(targetUrl, format, logo)
 
-    if (format === 'svg') {
-      res.setHeader('Content-Type', 'image/svg+xml')
-      res.setHeader('Content-Disposition', `attachment; filename="${code}-qr.svg"`)
-      res.send(result)
-    } else {
-      res.setHeader('Content-Type', 'image/png')
-      res.setHeader('Content-Disposition', `attachment; filename="${code}-qr.png"`)
-      res.send(result)
+    const data = format === 'svg' ? result.toString() : (result as Buffer).toString('base64')
+    await setQrCache(code, format, data, logo)
+
+    res.setHeader('Content-Type', format === 'svg' ? 'image/svg+xml' : 'image/png')
+    res.setHeader('Content-Disposition', `attachment; filename="${code}-qr.${format}"`)
+    res.send(result)
+  } catch (err) {
+    next(err)
+  }
+}
+
+export async function regenerateQr(req: Request, res: Response, next: NextFunction) {
+  try {
+    const { code } = getUrlParamsSchema.parse(req.params)
+    const { format, logo } = qrQuerySchema.parse(req.query)
+    const { expiresAt } = regenerateQrSchema.parse(req.body)
+
+    const [urlRow] = await db
+      .select({ qrExpiresAt: urls.qrExpiresAt, userId: urls.userId })
+      .from(urls)
+      .where(and(eq(urls.code, code), isNull(urls.deletedAt)))
+      .limit(1)
+
+    if (!urlRow) {
+      throw new AppError('URL not found', 404, 'URL_NOT_FOUND')
+    }
+
+    if (urlRow.userId !== req.user!.id) {
+      throw new AppError('URL not found', 404, 'URL_NOT_FOUND')
     }
+
+    if (!urlRow.qrExpiresAt || urlRow.qrExpiresAt >= new Date()) {
+      throw new AppError('QR code has not expired yet', 400, 'QR_NOT_YET_EXPIRED')
+    }
+
+    await deleteAllQrCaches(code)
+
+    await db.update(urls).set({ qrExpiresAt: new Date(expiresAt) }).where(eq(urls.code, code))
+
+    const targetUrl = `${env.BASE_URL}/${code}`
+    const result = await generateQrCode(targetUrl, format, logo)
+
+    const data = format === 'svg' ? result.toString() : (result as Buffer).toString('base64')
+    await setQrCache(code, format, data, logo)
+
+    res.setHeader('Content-Type', format === 'svg' ? 'image/svg+xml' : 'image/png')
+    res.setHeader('Content-Disposition', `attachment; filename="${code}-qr.${format}"`)
+    res.send(result)
   } catch (err) {
     next(err)
   }
diff --git a/apps/api/src/controllers/url.controllers.ts b/apps/api/src/controllers/url.controllers.ts
index f6097a0..073fed5 100644
--- a/apps/api/src/controllers/url.controllers.ts
+++ b/apps/api/src/controllers/url.controllers.ts
@@ -81,6 +81,7 @@ export async function getUrlInfo(req: Request, res: Response, next: NextFunction
         activeAt: url.activeAt?.toISOString() ?? null,
         hasPassword: !!url.passwordHash,
         blockBots: url.blockBots,
+        qrExpiresAt: url.qrExpiresAt?.toISOString() ?? null,
         createdAt: url.createdAt.toISOString(),
       },
     })
diff --git a/apps/api/src/db/schema.ts b/apps/api/src/db/schema.ts
index c6b8007..86a3759 100644
--- a/apps/api/src/db/schema.ts
+++ b/apps/api/src/db/schema.ts
@@ -1,3 +1,4 @@
+import { sql } from 'drizzle-orm'
 import { pgTable, serial, text, timestamp, integer, index, uuid, boolean, uniqueIndex, primaryKey, jsonb, numeric, varchar } from 'drizzle-orm/pg-core'
 
 export const users = pgTable('users', {
@@ -57,6 +58,7 @@ export const urls = pgTable(
     affiliateId: text('affiliate_id'),
     affiliateNetwork: text('affiliate_network'),
     updatedAt: timestamp('updated_at').defaultNow().notNull(),
+    qrExpiresAt: timestamp('qr_expires_at'),
   },
   (table) => ({
     userDeletedIdx: index('urls_user_deleted_idx').on(table.userId, table.deletedAt),
@@ -286,3 +288,24 @@ export const customDomains = pgTable(
     domainIdx: uniqueIndex('custom_domains_domain_idx').on(table.domain),
   }),
 )
+
+export const qrCodes = pgTable(
+  'qr_codes',
+  {
+    id: serial('id').primaryKey(),
+    code: text('code')
+      .notNull()
+      .references(() => urls.code, { onDelete: 'cascade' }),
+    format: text('format').notNull(),
+    logoUrl: text('logo_url'),
+    data: text('data').notNull(),
+    createdAt: timestamp('created_at').defaultNow().notNull(),
+  },
+  (table) => ({
+    uniqueCacheKey: uniqueIndex('qr_codes_cache_key_idx').on(
+      table.code,
+      table.format,
+      sql`COALESCE(${table.logoUrl}, '')`,
+    ),
+  }),
+)
diff --git a/apps/api/src/routes/__tests__/url.routes.test.ts b/apps/api/src/routes/__tests__/url.routes.test.ts
index b54f22f..e64a491 100644
--- a/apps/api/src/routes/__tests__/url.routes.test.ts
+++ b/apps/api/src/routes/__tests__/url.routes.test.ts
@@ -25,6 +25,7 @@ const mockLinkController = vi.hoisted(() => ({
 
 const mockQrController = vi.hoisted(() => ({
   generateQr: vi.fn(),
+  regenerateQr: vi.fn(),
 }))
 
 vi.mock('../../controllers/url.controllers', () => mockUrlController)
@@ -196,6 +197,14 @@ describe('URL Routes', () => {
     expect(res.status).toBe(200)
   })
 
+  it('POST /:code/qr/regenerate — regenerates QR code', async () => {
+    mockQrController.regenerateQr.mockImplementation((_req, res) => {
+      res.setHeader('Content-Type', 'image/png').send(Buffer.from('new-qr'))
+    })
+    const res = await supertest(createApp()).post('/abc/qr/regenerate').send({ expiresAt: '2026-12-31T23:59:59.000Z' })
+    expect(res.status).toBe(200)
+  })
+
   it('POST /import/csv — imports CSV', async () => {
     mockLinkController.importCsv.mockImplementation((_req, res) => {
       res.status(201).json({ success: true, data: [{ success: true, code: 'abc' }] })
diff --git a/apps/api/src/routes/url.routes.ts b/apps/api/src/routes/url.routes.ts
index c376d34..95e8ca9 100644
--- a/apps/api/src/routes/url.routes.ts
+++ b/apps/api/src/routes/url.routes.ts
@@ -16,7 +16,8 @@ router.get('/:code/info', urlController.getUrlInfo)
 router.get('/:code/visits', urlController.getVisits)
 router.get('/:code/stats', urlController.getUrlStats)
 router.get('/:code/visits/export', urlController.exportVisits)
-router.get('/:code/qr', qrController.generateQr)
+router.get('/:code/qr', requireAuth, qrController.generateQr)
+router.post('/:code/qr/regenerate', requireAuth, qrController.regenerateQr)
 router.post('/:code/verify-password', passwordLimiter, urlController.verifyPasswordRedirect)
 router.delete('/:code', requireAuth, urlController.deleteUrl)
 router.delete('/:code/purge', requireAuth, requireAAL(), urlController.purgeUrl)
diff --git a/apps/api/src/services/link.service.ts b/apps/api/src/services/link.service.ts
index 6bbe953..6af5aaa 100644
--- a/apps/api/src/services/link.service.ts
+++ b/apps/api/src/services/link.service.ts
@@ -9,6 +9,7 @@ import type { UpdateLinkSettingsInput } from '../validators/link.validators'
 import { logAction } from './audit.service'
 import { cacheDel, buildCacheKeyForUrl } from './cache'
 import { getUserPlan } from './subscription.service'
+import { deleteAllQrCaches } from './url.services'
 
 const LINK_CHAIN_MAX_HOPS = 5
 const JWT_SECRET = new TextEncoder().encode(env.LINK_ACCESS_SECRET)
@@ -143,11 +144,18 @@ export async function updateLinkSettings(code: string, userId: string, input: Up
   if (input.blockBots !== undefined) {
     updates.blockBots = input.blockBots
   }
+  if (input.qrExpiresAt !== undefined) {
+    updates.qrExpiresAt = input.qrExpiresAt ? new Date(input.qrExpiresAt) : null
+  }
 
   if (Object.keys(updates).length === 0) return
 
   await db.update(urls).set(updates).where(eq(urls.code, code))
   cacheDel(buildCacheKeyForUrl(code)).catch(() => {})
+
+  if (input.qrExpiresAt !== undefined) {
+    deleteAllQrCaches(code).catch(() => {})
+  }
 }
 
 export async function resolveChain(
diff --git a/apps/api/src/services/url.services.ts b/apps/api/src/services/url.services.ts
index 5286795..4a79b72 100644
--- a/apps/api/src/services/url.services.ts
+++ b/apps/api/src/services/url.services.ts
@@ -1,5 +1,5 @@
 import { db, dbReplica } from '../db'
-import { urls, visits, tags, urlTags, urlCollections, collections, urlStatsHourly } from '../db/schema'
+import { urls, visits, tags, urlTags, urlCollections, collections, urlStatsHourly, qrCodes } from '../db/schema'
 import { eq, desc, count, sql, and, gte, isNull, inArray, asc, type SQL } from 'drizzle-orm'
 import { generateShortCode } from '../utils/codeGenerator'
 import { RESERVED_CODES } from '../constants/reservedWords'
@@ -23,6 +23,41 @@ const UNIQUE_VISIT_WINDOW_HOURS = env.UNIQUE_VISIT_WINDOW_HOURS
 
 export { AppError } from '../utils/AppError'
 
+export async function getQrCache(code: string, format: string, logoUrl?: string) {
+  const rows = await db
+    .select({ data: qrCodes.data, createdAt: qrCodes.createdAt })
+    .from(qrCodes)
+    .where(
+      and(
+        eq(qrCodes.code, code),
+        eq(qrCodes.format, format),
+        logoUrl ? eq(qrCodes.logoUrl, logoUrl) : sql`${qrCodes.logoUrl} IS NULL`,
+      ),
+    )
+    .limit(1)
+  return rows[0] ?? null
+}
+
+export async function setQrCache(code: string, format: string, data: string, logoUrl?: string) {
+  await db
+    .delete(qrCodes)
+    .where(
+      and(
+        eq(qrCodes.code, code),
+        eq(qrCodes.format, format),
+        logoUrl ? eq(qrCodes.logoUrl, logoUrl) : sql`${qrCodes.logoUrl} IS NULL`,
+      ),
+    )
+
+  await db
+    .insert(qrCodes)
+    .values({ code, format, data, logoUrl: logoUrl ?? null })
+}
+
+export async function deleteAllQrCaches(code: string) {
+  await db.delete(qrCodes).where(eq(qrCodes.code, code))
+}
+
 export async function createShortUrl(input: CreateUrlInput, userId: string) {
   const code = input.customCode || generateShortCode()
 
@@ -66,6 +101,7 @@ export async function createShortUrl(input: CreateUrlInput, userId: string) {
   const activeAt = input.activeAt ? new Date(input.activeAt) : null
   const passwordHash = input.password ? await bcrypt.hash(input.password, 12) : null
   const blockBots = input.blockBots ?? false
+  const qrExpiresAt = input.qrExpiresAt ? new Date(input.qrExpiresAt) : null
 
   await db.insert(urls).values({
     code,
@@ -75,6 +111,7 @@ export async function createShortUrl(input: CreateUrlInput, userId: string) {
     activeAt,
     passwordHash,
     blockBots,
+    qrExpiresAt,
   })
 
   fetchLinkPreview(input.url)
@@ -115,7 +152,7 @@ export async function createShortUrl(input: CreateUrlInput, userId: string) {
       .catch(() => {})
   }
 
-  return formatUrlResponse(code, input.url, 0, 0, expiresAt, undefined, undefined, undefined, undefined, !!passwordHash, activeAt, blockBots)
+  return formatUrlResponse(code, input.url, 0, 0, expiresAt, undefined, undefined, undefined, undefined, !!passwordHash, activeAt, blockBots, qrExpiresAt)
 }
 
 export async function resolveUrl(code: string) {
@@ -466,7 +503,7 @@ export async function listUrls(query: ListUrlsQueryInput, userId?: string, isAdm
 
   return {
     urls: rows.map((u) => formatUrlResponse(
-      u.code, u.url, u.visits, u.uniqueVisits, u.expiresAt, u.title, u.description, u.image, u.createdAt, !!u.passwordHash, u.activeAt, u.blockBots,
+      u.code, u.url, u.visits, u.uniqueVisits, u.expiresAt, u.title, u.description, u.image, u.createdAt, !!u.passwordHash, u.activeAt, u.blockBots, u.qrExpiresAt,
     )),
     pagination: {
       page,
@@ -561,6 +598,7 @@ function formatUrlResponse(
   hasPassword?: boolean,
   activeAt?: Date | null,
   blockBots?: boolean,
+  qrExpiresAt?: Date | null,
 ) {
   return {
     code,
@@ -575,6 +613,7 @@ function formatUrlResponse(
     activeAt: activeAt?.toISOString() ?? null,
     hasPassword: hasPassword ?? false,
     blockBots: blockBots ?? false,
+    qrExpiresAt: qrExpiresAt?.toISOString() ?? null,
     createdAt: (createdAt ?? new Date()).toISOString(),
   }
 }
diff --git a/apps/api/src/validators/link.validators.ts b/apps/api/src/validators/link.validators.ts
index 4f34cd7..832abd7 100644
--- a/apps/api/src/validators/link.validators.ts
+++ b/apps/api/src/validators/link.validators.ts
@@ -13,6 +13,7 @@ export const updateLinkSettingsSchema = z.object({
   expiresAt: z.string().datetime({ message: 'expiresAt must be an ISO 8601 date' }).optional().nullable(),
   password: z.string().min(4).max(128).optional().nullable(),
   blockBots: z.boolean().optional(),
+  qrExpiresAt: z.string().datetime({ message: 'qrExpiresAt must be an ISO 8601 date' }).optional().nullable(),
 }).strict()
 
 export const bulkOperationSchema = z.object({
diff --git a/apps/api/src/validators/qr.validators.ts b/apps/api/src/validators/qr.validators.ts
new file mode 100644
index 0000000..bdbf4c2
--- /dev/null
+++ b/apps/api/src/validators/qr.validators.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+export const qrQuerySchema = z.object({
+  format: z.enum(['png', 'svg']).default('png'),
+  logo: z.string().optional(),
+})
+
+export const regenerateQrSchema = z.object({
+  expiresAt: z.string().datetime({ message: 'expiresAt must be an ISO 8601 date' }),
+}).strict()
+
+export type RegenerateQrInput = z.infer<typeof regenerateQrSchema>
diff --git a/apps/api/src/validators/url.validators.ts b/apps/api/src/validators/url.validators.ts
index 242ce58..a81d481 100644
--- a/apps/api/src/validators/url.validators.ts
+++ b/apps/api/src/validators/url.validators.ts
@@ -51,6 +51,10 @@ export const createUrlSchema = z.object({
     .datetime({ message: 'activeAt must be an ISO 8601 date' })
     .optional(),
   blockBots: z.boolean().optional(),
+  qrExpiresAt: z
+    .string()
+    .datetime({ message: 'qrExpiresAt must be an ISO 8601 date' })
+    .optional(),
   tags: z
     .array(z.string().min(1).max(50))
     .max(10, 'Max 10 tags per link')
diff --git a/apps/dashboard/src/components/copy-button.tsx b/apps/dashboard/src/components/copy-button.tsx
new file mode 100644
index 0000000..880218e
--- /dev/null
+++ b/apps/dashboard/src/components/copy-button.tsx
@@ -0,0 +1,45 @@
+import { useState, useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { Check, Copy } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface CopyButtonProps {
+  text: string
+  className?: string
+  variant?: "primary" | "outline" | "ghost"
+  size?: "default" | "sm" | "lg" | "icon"
+}
+
+export default function CopyButton({ text, className, variant = "outline", size = "icon" }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      const input = document.createElement("input")
+      input.value = text
+      document.body.appendChild(input)
+      input.select()
+      document.execCommand("copy")
+      document.body.removeChild(input)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    }
+  }, [text])
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={handleCopy}
+      className={cn("gap-1.5", className)}
+      title="Copy to clipboard"
+    >
+      {copied ? <Check className="h-3.5 w-3.5 text-emerald-500" /> : <Copy className="h-3.5 w-3.5" />}
+      {copied ? "Copied" : "Copy"}
+    </Button>
+  )
+}
diff --git a/apps/dashboard/src/components/status-badge.tsx b/apps/dashboard/src/components/status-badge.tsx
new file mode 100644
index 0000000..f33bdb8
--- /dev/null
+++ b/apps/dashboard/src/components/status-badge.tsx
@@ -0,0 +1,44 @@
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+interface StatusBadgeProps {
+  status: string
+  className?: string
+}
+
+const statusConfig: Record<string, { label: string; variant: "default" | "secondary" | "success" | "destructive" | "outline" }> = {
+  active: { label: "Active", variant: "success" },
+  expired: { label: "Expired", variant: "destructive" },
+  scheduled: { label: "Scheduled", variant: "outline" },
+  "password-protected": { label: "Password", variant: "default" },
+  "blocked-bots": { label: "Bots Blocked", variant: "secondary" },
+  inactive: { label: "Inactive", variant: "secondary" },
+}
+
+export default function StatusBadge({ status, className }: StatusBadgeProps) {
+  const config = statusConfig[status] ?? { label: status, variant: "outline" as const }
+
+  return (
+    <Badge variant={config.variant} className={cn("capitalize", className)}>
+      {config.label}
+    </Badge>
+  )
+}
+
+export function getLinkStatus(link: { expiresAt: string | null; activeAt: string | null; hasPassword: boolean; blockBots: boolean }): string {
+  const now = new Date()
+
+  if (link.activeAt && new Date(link.activeAt) > now) {
+    return "scheduled"
+  }
+  if (link.expiresAt && new Date(link.expiresAt) < now) {
+    return "expired"
+  }
+  if (link.hasPassword) {
+    return "password-protected"
+  }
+  if (link.blockBots) {
+    return "blocked-bots"
+  }
+  return "active"
+}
diff --git a/apps/dashboard/src/components/ui/command.tsx b/apps/dashboard/src/components/ui/command.tsx
new file mode 100644
index 0000000..fa19473
--- /dev/null
+++ b/apps/dashboard/src/components/ui/command.tsx
@@ -0,0 +1,114 @@
+import { cn } from "@/lib/utils"
+import { useState, useRef, useEffect, type ReactNode } from "react"
+
+interface CommandProps {
+  children: ReactNode
+  className?: string
+  filter?: (value: string, search: string) => boolean
+}
+
+export function Command({ children, className, filter }: CommandProps) {
+  const [search, setSearch] = useState("")
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 50)
+  }, [])
+
+  return (
+    <div className={cn("", className)}>
+      {children}
+    </div>
+  )
+}
+
+interface CommandInputProps {
+  placeholder?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  className?: string
+}
+
+export function CommandInput({ placeholder = "Search...", value, onValueChange, className }: CommandInputProps) {
+  return (
+    <div className="flex items-center border-b border-border px-3">
+      <input
+        ref={(el) => el?.focus()}
+        value={value}
+        onChange={(e) => onValueChange?.(e.target.value)}
+        placeholder={placeholder}
+        className={cn(
+          "flex h-9 w-full rounded-md bg-transparent py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground",
+          className
+        )}
+      />
+    </div>
+  )
+}
+
+interface CommandListProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CommandList({ children, className }: CommandListProps) {
+  return (
+    <div className={cn("max-h-60 overflow-y-auto py-1", className)}>
+      {children}
+    </div>
+  )
+}
+
+interface CommandEmptyProps {
+  children: ReactNode
+  className?: string
+}
+
+export function CommandEmpty({ children, className }: CommandEmptyProps) {
+  return (
+    <div className={cn("py-6 text-center text-sm text-muted-foreground", className)}>
+      {children}
+    </div>
+  )
+}
+
+interface CommandItemProps {
+  children: ReactNode
+  value?: string
+  onSelect?: () => void
+  disabled?: boolean
+  className?: string
+}
+
+export function CommandItem({ children, value, onSelect, disabled, className }: CommandItemProps) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onSelect}
+      className={cn(
+        "relative flex w-full cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-muted aria-selected:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface CommandGroupProps {
+  children: ReactNode
+  heading?: string
+  className?: string
+}
+
+export function CommandGroup({ children, heading, className }: CommandGroupProps) {
+  return (
+    <div className={cn("", className)}>
+      {heading && (
+        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">{heading}</div>
+      )}
+      {children}
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/components/ui/dialog.tsx b/apps/dashboard/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..470934f
--- /dev/null
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -0,0 +1,60 @@
+import { cn } from "@/lib/utils"
+import { useEffect, useRef, type ReactNode } from "react"
+
+interface DialogProps {
+  open: boolean
+  onClose: () => void
+  children: ReactNode
+}
+
+export function Dialog({ open, onClose, children }: DialogProps) {
+  const overlayRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose()
+    }
+    document.addEventListener("keydown", handler)
+    document.body.style.overflow = "hidden"
+    return () => {
+      document.removeEventListener("keydown", handler)
+      document.body.style.overflow = ""
+    }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div
+      ref={overlayRef}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/12 backdrop-blur-sm"
+      onClick={(e) => {
+        if (e.target === overlayRef.current) onClose()
+      }}
+    >
+      <div
+        className="relative w-full max-w-lg mx-4 rounded-xl border border-border bg-card p-6 shadow-lg animate-in fade-in zoom-in-95"
+        role="dialog"
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export function DialogHeader({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("mb-4 space-y-1.5", className)}>{children}</div>
+}
+
+export function DialogTitle({ children, className }: { children: ReactNode; className?: string }) {
+  return <h2 className={cn("text-base font-semibold text-foreground", className)}>{children}</h2>
+}
+
+export function DialogDescription({ children, className }: { children: ReactNode; className?: string }) {
+  return <p className={cn("text-sm text-muted-foreground", className)}>{children}</p>
+}
+
+export function DialogFooter({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cn("mt-6 flex items-center justify-end gap-2", className)}>{children}</div>
+}
diff --git a/apps/dashboard/src/components/ui/label.tsx b/apps/dashboard/src/components/ui/label.tsx
new file mode 100644
index 0000000..16292c3
--- /dev/null
+++ b/apps/dashboard/src/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils"
+import { forwardRef, type LabelHTMLAttributes } from "react"
+
+const Label = forwardRef<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Label.displayName = "Label"
+
+export { Label }
diff --git a/apps/dashboard/src/components/ui/pagination.tsx b/apps/dashboard/src/components/ui/pagination.tsx
new file mode 100644
index 0000000..7999c89
--- /dev/null
+++ b/apps/dashboard/src/components/ui/pagination.tsx
@@ -0,0 +1,88 @@
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+
+interface PaginationProps {
+  page: number
+  totalPages: number
+  onPageChange: (page: number) => void
+  className?: string
+}
+
+export default function Pagination({ page, totalPages, onPageChange, className }: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  const pages: (number | "...")[] = []
+  for (let i = 1; i <= totalPages; i++) {
+    if (i === 1 || i === totalPages || (i >= page - 1 && i <= page + 1)) {
+      pages.push(i)
+    } else if (pages[pages.length - 1] !== "...") {
+      pages.push("...")
+    }
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={page <= 1}
+        onClick={() => onPageChange(page - 1)}
+        aria-label="Previous page"
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
+      {pages.map((p, i) =>
+        p === "..." ? (
+          <span key={`ellipsis-${i}`} className="px-1 text-xs text-muted-foreground">
+            ...
+          </span>
+        ) : (
+          <Button
+            key={p}
+            variant={p === page ? "primary" : "outline"}
+            size="sm"
+            className="min-w-[32px]"
+            onClick={() => onPageChange(p)}
+          >
+            {p}
+          </Button>
+        )
+      )}
+      <Button
+        variant="outline"
+        size="sm"
+        disabled={page >= totalPages}
+        onClick={() => onPageChange(page + 1)}
+        aria-label="Next page"
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </div>
+  )
+}
+
+interface PageSizeSelectorProps {
+  pageSize: number
+  onPageSizeChange: (size: number) => void
+  className?: string
+}
+
+export function PageSizeSelector({ pageSize, onPageSizeChange, className }: PageSizeSelectorProps) {
+  return (
+    <div className={cn("flex items-center gap-2 text-sm text-muted-foreground", className)}>
+      <span>Show</span>
+      <select
+        value={pageSize}
+        onChange={(e) => onPageSizeChange(Number(e.target.value))}
+        className="h-8 rounded-lg border border-border bg-background px-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+      >
+        <option value={10}>10</option>
+        <option value={25}>25</option>
+        <option value={50}>50</option>
+        <option value={100}>100</option>
+      </select>
+      <span>per page</span>
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/components/ui/popover.tsx b/apps/dashboard/src/components/ui/popover.tsx
new file mode 100644
index 0000000..fdb6933
--- /dev/null
+++ b/apps/dashboard/src/components/ui/popover.tsx
@@ -0,0 +1,60 @@
+import { cn } from "@/lib/utils"
+import { useState, useRef, useEffect, type ReactNode } from "react"
+
+interface PopoverProps {
+  children: ReactNode
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export function Popover({ children, open: controlledOpen, onOpenChange }: PopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const open = controlledOpen ?? internalOpen
+  const setOpen = onOpenChange ?? setInternalOpen
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false)
+      }
+    }
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside)
+      return () => document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [open, setOpen])
+
+  return <div ref={ref} className="relative">{children}</div>
+}
+
+interface PopoverTriggerProps {
+  children: ReactNode
+  asChild?: boolean
+  onClick?: () => void
+}
+
+export function PopoverTrigger({ children, onClick }: PopoverTriggerProps) {
+  return <div onClick={onClick}>{children}</div>
+}
+
+interface PopoverContentProps {
+  children: ReactNode
+  className?: string
+  align?: "start" | "end"
+}
+
+export function PopoverContent({ children, className, align = "start" }: PopoverContentProps) {
+  return (
+    <div
+      className={cn(
+        "absolute z-50 mt-1 min-w-[14rem] rounded-xl border border-border bg-card p-1 shadow-lg animate-in fade-in zoom-in-95",
+        align === "end" ? "right-0" : "left-0",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/components/ui/select.tsx b/apps/dashboard/src/components/ui/select.tsx
new file mode 100644
index 0000000..5628c1c
--- /dev/null
+++ b/apps/dashboard/src/components/ui/select.tsx
@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils"
+import { forwardRef, type SelectHTMLAttributes } from "react"
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          "flex h-9 w-full rounded-lg border border-border bg-background px-3 py-1 text-sm text-foreground shadow-none transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50 appearance-none bg-no-repeat",
+          className
+        )}
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808080' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`,
+          backgroundPosition: "right 10px center",
+          paddingRight: "32px",
+        }}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+Select.displayName = "Select"
+
+export { Select }
diff --git a/apps/dashboard/src/components/ui/switch.tsx b/apps/dashboard/src/components/ui/switch.tsx
new file mode 100644
index 0000000..563446a
--- /dev/null
+++ b/apps/dashboard/src/components/ui/switch.tsx
@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils"
+import { forwardRef, type InputHTMLAttributes, useRef } from "react"
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+  onCheckedChange?: (checked: boolean) => void
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  ({ className, checked, onChange, onCheckedChange, disabled, ...props }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChange?.(e)
+      onCheckedChange?.(e.target.checked)
+    }
+
+    return (
+      <label
+        className={cn(
+          "relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full transition-colors",
+          checked ? "bg-primary" : "bg-muted",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        )}
+      >
+        <input
+          ref={ref || inputRef}
+          type="checkbox"
+          checked={checked}
+          onChange={handleChange}
+          disabled={disabled}
+          className="sr-only"
+          {...props}
+        />
+        <span
+          className={cn(
+            "inline-block h-3.5 w-3.5 transform rounded-full bg-background transition-transform",
+            checked ? "translate-x-[18px]" : "translate-x-[3px]"
+          )}
+        />
+      </label>
+    )
+  }
+)
+Switch.displayName = "Switch"
+
+export { Switch }
diff --git a/apps/dashboard/src/components/ui/table.tsx b/apps/dashboard/src/components/ui/table.tsx
new file mode 100644
index 0000000..443ba82
--- /dev/null
+++ b/apps/dashboard/src/components/ui/table.tsx
@@ -0,0 +1,77 @@
+import { cn } from "@/lib/utils"
+import { forwardRef, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react"
+
+const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+)
+Table.displayName = "Table"
+
+const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b border-border", className)} {...props} />
+  )
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+)
+TableBody.displayName = "TableBody"
+
+const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = forwardRef<HTMLTableHeaderCellElement, ThHTMLAttributes<HTMLTableHeaderCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = forwardRef<HTMLTableDataCellElement, TdHTMLAttributes<HTMLTableDataCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn(
+        "p-3 align-middle [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+TableCell.displayName = "TableCell"
+
+export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell }
diff --git a/apps/dashboard/src/components/ui/tabs.tsx b/apps/dashboard/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..be4b3be
--- /dev/null
+++ b/apps/dashboard/src/components/ui/tabs.tsx
@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils"
+import { createContext, useContext, useState, type ReactNode } from "react"
+
+interface TabsContextValue {
+  value: string
+  onValueChange: (value: string) => void
+}
+
+const TabsContext = createContext<TabsContextValue | undefined>(undefined)
+
+function useTabs() {
+  const ctx = useContext(TabsContext)
+  if (!ctx) throw new Error("Tabs components must be used within Tabs")
+  return ctx
+}
+
+interface TabsProps {
+  defaultValue: string
+  children: ReactNode
+  className?: string
+  value?: string
+  onValueChange?: (value: string) => void
+}
+
+export function Tabs({ defaultValue, children, className, value: controlledValue, onValueChange }: TabsProps) {
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const value = controlledValue ?? internalValue
+  const setValue = onValueChange ?? setInternalValue
+
+  return (
+    <TabsContext.Provider value={{ value, onValueChange: setValue }}>
+      <div className={cn("", className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  )
+}
+
+interface TabsListProps {
+  children: ReactNode
+  className?: string
+}
+
+export function TabsList({ children, className }: TabsListProps) {
+  return (
+    <div className={cn("inline-flex items-center gap-1 rounded-lg bg-muted p-1", className)}>
+      {children}
+    </div>
+  )
+}
+
+interface TabsTriggerProps {
+  value: string
+  children: ReactNode
+  className?: string
+}
+
+export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
+  const { value: selectedValue, onValueChange } = useTabs()
+  const isActive = selectedValue === value
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      onClick={() => onValueChange(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        isActive
+          ? "bg-background text-foreground shadow-sm"
+          : "text-muted-foreground hover:text-foreground",
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface TabsContentProps {
+  value: string
+  children: ReactNode
+  className?: string
+}
+
+export function TabsContent({ value, children, className }: TabsContentProps) {
+  const { value: selectedValue } = useTabs()
+
+  if (selectedValue !== value) return null
+
+  return (
+    <div role="tabpanel" className={cn("", className)}>
+      {children}
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/components/ui/textarea.tsx b/apps/dashboard/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..0c27cb7
--- /dev/null
+++ b/apps/dashboard/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+import { forwardRef, type TextareaHTMLAttributes } from "react"
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          "flex min-h-[80px] w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/apps/dashboard/src/components/ui/tooltip.tsx b/apps/dashboard/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..f452aa2
--- /dev/null
+++ b/apps/dashboard/src/components/ui/tooltip.tsx
@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils"
+import { useState, useRef, type ReactNode } from "react"
+
+interface TooltipProps {
+  content: string
+  children: ReactNode
+  className?: string
+}
+
+export function Tooltip({ content, children, className }: TooltipProps) {
+  const [show, setShow] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  const handleMouseEnter = () => {
+    timeoutRef.current = setTimeout(() => { setShow(true) }, 300)
+  }
+
+  const handleMouseLeave = () => {
+    clearTimeout(timeoutRef.current)
+    setShow(false)
+  }
+
+  return (
+    <div
+      className="relative inline-flex"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+      {show && (
+        <div
+          className={cn(
+            "absolute bottom-full left-1/2 z-50 mb-1.5 -translate-x-1/2 rounded-md border border-border bg-card px-2.5 py-1 text-xs text-foreground shadow-lg whitespace-nowrap max-w-[300px] overflow-hidden text-ellipsis",
+            className
+          )}
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/dashboard/src/pages/BulkCreatePage.tsx b/apps/dashboard/src/pages/BulkCreatePage.tsx
index 22d95cf..6b9c15c 100644
--- a/apps/dashboard/src/pages/BulkCreatePage.tsx
+++ b/apps/dashboard/src/pages/BulkCreatePage.tsx
@@ -1,12 +1,214 @@
+import { useState } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { bulkCreateUrls } from "@/lib/api"
+import type { BulkResult } from "@linkify/shared"
+import { toast } from "sonner"
+import { useNavigate } from "react-router-dom"
 import PageHeader from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Loader2, Upload, CheckCircle, XCircle } from "lucide-react"
+import CopyButton from "@/components/copy-button"
+
+function BulkResultSuccess({ result }: { result: BulkResult }) {
+  const data = result.data as Record<string, string> | undefined
+  const shortUrl = data?.shortUrl
+  return (
+    <div className="flex items-center gap-2">
+      <span className="font-mono text-sm font-medium text-primary">
+        {shortUrl ?? result.code ?? "—"}
+      </span>
+      {shortUrl && (
+        <CopyButton text={shortUrl} variant="ghost" size="icon" />
+      )}
+    </div>
+  )
+}
 
 export default function BulkCreatePage() {
+  const { session } = useAuth()
+  const token = session?.access_token ?? ""
+  const navigate = useNavigate()
+
+  const [input, setInput] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [results, setResults] = useState<BulkResult[] | null>(null)
+
+  const urls = input
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+
+  const validUrls = urls.map((url) => {
+    try {
+      const fullUrl = url.startsWith("http") ? url : `https://${url}`
+      new URL(fullUrl)
+      return { original: url, url: fullUrl, valid: true }
+    } catch {
+      return { original: url, url: "", valid: false }
+    }
+  })
+
+  const validCount = validUrls.filter((u) => u.valid).length
+  const invalidCount = validUrls.filter((u) => !u.valid).length
+
+  const handleSubmit = async () => {
+    if (validCount === 0) {
+      toast.error("No valid URLs to create")
+      return
+    }
+
+    if (validCount > 50) {
+      toast.error("Maximum 50 URLs per batch")
+      return
+    }
+
+    setLoading(true)
+    try {
+      const payload = validUrls.filter((u) => u.valid).map((u) => ({ url: u.url }))
+      const data = await bulkCreateUrls(token, payload)
+      setResults(data)
+      const successCount = data.filter((r) => r.success).length
+      toast.success(`${successCount} of ${data.length} URLs created successfully`)
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to create URLs"
+      toast.error(msg)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleReset = () => {
+    setInput("")
+    setResults(null)
+  }
+
   return (
-    <div>
+    <div className="space-y-6">
       <PageHeader
         title="Bulk Create"
         description="Create multiple short links at once"
+        actions={
+          results && (
+            <Button variant="outline" size="sm" onClick={handleReset}>
+              Create another batch
+            </Button>
+          )
+        }
       />
+
+      {!results ? (
+        <Card>
+          <CardContent className="p-6 space-y-4">
+            <div className="space-y-1.5">
+              <Label htmlFor="urls">Enter URLs (one per line)</Label>
+              <Textarea
+                id="urls"
+                placeholder={`https://example.com/page1\nhttps://example.com/page2\nhttps://example.com/page3`}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                className="min-h-[200px] font-mono text-sm"
+              />
+            </div>
+
+            {urls.length > 0 && (
+              <div className="flex items-center gap-2 text-sm">
+                <span className="text-muted-foreground">
+                  {urls.length} URL{urls.length !== 1 ? "s" : ""} detected
+                </span>
+                {validCount > 0 && (
+                  <Badge variant="success" className="gap-1">
+                    <CheckCircle className="h-3 w-3" />
+                    {validCount} valid
+                  </Badge>
+                )}
+                {invalidCount > 0 && (
+                  <Badge variant="destructive" className="gap-1">
+                    <XCircle className="h-3 w-3" />
+                    {invalidCount} invalid
+                  </Badge>
+                )}
+              </div>
+            )}
+
+            <div className="flex items-center gap-3">
+              <Button onClick={handleSubmit} disabled={loading || validCount === 0} size="lg">
+                {loading ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Upload className="mr-2 h-4 w-4" />
+                )}
+                {loading ? "Creating..." : `Create ${validCount} URL${validCount !== 1 ? "s" : ""}`}
+              </Button>
+              <Button variant="outline" onClick={() => navigate("/urls")}>
+                Cancel
+              </Button>
+            </div>
+
+            {invalidCount > 0 && (
+              <div className="rounded-lg border border-destructive/20 bg-destructive/5 p-3">
+                <p className="text-xs font-medium text-destructive">Invalid URLs:</p>
+                <ul className="mt-1 list-inside list-disc text-xs text-destructive/80">
+                  {validUrls.filter((u) => !u.valid).map((u, i) => (
+                    <li key={i}>{u.original}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ) : (
+        <Card>
+          <CardContent className="p-6">
+            <div className="mb-4 flex items-center gap-2">
+              <span className="text-sm font-medium text-foreground">
+                Results
+              </span>
+              <Badge variant="success">
+                {results.filter((r) => r.success).length} succeeded
+              </Badge>
+              {results.some((r) => !r.success) && (
+                <Badge variant="destructive">
+                  {results.filter((r) => !r.success).length} failed
+                </Badge>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              {results.map((result, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between rounded-lg border border-border p-3"
+                >
+                  <div className="flex items-center gap-3 min-w-0">
+                    {result.success ? (
+                      <CheckCircle className="h-4 w-4 shrink-0 text-emerald-500" />
+                    ) : (
+                      <XCircle className="h-4 w-4 shrink-0 text-destructive" />
+                    )}
+                    <div className="min-w-0">
+                      {result.success ? (
+                        <BulkResultSuccess result={result} />
+                      ) : (
+                        <span className="text-sm text-muted-foreground">
+                          {result.error ?? "Unknown error"}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            <Button className="mt-4" onClick={() => navigate("/urls")}>
+              View all URLs
+            </Button>
+          </CardContent>
+        </Card>
+      )}
     </div>
   )
 }
diff --git a/apps/dashboard/src/pages/CreateUrlPage.tsx b/apps/dashboard/src/pages/CreateUrlPage.tsx
index 7154b35..8ee3229 100644
--- a/apps/dashboard/src/pages/CreateUrlPage.tsx
+++ b/apps/dashboard/src/pages/CreateUrlPage.tsx
@@ -1,12 +1,400 @@
+import { useState, useEffect } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { createUrl, listTags, listCollections } from "@/lib/api"
+import type { Tag, Collection, ShortUrl } from "@linkify/shared"
+import { toast } from "sonner"
+import { useNavigate } from "react-router-dom"
 import PageHeader from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Card, CardContent } from "@/components/ui/card"
+import CopyButton from "@/components/copy-button"
+import { Link2, CheckCircle, Loader2, Plus, X } from "lucide-react"
+
+const TTL_PRESETS = [
+  { label: "7 days", value: 7 },
+  { label: "30 days", value: 30 },
+  { label: "90 days", value: 90 },
+  { label: "365 days", value: 365 },
+  { label: "Never", value: 0 },
+] as const
+
+interface FormState {
+  url: string
+  customCode: string
+  ttlDays: string
+  password: string
+  activeAt: string
+  activeTime: string
+  blockBots: boolean
+  tags: string[]
+  collectionId: string
+}
+
+const initialForm: FormState = {
+  url: "",
+  customCode: "",
+  ttlDays: "",
+  password: "",
+  activeAt: "",
+  activeTime: "",
+  blockBots: false,
+  tags: [],
+  collectionId: "",
+}
 
 export default function CreateUrlPage() {
+  const { session } = useAuth()
+  const token = session?.access_token ?? ""
+  const navigate = useNavigate()
+
+  const [form, setForm] = useState<FormState>(initialForm)
+  const [tags, setTags] = useState<Tag[]>([])
+  const [collections, setCollections] = useState<Collection[]>([])
+  const [loading, setLoading] = useState(false)
+  const [created, setCreated] = useState<ShortUrl | null>(null)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [tagInput, setTagInput] = useState("")
+
+  useEffect(() => {
+    if (!token) return
+    Promise.all([
+      listTags(token).catch(() => ({ tags: [] as Tag[], pagination: { total: 0, page: 1, limit: 10, totalPages: 0 } })),
+      listCollections(token).catch(() => ({ collections: [] as Collection[], pagination: { total: 0, page: 1, limit: 10, totalPages: 0 } })),
+    ]).then(([tagsData, collectionsData]) => {
+      setTags(tagsData.tags)
+      setCollections(collectionsData.collections)
+    })
+  }, [token])
+
+  const updateField = (key: keyof FormState, value: string | boolean) => {
+    setForm((prev) => ({ ...prev, [key]: value }))
+    setErrors((prev) => ({ ...prev, [key]: "" }))
+  }
+
+  const addTag = (tagName: string) => {
+    const trimmed = tagName.trim().toLowerCase()
+    if (!trimmed || form.tags.includes(trimmed)) return
+    if (form.tags.length >= 10) {
+      toast.error("Maximum 10 tags allowed")
+      return
+    }
+    setForm((prev) => ({ ...prev, tags: [...prev.tags, trimmed] }))
+    setTagInput("")
+  }
+
+  const removeTag = (tag: string) => {
+    setForm((prev) => ({ ...prev, tags: prev.tags.filter((t) => t !== tag) }))
+  }
+
+  const validate = (): boolean => {
+    const errs: Record<string, string> = {}
+
+    if (!form.url.trim()) {
+      errs.url = "URL is required"
+    } else {
+      try {
+        new URL(form.url.startsWith("http") ? form.url : `https://${form.url}`)
+      } catch {
+        errs.url = "Invalid URL"
+      }
+    }
+
+    if (form.customCode && (form.customCode.length < 3 || form.customCode.length > 16)) {
+      errs.customCode = "Custom code must be 3-16 characters"
+    }
+
+    if (form.password && (form.password.length < 4 || form.password.length > 128)) {
+      errs.password = "Password must be 4-128 characters"
+    }
+
+    if (form.ttlDays && (Number(form.ttlDays) < 1 || Number(form.ttlDays) > 365)) {
+      errs.ttlDays = "TTL must be between 1 and 365 days"
+    }
+
+    setErrors(errs)
+    return Object.keys(errs).length === 0
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!validate()) return
+
+    setLoading(true)
+    try {
+      let activeAt: string | undefined
+      if (form.activeAt) {
+        activeAt = form.activeTime
+          ? `${form.activeAt}T${form.activeTime}:00.000Z`
+          : `${form.activeAt}T00:00:00.000Z`
+      }
+
+      const result = await createUrl(token, {
+        url: form.url.startsWith("http") ? form.url : `https://${form.url}`,
+        customCode: form.customCode || undefined,
+        ttlDays: form.ttlDays ? Number(form.ttlDays) : undefined,
+        password: form.password || undefined,
+        activeAt,
+        blockBots: form.blockBots,
+        tags: form.tags.length > 0 ? form.tags : undefined,
+        collectionId: form.collectionId ? Number(form.collectionId) : undefined,
+      })
+
+      setCreated(result)
+      toast.success("URL created successfully!")
+    } catch (err: unknown) {
+      const apiErr = err as { code?: string; message?: string }
+      if (apiErr.code === "CODE_TAKEN" || apiErr.code === "RESERVED_CODE") {
+        setErrors((prev) => ({ ...prev, customCode: apiErr.message || "Code not available" }))
+      } else if (apiErr.code === "INVALID_URL" || apiErr.code === "INVALID_PROTOCOL") {
+        setErrors((prev) => ({ ...prev, url: apiErr.message || "Invalid URL" }))
+      } else if (apiErr.code === "PLAN_LIMIT_REACHED") {
+        toast.error(apiErr.message || "Plan limit reached")
+      } else if (apiErr.code === "FEATURE_NOT_AVAILABLE") {
+        toast.error(apiErr.message || "Feature not available on your plan")
+      } else {
+        toast.error(apiErr.message || "Failed to create URL")
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCreateAnother = () => {
+    setForm(initialForm)
+    setCreated(null)
+    setErrors({})
+  }
+
+  if (created) {
+    return (
+      <div className="space-y-6">
+        <PageHeader
+          title="URL Created"
+          description="Your short link is ready"
+        />
+        <Card>
+          <CardContent className="flex flex-col items-center py-10 text-center">
+            <CheckCircle className="h-12 w-12 text-emerald-500" />
+            <h2 className="mt-4 text-lg font-semibold text-foreground">Link created successfully</h2>
+            <div className="mt-6 flex items-center gap-3 rounded-xl border border-border bg-muted/50 px-6 py-4">
+              <span className="text-lg font-mono font-medium text-primary">{created.shortUrl}</span>
+              <CopyButton text={created.shortUrl} variant="primary" size="sm" />
+            </div>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Destination: {created.url}
+            </p>
+            <div className="mt-6 flex gap-3">
+              <Button variant="outline" onClick={handleCreateAnother}>
+                <Plus className="mr-1.5 h-4 w-4" />
+                Create another
+              </Button>
+              <Button onClick={() => navigate(`/urls/${created.code}`)}>
+                View details
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
   return (
-    <div>
+    <div className="space-y-6">
       <PageHeader
         title="Create URL"
         description="Shorten a new link"
       />
+
+      <Card>
+        <CardContent className="p-6">
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* URL */}
+            <div className="space-y-1.5">
+              <Label htmlFor="url">
+                URL <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="url"
+                placeholder="https://example.com/very-long-url"
+                value={form.url}
+                onChange={(e) => updateField("url", e.target.value)}
+              />
+              {errors.url && <p className="text-xs text-destructive">{errors.url}</p>}
+            </div>
+
+            {/* Custom code */}
+            <div className="space-y-1.5">
+              <Label htmlFor="customCode">Custom code (optional)</Label>
+              <Input
+                id="customCode"
+                placeholder="my-custom-link"
+                value={form.customCode}
+                onChange={(e) => updateField("customCode", e.target.value)}
+              />
+              {errors.customCode && <p className="text-xs text-destructive">{errors.customCode}</p>}
+              <p className="text-xs text-muted-foreground">
+                3-16 characters: letters, numbers, hyphens, underscores
+              </p>
+            </div>
+
+            {/* TTL */}
+            <div className="space-y-1.5">
+              <Label>Expiry (optional)</Label>
+              <div className="flex flex-wrap gap-2">
+                {TTL_PRESETS.map((preset) => (
+                  <Button
+                    key={preset.value}
+                    type="button"
+                    variant={form.ttlDays === String(preset.value) ? "primary" : "outline"}
+                    size="sm"
+                    onClick={() => updateField("ttlDays", String(preset.value))}
+                  >
+                    {preset.label}
+                  </Button>
+                ))}
+                <Input
+                  type="number"
+                  min={1}
+                  max={365}
+                  placeholder="Custom"
+                  value={form.ttlDays && !TTL_PRESETS.some((p) => p.value === Number(form.ttlDays)) ? form.ttlDays : ""}
+                  onChange={(e) => updateField("ttlDays", e.target.value)}
+                  className="w-24 h-8 text-sm"
+                />
+              </div>
+              {errors.ttlDays && <p className="text-xs text-destructive">{errors.ttlDays}</p>}
+            </div>
+
+            {/* Password */}
+            <div className="space-y-1.5">
+              <Label htmlFor="password">Password protection (optional)</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Set a password to protect this link"
+                value={form.password}
+                onChange={(e) => updateField("password", e.target.value)}
+              />
+              {errors.password && <p className="text-xs text-destructive">{errors.password}</p>}
+              <p className="text-xs text-muted-foreground">
+                4-128 characters. Requires a plan with password protection.
+              </p>
+            </div>
+
+            {/* Active at */}
+            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <div className="space-y-1.5">
+                <Label htmlFor="activeAt">Schedule activation (optional)</Label>
+                <Input
+                  id="activeAt"
+                  type="date"
+                  value={form.activeAt}
+                  onChange={(e) => updateField("activeAt", e.target.value)}
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="activeTime">Time (optional)</Label>
+                <Input
+                  id="activeTime"
+                  type="time"
+                  value={form.activeTime}
+                  onChange={(e) => updateField("activeTime", e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* Block bots */}
+            <div className="flex items-center justify-between rounded-lg border border-border p-3">
+              <div>
+                <Label className="text-sm font-medium">Block bots</Label>
+                <p className="text-xs text-muted-foreground">Prevent automated crawlers from accessing this link</p>
+              </div>
+              <Switch
+                checked={form.blockBots}
+                onCheckedChange={(checked) => updateField("blockBots", checked)}
+              />
+            </div>
+
+            {/* Tags */}
+            <div className="space-y-1.5">
+              <Label>Tags (optional)</Label>
+              <div className="flex flex-wrap gap-1.5 mb-2">
+                {form.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center gap-1 rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary"
+                  >
+                    {tag}
+                    <button type="button" onClick={() => removeTag(tag)} className="hover:text-destructive">
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+              </div>
+              <div className="flex gap-2">
+                <Input
+                  placeholder="Type tag name and press Enter"
+                  value={tagInput}
+                  onChange={(e) => setTagInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      e.preventDefault()
+                      addTag(tagInput)
+                    }
+                  }}
+                  className="flex-1"
+                />
+                <Button type="button" variant="outline" size="sm" onClick={() => addTag(tagInput)}>
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-1.5 mt-1.5">
+                {tags.filter((t) => !form.tags.includes(t.name)).slice(0, 10).map((tag) => (
+                  <button
+                    key={tag.id}
+                    type="button"
+                    onClick={() => addTag(tag.name)}
+                    className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                  >
+                    <Plus className="h-3 w-3" />
+                    {tag.name}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Collection */}
+            <div className="space-y-1.5">
+              <Label htmlFor="collection">Collection (optional)</Label>
+              <select
+                id="collection"
+                value={form.collectionId}
+                onChange={(e) => updateField("collectionId", e.target.value)}
+                className="flex h-9 w-full rounded-lg border border-border bg-background px-3 py-1 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary appearance-none"
+              >
+                <option value="">No collection</option>
+                {collections.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Submit */}
+            <div className="flex items-center gap-3 pt-2">
+              <Button type="submit" disabled={loading} size="lg">
+                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {loading ? "Creating..." : "Create URL"}
+              </Button>
+              <Button type="button" variant="outline" onClick={() => navigate("/urls")}>
+                Cancel
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
     </div>
   )
 }
diff --git a/apps/dashboard/src/pages/UrlDetailPage.tsx b/apps/dashboard/src/pages/UrlDetailPage.tsx
index 2b8bf68..e866ca0 100644
--- a/apps/dashboard/src/pages/UrlDetailPage.tsx
+++ b/apps/dashboard/src/pages/UrlDetailPage.tsx
@@ -1,12 +1,649 @@
+import { useState, useEffect, useCallback } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { getUrlInfo, getUrlVisits, getUrlStats, exportVisitsCsv, generateQrCode, softDeleteUrl } from "@/lib/api"
+import type { ShortUrl, Visit, VisitStats, Pagination as PaginatedInfo } from "@linkify/shared"
+import { toast } from "sonner"
+import { useParams, useNavigate, Link } from "react-router-dom"
 import PageHeader from "@/components/page-header"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import StatusBadge, { getLinkStatus } from "@/components/status-badge"
+import CopyButton from "@/components/copy-button"
+import TablePagination from "@/components/ui/pagination"
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import {
+  BarChart, Bar, XAxis, YAxis, Tooltip as RechartsTooltip, ResponsiveContainer, LineChart, Line, CartesianGrid, Legend,
+} from "recharts"
+import {
+  ExternalLink,
+  Trash2,
+  Settings,
+  Download,
+  QrCode,
+  Eye,
+  Clock,
+  Globe,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Bot,
+  Loader2,
+  Calendar,
+  BarChart3,
+  Activity,
+} from "lucide-react"
+import { format } from "date-fns"
+
+const COUNTRY_FLAGS: Record<string, string> = {
+  US: "🇺🇸", GB: "🇬🇧", CA: "🇨🇦", AU: "🇦🇺", DE: "🇩🇪",
+  FR: "🇫🇷", JP: "🇯🇵", BR: "🇧🇷", IN: "🇮🇳", CN: "🇨🇳",
+  RU: "🇷🇺", KR: "🇰🇷", NL: "🇳🇱", SE: "🇸🇪", NO: "🇳🇴",
+  DK: "🇩🇰", FI: "🇫🇮", IT: "🇮🇹", ES: "🇪🇸", PT: "🇵🇹",
+  CH: "🇨🇭", AT: "🇦🇹", BE: "🇧🇪", IE: "🇮🇪", NZ: "🇳🇿",
+  SG: "🇸🇬", HK: "🇭🇰", TW: "🇹🇼", AE: "🇦🇪", SA: "🇸🇦",
+  MX: "🇲🇽", AR: "🇦🇷", CO: "🇨🇴", CL: "🇨🇱", ZA: "🇿🇦",
+  NG: "🇳🇬", EG: "🇪🇬", IL: "🇮🇱", TR: "🇹🇷", TH: "🇹🇭",
+  VN: "🇻🇳", PH: "🇵🇭", ID: "🇮🇩", MY: "🇲🇾", PK: "🇵🇰",
+  BD: "🇧🇩", PL: "🇵🇱", UA: "🇺🇦", RO: "🇷🇴", CZ: "🇨🇿",
+  GR: "🇬🇷", HU: "🇭🇺", SK: "🇸🇰", BG: "🇧🇬", HR: "🇭🇷",
+  RS: "🇷🇸", LT: "🇱🇹", SI: "🇸🇮", EE: "🇪🇪", LV: "🇱🇻",
+  IS: "🇮🇸", LU: "🇱🇺", MT: "🇲🇹", CY: "🇨🇾", AM: "🇦🇲",
+  GE: "🇬🇪", AZ: "🇦🇿", KZ: "🇰🇿", UZ: "🇺🇿", PE: "🇵🇪",
+}
+
+function getFlag(country: string | null): string {
+  if (!country) return "🌍"
+  return COUNTRY_FLAGS[country.toUpperCase()] ?? "🌍"
+}
+
+function getDeviceIcon(deviceType: string | null) {
+  switch (deviceType?.toLowerCase()) {
+    case "mobile": return <Smartphone className="h-3.5 w-3.5" />
+    case "tablet": return <Tablet className="h-3.5 w-3.5" />
+    default: return <Monitor className="h-3.5 w-3.5" />
+  }
+}
+
+function referrerCategoryColor(category: string | null): "default" | "secondary" | "outline" {
+  switch (category) {
+    case "direct": return "default"
+    case "search": return "secondary"
+    case "social": return "outline"
+    default: return "secondary"
+  }
+}
 
 export default function UrlDetailPage() {
+  const { session } = useAuth()
+  const token = session?.access_token ?? ""
+  const { code } = useParams<{ code: string }>()
+  const navigate = useNavigate()
+
+  const [urlInfo, setUrlInfo] = useState<ShortUrl | null>(null)
+  const [visits, setVisits] = useState<Visit[]>([])
+  const [visitsPagination, setVisitsPagination] = useState<PaginatedInfo | null>(null)
+  const [stats, setStats] = useState<VisitStats | null>(null)
+  const [activeTab, setActiveTab] = useState("info")
+  const [loading, setLoading] = useState(true)
+  const [visitsLoading, setVisitsLoading] = useState(false)
+  const [statsLoading, setStatsLoading] = useState(false)
+  const [csvLoading, setCsvLoading] = useState(false)
+  const [qrLoading, setQrLoading] = useState(false)
+  const [qrDialog, setQrDialog] = useState(false)
+  const [qrFormat, setQrFormat] = useState<"png" | "svg">("png")
+  const [qrLogo, setQrLogo] = useState("")
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null)
+  const [deleteDialog, setDeleteDialog] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [showTotal, setShowTotal] = useState(true)
+
+  const fetchUrlInfo = useCallback(async () => {
+    if (!code) return
+    try {
+      const data = await getUrlInfo(token, code)
+      setUrlInfo(data)
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "URL not found"
+      toast.error(msg)
+      navigate("/urls")
+    }
+  }, [code, token, navigate])
+
+  const fetchVisits = useCallback(async (page = 1) => {
+    if (!code) return
+    setVisitsLoading(true)
+    try {
+      const data = await getUrlVisits(code, { page, limit: 15 })
+      setVisits(data.visits)
+      setVisitsPagination(data.pagination)
+    } catch {
+      toast.error("Failed to load visits")
+    } finally {
+      setVisitsLoading(false)
+    }
+  }, [code])
+
+  const fetchStats = useCallback(async () => {
+    if (!code) return
+    setStatsLoading(true)
+    try {
+      const data = await getUrlStats(code)
+      setStats(data)
+    } catch {
+      toast.error("Failed to load stats")
+    } finally {
+      setStatsLoading(false)
+    }
+  }, [code])
+
+  useEffect(() => {
+    if (!code) return
+    setLoading(true)
+    Promise.all([fetchUrlInfo(), fetchVisits(), fetchStats()]).finally(() => setLoading(false))
+  }, [code, fetchUrlInfo, fetchVisits, fetchStats])
+
+  const handleExportCsv = async () => {
+    if (!code) return
+    setCsvLoading(true)
+    try {
+      const blob = await exportVisitsCsv(code)
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${code}-visits.csv`
+      a.click()
+      window.URL.revokeObjectURL(url)
+      toast.success("CSV downloaded")
+    } catch {
+      toast.error("Failed to export CSV")
+    } finally {
+      setCsvLoading(false)
+    }
+  }
+
+  const handleGenerateQr = async () => {
+    if (!code) return
+    setQrLoading(true)
+    setQrDataUrl(null)
+    try {
+      const blob = await generateQrCode(code, qrFormat, qrLogo || undefined)
+      const url = window.URL.createObjectURL(blob)
+      setQrDataUrl(url)
+    } catch {
+      toast.error("Failed to generate QR code")
+    } finally {
+      setQrLoading(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!code) return
+    setDeleting(true)
+    try {
+      await softDeleteUrl(token, code)
+      toast.success("URL deleted")
+      navigate("/urls")
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to delete"
+      toast.error(msg)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const dailyChartData = (stats?.daily ?? []).map((d) => ({
+    date: d.date ? format(new Date(d.date), "MMM d") : "",
+    visits: d.visits,
+    uniqueVisits: d.uniqueVisits,
+  }))
+
+  const hourlyChartData = (stats?.hourly ?? []).map((h) => ({
+    hour: h.hour ? format(new Date(h.hour), "HH:mm") : "",
+    visits: h.visits,
+    uniqueVisits: h.uniqueVisits,
+  }))
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-48 w-full rounded-xl" />
+      </div>
+    )
+  }
+
+  if (!urlInfo) return null
+
+  const status = getLinkStatus(urlInfo)
+
   return (
-    <div>
+    <div className="space-y-6">
       <PageHeader
-        title="URL Details"
+        title={urlInfo.code}
         description="View link analytics and activity"
+        actions={
+          <div className="flex gap-2">
+            <Link to={`/urls/${code}/settings`}>
+              <Button variant="outline" size="sm">
+                <Settings className="mr-1.5 h-4 w-4" />
+                Settings
+              </Button>
+            </Link>
+            <Button variant="outline" size="sm" onClick={() => setDeleteDialog(true)}>
+              <Trash2 className="mr-1.5 h-4 w-4 text-destructive" />
+              <span className="text-destructive">Delete</span>
+            </Button>
+          </div>
+        }
       />
+
+      {/* Info Header Card */}
+      <Card>
+        <CardContent className="p-5 space-y-5">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-2">
+                <span className="font-mono text-xl font-semibold text-primary">{urlInfo.shortUrl}</span>
+                <CopyButton text={urlInfo.shortUrl} variant="primary" size="sm" />
+              </div>
+              <a
+                href={urlInfo.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground truncate"
+              >
+                <ExternalLink className="h-3.5 w-3.5 shrink-0" />
+                <span className="truncate">{urlInfo.url}</span>
+              </a>
+            </div>
+            <StatusBadge status={status} />
+          </div>
+
+          {/* Stats row */}
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+            <div className="space-y-0.5">
+              <p className="text-xs text-muted-foreground">Total visits</p>
+              <p className="text-lg font-semibold tabular-nums">{urlInfo.visits.toLocaleString()}</p>
+            </div>
+            <div className="space-y-0.5">
+              <p className="text-xs text-muted-foreground">Unique visits</p>
+              <p className="text-lg font-semibold tabular-nums">{urlInfo.uniqueVisits.toLocaleString()}</p>
+            </div>
+            <div className="space-y-0.5">
+              <p className="text-xs text-muted-foreground">Created</p>
+              <p className="text-sm font-medium tabular-nums">{format(new Date(urlInfo.createdAt), "MMM d, yyyy")}</p>
+            </div>
+            <div className="space-y-0.5">
+              <p className="text-xs text-muted-foreground">Expires</p>
+              <p className="text-sm font-medium tabular-nums">
+                {urlInfo.expiresAt ? format(new Date(urlInfo.expiresAt), "MMM d, yyyy") : "Never"}
+              </p>
+            </div>
+          </div>
+
+          {/* OG Preview */}
+          {(urlInfo.title || urlInfo.description || urlInfo.image) && (
+            <div className="flex gap-4 rounded-lg border border-border bg-muted/30 p-4">
+              {urlInfo.image && (
+                <img
+                  src={urlInfo.image}
+                  alt=""
+                  className="h-16 w-16 shrink-0 rounded-lg object-cover"
+                  onError={(e) => { (e.target as HTMLImageElement).style.display = "none" }}
+                />
+              )}
+              <div className="min-w-0">
+                {urlInfo.title && (
+                  <p className="text-sm font-medium text-foreground truncate">{urlInfo.title}</p>
+                )}
+                {urlInfo.description && (
+                  <p className="mt-0.5 text-xs text-muted-foreground line-clamp-2">{urlInfo.description}</p>
+                )}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Tabs */}
+      <Tabs defaultValue="info" value={activeTab} onValueChange={setActiveTab}>
+        <TabsList>
+          <TabsTrigger value="info">
+            <Eye className="mr-1.5 h-4 w-4" />
+            Info
+          </TabsTrigger>
+          <TabsTrigger value="visits">
+            <Activity className="mr-1.5 h-4 w-4" />
+            Visits
+          </TabsTrigger>
+          <TabsTrigger value="stats">
+            <BarChart3 className="mr-1.5 h-4 w-4" />
+            Stats
+          </TabsTrigger>
+          <TabsTrigger value="qr">
+            <QrCode className="mr-1.5 h-4 w-4" />
+            QR Code
+          </TabsTrigger>
+        </TabsList>
+
+        {/* Info Tab */}
+        <TabsContent value="info">
+          <Card>
+            <CardContent className="p-5 space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-0.5">
+                  <p className="text-xs text-muted-foreground">Code</p>
+                  <p className="font-mono text-sm text-foreground">{urlInfo.code}</p>
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-xs text-muted-foreground">Block bots</p>
+                  <p className="text-sm text-foreground">{urlInfo.blockBots ? "Yes" : "No"}</p>
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-xs text-muted-foreground">Password protected</p>
+                  <p className="text-sm text-foreground">{urlInfo.hasPassword ? "Yes" : "No"}</p>
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-xs text-muted-foreground">Active at</p>
+                  <p className="text-sm text-foreground">
+                    {urlInfo.activeAt ? format(new Date(urlInfo.activeAt), "MMM d, yyyy HH:mm") : "Immediately"}
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Visits Tab */}
+        <TabsContent value="visits">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+              <CardTitle>Visit Log</CardTitle>
+              <Button variant="outline" size="sm" onClick={handleExportCsv} disabled={csvLoading}>
+                {csvLoading ? (
+                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                ) : (
+                  <Download className="mr-1.5 h-4 w-4" />
+                )}
+                Export CSV
+              </Button>
+            </CardHeader>
+            <CardContent>
+              {visitsLoading ? (
+                <div className="space-y-3">
+                  {Array.from({ length: 5 }).map((_, i) => (
+                    <Skeleton key={i} className="h-10 w-full rounded-lg" />
+                  ))}
+                </div>
+              ) : visits.length === 0 ? (
+                <div className="flex flex-col items-center py-10 text-center">
+                  <Eye className="h-8 w-8 text-muted-foreground/50" />
+                  <p className="mt-2 text-sm text-muted-foreground">No visits yet</p>
+                </div>
+              ) : (
+                <div className="rounded-lg border border-border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Time</TableHead>
+                        <TableHead>Location</TableHead>
+                        <TableHead>Device</TableHead>
+                        <TableHead>OS</TableHead>
+                        <TableHead>Browser</TableHead>
+                        <TableHead>Referrer</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {visits.map((v) => (
+                        <TableRow key={v.id}>
+                          <TableCell className="whitespace-nowrap text-xs tabular-nums text-muted-foreground">
+                            {format(new Date(v.visitedAt), "MMM d, HH:mm")}
+                          </TableCell>
+                          <TableCell>
+                            <span className="text-sm">
+                              {getFlag(v.country)} {v.country ?? "—"}
+                              {v.city && <span className="text-muted-foreground">, {v.city}</span>}
+                            </span>
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+                              {getDeviceIcon(v.deviceType)}
+                              <span className="capitalize">{v.deviceType ?? "—"}</span>
+                            </div>
+                          </TableCell>
+                          <TableCell className="text-sm text-muted-foreground">{v.os ?? "—"}</TableCell>
+                          <TableCell className="text-sm text-muted-foreground">
+                            {v.browser ?? "—"}
+                            {v.browserVersion && (
+                              <span className="text-xs text-muted-foreground/60"> v{v.browserVersion}</span>
+                            )}
+                          </TableCell>
+                          <TableCell className="max-w-[160px]">
+                            <div className="flex items-center gap-1.5">
+                              {v.referrerCategory && (
+                                <Badge variant={referrerCategoryColor(v.referrerCategory)} className="text-[10px] px-1.5 py-0">
+                                  {v.referrerCategory}
+                                </Badge>
+                              )}
+                              {v.isBot && (
+                                <Badge variant="destructive" className="text-[10px] px-1.5 py-0 gap-1">
+                                  <Bot className="h-2.5 w-2.5" />
+                                  Bot
+                                </Badge>
+                              )}
+                              {v.referer && (
+                                <span className="text-xs text-muted-foreground truncate">{v.referer}</span>
+                              )}
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+              {visitsPagination && visitsPagination.totalPages > 1 && (
+                <div className="mt-4 flex justify-center">
+                  <TablePagination
+                    page={visitsPagination.page}
+                    totalPages={visitsPagination.totalPages}
+                    onPageChange={fetchVisits}
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* Stats Tab */}
+        <TabsContent value="stats">
+          <div className="space-y-4">
+            {/* Summary stats */}
+            {stats && (
+              <div className="grid grid-cols-3 gap-4">
+                <Card>
+                  <CardContent className="p-4 text-center">
+                    <p className="text-xs text-muted-foreground">Total</p>
+                    <p className="mt-1 text-xl font-semibold tabular-nums">{stats.totalVisits.toLocaleString()}</p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardContent className="p-4 text-center">
+                    <p className="text-xs text-muted-foreground">Unique</p>
+                    <p className="mt-1 text-xl font-semibold tabular-nums">{stats.uniqueVisits.toLocaleString()}</p>
+                  </CardContent>
+                </Card>
+                <Card>
+                  <CardContent className="p-4 text-center">
+                    <p className="text-xs text-muted-foreground">Daily avg</p>
+                    <p className="mt-1 text-xl font-semibold tabular-nums">
+                      {stats.daily.length > 0
+                        ? Math.round(stats.totalVisits / stats.daily.length).toLocaleString()
+                        : "0"}
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+            )}
+
+            {/* Daily chart */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle>Daily Visits (7 days)</CardTitle>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setShowTotal(!showTotal)}
+                  >
+                    {showTotal ? "Show Unique" : "Show Total"}
+                  </Button>
+                </div>
+              </CardHeader>
+              <CardContent>
+                {statsLoading ? (
+                  <Skeleton className="h-64 w-full rounded-lg" />
+                ) : dailyChartData.length === 0 ? (
+                  <div className="flex flex-col items-center py-10 text-center">
+                    <BarChart3 className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="mt-2 text-sm text-muted-foreground">
+                      Not enough data yet. Share your link to get started.
+                    </p>
+                  </div>
+                ) : (
+                  <div className="h-64">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={dailyChartData}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                        <XAxis dataKey="date" tick={{ fontSize: 12, fill: "var(--color-muted-foreground)" }} />
+                        <YAxis tick={{ fontSize: 12, fill: "var(--color-muted-foreground)" }} />
+                        <RechartsTooltip />
+                        <Bar
+                          dataKey={showTotal ? "visits" : "uniqueVisits"}
+                          fill="oklch(0.35 0.12 260)"
+                          radius={[4, 4, 0, 0]}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+
+            {/* Hourly chart */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Hourly Visits (24h)</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {statsLoading ? (
+                  <Skeleton className="h-48 w-full rounded-lg" />
+                ) : hourlyChartData.length === 0 ? (
+                  <div className="flex flex-col items-center py-8 text-center">
+                    <Clock className="h-8 w-8 text-muted-foreground/50" />
+                    <p className="mt-2 text-sm text-muted-foreground">No hourly data available yet.</p>
+                  </div>
+                ) : (
+                  <div className="h-48">
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={hourlyChartData}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="var(--color-border)" />
+                        <XAxis dataKey="hour" tick={{ fontSize: 11, fill: "var(--color-muted-foreground)" }} />
+                        <YAxis tick={{ fontSize: 11, fill: "var(--color-muted-foreground)" }} />
+                        <RechartsTooltip />
+                        <Bar
+                          dataKey={showTotal ? "visits" : "uniqueVisits"}
+                          fill="oklch(0.55 0.01 260)"
+                          radius={[4, 4, 0, 0]}
+                        />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        {/* QR Code Tab */}
+        <TabsContent value="qr">
+          <Card>
+            <CardHeader>
+              <CardTitle>QR Code</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">Format</label>
+                  <select
+                    value={qrFormat}
+                    onChange={(e) => setQrFormat(e.target.value as "png" | "svg")}
+                    className="flex h-9 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  >
+                    <option value="png">PNG</option>
+                    <option value="svg">SVG</option>
+                  </select>
+                </div>
+                <div className="space-y-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">Logo URL (optional)</label>
+                  <input
+                    value={qrLogo}
+                    onChange={(e) => setQrLogo(e.target.value)}
+                    placeholder="https://example.com/logo.png"
+                    className="flex h-9 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                  />
+                </div>
+              </div>
+
+              <Button onClick={handleGenerateQr} disabled={qrLoading}>
+                {qrLoading ? (
+                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                ) : (
+                  <QrCode className="mr-1.5 h-4 w-4" />
+                )}
+                {qrLoading ? "Generating..." : "Generate QR Code"}
+              </Button>
+
+              {qrDataUrl && (
+                <div className="flex flex-col items-center gap-4 rounded-lg border border-border p-6">
+                  <img src={qrDataUrl} alt="QR Code" className="h-48 w-48" />
+                  <a
+                    href={qrDataUrl}
+                    download={`${code}-qr.${qrFormat}`}
+                    className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+                  >
+                    <Download className="h-4 w-4" />
+                    Download {qrFormat.toUpperCase()}
+                  </a>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* Delete Dialog */}
+      <Dialog open={deleteDialog} onClose={() => setDeleteDialog(false)}>
+        <DialogHeader>
+          <DialogTitle>Delete URL</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete <span className="font-mono font-medium text-foreground">{code}</span>?
+            This link will no longer be accessible.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setDeleteDialog(false)} disabled={deleting}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
+            {deleting ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogFooter>
+      </Dialog>
     </div>
   )
 }
diff --git a/apps/dashboard/src/pages/UrlsListPage.tsx b/apps/dashboard/src/pages/UrlsListPage.tsx
index 9016cf4..c798f03 100644
--- a/apps/dashboard/src/pages/UrlsListPage.tsx
+++ b/apps/dashboard/src/pages/UrlsListPage.tsx
@@ -1,30 +1,512 @@
+import { useState, useEffect, useCallback } from "react"
+import { useAuth } from "@/hooks/use-auth"
+import { listUrls, listTags, listCollections, softDeleteUrl } from "@/lib/api"
+import type { ShortUrl, Tag, Collection, Pagination as PaginatedInfo } from "@linkify/shared"
+import { toast } from "sonner"
+import { useSearchParams, Link } from "react-router-dom"
 import PageHeader from "@/components/page-header"
 import { Button } from "@/components/ui/button"
-import { Link } from "react-router-dom"
-import { Plus } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Skeleton } from "@/components/ui/skeleton"
+import { Tooltip } from "@/components/ui/tooltip"
+import StatusBadge, { getLinkStatus } from "@/components/status-badge"
+import TablePagination, { PageSizeSelector } from "@/components/ui/pagination"
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table"
+import { Switch } from "@/components/ui/switch"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import {
+  Search,
+  SlidersHorizontal,
+  X,
+  ChevronUp,
+  ChevronDown,
+  ChevronsUpDown,
+  Link as LinkIcon,
+  ExternalLink,
+  Trash2,
+  Settings,
+  MoreHorizontal,
+} from "lucide-react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { format } from "date-fns"
+
+interface FiltersState {
+  q: string
+  tagIds: string
+  collectionId: string
+  createdAfter: string
+  createdBefore: string
+  hasPassword: string
+  isActive: string
+  sortBy: string
+  sortOrder: string
+  page: string
+  limit: string
+}
+
+const defaultFilters: FiltersState = {
+  q: "",
+  tagIds: "",
+  collectionId: "",
+  createdAfter: "",
+  createdBefore: "",
+  hasPassword: "",
+  isActive: "",
+  sortBy: "createdAt",
+  sortOrder: "desc",
+  page: "1",
+  limit: "10",
+}
 
 export default function UrlsListPage() {
+  const { session } = useAuth()
+  const token = session?.access_token ?? ""
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const getFilters = useCallback((): FiltersState => {
+    const f = { ...defaultFilters }
+    for (const key of Object.keys(defaultFilters) as (keyof FiltersState)[]) {
+      const val = searchParams.get(key)
+      if (val) f[key] = val
+    }
+    return f
+  }, [searchParams])
+
+  const [filters, setFilters] = useState<FiltersState>(getFilters)
+  const [urls, setUrls] = useState<ShortUrl[]>([])
+  const [pagination, setPagination] = useState<PaginatedInfo | null>(null)
+  const [tags, setTags] = useState<Tag[]>([])
+  const [collections, setCollections] = useState<Collection[]>([])
+  const [loading, setLoading] = useState(true)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [deleteDialog, setDeleteDialog] = useState<string | null>(null)
+  const [deleting, setDeleting] = useState(false)
+
+  const totalActiveFilters = [filters.tagIds, filters.collectionId, filters.createdAfter, filters.createdBefore, filters.hasPassword, filters.isActive].filter(Boolean).length
+
+  const fetchData = useCallback(async () => {
+    if (!token) return
+    setLoading(true)
+    try {
+      const params = new URLSearchParams()
+      for (const [key, val] of Object.entries(filters)) {
+        if (val) params.set(key, val)
+      }
+      const [urlsData, tagsData, collectionsData] = await Promise.all([
+        listUrls(token, Object.fromEntries(params)),
+        listTags(token).catch(() => ({ tags: [], pagination: { total: 0 } as PaginatedInfo })),
+        listCollections(token).catch(() => ({ collections: [], pagination: { total: 0 } as PaginatedInfo })),
+      ])
+      setUrls(urlsData.urls)
+      setPagination(urlsData.pagination)
+      setTags(tagsData.tags)
+      setCollections(collectionsData.collections)
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to load URLs"
+      toast.error(msg)
+    } finally {
+      setLoading(false)
+    }
+  }, [token, filters])
+
+  useEffect(() => {
+    fetchData()
+  }, [fetchData])
+
+  useEffect(() => {
+    const newParams = new URLSearchParams()
+    for (const [key, val] of Object.entries(filters)) {
+      if (val) newParams.set(key, val)
+    }
+    setSearchParams(newParams, { replace: true })
+  }, [filters, setSearchParams])
+
+  const updateFilter = (key: keyof FiltersState, value: string) => {
+    setFilters((prev) => ({ ...prev, [key]: value, page: key === "page" ? value : "1" }))
+    setSelected(new Set())
+  }
+
+  const clearFilters = () => {
+    setFilters(defaultFilters)
+    setSelected(new Set())
+  }
+
+  const handleSort = (column: string) => {
+    setFilters((prev) => ({
+      ...prev,
+      sortBy: column,
+      sortOrder: prev.sortBy === column && prev.sortOrder === "asc" ? "desc" : "asc",
+      page: "1",
+    }))
+  }
+
+  const toggleSelect = (code: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(code)) next.delete(code)
+      else next.add(code)
+      return next
+    })
+  }
+
+  const toggleSelectAll = () => {
+    if (selected.size === urls.length) {
+      setSelected(new Set())
+    } else {
+      setSelected(new Set(urls.map((u) => u.code)))
+    }
+  }
+
+  const handleDelete = async (code: string) => {
+    setDeleting(true)
+    try {
+      await softDeleteUrl(token, code)
+      toast.success("URL deleted")
+      setDeleteDialog(null)
+      fetchData()
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : "Failed to delete"
+      toast.error(msg)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const SortIcon = ({ column }: { column: string }) => {
+    if (filters.sortBy !== column) return <ChevronsUpDown className="ml-1 h-3 w-3 text-muted-foreground" />
+    return filters.sortOrder === "asc" ? (
+      <ChevronUp className="ml-1 h-3 w-3" />
+    ) : (
+      <ChevronDown className="ml-1 h-3 w-3" />
+    )
+  }
+
   return (
-    <div>
+    <div className="space-y-4">
       <PageHeader
         title="URLs"
         description="Manage your short links"
         actions={
           <div className="flex gap-2">
             <Link to="/urls/new">
-              <Button size="sm">
-                <Plus className="mr-1.5 h-4 w-4" />
-                Create URL
-              </Button>
+              <Button size="sm">Create URL</Button>
             </Link>
             <Link to="/urls/bulk">
-              <Button variant="outline" size="sm">
-                Bulk Create
-              </Button>
+              <Button variant="outline" size="sm">Bulk Create</Button>
             </Link>
           </div>
         }
       />
+
+      {/* Search & Filters */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search URLs and codes..."
+            value={filters.q}
+            onChange={(e) => updateFilter("q", e.target.value)}
+            className="pl-9 pr-8"
+          />
+          {filters.q && (
+            <button
+              onClick={() => updateFilter("q", "")}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <Popover>
+          <PopoverTrigger>
+            <Button variant="outline" size="sm" className="gap-2">
+              <SlidersHorizontal className="h-4 w-4" />
+              Filters
+              {totalActiveFilters > 0 && (
+                <Badge variant="default" className="ml-1 h-5 w-5 rounded-full p-0 text-xs">{totalActiveFilters}</Badge>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-72 p-4 space-y-4" align="end">
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium text-muted-foreground">Tag</label>
+              <select
+                value={filters.tagIds}
+                onChange={(e) => updateFilter("tagIds", e.target.value)}
+                className="w-full h-8 rounded-lg border border-border bg-background px-2 text-sm"
+              >
+                <option value="">All tags</option>
+                {tags.map((t) => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium text-muted-foreground">Collection</label>
+              <select
+                value={filters.collectionId}
+                onChange={(e) => updateFilter("collectionId", e.target.value)}
+                className="w-full h-8 rounded-lg border border-border bg-background px-2 text-sm"
+              >
+                <option value="">All collections</option>
+                {collections.map((c) => (
+                  <option key={c.id} value={c.id}>{c.name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">From</label>
+                <Input
+                  type="date"
+                  value={filters.createdAfter}
+                  onChange={(e) => updateFilter("createdAfter", e.target.value)}
+                  className="h-8 text-xs"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <label className="text-xs font-medium text-muted-foreground">To</label>
+                <Input
+                  type="date"
+                  value={filters.createdBefore}
+                  onChange={(e) => updateFilter("createdBefore", e.target.value)}
+                  className="h-8 text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground">Password protected</span>
+                <Switch
+                  checked={filters.hasPassword === "true"}
+                  onCheckedChange={(checked) => updateFilter("hasPassword", checked ? "true" : "")}
+                />
+              </label>
+              <label className="flex items-center justify-between">
+                <span className="text-xs font-medium text-muted-foreground">Active only</span>
+                <Switch
+                  checked={filters.isActive === "true"}
+                  onCheckedChange={(checked) => updateFilter("isActive", checked ? "true" : "")}
+                />
+              </label>
+            </div>
+
+            {(filters.q || totalActiveFilters > 0) && (
+              <Button variant="ghost" size="sm" className="w-full" onClick={clearFilters}>
+                Clear filters
+              </Button>
+            )}
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {/* Data Table */}
+      {loading ? (
+        <div className="space-y-3">
+          <Skeleton className="h-10 w-full rounded-lg" />
+          {Array.from({ length: 5 }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full rounded-lg" />
+          ))}
+        </div>
+      ) : urls.length === 0 && !filters.q && totalActiveFilters === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <LinkIcon className="h-10 w-10 text-muted-foreground/50" />
+          <h3 className="mt-4 text-base font-medium text-foreground">No links yet</h3>
+          <p className="mt-1 text-sm text-muted-foreground">Create your first short link to get started.</p>
+          <Link to="/urls/new">
+            <Button size="sm" className="mt-4">Create your first link</Button>
+          </Link>
+        </div>
+      ) : urls.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <Search className="h-10 w-10 text-muted-foreground/50" />
+          <h3 className="mt-4 text-base font-medium text-foreground">No matching links</h3>
+          <p className="mt-1 text-sm text-muted-foreground">Try adjusting your filters.</p>
+          <Button variant="outline" size="sm" className="mt-4" onClick={clearFilters}>
+            Clear filters
+          </Button>
+        </div>
+      ) : (
+        <div className="rounded-xl border border-border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-10">
+                  <input
+                    type="checkbox"
+                    checked={selected.size === urls.length && urls.length > 0}
+                    onChange={toggleSelectAll}
+                    className="h-4 w-4 rounded border-border"
+                  />
+                </TableHead>
+                <TableHead className="cursor-pointer select-none" onClick={() => handleSort("code")}>
+                  <div className="flex items-center">
+                    Code
+                    <SortIcon column="code" />
+                  </div>
+                </TableHead>
+                <TableHead>Destination</TableHead>
+                <TableHead>Title</TableHead>
+                <TableHead className="cursor-pointer select-none" onClick={() => handleSort("visits")}>
+                  <div className="flex items-center">
+                    Visits
+                    <SortIcon column="visits" />
+                  </div>
+                </TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead className="cursor-pointer select-none" onClick={() => handleSort("createdAt")}>
+                  <div className="flex items-center">
+                    Created
+                    <SortIcon column="createdAt" />
+                  </div>
+                </TableHead>
+                <TableHead className="w-12" />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {urls.map((url) => {
+                const status = getLinkStatus(url)
+                return (
+                  <TableRow key={url.code}>
+                    <TableCell>
+                      <input
+                        type="checkbox"
+                        checked={selected.has(url.code)}
+                        onChange={() => toggleSelect(url.code)}
+                        className="h-4 w-4 rounded border-border"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Link
+                        to={`/urls/${url.code}`}
+                        className="font-mono text-sm font-medium text-primary hover:underline"
+                      >
+                        {url.code}
+                      </Link>
+                    </TableCell>
+                    <TableCell className="max-w-[220px]">
+                      <Tooltip content={url.url}>
+                        <a
+                          href={url.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground truncate"
+                        >
+                          <ExternalLink className="h-3 w-3 shrink-0" />
+                          <span className="truncate">{url.url}</span>
+                        </a>
+                      </Tooltip>
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-foreground truncate block max-w-[180px]">
+                        {url.title ?? "—"}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <div className="text-sm tabular-nums">
+                        <span className="font-medium">{url.visits}</span>
+                        <span className="text-muted-foreground ml-1">/ {url.uniqueVisits}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <StatusBadge status={status} />
+                    </TableCell>
+                    <TableCell>
+                      <span className="text-sm text-muted-foreground tabular-nums">
+                        {format(new Date(url.createdAt), "MMM d, yyyy")}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" className="h-8 w-8">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                          <DropdownMenuItem onClick={() => navigator.clipboard.writeText(url.shortUrl)}>
+                            <ExternalLink className="mr-2 h-4 w-4" />
+                            Copy short URL
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => navigator.clipboard.writeText(url.url)}>
+                            <ExternalLink className="mr-2 h-4 w-4" />
+                            Copy destination URL
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <Link to={`/urls/${url.code}/settings`}>
+                            <DropdownMenuItem>
+                              <Settings className="mr-2 h-4 w-4" />
+                              Settings
+                            </DropdownMenuItem>
+                          </Link>
+                          <DropdownMenuSeparator />
+                          <DropdownMenuItem onClick={() => setDeleteDialog(url.code)}>
+                            <Trash2 className="mr-2 h-4 w-4 text-destructive" />
+                            <span className="text-destructive">Delete</span>
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+
+          {pagination && (
+            <div className="flex items-center justify-between border-t border-border px-4 py-3">
+              <PageSizeSelector
+                pageSize={Number(filters.limit)}
+                onPageSizeChange={(size) => updateFilter("limit", String(size))}
+              />
+              <div className="flex items-center gap-4">
+                <span className="text-sm text-muted-foreground">
+                  Page {pagination.page} of {pagination.totalPages} ({pagination.total} total)
+                </span>
+                <TablePagination
+                  page={pagination.page}
+                  totalPages={pagination.totalPages}
+                  onPageChange={(page) => updateFilter("page", String(page))}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Delete Dialog */}
+      <Dialog open={!!deleteDialog} onClose={() => setDeleteDialog(null)}>
+        <DialogHeader>
+          <DialogTitle>Delete URL</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete <span className="font-mono font-medium text-foreground">{deleteDialog}</span>?
+            This link will no longer be accessible.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setDeleteDialog(null)} disabled={deleting}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => deleteDialog && handleDelete(deleteDialog)}
+            disabled={deleting}
+          >
+            {deleting ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogFooter>
+      </Dialog>
     </div>
   )
 }
diff --git a/opencode.json b/opencode.json
index 986631c..f4ef765 100644
--- a/opencode.json
+++ b/opencode.json
@@ -1,7 +1,5 @@
 {
   "$schema": "https://opencode.ai/config.json",
-  "model": "anthropic/claude-sonnet-4-5",
-  "small_model": "anthropic/claude-haiku-4-5",
   "default_agent": "build",
   "instructions": [
     "AGENTS.md",
@@ -31,7 +29,6 @@
     "build": {
       "description": "Primary coding agent for development work",
       "mode": "primary",
-      "model": "anthropic/claude-sonnet-4-5",
       "tools": {
         "write": true,
         "edit": true,
@@ -43,7 +40,6 @@
     "planner": {
       "description": "Expert planning specialist for complex features and refactoring. Use for implementation planning, architectural changes, or complex refactoring.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/planner.txt}",
       "tools": {
         "read": true,
@@ -55,7 +51,6 @@
     "architect": {
       "description": "Software architecture specialist for system design, scalability, and technical decision-making.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/architect.txt}",
       "tools": {
         "read": true,
@@ -67,7 +62,6 @@
     "code-reviewer": {
       "description": "Expert code review specialist. Reviews code for quality, security, and maintainability. Use immediately after writing or modifying code.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/code-reviewer.txt}",
       "tools": {
         "read": true,
@@ -79,19 +73,17 @@
     "security-reviewer": {
       "description": "Security vulnerability detection and remediation specialist. Use after writing code that handles user input, authentication, API endpoints, or sensitive data.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/security-reviewer.txt}",
       "tools": {
         "read": true,
-        "bash": true,
         "write": true,
-        "edit": true
+        "edit": true,
+        "bash": true
       }
     },
     "tdd-guide": {
       "description": "Test-Driven Development specialist enforcing write-tests-first methodology. Use when writing new features, fixing bugs, or refactoring code. Ensures 80%+ test coverage.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/tdd-guide.txt}",
       "tools": {
         "read": true,
@@ -103,7 +95,6 @@
     "build-error-resolver": {
       "description": "Build and TypeScript error resolution specialist. Use when build fails or type errors occur. Fixes build/type errors only with minimal diffs.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/build-error-resolver.txt}",
       "tools": {
         "read": true,
@@ -115,7 +106,6 @@
     "e2e-runner": {
       "description": "End-to-end testing specialist using Playwright. Generates, maintains, and runs E2E tests for critical user flows.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/e2e-runner.txt}",
       "tools": {
         "read": true,
@@ -127,7 +117,6 @@
     "doc-updater": {
       "description": "Documentation and codemap specialist. Use for updating codemaps and documentation.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/doc-updater.txt}",
       "tools": {
         "read": true,
@@ -139,7 +128,6 @@
     "refactor-cleaner": {
       "description": "Dead code cleanup and consolidation specialist. Use for removing unused code, duplicates, and refactoring.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/refactor-cleaner.txt}",
       "tools": {
         "read": true,
@@ -151,7 +139,6 @@
     "go-reviewer": {
       "description": "Expert Go code reviewer specializing in idiomatic Go, concurrency patterns, error handling, and performance.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/go-reviewer.txt}",
       "tools": {
         "read": true,
@@ -163,7 +150,6 @@
     "go-build-resolver": {
       "description": "Go build, vet, and compilation error resolution specialist. Fixes Go build errors with minimal changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/go-build-resolver.txt}",
       "tools": {
         "read": true,
@@ -175,7 +161,6 @@
     "database-reviewer": {
       "description": "PostgreSQL database specialist for query optimization, schema design, security, and performance. Incorporates Supabase best practices.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/database-reviewer.txt}",
       "tools": {
         "read": true,
@@ -187,7 +172,6 @@
     "cpp-reviewer": {
       "description": "Expert C++ code reviewer specializing in memory safety, modern C++ idioms, concurrency, and performance. Use for all C++ code changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/cpp-reviewer.txt}",
       "tools": {
         "read": true,
@@ -199,7 +183,6 @@
     "cpp-build-resolver": {
       "description": "C++ build, CMake, and compilation error resolution specialist. Fixes build errors, linker issues, and template errors with minimal changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/cpp-build-resolver.txt}",
       "tools": {
         "read": true,
@@ -211,7 +194,6 @@
     "docs-lookup": {
       "description": "Documentation specialist using Context7 MCP to fetch current library and API documentation with code examples.",
       "mode": "subagent",
-      "model": "anthropic/claude-sonnet-4-5",
       "prompt": "{file:.opencode/prompts/agents/docs-lookup.txt}",
       "tools": {
         "read": true,
@@ -223,7 +205,6 @@
     "harness-optimizer": {
       "description": "Analyze and improve the local agent harness configuration for reliability, cost, and throughput.",
       "mode": "subagent",
-      "model": "anthropic/claude-sonnet-4-5",
       "prompt": "{file:.opencode/prompts/agents/harness-optimizer.txt}",
       "tools": {
         "read": true,
@@ -234,7 +215,6 @@
     "java-reviewer": {
       "description": "Expert Java and Spring Boot code reviewer specializing in layered architecture, JPA patterns, security, and concurrency.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/java-reviewer.txt}",
       "tools": {
         "read": true,
@@ -246,7 +226,6 @@
     "java-build-resolver": {
       "description": "Java/Maven/Gradle build, compilation, and dependency error resolution specialist. Fixes build errors with minimal changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/java-build-resolver.txt}",
       "tools": {
         "read": true,
@@ -258,7 +237,6 @@
     "kotlin-reviewer": {
       "description": "Kotlin and Android/KMP code reviewer. Reviews Kotlin code for idiomatic patterns, coroutine safety, Compose best practices.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/kotlin-reviewer.txt}",
       "tools": {
         "read": true,
@@ -270,7 +248,6 @@
     "kotlin-build-resolver": {
       "description": "Kotlin/Gradle build, compilation, and dependency error resolution specialist. Fixes Kotlin build errors with minimal changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/kotlin-build-resolver.txt}",
       "tools": {
         "read": true,
@@ -282,7 +259,6 @@
     "loop-operator": {
       "description": "Operate autonomous agent loops, monitor progress, and intervene safely when loops stall.",
       "mode": "subagent",
-      "model": "anthropic/claude-sonnet-4-5",
       "prompt": "{file:.opencode/prompts/agents/loop-operator.txt}",
       "tools": {
         "read": true,
@@ -293,7 +269,6 @@
     "php-reviewer": {
       "description": "Expert PHP code reviewer specializing in PSR-12 compliance, PHP type system, Eloquent ORM patterns, security, and performance.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/php-reviewer.txt}",
       "tools": {
         "read": true,
@@ -305,7 +280,6 @@
     "python-reviewer": {
       "description": "Expert Python code reviewer specializing in PEP 8 compliance, Pythonic idioms, type hints, security, and performance.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/python-reviewer.txt}",
       "tools": {
         "read": true,
@@ -317,7 +291,6 @@
     "rust-reviewer": {
       "description": "Expert Rust code reviewer specializing in idiomatic Rust, ownership, lifetimes, concurrency, and performance.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/rust-reviewer.txt}",
       "tools": {
         "read": true,
@@ -329,7 +302,6 @@
     "rust-build-resolver": {
       "description": "Rust build, Cargo, and compilation error resolution specialist. Fixes Rust build errors with minimal changes.",
       "mode": "subagent",
-      "model": "anthropic/claude-opus-4-5",
       "prompt": "{file:.opencode/prompts/agents/rust-build-resolver.txt}",
       "tools": {
         "read": true,
@@ -475,9 +447,9 @@
   },
   "mcp": {
     "21st": {
-      "type":"remote",
+      "type": "remote",
       "url": "https://21st.dev/api/mcp",
-      "enabled":true,
+      "enabled": true,
       "headers": {
         "x-api-key": "21st_sk_e97f6ad7dba85817321fea2aeb876ba733738c50511181f8610ba07026a4c697"
       }
@@ -486,4 +458,4 @@
   "permission": {
     "mcp_*": "ask"
   }
-}
\ No newline at end of file
+}
diff --git a/specs/03-third-fourth-phase.md b/specs/03-third-fourth-phase.md
new file mode 100644
index 0000000..fedc747
--- /dev/null
+++ b/specs/03-third-fourth-phase.md
@@ -0,0 +1,26 @@
+# Building the Phase 3 and Phase 4
+
+You have to build the Phase 3 and Phase 4 of the phases.md file.
+
+## Instruction
+
+You are a professional and experienced software developer with years of experience. Write professional and production-ready code and professional code logics and best-practices. think like a 100x engineer. do same as what he would do. follow proper typescript. Do not break anything.  Build everything written in the phase.
+
+## What to DO.
+
+write production-ready code and professional code and best-practices. Follow professional code guidelines.Create a minimal aesthetic professional and popping out UI and UX that follows modern design principles and professional design hirarchy and strictly follow the DESIGN.md file for the design theme and layout and everything.
+
+## What not to do.
+
+Dont use hardcoded talwind colors. 
+
+## Context
+
+- AGENTS.md
+- docs/API.md
+- docs/PROJECT.md
+- README.md
+- phases.md
+- DESIGN.md
+
+these all files have all the context related to project backend and full guides.
\ No newline at end of file