diff --git a/packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue b/packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
index 32ec793..100d380 100644
--- a/packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
+++ b/packages/ui/src/renderer/src/features/FlyingCompanyLogoList/index.vue
@@ -17,25 +17,29 @@ const colCount = 6
 const logoQueue: HTMLImageElement[] = []
 const imageElContainer = ref<HTMLElement>()
 onMounted(async () => {
-  const res = (await Promise.all(
-    [...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it())
-  )).map((url) => {
+  const res = (
+    await Promise.all(
+      [...Object.values(import.meta.glob('./resources/*.png', { as: 'url' }))].map((it) => it())
+    )
+  ).map((url) => {
     const img = new Image()
     img.src = url
     img.onanimationiteration = () => {
       const newImg = logoQueue.shift()!
       newImg.classList.add('dot')
-      Object.assign(newImg.style,{
+      Object.assign(newImg.style, {
         position: 'relative',
-        left: (-40 * Math.random()) + 'px',
-        bottom: (-40 * Math.random()) + 'px'
+        left: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
+        bottom: (Math.random() > 0.5 ? -1 : 1) * (100 * Math.random()) + 'px',
+        transform: `translateZ(${-5000}px)`
       })
       img.replaceWith(newImg)
       img.classList.remove('dot')
-      Object.assign(img.style,{
+      Object.assign(img.style, {
         position: '',
         left: '',
-        bottom: ''
+        bottom: '',
+        transform: ``
       })
       logoQueue.push(img as HTMLImageElement)
     }
@@ -47,10 +51,11 @@ onMounted(async () => {
   for (let i = 0; i < rowCount * colCount; i++) {
     const img = logoQueue.shift()!
 
-    Object.assign(img.style,{
+    Object.assign(img.style, {
       position: 'relative',
-      left: (-40 * Math.random()) + 'px',
-      bottom: (-40 * Math.random()) + 'px'
+      left: -40 * Math.random() + 'px',
+      bottom: -40 * Math.random() + 'px',
+      transform: `translateZ(${-5000}px)`
     })
 
     img.classList.add('dot')
@@ -74,14 +79,10 @@ onMounted(async () => {
 <style lang="scss">
 @keyframes fly-in {
   0% {
-    transform: translateZ(-5000px);
     opacity: 0;
   }
   70% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 0.5;
+    opacity: 0.8;
   }
   100% {
     transform: translateZ(0);
@@ -91,34 +92,25 @@ onMounted(async () => {
 .flying-company-logo-list-container {
   .dot {
     display: block;
-    --dot-run-duration: 3s;
-    animation: fly-in var(--dot-run-duration) linear infinite;
+    --dot-run-duration: 2.5s;
+    animation: fly-in var(--dot-run-duration) ease-in-out infinite;
     transform-origin: center;
     mix-blend-mode: darken;
     width: 200px;
   }
   .dot:nth-child(2n) {
-    animation-delay: calc(0 * var(--dot-run-duration));
+    animation-delay: calc(-0.35 * var(--dot-run-duration));
   }
   .dot:nth-child(2n + 1) {
-    animation-delay: calc(-0.1 * var(--dot-run-duration));
+    animation-delay: calc(-0.15 * var(--dot-run-duration));
   }
   .dot:nth-child(3n + 1) {
-    animation-delay: calc(-0.2 * var(--dot-run-duration));
+    animation-delay: calc(-0.22 * var(--dot-run-duration));
   }
   .dot:nth-child(5n + 1) {
-    animation-delay: calc(-0.6 * var(--dot-run-duration));
+    animation-delay: calc(-0.05 * var(--dot-run-duration));
   }
   .dot:nth-child(7n + 1) {
-    animation-delay: calc(-0.8 * var(--dot-run-duration));
-  }
-  .dot:nth-child(11n + 1) {
-    animation-delay: calc(-0.5 * var(--dot-run-duration));
-  }
-  .dot:nth-child(13n + 1) {
-    animation-delay: calc(0 * var(--dot-run-duration));
-  }
-  .dot:nth-child(17n + 1) {
     animation-delay: calc(-0.1 * var(--dot-run-duration));
   }
 }