diff --git a/frontend/src/components/Design/LayoutComponentForm.vue b/frontend/src/components/Design/LayoutComponentForm.vue
index fc35c4295..4a87f079c 100644
--- a/frontend/src/components/Design/LayoutComponentForm.vue
+++ b/frontend/src/components/Design/LayoutComponentForm.vue
@@ -162,7 +162,14 @@
         You can add and style the remaining fields afterwards in HTML.
       </p>
     </div>
-    <!--<div v-if="form.form === 'page-cover-create'">
+    <div v-if="form.form === 'page-cover-create'">
+      <s-select 
+        v-model="form.coverPage.background"
+        label="Page Background"
+        :items="[{value: null, title: 'none'}, {value: 'color', title: 'Color'}, {value: 'image', title: 'Image'}]"
+        :hint="form.coverPage.background === 'image' ? 'Image must be uploaded in assets as background.png. The background image can later be customized in CSS code.' : form.coverPage.background === 'color' ? 'The color can be customized later in CSS code' : ''"
+        :disabled="props.disabled"
+      />
       <s-checkbox
         v-model="form.coverPage.hideHeader"
         label="Hide header on page"
@@ -173,7 +180,7 @@
         label="Hide footer on page"
         :disabled="props.disabled"
       />
-    </div>-->
+    </div>
   </div>
 </template>
 
diff --git a/frontend/src/components/Design/designer-components.ts b/frontend/src/components/Design/designer-components.ts
index cf46973dd..da6e5bbb8 100644
--- a/frontend/src/components/Design/designer-components.ts
+++ b/frontend/src/components/Design/designer-components.ts
@@ -849,6 +849,7 @@ export class PageHeaderComponent extends DesignerComponentBase {
         }
     }
 
