diff --git a/frontend/package.json b/frontend/package.json
index 93c6432bc5..30461984b7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -156,6 +156,12 @@
           "ignoreKeysRegex": "^(global|entity|contentNode\\.[a-z][a-zA-Z]+|print\\.(global|activity|cover|picasso|program|story|toc))\\..+",
           "translationKeyPropRegex": "[a-zA-Z0-9]-i18n-key$"
         }
+      ],
+      "vue/no-mutating-props": [
+        "error",
+        {
+          "shallowOnly": false
+        }
       ]
     },
     "parserOptions": {
diff --git a/frontend/src/components/buttons/ButtonContinue.vue b/frontend/src/components/buttons/ButtonContinue.vue
new file mode 100644
index 0000000000..ad86e730bd
--- /dev/null
+++ b/frontend/src/components/buttons/ButtonContinue.vue
@@ -0,0 +1,11 @@
+<template>
+  <v-btn color="primary" v-bind="$attrs" v-on="$listeners">
+    {{ $tc('global.button.continue') }}
+  </v-btn>
+</template>
+
+<script>
+export default {
+  name: 'ButtonContinue',
+}
+</script>
diff --git a/frontend/src/components/campCreate/CampCreate.vue b/frontend/src/components/campCreate/CampCreate.vue
new file mode 100644
index 0000000000..64ca7ba151
--- /dev/null
+++ b/frontend/src/components/campCreate/CampCreate.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-stepper v-model="step" flat>
+    <v-stepper-header class="elevation-0">
+      <v-spacer v-if="$vuetify.breakpoint.smAndUp" />
+      <v-stepper-step :complete="step > 1" :step="1" class="px-4">
+        {{ $tc('components.campCreate.campCreate.steps.infos') }}
+      </v-stepper-step>
+      <v-divider class="mx-n2" />
+      <v-stepper-step :complete="step > 2" :step="2" class="px-4">
+        {{ $tc('components.campCreate.campCreate.steps.template') }}
+      </v-stepper-step>
+      <v-spacer v-if="$vuetify.breakpoint.smAndUp" />
+    </v-stepper-header>
+    <v-divider />
+    <v-stepper-items>
+      <CampCreateStep1
+        :camp="camp"
+        :is-saving="isSaving"
+        @add-period="addPeriod"
+        @delete-period="deletePeriod"
+        @next-step="step++"
+      />
+      <CampCreateStep2
+        :camp="camp"
+        :is-saving="isSaving"
+        :server-error="serverError"
+        @create-camp="createCamp"
+        @previous-step="step--"
+      />
+    </v-stepper-items>
+  </v-stepper>
+</template>
+<script>
+import { camelCase } from 'lodash'
+import { campRoute } from '@/router.js'
+import CampCreateStep1 from '@/components/campCreate/CampCreateStep1.vue'
+import CampCreateStep2 from '@/components/campCreate/CampCreateStep2.vue'
+
+export default {
+  name: 'CampCreate',
+  components: { CampCreateStep1, CampCreateStep2 },
+  data() {
+    return {
+      step: 1,
+      camp: {
+        name: '',
+        title: '',
+        motto: '',
+        periods: [
+          {
+            start: '',
+            end: '',
+            description: this.$tc('entity.period.defaultDescription'),
+          },
+        ],
+        campPrototype: '',
+      },
+      serverError: null,
+      isSaving: false,
+    }
+  },
+  computed: {
+    campsUrl() {
+      return this.api.get().camps()._meta.self
+    },
+  },
+  created() {},
+  methods: {
+    camelCase,
+    createCamp: async function () {
+      this.isSaving = true
+
+      try {
+        const camp = await this.api.post(this.campsUrl, this.camp)
+        await this.$router.push(campRoute(camp, 'admin'))
+        this.api.reload(this.campsUrl)
+      } catch (error) {
+        this.serverError = error
+      }
+
+      this.isSaving = false
+    },
+    addPeriod: function () {
+      this.camp.periods.push({
+        start: '',
+        end: '',
+        description: '',
+      })
+    },
+    deletePeriod: function (idx) {
+      this.camp.periods.splice(idx, 1)
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/campCreate/CampCreateStep1.vue b/frontend/src/components/campCreate/CampCreateStep1.vue
new file mode 100644
index 0000000000..10e4286d58
--- /dev/null
+++ b/frontend/src/components/campCreate/CampCreateStep1.vue
@@ -0,0 +1,95 @@
+<template>
+  <v-stepper-content :step="1" class="pa-0">
+    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">
+      <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('next-step'))">
+        <v-card-text>
+          <e-text-field
+            v-model="localCamp.name"
+            :name="$tc('entity.camp.fields.name')"
+            vee-rules="required"
+            required
+            autofocus
+          />
+          <e-text-field
+            v-model="localCamp.title"
+            :name="$tc('entity.camp.fields.title')"
+            vee-rules="required"
+            required
+          />
+          <e-text-field
+            v-model="localCamp.motto"
+            :name="$tc('entity.camp.fields.motto')"
+          />
+          <create-camp-periods
+            :add-period="addPeriod"
+            :periods="localCamp.periods"
+            :delete-period="deletePeriod"
+            :period-deletable="periodDeletable"
+          />
+        </v-card-text>
+        <v-divider />
+        <ContentActions>
+          <v-spacer />
+          <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
+          <ButtonContinue v-if="valid" @click="$emit('next-step')" />
+          <v-tooltip v-else top>
+            <template #activator="{ attrs, on }">
+              <v-btn
+                elevation="0"
+                color="secondary"
+                v-bind="attrs"
+                @click="validate()"
+                v-on="on"
+              >
+                {{ $tc('global.button.continue') }}
+              </v-btn>
+            </template>
+            {{ $tc('components.campCreate.campCreateStep1.submitTooltip') }}
+          </v-tooltip>
+        </ContentActions>
+      </v-form>
+    </ValidationObserver>
+  </v-stepper-content>
+</template>
+<script>
+import { ValidationObserver } from 'vee-validate'
+import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
+import ButtonContinue from '@/components/buttons/ButtonContinue.vue'
+import ContentActions from '@/components/layout/ContentActions.vue'
+import CreateCampPeriods from '@/components/campAdmin/CreateCampPeriods.vue'
+import ETextField from '@/components/form/base/ETextField.vue'
+
+export default {
+  name: 'CampCreateStep1',
+  components: {
+    ButtonCancel,
+    ButtonContinue,
+    ContentActions,
+    CreateCampPeriods,
+    ETextField,
+    ValidationObserver,
+  },
+  props: {
+    camp: { type: Object, required: true },
+    isSaving: { type: Boolean, required: true },
+  },
+  data: function () {
+    return {
+      localCamp: this.camp,
+    }
+  },
+  computed: {
+    periodDeletable() {
+      return this.camp.periods.length > 1
+    },
+  },
+  methods: {
+    addPeriod: function () {
+      this.$emit('add-period')
+    },
+    deletePeriod: function (idx) {
+      this.$emit('delete-period', idx)
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/campCreate/CampCreateStep2.vue b/frontend/src/components/campCreate/CampCreateStep2.vue
new file mode 100644
index 0000000000..59872b77a5
--- /dev/null
+++ b/frontend/src/components/campCreate/CampCreateStep2.vue
@@ -0,0 +1,189 @@
+<template>
+  <v-stepper-content :step="2" class="pa-0">
+    <ValidationObserver v-slot="{ handleSubmit, valid, validate }">
+      <v-form ref="form" @submit.prevent="handleSubmit(() => $emit('create-camp'))">
+        <v-card-text>
+          <server-error :server-error="serverError" />
+          <e-select
+            v-model="localCamp.campPrototype"
+            :vee-rules="{ required: false, excluded: ['', false, true] }"
+            :skip-if-empty="false"
+            :name="$tc('entity.camp.prototype')"
+            :hint="prorotypeHint"
+            persistent-hint
+            :items="campTemplates"
+            :menu-props="{ offsetY: true }"
+          />
+          <div v-if="localCamp.campPrototype" class="px-2 rounded-lg dashborder">
+            <h3 class="mt-2 h3">
+              {{ $tc('components.campCreate.campCreateStep2.preview') }}
+            </h3>
+            <v-list class="w-100" dense color="transparent">
+              <v-subheader class="px-0" style="height: auto">
+                {{ $tc('components.campCreate.campCreateStep2.category') }}
+              </v-subheader>
+              <v-list-item
+                v-for="category in prototypePreview.categories().items"
+                :key="category._meta.self"
+                class="pt-0 pb-1 px-0 min-h-0"
+              >
+                <v-list-item-title class="d-flex gap-2 align-baseline">
+                  <CategoryChip :category="category" class="mx-0 flex-shrink-0" dense />
+                  <span class="font-weight-medium">{{ category.name }}</span>
+                  <small class="blue-grey--text">{{
+                    category
+                      .preferredContentTypes()
+                      .items.map((item) =>
+                        $tc('contentNode.' + camelCase(item.name) + '.name')
+                      )
+                      .join(', ') ||
+                    $tc('components.campCreate.campCreateStep2.noContent')
+                  }}</small>
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+            <v-list class="w-100" dense color="transparent">
+              <v-subheader class="px-0" style="height: auto">
+                {{ $tc('components.campCreate.campCreateStep2.progressStates') }}
+              </v-subheader>
+              <v-list-item
+                v-for="(progressLabel, idx) in prototypePreview.progressLabels().items"
+                :key="progressLabel._meta.self"
+                class="pt-1 pb-1 px-0 min-h-0"
+              >
+                <v-list-item-title class="d-flex gap-2 align-baseline">
+                  <v-avatar color="rgba(0,0,0,0.12)" size="20">{{ idx + 1 }}</v-avatar>
+                  {{ progressLabel.title }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </div>
+          <v-alert
+            v-if="localCamp.campPrototype === null"
+            color="#0661ab"
+            elevation="0"
+            text
+            icon="mdi-alert-circle-outline"
+          >
+            <strong>{{
+              $tc('components.campCreate.campCreateStep2.noPrototypeAlert.title')
+            }}</strong>
+            <br />
+            {{
+              $tc('components.campCreate.campCreateStep2.noPrototypeAlert.description')
+            }}
+          </v-alert>
+        </v-card-text>
+        <v-divider />
+        <ContentActions>
+          <v-btn
+            text
+            color="secondary"
+            :disabled="isSaving"
+            @click="$emit('previous-step')"
+          >
+            <v-icon left>mdi-arrow-left</v-icon>
+            {{ $tc('global.button.back') }}
+          </v-btn>
+          <div class="ml-auto">
+            <ButtonCancel :disabled="isSaving" @click="$router.go(-1)" />
+            <ButtonAdd v-if="valid" type="submit" :loading="isSaving">
+              {{ $tc('components.campCreate.campCreateStep2.create') }}
+            </ButtonAdd>
+            <v-tooltip v-else top>
+              <template #activator="{ attrs, on }">
+                <ButtonAdd
+                  color="secondary"
+                  elevation="0"
+                  v-bind="attrs"
+                  @click="validate()"
+                  v-on="on"
+                >
+                  {{ $tc('components.campCreate.campCreateStep2.create') }}
+                </ButtonAdd>
+              </template>
+              {{ $tc('components.campCreate.campCreateStep2.submitTooltipPrototype') }}
+            </v-tooltip>
+          </div>
+        </ContentActions>
+      </v-form>
+    </ValidationObserver>
+  </v-stepper-content>
+</template>
+<script>
+import camelCase from 'lodash/camelCase.js'
+import { ValidationObserver } from 'vee-validate'
+import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
+import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
+import CategoryChip from '@/components/generic/CategoryChip.vue'
+import ContentActions from '@/components/layout/ContentActions.vue'
+import ServerError from '@/components/form/ServerError.vue'
+
+export default {
+  name: 'CampCreateStep2',
+  components: {
+    ButtonAdd,
+    ButtonCancel,
+    CategoryChip,
+    ContentActions,
+    ServerError,
+    ValidationObserver,
+  },
+  props: {
+    camp: { type: Object, required: true },
+    isSaving: { type: Boolean, required: true },
+    serverError: {
+      type: [Object, String, Error],
+      default: null,
+    },
+  },
+  data: function () {
+    return {
+      localCamp: this.camp,
+    }
+  },
+  computed: {
+    campTemplates() {
+      return this.campPrototypes.concat([
+        {
+          value: null,
+          text: this.$tc('components.campCreate.campCreateStep2.noPrototype'),
+        },
+      ])
+    },
+    prorotypeHint() {
+      switch (this.localCamp.campPrototype) {
+        case '':
+          return this.$tc('components.campCreate.campCreateStep2.prototypeHint')
+        case null:
+          return this.$tc('components.campCreate.campCreateStep2.prototypeHintEmpty')
+        default:
+          return this.$tc('components.campCreate.campCreateStep2.prototypeHintSelected')
+      }
+    },
+    prototypePreview() {
+      if (this.localCamp.campPrototype) {
+        return this.api.get(this.localCamp.campPrototype)
+      }
+      return null
+    },
+    campPrototypes() {
+      return this.api
+        .get()
+        .camps({ isPrototype: true })
+        .items.map((ct) => ({
+          value: ct._meta.self,
+          text: this.$tc(ct.name),
+          object: ct,
+        }))
+    },
+  },
+  methods: { camelCase },
+}
+</script>
+
+<style scoped>
+.dashborder {
+  border: 2px dashed rgba(0, 0, 0, 0.15);
+}
+</style>
diff --git a/frontend/src/components/form/base/ESelect.vue b/frontend/src/components/form/base/ESelect.vue
index 8669badaa3..2401319292 100644
--- a/frontend/src/components/form/base/ESelect.vue
+++ b/frontend/src/components/form/base/ESelect.vue
@@ -5,6 +5,7 @@
     :name="name"
     :vid="veeId"
     :rules="veeRules"
+    :skip-if-empty="skipIfEmpty"
     :required="required"
     :immediate="immediateValidation"
     class="e-form-container"
@@ -38,6 +39,7 @@ export default {
   mixins: [formComponentPropsMixin, formComponentMixin],
   props: {
     immediateValidation: { type: Boolean, default: false },
+    skipIfEmpty: { type: Boolean, default: true },
   },
 }
 </script>
diff --git a/frontend/src/components/layout/ContentActions.vue b/frontend/src/components/layout/ContentActions.vue
new file mode 100644
index 0000000000..628f58f75e
--- /dev/null
+++ b/frontend/src/components/layout/ContentActions.vue
@@ -0,0 +1,13 @@
+<template>
+  <v-card-actions>
+    <div class="d-flex gap-2 flex-wrap flex-grow-1">
+      <slot />
+    </div>
+  </v-card-actions>
+</template>
+
+<script>
+export default {
+  name: 'ContentActions',
+}
+</script>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ec13094113..c0fcc1dcc2 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -132,6 +132,34 @@
         "moveScheduleEntries": "Aktivitäten verschieben"
       }
     },
+    "campCreate": {
+      "campCreate": {
+        "steps": {
+          "configurate": "Konfigurieren",
+          "infos": "Infos",
+          "template": "Vorlage"
+        }
+      },
+      "campCreateStep1": {
+        "submitTooltip": "Bitte fülle alle Pflichtfelder aus."
+      },
+      "campCreateStep2": {
+        "category": "Block-Kategorien",
+        "create": "Lager erstellen",
+        "noContent": "Keine Inhalte",
+        "noPrototype": "Keine Vorlage",
+        "noPrototypeAlert": {
+          "description": "Du musst alle Einstellungen manuell vornehmen. Es sind keine Blockvorlagen & Layouts vorhanden. Dies ist nur für erfahrene Nutzende geeignet.",
+          "title": "Achtung: Du hast \"Keine Vorlage\" ausgewählt."
+        },
+        "preview": "Vorschau der Lagervorlage",
+        "progressStates": "Blockstatus",
+        "prototypeHint": "Kopiere Kategorien, Blockvorlagen und Blockstatus von einer Lagervorlage",
+        "prototypeHintEmpty": "Keine Kategorien, Blockvorlagen und Blockstatus aus einer Lagervorlage kopieren",
+        "prototypeHintSelected": "Kopiere Kategorien, Blockvorlagen und Blockstatus von dieser Lagervorlage",
+        "submitTooltipPrototype": "Du must noch auswählen ob und welche Lagervorlage du verwenden möchtest."
+      }
+    },
     "collaborator": {
       "collaboratorCreate": {
         "invite": "Einladung verschicken",
@@ -381,6 +409,7 @@
       "cancel": "Abbrechen",
       "close": "Schliessen",
       "content": "Inhalt",
+      "continue": "Weiter",
       "create": "Erstellen",
       "delete": "Löschen",
       "discard": "Verwerfen",
@@ -610,11 +639,6 @@
       }
     },
     "campCreate": {
-      "create": "Lager erstellen",
-      "period": {
-        "add": "Weiteren Lagerabschnitt hinzufügen",
-        "remove": "Diesen Lagerabschnitt entfernen"
-      },
       "title": "Lager erstellen"
     },
     "camps": {
@@ -645,4 +669,4 @@
       "profile": "Profil"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index c685492360..13aa5b0cb2 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -132,6 +132,34 @@
         "moveScheduleEntries": "Move schedule entries"
       }
     },
+    "campCreate": {
+      "campCreate": {
+        "steps": {
+          "configurate": "Configure",
+          "infos": "Info",
+          "template": "Template"
+        }
+      },
+      "campCreateStep1": {
+        "submitTooltip": "Please fill out all required fields."
+      },
+      "campCreateStep2": {
+        "category": "Activity categories",
+        "create": "Create the Camp",
+        "noContent": "No Content",
+        "noPrototype": "No template",
+        "noPrototypeAlert": {
+          "description": "You must make all settings manually. There are no block templates & layouts available. This is only suitable for experienced users.",
+          "title": "Attention: You chose \"No template\"."
+        },
+        "preview": "Preview of camp template",
+        "progressStates": "Activity states",
+        "prototypeHint": "Copy categories, activity templates and states from a template.",
+        "prototypeHintEmpty": "Don't copy categories, activity templates and states.",
+        "prototypeHintSelected": "Copy categories, activity templates and states from this template.",
+        "submitTooltipPrototype": "You need to choose if and which template you want."
+      }
+    },
     "collaborator": {
       "collaboratorCreate": {
         "invite": "Send invitation",
@@ -381,6 +409,7 @@
       "cancel": "Cancel",
       "close": "Close",
       "content": "Content",
+      "continue": "Continue",
       "create": "Create",
       "delete": "Delete",
       "discard": "Discard",
@@ -610,11 +639,6 @@
       }
     },
     "campCreate": {
-      "create": "Create the Camp",
-      "period": {
-        "add": "Add a period",
-        "remove": "Remove period"
-      },
       "title": "Create a Camp"
     },
     "camps": {
@@ -645,4 +669,4 @@
       "profile": "Profile"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index 80b01dbb1a..c1d0cb6992 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -124,6 +124,34 @@
         "moveScheduleEntries": "Déplacer les entrées du calendrier"
       }
     },
+    "campCreate": {
+      "campCreate": {
+        "steps": {
+          "configurate": "Configuration",
+          "infos": "Info",
+          "template": "Modèle"
+        }
+      },
+      "campCreateStep1": {
+        "submitTooltip": "Remplis tous les champs obligatoires."
+      },
+      "campCreateStep2": {
+        "category": "Catégories d'activités",
+        "create": "Créer le camp",
+        "noContent": "Pas de contenu",
+        "noPrototype": "Pas de modèle",
+        "noPrototypeAlert": {
+          "description": "Tu dois effectuer tous les réglages manuellement. Il n'y a pas de modèles de blocs ni de mises en page. Ceci ne convient qu'aux utilisateurs expérimentés.",
+          "title": "Attention : Vous avez choisi \"Pas de modèle\"."
+        },
+        "preview": "Aperçu du modèle du camp",
+        "progressStates": "États d'activités",
+        "prototypeHint": "Copie les catégories, les modèles de blocs et les états de blocs d'un modèle de camp.",
+        "prototypeHintEmpty": "Ne pas copier de catégories, de modèles de blocs et de statuts de blocs à partir d'un modèle de camp.",
+        "prototypeHintSelected": "Copie les catégories, les modèles de blocs et les statuts de blocs de ce modèle de camp.",
+        "submitTooltipPrototype": "Tu dois encore choisir si tu veux utiliser un modèle de champ et lequel."
+      }
+    },
     "collaborator": {
       "collaboratorCreate": {
         "invite": "Envoyer l'invitation",
@@ -364,6 +392,7 @@
       "cancel": "Annuler",
       "close": "Fermer",
       "content": "Contenu",
+      "continue": "Continuer",
       "create": "Créer",
       "delete": "Effacer",
       "discard": "Rejeter",
@@ -590,11 +619,6 @@
       }
     },
     "campCreate": {
-      "create": "Créer le camp",
-      "period": {
-        "add": "Ajouter une période",
-        "remove": "Effacer la période"
-      },
       "title": "Créer un camp"
     },
     "camps": {
@@ -625,4 +649,4 @@
       "profile": "Profil"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index 75d3ea7fcb..2fea368e44 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -124,6 +124,34 @@
         "moveScheduleEntries": "Sposta le voci del programma"
       }
     },
+    "campCreate": {
+      "campCreate": {
+        "steps": {
+          "configurate": "Configurazione",
+          "infos": "Info",
+          "template": "Modello"
+        }
+      },
+      "campCreateStep1": {
+        "submitTooltip": "Compilare tutti i campi richiesti."
+      },
+      "campCreateStep2": {
+        "category": "Categorie di attività",
+        "create": "Creare il campo",
+        "noContent": "Nessun contenuto",
+        "noPrototype": "Nessun modello",
+        "noPrototypeAlert": {
+          "description": "È necessario effettuare tutte le impostazioni manualmente. Non sono disponibili modelli e layout di blocco. È adatto solo agli utenti esperti.",
+          "title": "Nota bene: avete scelto \"Nessun modello\"."
+        },
+        "preview": "Anteprima del modello di campo",
+        "progressStates": "Stati di attività",
+        "prototypeHint": "Copiare le categorie, i modelli di blocco e stati di blocchi da un modello di campo.",
+        "prototypeHintEmpty": "Non copiare categorie, modelli di blocco e stati di blocco da un modello di campo.",
+        "prototypeHintSelected": "Copiate le categorie, i modelli di blocco e stati di blocchi da questo modello di campo.",
+        "submitTooltipPrototype": "È ancora necessario selezionare se e quale modello di campo si desidera utilizzare."
+      }
+    },
     "collaborator": {
       "collaboratorCreate": {
         "invite": "Inviare l'invito",
@@ -364,6 +392,7 @@
       "cancel": "Annullare",
       "close": "Chiudi",
       "content": "Contenuto",
+      "continue": "Continuare",
       "create": "Creare",
       "delete": "Cancellare",
       "discard": "Scartare",
@@ -590,11 +619,6 @@
       }
     },
     "campCreate": {
-      "create": "Creare il campo",
-      "period": {
-        "add": "Aggiungere un periodo",
-        "remove": "Cancellare un periodo"
-      },
       "title": "Creare il campo"
     },
     "camps": {
@@ -625,4 +649,4 @@
       "profile": "Profilo"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/scss/global.scss b/frontend/src/scss/global.scss
index cdf92bcf98..152464e536 100644
--- a/frontend/src/scss/global.scss
+++ b/frontend/src/scss/global.scss
@@ -60,6 +60,10 @@ body {
     padding-left: 0;
   }
 
+  .min-h-0 {
+    min-height: 0;
+  }
+
   .e-title-link {
     color: #000;
     text-decoration-color: #1976d2;
diff --git a/frontend/src/views/CampCreate.vue b/frontend/src/views/CampCreate.vue
index 98aaaf19c7..3dbf86680c 100644
--- a/frontend/src/views/CampCreate.vue
+++ b/frontend/src/views/CampCreate.vue
@@ -1,141 +1,20 @@
 <template>
   <v-container fluid>
     <content-card max-width="800" :title="$tc('views.campCreate.title')" toolbar>
-      <ValidationObserver v-slot="{ handleSubmit }">
-        <v-form ref="form" @submit.prevent="handleSubmit(createCamp)">
-          <v-card-text>
-            <server-error :server-error="serverError" />
-            <e-text-field
-              v-model="camp.name"
-              :name="$tc('entity.camp.fields.name')"
-              vee-rules="required"
-              required
-              autofocus
-            />
-            <e-text-field
-              v-model="camp.title"
-              :name="$tc('entity.camp.fields.title')"
-              vee-rules="required"
-              required
-            />
-            <e-text-field v-model="camp.motto" :name="$tc('entity.camp.fields.motto')" />
-            <e-select
-              v-model="camp.campPrototype"
-              :name="$tc('entity.camp.prototype')"
-              :items="campTemplates"
-            >
-              <template #item="data">
-                <v-list-item v-bind="data.attrs" v-on="data.on">
-                  <v-list-item-content>
-                    {{ data.item.text }}
-                  </v-list-item-content>
-                </v-list-item>
-              </template>
-            </e-select>
-            <create-camp-periods
-              :add-period="addPeriod"
-              :periods="camp.periods"
-              :delete-period="deletePeriod"
-              :period-deletable="periodDeletable"
-            />
-          </v-card-text>
-          <v-divider />
-          <v-card-text class="text-right">
-            <button-cancel :disabled="isSaving" @click="$router.go(-1)" />
-            <button-add type="submit" :loading="isSaving">
-              {{ $tc('views.campCreate.create') }}
-            </button-add>
-          </v-card-text>
-        </v-form>
-      </ValidationObserver>
+      <CampCreate />
     </content-card>
   </v-container>
 </template>
 
 <script>
-import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
-import ButtonCancel from '@/components/buttons/ButtonCancel.vue'
 import ContentCard from '@/components/layout/ContentCard.vue'
-import ETextField from '@/components/form/base/ETextField.vue'
-import { campRoute } from '@/router.js'
-import ServerError from '@/components/form/ServerError.vue'
-import { ValidationObserver } from 'vee-validate'
-import CreateCampPeriods from '@/components/campAdmin/CreateCampPeriods.vue'
+import CampCreate from '@/components/campCreate/CampCreate.vue'
 
 export default {
   name: 'Camps',
   components: {
-    CreateCampPeriods,
-    ButtonAdd,
-    ButtonCancel,
+    CampCreate,
     ContentCard,
-    ETextField,
-    ValidationObserver,
-    ServerError,
-  },
-  data() {
-    return {
-      camp: {
-        name: '',
-        title: '',
-        motto: '',
-        periods: [
-          {
-            start: '',
-            end: '',
-            description: this.$tc('entity.period.defaultDescription'),
-          },
-        ],
-      },
-      serverError: null,
-      isSaving: false,
-    }
-  },
-  computed: {
-    campTemplates() {
-      return this.api
-        .get()
-        .camps({ isPrototype: true })
-        .items.map((ct) => ({
-          value: ct._meta.self,
-          text: this.$tc(ct.name),
-          object: ct,
-        }))
-    },
-    periodDeletable() {
-      return this.camp.periods.length > 1
-    },
-    campsUrl() {
-      return this.api.get().camps()._meta.self
-    },
-  },
-  created() {},
-  methods: {
-    createCamp: async function () {
-      this.isSaving = true
-
-      try {
-        const camp = await this.api.post(this.campsUrl, this.camp)
-        await this.$router.push(campRoute(camp, 'admin'))
-        this.api.reload(this.campsUrl)
-      } catch (error) {
-        this.serverError = error
-      }
-
-      this.isSaving = false
-    },
-    addPeriod: function () {
-      this.camp.periods.push({
-        start: '',
-        end: '',
-        description: '',
-      })
-    },
-    deletePeriod: function (idx) {
-      this.camp.periods.splice(idx, 1)
-    },
   },
 }
 </script>
-
-<style scoped></style>