diff --git a/Dockerfile b/Dockerfile
index 9da08df6..5caa443a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -20,7 +20,7 @@ RUN npm install -g pnpm && pnpm install
 # Last supported deno version for netlify is 2.2.4
 RUN npm install -g deno@2.2.4
 
-RUN npm install -g sst
+RUN npm install -g sst@3.17.14
 
 RUN echo "LC_ALL=en_US.UTF-8" >> /etc/environment
 RUN echo "en_US.UTF-8 UTF-8" >> /etc/locale.gen
diff --git a/app/api/slugs/route.ts b/app/api/slugs/route.ts
new file mode 100644
index 00000000..2273ba79
--- /dev/null
+++ b/app/api/slugs/route.ts
@@ -0,0 +1,72 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { requireUserId } from '~/auth/session';
+import { generateDefaultSlug, generateUniqueSlug, isValidSlug } from '~/utils/slug';
+import { prisma } from '~/lib/prisma';
+
+export async function POST(request: NextRequest) {
+  try {
+    await requireUserId(request);
+
+    const { baseSlug, chatId, siteName, existingSlug } = await request.json<any>(); // TODO: type
+
+    // Validate input
+    if (!baseSlug && !chatId) {
+      return NextResponse.json({ error: 'Either baseSlug or chatId is required' }, { status: 400 });
+    }
+
+    // Generate base slug if not provided
+    const slugToUse = baseSlug || generateDefaultSlug(chatId, siteName);
+
+    // Validate the base slug
+    if (!isValidSlug(slugToUse)) {
+      return NextResponse.json({ error: 'Invalid slug format' }, { status: 400 });
+    }
+
+    // Generate unique slug
+    const uniqueSlug = await generateUniqueSlug(slugToUse, existingSlug);
+
+    return NextResponse.json({ slug: uniqueSlug });
+  } catch (error) {
+    console.error('Error generating slug:', error);
+    return NextResponse.json({ error: 'Failed to generate slug' }, { status: 500 });
+  }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const slug = searchParams.get('slug');
+
+    if (!slug) {
+      return NextResponse.json({ error: 'Slug parameter is required' }, { status: 400 });
+    }
+
+    // Validate slug format
+    const isValid = isValidSlug(slug);
+
+    if (!isValid) {
+      return NextResponse.json({ isValid: false, isAvailable: false });
+    }
+
+    // Check if slug is available (not used by other websites)
+    const existingWebsite = await prisma.website.findFirst({
+      where: {
+        slug,
+      },
+      select: {
+        id: true,
+      },
+    });
+
+    const isAvailable = !existingWebsite;
+
+    return NextResponse.json({
+      isValid: true,
+      isAvailable,
+      message: isAvailable ? 'Slug is available' : 'Slug is already taken',
+    });
+  } catch (error) {
+    console.error('Error validating slug:', error);
+    return NextResponse.json({ error: 'Failed to validate slug' }, { status: 500 });
+  }
+}
diff --git a/app/api/validate-url/route.ts b/app/api/validate-url/route.ts
new file mode 100644
index 00000000..b8d106dd
--- /dev/null
+++ b/app/api/validate-url/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { validateDeploymentUrl } from '~/lib/utils/app-url';
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const url = searchParams.get('url');
+
+    if (!url) {
+      return NextResponse.json({ success: false, error: 'URL parameter is required' }, { status: 400 });
+    }
+
+    // Validate the URL format
+    try {
+      new URL(url);
+    } catch {
+      return NextResponse.json({ success: false, error: 'Invalid URL format' }, { status: 400 });
+    }
+
+    // Validate the deployment URL
+    const result = await validateDeploymentUrl(url);
+
+    return NextResponse.json({
+      success: true,
+      valid: result.valid,
+      error: result.error,
+    });
+  } catch (error) {
+    console.error('URL validation error:', error);
+    return NextResponse.json({ success: false, error: 'Internal server error' }, { status: 500 });
+  }
+}
diff --git a/app/api/websites/[id]/route.ts b/app/api/websites/[id]/route.ts
index dc13838f..39fb5484 100644
--- a/app/api/websites/[id]/route.ts
+++ b/app/api/websites/[id]/route.ts
@@ -1,136 +1,126 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { z } from 'zod';
-import { PermissionAction, PermissionResource, Prisma } from '@prisma/client';
-import { subject } from '@casl/ability';
-import { requireUserAbility } from '~/auth/session';
-import { deleteWebsite, getWebsite, updateWebsite } from '~/lib/services/websiteService';
-import { env } from '~/env';
+import { requireUserId } from '~/auth/session';
+import { prisma } from '~/lib/prisma';
 import { logger } from '~/utils/logger';
+import { generateUniqueSlug } from '~/utils/slug';
+import { z } from 'zod';
 
