diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 5ffb8159110..a5353f41d09 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -20,7 +20,7 @@
 -->
 
 <template>
-	<div class="top-bar" :data-theme-dark="isInCall">
+	<div class="top-bar" :style="topBarStyle" :data-theme-dark="isInCall">
 		<ConversationIcon :key="conversation.token"
 			class="conversation-icon"
 			:offline="isPeerInactive"
@@ -306,6 +306,12 @@ export default {
 		hasReactionSupport() {
 			return this.isInCall && this.supportedReactions?.length > 0
 		},
+
+		topBarStyle() {
+			return {
+				'--original-color-main-background': window.getComputedStyle(document.body).getPropertyValue('--color-main-background')
+			}
+		},
 	},
 
 	watch: {
@@ -465,4 +471,9 @@ export default {
 		}
 	}
 }
+
+:deep(.conversation-icon__type) {
+	border-color: var(--original-color-main-background) !important;
+	background-color: var(--original-color-main-background) !important;
+}
 </style>