diff --git a/app/styles/halloween-season.css b/app/styles/halloween-season.css
index fb0c82dce9..2ed9f8512a 100644
--- a/app/styles/halloween-season.css
+++ b/app/styles/halloween-season.css
@@ -193,6 +193,27 @@ html[data-season="halloween"] .arcade-footer {
   animation-delay: -4.5s;
 }
 
+.halloween-lottie-ghost {
+  position: absolute;
+  top: clamp(170px, 23vh, 250px);
+  left: clamp(10px, 2.2vw, 34px);
+  width: clamp(72px, 8vw, 118px);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  opacity: 0.26;
+  filter: drop-shadow(0 10px 26px rgba(139, 92, 246, 0.18));
+}
+
+.halloween-trick-treat-art {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+  filter: drop-shadow(0 10px 22px rgba(255, 138, 31, 0.16));
+}
+
+
 .halloween-fog {
   position: absolute;
   left: -20vw;
@@ -481,6 +502,13 @@ html[data-season="halloween"] .tier-help.is-live {
     font-size: 1.45rem;
     opacity: 0.4;
   }
+
+  .halloween-lottie-ghost {
+    top: 132px;
+    left: 4px;
+    width: 58px;
+    opacity: 0.22;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -505,3 +533,9 @@ html[data-season="halloween"] .tier-help.is-live {
     opacity: 0.38;
   }
 }
+
+
+/* Keep the crescent moon as a dark-mode Halloween accent only. */
+html.light[data-season="halloween"] .halloween-moon {
+  display: none;
+}
diff --git a/components/seasonal/halloween-season.tsx b/components/seasonal/halloween-season.tsx
index 6acc303fbf..57e541f03f 100644
--- a/components/seasonal/halloween-season.tsx
+++ b/components/seasonal/halloween-season.tsx
@@ -15,6 +15,23 @@ function isWidgetPath(pathname: string) {
   return /^\/(?:[a-z]{2}(?:-[a-z]{2})?\/)?widget\/?$/i.test(pathname)
 }
 
+const TRICK_TREAT_PREVIEW =
+  "https://assets-v2.lottiefiles.com/a/8105cc26-8f6a-11ef-bbc4-57c0778cff41/NL40K2th2v.png"
+
+function HalloweenTrickTreatArtwork() {
+  return (
+    <div className="halloween-lottie-ghost" aria-hidden="true">
+      <img
+        className="halloween-trick-treat-art"
+        src={TRICK_TREAT_PREVIEW}
+        alt=""
+        loading="lazy"
+        decoding="async"
+      />
+    </div>
+  )
+}
+
 export default function HalloweenSeason() {
   const [enabled, setEnabled] = useState(false)
 
@@ -57,8 +74,7 @@ export default function HalloweenSeason() {
       <div className="halloween-fog halloween-fog-one" />
       <div className="halloween-fog halloween-fog-two" />
       <span className="halloween-moon"><span>☾</span></span>
-      <span className="halloween-ghost halloween-ghost-left">👻</span>
-      <span className="halloween-ghost halloween-ghost-right">👻</span>
+      <HalloweenTrickTreatArtwork />
       <span className="halloween-bat halloween-bat-one">🦇</span>
       <span className="halloween-bat halloween-bat-two">🦇</span>
       <span className="halloween-bat halloween-bat-three">🦇</span>