diff --git a/.changeset/rich-tigers-build.md b/.changeset/rich-tigers-build.md
new file mode 100644
index 000000000..487982e87
--- /dev/null
+++ b/.changeset/rich-tigers-build.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+add background image to form
diff --git a/apps/nextjs-website/react-components/components/Form/Form.tsx b/apps/nextjs-website/react-components/components/Form/Form.tsx
index fe24578af..873eceb0c 100644
--- a/apps/nextjs-website/react-components/components/Form/Form.tsx
+++ b/apps/nextjs-website/react-components/components/Form/Form.tsx
@@ -43,6 +43,7 @@ const Form = ({
   sectionID,
   buttonLabel,
   notes,
+  background,
 }: FormProps) => {
   const textColor = TextColor(theme);
   const graylinkColor = GrayLinkColor(theme);
@@ -249,156 +250,166 @@ const Form = ({
   return (
     <Box
       sx={{
-        maxWidth: 900,
-        mx: 'auto',
-        p: 4,
-        textAlign: 'center',
-        borderRadius: 2,
-        boxShadow: 3,
-        color: textColor,
+        width: '100vw',
         position: 'relative',
+        backgroundImage: background ? `url(${background})` : undefined,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
       }}
-      component='section'
-      {...(sectionID && { id: sectionID })}
     >
-      <MailOutlineIcon
-        sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
-      />
-      <Typography
-        variant='h4'
-        gutterBottom
-        sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
+      <Box
+        sx={{
+          maxWidth: 900,
+          mx: 'auto',
+          p: 4,
+          textAlign: 'center',
+          borderRadius: 2,
+          boxShadow: 3,
+          color: textColor,
+          position: 'relative',
+        }}
+        component='section'
+        {...(sectionID && { id: sectionID })}
       >
-        {title}
-      </Typography>
-      {subtitle && (
+        <MailOutlineIcon
+          sx={{ fontSize: 50, mb: 2, color: textColor, zIndex: 3 }}
+        />
         <Typography
-          variant='body1'
+          variant='h4'
           gutterBottom
-          sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+          sx={{ position: 'relative', zIndex: 3, color: textColor, mb: 4 }}
         >
-          {subtitle}
+          {title}
         </Typography>
-      )}
-      <Grid
-        container
-        spacing={2}
-        sx={{ mb: 2, position: 'relative', zIndex: 3 }}
-      >
-        {inputFields.map(InputField)}
-      </Grid>
-      {categoriesTitle && categories.length > 0 && (
+        {subtitle && (
+          <Typography
+            variant='body1'
+            gutterBottom
+            sx={{ position: 'relative', zIndex: 3, mb: 4, color: textColor }}
+          >
+            {subtitle}
+          </Typography>
+        )}
+        <Grid
+          container
+          spacing={2}
+          sx={{ mb: 2, position: 'relative', zIndex: 3 }}
+        >
+          {inputFields.map(InputField)}
+        </Grid>
+        {categoriesTitle && categories.length > 0 && (
+          <Typography
+            variant='h6'
+            gutterBottom
+            sx={{
+              position: 'relative',
+              zIndex: 3,
+              mb: 2,
+              mt: 4,
+              color: textColor,
+              fontWeight: '700',
+            }}
+          >
+            {categoriesTitle}
+          </Typography>
+        )}
+        {categories.length > 0 && (
+          <FormCategories
+            categories={categories}
+            textColor={textColor}
+            borderColor={borderColor}
+            selectedCategory={formData.category}
+            handleRadioChange={handleRadioChange}
+          />
+        )}
         <Typography
-          variant='h6'
-          gutterBottom
+          variant='body2'
           sx={{
+            mb: 2,
             position: 'relative',
             zIndex: 3,
-            mb: 2,
-            mt: 4,
             color: textColor,
-            fontWeight: '700',
+            textAlign: 'start',
           }}
         >
-          {categoriesTitle}
+          *Campo obbligatorio
         </Typography>
-      )}
-      {categories.length > 0 && (
-        <FormCategories
-          categories={categories}
-          textColor={textColor}
-          borderColor={borderColor}
-          selectedCategory={formData.category}
-          handleRadioChange={handleRadioChange}
-        />
-      )}
-      <Typography
-        variant='body2'
-        sx={{
-          mb: 2,
-          position: 'relative',
-          zIndex: 3,
-          color: textColor,
-          textAlign: 'start',
-        }}
-      >
-        *Campo obbligatorio
-      </Typography>
-      <Button
-        variant='contained'
-        sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
-        onClick={handleSubmit}
-        color={theme === 'dark' ? 'negative' : 'primary'}
-      >
-        {buttonLabel}
-      </Button>
-      {submissionStatus === 'success' && (
-        <Alert
-          severity='success'
-          sx={{
-            maxWidth: 'fit-content',
-            margin: '16px auto 0px auto',
-            padding: '8px 16px',
-            border: 'none',
-            backgroundColor: '#e1f4e1',
-            textAlign: 'center',
-            fontWeight: 'bold',
-            '& .MuiAlert-icon': {
-              display: 'none',
-            },
-          }}
+        <Button
+          variant='contained'
+          sx={{ width: { md: 'auto', xs: '100%' }, zIndex: 4 }}
+          onClick={handleSubmit}
+          color={theme === 'dark' ? 'negative' : 'primary'}
         >
-          Grazie! La tua richiesta è stata registrata
-        </Alert>
-      )}
-      {submissionStatus === 'failure' && (
-        <Alert
-          severity='error'
-          sx={{
-            maxWidth: 'fit-content',
-            margin: '16px auto 0px auto',
-            padding: '8px 16px',
-            border: 'none',
-            backgroundColor: '#ffd9d9',
-            textAlign: 'center',
-            fontWeight: 'bold',
-            '& .MuiAlert-icon': {
-              display: 'none',
-            },
-          }}
-        >
-          Purtroppo in questo momento non è possibile registrare la tua
-          richiesta
-        </Alert>
-      )}
-      {notes && (
-        <Typography
-          component='div'
-          variant='body2'
-          sx={{
-            mt: 2,
-            position: 'relative',
-            zIndex: 3,
-            color: graylinkColor,
-            '& a': {
+          {buttonLabel}
+        </Button>
+        {submissionStatus === 'success' && (
+          <Alert
+            severity='success'
+            sx={{
+              maxWidth: 'fit-content',
+              margin: '16px auto 0px auto',
+              padding: '8px 16px',
+              border: 'none',
+              backgroundColor: '#e1f4e1',
+              textAlign: 'center',
+              fontWeight: 'bold',
+              '& .MuiAlert-icon': {
+                display: 'none',
+              },
+            }}
+          >
+            Grazie! La tua richiesta è stata registrata
+          </Alert>
+        )}
+        {submissionStatus === 'failure' && (
+          <Alert
+            severity='error'
+            sx={{
+              maxWidth: 'fit-content',
+              margin: '16px auto 0px auto',
+              padding: '8px 16px',
+              border: 'none',
+              backgroundColor: '#ffd9d9',
+              textAlign: 'center',
+              fontWeight: 'bold',
+              '& .MuiAlert-icon': {
+                display: 'none',
+              },
+            }}
+          >
+            Purtroppo in questo momento non è possibile registrare la tua
+            richiesta
+          </Alert>
+        )}
+        {notes && (
+          <Typography
+            component='div'
+            variant='body2'
+            sx={{
+              mt: 2,
+              position: 'relative',
+              zIndex: 3,
               color: graylinkColor,
-              textDecoration: 'underline',
-              '&:hover': {
+              '& a': {
                 color: graylinkColor,
                 textDecoration: 'underline',
+                '&:hover': {
+                  color: graylinkColor,
+                  textDecoration: 'underline',
+                },
               },
-            },
-          }}
-        >
-          {notes}
-        </Typography>
-      )}
+            }}
+          >
+            {notes}
+          </Typography>
+        )}
 
-      <RECAPTCHA
-        size='invisible'
-        ref={recaptchaRef}
-        sitekey={recaptchaSiteKey}
-      />
+        <RECAPTCHA
+          size='invisible'
+          ref={recaptchaRef}
+          sitekey={recaptchaSiteKey}
+        />
+      </Box>
     </Box>
   );
 };
diff --git a/apps/nextjs-website/react-components/types/Form/Form.types.ts b/apps/nextjs-website/react-components/types/Form/Form.types.ts
index e32f9d9d0..fd00a1978 100644
--- a/apps/nextjs-website/react-components/types/Form/Form.types.ts
+++ b/apps/nextjs-website/react-components/types/Form/Form.types.ts
@@ -24,6 +24,7 @@ export interface FormProps extends SectionProps, FormFields, FormCategories {
   readonly recaptchaSiteKey: string;
   readonly buttonLabel: string;
   readonly notes?: JSX.Element;
+  readonly background?: string;
 }
 
 export interface FormData {
diff --git a/apps/nextjs-website/src/components/Form.tsx b/apps/nextjs-website/src/components/Form.tsx
index 0c6879ad7..6d0d7741a 100644
--- a/apps/nextjs-website/src/components/Form.tsx
+++ b/apps/nextjs-website/src/components/Form.tsx
@@ -10,6 +10,7 @@ const makeFormProps = ({
   categoriesTitle,
   buttonLabel,
   notes,
+  background,
   ...rest
 }: FormSection): FormProps => ({
   categories: categories.map(({ additionalInfo, ...category }) => ({
@@ -20,6 +21,7 @@ const makeFormProps = ({
   ...(categoriesTitle && { categoriesTitle }),
   buttonLabel,
   ...(notes && { notes: MarkdownRenderer({ markdown: notes }) }),
+  ...(background.data && { background: background.data.attributes.url }),
   ...rest,
 });
 
diff --git a/apps/nextjs-website/src/lib/fetch/types/PageSection.ts b/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
index ea62d4950..544c63c5e 100644
--- a/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
+++ b/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
@@ -200,6 +200,7 @@ const FormSectionCodec = t.strict({
   sectionID: t.union([t.string, t.null]),
   buttonLabel: t.string,
   notes: t.union([t.string, t.null]),
+  background: StrapiImageSchema,
 });
 
 const CounterCodec = t.strict({