diff --git a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
index ade0663..c469d3a 100644
--- a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
+++ b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js
@@ -8,6 +8,11 @@ import Image from 'next/image'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
 import ThemeOption from '@/app/_utils/ThemeOption'
+import { doc, getFirestore, setDoc } from 'firebase/firestore'
+import { app } from '@/config/FirebaseConfig'
+import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
+import { toast } from 'sonner'
+import { useRouter } from 'next/navigation'
 
 const MeetingForm = ({setFormEvent}) => {
     const [themeColor, setThemeColor] = useState();
@@ -18,6 +23,28 @@ const MeetingForm = ({setFormEvent}) => {
     const [locationMeeting, setLocationMeeting] = useState();
     const [urlMeeting, setUrlMeeting] = useState();
 
+    //initialize the data
+    const db = getFirestore(app);
+    const {user} = useKindeBrowserClient();
+    const router = useRouter();
+
+    //create event
+    const onCreateEvent = async () => {
+        const id = Date.now().toString(); 
+        await setDoc(doc(db, 'MeetingEvent', id), {
+            id: id,
+            eventName: eventName,
+            timeDuration: timeDuration,
+            locationMeeting: locationMeeting,
+            urlMeeting: urlMeeting,
+            themeColor: themeColor,
+            businessId: doc(db, 'Business', user?.email)
+        }).then(res => {
+            toast('New event/meeting is created')
+            router.replace('/dashboard/meeting')
+        })
+    }
+
     useEffect(() => {
         setFormEvent({
             eventName: eventName,
@@ -26,9 +53,9 @@ const MeetingForm = ({setFormEvent}) => {
             urlMeeting: urlMeeting,
             themeColor: themeColor
         })
-    }, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor])
-
+    }, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor]);
 
+   
   return (
     <div className='px-5 lg:px-10 py-10'>
         <Link href={'/dashboard'}><p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p></Link>
@@ -61,8 +88,8 @@ const MeetingForm = ({setFormEvent}) => {
             </div>
             {locationMeeting && 
             <div>
-                <p className='font-semibold'> Add {locationMeeting} url or number <span className='text-red-500'>*</span></p>
-                <Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url' className='text-sm'/>
+                <p className='font-semibold'> Add {locationMeeting} url or phone number<span className='text-red-500'>*</span></p>
+                <Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url or phone number' className='text-sm'/>
             </div>
             }
             <p className='font-semibold'>Select Color</p>
@@ -72,7 +99,7 @@ const MeetingForm = ({setFormEvent}) => {
                 ))}
             </div>
         </div>
-        <Button disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
+        <Button onClick={() => onCreateEvent()} disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
     </div>
   )
 }
diff --git a/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js b/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js
index dc9b093..d3dd0cb 100644
--- a/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js
+++ b/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js
@@ -3,7 +3,6 @@ import { PiMapPinLight } from "react-icons/pi";
 import { Calendar } from "@/components/ui/calendar"
 import React, { useEffect, useState } from 'react'
 import Link from "next/link";
-import { Button } from '@/components/ui/button'
 
 const PreviewMeeting = ({formEvent}) => {
     const [date, setDate] = useState(new Date());
@@ -28,27 +27,28 @@ const PreviewMeeting = ({formEvent}) => {
         setTimeSlots(slots);
     }
     
-    
+
   return (
-    <div className='px-5 py-10 shadow-md m-4 border-t-8'>
+    <div className='px-5 py-10 shadow-md m-4 border-t-8' style={{borderTopColor: formEvent?.themeColor}}>
         <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
-        <div className='grid grid-cols-1 md:grid-cols-3 mt-5'>
+        <div className='grid grid-cols-1 lg:grid-cols-3 mt-5'>
             <div className='border-r'>
-                <p className='font-semibold'>Event Name: <span className="font-normal">{formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}</span></p>
+                <p className='font-semibold'>Event Name:</p>
+                <p className="font-normal">{formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}</p>
                 <div className='mt-5 flex flex-col gap-2'>
                     <p className='flex gap-1 items-center'><GoClock/>{formEvent?.timeDuration} minutes</p>
                     <p className='flex gap-1 items-center'><PiMapPinLight/>{formEvent?.locationMeeting}</p>
                     <Link href={formEvent?.urlMeeting?formEvent?.urlMeeting:''} className="text-gray-500 underline text-sm">{formEvent?.urlMeeting}</Link>
                 </div>
             </div>
-            <div className='flex px-5 md:col-span-2'>
+            <div className='grid px-2 md:px-5 lg:col-span-2 min-[480px]:flex'>
                 <div className="flex flex-col">
                     <p className="font-semibold">Select your meeting date & time</p>
-                    <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
+                    <Calendar disabled={(date) => date < new Date()} mode="single" selected={date} onSelect={setDate} className="rounded-md border mt-5"/>
                 </div>
-                <div>
+                <div className="w-full flex flex-col overflow-auto gap-2 p-2 md:p-5" style={{maxHeight: '350px'}}>
                     {timeSlots?.map((time, index) => (
-                        <Button variant="outline">{time}</Button>
+                        <button className='text-xs p-2 border rounded-md hover:bg-gray-100'>{time}</button>
                     ))}
                 </div>
             </div>
diff --git a/scheduler_app/app/(routes)/dashboard/layout.js b/scheduler_app/app/(routes)/dashboard/layout.js
index 9b82717..be4ba68 100644
--- a/scheduler_app/app/(routes)/dashboard/layout.js
+++ b/scheduler_app/app/(routes)/dashboard/layout.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import SideNav from './_components/sideNav'
 import DashboardHeader from './_components/dashboardHeader'
+import { Toaster } from 'sonner'
 
 const Layout = ({children}) => {
   return (
@@ -10,6 +11,7 @@ const Layout = ({children}) => {
         </div>
         <div className='md:ml-64'>
           <DashboardHeader/>
+          <Toaster/>
           {children} 
         </div>
     </div>