diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 3636213c..e1e0d9db 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -12,8 +12,8 @@ import "@fontsource/poppins/900.css";
 // Prismane
 import PrismaneProvider from "../src/components/PrismaneProvider/PrismaneProvider";
 import Flex from "../src/components/Flex/Flex";
-import Toaster from "../src/components/Toaster/Toaster";
 import { PRISMANE_COLORS } from "../src/constants";
+import Toaster from "../src/components/Toaster";
 
 const preview: Preview = {
   decorators: [
@@ -36,7 +36,7 @@ const preview: Preview = {
             };
 
       return (
-        <Toaster>
+        <Toaster position="top-right">
           <PrismaneProvider theme={theme}>
             <Flex
               w="100vw"
diff --git a/src/components/Toaster/Toast/Toast.tsx b/src/components/Toaster/Toast/Toast.tsx
index 2bd8c275..48773f30 100644
--- a/src/components/Toaster/Toast/Toast.tsx
+++ b/src/components/Toaster/Toast/Toast.tsx
@@ -33,22 +33,22 @@ const Toast = forwardRef<HTMLDivElement, ToastProps>(
     },
     ref
   ) => {
-    const [shown, setShown] = useState(false);
+    const [shown, setShown] = useState(true);
 
     const { setToasts } = useToasterContext();
 
     useEffect(() => {
-      setShown(true);
-
       const toastTimeout = setTimeout(() => {
         setShown(false);
-      }, timeout);
+      }, timeout + duration);
 
       return () => clearTimeout(toastTimeout);
     }, []);
 
-    const presence = usePresence(true, timeout + duration, () => {
-      setToasts((pt: any) => pt.filter((toast: any) => toast.id !== id));
+    const presence = usePresence(shown, duration, () => {
+      setTimeout(() => {
+        setToasts((pt: any) => pt.filter((toast: any) => toast.id !== id));
+      }, duration);
     });
 
     return presence ? (
diff --git a/src/components/Toaster/Toaster.stories.tsx b/src/components/Toaster/Toaster.stories.tsx
index d86e66b4..fd802dea 100644
--- a/src/components/Toaster/Toaster.stories.tsx
+++ b/src/components/Toaster/Toaster.stories.tsx
@@ -4,8 +4,10 @@ import Toaster from "./Toaster";
 import Button from "../Button/Button";
 import Alert from "../Alert/Alert";
 import Flex from "../Flex/Flex";
+import Radio from "../Radio";
 // Hooks
 import useToast from "./useToast";
+import useForm from "../../hooks/useForm";
 
 export default {
   title: "Toaster",
@@ -29,3 +31,37 @@ export const Default = () => {
     </Toaster>
   );
 };
+
+export const Positions = () => {
+  const toast = useToast();
+
+  const { register, formState } = useForm({
+    fields: {
+      position: {
+        value: "bottom-right",
+      },
+    },
+  });
+
+  return (
+    <Toaster position={formState.fields.position.value}>
+      <Flex direction="column" gap={12}>
+        <Radio.Group {...register("position")}>
+          <Radio value="top-left" label="Top Left" />
+          <Radio value="top-right" label="Top Right" />
+          <Radio value="bottom-left" label="Bottom Left" />
+          <Radio value="bottom-right" label="Bottom Right" />
+        </Radio.Group>
+        <Button
+          onClick={() => {
+            toast({
+              element: <Alert>Hello, World!</Alert>,
+            });
+          }}
+        >
+          Click to show toast
+        </Button>
+      </Flex>
+    </Toaster>
+  );
+};