diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 083feeb5c2..750159cebc 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    function EditorContentHeader(serverValidationManager, localizationService, editorState, contentVariantUtilities) {
+    function EditorContentHeader(serverValidationManager, localizationService, editorState) {
 
         function link(scope) {
 
@@ -122,8 +122,6 @@
                 
             }
 
-            scope.getVariantDisplayName = contentVariantUtilities.getDisplayName;
-
             scope.goBack = function () {
                 if (scope.onBack) {
                     scope.onBack();
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/contentvariantutilities.service.js b/src/Umbraco.Web.UI.Client/src/common/services/contentvariantutilities.service.js
deleted file mode 100644
index 1e7ac874cc..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/services/contentvariantutilities.service.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
-* @ngdoc service
-* @name umbraco.services.contentVariantUtilities
-* @description A utility service for dealing with variants
-**/
-function contentVariantUtilities() {
-    /**
-     * Returns the id for this variant
-     * @param {any} variant
-     */
-    function getDisplayName(variant) {
-        if (variant == null) {
-            return "";
-        }
-
-        var parts = [];
-
-        if (variant.language && variant.language.name) {
-            parts.push(variant.language.name);
-        }
-
-        if (variant.segment) {
-            var capitalized = variant.segment.split(" ").map(p => p[0].toUpperCase() + p.substring(1)).join(" ");
-            parts.push(capitalized);
-        }
-
-        if (parts.length === 0) {
-            // Invariant
-            parts.push("Default");
-        }
-
-        return parts.join(" - ");
-    }
-
-    return {
-        getDisplayName
-    }
-}
-angular.module('umbraco.services').factory('contentVariantUtilities', contentVariantUtilities);
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 58f9340121..544a04515f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -41,12 +41,12 @@
                     </ng-form>
 
                     <button type="button" ng-if="vm.hasVariants === true && hideChangeVariant !== true" class="umb-variant-switcher__toggle umb-outline" ng-click="vm.dropdownOpen = !vm.dropdownOpen" ng-class="{'--error': vm.errorsOnOtherVariants}">
-                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
+                        <span ng-bind="editor.content.displayName"></span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
                     </button>
 
                     <span ng-if="vm.hasVariants === true && hideChangeVariant" class="umb-variant-switcher__toggle">
-                        <span ng-bind="getVariantDisplayName(editor.content)"></span>
+                        <span ng-bind="editor.content.displayName"></span>
                     </span>
 
                     <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSegment === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
@@ -60,7 +60,7 @@
                                 <i class="icon icon-navigation-right" ng-if="!entry.open"></i>
                             </button>
                             <button type="button" class="umb-variant-switcher__name-wrapper umb-outline" ng-click="selectVariant($event, entry.variant)" prevent-default>
-                                <span class="umb-variant-switcher__name" ng-bind="getVariantDisplayName(entry.variant)"></span>
+                                <span class="umb-variant-switcher__name" ng-bind="entry.variant.displayName"></span>
                                 <umb-variant-state variant="entry.variant" class="umb-variant-switcher__state"></umb-variant-state>
                             </button>
                             <div ng-if="splitViewOpen !== true && !entry.variant.active" class="umb-variant-switcher__split-view umb-outline" ng-click="openInSplitView($event, entry.variant)">Open in split view</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
index a1d62dc1dd..de4d4847fb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function PublishController($scope, localizationService, contentEditingHelper, contentVariantUtilities) {
+    function PublishController($scope, localizationService, contentEditingHelper) {
 
         var vm = this;
         vm.loading = true;
@@ -12,8 +12,6 @@
         vm.dirtyVariantFilter = dirtyVariantFilter;
         vm.pristineVariantFilter = pristineVariantFilter;
 
-        $scope.getVariantDisplayName = contentVariantUtilities.getDisplayName;
-
         /** Returns true if publishing is possible based on if there are un-published mandatory languages */
         function canPublish() {
             
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
index a99b8f3ca3..e9e179c64f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/overlays/publish.html
@@ -21,7 +21,7 @@
                                   on-change="vm.changeSelection(variant)"
                                   disabled="(variant.canPublish === false)"
                                   server-validation-field="{{variant.htmlId}}"
-                                  text="{{getVariantDisplayName(variant)}}"
+                                  text="{{variant.displayName}}"
                     />
                     <div>
                             <span class="db umb-list-item__description umb-list-item__description--checkbox" ng-if="!publishVariantSelectorForm.publishVariantSelector.$invalid && !(variant.notifications && variant.notifications.length > 0)">
@@ -51,7 +51,7 @@
         <div class="umb-list-item" ng-repeat="variant in vm.variants | filter:vm.pristineVariantFilter">
             <div>
                 <div style="margin-bottom: 2px;">
-                    <span ng-bind="getVariantDisplayName(variant)"></span>
+                    <span ng-bind="variant.displayName"></span>
                     <strong ng-if="variant.language.isMandatory" class="umb-control-required">*</strong>
                 </div>
 
diff --git a/src/Umbraco.Web/Models/ContentEditing/ContentVariationDisplay.cs b/src/Umbraco.Web/Models/ContentEditing/ContentVariationDisplay.cs
index aff79d7b9d..2a2ec49002 100644
--- a/src/Umbraco.Web/Models/ContentEditing/ContentVariationDisplay.cs
+++ b/src/Umbraco.Web/Models/ContentEditing/ContentVariationDisplay.cs
@@ -24,6 +24,9 @@ namespace Umbraco.Web.Models.ContentEditing
         [DataMember(Name = "name", IsRequired = true)]
         public string Name { get; set; }
 
+        [DataMember(Name = "displayName")]
+        public string DisplayName { get; set; }
+
         /// <summary>
         /// Defines the tabs containing display properties
         /// </summary>
diff --git a/src/Umbraco.Web/Models/Mapping/ContentMapDefinition.cs b/src/Umbraco.Web/Models/Mapping/ContentMapDefinition.cs
index c811c236d4..8c9b65e312 100644
--- a/src/Umbraco.Web/Models/Mapping/ContentMapDefinition.cs
+++ b/src/Umbraco.Web/Models/Mapping/ContentMapDefinition.cs
@@ -50,7 +50,7 @@ namespace Umbraco.Web.Models.Mapping
             _tabsAndPropertiesMapper = new TabsAndPropertiesMapper<IContent>(localizedTextService);
             _stateMapper = new ContentSavedStateMapper<ContentPropertyDisplay>();
             _basicStateMapper = new ContentBasicSavedStateMapper<ContentPropertyBasic>();
-            _contentVariantMapper = new ContentVariantMapper(_localizationService);
+            _contentVariantMapper = new ContentVariantMapper(_localizationService, localizedTextService);
         }
 
         public void DefineMaps(UmbracoMapper mapper)
@@ -102,7 +102,7 @@ namespace Umbraco.Web.Models.Mapping
             target.ContentDto.Properties = context.MapEnumerable<Property, ContentPropertyDto>(source.Properties);
         }
 
-        // Umbraco.Code.MapAll -Segment -Language
+        // Umbraco.Code.MapAll -Segment -Language -DisplayName
         private void Map(IContent source, ContentVariantDisplay target, MapperContext context)
         {
             target.CreateDate = source.CreateDate;
diff --git a/src/Umbraco.Web/Models/Mapping/ContentVariantMapper.cs b/src/Umbraco.Web/Models/Mapping/ContentVariantMapper.cs
index 0ed8ffb80e..406c2090c2 100644
--- a/src/Umbraco.Web/Models/Mapping/ContentVariantMapper.cs
+++ b/src/Umbraco.Web/Models/Mapping/ContentVariantMapper.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Globalization;
 using System.Linq;
 using Umbraco.Core;
 using Umbraco.Core.Mapping;
@@ -13,10 +14,12 @@ namespace Umbraco.Web.Models.Mapping
     internal class ContentVariantMapper
     {
         private readonly ILocalizationService _localizationService;
+        private readonly ILocalizedTextService _localizedTextService;
 
-        public ContentVariantMapper(ILocalizationService localizationService)
+        public ContentVariantMapper(ILocalizationService localizationService, ILocalizedTextService localizedTextService)
         {
             _localizationService = localizationService ?? throw new ArgumentNullException(nameof(localizationService));
+            _localizedTextService = localizedTextService ?? throw new ArgumentNullException(nameof(localizedTextService));
         }
 
         public IEnumerable<ContentVariantDisplay> Map(IContent source, MapperContext context)
@@ -138,8 +141,31 @@ namespace Umbraco.Web.Models.Mapping
             variantDisplay.Segment = segment;
             variantDisplay.Language = language;
             variantDisplay.Name = content.GetCultureName(language?.IsoCode);
+            variantDisplay.DisplayName = GetDisplayName(language, segment);           
 
             return variantDisplay;
         }
+
+        private string GetDisplayName(Language language, string segment)
+        {
+            var isCultureVariant = language != null;
+            var isSegmentVariant = !segment.IsNullOrWhiteSpace();
+
+            if(!isCultureVariant && !isSegmentVariant)
+            {                
+                return _localizedTextService.Localize("general/default");
+            }
+
+            var parts = new List<string>();
+
+            if (isCultureVariant)
+                parts.Add(new CultureInfo(language.IsoCode).NativeName);
+
+            if (isSegmentVariant)
+                parts.Add(segment);
+
+            return string.Join(" - ", parts);
+            
+        }
     }
 }