diff --git a/packages/atoms/availabilitylist/NewScheduleButton.tsx b/packages/atoms/availabilitylist/NewScheduleButton.tsx
index 75b8cd4a4b..25ae48df3a 100644
--- a/packages/atoms/availabilitylist/NewScheduleButton.tsx
+++ b/packages/atoms/availabilitylist/NewScheduleButton.tsx
@@ -1,9 +1,22 @@
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+import { Button } from "../src/components/ui/button";
 import { Form } from "./Form";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   return (
     <div>
-      <Form />
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button>New</Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Add new schedule</DialogTitle>
+            <Form />
+          </DialogHeader>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }