diff --git a/framework/core/js/src/admin/components/ExtensionPage.js b/framework/core/js/src/admin/components/ExtensionPage.js
index de06ea888..73275ab9f 100644
--- a/framework/core/js/src/admin/components/ExtensionPage.js
+++ b/framework/core/js/src/admin/components/ExtensionPage.js
@@ -203,7 +203,7 @@ export default class ExtensionPage extends AdminPage {
       Button.component(
         {
           icon: 'fab fa-readme',
-          class: 'Readme-link',
+          class: 'Button Button--text',
           onclick() {
             app.modal.show(ReadmeModal, { extension });
           },
diff --git a/framework/core/js/src/admin/components/ReadmeModal.js b/framework/core/js/src/admin/components/ReadmeModal.js
index 100e8e2b3..425e5aac2 100644
--- a/framework/core/js/src/admin/components/ReadmeModal.js
+++ b/framework/core/js/src/admin/components/ReadmeModal.js
@@ -19,7 +19,7 @@ export default class ReadmeModal extends Modal {
   }
 
   className() {
-    return 'ReadmeModal Modal--large';
+    return 'ReadmeModal Modal--large Modal--inverted';
   }
 
   title() {
@@ -32,7 +32,7 @@ export default class ReadmeModal extends Modal {
     const text = app.translator.trans('core.admin.extension.readme.no_readme');
 
     return (
-      <div className="container">
+      <div className="Modal-body">
         {this.loading ? (
           <div className="ReadmeModal-loading">{LoadingIndicator.component()}</div>
         ) : (
diff --git a/framework/core/less/admin.less b/framework/core/less/admin.less
index ac4d51eb4..49a3ab12f 100644
--- a/framework/core/less/admin.less
+++ b/framework/core/less/admin.less
@@ -11,5 +11,4 @@
 @import "admin/AppearancePage";
 @import "admin/MailPage";
 @import "admin/NoJs";
-@import "admin/ReadmeModal";
 @import "admin/UsersListPage";
diff --git a/framework/core/less/admin/ExtensionPage.less b/framework/core/less/admin/ExtensionPage.less
index 25e282fc3..a9b00085a 100644
--- a/framework/core/less/admin/ExtensionPage.less
+++ b/framework/core/less/admin/ExtensionPage.less
@@ -150,19 +150,12 @@
   margin-left: 8px;
 }
 
-.Readme-link {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: @muted-color;
-}
-
 .ReadmeModal {
-  .Modal-header {
-    background: @control-bg;
-    color: @muted-color
-  }
-  img {
-      max-width: 100%;
-  }
-}
+   .Placeholder {
+     margin-bottom: 40px;
+   }
+
+   img {
+     max-width: 100%;
+   }
+ }
diff --git a/framework/core/less/admin/ReadmeModal.less b/framework/core/less/admin/ReadmeModal.less
deleted file mode 100644
index 953b96aba..000000000
--- a/framework/core/less/admin/ReadmeModal.less
+++ /dev/null
@@ -1,5 +0,0 @@
-.ReadmeModal {
-    .Placeholder {
-        margin-bottom: 40px;
-    }
-}
diff --git a/framework/core/less/common/Modal.less b/framework/core/less/common/Modal.less
index 0fdff8ee8..4607ed052 100644
--- a/framework/core/less/common/Modal.less
+++ b/framework/core/less/common/Modal.less
@@ -134,6 +134,16 @@
   }
 }
 
+.Modal--inverted {
+  .Modal-header {
+    background-color: @control-bg;
+    color: @control-color;
+  }
+  .Modal-body {
+    background-color: transparent;
+    color: unset;
+  }
+}
 
 @media @phone {
   .ModalManager.fade {