diff --git a/apps/app/components/project/confirm-project-deletion.tsx b/apps/app/components/project/delete-project-modal.tsx
similarity index 95%
rename from apps/app/components/project/confirm-project-deletion.tsx
rename to apps/app/components/project/delete-project-modal.tsx
index 5c94772a5..69c4edef5 100644
--- a/apps/app/components/project/confirm-project-deletion.tsx
+++ b/apps/app/components/project/delete-project-modal.tsx
@@ -24,7 +24,7 @@ type TConfirmProjectDeletionProps = {
   data: IProject | null;
 };
 
-const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) => {
+export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = (props) => {
   const { isOpen, data, onClose, onSuccess } = props;
 
   const cancelButtonRef = useRef(null);
@@ -122,12 +122,12 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
                         aria-hidden="true"
                       />
                     </div>
-                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                    <div className="mt-3 w-full text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
                         Delete Project
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-gray-500 break-all">
+                        <p className="break-all text-sm text-gray-500">
                           Are you sure you want to delete project - {`"`}
                           <span className="italic">{selectedProject?.name}</span>
                           {`"`} ? All of the data related to the project will be permanently
@@ -136,7 +136,7 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
                       </div>
                       <div className="my-3 h-0.5 bg-gray-200" />
                       <div className="mt-3">
-                        <p className="text-sm break-all">
+                        <p className="break-all text-sm">
                           Enter the project name{" "}
                           <span className="font-semibold">{selectedProject?.name}</span> to
                           continue:
@@ -202,5 +202,3 @@ const ConfirmProjectDeletion: React.FC<TConfirmProjectDeletionProps> = (props) =
     </Transition.Root>
   );
 };
-
-export default ConfirmProjectDeletion;
diff --git a/apps/app/components/project/index.ts b/apps/app/components/project/index.ts
index bf18fe07d..3e00dd34e 100644
--- a/apps/app/components/project/index.ts
+++ b/apps/app/components/project/index.ts
@@ -1,5 +1,7 @@
-export * from "./single-project-card";
 export * from "./create-project-modal";
+export * from "./delete-project-modal";
 export * from "./join-project";
 export * from "./sidebar-list";
 export * from "./single-integration-card";
+export * from "./single-project-card";
+export * from "./single-sidebar-project";
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index c36696460..c57254d88 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -1,53 +1,34 @@
 import React, { useState, FC } from "react";
+
 import { useRouter } from "next/router";
-import Link from "next/link";
-import { Disclosure, Transition } from "@headlessui/react";
-import useSWR from "swr";
+
+import useSWR, { mutate } from "swr";
 
 // icons
