diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.test.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.test.tsx
similarity index 86%
rename from frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.test.tsx
rename to frontend/packages/data-portal/app/components/AuthorList/AuthorList.test.tsx
index 8e5b019b2..56e9ce1b1 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.test.tsx
+++ b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.test.tsx
@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 
 import { AuthorInfo, MockAuthorLink } from 'app/components/AuthorLink'
 
-import { DatasetAuthors } from './DatasetAuthors'
+import { AuthorList } from './AuthorList'
 
 const DEFAULT_AUTHORS: AuthorInfo[] = [
   { name: 'Foo', corresponding_author_status: true },
@@ -19,7 +19,7 @@ const AUTHOR_MAP = Object.fromEntries(
 )
 
 it('should render authors', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} />)
 
   DEFAULT_AUTHORS.forEach((author) =>
     expect(screen.getByText(author.name)).toBeInTheDocument(),
@@ -27,7 +27,7 @@ it('should render authors', () => {
 })
 
 it('should sort primary authors', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} />)
   const authorNode = screen.getByRole('paragraph')
   const authors = (authorNode.textContent ?? '').split(', ')
 
@@ -36,7 +36,7 @@ it('should sort primary authors', () => {
 })
 
 it('should sort other authors', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} />)
   const authorNode = screen.getByRole('paragraph')
   const authors = (authorNode.textContent ?? '').split(', ')
   const otherAuthors = authors.slice(2, -2)
@@ -48,7 +48,7 @@ it('should sort other authors', () => {
 })
 
 it('should sort corresponding authors', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} />)
   const authorNode = screen.getByRole('paragraph')
   const authors = (authorNode.textContent ?? '').split(', ')
 
@@ -66,9 +66,7 @@ it('should render author links', () => {
     orcid: `0000-0000-0000-000${idx}`,
   }))
 
-  render(
-    <DatasetAuthors authors={authors} AuthorLinkComponent={MockAuthorLink} />,
-  )
+  render(<AuthorList authors={authors} AuthorLinkComponent={MockAuthorLink} />)
 
   authors.forEach((author) =>
     expect(
@@ -84,7 +82,7 @@ it('should not render author links when compact', () => {
   }))
 
   render(
-    <DatasetAuthors
+    <AuthorList
       authors={authors}
       AuthorLinkComponent={MockAuthorLink}
       compact
@@ -95,7 +93,7 @@ it('should not render author links when compact', () => {
 })
 
 it('should not render other authors when compact', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} compact />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} compact />)
   const authorNode = screen.getByRole('paragraph')
   const authors = (authorNode.textContent ?? '').split(', ')
   const otherAuthors = authors.slice(2, -2)
