diff --git a/backend/app/api/routes/projects.py b/backend/app/api/routes/projects.py
index bae6baf0..55d159b6 100644
--- a/backend/app/api/routes/projects.py
+++ b/backend/app/api/routes/projects.py
@@ -240,7 +240,7 @@ def create_project(
             logger.warning(f"Failed to create: {resp.json()}")
             try:
                 message = resp.json()["errors"][0]["message"].capitalize()
-            except:
+            except Exception:
                 message = "Failed to create GitHub repo"
             raise HTTPException(resp.status_code, message)
         resp_json = resp.json()
@@ -1227,7 +1227,31 @@ def get_project_figure(
     current_user: CurrentUser,
     session: SessionDep,
 ) -> Figure:
-    raise HTTPException(501)
+    project = app.projects.get_project(
+        session=session,
+        owner_name=owner_name,
+        project_name=project_name,
+        current_user=current_user,
+        min_access_level="read",
+    )
+    ck_info = get_ck_info(
+        project=project, user=current_user, session=session, ttl=120
+    )
+    figures = ck_info.get("figures", [])
+    # Get the figure content and base64 encode it
+    for fig in figures:
+        if fig.get("path") == figure_path:
+            item = get_project_contents(
+                owner_name=owner_name,
+                project_name=project_name,
+                session=session,
+                current_user=current_user,
+                path=fig["path"],
+            )
+            fig["content"] = item.content
+            fig["url"] = item.url
+            return Figure.model_validate(fig)
+    raise HTTPException(404, "Figure not found")
 
 
 @router.post("/projects/{owner_name}/{project_name}/figures")
@@ -2632,3 +2656,76 @@ def get_project_app(
     if project_app is None:
         return
     return ProjectApp.model_validate(project_app)
+
+
+class ProjectShowcaseFigureInput(BaseModel):
+    figure: str
+
+
+class ProjectShowcaseFigure(BaseModel):
+    figure: Figure
+
+
+class ProjectShowcaseText(BaseModel):
+    text: str
+
+
+class ProjectShowcaseInput(BaseModel):
+    elements: list[ProjectShowcaseFigureInput | ProjectShowcaseText]
+
+
+class ProjectShowcase(BaseModel):
+    elements: list[ProjectShowcaseFigure | ProjectShowcaseText]
+
+
+@router.get("/projects/{owner_name}/{project_name}/showcase")
+def get_project_showcase(
+    owner_name: str,
+    project_name: str,
+    current_user: CurrentUser,
+    session: SessionDep,
+) -> ProjectShowcase | None:
+    project = app.projects.get_project(
+        owner_name=owner_name,
+        project_name=project_name,
+        session=session,
+        current_user=current_user,
+        min_access_level="read",
+    )
+    incorrectly_defined = ProjectShowcase(
+        elements=[
+            ProjectShowcaseText(text="Showcase is not correctly defined.")
+        ]
+    )
+    ck_info = get_ck_info(
+        project=project, user=current_user, session=session, ttl=120
+    )
+    showcase = ck_info.get("showcase")
+    if showcase is None:
+        return
+    try:
+        inputs = ProjectShowcaseInput.model_validate(dict(elements=showcase))
+    except Exception:
+        return incorrectly_defined
+    # Iterate over showcase elements, fetching the contents to return
+    elements_out = []
+    for element_in in inputs.elements:
+        if isinstance(element_in, ProjectShowcaseFigureInput):
+            try:
+                element_out = ProjectShowcaseFigure(
+                    figure=get_project_figure(
+                        owner_name=owner_name,
+                        project_name=project_name,
+                        session=session,
+                        current_user=current_user,
+                        figure_path=element_in.figure,
+                    )
+                )
+            except Exception:
+                element_out = ProjectShowcaseText(
+                    text=f"Figure at path '{element_in.figure}' not found"
+                )
+        else:
+            element_out = element_in
+        elements_out.append(element_out)
+    return ProjectShowcase.model_validate(dict(elements=elements_out))
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index 4f65562c..9d4bc8e6 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -58,27 +58,9 @@ strict = true
 exclude = ["venv", ".venv", "alembic"]
 
 [tool.ruff]
-target-version = "py310"
+target-version = "py312"
 exclude = ["alembic"]
 
-[tool.ruff.lint]
-select = [
-    "E",  # pycodestyle errors
-    "W",  # pycodestyle warnings
-    "F",  # pyflakes
-    "I",  # isort
-    "B",  # flake8-bugbear
-    "C4",  # flake8-comprehensions
-    "UP",  # pyupgrade
-    "ARG001", # unused arguments in functions
-]
-ignore = [
-    "E501",  # line too long, handled by black
-    "B008",  # do not perform function calls in argument defaults
-    "W191",  # indentation contains tabs
-    "B904",  # Allow raising exceptions without from e, for HTTPException
-]
-
 [tool.ruff.lint.pyupgrade]
 # Preserve types, even if a file imports `from __future__ import annotations`.
 keep-runtime-typing = true
diff --git a/frontend/src/client/models.ts b/frontend/src/client/models.ts
index 9ae5e9b3..224356d6 100644
--- a/frontend/src/client/models.ts
+++ b/frontend/src/client/models.ts
@@ -434,6 +434,18 @@ export type ProjectPublic = {
   current_user_access?: "read" | "write" | "admin" | "owner" | null
 }
 
+export type ProjectShowcase = {
+  elements: Array<ProjectShowcaseFigure | ProjectShowcaseText>
+}
+
+export type ProjectShowcaseFigure = {
+  figure: Figure
+}
+
+export type ProjectShowcaseText = {
+  text: string
+}
+
 export type ProjectsPublic = {
   data: Array<ProjectPublic>
   count: number
diff --git a/frontend/src/client/schemas.ts b/frontend/src/client/schemas.ts
index 285d8fb0..79936f5f 100644
--- a/frontend/src/client/schemas.ts
+++ b/frontend/src/client/schemas.ts
@@ -2169,6 +2169,44 @@ export const $ProjectPublic = {
   },
 } as const
 
+export const $ProjectShowcase = {
+  properties: {
+    elements: {
+      type: "array",
+      contains: {
+        type: "any-of",
+        contains: [
+          {
+            type: "ProjectShowcaseFigure",
+          },
+          {
+            type: "ProjectShowcaseText",
+          },
+        ],
+      },
+      isRequired: true,
+    },
+  },
+} as const
+
+export const $ProjectShowcaseFigure = {
+  properties: {
+    figure: {
+      type: "Figure",
+      isRequired: true,
+    },
+  },
+} as const
+
+export const $ProjectShowcaseText = {
+  properties: {
+    text: {
+      type: "string",
+      isRequired: true,
+    },
+  },
+} as const
+
 export const $ProjectsPublic = {
   properties: {
     data: {
diff --git a/frontend/src/client/services.ts b/frontend/src/client/services.ts
index 4fbb1b32..11a02ad6 100644
--- a/frontend/src/client/services.ts
+++ b/frontend/src/client/services.ts
@@ -54,6 +54,7 @@ import type {
   ProjectCreate,
   ProjectPatch,
   ProjectPublic,
+  ProjectShowcase,
   ProjectsPublic,
   Publication,
   Question,
@@ -379,6 +380,10 @@ export type ProjectsData = {
     ownerName: string
     projectName: string
   }
+  GetProjectShowcase: {
+    ownerName: string
+    projectName: string
+  }
 }
 
 export type OrgsData = {
@@ -2129,6 +2134,28 @@ export class ProjectsService {
       },
     })
   }
+
+  /**
+   * Get Project Showcase
+   * @returns unknown Successful Response
+   * @throws ApiError
+   */
+  public static getProjectShowcase(
+    data: ProjectsData["GetProjectShowcase"],
+  ): CancelablePromise<ProjectShowcase | null> {
+    const { ownerName, projectName } = data
+    return __request(OpenAPI, {
+      method: "GET",
+      url: "/projects/{owner_name}/{project_name}/showcase",
+      path: {
+        owner_name: ownerName,
+        project_name: projectName,
+      },
+      errors: {
+        422: `Validation Error`,
+      },
+    })
+  }
 }
 
 export class OrgsService {
diff --git a/frontend/src/components/Common/ActionsMenu.tsx b/frontend/src/components/Common/ActionsMenu.tsx
index 2773297c..95e20d7c 100644
--- a/frontend/src/components/Common/ActionsMenu.tsx
+++ b/frontend/src/components/Common/ActionsMenu.tsx
@@ -21,7 +21,7 @@ interface ActionsMenuProps {
 }
 
 const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
-  const editUserModal = useDisclosure()
+  const editEntityModal = useDisclosure()
   const deleteModal = useDisclosure()
 
   return (
@@ -35,7 +35,7 @@ const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
         />
         <MenuList>
           <MenuItem
-            onClick={editUserModal.onOpen}
+            onClick={editEntityModal.onOpen}
             icon={<FiEdit fontSize="16px" />}
           >
             Edit {type.toLowerCase()}
@@ -51,14 +51,14 @@ const ActionsMenu = ({ type, value, disabled }: ActionsMenuProps) => {
         {type === "User" ? (
           <EditUser
             user={value as UserPublic}
-            isOpen={editUserModal.isOpen}
-            onClose={editUserModal.onClose}
+            isOpen={editEntityModal.isOpen}
+            onClose={editEntityModal.onClose}
           />
         ) : (
           <EditProject
             project={value as ProjectPublic}
-            isOpen={editUserModal.isOpen}
-            onClose={editUserModal.onClose}
+            isOpen={editEntityModal.isOpen}
+            onClose={editEntityModal.onClose}
           />
         )}
         <Delete
diff --git a/frontend/src/components/Figures/FigureView.tsx b/frontend/src/components/Figures/FigureView.tsx
new file mode 100644
index 00000000..84667270
--- /dev/null
+++ b/frontend/src/components/Figures/FigureView.tsx
@@ -0,0 +1,104 @@
+import { Box, Image, Text } from "@chakra-ui/react"
+import Plot from "react-plotly.js"
+import axios from "axios"
+import { useQuery } from "@tanstack/react-query"
+import { getRouteApi } from "@tanstack/react-router"
+
+import { type Figure } from "../../client"
+
+interface FigureViewProps {
+  figure: Figure
+}
+
+function FigureView({ figure }: FigureViewProps) {
+  const routeApi = getRouteApi("/_layout/$userName/$projectName")
+  const { userName, projectName } = routeApi.useParams()
+  let figView = <>Not set</>
+  if (figure.path.endsWith(".pdf")) {
+    figView = (
+      <Box height="530px" width="100%">
+        <embed
+          height="100%"
+          width="100%"
+          type="application/pdf"
+          src={
+            figure.content
+              ? `data:application/pdf;base64,${figure.content}`
+              : String(figure.url)
+          }
+        />
+      </Box>
+    )
+  } else if (
+    figure.path.endsWith(".png") ||
+    figure.path.endsWith(".jpg") ||
+    figure.path.endsWith(".jpeg")
+  ) {
+    figView = (
+      <Box width="100%">
+        <Image
+          alt={figure.title}
+          src={
+            figure.content
+              ? `data:image/png;base64,${figure.content}`
+              : String(figure.url)
+          }
+        />
+      </Box>
+    )
+  } else if (figure.path.endsWith(".json")) {
+    const figObject = JSON.parse(atob(String(figure.content)))
+    const layout = figObject.layout
+    figView = (
+      <Box width="100%">
+        <Plot
+          data={figObject.data}
+          layout={layout}
+          config={{ displayModeBar: false }}
+          style={{ width: "100%", height: "100%" }}
+          useResizeHandler={true}
+        />
+      </Box>
+    )
+  } else if (figure.path.endsWith(".html")) {
+    // Embed HTML figure in an iframe
+    const { data, isPending } = useQuery({
+      queryFn: () => axios.get(String(figure.url)),
+      queryKey: [
+        "projects",
+        userName,
+        projectName,
+        "figure-content",
+        figure.path,
+      ],
+      enabled: Boolean(!figure.content && figure.url),
+    })
+    let figContent = figure.content
+    if (!figure.content && figure.url) {
+      figContent = data?.data
+    } else {
+      figContent = "No content found"
+    }
+    figView = (
+      <Box width="100%" height="400px">
+        {figContent ? (
+          <iframe
+            width="100%"
+            height="100%"
+            title="figure"
+            srcDoc={figContent}
+          />
+        ) : isPending ? (
+          "Loading..."
+        ) : (
+          ""
+        )}
+      </Box>
+    )
+  } else {
+    figView = <Text>Cannot render this type of figure</Text>
+  }
+  return figView
+}
+
+export default FigureView
diff --git a/frontend/src/components/Projects/ProjectShowcase.tsx b/frontend/src/components/Projects/ProjectShowcase.tsx
new file mode 100644
index 00000000..864a6289
--- /dev/null
+++ b/frontend/src/components/Projects/ProjectShowcase.tsx
@@ -0,0 +1,42 @@
+import { Text, Flex, Spinner, Box } from "@chakra-ui/react"
+
+import useProject from "../../hooks/useProject"
+import FigureView from "../Figures/FigureView"
+
+interface ProjectShowcaseProps {
+  ownerName: string
+  projectName: string
+}
+
+function ProjectShowcase({ ownerName, projectName }: ProjectShowcaseProps) {
+  const { showcaseRequest } = useProject(ownerName, projectName, false)
+  return (
+    <>
+      {showcaseRequest.isPending ? (
+        <Flex justify="center" align="center" height="100px" width="full">
+          <Spinner size="xl" color="ui.main" />
+        </Flex>
+      ) : showcaseRequest.data ? (
+        <>
+          {showcaseRequest.data.elements.map((item) => (
+            <>
+              {"figure" in item ? (
+                <Box mt={2}>
+                  <FigureView figure={item.figure} />
+                </Box>
+              ) : "text" in item ? (
+                <Text mt={2}>{item.text}</Text>
+              ) : (
+                ""
+              )}
+            </>
+          ))}
+        </>
+      ) : (
+        ""
+      )}
+    </>
+  )
+}
+
+export default ProjectShowcase
diff --git a/frontend/src/hooks/useProject.ts b/frontend/src/hooks/useProject.ts
index c3bd16c3..8f57c754 100644
--- a/frontend/src/hooks/useProject.ts
+++ b/frontend/src/hooks/useProject.ts
@@ -66,6 +66,17 @@ const useProject = (
     refetchOnMount: false,
   })
 
+  const showcaseRequest = useQuery({
+    queryKey: ["projects", userName, projectName, "showcase"],
+    queryFn: () =>
+      ProjectsService.getProjectShowcase({
+        ownerName: userName,
+        projectName: projectName,
+      }),
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  })
+
   interface IssueStateChange {
     state: "open" | "closed"
     issueNumber: number
@@ -102,6 +113,7 @@ const useProject = (
     issuesRequest,
     questionsRequest,
     reproCheckRequest,
+    showcaseRequest,
     issueStateMutation,
     putDevcontainerMutation,
   }
diff --git a/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx b/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx
index 6d041bde..43e1c264 100644
--- a/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx
+++ b/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx
@@ -16,6 +16,11 @@ import {
   Text,
   Code,
   Badge,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  Box,
 } from "@chakra-ui/react"
 import {
   createFileRoute,
@@ -26,10 +31,13 @@ import {
 import { useQuery } from "@tanstack/react-query"
 import { ExternalLinkIcon } from "@chakra-ui/icons"
 import { FaGithub, FaQuestion } from "react-icons/fa"
+import { MdEdit } from "react-icons/md"
+import { BsThreeDots } from "react-icons/bs"
 import axios from "axios"
 
 import Sidebar from "../../../../components/Common/Sidebar"
-import { ProjectsService } from "../../../../client"
+import { ProjectPublic, ProjectsService } from "../../../../client"
+import EditProject from "../../../../components/Projects/EditProject"
 
 export const Route = createFileRoute("/_layout/$userName/$projectName/_layout")(
   {
@@ -257,6 +265,40 @@ function HelpContent() {
   )
 }
 
+interface ProjectMenuProps {
+  project: ProjectPublic
+}
+
+function ProjectMenu({ project }: ProjectMenuProps) {
+  const editProjectModal = useDisclosure()
+
+  return (
+    <>
+      <Menu>
+        <MenuButton
+          as={IconButton}
+          icon={<BsThreeDots />}
+          size="xs"
+          mr={1}
+        ></MenuButton>
+        <MenuList>
+          <MenuItem
+            icon={<MdEdit fontSize={18} />}
+            onClick={editProjectModal.onOpen}
+          >
+            Edit title or description
+          </MenuItem>
+        </MenuList>
+      </Menu>
+      <EditProject
+        project={project}
+        isOpen={editProjectModal.isOpen}
+        onClose={editProjectModal.onClose}
+      />
+    </>
+  )
+}
+
 function ProjectLayout() {
   const { userName, projectName } = Route.useParams()
   const {
@@ -298,29 +340,32 @@ function ProjectLayout() {
         <Flex>
           <Sidebar basePath={`/${userName}/${projectName}`} />
           <Container maxW="full" mx={6}>
-            <Flex width={"full"}>
-              <Heading
-                size="lg"
-                textAlign={{ base: "center", md: "left" }}
-                alignContent={"center"}
-                mt={6}
-                mb={3}
+            <Flex
+              width={"full"}
+              textAlign={{ base: "center", md: "left" }}
+              alignContent="center"
+              alignItems="center"
+              mt={5}
+              mb={4}
+            >
+              <Heading size="lg">{project?.title}</Heading>
+              <Badge
+                ml={2}
+                mt={1.5}
+                color={project?.is_public ? "green.500" : "yellow.500"}
               >
-                {project?.title}
-                <Badge
-                  ml="2"
-                  color={project?.is_public ? "green.500" : "yellow.500"}
-                >
-                  {project?.is_public ? "Public" : "Private"}
-                </Badge>
-                {project?.git_repo_url ? (
-                  <Link href={project?.git_repo_url} isExternal>
-                    <Icon height="45%" as={FaGithub} />
-                    <Icon height={"40%"} as={ExternalLinkIcon} ml={-3} />
-                  </Link>
-                ) : (
-                  ""
-                )}
+                {project?.is_public ? "Public" : "Private"}
+              </Badge>
+              {project?.git_repo_url ? (
+                <Link href={project?.git_repo_url} isExternal>
+                  <Icon ml={2} mt={3} as={FaGithub} />
+                  <Icon ml={0.3} mt={-2} as={ExternalLinkIcon} />
+                </Link>
+              ) : (
+                ""
+              )}
+              <Box mt={1} ml={1.5}>
+                {project ? <ProjectMenu project={project} /> : ""}
                 <IconButton
                   isRound
                   aria-label="Open help"
@@ -328,7 +373,22 @@ function ProjectLayout() {
                   onClick={helpDrawer.onOpen}
                   icon={<FaQuestion />}
                 />
-              </Heading>
+              </Box>
+              <Box
+                mt={3}
+                ml={2}
+                mb={2}
+                textAlign={"right"}
+                alignItems={"right"}
+              >
+                {project?.description ? (
+                  <Text ml={1} fontSize="small" align={"right"}>
+                    → {project.description}
+                  </Text>
+                ) : (
+                  ""
+                )}
+              </Box>
             </Flex>
             <Outlet />
           </Container>
diff --git a/frontend/src/routes/_layout/$userName/$projectName/_layout/index.tsx b/frontend/src/routes/_layout/$userName/$projectName/_layout/index.tsx
index c4fc0206..133d74a2 100644
--- a/frontend/src/routes/_layout/$userName/$projectName/_layout/index.tsx
+++ b/frontend/src/routes/_layout/$userName/$projectName/_layout/index.tsx
@@ -29,7 +29,7 @@ import CreateIssue from "../../../../../components/Projects/CreateIssue"
 import CreateQuestion from "../../../../../components/Projects/CreateQuestion"
 import NewPublication from "../../../../../components/Publications/NewPublication"
 import useProject from "../../../../../hooks/useProject"
-import EditProject from "../../../../../components/Projects/EditProject"
+import ProjectShowcase from "../../../../../components/Projects/ProjectShowcase"
 
 export const Route = createFileRoute(
   "/_layout/$userName/$projectName/_layout/",
@@ -72,397 +72,347 @@ function ProjectView() {
   const newIssueModal = useDisclosure()
   const newQuestionModal = useDisclosure()
   const newPubTemplateModal = useDisclosure()
-  const editProjectModal = useDisclosure()
 
   return (
     <>
-      {readmeRequest.isPending ? (
-        <Flex justify="center" align="center" height="100vh" width="full">
-          <Spinner size="xl" color="ui.main" />
-        </Flex>
-      ) : (
-        <Flex mt={1}>
-          <Box width="60%" mr={8}>
-            {/* Description */}
-            <Box
-              py={4}
-              px={6}
-              mb={4}
-              borderRadius="lg"
-              bg={secBgColor}
-              maxH={"60vh"}
-              overflow="auto"
-            >
-              <Flex alignItems="center">
-                <Heading size="md">Description</Heading>
-                {projectRequest.data ? (
-                  <>
-                    <IconButton
-                      aria-label="Edit project"
-                      height="25px"
-                      width="28px"
-                      ml={1.5}
-                      icon={<MdEdit />}
-                      size={"xs"}
-                      onClick={editProjectModal.onOpen}
-                    />
-                    <EditProject
-                      project={projectRequest.data}
-                      isOpen={editProjectModal.isOpen}
-                      onClose={editProjectModal.onClose}
-                    />
-                  </>
-                ) : (
-                  ""
-                )}
-              </Flex>
-              {projectRequest.data?.description ? (
-                <Markdown>{projectRequest?.data?.description}</Markdown>
-              ) : (
-                ""
-              )}
-            </Box>
-            {/* README */}
-            <Box
-              py={4}
-              px={6}
-              mb={4}
-              borderRadius="lg"
-              bg={secBgColor}
-              maxH={"60vh"}
-              overflow="auto"
-            >
-              <Flex alignItems="center">
-                <Heading size="md">README</Heading>
-                <Link
-                  href={`https://github.dev/${userName}/${projectName}/blob/main/README.md`}
-                  isExternal
-                >
-                  <IconButton
-                    aria-label="Edit README"
-                    height="25px"
-                    width="28px"
-                    ml={1.5}
-                    icon={<MdEdit />}
-                    size={"xs"}
-                  />
-                </Link>
-              </Flex>
-              {readmeRequest.data ? (
-                <Markdown>
-                  {removeFirstLine(atob(String(readmeRequest?.data?.content)))}
-                </Markdown>
-              ) : (
-                ""
-              )}
-            </Box>
-            {/* To-dos (issues) */}
-            <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
-              <Flex width="full" alignItems="center" mb={2}>
-                <Box>
-                  <Flex>
-                    <Heading size="md">To-do</Heading>
-                    <IconButton
-                      aria-label="Add to-do"
-                      height="25px"
-                      width="28px"
-                      ml={1.5}
-                      icon={<FaPlus />}
-                      size={"xs"}
-                      onClick={newIssueModal.onOpen}
-                    />
-                  </Flex>
-                  <CreateIssue
-                    isOpen={newIssueModal.isOpen}
-                    onClose={newIssueModal.onClose}
-                  />
-                </Box>
-                <Spacer />
-                <Box>
-                  <FormControl display="flex" alignItems="center">
-                    <FormLabel htmlFor="show-closed" mb="0">
-                      Show closed
-                    </FormLabel>
-                    <Switch
-                      id="show-closed"
-                      isChecked={showClosedTodos}
-                      onChange={onClosedTodosSwitch}
-                    />
-                  </FormControl>
-                </Box>
-              </Flex>
-              {issuesRequest.isPending ||
-              issuesRequest.isRefetching ||
-              issueStateMutation.isPending ? (
-                <Flex
-                  justify="center"
-                  align="center"
-                  height="100%"
-                  width="100%"
-                >
-                  <Spinner size="xl" color="ui.main" />
-                </Flex>
-              ) : (
-                <>
-                  {issuesRequest?.data?.map((issue) => (
-                    <Flex
-                      key={issue.number}
-                      alignItems={"center"}
-                      alignContent={"center"}
-                    >
-                      <Checkbox
-                        isChecked={issue.state === "closed"}
-                        onChange={onTodoCheckbox}
-                        id={String(issue.number)}
-                      />
-                      <Text ml={2}>
-                        {" "}
-                        {issue.title} (
-                        <Link isExternal href={issue.url}>
-                          #{issue.number}
-                        </Link>
-                        )
-                      </Text>
-                    </Flex>
-                  ))}
-                </>
-              )}
-            </Box>
-          </Box>
-          <Box width={"40%"}>
-            {/* Questions  */}
-            <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
-              <Flex>
-                <Heading size="md" mb={2}>
-                  Questions
-                </Heading>
+      <Flex mt={1}>
+        <Box width="60%" mr={8}>
+          {/* Showcase */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Flex alignItems="center">
+              <Heading size="md">Showcase</Heading>
+              <Link
+                href={`https://github.dev/${userName}/${projectName}/blob/main/calkit.yaml`}
+                isExternal
+              >
                 <IconButton
-                  aria-label="Add question"
+                  aria-label="Edit calkit.yaml"
                   height="25px"
                   width="28px"
                   ml={1.5}
-                  icon={<FaPlus />}
+                  icon={<MdEdit />}
                   size={"xs"}
-                  onClick={newQuestionModal.onOpen}
-                />
-                <CreateQuestion
-                  isOpen={newQuestionModal.isOpen}
-                  onClose={newQuestionModal.onClose}
                 />
-              </Flex>
-              {questionsRequest.isPending ? (
-                <Flex
-                  justify="center"
-                  align="center"
-                  height="100px"
-                  width="full"
-                >
-                  <Spinner size="xl" color="ui.main" />
-                </Flex>
-              ) : (
-                <OrderedList>
-                  {questionsRequest.data?.map((question) => (
-                    <ListItem key={question.question}>
-                      {question.question}
-                    </ListItem>
-                  ))}
-                </OrderedList>
-              )}
-            </Box>
-            {/* Reproducibility check */}
-            <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
-              <Flex>
-                <Heading size="md" mb={2}>
-                  Reproducibility check
-                </Heading>
+              </Link>
+            </Flex>
+            <ProjectShowcase ownerName={userName} projectName={projectName} />
+          </Box>
+          {/* README */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Flex alignItems="center">
+              <Heading size="md">README</Heading>
+              <Link
+                href={`https://github.dev/${userName}/${projectName}/blob/main/README.md`}
+                isExternal
+              >
                 <IconButton
-                  aria-label="Refresh repro check"
+                  aria-label="Edit README"
                   height="25px"
                   width="28px"
                   ml={1.5}
-                  icon={<FaSync />}
+                  icon={<MdEdit />}
                   size={"xs"}
-                  onClick={() => reproCheckRequest.refetch()}
                 />
+              </Link>
+            </Flex>
+            {readmeRequest.isPending ? (
+              <Flex justify="center" align="center" height="100vh" width="full">
+                <Spinner size="xl" color="ui.main" />
               </Flex>
-              {reproCheckRequest.isPending ||
-              reproCheckRequest.isRefetching ||
-              putDevcontainerMutation.isPending ? (
-                <Flex
-                  justify="center"
-                  align="center"
-                  height="100px"
-                  width="full"
-                >
-                  <Spinner size="xl" color="ui.main" />
+            ) : readmeRequest.data ? (
+              <Markdown>
+                {removeFirstLine(atob(String(readmeRequest?.data?.content)))}
+              </Markdown>
+            ) : (
+              ""
+            )}
+          </Box>
+        </Box>
+        <Box width={"40%"}>
+          {/* Questions  */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Flex>
+              <Heading size="md" mb={2}>
+                Questions
+              </Heading>
+              <IconButton
+                aria-label="Add question"
+                height="25px"
+                width="28px"
+                ml={1.5}
+                icon={<FaPlus />}
+                size={"xs"}
+                onClick={newQuestionModal.onOpen}
+              />
+              <CreateQuestion
+                isOpen={newQuestionModal.isOpen}
+                onClose={newQuestionModal.onClose}
+              />
+            </Flex>
+            {questionsRequest.isPending ? (
+              <Flex justify="center" align="center" height="100px" width="full">
+                <Spinner size="xl" color="ui.main" />
+              </Flex>
+            ) : (
+              <OrderedList>
+                {questionsRequest.data?.map((question) => (
+                  <ListItem key={question.question}>
+                    {question.question}
+                  </ListItem>
+                ))}
+              </OrderedList>
+            )}
+          </Box>
+          {/* To-dos (issues) */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Flex width="full" alignItems="center" mb={2}>
+              <Box>
+                <Flex>
+                  <Heading size="md">To-do</Heading>
+                  <IconButton
+                    aria-label="Add to-do"
+                    height="25px"
+                    width="28px"
+                    ml={1.5}
+                    icon={<FaPlus />}
+                    size={"xs"}
+                    onClick={newIssueModal.onOpen}
+                  />
                 </Flex>
-              ) : (
-                <>
-                  <Text>
-                    Has README.md: {reproCheck?.has_readme ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    README.md has instructions:{" "}
-                    {reproCheck?.instructions_in_readme ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    DVC initialized: {reproCheck?.is_dvc_repo ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    DVC remote defined:{" "}
-                    {reproCheck?.n_dvc_remotes ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    Has pipeline (<Code>dvc.yaml</Code>):{" "}
-                    {reproCheck?.has_pipeline ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    Has Calkit metadata (<Code>calkit.yaml</Code>):{" "}
-                    {reproCheck?.has_calkit_info ? "✅" : "❌"}
-                  </Text>
-                  <Text>
-                    Has dev container spec:{" "}
-                    {reproCheck?.has_dev_container ? (
-                      "✅"
-                    ) : (
-                      <>
-                        {"❌ "}
-                        <Link onClick={() => putDevcontainerMutation.mutate()}>
-                          🔧
-                        </Link>
-                      </>
-                    )}
-                  </Text>
-                  <Text>
-                    Environments defined:{" "}
-                    {reproCheck ? (
-                      <>
-                        {reproCheck.n_environments}{" "}
-                        {reproCheck.n_environments ? "✅" : "❌"}
-                      </>
-                    ) : (
-                      ""
-                    )}
-                  </Text>
-                  <Text>
-                    Pipeline stages run in an environment:{" "}
-                    {reproCheck ? (
-                      <>
-                        {reproCheck.n_stages_with_env}/{reproCheck.n_stages}{" "}
-                        {reproCheck.n_stages_without_env ? "❌" : "✅"}
-                      </>
-                    ) : (
-                      ""
-                    )}
-                  </Text>
-                  <Text>
-                    Datasets imported or created by pipeline:{" "}
-                    {reproCheck ? (
-                      <>
-                        {reproCheck.n_datasets_with_import_or_stage}/
-                        {reproCheck.n_datasets}{" "}
-                        {reproCheck.n_datasets_no_import_or_stage ? "❌" : "✅"}
-                      </>
-                    ) : (
-                      ""
-                    )}
-                  </Text>
-                  <Text>
-                    Figures imported or created by pipeline:{" "}
-                    {reproCheck ? (
-                      <>
-                        {reproCheck.n_figures_with_import_or_stage}/
-                        {reproCheck.n_figures}{" "}
-                        {reproCheck.n_figures_no_import_or_stage ? "❌" : "✅"}
-                      </>
-                    ) : (
-                      ""
-                    )}
-                  </Text>
-                  <Text>
-                    Publications imported or created by pipeline:{" "}
-                    {reproCheck ? (
-                      <>
-                        {reproCheck.n_publications_with_import_or_stage}/
-                        {reproCheck.n_publications}{" "}
-                        {reproCheck.n_publications_no_import_or_stage
-                          ? "❌"
-                          : "✅"}
-                      </>
-                    ) : (
-                      ""
-                    )}
-                  </Text>
-                  <Heading
-                    size="sm"
-                    mt={4}
-                    mb={-2}
-                    color={
-                      reproCheck?.recommendation ? "yellow.500" : "green.500"
-                    }
+                <CreateIssue
+                  isOpen={newIssueModal.isOpen}
+                  onClose={newIssueModal.onClose}
+                />
+              </Box>
+              <Spacer />
+              <Box>
+                <FormControl display="flex" alignItems="center">
+                  <FormLabel htmlFor="show-closed" mb="0">
+                    Show closed
+                  </FormLabel>
+                  <Switch
+                    id="show-closed"
+                    isChecked={showClosedTodos}
+                    onChange={onClosedTodosSwitch}
+                  />
+                </FormControl>
+              </Box>
+            </Flex>
+            {issuesRequest.isPending ||
+            issuesRequest.isRefetching ||
+            issueStateMutation.isPending ? (
+              <Flex justify="center" align="center" height="100%" width="100%">
+                <Spinner size="xl" color="ui.main" />
+              </Flex>
+            ) : (
+              <>
+                {issuesRequest?.data?.map((issue) => (
+                  <Flex
+                    key={issue.number}
+                    alignItems={"center"}
+                    alignContent={"center"}
                   >
-                    Recommendation
-                  </Heading>
-                  {reproCheck?.recommendation ? (
+                    <Checkbox
+                      isChecked={issue.state === "closed"}
+                      onChange={onTodoCheckbox}
+                      id={String(issue.number)}
+                    />
+                    <Text ml={2}>
+                      {" "}
+                      {issue.title} (
+                      <Link isExternal href={issue.url}>
+                        #{issue.number}
+                      </Link>
+                      )
+                    </Text>
+                  </Flex>
+                ))}
+              </>
+            )}
+          </Box>
+          {/* Reproducibility check */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Flex>
+              <Heading size="md" mb={2}>
+                Reproducibility check
+              </Heading>
+              <IconButton
+                aria-label="Refresh repro check"
+                height="25px"
+                width="28px"
+                ml={1.5}
+                icon={<FaSync />}
+                size={"xs"}
+                onClick={() => reproCheckRequest.refetch()}
+              />
+            </Flex>
+            {reproCheckRequest.isPending ||
+            reproCheckRequest.isRefetching ||
+            putDevcontainerMutation.isPending ? (
+              <Flex justify="center" align="center" height="100px" width="full">
+                <Spinner size="xl" color="ui.main" />
+              </Flex>
+            ) : (
+              <>
+                <Text>
+                  Has README.md: {reproCheck?.has_readme ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  README.md has instructions:{" "}
+                  {reproCheck?.instructions_in_readme ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  DVC initialized: {reproCheck?.is_dvc_repo ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  DVC remote defined: {reproCheck?.n_dvc_remotes ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  Has pipeline (<Code>dvc.yaml</Code>):{" "}
+                  {reproCheck?.has_pipeline ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  Has Calkit metadata (<Code>calkit.yaml</Code>):{" "}
+                  {reproCheck?.has_calkit_info ? "✅" : "❌"}
+                </Text>
+                <Text>
+                  Has dev container spec:{" "}
+                  {reproCheck?.has_dev_container ? (
+                    "✅"
+                  ) : (
+                    <>
+                      {"❌ "}
+                      <Link onClick={() => putDevcontainerMutation.mutate()}>
+                        🔧
+                      </Link>
+                    </>
+                  )}
+                </Text>
+                <Text>
+                  Environments defined:{" "}
+                  {reproCheck ? (
                     <>
-                      <Markdown>{reproCheck.recommendation}</Markdown>
+                      {reproCheck.n_environments}{" "}
+                      {reproCheck.n_environments ? "✅" : "❌"}
                     </>
                   ) : (
-                    <Markdown>
-                      This project looks good from here! Check in depth locally
-                      with `calkit status` and `calkit run`.
-                    </Markdown>
+                    ""
                   )}
-                </>
-              )}
-            </Box>
-            {/* Quick actions */}
-            <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
-              <Heading size="md" mb={2}>
-                Quick actions
-              </Heading>
-              <Text>
-                📜{" "}
-                <Link onClick={newPubTemplateModal.onOpen}>
-                  Create a new publication from a template
-                </Link>
-              </Text>
-              <Text>
-                🔒{" "}
-                <Link
-                  as={RouterLink}
-                  to={"/settings"}
-                  search={{ tab: "tokens" }}
-                >
-                  Manage user tokens
-                </Link>
-              </Text>
-              <Text>
-                🚀{" "}
-                <Link isExternal href={codespacesUrl}>
-                  Open in GitHub Codespaces{" "}
-                  <Icon height={"40%"} as={ExternalLinkIcon} pb={0.5} />
-                </Link>
-              </Text>
-              <Text>
-                🔑{" "}
-                <Link
-                  isExternal
-                  href={`${gitRepoUrl}/settings/secrets/codespaces`}
+                </Text>
+                <Text>
+                  Pipeline stages run in an environment:{" "}
+                  {reproCheck ? (
+                    <>
+                      {reproCheck.n_stages_with_env}/{reproCheck.n_stages}{" "}
+                      {reproCheck.n_stages_without_env ? "❌" : "✅"}
+                    </>
+                  ) : (
+                    ""
+                  )}
+                </Text>
+                <Text>
+                  Datasets imported or created by pipeline:{" "}
+                  {reproCheck ? (
+                    <>
+                      {reproCheck.n_datasets_with_import_or_stage}/
+                      {reproCheck.n_datasets}{" "}
+                      {reproCheck.n_datasets_no_import_or_stage ? "❌" : "✅"}
+                    </>
+                  ) : (
+                    ""
+                  )}
+                </Text>
+                <Text>
+                  Figures imported or created by pipeline:{" "}
+                  {reproCheck ? (
+                    <>
+                      {reproCheck.n_figures_with_import_or_stage}/
+                      {reproCheck.n_figures}{" "}
+                      {reproCheck.n_figures_no_import_or_stage ? "❌" : "✅"}
+                    </>
+                  ) : (
+                    ""
+                  )}
+                </Text>
+                <Text>
+                  Publications imported or created by pipeline:{" "}
+                  {reproCheck ? (
+                    <>
+                      {reproCheck.n_publications_with_import_or_stage}/
+                      {reproCheck.n_publications}{" "}
+                      {reproCheck.n_publications_no_import_or_stage
+                        ? "❌"
+                        : "✅"}
+                    </>
+                  ) : (
+                    ""
+                  )}
+                </Text>
+                <Heading
+                  size="sm"
+                  mt={4}
+                  mb={-2}
+                  color={
+                    reproCheck?.recommendation ? "yellow.500" : "green.500"
+                  }
                 >
-                  Configure GitHub Codespaces secrets{" "}
-                  <Icon height={"40%"} as={ExternalLinkIcon} pb={0.5} />
-                </Link>
-              </Text>
-            </Box>
-            <NewPublication
-              isOpen={newPubTemplateModal.isOpen}
-              onClose={newPubTemplateModal.onClose}
-              variant="template"
-            />
+                  Recommendation
+                </Heading>
+                {reproCheck?.recommendation ? (
+                  <>
+                    <Markdown>{reproCheck.recommendation}</Markdown>
+                  </>
+                ) : (
+                  <Markdown>
+                    This project looks good from here! Check in depth locally
+                    with `calkit status` and `calkit run`.
+                  </Markdown>
+                )}
+              </>
+            )}
+          </Box>
+          {/* Quick actions */}
+          <Box py={4} px={6} mb={4} borderRadius="lg" bg={secBgColor}>
+            <Heading size="md" mb={2}>
+              Quick actions
+            </Heading>
+            <Text>
+              📜{" "}
+              <Link onClick={newPubTemplateModal.onOpen}>
+                Create a new publication from a template
+              </Link>
+            </Text>
+            <Text>
+              🔒{" "}
+              <Link as={RouterLink} to={"/settings"} search={{ tab: "tokens" }}>
+                Manage user tokens
+              </Link>
+            </Text>
+            <Text>
+              🚀{" "}
+              <Link isExternal href={codespacesUrl}>
+                Open in GitHub Codespaces{" "}
+                <Icon height={"40%"} as={ExternalLinkIcon} pb={0.5} />
+              </Link>
+            </Text>
+            <Text>
+              🔑{" "}
+              <Link
+                isExternal
+                href={`${gitRepoUrl}/settings/secrets/codespaces`}
+              >
+                Configure GitHub Codespaces secrets{" "}
+                <Icon height={"40%"} as={ExternalLinkIcon} pb={0.5} />
+              </Link>
+            </Text>
           </Box>
-        </Flex>
-      )}
+          <NewPublication
+            isOpen={newPubTemplateModal.isOpen}
+            onClose={newPubTemplateModal.onClose}
+            variant="template"
+          />
+        </Box>
+      </Flex>
     </>
   )
 }