diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index e60ceda822..8094062628 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -317,14 +317,11 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionButton {
-    padding: 5px;
+    border: none;
+    padding: 5px 20px;
     border-radius: 5px;
-    color: $warning-color;
-    background-color: $primary-bg-color;
-}
-
-.mx_AppPermissionButton:hover {
-    background-color: $primary-fg-color;
+    background-color: $button-bg-color;
+    color: $button-fg-color;
     cursor: pointer;
 }
 
diff --git a/src/components/views/elements/AppPermission.js b/src/components/views/elements/AppPermission.js
index 8f4a434df0..f31b02dd14 100644
--- a/src/components/views/elements/AppPermission.js
+++ b/src/components/views/elements/AppPermission.js
@@ -47,7 +47,7 @@ export default class AppPermission extends React.Component {
         return (
             <div className='mx_AppPermissionWarning'>
                 <div className='mx_AppPermissionWarningImage'>
-                    <img src={require("../../../../res/img/warning.svg")} alt={_t('Warning!')} />
+                    <img src={require("../../../../res/img/feather-icons/warning-triangle.svg")} alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
                     <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>