diff --git a/src/components/Lottie/Lottie.mdx b/src/components/Lottie/Lottie.mdx
index 292caaf2c..b574640fb 100644
--- a/src/components/Lottie/Lottie.mdx
+++ b/src/components/Lottie/Lottie.mdx
@@ -39,6 +39,8 @@ To use the `Lottie` component, import it and provide the Lottie animation source
 
 **Use `lvh` or `svh` units instead of `vh`** as [these units](https://www.w3.org/TR/css-values-4/#large-viewport-size) are more reliable on mobile and other devices where elements such as the address bar appear and disappear and affect the height.
 
+The component also provides a `width` prop to set the width of the Lottie container. While the `width` prop defaults to `fluid`, it allows any `ContainerWidth` value such as `narrower`, `narrow`, `normal`, `wide`, `wider`, `widest`, `fluid`, or a custom CSS width value like `600px` or `80vw`.
+
 If importing the Lottie file directly into a Svelte component, make sure to append **?url** to the import statement (see example below). This ensures that the file is treated as a URL.
 
 > 💡TIP: Set `showDebugInfo` prop to `true` to display information about the component state.
diff --git a/src/components/Lottie/Lottie.stories.svelte b/src/components/Lottie/Lottie.stories.svelte
index 473d90dec..8ecc7da2d 100644
--- a/src/components/Lottie/Lottie.stories.svelte
+++ b/src/components/Lottie/Lottie.stories.svelte
@@ -40,42 +40,53 @@
   let progress = $state(0);
 </script>
 
-<Story name="Demo">
-  <Lottie src={DemoLottie} autoplay={true} showDebugInfo={true} />
+<Story name="Demo" args={{ autoplay: true, showDebugInfo: true }}>
+  {#snippet children(args)}
+    <Lottie src={DemoLottie} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Segment">
-  <Lottie
-    src={DemoLottie}
-    autoplay
-    loop
-    showDebugInfo
-    segment={[0, 20]}
-    speed={0.5}
-  />
+<Story
+  name="Segment"
+  args={{
+    autoplay: true,
+    loop: true,
+    showDebugInfo: true,
+    segment: [0, 20],
+    speed: 0.5,
+  }}
+>
+  {#snippet children(args)}
+    <Lottie src={DemoLottie} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Marker">
-  <Lottie
-    src={MarkerSample}
-    showDebugInfo
-    autoplay
-    marker="ballerina"
-    loop
-    mode="bounce"
-  />
+<Story
+  name="Marker"
+  args={{
+    autoplay: true,
+    loop: true,
+    showDebugInfo: true,
+    marker: 'ballerina',
+    mode: 'bounce',
+  }}
+>
+  {#snippet children(args)}
+    <Lottie src={MarkerSample} {...args} />
+  {/snippet}
 </Story>
 
-<Story name="Themes">
-  <Lottie
-    src={ThemesSample}
-    showDebugInfo
-    autoplay
-    bind:progress
-    themeId={progress < 0.33 ? 'Water'
-    : progress < 0.66 ? 'air'
-    : 'earth'}
-  />
+<Story name="Themes" args={{ autoplay: true, showDebugInfo: true }}>
+  {#snippet children(args)}
+    <Lottie
+      src={ThemesSample}
+      bind:progress
+      themeId={progress < 0.33 ? 'Water'
+      : progress < 0.66 ? 'air'
+      : 'earth'}
+      {...args}
+    />
+  {/snippet}
 </Story>
 
 <Story name="Using with ScrollerBase" exportName="ScrollerBase">
diff --git a/src/components/Lottie/Lottie.svelte b/src/components/Lottie/Lottie.svelte
index a49c870f0..f3cae789f 100644
--- a/src/components/Lottie/Lottie.svelte
+++ b/src/components/Lottie/Lottie.svelte
@@ -11,12 +11,12 @@
     isReverseMode,
     createRenderConfig,
     isNullish,
+    isContainerWidth,
   } from './ts/utils';
   import { Tween } from 'svelte/motion';
 
   // Components
   import Debug from './Debug.svelte';
-  import WASM from './lottie/dotlottie-player.wasm?url';
 
   // Types
   import type { Props } from './ts/types';
@@ -49,7 +49,8 @@
     layout = { fit: 'contain', align: [0.5, 0.5] },
     animationId = '',
     lottiePlayer = $bindable(undefined),
-    height = '100lvh',
+    width = 'fluid',
+    height = 'auto',
     showDebugInfo = false,
     lottieState = createLottieState(),
     progress = $bindable(0),
@@ -157,8 +158,6 @@
       themeId,
     });
 
-    DotLottie.setWasmUrl(WASM);
-
     lottiePlayer.addEventListener('load', onLoadEvent);
     lottiePlayer.addEventListener('frame', onRenderEvent);
     lottiePlayer.addEventListener('complete', onCompleteEvent);
@@ -396,7 +395,13 @@
   });
 </script>
 
