diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss
index 78324c5e89..0031d3a64c 100644
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@@ -67,12 +67,26 @@ limitations under the License.
                 }
             }
 
-            .mx_RoomSummaryCard_e2ee_secure {
-                background-color: #5abff2;
+            .mx_RoomSummaryCard_e2ee_normal {
+                background-color: #424446;
                 &::before {
                     mask-image: url('$(res)/img/e2e/normal.svg');
                 }
             }
+
+            .mx_RoomSummaryCard_e2ee_verified {
+                background-color: #0dbd8b;
+                &::before {
+                    mask-image: url('$(res)/img/e2e/verified.svg');
+                }
+            }
+
+            .mx_RoomSummaryCard_e2ee_warning {
+                background-color: #ff4b55;
+                &::before {
+                    mask-image: url('$(res)/img/e2e/warning.svg');
+                }
+            }
         }
     }
 
diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx
index 9f803d1185..dd4c281090 100644
--- a/src/components/views/right_panel/RoomSummaryCard.tsx
+++ b/src/components/views/right_panel/RoomSummaryCard.tsx
@@ -40,6 +40,7 @@ import TextWithTooltip from "../elements/TextWithTooltip";
 import BaseAvatar from "../avatars/BaseAvatar";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import WidgetStore, {IApp} from "../../../stores/WidgetStore";
+import { E2EStatus, shieldStatusForRoom } from "../../../utils/ShieldUtils";
 
 interface IProps {
     room: Room;
@@ -200,6 +201,13 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
 
     const isRoomEncrypted = useIsEncrypted(cli, room);
 
+    const [e2eStatus, setE2eStatus] = useState<E2EStatus>();
+    useEffect(() => {
+        if (isRoomEncrypted) {
+            shieldStatusForRoom(cli, room).then(e => setE2eStatus(e));
+        }
+    });
+
     const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
     const header = <React.Fragment>
         <div className="mx_RoomSummaryCard_avatar" role="presentation">
@@ -207,7 +215,9 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
             <TextWithTooltip
                 tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
                 class={classNames("mx_RoomSummaryCard_e2ee", {
-                    mx_RoomSummaryCard_e2ee_secure: isRoomEncrypted,
+                    mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
+                    mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
+                    mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
                 })}
             />
         </div>