diff --git a/src/app/api/teams/members/[id]/route.ts b/src/app/api/teams/members/[id]/route.ts
index 7e75e69..e2c5fb7 100644
--- a/src/app/api/teams/members/[id]/route.ts
+++ b/src/app/api/teams/members/[id]/route.ts
@@ -21,13 +21,14 @@ export async function GET(
   );
 
   const results = await Promise.all(memberDataPromises);
+  console.log(results)
 
   const memberData = results.flatMap((result) => result || []);
 
   return Response.json({ memberData });
 }
 
-export async function DELETE(
+export async function PUT(
   request: Request,
   { params }: { params: { id: string } }
 ) {
@@ -49,6 +50,6 @@ export async function DELETE(
 
   await client.mutation(api.teams.addMember, { _id: id as Id<"teams">, memberArray:updatedTeamMembers });
 
-  return new Response("Member removed!!", { status: 200 });
+  return new Response("Member removd!!", { status: 200 });
 
 }
diff --git a/src/app/dashboard/_components/SideNavTopSection.tsx b/src/app/dashboard/_components/SideNavTopSection.tsx
index 113b02d..0afd70f 100644
--- a/src/app/dashboard/_components/SideNavTopSection.tsx
+++ b/src/app/dashboard/_components/SideNavTopSection.tsx
@@ -48,6 +48,8 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
   const [teamMembersData, setTeamData] = useState<any[]>([]);
   const [ActiveTeamMembers, setActiveTeamMembers] = useState<string[]>([]);
 
+  console.log(activeTeam)
+
   useEffect(() => {
     user && getTeamList();
   }, [user]);
diff --git a/src/components/shared/DeleteTeamMember.tsx b/src/components/shared/DeleteTeamMember.tsx
new file mode 100644
index 0000000..7c81342
--- /dev/null
+++ b/src/components/shared/DeleteTeamMember.tsx
@@ -0,0 +1,88 @@
+"use client";
+import React, { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { CheckCircle2, Trash2 } from "lucide-react";
+import axiosInstance from "@/config/AxiosInstance";
+import { deleteTeamMemberUrl } from "@/lib/API-URLs";
+import { useSelector } from "react-redux";
+import { RootState } from "@/app/store";
+import { useRouter } from "next/navigation";
+
+type Props = {
+  email: string;
+};
+
+export default function DeleteTeamMember({ email }: Props) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const router = useRouter();
+  const teamId = useSelector((state: RootState) => state.team.teamId);
+
+  const DeleteHandler = async () => {
+    try {
+      axiosInstance.put(`${deleteTeamMemberUrl}/${teamId}`, { email })
+      .then((res)=>{
+        if(res.status === 200) setIsSubmitted(true);
+      })
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <Button size={"icon"} className=" bg-red-600 hover:bg-red-700">
+          <Trash2 className="w-5 h-5" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        {!isSubmitted && (
+          <>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. This will remove the member from
+                the team and files created by the member will be permanently
+                deleted.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <Button onClick={() => DeleteHandler()}>Continue</Button>
+            </AlertDialogFooter>
+          </>
+        )}
+        {isSubmitted && (
+          <>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="flex gap-2">
+                <p>Team Member Removed Successfully!!</p>{" "}
+                <CheckCircle2 className="w-6 h-6" />
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogAction
+                onClick={() => {
+                  router.push('/dashboard')
+                }}
+              >
+                Continue
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </>
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/src/components/shared/MemberCarousel.tsx b/src/components/shared/MemberCarousel.tsx
index 494a0f6..3ee2c51 100644
--- a/src/components/shared/MemberCarousel.tsx
+++ b/src/components/shared/MemberCarousel.tsx
@@ -13,9 +13,8 @@ import {
   CardHeader,
 } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Button } from "../ui/button";
-import { Trash2 } from "lucide-react";
-import { SetStateAction, useState } from "react";
+import { SetStateAction } from "react";
+import DeleteTeamMember from "./DeleteTeamMember";
 
  export type USER = {
   name: string;
@@ -31,7 +30,6 @@ type Props = {
 };
 
 export default function MemberCarousel({ teamMembersData,focusedUser,setFocusedUser }: Props) {
-
   return (
     <div className="flex flex-col items-center justify-center p-10 w-[75%]">
       <Carousel className="w-full">
@@ -60,12 +58,7 @@ export default function MemberCarousel({ teamMembersData,focusedUser,setFocusedU
                   <CardContent>
                     <CardDescription className="flex items-center justify-between">
                       <h1>Email : {user.email}</h1>
-                      <Button
-                        size={"icon"}
-                        className=" bg-red-600 hover:bg-red-700"
-                      >
-                        <Trash2 className="w-5 h-5" />
-                      </Button>
+                      <DeleteTeamMember email={user.email} />
                     </CardDescription>
                   </CardContent>
                 </Card>
diff --git a/src/lib/API-URLs.ts b/src/lib/API-URLs.ts
index dd55a95..b7f52e7 100644
--- a/src/lib/API-URLs.ts
+++ b/src/lib/API-URLs.ts
@@ -1,3 +1,4 @@
 export const changeToPrivateUrl = "/api/files/private"
 export const changeToPublicUrl = "/api/files/public"
-export const getTeamMembersData = "/api/teams/members";
\ No newline at end of file
+export const getTeamMembersData = "/api/teams/members";
+export const deleteTeamMemberUrl = "/api/teams/members";
\ No newline at end of file