diff --git a/CHANGELOG.md b/CHANGELOG.md
index aedbc321b..acf98add6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -58,6 +58,7 @@ Hotfix release for submissions in progress.
 
 ### Changed
 - Changed language on user dash from 'reviews' to 'review tasks' to differentiate between the two
+- Changed the project heading block to contain optional image and start contributing button
 
 
 ## [v2.1.0](https://github.com/digirati-co-uk/madoc-platform/compare/v2.0.8...v2.1.0)
diff --git a/services/madoc-ts/src/frontend/shared/layout/Surface.tsx b/services/madoc-ts/src/frontend/shared/layout/Surface.tsx
index 04b226ec2..978cb4129 100644
--- a/services/madoc-ts/src/frontend/shared/layout/Surface.tsx
+++ b/services/madoc-ts/src/frontend/shared/layout/Surface.tsx
@@ -45,6 +45,7 @@ const SurfaceStyled = styled.div<{
   $background?: string;
   $color?: string;
   $textAlign?: 'left' | 'center' | 'right';
+  $fullWidth?: boolean;
   $padding?: 'none' | 'sm' | 'md' | 'lg';
   $marginBottom?: 'none' | 'sm' | 'md' | 'lg';
   $fontSize?: 'sm' | 'md' | 'lg';
@@ -59,12 +60,15 @@ const SurfaceStyled = styled.div<{
   font-family: ${props => (props.$font ? `${props.$font}, sans-serif` : 'inherit')};
   text-align: ${props => (props.$textAlign ? props.$textAlign : 'left')};
   margin-bottom: ${parseProp('$marginBottom', '0')};
+  margin-left: ${props => (props.$fullWidth ? '-2em' : '')};
+  margin-right: ${props => (props.$fullWidth ? '-2em' : '')};
 `;
 
 export type SurfaceProps = {
   id?: string;
   background?: string;
   textColor?: string;
+  fullWidth?: boolean;
   textAlign?: 'left' | 'center' | 'right';
   font?: string;
   padding?: 'none' | 'sm' | 'md' | 'lg';
@@ -78,6 +82,7 @@ export const Surface: React.FC<SurfaceProps> = ({
   textAlign,
   textColor,
   background,
+  fullWidth,
   font,
   fontSize,
   fontWeight,
@@ -94,6 +99,7 @@ export const Surface: React.FC<SurfaceProps> = ({
     <SurfaceStyled
       id={id}
       $color={color}
+      $fullWidth={fullWidth}
       $background={background}
       $textAlign={textAlign}
       $font={font}
@@ -116,6 +122,7 @@ blockEditorFor(Surface, {
     background: '',
     font: '',
     padding: 'none',
+    fullWidth: false,
     fontSize: 'md',
     fontWeight: '400',
     textAlign: 'left',
@@ -174,5 +181,6 @@ blockEditorFor(Surface, {
         { value: 'lg', text: 'Large' },
       ],
     },
+    fullWidth: { label: 'Full width', type: 'checkbox-field', inlineLabel: 'Show full width' },
   },
 });
diff --git a/services/madoc-ts/src/frontend/site/features/CollectionFilterOptions.tsx b/services/madoc-ts/src/frontend/site/features/CollectionFilterOptions.tsx
index a3df3f209..e860daa57 100644
--- a/services/madoc-ts/src/frontend/site/features/CollectionFilterOptions.tsx
+++ b/services/madoc-ts/src/frontend/site/features/CollectionFilterOptions.tsx
@@ -12,9 +12,8 @@ import { CollectionLoader } from '../pages/loaders/collection-loader';
 import { GoToRandomCanvas } from './contributor/GoToRandomCanvas';
 import { GoToRandomManifest } from './contributor/GoToRandomManifest';
 import { useProjectPageConfiguration } from '../hooks/use-project-page-configuration';
-import { useProjectStatus } from '../hooks/use-project-status';
 import { useSiteConfiguration } from './SiteConfigurationContext';
-import { useProjectShadowConfiguration } from '../hooks/use-project-shadow-configuration';
+import { StartContributingButton } from './contributor/StartContributingButton';
 
 export const CollectionFilterOptions: React.FC = () => {
   const { t } = useTranslation();
@@ -24,10 +23,8 @@ export const CollectionFilterOptions: React.FC = () => {
   const { filter, page } = useLocationQuery();
   const [, showDoneButton] = useSubjectMap(data ? data.subjects : []);
   const options = useProjectPageConfiguration();
-  const { isActive } = useProjectStatus();
-  const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
   const {
-    project: { allowCollectionNavigation = true, allowManifestNavigation = true, claimGranularity },
+    project: { allowCollectionNavigation = true, allowManifestNavigation = true },
   } = useSiteConfiguration();
   if (!data) {
     return null;
@@ -35,21 +32,7 @@ export const CollectionFilterOptions: React.FC = () => {
 
   return (
     <>
-      <ButtonRow>
-        {!options.hideStartContributing && isActive ? (
-          claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
-            <GoToRandomManifest
-              $primary
-              $large
-              label={{ none: [t('Start contributing')] }}
-              navigateToModel
-              manifestModel={showCaptureModelOnManifest}
-            />
-          ) : (
-            <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
-          )
-        ) : null}
-      </ButtonRow>
+      <StartContributingButton />
       <ButtonRow>
         {showDoneButton || filter ? (
           <Button
diff --git a/services/madoc-ts/src/frontend/site/features/ProjectHeading.tsx b/services/madoc-ts/src/frontend/site/features/ProjectHeading.tsx
index eb7db6343..fb087a7aa 100644
--- a/services/madoc-ts/src/frontend/site/features/ProjectHeading.tsx
+++ b/services/madoc-ts/src/frontend/site/features/ProjectHeading.tsx
@@ -3,8 +3,42 @@ import { blockEditorFor } from '../../../extensions/page-blocks/block-editor-for
 import { Heading1, Subheading1 } from '../../shared/typography/Heading1';
 import { LocaleString } from '../../shared/components/LocaleString';
 import { useProject } from '../hooks/use-project';
+import styled from 'styled-components';
+import { StartContributingButton } from './contributor/StartContributingButton';
 
-export const ProjectHeading: React.FC = () => {
+const ProjectHeadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+`;
+
+const ProjectTitle = styled.div``;
+
+const ProjectImage = styled.div`
+  width: 100%;
+  height: 100%;
+  max-height: 200px;
+
+  img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+  &[data-full-width='true'] {
+    margin: 0 -2em;
+    width: auto;
+  }
+`;
+export const ProjectHeading: React.FC<{
+  headerImage?: {
+    id: string;
+    image: string;
+    thumbnail: string;
+  } | null;
+  fullWidth?: boolean;
+  imageHeight?: string;
+  showContributingButton?: boolean;
+}> = ({ headerImage, fullWidth, imageHeight = 200, showContributingButton = true }) => {
   const { data: project } = useProject();
 
   if (!project) {
@@ -12,10 +46,18 @@ export const ProjectHeading: React.FC = () => {
   }
 
   return (
-    <>
-      <LocaleString as={Heading1}>{project.label}</LocaleString>
-      <LocaleString as={Subheading1}>{project.summary}</LocaleString>
-    </>
+    <ProjectHeadingContainer>
+      <ProjectTitle>
+        <LocaleString as={Heading1}>{project.label}</LocaleString>
+        <LocaleString as={Subheading1}>{project.summary}</LocaleString>
+      </ProjectTitle>
+
+      <ProjectImage data-full-width={fullWidth} style={{ maxHeight: `${imageHeight}px` }}>
+        <img src={headerImage?.image} alt={''} />
+      </ProjectImage>
+
+      {showContributingButton && <StartContributingButton />}
+    </ProjectHeadingContainer>
   );
 };
 
@@ -24,5 +66,20 @@ blockEditorFor(ProjectHeading, {
   label: 'Project heading',
   anyContext: ['project'],
   requiredContext: ['project'],
-  editor: {},
+  defaultProps: {
+    headerImage: null,
+    fullWidth: false,
+    imageHeight: 200,
+    showContributingButton: true,
+  },
+  editor: {
+    headerImage: { label: 'Background image', type: 'madoc-media-explorer' },
+    fullWidth: { label: 'Full width', type: 'checkbox-field', inlineLabel: 'Show image full width' },
+    imageHeight: { label: 'Image height', type: 'text-field' },
+    showContributingButton: {
+      label: 'Start contributing button',
+      type: 'checkbox-field',
+      inlineLabel: 'Show start Contributing button',
+    },
+  },
 });
diff --git a/services/madoc-ts/src/frontend/site/features/contributor/ProjectActions.tsx b/services/madoc-ts/src/frontend/site/features/contributor/ProjectActions.tsx
index c0cbdfad3..c5ba8e0e5 100644
--- a/services/madoc-ts/src/frontend/site/features/contributor/ProjectActions.tsx
+++ b/services/madoc-ts/src/frontend/site/features/contributor/ProjectActions.tsx
@@ -6,27 +6,26 @@ import { Button, ButtonRow } from '../../../shared/navigation/Button';
 import { useUser } from '../../../shared/hooks/use-site';
 import { useProject } from '../../hooks/use-project';
 import { useProjectPageConfiguration } from '../../hooks/use-project-page-configuration';
-import { useProjectShadowConfiguration } from '../../hooks/use-project-shadow-configuration';
 import { useProjectStatus } from '../../hooks/use-project-status';
 import { useRelativeLinks } from '../../hooks/use-relative-links';
 import { GoToRandomCanvas } from './GoToRandomCanvas';
 import { GoToRandomManifest } from './GoToRandomManifest';
 import { useSiteConfiguration } from '../SiteConfigurationContext';
+import { StartContributingButton } from './StartContributingButton';
 
-export const ProjectActions: React.FC = () => {
+export const ProjectActions: React.FC<{
+  showContributingButton?: boolean }> = ({showContributingButton = false}) => {
   const { data: project } = useProject();
   const { isActive } = useProjectStatus();
   const { t } = useTranslation();
   const createLink = useRelativeLinks();
   const {
-    project: { allowCollectionNavigation = true, allowManifestNavigation = true, claimGranularity, allowPersonalNotes },
+    project: { allowCollectionNavigation = true, allowManifestNavigation = true, allowPersonalNotes },
   } = useSiteConfiguration();
   const user = useUser();
   const isAdmin = user && user.scope && user.scope.indexOf('site.admin') !== -1;
   const isReviewer = isAdmin || (user && user.scope && user.scope.indexOf('tasks.create') !== -1);
-  const canContribute = isAdmin || (user && user.scope && user.scope.indexOf('models.contribute') !== -1);
   const options = useProjectPageConfiguration();
-  const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
 
   if (!project) {
     return null;
@@ -34,19 +33,7 @@ export const ProjectActions: React.FC = () => {
 
   return (
     <div>
-      {!options.hideStartContributing && isActive && canContribute ? (
-        claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
-          <GoToRandomManifest
-            $primary
-            $large
-            label={{ none: [t('Start contributing')] }}
-            navigateToModel
-            manifestModel={showCaptureModelOnManifest}
-          />
-        ) : (
-          <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
-        )
-      ) : null}
+      {showContributingButton && <StartContributingButton />}
       <ButtonRow>
         {!options.hideSearchButton ? (
           <Button as={Link} to={createLink({ subRoute: 'search' })}>
@@ -82,5 +69,14 @@ blockEditorFor(ProjectActions, {
   label: 'Project actions',
   anyContext: ['project'],
   requiredContext: ['project'],
-  editor: {},
+  defaultProps: {
+    showContributingButton: false,
+  },
+  editor: {
+    showContributingButton: {
+      label: 'Start contributing button',
+      type: 'checkbox-field',
+      inlineLabel: 'Show start Contributing button',
+    },
+  },
 });
diff --git a/services/madoc-ts/src/frontend/site/features/contributor/ProjectContributionButton.tsx b/services/madoc-ts/src/frontend/site/features/contributor/ProjectContributionButton.tsx
index afd914454..2e419dc9d 100644
--- a/services/madoc-ts/src/frontend/site/features/contributor/ProjectContributionButton.tsx
+++ b/services/madoc-ts/src/frontend/site/features/contributor/ProjectContributionButton.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { blockEditorFor } from '../../../../extensions/page-blocks/block-editor-for';
 import { parseUrn } from '../../../../utility/parse-urn';
 import { SmallButton } from '../../../shared/navigation/Button';
-import { CSSThirdGrid, GridContainer } from '../../../shared/layout/Grid';
+import { CSSThirdGrid } from '../../../shared/layout/Grid';
 import { Heading3 } from '../../../shared/typography/Heading3';
 import { ContinueTaskDisplay } from '../../../shared/components/ContinueTaskDisplay';
 import { useContributorTasks } from '../../../shared/hooks/use-contributor-tasks';
diff --git a/services/madoc-ts/src/frontend/site/features/contributor/StartContributingButton.tsx b/services/madoc-ts/src/frontend/site/features/contributor/StartContributingButton.tsx
new file mode 100644
index 000000000..8fd50148b
--- /dev/null
+++ b/services/madoc-ts/src/frontend/site/features/contributor/StartContributingButton.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useProjectStatus } from '../../hooks/use-project-status';
+import { useTranslation } from 'react-i18next';
+import { useSiteConfiguration } from '../SiteConfigurationContext';
+import { useUser } from '../../../shared/hooks/use-site';
+import { useProjectPageConfiguration } from '../../hooks/use-project-page-configuration';
+import { useProjectShadowConfiguration } from '../../hooks/use-project-shadow-configuration';
+import { GoToRandomManifest } from './GoToRandomManifest';
+import { GoToRandomCanvas } from './GoToRandomCanvas';
+
+export const StartContributingButton: React.FC = () => {
+  const { isActive } = useProjectStatus();
+  const { t } = useTranslation();
+  const {
+    project: { claimGranularity },
+  } = useSiteConfiguration();
+  const user = useUser();
+  const isAdmin = user && user.scope && user.scope.indexOf('site.admin') !== -1;
+  const canContribute = isAdmin || (user && user.scope && user.scope.indexOf('models.contribute') !== -1);
+  const options = useProjectPageConfiguration();
+  const { showCaptureModelOnManifest } = useProjectShadowConfiguration();
+
+  return (
+    <div>
+      {!options.hideStartContributing && isActive && canContribute ? (
+        claimGranularity === 'manifest' || showCaptureModelOnManifest ? (
+          <GoToRandomManifest
+            $primary
+            $large
+            label={{ none: [t('Start contributing')] }}
+            navigateToModel
+            manifestModel={showCaptureModelOnManifest}
+          />
+        ) : (
+          <GoToRandomCanvas $primary $large label={{ none: [t('Start contributing')] }} navigateToModel />
+        )
+      ) : null}
+    </div>
+  );
+};
diff --git a/services/madoc-ts/translations/en/madoc.json b/services/madoc-ts/translations/en/madoc.json
index 990cf529f..eaf2ee772 100644
--- a/services/madoc-ts/translations/en/madoc.json
+++ b/services/madoc-ts/translations/en/madoc.json
@@ -424,6 +424,7 @@
   "Home": "Home",
   "Homepage": "Homepage",
   "Homepage menu": "Homepage menu",
+  "How much padding should the surface have. (default&#58; none)": "How much padding should the surface have. (default&#58; none)",
   "IIIF Drag and drop": "IIIF Drag and drop",
   "If a contribution takes longer than this time (in seconds) then they will receive a message to let them know": "If a contribution takes longer than this time (in seconds) then they will receive a message to let them know",
   "If enabled, these will will be available for users to choose from the menu bar": "If enabled, these will will be available for users to choose from the menu bar",
@@ -713,12 +714,15 @@
   "Show button to generate PDF": "Show button to generate PDF",
   "Show completed": "Show completed",
   "Show divider": "Show divider",
+  "Show full width": "Show full width",
   "Show home as menu item": "Show home as menu item",
+  "Show image full width": "Show image full width",
   "Show number of matches manifests in search facets": "Show number of matches manifests in search facets",
   "Show only languages": "Show only languages",
   "Show reviewer dashboard": "Show reviewer dashboard",
   "Show search facet count": "Show search facet count",
   "Show search facet count (number of matching manifests)": "Show search facet count (number of matching manifests)",
+  "Show start Contributing button": "Show start Contributing button",
   "Show text": "Show text",
   "Show thumbs": "Show thumbs",
   "Show translation on site": "Show translation on site",