diff --git a/addon/components/o-s-s/smart/blob.hbs b/addon/components/o-s-s/smart/blob.hbs
index 64df79d46..2c1a0e027 100644
--- a/addon/components/o-s-s/smart/blob.hbs
+++ b/addon/components/o-s-s/smart/blob.hbs
@@ -11,4 +11,4 @@
       class={{this.inactiveClass}}
     />
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/addon/components/o-s-s/smart/blob.stories.js b/addon/components/o-s-s/smart/blob.stories.js
index d15953e2e..b75797413 100644
--- a/addon/components/o-s-s/smart/blob.stories.js
+++ b/addon/components/o-s-s/smart/blob.stories.js
@@ -17,13 +17,13 @@ export default {
     size: {
       description: 'Sets the blob size',
       table: {
-        type: { summary: 'sm | md | xl' },
+        type: { summary: 'xs | sm | md | xl' },
         defaultValue: { summary: 'md' }
       },
       control: {
         type: 'select'
       },
-      options: ['sm', 'md', 'xl']
+      options: ['xs', 'sm', 'md', 'xl']
     }
   },
   parameters: {
diff --git a/addon/components/o-s-s/smart/blob.ts b/addon/components/o-s-s/smart/blob.ts
index 1f2b70eb7..4233b8a61 100644
--- a/addon/components/o-s-s/smart/blob.ts
+++ b/addon/components/o-s-s/smart/blob.ts
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 
-type Size = 'sm' | 'md' | 'xl';
+type Size = 'xs' | 'sm' | 'md' | 'xl';
 
 interface SmartBlobArgs {
   loading?: boolean;
diff --git a/app/styles/atoms/smart/blob.less b/app/styles/atoms/smart/blob.less
index a46facbf3..1bf9a8eb0 100644
--- a/app/styles/atoms/smart/blob.less
+++ b/app/styles/atoms/smart/blob.less
@@ -5,6 +5,16 @@
   border-radius: 100%;
   transition: all 1s ease-in-out;
 
+  &--xs {
+    height: 18px;
+    width: 18px;
+
+    .smart-blob {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
   &--sm {
     height: 22px;
     width: 22px;
diff --git a/tests/dummy/app/templates/smart.hbs b/tests/dummy/app/templates/smart.hbs
index 2f9dfc833..01af32b5a 100644
--- a/tests/dummy/app/templates/smart.hbs
+++ b/tests/dummy/app/templates/smart.hbs
@@ -13,9 +13,11 @@
       Smart blob
     </div>
     <div class="fx-row fx-gap-px-24 fx-xalign-center">
-      <OSS::Smart::Blob @loading={{false}} @size="sm" />
+      <OSS::Smart::Blob @loading={{this.loading}} @size="xs" />
+      <OSS::Smart::Blob @loading={{this.loading}} @size="sm" />
       <OSS::Smart::Blob @loading={{this.loading}} />
-      <OSS::Smart::Blob @loading={{true}} @size="xl" />
+      <OSS::Smart::Blob @loading={{this.loading}} @size="xl" />
+      <OSS::Button @label="Toggle loading" {{on "click" this.toggleLoading}} />
     </div>
   </div>
 
diff --git a/tests/integration/components/o-s-s/smart/blob-test.ts b/tests/integration/components/o-s-s/smart/blob-test.ts
index ccd72f6f4..c16b895dc 100644
--- a/tests/integration/components/o-s-s/smart/blob-test.ts
+++ b/tests/integration/components/o-s-s/smart/blob-test.ts
@@ -40,7 +40,7 @@ module('Integration | Component | o-s-s/smart/blob', function (hooks) {
   });
 
   module('@size', function () {
-    ['sm', 'xl', 'md'].forEach((size) => {
+    ['xs', 'sm', 'md', 'xl'].forEach((size) => {
       test(`it applies the correct size class for @size='${size}'`, async function (assert) {
         this.set('size', size);
         await render(hbs`<OSS::Smart::Blob @size={{this.size}} />`);