diff --git a/apps/web/src/views/board/index.tsx b/apps/web/src/views/board/index.tsx
index beedd806..9fd69809 100644
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -375,7 +375,7 @@ export default function BoardPage() {
             />
             <Filters
               labels={boardData?.labels ?? []}
-              members={boardData?.workspace.members ?? []}
+              members={boardData?.workspace.members?.filter(member => member.user !== null) ?? []}
               position="left"
               isLoading={!boardData}
             />
diff --git a/apps/web/src/views/boards/index.tsx b/apps/web/src/views/boards/index.tsx
index 85163bc0..4d572792 100644
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -13,7 +13,7 @@ import { ImportBoardsForm } from "./components/ImportBoardsForm";
 import { NewBoardForm } from "./components/NewBoardForm";
 
 export default function BoardsPage() {
-  const { openModal, modalContentType } = useModal();
+  const { openModal, modalContentType, isOpen } = useModal();
   const { workspace, hasLoaded } = useWorkspace();
 
   if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
@@ -50,12 +50,35 @@ export default function BoardsPage() {
           </div>
         </div>
 
-        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
-          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
-          {modalContentType === "NEW_BOARD" && <NewBoardForm />}
-          {modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-        </Modal>
+        <>
+          <Modal
+            modalSize="md"
+            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+          >
+            <FeedbackModal />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_BOARD"}
+          >
+            <NewBoardForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "IMPORT_BOARDS"}
+          >
+            <ImportBoardsForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+          >
+            <NewWorkspaceForm />
+          </Modal>
+        </>
 
         <div className="flex h-full flex-row">
           <BoardsList />
diff --git a/apps/web/src/views/card/index.tsx b/apps/web/src/views/card/index.tsx
index f7b9e5ef..1634bee2 100644
--- a/apps/web/src/views/card/index.tsx
+++ b/apps/web/src/views/card/index.tsx
@@ -142,6 +142,7 @@ export default function CardPage() {
     openModal,
     getModalState,
     clearModalState,
+    isOpen,
   } = useModal();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
@@ -305,47 +306,86 @@ export default function CardPage() {
           </div>
         </div>
 
-        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
-          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
-          {modalContentType === "NEW_LABEL" && (
+        <>
+          <Modal
+            modalSize="md"
+            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+          >
+            <FeedbackModal />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_LABEL"}
+          >
             <LabelForm boardPublicId={boardId ?? ""} refetch={refetchCard} />
-          )}
-          {modalContentType === "EDIT_LABEL" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "EDIT_LABEL"}
+          >
             <LabelForm
               boardPublicId={boardId ?? ""}
               refetch={refetchCard}
               isEdit
             />
-          )}
-          {modalContentType === "DELETE_LABEL" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "DELETE_LABEL"}
+          >
             <DeleteLabelConfirmation
               refetch={refetchCard}
               labelPublicId={entityId}
             />
-          )}
-          {modalContentType === "DELETE_CARD" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "DELETE_CARD"}
+          >
             <DeleteCardConfirmation
               boardPublicId={boardId ?? ""}
               cardPublicId={cardId}
             />
-          )}
-          {modalContentType === "DELETE_COMMENT" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "DELETE_COMMENT"}
+          >
             <DeleteCommentConfirmation
               cardPublicId={cardId}
               commentPublicId={entityId}
             />
-          )}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-          {modalContentType === "ADD_CHECKLIST" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+          >
+            <NewWorkspaceForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "ADD_CHECKLIST"}
+          >
             <NewChecklistForm cardPublicId={cardId} />
-          )}
-          {modalContentType === "DELETE_CHECKLIST" && (
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "DELETE_CHECKLIST"}
+          >
             <DeleteChecklistConfirmation
               cardPublicId={cardId}
               checklistPublicId={entityId}
             />
-          )}
-        </Modal>
+          </Modal>
+        </>
       </div>
     </>
   );
diff --git a/apps/web/src/views/members/index.tsx b/apps/web/src/views/members/index.tsx
index 1a621d2e..a3501122 100644
--- a/apps/web/src/views/members/index.tsx
+++ b/apps/web/src/views/members/index.tsx
@@ -19,7 +19,7 @@ import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation"
 import { InviteMemberForm } from "./components/InviteMemberForm";
 
 export default function MembersPage() {
-  const { modalContentType, openModal } = useModal();
+  const { modalContentType, openModal, isOpen } = useModal();
   const { workspace } = useWorkspace();
 
   const { data, isLoading } = api.workspace.byId.useQuery(
@@ -222,12 +222,35 @@ export default function MembersPage() {
           </div>
         </div>
 
-        <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
-          {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
-          {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-          {modalContentType === "INVITE_MEMBER" && <InviteMemberForm />}
-          {modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />}
-        </Modal>
+        <>
+          <Modal
+            modalSize="md"
+            isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+          >
+            <FeedbackModal />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+          >
+            <NewWorkspaceForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "INVITE_MEMBER"}
+          >
+            <InviteMemberForm />
+          </Modal>
+
+          <Modal
+            modalSize="sm"
+            isVisible={isOpen && modalContentType === "REMOVE_MEMBER"}
+          >
+            <DeleteMemberConfirmation />
+          </Modal>
+        </>
       </div>
     </>
   );
diff --git a/apps/web/src/views/settings/index.tsx b/apps/web/src/views/settings/index.tsx
index 8e9e7d1d..356c886f 100644
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -26,7 +26,7 @@ import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
 import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
 
 export default function SettingsPage() {
-  const { modalContentType, openModal } = useModal();
+  const { modalContentType, openModal, isOpen } = useModal();
   const { workspace } = useWorkspace();
   const utils = api.useUtils();
   const { showPopup } = usePopup();
@@ -322,22 +322,49 @@ export default function SettingsPage() {
             </div>
           </div>
 
-          <Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}>
-            {modalContentType === "NEW_FEEDBACK" && <FeedbackModal />}
-            {modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
-            {modalContentType === "DELETE_WORKSPACE" && (
+          <>
+            <Modal
+              modalSize="md"
+              isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+            >
+              <FeedbackModal />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+            >
+              <NewWorkspaceForm />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
+            >
               <DeleteWorkspaceConfirmation />
-            )}
-            {modalContentType === "UPDATE_WORKSPACE_URL" && (
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "UPDATE_WORKSPACE_URL"}
+            >
               <CustomURLConfirmation workspacePublicId={workspace.publicId} />
-            )}
-            {modalContentType === "DELETE_ACCOUNT" && (
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
+            >
               <DeleteAccountConfirmation />
-            )}
-            {modalContentType === "CHANGE_PASSWORD" && (
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
+            >
               <ChangePasswordFormConfirmation />
-            )}
-          </Modal>
+            </Modal>
+          </>
         </div>
       </div>
     </>