@@ -106,13 +104,13 @@ it('should not render other authors when compact', () => {
 })
 
 it('should render comma if compact and has corresponding authors', () => {
-  render(<DatasetAuthors authors={DEFAULT_AUTHORS} compact />)
+  render(<AuthorList authors={DEFAULT_AUTHORS} compact />)
   expect(screen.getByText((text) => text.includes('... ,'))).toBeInTheDocument()
 })
 
 it('should not render comma for others if compact and no corresponding authors', () => {
   render(
-    <DatasetAuthors
+    <AuthorList
       authors={DEFAULT_AUTHORS.filter(
         (author) => !author.corresponding_author_status,
       )}
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
similarity index 98%
rename from frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.tsx
rename to frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
index 9eb2e29f2..67dc88cbe 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetAuthors.tsx
+++ b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
@@ -13,7 +13,7 @@ function getAuthorIds(authors: AuthorInfo[]) {
   return authors.map((author) => author.name + author.email + author.orcid)
 }
 
-export function DatasetAuthors({
+export function AuthorList({
   AuthorLinkComponent = AuthorLink,
   authors,
   className,
diff --git a/frontend/packages/data-portal/app/components/AuthorList/index.ts b/frontend/packages/data-portal/app/components/AuthorList/index.ts
new file mode 100644
index 000000000..f5ab0146a
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/AuthorList/index.ts
@@ -0,0 +1 @@
+export * from './AuthorList'
diff --git a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
index 96f9b58e3..530bef698 100644
--- a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
+++ b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
@@ -40,10 +40,10 @@ function Breadcrumb({
 
 export function Breadcrumbs({
   variant,
-  dataset,
+  data,
 }: {
-  variant: 'dataset' | 'run'
-  dataset: { id: number; title: string }
+  variant: 'dataset' | 'deposition' | 'run'
+  data: { id: number; title: string }
 }) {
   const { t } = useI18n()
 
@@ -51,26 +51,28 @@ export function Breadcrumbs({
   const { singleDatasetHistory } = useSingleDatasetFilterHistory()
 
   const browseAllLink = useMemo(() => {
-    const url = '/browse-data/datasets'
-    const encodedParams = encodeParams(
-      Array.from(browseDatasetHistory?.entries() ?? []),
-    )
+    const url =
+      variant === 'deposition'
+        ? '/browse-data/depositions'
+        : '/browse-data/datasets'
+    const history = variant === 'deposition' ? undefined : browseDatasetHistory
+    const encodedParams = encodeParams(Array.from(history?.entries() ?? []))
 
     return `${url}?${encodedParams}`
-  }, [browseDatasetHistory])
+  }, [browseDatasetHistory, variant])
 
   const singleDatasetLink = useMemo(() => {
     if (variant === 'dataset') {
       return undefined
     }
 
-    const url = `/datasets/${dataset.id}`
+    const url = `/datasets/${data.id}`
     const encodedParams = encodeParams(
       Array.from(singleDatasetHistory?.entries() ?? []),
     )
 
     return `${url}?${encodedParams}`
-  }, [singleDatasetHistory, variant, dataset])
+  }, [singleDatasetHistory, variant, data])
 
   const chevronIcon = (
     <SmallChevronRightIcon className="w-[8px] h-[8px] shrink-0" />
@@ -79,20 +81,24 @@ export function Breadcrumbs({
   return (
     <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-gray-black items-center whitespace-nowrap content-start">
       <Breadcrumb
-        text={t('allDatasets')}
+        text={t(variant === 'deposition' ? 'allDepositions' : 'allDatasets')}
         link={browseAllLink}
         className="shrink-0"
       />
       {chevronIcon}
-      <Breadcrumb
-        text={
-          variant === 'dataset'
-            ? `${t('dataset')}`
-            : `${t('dataset')}: ${dataset.title}`
-        }
-        link={singleDatasetLink}
-        className="overflow-ellipsis overflow-hidden flex-initial"
-      />
+      {variant === 'deposition' ? (
+        <Breadcrumb text={t('deposition')} />
+      ) : (
+        <Breadcrumb
+          text={
+            variant === 'dataset'
+              ? `${t('dataset')}`
+              : `${t('dataset')}: ${data.title}`
+          }
+          link={singleDatasetLink}
+          className="overflow-ellipsis overflow-hidden flex-initial"
+        />
+      )}
       {variant === 'run' && (
         <>
           {chevronIcon}
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
index c9722c24f..d4a0da942 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -8,7 +8,7 @@ import { range } from 'lodash-es'
 import { useEffect, useMemo, useState } from 'react'
 
 import { AnnotatedObjectsList } from 'app/components/AnnotatedObjectsList'
-import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
+import { AuthorList } from 'app/components/AuthorList'
 import { I18n } from 'app/components/I18n'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
@@ -170,7 +170,7 @@ export function DatasetTable() {
                         />
                       </>
                     ) : (
-                      <DatasetAuthors authors={dataset.authors} compact />
+                      <AuthorList authors={dataset.authors} compact />
                     )}
                   </p>
                 </div>
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
index c686c6b85..278d0ab60 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
@@ -8,7 +8,7 @@ import { range, sum } from 'lodash-es'
 import { useMemo } from 'react'
 
 import { AnnotatedObjectsList } from 'app/components/AnnotatedObjectsList'
-import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
+import { AuthorList } from 'app/components/AuthorList'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { Link } from 'app/components/Link'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
@@ -147,7 +147,7 @@ export function DepositionTable() {
                         />
                       </>
                     ) : (
-                      <DatasetAuthors authors={deposition.authors} compact />
+                      <AuthorList authors={deposition.authors} compact />
                     )}
                   </p>
                 </div>
diff --git a/frontend/packages/data-portal/app/components/CollapsibleList.tsx b/frontend/packages/data-portal/app/components/CollapsibleList.tsx
new file mode 100644
index 000000000..37470dfde
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/CollapsibleList.tsx
@@ -0,0 +1,89 @@
+import { Icon } from '@czi-sds/components'
+import { ReactNode, useState } from 'react'
+
+import { useI18n } from 'app/hooks/useI18n'
+import { cns } from 'app/utils/cns'
+
+interface ListEntry {
+  key: string
+  entry: ReactNode
+}
+
+export function CollapsibleList({
+  entries,
+  collapseAfter,
+  tableVariant = false,
+}: {
+  entries?: ListEntry[]
+  collapseAfter?: number
+  tableVariant?: boolean
+}) {
+  const collapsible =
+    collapseAfter !== undefined &&
+    collapseAfter >= 0 &&
+    entries !== undefined &&
+    entries.length > collapseAfter + 1
+
+  const { t } = useI18n()
+  const [collapsed, setCollapsed] = useState(true)
+
+  return entries ? (
+    <ul
+      className={cns(
+        'flex flex-col gap-sds-xs',
+        'text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600',
+        collapsible && 'transition-[max-height_0.2s_ease-out]',
+      )}
+    >
+      {entries.map(
+        ({ key, entry }, i) =>
+          !(collapsible && collapsed && i + 1 > collapseAfter) && (
+            <li key={key}>{entry}</li>
+          ),
+      )}
+      {collapsible && (
+        <div
+          className={cns(
+            'mt-sds-xxs font-semibold',
+            tableVariant && 'text-sds-primary-400',
+          )}
+        >
+          <button type="button" onClick={() => setCollapsed(!collapsed)}>
+            <span
+              className={cns(
+                'flex flex-row gap-sds-xxs items-center',
+                !tableVariant && 'capitalize',
+              )}
+            >
+              {collapsed ? (
+                <>
+                  <Icon
+                    sdsIcon="plus"
+                    sdsSize="xs"
+                    sdsType="static"
+                    className="!text-current"
+                  />
+                  {t('showMore', { count: entries.length - collapseAfter })}
+                </>
+              ) : (
+                <>
+                  <Icon
+                    sdsIcon="minus"
+                    sdsSize="xs"
+                    sdsType="static"
+                    className="!text-current"
+                  />
+                  {t('showLess')}
+                </>
+              )}
+            </span>
+          </button>
+        </div>
+      )}
+    </ul>
+  ) : (
+    <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+      {t('notSubmitted')}
+    </p>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/DatabaseList.tsx b/frontend/packages/data-portal/app/components/DatabaseList.tsx
new file mode 100644
index 000000000..1491e19da
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/DatabaseList.tsx
@@ -0,0 +1,20 @@
+import { CollapsibleList } from 'app/components/CollapsibleList'
+import { DatabaseEntry } from 'app/components/DatabaseEntry'
+
+export function DatabaseList({
+  entries,
+  collapseAfter,
+}: {
+  entries?: string[]
+  collapseAfter?: number
+}) {
+  return (
+    <CollapsibleList
+      entries={entries?.map((e) => ({
+        key: e,
+        entry: <DatabaseEntry entry={e} />,
+      }))}
+      collapseAfter={collapseAfter}
+    />
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
deleted file mode 100644
index baa627abe..000000000
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetDescription.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Button } from '@czi-sds/components'
-import { useState } from 'react'
-
-import { AuthorLegend } from 'app/components/AuthorLegend'
-import { DatabaseEntry } from 'app/components/DatabaseEntry'
-import { DOI_ID } from 'app/constants/external-dbs'
-import { useDatasetById } from 'app/hooks/useDatasetById'
-import { i18n } from 'app/i18n'
-import { cns, cnsNoMerge } from 'app/utils/cns'
-
-import { DatasetAuthors } from './DatasetAuthors'
-
-// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
-const sectionHeaderStyles = cnsNoMerge(
-  'font-semibold uppercase',
-  'text-sds-gray-black',
-  'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
-)
-
-interface DatabaseListProps {
-  title: string
-  entries?: string[]
-  className?: string
-  collapseAfter?: number
-}
-
-function DatabaseList(props: DatabaseListProps) {
-  const { title, entries, className, collapseAfter } = props
-  const collapsible =
-    collapseAfter !== undefined &&
-    collapseAfter >= 0 &&
-    entries !== undefined &&
-    entries.length > collapseAfter
-  const [collapsed, setCollapsed] = useState(true)
-
-  return (
-    <div className={cns(className, 'flex flex-col gap-sds-xs')}>
-      <h3 className={sectionHeaderStyles}>{title}</h3>
-      {entries ? (
-        <ul
-          className={cns(
-            'flex flex-col gap-sds-xxs',
-            collapsible && 'transition-[max-height_0.2s_ease-out]',
-          )}
-        >
-          {entries.map(
-            (e, i) =>
-              !(collapsible && collapsed && i + 1 > collapseAfter) && (
-                <li className="text-sds-body-xxs leading-sds-body-xxs" key={e}>
-                  <DatabaseEntry entry={e} />
-                </li>
-              ),
-          )}
-          {collapsible && (
-            <div>
-              <Button
-                sdsType="primary"
-                sdsStyle="minimal"
-                onClick={() => setCollapsed(!collapsed)}
-                // remove whitespace
-                style={{ minWidth: 0, padding: 0 }}
-              >
-                {collapsed
-                  ? i18n.plusMore(entries.length - collapseAfter)
-                  : i18n.showLess}
-              </Button>
-            </div>
-          )}
-        </ul>
-      ) : (
-        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-400">
-          {i18n.notSubmitted}
-        </p>
-      )}
-    </div>
-  )
-}
-
-export function DatasetDescription() {
-  const { dataset } = useDatasetById()
-
-  // clean up entries into lists
-  const publicationEntries = dataset.dataset_publications
-    ?.split(',')
-    .map((e) => e.trim())
-    .filter((e) => DOI_ID.exec(e)) // only show DOI links
-
-  const relatedDatabaseEntries = dataset.related_database_entries
-    ?.split(',')
-    .map((e) => e.trim())
-
-  return (
-    <div className="flex flex-col gap-sds-xl">
-      <p className="text-sds-body-m leading-sds-body-m">
-        {dataset.description}
-      </p>
-      <div className="flex flex-col gap-sds-xs">
-        <div
-          className={cnsNoMerge(
-            'flex flex-row gap-sds-xxs',
-            sectionHeaderStyles,
-          )}
-        >
-          <h3>{i18n.authors}</h3>
-          <AuthorLegend />
-        </div>
-        <DatasetAuthors
-          authors={dataset.authors}
-          className="text-sds-body-xxs leading-sds-body-xxs"
-          subtle
-        />
-      </div>
-      <div className="flex flex-row gap-sds-xxl">
-        <DatabaseList
-          title={i18n.publications}
-          entries={publicationEntries}
-          className="flex-1 max-w-[260px]"
-        />
-        <DatabaseList
-          title={i18n.relatedDatabases}
-          entries={relatedDatabaseEntries}
-          collapseAfter={1}
-          className="flex-1 max-w-[260px]"
-        />
-        {/* extra div to turn it into 3 columns */}
-        <div className="flex-1" />
-      </div>
-    </div>
-  )
-}
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
index 07163e952..1efe1a638 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetHeader.tsx
@@ -1,10 +1,9 @@
 import { Button, Icon } from '@czi-sds/components'
 
 import { Breadcrumbs } from 'app/components/Breadcrumbs'
-import { DatasetDescription } from 'app/components/Dataset/DatasetDescription'
+import { DatasetOverview } from 'app/components/Dataset/DatasetOverview'
 import { KeyPhoto } from 'app/components/KeyPhoto'
 import { PageHeader } from 'app/components/PageHeader'
-import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
 import { useDatasetById } from 'app/hooks/useDatasetById'
 import { useDownloadModalQueryParamState } from 'app/hooks/useDownloadModalQueryParamState'
 import { useI18n } from 'app/hooks/useI18n'
@@ -31,7 +30,7 @@ export function DatasetHeader() {
           {t('downloadDataset')}
         </Button>
       }
-      breadcrumbs={<Breadcrumbs variant="dataset" dataset={dataset} />}
+      breadcrumbs={<Breadcrumbs variant="dataset" data={dataset} />}
       lastModifiedDate={dataset.last_modified_date ?? dataset.deposition_date}
       metadata={[
         {
@@ -52,9 +51,7 @@ export function DatasetHeader() {
           </div>
 
           <div className="flex flex-col gap-sds-xl flex-1 min-w-[300px]">
-            <PageHeaderSubtitle>{t('datasetOverview')}</PageHeaderSubtitle>
-
-            <DatasetDescription />
+            <DatasetOverview />
 
             {moreInfo}
           </div>
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
index 13c4ea4a2..0c3d16f91 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -4,12 +4,12 @@ import { isString } from 'lodash-es'
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
 import { AuthorInfo } from 'app/components/AuthorLink'
+import { AuthorList } from 'app/components/AuthorList'
 import { DatabaseEntry } from 'app/components/DatabaseEntry'
 import { Link } from 'app/components/Link'
 import { useI18n } from 'app/hooks/useI18n'
 import { getTableData } from 'app/utils/table'
 
-import { DatasetAuthors } from './DatasetAuthors'
 import { DatasetType } from './type'
 
 function DatabaseEntryList({ entries }: { entries: string }) {
@@ -95,9 +95,7 @@ export function DatasetMetadataTable({
           : t('authors'),
       labelExtra: <AuthorLegend inline />,
       renderValue: () => {
-        return (
-          <DatasetAuthors authors={dataset.authors as AuthorInfo[]} large />
-        )
+        return <AuthorList authors={dataset.authors as AuthorInfo[]} large />
       },
       values: [],
       className: 'leading-sds-body-s',
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
new file mode 100644
index 000000000..5173ccf89
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
@@ -0,0 +1,72 @@
+import { AuthorLegend } from 'app/components/AuthorLegend'
+import { AuthorList } from 'app/components/AuthorList'
+import { DatabaseList } from 'app/components/DatabaseList'
+import { DOI_ID } from 'app/constants/external-dbs'
+import { useDatasetById } from 'app/hooks/useDatasetById'
+import { useI18n } from 'app/hooks/useI18n'
+import { cnsNoMerge } from 'app/utils/cns'
+
+import { PageHeaderSubtitle } from '../PageHeaderSubtitle'
+
+// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
+const sectionHeaderStyles = cnsNoMerge(
+  'font-semibold uppercase',
+  'text-sds-gray-black',
+  'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
+  'mb-sds-xs',
+)
+
+export function DatasetOverview() {
+  const { dataset } = useDatasetById()
+  const { t } = useI18n()
+
+  // clean up entries into lists
+  const publicationEntries = dataset.dataset_publications
+    ?.split(',')
+    .map((e) => e.trim())
+    .filter((e) => DOI_ID.exec(e)) // only show DOI links
+
+  const relatedDatabaseEntries = dataset.related_database_entries
+    ?.split(',')
+    .map((e) => e.trim())
+
+  return (
+    <div className="flex flex-col gap-sds-xl">
+      <PageHeaderSubtitle className="mt-sds-m">
+        {t('datasetOverview')}
+      </PageHeaderSubtitle>
+      <p className="text-sds-body-m leading-sds-body-m">
+        {dataset.description}
+      </p>
+      <div>
+        <div
+          className={cnsNoMerge(
+            'flex flex-row gap-sds-xxs',
+            sectionHeaderStyles,
+          )}
+        >
+          <h3>{t('authors')}</h3>
+          <AuthorLegend />
+        </div>
+        <AuthorList
+          authors={dataset.authors}
+          className="text-sds-body-xxs leading-sds-body-xxs"
+          subtle
+        />
+      </div>
+      <div className="flex flex-row gap-sds-xxl mt-sds-xl">
+        <div className="flex-1 max-w-[260px]">
+          <h3 className={sectionHeaderStyles}>{t('publications')}</h3>
+          <DatabaseList entries={publicationEntries} />
+        </div>
+        <div className="flex-1 max-w-[260px]">
+          <h3 className={sectionHeaderStyles}>{t('relatedDatabases')}</h3>
+
+          <DatabaseList entries={relatedDatabaseEntries} collapseAfter={1} />
+        </div>
+        {/* extra div to turn it into 3 columns */}
+        <div className="flex-1" />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/AnnotationMethodsSummary.tsx b/frontend/packages/data-portal/app/components/Deposition/AnnotationMethodsSummary.tsx
new file mode 100644
index 000000000..e5e532f49
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Deposition/AnnotationMethodsSummary.tsx
@@ -0,0 +1,238 @@
+import { Icon } from '@czi-sds/components'
+import { ReactNode } from 'react'
+
+import { CollapsibleList } from 'app/components/CollapsibleList'
+import { I18n } from 'app/components/I18n'
+import { SourceCodeIcon, WeightsIcon } from 'app/components/icons'
+import { Link } from 'app/components/Link'
+import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
+import { Tooltip } from 'app/components/Tooltip'
+import {
+  methodLabels,
+  methodTooltipLabels,
+  MethodType,
+} from 'app/constants/methodTypes'
+import { useI18n } from 'app/hooks/useI18n'
+import { I18nKeys } from 'app/types/i18n'
+
+interface MethodLink {
+  i18nLabel: I18nKeys
+  url: string
+  icon: ReactNode
+  title?: string
+}
+
+const iconMap = {
+  sourceCode: (
+    <SourceCodeIcon className="w-sds-icon-s h-sds-icon-s inline-block" />
+  ),
+  modelWeights: (
+    <WeightsIcon className="w-sds-icon-s h-sds-icon-s inline-block" />
+  ),
+  website: (
+    <Icon
+      sdsIcon="globe"
+      sdsType="static"
+      sdsSize="s"
+      className="!text-current"
+    />
+  ),
+  documentation: (
+    <Icon
+      sdsIcon="document"
+      sdsType="static"
+      sdsSize="s"
+      className="!text-current"
+    />
+  ),
+  other: (
+    <Icon
+      sdsIcon="link"
+      sdsType="static"
+      sdsSize="s"
+      className="!text-current"
+    />
+  ),
+} as const
+
+interface MethodLinkVariantProps {
+  variant: keyof typeof iconMap
+  url: string
+  title?: string
+}
+
+const variantOrder: (keyof typeof iconMap)[] = [
+  'sourceCode',
+  'modelWeights',
+  'website',
+  'documentation',
+  'other',
+]
+
+function methodLinkFromVariant({
+  variant,
+  url,
+  title,
+}: MethodLinkVariantProps): MethodLink {
+  return {
+    i18nLabel: variant,
+    url,
+    title,
+    icon: iconMap[variant],
+  }
+}
+
+function generateMethodLinks(links: MethodLinkVariantProps[]): MethodLink[] {
+  return links
+    .toSorted(
+      (a, b) =>
+        variantOrder.indexOf(a.variant) - variantOrder.indexOf(b.variant),
+    )
+    .map((props) => methodLinkFromVariant(props))
+}
+
+function MethodTypeSection({
+  methodType,
+  links,
+}: {
+  methodType: MethodType
+  links?: MethodLink[]
+}) {
+  const { t } = useI18n()
+
+  return (
+    <div className="grid grid-cols-[1fr_2fr] gap-x-sds-xl gap-y-sds-xs">
+      <h3 className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase">
+        {t('methodType')}
+      </h3>
+      <p className="flex flex-row gap-sds-xxs text-sds-body-xxs leading-sds-body-xxs col-start-1">
+        {t(methodLabels[methodType])}
+        <Tooltip
+          // FIXME: make arrow centred on icon
+          placement="top"
+          tooltip={<I18n i18nKey={methodTooltipLabels[methodType]} />}
+        >
+          <Icon
+            sdsIcon="infoCircle"
+            sdsSize="xs"
+            sdsType="static"
+            className="!text-sds-gray-500"
+          />
+        </Tooltip>
+      </p>
+      <h3 className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase col-start-2 row-start-1">
+        {t('methodLinks')}
+      </h3>
+      <CollapsibleList
+        entries={links?.map((link) => ({
+          key: `${link.url}_${link.i18nLabel}_${link.title}`,
+          entry: (
+            <span className="text-sds-body-xxs leading-sds-body-xxs flex flex-row">
+              <span className="text-sds-gray-black items-center flex flex-row">
+                {link.icon}
+                <span className="font-semibold ml-sds-xxs mr-sds-xs">
+                  {t(link.i18nLabel)}:
+                </span>
+              </span>
+              <Link
+                to={link.url}
+                variant="dashed-underlined"
+                className="text-sds-gray-600"
+              >
+                {link.title ?? link.url}
+              </Link>
+            </span>
+          ),
+        }))}
+        collapseAfter={1}
+      />
+    </div>
+  )
+}
+
+export function AnnotationMethodsSummary() {
+  const { t } = useI18n()
+
+  const separator = <div className="h-[1px] bg-sds-gray-300" />
+
+  const hybridMethodLinks: MethodLinkVariantProps[] = [
+    {
+      variant: 'sourceCode',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'website',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+  ]
+
+  const automatedMethodLinks: MethodLinkVariantProps[] = [
+    {
+      variant: 'sourceCode',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'website',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+    {
+      variant: 'website',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'sourceCode',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+    {
+      variant: 'other',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'documentation',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+    {
+      variant: 'modelWeights',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'other',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+    {
+      variant: 'documentation',
+      url: 'https://www.example.com',
+    },
+    {
+      variant: 'modelWeights',
+      url: 'https://www.example.com',
+      title: 'Optional Custom Link Name',
+    },
+  ]
+
+  return (
+    <div>
+      <PageHeaderSubtitle className="mb-sds-m">
+        {t('annotationMethodsSummary')}
+      </PageHeaderSubtitle>
+      <div className="p-sds-l flex flex-col gap-sds-l bg-sds-gray-100 rounded-sds-m">
+        <MethodTypeSection
+          methodType="hybrid"
+          links={generateMethodLinks(hybridMethodLinks)}
+        />
+        {separator}
+        <MethodTypeSection
+          methodType="automated"
+          links={generateMethodLinks(automatedMethodLinks)}
+        />
+        {separator}
+        <MethodTypeSection methodType="manual" />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx b/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
new file mode 100644
index 000000000..bba62b91f
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
@@ -0,0 +1,307 @@
+/* eslint-disable react/no-unstable-nested-components */
+
+import { CellHeaderDirection } from '@czi-sds/components'
+import Skeleton from '@mui/material/Skeleton'
+import { useSearchParams } from '@remix-run/react'
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
+import { range, sum } from 'lodash-es'
+import { useMemo } from 'react'
+
+import { AnnotatedObjectsList } from 'app/components/AnnotatedObjectsList'
+import { AuthorList } from 'app/components/AuthorList'
+import { I18n } from 'app/components/I18n'
+import { KeyPhoto } from 'app/components/KeyPhoto'
+import { Link } from 'app/components/Link'
+import { CellHeader, PageTable, TableCell } from 'app/components/Table'
+import { ANNOTATED_OBJECTS_MAX, MAX_PER_PAGE } from 'app/constants/pagination'
+import { DepositionPageDatasetTableWidths } from 'app/constants/table'
+import { Dataset, useDepositionById } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import { useIsLoading } from 'app/hooks/useIsLoading'
+import { LogLevel } from 'app/types/logging'
+import { cnsNoMerge } from 'app/utils/cns'
+import { sendLogs } from 'app/utils/logging'
+import { getErrorMessage } from 'app/utils/string'
+
+const LOADING_DATASETS = range(0, MAX_PER_PAGE).map(
+  (value) =>
+    ({
+      authors: [],
+      id: value,
+      title: `loading-dataset-${value}`,
+      runs: [],
+      runs_aggregate: {},
+    }) as Dataset,
+)
+
+export function DatasetsTable() {
+  const { t } = useI18n()
+  const { deposition } = useDepositionById()
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const datasetSort = (searchParams.get('sort') ?? undefined) as
+    | CellHeaderDirection
+    | undefined
+
+  const { isLoadingDebounced } = useIsLoading()
+
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<Dataset>()
+
+    try {
+      return [
+        columnHelper.accessor('key_photo_thumbnail_url', {
+          header: () => <p />,
+
+          cell({ row: { original: dataset } }) {
+            const datasetUrl = `/datasets/${dataset.id}`
+
+            return (
+              <TableCell
+                renderLoadingSkeleton={false}
+                width={DepositionPageDatasetTableWidths.photo}
+              >
+                <Link to={datasetUrl} className="max-w-[134px] self-start">
+                  <KeyPhoto
+                    className="max-w-[134px]"
+                    title={dataset.title}
+                    src={dataset.key_photo_thumbnail_url ?? undefined}
+                    loading={isLoadingDebounced}
+                    textOnGroupHover="openDataset"
+                  />
+                </Link>
+              </TableCell>
+            )
+          },
+        }),
+
+        columnHelper.accessor('id', {
+          header: () => (
+            <CellHeader
+              showSort
+              active={datasetSort !== undefined}
+              direction={datasetSort}
+              onClick={(event) => {
+                event.stopPropagation()
+                event.preventDefault()
+                const nextParams = new URLSearchParams(searchParams)
+
+                if (datasetSort === undefined) {
+                  nextParams.set('sort', 'asc')
+                } else if (datasetSort === 'asc') {
+                  nextParams.set('sort', 'desc')
+                } else {
+                  nextParams.delete('sort')
+                }
+
+                setSearchParams(nextParams)
+              }}
+              width={DepositionPageDatasetTableWidths.id}
+            >
+              {t('datasetName')}
+            </CellHeader>
+          ),
+
+          cell({ row: { original: dataset } }) {
+            const datasetUrl = `/datasets/${dataset.id}`
+
+            return (
+              <TableCell
+                className="flex px-sds-s py-sds-l gap-sds-m"
+                renderLoadingSkeleton={false}
+                width={DepositionPageDatasetTableWidths.id}
+              >
+                <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
+                  <p
+                    className={cnsNoMerge(
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'group-hover:text-sds-primary-500',
+                    )}
+                  >
+                    {isLoadingDebounced ? (
+                      <Skeleton className="max-w-[70%]" variant="text" />
+                    ) : (
+                      <Link to={datasetUrl}>{dataset.title}</Link>
+                    )}
+                  </p>
+
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                    {isLoadingDebounced ? (
+                      <Skeleton className="max-w-[120px]" variant="text" />
+                    ) : (
+                      `${t('datasetId')}: ${dataset.id}`
+                    )}
+                  </p>
+
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                    {isLoadingDebounced ? (
+                      <>
+                        <Skeleton className="max-w-[80%] mt-2" variant="text" />
+
+                        <Skeleton
+                          className=" max-w-[50%] mt-2"
+                          variant="text"
+                        />
+                      </>
+                    ) : (
+                      <AuthorList authors={dataset.authors} compact />
+                    )}
+                  </p>
+                </div>
+              </TableCell>
+            )
+          },
+        }),
+
+        columnHelper.accessor('organism_name', {
+          header: () => (
+            <CellHeader width={DepositionPageDatasetTableWidths.organism}>
+              {t('organism')}
+            </CellHeader>
+          ),
+
+          cell: ({ getValue }) => (
+            <TableCell
+              primaryText={getValue() ?? '--'}
+              width={DepositionPageDatasetTableWidths.organism}
+            />
+          ),
+        }),
+
+        columnHelper.accessor(
+          (dataset) => dataset.runs_aggregate.aggregate?.count,
+          {
+            id: 'runs',
+
+            header: () => (
+              <CellHeader
+                tooltip={
+                  <div>
+                    <p>
+                      <I18n i18nKey="runsTooltip" />
+                      {t('symbolPeriod')}
+                    </p>
+                    <p className="mt-sds-s text-sds-gray-600 text-sds-body-xxxs leading-sds-body-xxxs">
+                      <I18n i18nKey="runsTooltipDepositionSubtext" />
+                    </p>
+                  </div>
+                }
+                arrowPadding={{ right: 270 }}
+                width={DepositionPageDatasetTableWidths.runs}
+                subHeader={t('withDepositionData')}
+              >
+                {t('runs')}
+              </CellHeader>
+            ),
+
+            cell: ({ getValue }) => (
+              <TableCell
+                primaryText={(getValue() ?? 0).toLocaleString()}
+                width={DepositionPageDatasetTableWidths.runs}
+              />
+            ),
+          },
+        ),
+
+        columnHelper.accessor((dataset) => dataset.runs, {
+          id: 'annotations',
+
+          header: () => (
+            <CellHeader
+              width={DepositionPageDatasetTableWidths.annotations}
+              subHeader={t('depositionOnly')}
+            >
+              {t('annotations')}
+            </CellHeader>
+          ),
+
+          cell({ getValue }) {
+            const runs = getValue()
+            const annotationCount = sum(
+              runs.flatMap((run) =>
+                run.tomogram_voxel_spacings.flatMap(
+                  (voxelSpacing) =>
+                    voxelSpacing.annotations_aggregate.aggregate?.count ?? 0,
+                ),
+              ),
+            )
+
+            return (
+              <TableCell width={DepositionPageDatasetTableWidths.annotations}>
+                {annotationCount.toLocaleString()}
+              </TableCell>
+            )
+          },
+        }),
+
+        columnHelper.accessor((dataset) => dataset.runs, {
+          id: 'annotatedObjects',
+
+          header: () => (
+            <CellHeader
+              width={DepositionPageDatasetTableWidths.annotatedObjects}
+              subHeader={t('depositionOnly')}
+            >
+              {t('annotatedObjects')}
+            </CellHeader>
+          ),
+
+          cell({ getValue }) {
+            const runs = getValue()
+            const annotatedObjects = Array.from(
+              new Set(
+                runs.flatMap((run) =>
+                  run.tomogram_voxel_spacings.flatMap((voxelSpacing) =>
+                    voxelSpacing.annotations.flatMap(
+                      (annotation) => annotation.object_name,
+                    ),
+                  ),
+                ),
+              ),
+            )
+
+            return (
+              <TableCell
+                width={DepositionPageDatasetTableWidths.annotatedObjects}
+                renderLoadingSkeleton={() => (
+                  <div className="flex flex-col gap-2">
+                    {range(0, ANNOTATED_OBJECTS_MAX).map((val) => (
+                      <Skeleton key={`skeleton-${val}`} variant="rounded" />
+                    ))}
+                  </div>
+                )}
+              >
+                {annotatedObjects.length === 0 ? (
+                  '--'
+                ) : (
+                  <AnnotatedObjectsList annotatedObjects={annotatedObjects} />
+                )}
+              </TableCell>
+            )
+          },
+        }),
+      ] as ColumnDef<Dataset>[]
+    } catch (err) {
+      sendLogs({
+        level: LogLevel.Error,
+        messages: [
+          {
+            type: 'browser',
+            message: 'Error creating columns for dataset table',
+            error: getErrorMessage(err),
+          },
+        ],
+      })
+
+      throw err
+    }
+  }, [datasetSort, isLoadingDebounced, searchParams, setSearchParams, t])
+
+  return (
+    <PageTable
+      data={isLoadingDebounced ? LOADING_DATASETS : deposition.datasets}
+      columns={columns}
+      hoverType="group"
+    />
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionHeader.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionHeader.tsx
new file mode 100644
index 000000000..f3935444d
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Deposition/DepositionHeader.tsx
@@ -0,0 +1,51 @@
+import { Breadcrumbs } from 'app/components/Breadcrumbs'
+import { KeyPhoto } from 'app/components/KeyPhoto'
+import { PageHeader } from 'app/components/PageHeader'
+import { useDepositionById } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import {
+  MetadataDrawerId,
+  useMetadataDrawer,
+} from 'app/hooks/useMetadataDrawer'
+
+import { DepositionOverview } from './DepositionOverview'
+
+export function DepositionHeader() {
+  const { deposition } = useDepositionById()
+  const { toggleDrawer } = useMetadataDrawer()
+  const { t } = useI18n()
+
+  return (
+    <PageHeader
+      breadcrumbs={<Breadcrumbs variant="deposition" data={deposition} />}
+      lastModifiedDate={
+        deposition.last_modified_date ?? deposition.deposition_date
+      }
+      metadata={[
+        {
+          key: t('depositionId'),
+          value: String(deposition.id),
+        },
+      ]}
+      onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Deposition)}
+      releaseDate={deposition.release_date}
+      title={deposition.title}
+      renderHeader={({ moreInfo }) => (
+        <div className="flex flex-row justify-between gap-sds-xxl p-sds-xl">
+          <div className="max-w-[465px] max-h-[330px]">
+            <KeyPhoto
+              title={deposition.title}
+              src={deposition.key_photo_url ?? undefined}
+            />
+          </div>
+
+          <div className="flex flex-col gap-sds-xl flex-1 min-w-[300px]">
+            <DepositionOverview />
+
+            {moreInfo}
+          </div>
+        </div>
+      )}
+    />
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx
new file mode 100644
index 000000000..ffc762f64
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx
@@ -0,0 +1,102 @@
+import { sum } from 'lodash-es'
+import { useMemo } from 'react'
+
+import { AuthorLegend } from 'app/components/AuthorLegend'
+import { AuthorList } from 'app/components/AuthorList'
+import { DatabaseList } from 'app/components/DatabaseList'
+import { PageHeaderSubtitle } from 'app/components/PageHeaderSubtitle'
+import { DOI_ID } from 'app/constants/external-dbs'
+import { useDepositionById } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import { cnsNoMerge } from 'app/utils/cns'
+
+import { AnnotationMethodsSummary } from './AnnotationMethodsSummary'
+
+// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
+const sectionHeaderStyles = cnsNoMerge(
+  'font-semibold uppercase',
+  'text-sds-gray-black',
+  'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
+  'mb-sds-xs',
+)
+
+export function DepositionOverview() {
+  const { deposition } = useDepositionById()
+
+  const { t } = useI18n()
+
+  const annotationsCount = useMemo<number>(
+    () =>
+      sum(
+        deposition.datasets.flatMap((dataset) =>
+          dataset.runs.flatMap(
+            (run) =>
+              run.tomogram_voxel_spacings.at(0)?.annotations_aggregate.aggregate
+                ?.count,
+          ),
+        ),
+      ),
+    [deposition],
+  )
+
+  // clean up entries into lists
+  const publicationEntries = deposition.deposition_publications
+    ?.split(',')
+    .map((e) => e.trim())
+    .filter((e) => DOI_ID.exec(e)) // only show DOI links
+
+  const relatedDatabaseEntries = deposition.related_database_entries
+    ?.split(',')
+    .map((e) => e.trim())
+
+  return (
+    <div className="flex flex-col gap-sds-xl">
+      <div>
+        <PageHeaderSubtitle className="my-sds-m">
+          {t('depositionOverview')}
+        </PageHeaderSubtitle>
+        <p className="text-sds-body-m leading-sds-body-m">
+          {deposition.description}
+        </p>
+      </div>
+      <div>
+        <div
+          className={cnsNoMerge(
+            'flex flex-row gap-sds-xxs',
+            sectionHeaderStyles,
+          )}
+        >
+          <h3>{t('authors')}</h3>
+          <AuthorLegend />
+        </div>
+        <AuthorList
+          authors={deposition.authors}
+          className="text-sds-body-xxs leading-sds-body-xxs"
+          subtle
+        />
+      </div>
+      <div className="flex flex-row gap-sds-xxl">
+        <div className="flex-1 max-w-[260px]">
+          <h3 className={sectionHeaderStyles}>{t('depositionData')}</h3>
+          <p className="flex flex-row gap-sds-xs">
+            <span className="font-semibold text-sds-gray-black">
+              {t('annotations')}:
+            </span>
+            {annotationsCount.toLocaleString()}
+          </p>
+        </div>
+
+        <div className="flex-1 max-w-[260px]">
+          <h3 className={sectionHeaderStyles}>{t('publications')}</h3>
+          <DatabaseList entries={publicationEntries} />
+        </div>
+
+        <div className="flex-1 max-w-[260px]">
+          <h3 className={sectionHeaderStyles}>{t('relatedDatabases')}</h3>
+          <DatabaseList entries={relatedDatabaseEntries} collapseAfter={1} />
+        </div>
+      </div>
+      <AnnotationMethodsSummary />
+    </div>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/Deposition/index.ts b/frontend/packages/data-portal/app/components/Deposition/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/packages/data-portal/app/components/I18n.tsx b/frontend/packages/data-portal/app/components/I18n.tsx
index aa056e32f..b10fbf3eb 100644
--- a/frontend/packages/data-portal/app/components/I18n.tsx
+++ b/frontend/packages/data-portal/app/components/I18n.tsx
@@ -1,14 +1,13 @@
-import { LinkProps } from '@remix-run/react'
 import { Trans, TransProps } from 'react-i18next'
 import { Required } from 'utility-types'
 
 import type { I18nKeys } from 'app/types/i18n'
 
-import { Link } from './Link'
+import { Link, VariantLinkProps } from './Link'
 
 interface Props extends Omit<TransProps<I18nKeys>, 'ns' | 'i18nKey'> {
   i18nKey: I18nKeys
-  linkProps?: Partial<LinkProps>
+  linkProps?: Partial<VariantLinkProps>
 }
 
 /**
@@ -28,10 +27,17 @@ export function I18n({ i18nKey, components, linkProps, ...props }: Props) {
         semibold: <span className="font-semibold" />,
         code: <span className="font-mono" />,
 
+        urlNoColor: (
+          <Link {...(linkProps as Required<Partial<VariantLinkProps>, 'to'>)}>
+            {/* This will get replaced by I18next */}
+            tmp
+          </Link>
+        ),
+
         url: (
           <Link
             className="text-sds-primary-500"
-            {...(linkProps as Required<Partial<LinkProps>, 'to'>)}
+            {...(linkProps as Required<Partial<VariantLinkProps>, 'to'>)}
           >
             {/* This will get replaced by I18next */}
             tmp
diff --git a/frontend/packages/data-portal/app/components/Link/Link.tsx b/frontend/packages/data-portal/app/components/Link/Link.tsx
index a8776db71..6075fc685 100644
--- a/frontend/packages/data-portal/app/components/Link/Link.tsx
+++ b/frontend/packages/data-portal/app/components/Link/Link.tsx
@@ -10,13 +10,12 @@ export const DASHED_BORDERED_CLASSES =
 export const DASHED_UNDERLINED_CLASSES =
   'underline underline-offset-[3px] decoration-dashed hover:decoration-solid'
 
+export type VariantLinkProps = LinkProps & {
+  variant?: 'dashed-bordered' | 'dashed-underlined'
+}
+
 function BaseLink(
-  {
-    to,
-    variant,
-    className,
-    ...props
-  }: LinkProps & { variant?: 'dashed-bordered' | 'dashed-underlined' },
+  { to, variant, className, ...props }: VariantLinkProps,
   ref: ForwardedRef<HTMLAnchorElement>,
 ) {
   let newTabProps: Partial<LinkProps> = {}
diff --git a/frontend/packages/data-portal/app/components/PageHeaderSubtitle.tsx b/frontend/packages/data-portal/app/components/PageHeaderSubtitle.tsx
index c870b9e02..9cf1e1d17 100644
--- a/frontend/packages/data-portal/app/components/PageHeaderSubtitle.tsx
+++ b/frontend/packages/data-portal/app/components/PageHeaderSubtitle.tsx
@@ -1,8 +1,21 @@
 import { ReactNode } from 'react'
 
-export function PageHeaderSubtitle({ children }: { children: ReactNode }) {
+import { cns } from 'app/utils/cns'
+
+export function PageHeaderSubtitle({
+  className,
+  children,
+}: {
+  className: string
+  children: ReactNode
+}) {
   return (
-    <h2 className="text-sds-header-l leading-sds-header-l font-semibold pt-sds-l">
+    <h2
+      className={cns(
+        className,
+        'text-sds-header-l leading-sds-header-l font-semibold',
+      )}
+    >
       {children}
     </h2>
   )
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
index 8fab56c7e..6d23c9af5 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -1,6 +1,6 @@
 import { AccordionMetadataTable } from 'app/components/AccordionMetadataTable'
 import { AuthorLegend } from 'app/components/AuthorLegend'
-import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
+import { AuthorList } from 'app/components/AuthorList'
 import { useI18n } from 'app/hooks/useI18n'
 import { useAnnotation } from 'app/state/annotation'
 
@@ -28,7 +28,7 @@ export function AnnotationOverviewTable() {
               : t('annotationAuthors'),
           labelExtra: <AuthorLegend inline />,
           renderValue: () => {
-            return <DatasetAuthors authors={annotation.authors} large />
+            return <AuthorList authors={annotation.authors} large />
           },
           values: [''],
           className: 'leading-sds-body-s',
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
index 2b59b5c57..40adf0e2a 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -5,11 +5,16 @@ import { ColumnDef, createColumnHelper } from '@tanstack/react-table'
 import { range } from 'lodash-es'
 import { ComponentProps, useCallback, useMemo } from 'react'
 
-import { DatasetAuthors } from 'app/components/Dataset/DatasetAuthors'
+import { AuthorList } from 'app/components/AuthorList'
 import { I18n } from 'app/components/I18n'
 import { DASHED_BORDERED_CLASSES } from 'app/components/Link'
 import { CellHeader, PageTable, TableCell } from 'app/components/Table'
 import { Tooltip } from 'app/components/Tooltip'
+import {
+  methodLabels,
+  methodTooltipLabels,
+  MethodType,
+} from 'app/constants/methodTypes'
 import { MAX_PER_PAGE } from 'app/constants/pagination'
 import { AnnotationTableWidths } from 'app/constants/table'
 import { TestIds } from 'app/constants/testIds'
@@ -58,24 +63,6 @@ function ConfidenceValue({ value }: { value: number }) {
   )
 }
 
-type MethodTypeLabels = {
-  automated: I18nKeys
-  hybrid: I18nKeys
-  manual: I18nKeys
-}
-
-const methodLabels: MethodTypeLabels = {
-  automated: 'automated',
-  hybrid: 'hybrid',
-  manual: 'manual',
-}
-
-const methodTooltipLabels: MethodTypeLabels = {
-  automated: 'methodTypeAutomated',
-  hybrid: 'methodTypeHybrid',
-  manual: 'methodTypeManual',
-}
-
 export function AnnotationTable() {
   const { isLoadingDebounced } = useIsLoading()
   const { run } = useRunById()
@@ -184,7 +171,7 @@ export function AnnotationTable() {
             </div>
 
             <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
-              <DatasetAuthors authors={annotation.authors} compact />
+              <AuthorList authors={annotation.authors} compact />
             </div>
           </TableCell>
         ),
@@ -257,10 +244,7 @@ export function AnnotationTable() {
             )
           }
 
-          const methodType = annotation.method_type as
-            | 'automated'
-            | 'manual'
-            | 'hybrid'
+          const methodType = annotation.method_type as MethodType
 
           return (
             <TableCell
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
index 564cedc9d..89380109b 100644
--- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -106,7 +106,7 @@ export function RunHeader() {
       lastModifiedDate={
         run.dataset.last_modified_date ?? run.dataset.deposition_date
       }
-      breadcrumbs={<Breadcrumbs variant="run" dataset={run.dataset} />}
+      breadcrumbs={<Breadcrumbs variant="run" data={run.dataset} />}
       metadata={[{ key: t('runId'), value: `${run.id}` }]}
       onMoreInfoClick={() => toggleDrawer(MetadataDrawerId.Run)}
       title={run.name}
@@ -123,7 +123,9 @@ export function RunHeader() {
           </div>
 
           <div className="flex flex-col gap-sds-xl flex-auto pt-sds-l">
-            <PageHeaderSubtitle>{t('runOverview')}</PageHeaderSubtitle>
+            <PageHeaderSubtitle className="mt-sds-m">
+              {t('runOverview')}
+            </PageHeaderSubtitle>
 
             {multipleTomogramsEnabled ? (
               <InlineMetadata
diff --git a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
index 018029f37..593b79291 100644
--- a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
@@ -18,6 +18,7 @@ export function CellHeader({
   tooltip,
   width: columnWidth,
   children,
+  subHeader,
   ...props
 }: Omit<
   CellHeaderProps,
@@ -32,6 +33,7 @@ export function CellHeader({
   children?: ReactNode
   offset?: TooltipOffset
   showSort?: boolean
+  subHeader?: string
   tooltip?: ReactNode
   width?: TableColumnWidth
 }) {
@@ -48,10 +50,16 @@ export function CellHeader({
         maxWidth: columnWidth?.max,
         minWidth: columnWidth?.min,
         width: columnWidth?.width,
+        verticalAlign: 'top',
       }}
       hideSortIcon={!showSort}
     >
-      <span className="line-clamp-1">{children}</span>
+      <p className="line-clamp-1">{children}</p>
+      {subHeader && (
+        <p className="text-sds-body-xxxs leading-sds-body-xxxs font-normal">
+          {subHeader}
+        </p>
+      )}
     </SDSCellHeader>
   )
 }
diff --git a/frontend/packages/data-portal/app/components/icons/SourceCodeIcon.tsx b/frontend/packages/data-portal/app/components/icons/SourceCodeIcon.tsx
new file mode 100644
index 000000000..02ebdce4d
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/icons/SourceCodeIcon.tsx
@@ -0,0 +1,31 @@
+import { IconProps } from './icon.types'
+
+export function SourceCodeIcon(props: IconProps) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.74828 2.12043C7.78892 1.96878 7.94479 1.87879 8.09643 1.91942L8.59616 2.05333C8.74781 2.09396 8.8378 2.24983 8.79717 2.40148L6.25716 11.8809C6.21653 12.0326 6.06065 12.1226 5.90901 12.0819L5.40928 11.948C5.25764 11.9074 5.16764 11.7515 5.20828 11.5999L7.74828 2.12043Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.0847258 7.20895C-0.0279789 7.09787 -0.0282804 6.91614 0.0840552 6.80469L3.26281 3.65098C3.37426 3.54041 3.55424 3.54112 3.66481 3.65257L4.02519 4.01581C4.13576 4.12726 4.13505 4.30724 4.0236 4.41781L1.62033 6.80214C1.508 6.91359 1.5083 7.09532 1.621 7.2064L4.02166 9.57238C4.13347 9.68258 4.13478 9.86257 4.02458 9.97438L3.66542 10.3388C3.55521 10.4506 3.37523 10.4519 3.26342 10.3417L0.0847258 7.20895Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.9153 6.78311C14.028 6.89418 14.0283 7.07591 13.9159 7.18736L10.7372 10.3411C10.6257 10.4516 10.4458 10.4509 10.3352 10.3395L9.97481 9.97625C9.86424 9.8648 9.86495 9.68481 9.9764 9.57424L12.3797 7.18991C12.492 7.07846 12.4917 6.89673 12.379 6.78565L9.97834 4.41967C9.86653 4.30947 9.86522 4.12949 9.97542 4.01767L10.3346 3.65324C10.4448 3.54143 10.6248 3.54012 10.7366 3.65032L13.9153 6.78311Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/icons/WeightsIcon.tsx b/frontend/packages/data-portal/app/components/icons/WeightsIcon.tsx
new file mode 100644
index 000000000..2f6fc355a
--- /dev/null
+++ b/frontend/packages/data-portal/app/components/icons/WeightsIcon.tsx
@@ -0,0 +1,21 @@
+import { IconProps } from './icon.types'
+
+export function WeightsIcon(props: IconProps) {
+  return (
+    <svg
+      width="14"
+      height="13"
+      viewBox="0 0 14 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.00001 0C7.35147 0 7.63637 0.284912 7.63637 0.636361V3.06697L10.7136 2.5541C10.9763 2.51031 11.2385 2.6348 11.3707 2.86608L13.6478 6.85106C13.6535 6.86099 13.6591 6.87079 13.6647 6.88053C13.7482 7.02644 13.8219 7.15524 13.8753 7.29575C13.9223 7.41933 13.9563 7.54756 13.9769 7.6782C14.0002 7.82667 14.0001 7.97507 14 8.14313C14 8.15439 14 8.16572 14 8.17711V8.27269C14 10.0299 12.5754 11.4545 10.8182 11.4545C9.06093 11.4545 7.63637 10.0299 7.63637 8.27269V8.17711C7.63637 8.16572 7.63637 8.15439 7.63637 8.14313C7.63624 7.97507 7.63618 7.82667 7.65947 7.6782C7.67996 7.54756 7.71401 7.41933 7.76103 7.29575C7.81449 7.15524 7.88818 7.02644 7.97167 6.88059C7.97721 6.87079 7.98287 6.86099 7.98853 6.85106L9.60063 4.02986L7.11646 4.4439C7.10908 4.44526 7.1017 4.44648 7.09432 4.44759L4.18763 4.93203L6.01149 8.12378C6.01715 8.13371 6.02275 8.14351 6.02835 8.15331C6.11184 8.29917 6.18553 8.42797 6.23899 8.56847C6.28595 8.69205 6.32 8.82028 6.34055 8.95093C6.36384 9.09939 6.36378 9.24779 6.36365 9.41585C6.36365 9.42712 6.36365 9.43844 6.36365 9.44983V9.54541C6.36365 11.3027 4.9391 12.7272 3.18183 12.7272C1.42457 12.7272 2.74074e-05 11.3027 2.74074e-05 9.54541V9.44983C2.74074e-05 9.43844 2.04112e-05 9.42712 1.34112e-05 9.41585C-8.90429e-05 9.24779 -0.000180013 9.09939 0.0231324 8.95093C0.0436487 8.82028 0.0776876 8.69205 0.124702 8.56847C0.178131 8.42797 0.251815 8.29917 0.335312 8.15331C0.340887 8.14351 0.346512 8.13371 0.352176 8.12378L2.62932 4.1388C2.72417 3.97281 2.88863 3.85826 3.07721 3.82683L6.36365 3.27909V0.636361C6.36365 0.284912 6.64855 0 7.00001 0ZM1.73295 8.27269L3.18183 5.73718L4.63071 8.27269H1.73295ZM5.09091 9.54541H1.27275C1.27275 10.5998 2.12748 11.4545 3.18183 11.4545C4.23619 11.4545 5.09091 10.5998 5.09091 9.54541ZM10.8182 4.46443L9.36931 6.99997H12.267L10.8182 4.46443ZM12.7273 8.27269H8.90909C8.90909 9.32708 9.76379 10.1818 10.8182 10.1818C11.8725 10.1818 12.7273 9.32708 12.7273 8.27269Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/packages/data-portal/app/components/icons/index.ts b/frontend/packages/data-portal/app/components/icons/index.ts
index bc95aae2d..3c032aaf7 100644
--- a/frontend/packages/data-portal/app/components/icons/index.ts
+++ b/frontend/packages/data-portal/app/components/icons/index.ts
@@ -7,4 +7,6 @@ export * from './ImageInstituteIcon'
 export * from './KeyPhotoFallbackIcon'
 export * from './ORCIDIcon'
 export * from './SmallChevronRightIcon'
+export * from './SourceCodeIcon'
 export * from './SpeechBubbleIcon'
+export * from './WeightsIcon'
diff --git a/frontend/packages/data-portal/app/constants/methodTypes.ts b/frontend/packages/data-portal/app/constants/methodTypes.ts
new file mode 100644
index 000000000..0b3bc12ab
--- /dev/null
+++ b/frontend/packages/data-portal/app/constants/methodTypes.ts
@@ -0,0 +1,21 @@
+import { I18nKeys } from 'app/types/i18n'
+
+type MethodTypeLabels = {
+  automated: I18nKeys
+  hybrid: I18nKeys
+  manual: I18nKeys
+}
+
+export type MethodType = keyof MethodTypeLabels
+
+export const methodLabels: MethodTypeLabels = {
+  automated: 'automated',
+  hybrid: 'hybrid',
+  manual: 'manual',
+}
+
+export const methodTooltipLabels: MethodTypeLabels = {
+  automated: 'methodTypeAutomated',
+  hybrid: 'methodTypeHybrid',
+  manual: 'methodTypeManual',
+}
diff --git a/frontend/packages/data-portal/app/constants/table.ts b/frontend/packages/data-portal/app/constants/table.ts
index 67ced8b4d..c63b7289c 100644
--- a/frontend/packages/data-portal/app/constants/table.ts
+++ b/frontend/packages/data-portal/app/constants/table.ts
@@ -47,3 +47,12 @@ export const DepositionTableWidths = {
   annotatedObjects: { min: 120, max: 400 },
   objectShapeTypes: { min: 120, max: 200 },
 }
+
+export const DepositionPageDatasetTableWidths = {
+  photo: PHOTO_COLUMN_WIDTH,
+  id: { min: 300, max: 800 },
+  organism: { min: 100, max: 400 },
+  runs: { min: 120, max: 200 },
+  annotations: { min: 120, max: 200 },
+  annotatedObjects: { min: 120, max: 400 },
+}
diff --git a/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts b/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts
new file mode 100644
index 000000000..044002f98
--- /dev/null
+++ b/frontend/packages/data-portal/app/graphql/getDepositionById.server.ts
@@ -0,0 +1,167 @@
+import type { ApolloClient, NormalizedCacheObject } from '@apollo/client'
+
+import { gql } from 'app/__generated__'
+import {
+  Datasets_Bool_Exp as Depositions_Bool_Exp,
+  Order_By,
+} from 'app/__generated__/graphql'
+import { MAX_PER_PAGE } from 'app/constants/pagination'
+import { FilterState, getFilterState } from 'app/hooks/useFilter'
+
+const GET_DEPOSITION_BY_ID = gql(`
+  query GetDepositionById(
+    $id: Int!,
+    $dataset_limit: Int,
+    $dataset_offset: Int,
+    $dataset_order_by: order_by,
+    $filter: datasets_bool_exp,
+  ) {
+    deposition: datasets_by_pk(id: $id) {
+      s3_prefix
+
+      # key photo
+      key_photo_url
+
+      # dates
+      last_modified_date
+      release_date
+      deposition_date
+
+      # metadata
+      id
+      title
+      description
+
+      funding_sources {
+        funding_agency_name
+        grant_id
+      }
+
+      related_database_entries
+      deposition_citations: dataset_citations
+
+      authors(
+        order_by: {
+          author_list_order: asc,
+        },
+      ) {
+        corresponding_author_status
+        email
+        name
+        orcid
+        primary_author_status
+      }
+
+      # publication info
+      related_database_entries
+      deposition_publications: dataset_publications
+
+      # runs
+      run_stats: runs {
+        tomogram_voxel_spacings {
+          annotations {
+            object_name
+
+            files(distinct_on: shape_type) {
+              shape_type
+            }
+          }
+
+          annotations_aggregate {
+            aggregate {
+              count
+            }
+          }
+        }
+      }
+    }
+
+    datasets(
+      limit: $dataset_limit,
+      offset: $dataset_offset,
+      order_by: { title: $dataset_order_by },
+      where: $filter
+    ) {
+      id
+      title
+      organism_name
+      key_photo_thumbnail_url
+
+      authors(
+        order_by: {
+          author_list_order: asc,
+        },
+      ) {
+        name
+        primary_author_status
+        corresponding_author_status
+      }
+
+      runs_aggregate {
+        aggregate {
+          count
+        }
+      }
+
+      runs {
+        tomogram_voxel_spacings {
+          annotations(distinct_on: object_name) {
+            object_name
+          }
+
+          annotations_aggregate {
+            aggregate {
+              count
+            }
+          }
+        }
+      }
+    }
+
+    datasets_aggregate {
+      aggregate {
+        count
+      }
+    }
+
+    filtered_datasets_aggregate: datasets_aggregate(where: $filter) {
+      aggregate {
+        count
+      }
+    }
+  }
+`)
+
+function getFilter(filterState: FilterState) {
+  const filters: Depositions_Bool_Exp[] = []
+  // TODO: implement filters
+  // eslint-disable-next-line no-console
+  console.log(filterState)
+
+  return { _and: filters } as Depositions_Bool_Exp
+}
+
+export async function getDepositionById({
+  client,
+  id,
+  orderBy,
+  page = 1,
+  params = new URLSearchParams(),
+}: {
+  client: ApolloClient<NormalizedCacheObject>
+  orderBy?: Order_By | null
+  id: number
+  page?: number
+  params?: URLSearchParams
+}) {
+  return client.query({
+    query: GET_DEPOSITION_BY_ID,
+    variables: {
+      id,
+      dataset_limit: MAX_PER_PAGE,
+      dataset_offset: (page - 1) * MAX_PER_PAGE,
+      dataset_order_by: orderBy,
+      filter: getFilter(getFilterState(params)),
+    },
+  })
+}
diff --git a/frontend/packages/data-portal/app/hooks/useDepositionById.ts b/frontend/packages/data-portal/app/hooks/useDepositionById.ts
new file mode 100644
index 000000000..5ac30a603
--- /dev/null
+++ b/frontend/packages/data-portal/app/hooks/useDepositionById.ts
@@ -0,0 +1,60 @@
+import { useMemo } from 'react'
+import { useTypedLoaderData } from 'remix-typedjson'
+
+import { GetDepositionByIdQuery } from 'app/__generated__/graphql'
+import { NonUndefined } from 'app/types/utils'
+
+export type Dataset = GetDepositionByIdQuery['datasets'][number]
+
+export type Deposition = NonUndefined<GetDepositionByIdQuery['deposition']> & {
+  datasets: GetDepositionByIdQuery['datasets']
+  datasets_aggregate: GetDepositionByIdQuery['datasets_aggregate']
+  filtered_datasets_aggregate: GetDepositionByIdQuery['filtered_datasets_aggregate']
+}
+
+export function useDepositionById() {
+  const data = useTypedLoaderData<GetDepositionByIdQuery>()
+
+  const objectNames = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          data.deposition?.run_stats.flatMap((run) =>
+            run.tomogram_voxel_spacings.flatMap((voxelSpacing) =>
+              voxelSpacing.annotations.flatMap(
+                (annotation) => annotation.object_name,
+              ),
+            ),
+          ),
+        ),
+      ),
+    [data.deposition?.run_stats],
+  )
+
+  const objectShapeTypes = useMemo(
+    () =>
+      Array.from(
+        new Set(
+          data.deposition?.run_stats.flatMap((run) =>
+            run.tomogram_voxel_spacings.flatMap((voxelSpacing) =>
+              voxelSpacing.annotations.flatMap((annotation) =>
+                annotation.files.flatMap((file) => file.shape_type),
+              ),
+            ),
+          ),
+        ),
+      ),
+    [data.deposition?.run_stats],
+  )
+
+  return {
+    deposition: {
+      ...data.deposition,
+      datasets: data.datasets,
+      datasets_aggregate: data.datasets_aggregate,
+      filtered_datasets_aggregate: data.filtered_datasets_aggregate,
+    } as Deposition,
+    objectNames,
+    objectShapeTypes,
+  }
+}
diff --git a/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts b/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
index 31656475c..2cc34bca5 100644
--- a/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
+++ b/frontend/packages/data-portal/app/hooks/useMetadataDrawer.ts
@@ -7,6 +7,7 @@ import { stringParam, useQueryParams } from './useQueryParam'
 export enum MetadataDrawerId {
   Annotation = 'annotation',
   Dataset = 'dataset',
+  Deposition = 'deposition',
   Run = 'run',
 }
 
diff --git a/frontend/packages/data-portal/app/routes/depositions.$id.tsx b/frontend/packages/data-portal/app/routes/depositions.$id.tsx
new file mode 100644
index 000000000..54ffd0b96
--- /dev/null
+++ b/frontend/packages/data-portal/app/routes/depositions.$id.tsx
@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-throw-literal */
+
+import { CellHeaderDirection } from '@czi-sds/components'
+import { json, LoaderFunctionArgs, redirect } from '@remix-run/server-runtime'
+
+import { Order_By } from 'app/__generated__/graphql'
+import { apolloClient } from 'app/apollo.server'
+import { DatasetsTable } from 'app/components/Deposition/DatasetsTable'
+import { DepositionHeader } from 'app/components/Deposition/DepositionHeader'
+import { TablePageLayout } from 'app/components/TablePageLayout'
+import { QueryParams } from 'app/constants/query'
+import { getDepositionById } from 'app/graphql/getDepositionById.server'
+import { useDepositionById } from 'app/hooks/useDepositionById'
+import { useI18n } from 'app/hooks/useI18n'
+import { getFeatureFlag } from 'app/utils/featureFlags'
+
+export async function loader({ params, request }: LoaderFunctionArgs) {
+  const url = new URL(request.url)
+
+  const showDepositions = getFeatureFlag({
+    env: process.env.ENV,
+    key: 'depositions',
+    params: url.searchParams,
+  })
+
+  if (!showDepositions) {
+    return redirect('/404')
+  }
+
+  const id = params.id ? +params.id : NaN
+  const page = +(url.searchParams.get(QueryParams.Page) ?? '1')
+  const sort = (url.searchParams.get('sort') ?? undefined) as
+    | CellHeaderDirection
+    | undefined
+
+  if (Number.isNaN(+id)) {
+    throw new Response(null, {
+      status: 400,
+      statusText: 'ID is not defined',
+    })
+  }
+
+  let orderBy: Order_By | null = null
+
+  if (sort) {
+    orderBy = sort === 'asc' ? Order_By.Asc : Order_By.Desc
+  }
+
+  const { data } = await getDepositionById({
+    id,
+    orderBy,
+    page,
+    client: apolloClient,
+    params: url.searchParams,
+  })
+
+  if (data.deposition === null) {
+    throw new Response(null, {
+      status: 404,
+      statusText: `Deposition with ID ${id} not found`,
+    })
+  }
+
+  return json(data)
+}
+
+export default function DatasetByIdPage() {
+  const { deposition } = useDepositionById()
+  const { t } = useI18n()
+
+  return (
+    <TablePageLayout
+      title={t('depositionData')}
+      type={t('datasets')}
+      filteredCount={
+        deposition.filtered_datasets_aggregate.aggregate?.count ?? 0
+      }
+      header={<DepositionHeader />}
+      table={<DatasetsTable />}
+      totalCount={deposition.datasets_aggregate.aggregate?.count ?? 0}
+    />
+  )
+}
diff --git a/frontend/packages/data-portal/app/types/utils.ts b/frontend/packages/data-portal/app/types/utils.ts
new file mode 100644
index 000000000..aabab7d8c
--- /dev/null
+++ b/frontend/packages/data-portal/app/types/utils.ts
@@ -0,0 +1 @@
+export type NonUndefined<T> = T extends undefined ? never : T
diff --git a/frontend/packages/data-portal/public/locales/en/translation.json b/frontend/packages/data-portal/public/locales/en/translation.json
index efe2ce607..6cb85582e 100644
--- a/frontend/packages/data-portal/public/locales/en/translation.json
+++ b/frontend/packages/data-portal/public/locales/en/translation.json
@@ -18,6 +18,7 @@
   "alignmentFile": "Alignment File",
   "all": "All",
   "allDatasets": "All Datasets",
+  "allDepositions": "All Depositions",
   "annotatedObjects": "Annotated Objects",
   "annotationAuthor": "Annotation Author",
   "annotationAuthors": "Annotation Authors",
@@ -26,6 +27,7 @@
   "annotationId": "Annotation ID",
   "annotationMetadata": "Annotation Metadata",
   "annotationMethod": "Annotation Method",
+  "annotationMethodsSummary": "Annotation Methods Summary",
   "annotationObject": "Annotation Object",
   "annotationOverview": "Annotation Overview",
   "annotationSoftware": "Annotation Software",
@@ -98,9 +100,13 @@
   "datasets": "Datasets",
   "datasetsTab": "Datasets {{count}}",
   "dataSummary": "Data Summary",
+  "deposition": "Deposition",
+  "depositionData": "Deposition Data",
   "depositionDate": "Deposition Date",
   "depositionId": "Deposition ID",
   "depositionName": "Deposition Name",
+  "depositionOnly": "Deposition only",
+  "depositionOverview": "Deposition Overview",
   "depositions": "Depositions",
   "depositionsTab": "Depositions {{count}}",
   "description": "Description",
@@ -187,6 +193,7 @@
   "manual": "Manual",
   "meetsAll": "Meets all",
   "metadata": "Metadata",
+  "methodLinks": "Method Links",
   "methodType": "Method Type",
   "methodTypeAutomated": "<semibold>Automated:</semibold> Annotations were generated using automated tools or algorithms without supervision.",
   "methodTypeHybrid": "<semibold>Hybrid:</semibold> Annotations were generated using a combination of automated and manual methods.",
@@ -194,6 +201,7 @@
   "methodTypeManual": "<semibold>Manual:</semibold> Annotations were created by hand.",
   "microscopeManufacturer": "Microscope Manufacturer",
   "microscopeModel": "Microscope model",
+  "modelWeights": "Model Weights",
   "moderate": "Moderate",
   "moreInfo": "More Info",
   "moreInfoComingFall2024": "More info coming in Fall 2024",
@@ -225,6 +233,7 @@
   "organismName": "Organism Name",
   "organizers": "Organizers",
   "orientedPoint": "Oriented Point",
+  "other": "Other",
   "otherSetup": "Other Setup",
   "participateInOurCompetition": "Participate in our ML competition",
   "participateInOurCompetitionCTA": "Develop a ML model for annotating subcellular structures and proteins in CryoET data.",
@@ -265,7 +274,8 @@
   "runOverview": "Run Overview",
   "runs": "Runs",
   "runsTab": "Runs {{count}}",
-  "runsTooltip": "<semibold>Run:</semibold> A tomography run is a collection of all data and annotations related to one physical location in a biological specimen. <url to='/faq?accordion=data-schema'>Learn More</url>",
+  "runsTooltip": "<semibold>Run:</semibold> A tomography run is a collection of all data and annotations related to one physical location in a biological specimen. <url to='/faq?accordion=data-schema' target='_blank' rel='noreferrer'>Learn More</url>",
+  "runsTooltipDepositionSubtext": "Count only shows the number of runs containing deposition data. <urlNoColor to='/' variant='dashed-underlined'>Learn more about depositions in the portal</urlNoColor>.",
   "sampleAndExperimentConditions": "Sample and Experiment Conditions",
   "samplePreparation": "Sample Preparation",
   "sampleType": "Sample Type",
@@ -276,10 +286,12 @@
   "selectDownloadMethod": "Select Download Method",
   "selectSaveDestination": "Select Save Destination",
   "seriesIsAligned": "Series is Aligned",
-  "showLess": "Show Less",
+  "showLess": "Show less",
+  "showMore": "Show {{count}} more",
   "size": "Size",
   "smallestAvailableVoxelSpacing": "Smallest Available Voxel Spacing",
   "somethingWentWrong": "Something went wrong",
+  "sourceCode": "Source Code",
   "species": "Species",
   "sphericalAberrationConstant": "Spherical Aberration Constant",
   "sponsoredBy": "Sponsored By",
@@ -288,6 +300,7 @@
   "submitFeedback": "Submit Feedback",
   "surveyBanner": "Share first impressions, or sign up for invites to future feedback activities in <url to='$t(surveyLink)'>this short form</url>.",
   "surveyLink": "https://airtable.com/apppmytRJXoXYTO9w/shrjmV9knAC7E7VVM?prefill_Event=Banner&hide_Event=true",
+  "symbolPeriod": ".",
   "tellUsMore": "Tell us More",
   "terms": "Terms",
   "termsOfUse": "Terms of Use",
@@ -303,7 +316,7 @@
   "tiltSeriesAlignment": "Tilt Series Alignment",
   "tiltSeriesMetadata": "Tilt Series Metadata",
   "tiltSeriesQualityScore": "Tilt Series Quality Score",
-  "tiltSeriesTooltip": "<semibold>Tilt Series Quality:</semibold> Dataset author’s assessment of tilt series quality. Score ranges 1-5, with 5 being best. <url to='/faq?accordion=tilt-series'>Learn More</url>",
+  "tiltSeriesTooltip": "<semibold>Tilt Series Quality:</semibold> Dataset author's assessment of tilt series quality. Score ranges 1-5, with 5 being best. <url to='/faq?accordion=tilt-series'>Learn More</url>",
   "tiltStep": "Tilt Step",
   "tiltingScheme": "Tilting Scheme",
   "tissueName": "Tissue Name",
@@ -338,6 +351,8 @@
   "viewDatasetsCta": "Find and visualize cryoET datasets in the portal and download to use for your work.",
   "viewTomogram": "View Tomogram",
   "voxelSpacingId": "Voxel Spacing ID",
+  "website": "Website",
+  "withDepositionData": "With deposition data",
   "yes": "Yes",
   "youMustHaveCliInstalled": "You must have AWS CLI installed. <url to='$t(awsCliLink)'>How to Install AWS CLI.</url>",
   "youMustHaveCurlInstalled": "You must have cURL installed. <url to='$t(curlSetupLink)'>How to Install cURL</url>",