diff --git a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
index 5ce7031a..454ca513 100644
--- a/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottie.stories.svelte
@@ -7,6 +7,7 @@
 
   import MarkerSample from './data/markerSample.lottie?url';
   import ForegroundSample from './data/foregroundSample.lottie?url';
+  import ThemesSample from './data/themesLottie.lottie?url';
   import WithScrollerBase from './demo/withScrollerBase.svelte';
 
   const { Story } = defineMeta({
@@ -56,7 +57,7 @@
 
 <Story name="Themes">
   <ScrollerLottie
-    src={'https://lottie.host/9a5a6605-fc90-4935-8d10-9df4c83902ff/PFUKH53LJk.lottie'}
+    src={ThemesSample}
     showDebugInfo
     autoplay
     bind:progress
diff --git a/src/components/ScrollerLottie/ScrollerLottieForeground.svelte b/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
index ba4c9d09..1f777e85 100644
--- a/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
+++ b/src/components/ScrollerLottie/ScrollerLottieForeground.svelte
@@ -38,7 +38,7 @@
     Foreground,
   }: ForegroundProps = $props();
 
-  let componentState: LottieState | null = getContext('lottieState');
+  let componentState: LottieState | null = $state(getContext('lottieState'));
 
   onDestroy(() => {
     componentState = null;
diff --git a/src/components/ScrollerLottie/data/themesLottie.lottie b/src/components/ScrollerLottie/data/themesLottie.lottie
new file mode 100644
index 00000000..eed4febc
Binary files /dev/null and b/src/components/ScrollerLottie/data/themesLottie.lottie differ
diff --git a/src/components/ScrollerLottie/demo/withScrollerBase.svelte b/src/components/ScrollerLottie/demo/withScrollerBase.svelte
index 0bb35c8a..91002a8f 100644
--- a/src/components/ScrollerLottie/demo/withScrollerBase.svelte
+++ b/src/components/ScrollerLottie/demo/withScrollerBase.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import Block from '../../Block/Block.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import ScrollerLottie from '../ScrollerLottie.svelte';
-  import LottieSample from '../data/markerSample.lottie?url';
+  import LottieSample from '../data/themesLottie.lottie?url';
 
   // Optional: Bind your own variables to use them in your code.
   let count = $state(1);
@@ -27,11 +26,7 @@
   {#snippet backgroundSnippet()}
     <!-- Add custom background HTML or component -->
     <div class="lottie-container">
-      <ScrollerLottie
-        src={'https://lottie.host/9a5a6605-fc90-4935-8d10-9df4c83902ff/PFUKH53LJk.lottie'}
-        showDebugInfo
-        {progress}
-      />
+      <ScrollerLottie src={LottieSample} showDebugInfo {progress} />
     </div>
   {/snippet}
   {#snippet foregroundSnippet()}