diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 0bf4e37bc..cc3e82403 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -2,11 +2,6 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
   props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -16,6 +11,12 @@ const BlockCard = {
     },
     blocked () {
       return this.relationship.blocking
+    },
+    blockExpiry () {
+      console.log(this.user)
+      return this.user.block_expires_at == null
+        ? this.$t('user_card.block_expires_forever')
+        : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
     }
   },
   components: {
@@ -29,10 +30,7 @@ const BlockCard = {
       })
     },
     blockUser () {
-      this.progress = true
-      this.$store.dispatch('blockUser', this.user.id).then(() => {
-        this.progress = false
-      })
+      this.$refs.timedBlockDialog.optionallyPrompt()
     }
   }
 }
diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue
index b14ef8448..61aafb288 100644
--- a/src/components/block_card/block_card.vue
+++ b/src/components/block_card/block_card.vue
@@ -1,33 +1,32 @@
 <template>
   <basic-user-card :user="user">
     <div class="block-card-content-container">
+      <span v-if="blocked" class="alert neutral">
+        {{ blockExpiry }}
+      </span>
+      {{ ' ' }}
       <button
         v-if="blocked"
         class="btn button-default"
-        :disabled="progress"
         @click="unblockUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unblock_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unblock') }}
-        </template>
+        {{ $t('user_card.unblock') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="blockUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.block_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.block') }}
-        </template>
+        {{ $t('user_card.block') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <UserTimedFilterModal
+        :user="user"
+        :is-mute="false"
+        ref="timedBlockDialog"
+      />
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
index cbec0e9bb..3491ff2f7 100644
--- a/src/components/mute_card/mute_card.js
+++ b/src/components/mute_card/mute_card.js
@@ -1,12 +1,8 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 
 const MuteCard = {
   props: ['userId'],
-  data () {
-    return {
-      progress: false
-    }
-  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -16,10 +12,16 @@ const MuteCard = {
     },
     muted () {
       return this.relationship.muting
+    },
+    muteExpiry () {
+      return this.user.mute_expires_at == null
+        ? this.$t('user_card.mute_expires_forever')
+        : this.$t('user_card.mute_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
     }
   },
   components: {
-    BasicUserCard
+    BasicUserCard,
+    UserTimedFilterModal
   },
   methods: {
     unmuteUser () {
@@ -29,10 +31,7 @@ const MuteCard = {
       })
     },
     muteUser () {
-      this.progress = true
-      this.$store.dispatch('muteUser', this.userId).then(() => {
-        this.progress = false
-      })
+      this.$refs.timedMuteDialog.optionallyPrompt()
     }
   }
 }
diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue
index 97e91cbca..08f62da9a 100644
--- a/src/components/mute_card/mute_card.vue
+++ b/src/components/mute_card/mute_card.vue
@@ -1,33 +1,32 @@
 <template>
   <basic-user-card :user="user">
     <div class="mute-card-content-container">
+      <span v-if="muted" class="alert neutral">
+        {{ muteExpiry }}
+      </span>
+      {{ ' ' }}
       <button
         v-if="muted"
         class="btn button-default"
-        :disabled="progress"
         @click="unmuteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unmute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unmute') }}
-        </template>
+        {{ $t('user_card.unmute') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="muteUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.mute_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.mute') }}
-        </template>
+        {{ $t('user_card.mute') }}
       </button>
     </div>
+    <teleport to="#modal">
+      <UserTimedFilterModal
+        :user="user"
+        :is-mute="true"
+        ref="timedMuteDialog"
+      />
+    </teleport>
   </basic-user-card>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 18bc5cb2c..46cfe6a74 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1412,6 +1412,10 @@
     "dont_ask_again_block": "Always block users this way",
     "mute_block_temporarily": "Temporarily",
     "mute_block_forever": "Forever",
+    "mute_expires_forever": "Muted forever",
+    "mute_expires_at": "Muted until {0}",
+    "block_expires_forever": "Blocked forever",
+    "block_expires_at": "Blocked until {0}",
     "mute_duration_prompt": "Mute this user for (0 for indefinite time):",
     "per_day": "per day",
     "remote_follow": "Remote follow",
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 61eb5313f..28f1bc2aa 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -51,6 +51,8 @@ export const parseUser = (data) => {
     output.screen_name = data.acct
     output.fqn = data.fqn
     output.statusnet_profile_url = data.url
+    output.mute_expires_at = data.mute_expires_at
+    output.block_expires_at = data.block_expires_at
 
     // There's nothing else to get
     if (mastoShort) {