diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index eb8740b385..bbd866a5fd 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -128,7 +128,7 @@
     border-radius: @baseBorderRadius;
 
     &.umb-overlay--medium {
-        width: 480px;
+        width: 520px;
     }
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
index a19cf40e1a..5735f8462b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -1,4 +1,4 @@
-<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
+<div data-element="overlay" class="umb-overlay umb-overlay-{{position}} umb-overlay--{{model.size}}" on-outside-click="outSideClick()" role="dialog" aria-labelledby="umb-overlay-title" aria-describedby="umb-overlay-description">
     <ng-form class="umb-overlay__form" name="overlayForm" novalidate val-form-manager>
         <div data-element="overlay-header" class="umb-overlay-header">
             <h1 class="umb-overlay__title" id="umb-overlay-title">{{model.title}}</h1>