diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff
old mode 100755
new mode 100644
index 1c87e0b48..bb6955873
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 c8420c5c5..ba8dab847 100644
Binary files a/src/assets/fonts/icomoon.woff2 and b/src/assets/fonts/icomoon.woff2 differ
diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss
index 15a6ff6c5..2e6d1c824 100644
--- a/src/components/left/main/Chat.scss
+++ b/src/components/left/main/Chat.scss
@@ -58,7 +58,7 @@
         --color-pinned: var(--color-white);
       }
 
-      .icon-muted-chat {
+      .icon-muted {
         color: var(--color-white) !important;
       }
 
@@ -89,7 +89,7 @@
       max-width: 80%;
     }
 
-    .icon-muted-chat {
+    .icon-muted {
       font-size: 1.25rem;
       margin-left: 0.25rem;
       margin-top: -.0625rem;
@@ -194,7 +194,7 @@
         padding-right: 0;
       }
 
-      .icon-muted-chat {
+      .icon-muted {
         margin-left: 0;
         margin-right: 0.25rem;
       }
diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx
index f4de20aa7..9d33640c4 100644
--- a/src/components/left/main/Chat.tsx
+++ b/src/components/left/main/Chat.tsx
@@ -290,7 +290,7 @@ const Chat: FC<OwnProps & StateProps & DispatchProps> = ({
         <div className="title">
           <h3>{renderText(getChatTitle(lang, chat, privateChatUser))}</h3>
           {chat.isVerified && <VerifiedIcon />}
-          {isMuted && <i className="icon-muted-chat" />}
+          {isMuted && <i className="icon-muted" />}
           {chat.lastMessage && (
             <LastMessageMeta
               message={chat.lastMessage}
diff --git a/src/components/left/settings/SettingsGeneral.tsx b/src/components/left/settings/SettingsGeneral.tsx
index 8e41630be..9ae234fde 100644
--- a/src/components/left/settings/SettingsGeneral.tsx
+++ b/src/components/left/settings/SettingsGeneral.tsx
@@ -156,8 +156,8 @@ const SettingsGeneral: FC<OwnProps & StateProps & DispatchProps> = ({
 
         <RangeSlider
           label={lang('TextSize')}
-          // TODO Remove memo-killer
-          range={{ min: 12, max: 20 }}
+          min={12}
+          max={20}
           value={messageTextSize}
           onChange={handleMessageTextSizeChange}
         />
diff --git a/src/components/left/settings/SettingsNotifications.tsx b/src/components/left/settings/SettingsNotifications.tsx
index 17ae4fc45..20052e79d 100644
--- a/src/components/left/settings/SettingsNotifications.tsx
+++ b/src/components/left/settings/SettingsNotifications.tsx
@@ -124,10 +124,8 @@ const SettingsNotifications: FC<OwnProps & StateProps & DispatchProps> = ({
           <RangeSlider
             label="Sound"
             disabled={!hasWebNotifications}
-            range={{
-              min: 0,
-              max: 10,
-            }}
+            min={0}
+            max={10}
             value={notificationSoundVolume}
             onChange={(volume) => {
               updateWebNotificationSettings({ notificationSoundVolume: volume });
diff --git a/src/components/middle/AudioPlayer.scss b/src/components/middle/AudioPlayer.scss
index 36d6ed0e5..dbbff6320 100644
--- a/src/components/middle/AudioPlayer.scss
+++ b/src/components/middle/AudioPlayer.scss
@@ -13,7 +13,7 @@
     margin: .125rem;
   }
 
-  > .toggle-play {
+  > .player-button {
     --color-text-secondary: var(--color-primary);
     --color-text-secondary-rgb: var(--color-primary-shade-rgb);
     --color-primary-shade: var(--color-green);
@@ -24,7 +24,7 @@
     margin-left: 1.5rem;
   }
 
-  .toggle-play {
+  .player-button {
     &.smaller {
       width: 3rem;
       height: 3rem;
@@ -60,6 +60,55 @@
     }
   }
 
+  .volume-button {
+    position: relative;
+    overflow: visible;
+
+    .volume-slider-spacer {
+      position: absolute;
+      transform: translateY(100%);
+      bottom: 0;
+      height: 1rem;
+      width: 8rem;
+      cursor: default;
+      visibility: hidden;
+    }
+
+    &:hover .volume-slider-spacer, .volume-slider-spacer:hover {
+      visibility: visible;
+    } 
+
+    .volume-slider {
+      opacity: 0;
+      visibility: hidden;
+
+      position: absolute;
+      background: var(--color-background);
+      bottom: -1rem;
+      transform: translateY(100%);
+      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+      width: 8rem;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      cursor: default;
+      box-shadow: 0 1px 2px var(--color-default-shadow);
+
+      .RangeSlider {
+        margin-bottom: 0;
+        input[type=range] {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &:hover .volume-slider, 
+    .volume-slider:hover, 
+    .volume-slider-spacer:hover + .volume-slider {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
   &-content {
     display: flex;
     justify-content: center;
@@ -69,7 +118,6 @@
     position: relative;
     overflow: hidden;
     cursor: pointer;
-    max-width: 15rem;
     border-radius: var(--border-radius-messages-small);
 
     &:hover {
diff --git a/src/components/middle/AudioPlayer.tsx b/src/components/middle/AudioPlayer.tsx
index 087c8d5f5..362dae9d5 100644
--- a/src/components/middle/AudioPlayer.tsx
+++ b/src/components/middle/AudioPlayer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from '../../lib/teact/teact';
+import React, { FC, useCallback, useMemo } from '../../lib/teact/teact';
 import { withGlobal } from '../../lib/teact/teactn';
 
 import { AudioOrigin } from '../../types';
@@ -7,7 +7,7 @@ import {
   ApiAudio, ApiChat, ApiMessage, ApiUser,
 } from '../../api/types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
 import * as mediaLoader from '../../util/mediaLoader';
 import {
   getMediaDuration, getMessageContent, getMessageMediaHash, getSenderTitle,
@@ -24,6 +24,7 @@ import { clearMediaSession } from '../../util/mediaSession';
 
 import RippleEffect from '../ui/RippleEffect';
 import Button from '../ui/Button';
+import RangeSlider from '../ui/RangeSlider';
 
 import './AudioPlayer.scss';
 
@@ -37,12 +38,22 @@ type OwnProps = {
 type StateProps = {
   sender?: ApiChat | ApiUser;
   chat?: ApiChat;
+  volume: number;
 };
 
-type DispatchProps = Pick<GlobalActions, 'focusMessage' | 'closeAudioPlayer'>;
+type DispatchProps = Pick<GlobalActions, 'focusMessage' | 'closeAudioPlayer' | 'setAudioPlayerVolume'>;
 
 const AudioPlayer: FC<OwnProps & StateProps & DispatchProps> = ({
-  message, origin = AudioOrigin.Inline, className, noUi, sender, focusMessage, closeAudioPlayer, chat,
+  message,
+  origin = AudioOrigin.Inline,
+  className,
+  noUi,
+  sender,
+  chat,
+  volume,
+  setAudioPlayerVolume,
+  focusMessage,
+  closeAudioPlayer,
 }) => {
   const lang = useLang();
   const { audio, voice } = getMessageContent(message);
@@ -50,7 +61,10 @@ const AudioPlayer: FC<OwnProps & StateProps & DispatchProps> = ({
   const senderName = sender ? getSenderTitle(lang, sender) : undefined;
   const mediaData = mediaLoader.getFromMemory(getMessageMediaHash(message, 'inline')!) as (string | undefined);
   const mediaMetadata = useMessageMediaMetadata(message, sender, chat);
-  const { playPause, stop, isPlaying } = useAudioPlayer(
+
+  const {
+    playPause, stop, isPlaying, requestNextTrack, requestPreviousTrack, isFirst, isLast, setVolume,
+  } = useAudioPlayer(
     makeTrackId(message),
     getMediaDuration(message)!,
     isVoice ? 'voice' : 'audio',
@@ -78,6 +92,18 @@ const AudioPlayer: FC<OwnProps & StateProps & DispatchProps> = ({
     stop();
   }, [closeAudioPlayer, isPlaying, playPause, stop]);
 
+  const handleVolumeChange = useCallback((value: number) => {
+    setAudioPlayerVolume({ volume: value / 100 });
+    setVolume(value / 100);
+  }, [setAudioPlayerVolume, setVolume]);
+
+  const volumeIcon = useMemo(() => {
+    if (volume === 0) return 'icon-muted';
+    if (volume < 0.3) return 'icon-volume-1';
+    if (volume < 0.6) return 'icon-volume-2';
+    return 'icon-volume-3';
+  }, [volume]);
+
   if (noUi) {
     return undefined;
   }
@@ -89,19 +115,59 @@ const AudioPlayer: FC<OwnProps & StateProps & DispatchProps> = ({
         ripple={!IS_SINGLE_COLUMN_LAYOUT}
         color="translucent"
         size="smaller"
-        className={buildClassName('toggle-play', isPlaying ? 'pause' : 'play')}
+        className="player-button"
+        disabled={isFirst}
+        onClick={requestPreviousTrack}
+        ariaLabel="Previous track"
+      >
+        <i className="icon-skip-previous" />
+      </Button>
+      <Button
+        round
+        ripple={!IS_SINGLE_COLUMN_LAYOUT}
+        color="translucent"
+        size="smaller"
+        className={buildClassName('toggle-play', 'player-button', isPlaying ? 'pause' : 'play')}
         onClick={playPause}
         ariaLabel={isPlaying ? 'Pause audio' : 'Play audio'}
       >
         <i className="icon-play" />
         <i className="icon-pause" />
       </Button>
+      <Button
+        round
+        ripple={!IS_SINGLE_COLUMN_LAYOUT}
+        color="translucent"
+        size="smaller"
+        className="player-button"
+        disabled={isLast}
+        onClick={requestNextTrack}
+        ariaLabel="Next track"
+      >
+        <i className="icon-skip-next" />
+      </Button>
 
       <div className="AudioPlayer-content" onClick={handleClick}>
         {audio ? renderAudio(audio) : renderVoice(lang('AttachAudio'), senderName)}
         <RippleEffect />
       </div>
 
+      {!IS_IOS && (
+        <Button
+          round
+          className="player-button volume-button"
+          color="translucent"
+          size="smaller"
+          ariaLabel="Volume"
+          withClickPropagation
+        >
+          <i className={volumeIcon} />
+          <div className="volume-slider-spacer" />
+          <div className="volume-slider">
+            <RangeSlider value={volume * 100} onChange={handleVolumeChange} />
+          </div>
+        </Button>
+      )}
       <Button
         round
         className="player-close"
@@ -142,11 +208,13 @@ export default withGlobal<OwnProps>(
   (global, { message }): StateProps => {
     const sender = selectSender(global, message);
     const chat = selectChat(global, message.chatId);
+    const { volume } = global.audioPlayer;
 
     return {
       sender,
       chat,
+      volume,
     };
   },
-  (setGlobal, actions): DispatchProps => pick(actions, ['focusMessage', 'closeAudioPlayer']),
+  (setGlobal, actions): DispatchProps => pick(actions, ['focusMessage', 'closeAudioPlayer', 'setAudioPlayerVolume']),
 )(AudioPlayer);
diff --git a/src/components/middle/MiddleHeader.scss b/src/components/middle/MiddleHeader.scss
index 1c451ca5e..4b432b48d 100644
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@@ -8,7 +8,6 @@
     left: 0;
     right: 0;
     height: 2.875rem;
-    overflow: hidden;
     box-shadow: 0 2px 2px var(--color-light-shadow);
 
     display: flex;
diff --git a/src/components/middle/message/RoundVideo.tsx b/src/components/middle/message/RoundVideo.tsx
index 5d4f1a864..f11168422 100644
--- a/src/components/middle/message/RoundVideo.tsx
+++ b/src/components/middle/message/RoundVideo.tsx
@@ -248,7 +248,7 @@ const RoundVideo: FC<OwnProps> = ({
       )}
       <div className="message-media-duration">
         {isActivated ? formatMediaDuration(playerRef.current!.currentTime) : formatMediaDuration(video.duration)}
-        {(!isActivated || playerRef.current!.paused) && <i className="icon-muted-chat" />}
+        {(!isActivated || playerRef.current!.paused) && <i className="icon-muted" />}
       </div>
     </div>
   );
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index b338473a9..2ac98840c 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -516,7 +516,7 @@
     user-select: none;
   }
 
-  .message-media-duration .icon-muted-chat {
+  .message-media-duration .icon-muted {
     vertical-align: -.1875rem;
     margin-left: .375rem;
     font-size: 1.0625rem;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 0b2a4c62c..b9cb58193 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -32,6 +32,7 @@ export type OwnProps = {
   faded?: boolean;
   tabIndex?: number;
   isRtl?: boolean;
+  withClickPropagation?: boolean;
   onClick?: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   onContextMenu?: (e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
   onMouseDown?: (e: ReactMouseEvent<HTMLButtonElement>) => void;
@@ -70,6 +71,7 @@ const Button: FC<OwnProps> = ({
   faded,
   tabIndex,
   isRtl,
+  withClickPropagation,
 }) => {
   // eslint-disable-next-line no-null/no-null
   let elementRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
@@ -108,11 +110,11 @@ const Button: FC<OwnProps> = ({
   }, [disabled, onClick]);
 
   const handleMouseDown = useCallback((e: ReactMouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
+    if (!withClickPropagation) e.preventDefault();
     if (!disabled && onMouseDown) {
       onMouseDown(e);
     }
-  }, [onMouseDown, disabled]);
+  }, [onMouseDown, disabled, withClickPropagation]);
 
   if (href) {
     return (
diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss
index 270c94c5c..af1d8a56b 100644
--- a/src/components/ui/RangeSlider.scss
+++ b/src/components/ui/RangeSlider.scss
@@ -100,6 +100,14 @@
     &::-moz-slider-thumb {
       -moz-appearance: none;
     }
+
+    &::-webkit-slider-runnable-track {
+      cursor: pointer;
+    }
+
+    &::-moz-range-track, &::-moz-range-progress {
+      cursor: pointer;
+    }
   }
 
   // Apply custom styles
diff --git a/src/components/ui/RangeSlider.tsx b/src/components/ui/RangeSlider.tsx
index 7d851919b..65397ede2 100644
--- a/src/components/ui/RangeSlider.tsx
+++ b/src/components/ui/RangeSlider.tsx
@@ -10,7 +10,9 @@ import './RangeSlider.scss';
 
 type OwnProps = {
   options?: string[];
-  range?: { min: number; max: number; step?: number };
+  min?: number;
+  max?: number;
+  step?: number;
   label?: string;
   value: number;
   disabled?: boolean;
@@ -19,7 +21,9 @@ type OwnProps = {
 
 const RangeSlider: FC<OwnProps> = ({
   options,
-  range,
+  min = 0,
+  max = options ? options.length - 1 : 100,
+  step = 1,
   label,
   value,
   disabled,
@@ -38,29 +42,19 @@ const RangeSlider: FC<OwnProps> = ({
   const trackWidth = useMemo(() => {
     if (options) {
       return (value / (options.length - 1)) * 100;
-    } else if (range) {
-      const possibleValuesLength = (range.max - range.min) / (range.step || 1);
-      return ((value - range.min) / possibleValuesLength) * 100;
+    } else {
+      const possibleValuesLength = (max - min) / step;
+      return ((value - min) / possibleValuesLength) * 100;
     }
     return 0;
-  }, [value, options, range]);
-
-  const [min, max, step] = useMemo(() => {
-    if (options) {
-      return [0, options.length - 1, 1];
-    } else if (range) {
-      return [range.min, range.max, range.step || 1];
-    }
-
-    return [0, 0, 0];
-  }, [range, options]);
+  }, [options, value, max, min, step]);
 
   return (
     <div className={className}>
       {label && (
         <div className="slider-top-row" dir={lang.isRtl ? 'rtl' : undefined}>
           <span className="label" dir="auto">{label}</span>
-          {range && (
+          {!options && (
             <span className="value" dir="auto">{value}</span>
           )}
         </div>
diff --git a/src/config.ts b/src/config.ts
index 75b1a85f4..6116c8921 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -60,6 +60,8 @@ export const PROFILE_SENSITIVE_AREA = 500;
 export const TOP_CHAT_MESSAGES_PRELOAD_LIMIT = 20;
 export const ALL_CHATS_PRELOAD_DISABLED = false;
 
+export const DEFAULT_VOLUME = 1;
+
 export const ANIMATION_LEVEL_MIN = 0;
 export const ANIMATION_LEVEL_MED = 1;
 export const ANIMATION_LEVEL_MAX = 2;
diff --git a/src/global/cache.ts b/src/global/cache.ts
index bc618317b..33006c6dd 100644
--- a/src/global/cache.ts
+++ b/src/global/cache.ts
@@ -13,6 +13,7 @@ import {
   GLOBAL_STATE_CACHE_CHAT_LIST_LIMIT,
   MIN_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN,
   GLOBAL_STATE_CACHE_USER_LIST_LIMIT,
+  DEFAULT_VOLUME,
 } from '../config';
 import { IS_SINGLE_COLUMN_LAYOUT } from '../util/environment';
 import { ANIMATION_END_EVENT, ANIMATION_START_EVENT } from '../hooks/useHeavyAnimationCheck';
@@ -132,6 +133,10 @@ function readCache(initialState: GlobalState): GlobalState {
     if (!cached.serviceNotifications) {
       cached.serviceNotifications = [];
     }
+
+    if (cached.audioPlayer.volume === undefined) {
+      cached.audioPlayer.volume = DEFAULT_VOLUME;
+    }
   }
 
   const newState = {
@@ -178,6 +183,9 @@ function updateCache() {
       'leftColumnWidth',
       'serviceNotifications',
     ]),
+    audioPlayer: {
+      volume: global.audioPlayer.volume,
+    },
     isChatInfoShown: reduceShowChatInfo(global),
     users: reduceUsers(global),
     chats: reduceChats(global),
diff --git a/src/global/initial.ts b/src/global/initial.ts
index 75d51468b..e6f56a162 100644
--- a/src/global/initial.ts
+++ b/src/global/initial.ts
@@ -3,6 +3,7 @@ import { NewChatMembersProgress } from '../types';
 
 import {
   ANIMATION_LEVEL_DEFAULT, DARK_THEME_PATTERN_COLOR, DEFAULT_MESSAGE_TEXT_SIZE_PX, DEFAULT_PATTERN_COLOR,
+  DEFAULT_VOLUME,
   IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX, MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX,
 } from '../config';
 import { IS_IOS, IS_MAC_OS } from '../util/environment';
@@ -110,7 +111,9 @@ export const INITIAL_STATE: GlobalState = {
 
   mediaViewer: {},
 
-  audioPlayer: {},
+  audioPlayer: {
+    volume: DEFAULT_VOLUME,
+  },
 
   forwardMessages: {},
 
diff --git a/src/global/types.ts b/src/global/types.ts
index 2934bf110..160c52f75 100644
--- a/src/global/types.ts
+++ b/src/global/types.ts
@@ -328,6 +328,7 @@ export type GlobalState = {
     messageId?: number;
     threadId?: number;
     origin?: AudioOrigin;
+    volume: number;
   };
 
   topPeers: {
@@ -523,9 +524,10 @@ export type ActionTypes = (
   'clickInlineButton' | 'sendBotCommand' | 'loadTopInlineBots' | 'queryInlineBot' | 'sendInlineBotResult' |
   'resetInlineBot' | 'restartBot' | 'startBot' |
   // misc
-  'openMediaViewer' | 'closeMediaViewer' | 'openAudioPlayer' | 'closeAudioPlayer' | 'openPollModal' | 'closePollModal' |
-  'loadWebPagePreview' | 'clearWebPagePreview' | 'loadWallpapers' | 'uploadWallpaper' | 'setDeviceToken' |
-  'deleteDeviceToken' | 'checkVersionNotification' | 'createServiceNotification' |
+  'openMediaViewer' | 'closeMediaViewer' | 'openAudioPlayer' | 'setAudioPlayerVolume' | 'closeAudioPlayer' |
+  'openPollModal' | 'closePollModal' | 'loadWebPagePreview' | 'clearWebPagePreview' |
+  'loadWallpapers' | 'uploadWallpaper' | 'setDeviceToken' | 'deleteDeviceToken' |
+  'checkVersionNotification' | 'createServiceNotification' |
   // payment
   'openPaymentModal' | 'closePaymentModal' | 'addPaymentError' |
   'validateRequestedInfo' | 'setPaymentStep' | 'sendPaymentForm' | 'getPaymentForm' | 'getReceipt' |
diff --git a/src/hooks/useAudioPlayer.ts b/src/hooks/useAudioPlayer.ts
index 473a30f83..f80ebb2f8 100644
--- a/src/hooks/useAudioPlayer.ts
+++ b/src/hooks/useAudioPlayer.ts
@@ -1,7 +1,7 @@
 import {
   useCallback, useEffect, useRef, useState,
 } from '../lib/teact/teact';
-import { getDispatch } from '../lib/teact/teactn';
+import { getDispatch, getGlobal } from '../lib/teact/teactn';
 
 import { AudioOrigin } from '../types';
 
@@ -48,12 +48,21 @@ export default (
   useOnChange(() => {
     controllerRef.current = register(trackId, trackType, origin, (eventName, e) => {
       switch (eventName) {
-        case 'onPlay':
+        case 'onPlay': {
+          const { setVolume, proxy } = controllerRef.current!;
           setIsPlaying(true);
 
           registerMediaSession(metadata, makeMediaHandlers(controllerRef));
           setPlaybackState('playing');
+          setVolume(getGlobal().audioPlayer.volume);
+
+          setPositionState({
+            duration: proxy.duration || 0,
+            playbackRate: proxy.playbackRate,
+            position: proxy.currentTime,
+          });
           break;
+        }
         case 'onPause':
           setIsPlaying(false);
           setPlaybackState('paused');
@@ -62,11 +71,6 @@ export default (
           const { proxy } = controllerRef.current!;
           const duration = proxy.duration && Number.isFinite(proxy.duration) ? proxy.duration : originalDuration;
           if (!noProgressUpdates) setPlayProgress(proxy.currentTime / duration);
-          setPositionState({
-            duration: proxy.duration,
-            playbackRate: proxy.playbackRate,
-            position: proxy.currentTime,
-          });
           break;
         }
         case 'onEnded': {
@@ -95,7 +99,18 @@ export default (
   }, [metadata, isPlaying]);
 
   const {
-    play, pause, setCurrentTime, proxy, destroy, setVolume, setCurrentOrigin, stop,
+    play,
+    pause,
+    setCurrentTime,
+    proxy,
+    destroy,
+    setVolume,
+    setCurrentOrigin,
+    stop,
+    isFirst,
+    isLast,
+    requestNextTrack,
+    requestPreviousTrack,
   } = controllerRef.current!;
   const duration = proxy.duration && Number.isFinite(proxy.duration) ? proxy.duration : originalDuration;
 
@@ -160,6 +175,10 @@ export default (
     setVolume,
     audioProxy: proxy,
     duration,
+    requestNextTrack,
+    requestPreviousTrack,
+    isFirst: isFirst(),
+    isLast: isLast(),
   };
 };
 
diff --git a/src/hooks/useMessageMediaMetadata.ts b/src/hooks/useMessageMediaMetadata.ts
index c7fc3aea2..56da73263 100644
--- a/src/hooks/useMessageMediaMetadata.ts
+++ b/src/hooks/useMessageMediaMetadata.ts
@@ -32,7 +32,9 @@ export default (message: ApiMessage, sender?: ApiUser | ApiChat, chat?: ApiChat)
   const hash = (audio && audioCoverHash) || (voice && avatarHash);
   const media = useMedia(hash);
 
-  const size = getCoverSize(audio, voice, media);
+  const size = useMemo(() => {
+    return getCoverSize(audio, voice, media);
+  }, [audio, media, voice]);
   const { result: url } = useAsync(() => makeGoodArtwork(media, size), [media, size], telegramLogoPath);
   return useMemo(() => {
     return buildMediaMetadata({
diff --git a/src/modules/actions/ui/messages.ts b/src/modules/actions/ui/messages.ts
index 83549e6b3..b85263138 100644
--- a/src/modules/actions/ui/messages.ts
+++ b/src/modules/actions/ui/messages.ts
@@ -170,7 +170,7 @@ addReducer('closeMediaViewer', (global) => {
 
 addReducer('openAudioPlayer', (global, actions, payload) => {
   const {
-    chatId, threadId, messageId, origin,
+    chatId, threadId, messageId, origin, volume,
   } = payload!;
 
   return {
@@ -180,6 +180,21 @@ addReducer('openAudioPlayer', (global, actions, payload) => {
       threadId,
       messageId,
       origin,
+      volume: volume || global.audioPlayer.volume,
+    },
+  };
+});
+
+addReducer('setAudioPlayerVolume', (global, actions, payload) => {
+  const {
+    volume,
+  } = payload!;
+
+  return {
+    ...global,
+    audioPlayer: {
+      ...global.audioPlayer,
+      volume,
     },
   };
 });
@@ -187,7 +202,9 @@ addReducer('openAudioPlayer', (global, actions, payload) => {
 addReducer('closeAudioPlayer', (global) => {
   return {
     ...global,
-    audioPlayer: {},
+    audioPlayer: {
+      volume: global.audioPlayer.volume, // Preserve only volume for the next play
+    },
   };
 });
 
diff --git a/src/styles/Telegram T.json b/src/styles/Telegram T.json
index cc0bc7ed8..6f5928831 100644
--- a/src/styles/Telegram T.json	
+++ b/src/styles/Telegram T.json	
@@ -2,9 +2,165 @@
   "metadata": {
     "name": "Telegram T",
     "lastOpened": 0,
-    "created": 1628131266337
+    "created": 1635725227633
   },
   "iconSets": [
+    {
+      "selection": [
+        {
+          "order": 673,
+          "id": 5,
+          "name": "loop",
+          "prevSize": 32,
+          "code": 59777,
+          "tempChar": ""
+        },
+        {
+          "order": 672,
+          "id": 4,
+          "name": "skip-next",
+          "prevSize": 32,
+          "code": 59778,
+          "tempChar": ""
+        },
+        {
+          "order": 671,
+          "id": 3,
+          "name": "skip-previous",
+          "prevSize": 32,
+          "code": 59779,
+          "tempChar": ""
+        },
+        {
+          "order": 674,
+          "id": 2,
+          "name": "volume-1",
+          "prevSize": 32,
+          "code": 59780,
+          "tempChar": ""
+        },
+        {
+          "order": 669,
+          "id": 1,
+          "name": "volume-2",
+          "prevSize": 32,
+          "code": 59781,
+          "tempChar": ""
+        },
+        {
+          "order": 668,
+          "id": 0,
+          "name": "volume-3",
+          "prevSize": 32,
+          "code": 59782,
+          "tempChar": ""
+        }
+      ],
+      "id": 3,
+      "metadata": {
+        "name": "Audio",
+        "importSize": {
+          "width": 24,
+          "height": 24
+        }
+      },
+      "height": 1024,
+      "prevSize": 32,
+      "icons": [
+        {
+          "id": 5,
+          "paths": [
+            "M298.667 298.667h426.667v128l170.667-170.667-170.667-170.667v128h-512v256h85.333v-170.667zM725.333 725.333h-426.667v-128l-170.667 170.667 170.667 170.667v-128h512v-256h-85.333v170.667z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 24,
+          "tags": [
+            "loop"
+          ]
+        },
+        {
+          "id": 4,
+          "paths": [
+            "M256 768l362.667-256-362.667-256v512zM682.667 256v512h85.333v-512h-85.333z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 24,
+          "tags": [
+            "skip-next"
+          ]
+        },
+        {
+          "id": 3,
+          "paths": [
+            "M256 256h85.333v512h-85.333zM405.333 512l362.667 256v-512z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 24,
+          "tags": [
+            "skip-previous"
+          ]
+        },
+        {
+          "id": 2,
+          "paths": [
+            "M558.623 229.209c5.383 8.831 8.569 19.512 8.569 30.938 0 0.001-0 0.001-0 0.002l0-0v509.201c0 33.212-26.923 60.135-60.135 60.135-11.426-0.001-22.108-3.187-31.206-8.72l0.266 0.15-160.939-96.567c-29.352-17.832-48.66-49.631-48.66-85.94 0-0.001 0-0.002 0-0.003l-0 0v-247.32c0.002-36.309 19.309-68.108 48.217-85.692l0.443-0.251 160.939-96.565c28.48-17.087 65.419-7.853 82.505 20.627v0.004zM146.653 334.345c33.212 0 60.135 26.923 60.135 60.135v240.54c0 33.212-26.923 60.135-60.135 60.135s-60.135-26.923-60.135-60.135v-240.54c0-33.212 26.923-60.135 60.135-60.135zM554.336 623.967c-0.012 0-0.026 0-0.040 0-8.404 0-16.011-3.412-21.512-8.926l-0.001-0.001c-11.909-11.909-11.909-187.531 0-199.44 11.911-11.911 31.219-11.911 43.107 0 26.637 26.636 41.295 62.059 41.295 99.697 0 37.688-14.657 73.084-41.293 99.72-5.509 5.529-13.131 8.949-21.551 8.949-0.002 0-0.003-0-0.005-0l0 0z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "grid": 24,
+          "tags": [
+            "volume-1"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false
+        },
+        {
+          "id": 1,
+          "paths": [
+            "M558.623 229.209c5.383 8.831 8.569 19.512 8.569 30.938 0 0.001-0 0.001-0 0.002l0-0v509.201c0 33.212-26.923 60.135-60.135 60.135-11.426-0.001-22.108-3.187-31.206-8.72l0.266 0.15-160.939-96.567c-29.352-17.832-48.66-49.631-48.66-85.94 0-0.001 0-0.002 0-0.003l-0 0v-247.32c0.002-36.309 19.309-68.108 48.217-85.692l0.443-0.251 160.939-96.565c28.48-17.087 65.419-7.853 82.505 20.627v0.004zM146.653 334.345c33.212 0 60.135 26.923 60.135 60.135v240.54c0 33.212-26.923 60.135-60.135 60.135s-60.135-26.923-60.135-60.135v-240.54c0-33.212 26.923-60.135 60.135-60.135zM554.336 623.967c-0.012 0-0.026 0-0.040 0-8.404 0-16.011-3.412-21.512-8.926l-0.001-0.001c-11.909-11.909-11.909-187.531 0-199.44 11.911-11.911 31.219-11.911 43.107 0 26.637 26.636 41.295 62.059 41.295 99.697 0 37.688-14.657 73.084-41.293 99.72-5.509 5.529-13.131 8.949-21.551 8.949-0.002 0-0.003-0-0.005-0l0 0zM647.088 707.369c-0.007 0-0.015 0-0.024 0-9.352 0-17.819-3.794-23.944-9.926l-0-0c-13.221-13.245-13.221-34.696 0-47.941 74.168-74.14 74.139-194.815 0-268.96-13.247-13.245-13.247-34.695 0-47.94 13.221-13.247 34.695-13.247 47.941 0 100.605 100.607 100.605 264.259 0.024 364.812-6.663 6.637-15.315 9.956-23.997 9.956z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "grid": 24,
+          "tags": [
+            "volume-2"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false
+        },
+        {
+          "id": 0,
+          "paths": [
+            "M558.623 229.209c5.383 8.831 8.569 19.512 8.569 30.938 0 0.001-0 0.001-0 0.002l0-0v509.201c0 33.212-26.923 60.135-60.135 60.135-11.426-0.001-22.108-3.187-31.206-8.72l0.266 0.15-160.939-96.567c-29.352-17.832-48.66-49.631-48.66-85.94 0-0.001 0-0.002 0-0.003l-0 0v-247.32c0.002-36.309 19.309-68.108 48.217-85.692l0.443-0.251 160.939-96.565c28.48-17.087 65.419-7.853 82.505 20.627v0.004zM146.653 334.345c33.212 0 60.135 26.923 60.135 60.135v240.54c0 33.212-26.923 60.135-60.135 60.135s-60.135-26.923-60.135-60.135v-240.54c0-33.212 26.923-60.135 60.135-60.135zM554.336 623.967c-0.012 0-0.026 0-0.040 0-8.404 0-16.011-3.412-21.512-8.926l-0.001-0.001c-11.909-11.909-11.909-187.531 0-199.44 11.911-11.911 31.219-11.911 43.107 0 26.637 26.636 41.295 62.059 41.295 99.697 0 37.688-14.657 73.084-41.293 99.72-5.509 5.529-13.131 8.949-21.551 8.949-0.002 0-0.003-0-0.005-0l0 0zM647.088 707.369c-0.007 0-0.015 0-0.024 0-9.352 0-17.819-3.794-23.944-9.926l-0-0c-13.221-13.245-13.221-34.696 0-47.941 74.168-74.14 74.139-194.815 0-268.96-13.247-13.245-13.247-34.695 0-47.94 13.221-13.247 34.695-13.247 47.941 0 100.605 100.607 100.605 264.259 0.024 364.812-6.663 6.637-15.315 9.956-23.997 9.956zM760.675 802.089c-8.716 0-17.431-3.344-24.115-10-13.341-13.339-13.341-34.941 0-48.283 61.275-61.275 95.013-142.712 95.013-229.413s-33.769-168.164-95.067-229.439c-13.317-13.34-13.317-34.943 0-48.283 13.368-13.34 34.967-13.34 48.307 0 74.187 74.187 115.039 172.789 115.039 277.721 0 104.933-40.821 203.533-115.013 277.667-6.166 6.195-14.699 10.028-24.128 10.028-0.013 0-0.026-0-0.038-0l0.002 0v0.001z"
+          ],
+          "attrs": [
+            {}
+          ],
+          "grid": 24,
+          "tags": [
+            "volume-3"
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false
+        }
+      ],
+      "invisible": false,
+      "colorThemes": []
+    },
     {
       "selection": [
         {
@@ -13,7 +169,7 @@
           "name": "bot-commands-filled",
           "prevSize": 32,
           "code": 59775,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 664,
@@ -21,7 +177,7 @@
           "name": "reply-filled",
           "prevSize": 32,
           "code": 59776,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 656,
@@ -29,7 +185,7 @@
           "name": "bug",
           "prevSize": 32,
           "code": 59774,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 619,
@@ -37,7 +193,7 @@
           "name": "data",
           "prevSize": 32,
           "code": 59773,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 622,
@@ -45,7 +201,7 @@
           "name": "darkmode",
           "prevSize": 32,
           "code": 59769,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 623,
@@ -53,7 +209,7 @@
           "name": "animations",
           "prevSize": 32,
           "code": 59770,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 626,
@@ -61,7 +217,7 @@
           "name": "enter",
           "prevSize": 32,
           "code": 59771,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 627,
@@ -69,7 +225,7 @@
           "name": "fontsize",
           "prevSize": 32,
           "code": 59772,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 630,
@@ -77,7 +233,7 @@
           "name": "permissions",
           "prevSize": 32,
           "code": 59766,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 631,
@@ -85,7 +241,7 @@
           "name": "card",
           "prevSize": 32,
           "code": 59767,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 634,
@@ -93,7 +249,7 @@
           "name": "truck",
           "prevSize": 32,
           "code": 59768,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 663,
@@ -101,7 +257,7 @@
           "name": "share-filled",
           "prevSize": 32,
           "code": 59738,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 638,
@@ -109,7 +265,7 @@
           "name": "bold",
           "prevSize": 32,
           "code": 59745,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 639,
@@ -117,7 +273,7 @@
           "name": "bot-command",
           "prevSize": 32,
           "code": 59746,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 642,
@@ -125,7 +281,7 @@
           "name": "calendar-filter",
           "prevSize": 32,
           "code": 59747,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 643,
@@ -133,7 +289,7 @@
           "name": "comments",
           "prevSize": 32,
           "code": 59748,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 645,
@@ -141,7 +297,7 @@
           "name": "comments-sticker",
           "prevSize": 32,
           "code": 59749,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 646,
@@ -149,7 +305,7 @@
           "name": "arrow-down",
           "prevSize": 32,
           "code": 59750,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 647,
@@ -157,7 +313,7 @@
           "name": "email",
           "prevSize": 32,
           "code": 59751,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 648,
@@ -165,7 +321,7 @@
           "name": "italic",
           "prevSize": 32,
           "code": 59752,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 620,
@@ -173,7 +329,7 @@
           "name": "link",
           "prevSize": 32,
           "code": 59753,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 621,
@@ -181,7 +337,7 @@
           "name": "mention",
           "prevSize": 32,
           "code": 59754,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 624,
@@ -189,7 +345,7 @@
           "name": "monospace",
           "prevSize": 32,
           "code": 59755,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 625,
@@ -197,7 +353,7 @@
           "name": "next",
           "prevSize": 32,
           "code": 59756,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 628,
@@ -205,7 +361,7 @@
           "name": "password-off",
           "prevSize": 32,
           "code": 59757,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 629,
@@ -213,7 +369,7 @@
           "name": "pin-list",
           "prevSize": 32,
           "code": 59758,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 632,
@@ -221,7 +377,7 @@
           "name": "previous",
           "prevSize": 32,
           "code": 59759,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 633,
@@ -229,7 +385,7 @@
           "name": "replace",
           "prevSize": 32,
           "code": 59760,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 636,
@@ -237,7 +393,7 @@
           "name": "schedule",
           "prevSize": 32,
           "code": 59761,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 637,
@@ -245,7 +401,7 @@
           "name": "strikethrough",
           "prevSize": 32,
           "code": 59762,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 640,
@@ -253,7 +409,7 @@
           "name": "underlined",
           "prevSize": 32,
           "code": 59763,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 641,
@@ -261,7 +417,7 @@
           "name": "zoom-in",
           "prevSize": 32,
           "code": 59764,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 649,
@@ -269,7 +425,7 @@
           "name": "zoom-out",
           "prevSize": 32,
           "code": 59765,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 2,
@@ -2211,7 +2367,7 @@
           ],
           "grid": 24,
           "tags": [
-            "muted-chat"
+            "muted"
           ],
           "isMulticolor": false,
           "isMulticolor2": false,
@@ -2335,7 +2491,7 @@
           "name": "select",
           "prevSize": 32,
           "code": 59744,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 480,
@@ -2343,7 +2499,7 @@
           "name": "folder",
           "prevSize": 32,
           "code": 59667,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 481,
@@ -2351,7 +2507,7 @@
           "name": "bots",
           "prevSize": 32,
           "code": 59669,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 482,
@@ -2359,7 +2515,7 @@
           "name": "calendar",
           "prevSize": 32,
           "code": 59670,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 483,
@@ -2367,7 +2523,7 @@
           "name": "cloud-download",
           "prevSize": 32,
           "code": 59671,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 484,
@@ -2375,7 +2531,7 @@
           "name": "colorize",
           "prevSize": 32,
           "code": 59672,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 651,
@@ -2383,7 +2539,7 @@
           "name": "forward",
           "prevSize": 32,
           "code": 59687,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 650,
@@ -2391,7 +2547,7 @@
           "name": "reply",
           "prevSize": 32,
           "code": 59719,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 487,
@@ -2399,7 +2555,7 @@
           "name": "help",
           "prevSize": 32,
           "code": 59690,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 488,
@@ -2407,7 +2563,7 @@
           "name": "info",
           "prevSize": 32,
           "code": 59691,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 489,
@@ -2415,7 +2571,7 @@
           "name": "info-filled",
           "prevSize": 32,
           "code": 59675,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 490,
@@ -2423,7 +2579,7 @@
           "name": "delete-filled",
           "prevSize": 32,
           "code": 59676,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 491,
@@ -2431,7 +2587,7 @@
           "name": "delete",
           "prevSize": 32,
           "code": 59677,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 492,
@@ -2439,7 +2595,7 @@
           "name": "edit",
           "prevSize": 32,
           "code": 59683,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 493,
@@ -2447,7 +2603,7 @@
           "name": "new-chat-filled",
           "prevSize": 32,
           "code": 59705,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 494,
@@ -2455,7 +2611,7 @@
           "name": "send",
           "prevSize": 32,
           "code": 59722,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 495,
@@ -2463,7 +2619,7 @@
           "name": "send-outline",
           "prevSize": 32,
           "code": 59723,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 496,
@@ -2471,7 +2627,7 @@
           "name": "add-user-filled",
           "prevSize": 32,
           "code": 59652,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 497,
@@ -2479,7 +2635,7 @@
           "name": "add-user",
           "prevSize": 32,
           "code": 59653,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 498,
@@ -2487,7 +2643,7 @@
           "name": "delete-user",
           "prevSize": 32,
           "code": 59678,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 499,
@@ -2495,7 +2651,7 @@
           "name": "microphone",
           "prevSize": 32,
           "code": 59701,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 500,
@@ -2503,7 +2659,7 @@
           "name": "microphone-alt",
           "prevSize": 32,
           "code": 59707,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 501,
@@ -2511,7 +2667,7 @@
           "name": "poll",
           "prevSize": 32,
           "code": 59704,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 502,
@@ -2519,7 +2675,7 @@
           "name": "revote",
           "prevSize": 32,
           "code": 59706,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 503,
@@ -2527,7 +2683,7 @@
           "name": "photo",
           "prevSize": 32,
           "code": 59712,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 504,
@@ -2535,7 +2691,7 @@
           "name": "document",
           "prevSize": 32,
           "code": 59679,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 505,
@@ -2543,7 +2699,7 @@
           "name": "camera",
           "prevSize": 32,
           "code": 59662,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 506,
@@ -2551,7 +2707,7 @@
           "name": "camera-add",
           "prevSize": 32,
           "code": 59663,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 507,
@@ -2559,7 +2715,7 @@
           "name": "logout",
           "prevSize": 32,
           "code": 59698,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 508,
@@ -2567,7 +2723,7 @@
           "name": "saved-messages",
           "prevSize": 32,
           "code": 59720,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 509,
@@ -2575,7 +2731,7 @@
           "name": "settings",
           "prevSize": 32,
           "code": 59726,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 652,
@@ -2583,7 +2739,7 @@
           "name": "phone",
           "prevSize": 32,
           "code": 59711,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 653,
@@ -2591,7 +2747,7 @@
           "name": "attach",
           "prevSize": 32,
           "code": 59657,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 512,
@@ -2599,7 +2755,7 @@
           "name": "copy",
           "prevSize": 32,
           "code": 59674,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 513,
@@ -2607,7 +2763,7 @@
           "name": "channel",
           "prevSize": 32,
           "code": 59665,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 514,
@@ -2615,7 +2771,7 @@
           "name": "group",
           "prevSize": 32,
           "code": 59689,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 515,
@@ -2623,7 +2779,7 @@
           "name": "user",
           "prevSize": 32,
           "code": 59737,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 516,
@@ -2631,7 +2787,7 @@
           "name": "non-contacts",
           "prevSize": 32,
           "code": 59688,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 517,
@@ -2639,7 +2795,7 @@
           "name": "active-sessions",
           "prevSize": 32,
           "code": 59650,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 518,
@@ -2647,7 +2803,7 @@
           "name": "admin",
           "prevSize": 32,
           "code": 59654,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 519,
@@ -2655,7 +2811,7 @@
           "name": "download",
           "prevSize": 32,
           "code": 59681,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 520,
@@ -2663,7 +2819,7 @@
           "name": "location",
           "prevSize": 32,
           "code": 59696,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 521,
@@ -2671,7 +2827,7 @@
           "name": "stop",
           "prevSize": 32,
           "code": 59730,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 523,
@@ -2679,7 +2835,7 @@
           "name": "archive",
           "prevSize": 32,
           "code": 59656,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 524,
@@ -2687,7 +2843,7 @@
           "name": "unarchive",
           "prevSize": 32,
           "code": 59731,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 525,
@@ -2695,7 +2851,7 @@
           "name": "readchats",
           "prevSize": 32,
           "code": 59699,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 526,
@@ -2703,7 +2859,7 @@
           "name": "unread",
           "prevSize": 32,
           "code": 59735,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 654,
@@ -2711,7 +2867,7 @@
           "name": "message",
           "prevSize": 32,
           "code": 59700,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 659,
@@ -2719,7 +2875,7 @@
           "name": "lock",
           "prevSize": 32,
           "code": 59697,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 529,
@@ -2727,7 +2883,7 @@
           "name": "unlock",
           "prevSize": 32,
           "code": 59732,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 530,
@@ -2735,7 +2891,7 @@
           "name": "mute",
           "prevSize": 32,
           "code": 59703,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 531,
@@ -2743,7 +2899,7 @@
           "name": "unmute",
           "prevSize": 32,
           "code": 59733,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 532,
@@ -2751,7 +2907,7 @@
           "name": "pin",
           "prevSize": 32,
           "code": 59713,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 533,
@@ -2759,7 +2915,7 @@
           "name": "unpin",
           "prevSize": 32,
           "code": 59734,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 534,
@@ -2767,7 +2923,7 @@
           "name": "smallscreen",
           "prevSize": 32,
           "code": 59742,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 535,
@@ -2775,7 +2931,7 @@
           "name": "fullscreen",
           "prevSize": 32,
           "code": 59743,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 536,
@@ -2783,7 +2939,7 @@
           "name": "large-pause",
           "prevSize": 32,
           "code": 59694,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 537,
@@ -2791,7 +2947,7 @@
           "name": "large-play",
           "prevSize": 32,
           "code": 59695,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 538,
@@ -2799,7 +2955,7 @@
           "name": "pause",
           "prevSize": 32,
           "code": 59709,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 539,
@@ -2807,7 +2963,7 @@
           "name": "play",
           "prevSize": 32,
           "code": 59715,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 540,
@@ -2815,7 +2971,7 @@
           "name": "channelviews",
           "prevSize": 32,
           "code": 59666,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 541,
@@ -2823,7 +2979,7 @@
           "name": "message-succeeded",
           "prevSize": 32,
           "code": 59648,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 657,
@@ -2831,7 +2987,7 @@
           "name": "message-read",
           "prevSize": 32,
           "code": 59649,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 543,
@@ -2839,7 +2995,7 @@
           "name": "message-pending",
           "prevSize": 32,
           "code": 59724,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 544,
@@ -2847,7 +3003,7 @@
           "name": "message-failed",
           "prevSize": 32,
           "code": 59725,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 545,
@@ -2855,7 +3011,7 @@
           "name": "favorite",
           "prevSize": 32,
           "code": 59710,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 546,
@@ -2863,7 +3019,7 @@
           "name": "keyboard",
           "prevSize": 32,
           "code": 59716,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 547,
@@ -2871,7 +3027,7 @@
           "name": "delete-left",
           "prevSize": 32,
           "code": 59717,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 548,
@@ -2879,7 +3035,7 @@
           "name": "recent",
           "prevSize": 32,
           "code": 59718,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 549,
@@ -2887,7 +3043,7 @@
           "name": "gifs",
           "prevSize": 32,
           "code": 59727,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 550,
@@ -2895,7 +3051,7 @@
           "name": "stickers",
           "prevSize": 32,
           "code": 59739,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 551,
@@ -2903,7 +3059,7 @@
           "name": "smile",
           "prevSize": 32,
           "code": 59728,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 552,
@@ -2911,7 +3067,7 @@
           "name": "animals",
           "prevSize": 32,
           "code": 59655,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 553,
@@ -2919,7 +3075,7 @@
           "name": "eats",
           "prevSize": 32,
           "code": 59682,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 554,
@@ -2927,7 +3083,7 @@
           "name": "sport",
           "prevSize": 32,
           "code": 59729,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 555,
@@ -2935,7 +3091,7 @@
           "name": "car",
           "prevSize": 32,
           "code": 59664,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 556,
@@ -2943,7 +3099,7 @@
           "name": "lamp",
           "prevSize": 32,
           "code": 59692,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 557,
@@ -2951,7 +3107,7 @@
           "name": "language",
           "prevSize": 32,
           "code": 59693,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 558,
@@ -2959,7 +3115,7 @@
           "name": "flag",
           "prevSize": 32,
           "code": 59686,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 559,
@@ -2967,7 +3123,7 @@
           "name": "more",
           "prevSize": 32,
           "code": 59702,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 560,
@@ -2975,7 +3131,7 @@
           "name": "search",
           "prevSize": 32,
           "code": 59721,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 561,
@@ -2983,7 +3139,7 @@
           "name": "remove",
           "prevSize": 32,
           "code": 59740,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 562,
@@ -2991,7 +3147,7 @@
           "name": "add",
           "prevSize": 32,
           "code": 59651,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 563,
@@ -2999,7 +3155,7 @@
           "name": "check",
           "prevSize": 32,
           "code": 59668,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 564,
@@ -3007,7 +3163,7 @@
           "name": "close",
           "prevSize": 32,
           "code": 59673,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 610,
@@ -3015,7 +3171,7 @@
           "name": "arrow-left",
           "prevSize": 32,
           "code": 59661,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 566,
@@ -3023,7 +3179,7 @@
           "name": "arrow-right",
           "prevSize": 32,
           "code": 59708,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 567,
@@ -3031,7 +3187,7 @@
           "name": "down",
           "prevSize": 32,
           "code": 59680,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 568,
@@ -3039,7 +3195,7 @@
           "name": "up",
           "prevSize": 32,
           "code": 59736,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 569,
@@ -3047,7 +3203,7 @@
           "name": "eye-closed",
           "prevSize": 32,
           "code": 59685,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 570,
@@ -3055,15 +3211,15 @@
           "name": "eye",
           "prevSize": 32,
           "code": 59684,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
-          "order": 571,
+          "order": 675,
           "id": 4,
-          "name": "muted-chat",
+          "name": "muted",
           "prevSize": 32,
           "code": 59741,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 572,
@@ -3071,7 +3227,7 @@
           "name": "avatar-archived-chats",
           "prevSize": 32,
           "code": 59658,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 573,
@@ -3079,7 +3235,7 @@
           "name": "avatar-deleted-account",
           "prevSize": 32,
           "code": 59659,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 574,
@@ -3087,7 +3243,7 @@
           "name": "avatar-saved-messages",
           "prevSize": 32,
           "code": 59660,
-          "tempChar": ""
+          "tempChar": ""
         },
         {
           "order": 575,
@@ -3095,7 +3251,7 @@
           "name": "pinned-chat",
           "prevSize": 32,
           "code": 59714,
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "prevSize": 32,
@@ -3143,4 +3299,4 @@
     "showLiga": false
   },
   "uid": -1
-}
\ No newline at end of file
+}
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index 8b217394b..e442748c6 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -32,6 +32,24 @@
   }
 }
 
+.icon-loop:before {
+  content: "\e981";
+}
+.icon-skip-next:before {
+  content: "\e982";
+}
+.icon-skip-previous:before {
+  content: "\e983";
+}
+.icon-volume-1:before {
+  content: "\e984";
+}
+.icon-volume-2:before {
+  content: "\e985";
+}
+.icon-volume-3:before {
+  content: "\e986";
+}
 .icon-bot-commands-filled:before {
   content: "\e97f";
 }
@@ -404,7 +422,7 @@
 .icon-eye:before {
   content: "\e924";
 }
-.icon-muted-chat:before {
+.icon-muted:before {
   content: "\e95d";
 }
 .icon-avatar-archived-chats:before {
diff --git a/src/util/mediaSession.ts b/src/util/mediaSession.ts
index c074910a7..f9d30e983 100644
--- a/src/util/mediaSession.ts
+++ b/src/util/mediaSession.ts
@@ -48,7 +48,7 @@ export function updateMetadata(metadata?: MediaMetadata) {
   const { mediaSession } = window.navigator;
   if (mediaSession) {
     // eslint-disable-next-line no-null/no-null
-    mediaSession.metadata = metadata !== undefined ? metadata : null;
+    mediaSession.metadata = metadata ?? null;
   }
 }
 
@@ -73,7 +73,7 @@ export function clearMediaSession() {
     mediaSession.metadata = null;
     setMediaSessionHandlers(DEFAULT_HANDLERS);
     if (mediaSession.playbackState) mediaSession.playbackState = 'none';
-    if (mediaSession.setPositionState) mediaSession.setPositionState(undefined);
+    mediaSession.setPositionState?.();
   }
 }
 
@@ -85,29 +85,23 @@ export function setPlaybackState(state: 'none' | 'paused' | 'playing' = 'none')
 }
 
 export function setPositionState(state?: MediaPositionState) {
-  if (!state || !state.position || !state.duration) return;
+  if (!state || state.position === undefined || state.duration === undefined) return;
+  state.position = Math.min(state.position, state.duration);
+
   const { mediaSession } = window.navigator;
-  if (mediaSession && mediaSession.setPositionState) {
-    mediaSession.setPositionState(state);
-  }
+  mediaSession?.setPositionState?.(state);
 }
 
 export function setMicrophoneActive(active: boolean) {
   const { mediaSession } = window.navigator;
   // @ts-ignore typings not updated yet
-  if (mediaSession && mediaSession.setMicrophoneActive) {
-    // @ts-ignore
-    mediaSession.setMicrophoneActive(active);
-  }
+  mediaSession?.setMicrophoneActive?.(active);
 }
 
 export function setCameraActive(active: boolean) {
   const { mediaSession } = window.navigator;
   // @ts-ignore typings not updated yet
-  if (mediaSession && mediaSession.setCameraActive) {
-    // @ts-ignore
-    mediaSession.setCameraActive(active);
-  }
+  mediaSession?.setCameraActive?.(active);
 }
 
 export function buildMediaMetadata({
diff --git a/src/util/safePlay.ts b/src/util/safePlay.ts
index 15619bedc..37d898c3a 100644
--- a/src/util/safePlay.ts
+++ b/src/util/safePlay.ts
@@ -4,7 +4,7 @@ export default (mediaEl: HTMLMediaElement) => {
   mediaEl.play().catch((err) => {
     if (DEBUG) {
       // eslint-disable-next-line no-console
-      console.warn(err);
+      console.warn(err, mediaEl);
     }
   });
 };