diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
index 18426bde..3625fed6 100644
--- a/apps/api/src/index.ts
+++ b/apps/api/src/index.ts
@@ -64,6 +64,8 @@ app.addHook("onSend", async (_request, reply) => {
 await app.register(rateLimit, {
   max: env.RATE_LIMIT_PER_MIN,
   timeWindow: "1 minute",
+  // Only rate-limit API endpoints — static files and the SPA fallback must never be throttled
+  allowList: (request) => !request.url.startsWith("/api/"),
 });
 
 // Multipart upload support
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index aa0f3fae..38c51240 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,16 +1,27 @@
-import { Component, type ErrorInfo, type ReactNode } from "react";
+import { Component, type ErrorInfo, lazy, type ReactNode, Suspense } from "react";
 import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { Toaster } from "sonner";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { useAuth } from "./hooks/use-auth";
-import { AutomatePage } from "./pages/automate-page";
-import { ChangePasswordPage } from "./pages/change-password-page";
-import { FilesPage } from "./pages/files-page";
-import { FullscreenGridPage } from "./pages/fullscreen-grid-page";
-import { HomePage } from "./pages/home-page";
-import { LoginPage } from "./pages/login-page";
-import { PrivacyPolicyPage } from "./pages/privacy-policy-page";
-import { ToolPage } from "./pages/tool-page";
+
+// Lazy-load all pages so each page's JS (and its icons/deps) is only
+// downloaded when the user navigates there, shrinking the main bundle.
+const AutomatePage = lazy(() =>
+  import("./pages/automate-page").then((m) => ({ default: m.AutomatePage })),
+);
+const ChangePasswordPage = lazy(() =>
+  import("./pages/change-password-page").then((m) => ({ default: m.ChangePasswordPage })),
+);
+const FilesPage = lazy(() => import("./pages/files-page").then((m) => ({ default: m.FilesPage })));
+const FullscreenGridPage = lazy(() =>
+  import("./pages/fullscreen-grid-page").then((m) => ({ default: m.FullscreenGridPage })),
+);
+const HomePage = lazy(() => import("./pages/home-page").then((m) => ({ default: m.HomePage })));
+const LoginPage = lazy(() => import("./pages/login-page").then((m) => ({ default: m.LoginPage })));
+const PrivacyPolicyPage = lazy(() =>
+  import("./pages/privacy-policy-page").then((m) => ({ default: m.PrivacyPolicyPage })),
+);
+const ToolPage = lazy(() => import("./pages/tool-page").then((m) => ({ default: m.ToolPage })));
 
 class ErrorBoundary extends Component<
   { children: ReactNode },
@@ -92,6 +103,15 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
   return <>{children}</>;
 }
 
+// Single page-level loading fallback — shown while JS for a route downloads.
+function PageLoader() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-background text-foreground">
+      <div className="h-8 w-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+    </div>
+  );
+}
+
 export function App() {
   return (
     <ErrorBoundary>
@@ -99,24 +119,26 @@ export function App() {
       <BrowserRouter>
         <KeyboardShortcutProvider>
           <AuthGuard>
-            <Routes>
-              <Route path="/login" element={<LoginPage />} />
-              <Route path="/change-password" element={<ChangePasswordPage />} />
-              <Route path="/automate" element={<AutomatePage />} />
-              <Route path="/files" element={<FilesPage />} />
-              <Route path="/fullscreen" element={<FullscreenGridPage />} />
-              <Route path="/privacy" element={<PrivacyPolicyPage />} />
-              {/* Redirects: old color tools consolidated into adjust-colors */}
-              <Route
-                path="/brightness-contrast"
-                element={<Navigate to="/adjust-colors" replace />}
-              />
-              <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
-              <Route path="/color-channels" element={<Navigate to="/adjust-colors" replace />} />
-              <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
-              <Route path="/:toolId" element={<ToolPage />} />
-              <Route path="/" element={<HomePage />} />
-            </Routes>
+            <Suspense fallback={<PageLoader />}>
+              <Routes>
+                <Route path="/login" element={<LoginPage />} />
+                <Route path="/change-password" element={<ChangePasswordPage />} />
+                <Route path="/automate" element={<AutomatePage />} />
+                <Route path="/files" element={<FilesPage />} />
+                <Route path="/fullscreen" element={<FullscreenGridPage />} />
+                <Route path="/privacy" element={<PrivacyPolicyPage />} />
+                {/* Redirects: old color tools consolidated into adjust-colors */}
+                <Route
+                  path="/brightness-contrast"
+                  element={<Navigate to="/adjust-colors" replace />}
+                />
+                <Route path="/saturation" element={<Navigate to="/adjust-colors" replace />} />
+                <Route path="/color-channels" element={<Navigate to="/adjust-colors" replace />} />
+                <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
+                <Route path="/:toolId" element={<ToolPage />} />
+                <Route path="/" element={<HomePage />} />
+              </Routes>
+            </Suspense>
           </AuthGuard>
         </KeyboardShortcutProvider>
       </BrowserRouter>
diff --git a/apps/web/src/components/common/review-panel.tsx b/apps/web/src/components/common/review-panel.tsx
index 2aac4afb..311cc2a9 100644
--- a/apps/web/src/components/common/review-panel.tsx
+++ b/apps/web/src/components/common/review-panel.tsx
@@ -1,9 +1,9 @@
 import { TOOLS } from "@ashim/shared";
-import * as icons from "lucide-react";
-import { ArrowRight, ChevronDown, ChevronRight, Download, Undo2 } from "lucide-react";
+import { ArrowRight, ChevronDown, ChevronRight, Download, FileImage, Undo2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { formatFileSize, triggerDownload } from "@/lib/download";
+import { ICON_MAP } from "@/lib/icon-map";
 import { getSuggestedTools } from "@/lib/suggested-tools";
 
 interface ReviewPanelProps {
@@ -124,12 +124,8 @@ export function ReviewPanel({
                 <div className="space-y-1">
                   {suggestedTools.map((tool) => {
                     const ToolIcon =
-                      (
-                        icons as unknown as Record<
-                          string,
-                          React.ComponentType<{ className?: string }>
-                        >
-                      )[tool.icon] || icons.FileImage;
+                      (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
+                      FileImage;
                     return (
                       <button
                         key={tool.id}
diff --git a/apps/web/src/components/common/tool-card.tsx b/apps/web/src/components/common/tool-card.tsx
index 4eb30d94..79b9a52d 100644
--- a/apps/web/src/components/common/tool-card.tsx
+++ b/apps/web/src/components/common/tool-card.tsx
@@ -1,7 +1,7 @@
 import type { Tool } from "@ashim/shared";
-import * as icons from "lucide-react";
 import { FileImage, Star } from "lucide-react";
 import { Link } from "react-router-dom";
+import { ICON_MAP } from "@/lib/icon-map";
 import { cn } from "@/lib/utils";
 
 interface ToolCardProps {
@@ -9,8 +9,8 @@ interface ToolCardProps {
 }
 
 export function ToolCard({ tool }: ToolCardProps) {
-  const iconsMap = icons as unknown as Record<string, React.ComponentType<{ className?: string }>>;
-  const IconComponent = iconsMap[tool.icon] || FileImage;
+  const IconComponent =
+    (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
 
   return (
     <div className="group flex items-center gap-3 relative">
diff --git a/apps/web/src/components/tools/pipeline-builder.tsx b/apps/web/src/components/tools/pipeline-builder.tsx
index 9c895138..6ca1ccf6 100644
--- a/apps/web/src/components/tools/pipeline-builder.tsx
+++ b/apps/web/src/components/tools/pipeline-builder.tsx
@@ -15,11 +15,11 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import * as icons from "lucide-react";
-import { GripVertical, Plus, X } from "lucide-react";
+import { FileImage, GripVertical, Plus, X } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { SearchBar } from "@/components/common/search-bar";
 import { apiGet } from "@/lib/api";
+import { ICON_MAP } from "@/lib/icon-map";
 import { cn } from "@/lib/utils";
 import type { PipelineStep } from "@/stores/pipeline-store";
 import { PipelineStepSettings } from "./pipeline-step-settings";
@@ -30,8 +30,6 @@ const PIPELINE_TOOLS_BASE = TOOLS.filter(
   (t) => !["pipeline", "batch", "compare", "find-duplicates", "collage", "compose"].includes(t.id),
 );
 
-const iconsMap = icons as unknown as Record<string, React.ComponentType<{ className?: string }>>;
-
 interface PipelineBuilderProps {
   steps: PipelineStep[];
   expandedStepId: string | null;
@@ -75,7 +73,7 @@ function SortableStep({
   const tool = TOOLS.find((t) => t.id === step.toolId);
   if (!tool) return null;
 
-  const Icon = iconsMap[tool.icon] || icons.FileImage;
+  const Icon = (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
   const summary = getSettingsSummary(step.toolId, step.settings);
 
   return (
@@ -264,7 +262,8 @@ export function PipelineBuilder({
             <p className="text-sm text-muted-foreground text-center py-4">No tools found</p>
           ) : (
             PIPELINE_TOOLS.map((tool) => {
-              const Icon = iconsMap[tool.icon] || icons.FileImage;
+              const Icon =
+                (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
               return (
                 <button
                   key={tool.id}
diff --git a/apps/web/src/components/tools/pipeline-step-settings.tsx b/apps/web/src/components/tools/pipeline-step-settings.tsx
index 0675dda4..de994e05 100644
--- a/apps/web/src/components/tools/pipeline-step-settings.tsx
+++ b/apps/web/src/components/tools/pipeline-step-settings.tsx
@@ -1,24 +1,62 @@
-import { BlurFacesControls } from "./blur-faces-settings";
-import { BorderControls } from "./border-settings";
-import { ColorControls } from "./color-settings";
-import { CompressControls } from "./compress-settings";
-import { ConvertControls } from "./convert-settings";
-import { CropControls } from "./crop-settings";
-import { EnhanceFacesControls } from "./enhance-faces-settings";
-import { GifToolsControls } from "./gif-tools-settings";
-import { NoiseRemovalControls } from "./noise-removal-settings";
-import { RemoveBgControls } from "./remove-bg-settings";
-import { ReplaceColorControls } from "./replace-color-settings";
-import { ResizeControls } from "./resize-settings";
-import { RotateControls } from "./rotate-settings";
-import { SmartCropControls } from "./smart-crop-settings";
-import { StripMetadataControls } from "./strip-metadata-settings";
-import { TextOverlayControls } from "./text-overlay-settings";
-import { UpscaleControls } from "./upscale-settings";
-import { WatermarkTextControls } from "./watermark-text-settings";
+import { lazy, Suspense } from "react";
+
+type ControlProps = {
+  settings: Record<string, unknown>;
+  onChange: (settings: Record<string, unknown>) => void;
+};
+
+// Lazy-load every control so these modules are not pulled into the main bundle.
+// The pipeline builder wraps this component in <Suspense> so each control
+// loads on demand when the user selects a step in the pipeline.
+const CONTROLS: Record<string, React.LazyExoticComponent<React.FC<ControlProps>>> = {
+  resize: lazy(() => import("./resize-settings").then((m) => ({ default: m.ResizeControls }))),
+  crop: lazy(() => import("./crop-settings").then((m) => ({ default: m.CropControls }))),
+  rotate: lazy(() => import("./rotate-settings").then((m) => ({ default: m.RotateControls }))),
+  convert: lazy(() => import("./convert-settings").then((m) => ({ default: m.ConvertControls }))),
+  compress: lazy(() =>
+    import("./compress-settings").then((m) => ({ default: m.CompressControls })),
+  ),
+  "strip-metadata": lazy(() =>
+    import("./strip-metadata-settings").then((m) => ({ default: m.StripMetadataControls })),
+  ),
+  border: lazy(() => import("./border-settings").then((m) => ({ default: m.BorderControls }))),
+  "watermark-text": lazy(() =>
+    import("./watermark-text-settings").then((m) => ({ default: m.WatermarkTextControls })),
+  ),
+  "text-overlay": lazy(() =>
+    import("./text-overlay-settings").then((m) => ({ default: m.TextOverlayControls })),
+  ),
+  "replace-color": lazy(() =>
+    import("./replace-color-settings").then((m) => ({ default: m.ReplaceColorControls })),
+  ),
+  "smart-crop": lazy(() =>
+    import("./smart-crop-settings").then((m) => ({ default: m.SmartCropControls })),
+  ),
+  "gif-tools": lazy(() =>
+    import("./gif-tools-settings").then((m) => ({ default: m.GifToolsControls })),
+  ),
+  upscale: lazy(() => import("./upscale-settings").then((m) => ({ default: m.UpscaleControls }))),
+  "blur-faces": lazy(() =>
+    import("./blur-faces-settings").then((m) => ({ default: m.BlurFacesControls })),
+  ),
+  "enhance-faces": lazy(() =>
+    import("./enhance-faces-settings").then((m) => ({ default: m.EnhanceFacesControls })),
+  ),
+  "remove-background": lazy(() =>
+    import("./remove-bg-settings").then((m) => ({ default: m.RemoveBgControls })),
+  ),
+  "noise-removal": lazy(() =>
+    import("./noise-removal-settings").then((m) => ({ default: m.NoiseRemovalControls })),
+  ),
+};
 
 const COLOR_TOOL_IDS = new Set(["adjust-colors"]);
 
+// ColorControls needs an extra toolId prop so it lives outside the shared map.
+const LazyColorControls = lazy(() =>
+  import("./color-settings").then((m) => ({ default: m.ColorControls })),
+);
+
 interface PipelineStepSettingsProps {
   toolId: string;
   settings: Record<string, unknown>;
@@ -26,32 +64,23 @@ interface PipelineStepSettingsProps {
 }
 
 export function PipelineStepSettings({ toolId, settings, onChange }: PipelineStepSettingsProps) {
-  if (toolId === "resize") return <ResizeControls settings={settings} onChange={onChange} />;
-  if (toolId === "crop") return <CropControls settings={settings} onChange={onChange} />;
-  if (toolId === "rotate") return <RotateControls settings={settings} onChange={onChange} />;
-  if (toolId === "convert") return <ConvertControls settings={settings} onChange={onChange} />;
-  if (toolId === "compress") return <CompressControls settings={settings} onChange={onChange} />;
-  if (toolId === "strip-metadata")
-    return <StripMetadataControls settings={settings} onChange={onChange} />;
-  if (toolId === "border") return <BorderControls settings={settings} onChange={onChange} />;
-  if (toolId === "watermark-text")
-    return <WatermarkTextControls settings={settings} onChange={onChange} />;
-  if (toolId === "text-overlay")
-    return <TextOverlayControls settings={settings} onChange={onChange} />;
-  if (toolId === "replace-color")
-    return <ReplaceColorControls settings={settings} onChange={onChange} />;
-  if (toolId === "smart-crop") return <SmartCropControls settings={settings} onChange={onChange} />;
-  if (toolId === "gif-tools") return <GifToolsControls settings={settings} onChange={onChange} />;
-  if (toolId === "upscale") return <UpscaleControls settings={settings} onChange={onChange} />;
-  if (toolId === "blur-faces") return <BlurFacesControls settings={settings} onChange={onChange} />;
-  if (toolId === "enhance-faces")
-    return <EnhanceFacesControls settings={settings} onChange={onChange} />;
-  if (toolId === "remove-background")
-    return <RemoveBgControls settings={settings} onChange={onChange} />;
-  if (toolId === "noise-removal")
-    return <NoiseRemovalControls settings={settings} onChange={onChange} />;
-  if (COLOR_TOOL_IDS.has(toolId))
-    return <ColorControls toolId={toolId} settings={settings} onChange={onChange} />;
+  const Control = CONTROLS[toolId];
+
+  if (Control) {
+    return (
+      <Suspense fallback={null}>
+        <Control settings={settings} onChange={onChange} />
+      </Suspense>
+    );
+  }
+
+  if (COLOR_TOOL_IDS.has(toolId)) {
+    return (
+      <Suspense fallback={null}>
+        <LazyColorControls toolId={toolId} settings={settings} onChange={onChange} />
+      </Suspense>
+    );
+  }
 
   return (
     <p className="text-xs text-muted-foreground italic">
diff --git a/apps/web/src/components/tools/remove-bg-settings.tsx b/apps/web/src/components/tools/remove-bg-settings.tsx
index b01ddb59..6e3a90b8 100644
--- a/apps/web/src/components/tools/remove-bg-settings.tsx
+++ b/apps/web/src/components/tools/remove-bg-settings.tsx
@@ -10,6 +10,7 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
+import { formatHeaders } from "@/lib/api";
 import { useFileStore } from "@/stores/file-store";
 
 type SubjectType = "people" | "products" | "general";
@@ -565,22 +566,20 @@ export function RemoveBgSettings({ onBgPreview }: RemoveBgSettingsProps = {}) {
         // Decode HEIC via server preview endpoint
         const formData = new FormData();
         formData.append("file", file);
-        import("@/lib/api").then(({ formatHeaders }) => {
-          fetch("/api/v1/preview", {
-            method: "POST",
-            headers: formatHeaders(),
-            body: formData,
+        fetch("/api/v1/preview", {
+          method: "POST",
+          headers: formatHeaders(),
+          body: formData,
+        })
+          .then((res) => (res.ok ? res.blob() : null))
+          .then((blob) => {
+            if (blob && bgImageFileRef.current === file) {
+              const url = URL.createObjectURL(blob);
+              revoke = () => URL.revokeObjectURL(url);
+              setBgImageBlobUrl(url);
+            }
           })
-            .then((res) => (res.ok ? res.blob() : null))
-            .then((blob) => {
-              if (blob && bgImageFileRef.current === file) {
-                const url = URL.createObjectURL(blob);
-                revoke = () => URL.revokeObjectURL(url);
-                setBgImageBlobUrl(url);
-              }
-            })
-            .catch(() => {});
-        });
+          .catch(() => {});
       } else {
         const url = URL.createObjectURL(file);
         revoke = () => URL.revokeObjectURL(url);
@@ -744,7 +743,7 @@ export function RemoveBgSettings({ onBgPreview }: RemoveBgSettingsProps = {}) {
         formData.append("backgroundImage", bgImageFile);
       }
 
-      const headers = (await import("@/lib/api")).formatHeaders();
+      const headers = formatHeaders();
       const response = await fetch("/api/v1/tools/remove-background/effects", {
         method: "POST",
         headers,
diff --git a/apps/web/src/lib/icon-map.ts b/apps/web/src/lib/icon-map.ts
new file mode 100644
index 00000000..9e049918
--- /dev/null
+++ b/apps/web/src/lib/icon-map.ts
@@ -0,0 +1,106 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  CheckCircle2,
+  Code,
+  Columns,
+  Columns2,
+  Copy,
+  Crop,
+  Eraser,
+  Eye,
+  EyeOff,
+  FileEdit,
+  FileImage,
+  FileOutput,
+  FileText,
+  FileType,
+  Film,
+  Focus,
+  FolderInput,
+  Frame,
+  Globe,
+  Grid3x3,
+  Image,
+  Info,
+  Layers,
+  LayoutGrid,
+  Maximize2,
+  Minimize2,
+  Palette,
+  PenLine,
+  PenTool,
+  Pipette,
+  QrCode,
+  RotateCw,
+  ScanFace,
+  ScanLine,
+  ScanText,
+  ShieldOff,
+  SlidersHorizontal,
+  Sparkles,
+  Stamp,
+  Star,
+  TextCursorInput,
+  Type,
+  Undo2,
+  UserCheck,
+  Wand2,
+  Workflow,
+  Wrench,
+  Zap,
+  ZoomIn,
+} from "lucide-react";
+
+// Only the icons actually used by tool definitions in @ashim/shared constants.
+// Avoids `import * as icons from "lucide-react"` which pulls the entire 1000+ icon library.
+export const ICON_MAP: Record<string, LucideIcon> = {
+  CheckCircle2,
+  Code,
+  Columns,
+  Columns2,
+  Copy,
+  Crop,
+  Eraser,
+  Eye,
+  EyeOff,
+  FileEdit,
+  FileImage,
+  FileOutput,
+  FileText,
+  FileType,
+  Film,
+  Focus,
+  FolderInput,
+  Frame,
+  Globe,
+  Grid3x3,
+  Image,
+  Info,
+  LayoutGrid,
+  Layers,
+  Maximize2,
+  Minimize2,
+  Palette,
+  PenLine,
+  PenTool,
+  Pipette,
+  QrCode,
+  RotateCw,
+  ScanFace,
+  ScanLine,
+  ScanText,
+  ShieldOff,
+  SlidersHorizontal,
+  Sparkles,
+  Stamp,
+  Star,
+  TextCursorInput,
+  Type,
+  Undo2,
+  UserCheck,
+  Wand2,
+  Workflow,
+  Wrench,
+  Zap,
+  ZoomIn,
+};
diff --git a/apps/web/src/pages/fullscreen-grid-page.tsx b/apps/web/src/pages/fullscreen-grid-page.tsx
index 54c9f47b..dcca7ff7 100644
--- a/apps/web/src/pages/fullscreen-grid-page.tsx
+++ b/apps/web/src/pages/fullscreen-grid-page.tsx
@@ -1,11 +1,11 @@
 import type { CategoryInfo, Tool } from "@ashim/shared";
 import { CATEGORIES, TOOLS } from "@ashim/shared";
-import * as icons from "lucide-react";
 import { Eye, EyeOff, FileImage, LayoutGrid, List, Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { GemLogo } from "@/components/common/gem-logo";
 import { apiGet } from "@/lib/api";
+import { ICON_MAP } from "@/lib/icon-map";
 import { cn } from "@/lib/utils";
 
 export function FullscreenGridPage() {
@@ -57,8 +57,6 @@ export function FullscreenGridPage() {
 
   const activeCategories = CATEGORIES.filter((cat) => groupedTools.has(cat.id));
 
-  const iconsMap = icons as unknown as Record<string, React.ComponentType<{ className?: string }>>;
-
   return (
     <div className="min-h-screen bg-background text-foreground">
       {/* Top bar */}
@@ -130,7 +128,6 @@ export function FullscreenGridPage() {
                 category={category}
                 tools={groupedTools.get(category.id) || []}
                 showDetails={showDetails}
-                iconsMap={iconsMap}
               />
             ))}
           </div>
@@ -144,14 +141,13 @@ function CategoryCard({
   category,
   tools,
   showDetails,
-  iconsMap,
 }: {
   category: CategoryInfo;
   tools: Tool[];
   showDetails: boolean;
-  iconsMap: Record<string, React.ComponentType<{ className?: string }>>;
 }) {
-  const CategoryIcon = iconsMap[category.icon] || LayoutGrid;
+  const CategoryIcon =
+    (ICON_MAP[category.icon] as React.ComponentType<{ className?: string }>) ?? LayoutGrid;
 
   return (
     <div className="rounded-xl border border-border bg-card overflow-hidden shadow-sm hover:shadow-md transition-shadow">
@@ -183,7 +179,8 @@ function CategoryCard({
       {/* Tool list */}
       <div className="p-2">
         {tools.map((tool) => {
-          const ToolIcon = iconsMap[tool.icon] || FileImage;
+          const ToolIcon =
+            (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
           return (
             <Link
               key={tool.id}
diff --git a/apps/web/src/pages/home-page.tsx b/apps/web/src/pages/home-page.tsx
index ef3b781b..91e7dd1b 100644
--- a/apps/web/src/pages/home-page.tsx
+++ b/apps/web/src/pages/home-page.tsx
@@ -1,11 +1,11 @@
 import { CATEGORIES, TOOLS } from "@ashim/shared";
-import * as icons from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useCallback, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { ImageViewer } from "@/components/common/image-viewer";
 import { MultiImageViewer } from "@/components/common/multi-image-viewer";
 import { AppLayout } from "@/components/layout/app-layout";
+import { ICON_MAP } from "@/lib/icon-map";
 import { useFileStore } from "@/stores/file-store";
 import { useSettingsStore } from "@/stores/settings-store";
 
@@ -53,7 +53,7 @@ export function HomePage() {
           {/* File info */}
           <div className="p-4 border-b border-border">
             <div className="flex items-center gap-2 text-sm">
-              <icons.CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+              <ICON_MAP.CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
               <span className="truncate font-medium text-foreground">
                 {selectedFileName ?? files[0].name}
               </span>
@@ -81,9 +81,8 @@ export function HomePage() {
                 const tool = TOOLS.find((t) => t.id === id);
                 if (!tool) return null;
                 const Icon =
-                  (icons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[
-                    tool.icon
-                  ] || icons.FileImage;
+                  (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
+                  ICON_MAP.FileImage;
                 return (
                   <button
                     key={id}
@@ -120,12 +119,8 @@ export function HomePage() {
                   <div className="space-y-0.5">
                     {categoryTools.map((tool) => {
                       const Icon =
-                        (
-                          icons as unknown as Record<
-                            string,
-                            React.ComponentType<{ className?: string }>
-                          >
-                        )[tool.icon] || icons.FileImage;
+                        (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
+                        ICON_MAP.FileImage;
                       return (
                         <button
                           key={tool.id}
diff --git a/apps/web/src/pages/tool-page.tsx b/apps/web/src/pages/tool-page.tsx
index bbef2008..072a4129 100644
--- a/apps/web/src/pages/tool-page.tsx
+++ b/apps/web/src/pages/tool-page.tsx
@@ -1,6 +1,12 @@
 import { TOOLS } from "@ashim/shared";
-import * as icons from "lucide-react";
-import { CheckCircle2, ChevronLeft, ChevronRight, Download, Loader2 } from "lucide-react";
+import {
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  FileImage,
+  Loader2,
+} from "lucide-react";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Crop } from "react-image-crop";
 import { useParams } from "react-router-dom";
@@ -17,6 +23,7 @@ import { EraserCanvas } from "@/components/tools/eraser-canvas";
 import type { PreviewTransform } from "@/components/tools/rotate-settings";
 import { useMobile } from "@/hooks/use-mobile";
 import { formatFileSize } from "@/lib/download";
+import { ICON_MAP } from "@/lib/icon-map";
 import { getToolRegistryEntry } from "@/lib/tool-registry";
 import { useFileStore } from "@/stores/file-store";
 
@@ -222,8 +229,7 @@ export function ToolPage() {
   }
 
   const IconComponent =
-    (icons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[tool.icon] ||
-    icons.FileImage;
+    (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? FileImage;
 
   const hasFile = files.length > 0;
   const hasProcessed = !!processedUrl;
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 82cf5709..144a799a 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -17,4 +17,7 @@ export default defineConfig({
       "/api": "http://localhost:13490",
     },
   },
+  build: {
+    rollupOptions: {},
+  },
 });
diff --git a/docker/Dockerfile b/docker/Dockerfile
index ecc8eb69..5186f982 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -66,6 +66,10 @@ ARG TARGETARCH
 # Set to "true" to skip model downloads (for CI builds that just test the image structure)
 ARG SKIP_MODEL_DOWNLOADS=false
 
+# Pin corepack's cache to a system-wide path so all users share the same pnpm
+# binary without downloading it on each container start.
+ENV COREPACK_HOME=/usr/local/share/corepack
+
 # Install Node.js on amd64 (CUDA base has no Node; arm64 base already has it)
 RUN if [ "$TARGETARCH" = "amd64" ]; then \
     apt-get update && apt-get install -y --no-install-recommends \
@@ -79,7 +83,8 @@ RUN if [ "$TARGETARCH" = "amd64" ]; then \
     rm -rf /var/lib/apt/lists/* \
 ; fi
 
-RUN corepack enable && corepack prepare pnpm@9.15.4 --activate
+RUN corepack enable && corepack prepare pnpm@9.15.4 --activate && \
+    chmod -R a+rX /usr/local/share/corepack
 
 # System dependencies (all platforms)
 RUN apt-get update && apt-get install -y --no-install-recommends \
@@ -203,9 +208,6 @@ RUN mkdir -p /app/gfpgan/weights/CodeFormer && \
 # Environment defaults
 ENV PORT=1349 \
     NODE_ENV=production \
-    AUTH_ENABLED=true \
-    DEFAULT_USERNAME=admin \
-    DEFAULT_PASSWORD=admin \
     STORAGE_MODE=local \
     DB_PATH=/data/ashim.db \
     WORKSPACE_PATH=/tmp/workspace \
@@ -247,4 +249,4 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=60s --retries=3 \
 
 # tini as PID 1 for zombie reaping + signal forwarding
 ENTRYPOINT ["tini", "--", "entrypoint.sh"]
-CMD ["pnpm", "exec", "tsx", "apps/api/src/index.ts"]
+CMD ["pnpm", "--filter", "@ashim/api", "run", "start"]
diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
index 7c3ca90a..636a3064 100755
--- a/docker/entrypoint.sh
+++ b/docker/entrypoint.sh
@@ -1,6 +1,12 @@
 #!/bin/sh
 set -e
 
+# Apply auth defaults at runtime so they are never baked into image layers.
+# Users can override any of these via -e flags at docker run time.
+export AUTH_ENABLED="${AUTH_ENABLED:-true}"
+export DEFAULT_USERNAME="${DEFAULT_USERNAME:-admin}"
+export DEFAULT_PASSWORD="${DEFAULT_PASSWORD:-admin}"
+
 # Fix ownership of mounted volumes so the non-root ashim user can write.
 # This runs as root, fixes permissions, then drops to ashim via gosu.
 if [ "$(id -u)" = "0" ]; then
diff --git a/tests/integration/test-server.ts b/tests/integration/test-server.ts
index 6befd84c..602f895e 100644
--- a/tests/integration/test-server.ts
+++ b/tests/integration/test-server.ts
@@ -19,8 +19,8 @@ import { dirname } from "node:path";
 mkdirSync(dirname(process.env.DB_PATH!), { recursive: true });
 mkdirSync(process.env.WORKSPACE_PATH!, { recursive: true });
 
-import cors from "@fastify/cors";
 import { APP_VERSION } from "@ashim/shared";
+import cors from "@fastify/cors";
 import { eq } from "drizzle-orm";
 // ---------------------------------------------------------------------------
 // 2. Import app modules. config.ts already captured our env vars.