diff --git a/studio/frontend/src/components/ui/confetti.tsx b/studio/frontend/src/components/ui/confetti.tsx
index acd618d218..892bffdb18 100644
--- a/studio/frontend/src/components/ui/confetti.tsx
+++ b/studio/frontend/src/components/ui/confetti.tsx
@@ -1,150 +1,118 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
-import type {
-  GlobalOptions as ConfettiGlobalOptions,
-  CreateTypes as ConfettiInstance,
-  Options as ConfettiOptions,
-} from "canvas-confetti";
-import confetti from "canvas-confetti";
-import type { ReactNode } from "react";
-import type React from "react";
-import {
-  createContext,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-
-import { Button } from "@/components/ui/button";
-
-type Api = {
-  fire: (options?: ConfettiOptions) => void;
-};
-
-type Props = React.ComponentPropsWithRef<"canvas"> & {
-  options?: ConfettiOptions;
-  globalOptions?: ConfettiGlobalOptions;
-  manualstart?: boolean;
-  children?: ReactNode;
-};
-
-export type ConfettiRef = Api | null;
-
-const ConfettiContext = createContext<Api>({} as Api);
-
-// Define component first
-const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
-  const {
-    options,
-    globalOptions = { resize: true, useWorker: true },
-    manualstart = false,
-    children,
-    ...rest
-  } = props;
-  const instanceRef = useRef<ConfettiInstance | null>(null);
-
-  const canvasRef = useCallback(
-    (node: HTMLCanvasElement) => {
-      if (node !== null) {
-        if (instanceRef.current) return;
-        instanceRef.current = confetti.create(node, {
-          ...globalOptions,
-          resize: true,
-        });
-      } else {
-        if (instanceRef.current) {
-          instanceRef.current.reset();
-          instanceRef.current = null;
-        }
-      }
-    },
-    [globalOptions],
-  );
-
-  const fire = useCallback(
-    async (opts = {}) => {
-      try {
-        await instanceRef.current?.({ ...options, ...opts });
-      } catch (error) {
-        console.error("Confetti error:", error);
-      }
-    },
-    [options],
-  );
-
-  const api = useMemo(
-    () => ({
-      fire,
-    }),
-    [fire],
-  );
-
-  useImperativeHandle(ref, () => api, [api]);
-
-  useEffect(() => {
-    if (!manualstart) {
-      (async () => {
-        try {
-          await fire();
-        } catch (error) {
-          console.error("Confetti effect error:", error);
-        }
-      })();
-    }
-  }, [manualstart, fire]);
-
-  return (
-    <ConfettiContext.Provider value={api}>
-      <canvas ref={canvasRef} {...rest} />
-      {children}
-    </ConfettiContext.Provider>
-  );
-});
-
-// Set display name immediately
-ConfettiComponent.displayName = "Confetti";
-
-// Export as Confetti
-export const Confetti = ConfettiComponent;
-
-interface ConfettiButtonProps extends React.ComponentProps<"button"> {
-  options?: ConfettiOptions &
-    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
-}
-
-const ConfettiButtonComponent = ({
-  options,
-  children,
-  ...props
-}: ConfettiButtonProps) => {
-  const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    try {
-      const rect = event.currentTarget.getBoundingClientRect();
-      const x = rect.left + rect.width / 2;
-      const y = rect.top + rect.height / 2;
-      await confetti({
-        ...options,
-        origin: {
-          x: x / window.innerWidth,
-          y: y / window.innerHeight,
-        },
-      });
-    } catch (error) {
-      console.error("Confetti button error:", error);
-    }
-  };
-
-  return (
-    <Button onClick={handleClick} {...props}>
-      {children}
-    </Button>
-  );
-};
-
-ConfettiButtonComponent.displayName = "ConfettiButton";
-
-export const ConfettiButton = ConfettiButtonComponent;
+import type {
+  GlobalOptions as ConfettiGlobalOptions,
+  CreateTypes as ConfettiInstance,
+  Options as ConfettiOptions,
+} from "canvas-confetti";
+import confetti from "canvas-confetti";
+import type { ReactNode } from "react";
+import type React from "react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+
+type Api = {
+  fire: (options?: ConfettiOptions) => void;
+};
+
+type Props = React.ComponentPropsWithRef<"canvas"> & {
+  options?: ConfettiOptions;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  children?: ReactNode;
+};
+
+export type ConfettiRef = Api | null;
+
+const ConfettiContext = createContext<Api>({} as Api);
+
+// Studio CSP blocks canvas-confetti's default blob: worker, so force
+// useWorker: false. Module-scoped so the prop default keeps stable
+// identity across renders (`canvasRef` depends on `globalOptions`).
+const DEFAULT_GLOBAL_OPTIONS: ConfettiGlobalOptions = {
+  resize: true,
+  useWorker: false,
+};
+
+const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
+  const {
+    options,
+    globalOptions = DEFAULT_GLOBAL_OPTIONS,
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
+
+  const canvasRef = useCallback(
+    (node: HTMLCanvasElement) => {
+      if (node !== null) {
+        if (instanceRef.current) return;
+        instanceRef.current = confetti.create(node, {
+          ...globalOptions,
+          resize: true,
+          // Force off after the spread so caller globalOptions can't
+          // re-enable the worker and trip CSP.
+          useWorker: false,
+        });
+      } else {
+        if (instanceRef.current) {
+          instanceRef.current.reset();
+          instanceRef.current = null;
+        }
+      }
+    },
+    [globalOptions],
+  );
+
+  const fire = useCallback(
+    async (opts = {}) => {
+      try {
+        await instanceRef.current?.({ ...options, ...opts });
+      } catch (error) {
+        console.error("Confetti error:", error);
+      }
+    },
+    [options],
+  );
+
+  const api = useMemo(
+    () => ({
+      fire,
+    }),
+    [fire],
+  );
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) {
+      (async () => {
+        try {
+          await fire();
+        } catch (error) {
+          console.error("Confetti effect error:", error);
+        }
+      })();
+    }
+  }, [manualstart, fire]);
+
+  return (
+    <ConfettiContext.Provider value={api}>
+      <canvas ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>
+  );
+});
+
+ConfettiComponent.displayName = "Confetti";
+
+export const Confetti = ConfettiComponent;
diff --git a/studio/frontend/src/features/onboarding/components/splash-screen.tsx b/studio/frontend/src/features/onboarding/components/splash-screen.tsx
index ce828ee7b4..70438a04d8 100644
--- a/studio/frontend/src/features/onboarding/components/splash-screen.tsx
+++ b/studio/frontend/src/features/onboarding/components/splash-screen.tsx
@@ -20,7 +20,7 @@ export function SplashScreen({
         {/* Mascot */}
         <div className="flex justify-center">
           <motion.img
-            src="/Sloth emojis/Sloth loca pc.png"
+            src={`${import.meta.env.BASE_URL}Sloth emojis/Sloth loca pc.png`}
             alt="Sloth mascot"
             className="size-30"
             initial={{ opacity: 0, y: 40, scale: 0.95 }}
diff --git a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
index 2945654d68..415b84a7ed 100644
--- a/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
+++ b/studio/frontend/src/features/onboarding/components/steps/dataset-step.tsx
@@ -151,7 +151,7 @@ export function DatasetStep() {
             className="flex-1"
           >
             <img
-              src="/huggingface.svg"
+              src={`${import.meta.env.BASE_URL}huggingface.svg`}
               alt=""
               className="size-4 invert"
               data-icon="inline-start"
diff --git a/studio/frontend/src/features/onboarding/components/wizard-content.tsx b/studio/frontend/src/features/onboarding/components/wizard-content.tsx
index 2f49dbab1b..6906b87f8f 100644
--- a/studio/frontend/src/features/onboarding/components/wizard-content.tsx
+++ b/studio/frontend/src/features/onboarding/components/wizard-content.tsx
@@ -19,11 +19,11 @@ const STEP_COMPONENTS = {
 } as const;
 
 const STEP_MASCOTS: Record<StepNumber, string> = {
-  1: "/Sloth emojis/large sloth wave.png",
-  2: "/Sloth emojis/sloth magnify final.png",
-  3: "/Sloth emojis/sloth huglove large.png",
-  4: "/Sloth emojis/large sloth glasses.png",
-  5: "/Sloth emojis/large sloth yay.png",
+  1: `${import.meta.env.BASE_URL}Sloth emojis/large sloth wave.png`,
+  2: `${import.meta.env.BASE_URL}Sloth emojis/sloth magnify final.png`,
+  3: `${import.meta.env.BASE_URL}Sloth emojis/sloth huglove large.png`,
+  4: `${import.meta.env.BASE_URL}Sloth emojis/large sloth glasses.png`,
+  5: `${import.meta.env.BASE_URL}Sloth emojis/large sloth yay.png`,
 };
 
 export function WizardContent() {
diff --git a/studio/frontend/src/features/onboarding/components/wizard-sidebar.tsx b/studio/frontend/src/features/onboarding/components/wizard-sidebar.tsx
index d22ac19e51..4637336c6c 100644
--- a/studio/frontend/src/features/onboarding/components/wizard-sidebar.tsx
+++ b/studio/frontend/src/features/onboarding/components/wizard-sidebar.tsx
@@ -18,7 +18,7 @@ export function WizardSidebar({ returnTo }: { returnTo: string }) {
     <aside className="w-full shrink-0 bg-muted/70 p-4 md:w-64 md:p-6">
       <div className="flex items-center gap-3 py-1 md:py-2">
         <img
-          src="https://unsloth.ai/cgi/image/unsloth_sticker_no_shadow_ldN4V4iydw00qSIIWDCUv.png?width=96&quality=80&format=auto"
+          src={`${import.meta.env.BASE_URL}sticker.png`}
           alt="Unsloth"
           className="size-12"
         />
diff --git a/studio/frontend/src/features/tour/lib/confetti-fireworks.ts b/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
index b3e9991c5f..1904436c69 100644
--- a/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
+++ b/studio/frontend/src/features/tour/lib/confetti-fireworks.ts
@@ -3,12 +3,48 @@
 
 "use client";
 
+import type { CreateTypes as ConfettiInstance } from "canvas-confetti";
+
 type FireworksOpts = {
   durationMs?: number;
   intervalMs?: number;
   zIndex?: number;
 };
 
+// CSP blocks canvas-confetti's default blob: worker, so reuse a single
+// overlay canvas via `confetti.create(..., { useWorker: false })`.
+// Caller-provided canvases ignore the per-fire `zIndex`; stacking is
+// driven by `_sharedCanvas.style.zIndex` instead (set in fireConfettiFireworks).
+const DEFAULT_FIREWORKS_Z_INDEX = 99999;
+let _sharedCanvas: HTMLCanvasElement | null = null;
+let _sharedFire: ConfettiInstance | null = null;
+// Cache the init promise so concurrent callers share one import + canvas.
+let _sharedFirePromise: Promise<ConfettiInstance | null> | null = null;
+function getSharedFire(): Promise<ConfettiInstance | null> {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  if (_sharedFire) return Promise.resolve(_sharedFire);
+  if (_sharedFirePromise) return _sharedFirePromise;
+  _sharedFirePromise = (async () => {
+    try {
+      const confetti = (await import("canvas-confetti")).default;
+      const canvas = document.createElement("canvas");
+      canvas.style.cssText =
+        `position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:${DEFAULT_FIREWORKS_Z_INDEX}`;
+      document.body.appendChild(canvas);
+      _sharedCanvas = canvas;
+      _sharedFire = confetti.create(canvas, {
+        resize: true,
+        useWorker: false,
+      });
+      return _sharedFire;
+    } catch (err) {
+      _sharedFirePromise = null;
+      throw err;
+    }
+  })();
+  return _sharedFirePromise;
+}
+
 export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
   try {
     if (typeof window === "undefined") return;
@@ -17,7 +53,11 @@ export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
       window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
     if (prefersReduce) return;
 
-    const confetti = (await import("canvas-confetti")).default;
+    const fire = await getSharedFire();
+    if (!fire || !_sharedCanvas) return;
+
+    // Per-fire zIndex is ignored on a shared canvas; drive stacking via CSS.
+    _sharedCanvas.style.zIndex = String(opts.zIndex ?? DEFAULT_FIREWORKS_Z_INDEX);
 
     const duration = opts.durationMs ?? 1200;
     const intervalMs = opts.intervalMs ?? 240;
@@ -26,7 +66,6 @@ export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
       startVelocity: 28,
       spread: 360,
       ticks: 58,
-      zIndex: opts.zIndex ?? 99999,
       disableForReducedMotion: true,
     } as const;
 
@@ -45,12 +84,12 @@ export async function fireConfettiFireworks(opts: FireworksOpts = {}) {
         Math.floor(36 * (timeLeft / duration)),
       );
 
-      confetti({
+      fire({
         ...defaults,
         particleCount,
         origin: { x: randomInRange(0.12, 0.3), y: Math.random() - 0.2 },
       });
-      confetti({
+      fire({
         ...defaults,
         particleCount,
         origin: { x: randomInRange(0.7, 0.88), y: Math.random() - 0.2 },