diff --git a/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue b/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
index c5562fe..07a35b2 100644
--- a/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
+++ b/src/components/admin/settings/templateUsage/TemplateUsageListItem.vue
@@ -18,12 +18,18 @@
       </div>
     </div>
     <div class="flex flex-col p-2 gap-2">
-      <div class="flex flex-row gap-2 items-center">
-        <p class="min-w-16">Kopfzeile:</p>
-        <select ref="header" id="header" :value="templateUsage.header?.id ?? 'def'">
-          <option value="def">Standard-Vorlage verwenden</option>
-          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
-        </select>
+      <div class="flex flex-col md:flex-row gap-2 md:items-center">
+        <div class="flex flex-row w-full gap-2 items-center">
+          <p class="min-w-16">Kopfzeile:</p>
+          <select ref="header" id="header" :value="templateUsage.header?.id ?? 'def'">
+            <option value="def">Standard-Vorlage verwenden</option>
+            <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+          </select>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="whitespace-nowrap">Höhe [mm]:</p>
+          <input id="headerHeight" type="number" :min="15" v-model="templateUsage.headerHeight" class="!w-24" placeholder="15">
+        </div>        
       </div>
       <div class="flex flex-row gap-2 items-center">
         <p class="min-w-16">Hauptteil:</p>
@@ -32,12 +38,18 @@
           <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
         </select>
       </div>
-      <div class="flex flex-row gap-2 items-center">
-        <p class="min-w-16">Fußzeile:</p>
-        <select ref="footer" id="footer" :value="templateUsage.footer?.id ?? 'def'">
-          <option value="def">Standard-Vorlage verwenden</option>
-          <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
-        </select>
+      <div class="flex flex-col md:flex-row gap-2 md:items-center">
+        <div class="flex flex-row w-full gap-2 items-center">
+          <p class="min-w-16">Fußzeile:</p>
+          <select ref="footer" id="footer" :value="templateUsage.footer?.id ?? 'def'">
+            <option value="def">Standard-Vorlage verwenden</option>
+            <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
+          </select>
+        </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="whitespace-nowrap">Höhe [mm]:</p>
+          <input id="footerHeight" type="number" :min="15" v-model="templateUsage.footerHeight" class="!w-24" placeholder="15">
+        </div>
       </div>
     </div>
   </form>
@@ -91,6 +103,8 @@ export default defineComponent({
       const headerId = fromData.header.value === "def" ? null : fromData.header.value;
       const bodyId = fromData.body.value === "def" ? null : fromData.body.value;
       const footerId = fromData.footer.value === "def" ? null : fromData.footer.value;
+      const headerHeight = fromData.footer.value === "" ? null : parseInt(fromData.headerHeight.value);
+      const footerHeight = fromData.footer.value === "" ? null : parseInt(fromData.footerHeight.value);
 
       this.status = "loading"
       this.updateTemplateUsage({
@@ -98,6 +112,8 @@ export default defineComponent({
         headerId: headerId,
         bodyId: bodyId,
         footerId: footerId,
+        headerHeight:headerHeight,
+        footerHeight: footerHeight
       })
         .then(() => {
           this.status = { status: "success" };
diff --git a/src/stores/admin/templateUsage.ts b/src/stores/admin/templateUsage.ts
index 6e3aca9..dde0591 100644
--- a/src/stores/admin/templateUsage.ts
+++ b/src/stores/admin/templateUsage.ts
@@ -35,6 +35,8 @@ export const useTemplateUsageStore = defineStore("templateUsage", {
         headerId: templateUsage.headerId,
         bodyId: templateUsage.bodyId,
         footerId: templateUsage.footerId,
+        headerHeight: templateUsage.headerHeight,
+        footerHeight: templateUsage.footerHeight,
       });
       this.fetchTemplateUsages();
       return result;
diff --git a/src/viewmodels/admin/templateUsage.models.ts b/src/viewmodels/admin/templateUsage.models.ts
index 79459cd..8aa7d1f 100644
--- a/src/viewmodels/admin/templateUsage.models.ts
+++ b/src/viewmodels/admin/templateUsage.models.ts
@@ -5,6 +5,8 @@ export interface TemplateUsageViewModel {
   header: { id: number; template: string } | null;
   body: { id: number; template: string } | null;
   footer: { id: number; template: string } | null;
+  headerHeight: number | null;
+  footerHeight: number | null;
 }
 
 export interface UpdateTemplateUsageViewModel {
@@ -12,4 +14,6 @@ export interface UpdateTemplateUsageViewModel {
   headerId: number | null;
   bodyId: number | null;
   footerId: number | null;
+  headerHeight: number | null;
+  footerHeight: number | null;
 }