diff --git a/src/components/TopBar/CallTime.vue b/src/components/TopBar/CallTime.vue
index 0bfac7d4c01..69cf7db0054 100644
--- a/src/components/TopBar/CallTime.vue
+++ b/src/components/TopBar/CallTime.vue
@@ -19,30 +19,28 @@
 -->
 
 <template>
-	<NcPopover class="top-bar__button call-time"
+	<NcPopover class="call-time"
 		close-after-click="true"
 		:menu-title="callTime"
 		:shown.sync="showPopover"
-		:class="{ 'call-time--wide': isWide }"
 		:triggers="[]"
 		:container="container">
 		<template #trigger>
-			<NcButton :disabled="(!isStartingRecording && !isRecording) || !isModerator"
+			<NcButton :disabled="!isShowRecordingStatus || !isModerator"
 				:wide="true"
-				:class="{ 'call-time__not-recording': !isStartingRecording && !isRecording }"
-				:title="isStartingRecording ? t('spreed', 'Starting the recording') : t('spreed', 'Recording')"
+				:title="recordingButtonTitle"
 				type="tertiary"
 				@click="showPopover = true">
-				<template v-if="isStartingRecording" #icon>
-					<RecordCircle :size="20"
-						fill-color="var(--color-loading-light)" />
-				</template>
-				<template v-else-if="isRecording" #icon>
-					<RecordCircle :size="20"
+				<template v-if="isShowRecordingStatus" #icon>
+					<RecordCircle v-if="isRecording"
+						:size="20"
 						fill-color="#e9322d" />
+					<RecordCircle v-else
+						:size="20"
+						fill-color="var(--color-loading-light)" />
 				</template>
 				{{ formattedTime }}
-			</ncbutton>
+			</NcButton>
 		</template>
 		<NcButton v-if="isStartingRecording"
 			type="tertiary-no-background"
@@ -66,7 +64,6 @@
 </template>
 
 <script>
-
 import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
 import StopIcon from 'vue-material-design-icons/Stop.vue'
 
@@ -81,11 +78,11 @@ export default {
 	name: 'CallTime',
 
 	components: {
-		RecordCircle,
-		StopIcon,
+		NcButton,
 		NcLoadingIcon,
 		NcPopover,
-		NcButton,
+		RecordCircle,
+		StopIcon,
 	},
 
 	mixins: [isInLobby],
@@ -146,10 +143,6 @@ export default {
 			return hours + ' : ' + minutes + ' : ' + seconds
 		},
 
-		isWide() {
-			return this.formattedTime.length > 7
-		},
-
 		token() {
 			return this.$store.getters.getToken()
 		},
@@ -167,6 +160,20 @@ export default {
 			return this.conversation.callRecording === CALL.RECORDING.VIDEO
 				|| this.conversation.callRecording === CALL.RECORDING.AUDIO
 		},
+
+		isShowRecordingStatus() {
+			return this.isStartingRecording || this.isRecording
+		},
+
+		recordingButtonTitle() {
+			if (this.isStartingRecording) {
+				return t('spreed', 'Starting the recording')
+			} else if (this.isRecording) {
+				return t('spreed', 'Recording')
+			}
+
+			return ''
+		},
 	},
 
 	mounted() {
@@ -204,15 +211,6 @@ export default {
 	align-items: center;
 	height: var(--default-clickable-area);
 	font-weight: bold;
-	width: 116px;
-
-	&__not-recording {
-		padding-left: var(--default-clickable-area) !important
-	}
-
-	&--wide {
-		width: 148px;
-	}
 }
 
 ::v-deep .button-vue {
@@ -221,6 +219,7 @@ export default {
 
 	&:disabled {
 		opacity: 1 !important;
+		pointer-events: none;
 	}
 }
 
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index e995c5235ff..82a8d1b2851 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -57,7 +57,7 @@
 		<!-- Call time -->
 		<CallTime v-if="isInCall"
 			:start="conversation.callStartTime"
-			class="dark-hover" />
+			class="top-bar__button dark-hover" />
 
 		<!-- Participants counter -->
 		<NcButton v-if="isInCall && !isOneToOneConversation && isModeratorOrUser"
@@ -163,17 +163,19 @@ export default {
 	},
 
 	components: {
+		// Components
 		BreakoutRoomsEditor,
-		NcCounterBubble,
 		CallButton,
-		AccountMultiple,
-		MessageText,
+		CallTime,
 		ConversationIcon,
 		LocalMediaControls,
-		TopBarMenu,
 		NcButton,
-		CallTime,
+		NcCounterBubble,
+		TopBarMenu,
+		// Icons
+		AccountMultiple,
 		MenuIcon,
+		MessageText,
 	},
 
 	mixins: [
@@ -265,7 +267,7 @@ export default {
 		 * Online status of the peer in one to one conversation.
 		 */
 		isPeerOffline() {
-			// Only compute this in on to one conversations
+			// Only compute this in one-to-one conversations
 			if (!this.isOneToOneConversation) {
 				return undefined
 			}
@@ -301,7 +303,7 @@ export default {
 			}
 		},
 
-		hasUnreadMentions(newValue, oldValue) {
+		hasUnreadMentions(newValue) {
 			if (!this.isInCall || !this.showOpenSidebarButton) {
 				return
 			}
@@ -375,14 +377,13 @@ export default {
 
 		// TODO: implement real method
 		stopRecording() {
-			console.debug('stop recordiiing')
+			console.debug('stop recording')
 		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-
 @import '../../assets/variables';
 
 .top-bar {