diff --git a/frontend/components/System/DlnaEntryEditor.vue b/frontend/components/System/DlnaEntryEditor.vue
new file mode 100644
index 00000000000..d44c878a4bd
--- /dev/null
+++ b/frontend/components/System/DlnaEntryEditor.vue
@@ -0,0 +1,154 @@
+<template>
+  <v-card class="dlnaEntryEditor">
+    <v-row class="ma-0 justify-space-between align-center">
+      <v-card-title>{{ $t('settings.dlna.entryEditor') }}</v-card-title>
+      <v-btn icon class="mr-2" @click="$emit('close-editor')">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </v-row>
+    <v-card-text>
+      <v-container>
+        <v-row>
+          <v-col
+            v-for="key in Object.keys(currentEntryData)"
+            :key="key"
+            cols="12"
+            sm="6"
+            md="4"
+          >
+            <v-select
+              v-if="key === 'Method'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(deliveryMethod)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Type' && category === 'CodecProfiles'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(codecType)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Type'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(dlnaMediaType)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'TranscodeSeekInfo'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(transcodeSeekInfo)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-select
+              v-else-if="key === 'Context'"
+              v-model="currentEntryData[key]"
+              :items="Object.values(encodingContext)"
+              outlined
+              :label="$t('settings.dlna.table.' + key)"
+            />
+            <v-text-field
+              v-else-if="typeof currentEntryData[key] === 'string'"
+              v-model="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+              outlined
+            />
+            <v-text-field
+              v-else-if="typeof currentEntryData[key] === 'number'"
+              v-model.number="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+              type="number"
+              outlined
+            />
+            <v-checkbox
+              v-else-if="typeof currentEntryData[key] === 'boolean'"
+              v-model="currentEntryData[key]"
+              :label="$t('settings.dlna.table.' + key)"
+            />
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-card-text>
+    <v-card-actions>
+      <v-btn color="success" @click="$emit('save-item', currentEntryData)">
+        {{ $t('settings.dlna.profile.save') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  CodecProfile,
+  ContainerProfile,
+  DirectPlayProfile,
+  DlnaProfileType,
+  ResponseProfile,
+  SubtitleDeliveryMethod,
+  SubtitleProfile,
+  TranscodeSeekInfo,
+  TranscodingProfile,
+  XmlAttribute
+} from '@jellyfin/client-axios';
+import { CodecType } from '@jellyfin/client-axios/dist/models/codec-type';
+import { EncodingContext } from '@jellyfin/client-axios/dist/models/encoding-context';
+
+export default Vue.extend({
+  props: {
+    entryData: {
+      type: Object as () =>
+        | SubtitleProfile
+        | DirectPlayProfile
+        | TranscodingProfile
+        | ContainerProfile
+        | CodecProfile
+        | ResponseProfile
+        | XmlAttribute,
+      default: () => {
+        return {};
+      }
+    },
+    category: {
+      default: '',
+      type: String
+    }
+  },
+  data() {
+    return {
+      currentEntryData: undefined as
+        | SubtitleProfile
+        | DirectPlayProfile
+        | TranscodingProfile
+        | ContainerProfile
+        | CodecProfile
+        | ResponseProfile
+        | XmlAttribute
+        | undefined,
+      deliveryMethod: SubtitleDeliveryMethod,
+      codecType: CodecType,
+      dlnaMediaType: DlnaProfileType,
+      transcodeSeekInfo: TranscodeSeekInfo,
+      encodingContext: EncodingContext
+    };
+  },
+  beforeMount() {
+    this.bindToData();
+  },
+  methods: {
+    bindToData() {
+      this.currentEntryData = JSON.parse(JSON.stringify(this.entryData));
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dlnaEntryEditor {
+  width: 80em;
+}
+</style>
diff --git a/frontend/components/System/DlnaProfileEditor.vue b/frontend/components/System/DlnaProfileEditor.vue
new file mode 100644
index 00000000000..fbcda0e27a5
--- /dev/null
+++ b/frontend/components/System/DlnaProfileEditor.vue
@@ -0,0 +1,565 @@
+<template>
+  <v-card class="dlnaProfileEditor">
+    <v-row 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-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') }}
+              </v-list-item-title>
+            </template>
+            <v-list-item
+              v-for="key in Object.keys(profileInformation)"
+              :key="key"
+            >
+              <v-list-item-content>
+                <v-list-item-title
+                  v-text="$t('settings.dlna.profile.info.' + key + '.text')"
+                />
+                <v-list-item-subtitle
+                  v-text="$t('settings.dlna.profile.info.' + key + '.info')"
+                />
+              </v-list-item-content>
+              <v-list-item-action>
+                <v-select
+                  v-if="key === 'UserId'"
+                  v-model="currentProfile.UserId"
+                  :items="users"
+                  item-text="Name"
+                  item-value="Id"
+                  outlined
+                  dense
+                  clearable
+                  :label="$t('settings.dlna.DefaultUserId.selector')"
+                  reverse
+                />
+                <v-text-field
+                  v-else-if="typeof currentProfile[key] === 'string'"
+                  v-model="currentProfile[key]"
+                  outlined
+                  dense
+                />
+                <v-text-field
+                  v-else
+                  v-model.number="currentProfile.MaxStreamingBitrate"
+                  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.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.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 tableCategories"
+        :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-btn class="ml-a" color="primary" @click="newItem(section)">
+                {{ $t('settings.dlna.newEntry') }}
+              </v-btn>
+              <v-dialog
+                v-model="entryEditor"
+                width="fit-content"
+                :retain-focus="false"
+              >
+                <dlna-entry-editor
+                  v-if="editEntry !== undefined"
+                  :entry-data="editEntry"
+                  :category="currentCategory"
+                  @close-editor="closeEditor"
+                  @save-item="saveItem"
+                />
+              </v-dialog>
+            </v-toolbar>
+          </template>
+          <template #item.Conditions="{ item }">
+            {{ JSON.stringify(item.Conditions) }}
+          </template>
+          <template #item.action="{ item }">
+            <v-icon small class="mr-2" @click="editItem(section, item)">
+              mdi-pencil
+            </v-icon>
+            <v-icon small class="mr-2" @click="deleteItem(section, item)">
+              mdi-delete
+            </v-icon>
+          </template>
+        </v-data-table>
+      </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 {
+  CodecProfile,
+  ContainerProfile,
+  DeviceProfile,
+  DirectPlayProfile,
+  DlnaProfileType,
+  SubtitleProfile,
+  TranscodeSeekInfo,
+  TranscodingProfile,
+  UserDto,
+  XmlAttribute
+} from '@jellyfin/client-axios';
+import { SubtitleDeliveryMethod } from '@jellyfin/client-axios/dist/models/subtitle-delivery-method';
+import { EncodingContext } from '@jellyfin/client-axios/dist/models/encoding-context';
+import { CodecType } from '@jellyfin/client-axios/dist/models/codec-type';
+
+enum DlnaProfileCategories {
+  info = 'info',
+  identification = 'identification',
+  subtitle = 'SubtitleProfiles',
+  directPlay = 'DirectPlayProfiles',
+  transcoding = 'TranscodingProfiles',
+  containers = 'ContainerProfiles',
+  codecs = 'CodecProfiles',
+  responses = 'ResponseProfiles',
+  xml = 'XmlRootAttributes'
+}
+
+enum TableCategories {
+  SubtitleProfiles = 'SubtitleProfiles',
+  DirectPlayProfiles = 'DirectPlayProfiles',
+  TranscodingProfiles = 'TranscodingProfiles',
+  ContainerProfiles = 'ContainerProfiles',
+  CodecProfiles = 'CodecProfiles',
+  ResponseProfiles = 'ResponseProfiles',
+  XmlRootAttributes = 'XmlRootAttributes'
+}
+
+enum ProfileInfo {
+  Name = 'Name',
+  UserId = 'UserId',
+  MaxStreamingBitrate = 'MaxStreamingBitrate',
+  MusicStreamingTranscodingBitrate = 'MusicStreamingTranscodingBitrate'
+}
+
+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'
+}
+
+type TableUnion =
+  | SubtitleProfile
+  | DirectPlayProfile
+  | TranscodingProfile
+  | CodecProfile
+  | ContainerProfile
+  | XmlAttribute;
+
+interface HeaderType {
+  text: string;
+  value: string;
+}
+
+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
+    }
+  },
+  data() {
+    return {
+      entryEditor: false,
+      mediaTypes: DlnaProfileType,
+      profileInformation: ProfileInfo,
+      tableCategories: TableCategories,
+      serverIdentification: ServerIdentification,
+      categories: DlnaProfileCategories,
+      displaySettings: DisplaySettings,
+      imageSettings: ImageSettings,
+      tab: null,
+      originalItem: {} as TableUnion | undefined,
+      editEntry: {} as TableUnion | undefined,
+      currentCategory: '',
+      emptyProfiles: {
+        SubtitleProfiles: {
+          Format: '',
+          Method: SubtitleDeliveryMethod.External,
+          DidlMode: '',
+          Language: '',
+          Container: ''
+        },
+        DirectPlayProfiles: {
+          Container: '',
+          AudioCodec: '',
+          VideoCodec: '',
+          Type: DlnaProfileType.Audio
+        },
+        TranscodingProfiles: {
+          Container: '',
+          Type: DlnaProfileType.Audio,
+          VideoCodec: '',
+          AudioCodec: '',
+          Protocol: '',
+          EstimateContentLength: false,
+          EnableMpegtsM2TsMode: false,
+          TranscodeSeekInfo: TranscodeSeekInfo.Auto,
+          CopyTimestamps: false,
+          Context: EncodingContext.Static,
+          EnableSubtitlesInManifest: false,
+          MaxAudioChannels: '',
+          MinSegments: 0,
+          SegmentLength: 0,
+          BreakOnNonKeyFrames: false
+        },
+        ContainerProfiles: {
+          Type: DlnaProfileType.Audio,
+          Conditions: [],
+          Container: ''
+        },
+        CodecProfiles: {
+          Type: CodecType.Audio,
+          Conditions: [],
+          ApplyConditions: [],
+          Codec: '',
+          Container: ''
+        },
+        ResponseProfiles: {
+          Container: '',
+          AudioCodec: '',
+          VideoCodec: '',
+          Type: DlnaProfileType.Audio,
+          OrgPn: '',
+          MimeType: '',
+          Conditions: []
+        },
+        XmlRootAttributes: {
+          Name: '',
+          Value: ''
+        }
+      } as Record<string, TableUnion>,
+      currentProfile: undefined as DeviceProfile | undefined,
+      supportedMediaTypes: [] as Array<string> | undefined
+    };
+  },
+  computed: {
+    headers(): Record<string, Array<HeaderType>> {
+      const record: Record<string, Array<HeaderType>> = {};
+
+      Object.entries(this.emptyProfiles).forEach(([key, value]) => {
+        const temp: Array<HeaderType> = [];
+
+        for (const entry in value) {
+          temp.push({
+            text: this.$t('settings.dlna.table.' + entry),
+            value: entry
+          });
+        }
+
+        temp.push({
+          text: this.$t('settings.dlna.table.action'),
+          value: 'action'
+        });
+
+        record[key] = temp;
+      });
+
+      return record;
+    }
+  },
+  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(',') || [];
+    },
+    newItem(key: TableCategories) {
+      this.originalItem = undefined;
+      this.editEntry = this.emptyProfiles[key];
+      this.currentCategory = key;
+      this.entryEditor = true;
+    },
+    editItem(key: TableCategories, item: TableUnion) {
+      this.originalItem = item;
+      this.editEntry = {
+        ...this.emptyProfiles[key],
+        ...item
+      };
+      this.currentCategory = key;
+      this.entryEditor = true;
+    },
+    closeEditor() {
+      this.originalItem = undefined;
+      this.editEntry = undefined;
+      this.currentCategory = '';
+      this.entryEditor = false;
+    },
+    saveItem(item: TableUnion) {
+      if (!this.currentProfile) {
+        return;
+      }
+
+      const tab = this.currentProfile[
+        this.currentCategory as keyof DeviceProfile
+      ] as Array<TableUnion>;
+
+      if (this.originalItem === undefined) {
+        tab.push(item);
+      } else {
+        tab.splice(tab.indexOf(this.originalItem), 1, item);
+      }
+
+      this.closeEditor();
+    },
+    deleteItem(key: TableCategories, item: TableUnion) {
+      if (!this.currentProfile) {
+        return;
+      }
+
+      const tab = this.currentProfile[
+        key as keyof DeviceProfile
+      ] as Array<TableUnion>;
+
+      tab.splice(tab.indexOf(item), 1);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dlnaProfileEditor {
+  width: 80em;
+}
+</style>
diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index 6f397f8e98b..e4d3c729235 100644
--- a/frontend/locales/en-US.json
+++ b/frontend/locales/en-US.json
@@ -323,6 +323,223 @@
       "revokeFailure": "Error revoking API key",
       "revokeSuccess": "Successfully revoked API key"
     },
+    "dlna": {
+      "dlna": "DLNA",
+      "EnablePlayTo": {
+        "text": "Enable DLNA PlayTo",
+        "description": "Detect devices within your network and offer the ability to control them remotely."
+      },
+      "savedSuccess": "Settings saved",
+      "savedError": "An error occurred saving the configuration",
+      "savedProfileSuccess": "Profile saved",
+      "savedProfileError": "An error occurred saving the profile",
+      "deleteSuccess": "Deleted profile",
+      "deleteError": "An error occurred deleting the profile",
+      "EnableDebugLog": {
+        "text": "Enable DLNA debug logging",
+        "description": "Create large log files and should only be used as needed for troubleshooting purposes."
+      },
+      "ClientDiscoveryIntervalSeconds": {
+        "text": "Client discovery interval",
+        "description": "Determines the duration in seconds between SSDP searches."
+      },
+      "EnableServer": {
+        "text": "Enable DLNA server",
+        "description": "Allows UPnP devices on your network to browse and play content."
+      },
+      "BlastAliveMessages": {
+        "text": "Blast alive messages",
+        "description": "Enable this if the server is not detected reliably by other UPnP devices on your network."
+      },
+      "AliveMessageIntervalSeconds": {
+        "text": "Alive message interval",
+        "description": "Determines the duration in seconds between blast alive messages."
+      },
+      "DefaultUserId": {
+        "text": "Default user",
+        "description": "Determines which user library should be displayed on connected devices. This can be overridden for each device using profiles.",
+        "selector": "Select default user"
+      },
+      "EnablePlayToTracing": {
+        "text": "Enable PlayTo Tracing",
+        "description": "Enables debug logging for DLNA PlayTo"
+      },
+      "SendOnlyMatchedHost": {
+        "text": "Send only matched host",
+        "description": "Only send data if the host matches"
+      },
+      "AutoCreatePlayToProfiles": {
+        "text": "Automatically create PlayTo device profiles",
+        "description": ""
+      },
+      "profile": {
+        "new": "New Profile",
+        "name": "Profile name",
+        "custom": {
+          "text": "Custom profiles",
+          "subtitle": "Create a custom profile to target a new device or override a system profile."
+        },
+        "system": {
+          "text": "System profiles",
+          "subtitle": "System profiles are read-only. Changes to a system profile will be saved to a new custom profile."
+        },
+        "saveNew": "Save as new custom profile",
+        "save": "Save profile",
+        "info": {
+          "title": "Info",
+          "general": "General settings",
+          "Name": {
+            "text": "Name",
+            "info": "Set the name of this profile."
+          },
+          "UserId": {
+            "text": "User library",
+            "info": "Select which user library to display to the device. Leave empty to inherit the default setting."
+          },
+          "MaxStreamingBitrate": {
+            "text": "Maximum streaming quality",
+            "info": "Specify a maximum bitrate when streaming."
+          },
+          "MusicStreamingTranscodingBitrate": {
+            "text": "Music transcoding bitrate",
+            "info": "Specify a maximum bitrate when streaming music."
+          },
+          "mediaTypes": {
+            "text": "Supported Media Types",
+            "Audio": "Audio",
+            "Video": "Video",
+            "Photo": "Photo"
+          },
+          "display": {
+            "title": "Display Settings",
+            "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\"."
+            },
+            "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",
+            "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."
+            },
+            "EnableSingleAlbumArtLimit": {
+              "text": "Limit to single embedded image",
+              "info": "Some devices will not render properly if multiple images are embedded within Didl."
+            },
+            "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."
+            },
+            "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."
+          },
+          "server": {
+            "title": "Server identification",
+            "info": "These values control how the server will present itself to clients."
+          }
+        },
+        "SubtitleProfiles": {
+          "title": "Subtitle",
+          "text": "Subtitle profiles describe the subtitle formats supported by the device."
+        },
+        "DirectPlayProfiles": {
+          "title": "Direct Play",
+          "text": "Add direct play profiles to indicate which formats the device can handle natively."
+        },
+        "TranscodingProfiles": {
+          "title": "Transcoding",
+          "text": "Add transcoding profiles to indicate which formats should be used when transcoding is required."
+        },
+        "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."
+        },
+        "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."
+        },
+        "ResponseProfiles": {
+          "title": "Responses",
+          "text": "Response profiles provide a way to customize information sent to the device when playing certain kinds of media."
+        },
+        "XmlRootAttributes": {
+          "title": "XML",
+          "text": "These attributes are applied to the root element of every XML response."
+        }
+      },
+      "table": {
+        "Format": "Format",
+        "Method": "Method",
+        "DidlMode": "DidlMode",
+        "Language": "Language",
+        "Container": "Container",
+        "AudioCodec": "Audio Codec",
+        "VideoCodec": "Video Codec",
+        "MaxAudioChannels": "Max Audio Channels",
+        "Protocol": "Protocol",
+        "Type": "Type",
+        "EstimateContentLength": "Estimate Content Length",
+        "EnableMpegtsM2TsMode": "Enable MpegtsM To Ts Mode",
+        "TranscodeSeekInfo": "Transcode Seek Info",
+        "CopyTimestamps": "Copy Time Stamps",
+        "Context": "Context",
+        "EnableSubtitlesInManifest": "Enable Subtitles in Manifest",
+        "MinSegments": "Min Segments",
+        "SegmentLength": "Segment length",
+        "BreakOnNonKeyFrames": "Break on non-keyframes",
+        "Conditions": "Conditions",
+        "ApplyConditions": "Apply Conditions",
+        "Codec": "Codec",
+        "MimeType": "Mime Type",
+        "OrgPn": "OrgPn",
+        "Name": "Name",
+        "Value": "Value",
+        "action": "Action"
+      },
+      "newEntry": "New Entry",
+      "entryEditor": "Entry Editor"
+    },
     "devices": {
       "appName": "App name",
       "appVersion": "App version",
diff --git a/frontend/pages/settings/dlna.vue b/frontend/pages/settings/dlna.vue
new file mode 100644
index 00000000000..1b809fa31d0
--- /dev/null
+++ b/frontend/pages/settings/dlna.vue
@@ -0,0 +1,288 @@
+<template>
+  <settings-page page-title="settings.dlna.dlna">
+    <template #actions>
+      <v-btn
+        rel="noreferrer noopener"
+        href="https://jellyfin.org/docs/general/networking/dlna.html"
+        target="_blank"
+      >
+        {{ $t('settings.help') }}
+      </v-btn>
+    </template>
+    <template #content>
+      <v-col cols="12" md="6" lg="5" class="py-4">
+        <v-card class="mb-4">
+          <v-list two-line flat>
+            <v-list-item-group>
+              <v-list-item
+                v-for="dlnaSettingName in Object.keys(dlnaSettings)"
+                :key="dlnaSettingName"
+              >
+                <v-list-item-content>
+                  <v-list-item-title
+                    v-text="$t('settings.dlna.' + dlnaSettingName + '.text')"
+                  />
+                  <v-list-item-subtitle
+                    v-text="
+                      $t('settings.dlna.' + dlnaSettingName + '.description')
+                    "
+                  />
+                </v-list-item-content>
+                <v-list-item-action>
+                  <v-switch
+                    v-if="typeof dlnaSettings[dlnaSettingName] === 'boolean'"
+                    v-model="dlnaSettings[dlnaSettingName]"
+                    @change="storeDlnaConfiguration"
+                  />
+                  <v-text-field
+                    v-if="typeof dlnaSettings[dlnaSettingName] === 'number'"
+                    v-model.number="dlnaSettings[dlnaSettingName]"
+                    type="number"
+                    outlined
+                    reverse
+                    dense
+                    @change="storeDlnaConfiguration"
+                  />
+                  <v-select
+                    v-if="
+                      typeof dlnaSettings[dlnaSettingName] === 'string' ||
+                      typeof dlnaSettings[dlnaSettingName] === 'undefined'
+                    "
+                    v-model="dlnaSettings[dlnaSettingName]"
+                    :items="users"
+                    item-text="Name"
+                    item-value="Id"
+                    :label="$t('settings.dlna.DefaultUserId.selector')"
+                    reverse
+                    dense
+                    outlined
+                    @change="storeDlnaConfiguration"
+                  />
+                </v-list-item-action>
+              </v-list-item>
+            </v-list-item-group>
+          </v-list>
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="5" class="py-4">
+        <v-card class="mb-4">
+          <v-card-title>
+            {{ $t('settings.dlna.profile.custom.text') }}
+            <v-spacer />
+            <v-btn class="ml-a" color="primary">
+              {{ $t('settings.dlna.profile.new') }}
+            </v-btn>
+          </v-card-title>
+          <v-data-table
+            :headers="headers"
+            :items="userProfiles"
+            :items-per-page="4"
+            :footer-props="{
+              itemsPerPageOptions: [4, 8, 12, 16, -1]
+            }"
+            @click:row="setSelectedDevice"
+          />
+        </v-card>
+        <v-card class="mb-4">
+          <v-card-title>
+            {{ $t('settings.dlna.profile.system.text') }}
+          </v-card-title>
+          <v-data-table
+            :headers="headers"
+            :items="systemProfiles"
+            :items-per-page="4"
+            :footer-props="{
+              itemsPerPageOptions: [4, 8, 12, 16, -1]
+            }"
+            @click:row="setSelectedDevice"
+          />
+        </v-card>
+      </v-col>
+      <v-dialog
+        v-model="deviceInfoDialog"
+        width="fit-content"
+        :retain-focus="false"
+      >
+        <dlna-profile-editor
+          v-if="selectedProfile.Name"
+          :selected-profile="selectedProfile"
+          :is-custom-profile="isCustomProfile"
+          :users="users"
+          @close-dialog="closeDialog"
+          @save-selected="saveProfile"
+          @delete-selected="deleteSelectedProfile"
+        />
+      </v-dialog>
+    </template>
+  </settings-page>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  DeviceProfile,
+  DeviceProfileInfo,
+  DeviceProfileType,
+  UserDto
+} from '@jellyfin/client-axios';
+import isNil from 'lodash/isNil';
+import { mapStores } from 'pinia';
+import { snackbarStore } from '~/store';
+
+/**
+ * We need to define those interfaces here as the axios hook for
+ * $api.configuration.getNamedConfiguration() returns an
+ * any typed object which we cannot use further down the line.
+ */
+interface DlnaNamedConfiguration {
+  EnablePlayTo: boolean;
+  EnablePlayToTracing: boolean;
+  EnableDebugLog: boolean;
+  ClientDiscoveryIntervalSeconds: number;
+  EnableServer: boolean;
+  AliveMessageIntervalSeconds: number;
+  BlastAliveMessages: boolean;
+  DefaultUserId: string;
+  AutoCreatePlayToProfiles: boolean;
+  SendOnlyMatchedHost: boolean;
+}
+
+/**
+ * FIXME: this is a short term hack in order for it to display all entries
+ * needs architectural change.
+ */
+const identification = {
+  Identification: {
+    FriendlyName: '',
+    ModelNumber: '',
+    SerialNumber: '',
+    ModelName: '',
+    ModelDescription: '',
+    ModelUrl: '',
+    Manufacturer: '',
+    ManufacturerUrl: '',
+    Headers: []
+  }
+};
+
+export default Vue.extend({
+  async asyncData({ $api }) {
+    const dlnaSettings = (
+      await $api.configuration.getNamedConfiguration({ key: 'dlna' })
+    ).data;
+
+    // remove deprecated duplicate option
+    delete dlnaSettings.BlastAliveMessageIntervalSeconds;
+
+    const dlnaProfiles = (await $api.dlna.getProfileInfos()).data;
+    const users = (await $api.user.getUsers()).data;
+
+    return { dlnaSettings, dlnaProfiles, users };
+  },
+  data() {
+    return {
+      dlnaSettings: {} as DlnaNamedConfiguration,
+      dlnaProfiles: [] as DeviceProfileInfo[],
+      users: [] as UserDto[],
+      selectedProfile: {} as DeviceProfile,
+      deviceInfoDialog: false,
+      isCustomProfile: false,
+      currentProfileId: ''
+    };
+  },
+  computed: {
+    ...mapStores(snackbarStore),
+    headers(): { text: string; value: string }[] {
+      return [
+        {
+          text: this.$t('settings.dlna.profile.name'),
+          value: 'Name'
+        }
+      ];
+    },
+    userProfiles(): DeviceProfileInfo[] {
+      return this.dlnaProfiles.filter(
+        (profile) => profile.Type === DeviceProfileType.User
+      );
+    },
+    systemProfiles(): DeviceProfileInfo[] {
+      return this.dlnaProfiles.filter(
+        (profile) => profile.Type === DeviceProfileType.System
+      );
+    }
+  },
+  methods: {
+    async storeDlnaConfiguration(): Promise<void> {
+      await this.$api.configuration
+        .updateNamedConfiguration(
+          {
+            key: 'dlna'
+          },
+          { data: this.dlnaSettings }
+        )
+        .then(() =>
+          this.snackbar.push(this.$t('settings.dlna.savedSuccess'), 'success')
+        )
+        .catch(() =>
+          this.snackbar.push(this.$t('settings.dlna.savedError'), 'error')
+        );
+    },
+    async setSelectedDevice(selectedDevice: DeviceProfileInfo): Promise<void> {
+      if (!isNil(selectedDevice)) {
+        this.currentProfileId = selectedDevice.Id as string;
+        this.selectedProfile = (
+          await this.$api.dlna.getProfile({
+            profileId: selectedDevice.Id as string
+          })
+        ).data;
+        this.selectedProfile = {
+          ...selectedDevice,
+          ...identification
+        };
+        this.isCustomProfile = this.userProfiles.includes(selectedDevice);
+        this.deviceInfoDialog = true;
+      }
+    },
+    async saveProfile(profile: DeviceProfile): Promise<void> {
+      await this.$api.dlna
+        .updateProfile({
+          profileId: this.currentProfileId,
+          deviceProfile: profile
+        })
+        .then(() =>
+          this.snackbar.push(
+            this.$t('settings.dlna.savedProfileSuccess'),
+            'success'
+          )
+        )
+        .catch(() =>
+          this.snackbar.push(
+            this.$t('settings.dlna.savedProfileError'),
+            'error'
+          )
+        );
+      this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
+      this.closeDialog();
+    },
+    async deleteSelectedProfile(): Promise<void> {
+      await this.$api.dlna
+        .deleteProfile({
+          profileId: this.currentProfileId
+        })
+        .then(() =>
+          this.snackbar.push(this.$t('settings.dlna.deleteSuccess'), 'success')
+        )
+        .catch(() =>
+          this.snackbar.push(this.$t('settings.dlna.deleteError'), 'error')
+        );
+      this.dlnaProfiles = (await this.$api.dlna.getProfileInfos()).data;
+      this.closeDialog();
+    },
+    closeDialog(): void {
+      this.deviceInfoDialog = false;
+      this.isCustomProfile = false;
+      this.selectedProfile = {};
+    }
+  }
+});
+</script>
diff --git a/frontend/pages/settings/index.vue b/frontend/pages/settings/index.vue
index 6c1ab67b66a..d8c18e49c25 100644
--- a/frontend/pages/settings/index.vue
+++ b/frontend/pages/settings/index.vue
@@ -191,7 +191,8 @@ export default Vue.extend({
           {
             icon: 'mdi-dlna',
             name: this.$t('settingsSections.dlna.name'),
-            description: this.$t('settingsSections.dlna.description')
+            description: this.$t('settingsSections.dlna.description'),
+            link: 'settings/dlna'
           },
           {
             icon: 'mdi-television-classic',