diff --git a/packages/alto/src/_dev/App.vue b/packages/alto/src/_dev/App.vue
index d4057ffc..2aeb52ab 100644
--- a/packages/alto/src/_dev/App.vue
+++ b/packages/alto/src/_dev/App.vue
@@ -1,34 +1,14 @@
 <script setup lang="ts">
 import 'uno.css';
 import '../assets/main.css';
-import { ref } from 'vue';
-import type { TagItemValue } from '../types';
-import { ColorInput, ColorPicker, Tag } from '~/components';
-
-const colorv3 = ref('#A8B1FFFF');
-const color = ref('#A8B1FFFF');
-
-function updateColor(newColor: string) {
-  color.value = newColor;
-}
-
-const preferredLanguages = ref<TagItemValue[]>([
-  { label: 'Pink', hexColor: '#F49FBC' },
-]);
+import { Loader } from '~/components';
 </script>
 
 <template>
   <div class="container">
-    <Tag
-      v-model="preferredLanguages"
-      placeholder="Your favorite colors"
-      type="color"
-    />
-    <ColorInput :model-value="color" @update:modelValue="updateColor" />
-  </div>
-  <div class="container">
-    <ColorPicker :preserve-transparency="false" :model-value="colorv3" />
-    <ColorPicker :model-value="colorv3" />
+    <Loader variant="spinner" label="Loading..." />
+    <Loader variant="brand" />
+    <Loader variant="bar" />
   </div>
 </template>
 
@@ -36,9 +16,10 @@ const preferredLanguages = ref<TagItemValue[]>([
 .container {
   display: flex;
   flex-direction: row;
-  margin: 30px;
-  padding: 10%;
-  background-color: var(--gray-200);
-  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  gap: 80px;
 }
 </style>
diff --git a/packages/alto/src/components/Loader/Loader.vue b/packages/alto/src/components/Loader/Loader.vue
index b0fab90d..0c573db5 100644
--- a/packages/alto/src/components/Loader/Loader.vue
+++ b/packages/alto/src/components/Loader/Loader.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent } from 'vue';
+import { Bar, Brand, Spinner } from './internal';
 import type { LoaderProps } from '~/types';
 
-const props = withDefaults(
+withDefaults(
   defineProps<LoaderProps>(),
   {
     color: 'var(--brand-500)',
@@ -12,24 +12,13 @@ const props = withDefaults(
     variant: 'spinner',
   },
 );
-
-const loader = computed (() => {
-  switch (props.variant) {
-    case 'brand':
-      return defineAsyncComponent(() => import('./internal/BrandLoading.vue'));
-
-    case 'bar':
-      return defineAsyncComponent(() => import('./internal/BarLoading.vue'));
-
-    default:
-      return defineAsyncComponent(() => import('./internal/Spinner.vue'));
-  }
-});
 </script>
 
 <template>
   <div class="loader-block">
-    <component :is="loader" :color="color" :size="size" />
+    <Bar v-if="variant === 'bar'" v-bind="{ color, size }" />
+    <Brand v-else-if="variant === 'brand'" v-bind="{ color, size }" />
+    <Spinner v-else v-bind="{ color, size }" />
 
     <p v-if="label" class="label" :class="[labelFontSize]">
       {{ label }}
diff --git a/packages/alto/src/components/Loader/internal/BarLoading.vue b/packages/alto/src/components/Loader/internal/Bar.vue
similarity index 100%
rename from packages/alto/src/components/Loader/internal/BarLoading.vue
rename to packages/alto/src/components/Loader/internal/Bar.vue
diff --git a/packages/alto/src/components/Loader/internal/BrandLoading.vue b/packages/alto/src/components/Loader/internal/Brand.vue
similarity index 100%
rename from packages/alto/src/components/Loader/internal/BrandLoading.vue
rename to packages/alto/src/components/Loader/internal/Brand.vue
diff --git a/packages/alto/src/components/Loader/internal/index.ts b/packages/alto/src/components/Loader/internal/index.ts
new file mode 100644
index 00000000..ab975305
--- /dev/null
+++ b/packages/alto/src/components/Loader/internal/index.ts
@@ -0,0 +1,3 @@
+export { default as Bar } from './Bar.vue';
+export { default as Brand } from './Brand.vue';
+export { default as Spinner } from './Spinner.vue';