diff --git a/frontend/src/components/pages/Profile/ProfilePage.tsx b/frontend/src/components/pages/Profile/ProfilePage.tsx
index c211065..4c770bc 100644
--- a/frontend/src/components/pages/Profile/ProfilePage.tsx
+++ b/frontend/src/components/pages/Profile/ProfilePage.tsx
@@ -28,7 +28,7 @@ const ProfilePage = () => {
       {!isEdit && (
         <div className="p-4">
           <h1 className="text-2xl font-semibold">Profile</h1>
-          <div className="mt-4">
+          <div className="mt-4 mb-7">
             {!user?.profile_picture && (
               <div className="my-3 border w-64 rounded-md p-4 text-lg">
                 <p className="mb-2 font-semibold">No Profile picture</p>
diff --git a/frontend/src/components/pages/dashboard/team/TeamDetails.tsx b/frontend/src/components/pages/dashboard/team/TeamDetails.tsx
index f71080c..10901db 100644
--- a/frontend/src/components/pages/dashboard/team/TeamDetails.tsx
+++ b/frontend/src/components/pages/dashboard/team/TeamDetails.tsx
@@ -98,23 +98,23 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
         <div className="flex flex-col md:flex-row items-center gap-5">
           {admin.id === user.id && (
             <>
-              <p>
+              <p className="w-full lg:w-auto">
                 <button
                   onClick={() => setIsOpen(true)}
-                  className="mx-auto outline-none border px-5 py-2 rounded-lg"
+                  className="mx-auto outline-none border w-full lg:w-auto px-5 py-2 rounded-lg"
                 >
                   Add members
                 </button>
               </p>
-              <p>
+              <p className="w-full lg:w-auto">
                 <button
                   onClick={() => setIsRemove(true)}
-                  className="mx-auto  border px-5 py-2 rounded-lg"
+                  className="mx-auto  border px-5 py-2 rounded-lg w-full lg:w-auto"
                 >
                   Remove members
                 </button>
               </p>
-              <p>
+              <p className="w-full lg:w-auto">
                 <Link
                   href={{
                     pathname: `/teams/edit-team/${team?.id}`,
@@ -126,7 +126,7 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
                     },
                   }}
                 >
-                  <button className="mx-auto  border px-5 py-2 rounded-lg">
+                  <button className="mx-auto  border px-5 py-2 w-full lg:w-auto rounded-lg">
                     Edit Team
                   </button>
                 </Link>
@@ -134,20 +134,20 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
             </>
           )}
           {admin?.id !== user?.id && (
-            <p>
+            <p className="w-full lg:w-auto">
               <button
                 onClick={handleRequestToLeave}
                 disabled={teamIds?.includes(id)}
                 className={` ${
                   teamIds?.includes(id) ? "cursor-not-allowed" : "shadow-md"
-                } mx-auto outline-none  border px-5 py-2 rounded-lg`}
+                } mx-auto outline-none  border px-5 py-2 rounded-lg w-full lg:w-auto`}
               >
                 {teamIds?.includes(id) ? "Requested" : "Request to leave"}
               </button>
             </p>
           )}
 
-          <p>
+          <p className="w-full lg:w-auto">
             <Link
               href={{
                 pathname: `/teams/${team?.id}`,
@@ -158,7 +158,7 @@ const TeamDetails = ({ team }: { team: ITeam }) => {
                 },
               }}
             >
-              <button className="font-medium border px-5 py-2 rounded-md">
+              <button className="font-medium w-full border px-5 py-2 rounded-md lg:w-auto">
                 View details
               </button>
             </Link>
diff --git a/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx b/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
index 715650e..f16770c 100644
--- a/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
+++ b/frontend/src/components/pages/teams/collaborations/common/MessageForm.tsx
@@ -46,7 +46,7 @@ const MessageForm = ({ teamId, type }: Props) => {
   const uploadImages = useUploadMultipleImage();
   const uploadFiles = useUploadMultipleFile();
   const [sendMessage] = useSendMessageMutation();
-  const [isMessage, setIsMessage] = useState(false);
+  const [isMessage, setIsMessage] = useState<any>({ status: false, value: "" });
 
   const openLinkModal = () => {
     setShowLinkModal(true);
@@ -73,6 +73,8 @@ const MessageForm = ({ teamId, type }: Props) => {
     data.poster = user.id;
     data.conversationId = teamId;
     data.type = type;
+    data.text = data?.text || isMessage?.value;
+    console.log({ payload: data });
     const result: any = await sendMessage(data);
     if (result?.data?.success) {
       const message = result?.data?.data;
@@ -249,10 +251,17 @@ const MessageForm = ({ teamId, type }: Props) => {
         </label>
 
         <input
+          autoFocus
           type="text"
           {...register("text")}
+          name="text"
           placeholder="Type your message..."
-          onChange={(e) => setIsMessage(e.target.value ? true : false)}
+          onChange={(e) =>
+            setIsMessage({
+              status: e.target.value ? true : false,
+              value: e.target.value,
+            })
+          }
           className="border-2 border-gray-300 p-2 rounded-md focus:outline-none focus:border-blue-500 flex-grow"
         />
 
@@ -261,14 +270,14 @@ const MessageForm = ({ teamId, type }: Props) => {
             links.length <= 0 &&
             filePreview.length <= 0 &&
             imagePreview.length <= 0 &&
-            !isMessage
+            !isMessage?.status
           }
           type="submit"
           className={`${
             links.length <= 0 &&
             filePreview.length <= 0 &&
             imagePreview.length <= 0 &&
-            !isMessage
+            !isMessage?.status
               ? "bg-gray-500 hover:bg-gray-600"
               : "bg-blue-500 hover:bg-blue-600"
           } text-white px-4 py-2 rounded-md  focus:outline-none`}
diff --git a/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx b/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
index 5afab7f..ed962b3 100644
--- a/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
+++ b/frontend/src/components/pages/teams/collaborations/common/ShowMessages.tsx
@@ -11,6 +11,7 @@ import { IUser } from "@/interfaces/user.interface";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { FaRegTrashAlt, FaPencilAlt } from "react-icons/fa";
+import { HiDotsVertical } from "react-icons/hi";
 import moment from "moment";
 import { formattedDate } from "@/utils/formattedDate";
 import { ITeam } from "@/interfaces/team.interface";
@@ -24,17 +25,11 @@ const ShowMessages = ({ messages, team }: Props) => {
   const { socket, realTimeMessages, setRealTimeMessages }: any =
     useContext(SocketContext);
   const messagesContainerRef = useRef<HTMLDivElement | null>(null);
-  const [isEdit, setIsEdit] = useState({ index: 0, status: false });
   const [editedMessage, setEditedMessage] = useState<string | undefined>("");
   const [imageModalOpen, setImageModalOpen] = useState<boolean>(false);
   const [selectedImage, setSelectedImage] = useState<string>("");
-  const [isEditMessage, setIsEditMessage] = useState<{
-    id: string | undefined;
-    status: boolean;
-  }>({
-    id: "",
-    status: false,
-  });
+  const [msIndex, setMsIndex] = useState<number | null>(null);
+  const [isEditMessage, setIsEditMessage] = useState<any>("");
   const { data: userData } = useLoggedInUserQuery({});
   const user: IUser = userData?.data;
   const [deleteMessage] = useDeleteMessageMutation();
@@ -49,22 +44,35 @@ const ShowMessages = ({ messages, team }: Props) => {
     const result: any = await deleteMessage(id);
     if (result?.data?.success) {
       toast.success("Message deleted");
+      setMsIndex(null);
     }
     if (result?.error) {
       toast.error("Message was not deleted");
     }
   };
 
+  const handleShowDropdown = (index: number) => {
+    if (msIndex === index) {
+      setMsIndex(null);
+    } else {
+      setMsIndex(index);
+    }
+  };
+
   const handleEditMessage = async () => {
     const result: any = await editMessage({
-      id: isEditMessage.id,
+      id: isEditMessage,
       text: editedMessage,
     });
     if (result?.data?.success) {
       toast.success("Message updated");
+      setMsIndex(null);
+      setIsEditMessage("");
     }
     if (result?.error) {
       toast.error("Message was not updated");
+      setMsIndex(null);
+      setIsEditMessage("");
     }
   };
 
@@ -99,13 +107,8 @@ const ShowMessages = ({ messages, team }: Props) => {
       className="mx-auto mt-8 h-screen  overflow-hidden hover:overflow-auto  scrollbar scrollbar-w-[4px] scrollbar-thumb-blue-600 scrollbar-thin-rounded-md scrollbar-track-slate-100"
     >
       {realTimeMessages?.map((post: IMessage, index: number) => (
-        <div
-          key={post?.id}
-          className="mx-auto border-b py-6"
-          onMouseOver={() => setIsEdit({ index: index, status: true })}
-          onMouseLeave={() => setIsEdit({ index: 0, status: false })}
-        >
-          <div className="flex items-center justify-between">
+        <div key={post?.id} className="mx-auto border-b py-6">
+          <div className="flex  justify-between items-start">
             <div className="flex items-center mb-4">
               <img
                 src={post?.poster?.profile_picture}
@@ -121,33 +124,47 @@ const ShowMessages = ({ messages, team }: Props) => {
                 </span>
               </div>
             </div>
-            {(isEdit.status &&
-              isEdit?.index === index &&
-              user?.id === post?.poster?.id) ||
-              (user?.id === team?.admin?.id && (
-                <div className="flex items-center gap-3 mb-4">
-                  {user.id === post.poster.id && (
+            {(user?.id === post?.poster?.id ||
+              user?.id === team?.admin?.id) && (
+              <div className="relative">
+                <button
+                  onClick={() => handleShowDropdown(index)}
+                  title="Drop down button"
+                  className="bg-gray-400 p-2 rounded-md text-white"
+                >
+                  <HiDotsVertical className="text-xs lg:text-xl" />
+                </button>
+                {msIndex === index && (
+                  <div className="absolute right-0 flex w-40 flex-col gap-2 top-10 rounded-md dark:bg-gray-700 z-50  p-2 text-start">
+                    {user?.id === post?.poster?.id && (
+                      <button
+                        onClick={() => {
+                          setIsEditMessage(post?.id);
+                          setMsIndex(null);
+                        }}
+                        className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
+                      >
+                        Edit
+                      </button>
+                    )}
                     <button
-                      title="Edit Message"
-                      onClick={() =>
-                        setIsEditMessage({ id: post?.id, status: true })
-                      }
-                      className="bg-gray-400 p-2 rounded-md text-white"
+                      onClick={() => handleDeleteMessage(post.id)}
+                      className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
                     >
-                      <FaPencilAlt className="text-xs lg:text-xl" />
+                      Delete
                     </button>
-                  )}
-                  <button
-                    title="Delete Message"
-                    onClick={() => handleDeleteMessage(post?.id)}
-                    className="bg-gray-400 p-2 rounded-md text-white"
-                  >
-                    <FaRegTrashAlt className="text-xs lg:text-xl" />
-                  </button>
-                </div>
-              ))}
+                    <button
+                      onClick={() => handleShowDropdown(index)}
+                      className="text-start w-full dark:bg-gray-800 px-2 py-1 rounded-md"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
-          {isEditMessage?.status && isEditMessage.id === post?.id ? (
+          {isEditMessage === post?.id ? (
             <div className="flex flex-col gap-1 mb-2">
               <p>
                 <textarea
@@ -160,7 +177,7 @@ const ShowMessages = ({ messages, team }: Props) => {
               </p>
               <p className="flex gap-2">
                 <button
-                  onClick={() => setIsEditMessage({ id: "", status: false })}
+                  onClick={() => setIsEditMessage("")}
                   className="border px-3 rounded-sm"
                 >
                   Cancel
diff --git a/frontend/src/components/pages/teams/showTeam/TeamPage.tsx b/frontend/src/components/pages/teams/showTeam/TeamPage.tsx
index 1aebed8..1295af1 100644
--- a/frontend/src/components/pages/teams/showTeam/TeamPage.tsx
+++ b/frontend/src/components/pages/teams/showTeam/TeamPage.tsx
@@ -44,14 +44,14 @@ const Teams = () => {
             <h2 className="text-2xl font-bold my-2">{team.name}</h2>
             <h4 className="text-xl font-semibold mb-3">{team.category}</h4>
             <p className="w-full mb-10">{team.description}</p>
-            <div>
-              <p className="absolute bottom-3 left-8 border font-medium px-5 py-2 rounded-md flex items-center gap-1">
+            <div className="flex justify-between items-center gap-2 absolute bottom-4 w-full right-0 left-0 px-5">
+              <p className="border font-medium px-2 lg:px-5 py-1 lg:py-2 rounded-md flex items-center gap-1">
                 <span> Members: </span>
                 <span>{Number(team.activeMembers?.length)}</span>
               </p>
-              <p className="absolute bottom-5 right-8">
+              <p>
                 <Link
-                  className="border font-medium px-5 py-2 rounded-md"
+                  className="border font-medium px-2  lg:px-5 py-2 rounded-md"
                   href={{
                     pathname: `/teams/${team.id}`,
                     query: {
diff --git a/frontend/src/components/shared/Navbar.tsx b/frontend/src/components/shared/Navbar.tsx
index a6c448a..0d13532 100644
--- a/frontend/src/components/shared/Navbar.tsx
+++ b/frontend/src/components/shared/Navbar.tsx
@@ -11,6 +11,7 @@ import { useTheme } from "next-themes";
 import { useGetNotificationQuery } from "@/features/notification";
 import { INotification } from "@/interfaces/notification.interface";
 import { SocketContext } from "@/context/SocketContext";
+import Swal from "sweetalert2";
 
 const Navbar = () => {
   const { socket }: any = useContext(SocketContext);
@@ -27,9 +28,16 @@ const Navbar = () => {
   >([]);
 
   const handleLogOut = async () => {
-    const res = await logout("");
-    console.log(res);
-    // window.location.replace("/");
+    const res: any = await logout("");
+    if (res?.data?.statusCode === 200) {
+      Swal.fire({
+        position: "center",
+        icon: "success",
+        title: res?.data?.message,
+        showConfirmButton: false,
+      });
+      window.location.replace("/");
+    }
   };
 
   useEffect(() => {