diff --git a/apps/app/components/project/join-project-modal.tsx b/apps/app/components/project/join-project-modal.tsx
index e0517ac6a..3128a0a42 100644
--- a/apps/app/components/project/join-project-modal.tsx
+++ b/apps/app/components/project/join-project-modal.tsx
@@ -19,6 +19,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
+
     onJoin()
       .then(() => {
         setIsJoiningLoading(false);
@@ -59,7 +60,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
                   <Dialog.Title
                     as="h3"
diff --git a/apps/app/components/project/sidebar-list.tsx b/apps/app/components/project/sidebar-list.tsx
index 8018d19a5..9e37426de 100644
--- a/apps/app/components/project/sidebar-list.tsx
+++ b/apps/app/components/project/sidebar-list.tsx
@@ -48,7 +48,7 @@ export const ProjectSidebarList: FC = () => {
 
   const { projects: allProjects } = useProjects();
 
-  const joinedProjects = allProjects?.filter((p) => p.sort_order);
+  const joinedProjects = allProjects?.filter((p) => p.is_member);
   const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
 
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
@@ -201,7 +201,7 @@ export const ProjectSidebarList: FC = () => {
                               key={project.id}
                               draggableId={project.id}
                               index={index}
-                              isDragDisabled={project.sort_order === null}
+                              isDragDisabled={!project.is_member}
                             >
                               {(provided, snapshot) => (
                                 <div ref={provided.innerRef} {...provided.draggableProps}>
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index 4dd6a234e..5c671e32a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -28,6 +28,8 @@ import type { NextPage } from "next";
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
 
 const ProjectsPage: NextPage = () => {
   // router
@@ -39,7 +41,7 @@ const ProjectsPage: NextPage = () => {
   const { user } = useUserAuth();
   // context data
   const { activeWorkspace } = useWorkspaces();
-  const { projects } = useProjects();
+  const { projects, mutateProjects } = useProjects();
   // states
   const [deleteProject, setDeleteProject] = useState<string | null>(null);
   const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
@@ -101,6 +103,14 @@ const ProjectsPage: NextPage = () => {
             })
             .then(async () => {
               mutate(PROJECT_MEMBERS(project.id));
+              mutateProjects<IProject[]>(
+                (prevData) =>
+                  (prevData ?? []).map((p) => ({
+                    ...p,
+                    is_member: p.id === project.id ? true : p.is_member,
+                  })),
+                false
+              );
               setSelectedProjectToJoin(null);
             })
             .catch(() => {