diff --git a/app/components/AppBackground.vue b/app/components/AppBackground.vue
index abe788f..d37af62 100644
--- a/app/components/AppBackground.vue
+++ b/app/components/AppBackground.vue
@@ -1,28 +1,35 @@
 <script lang="ts" setup>
-import { navColors, NavColor } from '~~/types'
+import { navColors, type NavColor } from '~~/types'
 
 const route = useRoute()
 const colorMode = useColorMode()
 
-const colors = computed(() => {
+const colors = computed((): NavColor[] => {
   const navColor = navColors.find(nav => route.name === nav.name)
-  if (navColor?.colors) return navColor.colors as Array<NavColor>
+  if (navColor?.colors) return navColor.colors
 
   const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
-  return [{ color: fallbackColor, x: 0, y: 0, radius: 0 }, { color: fallbackColor, x: 0, y: 0, radius: 0 }] as Array<NavColor>
+  const fallbackGradient = { color: fallbackColor, x: 0, y: 0, radius: 0 }
+  return [fallbackGradient, fallbackGradient]
 })
 
-const backgroundStyle = computed(() => ({
-  backgroundImage: colors.value
-    .map(c => `radial-gradient(circle ${c.radius}px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
-    .join(', '),
-  backgroundSize: '100% 100%, 100% 100%'
-}))
+const backgroundStyle = computed(() => {
+  const gradients = colors.value
+    .map(({ color, radius, x, y }) => 
+      `radial-gradient(circle ${radius}px at ${x}% ${y}%, ${color}4D, transparent)`
+    )
+    .join(', ')
+  
+  return {
+    backgroundImage: gradients,
+    backgroundSize: Array(colors.value.length).fill('100% 100%').join(', ')
+  }
+})
 </script>
 
 <template>
-    <div
-      class="fixed  inset-0 z-0"
-      :style="backgroundStyle"
-    />
+  <div
+    class="fixed inset-0 z-0"
+    :style="backgroundStyle"
+  />
 </template>