-import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
-import { ChevronDownIcon, PlusIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
 // hooks
 import useToast from "hooks/use-toast";
 import useTheme from "hooks/use-theme";
 // services
 import projectService from "services/project.service";
 // components
-import { CreateProjectModal } from "components/project";
+import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
 // ui
-import { CustomMenu, Loader } from "components/ui";
+import { Loader } from "components/ui";
 // helpers
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { copyTextToClipboard } from "helpers/string.helper";
+// types
+import { IFavoriteProject, IProject } from "types";
 // fetch-keys
 import { FAVORITE_PROJECTS_LIST, PROJECTS_LIST } from "constants/fetch-keys";
 
-const navigation = (workspaceSlug: string, projectId: string) => [
-  {
-    name: "Issues",
-    href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    icon: LayerDiagonalIcon,
-  },
-  {
-    name: "Cycles",
-    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    icon: ContrastIcon,
-  },
-  {
-    name: "Modules",
-    href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    icon: PeopleGroupIcon,
-  },
-  {
-    name: "Settings",
-    href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    icon: Cog6ToothIcon,
-  },
-];
-
 export const ProjectSidebarList: FC = () => {
+  const [deleteProjectModal, setDeleteProjectModal] = useState(false);
+  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
+
   // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const { workspaceSlug } = router.query;
   // states
   const [isCreateProjectModal, setCreateProjectModal] = useState(false);
   // theme
@@ -66,6 +47,81 @@ export const ProjectSidebarList: FC = () => {
   );
   const normalProjects = projects?.filter((p) => !p.is_favorite) ?? [];
 
+  const handleAddToFavorites = (project: IProject) => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .addProjectToFavorites(workspaceSlug as string, {
+        project: project.id,
+      })
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? true : p.is_favorite,
+            })),
+          false
+        );
+        mutate(FAVORITE_PROJECTS_LIST(workspaceSlug as string));
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully added the project to favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = (project: IProject) => {
+    if (!workspaceSlug) return;
+
+    projectService
+      .removeProjectFromFavorites(workspaceSlug as string, project.id)
+      .then(() => {
+        mutate<IProject[]>(
+          PROJECTS_LIST(workspaceSlug as string),
+          (prevData) =>
+            (prevData ?? []).map((p) => ({
+              ...p,
+              is_favorite: p.id === project.id ? false : p.is_favorite,
+            })),
+          false
+        );
+        mutate<IFavoriteProject[]>(
+          FAVORITE_PROJECTS_LIST(workspaceSlug as string),
+          (prevData) => (prevData ?? []).filter((p) => p.project !== project.id),
+          false
+        );
+
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Successfully removed the project from favorites.",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't remove the project from favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleDeleteProject = (project: IProject) => {
+    setProjectToDelete(project);
+    setDeleteProjectModal(true);
+  };
+
   const handleCopyText = (projectId: string) => {
     const originURL =
       typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
@@ -81,6 +137,11 @@ export const ProjectSidebarList: FC = () => {
   return (
     <>
       <CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
+      <DeleteProjectModal
+        isOpen={deleteProjectModal}
+        onClose={() => setDeleteProjectModal(false)}
+        data={projectToDelete}
+      />
       <div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
         {favoriteProjects && favoriteProjects.length > 0 && (
           <div className="mt-3 flex flex-col space-y-2 px-6">
@@ -89,97 +150,14 @@ export const ProjectSidebarList: FC = () => {
               const project = favoriteProject.project_detail;
 
               return (
-                <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
-                  {({ open }) => (
-                    <>
-                      <Disclosure.Button
-                        as="div"
-                        className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
-                          sidebarCollapse ? "justify-center" : "justify-between"
-                        }`}
-                      >
-                        <div className="flex items-center gap-x-2">
-                          {project.icon ? (
-                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                              {String.fromCodePoint(parseInt(project.icon))}
-                            </span>
-                          ) : (
-                            <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                              {project?.name.charAt(0)}
-                            </span>
-                          )}
-
-                          {!sidebarCollapse && (
-                            <p className="overflow-hidden text-ellipsis text-[0.875rem]">
-                              {truncateText(project?.name, 20)}
-                            </p>
-                          )}
-                        </div>
-
-                        <div className="flex items-center gap-x-1">
-                          {!sidebarCollapse && (
-                            <CustomMenu ellipsis>
-                              <CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
-                                Copy project link
-                              </CustomMenu.MenuItem>
-                            </CustomMenu>
-                          )}
-                          {!sidebarCollapse && (
-                            <span>
-                              <ChevronDownIcon
-                                className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
-                              />
-                            </span>
-                          )}
-                        </div>
-                      </Disclosure.Button>
-
-                      <Transition
-                        enter="transition duration-100 ease-out"
-                        enterFrom="transform scale-95 opacity-0"
-                        enterTo="transform scale-100 opacity-100"
-                        leave="transition duration-75 ease-out"
-                        leaveFrom="transform scale-100 opacity-100"
-                        leaveTo="transform scale-95 opacity-0"
-                      >
-                        <Disclosure.Panel
-                          className={`${
-                            sidebarCollapse ? "" : "ml-[2.25rem]"
-                          } flex flex-col gap-y-1`}
-                        >
-                          {navigation(workspaceSlug as string, project?.id).map((item) => {
-                            if (item.name === "Cycles" && !project.cycle_view) return;
-                            if (item.name === "Modules" && !project.module_view) return;
-
-                            return (
-                              <Link key={item.name} href={item.href}>
-                                <a
-                                  className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
-                                    item.href === router.asPath
-                                      ? "bg-indigo-50 text-gray-900"
-                                      : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
-                                  } ${sidebarCollapse ? "justify-center" : ""}`}
-                                >
-                                  <div className="grid place-items-center">
-                                    <item.icon
-                                      className={`h-5 w-5 flex-shrink-0 ${
-                                        item.href === router.asPath
-                                          ? "text-gray-900"
-                                          : "text-gray-500 group-hover:text-gray-900"
-                                      } ${!sidebarCollapse ? "mr-3" : ""}`}
-                                      aria-hidden="true"
-                                    />
-                                  </div>
-                                  {!sidebarCollapse && item.name}
-                                </a>
-                              </Link>
-                            );
-                          })}
-                        </Disclosure.Panel>
-                      </Transition>
-                    </>
-                  )}
-                </Disclosure>
+                <SingleSidebarProject
+                  key={project.id}
+                  project={project}
+                  sidebarCollapse={sidebarCollapse}
+                  handleDeleteProject={() => handleDeleteProject(project)}
+                  handleCopyText={() => handleCopyText(project.id)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(project)}
+                />
               );
             })}
           </div>
