diff --git a/src/autocomplete/PeopleAutocomplete.js b/src/autocomplete/PeopleAutocomplete.js
index 0e387d54992..3f92013c62c 100644
--- a/src/autocomplete/PeopleAutocomplete.js
+++ b/src/autocomplete/PeopleAutocomplete.js
@@ -3,9 +3,9 @@
 import React, { PureComponent } from 'react';
 import { SectionList } from 'react-native';
 
-import type { User, UserId, UserGroup, Dispatch } from '../types';
+import type { MutedUsersState, User, UserId, UserGroup, Dispatch } from '../types';
 import { connect } from '../react-redux';
-import { getSortedUsers, getUserGroups } from '../selectors';
+import { getMutedUsers, getSortedUsers, getUserGroups } from '../selectors';
 import {
   type AutocompleteOption,
   getAutocompleteSuggestion,
@@ -20,6 +20,7 @@ type Props = $ReadOnly<{|
   dispatch: Dispatch,
   filter: string,
   onAutocomplete: (name: string) => void,
+  mutedUsers: MutedUsersState,
   ownUserId: UserId,
   users: User[],
   userGroups: UserGroup[],
@@ -44,9 +45,9 @@ class PeopleAutocomplete extends PureComponent<Props> {
   };
 
   render() {
-    const { filter, ownUserId, users, userGroups } = this.props;
+    const { filter, mutedUsers, ownUserId, users, userGroups } = this.props;
     const filteredUserGroups = getAutocompleteUserGroupSuggestions(userGroups, filter);
-    const filteredUsers = getAutocompleteSuggestion(users, filter, ownUserId);
+    const filteredUsers = getAutocompleteSuggestion(users, filter, ownUserId, mutedUsers);
 
     if (filteredUserGroups.length + filteredUsers.length === 0) {
       return null;
@@ -105,6 +106,7 @@ class PeopleAutocomplete extends PureComponent<Props> {
 }
 
 export default connect(state => ({
+  mutedUsers: getMutedUsers(state),
   ownUserId: getOwnUserId(state),
   users: getSortedUsers(state),
   userGroups: getUserGroups(state),
diff --git a/src/pm-conversations/PmConversationList.js b/src/pm-conversations/PmConversationList.js
index 093f185f422..8dee78d4f05 100644
--- a/src/pm-conversations/PmConversationList.js
+++ b/src/pm-conversations/PmConversationList.js
@@ -1,14 +1,16 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
 import { FlatList } from 'react-native';
+import { useDispatch, useSelector } from '../react-redux';
 
-import type { Dispatch, PmConversationData, UserOrBot } from '../types';
+import type { PmConversationData, UserOrBot } from '../types';
 import { createStyleSheet } from '../styles';
 import { type PmKeyUsers } from '../utils/recipient';
 import { pm1to1NarrowFromUser, pmNarrowFromUsers } from '../utils/narrow';
 import UserItem from '../users/UserItem';
 import GroupPmConversationItem from './GroupPmConversationItem';
 import { doNarrow } from '../actions';
+import { getMutedUsers } from '../selectors';
 
 const styles = createStyleSheet({
   list: {
@@ -18,52 +20,59 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  dispatch: Dispatch,
   conversations: PmConversationData[],
 |}>;
 
 /**
  * A list describing all PM conversations.
  * */
-export default class PmConversationList extends PureComponent<Props> {
-  handleUserNarrow = (user: UserOrBot) => {
-    this.props.dispatch(doNarrow(pm1to1NarrowFromUser(user)));
-  };
+export default function PmConversationList(props: Props) {
+  const dispatch = useDispatch();
 
-  handleGroupNarrow = (users: PmKeyUsers) => {
-    this.props.dispatch(doNarrow(pmNarrowFromUsers(users)));
-  };
+  const handleUserNarrow = useCallback(
+    (user: UserOrBot) => {
+      dispatch(doNarrow(pm1to1NarrowFromUser(user)));
+    },
+    [dispatch],
+  );
 
-  render() {
-    const { conversations } = this.props;
+  const handleGroupNarrow = useCallback(
+    (users: PmKeyUsers) => {
+      dispatch(doNarrow(pmNarrowFromUsers(users)));
+    },
+    [dispatch],
+  );
 
-    return (
-      <FlatList
-        style={styles.list}
-        initialNumToRender={20}
-        data={conversations}
-        keyExtractor={item => item.key}
-        renderItem={({ item }) => {
-          const users = item.keyRecipients;
-          if (users.length === 1) {
-            return (
-              <UserItem
-                userId={users[0].user_id}
-                unreadCount={item.unread}
-                onPress={this.handleUserNarrow}
-              />
-            );
+  const { conversations } = props;
+  const mutedUsers = useSelector(getMutedUsers);
+
+  return (
+    <FlatList
+      style={styles.list}
+      initialNumToRender={20}
+      data={conversations}
+      keyExtractor={item => item.key}
+      renderItem={({ item }) => {
+        const users = item.keyRecipients;
+        if (users.length === 1) {
+          const user_id = users[0].user_id;
+          if (mutedUsers.has(user_id)) {
+            return null;
           } else {
             return (
-              <GroupPmConversationItem
-                users={users}
-                unreadCount={item.unread}
-                onPress={this.handleGroupNarrow}
-              />
+              <UserItem userId={user_id} unreadCount={item.unread} onPress={handleUserNarrow} />
             );
           }
-        }}
-      />
-    );
-  }
+        } else {
+          return (
+            <GroupPmConversationItem
+              users={users}
+              unreadCount={item.unread}
+              onPress={handleGroupNarrow}
+            />
+          );
+        }
+      }}
+    />
+  );
 }
diff --git a/src/pm-conversations/PmConversationsScreen.js b/src/pm-conversations/PmConversationsScreen.js
index 71374382e77..b31e3f1fd5d 100644
--- a/src/pm-conversations/PmConversationsScreen.js
+++ b/src/pm-conversations/PmConversationsScreen.js
@@ -7,7 +7,7 @@ import type { RouteProp } from '../react-navigation';
 import type { MainTabsNavigationProp } from '../main/MainTabsScreen';
 import * as NavigationService from '../nav/NavigationService';
 import { ThemeContext, createStyleSheet } from '../styles';
-import { useSelector, useDispatch } from '../react-redux';
+import { useSelector } from '../react-redux';
 import { Label, ZulipButton, LoadingBanner } from '../common';
 import { IconPeople, IconSearch } from '../common/Icons';
 import PmConversationList from './PmConversationList';
@@ -43,7 +43,6 @@ type Props = $ReadOnly<{|
  * */
 export default function PmConversationsScreen(props: Props) {
   const conversations = useSelector(getRecentConversations);
-  const dispatch = useDispatch();
   const context = useContext(ThemeContext);
 
   return (
@@ -72,7 +71,7 @@ export default function PmConversationsScreen(props: Props) {
       {conversations.length === 0 ? (
         <Label style={styles.emptySlate} text="No recent conversations" />
       ) : (
-        <PmConversationList dispatch={dispatch} conversations={conversations} />
+        <PmConversationList conversations={conversations} />
       )}
     </View>
   );
diff --git a/src/unread/UnreadCards.js b/src/unread/UnreadCards.js
index 8f40ad26936..03d3b0fbd43 100644
--- a/src/unread/UnreadCards.js
+++ b/src/unread/UnreadCards.js
@@ -25,7 +25,7 @@ export default function UnreadCards(props: Props) {
   const unreadCards: Array<Card> = [
     {
       key: 'private',
-      data: [{ conversations, dispatch }],
+      data: [{ conversations }],
     },
     ...unreadStreamsAndTopics,
   ];
diff --git a/src/users/UserList.js b/src/users/UserList.js
index d11d48b3ea6..a39ce5e60f2 100644
--- a/src/users/UserList.js
+++ b/src/users/UserList.js
@@ -1,12 +1,14 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { SectionList } from 'react-native';
+import { useSelector } from '../react-redux';
 
 import type { PresenceState, UserOrBot } from '../types';
 import { createStyleSheet } from '../styles';
 import { SectionHeader, SearchEmptyState } from '../common';
 import UserItem from './UserItem';
 import { sortUserList, filterUserList, groupUsersByStatus } from './userHelpers';
+import { getMutedUsers } from '../selectors';
 
 const styles = createStyleSheet({
   list: {
@@ -17,53 +19,49 @@ const styles = createStyleSheet({
 type Props = $ReadOnly<{|
   filter: string,
   users: $ReadOnlyArray<UserOrBot>,
-  selected: $ReadOnlyArray<UserOrBot>,
+  selected?: $ReadOnlyArray<UserOrBot>,
   presences: PresenceState,
   onPress: (user: UserOrBot) => void,
 |}>;
 
-export default class UserList extends PureComponent<Props> {
-  static defaultProps = {
-    selected: [],
-  };
+export default function UserList(props: Props) {
+  const { filter, users, presences, onPress, selected = [] } = props;
+  const mutedUsers = useSelector(getMutedUsers);
+  const filteredUsers = filterUserList(users, filter).filter(user => !mutedUsers.has(user.user_id));
 
-  render() {
-    const { filter, users, presences, onPress, selected } = this.props;
-    const shownUsers = sortUserList(filterUserList(users, filter), presences);
-
-    if (shownUsers.length === 0) {
-      return <SearchEmptyState text="No users found" />;
-    }
+  if (filteredUsers.length === 0) {
+    return <SearchEmptyState text="No users found" />;
+  }
 
-    const groupedUsers = groupUsersByStatus(shownUsers, presences);
-    const sections = Object.keys(groupedUsers).map(key => ({
-      key: `${key.charAt(0).toUpperCase()}${key.slice(1)}`,
-      data: groupedUsers[key].map(u => u.user_id),
-    }));
+  const sortedUsers = sortUserList(filteredUsers, presences);
+  const groupedUsers = groupUsersByStatus(sortedUsers, presences);
+  const sections = Object.keys(groupedUsers).map(key => ({
+    key: `${key.charAt(0).toUpperCase()}${key.slice(1)}`,
+    data: groupedUsers[key].map(u => u.user_id),
+  }));
 
-    return (
-      <SectionList
-        style={styles.list}
-        stickySectionHeadersEnabled
-        keyboardShouldPersistTaps="always"
-        initialNumToRender={20}
-        sections={sections}
-        keyExtractor={item => item}
-        renderItem={({ item }) => (
-          <UserItem
-            key={item}
-            userId={item}
-            onPress={onPress}
-            isSelected={!!selected.find(user => user.user_id === item)}
-          />
-        )}
-        renderSectionHeader={({ section }) =>
-          section.data.length === 0 ? null : (
-            // $FlowFixMe[incompatible-type]
-            <SectionHeader text={section.key} />
-          )
-        }
-      />
-    );
-  }
+  return (
+    <SectionList
+      style={styles.list}
+      stickySectionHeadersEnabled
+      keyboardShouldPersistTaps="always"
+      initialNumToRender={20}
+      sections={sections}
+      keyExtractor={item => item}
+      renderItem={({ item }) => (
+        <UserItem
+          key={item}
+          userId={item}
+          onPress={onPress}
+          isSelected={!!selected.find(user => user.user_id === item)}
+        />
+      )}
+      renderSectionHeader={({ section }) =>
+        section.data.length === 0 ? null : (
+          // $FlowFixMe[incompatible-type]
+          <SectionHeader text={section.key} />
+        )
+      }
+    />
+  );
 }
diff --git a/src/users/__tests__/userHelpers-test.js b/src/users/__tests__/userHelpers-test.js
index c41bd163d43..27440a0fb24 100644
--- a/src/users/__tests__/userHelpers-test.js
+++ b/src/users/__tests__/userHelpers-test.js
@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import deepFreeze from 'deep-freeze';
+import Immutable from 'immutable';
 
 import {
   sortUserList,
@@ -61,7 +62,12 @@ describe('getAutocompleteSuggestion', () => {
   test('empty input results in empty list', () => {
     const users = deepFreeze([]);
 
-    const filteredUsers = getAutocompleteSuggestion(users, 'some filter', eg.selfUser.user_id);
+    const filteredUsers = getAutocompleteSuggestion(
+      users,
+      'some filter',
+      eg.selfUser.user_id,
+      Immutable.Map(),
+    );
     expect(filteredUsers).toBe(users);
   });
 
@@ -74,7 +80,20 @@ describe('getAutocompleteSuggestion', () => {
       { user_id: -1, full_name: 'all', email: '(Notify everyone)' },
       someGuyUser,
     ];
-    const filteredUsers = getAutocompleteSuggestion(users, '', meUser.user_id);
+    const filteredUsers = getAutocompleteSuggestion(users, '', meUser.user_id, Immutable.Map());
+    expect(filteredUsers).toEqual(shouldMatch);
+  });
+
+  test('filters out muted user', () => {
+    const mutedUser = eg.makeUser({ name: 'Muted User' });
+    const meUser = eg.makeUser({ name: 'Me' });
+    const users = deepFreeze([mutedUser, meUser]);
+
+    const mutedUsers = Immutable.Map([[mutedUser.user_id, 0]]);
+
+    const shouldMatch = [{ user_id: -1, full_name: 'all', email: '(Notify everyone)' }];
+
+    const filteredUsers = getAutocompleteSuggestion(users, '', meUser.user_id, mutedUsers);
     expect(filteredUsers).toEqual(shouldMatch);
   });
 
@@ -87,7 +106,12 @@ describe('getAutocompleteSuggestion', () => {
     const allUsers = deepFreeze([user1, user2, user3, user4, user5]);
 
     const shouldMatch = [user1, user2, user3, user5];
-    const filteredUsers = getAutocompleteSuggestion(allUsers, 'match', eg.selfUser.user_id);
+    const filteredUsers = getAutocompleteSuggestion(
+      allUsers,
+      'match',
+      eg.selfUser.user_id,
+      Immutable.Map(),
+    );
     expect(filteredUsers).toEqual(shouldMatch);
   });
 
@@ -127,7 +151,12 @@ describe('getAutocompleteSuggestion', () => {
       user11, // have priority because of 'ma' contains in name
       user4, // email contains 'ma'
     ];
-    const filteredUsers = getAutocompleteSuggestion(allUsers, 'ma', eg.selfUser.user_id);
+    const filteredUsers = getAutocompleteSuggestion(
+      allUsers,
+      'ma',
+      eg.selfUser.user_id,
+      Immutable.Map(),
+    );
     expect(filteredUsers).toEqual(shouldMatch);
   });
 });
diff --git a/src/users/userHelpers.js b/src/users/userHelpers.js
index c1b2d531b8e..98a516c33c9 100644
--- a/src/users/userHelpers.js
+++ b/src/users/userHelpers.js
@@ -1,7 +1,15 @@
 /* @flow strict-local */
 import uniqby from 'lodash.uniqby';
 
-import type { UserPresence, User, UserId, UserGroup, PresenceState, UserOrBot } from '../types';
+import type {
+  MutedUsersState,
+  UserPresence,
+  User,
+  UserId,
+  UserGroup,
+  PresenceState,
+  UserOrBot,
+} from '../types';
 import { ensureUnreachable } from '../types';
 import { statusFromPresence } from '../utils/presence';
 import { makeUserId } from '../api/idTypes';
@@ -121,6 +129,7 @@ export const getAutocompleteSuggestion = (
   users: $ReadOnlyArray<AutocompleteOption>,
   filter: string = '',
   ownUserId: UserId,
+  mutedUsers: MutedUsersState,
 ): $ReadOnlyArray<AutocompleteOption> => {
   if (users.length === 0) {
     return users;
@@ -130,7 +139,8 @@ export const getAutocompleteSuggestion = (
   const initials = filterUserByInitials(allAutocompleteOptions, filter, ownUserId);
   const contains = filterUserThatContains(allAutocompleteOptions, filter, ownUserId);
   const matchesEmail = filterUserMatchesEmail(users, filter, ownUserId);
-  return getUniqueUsers([...startWith, ...initials, ...contains, ...matchesEmail]);
+  const candidates = getUniqueUsers([...startWith, ...initials, ...contains, ...matchesEmail]);
+  return candidates.filter(user => !mutedUsers.has(user.user_id));
 };
 
 export const getAutocompleteUserGroupSuggestions = (
diff --git a/src/webview/MessageList.js b/src/webview/MessageList.js
index 8712cf605f7..a33bb19019e 100644
--- a/src/webview/MessageList.js
+++ b/src/webview/MessageList.js
@@ -236,11 +236,13 @@ class MessageList extends Component<Props> {
       initialScrollMessageId,
       narrow,
       showMessagePlaceholders,
+      _,
     } = this.props;
     const contentHtml = contentHtmlFromPieceDescriptors({
       backgroundData,
       narrow,
       htmlPieceDescriptors: htmlPieceDescriptorsForShownMessages,
+      _,
     });
     const { auth, theme } = backgroundData;
     const html: string = getHtml(contentHtml, theme, {
diff --git a/src/webview/generateInboundEvents.js b/src/webview/generateInboundEvents.js
index c0828ac5a2a..407a87f1e56 100644
--- a/src/webview/generateInboundEvents.js
+++ b/src/webview/generateInboundEvents.js
@@ -51,6 +51,7 @@ const updateContent = (prevProps: Props, nextProps: Props): WebViewInboundEventC
       backgroundData: nextProps.backgroundData,
       narrow: nextProps.narrow,
       htmlPieceDescriptors: nextProps.htmlPieceDescriptorsForShownMessages,
+      _: nextProps._,
     }),
     nextProps.showMessagePlaceholders,
   );
diff --git a/src/webview/html/contentHtmlFromPieceDescriptors.js b/src/webview/html/contentHtmlFromPieceDescriptors.js
index 7a2ef86c5f1..d31a05ce026 100644
--- a/src/webview/html/contentHtmlFromPieceDescriptors.js
+++ b/src/webview/html/contentHtmlFromPieceDescriptors.js
@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import type { Narrow, HtmlPieceDescriptor } from '../../types';
+import type { GetText, Narrow, HtmlPieceDescriptor } from '../../types';
 import type { BackgroundData } from '../MessageList';
 
 import messageAsHtml from './messageAsHtml';
@@ -10,10 +10,12 @@ export default ({
   backgroundData,
   narrow,
   htmlPieceDescriptors,
+  _,
 }: {|
   backgroundData: BackgroundData,
   narrow: Narrow,
   htmlPieceDescriptors: HtmlPieceDescriptor[],
+  _: GetText,
 |}): string => {
   const pieces = [];
   htmlPieceDescriptors.forEach(section => {
@@ -24,7 +26,7 @@ export default ({
       if (item.type === 'time') {
         pieces.push(timeRowAsHtml(item.timestamp, item.subsequentMessage));
       } else {
-        pieces.push(messageAsHtml(backgroundData, item.message, item.isBrief));
+        pieces.push(messageAsHtml(backgroundData, item.message, item.isBrief, _));
       }
     });
   });
diff --git a/src/webview/html/messageAsHtml.js b/src/webview/html/messageAsHtml.js
index 3e94e5f78c2..a39ca7bc4ea 100644
--- a/src/webview/html/messageAsHtml.js
+++ b/src/webview/html/messageAsHtml.js
@@ -5,6 +5,7 @@ import template from './template';
 import type {
   AggregatedReaction,
   FlagsState,
+  GetText,
   Message,
   MessageLike,
   Outbox,
@@ -82,14 +83,22 @@ $!${message.content}
 export const flagsStateToStringList = (flags: FlagsState, id: number): string[] =>
   Object.keys(flags).filter(key => flags[key][id]);
 
-export default (backgroundData: BackgroundData, message: Message | Outbox, isBrief: boolean) => {
+export default (
+  backgroundData: BackgroundData,
+  message: Message | Outbox,
+  isBrief: boolean,
+  _: GetText,
+) => {
   const { id, timestamp } = message;
   const flagStrings = flagsStateToStringList(backgroundData.flags, id);
+  const isUserMuted = !!message.sender_id && backgroundData.mutedUsers.has(message.sender_id);
+
   const divOpenHtml = template`
     <div
      class="message ${isBrief ? 'message-brief' : 'message-full'}"
      id="msg-${id}"
      data-msg-id="${id}"
+     data-mute-state="${isUserMuted ? 'hidden' : 'shown'}"
      $!${flagStrings.map(flag => template`data-${flag}="true" `).join('')}
     >`;
   const messageTime = shortTime(new Date(timestamp * 1000), backgroundData.twentyFourHourTime);
@@ -134,6 +143,13 @@ $!${divOpenHtml}
   <div class="static-timestamp">${messageTime}</div>
 </div>
 `;
+  const mutedMessageHtml = isUserMuted
+    ? template`
+<div class="special-message muted-message-explanation">
+  ${_('This message was hidden because it is from a user you have muted. Long-press to view.')}
+</div>
+`
+    : '';
 
   return template`
 $!${divOpenHtml}
@@ -144,6 +160,7 @@ $!${divOpenHtml}
     $!${subheaderHtml}
     $!${bodyHtml}
   </div>
+  $!${mutedMessageHtml}
 </div>
 `;
 };
diff --git a/src/webview/js/generatedEs3.js b/src/webview/js/generatedEs3.js
index 5e56c6f3c60..cbde6226441 100644
--- a/src/webview/js/generatedEs3.js
+++ b/src/webview/js/generatedEs3.js
@@ -519,6 +519,10 @@ var compiledWebviewJs = (function (exports) {
     return walkToMessage(start.previousElementSibling, 'previousElementSibling');
   }
 
+  function nextMessage(start) {
+    return walkToMessage(start.nextElementSibling, 'nextElementSibling');
+  }
+
   function isVisible(element, top, bottom) {
     var rect = element.getBoundingClientRect();
     return top < rect.bottom && rect.top < bottom;
@@ -861,6 +865,15 @@ var compiledWebviewJs = (function (exports) {
     scrollEventsDisabled = false;
   };
 
+  var revealMutedMessages = function revealMutedMessages(message) {
+    var messageNode = message;
+
+    do {
+      messageNode.setAttribute('data-mute-state', 'shown');
+      messageNode = nextMessage(messageNode);
+    } while (messageNode && messageNode.classList.contains('message-brief'));
+  };
+
   var requireAttribute = function requireAttribute(e, name) {
     var value = e.getAttribute(name);
 
@@ -1003,9 +1016,17 @@ var compiledWebviewJs = (function (exports) {
       return;
     }
 
+    var targetType = target.matches('.header') ? 'header' : target.matches('a') ? 'link' : 'message';
+    var messageNode = target.closest('.message');
+
+    if (targetType === 'message' && messageNode && messageNode.getAttribute('data-mute-state') === 'hidden') {
+      revealMutedMessages(messageNode);
+      return;
+    }
+
     sendMessage({
       type: 'longPress',
-      target: target.matches('.header') ? 'header' : target.matches('a') ? 'link' : 'message',
+      target: targetType,
       messageId: getMessageIdFromNode(target),
       href: target.matches('a') ? requireAttribute(target, 'href') : null
     });
diff --git a/src/webview/js/js.js b/src/webview/js/js.js
index 3ae92c6b80e..607a1cb4a90 100644
--- a/src/webview/js/js.js
+++ b/src/webview/js/js.js
@@ -312,6 +312,11 @@ function previousMessage(start: Element): ?Element {
   return walkToMessage(start.previousElementSibling, 'previousElementSibling');
 }
 
+/** The message after the given message, if any. */
+function nextMessage(start: Element): ?Element {
+  return walkToMessage(start.nextElementSibling, 'nextElementSibling');
+}
+
 /**
  * An element is visible if any part of it is visible on screen.
  *
@@ -772,6 +777,18 @@ const handleMessageEvent: MessageEventListener = e => {
  *
  */
 
+/**
+ * If the given message is muted, reveal it and all consecutive following
+ * messages from the same user.
+ */
+const revealMutedMessages = (message: Element) => {
+  let messageNode = message;
+  do {
+    messageNode.setAttribute('data-mute-state', 'shown');
+    messageNode = nextMessage(messageNode);
+  } while (messageNode && messageNode.classList.contains('message-brief'));
+};
+
 const requireAttribute = (e: Element, name: string): string => {
   const value = e.getAttribute(name);
   if (value === null || value === undefined) {
@@ -926,9 +943,27 @@ const handleLongPress = (target: Element) => {
     return;
   }
 
+  // Prettier bug on nested ternary
+  /* prettier-ignore */
+  const targetType = target.matches('.header')
+    ? 'header'
+    : target.matches('a')
+      ? 'link'
+      : 'message';
+  const messageNode = target.closest('.message');
+
+  if (
+    targetType === 'message'
+    && messageNode
+    && messageNode.getAttribute('data-mute-state') === 'hidden'
+  ) {
+    revealMutedMessages(messageNode);
+    return;
+  }
+
   sendMessage({
     type: 'longPress',
-    target: target.matches('.header') ? 'header' : target.matches('a') ? 'link' : 'message',
+    target: targetType,
     messageId: getMessageIdFromNode(target),
     href: target.matches('a') ? requireAttribute(target, 'href') : null,
   });
diff --git a/src/webview/static/base.css b/src/webview/static/base.css
index 74e36cb4f5a..2c8f04e1a2b 100644
--- a/src/webview/static/base.css
+++ b/src/webview/static/base.css
@@ -142,6 +142,19 @@ body {
   padding: 0 16px 16px 80px;
 }
 
+.message-brief[data-mute-state="hidden"] {
+  display: none;
+}
+
+.message[data-mute-state="hidden"] > .avatar,
+.message[data-mute-state="hidden"] > .content {
+  display: none;
+}
+
+.message[data-mute-state="shown"] > .muted-message-explanation {
+  display: none;
+}
+
 #message-loading {
   position: fixed;
   width: 100%;
@@ -580,7 +593,8 @@ h1, h2, h3, h4, h5, h6 {
   text-decoration: underline;
 }
 
-/* Our own "sorry, unsupported" message for widgets. */
+/* Our own "sorry, unsupported" message for widgets.
+   Also used for showing that a message was sent by a muted user. */
 .special-message {
   display: flex;
   flex-direction: column;
diff --git a/static/translations/messages_en.json b/static/translations/messages_en.json
index c2472a61ec5..334bf1d9319 100644
--- a/static/translations/messages_en.json
+++ b/static/translations/messages_en.json
@@ -228,6 +228,7 @@
   "🤒 Out sick": "🤒 Out sick",
   "🌴 Vacationing": "🌴 Vacationing",
   "🏠 Working remotely": "🏠 Working remotely",
+  "This message was hidden because it is from a user you have muted. Long-press to view.": "This message was hidden because it is from a user you have muted. Long-press to view.",
   "Signed out": "Signed out",
   "Remove account?": "Remove account?",
   "This will make the mobile app on this device forget {email} on {realmUrl}.": "This will make the mobile app on this device forget {email} on {realmUrl}.",