diff --git a/src/api/gramjs/apiBuilders/messages.ts b/src/api/gramjs/apiBuilders/messages.ts
index aeeffd0cf..8da7648db 100644
--- a/src/api/gramjs/apiBuilders/messages.ts
+++ b/src/api/gramjs/apiBuilders/messages.ts
@@ -162,7 +162,7 @@ type UniversalMessage = (
   & Pick<Partial<GramJs.Message & GramJs.MessageService>, (
     'out' | 'message' | 'entities' | 'fromId' | 'peerId' | 'fwdFrom' | 'replyTo' | 'replyMarkup' | 'post' |
     'media' | 'action' | 'views' | 'editDate' | 'editHide' | 'mediaUnread' | 'groupedId' | 'mentioned' | 'viaBotId' |
-    'replies' | 'fromScheduled' | 'postAuthor' | 'noforwards' | 'reactions' | 'forwards' | 'silent'
+    'replies' | 'fromScheduled' | 'postAuthor' | 'noforwards' | 'reactions' | 'forwards' | 'silent' | 'pinned'
   )>
 );
 
@@ -213,6 +213,7 @@ export function buildApiMessageWithChatId(
     forwards: mtpMessage.forwards,
     isFromScheduled: mtpMessage.fromScheduled,
     isSilent: mtpMessage.silent,
+    isPinned: mtpMessage.pinned,
     reactions: mtpMessage.reactions && buildMessageReactions(mtpMessage.reactions),
     emojiOnlyCount,
     ...(replyToMsgId && { replyToMessageId: replyToMsgId }),
diff --git a/src/api/types/messages.ts b/src/api/types/messages.ts
index f93c16e7b..2b428fcfb 100644
--- a/src/api/types/messages.ts
+++ b/src/api/types/messages.ts
@@ -423,6 +423,7 @@ export interface ApiMessage {
   isHideKeyboardSelective?: boolean;
   isFromScheduled?: boolean;
   isSilent?: boolean;
+  isPinned?: boolean;
   seenByUserIds?: string[];
   isProtected?: boolean;
   isForwardingAllowed?: boolean;
diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff
index 478f2d136..12494fc09 100644
Binary files a/src/assets/fonts/icomoon.woff and b/src/assets/fonts/icomoon.woff differ
diff --git a/src/assets/fonts/icomoon.woff2 b/src/assets/fonts/icomoon.woff2
index fe89d4f86..c80b6ab7e 100644
Binary files a/src/assets/fonts/icomoon.woff2 and b/src/assets/fonts/icomoon.woff2 differ
diff --git a/src/components/common/AnimatedCounter.tsx b/src/components/common/AnimatedCounter.tsx
index e5b23d67d..7391135e2 100644
--- a/src/components/common/AnimatedCounter.tsx
+++ b/src/components/common/AnimatedCounter.tsx
@@ -1,12 +1,12 @@
 import type { FC } from '../../lib/teact/teact';
-import React, { useMemo, useRef } from '../../lib/teact/teact';
+import React, {
+  useEffect, useMemo, useRef,
+} from '../../lib/teact/teact';
 import { getGlobal } from '../../global';
 
 import { ANIMATION_LEVEL_MAX } from '../../config';
-import usePrevious from '../../hooks/usePrevious';
-import useForceUpdate from '../../hooks/useForceUpdate';
-import useTimeout from '../../hooks/useTimeout';
 import useLang from '../../hooks/useLang';
+import useFlag from '../../hooks/useFlag';
 
 import styles from './AnimatedCounter.module.scss';
 
@@ -14,22 +14,25 @@ type OwnProps = {
   text: string;
 };
 
-const ANIMATION_TIME = 200;
-
 const AnimatedCounter: FC<OwnProps> = ({
   text,
 }) => {
   const lang = useLang();
 
-  const prevText = usePrevious(text);
-  const forceUpdate = useForceUpdate();
-
-  const isAnimatingRef = useRef(false);
+  const prevTextRef = useRef<string>();
+  const [isAnimating, markAnimating, unmarkAnimating] = useFlag(false);
 
   const shouldAnimate = getGlobal().settings.byKey.animationLevel === ANIMATION_LEVEL_MAX;
 
   const textElement = useMemo(() => {
-    if (!shouldAnimate) return text;
+    if (!shouldAnimate) {
+      return text;
+    }
+    if (!isAnimating) {
+      return prevTextRef.current || text;
+    }
+
+    const prevText = prevTextRef.current;
 
     const elements = [];
     for (let i = 0; i < text.length; i++) {
@@ -37,8 +40,8 @@ const AnimatedCounter: FC<OwnProps> = ({
         elements.push(
           <div className={styles.characterContainer}>
             <div className={styles.character}>{text[i]}</div>
-            <div className={styles.characterOld}>{prevText[i]}</div>
-            <div className={styles.characterNew}>{text[i]}</div>
+            <div className={styles.characterOld} onAnimationEnd={unmarkAnimating}>{prevText[i]}</div>
+            <div className={styles.characterNew} onAnimationEnd={unmarkAnimating}>{text[i]}</div>
           </div>,
         );
       } else {
@@ -46,15 +49,14 @@ const AnimatedCounter: FC<OwnProps> = ({
       }
     }
 
-    isAnimatingRef.current = true;
+    prevTextRef.current = text;
 
     return elements;
-  }, [prevText, shouldAnimate, text]);
+  }, [shouldAnimate, isAnimating, text]);
 
-  useTimeout(() => {
-    isAnimatingRef.current = false;
-    forceUpdate();
-  }, isAnimatingRef.current ? ANIMATION_TIME : undefined);
+  useEffect(() => {
+    markAnimating();
+  }, [text]);
 
   return (
     <span className={styles.root} dir={lang.isRtl ? 'rtl' : undefined}>
diff --git a/src/components/mediaViewer/MediaViewer.tsx b/src/components/mediaViewer/MediaViewer.tsx
index 77eae3033..b8c021a8f 100644
--- a/src/components/mediaViewer/MediaViewer.tsx
+++ b/src/components/mediaViewer/MediaViewer.tsx
@@ -17,9 +17,8 @@ import {
   selectCurrentMediaSearch, selectTabState,
   selectIsChatWithSelf,
   selectListedIds,
-  selectOutlyingIds,
   selectScheduledMessage,
-  selectUser,
+  selectUser, selectOutlyingListByMessageId,
 } from '../../global/selectors';
 import { stopCurrentAudio } from '../../util/audioPlayer';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
@@ -462,9 +461,9 @@ export default memo(withGlobal(
     let collectionIds: number[] | undefined;
 
     if (origin === MediaViewerOrigin.Inline
-      || origin === MediaViewerOrigin.Album
-      || origin === MediaViewerOrigin.SuggestedAvatar) {
-      collectionIds = selectOutlyingIds(global, chatId, threadId) || selectListedIds(global, chatId, threadId);
+      || origin === MediaViewerOrigin.Album) {
+      collectionIds = selectOutlyingListByMessageId(global, chatId, threadId, message.id)
+        || selectListedIds(global, chatId, threadId);
     } else if (origin === MediaViewerOrigin.SharedMedia) {
       const currentSearch = selectCurrentMediaSearch(global);
       const { foundIds } = (currentSearch && currentSearch.resultsByType && currentSearch.resultsByType.media) || {};
diff --git a/src/components/middle/ActionMessage.tsx b/src/components/middle/ActionMessage.tsx
index f4812b77a..d77035b74 100644
--- a/src/components/middle/ActionMessage.tsx
+++ b/src/components/middle/ActionMessage.tsx
@@ -8,6 +8,7 @@ import type {
   ApiUser, ApiMessage, ApiChat, ApiSticker, ApiTopic,
 } from '../../api/types';
 import type { FocusDirection } from '../../types';
+import type { PinnedIntersectionChangedCallback } from './hooks/usePinnedMessage';
 
 import {
   selectUser,
@@ -45,6 +46,7 @@ type OwnProps = {
   isLastInList?: boolean;
   isInsideTopic?: boolean;
   memoFirstUnreadIdRef?: { current: number | undefined };
+  onPinnedIntersectionChange?: PinnedIntersectionChangedCallback;
 };
 
 type StateProps = {
@@ -84,6 +86,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
   observeIntersectionForReading,
   observeIntersectionForLoading,
   observeIntersectionForPlaying,
+  onPinnedIntersectionChange,
 }) => {
   const { openPremiumModal, requestConfetti } = getActions();
 
@@ -96,6 +99,14 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
   useEnsureMessage(message.chatId, message.replyToMessageId, targetMessage);
   useFocusMessage(ref, message.chatId, isFocused, focusDirection, noFocusHighlight);
 
+  useEffect(() => {
+    if (!message.isPinned) return undefined;
+
+    return () => {
+      onPinnedIntersectionChange?.({ viewportPinnedIdsToRemove: [message.id], isUnmount: true });
+    };
+  }, [onPinnedIntersectionChange, message.isPinned, message.id]);
+
   const noAppearanceAnimation = appearanceOrder <= 0;
   const [isShown, markShown] = useFlag(noAppearanceAnimation);
   const isGift = Boolean(message.content.action?.text.startsWith('ActionGift'));
@@ -209,6 +220,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
       id={getMessageHtmlId(message.id)}
       className={className}
       data-message-id={message.id}
+      data-is-pinned={message.isPinned || undefined}
       onMouseDown={handleMouseDown}
       onContextMenu={handleContextMenu}
     >
diff --git a/src/components/middle/HeaderPinnedMessage.module.scss b/src/components/middle/HeaderPinnedMessage.module.scss
new file mode 100644
index 000000000..8d4533b05
--- /dev/null
+++ b/src/components/middle/HeaderPinnedMessage.module.scss
@@ -0,0 +1,269 @@
+@import "../../styles/mixins";
+
+.root {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  cursor: default;
+  flex-direction: row-reverse;
+  background: var(--color-background);
+
+  :global {
+    .Button {
+      margin-left: 0.25rem;
+
+      &.tiny {
+        margin-right: 0.625rem;
+      }
+    }
+  }
+
+  :global(body.animation-level-1) & {
+    :global(.ripple-container) {
+      display: none;
+    }
+  }
+
+  :global(body.animation-level-0) & {
+    transition: none !important;
+  }
+
+  @media (min-width: 1276px) {
+    transform: translate3d(0, 0, 0);
+    transition: opacity 0.15s ease, transform var(--layer-transition);
+
+    :global(#Main.right-column-open) & {
+      transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
+    }
+  }
+
+  > :global(.Button) {
+    flex-shrink: 0;
+  }
+}
+
+.root:global(.full-width) {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: var(--color-background);
+  padding: 0.25rem 0.8125rem 0.25rem 1rem;
+  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+  transform: translate3d(0, 0, 0);
+  transition: opacity 0.15s ease, transform var(--layer-transition);
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -0.1875rem;
+    left: 0;
+    right: 0;
+    height: 0.125rem;
+    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+  }
+
+  .pinnedMessage {
+    margin-top: 0;
+    margin-bottom: 0;
+    flex: 1;
+  }
+
+  .messageText {
+    max-width: none;
+  }
+
+  @media (min-width: 1276px) {
+    transform: translate3d(0, 0, 0);
+    transition: opacity 0.15s ease, transform var(--layer-transition);
+
+    :global(#Main.right-column-open) & {
+      padding-left: calc(var(--right-column-width) + 1rem);
+    }
+  }
+}
+
+.loading {
+  --spinner-size: 1.5rem;
+}
+
+.pinListIcon {
+  position: absolute;
+  transition: 0.25s ease-in-out opacity, 0.25s ease-in-out transform;
+}
+
+.pinListIconHidden {
+  opacity: 0;
+  transform: scale(0.6);
+}
+
+.pinnedMessage {
+  display: flex;
+  flex-shrink: 1;
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  padding: 0.25rem;
+  padding-left: 0.375rem;
+  border-radius: var(--border-radius-messages-small);
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  align-items: center;
+
+  &:hover:not(.no-hover) {
+    background-color: var(--color-interactive-element-hover);
+  }
+}
+
+
+.messageTextTransition {
+  height: 1.125rem;
+  width: 100%;
+  overflow: hidden;
+}
+
+.messageText {
+  overflow: hidden;
+  margin-inline-start: 0.375rem;
+  margin-top: 0.125rem;
+  max-width: 15rem;
+  min-width: 15rem;
+  flex-grow: 1;
+
+  transition: 0.25s ease-in-out transform;
+
+  &.withMedia {
+    transform: translateX(2.625rem);
+    margin-right: 2.625rem;
+    max-width: calc(15rem - 2.625rem);
+    min-width: calc(15rem - 2.625rem);
+  }
+
+  :global(.emoji-small) {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  @media (min-width: 1440px) and (max-width: 1500px) {
+    max-width: 14rem;
+  }
+}
+
+.title {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  height: 1rem;
+  color: var(--color-primary);
+  margin-bottom: 0.125rem;
+  white-space: pre;
+  text-align: initial;
+
+  :global(body.is-ios) & {
+    font-size: 0.9375rem;
+  }
+}
+
+.summary {
+  font-size: 0.875rem;
+  line-height: 1.125rem;
+  height: 1.125rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+
+  :global(body.is-ios) & {
+    font-size: 0.9375rem;
+  }
+}
+
+.inlineButton {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-radius: 1.5rem;
+  padding: 0 0.75rem;
+  font-weight: 500;
+  text-transform: none;
+  height: 2rem;
+  max-width: 10rem;
+  flex-shrink: 1;
+}
+
+.pictogramTransition {
+  position: absolute;
+  width: 2.25rem !important;
+  height: 2.25rem;
+  margin-inline-start: 0.5rem;
+  margin-top: 0.125rem;
+  overflow: hidden;
+}
+
+.pinnedThumb {
+  width: 100%;
+  height: 100%;
+
+  flex-shrink: 0;
+
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  & + .messageText {
+    max-width: 12rem;
+  }
+}
+
+.pinnedThumbImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+@media (max-width: 600px) {
+  .pinnedMessage {
+    flex-grow: 1;
+    padding-top: 0;
+    padding-bottom: 0;
+    max-width: unset;
+    margin-top: -0.1875rem;
+
+    &::before {
+      top: 0.125rem;
+      bottom: 0.125rem;
+    }
+
+    .messageText {
+      max-width: none;
+    }
+  }
+
+  .root:global(.full-width) {
+    display: none;
+  }
+
+  .root {
+    @include header-mobile();
+  }
+}
+
+@media (min-width: 1276px) and (max-width: 1439px) {
+  :global(:not(.tools-stacked)) .root {
+    opacity: 1;
+
+    :global(#Main.right-column-open) & {
+      opacity: 0;
+    }
+  }
+}
+
+:global(.tools-stacked.animated) .root {
+  animation: fade-in var(--layer-transition) forwards;
+
+  :global(body.animation-level-0) & {
+    animation: none;
+  }
+}
diff --git a/src/components/middle/HeaderPinnedMessage.tsx b/src/components/middle/HeaderPinnedMessage.tsx
index b187c4ef9..736f228b7 100644
--- a/src/components/middle/HeaderPinnedMessage.tsx
+++ b/src/components/middle/HeaderPinnedMessage.tsx
@@ -17,6 +17,7 @@ import useMedia from '../../hooks/useMedia';
 import useThumbnail from '../../hooks/useThumbnail';
 import useFlag from '../../hooks/useFlag';
 import useLang from '../../hooks/useLang';
+import useAsyncRendering from '../right/hooks/useAsyncRendering';
 
 import RippleEffect from '../ui/RippleEffect';
 import ConfirmDialog from '../ui/ConfirmDialog';
@@ -24,7 +25,13 @@ import Button from '../ui/Button';
 import PinnedMessageNavigation from './PinnedMessageNavigation';
 import MessageSummary from '../common/MessageSummary';
 import MediaSpoiler from '../common/MediaSpoiler';
+import AnimatedCounter from '../common/AnimatedCounter';
+import Transition from '../ui/Transition';
+import Spinner from '../ui/Spinner';
 
+import styles from './HeaderPinnedMessage.module.scss';
+
+const SHOW_LOADER_DELAY = 450;
 type OwnProps = {
   message: ApiMessage;
   index: number;
@@ -34,17 +41,22 @@ type OwnProps = {
   onUnpinMessage?: (id: number) => void;
   onClick?: () => void;
   onAllPinnedClick?: () => void;
+  isLoading?: boolean;
+  isFullWidth?: boolean;
 };
 
 const HeaderPinnedMessage: FC<OwnProps> = ({
   message, count, index, customTitle, className, onUnpinMessage, onClick, onAllPinnedClick,
+  isLoading, isFullWidth,
 }) => {
   const { clickBotInlineButton } = getActions();
   const lang = useLang();
+
   const mediaThumbnail = useThumbnail(message);
   const mediaBlobUrl = useMedia(getMessageMediaHash(message, 'pictogram'));
-
   const isSpoiler = getMessageIsSpoiler(message);
+  const canRenderLoader = useAsyncRendering([isLoading], SHOW_LOADER_DELAY);
+  const shouldShowLoader = canRenderLoader && isLoading;
 
   const [isUnpinDialogOpen, openUnpinDialog, closeUnpinDialog] = useFlag();
 
@@ -66,18 +78,44 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
 
   const [noHoverColor, markNoHoverColor, unmarkNoHoverColor] = useFlag();
 
+  function renderPictogram(thumbDataUri?: string, blobUrl?: string, spoiler?: boolean) {
+    const { width, height } = getPictogramDimensions();
+    const srcUrl = blobUrl || thumbDataUri;
+
+    return (
+      <div className={styles.pinnedThumb}>
+        {thumbDataUri && !spoiler
+          && <img className={styles.pinnedThumbImage} src={srcUrl} width={width} height={height} alt="" />}
+        {thumbDataUri
+          && <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(spoiler)} width={width} height={height} />}
+      </div>
+    );
+  }
+
   return (
-    <div className={buildClassName('HeaderPinnedMessage-wrapper', className)}>
-      {count > 1 && (
+    <div className={buildClassName(
+      'HeaderPinnedMessageWrapper', styles.root, isFullWidth && 'full-width', className,
+    )}
+    >
+      {(count > 1 || shouldShowLoader) && (
         <Button
           round
           size="smaller"
           color="translucent"
-          className="pin-list-button"
           ariaLabel={lang('EventLogFilterPinnedMessages')}
-          onClick={onAllPinnedClick}
+          onClick={!shouldShowLoader ? onAllPinnedClick : undefined}
         >
-          <i className="icon-pin-list" />
+          <Spinner
+            color="blue"
+            className={buildClassName(
+              styles.loading, styles.pinListIcon, !shouldShowLoader && styles.pinListIconHidden,
+            )}
+          />
+          <i
+            className={buildClassName(
+              'icon-pin-list', styles.pinListIcon, shouldShowLoader && styles.pinListIconHidden,
+            )}
+          />
         </Button>
       )}
       {onUnpinMessage && (
@@ -86,7 +124,6 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
           size="smaller"
           color="translucent"
           ariaLabel={lang('UnpinMessageAlertTitle')}
-          className="unpin-button"
           onClick={openUnpinDialog}
         >
           <i className="icon-close" />
@@ -100,7 +137,7 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
         confirmHandler={handleUnpinMessage}
       />
       <div
-        className={buildClassName('HeaderPinnedMessage', noHoverColor && 'no-hover')}
+        className={buildClassName(styles.pinnedMessage, noHoverColor && styles.noHover)}
         onClick={onClick}
         dir={lang.isRtl ? 'rtl' : undefined}
       >
@@ -108,20 +145,32 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
           count={count}
           index={index}
         />
-        {mediaThumbnail && renderPictogram(mediaThumbnail, mediaBlobUrl, isSpoiler)}
-        <div className="message-text">
-          <div className="title" dir="auto">
-            {customTitle ? renderText(customTitle) : `${lang('PinnedMessage')} ${index > 0 ? `#${count - index}` : ''}`}
+        <Transition activeKey={message.id} name="slide-vertical" className={styles.pictogramTransition}>
+          {renderPictogram(
+            mediaThumbnail,
+            mediaBlobUrl,
+            isSpoiler,
+          )}
+        </Transition>
+        <div className={buildClassName(styles.messageText, mediaThumbnail && styles.withMedia)}>
+          <div className={styles.title} dir="auto">
+            {!customTitle && (
+              <AnimatedCounter text={`${lang('PinnedMessage')} ${index > 0 ? `#${count - index}` : ''}`} />
+            )}
+
+            {customTitle && renderText(customTitle)}
           </div>
-          <p dir="auto">
-            <MessageSummary lang={lang} message={message} noEmoji={Boolean(mediaThumbnail)} />
-          </p>
-          <RippleEffect />
+          <Transition activeKey={message.id} name="slide-vertical-fade" className={styles.messageTextTransition}>
+            <p dir="auto" className={styles.summary}>
+              <MessageSummary lang={lang} message={message} noEmoji={Boolean(mediaThumbnail)} />
+            </p>
+          </Transition>
         </div>
+        <RippleEffect />
         {inlineButton && (
           <Button
             size="tiny"
-            className="inline-button"
+            className={styles.inlineButton}
             onClick={handleInlineButtonClick}
             shouldStopPropagation
             onMouseEnter={!IS_TOUCH_ENV ? markNoHoverColor : undefined}
@@ -135,16 +184,4 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
   );
 };
 
-function renderPictogram(thumbDataUri: string, blobUrl?: string, isSpoiler?: boolean) {
-  const { width, height } = getPictogramDimensions();
-  const srcUrl = blobUrl || thumbDataUri;
-
-  return (
-    <div className="pinned-thumb">
-      {!isSpoiler && <img className="pinned-thumb-image" src={srcUrl} width={width} height={height} alt="" />}
-      <MediaSpoiler thumbDataUri={srcUrl} isVisible={Boolean(isSpoiler)} width={width} height={height} />
-    </div>
-  );
-}
-
 export default memo(HeaderPinnedMessage);
diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx
index cc1a69ed1..035a49316 100644
--- a/src/components/middle/MessageList.tsx
+++ b/src/components/middle/MessageList.tsx
@@ -10,6 +10,8 @@ import type {
 import { MAIN_THREAD_ID } from '../../api/types';
 import type { MessageListType } from '../../global/types';
 import type { AnimationLevel } from '../../types';
+import type { Signal } from '../../util/signals';
+import type { PinnedIntersectionChangedCallback } from './hooks/usePinnedMessage';
 import { LoadMoreDirection } from '../../types';
 
 import { ANIMATION_END_DELAY, LOCAL_MESSAGE_MIN_ID, MESSAGE_LIST_SLICE } from '../../config';
@@ -28,7 +30,10 @@ import {
   selectFirstMessageId,
   selectChatScheduledMessages,
   selectCurrentMessageIds,
-  selectIsCurrentUserPremium, selectLastScrollOffset, selectThreadInfo,
+  selectIsCurrentUserPremium,
+  selectLastScrollOffset,
+  selectThreadInfo,
+  selectTabState,
 } from '../../global/selectors';
 import {
   isChatChannel,
@@ -82,6 +87,8 @@ type OwnProps = {
   hasTools?: boolean;
   withBottomShift?: boolean;
   withDefaultBg: boolean;
+  onPinnedIntersectionChange: PinnedIntersectionChangedCallback;
+  getForceNextPinnedInHeader: Signal<boolean | undefined>;
 };
 
 type StateProps = {
@@ -162,6 +169,8 @@ const MessageList: FC<OwnProps & StateProps> = ({
   withBottomShift,
   withDefaultBg,
   topic,
+  onPinnedIntersectionChange,
+  getForceNextPinnedInHeader,
 }) => {
   const {
     loadViewportMessages, setScrollOffset, loadSponsoredMessages, loadMessageReactions, copyMessagesByIds,
@@ -309,6 +318,12 @@ const MessageList: FC<OwnProps & StateProps> = ({
     }
 
     runDebouncedForScroll(() => {
+      const global = getGlobal();
+      const forceNextPinnedInHeader = getForceNextPinnedInHeader() && !selectTabState(global).focusedMessage?.chatId;
+      if (forceNextPinnedInHeader) {
+        onPinnedIntersectionChange({ hasScrolled: true });
+      }
+
       isScrollingRef.current = false;
 
       fastRaf(() => {
@@ -323,7 +338,9 @@ const MessageList: FC<OwnProps & StateProps> = ({
         }
       });
     });
-  }, [updateStickyDates, hasTools, type, setScrollOffset, chatId, threadId]);
+  }, [
+    updateStickyDates, hasTools, getForceNextPinnedInHeader, onPinnedIntersectionChange, type, chatId, threadId,
+  ]);
 
   // Container resize observer (caused by Composer reply/webpage panels)
   const handleResize = useCallback((entry: ResizeObserverEntry) => {
@@ -643,6 +660,7 @@ const MessageList: FC<OwnProps & StateProps> = ({
           noAppearanceAnimation={!messageGroups || !shouldAnimateAppearanceRef.current}
           onFabToggle={onFabToggle}
           onNotchToggle={onNotchToggle}
+          onPinnedIntersectionChange={onPinnedIntersectionChange}
         />
       ) : (
         <Loading color="white" backgroundColor="dark" />
diff --git a/src/components/middle/MessageListContent.tsx b/src/components/middle/MessageListContent.tsx
index f01f9761d..3322ddb9f 100644
--- a/src/components/middle/MessageListContent.tsx
+++ b/src/components/middle/MessageListContent.tsx
@@ -4,6 +4,7 @@ import React, { memo } from '../../lib/teact/teact';
 import { getActions } from '../../global';
 
 import type { MessageListType } from '../../global/types';
+import type { PinnedIntersectionChangedCallback } from './hooks/usePinnedMessage';
 
 import { SCHEDULED_WHEN_ONLINE } from '../../config';
 import { MAIN_THREAD_ID } from '../../api/types';
@@ -50,6 +51,7 @@ interface OwnProps {
   noAppearanceAnimation: boolean;
   onFabToggle: AnyToVoidFunction;
   onNotchToggle: AnyToVoidFunction;
+  onPinnedIntersectionChange: PinnedIntersectionChangedCallback;
 }
 
 const UNREAD_DIVIDER_CLASS = 'unread-divider';
@@ -80,6 +82,7 @@ const MessageListContent: FC<OwnProps> = ({
   noAppearanceAnimation,
   onFabToggle,
   onNotchToggle,
+  onPinnedIntersectionChange,
 }) => {
   const { openHistoryCalendar } = getActions();
 
@@ -87,7 +90,7 @@ const MessageListContent: FC<OwnProps> = ({
     observeIntersectionForReading,
     observeIntersectionForLoading,
     observeIntersectionForPlaying,
-  } = useMessageObservers(type, containerRef, memoFirstUnreadIdRef);
+  } = useMessageObservers(type, containerRef, memoFirstUnreadIdRef, onPinnedIntersectionChange);
 
   const {
     backwardsTriggerRef,
@@ -154,6 +157,7 @@ const MessageListContent: FC<OwnProps> = ({
             memoFirstUnreadIdRef={memoFirstUnreadIdRef}
             appearanceOrder={messageCountToAnimate - ++appearanceIndex}
             isLastInList={isLastInList}
+            onPinnedIntersectionChange={onPinnedIntersectionChange}
           />,
         ]);
       }
@@ -222,6 +226,7 @@ const MessageListContent: FC<OwnProps> = ({
             isLastInDocumentGroup={position.isLastInDocumentGroup}
             isLastInList={position.isLastInList}
             memoFirstUnreadIdRef={memoFirstUnreadIdRef}
+            onPinnedIntersectionChange={onPinnedIntersectionChange}
           />,
           message.id === threadTopMessageId && (
             <div className="local-action-message" key="discussion-started">
diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx
index ca840ab72..ba449146e 100644
--- a/src/components/middle/MiddleColumn.tsx
+++ b/src/components/middle/MiddleColumn.tsx
@@ -66,6 +66,7 @@ import usePrevious from '../../hooks/usePrevious';
 import useForceUpdate from '../../hooks/useForceUpdate';
 import useSyncEffect from '../../hooks/useSyncEffect';
 import useAppLayout from '../../hooks/useAppLayout';
+import usePinnedMessage from './hooks/usePinnedMessage';
 
 import Transition from '../ui/Transition';
 import MiddleHeader from './MiddleHeader';
@@ -130,6 +131,7 @@ type StateProps = {
   shouldJoinToSend?: boolean;
   shouldSendJoinRequest?: boolean;
   lastSyncTime?: number;
+  pinnedIds?: number[];
 };
 
 function isImage(item: DataTransferItem) {
@@ -177,6 +179,7 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
   shouldSendJoinRequest,
   shouldLoadFullChat,
   lastSyncTime,
+  pinnedIds,
 }) => {
   const {
     openChat,
@@ -350,6 +353,14 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
 
   const customBackgroundValue = useCustomBackground(theme, customBackground);
 
+  const {
+    onIntersectionChanged,
+    onFocusPinnedMessage,
+    getCurrentPinnedIndexes,
+    getLoadingPinnedId,
+    getForceNextPinnedInHeader,
+  } = usePinnedMessage(chatId, threadId, pinnedIds);
+
   const className = buildClassName(
     renderingHasTools && 'has-header-tools',
     MASK_IMAGE_DISABLED ? 'mask-image-disabled' : 'mask-image-enabled',
@@ -444,6 +455,9 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
               messageListType={renderingMessageListType}
               isReady={isReady}
               isMobile={isMobile}
+              getCurrentPinnedIndexes={getCurrentPinnedIndexes}
+              getLoadingPinnedId={getLoadingPinnedId}
+              onFocusPinnedMessage={onFocusPinnedMessage}
             />
             <Transition
               name={shouldSkipHistoryAnimations ? 'none' : animationLevel === ANIMATION_LEVEL_MAX ? 'slide' : 'fade'}
@@ -464,6 +478,8 @@ const MiddleColumn: FC<OwnProps & StateProps> = ({
                 isReady={isReady}
                 withBottomShift={withMessageListBottomShift}
                 withDefaultBg={Boolean(!customBackground && !backgroundColor)}
+                onPinnedIntersectionChange={onIntersectionChanged}
+                getForceNextPinnedInHeader={getForceNextPinnedInHeader}
               />
               <div className={footerClassName}>
                 {renderingCanPost && (
@@ -698,6 +714,7 @@ export default memo(withGlobal<OwnProps>(
       shouldJoinToSend,
       shouldSendJoinRequest,
       shouldLoadFullChat,
+      pinnedIds,
     };
   },
 )(MiddleColumn));
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 3dcd4e444..9d9dcb00e 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@@ -1,47 +1,9 @@
 @import "../../styles/mixins";
 
 @mixin mobile-header-styles() {
-  .HeaderPinnedMessage-wrapper,
   .AudioPlayer {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    height: 2.875rem;
-    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+    @include header-mobile;
 
-    display: flex;
-    flex-direction: row-reverse;
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-    padding-left: max(0.75rem, env(safe-area-inset-left));
-    padding-right: max(0.5rem, env(safe-area-inset-right));
-    background: var(--color-background);
-
-    // Target: Old Firefox (Waterfox Classic)
-    @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
-      padding-left: 0.75rem;
-      padding-right: 0.5rem;
-    }
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      top: -0.1875rem;
-      left: 0;
-      right: 0;
-      height: 0.125rem;
-      box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
-    }
-
-    .HeaderPinnedMessage {
-      max-width: unset;
-      margin-top: -0.1875rem;
-    }
-  }
-
-  .AudioPlayer {
     flex-direction: row;
     margin-top: 0;
     padding: 0.25rem 0.5rem;
@@ -59,25 +21,6 @@
       margin-left: auto;
     }
   }
-
-  .HeaderPinnedMessage {
-    flex-grow: 1;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    &::before {
-      top: 0.125rem;
-      bottom: 0.125rem;
-    }
-
-    .message-text {
-      max-width: none;
-    }
-  }
-
-  .HeaderPinnedMessage-wrapper.full-width {
-    display: none;
-  }
 }
 
 .MiddleHeader {
@@ -162,10 +105,6 @@
     overflow: hidden;
   }
 
-  body.animation-level-0 & .HeaderPinnedMessage-wrapper {
-    transition: none !important;
-  }
-
   .header-tools {
     display: flex;
     align-items: center;
@@ -208,7 +147,6 @@
   }
 
   @media (min-width: 1276px) and (max-width: 1439px) {
-    &:not(.tools-stacked) .HeaderPinnedMessage-wrapper,
     &:not(.tools-stacked) .AudioPlayer {
       opacity: 1;
 
@@ -228,7 +166,6 @@
     }
   }
 
-  &.tools-stacked.animated .HeaderPinnedMessage-wrapper,
   &.tools-stacked.animated .AudioPlayer {
     animation: fade-in var(--layer-transition) forwards;
 
@@ -383,213 +320,6 @@
     height: 2.5rem;
   }
 
-  .HeaderPinnedMessage-wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    cursor: default;
-    flex-direction: row-reverse;
-    background: var(--color-background);
-
-    body.animation-level-1 & {
-      .ripple-container {
-        display: none;
-      }
-    }
-
-    @media (min-width: 1276px) {
-      transform: translate3d(0, 0, 0);
-      transition: opacity 0.15s ease, transform var(--layer-transition);
-
-      #Main.right-column-open & {
-        transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
-      }
-    }
-
-    > .Button {
-      flex-shrink: 0;
-    }
-
-    &.full-width {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 100%;
-      background: var(--color-background);
-      padding: 0.25rem 0.8125rem 0.25rem 1rem;
-      box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
-      transform: translate3d(0, 0, 0);
-      transition: opacity 0.15s ease, transform var(--layer-transition);
-
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        top: -0.1875rem;
-        left: 0;
-        right: 0;
-        height: 0.125rem;
-        box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
-      }
-
-      .HeaderPinnedMessage {
-        margin-top: 0;
-        margin-bottom: 0;
-        flex: 1;
-
-        .message-text {
-          max-width: none;
-        }
-      }
-
-      @media (min-width: 1276px) {
-        transform: translate3d(0, 0, 0);
-        transition: opacity 0.15s ease, transform var(--layer-transition);
-
-        #Main.right-column-open & {
-          padding-left: calc(var(--right-column-width) + 1rem);
-        }
-      }
-    }
-  }
-
-  .HeaderPinnedMessage {
-    display: flex;
-    flex-shrink: 1;
-    margin-top: -0.25rem;
-    margin-bottom: -0.25rem;
-    padding: 0.25rem;
-    padding-left: 0.375rem;
-    border-radius: var(--border-radius-messages-small);
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    align-items: center;
-
-    &:hover:not(.no-hover) {
-      background-color: var(--color-interactive-element-hover);
-    }
-
-    .pinned-message-border {
-      position: relative;
-      height: 2.25rem;
-      margin: 0.125rem 0;
-      width: 0.125rem;
-      min-width: 0.125rem;
-      overflow: hidden;
-
-      .pinned-message-border-wrapper-1 {
-        height: 2.25rem;
-        width: 0.125rem;
-        border-radius: 0.0625rem;
-        background: var(--color-primary);
-      }
-
-      .pinned-message-border-wrapper {
-        background-color: var(--color-primary-opacity);
-        position: relative;
-        will-change: transform;
-        transition: transform 0.25s ease-in-out;
-      }
-
-      .pinned-message-border-mark {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 0.125rem;
-        background: var(--color-primary);
-        border-radius: 0.0625rem;
-        will-change: transform;
-        transition: transform 0.25s ease-in-out;
-      }
-    }
-
-    .message-text {
-      overflow: hidden;
-      margin-inline-start: 0.375rem;
-      margin-top: 0.125rem;
-      max-width: 15rem;
-      min-width: 8rem;
-      flex-grow: 1;
-
-      @media (min-width: 1440px) and (max-width: 1500px) {
-        max-width: 14rem;
-      }
-
-      .title {
-        font-weight: 500;
-        font-size: 0.875rem;
-        line-height: 1rem;
-        height: 1rem;
-        color: var(--color-primary);
-        margin-bottom: 0.125rem;
-        white-space: pre;
-        text-align: initial;
-
-        body.is-ios & {
-          font-size: 0.9375rem;
-        }
-      }
-
-      p {
-        font-size: 0.875rem;
-        line-height: 1.125rem;
-        height: 1.125rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        margin: 0;
-
-        body.is-ios & {
-          font-size: 0.9375rem;
-        }
-      }
-    }
-
-    .inline-button {
-      display: block;
-      width: auto;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      border-radius: 1.5rem;
-      padding: 0 0.75rem;
-      font-weight: 500;
-      text-transform: none;
-      height: 2rem;
-      max-width: 10rem;
-      flex-shrink: 1;
-    }
-
-    .emoji-small {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    .pinned-thumb {
-      position: relative;
-      width: 2.25rem;
-      height: 2.25rem;
-
-      margin-inline-start: 0.375rem;
-      margin-top: 0.125rem;
-      flex-shrink: 0;
-
-      border-radius: 0.25rem;
-      overflow: hidden;
-
-      & + .message-text {
-        max-width: 12rem;
-      }
-    }
-
-    .pinned-thumb-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
   .HeaderActions {
     flex-shrink: 0;
     margin-left: auto;
@@ -597,6 +327,14 @@
     align-items: center;
     justify-content: flex-end;
 
+    .Button {
+      margin-left: 0.25rem;
+
+      &.tiny {
+        margin-right: 0.625rem;
+      }
+    }
+
     .toggle-right-pane-button {
       &.active {
         color: var(--color-primary);
@@ -626,17 +364,6 @@
     }
   }
 
-  .HeaderPinnedMessage-wrapper,
-  .HeaderActions {
-    .Button {
-      margin-left: 0.25rem;
-
-      &.tiny {
-        margin-right: 0.625rem;
-      }
-    }
-  }
-
   @media (max-width: 600px) {
     @include mobile-header-styles();
   }
diff --git a/src/components/middle/MiddleHeader.tsx b/src/components/middle/MiddleHeader.tsx
index 7a6e6f755..61c33d3cb 100644
--- a/src/components/middle/MiddleHeader.tsx
+++ b/src/components/middle/MiddleHeader.tsx
@@ -1,11 +1,11 @@
 import type { FC } from '../../lib/teact/teact';
 import React, {
-  memo, useCallback, useEffect, useRef, useState,
+  memo, useCallback, useEffect, useRef,
 } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
-import cycleRestrict from '../../util/cycleRestrict';
 
 import type { GlobalState, MessageListType } from '../../global/types';
+import type { Signal } from '../../util/signals';
 import type {
   ApiChat, ApiMessage, ApiTypingStatus, ApiUser,
 } from '../../api/types';
@@ -51,6 +51,7 @@ import useLang from '../../hooks/useLang';
 import useConnectionStatus from '../../hooks/useConnectionStatus';
 import usePrevious from '../../hooks/usePrevious';
 import useAppLayout from '../../hooks/useAppLayout';
+import useDerivedState from '../../hooks/useDerivedState';
 
 import PrivateChatInfo from '../common/PrivateChatInfo';
 import GroupChatInfo from '../common/GroupChatInfo';
@@ -75,6 +76,9 @@ type OwnProps = {
   messageListType: MessageListType;
   isReady?: boolean;
   isMobile?: boolean;
+  getCurrentPinnedIndexes: Signal<Record<string, number>>;
+  getLoadingPinnedId: Signal<number | undefined>;
+  onFocusPinnedMessage: (messageId: number) => boolean;
 };
 
 type StateProps = {
@@ -93,7 +97,6 @@ type StateProps = {
   isChatWithSelf?: boolean;
   lastSyncTime?: number;
   hasButtonInHeader?: boolean;
-  hasReachedFocusedMessage?: boolean;
   shouldSkipHistoryAnimations?: boolean;
   currentTransitionKey: number;
   connectionState?: GlobalState['connectionState'];
@@ -124,8 +127,10 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
   shouldSkipHistoryAnimations,
   currentTransitionKey,
   connectionState,
-  hasReachedFocusedMessage,
   isSyncing,
+  getCurrentPinnedIndexes,
+  getLoadingPinnedId,
+  onFocusPinnedMessage,
 }) => {
   const {
     openChatWithInfo,
@@ -133,7 +138,6 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
     focusMessage,
     openChat,
     openPreviousChat,
-    setReachedFocusedMessage,
     loadPinnedMessages,
     toggleLeftColumn,
     exitMessageSelectMode,
@@ -141,11 +145,12 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
 
   const lang = useLang();
   const isBackButtonActive = useRef(true);
-  const [isWaitingForPinnedMessageFocus, setWaitingForPinnedMessageFocus] = useState(false);
   const { isTablet } = useAppLayout();
 
-  const [pinnedMessageIndex, setPinnedMessageIndex] = useState(0);
-  const pinnedMessageId = Array.isArray(pinnedMessageIds) ? pinnedMessageIds[pinnedMessageIndex] : pinnedMessageIds;
+  const currentPinnedIndexes = useDerivedState(getCurrentPinnedIndexes);
+  const currentPinnedIndex = currentPinnedIndexes[`${chatId}_${threadId}`] || 0;
+  const waitingForPinnedId = useDerivedState(getLoadingPinnedId);
+  const pinnedMessageId = Array.isArray(pinnedMessageIds) ? pinnedMessageIds[currentPinnedIndex] : pinnedMessageIds;
   const pinnedMessage = messagesById && pinnedMessageId ? messagesById[pinnedMessageId] : undefined;
   const pinnedMessagesCount = Array.isArray(pinnedMessageIds)
     ? pinnedMessageIds.length : (pinnedMessageIds ? 1 : undefined);
@@ -160,25 +165,6 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
     }
   }, [chatId, loadPinnedMessages, lastSyncTime, threadId, isReady, isForum]);
 
-  // Reset pinned index when switching chats and pinning/unpinning
-  useEffect(() => {
-    setPinnedMessageIndex(0);
-    setWaitingForPinnedMessageFocus(false);
-  }, [pinnedMessageIds]);
-
-  useEffect(() => {
-    if (hasReachedFocusedMessage && isWaitingForPinnedMessageFocus) {
-      setReachedFocusedMessage({ hasReached: false });
-      setWaitingForPinnedMessageFocus(false);
-
-      const newIndex = cycleRestrict(pinnedMessagesCount || 1, pinnedMessageIndex + 1);
-      setPinnedMessageIndex(newIndex);
-    }
-  }, [
-    hasReachedFocusedMessage, isWaitingForPinnedMessageFocus, pinnedMessageIndex, pinnedMessagesCount,
-    setReachedFocusedMessage,
-  ]);
-
   useEnsureMessage(chatId, pinnedMessageId, pinnedMessage);
 
   const { width: windowWidth } = useWindowSize();
@@ -199,14 +185,14 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
   }, [pinMessage]);
 
   const handlePinnedMessageClick = useCallback((): void => {
-    if (pinnedMessage) {
+    if (!pinnedMessage) return;
+
+    if (onFocusPinnedMessage(pinnedMessage.id)) {
       focusMessage({
         chatId: pinnedMessage.chatId, threadId, messageId: pinnedMessage.id, noForumTopicPanel: true,
       });
-
-      setWaitingForPinnedMessageFocus(true);
     }
-  }, [pinnedMessage, focusMessage, threadId]);
+  }, [pinnedMessage, threadId, onFocusPinnedMessage]);
 
   const handleAllPinnedClick = useCallback(() => {
     openChat({ id: chatId, threadId, type: 'pinned' });
@@ -440,12 +426,14 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
           key={chatId}
           message={renderingPinnedMessage}
           count={renderingPinnedMessagesCount || 0}
-          index={pinnedMessageIndex}
+          index={currentPinnedIndex}
           customTitle={renderingPinnedMessageTitle}
-          className={buildClassName(pinnedMessageClassNames, isPinnedMessagesFullWidth && 'full-width')}
+          className={pinnedMessageClassNames}
           onUnpinMessage={renderingCanUnpin ? handleUnpinMessage : undefined}
           onClick={handlePinnedMessageClick}
           onAllPinnedClick={handleAllPinnedClick}
+          isLoading={waitingForPinnedId !== undefined}
+          isFullWidth={isPinnedMessagesFullWidth}
         />
       )}
 
@@ -514,7 +502,6 @@ export default memo(withGlobal<OwnProps>(
     );
     const shouldSendJoinRequest = Boolean(chat?.isNotJoined && chat.isJoinRequest);
     const typingStatus = selectThreadParam(global, chatId, threadId, 'typingStatus');
-    const focusedMessage = selectTabState(global).focusedMessage;
 
     const state: StateProps = {
       typingStatus,
@@ -531,7 +518,6 @@ export default memo(withGlobal<OwnProps>(
       connectionState: global.connectionState,
       isSyncing: global.isSyncing,
       hasButtonInHeader: canStartBot || canRestartBot || canSubscribe || shouldSendJoinRequest,
-      hasReachedFocusedMessage: !focusedMessage || focusedMessage.hasReachedMessage,
     };
 
     const messagesById = selectChatMessages(global, chatId);
diff --git a/src/components/middle/PinnedMessageNavigation.module.scss b/src/components/middle/PinnedMessageNavigation.module.scss
new file mode 100644
index 000000000..a82f499b7
--- /dev/null
+++ b/src/components/middle/PinnedMessageNavigation.module.scss
@@ -0,0 +1,35 @@
+.pinned-message-border {
+  position: relative;
+  height: 2.25rem;
+  margin: 0.125rem 0;
+  width: 0.125rem;
+  min-width: 0.125rem;
+  overflow: hidden;
+}
+
+.pinned-message-border-wrapper-1 {
+  height: 2.25rem;
+  width: 0.125rem;
+  border-radius: 0.0625rem;
+  background: var(--color-primary);
+}
+
+.pinned-message-border-wrapper {
+  background-color: var(--color-primary-opacity);
+  position: relative;
+  will-change: transform;
+  transition: transform 0.25s ease-in-out;
+}
+
+.pinned-message-border-mark {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.125rem;
+  background: var(--color-primary);
+  border-radius: 0.0625rem;
+  will-change: transform;
+  transition: transform 0.25s ease-in-out;
+  transform: translateY(var(--translate-y));
+  height: var(--height);
+}
diff --git a/src/components/middle/PinnedMessageNavigation.tsx b/src/components/middle/PinnedMessageNavigation.tsx
index 996787fa4..b17567db2 100644
--- a/src/components/middle/PinnedMessageNavigation.tsx
+++ b/src/components/middle/PinnedMessageNavigation.tsx
@@ -8,6 +8,8 @@ import React, {
 
 import buildClassName from '../../util/buildClassName';
 
+import styles from './PinnedMessageNavigation.module.scss';
+
 type OwnProps = {
   count: number;
   index: number;
@@ -66,9 +68,9 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
 
   if (count === 1) {
     return (
-      <div className="pinned-message-border">
+      <div className={styles.pinnedMessageBorder}>
         <div
-          className="pinned-message-border-wrapper-1"
+          className={styles.pinnedMessageBorderWrapper1}
           ref={containerRef}
         />
       </div>
@@ -80,9 +82,13 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
   } = markupParams;
 
   return (
-    <div className={buildClassName('pinned-message-border', count > BORDER_MASK_LEVEL && 'pinned-message-border-mask')}>
+    <div className={buildClassName(
+      styles.pinnedMessageBorder,
+      count > BORDER_MASK_LEVEL && styles.pinnedMessageBorderMask,
+    )}
+    >
       <div
-        className="pinned-message-border-wrapper"
+        className={styles.pinnedMessageBorderWrapper}
         ref={containerRef}
         style={
           `clip-path: url("#${clipPathId}"); width: 2px;
@@ -91,8 +97,9 @@ const PinnedMessageNavigation: FC<OwnProps> = ({
       >
         <span />
         <div
-          className="pinned-message-border-mark"
-          style={`height: ${markHeight}px; transform: translateY(${markTranslateY}px);`}
+          className={styles.pinnedMessageBorderMark}
+          style={`--height: ${markHeight}px; --translate-y: ${markTranslateY}px; `
+            + `--translate-track: ${trackTranslateY}px;`}
         />
       </div>
     </div>
diff --git a/src/components/middle/hooks/useMessageObservers.ts b/src/components/middle/hooks/useMessageObservers.ts
index 0d3df043d..4f96cdb2c 100644
--- a/src/components/middle/hooks/useMessageObservers.ts
+++ b/src/components/middle/hooks/useMessageObservers.ts
@@ -2,6 +2,7 @@ import type { RefObject } from 'react';
 import { getActions } from '../../../global';
 
 import type { MessageListType } from '../../../global/types';
+import type { PinnedIntersectionChangedCallback } from './usePinnedMessage';
 
 import { IS_ANDROID } from '../../../util/windowEnvironment';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
@@ -15,8 +16,11 @@ export default function useMessageObservers(
   type: MessageListType,
   containerRef: RefObject<HTMLDivElement>,
   memoFirstUnreadIdRef: { current: number | undefined },
+  onPinnedIntersectionChange: PinnedIntersectionChangedCallback,
 ) {
-  const { markMessageListRead, markMentionsRead, animateUnreadReaction } = getActions();
+  const {
+    markMessageListRead, markMentionsRead, animateUnreadReaction,
+  } = getActions();
 
   const { isMobile } = useAppLayout();
   const INTERSECTION_MARGIN_FOR_LOADING = isMobile ? 300 : 500;
@@ -34,17 +38,28 @@ export default function useMessageObservers(
     let maxId = 0;
     const mentionIds: number[] = [];
     const reactionIds: number[] = [];
+    const viewportPinnedIdsToAdd: number[] = [];
+    const viewportPinnedIdsToRemove: number[] = [];
+    let isReversed = false;
 
     entries.forEach((entry) => {
-      const { isIntersecting, target } = entry;
+      const {
+        isIntersecting, target, boundingClientRect, rootBounds,
+      } = entry;
+
+      const { dataset } = target as HTMLDivElement;
+      const messageId = Number(dataset.lastMessageId || dataset.messageId);
 
       if (!isIntersecting) {
+        if (dataset.isPinned) {
+          if (rootBounds && boundingClientRect.bottom < rootBounds.top) {
+            isReversed = true;
+          }
+          viewportPinnedIdsToRemove.push(messageId);
+        }
         return;
       }
 
-      const { dataset } = target as HTMLDivElement;
-
-      const messageId = Number(dataset.lastMessageId || dataset.messageId);
       if (messageId > maxId) {
         maxId = messageId;
       }
@@ -56,6 +71,10 @@ export default function useMessageObservers(
       if (dataset.hasUnreadReaction) {
         reactionIds.push(messageId);
       }
+
+      if (dataset.isPinned) {
+        viewportPinnedIdsToAdd.push(messageId);
+      }
     });
 
     if (memoFirstUnreadIdRef.current && maxId >= memoFirstUnreadIdRef.current) {
@@ -69,6 +88,10 @@ export default function useMessageObservers(
     if (reactionIds.length) {
       animateUnreadReaction({ messageIds: reactionIds });
     }
+
+    if (viewportPinnedIdsToAdd.length || viewportPinnedIdsToRemove.length) {
+      onPinnedIntersectionChange({ viewportPinnedIdsToAdd, viewportPinnedIdsToRemove, isReversed });
+    }
   });
 
   useBackgroundMode(freezeForReading, unfreezeForReading);
diff --git a/src/components/middle/hooks/usePinnedMessage.ts b/src/components/middle/hooks/usePinnedMessage.ts
new file mode 100644
index 000000000..bb1976960
--- /dev/null
+++ b/src/components/middle/hooks/usePinnedMessage.ts
@@ -0,0 +1,170 @@
+import { getGlobal } from '../../../global';
+import { useCallback, useEffect, useRef } from '../../../lib/teact/teact';
+
+import {
+  selectFocusedMessageId,
+  selectListedIds,
+  selectOutlyingListByMessageId,
+} from '../../../global/selectors';
+
+import { unique } from '../../../util/iteratees';
+import { clamp } from '../../../util/math';
+import cycleRestrict from '../../../util/cycleRestrict';
+import useSignal from '../../../hooks/useSignal';
+
+type PinnedIntersectionChangedParams = {
+  viewportPinnedIdsToAdd?: number[];
+  viewportPinnedIdsToRemove?: number[];
+  isReversed?: boolean;
+  hasScrolled?: boolean;
+  isUnmount?: boolean;
+};
+
+export type PinnedIntersectionChangedCallback = (params: PinnedIntersectionChangedParams) => void;
+
+export default function usePinnedMessage(chatId?: string, threadId?: number, pinnedIds?: number[]) {
+  const [getCurrentPinnedIndexes, setCurrentPinnedIndexes] = useSignal<Record<string, number>>({});
+  const [getForceNextPinnedInHeader, setForceNextPinnedInHeader] = useSignal<boolean | undefined>();
+  const viewportPinnedIdsRef = useRef<number[] | undefined>();
+  const [getLoadingPinnedId, setLoadingPinnedId] = useSignal<number | undefined>();
+
+  const key = chatId ? `${chatId}_${threadId}` : undefined;
+
+  // Reset when switching chat
+  useEffect(() => {
+    setForceNextPinnedInHeader(undefined);
+    viewportPinnedIdsRef.current = undefined;
+    setLoadingPinnedId(undefined);
+  }, [
+    chatId, setCurrentPinnedIndexes, setForceNextPinnedInHeader, setLoadingPinnedId, threadId,
+  ]);
+
+  useEffect(() => {
+    if (!key) return;
+    const currentPinnedIndex = getCurrentPinnedIndexes()[key];
+    const pinnedLength = pinnedIds?.length || 0;
+    if (currentPinnedIndex >= pinnedLength) {
+      setCurrentPinnedIndexes({
+        ...getCurrentPinnedIndexes(),
+        [key]: Math.max(0, pinnedLength - 1),
+      });
+    }
+  }, [getCurrentPinnedIndexes, key, pinnedIds?.length, setCurrentPinnedIndexes]);
+
+  const onIntersectionChanged = useCallback(({
+    viewportPinnedIdsToAdd = [], viewportPinnedIdsToRemove = [], isReversed, hasScrolled, isUnmount,
+  }: PinnedIntersectionChangedParams) => {
+    if (!chatId || !threadId || !key) return;
+
+    const global = getGlobal();
+
+    const pinnedMessagesCount = pinnedIds?.length || 0;
+
+    if (!pinnedMessagesCount || !pinnedIds) return;
+
+    const waitingForPinnedId = getLoadingPinnedId();
+    if (waitingForPinnedId && !hasScrolled) {
+      const newPinnedIndex = pinnedIds.indexOf(waitingForPinnedId);
+      setCurrentPinnedIndexes({
+        ...getCurrentPinnedIndexes(),
+        [key]: newPinnedIndex,
+      });
+      setLoadingPinnedId(undefined);
+    }
+
+    if (hasScrolled) {
+      setForceNextPinnedInHeader(undefined);
+      setLoadingPinnedId(undefined);
+    }
+
+    const forceNextPinnedInHeader = getForceNextPinnedInHeader();
+
+    const currentViewportPinnedIds = viewportPinnedIdsRef.current;
+
+    // Unmounting the Message component will fire this action, and if we've already marked the pin as
+    // outside the viewport, we don't need to do anything
+    if (isUnmount
+      && viewportPinnedIdsToAdd.length === 0 && viewportPinnedIdsToRemove.length === 1
+      && !currentViewportPinnedIds?.includes(viewportPinnedIdsToRemove[0])) {
+      return;
+    }
+
+    const newPinnedViewportIds = unique(
+      (currentViewportPinnedIds?.filter((id) => !viewportPinnedIdsToRemove.includes(id)) || [])
+        .concat(viewportPinnedIdsToAdd),
+    );
+
+    viewportPinnedIdsRef.current = newPinnedViewportIds;
+
+    const focusedMessageId = selectFocusedMessageId(global, chatId);
+    // Focused to some non-pinned message
+    if (!newPinnedViewportIds.length && isUnmount && focusedMessageId && !pinnedIds.includes(focusedMessageId)) {
+      const firstPinnedIdAfterFocused = pinnedIds.find((id) => id < focusedMessageId);
+      if (firstPinnedIdAfterFocused) {
+        const newIndex = pinnedIds.indexOf(firstPinnedIdAfterFocused);
+        setCurrentPinnedIndexes({
+          ...getCurrentPinnedIndexes(),
+          [key]: newIndex,
+        });
+      }
+    }
+
+    if (forceNextPinnedInHeader || isUnmount) {
+      return;
+    }
+
+    const maxId = Math.max(...newPinnedViewportIds);
+    const maxIdIndex = pinnedIds.findIndex((id) => id === maxId);
+    const delta = isReversed ? 0 : 1;
+    const newIndex = newPinnedViewportIds.length ? maxIdIndex : (
+      currentViewportPinnedIds?.length
+        ? clamp(pinnedIds.indexOf(currentViewportPinnedIds[0]) + delta, 0, pinnedIds.length - 1)
+        : 0
+    );
+
+    setCurrentPinnedIndexes({
+      ...getCurrentPinnedIndexes(),
+      [key]: newIndex,
+    });
+  }, [
+    chatId, threadId, key, pinnedIds, getLoadingPinnedId, getForceNextPinnedInHeader, setCurrentPinnedIndexes,
+    getCurrentPinnedIndexes, setLoadingPinnedId, setForceNextPinnedInHeader,
+  ]);
+
+  const onFocusPinnedMessage = useCallback((messageId: number): boolean => {
+    if (!chatId || !threadId || !key || getLoadingPinnedId()) return false;
+
+    const global = getGlobal();
+    if (!pinnedIds?.length) return false;
+
+    const index = pinnedIds.indexOf(messageId);
+    const newPinnedIndex = cycleRestrict(pinnedIds.length, index + 1);
+    setForceNextPinnedInHeader(true);
+
+    const listedIds = selectListedIds(global, chatId, threadId);
+    const isMessageLoaded = listedIds?.includes(messageId)
+      || selectOutlyingListByMessageId(global, chatId, threadId, messageId);
+
+    if (isMessageLoaded) {
+      setCurrentPinnedIndexes({
+        ...getCurrentPinnedIndexes(),
+        [key]: newPinnedIndex,
+      });
+      return true;
+    } else {
+      setLoadingPinnedId(pinnedIds[newPinnedIndex]);
+      return true;
+    }
+  }, [
+    chatId, getCurrentPinnedIndexes, getLoadingPinnedId, key, pinnedIds, setCurrentPinnedIndexes,
+    setForceNextPinnedInHeader, setLoadingPinnedId, threadId,
+  ]);
+
+  return {
+    onIntersectionChanged,
+    onFocusPinnedMessage,
+    getCurrentPinnedIndexes,
+    getLoadingPinnedId,
+    getForceNextPinnedInHeader,
+  };
+}
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 4a0bb0af4..1534686f0 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -29,6 +29,7 @@ import type {
   AnimationLevel, FocusDirection, IAlbum, ISettings,
 } from '../../../types';
 import type { ObserveFn } from '../../../hooks/useIntersectionObserver';
+import type { PinnedIntersectionChangedCallback } from '../hooks/usePinnedMessage';
 import { AudioOrigin } from '../../../types';
 import { MAIN_THREAD_ID } from '../../../api/types';
 
@@ -185,6 +186,7 @@ type OwnProps =
     noReplies: boolean;
     appearanceOrder: number;
     memoFirstUnreadIdRef: { current: number | undefined };
+    onPinnedIntersectionChange: PinnedIntersectionChangedCallback;
   }
   & MessagePositionProperties;
 
@@ -226,6 +228,7 @@ type StateProps = {
   isDownloading: boolean;
   threadId?: number;
   isPinnedList?: boolean;
+  isPinned?: boolean;
   canAutoLoadMedia?: boolean;
   canAutoPlayMedia?: boolean;
   hasLinkedChat?: boolean;
@@ -335,6 +338,7 @@ const Message: FC<OwnProps & StateProps> = ({
   activeEmojiInteractions,
   messageListType,
   isPinnedList,
+  isPinned,
   isDownloading,
   canAutoLoadMedia,
   canAutoPlayMedia,
@@ -350,6 +354,7 @@ const Message: FC<OwnProps & StateProps> = ({
   chatTranslations,
   areTranslationsEnabled,
   requestedTranslationLanguage,
+  onPinnedIntersectionChange,
 }) => {
   const {
     toggleMessageSelection,
@@ -397,12 +402,22 @@ const Message: FC<OwnProps & StateProps> = ({
 
     setTimeout(markShown, appearanceOrder * APPEARANCE_DELAY);
   }, [appearanceOrder, markShown, noAppearanceAnimation]);
+
   const { transitionClassNames } = useShowTransition(isShown, undefined, noAppearanceAnimation, false);
 
   const {
     id: messageId, chatId, forwardInfo, viaBotId, isTranscriptionError,
   } = message;
 
+  useEffect(() => {
+    if (!isPinned) return undefined;
+    const id = album ? album.messages[album.messages.length - 1].id : messageId;
+
+    return () => {
+      onPinnedIntersectionChange({ viewportPinnedIdsToRemove: [id], isUnmount: true });
+    };
+  }, [album, isPinned, messageId, onPinnedIntersectionChange]);
+
   const isLocal = isMessageLocal(message);
   const isOwn = isOwnMessage(message);
   const isScheduled = messageListType === 'scheduled' || message.isScheduled;
@@ -772,6 +787,7 @@ const Message: FC<OwnProps & StateProps> = ({
     const meta = (
       <MessageMeta
         message={message}
+        isPinned={isPinned}
         noReplies={noReplies}
         repliesThreadInfo={repliesThreadInfo}
         outgoingStatus={outgoingStatus}
@@ -1172,6 +1188,7 @@ const Message: FC<OwnProps & StateProps> = ({
         data-last-message-id={album ? album.messages[album.messages.length - 1].id : undefined}
         data-has-unread-mention={message.hasUnreadMention || undefined}
         data-has-unread-reaction={hasUnreadReaction || undefined}
+        data-is-pinned={isPinned || undefined}
       />
       {!isInDocumentGroup && (
         <div className="message-select-control">
@@ -1407,6 +1424,7 @@ export default memo(withGlobal<OwnProps>(
       threadId,
       isDownloading,
       isPinnedList: messageListType === 'pinned',
+      isPinned: message.isPinned || Boolean(message.forwardInfo?.isLinkedChannelPost),
       canAutoLoadMedia: selectCanAutoLoadMedia(global, message),
       canAutoPlayMedia: selectCanAutoPlayMedia(global, message),
       autoLoadFileMaxSizeMb: global.settings.byKey.autoLoadFileMaxSizeMb,
diff --git a/src/components/middle/message/MessageContextMenu.tsx b/src/components/middle/message/MessageContextMenu.tsx
index ea4f46faf..1d673665d 100644
--- a/src/components/middle/message/MessageContextMenu.tsx
+++ b/src/components/middle/message/MessageContextMenu.tsx
@@ -245,7 +245,7 @@ const MessageContextMenu: FC<OwnProps> = ({
   const getLayout = useCallback(() => {
     const extraHeightAudioPlayer = (isMobile
       && (document.querySelector<HTMLElement>('.AudioPlayer-content'))?.offsetHeight) || 0;
-    const pinnedElement = document.querySelector<HTMLElement>('.HeaderPinnedMessage-wrapper');
+    const pinnedElement = document.querySelector<HTMLElement>('.HeaderPinnedMessageWrapper');
     const extraHeightPinned = (((isMobile && !extraHeightAudioPlayer)
       || (!isMobile && pinnedElement?.classList.contains('full-width')))
       && pinnedElement?.offsetHeight) || 0;
diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss
index 8c932a880..b2b98fc7b 100644
--- a/src/components/middle/message/MessageMeta.scss
+++ b/src/components/middle/message/MessageMeta.scss
@@ -18,7 +18,8 @@
   .message-signature,
   .message-views,
   .message-replies,
-  .message-translated {
+  .message-translated,
+  .message-pinned {
     font-size: 0.75rem;
     white-space: nowrap;
   }
@@ -41,6 +42,10 @@
     margin-inline-end: 0.25rem;
   }
 
+  .message-pinned {
+    margin-inline-end: 0.1875rem;
+  }
+
   .message-imported,
   .message-signature {
     overflow: hidden;
diff --git a/src/components/middle/message/MessageMeta.tsx b/src/components/middle/message/MessageMeta.tsx
index 382a03cb6..a31d818c2 100644
--- a/src/components/middle/message/MessageMeta.tsx
+++ b/src/components/middle/message/MessageMeta.tsx
@@ -28,6 +28,7 @@ type OwnProps = {
   noReplies?: boolean;
   repliesThreadInfo?: ApiThreadInfo;
   isTranslated?: boolean;
+  isPinned?: boolean;
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onTranslationClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onOpenThread: NoneToVoidFunction;
@@ -41,6 +42,7 @@ const MessageMeta: FC<OwnProps> = ({
   repliesThreadInfo,
   noReplies,
   isTranslated,
+  isPinned,
   onClick,
   onTranslationClick,
   onOpenThread,
@@ -113,6 +115,9 @@ const MessageMeta: FC<OwnProps> = ({
           <i className="icon-reply-filled" />
         </span>
       )}
+      {isPinned && (
+        <i className="icon-pinned-message message-pinned" />
+      )}
       {signature && (
         <span className="message-signature">{renderText(signature)}</span>
       )}
diff --git a/src/components/middle/message/hooks/useFocusMessage.ts b/src/components/middle/message/hooks/useFocusMessage.ts
index 1c2d54a01..2b1b0b15e 100644
--- a/src/components/middle/message/hooks/useFocusMessage.ts
+++ b/src/components/middle/message/hooks/useFocusMessage.ts
@@ -1,5 +1,3 @@
-import { getActions } from '../../../../global';
-
 import type { FocusDirection } from '../../../../types';
 
 import { useLayoutEffect } from '../../../../lib/teact/teact';
@@ -17,16 +15,10 @@ export default function useFocusMessage(
   noFocusHighlight?: boolean,
   isResizingContainer?: boolean,
 ) {
-  const { setReachedFocusedMessage } = getActions();
-
   useLayoutEffect(() => {
     if (isFocused && elementRef.current) {
       const messagesContainer = elementRef.current.closest<HTMLDivElement>('.MessageList')!;
 
-      setReachedFocusedMessage({
-        hasReached: true,
-      });
-
       fastSmoothScroll(
         messagesContainer,
         elementRef.current,
@@ -40,6 +32,6 @@ export default function useFocusMessage(
       );
     }
   }, [
-    elementRef, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer, setReachedFocusedMessage,
+    elementRef, chatId, isFocused, focusDirection, noFocusHighlight, isResizingContainer,
   ]);
 }
diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss
index 3e61d029c..d45c6ee1d 100644
--- a/src/components/ui/Transition.scss
+++ b/src/components/ui/Transition.scss
@@ -109,6 +109,78 @@
     }
   }
 
+  /*
+   * slide-vertical
+   */
+
+  &.slide-vertical {
+    > .to {
+      transform: translateY(100%);
+    }
+
+    &.animating {
+      > .from {
+        animation: slide-vertical-out var(--slide-transition);
+      }
+
+      > .to {
+        animation: slide-vertical-in var(--slide-transition);
+      }
+    }
+  }
+
+  &.slide-vertical.backwards {
+    > .to {
+      transform: translateY(-100%);
+    }
+
+    &.animating {
+      > .from {
+        animation: slide-vertical-in-backwards var(--slide-transition);
+      }
+
+      > .to {
+        animation: slide-vertical-out-backwards var(--slide-transition);
+      }
+    }
+  }
+
+  /*
+   * slide-vertical-fade
+   */
+
+  &.slide-vertical-fade {
+    > .to {
+      transform: translateY(100%);
+    }
+
+    &.animating {
+      > .from {
+        animation: slide-vertical-fade-out var(--slide-transition);
+      }
+
+      > .to {
+        animation: slide-vertical-fade-in var(--slide-transition);
+      }
+    }
+  }
+
+  &.slide-vertical-fade.backwards {
+    > .to {
+      transform: translateY(-100%);
+    }
+
+    &.animating {
+      > .from {
+        animation: slide-vertical-fade-in-backwards var(--slide-transition);
+      }
+
+      > .to {
+        animation: slide-vertical-fade-out-backwards var(--slide-transition);
+      }
+    }
+  }
+
   /*
    * mv-slide
    */
@@ -483,6 +555,94 @@
   }
 }
 
+/*
+ * slide-vertical
+ */
+@keyframes slide-vertical-in {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-vertical-out {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-vertical-in-backwards {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slide-vertical-out-backwards {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/*
+ * slide-vertical-fade
+ */
+
+@keyframes slide-vertical-fade-in {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-vertical-fade-out {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-vertical-fade-in-backwards {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-vertical-fade-out-backwards {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+
 /*
  * mv-slide
  */
diff --git a/src/components/ui/Transition.tsx b/src/components/ui/Transition.tsx
index 1eb8e16e0..3056727e0 100644
--- a/src/components/ui/Transition.tsx
+++ b/src/components/ui/Transition.tsx
@@ -20,7 +20,8 @@ export type TransitionProps = {
   activeKey: number;
   name: (
     'none' | 'slide' | 'slide-rtl' | 'mv-slide' | 'slide-fade' | 'zoom-fade' | 'slide-layers'
-    | 'fade' | 'push-slide' | 'reveal' | 'slide-optimized' | 'slide-optimized-rtl'
+    | 'fade' | 'push-slide' | 'reveal' | 'slide-optimized' | 'slide-optimized-rtl' | 'slide-vertical'
+    | 'slide-vertical-fade'
   );
   direction?: 'auto' | 'inverse' | 1 | -1;
   renderCount?: number;
diff --git a/src/global/actions/api/messages.ts b/src/global/actions/api/messages.ts
index 0eb71f7b2..ab67adac0 100644
--- a/src/global/actions/api/messages.ts
+++ b/src/global/actions/api/messages.ts
@@ -15,10 +15,7 @@ import type {
   ApiUser,
   ApiVideo,
 } from '../../../api/types';
-import {
-  MAIN_THREAD_ID,
-  MESSAGE_DELETED,
-} from '../../../api/types';
+import { MAIN_THREAD_ID, MESSAGE_DELETED } from '../../../api/types';
 import { LoadMoreDirection } from '../../../types';
 
 import {
@@ -39,60 +36,62 @@ import {
   areSortedArraysIntersecting, buildCollectionByKey, omit, split, unique,
 } from '../../../util/iteratees';
 import {
-  addUsers,
   addChatMessagesById,
+  addChats,
+  addUsers,
+  removeOutlyingList,
+  removeRequestedMessageTranslation,
+  replaceScheduledMessages,
   replaceThreadParam,
   safeReplaceViewportIds,
-  updateChatMessage,
-  addChats,
-  updateListedIds,
-  updateOutlyingIds,
-  replaceScheduledMessages,
-  updateThreadInfos,
   updateChat,
-  updateThreadUnreadFromForwardedMessage,
-  updateSponsoredMessage,
-  updateTopic,
-  updateThreadInfo,
-  replaceTabThreadParam,
-  updateRequestedMessageTranslation,
-  removeRequestedMessageTranslation,
+  updateChatMessage,
+  updateListedIds,
   updateMessageTranslation,
+  updateOutlyingLists,
+  updateRequestedMessageTranslation,
+  updateSponsoredMessage,
+  updateThreadInfo,
+  updateThreadInfos,
+  updateThreadUnreadFromForwardedMessage,
+  updateTopic,
 } from '../../reducers';
 import {
   selectChat,
   selectChatMessage,
-  selectCurrentMessageList,
-  selectFocusedMessageId,
   selectCurrentChat,
+  selectCurrentMessageList,
+  selectDraft,
+  selectEditingId,
+  selectEditingMessage,
+  selectEditingScheduledId,
+  selectFirstUnreadId,
+  selectFocusedMessageId,
+  selectForwardsCanBeSentToChat,
+  selectForwardsContainVoiceMessages,
+  selectIsCurrentUserPremium,
+  selectLanguageCode,
   selectListedIds,
-  selectOutlyingIds,
-  selectViewportIds,
+  selectNoWebPage,
+  selectOutlyingListByMessageId,
   selectRealLastReadId,
   selectReplyingToId,
-  selectEditingId,
-  selectDraft,
-  selectThreadTopMessageId,
-  selectEditingScheduledId,
-  selectEditingMessage,
   selectScheduledMessage,
-  selectNoWebPage,
-  selectFirstUnreadId,
-  selectUser,
   selectSendAs,
   selectSponsoredMessage,
-  selectIsCurrentUserPremium,
-  selectForwardsContainVoiceMessages,
   selectTabState,
   selectThreadIdFromMessage,
-  selectLanguageCode,
-  selectForwardsCanBeSentToChat,
+  selectThreadTopMessageId,
+  selectUser,
+  selectViewportIds,
 } from '../../selectors';
+import { debounce, onTickEnd, rafPromise } from '../../../util/schedulers';
 import {
-  debounce, onTickEnd, rafPromise,
-} from '../../../util/schedulers';
-import {
-  getMessageOriginalId, getUserFullName, isDeletedUser, isServiceNotificationMessage, isUserBot,
+  getMessageOriginalId,
+  getUserFullName,
+  isDeletedUser,
+  isServiceNotificationMessage,
+  isUserBot,
 } from '../../helpers';
 import { translate } from '../../../util/langProvider';
 import { ensureProtocol } from '../../../util/ensureProtocol';
@@ -109,6 +108,7 @@ addActionHandler('loadViewportMessages', (global, actions, payload): ActionRetur
   const {
     direction = LoadMoreDirection.Around,
     isBudgetPreload = false,
+    shouldForceRender = false,
     tabId = getCurrentTabId(),
   } = payload || {};
 
@@ -117,7 +117,7 @@ addActionHandler('loadViewportMessages', (global, actions, payload): ActionRetur
   if (!chatId || !threadId) {
     const currentMessageList = selectCurrentMessageList(global, tabId);
     if (!currentMessageList) {
-      return undefined;
+      return;
     }
 
     chatId = currentMessageList.chatId;
@@ -127,17 +127,18 @@ addActionHandler('loadViewportMessages', (global, actions, payload): ActionRetur
   const chat = selectChat(global, chatId);
   // TODO Revise if `chat.isRestricted` check is needed
   if (!chat || chat.isRestricted) {
-    return undefined;
+    return;
   }
 
   const viewportIds = selectViewportIds(global, chatId, threadId, tabId);
   const listedIds = selectListedIds(global, chatId, threadId);
-  const outlyingIds = selectOutlyingIds(global, chatId, threadId, tabId);
 
   if (!viewportIds || !viewportIds.length || direction === LoadMoreDirection.Around) {
     const offsetId = selectFocusedMessageId(global, chatId, tabId) || selectRealLastReadId(global, chatId, threadId);
     const isOutlying = Boolean(offsetId && listedIds && !listedIds.includes(offsetId));
-    const historyIds = (isOutlying ? outlyingIds : listedIds) || [];
+    const historyIds = (isOutlying
+      ? selectOutlyingListByMessageId(global, chatId, threadId, offsetId!)
+      : listedIds) || [];
     const {
       newViewportIds, areSomeLocal, areAllLocal,
     } = getViewportSlice(historyIds, offsetId, LoadMoreDirection.Around);
@@ -155,8 +156,9 @@ addActionHandler('loadViewportMessages', (global, actions, payload): ActionRetur
     }
   } else {
     const offsetId = direction === LoadMoreDirection.Backwards ? viewportIds[0] : viewportIds[viewportIds.length - 1];
-    const isOutlying = Boolean(outlyingIds);
-    const historyIds = (isOutlying ? outlyingIds : listedIds)!;
+    const isOutlying = Boolean(listedIds && !listedIds.includes(offsetId));
+    const historyIds = (isOutlying
+      ? selectOutlyingListByMessageId(global, chatId, threadId, offsetId) : listedIds)!;
     const {
       newViewportIds, areSomeLocal, areAllLocal,
     } = getViewportSlice(historyIds, offsetId, direction);
@@ -172,11 +174,11 @@ addActionHandler('loadViewportMessages', (global, actions, payload): ActionRetur
     });
 
     if (isBudgetPreload) {
-      return undefined;
+      return;
     }
   }
 
-  return global;
+  setGlobal(global, { forceOnHeavyAnimation: shouldForceRender });
 });
 
 async function loadWithBudget<T extends GlobalState>(
@@ -580,7 +582,7 @@ addActionHandler('markMessageListRead', (global, actions, payload): ActionReturn
   }
 
   const viewportIds = selectViewportIds(global, chatId, threadId, tabId);
-  const minId = selectFirstUnreadId(global, chatId, threadId, tabId);
+  const minId = selectFirstUnreadId(global, chatId, threadId);
   if (!viewportIds || !minId || !chat.unreadCount) {
     return global;
   }
@@ -975,7 +977,7 @@ async function loadViewportMessages<T extends GlobalState>(
 
   global = addChatMessagesById(global, chatId, byId);
   global = isOutlying
-    ? updateOutlyingIds(global, chatId, threadId, ids, tabId)
+    ? updateOutlyingLists(global, chatId, threadId, ids)
     : updateListedIds(global, chatId, threadId, ids);
 
   global = addUsers(global, buildCollectionByKey(users, 'id'));
@@ -983,19 +985,19 @@ async function loadViewportMessages<T extends GlobalState>(
   global = updateThreadInfos(global, chatId, repliesThreadInfos);
 
   let listedIds = selectListedIds(global, chatId, threadId);
-  const outlyingIds = selectOutlyingIds(global, chatId, threadId, tabId);
+  const outlyingList = offsetId ? selectOutlyingListByMessageId(global, chatId, threadId, offsetId) : undefined;
 
-  if (isOutlying && listedIds && outlyingIds) {
-    if (!outlyingIds.length || areSortedArraysIntersecting(listedIds, outlyingIds)) {
-      global = updateListedIds(global, chatId, threadId, outlyingIds);
+  if (isOutlying && listedIds && outlyingList) {
+    if (!outlyingList.length || areSortedArraysIntersecting(listedIds, outlyingList)) {
+      global = updateListedIds(global, chatId, threadId, outlyingList);
       listedIds = selectListedIds(global, chatId, threadId);
-      global = replaceTabThreadParam(global, chatId, threadId, 'outlyingIds', undefined, tabId);
+      global = removeOutlyingList(global, chatId, threadId, outlyingList);
       isOutlying = false;
     }
   }
 
   if (!isBudgetPreload) {
-    const historyIds = isOutlying ? outlyingIds! : listedIds!;
+    const historyIds = isOutlying ? outlyingList! : listedIds!;
     const { newViewportIds } = getViewportSlice(historyIds, offsetId, direction);
     global = safeReplaceViewportIds(global, chatId, threadId, newViewportIds!, tabId);
   }
@@ -1056,9 +1058,11 @@ function getViewportSlice(
   const { length } = sourceIds;
   const index = offsetId ? findClosestIndex(sourceIds, offsetId) : -1;
   const isBackwards = direction === LoadMoreDirection.Backwards;
+  const isAround = direction === LoadMoreDirection.Around;
   const indexForDirection = isBackwards ? index : (index + 1) || length;
-  const from = indexForDirection - MESSAGE_LIST_SLICE;
-  const to = indexForDirection + MESSAGE_LIST_SLICE - 1;
+  const sliceSize = isAround ? Math.round(MESSAGE_LIST_SLICE / 2) : MESSAGE_LIST_SLICE;
+  const from = indexForDirection - sliceSize;
+  const to = indexForDirection + sliceSize - 1;
   const newViewportIds = sourceIds.slice(Math.max(0, from), to + 1);
 
   let areSomeLocal;
diff --git a/src/global/actions/apiUpdaters/messages.ts b/src/global/actions/apiUpdaters/messages.ts
index af33af711..415b5f115 100644
--- a/src/global/actions/apiUpdaters/messages.ts
+++ b/src/global/actions/apiUpdaters/messages.ts
@@ -324,6 +324,9 @@ addActionHandler('apiUpdate', (global, actions, update): ActionReturnType => {
       };
       Object.values(messages).forEach((message) => {
         const threadId = selectThreadIdFromMessage(global, message);
+        global = updateChatMessage(global, chatId, message.id, {
+          isPinned,
+        });
         if (threadId === MAIN_THREAD_ID) return;
         const currentUpdatedInThread = updatePerThread[threadId] || [];
         currentUpdatedInThread.push(message.id);
@@ -818,7 +821,7 @@ function updateListedAndViewportIds<T extends GlobalState>(
   Object.values(global.byTabId).forEach(({ id: tabId }) => {
     if (selectIsViewportNewest(global, chatId, MAIN_THREAD_ID, tabId)) {
       // Always keep the first unread message in the viewport list
-      const firstUnreadId = selectFirstUnreadId(global, chatId, MAIN_THREAD_ID, tabId);
+      const firstUnreadId = selectFirstUnreadId(global, chatId, MAIN_THREAD_ID);
       const candidateGlobal = addViewportId(global, chatId, MAIN_THREAD_ID, id, tabId);
       const newViewportIds = selectViewportIds(candidateGlobal, chatId, MAIN_THREAD_ID, tabId);
 
diff --git a/src/global/actions/ui/messages.ts b/src/global/actions/ui/messages.ts
index 51d40b194..07e7fb5c4 100644
--- a/src/global/actions/ui/messages.ts
+++ b/src/global/actions/ui/messages.ts
@@ -22,7 +22,7 @@ import {
   replaceThreadParam,
   replaceTabThreadParam,
   updateFocusDirection,
-  updateFocusedMessage, updateFocusedMessageReached,
+  updateFocusedMessage,
 } from '../../reducers';
 import {
   selectCurrentChat,
@@ -381,12 +381,6 @@ addActionHandler('focusNextReply', (global, actions, payload): ActionReturnType
   return undefined;
 });
 
-addActionHandler('setReachedFocusedMessage', (global, actions, payload): ActionReturnType => {
-  const { hasReached = false, tabId = getCurrentTabId() } = payload;
-
-  return updateFocusedMessageReached(global, hasReached, tabId);
-});
-
 addActionHandler('focusMessage', (global, actions, payload): ActionReturnType => {
   const {
     chatId, threadId = MAIN_THREAD_ID, messageListType = 'thread', noHighlight, groupedId, groupedChatId,
@@ -435,7 +429,7 @@ addActionHandler('focusMessage', (global, actions, payload): ActionReturnType =>
 
   const viewportIds = selectViewportIds(global, chatId, threadId, tabId);
   if (viewportIds && viewportIds.includes(messageId)) {
-    setGlobal(global);
+    setGlobal(global, { forceOnHeavyAnimation: true });
     actions.openChat({
       id: chatId,
       threadId,
@@ -450,14 +444,12 @@ addActionHandler('focusMessage', (global, actions, payload): ActionReturnType =>
     global = replaceTabThreadParam(global, chatId, threadId, 'viewportIds', undefined, tabId);
   }
 
-  global = replaceTabThreadParam(global, chatId, threadId, 'outlyingIds', undefined, tabId);
-
   if (viewportIds && !shouldSwitchChat) {
     const direction = messageId > viewportIds[0] ? FocusDirection.Down : FocusDirection.Up;
     global = updateFocusDirection(global, direction, tabId);
   }
 
-  setGlobal(global);
+  setGlobal(global, { forceOnHeavyAnimation: true });
 
   actions.openChat({
     id: chatId,
@@ -468,6 +460,7 @@ addActionHandler('focusMessage', (global, actions, payload): ActionReturnType =>
   });
   actions.loadViewportMessages({
     tabId,
+    shouldForceRender: true,
   });
   return undefined;
 });
diff --git a/src/global/cache.ts b/src/global/cache.ts
index 699c20f5d..b53abad4a 100644
--- a/src/global/cache.ts
+++ b/src/global/cache.ts
@@ -490,6 +490,7 @@ function reduceMessages<T extends GlobalState>(global: T): GlobalState['messages
       acc[Number(key)] = {
         ...t,
         listedIds: t.lastViewportIds,
+        pinnedIds: undefined,
       };
       return acc;
     }, {} as GlobalState['messages']['byChatId'][string]['threadsById']);
diff --git a/src/global/reducers/messages.ts b/src/global/reducers/messages.ts
index 9868b9053..4d293ba41 100644
--- a/src/global/reducers/messages.ts
+++ b/src/global/reducers/messages.ts
@@ -15,7 +15,6 @@ import {
   selectListedIds,
   selectChatMessages,
   selectViewportIds,
-  selectOutlyingIds,
   selectPinnedIds,
   selectThreadInfo,
   selectMessageIdsByGroupId,
@@ -25,10 +24,10 @@ import {
   selectChatMessage,
   selectCurrentMessageList,
   selectChat,
-  selectTabState,
+  selectTabState, selectOutlyingLists,
 } from '../selectors';
 import {
-  areSortedArraysEqual, omit, pickTruthy, unique,
+  areSortedArraysEqual, mergeIdRanges, omit, orderHistoryIds, pickTruthy, unique,
 } from '../../util/iteratees';
 import { updateTabState } from './tabs';
 import { getCurrentTabId } from '../../util/establishMultitabRole';
@@ -252,6 +251,7 @@ export function deleteChatMessages<T extends GlobalState>(
 
     let listedIds = selectListedIds(global, chatId, threadId);
     let pinnedIds = selectPinnedIds(global, chatId, threadId);
+    let outlyingLists = selectOutlyingLists(global, chatId, threadId);
     let mainPinnedIds = selectPinnedIds(global, chatId, MAIN_THREAD_ID);
     let newMessageCount = threadInfo?.messagesCount;
 
@@ -261,6 +261,11 @@ export function deleteChatMessages<T extends GlobalState>(
         if (newMessageCount !== undefined && !isLocalMessageId(messageId)) newMessageCount -= 1;
       }
 
+      outlyingLists = outlyingLists?.map((list) => {
+        if (!list.includes(messageId)) return list;
+        return list.filter((id) => id !== messageId);
+      });
+
       if (pinnedIds?.includes(messageId)) {
         pinnedIds = pinnedIds.filter((id) => id !== messageId);
       }
@@ -271,24 +276,19 @@ export function deleteChatMessages<T extends GlobalState>(
     });
 
     Object.values(global.byTabId).forEach(({ id: tabId }) => {
-      let outlyingIds = selectOutlyingIds(global, chatId, threadId, tabId);
       let viewportIds = selectViewportIds(global, chatId, threadId, tabId);
 
       messageIds.forEach((messageId) => {
-        if (outlyingIds?.includes(messageId)) {
-          outlyingIds = outlyingIds.filter((id) => id !== messageId);
-        }
-
         if (viewportIds?.includes(messageId)) {
           viewportIds = viewportIds.filter((id) => id !== messageId);
         }
       });
 
-      global = replaceTabThreadParam(global, chatId, threadId, 'outlyingIds', outlyingIds, tabId);
       global = replaceTabThreadParam(global, chatId, threadId, 'viewportIds', viewportIds, tabId);
     });
 
     global = replaceThreadParam(global, chatId, threadId, 'listedIds', listedIds);
+    global = replaceThreadParam(global, chatId, threadId, 'outlyingLists', outlyingLists);
     global = replaceThreadParam(global, chatId, threadId, 'pinnedIds', pinnedIds);
     global = replaceThreadParam(global, chatId, MAIN_THREAD_ID, 'pinnedIds', mainPinnedIds);
 
@@ -379,30 +379,35 @@ export function updateListedIds<T extends GlobalState>(
   ]));
 }
 
-export function updateOutlyingIds<T extends GlobalState>(
+export function removeOutlyingList<T extends GlobalState>(
+  global: T,
+  chatId: string,
+  threadId: number,
+  list: number[],
+): T {
+  const outlyingLists = selectOutlyingLists(global, chatId, threadId);
+  if (!outlyingLists) {
+    return global;
+  }
+
+  const newOutlyingLists = outlyingLists.filter((l) => l !== list);
+
+  return replaceThreadParam(global, chatId, threadId, 'outlyingLists', newOutlyingLists);
+}
+
+export function updateOutlyingLists<T extends GlobalState>(
   global: T,
   chatId: string,
   threadId: number,
   idsUpdate: number[],
-  ...[tabId = getCurrentTabId()]: TabArgs<T>
 ): T {
-  const outlyingIds = selectOutlyingIds(global, chatId, threadId, tabId);
-  const newIds = outlyingIds?.length
-    ? idsUpdate.filter((id) => !outlyingIds.includes(id))
-    : idsUpdate;
+  if (!idsUpdate.length) return global;
 
-  if (outlyingIds && !newIds.length) {
-    return global;
-  }
+  const outlyingLists = selectOutlyingLists(global, chatId, threadId);
 
-  return replaceTabThreadParam(global, chatId, threadId, 'outlyingIds', orderHistoryIds([
-    ...(outlyingIds || []),
-    ...newIds,
-  ]), tabId);
-}
+  const newOutlyingLists = mergeIdRanges(outlyingLists || [], idsUpdate);
 
-function orderHistoryIds(listedIds: number[]) {
-  return listedIds.sort((a, b) => a - b);
+  return replaceThreadParam(global, chatId, threadId, 'outlyingLists', newOutlyingLists);
 }
 
 export function addViewportId<T extends GlobalState>(
@@ -518,22 +523,6 @@ export function updateFocusedMessage<T extends GlobalState>(
   }, tabId);
 }
 
-export function updateFocusedMessageReached<T extends GlobalState>(
-  global: T, hasReachedMessage: boolean,
-  ...[tabId = getCurrentTabId()]: TabArgs<T>
-): T {
-  const focusedMessage = selectTabState(global, tabId).focusedMessage;
-
-  if (!focusedMessage) return global;
-
-  return updateTabState(global, {
-    focusedMessage: {
-      ...focusedMessage,
-      hasReachedMessage,
-    },
-  }, tabId);
-}
-
 export function updateSponsoredMessage<T extends GlobalState>(
   global: T, chatId: string, message: ApiSponsoredMessage,
 ): T {
diff --git a/src/global/selectors/messages.ts b/src/global/selectors/messages.ts
index 80f1e82cf..c16f7d599 100644
--- a/src/global/selectors/messages.ts
+++ b/src/global/selectors/messages.ts
@@ -126,10 +126,23 @@ export function selectListedIds<T extends GlobalState>(global: T, chatId: string
   return selectThreadParam(global, chatId, threadId, 'listedIds');
 }
 
-export function selectOutlyingIds<T extends GlobalState>(
-  global: T, chatId: string, threadId: number, ...[tabId = getCurrentTabId()]: TabArgs<T>
+export function selectOutlyingListByMessageId<T extends GlobalState>(
+  global: T, chatId: string, threadId: number, messageId: number,
 ) {
-  return selectTabThreadParam(global, chatId, threadId, 'outlyingIds', tabId);
+  const outlyingLists = selectOutlyingLists(global, chatId, threadId);
+  if (!outlyingLists) {
+    return undefined;
+  }
+
+  return outlyingLists.find((list) => {
+    return list[0] <= messageId && list[list.length - 1] >= messageId;
+  });
+}
+
+export function selectOutlyingLists<T extends GlobalState>(
+  global: T, chatId: string, threadId: number,
+) {
+  return selectThreadParam(global, chatId, threadId, 'outlyingLists');
 }
 
 export function selectCurrentMessageIds<T extends GlobalState>(
@@ -764,7 +777,6 @@ export function selectRealLastReadId<T extends GlobalState>(global: T, chatId: s
 
 export function selectFirstUnreadId<T extends GlobalState>(
   global: T, chatId: string, threadId: number,
-  ...[tabId = getCurrentTabId()]: TabArgs<T>
 ) {
   const chat = selectChat(global, chatId);
 
@@ -780,10 +792,10 @@ export function selectFirstUnreadId<T extends GlobalState>(
     }
   }
 
-  const outlyingIds = selectOutlyingIds(global, chatId, threadId, tabId);
+  const outlyingLists = selectOutlyingLists(global, chatId, threadId);
   const listedIds = selectListedIds(global, chatId, threadId);
   const byId = selectChatMessages(global, chatId);
-  if (!byId || !(outlyingIds || listedIds)) {
+  if (!byId || !(outlyingLists?.length || listedIds)) {
     return undefined;
   }
 
@@ -811,8 +823,8 @@ export function selectFirstUnreadId<T extends GlobalState>(
     });
   }
 
-  if (outlyingIds) {
-    const found = findAfterLastReadId(outlyingIds);
+  if (outlyingLists?.length) {
+    const found = outlyingLists.map((list) => findAfterLastReadId(list)).filter(Boolean)[0];
     if (found) {
       return found;
     }
diff --git a/src/global/types.ts b/src/global/types.ts
index 3e066a532..9bc4ebf5b 100644
--- a/src/global/types.ts
+++ b/src/global/types.ts
@@ -121,7 +121,6 @@ export interface ActiveReaction {
 export interface TabThread {
   scrollOffset?: number;
   replyStack?: number[];
-  outlyingIds?: number[];
   viewportIds?: number[];
 }
 
@@ -129,6 +128,7 @@ export interface Thread {
   lastScrollOffset?: number;
   lastViewportIds?: number[];
   listedIds?: number[];
+  outlyingLists?: number[][];
   pinnedIds?: number[];
   scheduledIds?: number[];
   editingId?: number;
@@ -228,7 +228,6 @@ export type TabState = {
     direction?: FocusDirection;
     noHighlight?: boolean;
     isResizingContainer?: boolean;
-    hasReachedMessage?: boolean;
   };
 
   selectedMessages?: {
@@ -1127,6 +1126,7 @@ export interface ActionPayloads {
     isBudgetPreload?: boolean;
     chatId?: string;
     threadId?: number;
+    shouldForceRender?: boolean;
   } & WithTabId;
   sendMessage: {
     text?: string;
@@ -1497,9 +1497,6 @@ export interface ActionPayloads {
   showDialog: {
     data: TabState['dialogs'][number];
   } & WithTabId;
-  setReachedFocusedMessage: {
-    hasReached?: boolean;
-  } & WithTabId;
   focusMessage: {
     chatId: string;
     threadId?: number;
diff --git a/src/lib/teact/teactn.tsx b/src/lib/teact/teactn.tsx
index f0da4eda4..ecfcff61a 100644
--- a/src/lib/teact/teactn.tsx
+++ b/src/lib/teact/teactn.tsx
@@ -66,12 +66,16 @@ const containers = new Map<string, {
 
 const runCallbacksThrottled = throttleWithTickEnd(runCallbacks);
 
+let forceOnHeavyAnimation = true;
+
 function runImmediateCallbacks() {
   immediateCallbacks.forEach((cb) => cb(currentGlobal));
 }
 
-function runCallbacks(forceOnHeavyAnimation = false) {
-  if (!forceOnHeavyAnimation && isHeavyAnimating()) {
+function runCallbacks() {
+  if (forceOnHeavyAnimation) {
+    forceOnHeavyAnimation = false;
+  } else if (isHeavyAnimating()) {
     fastRafWithFallback(runCallbacksThrottled);
     return;
   }
@@ -94,9 +98,14 @@ export function setGlobal(newGlobal?: GlobalState, options?: ActionOptions) {
     if (!options?.noUpdate) runImmediateCallbacks();
 
     if (options?.forceSyncOnIOs) {
-      runCallbacks(true);
+      forceOnHeavyAnimation = true;
+      runCallbacks();
     } else {
-      runCallbacksThrottled(options?.forceOnHeavyAnimation);
+      if (options?.forceOnHeavyAnimation) {
+        forceOnHeavyAnimation = true;
+      }
+
+      runCallbacksThrottled();
     }
   }
 }
diff --git a/src/styles/Telegram T.json b/src/styles/Telegram T.json
index fcf3798a3..1d17ab910 100644
--- a/src/styles/Telegram T.json	
+++ b/src/styles/Telegram T.json	
@@ -2,7 +2,7 @@
   "metadata": {
     "name": "Telegram T",
     "lastOpened": 0,
-    "created": 1675856733901
+    "created": 1677680759246
   },
   "iconSets": [
     {
@@ -157,13 +157,21 @@
     },
     {
       "selection": [
+        {
+          "order": 760,
+          "id": 91,
+          "name": "pinned-message",
+          "prevSize": 32,
+          "code": 59839,
+          "tempChar": ""
+        },
         {
           "order": 759,
           "id": 90,
           "name": "archive-filled",
           "prevSize": 32,
           "code": 59834,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 758,
@@ -171,7 +179,7 @@
           "name": "archive-from-main",
           "prevSize": 32,
           "code": 59835,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 757,
@@ -179,7 +187,7 @@
           "name": "archive-to-main",
           "prevSize": 32,
           "code": 59836,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 756,
@@ -187,7 +195,7 @@
           "name": "collapse",
           "prevSize": 32,
           "code": 59837,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 755,
@@ -195,7 +203,7 @@
           "name": "expand",
           "prevSize": 32,
           "code": 59838,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 754,
@@ -203,7 +211,7 @@
           "name": "replies",
           "prevSize": 32,
           "code": 59833,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 746,
@@ -211,7 +219,7 @@
           "name": "forums",
           "prevSize": 32,
           "code": 59828,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 743,
@@ -219,7 +227,7 @@
           "name": "hashtag",
           "prevSize": 32,
           "code": 59825,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 744,
@@ -227,7 +235,7 @@
           "name": "reopen-topic",
           "prevSize": 32,
           "code": 59826,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 745,
@@ -235,7 +243,7 @@
           "name": "close-topic",
           "prevSize": 32,
           "code": 59827,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 739,
@@ -243,7 +251,7 @@
           "name": "open-in-new-tab",
           "prevSize": 32,
           "code": 59823,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 738,
@@ -251,7 +259,7 @@
           "name": "pip",
           "prevSize": 32,
           "code": 59822,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 737,
@@ -259,7 +267,7 @@
           "name": "gift",
           "prevSize": 32,
           "code": 59821,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 734,
@@ -267,7 +275,7 @@
           "name": "sort",
           "prevSize": 32,
           "code": 59820,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 732,
@@ -275,7 +283,7 @@
           "name": "web",
           "prevSize": 32,
           "code": 59819,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 731,
@@ -283,7 +291,7 @@
           "name": "transcribe",
           "prevSize": 32,
           "code": 59818,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 719,
@@ -291,7 +299,7 @@
           "name": "add-one-badge",
           "prevSize": 32,
           "code": 59803,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 720,
@@ -299,7 +307,7 @@
           "name": "chat-badge",
           "prevSize": 32,
           "code": 59808,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 721,
@@ -307,7 +315,7 @@
           "name": "chats-badge",
           "prevSize": 32,
           "code": 59809,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 722,
@@ -315,7 +323,7 @@
           "name": "double-badge",
           "prevSize": 32,
           "code": 59810,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 723,
@@ -323,7 +331,7 @@
           "name": "file-badge",
           "prevSize": 32,
           "code": 59811,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 724,
@@ -331,7 +339,7 @@
           "name": "folder-badge",
           "prevSize": 32,
           "code": 59812,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 726,
@@ -339,7 +347,7 @@
           "name": "link-badge",
           "prevSize": 32,
           "code": 59813,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 725,
@@ -347,7 +355,7 @@
           "name": "pin-badge",
           "prevSize": 32,
           "code": 59814,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 727,
@@ -355,7 +363,7 @@
           "name": "premium",
           "prevSize": 32,
           "code": 59815,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 728,
@@ -363,7 +371,7 @@
           "name": "unlock-badge",
           "prevSize": 32,
           "code": 59816,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 729,
@@ -371,7 +379,7 @@
           "name": "lock-badge",
           "prevSize": 32,
           "code": 59817,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 715,
@@ -379,7 +387,7 @@
           "name": "key",
           "prevSize": 32,
           "code": 59802,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 714,
@@ -387,7 +395,7 @@
           "name": "heart-outline",
           "prevSize": 32,
           "code": 59806,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 713,
@@ -395,7 +403,7 @@
           "name": "heart",
           "prevSize": 32,
           "code": 59807,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 712,
@@ -403,7 +411,7 @@
           "name": "word-wrap",
           "prevSize": 32,
           "code": 59805,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 708,
@@ -411,7 +419,7 @@
           "name": "webapp",
           "prevSize": 32,
           "code": 59795,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 707,
@@ -419,7 +427,7 @@
           "name": "reload",
           "prevSize": 32,
           "code": 59796,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 706,
@@ -427,7 +435,7 @@
           "name": "install",
           "prevSize": 32,
           "code": 59801,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 705,
@@ -435,7 +443,7 @@
           "name": "favorite-filled",
           "prevSize": 32,
           "code": 59800,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 702,
@@ -443,7 +451,7 @@
           "name": "share-screen",
           "prevSize": 32,
           "code": 59770,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 701,
@@ -451,7 +459,7 @@
           "name": "video-outlined",
           "prevSize": 32,
           "code": 59799,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 700,
@@ -459,7 +467,7 @@
           "name": "stats",
           "prevSize": 32,
           "code": 59798,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 699,
@@ -467,7 +475,7 @@
           "name": "copy-media",
           "prevSize": 32,
           "code": 59797,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 704,
@@ -475,7 +483,7 @@
           "name": "sidebar",
           "prevSize": 32,
           "code": 59794,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 690,
@@ -483,7 +491,7 @@
           "name": "video-stop",
           "prevSize": 32,
           "code": 59787,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 678,
@@ -491,7 +499,7 @@
           "name": "speaker",
           "prevSize": 32,
           "code": 59777,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 679,
@@ -499,7 +507,7 @@
           "name": "speaker-outline",
           "prevSize": 32,
           "code": 59778,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 680,
@@ -507,7 +515,7 @@
           "name": "phone-discard-outline",
           "prevSize": 32,
           "code": 59779,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 681,
@@ -515,7 +523,7 @@
           "name": "allow-speak",
           "prevSize": 32,
           "code": 59780,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 682,
@@ -523,7 +531,7 @@
           "name": "stop-raising-hand",
           "prevSize": 32,
           "code": 59781,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 683,
@@ -531,7 +539,7 @@
           "name": "share-screen-outlined",
           "prevSize": 32,
           "code": 59782,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 684,
@@ -539,7 +547,7 @@
           "name": "voice-chat",
           "prevSize": 32,
           "code": 59783,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 689,
@@ -547,7 +555,7 @@
           "name": "video",
           "prevSize": 32,
           "code": 59784,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 686,
@@ -555,7 +563,7 @@
           "name": "noise-suppression",
           "prevSize": 32,
           "code": 59785,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 703,
@@ -563,7 +571,7 @@
           "name": "phone-discard",
           "prevSize": 32,
           "code": 59786,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 667,
@@ -571,7 +579,7 @@
           "name": "bot-commands-filled",
           "prevSize": 32,
           "code": 59775,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 664,
@@ -579,7 +587,7 @@
           "name": "reply-filled",
           "prevSize": 32,
           "code": 59776,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 656,
@@ -587,7 +595,7 @@
           "name": "bug",
           "prevSize": 32,
           "code": 59774,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 619,
@@ -595,7 +603,7 @@
           "name": "data",
           "prevSize": 32,
           "code": 59773,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 622,
@@ -603,7 +611,7 @@
           "name": "darkmode",
           "prevSize": 32,
           "code": 59769,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 711,
@@ -611,7 +619,7 @@
           "name": "animations",
           "prevSize": 32,
           "code": 59804,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 626,
@@ -619,7 +627,7 @@
           "name": "enter",
           "prevSize": 32,
           "code": 59771,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 627,
@@ -627,7 +635,7 @@
           "name": "fontsize",
           "prevSize": 32,
           "code": 59772,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 630,
@@ -635,7 +643,7 @@
           "name": "permissions",
           "prevSize": 32,
           "code": 59766,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 631,
@@ -643,7 +651,7 @@
           "name": "card",
           "prevSize": 32,
           "code": 59767,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 634,
@@ -651,7 +659,7 @@
           "name": "truck",
           "prevSize": 32,
           "code": 59768,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 663,
@@ -659,7 +667,7 @@
           "name": "share-filled",
           "prevSize": 32,
           "code": 59738,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 638,
@@ -667,7 +675,7 @@
           "name": "bold",
           "prevSize": 32,
           "code": 59745,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 639,
@@ -675,7 +683,7 @@
           "name": "bot-command",
           "prevSize": 32,
           "code": 59746,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 642,
@@ -683,7 +691,7 @@
           "name": "calendar-filter",
           "prevSize": 32,
           "code": 59747,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 643,
@@ -691,7 +699,7 @@
           "name": "comments",
           "prevSize": 32,
           "code": 59748,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 645,
@@ -699,7 +707,7 @@
           "name": "comments-sticker",
           "prevSize": 32,
           "code": 59749,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 646,
@@ -707,7 +715,7 @@
           "name": "arrow-down",
           "prevSize": 32,
           "code": 59750,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 668,
@@ -715,7 +723,7 @@
           "name": "email",
           "prevSize": 32,
           "code": 59751,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 648,
@@ -723,7 +731,7 @@
           "name": "italic",
           "prevSize": 32,
           "code": 59752,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 620,
@@ -731,7 +739,7 @@
           "name": "link",
           "prevSize": 32,
           "code": 59753,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 742,
@@ -739,7 +747,7 @@
           "name": "link-broken",
           "prevSize": 32,
           "code": 59824,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 621,
@@ -747,7 +755,7 @@
           "name": "mention",
           "prevSize": 32,
           "code": 59754,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 624,
@@ -755,7 +763,7 @@
           "name": "monospace",
           "prevSize": 32,
           "code": 59755,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 625,
@@ -763,7 +771,7 @@
           "name": "next",
           "prevSize": 32,
           "code": 59756,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 628,
@@ -771,7 +779,7 @@
           "name": "password-off",
           "prevSize": 32,
           "code": 59757,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 629,
@@ -779,7 +787,7 @@
           "name": "pin-list",
           "prevSize": 32,
           "code": 59758,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 632,
@@ -787,7 +795,7 @@
           "name": "previous",
           "prevSize": 32,
           "code": 59759,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 633,
@@ -795,7 +803,7 @@
           "name": "replace",
           "prevSize": 32,
           "code": 59760,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 636,
@@ -803,7 +811,7 @@
           "name": "schedule",
           "prevSize": 32,
           "code": 59761,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 691,
@@ -811,7 +819,7 @@
           "name": "strikethrough",
           "prevSize": 32,
           "code": 59762,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 692,
@@ -819,7 +827,7 @@
           "name": "underlined",
           "prevSize": 32,
           "code": 59763,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 641,
@@ -827,7 +835,7 @@
           "name": "zoom-in",
           "prevSize": 32,
           "code": 59764,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 649,
@@ -835,7 +843,7 @@
           "name": "zoom-out",
           "prevSize": 32,
           "code": 59765,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 2,
@@ -849,6 +857,21 @@
       "height": 1024,
       "prevSize": 32,
       "icons": [
+        {
+          "id": 91,
+          "paths": [
+            "M904.267 441.333c-6.8 6.8-14.4 12.667-22.533 17.6l-122.533 73.467c16.267 97.333-23.333 193.333-113.867 284-20.8 20.8-54.4 20.8-75.2 0l-143.733-143.733-207.733 207.733c-19.067 19.067-48.933 20.667-69.733 4.8l-5.467-4.8c-19.067-19.067-20.667-48.933-4.8-69.733l4.8-5.467 207.733-207.733-143.6-143.6c-20.8-20.8-20.8-54.4 0-75.2 86.133-86.133 177.067-126.133 269.333-115.867l14.533 2 73.6-122.533c33.333-55.467 105.333-73.467 160.8-40.267 8.267 4.933 15.867 10.8 22.533 17.6l155.867 155.867c45.867 45.867 45.867 120 0 165.867z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "grid": 24,
+          "tags": [
+            "pinned-message"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false
+        },
         {
           "id": 90,
           "paths": [
@@ -3856,7 +3879,7 @@
           "name": "spoiler-disable",
           "prevSize": 32,
           "code": 59829,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 752,
@@ -3864,7 +3887,7 @@
           "name": "grouped",
           "prevSize": 32,
           "code": 59830,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 751,
@@ -3872,7 +3895,7 @@
           "name": "grouped-disable",
           "prevSize": 32,
           "code": 59831,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 749,
@@ -3880,7 +3903,7 @@
           "name": "spoiler",
           "prevSize": 32,
           "code": 59832,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 576,
@@ -3888,7 +3911,7 @@
           "name": "select",
           "prevSize": 32,
           "code": 59744,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 480,
@@ -3896,7 +3919,7 @@
           "name": "folder",
           "prevSize": 32,
           "code": 59667,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 481,
@@ -3904,7 +3927,7 @@
           "name": "bots",
           "prevSize": 32,
           "code": 59669,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 482,
@@ -3912,7 +3935,7 @@
           "name": "calendar",
           "prevSize": 32,
           "code": 59670,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 483,
@@ -3920,7 +3943,7 @@
           "name": "cloud-download",
           "prevSize": 32,
           "code": 59671,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 484,
@@ -3928,7 +3951,7 @@
           "name": "colorize",
           "prevSize": 32,
           "code": 59672,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 651,
@@ -3936,7 +3959,7 @@
           "name": "forward",
           "prevSize": 32,
           "code": 59687,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 650,
@@ -3944,7 +3967,7 @@
           "name": "reply",
           "prevSize": 32,
           "code": 59719,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 487,
@@ -3952,7 +3975,7 @@
           "name": "help",
           "prevSize": 32,
           "code": 59690,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 488,
@@ -3960,7 +3983,7 @@
           "name": "info",
           "prevSize": 32,
           "code": 59691,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 489,
@@ -3968,7 +3991,7 @@
           "name": "info-filled",
           "prevSize": 32,
           "code": 59675,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 490,
@@ -3976,7 +3999,7 @@
           "name": "delete-filled",
           "prevSize": 32,
           "code": 59676,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 491,
@@ -3984,7 +4007,7 @@
           "name": "delete",
           "prevSize": 32,
           "code": 59677,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 492,
@@ -3992,7 +4015,7 @@
           "name": "edit",
           "prevSize": 32,
           "code": 59683,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 493,
@@ -4000,7 +4023,7 @@
           "name": "new-chat-filled",
           "prevSize": 32,
           "code": 59705,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 494,
@@ -4008,7 +4031,7 @@
           "name": "send",
           "prevSize": 32,
           "code": 59722,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 495,
@@ -4016,7 +4039,7 @@
           "name": "send-outline",
           "prevSize": 32,
           "code": 59723,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 496,
@@ -4024,7 +4047,7 @@
           "name": "add-user-filled",
           "prevSize": 32,
           "code": 59652,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 497,
@@ -4032,7 +4055,7 @@
           "name": "add-user",
           "prevSize": 32,
           "code": 59653,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 498,
@@ -4040,7 +4063,7 @@
           "name": "delete-user",
           "prevSize": 32,
           "code": 59678,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 499,
@@ -4048,7 +4071,7 @@
           "name": "microphone",
           "prevSize": 32,
           "code": 59701,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 500,
@@ -4056,7 +4079,7 @@
           "name": "microphone-alt",
           "prevSize": 32,
           "code": 59707,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 501,
@@ -4064,7 +4087,7 @@
           "name": "poll",
           "prevSize": 32,
           "code": 59704,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 502,
@@ -4072,7 +4095,7 @@
           "name": "revote",
           "prevSize": 32,
           "code": 59706,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 503,
@@ -4080,7 +4103,7 @@
           "name": "photo",
           "prevSize": 32,
           "code": 59712,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 748,
@@ -4088,7 +4111,7 @@
           "name": "document",
           "prevSize": 32,
           "code": 59679,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 505,
@@ -4096,7 +4119,7 @@
           "name": "camera",
           "prevSize": 32,
           "code": 59662,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 506,
@@ -4104,7 +4127,7 @@
           "name": "camera-add",
           "prevSize": 32,
           "code": 59663,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 507,
@@ -4112,7 +4135,7 @@
           "name": "logout",
           "prevSize": 32,
           "code": 59698,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 508,
@@ -4120,7 +4143,7 @@
           "name": "saved-messages",
           "prevSize": 32,
           "code": 59720,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 509,
@@ -4128,7 +4151,7 @@
           "name": "settings",
           "prevSize": 32,
           "code": 59726,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 652,
@@ -4136,7 +4159,7 @@
           "name": "phone",
           "prevSize": 32,
           "code": 59711,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 653,
@@ -4144,7 +4167,7 @@
           "name": "attach",
           "prevSize": 32,
           "code": 59657,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 512,
@@ -4152,7 +4175,7 @@
           "name": "copy",
           "prevSize": 32,
           "code": 59674,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 513,
@@ -4160,7 +4183,7 @@
           "name": "channel",
           "prevSize": 32,
           "code": 59665,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 514,
@@ -4168,7 +4191,7 @@
           "name": "group",
           "prevSize": 32,
           "code": 59689,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 515,
@@ -4176,7 +4199,7 @@
           "name": "user",
           "prevSize": 32,
           "code": 59737,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 516,
@@ -4184,7 +4207,7 @@
           "name": "non-contacts",
           "prevSize": 32,
           "code": 59688,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 517,
@@ -4192,7 +4215,7 @@
           "name": "active-sessions",
           "prevSize": 32,
           "code": 59650,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 518,
@@ -4200,7 +4223,7 @@
           "name": "admin",
           "prevSize": 32,
           "code": 59654,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 519,
@@ -4208,7 +4231,7 @@
           "name": "download",
           "prevSize": 32,
           "code": 59681,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 520,
@@ -4216,7 +4239,7 @@
           "name": "location",
           "prevSize": 32,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 521,
@@ -4224,7 +4247,7 @@
           "name": "stop",
           "prevSize": 32,
           "code": 59730,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 523,
@@ -4232,7 +4255,7 @@
           "name": "archive",
           "prevSize": 32,
           "code": 59656,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 524,
@@ -4240,7 +4263,7 @@
           "name": "unarchive",
           "prevSize": 32,
           "code": 59731,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 525,
@@ -4248,7 +4271,7 @@
           "name": "readchats",
           "prevSize": 32,
           "code": 59699,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 526,
@@ -4256,7 +4279,7 @@
           "name": "unread",
           "prevSize": 32,
           "code": 59735,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 654,
@@ -4264,7 +4287,7 @@
           "name": "message",
           "prevSize": 32,
           "code": 59700,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 659,
@@ -4272,7 +4295,7 @@
           "name": "lock",
           "prevSize": 32,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 529,
@@ -4280,7 +4303,7 @@
           "name": "unlock",
           "prevSize": 32,
           "code": 59732,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 530,
@@ -4288,7 +4311,7 @@
           "name": "mute",
           "prevSize": 32,
           "code": 59703,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 531,
@@ -4296,7 +4319,7 @@
           "name": "unmute",
           "prevSize": 32,
           "code": 59733,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 532,
@@ -4304,7 +4327,7 @@
           "name": "pin",
           "prevSize": 32,
           "code": 59713,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 533,
@@ -4312,7 +4335,7 @@
           "name": "unpin",
           "prevSize": 32,
           "code": 59734,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 534,
@@ -4320,7 +4343,7 @@
           "name": "smallscreen",
           "prevSize": 32,
           "code": 59742,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 535,
@@ -4328,7 +4351,7 @@
           "name": "fullscreen",
           "prevSize": 32,
           "code": 59743,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 536,
@@ -4336,7 +4359,7 @@
           "name": "large-pause",
           "prevSize": 32,
           "code": 59694,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 537,
@@ -4344,7 +4367,7 @@
           "name": "large-play",
           "prevSize": 32,
           "code": 59695,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 538,
@@ -4352,7 +4375,7 @@
           "name": "pause",
           "prevSize": 32,
           "code": 59709,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 539,
@@ -4360,7 +4383,7 @@
           "name": "play",
           "prevSize": 32,
           "code": 59715,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 540,
@@ -4368,7 +4391,7 @@
           "name": "channelviews",
           "prevSize": 32,
           "code": 59666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 541,
@@ -4376,7 +4399,7 @@
           "name": "message-succeeded",
           "prevSize": 32,
           "code": 59648,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 657,
@@ -4384,7 +4407,7 @@
           "name": "message-read",
           "prevSize": 32,
           "code": 59649,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 543,
@@ -4392,7 +4415,7 @@
           "name": "message-pending",
           "prevSize": 32,
           "code": 59724,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 544,
@@ -4400,7 +4423,7 @@
           "name": "message-failed",
           "prevSize": 32,
           "code": 59725,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 545,
@@ -4408,7 +4431,7 @@
           "name": "favorite",
           "prevSize": 32,
           "code": 59710,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 546,
@@ -4416,7 +4439,7 @@
           "name": "keyboard",
           "prevSize": 32,
           "code": 59716,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 547,
@@ -4424,7 +4447,7 @@
           "name": "delete-left",
           "prevSize": 32,
           "code": 59717,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 548,
@@ -4432,7 +4455,7 @@
           "name": "recent",
           "prevSize": 32,
           "code": 59718,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 549,
@@ -4440,7 +4463,7 @@
           "name": "gifs",
           "prevSize": 32,
           "code": 59727,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 550,
@@ -4448,7 +4471,7 @@
           "name": "stickers",
           "prevSize": 32,
           "code": 59739,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 551,
@@ -4456,7 +4479,7 @@
           "name": "smile",
           "prevSize": 32,
           "code": 59728,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 552,
@@ -4464,7 +4487,7 @@
           "name": "animals",
           "prevSize": 32,
           "code": 59655,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 553,
@@ -4472,7 +4495,7 @@
           "name": "eats",
           "prevSize": 32,
           "code": 59682,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 554,
@@ -4480,7 +4503,7 @@
           "name": "sport",
           "prevSize": 32,
           "code": 59729,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 555,
@@ -4488,7 +4511,7 @@
           "name": "car",
           "prevSize": 32,
           "code": 59664,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 556,
@@ -4496,7 +4519,7 @@
           "name": "lamp",
           "prevSize": 32,
           "code": 59692,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 557,
@@ -4504,7 +4527,7 @@
           "name": "language",
           "prevSize": 32,
           "code": 59693,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 558,
@@ -4512,7 +4535,7 @@
           "name": "flag",
           "prevSize": 32,
           "code": 59686,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 559,
@@ -4520,7 +4543,7 @@
           "name": "more",
           "prevSize": 32,
           "code": 59702,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 560,
@@ -4528,7 +4551,7 @@
           "name": "search",
           "prevSize": 32,
           "code": 59721,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 561,
@@ -4536,7 +4559,7 @@
           "name": "remove",
           "prevSize": 32,
           "code": 59740,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 562,
@@ -4544,7 +4567,7 @@
           "name": "add",
           "prevSize": 32,
           "code": 59651,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 563,
@@ -4552,7 +4575,7 @@
           "name": "check",
           "prevSize": 32,
           "code": 59668,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 564,
@@ -4560,7 +4583,7 @@
           "name": "close",
           "prevSize": 32,
           "code": 59673,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 610,
@@ -4568,7 +4591,7 @@
           "name": "arrow-left",
           "prevSize": 32,
           "code": 59661,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 566,
@@ -4576,7 +4599,7 @@
           "name": "arrow-right",
           "prevSize": 32,
           "code": 59708,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 730,
@@ -4584,7 +4607,7 @@
           "name": "down",
           "prevSize": 32,
           "code": 59680,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 568,
@@ -4592,7 +4615,7 @@
           "name": "up",
           "prevSize": 32,
           "code": 59736,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 569,
@@ -4600,7 +4623,7 @@
           "name": "eye-closed",
           "prevSize": 32,
           "code": 59685,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 570,
@@ -4608,7 +4631,7 @@
           "name": "eye",
           "prevSize": 32,
           "code": 59684,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 571,
@@ -4616,7 +4639,7 @@
           "name": "muted",
           "prevSize": 32,
           "code": 59741,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 572,
@@ -4624,7 +4647,7 @@
           "name": "avatar-archived-chats",
           "prevSize": 32,
           "code": 59658,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 573,
@@ -4632,7 +4655,7 @@
           "name": "avatar-deleted-account",
           "prevSize": 32,
           "code": 59659,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 747,
@@ -4640,7 +4663,7 @@
           "name": "avatar-saved-messages",
           "prevSize": 32,
           "code": 59660,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 575,
@@ -4648,7 +4671,7 @@
           "name": "pinned-chat",
           "prevSize": 32,
           "code": 59714,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "prevSize": 32,
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index c983c97e6..4f629bed9 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -53,3 +53,37 @@
     }
   }
 }
+
+@mixin header-mobile {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 2.875rem;
+  box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+
+  display: flex;
+  flex-direction: row-reverse;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  padding-left: max(0.75rem, env(safe-area-inset-left));
+  padding-right: max(0.5rem, env(safe-area-inset-right));
+  background: var(--color-background);
+
+  // Target: Old Firefox (Waterfox Classic)
+  @supports not (padding-left: max(0.75rem, env(safe-area-inset-left))) {
+    padding-left: 0.75rem;
+    padding-right: 0.5rem;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -0.1875rem;
+    left: 0;
+    right: 0;
+    height: 0.125rem;
+    box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
+  }
+}
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 5003cd962..b6092dd37 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -51,6 +51,9 @@
 .icon-volume-3:before {
   content: "\e991";
 }
+.icon-pinned-message:before {
+  content: "\e9bf";
+}
 .icon-archive-filled:before {
   content: "\e9ba";
 }
diff --git a/src/util/iteratees.ts b/src/util/iteratees.ts
index 3f9842663..f4d4dc774 100644
--- a/src/util/iteratees.ts
+++ b/src/util/iteratees.ts
@@ -148,6 +148,43 @@ function isObject(value: any): value is object {
   return typeof value === 'object' && value !== null;
 }
 
+export function orderHistoryIds(listedIds: number[]) {
+  return listedIds.sort((a, b) => a - b);
+}
+
+export function mergeIdRanges(ranges: number[][], idsUpdate: number[]): number[][] {
+  let hasIntersection = false;
+  let newOutlyingLists = ranges.length ? ranges.map((list) => {
+    if (areSortedArraysIntersecting(list, idsUpdate) && !hasIntersection) {
+      hasIntersection = true;
+      return orderHistoryIds(unique(list.concat(idsUpdate)));
+    }
+    return list;
+  }) : [idsUpdate];
+
+  if (!hasIntersection) {
+    newOutlyingLists = newOutlyingLists.concat([idsUpdate]);
+  }
+
+  newOutlyingLists.sort((a, b) => a[0] - b[0]);
+
+  let length = newOutlyingLists.length;
+  for (let i = 0; i < length; i++) {
+    const array = newOutlyingLists[i];
+    const prevArray = newOutlyingLists[i - 1];
+
+    if (prevArray && (prevArray.includes(array[0]) || prevArray.includes(array[0] - 1))) {
+      newOutlyingLists[i - 1] = orderHistoryIds(unique(array.concat(prevArray)));
+      newOutlyingLists.splice(i, 1);
+
+      length--;
+      i--;
+    }
+  }
+
+  return newOutlyingLists;
+}
+
 export function findLast<T>(array: Array<T>, predicate: (value: T, index: number, obj: T[]) => boolean): T | undefined {
   let cursor = array.length;