diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 98985f729e4..399128bee8d 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -45,7 +45,7 @@ $-mini-nav-size: 40px;
         overflow: auto;
     }
 
-    @each $-name, $-color in ('edit': $o-enterprise-primary-color, 'apps': $o-enterprise-color) {
+    @each $-name, $-color in ('apps': $o-enterprise-color, 'edit': $o-we-bg-lighter) {
         .o_frontend_to_backend_#{$-name}_btn {
             background-color: $-color;
 
@@ -55,6 +55,12 @@ $-mini-nav-size: 40px;
         }
     }
 
+    .o_frontend_to_backend_edit_btn > img {
+        height: 1.8em;
+        margin-right: 0.5em;
+        border-radius: 0.25rem;
+    }
+
     &:hover {
         &:before, .o_frontend_to_backend_icon {
             transform: scale(.3);
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 9a0f493ac2e..b22195fa04a 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -192,7 +192,7 @@
                        t-attf-href="/web#menu_id=#{menu['id']}&action=#{menu['action'] and menu['action'].split(',')[1] or ''}"/>
                 </div>
                 <a groups="website.group_website_restricted_editor" href="#" title="Edit this content" class="o_frontend_to_backend_edit_btn px-3 d-flex align-items-center justify-content-center text-decoration-none">
-                    <i class="fa fa-pencil me-1"/>Edit
+                    <img src="/website/static/description/icon.png"/>Editor
                 </a>
             </div>
         </div>