-// Netlify API client
-const NETLIFY_API_URL = 'https://api.netlify.com/api/v1';
-const NETLIFY_ACCESS_TOKEN = env.server.NETLIFY_AUTH_TOKEN;
-
-async function deleteNetlifySite(siteId: string) {
-  if (!NETLIFY_ACCESS_TOKEN) {
-    throw new Error('NETLIFY_ACCESS_TOKEN is not configured');
-  }
-
-  const response = await fetch(`${NETLIFY_API_URL}/sites/${siteId}`, {
-    method: 'DELETE',
-    headers: {
-      Authorization: `Bearer ${NETLIFY_ACCESS_TOKEN}`,
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (!response.ok) {
-    const error = (await response.json()) as any;
-    throw new Error(`Failed to delete Netlify site: ${error.message || response.statusText}`);
-  }
-
-  return true;
-}
-
-export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  try {
-    const { userAbility } = await requireUserAbility(request);
-    const { id } = await params;
-
-    const website = await getWebsite(id);
-
-    if (
-      userAbility.cannot(PermissionAction.read, subject(PermissionResource.Website, website)) &&
-      userAbility.cannot(
-        PermissionAction.read,
-        subject(PermissionResource.Environment, { id: website.environmentId ?? undefined }),
-      )
-    ) {
-      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
-    }
-
-    return NextResponse.json({ success: true, website });
-  } catch (error) {
-    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2025') {
-      return NextResponse.json({ success: false, error: 'Website not found' }, { status: 404 });
-    }
-
-    return NextResponse.json({ success: false, error: 'Failed to fetch website' }, { status: 500 });
-  }
-}
-
-const patchRequestSchema = z.object({
-  siteName: z.string().min(1, 'Site name is required'),
+const requestBodySchema = z.object({
+  siteName: z.string().min(1).max(100).optional(),
+  slug: z.string().min(1).max(50).optional(),
 });
 
 export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   try {
-    const { userAbility } = await requireUserAbility(request);
+    const userId = await requireUserId(request);
     const { id } = await params;
-
     const body = await request.json();
-    const parsedBody = patchRequestSchema.safeParse(body);
-
-    if (!parsedBody.success) {
-      return NextResponse.json({ success: false, error: parsedBody.error.flatten().fieldErrors }, { status: 400 });
+    const parseResult = requestBodySchema.parse(body);
+    const { siteName, slug } = parseResult;
+
+    // Verify the website belongs to the user
+    const existingWebsite = await prisma.website.findFirst({
+      where: {
+        id,
+        createdById: userId,
+      },
+    });
+
+    if (!existingWebsite) {
+      return NextResponse.json({ error: 'Website not found' }, { status: 404 });
     }
 
-    const website = await getWebsite(id);
+    // Prepare update data
+    const updateData: any = {};
 
-    if (
-      userAbility.cannot(PermissionAction.update, subject(PermissionResource.Website, website)) &&
-      userAbility.cannot(
-        PermissionAction.update,
-        subject(PermissionResource.Environment, { id: website.environmentId ?? undefined }),
-      )
-    ) {
-      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
+    if (siteName !== undefined) {
+      updateData.siteName = siteName;
     }
 
-    const updatedWebsite = await updateWebsite(id, parsedBody.data);
-
-    return NextResponse.json({ success: true, website: updatedWebsite });
-  } catch (error) {
-    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2025') {
-      return NextResponse.json({ success: false, error: `Website not found` }, { status: 404 });
+    if (slug !== undefined) {
+      if (slug && slug.trim()) {
+        // Check if slug is already taken by another website
+        const existingSlugWebsite = await prisma.website.findFirst({
+          where: {
+            slug: slug.trim(),
+            id: { not: id }, // Exclude current website
+          },
+        });
+
+        if (existingSlugWebsite) {
+          return NextResponse.json({ error: 'Slug is already taken' }, { status: 400 });
+        }
+
+        updateData.slug = slug.trim();
+      } else {
+        // Generate a new slug if empty
+        const baseSlug = siteName || existingWebsite.siteName || 'untitled-app';
+        updateData.slug = await generateUniqueSlug(baseSlug, existingWebsite.slug || undefined);
+      }
     }
 
-    return NextResponse.json({ success: false, error: 'Failed to update website' }, { status: 500 });
+    // Update the website
+    const updatedWebsite = await prisma.website.update({
+      where: { id },
+      data: updateData,
+      include: {
+        environment: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+        createdBy: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      website: updatedWebsite,
+    });
+  } catch (error) {
+    logger.error('Error updating website', {
+      error: error instanceof Error ? error.message : String(error),
+      websiteId: (await params).id,
+    });
+    return NextResponse.json({ error: 'Failed to update website' }, { status: 500 });
   }
 }
 
 export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   try {
-    const { userAbility } = await requireUserAbility(request);
+    const userId = await requireUserId(request);
     const { id } = await params;
 
-    const website = await getWebsite(id);
-
-    if (
-      userAbility.cannot(PermissionAction.delete, subject(PermissionResource.Website, website)) &&
-      userAbility.cannot(
-        PermissionAction.delete,
-        subject(PermissionResource.Environment, { id: website.environmentId ?? undefined }),
-      )
-    ) {
-      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
-    }
+    // Verify the website belongs to the user
+    const existingWebsite = await prisma.website.findFirst({
+      where: {
+        id,
+        createdById: userId,
+      },
+    });
 
-    // Delete from Netlify first
-    if (website?.siteId) {
-      await deleteNetlifySite(website.siteId);
+    if (!existingWebsite) {
+      return NextResponse.json({ error: 'Website not found' }, { status: 404 });
     }
 
-    await deleteWebsite(id);
+    // Delete the website
+    await prisma.website.delete({
+      where: { id },
+    });
 
     return NextResponse.json({ success: true });
   } catch (error) {
-    logger.error('Error deleting website:', error);
-
-    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === 'P2025') {
-      return NextResponse.json({ success: false, error: `Website not found` }, { status: 404 });
-    }
-
-    return NextResponse.json({ success: false, error: 'Failed to delete website' }, { status: 500 });
+    logger.error('Error deleting website', {
+      error: error instanceof Error ? error.message : String(error),
+      websiteId: (await params).id,
+    });
+    return NextResponse.json({ error: 'Failed to delete website' }, { status: 500 });
   }
 }
diff --git a/app/api/websites/route.ts b/app/api/websites/route.ts
index e878dccc..22f6d429 100644
--- a/app/api/websites/route.ts
+++ b/app/api/websites/route.ts
@@ -1,55 +1,60 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { z } from 'zod';
+import { requireUserId } from '~/auth/session';
+import { prisma } from '~/lib/prisma';
 import { logger } from '~/utils/logger';
-import { requireUserAbility } from '~/auth/session';
-import { createWebsite, getWebsites } from '~/lib/services/websiteService';
-import { PermissionAction, PermissionResource } from '@prisma/client';
 
 export async function GET(request: NextRequest) {
-  const { userAbility } = await requireUserAbility(request);
-
-  if (userAbility.cannot(PermissionAction.read, PermissionResource.Website)) {
-    return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
-  }
-
-  const websites = await getWebsites(userAbility);
-
-  return NextResponse.json({ success: true, websites });
-}
-
-const postRequestSchema = z.object({
-  chatId: z.string().min(1, 'Chat ID is required'),
-  createdById: z.string().min(1, 'User ID is required'),
-  siteId: z.string().optional().default(''),
-  siteName: z.string().optional().default(''),
-  siteUrl: z.string().optional().default(''),
-});
-
-export async function POST(request: NextRequest) {
   try {
-    const { userAbility } = await requireUserAbility(request);
-
-    const body = await request.json();
-    const parsedBody = postRequestSchema.safeParse(body);
-
-    if (!parsedBody.success) {
-      return NextResponse.json({ success: false, error: parsedBody.error.flatten().fieldErrors }, { status: 400 });
-    }
-
-    if (userAbility.cannot(PermissionAction.create, PermissionResource.Website)) {
-      return NextResponse.json({ success: false, error: 'Forbidden' }, { status: 403 });
+    const userId = await requireUserId(request);
+    const { searchParams } = new URL(request.url);
+    const slug = searchParams.get('slug');
+
+    if (slug) {
+      // Check if slug is available
+      const websites = await prisma.website.findMany({
+        where: {
+          slug,
+        },
+        select: {
+          id: true,
+          slug: true,
+        },
+      });
+
+      return NextResponse.json({ websites });
     }
 
-    const website = await createWebsite(parsedBody.data);
-
-    logger.info(
-      'Website created successfully',
-      JSON.stringify({ chatId: parsedBody.data.chatId, websiteId: website.id }),
-    );
-
-    return NextResponse.json({ success: true, website });
+    // Get all websites for the user
+    const websites = await prisma.website.findMany({
+      where: {
+        createdById: userId,
+      },
+      include: {
+        environment: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+        createdBy: {
+          select: {
+            id: true,
+            name: true,
+            email: true,
+          },
+        },
+      },
+      orderBy: {
+        updatedAt: 'desc',
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      websites,
+    });
   } catch (error) {
-    logger.error('Failed to create website', error);
-    return NextResponse.json({ success: false, error: 'Failed to create website' }, { status: 500 });
+    logger.error('Error fetching websites', { error: error instanceof Error ? error.message : String(error) });
+    return NextResponse.json({ error: 'Failed to fetch websites' }, { status: 500 });
   }
 }
diff --git a/app/apps/[slug]/AppViewer.tsx b/app/apps/[slug]/AppViewer.tsx
new file mode 100644
index 00000000..bb985fd6
--- /dev/null
+++ b/app/apps/[slug]/AppViewer.tsx
@@ -0,0 +1,229 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { AlertCircle, ExternalLink, Globe, Loader2, Maximize2, Minimize2, RefreshCw, Settings } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+
+type Website = any; // TODO
+
+interface AppViewerProps {
+  website: Website;
+}
+
+export default function AppViewer({ website }: AppViewerProps) {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+  const [lastRefresh, setLastRefresh] = useState<Date>(new Date());
+
+  const handleIframeLoad = () => {
+    setIsLoading(false);
+    setHasError(false);
+  };
+
+  const handleIframeError = () => {
+    setIsLoading(false);
+    setHasError(true);
+  };
+
+  const handleRefresh = () => {
+    setIsLoading(true);
+    setHasError(false);
+    setLastRefresh(new Date());
+
+    // Force iframe reload by updating the src
+    const iframe = document.getElementById('app-iframe') as HTMLIFrameElement;
+
+    if (iframe) {
+      const currentSrc = iframe.src;
+      iframe.src = '';
+      setTimeout(() => {
+        iframe.src = currentSrc;
+      }, 100);
+    }
+  };
+
+  const handleOpenExternal = () => {
+    if (website.siteUrl) {
+      window.open(website.siteUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const toggleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen();
+      setIsFullscreen(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(!!document.fullscreenElement);
+    };
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+
+    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange);
+  }, []);
+
+  if (!website.siteUrl) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <AlertCircle className="w-16 h-16 text-gray-400 mx-auto mb-4" />
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">App Not Deployed</h1>
+          <p className="text-gray-600 dark:text-gray-400">This app hasn't been deployed yet.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={classNames(
+        'bg-gray-50 dark:bg-gray-900 transition-all duration-300',
+        isFullscreen ? 'fixed inset-0 z-50' : 'min-h-screen',
+      )}
+    >
+      {/* Header */}
+      {/* TODO: remove whole header? */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-accent-500 rounded-lg flex items-center justify-center">
+              <Globe className="w-4 h-4 text-white" />
+            </div>
+            <div>
+              <h1 className="text-lg font-semibold text-gray-900 dark:text-white">
+                {website.siteName || 'Untitled App'}
+              </h1>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setShowInfo(!showInfo)}
+              className={classNames(
+                'p-2 rounded-lg transition-colors',
+                'hover:bg-gray-100 dark:hover:bg-gray-700',
+                'text-gray-500 dark:text-gray-400',
+              )}
+              title="App Information"
+            >
+              <Settings className="w-4 h-4" />
+            </button>
+
+            <button
+              onClick={handleRefresh}
+              disabled={isLoading}
+              className={classNames(
+                'p-2 rounded-lg transition-colors',
+                'hover:bg-gray-100 dark:hover:bg-gray-700',
+                'text-gray-500 dark:text-gray-400',
+                'disabled:opacity-50 disabled:cursor-not-allowed',
+              )}
+              title="Refresh App"
+            >
+              <RefreshCw className={classNames('w-4 h-4', { 'animate-spin': isLoading })} />
+            </button>
+
+            <button
+              onClick={handleOpenExternal}
+              className={classNames(
+                'p-2 rounded-lg transition-colors',
+                'hover:bg-gray-100 dark:hover:bg-gray-700',
+                'text-gray-500 dark:text-gray-400',
+              )}
+              title="Open in New Tab"
+            >
+              <ExternalLink className="w-4 h-4" />
+            </button>
+
+            <button
+              onClick={toggleFullscreen}
+              className={classNames(
+                'p-2 rounded-lg transition-colors',
+                'hover:bg-gray-100 dark:hover:bg-gray-700',
+                'text-gray-500 dark:text-gray-400',
+              )}
+              title={isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}
+            >
+              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* App Information Panel */}
+      {showInfo && (
+        <motion.div
+          initial={{ opacity: 0, height: 0 }}
+          animate={{ opacity: 1, height: 'auto' }}
+          exit={{ opacity: 0, height: 0 }}
+          className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3"
+        >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div>
+              <span className="font-medium text-gray-900 dark:text-white">Created by:</span>
+              <p className="text-gray-600 dark:text-gray-400">{website.createdBy.name}</p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-900 dark:text-white">Created:</span>
+              <p className="text-gray-600 dark:text-gray-400">{new Date(website.createdAt).toLocaleDateString()}</p>
+            </div>
+            <div>
+              <span className="font-medium text-gray-900 dark:text-white">Last refreshed:</span>
+              <p className="text-gray-600 dark:text-gray-400">{lastRefresh.toLocaleTimeString()}</p>
+            </div>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Loading State */}
+      {isLoading && (
+        <div className="absolute inset-0 bg-white dark:bg-gray-900 flex items-center justify-center z-10">
+          <div className="text-center">
+            <Loader2 className="w-8 h-8 text-accent-500 animate-spin mx-auto mb-4" />
+            <p className="text-gray-600 dark:text-gray-400">Loading app...</p>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {hasError && (
+        <div className="absolute inset-0 bg-white dark:bg-gray-900 flex items-center justify-center z-10">
+          <div className="text-center">
+            <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">Failed to Load App</h2>
+            <p className="text-gray-600 dark:text-gray-400 mb-4">
+              The deployed app couldn't be loaded. It might be offline or the URL is incorrect.
+            </p>
+            <button
+              onClick={handleRefresh}
+              className="px-4 py-2 bg-accent-500 text-white rounded-lg hover:bg-accent-600 transition-colors"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* App Container */}
+      <div className={classNames('relative', isFullscreen ? 'h-screen' : 'h-[calc(100vh-80px)]')}>
+        <iframe
+          id="app-iframe"
+          src={website.siteUrl}
+          className="w-full h-full border-0"
+          onLoad={handleIframeLoad}
+          onError={handleIframeError}
+          title={website.siteName || 'Deployed App'}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/apps/[slug]/page.tsx b/app/apps/[slug]/page.tsx
new file mode 100644
index 00000000..60885480
--- /dev/null
+++ b/app/apps/[slug]/page.tsx
@@ -0,0 +1,70 @@
+import { notFound } from 'next/navigation';
+import { prisma } from '~/lib/prisma';
+import AppViewer from '~/apps/[slug]/AppViewer';
+
+interface AppPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export default async function AppPage({ params }: AppPageProps) {
+  const { slug } = await params;
+
+  const website = await prisma.website.findFirst({
+    where: {
+      slug,
+    },
+    include: {
+      environment: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+      createdBy: {
+        select: {
+          id: true,
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+
+  if (!website) {
+    notFound();
+  }
+
+  if (!website.siteUrl) {
+    return (
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">App Not Deployed</h1>
+          <p className="text-gray-600 dark:text-gray-400">This app hasn't been deployed yet.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <AppViewer website={website} />;
+}
+
+export async function generateMetadata({ params }: AppPageProps) {
+  const { slug } = await params;
+
+  const website = await prisma.website.findFirst({
+    where: { slug },
+    select: { siteName: true, siteUrl: true },
+    orderBy: { updatedAt: 'desc' },
+  });
+
+  if (!website) {
+    return {
+      title: 'App Not Found',
+    };
+  }
+
+  return {
+    title: website.siteName || 'Deployed App',
+    description: `View the deployed application: ${website.siteName || 'Untitled App'}`,
+  };
+}
diff --git a/app/components/@settings/tabs/deployed-apps/DeployedAppsTab.tsx b/app/components/@settings/tabs/deployed-apps/DeployedAppsTab.tsx
index 8e594f54..c87a4a90 100644
--- a/app/components/@settings/tabs/deployed-apps/DeployedAppsTab.tsx
+++ b/app/components/@settings/tabs/deployed-apps/DeployedAppsTab.tsx
@@ -183,16 +183,19 @@ export default function DeployedAppsTab() {
                   <Monitor className="w-5 h-5 text-accent-500" />
                   <div>
                     <h4 className="font-medium text-gray-900 dark:text-white">{website.siteName}</h4>
-                    {website.siteUrl && (
-                      <a
-                        href={website.siteUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-sm text-accent-500 hover:text-accent-600 dark:text-accent-400 dark:hover:text-accent-300 mt-2"
-                      >
-                        {website.siteUrl}
-                      </a>
-                    )}
+                    <div className="flex flex-col gap-1 mt-2">
+                      {website.slug && (
+                        <a
+                          href={`/apps/${website.slug}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-sm text-accent-500 hover:text-accent-600 dark:text-accent-400 dark:hover:text-accent-300"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {typeof window !== 'undefined' ? window.location.origin : ''}/apps/{website.slug}
+                        </a>
+                      )}
+                    </div>
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
diff --git a/app/components/@settings/tabs/deployed-apps/forms/EditDeployedAppForm.tsx b/app/components/@settings/tabs/deployed-apps/forms/EditDeployedAppForm.tsx
index 52222c8a..9b2197af 100644
--- a/app/components/@settings/tabs/deployed-apps/forms/EditDeployedAppForm.tsx
+++ b/app/components/@settings/tabs/deployed-apps/forms/EditDeployedAppForm.tsx
@@ -24,11 +24,71 @@ export default function EditDeployedAppForm({
   onAddMembers,
 }: EditDeployedAppFormProps) {
   const [name, setName] = useState(website.siteName || '');
+  const [slug, setSlug] = useState((website as any).slug || '');
+  const [initialSlug] = useState((website as any).slug || '');
+  const [isCheckingSlug, setIsCheckingSlug] = useState(false);
+  const [slugError, setSlugError] = useState('');
 
   useEffect(() => {
     setName(website.siteName || '');
+    setSlug((website as any).slug || '');
   }, [website]);
 
+  const checkSlugAvailability = async (slugToCheck: string) => {
+    if (!slugToCheck.trim()) {
+      setSlugError('');
+      return true;
+    }
+
+    // If slug hasn't changed from initial, it's always valid
+    if (slugToCheck === initialSlug) {
+      setSlugError('');
+      return true;
+    }
+
+    setIsCheckingSlug(true);
+    setSlugError('');
+
+    try {
+      const response = await fetch(`/api/slugs?slug=${encodeURIComponent(slugToCheck)}`);
+      const data = await response.json<{ isValid: boolean; isAvailable: boolean; message?: string }>();
+
+      if (data.isValid && data.isAvailable) {
+        return true;
+      } else if (!data.isValid) {
+        setSlugError('Invalid slug format');
+        return false;
+      } else {
+        setSlugError(data.message || 'This slug is already taken');
+        return false;
+      }
+    } catch (error) {
+      logger.error('Failed to check slug availability:', error);
+      setSlugError('Failed to check slug availability');
+
+      return false;
+    } finally {
+      setIsCheckingSlug(false);
+    }
+  };
+
+  // eslint-disable-next-line consistent-return
+  const handleSlugChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newSlug = e.target.value;
+    setSlug(newSlug);
+
+    if (newSlug.trim() && newSlug !== initialSlug) {
+      // Debounce the check
+      const timeoutId = setTimeout(() => {
+        checkSlugAvailability(newSlug);
+      }, 500);
+
+      return () => clearTimeout(timeoutId);
+    } else {
+      setSlugError('');
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -37,6 +97,20 @@ export default function EditDeployedAppForm({
       return;
     }
 
+    if (slug.trim() && slugError) {
+      toast.error('Please fix the slug error before saving');
+      return;
+    }
+
+    // Final slug availability check (only if slug has changed)
+    if (slug.trim() && slug !== initialSlug) {
+      const isSlugAvailable = await checkSlugAvailability(slug);
+
+      if (!isSlugAvailable) {
+        return;
+      }
+    }
+
     setIsSubmitting(true);
 
     try {
@@ -47,6 +121,7 @@ export default function EditDeployedAppForm({
         },
         body: JSON.stringify({
           siteName: name.trim(),
+          slug: slug.trim() || null,
         }),
       });
 
@@ -95,6 +170,38 @@ export default function EditDeployedAppForm({
             required
           />
         </div>
+
+        <div>
+          <label htmlFor="slug" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+            App Slug
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              id="slug"
+              value={slug}
+              onChange={handleSlugChange}
+              className={classNames(
+                'w-full px-3 py-2 border rounded-lg',
+                'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+                'focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-transparent',
+                'placeholder-gray-500 dark:placeholder-gray-400',
+                slugError ? 'border-red-300 dark:border-red-600' : 'border-gray-300 dark:border-gray-600',
+              )}
+              placeholder="e.g., my-awesome-app"
+              disabled={isSubmitting}
+            />
+            {isCheckingSlug && (
+              <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
+              </div>
+            )}
+          </div>
+          {slugError && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{slugError}</p>}
+          <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+            App will be accessible at /apps/{slug || 'auto-generated-slug'}
+          </p>
+        </div>
       </div>
 
       <ResourceAccessMembers
@@ -119,7 +226,13 @@ export default function EditDeployedAppForm({
 
         <button
           type="submit"
-          disabled={isSubmitting || !name.trim()}
+          disabled={
+            isSubmitting ||
+            !name.trim() ||
+            !!slugError ||
+            isCheckingSlug ||
+            (name === website.siteName && slug === initialSlug)
+          }
           className={classNames(
             'inline-flex items-center gap-2 px-6 py-2 text-sm font-medium rounded-lg transition-colors',
             'bg-accent-500 hover:bg-accent-600 disabled:bg-accent-300',
diff --git a/app/components/DeployedAppCard.tsx b/app/components/DeployedAppCard.tsx
new file mode 100644
index 00000000..0891f662
--- /dev/null
+++ b/app/components/DeployedAppCard.tsx
@@ -0,0 +1,172 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { AlertCircle, Calendar, ExternalLink, Eye, Globe, Loader2, User } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+import { generateAppUrl, getDeploymentProvider, isDeploymentUrl } from '~/lib/utils/app-url';
+
+interface DeployedAppCardProps {
+  website: {
+    id: string;
+    chatId: string;
+    siteName: string | null;
+    siteUrl: string | null;
+    createdAt: string;
+    isPublic: boolean;
+    createdBy: {
+      name: string;
+    };
+  };
+  onView?: (chatId: string) => void;
+  className?: string;
+}
+
+export default function DeployedAppCard({ website, onView, className }: DeployedAppCardProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [isValid, setIsValid] = useState<boolean | null>(null);
+
+  const handleView = () => {
+    if (onView) {
+      onView(website.chatId);
+    } else {
+      // Open in new tab as fallback
+      const appUrl = generateAppUrl({ chatId: website.chatId });
+      window.open(appUrl, '_blank', 'noopener,noreferrer');
+    }
+  };
+
+  const handleValidateUrl = async () => {
+    if (!website.siteUrl) {
+      return undefined;
+    }
+
+    setIsValidating(true);
+
+    try {
+      const response = await fetch(`/api/validate-url?url=${encodeURIComponent(website.siteUrl)}`);
+      // TODO: type
+      const data = await response.json<any>();
+      setIsValid(data.valid);
+    } catch {
+      setIsValid(false);
+    } finally {
+      setIsValidating(false);
+    }
+
+    return undefined;
+  };
+
+  const deploymentProvider = website.siteUrl ? getDeploymentProvider(website.siteUrl) : null;
+  const isDeployment = website.siteUrl ? isDeploymentUrl(website.siteUrl) : false;
+
+  return (
+    <motion.div
+      className={classNames(
+        'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700',
+        'p-4 transition-all duration-200',
+        'hover:shadow-lg hover:border-accent-500/50',
+        'cursor-pointer group',
+        className,
+      )}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={handleView}
+      whileHover={{ y: -2 }}
+      whileTap={{ scale: 0.98 }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 bg-accent-500 rounded-lg flex items-center justify-center">
+            <Globe className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">{website.siteName || 'Untitled App'}</h3>
+            <p className="text-sm text-gray-500 dark:text-gray-400">{deploymentProvider || 'Unknown Provider'}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {isValidating ? (
+            <Loader2 className="w-4 h-4 text-gray-400 animate-spin" />
+          ) : isValid === false ? (
+            <AlertCircle className="w-4 h-4 text-red-500" />
+          ) : isValid === true ? (
+            <div className="w-2 h-2 bg-green-500 rounded-full" />
+          ) : null}
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              handleValidateUrl();
+            }}
+            className={classNames(
+              'p-1 rounded transition-colors',
+              'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300',
+              'opacity-0 group-hover:opacity-100',
+            )}
+            title="Validate URL"
+          >
+            <Eye className="w-4 h-4" />
+          </button>
+
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+
+              if (website.siteUrl) {
+                window.open(website.siteUrl, '_blank', 'noopener,noreferrer');
+              }
+            }}
+            className={classNames(
+              'p-1 rounded transition-colors',
+              'text-gray-400 hover:text-accent-500',
+              'opacity-0 group-hover:opacity-100',
+            )}
+            title="Open in new tab"
+          >
+            <ExternalLink className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2 mb-4">
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          <User className="w-4 h-4" />
+          <span>{website.createdBy.name}</span>
+        </div>
+
+        <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+          <Calendar className="w-4 h-4" />
+          <span>{new Date(website.createdAt).toLocaleDateString()}</span>
+        </div>
+
+        {website.siteUrl && <div className="text-sm text-gray-500 dark:text-gray-400 truncate">{website.siteUrl}</div>}
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span
+            className={classNames(
+              'px-2 py-1 rounded-full text-xs font-medium',
+              website.isPublic
+                ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+            )}
+          >
+            {website.isPublic ? 'Public' : 'Private'}
+          </span>
+
+          {isDeployment && (
+            <span className="px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400">
+              Deployed
+            </span>
+          )}
+        </div>
+
+        <motion.div className="text-accent-500 text-sm font-medium" animate={{ opacity: isHovered ? 1 : 0 }}>
+          View App →
+        </motion.div>
+      </div>
+    </motion.div>
+  );
+}
diff --git a/app/components/header/HeaderActionButtons.client.tsx b/app/components/header/HeaderActionButtons.client.tsx
index ecd1aeeb..b7ae7e30 100644
--- a/app/components/header/HeaderActionButtons.client.tsx
+++ b/app/components/header/HeaderActionButtons.client.tsx
@@ -331,6 +331,7 @@ export function HeaderActionButtons() {
       formData.append('chatId', currentChatId || '');
       formData.append('description', chatDescription || '');
       formData.append('deploymentType', selectedDeploymentType);
+      // Slug will be generated server-side from description or chatId
       formData.append('zipFile', zipBlob, 'project.zip');
       formData.append('environmentId', selectedEnvironmentDataSource.environmentId || '');
 
@@ -383,12 +384,17 @@ export function HeaderActionButtons() {
 
                 const deploymentTypeName =
                   deploymentTypesConfig.find((t) => t.id === selectedDeploymentType)?.name || selectedDeploymentType;
+                // Generate the slug URL for viewing in our system
+                const slugUrl = data.data.website?.slug ? `/apps/${data.data.website.slug}` : null;
+
                 toast.success(
                   <div>
                     Deployed successfully to {deploymentTypeName}!{' '}
-                    <a href={data.data.deploy.url} target="_blank" rel="noopener noreferrer" className="underline">
-                      View site
-                    </a>
+                    {slugUrl && (
+                      <a href={slugUrl} target="_blank" rel="noopener noreferrer" className="underline">
+                        View app
+                      </a>
+                    )}
                   </div>,
                 );
 
@@ -611,6 +617,7 @@ export function HeaderActionButtons() {
         mode={modalMode}
         onPublishClick={handlePublishClick}
         buttonRef={publishButtonRef}
+        deploymentMethod={deploymentTypesConfig.find((t) => t.id === selectedDeploymentType)?.name}
       />
     </>
   );
diff --git a/app/components/publish/PublishProgressModal.client.tsx b/app/components/publish/PublishProgressModal.client.tsx
index bc247c9a..92089a15 100644
--- a/app/components/publish/PublishProgressModal.client.tsx
+++ b/app/components/publish/PublishProgressModal.client.tsx
@@ -12,17 +12,51 @@ interface PublishProgressModalProps {
   mode: 'publish' | 'settings' | 'initializing';
   onPublishClick: () => void;
   buttonRef?: React.RefObject<HTMLButtonElement>;
+  deploymentMethod?: string;
 }
 
-// Constants
-const PUBLISH_STEPS = [
-  { title: 'Initializing', description: 'Preparing deployment environment' },
-  { title: 'Website Setup', description: 'Creating or updating Netlify site' },
-  { title: 'File Preparation', description: 'Preparing project files' },
-  { title: 'Dependencies', description: 'Installing project dependencies' },
-  { title: 'Configuration', description: 'Configuring deployment settings' },
-  { title: 'Deployment', description: 'Deploying to Netlify' },
-];
+// Helper function to get deployment-specific steps
+const getDeploymentSteps = (deploymentMethod?: string) => {
+  const baseSteps = [
+    { title: 'Initializing', description: 'Preparing deployment environment' },
+    { title: 'File Preparation', description: 'Preparing project files' },
+    { title: 'Dependencies', description: 'Installing project dependencies' },
+    { title: 'Configuration', description: 'Configuring deployment settings' },
+    { title: 'Deployment', description: 'Deploying application' },
+  ];
+
+  switch (deploymentMethod?.toLowerCase()) {
+    case 'netlify':
+      return [
+        { title: 'Initializing', description: 'Preparing deployment environment' },
+        { title: 'Website Setup', description: 'Creating or updating Netlify site' },
+        { title: 'File Preparation', description: 'Preparing project files' },
+        { title: 'Dependencies', description: 'Installing project dependencies' },
+        { title: 'Configuration', description: 'Configuring Netlify settings' },
+        { title: 'Deployment', description: 'Deploying to Netlify' },
+      ];
+    case 'vercel':
+      return [
+        { title: 'Initializing', description: 'Preparing deployment environment' },
+        { title: 'Project Setup', description: 'Creating or updating Vercel project' },
+        { title: 'File Preparation', description: 'Preparing project files' },
+        { title: 'Dependencies', description: 'Installing project dependencies' },
+        { title: 'Configuration', description: 'Configuring Vercel settings' },
+        { title: 'Deployment', description: 'Deploying to Vercel' },
+      ];
+    case 'aws':
+      return [
+        { title: 'Initializing', description: 'Preparing deployment environment' },
+        { title: 'Infrastructure Setup', description: 'Setting up AWS infrastructure' },
+        { title: 'File Preparation', description: 'Preparing project files' },
+        { title: 'Dependencies', description: 'Installing project dependencies' },
+        { title: 'Configuration', description: 'Configuring AWS settings' },
+        { title: 'Deployment', description: 'Deploying to AWS' },
+      ];
+    default:
+      return baseSteps;
+  }
+};
 
 // Main Component
 export function PublishProgressModal({
@@ -32,11 +66,16 @@ export function PublishProgressModal({
   mode,
   onPublishClick,
   buttonRef,
+  deploymentMethod,
 }: PublishProgressModalProps) {
   // State
   const { website, isLoading, deploymentProgress } = useStore(websiteStore);
   const [isCopying, setIsCopying] = useState(false);
   const [popupPosition, setPopupPosition] = useState({ top: 0, left: 0 });
+  const [slug, setSlug] = useState('');
+  const [initialSlug] = useState((website as any)?.slug || '');
+  const [isCheckingSlug, setIsCheckingSlug] = useState(false);
+  const [slugError, setSlugError] = useState('');
 
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
@@ -65,6 +104,28 @@ export function PublishProgressModal({
     }
   }, [isOpen, buttonRef]);
 
+  // Handle click outside to close modal
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isOpen && deploymentProgress?.status !== 'in_progress') {
+        const target = event.target as Element;
+        const modal = document.querySelector('[data-modal="publish-progress"]');
+
+        if (modal && !modal.contains(target)) {
+          handleClose();
+        }
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, deploymentProgress?.status]);
+
   // Handlers
   const handleClose = () => {
     setTimeout(() => {
@@ -82,6 +143,109 @@ export function PublishProgressModal({
     }
   };
 
+  const checkSlugAvailability = async (slugToCheck: string) => {
+    if (!slugToCheck.trim()) {
+      setSlugError('');
+      return true;
+    }
+
+    // If slug hasn't changed from initial, it's always valid
+    if (slugToCheck === initialSlug) {
+      setSlugError('');
+      return true;
+    }
+
+    setIsCheckingSlug(true);
+    setSlugError('');
+
+    try {
+      const response = await fetch(`/api/slugs?slug=${encodeURIComponent(slugToCheck)}`);
+      const data = (await response.json()) as { isValid: boolean; isAvailable: boolean; message?: string };
+
+      if (data.isValid && data.isAvailable) {
+        return true;
+      } else if (!data.isValid) {
+        setSlugError('Invalid slug format');
+        return false;
+      } else {
+        setSlugError(data.message || 'This slug is already taken');
+        return false;
+      }
+    } catch (error) {
+      console.error('Failed to check slug availability:', error);
+      setSlugError('Failed to check slug availability');
+
+      return false;
+    } finally {
+      setIsCheckingSlug(false);
+    }
+  };
+
+  // eslint-disable-next-line consistent-return
+  const handleSlugChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newSlug = e.target.value;
+    setSlug(newSlug);
+
+    if (newSlug.trim() && newSlug !== initialSlug) {
+      // Debounce the check
+      const timeoutId = setTimeout(() => {
+        checkSlugAvailability(newSlug);
+      }, 500);
+
+      return () => clearTimeout(timeoutId);
+    } else {
+      setSlugError('');
+    }
+  };
+
+  const handleSlugUpdate = async () => {
+    if (!website || !slug.trim() || slugError || slug === initialSlug) {
+      return;
+    }
+
+    const isSlugAvailable = await checkSlugAvailability(slug);
+
+    if (!isSlugAvailable) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/websites/${website.id}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          slug: slug.trim(),
+        }),
+      });
+
+      const data = (await response.json()) as { success: boolean; error?: string };
+
+      if (data.success) {
+        // Update the website in the store
+        const currentWebsite = websiteStore.get();
+
+        if (currentWebsite.website) {
+          websiteStore.set({
+            ...currentWebsite,
+            website: {
+              ...currentWebsite.website,
+              slug: slug.trim(),
+            } as any,
+          });
+        }
+
+        setSlugError('');
+      } else {
+        setSlugError(data.error || 'Failed to update slug');
+      }
+    } catch (error) {
+      console.error('Failed to update slug:', error);
+      setSlugError('Failed to update slug');
+    }
+  };
+
   if (!isOpen) {
     return null;
   }
@@ -92,7 +256,8 @@ export function PublishProgressModal({
     }
 
     const currentStepIndex = deploymentProgress.step - 1;
-    const currentStep = PUBLISH_STEPS[currentStepIndex];
+    const publishSteps = getDeploymentSteps(deploymentMethod);
+    const currentStep = publishSteps[currentStepIndex];
 
     return (
       <div className="flex items-center gap-3">
@@ -129,23 +294,58 @@ export function PublishProgressModal({
 
     return (
       <div className="space-y-6">
-        <div className="flex items-center gap-2">
-          <input
-            type="text"
-            readOnly
-            value={website.siteUrl || ''}
-            className="flex-1 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-700 dark:text-gray-300"
-          />
-          {website.siteUrl && (
-            <a
-              href={website.siteUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700"
-            >
-              View
-              <ExternalLink className="w-4 h-4" />
-            </a>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <label className="text-xs text-gray-400">App Slug</label>
+            <div className="flex items-center gap-2">
+              <div className="flex-1 relative">
+                <input
+                  type="text"
+                  value={slug || (website as any).slug || ''}
+                  onChange={handleSlugChange}
+                  className={`flex-1 px-3 py-2 bg-white dark:bg-gray-800 border rounded-md text-gray-700 dark:text-gray-300 ${
+                    slugError ? 'border-red-300 dark:border-red-600' : 'border-gray-200 dark:border-gray-700'
+                  }`}
+                  placeholder="Enter custom slug"
+                />
+                {isCheckingSlug && (
+                  <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                    <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin" />
+                  </div>
+                )}
+              </div>
+              <button
+                onClick={handleSlugUpdate}
+                disabled={!slug.trim() || !!slugError || isCheckingSlug || slug === initialSlug}
+                className="px-3 py-2 bg-accent-100 dark:bg-accent-800 text-accent-700 dark:text-accent-300 rounded-md hover:bg-accent-200 dark:hover:bg-accent-700 border border-accent-200 dark:border-accent-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Update
+              </button>
+            </div>
+            {slugError && <p className="text-xs text-red-500 dark:text-red-400">{slugError}</p>}
+            <p className="text-xs text-gray-500 dark:text-gray-400">
+              App will be accessible at /apps/{slug || (website as any).slug || 'auto-generated-slug'}
+            </p>
+          </div>
+
+          {(website as any).slug && (
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                readOnly
+                value={`${typeof window !== 'undefined' ? window.location.origin : ''}/apps/${(website as any).slug}`}
+                className="flex-1 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-700 dark:text-gray-300"
+              />
+              <a
+                href={`/apps/${(website as any).slug}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700"
+              >
+                View
+                <ExternalLink className="w-4 h-4" />
+              </a>
+            </div>
           )}
         </div>
 
@@ -198,6 +398,7 @@ export function PublishProgressModal({
       transition={{ duration: 0.2 }}
     >
       <div
+        data-modal="publish-progress"
         className="flex flex-col items-start gap-4 p-6 rounded-[15px] border border-white/8 bg-[#1E2125] shadow-[0_8px_16px_0_rgba(0,0,0,0.45)]"
         style={{
           width: '480px',
@@ -239,39 +440,48 @@ export function PublishProgressModal({
                     <Check className="w-4 h-4 text-green-500" />
                     <span className="text-sm font-medium text-white">Published Successfully!</span>
                   </div>
-                  <input
-                    type="text"
-                    readOnly
-                    value={website?.siteUrl || ''}
-                    className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white text-sm"
-                  />
-                  {website?.siteUrl && (
-                    <div className="flex gap-2">
-                      <a
-                        href={website.siteUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md text-sm transition-colors"
-                      >
-                        View
-                        <ExternalLink className="w-3 h-3" />
-                      </a>
-                      <button
-                        onClick={handleCopyLink}
-                        className="inline-flex items-center gap-2 px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md text-sm transition-colors"
-                      >
-                        {isCopying ? (
-                          <>
-                            <Check className="w-3 h-3" />
-                            Copied!
-                          </>
-                        ) : (
-                          <>
-                            <Copy className="w-3 h-3" />
-                            Copy Link
-                          </>
-                        )}
-                      </button>
+
+                  {/* App Link */}
+                  {(website as any)?.slug && (
+                    <div className="space-y-2">
+                      <label className="text-xs text-gray-400">App Link</label>
+                      <input
+                        type="text"
+                        readOnly
+                        value={`${window.location.origin}/apps/${(website as any).slug}`}
+                        className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white text-sm"
+                      />
+                      <div className="flex gap-2">
+                        <a
+                          href={`/apps/${(website as any).slug}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="inline-flex items-center gap-1 px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md text-sm transition-colors"
+                        >
+                          View
+                          <ExternalLink className="w-3 h-3" />
+                        </a>
+                        <button
+                          onClick={() => {
+                            navigator.clipboard.writeText(`${window.location.origin}/apps/${(website as any).slug}`);
+                            setIsCopying(true);
+                            setTimeout(() => setIsCopying(false), 2000);
+                          }}
+                          className="inline-flex items-center gap-2 px-3 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-md text-sm transition-colors"
+                        >
+                          {isCopying ? (
+                            <>
+                              <Check className="w-3 h-3" />
+                              Copied!
+                            </>
+                          ) : (
+                            <>
+                              <Copy className="w-3 h-3" />
+                              Copy Link
+                            </>
+                          )}
+                        </button>
+                      </div>
                     </div>
                   )}
                 </div>
diff --git a/app/lib/plugins/deployment/aws-deploy-plugin.ts b/app/lib/plugins/deployment/aws-deploy-plugin.ts
index f832e5a4..b20f3890 100644
--- a/app/lib/plugins/deployment/aws-deploy-plugin.ts
+++ b/app/lib/plugins/deployment/aws-deploy-plugin.ts
@@ -6,6 +6,7 @@ import { BaseDeploymentPlugin, type SiteInfo } from './base-deployment-plugin';
 import rimraf from 'rimraf';
 import { getDeploymentMethodCredentials } from '~/lib/services/deploymentMethodService';
 import { DeploymentMethodCredentialsType } from '@prisma/client';
+import { env } from '~/env/server';
 
 const TOTAL_STEPS = 6;
 
@@ -146,6 +147,7 @@ export class AwsDeployPlugin extends BaseDeploymentPlugin {
         siteInfo.url,
         chatId,
         userId,
+        config.slug,
       );
 
       return {
@@ -199,6 +201,14 @@ export default $config({
       environment: {
       ${Object.entries(envFile).map(([key, value]) => `${key}: '${value}'`)},
       },
+      cors: {
+        allowCredentials: false,
+        allowHeaders: ["Content-Type", "Authorization", "X-Requested-With"],
+        allowMethods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
+        allowOrigins: ["${env.BASE_URL}"],
+        exposeHeaders: [],
+        maxAge: 86400,
+      },
     });
   },
 });
@@ -292,11 +302,44 @@ CMD ["node", "server.js"]
     `;
 
     if (!nextConfigContent.includes("output: 'standalone'")) {
-      // Ensure the output field is set to 'standalone'
-      nextConfigContent = nextConfigContent.replace(
-        'export default nextConfig;',
-        'export default { ...nextConfig, output: "standalone" };',
-      );
+      // Remove any existing output configuration
+      nextConfigContent = nextConfigContent.replace(/output:\s*['"`]export['"`],?\s*/g, '');
+      nextConfigContent = nextConfigContent.replace(/output:\s*['"`]standalone['"`],?\s*/g, '');
+
+      // Handle both ES6 and CommonJS module syntax
+      if (nextConfigContent.includes('export default nextConfig;')) {
+        nextConfigContent = nextConfigContent.replace(
+          'export default nextConfig;',
+          'export default { ...nextConfig, output: "standalone" };',
+        );
+      } else if (nextConfigContent.includes('module.exports = nextConfig;')) {
+        nextConfigContent = nextConfigContent.replace(
+          'module.exports = nextConfig;',
+          'module.exports = { ...nextConfig, output: "standalone" };',
+        );
+      } else if (nextConfigContent.includes('export default')) {
+        // Handle other export default patterns
+        nextConfigContent = nextConfigContent.replace(
+          /export default\s+(\w+);/,
+          'export default { ...$1, output: "standalone" };',
+        );
+      } else if (nextConfigContent.includes('module.exports')) {
+        // Handle other module.exports patterns
+        nextConfigContent = nextConfigContent.replace(
+          /module\.exports\s*=\s*(\w+);/,
+          'module.exports = { ...$1, output: "standalone" };',
+        );
+      } else {
+        // Fallback: add the configuration at the end of the file
+        nextConfigContent = nextConfigContent.trim();
+
+        if (!nextConfigContent.endsWith(';')) {
+          nextConfigContent += ';';
+        }
+
+        nextConfigContent +=
+          '\n\n// Ensure standalone output for SST v2\nexport default { ...nextConfig, output: "standalone" };';
+      }
     }
 
     await writeFile(nextConfigPath, nextConfigContent);
diff --git a/app/lib/plugins/deployment/base-deployment-plugin.ts b/app/lib/plugins/deployment/base-deployment-plugin.ts
index 8317d064..805859ff 100644
--- a/app/lib/plugins/deployment/base-deployment-plugin.ts
+++ b/app/lib/plugins/deployment/base-deployment-plugin.ts
@@ -11,6 +11,7 @@ import { logger } from '~/utils/logger';
 import { getTelemetry } from '~/lib/telemetry/telemetry-manager';
 import { TelemetryEventType } from '~/lib/telemetry/telemetry-types';
 import { userService } from '~/lib/services/userService';
+import { generateDefaultSlug, generateUniqueSlug } from '~/utils/slug';
 import type {
   DeploymentConfig,
   DeploymentPlugin,
@@ -166,9 +167,23 @@ export abstract class BaseDeploymentPlugin implements DeploymentPlugin {
     siteUrl: string,
     chatId: string,
     userId: string,
+    customSlug?: string,
   ): Promise<any> {
     if (websiteId) {
       // Update existing website
+      const existingWebsite = await prisma.website.findUnique({
+        where: { id: websiteId },
+        select: { slug: true },
+      });
+
+      let slug = existingWebsite?.slug;
+
+      // Generate slug if it doesn't exist or if custom slug is provided
+      if (!slug || customSlug) {
+        const baseSlug = customSlug || generateDefaultSlug(chatId, siteName);
+        slug = await generateUniqueSlug(baseSlug, existingWebsite?.slug || '');
+      }
+
       const website = await prisma.website.update({
         where: {
           id: websiteId,
@@ -178,23 +193,28 @@ export abstract class BaseDeploymentPlugin implements DeploymentPlugin {
           siteId,
           siteName,
           siteUrl,
+          slug,
         },
       });
-      logger.info('Website updated in database', JSON.stringify({ chatId, siteId }));
+      logger.info('Website updated in database', JSON.stringify({ chatId, siteId, slug }));
 
       return website;
     } else {
       // Create new website
+      const baseSlug = customSlug || generateDefaultSlug(chatId, siteName);
+      const slug = await generateUniqueSlug(baseSlug);
+
       const website = await prisma.website.create({
         data: {
           siteId,
           siteName,
           siteUrl,
+          slug,
           chatId,
           createdById: userId,
         },
       });
-      logger.info('Website saved to database successfully', JSON.stringify({ chatId, siteId }));
+      logger.info('Website saved to database successfully', JSON.stringify({ chatId, siteId, slug }));
 
       return website;
     }
diff --git a/app/lib/plugins/deployment/netlify-deploy-plugin.ts b/app/lib/plugins/deployment/netlify-deploy-plugin.ts
index 7d76a70b..f563ff12 100644
--- a/app/lib/plugins/deployment/netlify-deploy-plugin.ts
+++ b/app/lib/plugins/deployment/netlify-deploy-plugin.ts
@@ -3,7 +3,15 @@ import { BaseDeploymentPlugin } from './base-deployment-plugin';
 import type { DeploymentConfig, DeploymentProgress, DeploymentResult } from '~/lib/plugins/types';
 import type { NetlifySiteInfo } from '~/types/netlify';
 import { getDeploymentMethodCredential } from '~/lib/services/deploymentMethodService';
-import { DeploymentMethodCredentialsType } from '@prisma/client';
+import { env } from '~/env/server';
+
+// Define the enum locally until Prisma client is regenerated
+enum DeploymentMethodCredentialsType {
+  API_KEY = 'API_KEY',
+  ACCESS_KEY = 'ACCESS_KEY',
+  SECRET_KEY = 'SECRET_KEY',
+  REGION = 'REGION',
+}
 
 const TOTAL_STEPS = 7;
 
@@ -94,14 +102,16 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
 
       const newSite = (await createSiteResponse.json()) as any;
       targetSiteId = newSite.id;
+
+      const siteUrl = this._ensureHttpsUrl(newSite.url);
       siteInfo = {
         id: newSite.id,
         name: newSite.name,
-        url: newSite.url,
+        url: siteUrl,
         chatId,
       };
 
-      await this.updateWebsiteDatabase(undefined, targetSiteId, newSite.name, newSite.url, chatId, userId);
+      await this.updateWebsiteDatabase(undefined, targetSiteId, newSite.name, siteUrl, chatId, userId);
       logger.info('Site created successfully', JSON.stringify({ chatId, siteId: targetSiteId }));
     } else {
       // Get existing site info
@@ -145,10 +155,12 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
 
       const existingSite = (await siteResponse.json()) as any;
       logger.info('Existing site info retrieved', JSON.stringify({ chatId, existingSite }));
+
+      const siteUrl = this._ensureHttpsUrl(existingSite.url);
       siteInfo = {
         id: existingSite.id,
         name: existingSite.name,
-        url: existingSite.url,
+        url: siteUrl,
         chatId,
       };
       targetSiteId = existingSite.id;
@@ -282,6 +294,7 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
           siteInfo.url,
           chatId,
           userId,
+          config.slug,
         );
 
         return {
@@ -319,6 +332,22 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
     }
   }
 
+  private _ensureHttpsUrl(url: string): string {
+    if (!url) {
+      return url;
+    }
+
+    if (url.startsWith('https://')) {
+      return url;
+    }
+
+    if (url.startsWith('http://')) {
+      return url.replace('http://', 'https://');
+    }
+
+    return `https://${url}`;
+  }
+
   private async _createNetlifyConfig(tempDir: string): Promise<void> {
     const { writeFile } = await import('fs/promises');
     const { join } = await import('path');
@@ -337,6 +366,84 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
   to = "/index.html"
   status = 200
 
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "ALLOW-FROM *"
+    X-Content-Type-Options = "nosniff"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Cross-Origin-Embedder-Policy = "require-corp"
+    Cross-Origin-Opener-Policy = "same-origin-allow-popups"
+
+[[headers]]
+  for = "/*.js"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+    Access-Control-Allow-Methods = "GET, POST, PUT, DELETE, OPTIONS"
+    Access-Control-Allow-Headers = "Content-Type, Authorization, X-Requested-With"
+
+[[headers]]
+  for = "/*.css"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.png"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.jpg"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.jpeg"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.gif"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.svg"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.woff"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.woff2"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.ttf"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
+[[headers]]
+  for = "/*.eot"
+  [headers.values]
+    Cross-Origin-Resource-Policy = "cross-origin"
+    Access-Control-Allow-Origin = "${env.BASE_URL}"
+
 [dev]
   command = "npm run dev"
   port = 3000
@@ -350,7 +457,7 @@ export class NetlifyDeployPlugin extends BaseDeploymentPlugin {
     await writeFile(join(tempDir, 'netlify.toml'), netlifyConfig);
 
     // Also create a next.config.js if it doesn't exist to ensure proper Next.js configuration
-    const nextConfigPath = join(tempDir, 'next.config.js');
+    const nextConfigPath = join(tempDir, 'next.config.ts');
     const nextConfigExists = await this.fileExists(nextConfigPath);
 
     if (!nextConfigExists) {
@@ -367,6 +474,31 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'ALLOW-FROM *',
+          },
+          {
+            key: 'Cross-Origin-Resource-Policy',
+            value: 'cross-origin',
+          },
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin-allow-popups',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
diff --git a/app/lib/plugins/deployment/vercel-deploy-plugin.ts b/app/lib/plugins/deployment/vercel-deploy-plugin.ts
index 95059b77..16abfcee 100644
--- a/app/lib/plugins/deployment/vercel-deploy-plugin.ts
+++ b/app/lib/plugins/deployment/vercel-deploy-plugin.ts
@@ -2,7 +2,15 @@ import { logger } from '~/utils/logger';
 import { BaseDeploymentPlugin } from './base-deployment-plugin';
 import type { DeploymentConfig, DeploymentProgress, DeploymentResult } from '~/lib/plugins/types';
 import { getDeploymentMethodCredential } from '~/lib/services/deploymentMethodService';
-import { DeploymentMethodCredentialsType } from '@prisma/client';
+import { env } from '~/env/server';
+
+// Define the enum locally until Prisma client is regenerated
+enum DeploymentMethodCredentialsType {
+  API_KEY = 'API_KEY',
+  ACCESS_KEY = 'ACCESS_KEY',
+  SECRET_KEY = 'SECRET_KEY',
+  REGION = 'REGION',
+}
 
 const TOTAL_STEPS = 7;
 
@@ -106,7 +114,7 @@ export class VercelDeployPlugin extends BaseDeploymentPlugin {
 
       const deployResult = await this.runCommand(
         'npx',
-        ['vercel', 'deploy', '--prod', '--token', token, '--yes'],
+        ['vercel', 'deploy', '--prod', '--token', token, '--yes', '--public'],
         tempDir,
         undefined,
         5 * 60 * 1000, // 5 minutes timeout
@@ -125,8 +133,27 @@ export class VercelDeployPlugin extends BaseDeploymentPlugin {
 
       const deploymentInfo = this._parseVercelOutput(deployResult.output);
 
+      // Get project ID from .vercel/project.json file
+      const projectId = await this._getVercelProjectId(tempDir, chatId);
+
+      if (projectId) {
+        // Disable SSO protection to allow iframe embedding
+        await this._disableVercelSSOProtection(projectId, token, chatId);
+      } else {
+        logger.warn('Could not find Vercel project ID', JSON.stringify({ chatId }));
+      }
+
+      // Send final completion step
+      await this.sendProgress(
+        this.totalSteps,
+        this.totalSteps,
+        'Deployment completed successfully!',
+        'success',
+        onProgress,
+      );
+
       const siteInfo = {
-        id: deploymentInfo.projectId || `vercel-${chatId}`,
+        id: projectId || `vercel-${chatId}`,
         name: projectName,
         url: deploymentInfo.url || `https://${projectName}.vercel.app`,
         chatId,
@@ -141,6 +168,7 @@ export class VercelDeployPlugin extends BaseDeploymentPlugin {
         siteInfo.url,
         chatId,
         userId,
+        config.slug,
       );
 
       return {
@@ -182,16 +210,102 @@ export class VercelDeployPlugin extends BaseDeploymentPlugin {
     const vercelConfig = {
       version: 2,
       name: `liblab-${chatId.slice(0, 8)}`,
+      public: true,
       builds: [
         {
           src: 'package.json',
           use: '@vercel/next',
         },
       ],
-      routes: [
+      headers: [
+        {
+          source: '/(.*)',
+          headers: [
+            {
+              key: 'X-Frame-Options',
+              value: 'ALLOW-FROM *',
+            },
+            {
+              key: 'X-Content-Type-Options',
+              value: 'nosniff',
+            },
+            {
+              key: 'Referrer-Policy',
+              value: 'strict-origin-when-cross-origin',
+            },
+            {
+              key: 'Cross-Origin-Resource-Policy',
+              value: 'cross-origin',
+            },
+            {
+              key: 'Cross-Origin-Embedder-Policy',
+              value: 'require-corp',
+            },
+            {
+              key: 'Cross-Origin-Opener-Policy',
+              value: 'same-origin-allow-popups',
+            },
+          ],
+        },
+        {
+          source: '/:path*.js',
+          headers: [
+            {
+              key: 'Cross-Origin-Resource-Policy',
+              value: 'cross-origin',
+            },
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: env.BASE_URL,
+            },
+            {
+              key: 'Access-Control-Allow-Methods',
+              value: 'GET, POST, PUT, DELETE, OPTIONS',
+            },
+            {
+              key: 'Access-Control-Allow-Headers',
+              value: 'Content-Type, Authorization, X-Requested-With',
+            },
+          ],
+        },
         {
-          src: '/(.*)',
-          dest: '/$1',
+          source: '/:path*.css',
+          headers: [
+            {
+              key: 'Cross-Origin-Resource-Policy',
+              value: 'cross-origin',
+            },
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: env.BASE_URL,
+            },
+          ],
+        },
+        {
+          source: '/:path*.(png|jpg|jpeg|gif|svg|ico)',
+          headers: [
+            {
+              key: 'Cross-Origin-Resource-Policy',
+              value: 'cross-origin',
+            },
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: env.BASE_URL,
+            },
+          ],
+        },
+        {
+          source: '/:path*.(woff|woff2|ttf|eot)',
+          headers: [
+            {
+              key: 'Cross-Origin-Resource-Policy',
+              value: 'cross-origin',
+            },
+            {
+              key: 'Access-Control-Allow-Origin',
+              value: env.BASE_URL,
+            },
+          ],
         },
       ],
       env: {
@@ -202,7 +316,7 @@ export class VercelDeployPlugin extends BaseDeploymentPlugin {
     await writeFile(join(tempDir, 'vercel.json'), JSON.stringify(vercelConfig, null, 2));
 
     // Create next.config.js if it doesn't exist to ensure proper Next.js configuration
-    const nextConfigPath = join(tempDir, 'next.config.js');
+    const nextConfigPath = join(tempDir, 'next.config.ts');
     const nextConfigExists = await this.fileExists(nextConfigPath);
 
     if (!nextConfigExists) {
@@ -221,6 +335,39 @@ const nextConfig = {
   trailingSlash: true,
   // Disable x-powered-by header
   poweredByHeader: false,
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'ALLOW-FROM *',
+          },
+          {
+            key: 'X-Content-Type-Options',
+            value: 'nosniff',
+          },
+          {
+            key: 'Referrer-Policy',
+            value: 'strict-origin-when-cross-origin',
+          },
+          {
+            key: 'Cross-Origin-Resource-Policy',
+            value: 'cross-origin',
+          },
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin-allow-popups',
+          },
+        ],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
@@ -306,4 +453,92 @@ module.exports = nextConfig;
 
     return { projectId, deploymentId, url };
   }
+
+  /**
+   * Gets the Vercel project ID from the .vercel/project.json file
+   */
+  private async _getVercelProjectId(tempDir: string, chatId: string): Promise<string | null> {
+    try {
+      const { readFile } = await import('fs/promises');
+      const { join } = await import('path');
+
+      const projectJsonPath = join(tempDir, '.vercel', 'project.json');
+
+      if (await this.fileExists(projectJsonPath)) {
+        const projectJsonContent = await readFile(projectJsonPath, 'utf-8');
+        const projectData = JSON.parse(projectJsonContent);
+
+        logger.info(
+          'Found Vercel project ID',
+          JSON.stringify({
+            chatId,
+            projectId: projectData.projectId,
+            projectName: projectData.projectName,
+          }),
+        );
+
+        return projectData.projectId || null;
+      } else {
+        logger.warn('Vercel project.json file not found', JSON.stringify({ chatId, path: projectJsonPath }));
+        return null;
+      }
+    } catch (error) {
+      logger.warn(
+        'Error reading Vercel project.json',
+        JSON.stringify({
+          chatId,
+          error: error instanceof Error ? error.message : 'Unknown error',
+        }),
+      );
+      return null;
+    }
+  }
+
+  /**
+   * Disables SSO protection on a Vercel project to allow iframe embedding
+   */
+  private async _disableVercelSSOProtection(projectId: string, token: string, chatId: string): Promise<void> {
+    try {
+      logger.info('Disabling Vercel SSO protection', JSON.stringify({ chatId, projectId }));
+
+      const response = await fetch(`https://api.vercel.com/v9/projects/${projectId}`, {
+        method: 'PATCH',
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          ssoProtection: null,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null);
+        logger.warn(
+          'Failed to disable SSO protection',
+          JSON.stringify({
+            chatId,
+            projectId,
+            status: response.status,
+            error: errorData,
+          }),
+        );
+
+        // Don't throw error - deployment was successful, just SSO protection couldn't be disabled
+        return;
+      }
+
+      logger.info('Successfully disabled Vercel SSO protection', JSON.stringify({ chatId, projectId }));
+    } catch (error) {
+      logger.warn(
+        'Error disabling SSO protection',
+        JSON.stringify({
+          chatId,
+          projectId,
+          error: error instanceof Error ? error.message : 'Unknown error',
+        }),
+      );
+      // Don't throw error - deployment was successful, just SSO protection couldn't be disabled
+    }
+  }
 }
diff --git a/app/lib/plugins/plugin-manager.ts b/app/lib/plugins/plugin-manager.ts
index 24c0fcd6..be0ac59e 100644
--- a/app/lib/plugins/plugin-manager.ts
+++ b/app/lib/plugins/plugin-manager.ts
@@ -37,8 +37,8 @@ export const FREE_PLUGIN_ACCESS: PluginAccessMap = {
   },
   [PluginType.DEPLOYMENT]: {
     NETLIFY: true,
-    VERCEL: false,
-    AWS: false,
+    VERCEL: true,
+    AWS: true,
   },
 };
 
diff --git a/app/lib/plugins/types.ts b/app/lib/plugins/types.ts
index 7e206802..94da7f82 100644
--- a/app/lib/plugins/types.ts
+++ b/app/lib/plugins/types.ts
@@ -74,6 +74,7 @@ export interface DeploymentConfig {
   description?: string;
   userId: string;
   environmentId?: string;
+  slug?: string;
 }
 
 export interface DeploymentProgress {
diff --git a/app/lib/services/websiteService.ts b/app/lib/services/websiteService.ts
index 2b8ea88d..bcadef98 100644
--- a/app/lib/services/websiteService.ts
+++ b/app/lib/services/websiteService.ts
@@ -8,6 +8,7 @@ export interface Website {
   siteId: string | null;
   siteName: string | null;
   siteUrl: string | null;
+  slug: string | null;
   chatId: string;
   isPublic: boolean;
   createdById: string;
diff --git a/app/lib/stores/websiteStore.ts b/app/lib/stores/websiteStore.ts
index 31c0b582..77f085c9 100644
--- a/app/lib/stores/websiteStore.ts
+++ b/app/lib/stores/websiteStore.ts
@@ -6,6 +6,22 @@ export interface Website {
   siteId: string | null;
   siteName: string | null;
   siteUrl: string | null;
+  slug: string | null;
+  chatId: string;
+  isPublic: boolean;
+  createdById: string;
+  environmentId: string | null;
+  createdAt: Date;
+  updatedAt: Date;
+  environment?: {
+    id: string;
+    name: string;
+  };
+  createdBy?: {
+    id: string;
+    name: string;
+    email: string;
+  };
 }
 
 interface WebsiteResponse {
diff --git a/app/lib/utils/app-url.ts b/app/lib/utils/app-url.ts
new file mode 100644
index 00000000..100e681a
--- /dev/null
+++ b/app/lib/utils/app-url.ts
@@ -0,0 +1,173 @@
+/**
+ * Utility functions for generating app URLs and handling deployment URLs
+ */
+
+export interface AppUrlOptions {
+  chatId: string;
+  baseUrl?: string;
+  useProxy?: boolean;
+}
+
+/**
+ * Generate a friendly app URL for a deployed application
+ */
+export function generateAppUrl(options: AppUrlOptions): string {
+  const { chatId, baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000', useProxy = true } = options;
+
+  if (useProxy) {
+    return `${baseUrl}/apps/${chatId}`;
+  }
+
+  return `${baseUrl}/apps/${chatId}`;
+}
+
+/**
+ * Check if a URL is a deployment URL (Vercel, Netlify, AWS, etc.)
+ */
+export function isDeploymentUrl(url: string): boolean {
+  const deploymentPatterns = [
+    /vercel\.app$/,
+    /netlify\.app$/,
+    /amazonaws\.com$/,
+    /cloudfront\.net$/,
+    /herokuapp\.com$/,
+    /railway\.app$/,
+    /render\.com$/,
+    /fly\.dev$/,
+    /supabase\.co$/,
+  ];
+
+  try {
+    const urlObj = new URL(url);
+    return deploymentPatterns.some((pattern) => pattern.test(urlObj.hostname));
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Extract the deployment provider from a URL
+ */
+export function getDeploymentProvider(url: string): string | null {
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname.toLowerCase();
+
+    if (hostname.includes('vercel.app')) {
+      return 'Vercel';
+    }
+
+    if (hostname.includes('netlify.app')) {
+      return 'Netlify';
+    }
+
+    if (hostname.includes('amazonaws.com') || hostname.includes('cloudfront.net')) {
+      return 'AWS';
+    }
+
+    if (hostname.includes('herokuapp.com')) {
+      return 'Heroku';
+    }
+
+    if (hostname.includes('railway.app')) {
+      return 'Railway';
+    }
+
+    if (hostname.includes('render.com')) {
+      return 'Render';
+    }
+
+    if (hostname.includes('fly.dev')) {
+      return 'Fly.io';
+    }
+
+    if (hostname.includes('supabase.co')) {
+      return 'Supabase';
+    }
+
+    return 'Unknown';
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Generate a human-readable app name from a deployment URL
+ */
+export function generateAppNameFromUrl(url: string): string {
+  try {
+    const urlObj = new URL(url);
+    const hostname = urlObj.hostname;
+
+    // Extract app name from subdomain or path
+    if (hostname.includes('vercel.app')) {
+      const subdomain = hostname.split('.')[0];
+      return subdomain.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+    }
+
+    if (hostname.includes('netlify.app')) {
+      const subdomain = hostname.split('.')[0];
+      return subdomain.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+    }
+
+    // For other providers, use the hostname
+    return hostname.replace(/\./g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+  } catch {
+    return 'Untitled App';
+  }
+}
+
+/**
+ * Validate if a deployment URL is accessible
+ */
+export async function validateDeploymentUrl(url: string): Promise<{ valid: boolean; error?: string }> {
+  try {
+    const response = await fetch(url, {
+      method: 'HEAD',
+      signal: AbortSignal.timeout(10000), // 10 second timeout
+    });
+
+    if (response.ok) {
+      return { valid: true };
+    }
+
+    return {
+      valid: false,
+      error: `HTTP ${response.status}: ${response.statusText}`,
+    };
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.name === 'TimeoutError') {
+        return { valid: false, error: 'Request timeout' };
+      }
+
+      return { valid: false, error: error.message };
+    }
+
+    return { valid: false, error: 'Unknown error' };
+  }
+}
+
+/**
+ * Generate a QR code URL for easy mobile access
+ */
+export function generateQRCodeUrl(appUrl: string): string {
+  const encodedUrl = encodeURIComponent(appUrl);
+  return `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodedUrl}`;
+}
+
+/**
+ * Generate a shareable link with metadata
+ */
+export function generateShareableLink(
+  options: AppUrlOptions & {
+    appName?: string;
+    description?: string;
+  },
+): string {
+  const { appName, description, ...urlOptions } = options;
+  const appUrl = generateAppUrl(urlOptions);
+
+  // You could extend this to include Open Graph meta tags or other sharing features
+  return appUrl;
+}
diff --git a/app/utils/slug.ts b/app/utils/slug.ts
new file mode 100644
index 00000000..9f85985d
--- /dev/null
+++ b/app/utils/slug.ts
@@ -0,0 +1,140 @@
+import { prisma } from '@/lib/prisma';
+
+/**
+ * Generates a URL-safe slug from a given string
+ * @param input - The string to convert to a slug
+ * @returns A URL-safe slug
+ */
+export function generateSlug(input: string): string {
+  return (
+    input
+      .toLowerCase()
+      .trim()
+      // Replace spaces and special characters with hyphens
+      .replace(/[\s\W-]+/g, '-')
+      // Remove leading/trailing hyphens
+      .replace(/^-+|-+$/g, '')
+      // Ensure it's not empty
+      .substring(0, 50) || 'untitled-app'
+  );
+}
+
+/**
+ * Client-side function to generate a unique slug via API
+ * @param baseSlug - The base slug to make unique
+ * @param chatId - The chat ID for fallback generation
+ * @param siteName - Optional site name for fallback generation
+ * @param existingSlug - Optional existing slug to exclude from uniqueness check
+ * @returns A unique slug
+ */
+export async function generateUniqueSlugClient(
+  baseSlug: string,
+  chatId?: string,
+  siteName?: string,
+  existingSlug?: string,
+): Promise<string> {
+  try {
+    const response = await fetch('/api/slugs', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        baseSlug,
+        chatId,
+        siteName,
+        existingSlug,
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error('Failed to generate unique slug');
+    }
+
+    const data = await response.json<{ slug: string }>();
+
+    return data.slug;
+  } catch (error) {
+    console.error('Error generating unique slug:', error);
+    // Fallback to basic slug generation
+    return generateSlug(baseSlug || chatId || 'untitled-app');
+  }
+}
+
+/**
+ * Server-side function to generate a unique slug (requires Prisma)
+ * @param baseSlug - The base slug to make unique
+ * @param existingSlug - Optional existing slug to exclude from uniqueness check
+ * @returns A unique slug
+ */
+export async function generateUniqueSlug(baseSlug: string, existingSlug?: string): Promise<string> {
+  // Import Prisma only on server-side
+
+  let slug = generateSlug(baseSlug);
+  let counter = 1;
+  const originalSlug = slug;
+
+  while (true) {
+    const existing = await prisma.website.findFirst({
+      where: {
+        slug,
+        ...(existingSlug && { slug: { not: existingSlug } }),
+      },
+    });
+
+    if (!existing) {
+      return slug;
+    }
+
+    slug = `${originalSlug}-${counter}`;
+    counter++;
+  }
+}
+
+/**
+ * Validates if a slug is valid (URL-safe, not empty, etc.)
+ * @param slug - The slug to validate
+ * @returns True if valid, false otherwise
+ */
+export function isValidSlug(slug: string): boolean {
+  // Check if slug is empty or too long
+  if (!slug || slug.length > 50) {
+    return false;
+  }
+
+  // Check if slug contains only valid characters (lowercase letters, numbers, hyphens)
+  const validSlugRegex = /^[a-z0-9-]+$/;
+
+  if (!validSlugRegex.test(slug)) {
+    return false;
+  }
+
+  // Check if slug doesn't start or end with hyphen
+  if (slug.startsWith('-') || slug.endsWith('-')) {
+    return false;
+  }
+
+  // Check if slug is not a reserved word
+  const reservedWords = ['admin', 'api', 'app', 'apps', 'www', 'mail', 'ftp', 'blog', 'help', 'support'];
+
+  if (reservedWords.includes(slug)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Generates a default slug from chatId and siteName
+ * @param chatId - The chat ID
+ * @param siteName - Optional site name
+ * @returns A generated slug
+ */
+export function generateDefaultSlug(chatId: string, siteName?: string): string {
+  if (siteName) {
+    return generateSlug(siteName);
+  }
+
+  // Fallback to using first 8 characters of chatId
+  return generateSlug(`app-${chatId.substring(0, 8)}`);
+}
diff --git a/prisma/migrations/20250923151342_add_slug_to_website/migration.sql b/prisma/migrations/20250923151342_add_slug_to_website/migration.sql
new file mode 100644
index 00000000..42c398a0
--- /dev/null
+++ b/prisma/migrations/20250923151342_add_slug_to_website/migration.sql
@@ -0,0 +1,11 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[slug]` on the table `website` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- AlterTable
+ALTER TABLE "public"."website" ADD COLUMN     "slug" TEXT;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "website_slug_key" ON "public"."website"("slug");
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index dfd4ffe1..a8f212b0 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -60,6 +60,7 @@ model Website {
   siteId        String?      @map("site_id")
   siteName      String?      @map("site_name")
   siteUrl       String?      @map("site_url")
+  slug          String?      @unique
   chatId        String       @map("chat_id")
   createdAt     DateTime     @default(now()) @map("created_at")
   updatedAt     DateTime     @updatedAt @map("updated_at")
diff --git a/starters/next-starter/next.config.ts b/starters/next-starter/next.config.ts
index a1e5aa0d..95c2ccfb 100644
--- a/starters/next-starter/next.config.ts
+++ b/starters/next-starter/next.config.ts
@@ -1,13 +1,40 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
-  devIndicators: false,
+const nextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  images: {
+    unoptimized: true,
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },
   typescript: {
     ignoreBuildErrors: true,
   },
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          {
+            key: 'X-Frame-Options',
+            value: 'ALLOW-FROM *',
+          },
+          {
+            key: 'Cross-Origin-Resource-Policy',
+            value: 'cross-origin',
+          },
+          {
+            key: 'Cross-Origin-Embedder-Policy',
+            value: 'require-corp',
+          },
+          {
+            key: 'Cross-Origin-Opener-Policy',
+            value: 'same-origin-allow-popups',
+          },
+        ],
+      },
+    ];
+  },
 };
 
-export default nextConfig;
+module.exports = nextConfig;