diff --git a/client/src/components/UserProfileContent.jsx b/client/src/components/UserProfileContent.jsx
index 54862b5..3a313df 100644
--- a/client/src/components/UserProfileContent.jsx
+++ b/client/src/components/UserProfileContent.jsx
@@ -2,6 +2,7 @@ import { useDispatch, useSelector } from "react-redux";
 import ProfileEdit from "../pages/user/ProfileEdit";
 import toast, { Toaster } from "react-hot-toast";
 import { setUpdated } from "../redux/user/userSlice";
+import { useEffect } from "react";
 
 const UserProfileContent = () => {
   const { email, username, profilePicture, phoneNumber, adress } = useSelector(
@@ -9,10 +10,13 @@ const UserProfileContent = () => {
   );
   const dispatch = useDispatch();
   const isUpdated = useSelector((state) => state.user.isUpdated);
-  if (isUpdated) {
-    toast.success("successfully updated");
-    dispatch(setUpdated(false));
-  }
+  
+  useEffect(() => {
+    if (isUpdated) {
+      toast.success("Successfully updated");
+      dispatch(setUpdated(false));
+    }
+  }, [isUpdated, dispatch]);
 
   return (
     <div className="px-4 mx-auto mt-12  bg-white w-full sm:px-6 lg:px-8">
@@ -27,9 +31,9 @@ const UserProfileContent = () => {
               className="w-full h-full rounded-full object-center object-cover"
             />
             <div className="absolute bottom-0 left-[60px] z-10 ">
-              <button type="button" className=" p-3">
+              <div type="button" className=" p-3">
                 <ProfileEdit />
-              </button>
+              </div>
             </div>
           </div>
           <div className="">
diff --git a/client/src/pages/admin/components/BookingsTable.jsx b/client/src/pages/admin/components/BookingsTable.jsx
index 685fef7..ca6d190 100644
--- a/client/src/pages/admin/components/BookingsTable.jsx
+++ b/client/src/pages/admin/components/BookingsTable.jsx
@@ -3,7 +3,7 @@ import { DataGrid } from "@mui/x-data-grid";
 import Box from "@mui/material/Box";
 
 const BookingsTable = () => {
-  const [bookings, setBookings] = useState("");
+  const [bookings, setBookings] = useState([]);
 
   const fetchBookings = async () => {
     try {
@@ -126,8 +126,6 @@ const BookingsTable = () => {
 
   //rows
   const rows =
-    bookings &&
-    bookings.length > 0 &&
     bookings.map((cur) => ({
       id: cur._id,
       bookingId: cur._id,
diff --git a/client/src/pages/user/Orders.jsx b/client/src/pages/user/Orders.jsx
index 008c3d1..d5e8cec 100644
--- a/client/src/pages/user/Orders.jsx
+++ b/client/src/pages/user/Orders.jsx
@@ -51,9 +51,9 @@ export default function Orders() {
     <div className="max-w-4xl mx-auto py-20">
       <UserOrderDetailsModal />
       <h1 className="text-4xl font-semibold mb-2">Your Bookings</h1>
-      <p className="text-sm text-gray-600 mb-8">
+      <div className="text-sm text-gray-600 mb-8">
         {bookings && bookings.length > 0 ? "Check out all of your Bookings" :  <div className="font-extrabold text-black flex justify-center items-center min-h-[500px]">No Bookings Yet</div>}
-      </p>
+      </div>
       <div className="mb-8">
         {bookings && bookings.length > 0
           && bookings.map((cur, idx) => {
diff --git a/client/src/pages/vendor/Components/VendorBookingTable.jsx b/client/src/pages/vendor/Components/VendorBookingTable.jsx
index a9b8f9c..fc16e87 100644
--- a/client/src/pages/vendor/Components/VendorBookingTable.jsx
+++ b/client/src/pages/vendor/Components/VendorBookingTable.jsx
@@ -140,7 +140,7 @@ const VendorBookingsTable = () => {
       <div className="max-w-4xl mx-auto pb-20">
         <VendorBookingDetailModal />
 
-        <p className="text-sm text-gray-600 mb-8">
+        <div className="text-sm text-gray-600 mb-8">
           {filtered && filtered.length > 0 ? (
             "Check out all of your Bookings"
           ) : (
@@ -148,7 +148,7 @@ const VendorBookingsTable = () => {
               No Bookings Yet
             </div>
           )}
-        </p>
+        </div>
         <div className="mb-8">
           {filtered &&
             filtered.length > 0 &&