+    #${id} { position: absolute; width: 0; }
     `) + '\n';
     if (form.header.left) {
       html += `<div id="${id}-left">\n${getHeaderTypeContent(form.header.left)}\n</div>\n`;
@@ -895,7 +896,7 @@ export class PageFooterComponent extends DesignerComponentBase {
   createCode(form: any, context: DesignerContext) {
     const id = createUniqueId('footer', context);
     let html = `<div id="${id}" data-sysreptor-generated="page-footer">\n`;
-    let css = ``;
+    let css = `#${id} { position: absolute; width: 0; }\n`;
     let cssPage = '';
     if (form.footer.textLeft) {
       html += `<div id="${id}-left">${form.footer.textLeft}</div>\n`;
@@ -932,91 +933,96 @@ export class CoverPageComponent extends DesignerComponentBase {
     return tagInfo.attributes['data-sysreptor-generated']?.value === 'page-cover';
   }
 
-  // TODO: cover page: how to integrate with headers/footers
-  // getCreateForm() {
-  //   return {
-  //     form: 'page-cover-create',
-  //     coverPage: {
-  //       // backgroundColor: null,
-  //       // backgroundImage: null,
-  //       hideHeader: true,
-  //       hideFooter: true,
-  //     }
-  //   };
-  // }
-
-  // createCode(form: any, context: DesignerContext) {
-  //   const id = createUniqueId('page-cover', context);
-  //   const html = trimLeadingWhitespace(`
-  //     <section id="${id}" data-sysreptor-generated="page-cover">
-  //       <div class="page-cover-title">
-  //         <h1>PENTEST REPORT</h1>
-  //         <h2>{{ report.title }}</h2>
-  //       </div>
-  //       <div class="page-cover-customer">
-  //         <p>
-  //           <strong>Customer:</strong><br>
-  //           ${'customer' in context.projectType.report_fields ? '{{ report.customer }}' : 'Example Customer'}<br>
-  //           ${'document_history' in context.projectType.report_fields ? 
-  //             "{{ report.document_history[report.document_history.length - 1]?.date || '' }}<br>" +
-  //             "{{ report.document_history[report.document_history.length - 1]?.version || '0.0' }}<br>" : ""
-  //           }
-  //         </p>
-  //       </div>
-  //       <pagebreak />
-  //     </section>
-  //   `);
-
-  //   let pageCss = '';
-  //   // if (form.coverPage.backgroundColor) {
-  //   //   pageCss += `  background-color: ${form.coverPage.backgroundColor};\n\n`;
-  //   // }
-  //   if (form.coverPage.hideHeader) {
-  //     pageCss += '  /* Hide header */\n';
-  //     pageCss += '  @top-left-corner { content: none !important; }\n';
-  //     pageCss += '  @top-left { content: none !important; }\n';
-  //     pageCss += '  @top-center { content: none !important; }\n';
-  //     pageCss += '  @top-right { content: none !important; }\n';
-  //     pageCss += '  @top-right-corner { content: none !important; }\n';
-  //   }
-  //   if (form.coverPage.hideFooter) {
-  //     pageCss += '  /* Hide footer */\n';
-  //     pageCss += '  @bottom-left-corner { content: none !important; }\n';
-  //     pageCss += '  @bottom-left { content: none !important; }\n';
-  //     pageCss += '  @bottom-center { content: none !important; }\n';
-  //     pageCss += '  @bottom-right { content: none !important; }\n';
-  //     pageCss += '  @bottom-right-corner { content: none !important; }\n';
-  //   }
-
-  //   let css = trimLeadingWhitespace(`
-  //     #${id} {
-  //       page: ${id};
-  //     }
-  //   `) + '\n';
-  //   if (pageCss) {
-  //     css += `@page ${id} {\n${pageCss}}\n`;
-  //   }
-
-  //   css += trimLeadingWhitespace(`
-  //     #${id} .page-cover-title {
-  //       position: absolute;
-  //       top: 20mm;
-  //       left: 0;
-  //       width: 14cm;
-  //     }
-  //     #${id} .page-cover-customer {
-  //       position: absolute;
-  //       top: 11cm;
-  //       left: 0;
-  //       width: 14cm;
-  //     }
-  //   `) + '\n';
-
-  //   return {
-  //     html,
-  //     css: `/* #region ${id} */\n${css}/* #endregion ${id} */`,
-  //   };
-  // }
+  getCreateForm() {
+    return {
+      form: 'page-cover-create',
+      coverPage: {
+        background: null,
+        hideHeader: true,
+        hideFooter: true,
+      }
+    };
+  }
+
+  createCode(form: any, context: DesignerContext) {
+    const id = createUniqueId('page-cover', context);
+    const html = trimLeadingWhitespace(`
+      <section id="${id}" data-sysreptor-generated="page-cover">
+        <div class="page-cover-title">
+          <h1>PENTEST REPORT</h1>
+          <h2>{{ report.title }}</h2>
+        </div>
+        <div class="page-cover-customer">
+          <p>
+            <strong>Customer:</strong><br>
+            ${'customer' in context.projectType.report_fields ? '{{ report.customer }}' : 'Example Customer'}<br>
+            ${'document_history' in context.projectType.report_fields ? 
+              "{{ report.document_history[report.document_history.length - 1]?.date || '' }}<br>" +
+              "{{ report.document_history[report.document_history.length - 1]?.version || '0.0' }}<br>" : ""
+            }
+          </p>
+        </div>
+        <pagebreak />
+      </section>
+    `);
+
+    let pageCss = '';
+    if (form.coverPage.background === 'color') {
+      pageCss += `  background-color: #ff0000;\n\n`;
+    }
+    if (form.coverPage.background === 'image') {
+      pageCss += `  background-image: url("/assets/name/background.png");\n`;
+      pageCss += `  background-repeat: no-repeat;\n`;
+      pageCss += `  background-size: cover;\n`;
+      pageCss += `  background-position: center;\n`
+      pageCss += `  background-attachment: fixed;\n\n`;
+    }
+    if (form.coverPage.hideHeader) {
+      pageCss += '  /* Hide header */\n';
+      pageCss += '  @top-left-corner { content: none !important; }\n';
+      pageCss += '  @top-left { content: none !important; }\n';
+      pageCss += '  @top-center { content: none !important; }\n';
+      pageCss += '  @top-right { content: none !important; }\n';
+      pageCss += '  @top-right-corner { content: none !important; }\n';
+    }
+    if (form.coverPage.hideFooter) {
+      pageCss += '  /* Hide footer */\n';
+      pageCss += '  @bottom-left-corner { content: none !important; }\n';
+      pageCss += '  @bottom-left { content: none !important; }\n';
+      pageCss += '  @bottom-center { content: none !important; }\n';
+      pageCss += '  @bottom-right { content: none !important; }\n';
+      pageCss += '  @bottom-right-corner { content: none !important; }\n';
+    }
+
+    let css = trimLeadingWhitespace(`
+      #${id} {
+        page: ${id};
+      }
+    `) + '\n';
+    if (pageCss) {
+      css += `@page ${id} {\n${pageCss}}\n`;
+    }
+
+    css += trimLeadingWhitespace(`
+      #${id} .page-cover-title {
+        position: absolute;
+        top: 20mm;
+        left: 0;
+        width: 14cm;
+      }
+      #${id} .page-cover-customer {
+        position: absolute;
+        top: 11cm;
+        left: 0;
+        width: 14cm;
+      }
+    `) + '\n';
+
+    return {
+      html,
+      css: `/* #region ${id} */\n${css}/* #endregion ${id} */`,
+    };
+  }
 }
 
 export const unknownComponent = new DesignerComponentBase({ type: 'unknown', name: 'Code' });
@@ -1048,6 +1054,7 @@ export const predefinedDesignerComponentGroups = [
     components: [
       new PageHeaderComponent(),
       new PageFooterComponent(),
+      new CoverPageComponent(),
     ],
   },
   {