@@ -190,97 +168,14 @@ export const ProjectSidebarList: FC = () => {
             <>
               {normalProjects.length > 0 ? (
                 normalProjects.map((project) => (
-                  <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
-                    {({ open }) => (
-                      <>
-                        <Disclosure.Button
-                          as="div"
-                          className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
-                            sidebarCollapse ? "justify-center" : "justify-between"
-                          }`}
-                        >
-                          <div className="flex items-center gap-x-2">
-                            {project.icon ? (
-                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                                {String.fromCodePoint(parseInt(project.icon))}
-                              </span>
-                            ) : (
-                              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                                {project?.name.charAt(0)}
-                              </span>
-                            )}
-
-                            {!sidebarCollapse && (
-                              <p className="overflow-hidden text-ellipsis text-[0.875rem]">
-                                {truncateText(project?.name, 20)}
-                              </p>
-                            )}
-                          </div>
-
-                          <div className="flex items-center gap-x-1">
-                            {!sidebarCollapse && (
-                              <CustomMenu ellipsis>
-                                <CustomMenu.MenuItem onClick={() => handleCopyText(project.id)}>
-                                  Copy project link
-                                </CustomMenu.MenuItem>
-                              </CustomMenu>
-                            )}
-                            {!sidebarCollapse && (
-                              <span>
-                                <ChevronDownIcon
-                                  className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
-                                />
-                              </span>
-                            )}
-                          </div>
-                        </Disclosure.Button>
-
-                        <Transition
-                          enter="transition duration-100 ease-out"
-                          enterFrom="transform scale-95 opacity-0"
-                          enterTo="transform scale-100 opacity-100"
-                          leave="transition duration-75 ease-out"
-                          leaveFrom="transform scale-100 opacity-100"
-                          leaveTo="transform scale-95 opacity-0"
-                        >
-                          <Disclosure.Panel
-                            className={`${
-                              sidebarCollapse ? "" : "ml-[2.25rem]"
-                            } flex flex-col gap-y-1`}
-                          >
-                            {navigation(workspaceSlug as string, project?.id).map((item) => {
-                              if (item.name === "Cycles" && !project.cycle_view) return;
-                              if (item.name === "Modules" && !project.module_view) return;
-
-                              return (
-                                <Link key={item.name} href={item.href}>
-                                  <a
-                                    className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
-                                      item.href === router.asPath
-                                        ? "bg-indigo-50 text-gray-900"
-                                        : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
-                                    } ${sidebarCollapse ? "justify-center" : ""}`}
-                                  >
-                                    <div className="grid place-items-center">
-                                      <item.icon
-                                        className={`h-5 w-5 flex-shrink-0 ${
-                                          item.href === router.asPath
-                                            ? "text-gray-900"
-                                            : "text-gray-500 group-hover:text-gray-900"
-                                        } ${!sidebarCollapse ? "mr-3" : ""}`}
-                                        aria-hidden="true"
-                                      />
-                                    </div>
-                                    {!sidebarCollapse && item.name}
-                                  </a>
-                                </Link>
-                              );
-                            })}
-                          </Disclosure.Panel>
-                        </Transition>
-                      </>
-                    )}
-                  </Disclosure>
+                  <SingleSidebarProject
+                    key={project.id}
+                    project={project}
+                    sidebarCollapse={sidebarCollapse}
+                    handleDeleteProject={() => handleDeleteProject(project)}
+                    handleCopyText={() => handleCopyText(project.id)}
+                    handleAddToFavorites={() => handleAddToFavorites(project)}
+                  />
                 ))
               ) : (
                 <div className="space-y-3 text-center">
diff --git a/apps/app/components/project/single-project-card.tsx b/apps/app/components/project/single-project-card.tsx
index c689d2acd..197c9b607 100644
--- a/apps/app/components/project/single-project-card.tsx
+++ b/apps/app/components/project/single-project-card.tsx
@@ -161,10 +161,12 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                       <span>Select to Join</span>
                     </button>
                   ) : (
-                    <span className="rounded bg-green-600 px-2 py-1 text-xs">Member</span>
+                    <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">
+                      Member
+                    </span>
                   )}
                   {project.is_favorite && (
-                    <span className="grid h-6 w-9 place-items-center rounded bg-orange-400">
+                    <span className="grid h-6 w-9 cursor-default place-items-center rounded bg-orange-400">
                       <StarIcon className="h-3 w-3" />
                     </span>
                   )}
