diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index 6b4c71f7c2..43272e5776 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -1,18 +1,19 @@
 import { Card, Menu, MenuItem } from '@material-ui/core';
 import { useStyles } from './ProjectCard.styles';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
-
 import { ReactComponent as ProjectIcon } from '../../../assets/icons/projectIcon.svg';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import Dialogue from '../../common/Dialogue';
-import useProjectApi from '../../../hooks/api/actions/useProjectApi/useProjectApi';
-import useProjects from '../../../hooks/api/getters/useProjects/useProjects';
+import Dialogue from 'component/common/Dialogue';
+import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
+import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { Delete, Edit } from '@material-ui/icons';
-import { getProjectEditPath } from '../../../utils/route-path-helpers';
-import PermissionIconButton from '../../common/PermissionIconButton/PermissionIconButton';
-import useToast from '../../../hooks/useToast';
-import { UPDATE_PROJECT } from '../../providers/AccessProvider/permissions';
+import { getProjectEditPath } from 'utils/route-path-helpers';
+import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
+import useToast from 'hooks/useToast';
+import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
+import { formatUnknownError } from 'utils/format-unknown-error';
+
 interface IProjectCardProps {
     name: string;
     featureCount: number;
@@ -22,7 +23,7 @@ interface IProjectCardProps {
     onHover: () => void;
 }
 
-const ProjectCard = ({
+export const ProjectCard = ({
     name,
     featureCount,
     health,
@@ -43,6 +44,23 @@ const ProjectCard = ({
         setAnchorEl(e.currentTarget);
     };
 
+    const onRemoveProject = async (e: Event) => {
+        e.preventDefault();
+        try {
+            await deleteProject(id);
+            refetchProjectOverview();
+            setToastData({
+                title: 'Deleted project',
+                type: 'success',
+                text: 'Successfully deleted project',
+            });
+        } catch (e: unknown) {
+            setToastApiError(formatUnknownError(e));
+        }
+        setShowDelDialog(false);
+        setAnchorEl(null);
+    };
+
     return (
         <Card className={styles.projectCard} onMouseEnter={onHover}>
             <div className={styles.header} data-loading>
@@ -71,7 +89,6 @@ const ProjectCard = ({
                     <MenuItem
                         onClick={e => {
                             e.preventDefault();
-
                             history.push(getProjectEditPath(id));
                         }}
                     >
@@ -115,27 +132,8 @@ const ProjectCard = ({
             </div>
             <Dialogue
                 open={showDelDialog}
-                onClick={e => {
-                    e.preventDefault();
-                    deleteProject(id)
-                        .then(() => {
-                            setToastData({
-                                title: 'Deleted project',
-                                type: 'success',
-                                text: 'Successfully deleted project',
-                            });
-                            refetchProjectOverview();
-                        })
-                        .catch(e => {
-                            setToastApiError(e.message);
-                        })
-                        .finally(() => {
-                            setShowDelDialog(false);
-                            setAnchorEl(null);
-                        });
-                }}
-                onClose={e => {
-                    e.preventDefault();
+                onClick={onRemoveProject}
+                onClose={() => {
                     setAnchorEl(null);
                     setShowDelDialog(false);
                 }}
@@ -144,5 +142,3 @@ const ProjectCard = ({
         </Card>
     );
 };
-
-export default ProjectCard;