diff --git a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
index f23b74a09..f9b6e5a53 100644
--- a/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
+++ b/src/containers/Projects/containers/ProjectFormDialog/ProjectForm.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import moment from 'moment';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
+import { Intent } from '@blueprintjs/core';
 import { AppToaster } from 'components';
 import ProjectFormContent from './ProjectFormContent';
 import { CreateProjectFormSchema } from './ProjectForm.schema';
diff --git a/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx b/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
index ce28cd7dd..a0fe61fc5 100644
--- a/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
@@ -65,6 +65,7 @@ function ProjectFormFields() {
       <FFormGroup
         label={intl.get('projects.dialog.project_name')}
         name={'name'}
+        labelInfo={<FieldRequiredHint />}
       >
         <FInputGroup name="name" />
       </FFormGroup>
@@ -96,6 +97,7 @@ function ProjectFormFields() {
       <FFormGroup
         name={'cost_estimate'}
         label={intl.get('projects.dialog.cost_estimate')}
+        labelInfo={<FieldRequiredHint />}
       >
         <ControlGroup>
           <InputPrependText text={'USD'} />
diff --git a/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx b/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
index 1756178b8..bc33b374d 100644
--- a/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
+++ b/src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
@@ -6,6 +6,7 @@ import { DataTable } from 'components';
 import { TABLES } from 'common/tables';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+import ProjectsEmptyStatus from './ProjectsEmptyStatus';
 import { useProjectsListContext } from './ProjectsListProvider';
 import { useMemorizedColumnsWidths } from 'hooks';
 import { useProjectsListColumns, ActionsMenu } from './components';
@@ -76,6 +77,11 @@ function ProjectsDataTable({
     });
   };
 
+  // Display project empty status instead of the table.
+  if (isEmptyStatus) {
+    return <ProjectsEmptyStatus />;
+  }
+
   return (
     <ProjectsTable
       columns={columns}
@@ -97,7 +103,7 @@ function ProjectsDataTable({
       payload={{
         onViewDetails: handleViewDetailProject,
         onEdit: handleEditProject,
-        onDelete:handleDeleteProject,
+        onDelete: handleDeleteProject,
         onNewTask: handleNewTaskButtonClick,
       }}
     />
diff --git a/src/containers/Projects/containers/ProjectsLanding/ProjectsEmptyStatus.tsx b/src/containers/Projects/containers/ProjectsLanding/ProjectsEmptyStatus.tsx
new file mode 100644
index 000000000..6d6110f5f
--- /dev/null
+++ b/src/containers/Projects/containers/ProjectsLanding/ProjectsEmptyStatus.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, Intent } from '@blueprintjs/core';
+import { EmptyStatus, FormattedMessage as T } from 'components';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+function ProjectsEmptyStatus({
+  // #withDialogActions
+  openDialog,
+}) {
+  // Handle new project button click.
+  const handleNewProjectClick = () => {
+    openDialog('project-form', {});
+  };
+
+  return (
+    <EmptyStatus
+      title={<T id="projects.empty_status.title" />}
+      description={
+        <p>
+          <T id="projects.empty_status.description" />
+        </p>
+      }
+      action={
+        <React.Fragment>
+          <Button
+            intent={Intent.PRIMARY}
+            large={true}
+            onClick={handleNewProjectClick}
+          >
+            <T id="projects.empty_status.action" />
+          </Button>
+          <Button intent={Intent.NONE} large={true}>
+            <T id={'learn_more'} />
+          </Button>
+        </React.Fragment>
+      }
+    />
+  );
+}
+
+export default compose(withDialogActions)(ProjectsEmptyStatus);
diff --git a/src/containers/Projects/hooks/index.ts b/src/containers/Projects/hooks/index.ts
index 2f2a22839..7ab8d7e0f 100644
--- a/src/containers/Projects/hooks/index.ts
+++ b/src/containers/Projects/hooks/index.ts
@@ -84,7 +84,7 @@ export function useProject(projectId, props, requestProps) {
     [t.PROJECT, projectId],
     { method: 'get', url: `projects/${projectId}`, ...requestProps },
     {
-      select: (res) => res.data.projects,
+      select: (res) => res.data.project,
       defaultData: {},
       ...props,
     },
diff --git a/src/lang/en/index.json b/src/lang/en/index.json
index 50348fb3b..9a864db1f 100644
--- a/src/lang/en/index.json
+++ b/src/lang/en/index.json
@@ -2061,6 +2061,9 @@
   "projects.dialog.edit_success_message": "The project has been edited successfully.",
   "projects.alert.delete_message": "The deleted project has been deleted successfully.",
   "projects.alert.once_delete_this_project": "Once you delete this project, you won't be able to restore it later. Are you sure you want to delete this project?",
+  "projects.empty_status.title":"",
+  "projects.empty_status.description":"",
+  "projects.empty_status.action":"New Project",
   "project_task.dialog.new_task": "New Task",
   "project_task.dialog.task_name": "Task Name",
   "project_task.dialog.estimated_hours": "Estimate Hours",