diff --git a/pephub/routers/api/v1/namespace.py b/pephub/routers/api/v1/namespace.py
index d7976534..bc9b75eb 100644
--- a/pephub/routers/api/v1/namespace.py
+++ b/pephub/routers/api/v1/namespace.py
@@ -425,6 +425,7 @@ async def remove_from_stars(
         return JSONResponse(
             content={
                 "message": "PEP was removed from favorites.",
+                "namespace": namespace,
                 "registry": f"{project.namespace}/{project.name}:{project.tag}",
             },
             status_code=202,
diff --git a/web/src/api/namespace.ts b/web/src/api/namespace.ts
index 968b4388..4214709f 100644
--- a/web/src/api/namespace.ts
+++ b/web/src/api/namespace.ts
@@ -58,6 +58,18 @@ export interface StarsResponse {
   results: ProjectAnnotation[];
 }
 
+interface AddStarResponse {
+  namespace: string;
+  registry_path: string;
+  message: string;
+}
+
+interface RemoveStarResponse {
+  message: string;
+  registry: string;
+  namespace: string;
+}
+
 export const getNamespaceInfo = (namespace: string, token: string | null = null) => {
   const url = `${API_BASE}/namespaces/${namespace}/`; // note the trailing slash
   if (!token) {
@@ -270,7 +282,7 @@ export const starProject = (
 ) => {
   const url = `${API_BASE}/namespaces/${namespace}/stars`;
   return axios
-    .post(
+    .post<AddStarResponse>(
       url,
       {
         namespace: star_namespace,
@@ -298,7 +310,7 @@ export const removeStar = (
 ) => {
   const url = `${API_BASE}/namespaces/${namespace}/stars`;
   return axios
-    .delete(url, {
+    .delete<RemoveStarResponse>(url, {
       headers: {
         Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json',
diff --git a/web/src/components/forms/blank-project-form.tsx b/web/src/components/forms/blank-project-form.tsx
index fa07ebc0..b51252b6 100644
--- a/web/src/components/forms/blank-project-form.tsx
+++ b/web/src/components/forms/blank-project-form.tsx
@@ -1,5 +1,4 @@
 import { ErrorMessage } from '@hookform/error-message';
-import { FC } from 'react';
 import { Tab, Tabs } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 
@@ -125,6 +124,7 @@ sample_table: samples.csv
           Private
         </label>
       </div>
+
       <span className="fs-4 d-flex align-items-center">
         <select
           id="blank-namespace-select"
@@ -200,7 +200,7 @@ sample_table: samples.csv
       </div>
       <Tabs defaultActiveKey="samples" id="blank-project-tabs" className="mt-3">
         <Tab eventKey="samples" title="Samples">
-          <div className="p-2 border border-top-1">
+          <div className="p-2 -1">
             <SampleTable
               height={300}
               data={sampleTable}
@@ -211,7 +211,7 @@ sample_table: samples.csv
           </div>
         </Tab>
         <Tab eventKey="config" title="Config">
-          <div className="p-1 border border-top-0">
+          <div className="p-1 -0">
             <ProjectConfigEditor
               value={configYAML}
               setValue={(data) => {
diff --git a/web/src/components/layout/project-data-nav.tsx b/web/src/components/layout/project-data-nav.tsx
index 0c18eab8..83c708ad 100644
--- a/web/src/components/layout/project-data-nav.tsx
+++ b/web/src/components/layout/project-data-nav.tsx
@@ -1,26 +1,23 @@
 import { FC } from 'react';
 
 import { ProjectViewAnnotation } from '../../../types';
-import { ProjectViewsResponse } from '../../api/project';
+import { useProjectPage } from '../../contexts/project-page-context';
 import { ViewSelector } from '../project/view-selector';
 
 type PageView = 'samples' | 'subsamples' | 'config';
 
 interface NavProps {
-  pageView: string;
-  setPageView: (view: PageView) => void;
   samplesIsDirty: boolean;
   subsamplesIsDirty: boolean;
   configIsDirty: boolean;
   projectViewIsLoading: boolean;
-  projectViews: ProjectViewsResponse | undefined;
+  projectViews: ProjectViewAnnotation[] | undefined;
   projectView: string | undefined;
   setProjectView: (view: string | undefined) => void;
 }
 
 interface ViewButtonProps {
   view: PageView;
-  setPageView: (view: PageView) => void;
   icon: string;
   text: string;
   isDirty: boolean;
@@ -43,14 +40,24 @@ const ViewButton: FC<ViewButtonProps> = ({ view, setPageView, icon, text, isDirt
         <span className="text-xs">
           <i className="bi bi-circle-fill ms-1 text-transparent"></i>
         </span>
-      )}
-    </button>
-  </div>
-);
+        <i className={icon}></i>
+        {text}
+        {isDirty ? (
+          <span className="text-xs">
+            <i className="bi bi-circle-fill ms-1 text-primary-light"></i>
+          </span>
+        ) : (
+          //  spacer
+          <span className="text-xs">
+            <i className="bi bi-circle-fill ms-1 text-transparent"></i>
+          </span>
+        )}
+      </button>
+    </div>
+  );
+};
 
 export const ProjectDataNav: FC<NavProps> = ({
-  pageView,
-  setPageView,
   samplesIsDirty,
   subsamplesIsDirty,
   configIsDirty,
@@ -59,6 +66,8 @@ export const ProjectDataNav: FC<NavProps> = ({
   projectView,
   setProjectView,
 }) => {
+  const { pageView } = useProjectPage();
+
   return (
     <div className="h-100 w-100 d-flex flex-row align-items-center">
       <div
@@ -93,7 +102,6 @@ export const ProjectDataNav: FC<NavProps> = ({
       >
         <ViewButton
           view="subsamples"
-          setPageView={setPageView}
           icon="bi bi-grid-3x3-gap-fill me-2"
           text="Subsamples"
           isDirty={subsamplesIsDirty}
diff --git a/web/src/components/pop/pop-card.tsx b/web/src/components/pop/pop-card.tsx
index 3ec5c079..d6b931a2 100644
--- a/web/src/components/pop/pop-card.tsx
+++ b/web/src/components/pop/pop-card.tsx
@@ -19,7 +19,8 @@ interface Props {
 
 export const PopCard: FC<Props> = ({ project, currentPeps, parentName, parentNamespace, parentTag }) => {
   const { user } = useSession();
-  const { data: stars } = useNamespaceStars(user?.login, {}, true); // only fetch stars if the namespace is the user's
+  const { starsQuery } = useNamespaceStars(user?.login || '/', {}, true); // only fetch stars if the namespace is the user's
+  const stars = starsQuery.data;
 
   const [showForkPEPModal, setShowForkPEPModal] = useState(false);
   const [showRemovePEPModal, setShowRemovePEPModal] = useState(false);
diff --git a/web/src/components/project/project-card-dropdown.tsx b/web/src/components/project/project-card-dropdown.tsx
index 07d1ae8d..6b006680 100644
--- a/web/src/components/project/project-card-dropdown.tsx
+++ b/web/src/components/project/project-card-dropdown.tsx
@@ -5,6 +5,7 @@ import toast from 'react-hot-toast';
 import { ProjectAnnotation } from '../../../types';
 import { useAddStar } from '../../hooks/mutations/useAddStar';
 import { useRemoveStar } from '../../hooks/mutations/useRemoveStar';
+import { useNamespaceStars } from '../../hooks/queries/useNamespaceStars';
 import { useSession } from '../../hooks/useSession';
 import { copyToClipboard } from '../../utils/etc';
 import { LoadingSpinner } from '../spinners/loading-spinner';
@@ -22,22 +23,29 @@ export const ProjectCardDropdown: FC<Props> = (props) => {
   const { project, isStarred, copied, setCopied, setShowDeletePEPModal, setShowForkPEPModal } = props;
   const { user } = useSession();
 
-  const starAddMutation = useAddStar(user?.login || '', project.namespace, project.name, project.tag);
-  const starRemoveMutation = useRemoveStar(user?.login || '', project.namespace, project.name, project.tag);
+  const { addStarMutation, removeStarMutation } = useNamespaceStars(user?.login || '/', {}, true);
 
   return (
     <Dropdown as={ButtonGroup}>
       <Button
-        disabled={starAddMutation.isPending || starRemoveMutation.isPending}
+        disabled={addStarMutation.isPending || removeStarMutation.isPending}
         variant="outline-dark"
         size="sm"
         onClick={() => {
           if (!user) {
             toast.error('You must be logged in to star a project!');
           } else if (isStarred) {
-            starRemoveMutation.mutate();
+            removeStarMutation.mutate({
+              namespaceToRemove: project.namespace,
+              projectNameToRemove: project.name,
+              projectTagToRemove: project.tag,
+            });
           } else {
-            starAddMutation.mutate();
+            addStarMutation.mutate({
+              namespaceToStar: project.namespace,
+              projectNameToStar: project.name,
+              projectTagToStar: project.tag,
+            });
           }
         }}
       >
@@ -46,7 +54,7 @@ export const ProjectCardDropdown: FC<Props> = (props) => {
             <div className="d-flex align-items-center">
               <i className="text-primary bi bi-star-fill me-1"></i>
               <span className="text-primary">
-                {starRemoveMutation.isPending ? (
+                {removeStarMutation.isPending ? (
                   <Fragment>
                     {copied ? 'Copied!' : 'Star'}
                     <LoadingSpinner className="w-4 h-4 spin ms-1 mb-tiny fill-secondary" />
@@ -62,7 +70,7 @@ export const ProjectCardDropdown: FC<Props> = (props) => {
             <div className="d-flex align-items-center">
               <i className="bi bi-star me-1"></i>
               <span>
-                {starAddMutation.isPending ? (
+                {addStarMutation.isPending ? (
                   <Fragment>
                     {copied ? 'Copied!' : 'Star'}
                     <LoadingSpinner className="w-4 h-4 spin ms-1 mb-tiny fill-secondary" />
diff --git a/web/src/components/project/project-card.tsx b/web/src/components/project/project-card.tsx
index a4c28120..1a40c92b 100644
--- a/web/src/components/project/project-card.tsx
+++ b/web/src/components/project/project-card.tsx
@@ -15,7 +15,9 @@ interface Props {
 
 export const ProjectCard: FC<Props> = ({ project }) => {
   const { user } = useSession();
-  const { data: stars } = useNamespaceStars(user?.login, {}, true); // only fetch stars if the namespace is the user's
+
+  const { starsQuery } = useNamespaceStars(user?.login || '/', {}, true); // only fetch stars if the namespace is the user's
+  const stars = starsQuery.data;
 
   // state
   const [showDeletePEPModal, setShowDeletePEPModal] = useState(false);
diff --git a/web/src/components/project/project-info-footer.tsx b/web/src/components/project/project-info-footer.tsx
new file mode 100644
index 00000000..61bd0327
--- /dev/null
+++ b/web/src/components/project/project-info-footer.tsx
@@ -0,0 +1,40 @@
+import { Fragment } from 'react';
+
+import { useProjectPage } from '../../contexts/project-page-context';
+import { dateStringToDateTime } from '../../utils/dates';
+
+export const ProjectInfoFooter = () => {
+  const { projectAnnotationQuery } = useProjectPage();
+
+  const projectInfo = projectAnnotationQuery.data;
+
+  return (
+    <div className="px-4">
+      <div className="d-flex flex-row align-items-center text-muted mt-1">
+        <small className="d-flex flex-row align-items-center justify-content-between w-100">
+          <span className="me-3">
+            <i className="bi bi-calendar3"></i>
+            <span className="mx-1">Created:</span>
+            <span id="project-submission-date">{dateStringToDateTime(projectInfo?.submission_date || '')}</span>
+            <i className="ms-4 bi bi-calendar3"></i>
+            <span className="mx-1">Updated:</span>
+            <span id="project-update-date">{dateStringToDateTime(projectInfo?.last_update_date || '')}</span>
+          </span>
+          <span className="">
+            {projectInfo?.forked_from && (
+              <span className="me-2 p-1 border rounded fw-bold">
+                <Fragment>
+                  <i className="bi bi-bezier2"></i>
+                  <span className="ms-1">Forked from</span>
+                  <a className="text-decoration-none ms-1" href={`/${projectInfo?.forked_from.replace(':', '?tag=')}`}>
+                    {projectInfo?.forked_from}
+                  </a>
+                </Fragment>
+              </span>
+            )}
+          </span>
+        </small>
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/components/project/project-page-description.tsx b/web/src/components/project/project-page-description.tsx
new file mode 100644
index 00000000..9190cdbf
--- /dev/null
+++ b/web/src/components/project/project-page-description.tsx
@@ -0,0 +1,55 @@
+import { Fragment, useRef, useState } from 'react';
+
+import { useProjectPage } from '../../contexts/project-page-context';
+import { Markdown } from '../markdown/render';
+
+const MAX_DESC_HEIGHT = 200;
+
+export const ProjectDescription = () => {
+  const { projectAnnotationQuery } = useProjectPage();
+
+  const projectDescriptionRef = useRef<HTMLDivElement>(null);
+  const showMoreButton = projectDescriptionRef.current?.clientHeight! >= MAX_DESC_HEIGHT;
+  const [showMoreDescription, setShowMoreDescription] = useState(false);
+
+  const projectInfo = projectAnnotationQuery.data;
+
+  return (
+    <Fragment>
+      <div className="d-flex flex-row align-items-center justify-content-between px-4 w-100 border-bottom">
+        <div ref={projectDescriptionRef} className="w-100" style={{ maxHeight: MAX_DESC_HEIGHT, overflow: 'hidden' }}>
+          <Markdown>{projectInfo?.description || 'No description'}</Markdown>
+        </div>
+      </div>
+      {showMoreButton && (
+        <div className="d-flex flex-row justify-content-center mb-2 translate-y-1-up">
+          {showMoreDescription ? (
+            <button
+              className="btn btn-sm btn-dark rounded-pill"
+              onClick={() => {
+                projectDescriptionRef.current?.style.setProperty('max-height', `${MAX_DESC_HEIGHT}px`);
+                projectDescriptionRef.current?.style.setProperty('overflow', 'hidden');
+                setShowMoreDescription(false);
+              }}
+            >
+              <i className="bi bi-arrow-up" />
+              Less
+            </button>
+          ) : (
+            <button
+              className="btn btn-sm btn-dark rounded-pill"
+              onClick={() => {
+                projectDescriptionRef.current?.style.removeProperty('max-height');
+                projectDescriptionRef.current?.style.removeProperty('overflow');
+                setShowMoreDescription(true);
+              }}
+            >
+              <i className="bi bi-arrow-down" />
+              More
+            </button>
+          )}
+        </div>
+      )}
+    </Fragment>
+  );
+};
diff --git a/web/src/components/project/project-page-header-bar.tsx b/web/src/components/project/project-page-header-bar.tsx
new file mode 100644
index 00000000..616c65db
--- /dev/null
+++ b/web/src/components/project/project-page-header-bar.tsx
@@ -0,0 +1,245 @@
+import { Fragment, useEffect, useState } from 'react';
+import { Breadcrumb, Dropdown } from 'react-bootstrap';
+import { useSearchParams } from 'react-router-dom';
+
+import { AddToPOPModal } from '../../components/modals/add-to-pop';
+import { DeletePEPModal } from '../../components/modals/delete-pep';
+import { EditMetaMetadataModal } from '../../components/modals/edit-meta-metadata';
+import { ForkPEPModal } from '../../components/modals/fork-pep';
+import { ProjectAPIEndpointsModal } from '../../components/modals/project-api-endpoints';
+import { useProjectPage } from '../../contexts/project-page-context';
+import { useNamespaceStars } from '../../hooks/queries/useNamespaceStars';
+import { useSession } from '../../hooks/useSession';
+import { copyToClipboard, numberWithCommas } from '../../utils/etc';
+import { canEdit } from '../../utils/permissions';
+import { downloadZip } from '../../utils/project';
+import { SchemaTag } from '../forms/components/shema-tag';
+
+type ProjectPageHeaderBarProps = {
+  isStarred: boolean;
+};
+
+export const ProjectHeaderBar = (props: ProjectPageHeaderBarProps) => {
+  const { isStarred } = props;
+  const { user, login, jwt } = useSession();
+
+  const [searchParams] = useSearchParams();
+
+  // get fork from url
+  const fork = searchParams.get('fork');
+
+  // get project info
+  const {
+    namespace,
+    projectName,
+    tag,
+    projectAnnotationQuery,
+    forceTraditionalInterface,
+    setForceTraditionalInterface,
+  } = useProjectPage();
+
+  const { addStarMutation, removeStarMutation } = useNamespaceStars(user?.login || '/', {}, namespace === user?.login);
+
+  const [copied, setCopied] = useState(false);
+  const [showDeletePEPModal, setShowDeletePEPModal] = useState(false);
+  const [showForkPEPModal, setShowForkPEPModal] = useState(false);
+  const [showAPIEndpointsModal, setShowAPIEndpointsModal] = useState(false);
+  const [showEditMetaMetadataModal, setShowEditMetaMetadataModal] = useState(false);
+  const [showAddToPOPModal, setShowAddToPOPModal] = useState(false);
+
+  const projectInfo = projectAnnotationQuery.data;
+  const projectHash = projectInfo?.pep_schema?.replace(/\//g, '/#/');
+
+  // watch for the fork query param to open the fork modal
+  useEffect(() => {
+    if (fork) {
+      if (user) {
+        setShowForkPEPModal(true);
+      } else {
+        login();
+      }
+    }
+  }, [fork]);
+
+  return (
+    <div className="d-flex flex-row align-items-start justify-content-between px-4 mb-2 mt-4">
+      <div className="d-flex flex-row align-items-center w-75">
+        <Breadcrumb className="fw-bold mt-1">
+          <Breadcrumb.Item href="/">home</Breadcrumb.Item>
+          <Breadcrumb.Item href={`/${namespace}`}>{namespace}</Breadcrumb.Item>
+          <Breadcrumb.Item active>
+            {projectName}:{tag}
+          </Breadcrumb.Item>
+          {projectInfo?.is_private && (
+            <li>
+              <span className="border py-1 ms-2 badge rounded-pill border-danger text-danger">Private</span>
+            </li>
+          )}
+        </Breadcrumb>
+      </div>
+      <div className="d-flex flex-row align-items-center gap-1 justify-content-end w-100">
+        <div className="d-flex flex-row align-items-center">
+          <div className="border border-dark shadow-sm rounded-1 ps-2 d-flex align-items-center">
+            <span className="text-sm fw-bold">
+              {projectAnnotationQuery.data
+                ? `${projectInfo?.namespace}/${projectInfo?.name}:${projectInfo?.tag || 'default'}`
+                : 'Loading'}
+            </span>
+            <button
+              className="btn btn-sm btn-link-dark shadow-none ms-1 pe-2"
+              onClick={() => {
+                copyToClipboard(`${projectInfo?.namespace}/${projectInfo?.name}:${projectInfo?.tag || 'default'}`);
+                setCopied(true);
+                setTimeout(() => {
+                  setCopied(false);
+                }, 1000);
+              }}
+            >
+              {copied ? <i className="bi bi-check"></i> : <i className="bi bi-clipboard" />}
+            </button>
+          </div>
+        </div>
+        <Dropdown>
+          <Dropdown.Toggle size="sm" variant="dark">
+            <i className="bi bi-gear-fill me-1"></i>
+            More
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item onClick={() => downloadZip(namespace, projectName, tag, jwt)}>
+              <i className="bi bi-file-earmark-zip me-1"></i>
+              Download
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => setShowAPIEndpointsModal(true)}>
+              <i className="bi bi-hdd-rack me-1"></i>
+              API
+            </Dropdown.Item>
+            <Fragment>
+              {user && (
+                <Fragment>
+                  <Dropdown.Item onClick={() => setShowForkPEPModal(true)}>
+                    <i className="me-1 bi bi-bezier2"></i>
+                    Fork
+                  </Dropdown.Item>
+                  <Dropdown.Item onClick={() => setShowAddToPOPModal(true)}>
+                    <i className="me-1 bi bi-plus-circle"></i>
+                    Add to POP
+                  </Dropdown.Item>
+                </Fragment>
+              )}
+            </Fragment>
+            <Fragment>
+              {projectInfo?.pop && (
+                <Fragment>
+                  <Dropdown.Divider />
+                  <Dropdown.Item onClick={() => setForceTraditionalInterface(!forceTraditionalInterface)}>
+                    <i className="me-1 bi bi-layout-text-sidebar-reverse"></i>
+                    {forceTraditionalInterface ? 'View as POP' : 'View as PEP'}
+                  </Dropdown.Item>
+                </Fragment>
+              )}
+            </Fragment>
+            <Fragment>
+              {user && projectInfo && canEdit(user, projectInfo) && (
+                <Fragment>
+                  <Dropdown.Divider />
+                  <Dropdown.Item onClick={() => setShowEditMetaMetadataModal(true)}>
+                    <i className="me-1 bi bi-pencil-square"></i>
+                    Edit
+                  </Dropdown.Item>
+                  <Dropdown.Item className="text-danger" onClick={() => setShowDeletePEPModal(true)}>
+                    <i className="me-1 bi bi-trash3"></i>
+                    Delete
+                  </Dropdown.Item>
+                </Fragment>
+              )}
+            </Fragment>
+          </Dropdown.Menu>
+        </Dropdown>
+        <button
+          className="btn btn-outline-dark btn-sm"
+          disabled={addStarMutation.isPending || removeStarMutation.isPending}
+          onClick={() => {
+            if (!user) {
+              login();
+              return;
+            }
+            if (isStarred) {
+              removeStarMutation.mutate({
+                namespaceToRemove: projectInfo?.namespace!,
+                projectNameToRemove: projectInfo?.name!,
+                projectTagToRemove: projectInfo?.tag!,
+              });
+            } else {
+              addStarMutation.mutate({
+                namespaceToStar: projectInfo?.namespace!,
+                projectNameToStar: projectInfo?.name!,
+                projectTagToStar: projectInfo?.tag!,
+              });
+            }
+          }}
+        >
+          {isStarred ? (
+            <Fragment>
+              <span className="text-primary">
+                <i className="me-1 bi bi-star-fill"></i>
+                Starred
+                <span className="px-2 border border-dark rounded-pill text-dark ms-1 bg-dark bg-opacity-10">
+                  {numberWithCommas(projectInfo?.stars_number || 0)}
+                </span>
+              </span>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <span>
+                <i className="me-1 bi bi-star"></i>
+                Star
+                <span className="px-2 border border-dark rounded-pill text-dark ms-1 bg-dark bg-opacity-10">
+                  {numberWithCommas(projectInfo?.stars_number || 0)}
+                </span>
+              </span>
+            </Fragment>
+          )}
+        </button>
+      </div>
+      <EditMetaMetadataModal
+        show={showEditMetaMetadataModal}
+        onHide={() => setShowEditMetaMetadataModal(false)}
+        namespace={namespace}
+        project={projectName}
+        tag={tag}
+      />
+      <ProjectAPIEndpointsModal
+        show={showAPIEndpointsModal}
+        onHide={() => setShowAPIEndpointsModal(false)}
+        namespace={namespace || ''}
+        project={projectName}
+        tag={tag}
+      />
+      <DeletePEPModal
+        show={showDeletePEPModal}
+        onHide={() => setShowDeletePEPModal(false)}
+        namespace={namespace}
+        project={projectName}
+        tag={tag}
+        redirect={`/${user?.login}`}
+      />
+      <ForkPEPModal
+        show={showForkPEPModal}
+        onHide={() => setShowForkPEPModal(false)}
+        namespace={namespace}
+        project={projectName}
+        description={projectInfo?.description || 'No description'}
+        tag={tag}
+      />
+      <AddToPOPModal
+        show={showAddToPOPModal}
+        onHide={() => {
+          setShowAddToPOPModal(false);
+        }}
+        namespace={namespace!}
+        project={projectName}
+        tag={tag}
+      />
+    </div>
+  );
+};
diff --git a/web/src/components/project/project-validation-and-edit-buttons.tsx b/web/src/components/project/project-validation-and-edit-buttons.tsx
new file mode 100644
index 00000000..b7c9184e
--- /dev/null
+++ b/web/src/components/project/project-validation-and-edit-buttons.tsx
@@ -0,0 +1,227 @@
+import { Fragment, MouseEvent, forwardRef } from 'react';
+import { Dropdown } from 'react-bootstrap';
+
+import { Sample } from '../../../types';
+import { useProjectPage } from '../../contexts/project-page-context';
+import { useConfigMutation } from '../../hooks/mutations/useConfigMutation';
+import { useTotalProjectChangeMutation } from '../../hooks/mutations/useTotalProjectChangeMutation';
+import { useSession } from '../../hooks/useSession';
+import { canEdit } from '../../utils/permissions';
+import { StatusIcon } from '../badges/status-icons';
+import { ProjectDataNav } from '../layout/project-data-nav';
+
+type CustomToggleProps = {
+  children?: React.ReactNode;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+};
+
+type ProjectValidationAndEditButtonsProps = {
+  newProjectConfig: string;
+  newProjectSamples: Sample[];
+  newProjectSubsamples: Sample[];
+  configIsDirty: boolean;
+  samplesIsDirty: boolean;
+  subsamplesIsDirty: boolean;
+  view: string | undefined;
+  setView: (view: string | undefined) => void;
+  setNewProjectConfig: (config: string) => void;
+  setNewProjectSamples: (samples: any) => void;
+  setNewProjectSubsamples: (subsamples: any) => void;
+};
+
+const ValiationToggle = forwardRef<HTMLAnchorElement, CustomToggleProps>(({ children, onClick }, ref) => (
+  <a
+    href=""
+    ref={ref}
+    onClick={(e) => {
+      e.preventDefault();
+      if (onClick) {
+        onClick(e);
+      }
+    }}
+    className="text-decoration-none"
+  >
+    {children}
+  </a>
+));
+
+export const ProjectValidationAndEditButtons = (props: ProjectValidationAndEditButtonsProps) => {
+  const {
+    newProjectSamples,
+    newProjectSubsamples,
+    newProjectConfig,
+    configIsDirty,
+    samplesIsDirty,
+    subsamplesIsDirty,
+    view,
+    setView,
+    setNewProjectConfig,
+    setNewProjectSamples,
+    setNewProjectSubsamples,
+  } = props;
+
+  const { user } = useSession();
+
+  const {
+    namespace,
+    projectName,
+    tag,
+    shouldFetchSampleTable,
+    projectAnnotationQuery,
+    projectConfigQuery,
+    projectViewsQuery,
+    projectValidationQuery,
+    sampleTableQuery,
+    subSampleTableQuery,
+  } = useProjectPage();
+
+  const configMutation = useConfigMutation(namespace, projectName, tag, newProjectConfig);
+  const totalProjectMutation = useTotalProjectChangeMutation(namespace, projectName, tag, {
+    config: newProjectConfig,
+    samples: newProjectSamples,
+    subsamples: newProjectSubsamples,
+  });
+
+  const projectInfo = projectAnnotationQuery.data;
+  const projectConfig = projectConfigQuery.data;
+  const projectViews = projectViewsQuery?.data?.views || [];
+  const validationResult = projectValidationQuery.data;
+  const samples = sampleTableQuery?.data?.items || [];
+  const subsamples = subSampleTableQuery.data?.items || [];
+
+  // reset config and samples
+  const resetConfig = () => {
+    setNewProjectConfig(projectConfig?.config || '');
+  };
+  const resetSamples = () => {
+    setNewProjectSamples(samples);
+  };
+  const resetSubsamples = () => {
+    setNewProjectSubsamples(subsamples);
+  };
+
+  const runValidation = () => {
+    projectValidationQuery.refetch();
+  };
+
+  const handleTotalProjectChange = async () => {
+    await totalProjectMutation.mutateAsync();
+    runValidation();
+  };
+
+  return (
+    <Fragment>
+      <div className="flex-row d-flex align-items-end justify-content-between mx-3">
+        <ProjectDataNav
+          configIsDirty={configIsDirty}
+          samplesIsDirty={samplesIsDirty}
+          subsamplesIsDirty={subsamplesIsDirty}
+          projectViewIsLoading={projectViewsQuery.isFetching}
+          projectViews={projectViews}
+          projectView={view}
+          setProjectView={setView}
+        />
+        {/* no matter what, only render if belonging to the user */}
+        {user && projectInfo && canEdit(user, projectInfo) ? (
+          <div className="d-flex flex-row align-items-center w-25 justify-content-end">
+            {/* <ValidationTooltip /> */}
+            {projectInfo?.pep_schema ? (
+              <div className="d-flex flex-row align-items-center mb-1 me-4">
+                {projectValidationQuery.isLoading || projectValidationQuery.isFetching ? (
+                  <span>Validating...</span>
+                ) : validationResult?.valid ? (
+                  <Dropdown>
+                    <div className="d-flex align-items-center">
+                      <Dropdown.Toggle as={ValiationToggle}>
+                        <StatusIcon className="text-2xl cursor-pointer" variant="success" />
+                      </Dropdown.Toggle>
+                      <span className="text-success">Valid</span>
+                    </div>
+                    <Dropdown.Menu className="border border-dark shadow-lg">
+                      <Dropdown.Header className="text-success">
+                        Your PEP is valid against {projectInfo?.pep_schema}
+                      </Dropdown.Header>
+                    </Dropdown.Menu>
+                  </Dropdown>
+                ) : (
+                  <Dropdown>
+                    <div className="d-flex align-items-center">
+                      <Dropdown.Toggle as={ValiationToggle}>
+                        <StatusIcon className="text-2xl cursor-pointer" variant="danger" />
+                      </Dropdown.Toggle>
+                      <span className="text-danger">Invalid</span>
+                    </div>
+                    <Dropdown.Menu className="border border-dark shadow-lg">
+                      <Dropdown.Header>
+                        {validationResult?.error_type === 'Schema' ? (
+                          <span className="text-danger">Schema is invalid</span>
+                        ) : (
+                          <>
+                            <span className="text-danger fw-bold">
+                              Your PEP is invalid against {projectInfo?.pep_schema}
+                            </span>
+                            <p className="mb-0 fw-bold">
+                              <span className="text-danger">
+                                Errors found in {validationResult?.error_type}
+                                {': '}
+                              </span>
+                            </p>
+                            {validationResult?.errors.map((error, index) => (
+                              <Dropdown.Header className="text-danger" key={index}>
+                                <i className="bi bi bi-exclamation-triangle me-2"></i>
+                                {error}
+                              </Dropdown.Header>
+                            ))}
+                          </>
+                        )}
+                      </Dropdown.Header>
+                    </Dropdown.Menu>
+                  </Dropdown>
+                )}
+              </div>
+            ) : (
+              <div className="d-flex flex-row align-items-center mb-1 me-4">
+                <>
+                  <div className="d-flex align-items-center">
+                    <StatusIcon className="text-2xl" variant="warning" />
+                    <span>Add schema to PEP to validate</span>
+                  </div>
+                </>
+              </div>
+            )}
+            <div className="px-1">
+              {shouldFetchSampleTable && !view && (
+                <Fragment>
+                  <button
+                    disabled={
+                      configMutation.isPending ||
+                      totalProjectMutation.isPending ||
+                      !(configIsDirty || samplesIsDirty || subsamplesIsDirty) ||
+                      !shouldFetchSampleTable ||
+                      !!view
+                    }
+                    onClick={() => handleTotalProjectChange()}
+                    className="fst-italic btn btn-sm btn-success me-1 mb-1 border-dark"
+                  >
+                    {configMutation.isPending || totalProjectMutation.isPending ? 'Saving...' : 'Save'}
+                  </button>
+                  <button
+                    className="fst-italic btn btn-sm btn-outline-dark me-1 mb-1"
+                    onClick={() => {
+                      resetConfig();
+                      resetSamples();
+                      resetSubsamples();
+                    }}
+                    disabled={!(configIsDirty || samplesIsDirty || subsamplesIsDirty)}
+                  >
+                    Discard
+                  </button>
+                </Fragment>
+              )}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </Fragment>
+  );
+};
diff --git a/web/src/components/project/view-selector.tsx b/web/src/components/project/view-selector.tsx
index c3d3aa1a..d0277b68 100644
--- a/web/src/components/project/view-selector.tsx
+++ b/web/src/components/project/view-selector.tsx
@@ -4,12 +4,11 @@ import Tooltip, { TooltipProps } from 'react-bootstrap/Tooltip';
 import { useSearchParams } from 'react-router-dom';
 import ReactSelect from 'react-select';
 
-import { ProjectViewsResponse } from '../../api/project';
-import { search } from '../../api/search';
+import { ProjectViewAnnotation } from '../../../types';
 
 interface Props {
   projectViewsIsLoading: boolean;
-  projectViews: ProjectViewsResponse | undefined;
+  projectViews: ProjectViewAnnotation[] | undefined;
   view: string | undefined;
   setView: (view: string | undefined) => void;
 }
@@ -32,7 +31,7 @@ export const ViewSelector = (props: Props) => {
         <ReactSelect
           className="top-z rounded w-100"
           options={
-            projectViews?.views.map((view) => ({
+            projectViews?.map((view) => ({
               view: view.name,
               description: view.description || 'No description',
               value: view.name,
@@ -51,12 +50,12 @@ export const ViewSelector = (props: Props) => {
               setSearchParams(searchParams);
             }
           }}
-          isDisabled={projectViews?.views.length === 0 || projectViewsIsLoading}
+          isDisabled={projectViews?.length === 0 || projectViewsIsLoading}
           isClearable
           placeholder={
             projectViewsIsLoading
               ? 'Loading views...'
-              : projectViews?.views.length === 0
+              : projectViews?.length === 0
               ? 'No views available'
               : 'Select a view'
           }
diff --git a/web/src/components/search/search-results.tsx b/web/src/components/search/search-results.tsx
index dc2cd741..1498ea4b 100644
--- a/web/src/components/search/search-results.tsx
+++ b/web/src/components/search/search-results.tsx
@@ -1,8 +1,9 @@
-import { FC, Fragment } from 'react';
-import { ProgressBar } from 'react-bootstrap';
+import { FC, Fragment, useRef } from 'react';
+import { OverlayTrigger, ProgressBar } from 'react-bootstrap';
 
 import { SearchHit } from '../../../types';
 import { GitHubAvatar } from '../../components/badges/github-avatar';
+import { isEllipsisActive } from '../../utils/etc';
 
 export const NUM_RESULTS_PER_PAGE = 10;
 
@@ -21,6 +22,8 @@ const HitCard = ({ hit }: { hit: SearchHit }) => {
   // round to 2 decimal places
   let hit_score = Math.round(hit.score * 100) / 100;
 
+  const descriptionRef = useRef<HTMLElement>(null);
+
   return (
     <div className="border-bottom border-dark border-2 mt-2 p-1">
       <div className="d-flex flex-row align-items-center justify-content-between">
@@ -33,9 +36,33 @@ const HitCard = ({ hit }: { hit: SearchHit }) => {
           </div>
         </div>
       </div>
-      <p className="truncate text-secondary" style={{ fontSize: '0.9rem' }}>
-        {hit.payload.description}
-      </p>
+      <OverlayTrigger
+        placement="top"
+        overlay={
+          isEllipsisActive(descriptionRef.current) && hit.payload.description ? (
+            <div
+              className="p-2 rounded bg-dark text-white text-xs"
+              style={{
+                maxWidth: '800px',
+              }}
+            >
+              <p className="m-0">{hit.payload.description}</p>
+            </div>
+          ) : (
+            <></>
+          )
+        }
+        delay={{ show: 250, hide: 400 }}
+      >
+        <p
+          // @ts-ignore
+          ref={descriptionRef}
+          className="text-secondary line-clamp cursor"
+          style={{ fontSize: '0.9rem' }}
+        >
+          {hit.payload.description}
+        </p>
+      </OverlayTrigger>
     </div>
   );
 };
@@ -130,7 +157,7 @@ export const NamespaceSearchResults: FC<NamespaceProps> = ({ hits }) => {
     );
   }
   return (
-    <>
+    <Fragment>
       <h2 className="fw-bold">Namespaces</h2>
       {hits.map((hit) => (
         <div key={hit} className="d-flex flex-row align-items-center mt-2">
@@ -140,6 +167,6 @@ export const NamespaceSearchResults: FC<NamespaceProps> = ({ hits }) => {
           </a>
         </div>
       ))}
-    </>
+    </Fragment>
   );
 };
diff --git a/web/src/components/tables/sample-table.tsx b/web/src/components/tables/sample-table.tsx
index 3806fc20..fbf14843 100644
--- a/web/src/components/tables/sample-table.tsx
+++ b/web/src/components/tables/sample-table.tsx
@@ -38,7 +38,7 @@ export const SampleTable = (props: Props) => {
   if (className) {
     tableClassName += ` ${className}`;
   }
-
+    
   const hotRef = useRef<HotTable>(null);
 
   const PH_ID_COL_NAME = 'ph_id';
@@ -121,24 +121,65 @@ export const SampleTable = (props: Props) => {
               // debugger;
               onChange(arraysToSampleList(rows));
             }
-          }}
-          afterRemoveCol={(index, amount) => {
-            // remove all values at the specified index from "rows"
-            rows.forEach((row) => {
-              row.splice(index, 0);
+          });
+        }}
+        dropdownMenu={true}
+        hiddenColumns={{
+          indicators: true,
+        }}
+        minCols={2}
+        minRows={minRows || 50}
+        contextMenu={[
+          'row_above',
+          'row_below',
+          '---------',
+          'col_left',
+          'col_right',
+          '---------',
+          'remove_row',
+          'remove_col',
+          '---------',
+          'alignment',
+          '---------',
+          'copy',
+          'cut',
+        ]}
+        multiColumnSorting={true}
+        filters={true}
+        rowHeaders={true}
+        beforeRenderer={addClassesToRows}
+        manualRowMove={true}
+        licenseKey="non-commercial-and-evaluation"
+        manualColumnResize
+        afterChange={(changes) => {
+          if (changes && onChange) {
+            changes.forEach((change) => {
+              const [row, col, _, newVal] = change;
+              // @ts-ignore - we know that col is a number
+              rows[row][col] = newVal;
             });
-            if (onChange) {
-              onChange(arraysToSampleList(rows));
-            }
-          }}
-          afterRemoveRow={(index, amount) => {
-            rows.splice(index, 0);
-            if (onChange) {
-              onChange(arraysToSampleList(rows));
-            }
-          }}
-        />
-      </div>
-    </>
+            onChange(arraysToSampleList(rows));
+          }
+        }}
+        afterRemoveCol={(index, amount) => {
+          // remove all values at the specified index from "rows"
+          rows.forEach((row) => {
+            row.splice(index, 0);
+          });
+          if (onChange) {
+            onChange(arraysToSampleList(rows));
+          }
+        }}
+        afterRemoveRow={(index, amount) => {
+          rows.splice(index, 0);
+          if (onChange) {
+            onChange(arraysToSampleList(rows));
+          }
+        }}
+        afterFilter={(k) => {
+          console.log(hotRef.current?.hotInstance?.getData());
+        }}
+      />
+    </div>
   );
 };
diff --git a/web/src/contexts/project-page-context.tsx b/web/src/contexts/project-page-context.tsx
new file mode 100644
index 00000000..c5b50f3c
--- /dev/null
+++ b/web/src/contexts/project-page-context.tsx
@@ -0,0 +1,122 @@
+import React, { createContext, useContext, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+
+import { useProjectAnnotation } from '../hooks/queries/useProjectAnnotation';
+import { useProjectConfig } from '../hooks/queries/useProjectConfig';
+import { useProjectViews } from '../hooks/queries/useProjectViews';
+import { useSampleTable } from '../hooks/queries/useSampleTable';
+import { useSubsampleTable } from '../hooks/queries/useSubsampleTable';
+import { useValidation } from '../hooks/queries/useValidation';
+
+const MAX_SAMPLE_COUNT = 5_000;
+
+type ProjectPageView = 'samples' | 'subsamples' | 'config';
+
+type ProviderProps = {
+  children: React.ReactNode;
+};
+
+const ProjectPageContext = createContext<{
+  namespace: string;
+  projectName: string;
+  tag: string;
+  projectAnnotationQuery: ReturnType<typeof useProjectAnnotation>;
+  sampleTableQuery?: ReturnType<typeof useSampleTable>;
+  subSampleTableQuery: ReturnType<typeof useSubsampleTable>;
+  projectConfigQuery: ReturnType<typeof useProjectConfig>;
+  projectViewsQuery: ReturnType<typeof useProjectViews>;
+  projectValidationQuery: ReturnType<typeof useValidation>;
+  shouldFetchSampleTable: boolean;
+  pageView: ProjectPageView;
+  setPageView: React.Dispatch<React.SetStateAction<ProjectPageView>>;
+  forceTraditionalInterface: boolean;
+  setForceTraditionalInterface: React.Dispatch<React.SetStateAction<boolean>>;
+  MAX_SAMPLE_COUNT: number;
+  // @ts-expect-error - its fine to start with undefined
+}>(undefined);
+
+export const ProjectPageProvider = ({ children }: ProviderProps) => {
+  const [searchParams] = useSearchParams();
+
+  let { namespace, project: projectName } = useParams();
+  namespace = namespace?.toLowerCase();
+
+  // check if we have a namespace and project (i.e. landed on /:namespace/:project)
+  if (!namespace || !projectName) {
+    throw new Error('ProjectPageProvider must be used within a route that has a namespace and project in the URL');
+  }
+
+  const tag = searchParams.get('tag') || 'default';
+
+  // get state
+  // PROJECT ANNOTATION
+  const projectAnnotationQuery = useProjectAnnotation(namespace, projectName, tag);
+
+  // DECIDE IF WE SHOULD FETCH SAMPLE TABLE
+  let shouldFetchSampleTable = false;
+  if (projectAnnotationQuery.data?.number_of_samples) {
+    shouldFetchSampleTable = projectAnnotationQuery.data.number_of_samples <= MAX_SAMPLE_COUNT;
+  }
+
+  // SAMPLE TABLE
+  const sampleTableQuery = useSampleTable({
+    namespace,
+    project: projectName,
+    tag,
+    enabled: projectAnnotationQuery.data === undefined ? false : shouldFetchSampleTable,
+  });
+
+  // SUBSAMPLE TABLE
+  const subSampleTableQuery = useSubsampleTable(namespace, projectName, tag);
+
+  // PROJECT CONFIG
+  const projectConfigQuery = useProjectConfig(namespace, projectName, tag);
+
+  // PROJECT VIEWS
+  const projectViewsQuery = useProjectViews(namespace, projectName, tag);
+
+  // PROJECT VALIDATION
+  const projectValidationQuery = useValidation({
+    pepRegistry: `${namespace}/${projectName}:${tag}`,
+    schema: projectAnnotationQuery.data?.pep_schema || 'pep/2.0.0', // default to basic pep 2.0.0 schema
+    schema_registry: projectAnnotationQuery.data?.pep_schema,
+    enabled:
+      namespace && projectName && tag && projectAnnotationQuery.data === undefined ? false : shouldFetchSampleTable,
+  });
+
+  // GENERAL STATE
+  const [pageView, setPageView] = useState<ProjectPageView>('samples');
+  const [forceTraditionalInterface, setForceTraditionalInterface] = useState(false);
+
+  return (
+    <ProjectPageContext.Provider
+      value={{
+        namespace,
+        projectName,
+        tag,
+        projectAnnotationQuery,
+        sampleTableQuery,
+        subSampleTableQuery,
+        projectConfigQuery,
+        projectViewsQuery,
+        projectValidationQuery,
+        shouldFetchSampleTable,
+        pageView,
+        setPageView,
+        forceTraditionalInterface,
+        setForceTraditionalInterface,
+        MAX_SAMPLE_COUNT,
+      }}
+    >
+      {children}
+    </ProjectPageContext.Provider>
+  );
+};
+
+export const useProjectPage = () => {
+  const context = useContext(ProjectPageContext);
+  if (context === undefined) {
+    throw new Error('useProjectPage must be used within a ProjectPageProvider');
+  }
+  return context;
+};
diff --git a/web/src/globals.css b/web/src/globals.css
index 53ba7aa5..062bfa22 100644
--- a/web/src/globals.css
+++ b/web/src/globals.css
@@ -385,6 +385,20 @@ body {
   border-bottom: '10px solid #343a40' !important;
 }
 
+/* blank pep grid */
+.namespace-name-tag-container {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+}
+
+/* line clamp search hit description */
+.line-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* landing container full page height, but only on desktop */
 @media (min-width: 768px) {
   .h80 {
diff --git a/web/src/hooks/mutations/useAddStar.ts b/web/src/hooks/mutations/useAddStar.ts
index b249a8b4..a82bac44 100644
--- a/web/src/hooks/mutations/useAddStar.ts
+++ b/web/src/hooks/mutations/useAddStar.ts
@@ -6,21 +6,34 @@ import { StarsResponse, starProject } from '../../api/namespace';
 import { extractErrorMessage } from '../../utils/etc';
 import { useSession } from '../useSession';
 
-export const useAddStar = (namespace: string, star_namespace: string, star_project: string, star_tag: string) => {
+type AddStarMutation = {
+  namespaceToStar: string;
+  projectNameToStar: string;
+  projectTagToStar: string;
+};
+
+export const useAddStar = (addToNamespace: string) => {
   const session = useSession();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationFn: () => {
-      if (namespace === '') {
+    mutationFn: (data: AddStarMutation) => {
+      const { namespaceToStar, projectNameToStar, projectTagToStar } = data;
+      if (addToNamespace === '') {
         toast.error('Please ensure that you are logged in before starring a project');
       }
-      return starProject(namespace, star_namespace, star_project, star_tag, session.jwt || '');
+      return starProject(addToNamespace, namespaceToStar, projectNameToStar, projectTagToStar, session.jwt || '');
     },
-    onSuccess: () => {
-      queryClient.setQueryData([namespace, 'stars'], (oldData: StarsResponse['results']) => {
+    onSuccess: ({ data }) => {
+      const { namespace, registry_path } = data;
+
+      const namespaceToStar = registry_path.split('/')[0];
+      const projectNameToStar = registry_path.split('/')[1];
+      const projectTagToStar = registry_path.split(':')[1];
+
+      queryClient.setQueryData([addToNamespace, 'stars'], (oldData: StarsResponse['results']) => {
         // NOTE: this wont pull all data from the newly added star, but it will add its identifier it to the list
-        return [...oldData, { namespace: star_namespace, name: star_project, tag: star_tag }];
+        return [...oldData, { namespace: namespaceToStar, name: projectNameToStar, tag: projectTagToStar }];
       });
       queryClient.invalidateQueries({ queryKey: [namespace, 'stars'] });
     },
diff --git a/web/src/hooks/mutations/useRemoveStar.ts b/web/src/hooks/mutations/useRemoveStar.ts
index 1d93c51d..ae4867c3 100644
--- a/web/src/hooks/mutations/useRemoveStar.ts
+++ b/web/src/hooks/mutations/useRemoveStar.ts
@@ -6,27 +6,49 @@ import { removeStar } from '../../api/namespace';
 import { extractErrorMessage } from '../../utils/etc';
 import { useSession } from '../useSession';
 
-export const useRemoveStar = (namespace: string, star_namespace: string, star_project: string, star_tag: string) => {
+type RemoveStarMutation = {
+  namespaceToRemove: string;
+  projectNameToRemove: string;
+  projectTagToRemove: string;
+};
+
+export const useRemoveStar = (namespaceToAddTo: string) => {
   const session = useSession();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationFn: () => removeStar(namespace, star_namespace, star_project, star_tag, session.jwt || ''),
-    onSuccess: () => {
-      // queryClient.invalidateQueries({
-      //   queryKey: [namespace, 'stars'],
-      // });
-      queryClient.setQueryData([namespace, 'stars'], (oldData: any) => {
+    mutationFn: (data: RemoveStarMutation) => {
+      const { namespaceToRemove, projectNameToRemove, projectTagToRemove } = data;
+      return removeStar(
+        namespaceToAddTo,
+        namespaceToRemove,
+        projectNameToRemove,
+        projectTagToRemove,
+        session.jwt || '',
+      );
+    },
+    onSuccess: ({ data }) => {
+      debugger;
+      const { registry } = data;
+      const namespaceToRemove = registry.split('/')[0];
+      const projectNameToRemove = registry.split('/')[1];
+      const projectTagToRemove = registry.split(':')[1];
+
+      queryClient.setQueryData([namespaceToAddTo, 'stars'], (oldData: any) => {
         // NOTE: this wont pull all data from the newly added star, but it will add its identifier it to the list
         return oldData.filter(
-          (star: any) => star.namespace !== star_namespace || star.name !== star_project || star.tag !== star_tag,
+          (star: any) =>
+            star.namespace !== namespaceToRemove ||
+            star.name !== projectNameToRemove ||
+            star.tag !== projectTagToRemove,
         );
       });
-      queryClient.invalidateQueries({ queryKey: [namespace, 'stars'] });
+      queryClient.invalidateQueries({ queryKey: [namespaceToAddTo, 'stars'] });
     },
     onError: (err: AxiosError) => {
       // extract out error message if it exists, else unknown
       const errorMessage = extractErrorMessage(err);
+
       toast.error(`${errorMessage}`, {
         duration: 5000,
       });
diff --git a/web/src/hooks/queries/useNamespaceStars.ts b/web/src/hooks/queries/useNamespaceStars.ts
index 495d9932..e98893ac 100644
--- a/web/src/hooks/queries/useNamespaceStars.ts
+++ b/web/src/hooks/queries/useNamespaceStars.ts
@@ -1,19 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 
 import { PaginationParams, getNamespaceStars } from '../../api/namespace';
+import { useAddStar } from '../mutations/useAddStar';
+import { useRemoveStar } from '../mutations/useRemoveStar';
 import { useSession } from '../useSession';
 
-export const useNamespaceStars = (
-  namespace: string | undefined,
-  params: PaginationParams = {},
-  enabled: boolean = false,
-) => {
-  const session = useSession();
-  const query = useQuery({
+export const useNamespaceStars = (namespace: string, params: PaginationParams = {}, enabled: boolean = false) => {
+  const { jwt } = useSession();
+
+  const starsQuery = useQuery({
     queryKey: [namespace, 'stars'],
-    queryFn: () => getNamespaceStars(namespace || '', session?.jwt || '', params),
-    enabled: enabled && namespace !== undefined && session?.jwt !== null,
+    queryFn: () => getNamespaceStars(namespace, jwt || '', params),
+    enabled: enabled && namespace !== undefined && jwt !== null,
     staleTime: 1000 * 60 * 5, // 5 minutes
   });
-  return query;
+
+  const addStarMutation = useAddStar(namespace);
+  const removeStarMutation = useRemoveStar(namespace);
+
+  return {
+    starsQuery,
+    addStarMutation,
+    removeStarMutation,
+  };
 };
diff --git a/web/src/hooks/queries/useValidation.ts b/web/src/hooks/queries/useValidation.ts
index 92e14877..f29a309c 100644
--- a/web/src/hooks/queries/useValidation.ts
+++ b/web/src/hooks/queries/useValidation.ts
@@ -7,8 +7,8 @@ const API_HOST = import.meta.env.VITE_API_HOST || '';
 const API_BASE = `${API_HOST}/api/v1`;
 
 export interface ValidationParams {
-  pep_registry?: string | null;
-  pep_files?: FileList | null;
+  pepRegistry?: string | null;
+  pepFiles?: FileList | null;
   schema?: string | null;
   schema_file?: File | null;
   schema_registry?: string | null;
@@ -16,16 +16,16 @@ export interface ValidationParams {
 }
 
 const runValidation = async (params: ValidationParams) => {
-  const { pep_registry, pep_files, schema, schema_registry } = params;
+  const { pepRegistry, pepFiles, schema, schema_registry } = params;
 
   // create form data
   const formData = new FormData();
 
   // PEP things
-  formData.append('pep_registry', pep_registry || '');
-  if (pep_files) {
-    for (let i = 0; i < pep_files.length; i++) {
-      formData.append('pep_files', pep_files[i]);
+  formData.append('pep_registry', pepRegistry || '');
+  if (pepFiles) {
+    for (let i = 0; i < pepFiles.length; i++) {
+      formData.append('pep_files', pepFiles[i]);
     }
   }
 
@@ -43,9 +43,9 @@ const runValidation = async (params: ValidationParams) => {
 };
 
 export const useValidation = (params: ValidationParams) => {
-  const { pep_registry, pep_files, schema, schema_registry, enabled } = params;
+  const { pepRegistry, pepFiles, schema, schema_registry, enabled } = params;
   return useQuery({
-    queryKey: ['validation', pep_registry, pep_files, schema, schema_registry],
+    queryKey: ['validation', pepRegistry, pepFiles, schema, schema_registry],
     queryFn: () => runValidation(params),
     enabled: enabled,
     refetchOnWindowFocus: false,
diff --git a/web/src/main.tsx b/web/src/main.tsx
index bfab7198..be491e3d 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -16,9 +16,10 @@ import { Toaster } from 'react-hot-toast';
 // routing
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 
+// custom contexts
+import { ProjectPageProvider } from './contexts/project-page-context';
 import './globals.css';
-import { About } from './pages/About';
-import Home from './pages/Home';
+import { Home } from './pages/Home';
 import { LoginSuccessPage } from './pages/LoginSuccess';
 import { NamespacePage } from './pages/Namespace';
 import { ProjectPage } from './pages/Project';
@@ -60,7 +61,11 @@ const router = createBrowserRouter([
   },
   {
     path: '/:namespace/:project',
-    element: <ProjectPage />,
+    element: (
+      <ProjectPageProvider>
+        <ProjectPage />
+      </ProjectPageProvider>
+    ),
   },
 ]);
 
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 7bd50964..6412d3a3 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -29,7 +29,7 @@ const MotionButton: FC<MotionButtonProps> = ({ children, className, onClick }) =
   </motion.button>
 );
 
-function Home() {
+export function Home() {
   const { user, login } = useSession();
   const limit = 3;
   const { data: largestNamespaces } = useBiggestNamespace(limit);
diff --git a/web/src/pages/Namespace.tsx b/web/src/pages/Namespace.tsx
index 7e3c37dc..82c59953 100644
--- a/web/src/pages/Namespace.tsx
+++ b/web/src/pages/Namespace.tsx
@@ -1,4 +1,4 @@
-import { FC, Fragment, useEffect, useState } from 'react';
+import { Fragment, useState } from 'react';
 import Breadcrumb from 'react-bootstrap/Breadcrumb';
 import { useParams, useSearchParams } from 'react-router-dom';
 
@@ -23,8 +23,8 @@ import { numberWithCommas } from '../utils/etc';
 
 type View = 'peps' | 'pops' | 'stars';
 
-export const NamespacePage: FC = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
+export const NamespacePage = () => {
+  const [searchParams] = useSearchParams();
   const viewFromUrl = searchParams.get('view') as View;
 
   // get namespace from url
@@ -69,12 +69,14 @@ export const NamespacePage: FC = () => {
     search: searchDebounced,
     type: view === 'pops' ? 'pop' : 'pep',
   });
-  const { data: stars, isLoading: starsIsLoading } = useNamespaceStars(namespace, {}, namespace === user?.login); // only fetch stars if the namespace is the user's
+
+  const { starsQuery } = useNamespaceStars(namespace!, {}, namespace === user?.login); // only fetch stars if the namespace is the user's
+  const stars = starsQuery.data;
 
   // left over from when we were filtering on sample number
   const projectsFiltered = projects?.items.filter((p) => p.number_of_samples) || [];
 
-  if (namespaceInfoIsLoading || starsIsLoading) {
+  if (namespaceInfoIsLoading || starsQuery.isLoading) {
     return (
       <PageLayout title={namespace}>
         <NamespacePagePlaceholder />
diff --git a/web/src/pages/Project.tsx b/web/src/pages/Project.tsx
index 0fac744b..bdc65608 100644
--- a/web/src/pages/Project.tsx
+++ b/web/src/pages/Project.tsx
@@ -1,70 +1,31 @@
-import { FC, Fragment, MouseEvent, forwardRef, useEffect, useRef, useState } from 'react';
-import { Breadcrumb, Dropdown } from 'react-bootstrap';
-import { useParams, useSearchParams } from 'react-router-dom';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useLocalStorage } from 'usehooks-ts';
 
 import { Sample } from '../../types';
-import { StatusIcon } from '../components/badges/status-icons';
-import { SchemaTag } from '../components/forms/components/shema-tag';
 import { PageLayout } from '../components/layout/page-layout';
-import { ProjectDataNav } from '../components/layout/project-data-nav';
-import { Markdown } from '../components/markdown/render';
-import { AddToPOPModal } from '../components/modals/add-to-pop';
-import { DeletePEPModal } from '../components/modals/delete-pep';
-import { EditMetaMetadataModal } from '../components/modals/edit-meta-metadata';
-import { ForkPEPModal } from '../components/modals/fork-pep';
-import { ProjectAPIEndpointsModal } from '../components/modals/project-api-endpoints';
 import { LargeSampleTableModal } from '../components/modals/sample-table-too-large';
 import { ProjectPageheaderPlaceholder } from '../components/placeholders/project-page-header';
 import { PopInterface } from '../components/pop/pop-interface';
 import { ProjectConfigEditor } from '../components/project/project-config';
+import { ProjectInfoFooter } from '../components/project/project-info-footer';
+import { ProjectDescription } from '../components/project/project-page-description';
+import { ProjectHeaderBar } from '../components/project/project-page-header-bar';
+import { ProjectValidationAndEditButtons } from '../components/project/project-validation-and-edit-buttons';
 import { SampleTable } from '../components/tables/sample-table';
-import { useAddStar } from '../hooks/mutations/useAddStar';
-import { useConfigMutation } from '../hooks/mutations/useConfigMutation';
-import { useRemoveStar } from '../hooks/mutations/useRemoveStar';
+import { useProjectPage } from '../contexts/project-page-context';
 import { useTotalProjectChangeMutation } from '../hooks/mutations/useTotalProjectChangeMutation';
 import { useNamespaceStars } from '../hooks/queries/useNamespaceStars';
-import { useProjectAnnotation } from '../hooks/queries/useProjectAnnotation';
-import { useProjectConfig } from '../hooks/queries/useProjectConfig';
-import { useProjectViews } from '../hooks/queries/useProjectViews';
-import { useSampleTable } from '../hooks/queries/useSampleTable';
-import { useSubsampleTable } from '../hooks/queries/useSubsampleTable';
-import { useValidation } from '../hooks/queries/useValidation';
 import { useView } from '../hooks/queries/useView';
 import { useSession } from '../hooks/useSession';
-import { dateStringToDateTime } from '../utils/dates';
-import { copyToClipboard, getOS, numberWithCommas } from '../utils/etc';
+import { getOS } from '../utils/etc';
 import { canEdit } from '../utils/permissions';
-import { downloadZip } from '../utils/project';
 
-type ProjectView = 'samples' | 'subsamples' | 'config';
-
-const MAX_DESC_HEIGHT = 200;
-const MAX_SAMPLE_COUNT = 55_000;
-interface CustomToggleProps {
-  children?: React.ReactNode;
-  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-}
-
-const ValiationToggle = forwardRef<HTMLAnchorElement, CustomToggleProps>(({ children, onClick }, ref) => (
-  <a
-    href=""
-    ref={ref}
-    onClick={(e) => {
-      e.preventDefault();
-      if (onClick) {
-        onClick(e);
-      }
-    }}
-    className="text-decoration-none"
-  >
-    {children}
-  </a>
-));
-
-export const ProjectPage: FC = () => {
+export const ProjectPage = () => {
   // user info
-  const { user, jwt, login } = useSession();
+  const { user } = useSession();
+
+  const [searchParams] = useSearchParams();
 
   // auto-dismiss popup for large sample tables
   const [hideLargeSampleTableModal] = useLocalStorage('hideLargeSampleTableModal', 'false');
@@ -72,133 +33,80 @@ export const ProjectPage: FC = () => {
   // os info
   const os = getOS();
 
-  let { namespace, project } = useParams();
-  namespace = namespace?.toLowerCase();
-  // project = project?.toLowerCase();
-
-  // get tag from url
-  let [searchParams, setSearchParams] = useSearchParams();
-  const tag = searchParams.get('tag') || 'default';
-  const fork = searchParams.get('fork');
-
-  // view selection
-  const [view, setView] = useState(searchParams.get('view') || undefined);
+  // project page context state
+  const {
+    namespace,
+    projectName,
+    tag,
+    projectAnnotationQuery,
+    sampleTableQuery,
+    subSampleTableQuery,
+    projectConfigQuery,
+    projectValidationQuery,
+    shouldFetchSampleTable,
+    pageView,
+    forceTraditionalInterface,
+    MAX_SAMPLE_COUNT,
+  } = useProjectPage();
+
+  const { starsQuery } = useNamespaceStars(user?.login || '/', {}, true);
 
-  // users stars - determine if they have this PEP starred
-  const { data: userStars } = useNamespaceStars(user?.login || '', {}, true);
   const isStarred =
-    userStars?.map((star) => `${star.namespace}/${star.name}:${star.tag}`).includes(`${namespace}/${project}:${tag}`) ||
-    false;
-
-  const starAddMutation = useAddStar(user?.login || '', namespace!, project!, tag);
-  const starRemoveMutation = useRemoveStar(user?.login || '', namespace!, project!, tag);
+    starsQuery.data?.find(
+      (star) =>
+        star.namespace === projectAnnotationQuery.data?.namespace && star.name === projectAnnotationQuery.data?.name,
+    ) !== undefined;
 
-  // fetch data
-  const {
-    data: projectInfo,
-    isLoading: projectInfoIsLoading,
-    error,
-  } = useProjectAnnotation(namespace, project || '', tag);
+  // pull out data for easier access
+  const projectInfo = projectAnnotationQuery.data;
+  const projectConfig = projectConfigQuery.data;
+  const samples = sampleTableQuery?.data?.items || [];
+  const subsamples = subSampleTableQuery.data?.items || [];
 
-  // is the sample table too big to fetch?
-  const fetchSampleTable = projectInfo?.number_of_samples ? projectInfo.number_of_samples <= MAX_SAMPLE_COUNT : false;
-  // const fetchSampleTable = false; // testing only
+  // view selection
+  const [view, setView] = useState(searchParams.get('view') || undefined);
 
-  const { data: projectSamples } = useSampleTable({
+  const { data: viewData } = useView({
     namespace,
-    project,
-    tag,
-    enabled: projectInfo === undefined ? false : fetchSampleTable,
-  });
-  const { data: projectSubsamples } = useSubsampleTable(namespace, project, tag);
-  const { data: projectConfig, isLoading: projectConfigIsLoading } = useProjectConfig(namespace, project || '', tag);
-  const { data: projectViews, isLoading: projectViewsIsLoading } = useProjectViews(namespace, project || '', tag);
-  const { data: viewData, isLoading: viewDataIsLoading } = useView({
-    namespace,
-    project,
+    project: projectName,
     tag,
     view,
     enabled: view !== undefined,
   });
 
-  // state
-  const [projectView, setProjectView] = useState<ProjectView>('samples');
-  const [showDeletePEPModal, setShowDeletePEPModal] = useState(false);
-  const [showForkPEPModal, setShowForkPEPModal] = useState(false);
-  const [showAPIEndpointsModal, setShowAPIEndpointsModal] = useState(false);
-  const [showEditMetaMetadataModal, setShowEditMetaMetadataModal] = useState(false);
-  const [showAddToPOPModal, setShowAddToPOPModal] = useState(false);
+  // local state
   const [showLargeSampleTableModal, setShowLargeSampleTableModal] = useState(false);
-  const [copied, setCopied] = useState(false);
-  const [forceTraditionalInterface, setForceTraditionalInterface] = useState(false); // let users toggle between PEP and POP interfaces
 
   // state for editing config, samples, and subsamples
   const [newProjectConfig, setNewProjectConfig] = useState(projectConfig?.config || '');
-  const [newProjectSamples, setNewProjectSamples] = useState<Sample[]>(projectSamples?.items || []);
-  const [newProjectSubsamples, setNewProjectSubsamples] = useState<Sample[]>(projectSubsamples?.items || []);
-
-  const {
-    data: validationResult,
-    isLoading: isValidationLoading,
-    isFetching: isValidationFetching,
-    refetch,
-  } = useValidation({
-    pep_registry: `${namespace}/${project}:${tag}`,
-    schema: projectInfo?.pep_schema || 'pep/2.0.0', // default to basic pep 2.0.0 schema
-    schema_registry: projectInfo?.pep_schema,
-    enabled: namespace && project && tag && projectInfo === undefined ? false : fetchSampleTable,
-  });
+  const [newProjectSamples, setNewProjectSamples] = useState<Sample[]>(samples);
+  const [newProjectSubsamples, setNewProjectSubsamples] = useState<Sample[]>(subSampleTableQuery.data?.items || []);
 
   const runValidation = () => {
-    refetch();
+    projectValidationQuery.refetch();
   };
 
   // watch for query changes to update newProjectConfig and newProjectSamples
   useEffect(() => {
     setNewProjectConfig(projectConfig?.config || '');
-    setNewProjectSamples(projectSamples?.items || []);
-    setNewProjectSubsamples(projectSubsamples?.items || []);
-  }, [projectConfig, projectSamples, projectSubsamples]);
-
-  // watch for the fork query param to open the fork modal
-  useEffect(() => {
-    if (fork) {
-      if (user) {
-        setShowForkPEPModal(true);
-      } else {
-        login();
-      }
-    }
-  }, [fork]);
+    setNewProjectSamples(samples);
+    setNewProjectSubsamples(subsamples);
+  }, [projectAnnotationQuery, subSampleTableQuery, subSampleTableQuery]);
 
   useEffect(() => {
     if (projectInfo !== undefined && hideLargeSampleTableModal === 'false') {
-      setShowLargeSampleTableModal(!fetchSampleTable);
+      setShowLargeSampleTableModal(!shouldFetchSampleTable);
     }
-  }, [fetchSampleTable, projectInfo]);
+  }, [shouldFetchSampleTable, projectAnnotationQuery.data]);
 
   // check if config or samples are dirty
   const configIsDirty = newProjectConfig !== projectConfig?.config;
 
   // use JSON stringify to compare arrays
-  const samplesIsDirty = JSON.stringify(newProjectSamples) !== JSON.stringify(projectSamples?.items || []);
-  const subsamplesIsDirty = JSON.stringify(newProjectSubsamples) !== JSON.stringify(projectSubsamples?.items || []);
+  const samplesIsDirty = JSON.stringify(newProjectSamples) !== JSON.stringify(samples);
+  const subsamplesIsDirty = JSON.stringify(newProjectSubsamples) !== JSON.stringify(subsamples);
 
-  // reset config and samples
-  const resetConfig = () => {
-    setNewProjectConfig(projectConfig?.config || '');
-  };
-  const resetSamples = () => {
-    setNewProjectSamples(projectSamples?.items || []);
-  };
-  const resetSubsamples = () => {
-    setNewProjectSubsamples(projectSubsamples?.items || []);
-  };
-
-  // mutations for updating config and samples on the server
-  const configMutation = useConfigMutation(namespace || '', project || '', tag, newProjectConfig);
-
-  const totalProjectMutation = useTotalProjectChangeMutation(namespace || '', project || '', tag, {
+  const totalProjectMutation = useTotalProjectChangeMutation(namespace || '', projectName || '', tag, {
     config: newProjectConfig,
     samples: newProjectSamples,
     subsamples: newProjectSubsamples,
@@ -209,11 +117,7 @@ export const ProjectPage: FC = () => {
     runValidation();
   };
 
-  const projectHash = projectInfo?.pep_schema?.replace(/\//g, '/#/');
   const projectDataRef = useRef<HTMLDivElement>(null);
-  const projectDescriptionRef = useRef<HTMLDivElement>(null);
-  const showMoreButton = projectDescriptionRef.current?.clientHeight! >= MAX_DESC_HEIGHT;
-  const [showMoreDescription, setShowMoreDescription] = useState(false);
 
   // on save handler
   useEffect(() => {
@@ -228,7 +132,7 @@ export const ProjectPage: FC = () => {
           break;
       }
       // check for ctrl+s, ignore if fetchsampletable is false
-      if (ctrlKey && e.key === 's' && fetchSampleTable && !view) {
+      if (ctrlKey && e.key === 's' && shouldFetchSampleTable && !view) {
         e.preventDefault();
         if (configIsDirty || samplesIsDirty || subsamplesIsDirty) {
           handleTotalProjectChange();
@@ -237,9 +141,9 @@ export const ProjectPage: FC = () => {
     });
   }, []);
 
-  if (error) {
+  if (projectAnnotationQuery.error) {
     return (
-      <PageLayout fullWidth footer={false} title={`${namespace}/${project}`}>
+      <PageLayout fullWidth footer={false} title={`${namespace}/${projectName}`}>
         <div className="d-flex flex-column align-items-center justify-content-center" style={{ minHeight: '50vh' }}>
           <h1 className="fw-bold">Error 😫</h1>
           <p className="text-muted fst-italic">An error occured fetching the project... Are you sure it exists?</p>
@@ -254,345 +158,38 @@ export const ProjectPage: FC = () => {
   }
 
   return (
-    <PageLayout fullWidth footer={false} title={`${namespace}/${project}`}>
-      <div className='shadow-sm pt-2'>
-        <div className="d-flex flex-row align-items-start justify-content-between px-4 mb-2">
-          <div className="d-flex flex-row align-items-center w-75">
-            <Breadcrumb className="fw-bold pt-2">
-              <Breadcrumb.Item href="/">home</Breadcrumb.Item>
-              <Breadcrumb.Item href={`/${namespace}`}>{namespace}</Breadcrumb.Item>
-              <Breadcrumb.Item active>
-                {project}:{tag}
-              </Breadcrumb.Item>
-              {projectInfo?.is_private && (
-                <li>
-                  <span className="border py-1 ms-2 badge rounded-pill border-danger text-danger">Private</span>
-                </li>
-              )}
-            </Breadcrumb>
-            <div className="ms-2">
-              <a className="text-decoration-none" href={`https://schema.databio.org/#/${projectHash}`}>
-                <SchemaTag schema={projectInfo?.pep_schema} />
-              </a>
-            </div>
-          </div>
-          <div className="d-flex flex-row align-items-center gap-1 justify-content-end w-100 pt-2">
-            <div className="d-flex flex-row align-items-center">
-              <div className="border border-dark shadow-sm rounded-1 ps-2 d-flex align-items-center">
-                <span className="text-sm fw-bold">
-                  {projectInfo
-                    ? `${projectInfo?.namespace}/${projectInfo?.name}:${projectInfo?.tag || 'default'}`
-                    : 'Loading'}
-                </span>
-                <button
-                  className="btn btn-sm btn-link-dark border-0 shadow-none ms-1 pe-2"
-                  onClick={() => {
-                    copyToClipboard(`${projectInfo?.namespace}/${projectInfo?.name}:${projectInfo?.tag || 'default'}`);
-                    setCopied(true);
-                    setTimeout(() => {
-                      setCopied(false);
-                    }, 1000);
-                  }}
-                >
-                  {copied ? <i className="bi bi-check"></i> : <i className="bi bi-clipboard" />}
-                </button>
-              </div>
-            </div>
-            <Dropdown>
-              <Dropdown.Toggle size="sm" variant="dark">
-                <i className="bi bi-gear-fill me-1"></i>
-                More
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item onClick={() => downloadZip(namespace || '', project || '', tag, jwt)}>
-                  <i className="bi bi-file-earmark-zip me-1"></i>
-                  Download
-                </Dropdown.Item>
-                <Dropdown.Item onClick={() => setShowAPIEndpointsModal(true)}>
-                  <i className="bi bi-hdd-rack me-1"></i>
-                  API
-                </Dropdown.Item>
-                <Fragment>
-                  {user && (
-                    <Fragment>
-                      <Dropdown.Item onClick={() => setShowForkPEPModal(true)}>
-                        <i className="me-1 bi bi-bezier2"></i>
-                        Fork
-                      </Dropdown.Item>
-                      <Dropdown.Item onClick={() => setShowAddToPOPModal(true)}>
-                        <i className="me-1 bi bi-plus-circle"></i>
-                        Add to POP
-                      </Dropdown.Item>
-                    </Fragment>
-                  )}
-                </Fragment>
-                <Fragment>
-                  {projectInfo?.pop && (
-                    <Fragment>
-                      <Dropdown.Divider />
-                      <Dropdown.Item onClick={() => setForceTraditionalInterface(!forceTraditionalInterface)}>
-                        <i className="me-1 bi bi-layout-text-sidebar-reverse"></i>
-                        {forceTraditionalInterface ? 'View as POP' : 'View as PEP'}
-                      </Dropdown.Item>
-                    </Fragment>
-                  )}
-                </Fragment>
-                <Fragment>
-                  {user && projectInfo && canEdit(user, projectInfo) && (
-                    <Fragment>
-                      <Dropdown.Divider />
-                      <Dropdown.Item onClick={() => setShowEditMetaMetadataModal(true)}>
-                        <i className="me-1 bi bi-pencil-square"></i>
-                        Edit
-                      </Dropdown.Item>
-                      <Dropdown.Item className="text-danger" onClick={() => setShowDeletePEPModal(true)}>
-                        <i className="me-1 bi bi-trash3"></i>
-                        Delete
-                      </Dropdown.Item>
-                    </Fragment>
-                  )}
-                </Fragment>
-              </Dropdown.Menu>
-            </Dropdown>
-            <button
-              className="btn btn-outline-dark btn-sm"
-              disabled={starAddMutation.isPending || starRemoveMutation.isPending}
-              onClick={() => {
-                if (isStarred) {
-                  starRemoveMutation.mutate();
-                } else {
-                  starAddMutation.mutate();
-                }
-              }}
-            >
-              {isStarred ? (
-                <Fragment>
-                  <span className="text-primary">
-                    <i className="me-1 bi bi-star-fill"></i>
-                    Starred
-                    <span className="px-2 border border-dark rounded-pill text-dark ms-1 bg-dark bg-opacity-10">
-                      {numberWithCommas(projectInfo?.stars_number || 0)}
-                    </span>
-                  </span>
-                </Fragment>
-              ) : (
-                <Fragment>
-                  <span>
-                    <i className="me-1 bi bi-star"></i>
-                    Star
-                    <span className="px-2 border border-dark rounded-pill text-dark ms-1 bg-dark bg-opacity-10">
-                      {numberWithCommas(projectInfo?.stars_number || 0)}
-                    </span>
-                  </span>
-                </Fragment>
-              )}
-            </button>
-          </div>
-        </div>
-        <div className="d-flex flex-row align-items-center justify-content-between px-4 w-100">
-          <div ref={projectDescriptionRef} className="w-100" style={{ maxHeight: MAX_DESC_HEIGHT, overflow: 'hidden' }}>
-            <Markdown>{projectInfo?.description || 'No description'}</Markdown>
-          </div>
-        </div>
-        {showMoreButton && (
-          <div className="d-flex flex-row justify-content-center mb-2 translate-y-1-up">
-            {showMoreDescription ? (
-              <button
-                className="btn btn-sm btn-dark rounded-pill"
-                onClick={() => {
-                  projectDescriptionRef.current?.style.setProperty('max-height', `${MAX_DESC_HEIGHT}px`);
-                  projectDescriptionRef.current?.style.setProperty('overflow', 'hidden');
-                  setShowMoreDescription(false);
-                }}
-              >
-                <i className="bi bi-arrow-up" />
-                Less
-              </button>
-            ) : (
-              <button
-                className="btn btn-sm btn-dark rounded-pill"
-                onClick={() => {
-                  projectDescriptionRef.current?.style.removeProperty('max-height');
-                  projectDescriptionRef.current?.style.removeProperty('overflow');
-                  setShowMoreDescription(true);
-                }}
-              >
-                <i className="bi bi-arrow-down" />
-                More
-              </button>
-            )}
-          </div>
-        )}
-        <div className="px-4 pb-3 border-bottom">
-          <div className="d-flex flex-row align-items-center text-muted mt-1">
-            <small className="d-flex flex-row align-items-center justify-content-between w-100">
-              <span className="me-3">
-                <i className="bi bi-calendar3"></i>
-                <span className="mx-1">Created:</span>
-                <span id="project-submission-date">{dateStringToDateTime(projectInfo?.submission_date || '')}</span>
-                <i className="ms-4 bi bi-calendar3"></i>
-                <span className="mx-1">Updated:</span>
-                <span id="project-update-date">{dateStringToDateTime(projectInfo?.last_update_date || '')}</span>
-                <i className="ms-4 bi bi-123"></i>
-                <span className="mx-1">Sample Count:</span>
-                <span id="project-update-date">{ projectInfo?.number_of_samples }</span>
-              </span>
-              <span className="">
-                {projectInfo?.forked_from && (
-                  <span className="p-1 border rounded fw-bold">
-                    <Fragment>
-                      <i className="bi bi-bezier2"></i>
-                      <span className="ms-1">Forked from</span>
-                      <a
-                        className="text-decoration-none ms-1"
-                        href={`/${projectInfo?.forked_from.replace(':', '?tag=')}`}
-                      >
-                        {projectInfo?.forked_from}
-                      </a>
-                    </Fragment>
-                  </span>
-                )}
-                {/*{projectInfo?.digest}*/}
-              </span>
-            </small>
-          </div>
-        </div>
-      </div>
+    <PageLayout fullWidth footer={false} title={`${namespace}/${projectName}`}>
+      <ProjectHeaderBar isStarred={isStarred} />
+      <ProjectDescription />
+      <ProjectInfoFooter />
+
       {projectInfo?.pop && !forceTraditionalInterface ? (
         <PopInterface project={projectInfo} />
       ) : (
         <Fragment>
-          <div className="pt-0 px-2" style={{backgroundColor: '#EFF3F668', height: '3.5em'}}>
-            {projectInfoIsLoading || projectInfo === undefined ? (
+          <div className="mt-2 px-2">
+            {projectAnnotationQuery.isFetching || projectInfo === undefined ? (
               <ProjectPageheaderPlaceholder />
             ) : (
-              <>
-                <div className="h-100 flex-row d-flex align-items-end justify-content-between mx-3">
-                  <ProjectDataNav
-                    pageView={projectView}
-                    setPageView={(view) => setProjectView(view)}
-                    configIsDirty={configIsDirty}
-                    samplesIsDirty={samplesIsDirty}
-                    subsamplesIsDirty={subsamplesIsDirty}
-                    projectViewIsLoading={projectViewsIsLoading}
-                    projectViews={projectViews}
-                    projectView={view}
-                    setProjectView={setView}
-                  />
-                  {/* no matter what, only render if belonging to the user */}
-                  {user && projectInfo && canEdit(user, projectInfo) ? (
-                    <div className="h-100 d-flex flex-row align-items-center w-25 justify-content-end">
-                      {/* <ValidationTooltip /> */}
-                      {projectInfo?.pep_schema ? (
-                        <div className="d-flex flex-row align-items-center me-4">
-                          {isValidationLoading || isValidationFetching ? (
-                            <>
-                              <span>Validating...</span>
-                            </>
-                          ) : validationResult?.valid ? (
-                            <>
-                              <Dropdown>
-                                <div className="d-flex align-items-center">
-                                  <Dropdown.Toggle as={ValiationToggle}>
-                                    <StatusIcon className="text-2xl cursor-pointer" variant="success" />
-                                  </Dropdown.Toggle>
-                                  <span className="text-success">Valid</span>
-                                </div>
-                                <Dropdown.Menu className="border border-dark shadow-lg">
-                                  <Dropdown.Header className="text-success">
-                                    Your PEP is valid against {projectInfo?.pep_schema}
-                                  </Dropdown.Header>
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </>
-                          ) : (
-                            <>
-                              <Dropdown>
-                                <div className="h-100 d-flex align-items-center">
-                                  <Dropdown.Toggle as={ValiationToggle}>
-                                    <StatusIcon className="text-2xl cursor-pointer" variant="danger" />
-                                  </Dropdown.Toggle>
-                                  <span className="text-danger">Invalid</span>
-                                </div>
-                                <Dropdown.Menu className="border border-dark shadow-lg">
-                                  <Dropdown.Header>
-                                    {validationResult?.error_type === 'Schema' ? (
-                                      <span className="text-danger">Schema is invalid</span>
-                                    ) : (
-                                      <>
-                                        <span className="text-danger fw-bold">
-                                          Your PEP is invalid against {projectInfo?.pep_schema}
-                                        </span>
-                                        <p className="mb-0 fw-bold">
-                                          <span className="text-danger">
-                                            Errors found in {validationResult?.error_type}
-                                            {': '}
-                                          </span>
-                                        </p>
-                                        {validationResult?.errors.map((error, index) => (
-                                          <Dropdown.Header className="text-danger" key={index}>
-                                            <i className="bi bi bi-exclamation-triangle me-2"></i>
-                                            {error}
-                                          </Dropdown.Header>
-                                        ))}
-                                      </>
-                                    )}
-                                  </Dropdown.Header>
-                                </Dropdown.Menu>
-                              </Dropdown>
-                            </>
-                          )}
-                        </div>
-                      ) : (
-                        <div className="d-flex flex-row align-items-center me-4">
-                          <>
-                            <div className="d-flex align-items-center">
-                              <StatusIcon className="text-2xl" variant="warning" />
-                              <span>Add schema to PEP to validate</span>
-                            </div>
-                          </>
-                        </div>
-                      )}
-                      <div className="ps-1">
-                        {fetchSampleTable && !view && (
-                          <Fragment>
-                            <button
-                              disabled={
-                                configMutation.isPending ||
-                                totalProjectMutation.isPending ||
-                                !(configIsDirty || samplesIsDirty || subsamplesIsDirty) ||
-                                !fetchSampleTable ||
-                                !!view
-                              }
-                              onClick={() => handleTotalProjectChange()}
-                              className="fst-italic btn btn-sm btn-success me-1 border-dark"
-                            >
-                              {configMutation.isPending || totalProjectMutation.isPending ? 'Saving...' : 'Save'}
-                            </button>
-                            <button
-                              className="fst-italic btn btn-sm btn-outline-dark bg-white"
-                              onClick={() => {
-                                resetConfig();
-                                resetSamples();
-                                resetSubsamples();
-                              }}
-                              disabled={!(configIsDirty || samplesIsDirty || subsamplesIsDirty)}
-                            >
-                              Discard
-                            </button>
-                          </Fragment>
-                        )}
-                      </div>
-                    </div>
-                  ) : null}
-                </div>
-              </>
+              <ProjectValidationAndEditButtons
+                newProjectSamples={newProjectSamples}
+                newProjectSubsamples={newProjectSubsamples}
+                newProjectConfig={newProjectConfig}
+                view={view}
+                setView={setView}
+                setNewProjectConfig={setNewProjectConfig}
+                setNewProjectSamples={setNewProjectSamples}
+                setNewProjectSubsamples={setNewProjectSubsamples}
+                configIsDirty={configIsDirty}
+                samplesIsDirty={samplesIsDirty}
+                subsamplesIsDirty={subsamplesIsDirty}
+              />
             )}
           </div>
           <div className="row gx-0 h-100">
             <div className="col-12">
               <div ref={projectDataRef}>
-                {projectView === 'samples' ? (
+                {pageView === 'samples' ? (
                   <SampleTable
                     // fill to the rest of the screen minus the offset of the project data
                     height={window.innerHeight - 15 - (projectDataRef.current?.offsetTop || 300)}
@@ -601,7 +198,7 @@ export const ProjectPage: FC = () => {
                     data={view !== undefined ? viewData?._samples || [] : newProjectSamples || []}
                     onChange={(value) => setNewProjectSamples(value)}
                   />
-                ) : projectView === 'subsamples' ? (
+                ) : pageView === 'subsamples' ? (
                   <>
                     <SampleTable
                       // fill to the rest of the screen minus the offset of the project data
@@ -618,7 +215,7 @@ export const ProjectPage: FC = () => {
                     <ProjectConfigEditor
                       readOnly={!(projectInfo && canEdit(user, projectInfo))}
                       value={
-                        projectConfigIsLoading
+                        projectConfigQuery.isLoading
                           ? 'Loading.'
                           : projectConfig?.config
                           ? newProjectConfig
@@ -634,45 +231,6 @@ export const ProjectPage: FC = () => {
         </Fragment>
       )}
       {/* Modals */}
-      <EditMetaMetadataModal
-        show={showEditMetaMetadataModal}
-        onHide={() => setShowEditMetaMetadataModal(false)}
-        namespace={namespace || ''}
-        project={project || ''}
-        tag={tag}
-      />
-      <ProjectAPIEndpointsModal
-        show={showAPIEndpointsModal}
-        onHide={() => setShowAPIEndpointsModal(false)}
-        namespace={namespace || ''}
-        project={project || ''}
-        tag={tag}
-      />
-      <DeletePEPModal
-        show={showDeletePEPModal}
-        onHide={() => setShowDeletePEPModal(false)}
-        namespace={namespace || ''}
-        project={project || ''}
-        tag={tag}
-        redirect={`/${user?.login}`}
-      />
-      <ForkPEPModal
-        show={showForkPEPModal}
-        onHide={() => setShowForkPEPModal(false)}
-        namespace={namespace || ''}
-        project={project || ''}
-        description={projectInfo?.description || ''}
-        tag={tag}
-      />
-      <AddToPOPModal
-        show={showAddToPOPModal}
-        onHide={() => {
-          setShowAddToPOPModal(false);
-        }}
-        namespace={namespace!}
-        project={project!}
-        tag={tag}
-      />
       <LargeSampleTableModal
         namespace={namespace}
         show={showLargeSampleTableModal}
diff --git a/web/src/utils/etc.ts b/web/src/utils/etc.ts
index b630ee2a..592e3d6f 100644
--- a/web/src/utils/etc.ts
+++ b/web/src/utils/etc.ts
@@ -83,3 +83,10 @@ export const constructQueryFromPaginationParams = (params: PaginationParams): UR
   }
   return query;
 };
+
+export const isEllipsisActive = (element: HTMLElement | null): boolean => {
+  if (!element) {
+    return false;
+  }
+  return element.offsetWidth < element.scrollWidth;
+};