diff --git a/assets/styles/framework/framework.less b/assets/styles/framework/framework.less
index 812d76cf90..9fdd181882 100644
--- a/assets/styles/framework/framework.less
+++ b/assets/styles/framework/framework.less
@@ -14,6 +14,7 @@
 @third-layer-zindex: 30;
 @fourth-layer-zindex: 40;
 @fifth-layer-zindex: 50;
+@sixth-layer-zindex: 60;
 @viewport-width: 100vw;
 
 #__nuxt,
@@ -44,3 +45,6 @@
 .fifth-layer {
   z-index: @fifth-layer-zindex;
 }
+.sixth-layer {
+  z-index: @sixth-layer-zindex;
+}
diff --git a/assets/styles/framework/ui.less b/assets/styles/framework/ui.less
index fd76d53b45..fe9092db57 100644
--- a/assets/styles/framework/ui.less
+++ b/assets/styles/framework/ui.less
@@ -7,6 +7,7 @@
 @mobile-nav-size: 4.5rem;
 @slimbar-size: 60px;
 @chatbar-input-height: 48px;
+@background-call-height: 36px;
 
 // Popups
 @enhancers-height: 30rem;
diff --git a/components/ui/BackgroundCall/BackgroundCall.html b/components/ui/BackgroundCall/BackgroundCall.html
new file mode 100644
index 0000000000..419547eec6
--- /dev/null
+++ b/components/ui/BackgroundCall/BackgroundCall.html
@@ -0,0 +1,5 @@
+<div class="background-call" @click="navigateToActiveConversation">
+  {{$t('ui.background_call')}}&nbsp;
+  <span v-if="caller" class="background-call-name">{{caller.name}}</span>&nbsp;
+  <span v-if="elapsedTime">- {{elapsedTime}}</span>
+</div>
diff --git a/components/ui/BackgroundCall/BackgroundCall.less b/components/ui/BackgroundCall/BackgroundCall.less
new file mode 100644
index 0000000000..309cc5c278
--- /dev/null
+++ b/components/ui/BackgroundCall/BackgroundCall.less
@@ -0,0 +1,24 @@
+.background-call {
+  &:extend(.background-flair);
+  &:extend(.font-secondary);
+  &:extend(.absolute-coverage);
+  border-radius: 0 0 @corner-rounding @corner-rounding;
+  height: @background-call-height;
+  z-index: @fifth-layer-zindex;
+  font-size: @micro-text-size;
+  bottom: auto;
+  text-align: center;
+  box-shadow: 0px 0px 30px rgba(var(--flair-color-rgb), 0.35),
+    0px 0px 20px rgba(var(--flair-color-rgb), 0.4);
+  padding: 10px 10%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  &-name {
+    &:extend(.ellipsis);
+    &:extend(.font-primary);
+    font-weight: 700;
+  }
+}
diff --git a/components/ui/BackgroundCall/BackgroundCall.vue b/components/ui/BackgroundCall/BackgroundCall.vue
new file mode 100644
index 0000000000..99f1a46026
--- /dev/null
+++ b/components/ui/BackgroundCall/BackgroundCall.vue
@@ -0,0 +1,48 @@
+<template src="./BackgroundCall.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mapState } from 'vuex'
+import { Friend } from '~/types/ui/friends'
+import { RootState } from '~/types/store/store'
+
+export default Vue.extend({
+  computed: {
+    ...mapState({
+      showSettings: (state) => (state as RootState).ui.showSettings,
+      friends: (state) => (state as RootState).friends.all,
+      elapsedTime: (state) => (state as RootState).webrtc.elapsedTime,
+      activeCall: (state) => (state as RootState).webrtc.activeCall,
+    }),
+    caller(): Friend | undefined {
+      return this.friends.find(
+        (f: Friend) => f.peerId === this.activeCall?.peerId,
+      )
+    },
+  },
+  methods: {
+    navigateToActiveConversation() {
+      if (!this.caller) {
+        return
+      }
+
+      if (this.$device.isMobile) {
+        // mobile, show slide 1 which is chat slide, set showSidebar flag false as css related
+        this.$store.commit('ui/setSwiperSlideIndex', 1)
+        this.$store.commit('ui/showSidebar', false)
+      }
+
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.caller.peerId,
+        type: 'friend',
+        participants: [this.caller],
+        calling: false,
+      })
+
+      this.$router.push(`/chat/direct/${this.caller.address}`)
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./BackgroundCall.less"></style>
diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 93ad3ba13d..7e730f10bf 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -91,4 +91,5 @@
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
+  <UiBackgroundCall v-if="showBackgroundCall" />
 </div>
diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index 26ba3a7ec2..da2f4bdd52 100644
--- a/components/ui/Global/Global.vue
+++ b/components/ui/Global/Global.vue
@@ -1,7 +1,7 @@
 <template src="./Global.html"></template>
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { TrackKind } from '~/libraries/WebRTC/types'
 import { ModalWindows } from '~/store/ui/types'
 import { Item } from '~/libraries/Files/abstracts/Item.abstract'
@@ -21,7 +21,14 @@ export default Vue.extend({
   name: 'Global',
   computed: {
     ...mapState(['ui', 'media', 'webrtc', 'conversation']),
+    ...mapGetters('webrtc', ['isBackgroundCall', 'isActiveCall']),
     ModalWindows: () => ModalWindows,
+    showBackgroundCall(): boolean {
+      if (!this.$device.isMobile) {
+        return this.isBackgroundCall
+      }
+      return this.isBackgroundCall || (this.isActiveCall && this.ui.showSidebar)
+    },
   },
   mounted() {
     // This determines if we should show the
diff --git a/components/ui/Modal/Modal.less b/components/ui/Modal/Modal.less
index ce5e5268dc..766181ff6a 100644
--- a/components/ui/Modal/Modal.less
+++ b/components/ui/Modal/Modal.less
@@ -34,7 +34,7 @@
 }
 
 .modal {
-  &:extend(.first-layer);
+  &:extend(.sixth-layer);
   position: absolute;
 }
 .close {
diff --git a/components/views/friends/friend/Friend.vue b/components/views/friends/friend/Friend.vue
index e5864ad6c8..11bd983831 100644
--- a/components/views/friends/friend/Friend.vue
+++ b/components/views/friends/friend/Friend.vue
@@ -152,6 +152,12 @@ export default Vue.extend({
       }
     },
     sendMessageRequest() {
+      this.$store.dispatch('conversation/setConversation', {
+        id: this.friend.peerId,
+        type: 'friend',
+        participants: [this.friend],
+        calling: false,
+      })
       this.$router.push(`/chat/direct/${this.friend.address}`)
     },
   },
diff --git a/components/views/media/Media.vue b/components/views/media/Media.vue
index cee4c1456b..c9014ccc53 100644
--- a/components/views/media/Media.vue
+++ b/components/views/media/Media.vue
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { Friend } from '~/types/ui/friends'
 import { User } from '~/types/ui/user'
 import { Sounds } from '~/libraries/SoundManager/SoundManager'
@@ -49,12 +49,7 @@ export default Vue.extend({
       'webrtc',
       'conversation',
     ]),
-    isActiveCall() {
-      return (
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.peerId === this.conversation.id
-      )
-    },
+    ...mapGetters('webrtc', ['isActiveCall']),
     computedUsers() {
       return this.fullscreen
         ? this.users.slice(0, this.fullscreenMaxViewableUsers)
diff --git a/components/views/media/heading/Heading.html b/components/views/media/heading/Heading.html
index 4cc94b1a63..496af1a056 100644
--- a/components/views/media/heading/Heading.html
+++ b/components/views/media/heading/Heading.html
@@ -1,26 +1,24 @@
-<div id="media-heading">
-  <TypographyTag
-    v-if="elapsedTimeLabel"
-    data-cy="elapsed-time"
-    :text="elapsedTimeLabel"
-  />
-  <div class="spacer"></div>
-  <transition name="media-fullscreen" mode="out-in">
-    <div
-      v-bind:key="ui.fullscreen"
-      v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
-      @click="toggleFullscreen"
-    >
-      <minimize-icon
-        data-cy="exit-fullscreen"
-        v-if="ui.fullscreen"
-        size="1.2x"
-      />
-      <maximize-icon
-        data-cy="go-fullscreen"
-        v-else="ui.fullscreen"
-        size="1.2x"
-      />
-    </div>
-  </transition>
-</div>
+<div id="media-heading">
+  <TypographyTag
+    v-if="elapsedTime"
+    data-cy="elapsed-time"
+    :text="$t('ui.live', {
+    time: elapsedTime
+  })"
+  />
+  <div class="spacer"></div>
+  <transition name="media-fullscreen" mode="out-in">
+    <div
+      :key="ui.fullscreen"
+      v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
+      @click="toggleFullscreen"
+    >
+      <minimize-icon
+        v-if="ui.fullscreen"
+        data-cy="exit-fullscreen"
+        size="1.2x"
+      />
+      <maximize-icon v-else data-cy="go-fullscreen" size="1.2x" />
+    </div>
+  </transition>
+</div>
diff --git a/components/views/media/heading/Heading.vue b/components/views/media/heading/Heading.vue
index d159800ee2..6303bb692c 100644
--- a/components/views/media/heading/Heading.vue
+++ b/components/views/media/heading/Heading.vue
@@ -10,20 +10,9 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
-  data() {
-    return {
-      elapsedTimeLabel: '',
-      timer: undefined as NodeJS.Timeout | undefined,
-    }
-  },
   computed: {
-    ...mapState(['ui', 'webrtc']),
-  },
-  mounted() {
-    this.setTimer()
-  },
-  beforeDestroy() {
-    this.clearTimer()
+    ...mapState(['ui']),
+    ...mapState('webrtc', ['elapsedTime']),
   },
   methods: {
     /**
@@ -41,25 +30,6 @@ export default Vue.extend({
         }
       }
     },
-    elapsedTime(start: number): void {
-      if (!this.webrtc.activeCall || !start) {
-        return
-      }
-      const duration = this.$dayjs.duration(Date.now() - start)
-      const hours = duration.hours()
-      this.elapsedTimeLabel = `${this.$t('ui.live')} ${
-        hours > 0 ? `${hours}:` : ''
-      }${duration.format('mm:ss')}`
-    },
-    setTimer() {
-      this.elapsedTime(this.webrtc.createdAt)
-      this.timer = setInterval(() => {
-        this.elapsedTime(this.webrtc.createdAt)
-      }, 1000)
-    },
-    clearTimer() {
-      clearInterval(this.timer)
-    },
   },
 })
 </script>
diff --git a/components/views/navigation/toolbar/Toolbar.html b/components/views/navigation/toolbar/Toolbar.html
index e632ce633d..5ba1a1ad14 100644
--- a/components/views/navigation/toolbar/Toolbar.html
+++ b/components/views/navigation/toolbar/Toolbar.html
@@ -69,7 +69,7 @@
       />
     </div>
     <!-- <div
-      :class="`control-button ${!enableRTC || webrtc.activeCall ? 'disabled' : ''}`"
+      :class="`control-button ${!enableRTC || webrtc.BackgroundCall ? 'disabled' : ''}`"
       data-cy="toolbar-enable-video"
       v-tooltip.bottom="enableRTC ? $t('controls.video') : $t('controls.not_connected')"
       v-if="recipient"
diff --git a/layouts/Layout.less b/layouts/Layout.less
index 6b885758a2..aa36cf0c0e 100644
--- a/layouts/Layout.less
+++ b/layouts/Layout.less
@@ -135,6 +135,11 @@
       }
     }
   }
+
+  &.has-background-call {
+    position: relative;
+    padding-top: @background-call-height;
+  }
 }
 
 .desktop .dynamic-content.swiper-slide-next {
diff --git a/layouts/chat.vue b/layouts/chat.vue
index 886eaae16a..e215469ff3 100644
--- a/layouts/chat.vue
+++ b/layouts/chat.vue
@@ -1,18 +1,22 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${$store.state.ui.theme.base.class}
-    ${showSidebar ? 'is-open' : 'is-collapsed chat-page'} ${
-      asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside'
-    } ${selectedGroup ? 'active-group' : null}`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      showSidebar ? 'is-open' : 'is-collapsed chat-page',
+      asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside',
+      selectedGroup ? 'active-group' : null,
+    ]"
   >
     <div
       id="app"
-      :class="`${showSidebar ? 'is-open' : 'is-collapsed'} ${
-        asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside'
-      } ${selectedGroup ? 'group' : 'direct'} ${
-        $device.isMobile ? 'mobile-app' : 'desktop'
-      }`"
+      :class="[
+        showSidebar ? 'is-open' : 'is-collapsed',
+        asidebar && selectedGroup ? 'is-open-aside' : 'is-collapsed-aside',
+        selectedGroup ? 'group' : 'direct',
+        $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
+      ]"
     >
       <UiGlobal />
       <swiper
@@ -181,6 +185,7 @@ export default Vue.extend({
     ...mapGetters('ui', ['showSidebar', 'swiperSlideIndex']),
     ...mapGetters('textile', ['getInitialized']),
     ...mapGetters('conversation', ['recipient']),
+    ...mapGetters('webrtc', ['isBackgroundCall', 'isActiveCall']),
     DataStateType: () => DataStateType,
     selectedGroup(): string {
       return this.$route.params.id // TODO: change with groupid - AP-400
@@ -197,12 +202,6 @@ export default Vue.extend({
         !this.friends.all.length
       )
     },
-    isActiveCall() {
-      return (
-        this.webrtc.activeCall &&
-        this.webrtc.activeCall.callId === this.conversation.id
-      )
-    },
   },
   watch: {
     showSidebar(newValue, oldValue) {
@@ -225,6 +224,7 @@ export default Vue.extend({
     this.$store.commit('ui/setShowOlderMessagesInfo', false)
     // reset active conversation on chat leave
     this.$store.commit('textile/setActiveConversation', '')
+    this.$store.commit('conversation/resetConversation')
   },
   mounted() {
     this.$Sounds.changeLevels(this.audio.volume / 100)
diff --git a/layouts/files.vue b/layouts/files.vue
index ee1ef0de1d..fd4ec1f80a 100644
--- a/layouts/files.vue
+++ b/layouts/files.vue
@@ -1,15 +1,17 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${showSidebar ? 'is-open' : 'is-collapsed'} ${
-      $store.state.ui.theme.base.class
-    }`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      showSidebar ? 'is-open' : 'is-collapsed',
+    ]"
   >
     <div
       id="app"
       :class="[
         showSidebar ? 'is-open' : 'is-collapsed',
         $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
       ]"
     >
       <UiGlobal />
@@ -109,6 +111,7 @@ export default Vue.extend({
     }),
     ...mapGetters('ui', ['showSidebar', 'isFilesIndexLoading']),
     ...mapGetters('textile', ['getInitialized']),
+    ...mapGetters('webrtc', ['isBackgroundCall']),
     flairColor(): string {
       return this.$store.state.ui.theme.flair.value
     },
diff --git a/layouts/friends.vue b/layouts/friends.vue
index a43db3ff0f..25d9d5ebcd 100644
--- a/layouts/friends.vue
+++ b/layouts/friends.vue
@@ -1,15 +1,18 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${
-      showSidebar && swiperSlideIndex == 0 ? 'is-open' : 'is-collapsed'
-    } ${$store.state.ui.theme.base.class}`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      showSidebar && swiperSlideIndex == 0 ? 'is-open' : 'is-collapsed',
+    ]"
   >
     <div
       id="app"
-      :class="`${
-        showSidebar && swiperSlideIndex == 0 ? 'is-open' : 'is-collapsed'
-      } ${$device.isMobile ? 'mobile-app' : 'desktop'}`"
+      :class="[
+        showSidebar && swiperSlideIndex == 0 ? 'is-open' : 'is-collapsed',
+        $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
+      ]"
     >
       <UiGlobal />
 
@@ -118,6 +121,7 @@ export default Vue.extend({
     },
     ...mapState(['friends', 'groups', 'dataState']),
     ...mapGetters('ui', ['showSidebar', 'swiperSlideIndex']),
+    ...mapGetters('webrtc', ['isBackgroundCall']),
   },
   watch: {
     showSidebar(newValue, oldValue) {
diff --git a/layouts/server.vue b/layouts/server.vue
index 12e279ca9b..90d0b5ee94 100644
--- a/layouts/server.vue
+++ b/layouts/server.vue
@@ -1,16 +1,19 @@
 <template>
   <div
     id="app-wrap"
-    :class="`${sidebar ? 'is-open' : 'is-collapsed'} ${
-      $store.state.ui.theme.base.class
-    }`"
+    :class="[
+      $store.state.ui.theme.base.class,
+      sidebar ? 'is-open' : 'is-collapsed',
+    ]"
   >
     <div
       id="app"
-      :class="`${$store.state.ui.theme.base.class}
-      ${sidebar ? 'is-open' : 'is-collapsed'} ${
-        $device.isMobile ? 'mobile-app' : 'desktop'
-      }`"
+      :class="[
+        $store.state.ui.theme.base.class,
+        sidebar ? 'is-open' : 'is-collapsed',
+        $device.isMobile ? 'mobile-app' : 'desktop',
+        isBackgroundCall ? 'has-background-call' : '',
+      ]"
     >
       <UiGlobal />
 
@@ -78,7 +81,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { MenuIcon } from 'satellite-lucide-icons'
 import { Touch } from '~/components/mixins/Touch'
 import Layout from '~/components/mixins/Layouts/Layout'
@@ -115,6 +118,7 @@ export default Vue.extend({
   },
   computed: {
     ...mapState(['ui', 'media']),
+    ...mapGetters('webrtc', ['isBackgroundCall']),
     swiper() {
       return this.$refs.swiper.$swiper
     },
diff --git a/locales/en-US.js b/locales/en-US.js
index 15637df3bf..cf27d72526 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -32,10 +32,11 @@ export default {
     fullscreen: 'Fullscreen',
     exit_fullscreen: 'Exit fullscreen',
     more: 'More',
-    live: 'Live',
+    live: 'Live {time}',
     edited: 'edited',
     online: 'All users are offline | {name} is online | {name} are online',
     offline: '{name} is not connected',
+    background_call: 'You are currently in a call with',
   },
   wallet: {
     wallet: 'Wallet',
diff --git a/store/conversation/mutations.ts b/store/conversation/mutations.ts
index f97ff263ac..c3ebdd38a9 100644
--- a/store/conversation/mutations.ts
+++ b/store/conversation/mutations.ts
@@ -15,6 +15,12 @@ const mutations = {
     state.calling = !!payload.calling
     state.participants = payload.participants || []
   },
+  resetConversation(state: ConversationState) {
+    state.id = ''
+    state.type = 'friend'
+    state.calling = false
+    state.participants = []
+  },
   setCalling(state: ConversationState, active: boolean) {
     state.calling = active
   },
diff --git a/store/friends/actions.ts b/store/friends/actions.ts
index acaa74d321..2a80b98f8f 100644
--- a/store/friends/actions.ts
+++ b/store/friends/actions.ts
@@ -568,7 +568,7 @@ export default {
    * @example
    */
   async removeFriend(
-    { commit }: ActionsArguments<FriendsState>,
+    { commit, dispatch, rootState }: ActionsArguments<FriendsState>,
     friend: Friend,
   ) {
     const $BlockchainClient: BlockchainClient = BlockchainClient.getInstance()
@@ -583,6 +583,11 @@ export default {
 
     await $BlockchainClient.removeFriend(new PublicKey(account.accountId))
 
+    // destroy active call if it was with removed friend
+    if (friend.peerId === rootState.webrtc.activeCall?.peerId) {
+      dispatch('webrtc/hangUp', null, { root: true })
+    }
+
     commit('removeFriend', address)
 
     await db.friends.where('address').equals(address).delete()
diff --git a/store/friends/getters.test.ts b/store/friends/getters.test.ts
index e9325027ad..a63c9280d1 100644
--- a/store/friends/getters.test.ts
+++ b/store/friends/getters.test.ts
@@ -403,7 +403,7 @@ describe('', () => {
   test('module.default.matchesActiveCall', () => {
     const localState: FriendsState = { ...initialFriendsState }
     const localRootState: RootState = { ...initialRootState }
-    localState.all[0].address = 'peer_1234' // So that (friend.address === rootState.webrtc.activeCall?.peerId,) is true
+    localState.all[0].address = 'peer_1234' // So that (friend.address === rootState.webrtc.BackgroundCall?.peerId,) is true
     const result = module.default.matchesActiveCall(
       // We have to call the function this way because of how it was declared in ./getters.ts
       localState,
@@ -440,7 +440,7 @@ describe('', () => {
   test('module.default.matchesSomeActiveCall', () => {
     const localState: FriendsState = { ...initialFriendsState }
     const localRootState: RootState = { ...initialRootState }
-    localState.all[0].address = 'peer_1234' // So that (friend.address === rootState.webrtc.activeCall?.peerId,) is true
+    localState.all[0].address = 'peer_1234' // So that (friend.address === rootState.webrtc.BackgroundCall?.peerId,) is true
     const result = module.default.matchesSomeActiveCall(
       // We have to call the function this way because of how it was declared in ./getters.ts
       localState,
diff --git a/store/textile/actions.ts b/store/textile/actions.ts
index 447a4a9e77..97f99d4c89 100644
--- a/store/textile/actions.ts
+++ b/store/textile/actions.ts
@@ -176,7 +176,10 @@ export default {
     // add the messages to the search index
     db.search.conversationMessages.upsertAll(messages)
 
-    if (setActive) {
+    // set active conversation only if we still on the chat
+    const isChatRoute = !!this.$router.currentRoute.params?.address
+
+    if (setActive && isChatRoute) {
       commit('setActiveConversation', friend.address)
       if (friend.peerId) {
         commit(
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 74b21d565e..1e74111636 100644
--- a/store/ui/mutations.ts
+++ b/store/ui/mutations.ts
@@ -3,6 +3,7 @@ import {
   EnhancerInfo,
   FileSort,
   Flair,
+  ModalWindows,
   Position,
   RecentGlyph,
   SettingsRoutes,
@@ -15,6 +16,7 @@ import { FileMessage } from '~/types/textile/mailbox'
 import { Alert, AlertState, AlertType } from '~/libraries/ui/Alerts'
 import { Item } from '~/libraries/Files/abstracts/Item.abstract'
 import { Fil } from '~/libraries/Files/Fil'
+import modal from '~/components/views/settings/modal/Modal.vue'
 
 export default {
   togglePinned(state: UIState, visible: boolean) {
diff --git a/store/webrtc/__snapshots__/state.test.ts.snap b/store/webrtc/__snapshots__/state.test.ts.snap
index 6c983e9ef4..9017d8d892 100644
--- a/store/webrtc/__snapshots__/state.test.ts.snap
+++ b/store/webrtc/__snapshots__/state.test.ts.snap
@@ -4,8 +4,10 @@ exports[`init should return the initial settings state 1`] = `
 Object {
   "activeCall": undefined,
   "createdAt": 0,
+  "elapsedTime": "",
   "incomingCall": undefined,
   "initialized": false,
+  "interval": null,
   "originator": "",
   "streamMuted": Object {},
 }
diff --git a/store/webrtc/getters.ts b/store/webrtc/getters.ts
new file mode 100644
index 0000000000..cca87fc93f
--- /dev/null
+++ b/store/webrtc/getters.ts
@@ -0,0 +1,25 @@
+import { WebRTCState } from './types'
+import { RootState } from '~/types/store/store'
+
+const getters = {
+  isActiveCall: (state: WebRTCState, getters: any, rootState: RootState) => {
+    return (
+      state.activeCall &&
+      state.activeCall.peerId &&
+      state.activeCall.peerId === rootState.conversation.id
+    )
+  },
+  isBackgroundCall: (
+    state: WebRTCState,
+    getters: any,
+    rootState: RootState,
+  ) => {
+    return (
+      state.activeCall &&
+      state.activeCall.peerId &&
+      state.activeCall.peerId !== rootState.conversation.id
+    )
+  },
+}
+
+export default getters
diff --git a/store/webrtc/mutations.ts b/store/webrtc/mutations.ts
index 40c6ea3546..23b36031fc 100644
--- a/store/webrtc/mutations.ts
+++ b/store/webrtc/mutations.ts
@@ -1,3 +1,4 @@
+import dayjs from 'dayjs'
 import { WebRTCState } from './types'
 
 const mutations = {
@@ -31,6 +32,16 @@ const mutations = {
   },
   updateCreatedAt(state: WebRTCState, createdAt: number) {
     state.createdAt = createdAt
+    if (!state.interval && state.createdAt && state.activeCall) {
+      state.interval = setInterval(
+        () => this.commit('webrtc/updateElapsedTime'),
+        1000,
+      )
+    } else if (state.interval) {
+      clearInterval(state.interval)
+      state.interval = null
+      state.elapsedTime = ''
+    }
   },
   setStreamMuted(
     state: WebRTCState,
@@ -69,6 +80,13 @@ const mutations = {
       },
     }
   },
+  updateElapsedTime(state: WebRTCState) {
+    const duration = dayjs.duration(Date.now() - state.createdAt)
+    const hours = duration.hours()
+    state.elapsedTime = `${hours > 0 ? hours + ':' : ''}${duration.format(
+      'mm:ss',
+    )}`
+  },
 }
 
 export default mutations
diff --git a/store/webrtc/state.ts b/store/webrtc/state.ts
index 9336e4f084..b6e19ad9b3 100644
--- a/store/webrtc/state.ts
+++ b/store/webrtc/state.ts
@@ -7,6 +7,8 @@ const InitialWebRTCState = (): WebRTCState => ({
   activeCall: undefined,
   streamMuted: {},
   createdAt: 0,
+  elapsedTime: '',
+  interval: null,
 })
 
 export default InitialWebRTCState
diff --git a/store/webrtc/types.ts b/store/webrtc/types.ts
index 32c847c6bb..20a0d01f98 100644
--- a/store/webrtc/types.ts
+++ b/store/webrtc/types.ts
@@ -21,6 +21,8 @@ export interface WebRTCState {
     type: 'group' | 'friend'
   }
   createdAt: number
+  elapsedTime: string
+  interval: ReturnType<typeof setInterval> | null
 }
 
 export enum WebRTCError {