diff --git a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss
index 12cf26de..bb5a2795 100644
--- a/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss
+++ b/packages/ui-stencil/src/components/internal/orama-dots-loader/orama-dots-loader.scss
@@ -2,12 +2,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: var(--spacing-l, $spacing-l) 0;
 }
 
 .dot {
-  width: pxToRem(6);
-  height: pxToRem(6);
-  margin: 0 var(--spacing-xs, $spacing-xs);
+  width: pxToRem(4);
+  height: pxToRem(4);
+  margin: 0 var(--spacing-2xs, $spacing-2xs);
   background-color: var(--text-color-primary, text-color(primary));
   border-radius: 50%;
   animation: dot-slide-up 1.4s infinite both;