diff --git a/src/app/(main)/doi.org/[...doi]/Content.tsx b/src/app/(main)/doi.org/[...doi]/Content.tsx
index fdb4cc2b..83f75a98 100644
--- a/src/app/(main)/doi.org/[...doi]/Content.tsx
+++ b/src/app/(main)/doi.org/[...doi]/Content.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 
@@ -11,9 +10,9 @@ import TitleComponent from 'src/components/Title/Title'
 import Claim from 'src/components/Claim/Claim'
 import CiteAs from 'src/components/CiteAs/CiteAs'
 import DownloadMetadata from 'src/components/DownloadMetadata/DownloadMetadata'
-// import DownloadReports from 'src/components/DownloadReports/DownloadReports'
 import Work from 'src/components/Work/Work'
 import ExportMetadata from 'src/components/DownloadMetadata/ExportMetadata'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   doi: string
@@ -24,13 +23,14 @@ export default async function Content(props: Props) {
 
   const { data, error } = await fetchDoi(doi)
 
-  if (error) return (
-    <Col md={{ span: 9, offset: 3 }}>
-      <Error title="An error occured." message={error.message} />
-    </Col>
-  )
+  if (error)
+    return (
+      <CommonsLayout>
+        <Error title="An error occured." message={error.message} />
+      </CommonsLayout>
+    )
 
-  const work = data?.work || {} as WorkType
+  const work = data?.work || ({} as WorkType)
 
   const title = work.titles[0]?.title || ''
   const handleUrl =
@@ -39,46 +39,41 @@ export default async function Content(props: Props) {
       : 'https://doi.org/' + work.doi
 
   return (
-    <Container fluid>
-      <Row className="mb-4">
-        <Col md={{ offset: 3 }}>
-          <TitleComponent title={title} titleLink={handleUrl} link={'https://doi.org/' + work.doi} rights={work.rights} />
-        </Col>
-      </Row>
+    <>
+      <CommonsLayout className="mb-4">
+        <TitleComponent
+          title={title}
+          titleLink={handleUrl}
+          link={'https://doi.org/' + work.doi}
+          rights={work.rights}
+        />
+      </CommonsLayout>
 
-      <Row>
-        <Col md={3} className='pe-5'>
-          <Row className="mb-2 pb-4">
-            <Col xs={12}>
-              <DownloadMetadata modalContent={<ExportMetadata doi={work} />} />
-            </Col>
-            {work.registrationAgency.id == "datacite" && (
-              <Col xs={12} className="mt-3 mb-3">
-                <Claim doi_id={work.doi} />
+      <CommonsLayout
+        sidebarClassName="pe-5"
+        mainClassName="px-0"
+        sidebar={
+          <>
+            <Row className="mb-2 pb-4">
+              <Col xs={12}>
+                <DownloadMetadata
+                  modalContent={<ExportMetadata doi={work} />}
+                />
               </Col>
-            )}
-          </Row>
-          <Row className="mb-2 pb-4">
-            <CiteAs doi={work} />
-          </Row>
-          {/* <Row className="mb-2 pb-4"> */}
-          {/*   {!isBot && <DownloadReports */}
-          {/*     links={[ */}
-          {/*       { */}
-          {/*         title: 'Related Works (CSV)', */}
-          {/*         helpText: `Includes descriptions and formatted citations in APA style for up to 200 DOIs associated with this ${isProject(work) ? 'project' : 'work'}.`, */}
-          {/*         type: 'doi/related-works', */}
-          {/*       } */}
-          {/*     ]} */}
-          {/*     variables={{ id: doi }} */}
-          {/*   />} */}
-          {/* </Row> */}
-        </Col>
-
-        <Col md={9} className="px-0">
-          <Work doi={work} />
-        </Col>
-      </Row>
-    </Container>
+              {work.registrationAgency.id == 'datacite' && (
+                <Col xs={12} className="mt-3 mb-3">
+                  <Claim doi_id={work.doi} />
+                </Col>
+              )}
+            </Row>
+            <Row className="mb-2 pb-4">
+              <CiteAs doi={work} />
+            </Row>
+          </>
+        }
+      >
+        <Work doi={work} />
+      </CommonsLayout>
+    </>
   )
 }
diff --git a/src/app/(main)/doi.org/[...doi]/RelatedContent.tsx b/src/app/(main)/doi.org/[...doi]/RelatedContent.tsx
index 543cdd76..bf40ab65 100644
--- a/src/app/(main)/doi.org/[...doi]/RelatedContent.tsx
+++ b/src/app/(main)/doi.org/[...doi]/RelatedContent.tsx
@@ -3,8 +3,8 @@
 import React from 'react'
 import { useParams, useSearchParams } from 'next/navigation'
 import Container from 'react-bootstrap/Container'
-import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 
 import CommonsError from 'src/components/Error/Error'
 import Loading from 'src/components/Loading/Loading'
@@ -12,78 +12,91 @@ import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
 import SearchBox from 'src/components/SearchBox/SearchBox'
 import mapSearchparams from './mapSearchParams'
 import { useRelatedContentManager } from 'src/data/managers/RelatedContentManager'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 function getQueryVariables(doi: string, searchParams: URLSearchParams) {
-  const { variables, connectionType } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
+  const { variables, connectionType } = mapSearchparams(
+    Object.fromEntries(searchParams.entries()) as any
+  )
   return { relatedDoi: doi, ...variables, connectionType }
 }
 
 export default function RelatedContent() {
-  
   const doiParams = useParams().doi as string[]
   const doi = decodeURIComponent(doiParams.join('/'))
   const searchParams = useSearchParams()
-  
+
   const vars = getQueryVariables(doi, searchParams)
   const manager = useRelatedContentManager(doi, vars)
 
-  if (manager.isLoading) return <Row><Loading /></Row>
+  if (manager.isLoading)
+    return (
+      <Row>
+        <Loading />
+      </Row>
+    )
 
   if (manager.hasError)
-    return <Row>
-      <Col md={{ offset: 3 }} className="panel panel-transparent">
-        <CommonsError title="An error occurred loading related content." message={manager.errorMessage} />
-      </Col>
-    </Row>
+    return (
+      <CommonsLayout mainClassName="panel panel-transparent">
+        <CommonsError
+          title="An error occurred loading related content."
+          message={manager.errorMessage}
+        />
+      </CommonsLayout>
+    )
 
-  if (!manager.hasData || !manager.hasAnyRelatedWorks) return (
-    <Container fluid>
-      <Row>
-        <Col md={{ offset: 3 }}>
-          <h3 className="member-results" id="title">Related Works</h3>
-        </Col>
-      </Row>
-      <Row>
-        <Col md={{ offset: 3 }} className="panel panel-transparent">
+  if (!manager.hasData || !manager.hasAnyRelatedWorks)
+    return (
+      <>
+        <CommonsLayout>
+          <h3 className="member-results" id="title">
+            Related Works
+          </h3>
+        </CommonsLayout>
+        <CommonsLayout mainClassName="panel panel-transparent">
           <p>No related works found for this DOI.</p>
-        </Col>
-      </Row>
-    </Container>
-  )
+        </CommonsLayout>
+      </>
+    )
 
   const { works, title: displayedConnectionTitle } = manager.selectedContent
   const { hasPagination, hasNextPage, endCursor } = manager.pagination
   const url = '/doi.org/' + doi + '/'
   return (
     <Container fluid>
-      <Row>
-        <Col md={3} className="d-none d-md-block">
-        </Col>
-        <Col md={9}>
-          <Row className="border-bottom ms-1 mb-3">
-            <Col className="ps-0"><h3 className="member-results border-0 mb-0" id="title">Related Works</h3></Col>
-            <Col xs="auto"><SortBy /></Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <WorksListing
-          works={works}
-          loading={manager.isLoading}
-          loadingFacets={manager.facetsAreLoading || manager.connectionCountsLoading}
-          connectionTypesCounts={manager.connectionTypeCounts}
-          showAnalytics={!manager.facetsAreLoading}
-          showSankey={manager.showSankey}
-          sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
-          showClaimStatus={true}
-          hasPagination={hasPagination}
-          hasNextPage={hasNextPage}
-          model={'doi'}
-          url={url + '?'}
-          endCursor={endCursor}
-          searchBox={<SearchBox path={url} placeholder="Search within these works..." />}
-        />
-      </Row>
+      <CommonsLayout fluid={false}>
+        <Row className="border-bottom ms-1 mb-3">
+          <Col className="ps-0">
+            <h3 className="member-results border-0 mb-0" id="title">
+              Related Works
+            </h3>
+          </Col>
+          <Col xs="auto">
+            <SortBy />
+          </Col>
+        </Row>
+      </CommonsLayout>
+      <WorksListing
+        works={works}
+        loading={manager.isLoading}
+        loadingFacets={
+          manager.facetsAreLoading || manager.connectionCountsLoading
+        }
+        connectionTypesCounts={manager.connectionTypeCounts}
+        showAnalytics={!manager.facetsAreLoading}
+        showSankey={manager.showSankey}
+        sankeyTitle={`Contributions to ${displayedConnectionTitle}`}
+        showClaimStatus={true}
+        hasPagination={hasPagination}
+        hasNextPage={hasNextPage}
+        model={'doi'}
+        url={url + '?'}
+        endCursor={endCursor}
+        searchBox={
+          <SearchBox path={url} placeholder="Search within these works..." />
+        }
+      />
     </Container>
   )
 }
diff --git a/src/app/(main)/orcid.org/[orcid]/Content.tsx b/src/app/(main)/orcid.org/[orcid]/Content.tsx
index a011ae9b..64cec2c5 100644
--- a/src/app/(main)/orcid.org/[orcid]/Content.tsx
+++ b/src/app/(main)/orcid.org/[orcid]/Content.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import Container from 'react-bootstrap/Container'
-import Row from 'react-bootstrap/Row'
-import Col from 'react-bootstrap/Col'
 
 import { Person as PersonType } from 'src/data/types'
 import { fetchPerson } from 'src/data/queries/personQuery'
 
 import Error from 'src/components/Error/Error'
 import Person from 'src/components/Person/Person'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   orcid: string
@@ -19,21 +17,18 @@ export default async function Content(props: Props) {
 
   const { data, error } = await fetchPerson(orcid)
 
-  if (error) return (
-    <Col md={{ span: 9, offset: 3 }}>
-      <Error title="An error occured." message={error.message} />
-    </Col>
-  )
+  if (error)
+    return (
+      <CommonsLayout>
+        <Error title="An error occured." message={error.message} />
+      </CommonsLayout>
+    )
 
-  const person = data?.person || {} as PersonType
+  const person = data?.person || ({} as PersonType)
 
   return (
-    <Container fluid>
-      <Row>
-        <Col md={{ span: 9, offset: 3 }}>
-          <Person person={person} />
-        </Col>
-      </Row>
-    </Container>
+    <CommonsLayout>
+      <Person person={person} />
+    </CommonsLayout>
   )
 }
diff --git a/src/app/(main)/orcid.org/[orcid]/RelatedContent.tsx b/src/app/(main)/orcid.org/[orcid]/RelatedContent.tsx
index dbe96120..3868b04d 100644
--- a/src/app/(main)/orcid.org/[orcid]/RelatedContent.tsx
+++ b/src/app/(main)/orcid.org/[orcid]/RelatedContent.tsx
@@ -11,9 +11,10 @@ import { usePersonRelatedContentQuery } from 'src/data/queries/personRelatedCont
 import Error from 'src/components/Error/Error'
 import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
 import SearchBox from 'src/components/SearchBox/SearchBox'
-import { pluralize } from 'src/utils/helpers';
+import { pluralize } from 'src/utils/helpers'
 import { useParams, useSearchParams } from 'next/navigation'
 import mapSearchparams from './mapSearchParams'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   isBot?: boolean
@@ -24,7 +25,9 @@ export default function RelatedContent(props: Props) {
   const orcid = useParams().orcid as string
 
   const searchParams = useSearchParams()
-  const { variables } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
+  const { variables } = mapSearchparams(
+    Object.fromEntries(searchParams.entries()) as any
+  )
 
   const vars = { userId: orcid, ...variables }
 
@@ -32,14 +35,22 @@ export default function RelatedContent(props: Props) {
 
   if (isBot) return null
 
-  if (loading) return <Row><Loading /></Row>
+  if (loading)
+    return (
+      <Row>
+        <Loading />
+      </Row>
+    )
 
   if (error)
-    return <Row>
-      <Col md={{ offset: 3 }} className="panel panel-transparent">
-        <Error title="An error occured loading related content." message={error.message} />
-      </Col>
-    </Row>
+    return (
+      <CommonsLayout mainClassName="panel panel-transparent">
+        <Error
+          title="An error occured loading related content."
+          message={error.message}
+        />
+      </CommonsLayout>
+    )
 
   if (!data) return
 
@@ -48,33 +59,37 @@ export default function RelatedContent(props: Props) {
   const hasNextPage = relatedWorks.pageInfo
     ? relatedWorks.pageInfo.hasNextPage
     : false
-  const endCursor = relatedWorks.pageInfo
-    ? relatedWorks.pageInfo.endCursor
-    : ''
+  const endCursor = relatedWorks.pageInfo ? relatedWorks.pageInfo.endCursor : ''
   const url = '/orcid.org/' + orcid + '/'
 
-  return (<Container fluid>
-    <Row className='mt-5'>
-      <Col md={3} className="d-none d-md-block">
-      </Col>
-      <Col md={9}>
+  return (
+    <Container fluid>
+      <CommonsLayout className="mt-5" fluid={false}>
         <Row className="border-bottom ms-1 mb-3">
-          <Col className="ps-0"><h3 className="member-results border-0 mb-0">{pluralize(relatedWorks.totalCount, 'Work')}</h3></Col>
-          <Col xs="auto"><SortBy /></Col>
+          <Col className="ps-0">
+            <h3 className="member-results border-0 mb-0">
+              {pluralize(relatedWorks.totalCount, 'Work')}
+            </h3>
+          </Col>
+          <Col xs="auto">
+            <SortBy />
+          </Col>
         </Row>
-      </Col>
-    </Row>
-    <WorksListing
-      works={relatedWorks}
-      loading={loading}
-      showAnalytics={true}
-      showClaimStatus={true}
-      hasPagination={relatedWorks.totalCount > 25}
-      hasNextPage={hasNextPage}
-      model={'person'}
-      url={url + '?'}
-      endCursor={endCursor}
-      searchBox={<SearchBox path={url} placeholder="Search within these works..." />}
-    />
-  </Container>)
+      </CommonsLayout>
+      <WorksListing
+        works={relatedWorks}
+        loading={loading}
+        showAnalytics={true}
+        showClaimStatus={true}
+        hasPagination={relatedWorks.totalCount > 25}
+        hasNextPage={hasNextPage}
+        model={'person'}
+        url={url + '?'}
+        endCursor={endCursor}
+        searchBox={
+          <SearchBox path={url} placeholder="Search within these works..." />
+        }
+      />
+    </Container>
+  )
 }
diff --git a/src/app/(main)/repositories/[...repoid]/Content.tsx b/src/app/(main)/repositories/[...repoid]/Content.tsx
index 5a4b375d..2c7d8ae2 100644
--- a/src/app/(main)/repositories/[...repoid]/Content.tsx
+++ b/src/app/(main)/repositories/[...repoid]/Content.tsx
@@ -1,14 +1,13 @@
 import React from 'react'
-import Row from 'react-bootstrap/Row'
-import Col from 'react-bootstrap/Col'
 
 import { Repository as RepositoryType } from 'src/data/types'
-import { fetchRepository, QueryVar } from 'src/data/queries/repositoryQuery';
+import { fetchRepository, QueryVar } from 'src/data/queries/repositoryQuery'
 
 import Error from 'src/components/Error/Error'
 import Title from 'src/components/Title/Title'
 import { RepositorySidebar } from 'src/components/RepositoryDetail/RepositorySidebar'
 import { RepositoryDetail } from 'src/components/RepositoryDetail/RepositoryDetail'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   variables: QueryVar
@@ -20,29 +19,36 @@ export default async function Content(props: Props) {
 
   const { data, error } = await fetchRepository(variables.id)
 
-  if (error) return (
-    <Col md={{ span: 9, offset: 3 }}>
-      <Error title="An error occured." message={error.message} />
-    </Col>
-  )
-
-  const repository = data?.repository || {} as RepositoryType
-
-
-  return <>
-    <Row className="mb-4">
-    </Row>
-
-    <Row>
-      <Col md={3}>
-        <h2 className="visually-hidden">Repository Sidebar</h2>
-        <RepositorySidebar repo={repository} />
-      </Col>
-      <Col md={9}>
+  if (error)
+    return (
+      <CommonsLayout>
+        <Error title="An error occured." message={error.message} />
+      </CommonsLayout>
+    )
+
+  const repository = data?.repository || ({} as RepositoryType)
+
+  return (
+    <>
+      <CommonsLayout className="mb-4" />
+
+      <CommonsLayout
+        sidebarClassName=""
+        sidebar={
+          <>
+            <h2 className="visually-hidden">Repository Sidebar</h2>
+            <RepositorySidebar repo={repository} />
+          </>
+        }
+      >
         <h2 className="visually-hidden">Repository Details</h2>
-        <Title title={repository.name} titleLink={repository.url} offset={false} />
+        <Title
+          title={repository.name}
+          titleLink={repository.url}
+          offset={false}
+        />
         <RepositoryDetail repo={repository} />
-      </Col>
-    </Row>
-  </>
+      </CommonsLayout>
+    </>
+  )
 }
diff --git a/src/app/(main)/repositories/[...repoid]/RelatedContent.tsx b/src/app/(main)/repositories/[...repoid]/RelatedContent.tsx
index 8728253d..9730afa0 100644
--- a/src/app/(main)/repositories/[...repoid]/RelatedContent.tsx
+++ b/src/app/(main)/repositories/[...repoid]/RelatedContent.tsx
@@ -2,19 +2,20 @@
 
 import React from 'react'
 import Container from 'react-bootstrap/Container'
-import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 import Loading from 'src/components/Loading/Loading'
 
 import { useRepositoryRelatedContentQuery } from 'src/data/queries/repositoryRelatedContentQuery'
 
 import Error from 'src/components/Error/Error'
 import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
-import { pluralize } from 'src/utils/helpers';
-import { useSearchParams } from 'next/navigation';
-import mapSearchparams from './mapSearchParams';
+import { pluralize } from 'src/utils/helpers'
+import { useSearchParams } from 'next/navigation'
+import mapSearchparams from './mapSearchParams'
 import { Repository } from 'src/data/types'
 import SearchBox from 'src/components/SearchBox/SearchBox'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   repository: Repository
@@ -24,47 +25,56 @@ export default function RelatedContent({ repository }: Props) {
   const clientId = repository.clientId
 
   const searchParams = useSearchParams()
-  const { variables } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
+  const { variables } = mapSearchparams(
+    Object.fromEntries(searchParams.entries()) as any
+  )
 
   const vars = { clientId, ...variables }
-  const { loading, data, error, facetsLoading } = useRepositoryRelatedContentQuery(vars)
+  const { loading, data, error, facetsLoading } =
+    useRepositoryRelatedContentQuery(vars)
 
-  if (loading) return <Row><Loading /></Row>
+  if (loading)
+    return (
+      <Row>
+        <Loading />
+      </Row>
+    )
 
   if (error)
-    return <Row>
-      <Col md={{ offset: 3 }} className="panel panel-transparent">
-        <Error title="An error occured loading related content." message={error.message} />
-      </Col>
-    </Row>
+    return (
+      <CommonsLayout mainClassName="panel panel-transparent">
+        <Error
+          title="An error occured loading related content."
+          message={error.message}
+        />
+      </CommonsLayout>
+    )
 
   if (!data) return
 
   const relatedWorks = data.works
 
   const hasNextPage = relatedWorks.totalCount > 25
-  const endCursor = relatedWorks.pageInfo
-    ? relatedWorks.pageInfo.endCursor
-    : ''
+  const endCursor = relatedWorks.pageInfo ? relatedWorks.pageInfo.endCursor : ''
 
   const totalCount = relatedWorks.totalCount
   const url = '/repositories/' + clientId + '/'
 
   return (
     <Container fluid>
-      <Row className="mt-5">
-        <Col md={3} className="d-none d-md-block">
-        </Col>
-        <Col md={9}>
-          <Row className="border-bottom ms-1 mb-3">
-            <Col className="ps-0">
-              <h2 className="visually-hidden">Related Works Results Summary</h2>
-              <h3 className="member-results border-0 mb-0">{pluralize(totalCount, 'Work')}</h3>
-            </Col>
-            <Col xs="auto"><SortBy /></Col>
-          </Row>
-        </Col>
-      </Row>
+      <CommonsLayout className="mt-5" fluid={false}>
+        <Row className="border-bottom ms-1 mb-3">
+          <Col className="ps-0">
+            <h2 className="visually-hidden">Related Works Results Summary</h2>
+            <h3 className="member-results border-0 mb-0">
+              {pluralize(totalCount, 'Work')}
+            </h3>
+          </Col>
+          <Col xs="auto">
+            <SortBy />
+          </Col>
+        </Row>
+      </CommonsLayout>
       <WorksListing
         works={relatedWorks}
         loading={loading}
@@ -77,7 +87,9 @@ export default function RelatedContent({ repository }: Props) {
         url={url + '?'}
         endCursor={endCursor}
         show={{ all: true }}
-        searchBox={<SearchBox path={url} placeholder="Search within these works..." />}
+        searchBox={
+          <SearchBox path={url} placeholder="Search within these works..." />
+        }
       />
     </Container>
   )
diff --git a/src/app/(main)/ror.org/[rorid]/Content.tsx b/src/app/(main)/ror.org/[rorid]/Content.tsx
index 03e1c084..7881a17a 100644
--- a/src/app/(main)/ror.org/[rorid]/Content.tsx
+++ b/src/app/(main)/ror.org/[rorid]/Content.tsx
@@ -1,11 +1,8 @@
 'use client'
 import React from 'react'
-import Container from 'react-bootstrap/Container'
-import Row from 'react-bootstrap/Row'
-import Col from 'react-bootstrap/Col'
 
 import type { MinimalOrganization as OrganizationType } from 'src/data/queries/searchOrganizationQuery'
-import { useROROrganization } from 'src/data/queries/searchOrganizationQuery';
+import { useROROrganization } from 'src/data/queries/searchOrganizationQuery'
 
 import Error from 'src/components/Error/Error'
 import Title from 'src/components/Title/Title'
@@ -13,6 +10,7 @@ import DownloadReports from 'src/components/DownloadReports/DownloadReports'
 import OrganizationMetadata from 'src/components/OrganizationMetadata/OrganizationMetadata'
 import SummarySearchMetrics from 'src/components/SummarySearchMetrics/SummarySearchMetrics'
 import Loading from 'src/components/Loading/Loading'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   rorid: string
@@ -22,52 +20,58 @@ export default function Content(props: Props) {
   const { rorid: rorId } = props
   const { data, error, loading } = useROROrganization(rorId)
   if (loading) return <Loading />
-  const organization = data?.organization || {} as OrganizationType
+  const organization = data?.organization || ({} as OrganizationType)
 
-  if (error || !organization) return (
-    <Col md={{ span: 9, offset: 3 }}>
-      <Error title="An error occured fetching the Organization." />
-    </Col>
-  )
+  if (error || !organization)
+    return (
+      <CommonsLayout>
+        <Error title="An error occured fetching the Organization." />
+      </CommonsLayout>
+    )
 
   return (
     <>
-        <Container fluid>
-          <Row className="mb-4">
-            <Col md={{ offset: 3 }}>
-              <Title title={organization.name} titleLink={organization.id} link={organization.id} />
-            </Col>
-          </Row>
+      <CommonsLayout className="mb-4">
+        <Title
+          title={organization.name}
+          titleLink={organization.id}
+          link={organization.id}
+        />
+      </CommonsLayout>
 
-          <Row>
-            <Col md={3} className="pe-4">
-              <DownloadReports
-                links={[
-                  {
-                    title: 'Related Works (CSV)',
-                    helpText: 'Includes descriptions and formatted citations in APA style for up to 200 DOIs associated with this organization.',
-                    type: 'ror/related-works',
-                  },
-                  {
-                    title: 'Funders (CSV)',
-                    helpText: 'Includes up to 200 funders associated with related works.',
-                    type: 'ror/funders',
-                  }
-                ]}
-                variables={{ rorId }}
-              />
-            </Col>
-            <Col md={9} className="px-0">
-              <SummarySearchMetrics rorId={organization.id} />
-              {organization.inceptionYear && (
-                <p className="mb-3">Founded {organization.inceptionYear}</p>
-              )}
-              <OrganizationMetadata metadata={organization}
-                linkToExternal={false}
-                showTitle={false} />
-            </Col>
-          </Row>
-        </Container>
+      <CommonsLayout
+        sidebarClassName="pe-4"
+        mainClassName="px-0"
+        sidebar={
+          <DownloadReports
+            links={[
+              {
+                title: 'Related Works (CSV)',
+                helpText:
+                  'Includes descriptions and formatted citations in APA style for up to 200 DOIs associated with this organization.',
+                type: 'ror/related-works'
+              },
+              {
+                title: 'Funders (CSV)',
+                helpText:
+                  'Includes up to 200 funders associated with related works.',
+                type: 'ror/funders'
+              }
+            ]}
+            variables={{ rorId }}
+          />
+        }
+      >
+        <SummarySearchMetrics rorId={organization.id} />
+        {organization.inceptionYear && (
+          <p className="mb-3">Founded {organization.inceptionYear}</p>
+        )}
+        <OrganizationMetadata
+          metadata={organization}
+          linkToExternal={false}
+          showTitle={false}
+        />
+      </CommonsLayout>
     </>
   )
 }
diff --git a/src/app/(main)/ror.org/[rorid]/RelatedContent.tsx b/src/app/(main)/ror.org/[rorid]/RelatedContent.tsx
index d2e7b2d8..5a0a0ed8 100644
--- a/src/app/(main)/ror.org/[rorid]/RelatedContent.tsx
+++ b/src/app/(main)/ror.org/[rorid]/RelatedContent.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react'
 import Container from 'react-bootstrap/Container'
-import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
 import Loading from 'src/components/Loading/Loading'
 import CommonsError from 'src/components/Error/Error'
 import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
@@ -12,40 +12,47 @@ import mapSearchparams from './mapSearchParams'
 import { useOrganizationRelatedContentManager } from 'src/data/managers/OrganizationRelatedContentManager'
 import SummarySearchMetrics from 'src/components/SummarySearchMetrics/SummarySearchMetrics'
 import SearchBox from 'src/components/SearchBox/SearchBox'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 export default function RelatedContent() {
   const rorId = useParams().rorid as string
   const searchParams = useSearchParams()
-  const { variables } = mapSearchparams(Object.fromEntries(searchParams.entries()) as any)
+  const { variables } = mapSearchparams(
+    Object.fromEntries(searchParams.entries()) as any
+  )
 
   const vars = { rorId, ...variables }
   const manager = useOrganizationRelatedContentManager(vars)
 
-  if (manager.isLoading) return <Row><Loading /></Row>
-
-  if (manager.hasError)
+  if (manager.isLoading)
     return (
       <Row>
-        <Col md={{ offset: 3 }} className="panel panel-transparent">
-          <CommonsError title="An error occurred loading related content." message={manager.errorMessage} />
-        </Col>
+        <Loading />
       </Row>
     )
 
+  if (manager.hasError)
+    return (
+      <CommonsLayout mainClassName="panel panel-transparent">
+        <CommonsError
+          title="An error occurred loading related content."
+          message={manager.errorMessage}
+        />
+      </CommonsLayout>
+    )
+
   if (!manager.hasData || !manager.hasAnyRelatedWorks)
     return (
-      <Container fluid>
-        <Row>
-          <Col md={{ offset: 3 }}>
-            <h3 className="member-results" id="title">Related Works</h3>
-          </Col>
-        </Row>
-        <Row>
-          <Col md={{ offset: 3 }} className="panel panel-transparent">
-            <p>No related works found for this organization.</p>
-          </Col>
-        </Row>
-      </Container>
+      <>
+        <CommonsLayout>
+          <h3 className="member-results" id="title">
+            Related Works
+          </h3>
+        </CommonsLayout>
+        <CommonsLayout mainClassName="panel panel-transparent">
+          <p>No related works found for this organization.</p>
+        </CommonsLayout>
+      </>
     )
 
   const { works } = manager.selectedContent
@@ -53,35 +60,39 @@ export default function RelatedContent() {
   const url = '/ror.org/' + vars.rorId + '/'
 
   return (
-    <Container fluid className="mt-5">
-      <Row>
-        <Col md={{ offset: 3 }} className="px-0">
-          <Row className="border-bottom ms-1 mb-3">
-            <Col className="ps-0"><h3 className="member-results border-0 mb-0">Related Works</h3></Col>
-            <Col xs="auto"><SortBy /></Col>
-          </Row>
-        </Col>
-      </Row>
-      <Row>
-        <WorksListing
-          works={works}
-          loading={manager.isLoading}
-          loadingFacets={manager.facetsAreLoading || manager.organizationCountsLoading}
-          organizationRelationTypeCounts={manager.organizationRelationTypeCounts}
-          showAnalytics={!manager.facetsAreLoading}
-          showClaimStatus={true}
-          hasPagination={hasPagination}
-          hasNextPage={hasNextPage}
-          model={'organization'}
-          url={url + '?'}
-          endCursor={endCursor}
-          searchBox={<SearchBox path={url} placeholder="Search within these works..." />}
-        >
-          <div className="mt-1 mb-5">
-            <SummarySearchMetrics {...vars} />
-          </div>
-        </WorksListing>
-      </Row>
+    <Container fluid>
+      <CommonsLayout className="mt-5" mainClassName="px-0" fluid={false}>
+        <Row className="border-bottom ms-1 mb-3">
+          <Col className="ps-0">
+            <h3 className="member-results border-0 mb-0">Related Works</h3>
+          </Col>
+          <Col xs="auto">
+            <SortBy />
+          </Col>
+        </Row>
+      </CommonsLayout>
+      <WorksListing
+        works={works}
+        loading={manager.isLoading}
+        loadingFacets={
+          manager.facetsAreLoading || manager.organizationCountsLoading
+        }
+        organizationRelationTypeCounts={manager.organizationRelationTypeCounts}
+        showAnalytics={!manager.facetsAreLoading}
+        showClaimStatus={true}
+        hasPagination={hasPagination}
+        hasNextPage={hasNextPage}
+        model={'organization'}
+        url={url + '?'}
+        endCursor={endCursor}
+        searchBox={
+          <SearchBox path={url} placeholder="Search within these works..." />
+        }
+      >
+        <div className="mt-1 mb-5">
+          <SummarySearchMetrics {...vars} />
+        </div>
+      </WorksListing>
     </Container>
   )
 }
diff --git a/src/components/CommonsLayout/CommonsLayout.test.tsx b/src/components/CommonsLayout/CommonsLayout.test.tsx
new file mode 100644
index 00000000..0047fb17
--- /dev/null
+++ b/src/components/CommonsLayout/CommonsLayout.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import { mount } from '@cypress/react'
+import CommonsLayout from './CommonsLayout'
+
+describe('CommonsLayout Component', () => {
+  it('sidebar mode renders a 3/9 column split in a fluid container', () => {
+    mount(
+      <CommonsLayout sidebar={<span id="sidebar">Sidebar</span>}>
+        <span id="main">Main</span>
+      </CommonsLayout>
+    )
+    cy.get('.container-fluid > .row > .col-md-3')
+      .should('contain', 'Sidebar')
+      .and('have.class', 'd-none')
+      .and('have.class', 'd-md-block')
+      .and('have.class', 'pe-4')
+    cy.get('.col-md-9').should('contain', 'Main').and('not.have.class', 'pe-4')
+  })
+
+  it('main-only mode renders a single offset column', () => {
+    mount(
+      <CommonsLayout>
+        <span id="main">Main</span>
+      </CommonsLayout>
+    )
+    cy.get('.container-fluid > .row > .col-md-9.offset-md-3')
+      .find('span#main')
+      .should('contain', 'Main')
+      .and('have.attr', 'id', 'main')
+    cy.get('.col-md-3').should('not.exist')
+  })
+
+  it('applies column class overrides and can omit the container', () => {
+    mount(
+      <CommonsLayout
+        fluid={false}
+        sidebar={<span>Sidebar</span>}
+        sidebarClassName="px-4"
+        mainClassName="px-0"
+      >
+        <span>Main</span>
+      </CommonsLayout>
+    )
+    cy.get('.container-fluid').should('not.exist')
+    cy.get('[data-cy-root] .row > .col-md-3')
+      .should('have.class', 'px-4')
+      .and('not.have.class', 'pe-4')
+    cy.get('.col-md-9').should('have.class', 'px-0')
+  })
+})
diff --git a/src/components/CommonsLayout/CommonsLayout.tsx b/src/components/CommonsLayout/CommonsLayout.tsx
new file mode 100644
index 00000000..65276e36
--- /dev/null
+++ b/src/components/CommonsLayout/CommonsLayout.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+
+interface Props {
+  /** Optional sidebar content. When omitted, children are rendered full-width, offset to the main column. */
+  sidebar?: React.ReactNode
+  /** Main content */
+  children?: React.ReactNode
+  /** Classes for the sidebar column. Override e.g. for 'pe-5' or 'px-4'. */
+  sidebarClassName?: string
+  /** Classes for the main column, e.g. 'px-0'. */
+  mainClassName?: string
+  /** Wrap the grid in a Bootstrap fluid container. */
+  fluid?: boolean
+  /** Optional class applied to the Row wrapper. */
+  className?: string
+}
+
+export default function CommonsLayout({
+  sidebar,
+  children,
+  sidebarClassName = 'd-none d-md-block pe-4',
+  mainClassName,
+  fluid = true,
+  className
+}: Props) {
+  const columns =
+    sidebar === undefined ? (
+      <Col md={{ span: 9, offset: 3 }} className={mainClassName}>
+        {children}
+      </Col>
+    ) : (
+      <>
+        <Col md={3} className={sidebarClassName}>
+          {sidebar}
+        </Col>
+        <Col md={9} className={mainClassName}>
+          {children}
+        </Col>
+      </>
+    )
+
+  const row = <Row className={className}>{columns}</Row>
+
+  return fluid ? <Container fluid>{row}</Container> : row
+}
diff --git a/src/components/SearchOrganization/SearchOrganization.tsx b/src/components/SearchOrganization/SearchOrganization.tsx
index 43b8edbf..710206bd 100644
--- a/src/components/SearchOrganization/SearchOrganization.tsx
+++ b/src/components/SearchOrganization/SearchOrganization.tsx
@@ -13,6 +13,7 @@ import Loading from 'src/components/Loading/Loading'
 import { QueryVar, useRORSearch } from 'src/data/queries/searchOrganizationQuery'
 import FacetList from 'src/components/FacetList/FacetList'
 import FacetListGroup from 'src/components/FacetList/FacetListGroup'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 type Props = {
   variables: QueryVar
@@ -25,11 +26,9 @@ export default function SearchOrganizations(props: Props) {
 
   const organizations = data?.organizations
   if (error || !organizations || organizations.nodes.length == 0) return (
-    <Row>
-      <Col md={{ span: 9, offset: 3 }}>
-        <NoResults />
-      </Col>
-    </Row>
+    <CommonsLayout>
+      <NoResults />
+    </CommonsLayout>
   )
 
   const renderResults = () => {
@@ -88,24 +87,24 @@ export default function SearchOrganizations(props: Props) {
   }
 
   return (<>
-    <Row>
+    <CommonsLayout>
       <h2 className="visually-hidden">Organization Results Summary</h2>
-      <Col md={{ span: 9, offset: 3 }}>
-        {organizations.totalCount > 0 && (
-          <h3 className="member-results">{pluralize(organizations.totalCount || 0, 'Organization')}</h3>
-        )}
-      </Col>
-    </Row>
-    <Row>
-      <Col md={3} className='px-4'>
-        <h2 className="visually-hidden">Organization Sidebar</h2>
-        <h3 className="visually-hidden">Organization Facets</h3>
-        {renderFacets()}
-      </Col>
-      <Col md={9}>
-        <h2 className="visually-hidden">Organization Listings</h2>
-        {renderResults()}
-      </Col>
-    </Row>
+      {organizations.totalCount > 0 && (
+        <h3 className="member-results">{pluralize(organizations.totalCount || 0, 'Organization')}</h3>
+      )}
+    </CommonsLayout>
+    <CommonsLayout
+      sidebarClassName='px-4'
+      sidebar={
+        <>
+          <h2 className="visually-hidden">Organization Sidebar</h2>
+          <h3 className="visually-hidden">Organization Facets</h3>
+          {renderFacets()}
+        </>
+      }
+    >
+      <h2 className="visually-hidden">Organization Listings</h2>
+      {renderResults()}
+    </CommonsLayout>
   </>)
 }
diff --git a/src/components/SearchPerson/SearchPerson.tsx b/src/components/SearchPerson/SearchPerson.tsx
index 9e5e7e22..1437f2f2 100644
--- a/src/components/SearchPerson/SearchPerson.tsx
+++ b/src/components/SearchPerson/SearchPerson.tsx
@@ -3,7 +3,6 @@
 import React from 'react'
 import Loading from 'src/components/Loading/Loading'
 import Row from 'react-bootstrap/Row'
-import Col from 'react-bootstrap/Col'
 import PersonMetadata from 'src/components/PersonMetadata/PersonMetadata'
 import Pager from 'src/components/Pager/Pager'
 import NoResults from 'src/components/NoResults/NoResults'
@@ -11,6 +10,7 @@ import NoResults from 'src/components/NoResults/NoResults'
 import { QueryVar, useSearchPersonQuery } from 'src/data/queries/searchPersonQuery'
 
 import { pluralize } from 'src/utils/helpers'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   variables: QueryVar
@@ -23,32 +23,30 @@ export default function SearchPerson(props: Props) {
 
   const people = data?.people
   if (error || !people || people.nodes.length == 0) return (
-    <Row>
-      <Col md={{ span: 9, offset: 3 }}>
-        <NoResults />
-      </Col>
-    </Row>
+    <CommonsLayout>
+      <NoResults />
+    </CommonsLayout>
   )
 
 
   return (<>
     <h2 className="visually-hidden">People Results</h2>
-    <Row><Col md={{ span: 9, offset: 3 }}>
+    <CommonsLayout>
       {people.nodes.length > 0 && (
         <h3 className="member-results">
           {pluralize(people.totalCount, 'Person', false, 'People')}
         </h3>
       )}
-    </Col></Row>
+    </CommonsLayout>
 
-    <Row><Col md={{ span: 9, offset: 3 }}>
+    <CommonsLayout>
       {people.nodes.map((item) => (
         <PersonMetadata metadata={item} url={'orcid.org?'} key={item.id} />
       ))}
-    </Col></Row>
+    </CommonsLayout>
 
 
-    <Row><Col md={{ span: 9, offset: 3 }}>
+    <CommonsLayout>
       {(people.totalCount || 0) > 25 && (
         <Pager
           url={'/orcid.org?'}
@@ -56,6 +54,6 @@ export default function SearchPerson(props: Props) {
           endCursor={data.people.pageInfo.endCursor || ''}
         />
       )}
-    </Col></Row>
+    </CommonsLayout>
   </>)
 }
diff --git a/src/components/SearchRepository/SearchRepository.tsx b/src/components/SearchRepository/SearchRepository.tsx
index 48a0aa5e..be040ed7 100644
--- a/src/components/SearchRepository/SearchRepository.tsx
+++ b/src/components/SearchRepository/SearchRepository.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React from 'react'
-import Container from 'react-bootstrap/Container'
 import Row from 'react-bootstrap/Row'
 import Col from 'react-bootstrap/Col'
 import Alert from 'react-bootstrap/Alert'
@@ -16,6 +15,7 @@ import RepositoryMetadata from 'src/components/RepositoryMetadata/RepositoryMeta
 
 import { QueryVar, useSearchRepositoryQuery } from 'src/data/queries/searchRepositoryQuery'
 import { pluralize } from 'src/utils/helpers'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 
 type Props = {
@@ -32,22 +32,22 @@ export default function SearchRepositories({ variables }: Props) {
   const repositories = data?.repositories
 
   if (error || !repositories || repositories.nodes.length === 0) return (
-    <Col md={{ span: 9, offset: 3 }}>
+    <CommonsLayout>
       <div className="alert-works">
         <Alert variant="warning">
           <p>No repositories found. Try a new search or explore generalist repositories such as:</p>
 
-          <ul>
-            <li><Link href="/repositories/dryad.dryad">Dryad</Link></li>
-            <li><Link href="/repositories/figshare.ars">Figshare</Link></li>
-            <li><Link href="/repositories/gdcc.harvard-dv">Harvard Dataverse</Link></li>
-            <li><Link href="/repositories/bl.mendeley">Mendeley Data</Link></li>
-            <li><Link href="/repositories/cos.osf">Open Science Framework</Link></li>
-            <li><Link href="/repositories/cern.zenodo">Zenodo</Link></li>
-          </ul>
+        <ul>
+          <li><Link href="/repositories/dryad.dryad">Dryad</Link></li>
+          <li><Link href="/repositories/figshare.ars">Figshare</Link></li>
+          <li><Link href="/repositories/gdcc.harvard-dv">Harvard Dataverse</Link></li>
+          <li><Link href="/repositories/bl.mendeley">Mendeley Data</Link></li>
+          <li><Link href="/repositories/cos.osf">Open Science Framework</Link></li>
+          <li><Link href="/repositories/cern.zenodo">Zenodo</Link></li>
+        </ul>
         </Alert>
       </div>
-    </Col>
+    </CommonsLayout>
   )
 
 
@@ -103,25 +103,25 @@ export default function SearchRepositories({ variables }: Props) {
     </>)
   }
 
-  return (<Container fluid>
-    <Row>
+  return (<>
+    <CommonsLayout>
       <h2 className="visually-hidden">Repositories Results Summary</h2>
-      <Col md={{ span: 9, offset: 3 }}>
-        {repositories.totalCount > 0 && (
-          <h3 className="member-results">{pluralize(repositories.totalCount || 0, 'Repository', false, 'Repositories')}</h3>
-        )}
-      </Col>
-    </Row>
-    <Row>
-      <Col md={3} className='pe-4'>
-        <h2 className="visually-hidden">Repositories Sidebar</h2>
-        <h3 className="visually-hidden">Repositories Facets</h3>
-        {renderFacets()}
-      </Col>
-      <Col md={9}>
-        <h2 className="visually-hidden">Repositories Listings</h2>
-        {renderResults()}
-      </Col>
-    </Row>
-  </Container>)
+      {repositories.totalCount > 0 && (
+        <h3 className="member-results">{pluralize(repositories.totalCount || 0, 'Repository', false, 'Repositories')}</h3>
+      )}
+    </CommonsLayout>
+    <CommonsLayout
+      sidebarClassName='pe-4'
+      sidebar={
+        <>
+          <h2 className="visually-hidden">Repositories Sidebar</h2>
+          <h3 className="visually-hidden">Repositories Facets</h3>
+          {renderFacets()}
+        </>
+      }
+    >
+      <h2 className="visually-hidden">Repositories Listings</h2>
+      {renderResults()}
+    </CommonsLayout>
+  </>)
 }
diff --git a/src/components/SearchWork/SearchWork.tsx b/src/components/SearchWork/SearchWork.tsx
index 78b290cb..797da20c 100644
--- a/src/components/SearchWork/SearchWork.tsx
+++ b/src/components/SearchWork/SearchWork.tsx
@@ -12,6 +12,7 @@ import { useSearchDoiFacetsQuery } from 'src/data/queries/searchDoiFacetsQuery'
 import NoResults from 'src/components/NoResults/NoResults'
 import WorksListing, { SortBy } from 'src/components/WorksListing/WorksListing'
 import { pluralize } from 'src/utils/helpers'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 interface Props {
   variables: QueryVar
@@ -24,29 +25,23 @@ export default function SearchWork(props: Props) {
   if (loading) return <Row><Loading /></Row>
 
   if (error) return (
-    <Row>
-      <Col md={{ span: 9, offset: 3 }}>
-        <NoResults />
-      </Col>
-    </Row>
+    <CommonsLayout>
+      <NoResults />
+    </CommonsLayout>
   )
 
   const works = { ...data?.works, ...facets.data?.works } as Works
 
   return (<>
-    <Row>
+    <CommonsLayout>
       <h2 className="visually-hidden">Works Results</h2>
-      <Col md={3} className="d-none d-md-block">
-      </Col>
-      <Col md={9}>
-        {works.totalCount > 0 && (
-          <Row className="border-bottom ms-1 mb-3">
-            <Col className="ps-0"><h3 className="member-results border-0 mb-0">{pluralize(works.totalCount, 'Work')}</h3></Col>
-            <Col xs="auto"><Suspense><SortBy /></Suspense></Col>
-          </Row>
-        )}
-      </Col>
-    </Row>
+      {works.totalCount > 0 && (
+        <Row className="border-bottom ms-1 mb-3">
+          <Col className="ps-0"><h3 className="member-results border-0 mb-0">{pluralize(works.totalCount, 'Work')}</h3></Col>
+          <Col xs="auto"><Suspense><SortBy /></Suspense></Col>
+        </Row>
+      )}
+    </CommonsLayout>
     <WorksListing
       works={works}
       loading={false}
diff --git a/src/components/WorksListing/WorksListing.tsx b/src/components/WorksListing/WorksListing.tsx
index d12db8c2..61d08663 100644
--- a/src/components/WorksListing/WorksListing.tsx
+++ b/src/components/WorksListing/WorksListing.tsx
@@ -11,6 +11,7 @@ import { ConnectionTypeCounts, OrganizationRelationTypeCounts, Works } from 'src
 import Loading from 'src/components/Loading/Loading'
 import LoadingFacetList from 'src/components/Loading/LoadingFacetList'
 import NoResults from 'src/components/NoResults/NoResults'
+import CommonsLayout from 'src/components/CommonsLayout/CommonsLayout'
 
 import Pager from 'src/components/Pager/Pager'
 import type { ShowCharts } from 'src/components/WorksDashboard/WorksDashboard'
@@ -129,17 +130,20 @@ export default function WorksListing({
     )
   }
 
+  const sidebar = (loadingFacets || organizationRelationCountsLoading)
+    ? <Row><LoadingFacetList count={4} numberOfLines={10} /></Row>
+    : renderFacets()
+
   return (
-    <Row>
-      <Col md={3} className={'d-none d-md-block' + (['doi.org/?'].includes(url) ? ' px-4' : ' pe-4')}>
-        {(loadingFacets || organizationRelationCountsLoading) ? <Row><LoadingFacetList count={4} numberOfLines={10} /></Row> : renderFacets()}
-      </Col>
-      <Col md={9}>
-        <h2 className="visually-hidden">Works Search Listing</h2>
-        {children}
-        {loading ? <Loading /> : renderWorks()}
-      </Col>
-    </Row>
+    <CommonsLayout
+      fluid={false}
+      sidebarClassName={'d-none d-md-block' + (['doi.org/?'].includes(url) ? ' px-4' : ' pe-4')}
+      sidebar={sidebar}
+    >
+      <h2 className="visually-hidden">Works Search Listing</h2>
+      {children}
+      {loading ? <Loading /> : renderWorks()}
+    </CommonsLayout>
   )
 }