-<div class="lottie-block">
+<div
+  class="lottie-block"
+  class:debug-border={showDebugInfo}
+  style="max-width: {isContainerWidth(width) ?
+    `var(--${width}-column-width)`
+  : width};"
+>
   {#if showDebugInfo && lottiePlayer}
     <Debug componentState={lottieState} />
   {/if}
@@ -420,15 +425,22 @@
   :global(.lottie-block) {
     position: relative;
     height: 100%;
+    width: 100%;
+    margin: 0 auto;
 
     .lottie-container {
       width: 100%;
       height: 100%;
     }
+
     canvas {
       width: 100%;
       height: 100%;
       display: block;
     }
   }
+
+  .debug-border {
+    border: 1px dashed lightgray;
+  }
 </style>
diff --git a/src/components/Lottie/demo/withScrollerBase.svelte b/src/components/Lottie/demo/withScrollerBase.svelte
index c878921ac..5b792e890 100644
--- a/src/components/Lottie/demo/withScrollerBase.svelte
+++ b/src/components/Lottie/demo/withScrollerBase.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import BodyText from '../../BodyText/BodyText.svelte';
   import ScrollerBase from '../../ScrollerBase/ScrollerBase.svelte';
   import Lottie from '../Lottie.svelte';
   import LottieSample from '../lottie/themesLottie.zip?url';
@@ -11,8 +12,14 @@
   let top = $state(0);
   let threshold = $state(0.5);
   let bottom = $state(1);
+
+  const dummyText = `Greetings, earthling. This placeholder text is running in debug mode. All bugs have been upgraded to features, and all features downgraded to TODOs. If you find yourself reading this, you are now the sysadmin of your own destiny. 
+  
+  Remember the network is down because someone tripped over the Ethernet cable.  Keep calm and RTFM before summoning the wizard. In case of panic, type 'kill -9' and hope for the best. End of line. Insert witty comment here.`;
 </script>
 
+<BodyText text={dummyText} />
+
 <ScrollerBase
   {top}
   {threshold}
@@ -35,6 +42,8 @@
   {/snippet}
 </ScrollerBase>
 
+<BodyText text={dummyText} />
+
 <style lang="scss">
   @use '../../../scss/mixins' as mixins;
 
@@ -42,8 +51,12 @@
     height: 100lvh;
     width: 50%;
     margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     h3 {
+      width: 100%;
       background-color: antiquewhite;
       text-align: center;
     }
diff --git a/src/components/Lottie/lottie/dotlottie-player.wasm b/src/components/Lottie/lottie/dotlottie-player.wasm
deleted file mode 100644
index 7195553bc..000000000
Binary files a/src/components/Lottie/lottie/dotlottie-player.wasm and /dev/null differ
diff --git a/src/components/Lottie/ts/types.ts b/src/components/Lottie/ts/types.ts
index c8cdc2ee2..f4b088fbe 100644
--- a/src/components/Lottie/ts/types.ts
+++ b/src/components/Lottie/ts/types.ts
@@ -5,6 +5,7 @@ import {
   type DotLottie as DotLottieType,
 } from '@lottiefiles/dotlottie-web';
 import { type LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '../../@types/global';
 
 type DotlottieProps = {
   autoplay?: Config['autoplay'];
@@ -33,6 +34,7 @@ export type Props = DotlottieProps & {
   // Additional properties can be added here if needed
   lottiePlayer?: DotLottieType | undefined;
   showDebugInfo?: boolean;
+  width?: string | ContainerWidth;
   height?: string;
   lottieState?: LottieState;
   progress?: number;
diff --git a/src/components/Lottie/ts/utils.ts b/src/components/Lottie/ts/utils.ts
index afdb7b3ba..0c011fc5b 100644
--- a/src/components/Lottie/ts/utils.ts
+++ b/src/components/Lottie/ts/utils.ts
@@ -1,5 +1,6 @@
 import type { DotLottie } from '@lottiefiles/dotlottie-web';
 import type { LottieState } from './lottieState.svelte';
+import type { ContainerWidth } from '$lib/components/@types/global';
 
 function constrain(n: number, low: number, high: number) {
   return Math.max(Math.min(n, high), low);
@@ -109,3 +110,18 @@ export function createRenderConfig() {
 export function isNullish(value: unknown): boolean {
   return value === null || value === undefined || value === '';
 }
+
+/**
+ * Checks if a value is of type ContainerWidth
+ */
+export function isContainerWidth(string: any): string is ContainerWidth {
+  return (
+    string === 'narrower' ||
+    string === 'narrow' ||
+    string === 'normal' ||
+    string === 'wide' ||
+    string === 'wider' ||
+    string === 'widest' ||
+    string === 'fluid'
+  );
+}