diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 5866cdde..89403520 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -17,17 +17,14 @@ import {
   renderTabs,
   renderVerticalTabs,
 } from './renders/tabs';
-import { useToast } from 'components/shared/Toast/useToast';
-import { Button } from 'components/shared/Button';
 import {
   renderInlineNotificationWithDescriptions,
   renderInlineNotifications,
 } from './renders/inlineNotifications';
 import { renderInputs } from './renders/input';
+import { renderToast, renderToastsWithCta } from './renders/toast';
 
 const Page = () => {
-  const { toast } = useToast();
-
   const [singleDate, setSingleDate] = useState<Value>();
   const [dateRange, setDateRange] = useState<Value>();
 
@@ -47,10 +44,12 @@ const Page = () => {
         {/* Toast */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <h1 className="text-2xl font-bold">Toasts</h1>
-          <Button onClick={() => toast({ id: 'test', title: 'Hello, world!' })}>
-            Toast
-          </Button>
+          {renderToastsWithCta()}
+          {renderToast()}
         </div>
+
+        <div className="w-full h border border-gray-200 px-20 my-10" />
+
         {/* Button */}
         <div className="flex flex-col gap-10 items-center justify-between">
           <h1 className="text-2xl font-bold">Input</h1>
diff --git a/packages/frontend/src/pages/components/renders/toast.tsx b/packages/frontend/src/pages/components/renders/toast.tsx
new file mode 100644
index 00000000..9b066e8c
--- /dev/null
+++ b/packages/frontend/src/pages/components/renders/toast.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Button } from 'components/shared/Button';
+import { useToast } from 'components/shared/Toast/useToast';
+
+export const renderToastsWithCta = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                cta: [
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                    variant: 'tertiary',
+                  },
+                  {
+                    buttonLabel: 'Button',
+                    size: 'xs',
+                  },
+                ],
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant} with cta
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};
+
+export const renderToast = () => {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <div className="flex gap-10">
+      {(['success', 'error', 'warning', 'info', 'loading'] as const).map(
+        (variant, index) => (
+          <Button
+            onClick={() =>
+              toast({
+                onDismiss: dismiss,
+                id: `${variant}_${index}`,
+                title: 'Project created',
+                variant,
+              })
+            }
+            key={`${variant}_${index}`}
+          >
+            {variant}
+          </Button>
+        ),
+      )}
+    </div>
+  );
+};