diff --git a/packages/vlossom/src/components/vs-toast/VsToastView.scss b/packages/vlossom/src/components/vs-toast/VsToastView.scss
index 8be6f3f2..a44d6f5a 100644
--- a/packages/vlossom/src/components/vs-toast/VsToastView.scss
+++ b/packages/vlossom/src/components/vs-toast/VsToastView.scss
@@ -8,7 +8,7 @@
     transition: all 0.5s ease;
     z-index: var(--vs-toast-z-index);
 
-    &.vs-fixed {
+    &.vs-toast-fixed {
         position: fixed;
     }
 
diff --git a/packages/vlossom/src/components/vs-toast/VsToastView.vue b/packages/vlossom/src/components/vs-toast/VsToastView.vue
index d984efac..b3273c99 100644
--- a/packages/vlossom/src/components/vs-toast/VsToastView.vue
+++ b/packages/vlossom/src/components/vs-toast/VsToastView.vue
@@ -1,11 +1,15 @@
 <template>
-    <template v-for="[key, toasts] in Object.entries(toastsByPosition)" :key="key">
-        <div :class="['vs-toast-container', `vs-toast-${key.split('-')[0]}`, `vs-toast-${key.split('-')[1]}`]">
+    <div v-if="hasToast" class="vs-toast-view" :id="wrapperId" :class="{ 'vs-toast-fixed': isFixed }">
+        <div
+            v-for="[key, toasts] in Object.entries(toastsByPosition)"
+            :key="key"
+            :class="['vs-toast-container', `vs-toast-${key.split('-')[0]}`, `vs-toast-${key.split('-')[1]}`]"
+        >
             <TransitionGroup name="toasts" appear>
                 <VsToast v-for="toast in toasts" :key="toast.id" :toast="toast" />
             </TransitionGroup>
         </div>
-    </template>
+    </div>
 </template>
 
 <script lang="ts">
@@ -37,7 +41,13 @@ export default defineComponent({
             }, {} as Record<string, VsToastInfo[]>);
         });
 
-        return { toastsByPosition };
+        const wrapperId = computed(() => `vs-toast-${container.value.replace('#', '').replace('.', '')}`);
+
+        const isFixed = computed(() => container.value === 'body');
+
+        const hasToast = computed(() => Object.keys(toastsByPosition.value).length > 0);
+
+        return { toastsByPosition, wrapperId, isFixed, hasToast };
     },
 });
 </script>
diff --git a/packages/vlossom/src/models/toast-model.ts b/packages/vlossom/src/models/toast-model.ts
index df81b562..dfb998b3 100644
--- a/packages/vlossom/src/models/toast-model.ts
+++ b/packages/vlossom/src/models/toast-model.ts
@@ -37,10 +37,10 @@ export function getToastInfo(
         container: 'body',
         colorScheme: stateColor,
         autoClose: true,
-        placement: 'top',
-        align: 'center',
         primary,
         ...options,
+        placement: options.placement || 'top',
+        align: options.align || 'center',
         ...(options.timeout && { autoClose: true }),
     };
 }
diff --git a/packages/vlossom/src/plugins/toast-plugin/toast-plugin.ts b/packages/vlossom/src/plugins/toast-plugin/toast-plugin.ts
index 46f850dd..bddc4e2b 100644
--- a/packages/vlossom/src/plugins/toast-plugin/toast-plugin.ts
+++ b/packages/vlossom/src/plugins/toast-plugin/toast-plugin.ts
@@ -16,19 +16,8 @@ function renderToastView(toastInfo: VsToastInfo) {
         return '';
     }
 
-    const wrapperId = `vs-toast-${container.replace('#', '')}`;
-    let toastWrap = document.getElementById(wrapperId);
-    if (!toastWrap) {
-        const toastView = h(VsToastView, { container });
-        toastWrap = document.createElement('div');
-        toastWrap.id = wrapperId;
-        toastWrap.classList.add('vs-toast-view');
-        if (container === 'body') {
-            toastWrap.style.position = 'fixed';
-        }
-        containerElement.appendChild(toastWrap);
-        render(toastView, toastWrap);
-    }
+    const toastView = h(VsToastView, { container });
+    render(toastView, containerElement);
 
     store.toast.push(toastInfo);
     if (toastInfo.autoClose) {