diff --git a/apps/demo/src/Home.tsx b/apps/demo/src/Home.tsx
index 83a51a2..3fedc3b 100644
--- a/apps/demo/src/Home.tsx
+++ b/apps/demo/src/Home.tsx
@@ -6,13 +6,14 @@ import {
   usePagination,
   useToastProvider,
   VariantType,
+  useModals,
 } from "@openfun/cunningham-react";
-
 import { PageProps } from "./App";
 import { database } from "./Character";
 
 export const Home = ({ modal }: { modal: PageProps }) => {
   const { toast } = useToastProvider();
+  const modals = useModals();
   const [rowSelection, setRowSelection] = useState({});
   const [isLoading, setIsLoading] = useState(true);
   const pagination = usePagination({ defaultPage: 1 });
@@ -127,7 +128,11 @@ export const Home = ({ modal }: { modal: PageProps }) => {
                   <Button
                     color="tertiary-text"
                     size="small"
-                    onClick={() => {
+                    onClick={async () => {
+                      const decision = await modals.deleteConfirmationModal();
+                      if (!decision) {
+                        return;
+                      }
                       const index = database.findIndex(
                         (character) => character.id === params.row.id,
                       );
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 85d46d7..1d3190a 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -18,6 +18,9 @@ export * from "./components/Forms/Switch";
 export * from "./components/Forms/TextArea";
 export * from "./components/Loader";
 export * from "./components/Modal";
+export * from "./components/Modal/ConfirmationModal";
+export * from "./components/Modal/DeleteConfirmationModal";
+export * from "./components/Modal/MessageModal";
 export * from "./components/Modal/ModalProvider";
 export * from "./components/Pagination";
 export * from "./components/Popover";