diff --git a/components/pet/parallax-room-background.tsx b/components/pet/parallax-room-background.tsx
index 10b59b9..e1e83ba 100644
--- a/components/pet/parallax-room-background.tsx
+++ b/components/pet/parallax-room-background.tsx
@@ -14,8 +14,6 @@ type ParallaxRoomBackgroundProps = {
   interactive?: boolean;
 };
 
-const SCENE_IMAGE_PARALLAX_SPEED = 0.15;
-
 export function ParallaxRoomBackground({
   roomId,
   className,
@@ -24,9 +22,10 @@ export function ParallaxRoomBackground({
   const containerRef = useRef<HTMLDivElement>(null);
   const [offset, setOffset] = useState({ x: 0, y: 0 });
   const room = getRoomBackground(roomId);
+  const usesSceneImage = Boolean(room.sceneImage);
 
   useEffect(() => {
-    if (!interactive) {
+    if (!interactive || usesSceneImage) {
       return;
     }
 
@@ -46,24 +45,24 @@ export function ParallaxRoomBackground({
     return () => {
       container.removeEventListener("pointermove", handlePointerMove);
     };
-  }, [interactive]);
+  }, [interactive, usesSceneImage]);
 
   if (room.sceneImage) {
     return (
       <div
         ref={containerRef}
-        className={cn("absolute inset-0 z-0 overflow-hidden", className)}
+        className={cn(
+          "absolute inset-0 z-0 overflow-hidden",
+          room.previewClassName,
+          className,
+        )}
       >
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={room.sceneImage}
           alt=""
           aria-hidden
-          className="absolute inset-[-8%] size-[116%] max-w-none object-cover image-pixelated"
-          style={{
-            transform: `translate3d(${offset.x * SCENE_IMAGE_PARALLAX_SPEED * 10}px, ${offset.y * SCENE_IMAGE_PARALLAX_SPEED * 8}px, 0)`,
-            transition: "transform 0.15s steps(4)",
-          }}
+          className="absolute inset-0 size-full object-cover image-pixelated"
         />
       </div>
     );
diff --git a/public/shop/room-forest.svg b/public/shop/room-forest.svg
index 26a2e8c..af6b333 100644
--- a/public/shop/room-forest.svg
+++ b/public/shop/room-forest.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 96" width="128" height="96">
   <defs>
     <linearGradient id="forest-sky" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#064e3b"/>
@@ -6,9 +6,40 @@
       <stop offset="100%" stop-color="#052e16"/>
     </linearGradient>
   </defs>
-  <rect width="48" height="48" fill="url(#forest-sky)"/>
-  <rect x="0" y="34" width="48" height="14" fill="#166534"/>
-  <rect x="6" y="18" width="8" height="20" fill="#14532d"/>
-  <rect x="20" y="14" width="10" height="24" fill="#15803d"/>
-  <rect x="34" y="20" width="8" height="18" fill="#14532d"/>
+  <rect width="128" height="96" fill="url(#forest-sky)"/>
+  <!-- mist -->
+  <rect x="0" y="48" width="128" height="8" fill="#86efac" opacity="0.12"/>
+  <rect x="0" y="56" width="128" height="6" fill="#bbf7d0" opacity="0.08"/>
+  <!-- distant trees -->
+  <rect x="4" y="58" width="3" height="14" fill="#14532d"/>
+  <rect x="1" y="52" width="9" height="4" fill="#166534"/>
+  <rect x="2" y="48" width="7" height="4" fill="#15803d"/>
+  <rect x="22" y="54" width="3" height="18" fill="#14532d"/>
+  <rect x="18" y="48" width="11" height="4" fill="#166534"/>
+  <rect x="20" y="44" width="7" height="4" fill="#15803d"/>
+  <rect x="108" y="56" width="3" height="16" fill="#14532d"/>
+  <rect x="104" y="50" width="11" height="4" fill="#166534"/>
+  <rect x="106" y="46" width="7" height="4" fill="#15803d"/>
+  <!-- mid trees -->
+  <rect x="36" y="50" width="4" height="22" fill="#14532d"/>
+  <rect x="30" y="42" width="16" height="5" fill="#166534"/>
+  <rect x="32" y="36" width="12" height="5" fill="#15803d"/>
+  <rect x="34" y="30" width="8" height="5" fill="#22c55e" opacity="0.85"/>
+  <rect x="68" y="46" width="5" height="26" fill="#14532d"/>
+  <rect x="62" y="38" width="17" height="5" fill="#166534"/>
+  <rect x="64" y="32" width="13" height="5" fill="#15803d"/>
+  <rect x="66" y="26" width="9" height="5" fill="#22c55e" opacity="0.85"/>
+  <rect x="66" y="20" width="5" height="5" fill="#4ade80" opacity="0.7"/>
+  <!-- foreground tree -->
+  <rect x="88" y="52" width="5" height="20" fill="#14532d"/>
+  <rect x="82" y="44" width="17" height="5" fill="#166534"/>
+  <rect x="84" y="38" width="13" height="5" fill="#15803d"/>
+  <rect x="86" y="32" width="9" height="5" fill="#22c55e"/>
+  <rect x="88" y="26" width="5" height="5" fill="#4ade80"/>
+  <!-- ground -->
+  <rect x="0" y="72" width="128" height="24" fill="#166534"/>
+  <rect x="0" y="72" width="128" height="3" fill="#22c55e" opacity="0.35"/>
+  <rect x="8" y="78" width="6" height="2" fill="#14532d" opacity="0.5"/>
+  <rect x="42" y="80" width="8" height="2" fill="#14532d" opacity="0.5"/>
+  <rect x="96" y="77" width="5" height="2" fill="#14532d" opacity="0.5"/>
 </svg>
diff --git a/public/shop/room-night.svg b/public/shop/room-night.svg
index 74d0f30..8f209e4 100644
--- a/public/shop/room-night.svg
+++ b/public/shop/room-night.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 96" width="128" height="96">
   <defs>
     <linearGradient id="night-sky" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0%" stop-color="#1e1b4b"/>
@@ -6,10 +6,31 @@
       <stop offset="100%" stop-color="#0f172a"/>
     </linearGradient>
   </defs>
-  <rect width="48" height="48" fill="url(#night-sky)"/>
-  <circle cx="10" cy="12" r="1" fill="#fef9c3"/>
-  <circle cx="22" cy="8" r="1" fill="#fef9c3"/>
-  <circle cx="34" cy="14" r="1" fill="#fef9c3"/>
-  <circle cx="38" cy="10" r="1.5" fill="#fef08a"/>
-  <circle cx="36" cy="11" r="4" fill="#fef9c3" opacity="0.9"/>
+  <rect width="128" height="96" fill="url(#night-sky)"/>
+  <!-- stars -->
+  <rect x="12" y="10" width="2" height="2" fill="#fef9c3"/>
+  <rect x="28" y="6" width="2" height="2" fill="#fef9c3"/>
+  <rect x="44" y="14" width="2" height="2" fill="#fef9c3"/>
+  <rect x="58" y="8" width="2" height="2" fill="#fef9c3"/>
+  <rect x="72" y="18" width="2" height="2" fill="#fef9c3"/>
+  <rect x="86" y="12" width="2" height="2" fill="#fef9c3"/>
+  <rect x="102" y="6" width="2" height="2" fill="#fef9c3"/>
+  <rect x="18" y="24" width="2" height="2" fill="#fef08a"/>
+  <rect x="52" y="22" width="2" height="2" fill="#fef9c3"/>
+  <rect x="94" y="26" width="2" height="2" fill="#fef9c3"/>
+  <rect x="110" y="20" width="2" height="2" fill="#fef08a"/>
+  <rect x="36" y="32" width="2" height="2" fill="#fef9c3" opacity="0.8"/>
+  <rect x="68" y="30" width="2" height="2" fill="#fef9c3" opacity="0.8"/>
+  <!-- moon glow -->
+  <circle cx="98" cy="22" r="14" fill="#fef9c3" opacity="0.15"/>
+  <circle cx="98" cy="22" r="10" fill="#fef9c3" opacity="0.25"/>
+  <circle cx="98" cy="22" r="7" fill="#fef9c3" opacity="0.95"/>
+  <circle cx="95" cy="20" r="5" fill="#fef08a" opacity="0.5"/>
+  <!-- distant hills -->
+  <rect x="0" y="68" width="128" height="28" fill="#0f172a" opacity="0.55"/>
+  <rect x="0" y="72" width="40" height="24" fill="#1e1b4b" opacity="0.7"/>
+  <rect x="36" y="76" width="48" height="20" fill="#312e81" opacity="0.5"/>
+  <rect x="80" y="70" width="48" height="26" fill="#1e1b4b" opacity="0.65"/>
+  <!-- ground -->
+  <rect x="0" y="84" width="128" height="12" fill="#0f172a"/>
 </svg>