diff --git a/apps/static/src/assets/preloader.css b/apps/static/src/assets/preloader.css
index 7abb6fa99..fae2f38fd 100644
--- a/apps/static/src/assets/preloader.css
+++ b/apps/static/src/assets/preloader.css
@@ -26,27 +26,27 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:first-child {
-  animation-delay: -50ms;
+  animation-delay: -0.1s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(2) {
-  animation-delay: 0.2s;
+  animation-delay: 0.3s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(3) {
-  animation-delay: -0.6s;
+  animation-delay: -0.45s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(4) {
-  animation-delay: 0.4s;
+  animation-delay: 1s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(5) {
-  animation-delay: -0.5s;
+  animation-delay: -0.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(6) {
-  animation-delay: 0.3s;
+  animation-delay: 0.9s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(7) {
@@ -54,11 +54,11 @@
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(8) {
-  animation-delay: 2s;
+  animation-delay: 1.6s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(9) {
-  animation-delay: -0.9s;
+  animation-delay: -0.45s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(10) {
@@ -66,7 +66,7 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(11) {
-  animation-delay: -0.55s;
+  animation-delay: -2.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(12) {
@@ -74,21 +74,57 @@
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(13) {
-  animation-delay: -0.65s;
+  animation-delay: -1.95s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(14) {
-  animation-delay: 0.7s;
+  animation-delay: 2.8s;
   animation-direction: reverse;
 }
 .pre-loader .loader-item:nth-child(15) {
-  animation-delay: -3.75s;
+  animation-delay: -0.75s;
   animation-direction: alternate;
 }
 .pre-loader .loader-item:nth-child(16) {
-  animation-delay: 1.6s;
+  animation-delay: 4s;
   animation-direction: reverse;
 }
+.pre-loader .loader-item:nth-child(17) {
+  animation-delay: -0.85s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(18) {
+  animation-delay: 1.8s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(19) {
+  animation-delay: -1.9s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(20) {
+  animation-delay: 5s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(21) {
+  animation-delay: -5.25s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(22) {
+  animation-delay: 4.4s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(23) {
+  animation-delay: -5.75s;
+  animation-direction: alternate;
+}
+.pre-loader .loader-item:nth-child(24) {
+  animation-delay: 4.8s;
+  animation-direction: reverse;
+}
+.pre-loader .loader-item:nth-child(25) {
+  animation-delay: -5s;
+  animation-direction: alternate;
+}
 .pre-loader .loader-item {
   animation: flickering 0.4s linear infinite alternate;
 }
diff --git a/apps/static/src/preloader.scss b/apps/static/src/preloader.scss
new file mode 100644
index 000000000..b19dc6c59
--- /dev/null
+++ b/apps/static/src/preloader.scss
@@ -0,0 +1,58 @@
+.pre-loader {
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+  .loader-item {
+    width: 10px;
+    height: 10px;
+    background: black;
+  }
+  .pre-loader-center {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .pre-loader-wrapper {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @for $i from 0 through 25 {
+    .loader-item:nth-child(#{$i}) {
+      @if $i % 2 == 0 {
+        animation-delay: #{$i * 50 * random(5)}ms;
+        animation-direction: reverse;
+      } @else {
+        animation-delay: #{$i * -50 * random(5)}ms;
+        animation-direction: alternate;
+      }
+    }
+  }
+  .loader-item {
+    animation: flickering 0.4s linear alternate infinite;
+  }
+  @keyframes flickering {
+    0% {
+      opacity: 1;
+    }
+    25% {
+      opacity: 1;
+    }
+    26% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+html.dark {
+  .pre-loader {
+    .loader-item {
+      background: white;
+    }
+  }
+}
diff --git a/libs/ui-toolkit/src/components/loader/loader.module.scss b/libs/ui-toolkit/src/components/loader/loader.module.scss
index 3eb793b8f..61523e50d 100644
--- a/libs/ui-toolkit/src/components/loader/loader.module.scss
+++ b/libs/ui-toolkit/src/components/loader/loader.module.scss
@@ -1,4 +1,4 @@
-@for $i from 0 through 16 {
+@for $i from 0 through 25 {
   .loader-item:nth-child(#{$i}) {
     @if $i % 2 == 0 {
       animation-delay: #{$i * 50 * random(5)}ms;
diff --git a/libs/ui-toolkit/src/components/loader/loader.tsx b/libs/ui-toolkit/src/components/loader/loader.tsx
index 475940d5b..045e1338c 100644
--- a/libs/ui-toolkit/src/components/loader/loader.tsx
+++ b/libs/ui-toolkit/src/components/loader/loader.tsx
@@ -25,7 +25,7 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
   });
   const wrapperClasses =
     size === 'small' ? 'w-[15px] h-[15px]' : 'w-[50px] h-[50px]';
-  const items = size === 'small' ? 9 : 16;
+  const items = size === 'small' ? 9 : 25;
 
   const generate = useMemo(() => pseudoRandom(1), []);