diff --git a/frontend/components/System/DlnaProfileEditor.vue b/frontend/components/System/DlnaProfileEditor.vue
new file mode 100644
index 00000000000..8adbb614ed3
--- /dev/null
+++ b/frontend/components/System/DlnaProfileEditor.vue
@@ -0,0 +1,610 @@
+<template>
+  <v-card class="dlnaProfileEditor">
+    <v-row v-if="isDialog" class="ma-0 justify-space-between align-center">
+      <v-card-title>{{ selectedProfile.Name }}</v-card-title>
+      <v-btn icon class="mr-2" @click="$emit('close-dialog')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-row>
+    <v-card-title v-else>{{ currentProfile.Name }}</v-card-title>
+    <v-tabs v-model="tab" centered dark icons-and-text>
+      <v-tabs-slider />
+      <v-tab v-for="i in categories" :key="i" :href="'#tab-' + i">
+        {{ $t('settings.dlna.profile.' + i + '.title') }}
+      </v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="tab">
+      <v-tab-item value="tab-info">
+        <v-list>
+          <!-- General -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.general.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.info.general.name.text')"
+                />
+                <v-list-item-subtitle
+                  v-text="$t('settings.dlna.profile.info.general.name.info')"
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field v-model="currentProfile.Name" outlined dense />
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.general.userLibrary.info')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-select
+                  v-model="currentProfile.UserId"
+                  :items="users"
+                  item-text="Name"
+                  item-value="Id"
+                  outlined
+                  dense
+                  clearable
+                  :label="$t('settings.dlna.DefaultUserId.selector')"
+                  reverse
+                />
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.info.general.maxStreamQuality.text'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.info.general.maxStreamQuality.info'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model.number="currentProfile.MaxStreamingBitrate"
+                  type="number"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.info.general.musicTranscodeQuality.text'
+                    )
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t(
+                      'settings.dlna.profile.info.general.musicTranscodeQuality.info'
+                    )
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model.number="
+                    currentProfile.MusicStreamingTranscodingBitrate
+                  "
+                  type="number"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Supported Media Types -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(mediaTypes)" :key="key">
+              <v-list-item-action>
+                <v-checkbox v-model="supportedMediaTypes" :value="key" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.general.mediaTypes.' + key)
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Display -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.display.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(displaySettings)" :key="key">
+              <v-list-item-action>
+                <v-checkbox v-model="currentProfile[key]" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.display.' + key + '.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.display.' + key + '.info')
+                  "
+                />
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Image Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.info.image.title') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item v-for="key in Object.keys(imageSettings)" :key="key">
+              <v-list-item-action
+                v-if="typeof currentProfile[key] === 'boolean'"
+              >
+                <v-checkbox v-model="currentProfile[key]" />
+              </v-list-item-action>
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="
+                    $t('settings.dlna.profile.info.image.' + key + '.text')
+                  "
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.info.image.' + key + '.info')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action
+                v-if="typeof currentProfile[key] !== 'boolean'"
+              >
+                <v-text-field v-model="currentProfile[key]" outlined dense />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item value="tab-identification">
+        <v-list>
+          <!-- Identification -->
+          <v-list-group :value="true">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.device.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.device.info') }}
+            </v-card-text>
+            <v-list-item
+              v-for="key in Object.keys(currentProfile.Identification)"
+              :key="key"
+            >
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.identification.' + key)"
+                />
+                <v-list-item-subtitle
+                  v-text="
+                    $t('settings.dlna.profile.identification.device.infoText')
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field
+                  v-model="currentProfile.Identification[key]"
+                  outlined
+                  dense
+                />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+
+          <!-- Server Settings -->
+          <v-list-group :value="false">
+            <template #activator>
+              <v-list-item-title>
+                {{ $t('settings.dlna.profile.identification.server.title') }}
+              </v-list-item-title>
+            </template>
+            <v-card-text>
+              {{ $t('settings.dlna.profile.identification.server.info') }}
+            </v-card-text>
+            <v-list-item
+              v-for="key in Object.keys(serverIdentification)"
+              :key="key"
+            >
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.identification.' + key)"
+                />
+                <v-list-item-subtitle
+                  v-if="
+                    key === 'ProtocolInfo' || key === 'SonyAggregationFlags'
+                  "
+                  v-text="
+                    $t('settings.dlna.profile.identification.extra.' + key)
+                  "
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-text-field v-model="currentProfile[key]" outlined dense />
+              </v-list-item-action>
+            </v-list-item>
+          </v-list-group>
+        </v-list>
+      </v-tab-item>
+
+      <v-tab-item
+        v-for="section in [
+          'SubtitleProfiles',
+          'DirectPlayProfiles',
+          'TranscodingProfiles',
+          'ContainerProfiles',
+          'CodecProfiles',
+          'ResponseProfiles',
+          'XmlRootAttributes'
+        ]"
+        :key="section"
+        :value="'tab-' + section"
+      >
+        <v-data-table
+          :headers="headers[section]"
+          :items="currentProfile[section]"
+        >
+          <template #top>
+            <v-toolbar flat color="secondary">
+              <v-toolbar-title>
+                {{ $t('settings.dlna.profile.' + section + '.text') }}
+              </v-toolbar-title>
+              <v-spacer />
+            </v-toolbar>
+          </template>
+        </v-data-table>
+      </v-tab-item>
+
+      <v-tab-item value="tab-xml">
+        <v-card>
+          <v-card-text>
+            {{ $t('settings.dlna.profile.xml.text') }}
+          </v-card-text>
+        </v-card>
+      </v-tab-item>
+    </v-tabs-items>
+    <v-card-actions>
+      <v-btn color="success" @click="$emit('save-selected', currentProfile)">
+        {{
+          isCustomProfile
+            ? $t('settings.dlna.profile.save')
+            : $t('settings.dlna.profile.saveNew')
+        }}
+      </v-btn>
+      <v-btn
+        v-if="isCustomProfile"
+        color="error"
+        @click="$emit('delete-selected')"
+      >
+        {{ $t('settings.devices.delete') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  DeviceProfile,
+  DlnaProfileType,
+  UserDto
+} from '@jellyfin/client-axios';
+
+enum DlnaProfileCategories {
+  info = 'info',
+  identification = 'identification',
+  subtitle = 'SubtitleProfiles',
+  directPlay = 'DirectPlayProfiles',
+  transcoding = 'TranscodingProfiles',
+  containers = 'ContainerProfiles',
+  codecs = 'CodecProfiles',
+  responses = 'ResponseProfiles',
+  xml = 'XmlRootAttributes'
+}
+
+enum ServerIdentification {
+  FriendlyName = 'FriendlyName',
+  Manufacturer = 'Manufacturer',
+  ManufacturerUrl = 'ManufacturerUrl',
+  ModelName = 'ModelName',
+  ModelNumber = 'ModelNumber',
+  ModelDescription = 'ModelDescription',
+  ModelUrl = 'ModelUrl',
+  SerialNumber = 'SerialNumber',
+  ProtocolInfo = 'ProtocolInfo',
+  SonyAggregationFlags = 'SonyAggregationFlags'
+}
+
+enum DisplaySettings {
+  RequiresPlainFolders = 'RequiresPlainFolders',
+  RequiresPlainVideoItems = 'RequiresPlainVideoItems'
+}
+
+enum ImageSettings {
+  EnableAlbumArtInDidl = 'EnableAlbumArtInDidl',
+  EnableSingleAlbumArtLimit = 'EnableSingleAlbumArtLimit',
+  AlbumArtPn = 'AlbumArtPn',
+  MaxAlbumArtWidth = 'MaxAlbumArtWidth',
+  MaxAlbumArtHeight = 'MaxAlbumArtHeight',
+  MaxIconWidth = 'MaxIconWidth',
+  MaxIconHeight = 'MaxIconHeight'
+}
+
+export default Vue.extend({
+  props: {
+    selectedProfile: {
+      type: Object as () => DeviceProfile,
+      default: (): DeviceProfile => {
+        return {};
+      }
+    },
+    isCustomProfile: {
+      default: false,
+      type: Boolean
+    },
+    users: {
+      type: Array as () => UserDto[],
+      default: () => undefined
+    },
+    isDialog: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      headers: {
+        SubtitleProfiles: [
+          {
+            text: 'Format',
+            value: 'Format'
+          },
+          {
+            text: 'Method',
+            value: 'Method'
+          },
+          {
+            text: 'DidlMode',
+            value: 'DidlMode'
+          },
+          {
+            text: 'Language',
+            value: 'Language'
+          },
+          {
+            text: 'Container',
+            value: 'Container'
+          }
+        ],
+        DirectPlayProfiles: [
+          {
+            text: 'Container',
+            value: 'Container'
+          },
+          {
+            text: 'AudioCodec',
+            value: 'AudioCodec'
+          },
+          {
+            text: 'VideoCodec',
+            value: 'VideoCodec'
+          },
+          {
+            text: 'Type',
+            value: 'Type'
+          }
+        ],
+        TranscodingProfiles: [
+          {
+            text: 'Container',
+            value: 'Container'
+          },
+          {
+            text: 'Type',
+            value: 'Type'
+          },
+          {
+            text: 'AudioCodec',
+            value: 'AudioCodec'
+          },
+          {
+            text: 'VideoCodec',
+            value: 'VideoCodec'
+          },
+          {
+            text: 'Protocol',
+            value: 'Protocol'
+          },
+          {
+            text: 'EstimateContentLength',
+            value: 'EstimateContentLength'
+          },
+          {
+            text: 'EnableMpegtsM2TsMode',
+            value: 'EnableMpegtsM2TsMode'
+          },
+          {
+            text: 'TranscodeSeekInfo',
+            value: 'TranscodeSeekInfo'
+          },
+          {
+            text: 'CopyTimeStamps',
+            value: 'CopyTimeStamps'
+          },
+          {
+            text: 'Context',
+            value: 'Context'
+          },
+          {
+            text: 'EnableSubtitleInManifest',
+            value: 'EnableSubtitleInManifest'
+          },
+          {
+            text: 'MaxAudioChannels',
+            value: 'MaxAudioChannels'
+          },
+          {
+            text: 'MinSegments',
+            value: 'MinSegments'
+          },
+          {
+            text: 'SegmentLength',
+            value: 'SegmentLength'
+          },
+          {
+            text: 'BreakOnNonKeyFrames',
+            value: 'BreakOnNonKeyFrames'
+          }
+        ],
+        ContainerProfiles: [
+          {
+            text: 'Type',
+            value: 'Type'
+          },
+          {
+            text: 'Condition',
+            value: 'Condition'
+          },
+          {
+            text: 'Container',
+            value: 'Container'
+          }
+        ],
+        CodecProfiles: [
+          {
+            text: 'Type',
+            value: 'Type'
+          },
+          {
+            text: 'Condition',
+            value: 'Condition'
+          },
+          {
+            text: 'Container',
+            value: 'Container'
+          }
+        ],
+        ResponseProfiles: [
+          {
+            text: 'Container',
+            value: 'Container'
+          },
+          {
+            text: 'AudioCodec',
+            value: 'AudioCodec'
+          },
+          {
+            text: 'VideoCodec',
+            value: 'VideoCodec'
+          },
+          {
+            text: 'Type',
+            value: 'Type'
+          },
+          {
+            text: 'OrgPn',
+            value: 'OrgPn'
+          },
+          {
+            text: 'MimeType',
+            value: 'MimeType'
+          },
+          {
+            text: 'Conditions',
+            value: 'Conditions'
+          }
+        ],
+        XmlRootAttributes: [
+          {
+            text: 'Name',
+            value: 'Name'
+          },
+          {
+            text: 'Value',
+            value: 'Value'
+          }
+        ]
+      },
+      mediaTypes: DlnaProfileType,
+      serverIdentification: ServerIdentification,
+      categories: DlnaProfileCategories,
+      displaySettings: DisplaySettings,
+      imageSettings: ImageSettings,
+      tab: null,
+      currentProfile: undefined as DeviceProfile | undefined,
+      supportedMediaTypes: [] as Array<string> | undefined
+    };
+  },
+  watch: {
+    supportedMediaTypes() {
+      if (this.currentProfile) {
+        this.currentProfile.SupportedMediaTypes =
+          this.supportedMediaTypes?.join(',');
+      }
+    }
+  },
+  beforeMount() {
+    this.bindToData();
+  },
+  methods: {
+    bindToData() {
+      const tempProfile = JSON.parse(JSON.stringify(this.selectedProfile));
+
+      this.currentProfile = tempProfile;
+      this.supportedMediaTypes =
+        tempProfile.SupportedMediaTypes?.split(',') || [];
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dlnaProfileEditor {
+  width: 80em;
+}
+</style>
diff --git a/frontend/components/System/SelectedDlnaProfile.vue b/frontend/components/System/SelectedDlnaProfile.vue
deleted file mode 100644
index 6106f87de82..00000000000
--- a/frontend/components/System/SelectedDlnaProfile.vue
+++ /dev/null
@@ -1,924 +0,0 @@
-<template>
-  <v-card class="selected-dlna-profile">
-    <v-row v-if="isDialog" class="ma-0 justify-space-between align-center">
-      <v-card-title>{{ selectedProfile.Name }}</v-card-title>
-      <v-btn icon class="mr-2" @click="$emit('close-dialog')">
-        <v-icon>mdi-close</v-icon>
-      </v-btn>
-    </v-row>
-    <v-card-title v-else>{{ currentProfile.Name }}</v-card-title>
-    <v-tabs v-model="tab" centered dark icons-and-text>
-      <v-tabs-slider />
-      <v-tab v-for="i in 9" :key="i" :href="'#tab-' + i">
-        {{
-          $t(
-            'settings.dlna.profile.' +
-              categories[i - 1].toLocaleString() +
-              '.title'
-          )
-        }}
-      </v-tab>
-    </v-tabs>
-    <v-tabs-items v-model="tab">
-      <v-tab-item value="tab-1">
-        <v-list>
-          <!-- General -->
-          <v-list-group :value="true">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.general.title') }}
-              </v-list-item-title>
-            </template>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.general.name.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.general.name.info')"
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field v-model="currentProfile.Name" outlined dense />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.general.userLibrary.info')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-select
-                  v-model="currentProfile.UserId"
-                  :items="users"
-                  item-text="Name"
-                  item-value="Id"
-                  outlined
-                  dense
-                  clearable
-                  :label="$t('settings.dlna.DefaultUserId.selector')"
-                  reverse
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <!-- Supported Media Types -->
-            <v-list-group :value="true" no-action sub-group>
-              <template #activator>
-                <v-list-item-title>
-                  {{ $t('settings.dlna.profile.info.general.mediaTypes.text') }}
-                </v-list-item-title>
-              </template>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Audio" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.audio')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Photo" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.photo')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-action>
-                  <v-checkbox v-model="supportedMediaTypes" value="Video" />
-                </v-list-item-action>
-                <v-list-item-content>
-                  <v-list-item-title
-                    v-text="
-                      $t('settings.dlna.profile.info.general.mediaTypes.video')
-                    "
-                  />
-                </v-list-item-content>
-              </v-list-item>
-            </v-list-group>
-            <!-- back to normal -->
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.maxStreamQuality.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.maxStreamQuality.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model.number="currentProfile.MaxStreamingBitrate"
-                  type="number"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.musicTranscodeQuality.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.info.general.musicTranscodeQuality.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model.number="
-                    currentProfile.MusicStreamingTranscodingBitrate
-                  "
-                  type="number"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Display -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.display.title') }}
-              </v-list-item-title>
-            </template>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.RequiresPlainFolders" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainFolder.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainFolder.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.RequiresPlainVideoItems" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainVideo.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.display.plainVideo.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Image Settings -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.info.image.title') }}
-              </v-list-item-title>
-            </template>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox v-model="currentProfile.EnableAlbumArtInDidl" />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.embedDidl.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.image.embedDidl.info')"
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-action>
-                <v-checkbox
-                  v-model="currentProfile.EnableSingleAlbumArtLimit"
-                />
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.image.singleEmbed.text')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.singleEmbed.info')
-                  "
-                />
-              </v-list-item-content>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.albumPN.text')"
-                />
-                <v-list-item-subtitle
-                  v-text="$t('settings.dlna.profile.info.image.albumPN.info')"
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.AlbumArtPn"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumArtMaxWidth')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxAlbumArtWidth"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumArtMaxHeight')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.albumMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxAlbumArtHeight"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.iconMaxWidth')"
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.iconMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxIconWidth"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="$t('settings.dlna.profile.info.image.iconMaxHeight')"
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.info.image.iconMaxDimension')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.MaxIconHeight"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-        </v-list>
-      </v-tab-item>
-
-      <v-tab-item value="tab-2">
-        <v-list>
-          <!-- Identification -->
-          <v-list-group :value="true">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.identification.device.title') }}
-              </v-list-item-title>
-            </template>
-            <v-card-text>
-              {{ $t('settings.dlna.profile.identification.device.info') }}
-            </v-card-text>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.friendlyName'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.FriendlyName"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.manufacturer'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.Manufacturer"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.manufacturerUrl'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ManufacturerUrl"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.modelName')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelName"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.modelNumber'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelNumber"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.modelDescription'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelDescription"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.modelUrl')
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelUrl"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.serialNumber'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.SerialNumber"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.device.deviceDescription'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t('settings.dlna.profile.identification.device.infoText')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Identification.ModelDescription"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-
-          <!-- Server Settings -->
-          <v-list-group :value="false">
-            <template #activator>
-              <v-list-item-title>
-                {{ $t('settings.dlna.profile.identification.server.title') }}
-              </v-list-item-title>
-            </template>
-            <v-card-text>
-              {{ $t('settings.dlna.profile.identification.server.info') }}
-            </v-card-text>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.friendlyName'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.FriendlyName"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.manufacturer'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.Manufacturer"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.manufacturerUrl'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ManufacturerUrl"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.identification.server.modelName')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelName"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.modelNumber'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelNumber"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.modelDescription'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelDescription"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t('settings.dlna.profile.identification.server.modelUrl')
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ModelUrl"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.serialNumber'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.SerialNumber"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.protocolInfo.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.protocolInfo.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.ProtocolInfo"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-            <v-list-item>
-              <v-list-item-content>
-                <v-list-item-title
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.sonyAggregationFlags.text'
-                    )
-                  "
-                />
-                <v-list-item-subtitle
-                  v-text="
-                    $t(
-                      'settings.dlna.profile.identification.server.sonyAggregationFlags.info'
-                    )
-                  "
-                />
-              </v-list-item-content>
-              <v-list-item-action>
-                <v-text-field
-                  v-model="currentProfile.SonyAggregationFlags"
-                  outlined
-                  dense
-                />
-              </v-list-item-action>
-            </v-list-item>
-          </v-list-group>
-        </v-list>
-      </v-tab-item>
-
-      <v-tab-item value="tab-3">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.subtitle.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-4">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.directPlay.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-5">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.transcoding.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-6">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.containers.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-7">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.codecs.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-8">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.responses.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-
-      <v-tab-item value="tab-9">
-        <v-card>
-          <v-card-text>
-            {{ $t('settings.dlna.profile.xml.text') }}
-          </v-card-text>
-        </v-card>
-      </v-tab-item>
-    </v-tabs-items>
-    <v-card-actions>
-      <v-btn color="success" @click="$emit('save-selected', currentProfile)">
-        {{
-          isCustomProfile
-            ? $t('settings.dlna.profile.save')
-            : $t('settings.dlna.profile.saveNew')
-        }}
-      </v-btn>
-      <v-btn
-        v-if="isCustomProfile"
-        color="error"
-        @click="$emit('delete-selected')"
-      >
-        {{ $t('settings.devices.delete') }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { DeviceProfile, UserDto } from '@jellyfin/client-axios';
-
-enum DlnaProfileCategories {
-  info,
-  identification,
-  subtitle,
-  directPlay,
-  transcoding,
-  containers,
-  codecs,
-  responses,
-  xml
-}
-
-export default Vue.extend({
-  props: {
-    selectedProfile: {
-      type: Object as () => DeviceProfile,
-      default: (): DeviceProfile => {
-        return {};
-      }
-    },
-    isCustomProfile: {
-      default: false,
-      type: Boolean
-    },
-    users: {
-      type: Array as () => UserDto[],
-      default: () => undefined
-    },
-    isDialog: {
-      default: false,
-      type: Boolean
-    }
-  },
-  data() {
-    return {
-      categories: DlnaProfileCategories,
-      tab: null,
-      currentProfile: undefined as DeviceProfile | undefined,
-      supportedMediaTypes: [] as Array<string> | undefined
-    };
-  },
-  watch: {
-    supportedMediaTypes() {
-      if (this.currentProfile) {
-        this.currentProfile.SupportedMediaTypes =
-          this.supportedMediaTypes?.join(',');
-      }
-    }
-  },
-  beforeMount() {
-    this.bindToData();
-  },
-  methods: {
-    bindToData() {
-      const tempProfile = JSON.parse(JSON.stringify(this.selectedProfile));
-
-      this.currentProfile = tempProfile;
-      this.supportedMediaTypes =
-        tempProfile.SupportedMediaTypes?.split(',') || [];
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.selected-dlna-profile {
-  width: 80em;
-}
-</style>
diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index a46c5483f63..ef826c75eeb 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -372,9 +372,9 @@
             },
             "mediaTypes": {
               "text": "Supported Media Types",
-              "audio": "Audio",
-              "video": "Video",
-              "photo": "Photo"
+              "Audio": "Audio",
+              "Video": "Video",
+              "Photo": "Photo"
             },
             "maxStreamQuality": {
               "text": "Maximum streaming quality",
@@ -387,99 +387,100 @@
           },
           "display": {
             "title": "Display Settings",
-            "plainFolder": {
+            "RequiresPlainFolders": {
               "text": "Display all folders as plain storage folders",
               "info": "All folders are represented in DIDL as \"object.container.storageFolder\" instead of a more specific type, such as \"object.container.person.musicArtist\"."
             },
-            "plainVideo": {
+            "RequiresPlainVideoItems": {
               "text": "Display all videos as plain video items",
               "info": "All videos are represented in DIDL as \"object.item.videoItem\" instead of a more specific type, such as \"object.item.videoItem.movie\"."
             }
           },
           "image": {
             "title": "Image Settings",
-            "albumMaxDimension": "Maximum resolution of album art exposed via the upnp:albumArtURI property.",
-            "iconMaxDimension": "Maximum resolution of icons exposed via the upnp:icon property.",
-            "embedDidl": {
+            "EnableAlbumArtInDidl": {
               "text": "Embed album art in Didl",
               "info": "Some devices prefer this method for obtaining album art. Others may fail to play with this option enabled."
             },
-            "singleEmbed": {
+            "EnableSingleAlbumArtLimit": {
               "text": "Limit to single embedded image",
               "info": "Some devices will not render properly if multiple images are embedded within Didl."
             },
-            "albumPN": {
+            "AlbumArtPn": {
               "text": "Album art PN",
               "info": "PN used for album art, within the dlna:profileID attribute on upnp:albumArtURI. Some devices require a specific value, regardless of the size of the image."
             },
-            "albumArtMaxWidth": "Album art max width",
-            "albumArtMaxHeight": "Album art max height",
-            "iconMaxWidth": "Icon maximum width",
-            "iconMaxHeight": "Icon maximum height"
+            "MaxAlbumArtWidth": {
+              "text": "Album art max width",
+              "info": "Maximum resolution of album art exposed via the upnp:albumArtURI property."
+            },
+            "MaxAlbumArtHeight": {
+              "text": "Album art max height",
+              "info": "Maximum resolution of album art exposed via the upnp:albumArtURI property."
+            },
+            "MaxIconWidth": {
+              "text": "Icon maximum width",
+              "info": "Maximum resolution of icons exposed via the upnp:icon property."
+            },
+            "MaxIconHeight": {
+              "text": "Icon maximum height",
+              "info": "Maximum resolution of icons exposed via the upnp:icon property."
+            }
           }
         },
         "identification": {
           "title": "Identification",
+          "FriendlyName": "Friendly name",
+          "Manufacturer": "Manufacturer",
+          "ManufacturerUrl": "Manufacturer URL",
+          "ModelName": "Model name",
+          "ModelNumber": "Model number",
+          "ModelDescription": "Model description",
+          "ModelUrl": "Model URL",
+          "SerialNumber": "Serial number",
+          "ProtocolInfo": "Protocol info",
+          "SonyAggregationFlags": "Sony aggregation flags",
+          "extra": {
+            "ProtocolInfo": "The value that will be used when responding to GetProtocolInfo requests from the device.",
+            "SonyAggregationFlags": "Determines the content of the aggreagationFlags element in the urn:schemas-sonycom:av namespace."
+          },
           "device": {
             "title": "Device identification",
             "info": "Enter at least one identification criteria.",
-            "infoText": "A case-insensitive substring or regex expression.",
-            "friendlyName": "Friendly name",
-            "manufacturer": "Manufacturer",
-            "manufacturerUrl": "Manufacturer URL",
-            "modelName": "Model name",
-            "modelNumber": "Model number",
-            "modelDescription": "Model description",
-            "modelUrl": "Model URL",
-            "serialNumber": "Serial number",
-            "deviceDescription": "Device description"
+            "infoText": "A case-insensitive substring or regex expression."
           },
           "server": {
             "title": "Server identification",
-            "info": "These values control how the server will present itself to clients.",
-            "friendlyName": "Friendly name",
-            "manufacturer": "Manufacturer",
-            "manufacturerUrl": "Manufacturer URL",
-            "modelName": "Model name",
-            "modelNumber": "Model number",
-            "modelDescription": "Model description",
-            "modelUrl": "Model URL",
-            "serialNumber": "Serial number",
-            "protocolInfo": {
-              "text": "Protocol info",
-              "info": "The value that will be used when responding to GetProtocolInfo requests from the device."
-            },
-            "sonyAggregationFlags": {
-              "text": "Sony aggregation flags",
-              "info": "Determines the content of the aggreagationFlags element in the urn:schemas-sonycom:av namespace."
-            }
+            "info": "These values control how the server will present itself to clients."
           }
         },
-        "subtitle": {
-          "title": "Subtitle"
+        "SubtitleProfiles": {
+          "title": "Subtitle",
+          "text": "Subtitle profiles describe the subtitle formats supported by the device."
         },
-        "directPlay": {
+        "DirectPlayProfiles": {
           "title": "Direct Play",
           "text": "Add direct play profiles to indicate which formats the device can handle natively."
         },
-        "transcoding": {
+        "TranscodingProfiles": {
           "title": "Transcoding",
           "text": "Add transcoding profiles to indicate which formats should be used when transcoding is required."
         },
-        "containers": {
+        "ContainerProfiles": {
           "title": "Containers",
           "text": "Container profiles indicate the limitations of a device when playing specific formats. If a limitation applies then the media will be transcoded, even if the format is configured for direct play."
         },
-        "codecs": {
+        "CodecProfiles": {
           "title": "Codecs",
           "text": "Codec profiles indicate the limitations of a device when playing specific codecs. If a limitation applies then the media will be transcoded, even if the codec is configured for direct play."
         },
-        "responses": {
+        "ResponseProfiles": {
           "title": "Responses",
           "text": "Response profiles provide a way to customize information sent to the device when playing certain kinds of media."
         },
-        "xml": {
-          "title": "XML"
+        "XmlRootAttributes": {
+          "title": "XML",
+          "text": "These attributes are applied to the root element of every XML response."
         }
       }
     },
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
index c9f41db5e92..414dfe81922 100644
--- a/frontend/pages/settings/dlna.vue
+++ b/frontend/pages/settings/dlna.vue
@@ -99,7 +99,7 @@
         </v-card>
       </v-col>
       <v-dialog v-model="deviceInfoDialog" width="fit-content">
-        <selected-dlna-profile
+        <dlna-profile-editor
           v-if="selectedProfile.Name"
           :selected-profile="selectedProfile"
           :is-dialog="true"
@@ -123,7 +123,7 @@ import {
   UserDto
 } from '@jellyfin/client-axios';
 import isNil from 'lodash/isNil';
-import SelectedDlnaProfile from '~/components/System/SelectedDlnaProfile.vue';
+import DlnaProfileEditor from '~/components/System/DlnaProfileEditor.vue';
 
 /**
  * We need to define those interfaces here as the axios hook for
@@ -148,7 +148,7 @@ interface DlnaNamedConfiguration extends RelevantConfig {
 }
 
 export default Vue.extend({
-  components: { SelectedDlnaProfile },
+  components: { DlnaProfileEditor },
   async asyncData({ $api }) {
     const dlnaSettings = (
       await $api.configuration.getNamedConfiguration({ key: 'dlna' })