diff --git a/src/apps/companies/__test__/router.test.js b/src/apps/companies/__test__/router.test.js
index 6f83484c85d..ea963b02f79 100644
--- a/src/apps/companies/__test__/router.test.js
+++ b/src/apps/companies/__test__/router.test.js
@@ -10,7 +10,6 @@ describe('Company router', () => {
       '/:companyId',
       '/:companyId/details',
       '/:companyId/hierarchies/subsidiaries/:subsidiaryCompanyId/add',
-      '/:companyId/contacts',
       '/:companyId/orders',
       '/:companyId/manage-company-list',
       '/:companyId/subsidiaries',
diff --git a/src/apps/companies/controllers/contacts.js b/src/apps/companies/controllers/contacts.js
deleted file mode 100644
index e7eb5d9006f..00000000000
--- a/src/apps/companies/controllers/contacts.js
+++ /dev/null
@@ -1,18 +0,0 @@
-function renderContacts(req, res) {
-  const { company, returnUrl, dnbRelatedCompaniesCount } = res.locals
-
-  res.locals.title = `Contacts - ${company.name} - Companies`
-
-  res.render('companies/views/contacts', {
-    props: {
-      companyId: company.id,
-      returnUrl,
-      dnbRelatedCompaniesCount,
-      localNavItems: res.locals.localNavItems,
-    },
-  })
-}
-
-module.exports = {
-  renderContacts,
-}
diff --git a/src/apps/companies/router.js b/src/apps/companies/router.js
index 008218b0f59..50c9ed5e7c4 100644
--- a/src/apps/companies/router.js
+++ b/src/apps/companies/router.js
@@ -14,7 +14,6 @@ const { renderDetails } = require('./controllers/details')
 
 const { renderOrders } = require('./controllers/orders')
 const { archiveCompany, unarchiveCompany } = require('./controllers/archive')
-const { renderContacts } = require('./controllers/contacts')
 const { renderSubsidiaries } = require('./controllers/subsidiaries')
 
 const {
@@ -83,8 +82,6 @@ router.get(urls.companies.details.route, renderDetails)
 
 router.get(urls.companies.hierarchies.subsidiaries.add.route, addSubsidiary)
 
-router.get(urls.companies.contacts.route, setReturnUrl, renderContacts)
-
 router.get(urls.companies.orders.route, setReturnUrl, renderOrders)
 router.use(
   urls.companies.investments.companyInvestment.route,
diff --git a/src/apps/companies/views/contacts.njk b/src/apps/companies/views/contacts.njk
deleted file mode 100644
index 762a1e53096..00000000000
--- a/src/apps/companies/views/contacts.njk
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "_layouts/template-no-local-header.njk" %}
-
-{% block body %}
-  {% component 'react-slot', {
-    id: 'company-contacts-collection',
-    props: props
-  } %}
-
-{% endblock %}
diff --git a/src/apps/routers.js b/src/apps/routers.js
index 5e9e44723f2..6f744c15d4e 100644
--- a/src/apps/routers.js
+++ b/src/apps/routers.js
@@ -114,6 +114,7 @@ const reactRoutes = [
   '/companies/:companyId/hierarchies/ghq/:globalHqId/add',
   '/companies/:companyId/hierarchies/ghq/remove',
   '/companies/:companyId/activity',
+  '/companies/:companyId/contacts',
 ]
 
 reactRoutes.forEach((path) => {
diff --git a/src/client/index.jsx b/src/client/index.jsx
index df0098761a2..af94958f9f7 100644
--- a/src/client/index.jsx
+++ b/src/client/index.jsx
@@ -30,7 +30,6 @@ import FlashMessages from './components/LocalHeader/FlashMessages.jsx'
 import PersonalisedDashboard from './components/PersonalisedDashboard'
 import CompanyOrdersCollection from '../client/modules/Omis/CollectionList/CompanyOrdersCollection'
 import InvestmentProjectForm from '../apps/investments/client/projects/create/InvestmentProjectForm'
-import CompaniesContactsCollection from '../client/modules/Contacts/CollectionList/CompanyContactsCollection.jsx'
 import ContactActivity from './modules/Contacts/ContactActivity/ContactActivity'
 import ContactLocalHeader from './components/ContactLocalHeader'
 import ContactDetails from './modules/Contacts/ContactDetails/ContactDetails'
@@ -225,9 +224,6 @@ function App() {
         <Mount selector="#company-projects-collection">
           {(props) => <CompanyProjectsCollection {...props} />}
         </Mount>
-        <Mount selector="#company-contacts-collection">
-          {(props) => <CompaniesContactsCollection {...props} />}
-        </Mount>
         <Mount selector="#dashboard-local-header">
           {(props) => (
             <SearchLocalHeader
diff --git a/src/client/modules/Contacts/CollectionList/CompanyContactsCollection.jsx b/src/client/modules/Contacts/CollectionList/CompanyContactsCollection.jsx
index 992258f605b..4a7d3fbc4bb 100644
--- a/src/client/modules/Contacts/CollectionList/CompanyContactsCollection.jsx
+++ b/src/client/modules/Contacts/CollectionList/CompanyContactsCollection.jsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { Link, Details } from 'govuk-react'
+import { useParams } from 'react-router-dom'
 
 import { CONTACTS__LOADED } from '../../../actions'
 import { FilteredCollectionList } from '../../../components'
+import { listSkeletonPlaceholder } from '../../../components/SkeletonPlaceholder'
 import { CompanyResource } from '../../../components/Resource'
-import CompanyLayout from '../../../components/Layout/CompanyLayout'
+import CompanyLayoutNew from '../../../components/Layout/CompanyLayoutNew'
+import DefaultLayoutBase from '../../../components/Layout/DefaultLayoutBase'
 
 import {
   TASK_GET_CONTACTS_LIST,
@@ -14,17 +17,19 @@ import {
 } from './state'
 
 const CompanyContactsCollection = ({
-  companyId,
   payload,
   optionMetadata,
   selectedFilters,
   returnUrl,
   ...props
 }) => {
+  const { companyId } = useParams()
+
   const collectionListTask = {
     name: TASK_GET_CONTACTS_LIST,
     id: COMPANY_CONTACTS_LIST_ID,
     progressMessage: 'loading contacts',
+    renderProgress: listSkeletonPlaceholder(),
     startOnRender: {
       payload: {
         ...payload,
@@ -35,43 +40,48 @@ const CompanyContactsCollection = ({
   }
 
   return (
-    <CompanyResource id={companyId}>
-      {(company) => (
-        <CompanyLayout
-          company={company}
-          breadcrumbs={[{ text: 'Contacts' }]}
-          returnUrl={returnUrl}
-        >
-          {company.archived && (
-            <Details
-              summary="Why can I not add a contact?"
-              data-test="archived-details"
-            >
-              Contacts cannot be added to an archived company.{' '}
-              <Link href={`/companies/${company.id}/unarchive`}>
-                Click here to unarchive
-              </Link>
-            </Details>
-          )}
-          <FilteredCollectionList
-            {...props}
-            collectionName="contact"
-            sortOptions={optionMetadata.sortOptions}
-            taskProps={collectionListTask}
-            selectedFilters={selectedFilters}
-            addItemUrl={
-              company.archived ? null : `/contacts/create?company=${company.id}`
-            }
-            entityName="contact"
-            defaultQueryParams={{
-              archived: ['false'],
-              sortby: 'modified_on:desc',
-              page: 1,
-            }}
-          />
-        </CompanyLayout>
-      )}
-    </CompanyResource>
+    <DefaultLayoutBase>
+      <CompanyResource id={companyId}>
+        {(company) => (
+          <CompanyLayoutNew
+            company={company}
+            breadcrumbs={[{ text: 'Contacts' }]}
+            returnUrl={returnUrl}
+            pageTitle="Contacts"
+          >
+            {company.archived && (
+              <Details
+                summary="Why can I not add a contact?"
+                data-test="archived-details"
+              >
+                Contacts cannot be added to an archived company.{' '}
+                <Link href={`/companies/${company.id}/unarchive`}>
+                  Click here to unarchive
+                </Link>
+              </Details>
+            )}
+            <FilteredCollectionList
+              {...props}
+              collectionName="contact"
+              sortOptions={optionMetadata.sortOptions}
+              taskProps={collectionListTask}
+              selectedFilters={selectedFilters}
+              addItemUrl={
+                company.archived
+                  ? null
+                  : `/contacts/create?company=${company.id}`
+              }
+              entityName="contact"
+              defaultQueryParams={{
+                archived: ['false'],
+                sortby: 'modified_on:desc',
+                page: 1,
+              }}
+            />
+          </CompanyLayoutNew>
+        )}
+      </CompanyResource>
+    </DefaultLayoutBase>
   )
 }
 
diff --git a/src/client/routes.js b/src/client/routes.js
index 1cece236d90..932b958c88a 100644
--- a/src/client/routes.js
+++ b/src/client/routes.js
@@ -86,6 +86,7 @@ import CompanyBusinessDetails from './modules/Companies/CompanyBusinessDetails/C
 import SetGlobalHQ from './modules/Companies/CompanyBusinessDetails/LinkGlobalHQ/SetGlobalHQ'
 import RemoveGlobalHQ from './modules/Companies/CompanyBusinessDetails/LinkGlobalHQ/RemoveGlobalHQ'
 import CompanyActivityCollection from './components/ActivityFeed/CollectionList/index'
+import CompanyContactsCollection from './modules/Contacts/CollectionList/CompanyContactsCollection'
 
 const routes = {
   companies: [
@@ -194,6 +195,11 @@ const routes = {
       module: 'datahub:companies',
       component: CompanyActivityCollection,
     },
+    {
+      path: '/companies/:companyId/contacts',
+      module: 'datahub:companies',
+      component: CompanyContactsCollection,
+    },
   ],
   contacts: [
     {