diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index 1e9c1376a6..5abdd78c9d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -213,14 +213,11 @@ Use this directive to construct a header inside the main editor window.
             scope.vm.currentVariant = "";
 
             function onInit() {
-                setVariantDraftState(scope.variants);
-
                 setCurrentVariant(scope.variants);
                 setVariantStatusColor(scope.variants);
             }
 
             function setCurrentVariant(variants) {
-                setVariantDraftState(variants);
 
                 angular.forEach(variants, function (variant) {
                     if(variant.current) {
@@ -249,14 +246,6 @@ Use this directive to construct a header inside the main editor window.
                 });
             }
 
-            function setVariantDraftState(variants) {
-                _.each(variants, function (variant) {
-                    if (variant.isEdited === true && !variant.state.includes("Draft")) {
-                        variant.state += ", Draft";
-                    }
-                });
-            }
-
             scope.goBack = function () {
                 if (scope.onBack) {
                     scope.onBack();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.controller.js
index 081a923d4e..4a490ee735 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.controller.js
@@ -39,32 +39,36 @@
         }
 
         function onInit() {
+            console.log(variants);
             _.each(variants,
                 function (variant) {
                     variant.compositeId = variant.language.id + "_" + (variant.segment ? variant.segment : "");
                     variant.htmlId = "publish_variant_" + variant.compositeId;
 
-                    //append Draft state to variant
-                    if (variant.isEdited === true && !variant.state.includes("Draft")) {
-                        variant.state += ", Draft";
+                    //separate "pristine" and "dirty" variants
+                    if (variant.isEdited === true) {
                         vm.dirtyVariants.push(variant);
-                    } else if (variant.isEdited === true) {
+                    } else if (variant.isEdited === true ||
+                        variant.isEdited === false && variant.state === "Unpublished") {
                         vm.dirtyVariants.push(variant);
                     } else {
                         vm.pristineVariants.push(variant);
                     }
                 });
 
+            if (vm.dirtyVariants.length !== 0) {
+                //now sort it so that the current one is at the top
+                vm.dirtyVariants = _.sortBy(vm.dirtyVariants, function (v) {
+                    return v.current ? 0 : 1;
+                });
+                //ensure that the current one is selected
+                vm.dirtyVariants[0].publish = true;
+            } else {
+                //disable Publish button if we have nothing to publish
+                $scope.model.disableSubmitButton = true;
+            }
+
             vm.loading = false;
-
-            console.log("Dirty Variants", vm.dirtyVariants);
-
-            //now sort it so that the current one is at the top
-            vm.dirtyVariants = _.sortBy(vm.dirtyVariants, function (v) {
-                return v.current ? 0 : 1;
-            });
-            //ensure that the current one is selected
-            vm.dirtyVariants[0].publish = true;
         }
     }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.html
index f0d721ec04..aa97bf09d2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/publish/publish.html
@@ -1,34 +1,57 @@
-<div ng-controller="Umbraco.Overlays.PublishController as vm" >
-    
+<div ng-controller="Umbraco.Overlays.PublishController as vm">
+
     <div style="margin-bottom: 15px;">
-        <p>What languages would you like to publish?</p>
+        <p> {{vm.dirtyVariants.length > 0 ? 'What languages would you like to publish?' : 'Nothing here to publish!'}}</p>
     </div>
 
     <div ng-if="vm.loading" style="min-height: 50px; position: relative;">
         <umb-load-indicator></umb-load-indicator>
     </div>
 
-    <div class="umb-list umb-list--condensed" ng-if="!vm.loading">
+    <div class="umb-list umb-list--condensed" ng-if="!vm.loading && vm.dirtyVariants">
+
         <div class="umb-list-item" ng-repeat="variant in vm.dirtyVariants">
             <ng-form name="publishVariantSelectorForm">
                 <label class="flex" for="{{variant.htmlId}}">
-                    <input
-                        id="{{variant.htmlId}}"
-                        name="publishVariantSelector"
-                        type="checkbox"
-                        ng-model="variant.publish"
-                        ng-change="vm.changeSelection(variant)"
-                        ng-disabled="variant.validationError"
-                        style="margin-right: 8px;"
-                        val-server-field="{{variant.htmlId}}"/>
+                    <input id="{{variant.htmlId}}"
+                           name="publishVariantSelector"
+                           type="checkbox"
+                           ng-model="variant.publish"
+                           ng-change="vm.changeSelection(variant)"
+                           ng-disabled="variant.validationError"
+                           style="margin-right: 8px;"
+                           val-server-field="{{variant.htmlId}}" />
                     <div>
                         <div ng-class="{'bold': variant.published}" style="margin-bottom: 2px;">{{ variant.language.name }}</div>
-                        <div class="umb-permission__description" ng-if="!variant.validationError">{{ variant.state }}</div>
+                        <div class="umb-permission__description" ng-if="!variant.validationError && variant.isEdited && variant.state === 'Published'"><localize key="content_publishedPendingChanges"></localize></div>
+                        <div class="umb-permission__description" ng-if="!variant.validationError && variant.isEdited && variant.state === 'Unpublished'"><localize key="content_unpublishedPendingChanges"></localize></div>
+                        <div class="umb-permission__description" ng-if="!variant.validationError && variant.isEdited === false">{{ variant.state }}</div>
+
                         <div class="umb-permission__description" style="color: #F02E28;" val-msg-for="publishVariantSelector" val-toggle-msg="valServerField"></div>
                     </div>
                 </label>
             </ng-form>
         </div>
+        <br/>
+    </div>
+
+
+
+    <div ng-if="vm.loading" style="min-height: 50px; position: relative;">
+        <umb-load-indicator></umb-load-indicator>
+    </div>
+
+    <div class="umb-list umb-list--condensed" ng-if="!vm.loading && vm.pristineVariants">
+        <div style="margin-bottom: 15px; font-weight: bold;">
+            <p>Published languages.</p>
+        </div>
+
+        <div class="umb-list-item" ng-repeat="variant in vm.pristineVariants">
+            <div>
+                <div ng-class="{'bold': variant.published}" style="margin-bottom: 2px;">{{ variant.language.name }}</div>
+                <div class="umb-permission__description" ng-if="!variant.validationError">{{ variant.state }}</div>
+            </div>
+        </div>
     </div>
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index 41d44114a0..1b1eadab14 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -59,7 +59,9 @@
                         <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.current}" ng-repeat="variant in variants">
                             <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
                                 <span class="umb-variant-switcher__name">{{variant.language.name}}</span>
-                                <span class="umb-variant-switcher__state">{{variant.state}}</span>
+                                <span class="umb-variant-switcher__state" ng-if="!variant.validationError && variant.isEdited && variant.state === 'Published'"><localize key="content_publishedPendingChanges"></localize></span>
+                                <span class="umb-variant-switcher__state" ng-if="!variant.validationError && variant.isEdited && variant.state === 'Unpublished'"><localize key="content_unpublishedPendingChanges"></localize></span>
+                                <span class="umb-variant-switcher__state" ng-if="variant.isEdited === false">{{variant.state}}</span>
                             </a>
                             <!-- Commented out as opposed to removed until we fully support split view (U4-11290) -->
                             <!--
diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
index 6b18680930..4638dab396 100644
--- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml
@@ -201,6 +201,7 @@
         <key alias="publish">Publish</key>
         <key alias="published">Published</key>
         <key alias="publishedPendingChanges">Published (pending changes)</key>
+        <key alias="unpublishedPendingChanges">Unpublished (pending changes)</key>
         <key alias="publishStatus">Publication Status</key>
         <key alias="releaseDate">Publish at</key>
         <key alias="unpublishDate">Unpublish at</key>