diff --git a/apps/api/prisma/migrations/20260304182124_custom_field_order/migration.sql b/apps/api/prisma/migrations/20260304182124_custom_field_order/migration.sql
new file mode 100644
index 00000000..79c1d2b8
--- /dev/null
+++ b/apps/api/prisma/migrations/20260304182124_custom_field_order/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "CustomField" ADD COLUMN     "order" INTEGER;
diff --git a/apps/api/prisma/schema/CustomField.prisma b/apps/api/prisma/schema/CustomField.prisma
index 0a1415df..ac05f0a7 100644
--- a/apps/api/prisma/schema/CustomField.prisma
+++ b/apps/api/prisma/schema/CustomField.prisma
@@ -19,6 +19,7 @@ model CustomField {
   id                   String                @id @default(uuid(7))
   name                 String
   description          String?
+  order                Int?
   type                 CustomFieldType
   required             Boolean               @default(false)
   options              String[]
diff --git a/apps/api/src/services/customFields/customFields.router.ts b/apps/api/src/services/customFields/customFields.router.ts
index 3e38d8cc..5f861fa8 100644
--- a/apps/api/src/services/customFields/customFields.router.ts
+++ b/apps/api/src/services/customFields/customFields.router.ts
@@ -9,6 +9,8 @@ import { customFieldsVeranstaltungCreate } from './customFieldsVeranstaltungCrea
 import { customFieldsVeranstaltungDelete, customFieldsUnterveranstaltungDelete } from './customFieldsDelete.js'
 import { customFieldsUpdate } from './customFieldsUpdate.js'
 import { customFieldValuesUpdate } from './customFieldValuesUpdate.js'
+import { customFieldUnterveranstaltungOrder } from './schema/customFieldsUnterveranstaltungOrder.js'
+import { customFieldVeranstaltungOrder } from './schema/customFieldsVeranstaltungOrder.js'
 // Import Routes here - do not delete this line
 
 export const customFieldsRouter = mergeRouters(
@@ -21,6 +23,8 @@ export const customFieldsRouter = mergeRouters(
   customFieldsUnterveranstaltungDelete,
   customFieldsUnterveranstaltungCreate,
   customFieldValuesUpdate,
-  customFieldsTemplates
+  customFieldsTemplates,
+  customFieldVeranstaltungOrder,
+  customFieldUnterveranstaltungOrder
   // Add Routes here - do not delete this line
 )
diff --git a/apps/api/src/services/customFields/customFieldsList.ts b/apps/api/src/services/customFields/customFieldsList.ts
index f7d9a09c..35fbd0f9 100644
--- a/apps/api/src/services/customFields/customFieldsList.ts
+++ b/apps/api/src/services/customFields/customFieldsList.ts
@@ -2,7 +2,7 @@ import { z } from 'zod'
 
 import { CustomFieldPosition, CustomFieldType, Prisma } from '@prisma/client'
 import prisma from '../../prisma.js'
-import { definePublicQueryProcedure } from '../../types/defineProcedure.js'
+import { defineProtectedQueryProcedure, definePublicQueryProcedure } from '../../types/defineProcedure.js'
 import {
   calculatePagination,
   defineEmptyQueryResponse,
@@ -10,6 +10,7 @@ import {
   defineTableInput,
 } from '../../types/defineTableProcedure.js'
 import { boolish } from '../../util/zod.js'
+import { getGliederungRequireAdmin } from '../../util/getGliederungRequireAdmin.js'
 
 const baseFilter = z.strictObject({
   entity: z.enum(['veranstaltung', 'unterveranstaltung']),
@@ -23,6 +24,7 @@ export const customFieldsTable = definePublicQueryProcedure({
   async handler({ input: { entity, entityId, position } }) {
     if (entity === 'veranstaltung') {
       return await prisma.customField.findMany({
+        orderBy: [{ order: { sort: 'asc', nulls: 'last' } }],
         where: {
           veranstaltungId: entityId,
           positions:
@@ -35,6 +37,14 @@ export const customFieldsTable = definePublicQueryProcedure({
       })
     } else if (entity === 'unterveranstaltung') {
       return await prisma.customField.findMany({
+        orderBy: [
+          {
+            unterveranstaltungId: { sort: 'asc', nulls: 'first' },
+          },
+          {
+            order: { sort: 'asc', nulls: 'last' },
+          },
+        ],
         where: {
           positions:
             position === undefined
@@ -64,8 +74,9 @@ export const customFieldsTable = definePublicQueryProcedure({
   },
 })
 
-export const customFieldsList = definePublicQueryProcedure({
+export const customFieldsList = defineProtectedQueryProcedure({
   key: 'table',
+  roleIds: ['ADMIN', 'GLIEDERUNG_ADMIN'],
   inputSchema: baseFilter.extend({
     table: defineTableInput({
       filter: {
@@ -74,10 +85,14 @@ export const customFieldsList = definePublicQueryProcedure({
         required: boolish,
         position: z.nativeEnum(CustomFieldPosition),
       },
-      orderBy: ['name'],
+      orderBy: ['name', 'order'],
     }),
   }),
-  async handler({ input }) {
+  async handler({ ctx, input }) {
+    if (ctx.account.role === 'GLIEDERUNG_ADMIN') {
+      await getGliederungRequireAdmin(ctx.accountId)
+    }
+
     const where: Prisma.CustomFieldWhereInput = {
       name: {
         contains: input.table?.filter?.name,
@@ -93,6 +108,25 @@ export const customFieldsList = definePublicQueryProcedure({
             },
     }
 
+    if (input.entity === 'veranstaltung') {
+      where.veranstaltungId = input.entityId
+    } else if (input.entity === 'unterveranstaltung') {
+      where.OR = [
+        {
+          unterveranstaltungId: input.entityId,
+        },
+        {
+          veranstaltung: {
+            unterveranstaltungen: {
+              some: {
+                id: input.entityId,
+              },
+            },
+          },
+        },
+      ]
+    }
+
     const total = await prisma.customField.count({ where })
     const { pageIndex, pageSize, pages } = calculatePagination(total, input.table?.pagination)
 
@@ -100,15 +134,13 @@ export const customFieldsList = definePublicQueryProcedure({
       const customFields = await prisma.customField.findMany({
         take: pageSize,
         skip: pageSize * pageIndex,
-        where: {
-          ...where,
-          veranstaltungId: input.entityId,
-        },
+        where,
         orderBy: input.table?.orderBy,
         select: {
           id: true,
           name: true,
           description: true,
+          order: true,
           type: true,
           positions: true,
           required: true,
@@ -122,27 +154,18 @@ export const customFieldsList = definePublicQueryProcedure({
       const customFields = await prisma.customField.findMany({
         take: pageSize,
         skip: pageSize * pageIndex,
-        where: {
-          ...where,
-          OR: [
-            {
-              unterveranstaltungId: input.entityId,
-            },
-            {
-              veranstaltung: {
-                unterveranstaltungen: {
-                  some: {
-                    id: input.entityId,
-                  },
-                },
-              },
-            },
-          ],
-        },
+        orderBy: [
+          {
+            unterveranstaltungId: { sort: 'asc', nulls: 'first' },
+          },
+          ...(input.table?.orderBy ?? []),
+        ],
+        where,
         select: {
           id: true,
           name: true,
           description: true,
+          order: true,
           type: true,
           positions: true,
           required: true,
diff --git a/apps/api/src/services/customFields/schema/customField.schema.ts b/apps/api/src/services/customFields/schema/customField.schema.ts
index 8172e451..af4585c1 100644
--- a/apps/api/src/services/customFields/schema/customField.schema.ts
+++ b/apps/api/src/services/customFields/schema/customField.schema.ts
@@ -1,11 +1,21 @@
 import { CustomFieldPosition, CustomFieldType } from '@prisma/client'
 import { z } from 'zod'
 
-export const customFieldSchema = z.strictObject({
-  name: z.string().min(1),
-  description: z.string().nullable(),
-  type: z.nativeEnum(CustomFieldType),
-  required: z.boolean(),
-  options: z.array(z.string()),
-  positions: z.nativeEnum(CustomFieldPosition).array(),
-})
+export const customFieldSchema = z
+  .strictObject({
+    name: z.string().min(1),
+    description: z.string().nullable(),
+    type: z.nativeEnum(CustomFieldType),
+    required: z.boolean(),
+    options: z.array(z.string()),
+    positions: z.nativeEnum(CustomFieldPosition).array().min(1),
+  })
+  .superRefine((values, ctx) => {
+    const optionTypes = ['BASIC_DROPDOWN', 'BASIC_RADIO', 'BASIC_SWITCH'] as CustomFieldType[]
+    if (optionTypes.includes(values.type) && values.options.length === 0) {
+      ctx.addIssue({
+        code: 'custom',
+        message: 'Es muss mindestens eine Auswahlmöglichkeit angegeben werden',
+      })
+    }
+  })
diff --git a/apps/api/src/services/customFields/schema/customFieldsUnterveranstaltungOrder.ts b/apps/api/src/services/customFields/schema/customFieldsUnterveranstaltungOrder.ts
new file mode 100644
index 00000000..2b0f974a
--- /dev/null
+++ b/apps/api/src/services/customFields/schema/customFieldsUnterveranstaltungOrder.ts
@@ -0,0 +1,54 @@
+import z from 'zod'
+import { defineProtectedMutateProcedure } from '../../../types/defineProcedure.js'
+import { getGliederungRequireAdmin } from '../../../util/getGliederungRequireAdmin.js'
+import { TRPCError } from '@trpc/server'
+import prisma from '../../../prisma.js'
+
+export const customFieldUnterveranstaltungOrder = defineProtectedMutateProcedure({
+  key: 'unterveranstaltungOrder',
+  roleIds: ['ADMIN', 'GLIEDERUNG_ADMIN'],
+  inputSchema: z.strictObject({
+    unterveranstaltungId: z.string().uuid(),
+    fields: z.array(z.string().uuid()),
+  }),
+  handler: async ({ ctx, input }) => {
+    if (ctx.account.role === 'GLIEDERUNG_ADMIN') {
+      const gliederung = await getGliederungRequireAdmin(ctx.accountId)
+      if (gliederung.id !== input.unterveranstaltungId) {
+        throw new TRPCError({
+          code: 'FORBIDDEN',
+        })
+      }
+    }
+
+    const fields = await prisma.customField.findMany({
+      where: {
+        unterveranstaltungId: input.unterveranstaltungId,
+        id: {
+          in: input.fields,
+        },
+      },
+    })
+
+    if (fields.length !== input.fields.length) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'Some supplied fields do not belong to the given unterveranstaltung!',
+      })
+    }
+
+    await prisma.$transaction(
+      input.fields.map((field, index) =>
+        prisma.customField.update({
+          where: {
+            unterveranstaltungId: input.unterveranstaltungId,
+            id: field,
+          },
+          data: {
+            order: index + 1,
+          },
+        })
+      )
+    )
+  },
+})
diff --git a/apps/api/src/services/customFields/schema/customFieldsVeranstaltungOrder.ts b/apps/api/src/services/customFields/schema/customFieldsVeranstaltungOrder.ts
new file mode 100644
index 00000000..3cc63732
--- /dev/null
+++ b/apps/api/src/services/customFields/schema/customFieldsVeranstaltungOrder.ts
@@ -0,0 +1,44 @@
+import { TRPCError } from '@trpc/server'
+import z from 'zod'
+import prisma from '../../../prisma.js'
+import { defineProtectedMutateProcedure } from '../../../types/defineProcedure.js'
+
+export const customFieldVeranstaltungOrder = defineProtectedMutateProcedure({
+  key: 'veranstaltungOrder',
+  roleIds: ['ADMIN'],
+  inputSchema: z.strictObject({
+    veranstaltungId: z.string().uuid(),
+    fields: z.array(z.string().uuid()),
+  }),
+  handler: async ({ input }) => {
+    const fields = await prisma.customField.findMany({
+      where: {
+        veranstaltungId: input.veranstaltungId,
+        id: {
+          in: input.fields,
+        },
+      },
+    })
+
+    if (fields.length !== input.fields.length) {
+      throw new TRPCError({
+        code: 'BAD_REQUEST',
+        message: 'Some supplied fields do not belong to the given veranstaltung!',
+      })
+    }
+
+    await prisma.$transaction(
+      input.fields.map((field, index) =>
+        prisma.customField.update({
+          where: {
+            veranstaltungId: input.veranstaltungId,
+            id: field,
+          },
+          data: {
+            order: index + 1,
+          },
+        })
+      )
+    )
+  },
+})
diff --git a/apps/frontend/src/components/CustomFields/CustomFieldsTable.vue b/apps/frontend/src/components/CustomFields/CustomFieldsTable.vue
index f9bcf945..2ec38a34 100644
--- a/apps/frontend/src/components/CustomFields/CustomFieldsTable.vue
+++ b/apps/frontend/src/components/CustomFields/CustomFieldsTable.vue
@@ -32,6 +32,18 @@ const router = useRouter()
 
 const column = createColumnHelper<CustomField>()
 const columns = [
+  column.accessor('order', {
+    header: 'Reihenfolge',
+    enableSorting: true,
+    cell({ getValue }) {
+      const order = getValue()
+      if (!order) {
+        return '-'
+      }
+
+      return order
+    },
+  }),
   column.accessor('name', {
     header: 'Name',
     enableColumnFilter: true,
@@ -174,6 +186,7 @@ function onClick(field: CustomField) {
   <DataTable
     :query="query"
     :columns="columns"
+    :initial-sort="[{ id: 'order', desc: false }]"
     @click="onClick"
   />
 </template>
diff --git a/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungOrder.vue b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungOrder.vue
new file mode 100644
index 00000000..8cb874a9
--- /dev/null
+++ b/apps/frontend/src/views/Unterveranstaltung/CustomFields/CustomFieldUnterveranstaltungOrder.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { apiClient } from '@/api'
+import Notification from '@/components/LayoutComponents/Notifications.vue'
+import Button from '@/components/UIComponents/Button.vue'
+import { useRouteTitle } from '@/composables/useRouteTitle'
+import cn from '@/helpers/cn'
+import { CustomFieldTypeMapping, type CustomField } from '@codeanker/api'
+import { groupBy } from '@codeanker/helpers'
+import { ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { useRouteParams } from '@vueuse/router'
+import { computed, ref, watch } from 'vue'
+import { RouterLink } from 'vue-router'
+
+const { setTitle } = useRouteTitle()
+setTitle('Benutzerdefinierte Felder sortieren')
+
+const unterveranstaltungId = useRouteParams<string>('unterveranstaltungId')
+
+const { data, dataUpdatedAt, refetch } = useQuery({
+  queryKey: ['customFields', 'unterveranstaltung', unterveranstaltungId],
+  queryFn: () =>
+    apiClient.customFields.list.query({
+      entity: 'unterveranstaltung',
+      entityId: unterveranstaltungId.value,
+    }),
+  enabled: () => !!unterveranstaltungId.value,
+})
+
+const copy = ref<CustomField[]>([])
+
+watch(dataUpdatedAt, () => {
+  if (data.value) {
+    copy.value = [...data.value]
+  }
+})
+
+function formatType(field: CustomField) {
+  const { human } = CustomFieldTypeMapping[field.type]
+  return human
+}
+
+function formatSource(field: CustomField) {
+  if (field.veranstaltungId) {
+    return 'Veranstaltung'
+  } else if (field.unterveranstaltungId) {
+    return 'Ausschreibung'
+  }
+  return '-'
+}
+
+type Grouped = {
+  veranstaltung: CustomField[]
+  ausschreibung: CustomField[]
+}
+
+const fields = computed<Grouped>(() => {
+  return groupBy(copy.value, (field) => {
+    if (field.veranstaltungId !== null) {
+      return 'veranstaltung'
+    }
+    if (field.unterveranstaltungId !== null) {
+      return 'ausschreibung'
+    }
+    return 'invalid'
+  })
+})
+
+function moveUp(index: number) {
+  const offset = fields.value.veranstaltung.length
+  const realIndex = index + offset
+
+  const rows = [copy.value[realIndex - 1], copy.value[realIndex]]
+  copy.value.splice(realIndex - 1, 2, rows[1], rows[0])
+}
+
+function moveDown(index: number) {
+  const offset = fields.value.veranstaltung.length
+  const realIndex = index + offset
+
+  const rows = [copy.value[realIndex], copy.value[realIndex + 1]]
+  copy.value.splice(realIndex, 2, rows[1], rows[0])
+}
+
+const showNotification = ref(false)
+
+const { mutate, isPending } = useMutation({
+  mutationFn: async () => {
+    const ids = fields.value.ausschreibung.map(({ id }) => id)
+    await apiClient.customFields.unterveranstaltungOrder.mutate({
+      unterveranstaltungId: unterveranstaltungId.value,
+      fields: ids,
+    })
+    showNotification.value = true
+    await refetch()
+  },
+})
+</script>
+
+<template>
+  <div class="mb-8">
+    <RouterLink
+      :to="{ name: 'UnterveranstaltungDetail', params: { unterveranstaltungId }, query: { tab: 4 } }"
+      class="text-primary-600 flex flex-row items-center gap-x-2"
+    >
+      <ArrowLeftIcon class="size-4" />
+      <span>Zurück zur Ausschreibung</span>
+    </RouterLink>
+  </div>
+
+  <div class="mb-8">
+    <div class="text-lg font-semibold">Reihenfolge ändern</div>
+    <p class="text-sm text-gray-500">
+      Hier kann die Reihenfolge der benutzerdefinierten Felder deiner Ausschreibung verändert werden.
+    </p>
+  </div>
+
+  <table class="w-full">
+    <thead class="bg-primary-700 text-white">
+      <tr>
+        <th class="text-left px-2 py-4 border-b-2">Reihenfolge</th>
+        <th class="text-left px-2 py-4 border-b-2">Name</th>
+        <th class="text-left px-2 py-4 border-b-2">Typ</th>
+        <th class="text-left px-2 py-4 border-b-2">Quelle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="(_, group) in fields">
+        <tr
+          v-for="(field, index) in fields[group]"
+          :key="field.id"
+          :class="
+            cn({
+              'even:bg-slate-50 dark:even:bg-slate-800': !!field.unterveranstaltungId,
+              'text-gray-400 italic cursor-not-allowed': !!field.veranstaltungId,
+            })
+          "
+        >
+          <td class="px-2 py-4 flex flex-row justify-between">
+            <div class="space-x-2">
+              <span>{{ field.order || '-' }}</span>
+              <span class="opacity-50"
+                >( <i>{{ index + 1 }}</i> )</span
+              >
+            </div>
+            <div
+              v-if="!!field.unterveranstaltungId"
+              class="space-x-2"
+            >
+              <Button
+                :disabled="index === 0"
+                @click="moveUp(index)"
+              >
+                <ChevronUpIcon class="size-4" />
+              </Button>
+              <Button
+                :disabled="index >= fields[group].length - 1"
+                @click="moveDown(index)"
+              >
+                <ChevronDownIcon class="size-4" />
+              </Button>
+            </div>
+          </td>
+          <td class="px-2 py-4">{{ field.name }}</td>
+          <td class="px-2 py-4">{{ formatType(field) }}</td>
+          <td class="px-2 py-4">{{ formatSource(field) }}</td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+
+  <p class="text-sm">
+    <b>Hinweis</b>: Die Spalte <b>Reihenfolge</b> gliedert sich wie folgt: Die erste Zahl zeigt die aktuelle Position in
+    der Reihenfolge wohingegen die Zahl in der Klammer die neue Position anzeigt.
+  </p>
+
+  <div class="mt-8 space-x-4">
+    <Button
+      :disabled="isPending"
+      @click="mutate"
+    >
+      Speichern
+    </Button>
+    <Button
+      color="danger"
+      :disabled="isPending"
+      :to="{ name: 'UnterveranstaltungDetail', params: { unterveranstaltungId }, query: { tab: 4 } }"
+    >
+      Abbrechen
+    </Button>
+  </div>
+
+  <Notification
+    v-if="showNotification"
+    :duration="2000"
+    @close="showNotification = false"
+  >
+    <template #title> Erfolgreich gespeichert </template>
+    <template #content>
+      <p class="mt-1 text-sm text-gray-500">Deine Änderungen wurden erfolgreich gespeichert.</p>
+    </template>
+  </Notification>
+</template>
diff --git a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
index 8c8f7e8a..83b18296 100644
--- a/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
+++ b/apps/frontend/src/views/Unterveranstaltung/UnterveranstaltungDetail.vue
@@ -2,12 +2,14 @@
 import {
   CameraIcon,
   ChatBubbleLeftRightIcon,
+  ChevronUpDownIcon,
   CodeBracketIcon,
   DocumentDuplicateIcon,
   DocumentIcon,
   HandRaisedIcon,
   LinkIcon,
   MegaphoneIcon,
+  PlusIcon,
   RocketLaunchIcon,
   SquaresPlusIcon,
   UserGroupIcon,
@@ -371,15 +373,28 @@ const anmeldeLinkCreateModal = useTemplateRef('anmeldeLinkCreateModal')
               Hier können benutzerdefinierte Felder erstellt werden, welche für alle Unterveranstaltungen gelten.
             </p>
           </div>
+          <div class="flex items-center gap-x-4">
           <RouterLink
-            class="text-primary-600"
+              class="text-primary-600 flex items-center gap-x-1"
             :to="{
               name: 'Unterveranstaltung Custom Field erstellen',
               params: { veranstaltungId: route.params.veranstaltungId },
             }"
           >
-            Neues Feld
+              <PlusIcon class="size-4" />
+              <span>Neues Feld</span>
           </RouterLink>
+            <RouterLink
+              class="text-primary-600 flex items-center gap-x-1"
+              :to="{
+                name: 'Unterveranstaltung Custom Fields sortieren',
+                params: { unterveranstaltungId: route.params.unterveranstaltungId },
+              }"
+            >
+              <ChevronUpDownIcon class="size-4" />
+              <span>Reihenfolge ändern</span>
+            </RouterLink>
+          </div>
         </div>
         <CustomFieldsTable
           v-if="unterveranstaltung?.id"
diff --git a/apps/frontend/src/views/Unterveranstaltung/routes.ts b/apps/frontend/src/views/Unterveranstaltung/routes.ts
index 1d910027..2ad419f2 100644
--- a/apps/frontend/src/views/Unterveranstaltung/routes.ts
+++ b/apps/frontend/src/views/Unterveranstaltung/routes.ts
@@ -80,6 +80,19 @@ export const routesUnterveranstaltung: Route[] = [
           ],
         },
       },
+      {
+        name: 'Unterveranstaltung Custom Fields sortieren',
+        path: ':unterveranstaltungId/fields/order',
+        component: () => import('./CustomFields/CustomFieldUnterveranstaltungOrder.vue'),
+        meta: {
+          breadcrumbs: [
+            detailCrumb,
+            {
+              text: 'Benutzerdefinierte Felder sortieren',
+            },
+          ],
+        },
+      },
       {
         name: 'Unterveranstaltung Custom Field bearbeiten',
         path: ':unterveranstaltungId/fields/:fieldId',
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungOrder.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungOrder.vue
new file mode 100644
index 00000000..ddcef8b9
--- /dev/null
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/CustomFields/CustomFieldVeranstaltungOrder.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { apiClient } from '@/api'
+import Notification from '@/components/LayoutComponents/Notifications.vue'
+import Button from '@/components/UIComponents/Button.vue'
+import { useRouteTitle } from '@/composables/useRouteTitle'
+import { CustomFieldTypeMapping, type CustomField } from '@codeanker/api'
+import { ArrowLeftIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { useRouteParams } from '@vueuse/router'
+import { ref, watch } from 'vue'
+
+const { setTitle } = useRouteTitle()
+setTitle('Benutzerdefinierte Felder sortieren')
+
+const veranstaltungId = useRouteParams<string>('veranstaltungId')
+
+const { data, dataUpdatedAt, refetch } = useQuery({
+  queryKey: ['customFields', 'veranstaltung', veranstaltungId.value],
+  queryFn: () =>
+    apiClient.customFields.list.query({
+      entity: 'veranstaltung',
+      entityId: veranstaltungId.value,
+    }),
+  enabled: () => !!veranstaltungId.value,
+  initialData: [],
+})
+
+const copy = ref<CustomField[]>([])
+
+watch(dataUpdatedAt, () => {
+  if (data.value) {
+    copy.value = [...data.value]
+  }
+})
+
+function formatType(field: CustomField) {
+  const { human } = CustomFieldTypeMapping[field.type]
+  return human
+}
+
+function moveUp(index: number) {
+  const rows = [copy.value[index - 1], copy.value[index]]
+  copy.value.splice(index - 1, 2, rows[1], rows[0])
+}
+
+function moveDown(index: number) {
+  const rows = [copy.value[index], copy.value[index + 1]]
+  copy.value.splice(index, 2, rows[1], rows[0])
+}
+
+const showNotification = ref(false)
+
+const { mutate, isPending } = useMutation({
+  mutationFn: async () => {
+    const ids = copy.value.map(({ id }) => id)
+    await apiClient.customFields.veranstaltungOrder.mutate({
+      veranstaltungId: veranstaltungId.value,
+      fields: ids,
+    })
+    showNotification.value = true
+    await refetch()
+  },
+})
+</script>
+
+<template>
+  <div class="mb-8">
+    <RouterLink
+      :to="{ name: 'Verwaltung Veranstaltungsdetails', params: { veranstaltungId }, query: { tab: 6 } }"
+      class="text-primary-600 flex flex-row items-center gap-x-2"
+    >
+      <ArrowLeftIcon class="size-4" />
+      <span>Zurück zur Veranstaltung</span>
+    </RouterLink>
+  </div>
+
+  <div class="mb-8">
+    <div class="text-lg font-semibold">Reihenfolge ändern</div>
+    <p class="text-sm text-gray-500">
+      Hier kann die Reihenfolge benutzerdefinierter Felder der Veranstaltung verändert werden.
+    </p>
+  </div>
+
+  <table class="w-full">
+    <thead class="bg-primary-700 text-white">
+      <tr>
+        <th class="text-left px-2 py-4 border-b-2">Reihenfolge</th>
+        <th class="text-left px-2 py-4 border-b-2">Name</th>
+        <th class="text-left px-2 py-4 border-b-2">Typ</th>
+        <th class="text-left px-2 py-4 border-b-2">Quelle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(field, index) in copy"
+        :key="field.id"
+        class="even:bg-slate-50 dark:even:bg-slate-800"
+      >
+        <td class="px-2 py-4 flex flex-row justify-between">
+          <div class="space-x-2">
+            <span>{{ field.order || '-' }}</span>
+            <span class="opacity-50"
+              >( <i>{{ index + 1 }}</i> )</span
+            >
+          </div>
+          <div class="space-x-2">
+            <Button
+              :disabled="index === 0"
+              @click="moveUp(index)"
+            >
+              <ChevronUpIcon class="size-4" />
+            </Button>
+            <Button
+              :disabled="index >= copy.length - 1"
+              @click="moveDown(index)"
+            >
+              <ChevronDownIcon class="size-4" />
+            </Button>
+          </div>
+        </td>
+        <td class="px-2 py-4">{{ field.name }}</td>
+        <td class="px-2 py-4">{{ formatType(field) }}</td>
+        <td class="px-2 py-4">Veranstaltung</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <p class="text-sm">
+    <b>Hinweis</b>: Die Spalte <b>Reihenfolge</b> gliedert sich wie folgt: Die erste Zahl zeigt die aktuelle Position in
+    der Reihenfolge wohingegen die Zahl in der Klammer die neue Position anzeigt.
+  </p>
+
+  <div class="mt-8 space-x-4">
+    <Button
+      :disabled="isPending"
+      @click="mutate"
+    >
+      Speichern
+    </Button>
+    <Button
+      color="danger"
+      :to="{ name: 'Verwaltung Veranstaltungsdetails', params: { veranstaltungId }, query: { tab: 6 } }"
+      :disabled="isPending"
+    >
+      Abbrechen
+    </Button>
+  </div>
+
+  <Notification
+    v-if="showNotification"
+    :duration="2000"
+    @close="showNotification = false"
+  >
+    <template #title> Erfolgreich gespeichert </template>
+    <template #content>
+      <p class="mt-1 text-sm text-gray-500">Deine Änderungen wurden erfolgreich gespeichert.</p>
+    </template>
+  </Notification>
+</template>
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
index 7730e943..74d2d789 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/VeranstaltungDetail.vue
@@ -10,6 +10,7 @@ import {
   RocketLaunchIcon,
   DocumentDuplicateIcon,
   LinkIcon,
+  ChevronUpDownIcon,
 } from '@heroicons/vue/24/outline'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
@@ -352,12 +353,25 @@ function copyProgramLink() {
             Hier können benutzerdefinierte Felder erstellt werden, welche für alle Unterveranstaltungen gelten.
           </p>
         </div>
-        <RouterLink
-          class="text-primary-600"
-          :to="{ name: 'Verwaltung Custom Field erstellen' }"
-        >
-          Neues Feld
-        </RouterLink>
+        <div class="flex items-center gap-x-4">
+          <RouterLink
+            class="text-primary-600 flex items-center gap-x-1"
+            :to="{ name: 'Verwaltung Custom Field erstellen' }"
+          >
+            <PlusIcon class="size-4" />
+            <span>Neues Feld</span>
+          </RouterLink>
+          <RouterLink
+            class="text-primary-600 flex items-center gap-x-1"
+            :to="{
+              name: 'Veranstaltung Custom Fields sortieren',
+              params: { veranstaltungId: route.params.veranstaltungId },
+            }"
+          >
+            <ChevronUpDownIcon class="size-4" />
+            <span>Reihenfolge ändern</span>
+          </RouterLink>
+        </div>
       </div>
       <CustomFieldsTable
         v-if="veranstaltung?.id"
diff --git a/apps/frontend/src/views/Verwaltung/Veranstaltungen/routes.ts b/apps/frontend/src/views/Verwaltung/Veranstaltungen/routes.ts
index 6d0d0aff..64e6bca3 100644
--- a/apps/frontend/src/views/Verwaltung/Veranstaltungen/routes.ts
+++ b/apps/frontend/src/views/Verwaltung/Veranstaltungen/routes.ts
@@ -80,6 +80,19 @@ const veranstaltungRoutes: Route[] = [
           ],
         },
       },
+      {
+        name: 'Veranstaltung Custom Fields sortieren',
+        path: ':veranstaltungId/fields/order',
+        component: () => import('./CustomFields/CustomFieldVeranstaltungOrder.vue'),
+        meta: {
+          breadcrumbs: [
+            detailCrumb,
+            {
+              text: 'Benutzerdefinierte Felder sortieren',
+            },
+          ],
+        },
+      },
       {
         name: 'Verwaltung Custom Field bearbeiten',
         path: ':veranstaltungId/fields/:fieldId',