diff --git a/docker-compose.yml b/docker-compose.yml
index 6046db8..6fa82b4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,6 +11,8 @@ services:
       - "5444:5432"
     volumes:
       - postgres_data:/var/lib/postgresql/data
+      # Ensure the pgvector extension is created on first database init
+      - ./prisma/init-pgvector.sql:/docker-entrypoint-initdb.d/init-pgvector.sql:ro
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-postgres}"]
       interval: 10s
diff --git a/prisma/init-pgvector.sql b/prisma/init-pgvector.sql
new file mode 100644
index 0000000..ee6ce9d
--- /dev/null
+++ b/prisma/init-pgvector.sql
@@ -0,0 +1,3 @@
+-- Create the pgvector extension used by Prisma's KnowledgeChunk.embedding column
+CREATE EXTENSION IF NOT EXISTS vector;
+
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 9320bd3..c2eb893 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -46,7 +46,7 @@ export default async function AdminLayout({
                             <h2 className="text-xs md:text-sm font-semibold text-slate-300 uppercase tracking-wider">
                                 Admin Portal
                             </h2>
-                            <span className="text-[10px] text-slate-500">
+                            <span className="text-[10px] text-slate-500 hidden sm:block">
                                 Read-only observability for Shopify, vendors & suppliers
                             </span>
                         </div>
diff --git a/src/app/dashboard/inventory/page.tsx b/src/app/dashboard/inventory/page.tsx
index 8715202..adad69a 100644
--- a/src/app/dashboard/inventory/page.tsx
+++ b/src/app/dashboard/inventory/page.tsx
@@ -372,7 +372,7 @@ export default function InventoryPage() {
                             <Filter className="w-4 h-4" /> Filters
                         </button>
                         {showFilters && (
-                            <div className="absolute right-0 top-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl p-4 z-50 min-w-[200px]">
+                            <div className="absolute right-0 top-full mt-2 bg-slate-900 border border-white/10 rounded-xl shadow-xl p-4 z-50 min-w-[200px] max-w-[calc(100vw-2rem)]">
                                 <div className="space-y-3">
                                     <div>
                                         <label className="block text-xs font-bold text-slate-400 mb-2">Status</label>
diff --git a/src/app/dashboard/juno-engine/email-templates/page.tsx b/src/app/dashboard/juno-engine/email-templates/page.tsx
index 9a85135..678615a 100644
--- a/src/app/dashboard/juno-engine/email-templates/page.tsx
+++ b/src/app/dashboard/juno-engine/email-templates/page.tsx
@@ -347,7 +347,7 @@ export default function EmailTemplatesPage() {
                                         />
                                     </div>
 
-                                    <div className="grid grid-cols-2 gap-3">
+                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                         <div>
                                             <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
                                                 Intent
diff --git a/src/app/dashboard/orders/[orderId]/page.tsx b/src/app/dashboard/orders/[orderId]/page.tsx
index 6529423..990c552 100644
--- a/src/app/dashboard/orders/[orderId]/page.tsx
+++ b/src/app/dashboard/orders/[orderId]/page.tsx
@@ -139,12 +139,12 @@ export default function OrderDetailsPage() {
                 >
                     <ArrowLeft className="w-5 h-5" />
                 </button>
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-3 min-w-0 flex-wrap">
                     <div className="w-10 h-10 rounded-xl bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center">
                         <ShoppingBag className="w-5 h-5 text-indigo-400" />
                     </div>
-                    <div>
-                        <h1 className="text-2xl font-bold text-white">Order Details</h1>
+                    <div className="min-w-0">
+                        <h1 className="text-xl md:text-2xl font-bold text-white">Order Details</h1>
                         <p className="text-sm text-slate-400">{order.name}</p>
                     </div>
                 </div>
diff --git a/src/app/dashboard/products/page.tsx b/src/app/dashboard/products/page.tsx
index b0f2e39..962ddc5 100644
--- a/src/app/dashboard/products/page.tsx
+++ b/src/app/dashboard/products/page.tsx
@@ -42,12 +42,12 @@ export default function InventoryPage() {
                     <table className="w-full text-left">
                         <thead>
                             <tr className="border-b border-white/5 bg-white/[0.02]">
-                                <th className="px-6 py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Product Details</th>
-                                <th className="px-6 py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Supplier</th>
-                                <th className="px-6 py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Price</th>
-                                <th className="px-6 py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Stock</th>
-                                <th className="px-6 py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Status</th>
-                                <th className="px-6 py-4 text-right"></th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest min-w-[180px]">Product Details</th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest hidden sm:table-cell">Supplier</th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest whitespace-nowrap">Price</th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest hidden md:table-cell">Stock</th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest hidden lg:table-cell">Status</th>
+                                <th className="px-3 py-3 md:px-6 md:py-4 text-right text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Actions</th>
                             </tr>
                         </thead>
                         <tbody className="divide-y divide-white/5">
@@ -59,7 +59,7 @@ export default function InventoryPage() {
                                     transition={{ delay: index * 0.05 }}
                                     className="hover:bg-white/[0.02] transition-colors group"
                                 >
-                                    <td className="px-6 py-5">
+                                    <td className="px-3 py-4 md:px-6 md:py-5">
                                         <div className="flex items-center gap-3">
                                             <div className="w-10 h-10 rounded-lg bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-600 group-hover:text-emerald-accent transition-colors">
                                                 <Package className="w-5 h-5" />
@@ -67,21 +67,21 @@ export default function InventoryPage() {
                                             <span className="text-sm font-bold text-zinc-200">{item.title}</span>
                                         </div>
                                     </td>
-                                    <td className="px-6 py-5">
+                                    <td className="px-3 py-4 md:px-6 md:py-5 hidden sm:table-cell">
                                         <span className="text-xs text-zinc-500 font-medium">{item.supplier}</span>
                                     </td>
-                                    <td className="px-6 py-5">
+                                    <td className="px-3 py-4 md:px-6 md:py-5">
                                         <div className="flex items-center gap-1 text-emerald-accent/90 font-mono text-sm font-bold">
                                             {item.price}
                                         </div>
                                     </td>
-                                    <td className="px-6 py-5">
+                                    <td className="px-3 py-4 md:px-6 md:py-5 hidden md:table-cell">
                                         <div className="flex items-center gap-1.5 font-mono text-xs text-zinc-400">
                                             <Layers className="w-3.5 h-3.5" />
                                             {item.stock}
                                         </div>
                                     </td>
-                                    <td className="px-6 py-5">
+                                    <td className="px-3 py-4 md:px-6 md:py-5 hidden lg:table-cell">
                                         <span className={`text-[10px] font-bold px-2 py-0.5 rounded ${item.status === 'LOW STOCK'
                                                 ? 'bg-amber-500/10 text-amber-500'
                                                 : 'bg-emerald-500/10 text-emerald-500'
@@ -89,7 +89,7 @@ export default function InventoryPage() {
                                             {item.status}
                                         </span>
                                     </td>
-                                    <td className="px-6 py-5 text-right">
+                                    <td className="px-3 py-4 md:px-6 md:py-5 text-right">
                                         <button className="p-2 text-zinc-600 hover:text-white transition-colors">
                                             <MoreVertical className="w-4 h-4" />
                                         </button>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d5e7984..9c432d7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -21,6 +21,11 @@ export const metadata: Metadata = {
   },
 };
 
+export const viewport = {
+  width: "device-width",
+  initialScale: 1,
+};
+
 import { Providers } from "@/components/providers";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index bfbc502..57f78de 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -112,7 +112,7 @@ export default function LoginPage() {
                             </div>
                             <h1 className="text-2xl font-bold tracking-tight text-white">JUNOHUB</h1>
                         </div>
-                        <h2 className="text-3xl font-extrabold tracking-tight text-white mb-2">
+                        <h2 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-white mb-2">
                             Welcome <span className="text-indigo-400">Back</span>
                         </h2>
                         <p className="text-slate-400 text-sm">
diff --git a/src/app/onboarding/onboarding-client.tsx b/src/app/onboarding/onboarding-client.tsx
index 859967c..ac0ee6d 100644
--- a/src/app/onboarding/onboarding-client.tsx
+++ b/src/app/onboarding/onboarding-client.tsx
@@ -251,7 +251,7 @@ export default function OnboardingClient() {
                         className="space-y-8"
                     >
                         <div className="space-y-6">
-                            <div className="flex items-center justify-between p-6 bg-white/5 rounded-2xl border border-white/10 group hover:border-indigo-500/30 transition-all">
+                            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 bg-white/5 rounded-2xl border border-white/10 group hover:border-indigo-500/30 transition-all">
                                 <div className="flex gap-4 items-center">
                                     <div className="w-12 h-12 rounded-xl bg-indigo-500/20 flex items-center justify-center text-indigo-400 border border-indigo-400/20 transition-all">
                                         <Clock3 className="w-6 h-6" />
@@ -272,7 +272,7 @@ export default function OnboardingClient() {
                                 </select>
                             </div>
 
-                            <div className="flex items-center justify-between p-6 bg-white/5 rounded-2xl border border-white/10 group hover:border-emerald-500/30 transition-all">
+                            <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-4 sm:p-6 bg-white/5 rounded-2xl border border-white/10 group hover:border-emerald-500/30 transition-all">
                                 <div className="flex gap-4 items-center">
                                     <div className="w-12 h-12 rounded-xl bg-emerald-500/20 flex items-center justify-center text-emerald-400 border border-emerald-400/20 transition-all">
                                         <Zap className="w-6 h-6" />
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 3c8bc41..4d4565e 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -63,7 +63,7 @@ export default function SignupPage() {
                             </div>
                             <h1 className="text-2xl font-bold tracking-tight text-white">JUNOHUB</h1>
                         </div>
-                        <h2 className="text-3xl font-extrabold tracking-tight text-white mb-2">
+                        <h2 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-white mb-2">
                             Create your <span className="text-indigo-400">Account</span>
                         </h2>
                         <p className="text-slate-400 text-sm">
@@ -207,7 +207,7 @@ export default function SignupPage() {
                     </p>
                 </div>
             </motion.div>
-            <div className="absolute inset-x-0 bottom-4 flex flex-col items-center gap-1 text-[9px] text-slate-500 font-semibold uppercase tracking-widest">
+            <div className="mt-6 flex flex-col items-center gap-1 text-[9px] text-slate-500 font-semibold uppercase tracking-widest">
                 <div className="flex items-center gap-4">
                     <Link
                         href="/privacy-policy"
diff --git a/src/app/supplier/layout.tsx b/src/app/supplier/layout.tsx
index 2a943d9..57c069a 100644
--- a/src/app/supplier/layout.tsx
+++ b/src/app/supplier/layout.tsx
@@ -40,7 +40,7 @@ export default async function SupplierLayout({
     }
 
     return (
-        <div className="h-screen relative font-sans dashboard-glass-dark overflow-hidden">
+        <div className="h-screen relative font-sans dashboard-glass-dark overflow-x-hidden">
             {/* Desktop Sidebar */}
             <div className="hidden h-full md:flex md:w-72 md:flex-col md:fixed md:inset-y-0 z-[80] bg-slate-900/70 border-r border-white/10 backdrop-blur-xl">
                 <SupplierSidebar />
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 835c4a9..3ddac90 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -143,7 +143,7 @@ export default function NotificationBell() {
 
             {isOpen && (
                 <div
-                    className={`absolute right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 flex-col rounded-xl border shadow-xl sm:w-96 ${
+                    className={`absolute right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 sm:w-96 max-w-[calc(100vw-2rem)] flex-col rounded-xl border shadow-xl ${
                         isLight
                             ? "bg-white border-slate-200"
                             : "bg-slate-800 border-white/10"
diff --git a/src/components/OrderDetailsModal.tsx b/src/components/OrderDetailsModal.tsx
index a6b4816..b2e0d81 100644
--- a/src/components/OrderDetailsModal.tsx
+++ b/src/components/OrderDetailsModal.tsx
@@ -134,7 +134,7 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
                     }}
                 >
                     {/* Header */}
-                    <div className="flex items-center justify-between p-6 border-b border-white/10 flex-shrink-0 bg-slate-900/95 backdrop-blur-sm">
+                    <div className="flex items-center justify-between p-4 md:p-6 border-b border-white/10 flex-shrink-0 bg-slate-900/95 backdrop-blur-sm">
                         <div className="flex items-center gap-3">
                             <div className="w-10 h-10 rounded-xl bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center">
                                 <ShoppingBag className="w-5 h-5 text-indigo-400" />
@@ -153,7 +153,7 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
                     </div>
 
                     {/* Content */}
-                    <div className="flex-1 overflow-y-auto overflow-x-hidden p-6 min-h-0 bg-slate-900 max-w-full" style={{ maxHeight: 'calc(90vh - 140px)' }}>
+                    <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-6 min-h-0 bg-slate-900 max-w-full" style={{ maxHeight: 'calc(90vh - 140px)' }}>
                     {loading ? (
                         <div className="flex items-center justify-center h-64">
                             <div className="text-slate-400">Loading order details...</div>
@@ -352,7 +352,7 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
                     </div>
 
                     {/* Footer */}
-                    <div className="p-6 border-t border-white/10 flex justify-end flex-shrink-0 bg-slate-900/95 backdrop-blur-sm">
+                    <div className="p-4 md:p-6 border-t border-white/10 flex justify-end flex-shrink-0 bg-slate-900/95 backdrop-blur-sm">
                         <button
                             onClick={onClose}
                             className="px-6 py-2.5 bg-indigo-500 text-white rounded-xl font-bold hover:bg-indigo-600 transition-colors"