diff --git a/apps/studio/src/components/CmsSidebar/CmsContainer.tsx b/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
index fb8041f800..93fbf9fa2b 100644
--- a/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
+++ b/apps/studio/src/components/CmsSidebar/CmsContainer.tsx
@@ -75,7 +75,7 @@ export function CmsContainer({
           {sidenav}
         </Box>
       </GridItem>
-      <GridItem as="main" area="main" overflow="auto">
+      <GridItem as="main" area="main" overflow="hidden">
         <Box
           height={0}
           minH="100%"
diff --git a/apps/studio/src/components/Datatable/Datatable.tsx b/apps/studio/src/components/Datatable/Datatable.tsx
index ff63c4d4ad..129c281236 100644
--- a/apps/studio/src/components/Datatable/Datatable.tsx
+++ b/apps/studio/src/components/Datatable/Datatable.tsx
@@ -48,7 +48,12 @@ export const Datatable = <T extends object>({
   const styles = useMultiStyleConfig("Table", tableProps)
 
   return (
-    <Flex flexDirection="column" layerStyle="shadow" pos="relative">
+    <Flex
+      width="100%"
+      flexDirection="column"
+      layerStyle="shadow"
+      pos="relative"
+    >
       {isFetching && (
         <>
           <Flex
diff --git a/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx b/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
index 8d61087e37..22fcf121ee 100644
--- a/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
+++ b/apps/studio/src/features/dashboard/components/CollectionBanner/CollectionBanner.tsx
@@ -17,6 +17,7 @@ export const CollectionBanner = (): JSX.Element | null => {
 
   return (
     <Stack
+      width="100%"
       justify="space-between"
       flexDir="row"
       bg="interaction.success-subtle.default"
diff --git a/apps/studio/src/features/dashboard/components/DashboardLayout.tsx b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
new file mode 100644
index 0000000000..4559eba917
--- /dev/null
+++ b/apps/studio/src/features/dashboard/components/DashboardLayout.tsx
@@ -0,0 +1,106 @@
+import type { ReactNode } from "react"
+import NextLink from "next/link"
+import {
+  Box,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  HStack,
+  Text,
+  VStack,
+} from "@chakra-ui/react"
+import { Breadcrumb } from "@opengovsg/design-system-react"
+
+export const DashboardLayout = ({
+  breadcrumbs,
+  icon,
+  title,
+  buttons,
+  children,
+}: {
+  breadcrumbs: {
+    href: string
+    label: string
+  }[]
+  icon: ReactNode
+  title: string
+  buttons: ReactNode
+  children: ReactNode
+}) => {
+  const allBreadcrumbsExceptLast = breadcrumbs.slice(0, -1)
+  const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1]
+  return (
+    <VStack
+      w="100%"
+      p="1.75rem"
+      gap="1rem"
+      height="0"
+      overflow="auto"
+      minH="100%"
+    >
+      <VStack w="100%" align="start">
+        <Breadcrumb
+          size="sm"
+          w="100%"
+          minH="1.25rem" // maintain height even when single breadcrumb
+          display="flex"
+          alignItems="center"
+        >
+          {allBreadcrumbsExceptLast.map(({ href, label }, index) => {
+            return (
+              <BreadcrumbItem key={index}>
+                <BreadcrumbLink href={href} as={NextLink}>
+                  <Text
+                    textStyle="caption-2"
+                    color="interaction.links.default"
+                    noOfLines={1}
+                    w="max-content"
+                  >
+                    {label}
+                  </Text>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            )
+          })}
+          <BreadcrumbItem
+            key={lastBreadcrumb?.href}
+            overflow="hidden"
+            whiteSpace="nowrap"
+          >
+            <Text
+              textStyle="caption-2"
+              color="base.content.default"
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {lastBreadcrumb?.label}
+            </Text>
+          </BreadcrumbItem>
+        </Breadcrumb>
+        <Flex w="full" flexDir="row">
+          <HStack mr="1.25rem" overflow="auto" gap="0.75rem" flex={1}>
+            <Box
+              aria-hidden
+              bg="brand.secondary.100"
+              p="0.5rem"
+              borderRadius="6px"
+            >
+              {icon}
+            </Box>
+            <Text
+              noOfLines={1}
+              as="h3"
+              textStyle="h3"
+              textOverflow="ellipsis"
+              wordBreak="break-all"
+            >
+              {title}
+            </Text>
+          </HStack>
+          <HStack>{buttons}</HStack>
+        </Flex>
+      </VStack>
+      {children}
+    </VStack>
+  )
+}
diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
index 5995537de7..aa22afa6d3 100644
--- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
+++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx
@@ -1,14 +1,5 @@
-import NextLink from "next/link"
-import {
-  Box,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  HStack,
-  Stack,
-  Text,
-  useDisclosure,
-} from "@chakra-ui/react"
-import { Breadcrumb, Button } from "@opengovsg/design-system-react"
+import { useDisclosure } from "@chakra-ui/react"
+import { Button } from "@opengovsg/design-system-react"
 import { useSetAtom } from "jotai"
 import { BiData } from "react-icons/bi"
 import { z } from "zod"
@@ -17,6 +8,7 @@ import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
 import { CollectionBanner } from "~/features/dashboard/components/CollectionBanner"
 import { CollectionTable } from "~/features/dashboard/components/CollectionTable"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -49,38 +41,21 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <Stack w="100%" p="1.75rem" gap="1rem" height="$100vh" overflow="auto">
-        <Breadcrumb size="sm">
-          <BreadcrumbItem>
-            <BreadcrumbLink href={`/sites/${siteId}`} as={NextLink}>
-              <Text textStyle="caption-2" color="interaction.links.default">
-                Home
-              </Text>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbItem>
-            <BreadcrumbLink isCurrentPage>
-              <Text textStyle="caption-2" color="base.content.default">
-                {metadata.title}
-              </Text>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        </Breadcrumb>
-        <HStack w="100%" gap="1.5rem">
-          <HStack gap="0.75rem" flex={1}>
-            <Box
-              aria-hidden
-              bg="brand.secondary.100"
-              p="0.5rem"
-              borderRadius="6px"
-            >
-              <BiData />
-            </Box>
-            <Text wordBreak="break-word" noOfLines={1} as="h3" textStyle="h3">
-              {metadata.title}
-            </Text>
-          </HStack>
-          <HStack align="center" gap="0.75rem">
+      <DashboardLayout
+        breadcrumbs={[
+          {
+            href: `/sites/${siteId}`,
+            label: "Home",
+          },
+          {
+            href: `/sites/${siteId}/collections/${resourceId}`,
+            label: metadata.title,
+          },
+        ]}
+        icon={<BiData />}
+        title={metadata.title}
+        buttons={
+          <>
             <Button
               variant="outline"
               size="md"
@@ -95,13 +70,12 @@ const CollectionResourceListPage: NextPageWithLayout = () => {
             <Button onClick={onPageCreateModalOpen} size="md">
               Add new item
             </Button>
-          </HStack>
-        </HStack>
+          </>
+        }
+      >
         <CollectionBanner />
-        <Box width="100%">
-          <CollectionTable resourceId={resourceId} siteId={siteId} />
-        </Box>
-      </Stack>
+        <CollectionTable resourceId={resourceId} siteId={siteId} />
+      </DashboardLayout>
       <CreateCollectionPageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
index 7cd195a8da..96b9a4e264 100644
--- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx
@@ -1,16 +1,5 @@
-import NextLink from "next/link"
-import {
-  Box,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Flex,
-  HStack,
-  Portal,
-  Text,
-  useDisclosure,
-  VStack,
-} from "@chakra-ui/react"
-import { Breadcrumb, Button, Menu } from "@opengovsg/design-system-react"
+import { Portal, useDisclosure } from "@chakra-ui/react"
+import { Button, Menu } from "@opengovsg/design-system-react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { useSetAtom } from "jotai"
 import { BiFileBlank, BiFolder } from "react-icons/bi"
@@ -19,6 +8,7 @@ import { z } from "zod"
 import type { RouterOutput } from "~/utils/trpc"
 import { PermissionsBoundary } from "~/components/AuthWrappers"
 import { folderSettingsModalAtom } from "~/features/dashboard/atoms"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -110,123 +100,64 @@ const FolderPage: NextPageWithLayout = () => {
 
   return (
     <>
-      <VStack
-        w="100%"
-        p="1.75rem"
-        gap="1rem"
-        height="0"
-        overflow="auto"
-        minH="100%"
-      >
-        <VStack w="100%" align="start">
-          <Breadcrumb size="sm" w="100%">
-            {breadcrumbs.map(({ href, label }, index) => {
-              return (
-                <BreadcrumbItem key={index}>
-                  <BreadcrumbLink href={href} as={NextLink}>
-                    <Text
-                      textStyle="caption-2"
-                      color="interaction.links.default"
-                      noOfLines={1}
-                      w="max-content"
-                    >
-                      {label}
-                    </Text>
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-              )
-            })}
-            <BreadcrumbItem
-              key={folderId}
-              overflow="hidden"
-              whiteSpace="nowrap"
+      <DashboardLayout
+        breadcrumbs={breadcrumbs.concat({
+          href: getFolderHref(siteId, folderId),
+          label: title,
+        })}
+        icon={<BiFolder />}
+        title={title}
+        buttons={
+          <>
+            <Button
+              variant="outline"
+              size="md"
+              onClick={() =>
+                setFolderSettingsModalState({
+                  folderId,
+                })
+              }
             >
-              <Text
-                textStyle="caption-2"
-                color="base.content.default"
-                overflow="hidden"
-                textOverflow="ellipsis"
-              >
-                {title}
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
-          <Flex w="full" flexDir="row">
-            <HStack mr="1.25rem" overflow="auto" gap="0.75rem" flex={1}>
-              <Box
-                aria-hidden
-                bg="brand.secondary.100"
-                p="0.5rem"
-                borderRadius="6px"
-              >
-                <BiFolder />
-              </Box>
-              <Text
-                noOfLines={1}
-                as="h3"
-                textStyle="h3"
-                textOverflow="ellipsis"
-                wordBreak="break-all"
-              >
-                {title}
-              </Text>
-            </HStack>
-
-            <HStack>
-              <Button
-                variant="outline"
-                size="md"
-                onClick={() =>
-                  setFolderSettingsModalState({
-                    folderId,
-                  })
-                }
-              >
-                Folder settings
-              </Button>
-              <Menu isLazy size="sm">
-                {({ isOpen }) => (
-                  <>
-                    <Menu.Button
-                      isOpen={isOpen}
-                      as={Button}
-                      size="md"
-                      justifySelf="flex-end"
-                    >
-                      Create new...
-                    </Menu.Button>
-                    <Portal>
-                      <Menu.List>
-                        <Menu.Item
-                          onClick={onFolderCreateModalOpen}
-                          icon={<BiFolder fontSize="1rem" />}
-                        >
-                          Folder
-                        </Menu.Item>
-                        <Menu.Item
-                          onClick={onPageCreateModalOpen}
-                          icon={<BiFileBlank fontSize="1rem" />}
-                        >
-                          Page
-                        </Menu.Item>
-                      </Menu.List>
-                    </Portal>
-                  </>
-                )}
-              </Menu>
-            </HStack>
-          </Flex>
-          <HStack w="100%" justify="space-between" align="center" gap={0}>
-            <Box />
-          </HStack>
-        </VStack>
-        <Box width="100%">
-          <ResourceTable
-            siteId={parseInt(siteId)}
-            resourceId={parseInt(folderId)}
-          />
-        </Box>
-      </VStack>
+              Folder settings
+            </Button>
+            <Menu isLazy size="sm">
+              {({ isOpen }) => (
+                <>
+                  <Menu.Button
+                    isOpen={isOpen}
+                    as={Button}
+                    size="md"
+                    justifySelf="flex-end"
+                  >
+                    Create new...
+                  </Menu.Button>
+                  <Portal>
+                    <Menu.List>
+                      <Menu.Item
+                        onClick={onFolderCreateModalOpen}
+                        icon={<BiFolder fontSize="1rem" />}
+                      >
+                        Folder
+                      </Menu.Item>
+                      <Menu.Item
+                        onClick={onPageCreateModalOpen}
+                        icon={<BiFileBlank fontSize="1rem" />}
+                      >
+                        Page
+                      </Menu.Item>
+                    </Menu.List>
+                  </Portal>
+                </>
+              )}
+            </Menu>
+          </>
+        }
+      >
+        <ResourceTable
+          siteId={parseInt(siteId)}
+          resourceId={parseInt(folderId)}
+        />
+      </DashboardLayout>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}
diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx
index 2a9fc9dbfb..9c86456393 100644
--- a/apps/studio/src/pages/sites/[siteId]/index.tsx
+++ b/apps/studio/src/pages/sites/[siteId]/index.tsx
@@ -1,19 +1,11 @@
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  HStack,
-  Portal,
-  Text,
-  useDisclosure,
-  VStack,
-} from "@chakra-ui/react"
+import { Portal, useDisclosure } from "@chakra-ui/react"
 import { Button, Menu } from "@opengovsg/design-system-react"
 import { ResourceType } from "~prisma/generated/generatedEnums"
 import { BiData, BiFileBlank, BiFolder, BiHomeAlt } from "react-icons/bi"
 import { z } from "zod"
 
 import { PermissionsBoundary } from "~/components/AuthWrappers"
+import { DashboardLayout } from "~/features/dashboard/components/DashboardLayout"
 import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal"
 import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal"
 import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal"
@@ -105,48 +97,26 @@ const SitePage: NextPageWithLayout = () => {
 
   return (
     <>
-      <VStack
-        w="100%"
-        p="1.75rem"
-        gap="1rem"
-        height={0}
-        minH="100%"
-        overflow="auto"
+      <DashboardLayout
+        breadcrumbs={[
+          {
+            href: `/sites/${siteId}`,
+            label: "Home",
+          },
+        ]}
+        icon={<BiHomeAlt />}
+        title="Home"
+        buttons={
+          <HomepageMenuButton
+            onPageCreateModalOpen={onPageCreateModalOpen}
+            onFolderCreateModalOpen={onFolderCreateModalOpen}
+            onCollectionCreateModalOpen={onCollectionCreateModalOpen}
+          />
+        }
       >
-        <VStack w="100%" align="start">
-          <Breadcrumb size="sm">
-            <BreadcrumbItem>
-              <Text textStyle="caption-2" color="base.content.default">
-                Home
-              </Text>
-            </BreadcrumbItem>
-          </Breadcrumb>
-          <HStack w="100%" justify="space-between" align="center" gap={0}>
-            <HStack gap="0.75rem">
-              <Box
-                aria-hidden
-                bg="brand.secondary.100"
-                p="0.5rem"
-                borderRadius="6px"
-              >
-                <BiHomeAlt />
-              </Box>
-              <Text as="h3" textStyle="h3">
-                Home
-              </Text>
-            </HStack>
-            <HomepageMenuButton
-              onPageCreateModalOpen={onPageCreateModalOpen}
-              onFolderCreateModalOpen={onFolderCreateModalOpen}
-              onCollectionCreateModalOpen={onCollectionCreateModalOpen}
-            />
-          </HStack>
-        </VStack>
         <RootpageRow siteId={siteId} />
-        <Box width="100%">
-          <ResourceTable siteId={siteId} />
-        </Box>
-      </VStack>
+        <ResourceTable siteId={siteId} />
+      </DashboardLayout>
       <CreatePageModal
         isOpen={isPageCreateModalOpen}
         onClose={onPageCreateModalClose}