@@ -192,7 +194,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
                 position="bottom"
                 theme="dark"
               >
-                <div className="flex items-center gap-1.5 text-xs">
+                <div className="flex cursor-default items-center gap-1.5 text-xs">
                   <CalendarDaysIcon className="h-4 w-4" />
                   {renderShortNumericDateFormat(project.created_at)}
                 </div>
diff --git a/apps/app/components/project/single-sidebar-project.tsx b/apps/app/components/project/single-sidebar-project.tsx
new file mode 100644
index 000000000..f23f51920
--- /dev/null
+++ b/apps/app/components/project/single-sidebar-project.tsx
@@ -0,0 +1,161 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
+// headless ui
+import { Disclosure, Transition } from "@headlessui/react";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { ChevronDownIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon } from "components/icons";
+// helpers
+import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  project: IProject;
+  sidebarCollapse: boolean;
+  handleDeleteProject: () => void;
+  handleCopyText: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+};
+
+const navigation = (workspaceSlug: string, projectId: string) => [
+  {
+    name: "Issues",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    icon: LayerDiagonalIcon,
+  },
+  {
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    icon: ContrastIcon,
+  },
+  {
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    icon: PeopleGroupIcon,
+  },
+  {
+    name: "Settings",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    icon: Cog6ToothIcon,
+  },
+];
+
+export const SingleSidebarProject: React.FC<Props> = ({
+  project,
+  sidebarCollapse,
+  handleDeleteProject,
+  handleCopyText,
+  handleAddToFavorites,
+  handleRemoveFromFavorites,
+}) => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  return (
+    <Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
+      {({ open }) => (
+        <>
+          <div className="flex items-center gap-x-1">
+            <Disclosure.Button
+              as="div"
+              className={`flex w-full cursor-pointer select-none items-center rounded-md py-2 text-left text-sm font-medium ${
+                sidebarCollapse ? "justify-center" : "justify-between"
+              }`}
+            >
+              <div className="flex items-center gap-x-2">
+                {project.icon ? (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                    {String.fromCodePoint(parseInt(project.icon))}
+                  </span>
+                ) : (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                    {project?.name.charAt(0)}
+                  </span>
+                )}
+
+                {!sidebarCollapse && (
+                  <p className="overflow-hidden text-ellipsis text-[0.875rem]">
+                    {truncateText(project?.name, 20)}
+                  </p>
+                )}
+              </div>
+              {!sidebarCollapse && (
+                <span>
+                  <ChevronDownIcon className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`} />
+                </span>
+              )}
+            </Disclosure.Button>
+
+            {!sidebarCollapse && (
+              <CustomMenu ellipsis>
+                <CustomMenu.MenuItem onClick={handleDeleteProject}>
+                  Delete project
+                </CustomMenu.MenuItem>
+                {handleAddToFavorites && (
+                  <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                    Add to favorites
+                  </CustomMenu.MenuItem>
+                )}
+                {handleRemoveFromFavorites && (
+                  <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                    Remove from favorites
+                  </CustomMenu.MenuItem>
+                )}
+                <CustomMenu.MenuItem onClick={handleCopyText}>
+                  Copy project link
+                </CustomMenu.MenuItem>
+              </CustomMenu>
+            )}
+          </div>
+
+          <Transition
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Disclosure.Panel
+              className={`${sidebarCollapse ? "" : "ml-[2.25rem]"} flex flex-col gap-y-1`}
+            >
+              {navigation(workspaceSlug as string, project?.id).map((item) => {
+                if (item.name === "Cycles" && !project.cycle_view) return;
+                if (item.name === "Modules" && !project.module_view) return;
+
+                return (
+                  <Link key={item.name} href={item.href}>
+                    <a
+                      className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
+                        item.href === router.asPath
+                          ? "bg-indigo-50 text-gray-900"
+                          : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"
+                      } ${sidebarCollapse ? "justify-center" : ""}`}
+                    >
+                      <div className="grid place-items-center">
+                        <item.icon
+                          className={`h-5 w-5 flex-shrink-0 ${
+                            item.href === router.asPath
+                              ? "text-gray-900"
+                              : "text-gray-500 group-hover:text-gray-900"
+                          } ${!sidebarCollapse ? "mr-3" : ""}`}
+                          aria-hidden="true"
+                        />
+                      </div>
+                      {!sidebarCollapse && item.name}
+                    </a>
+                  </Link>
+                );
+              })}
+            </Disclosure.Panel>
+          </Transition>
+        </>
+      )}
+    </Disclosure>
+  );
+};
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index a95c10ee0..630732a3e 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -120,21 +120,27 @@ const MenuItem: React.FC<MenuItemProps> = ({
   onClick,
   className = "",
 }) => (
-  <Menu.Item
-    as="div"
-    className={({ active }) =>
-      `${className} ${
-        active ? "bg-hover-gray" : ""
-      } cursor-pointer select-none gap-2 truncate rounded px-1 py-1.5 text-gray-500`
-    }
-  >
-    {({ close }) =>
+  <Menu.Item as="div">
+    {({ active, close }) =>
       renderAs === "a" ? (
         <Link href={href ?? ""}>
-          <a onClick={close}>{children}</a>
+          <a
+            className={`${className} ${
+              active ? "bg-hover-gray" : ""
+            } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
+            onClick={close}
+          >
+            {children}
+          </a>
         </Link>
       ) : (
-        <button type="button" onClick={onClick}>
+        <button
+          type="button"
+          className={`${className} ${
+            active ? "bg-hover-gray" : ""
+          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-gray-500`}
+          onClick={onClick}
+        >
           {children}
         </button>
       )
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index df3518b64..c90af0d23 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -15,7 +15,7 @@ import AppLayout from "layouts/app-layout";
 import projectService from "services/project.service";
 import workspaceService from "services/workspace.service";
 // components
-import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
+import { DeleteProjectModal } from "components/project";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // hooks
 import useToast from "hooks/use-toast";
@@ -138,7 +138,7 @@ const GeneralSettings: NextPage<UserAuth> = (props) => {
       }
       settingsLayout
     >
-      <ConfirmProjectDeletion
+      <DeleteProjectModal
         data={projectDetails ?? null}
         isOpen={Boolean(selectProject)}
         onClose={() => setSelectedProject(null)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 4569552ac..e877546c9 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -10,8 +10,7 @@ import useWorkspaces from "hooks/use-workspaces";
 import AppLayout from "layouts/app-layout";
 // components
 import { JoinProjectModal } from "components/project/join-project-modal";
-import { SingleProjectCard } from "components/project";
-import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
+import { DeleteProjectModal, SingleProjectCard } from "components/project";
 // ui
 import { HeaderButton, EmptySpace, EmptySpaceItem, Loader } from "components/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
@@ -71,7 +70,7 @@ const ProjectsPage: NextPage = () => {
             });
         }}
       />
-      <ConfirmProjectDeletion
+      <DeleteProjectModal
         isOpen={!!deleteProject}
         onClose={() => setDeleteProject(null)}
         data={projects?.find((item) => item.id === deleteProject) ?? null}
@@ -102,7 +101,7 @@ const ProjectsPage: NextPage = () => {
               </EmptySpace>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-9">
+            <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
               {projects.map((project) => (
                 <SingleProjectCard
                   key={project.id}