diff --git a/apps/views/pages/Toast.tsx b/apps/views/pages/Toast.tsx
new file mode 100644
index 0000000..75dc369
--- /dev/null
+++ b/apps/views/pages/Toast.tsx
@@ -0,0 +1,13 @@
+import Toasts from "./components/Toast";
+
+function Toast() {
+  return (
+    <Toasts
+      title="Boostrap"
+      time="2 min ago"
+      label="Hello, world! This is a toast message."
+    />
+  );
+}
+
+export default Toast;
diff --git a/apps/views/pages/components/Toast.tsx b/apps/views/pages/components/Toast.tsx
new file mode 100644
index 0000000..83fe425
--- /dev/null
+++ b/apps/views/pages/components/Toast.tsx
@@ -0,0 +1,25 @@
+function Toasts(props: any) {
+  return (
+    <div
+      className="toast"
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+    >
+      <div className="toast-header">
+        <img src="" className="rounded me-2" alt="" />
+        <strong className="me-auto">{props.title}</strong>
+        <small>{props.time}</small>
+        <button
+          type="button"
+          className="btn-close"
+          data-bs-dismiss="toast"
+          aria-label="Close"
+        ></button>
+      </div>
+      <div className="toast-body">{props.label}</div>
+    </div>
+  );
+}
+
+export default Toasts;
diff --git a/apps/views/pages/index.tsx b/apps/views/pages/index.tsx
index bcc7457..28137f6 100644
--- a/apps/views/pages/index.tsx
+++ b/apps/views/pages/index.tsx
@@ -15,6 +15,8 @@ export default function Docs() {
       <br />
       <br />
       <Button>Hello</Button>
+      <br />
+      <Link href="/toast">Toasts</Link>
     </div>
   );
 }
diff --git a/packages/kbs-core/src/index.tsx b/packages/kbs-core/src/index.tsx
index f623b20..165de09 100644
--- a/packages/kbs-core/src/index.tsx
+++ b/packages/kbs-core/src/index.tsx
@@ -1,2 +1,3 @@
 import * as React from "react";
+
 export { Button, type ButtonProps } from "./Button";