diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index e8e346f27..48b44dec1 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import { Flex } from './Flex';
 
 const StyledInput = styled.input<{
@@ -54,10 +54,20 @@ type SessionRadioProps = {
   beforeMargins?: string;
   onClick?: (value: string) => void;
   disabled?: boolean;
+  style?: CSSProperties;
 };
 
 export const SessionRadio = (props: SessionRadioProps) => {
-  const { label, inputName, value, active, onClick, beforeMargins, disabled = false } = props;
+  const {
+    label,
+    inputName,
+    value,
+    active,
+    onClick,
+    beforeMargins,
+    disabled = false,
+    style,
+  } = props;
 
   const clickHandler = (e: ChangeEvent<any>) => {
     if (!disabled && onClick) {
@@ -71,7 +81,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
   const outlineOffset = 2;
 
   return (
-    <Flex container={true} padding="0 0 0 var(--margins-lg)">
+    <Flex container={true} style={style}>
       <StyledInput
         type="radio"
         name={inputName || ''}
diff --git a/ts/components/buttons/PanelButton.tsx b/ts/components/buttons/PanelButton.tsx
index 8743b61d9..dc6c4a204 100644
--- a/ts/components/buttons/PanelButton.tsx
+++ b/ts/components/buttons/PanelButton.tsx
@@ -13,8 +13,6 @@ export const StyledContent = styled.div<{ disabled: boolean }>`
 export const StyledText = styled.span`
   font-size: var(--font-size-md);
   font-weight: 500;
-  margin-inline-start: var(--margins-lg);
-  margin-inline-end: var(--margins-lg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -38,16 +36,14 @@ const StyledRoundedPanelButtonGroup = styled.div`
   overflow: hidden;
   background: var(--right-panel-item-background-color);
   border-radius: 16px;
-  padding: var(--margins-lg);
+  padding: 0 var(--margins-lg) var(--margins-xs);
   margin: 0 var(--margins-lg);
   width: -webkit-fill-available;
 `;
 
 const PanelButtonContainer = styled.div`
   overflow: auto;
-  // TODO clear
-  /* min-height: 50px; */
-  min-height: 40px;
+  min-height: 65px;
   max-height: 100%;
 `;
 
@@ -75,8 +71,7 @@ const StyledPanelButton = styled.button<{
   flex-shrink: 0;
   flex-grow: 1;
   font-family: var(--font-default);
-  padding: 0px var(--margins-sm);
-  min-height: 50px;
+  height: 65px;
   width: 100%;
   transition: var(--default-duration);
   color: ${props => (props.disabled ? 'var(--disabled-color)' : 'inherit')};
@@ -114,8 +109,11 @@ export const PanelButton = (props: PanelButtonProps) => {
 
 const StyledSubtitle = styled.p<{ color?: string }>`
   font-size: var(--font-size-xs);
-  margin: 0;
-  text-align: initial;
+  line-height: 1.1;
+  margin-top: 0;
+  margin-bottom: 0;
+  /* TODO needs RTL support */
+  text-align: left;
   ${props => props.color && `color: ${props.color};`}
 `;
 
@@ -126,7 +124,7 @@ export const PanelButtonText = (props: { text: string; subtitle?: string; color?
       width={'100%'}
       flexDirection={'column'}
       alignItems={'flex-start'}
-      margin="0 var(--margins-lg) 0 var(--margins-lg)"
+      margin="0 var(--margins-lg) 0 0"
       minWidth="0"
     >
       <StyledText color={props.color}>{props.text}</StyledText>
diff --git a/ts/components/buttons/PanelIconButton.tsx b/ts/components/buttons/PanelIconButton.tsx
index f47c6e687..79d5f32d6 100644
--- a/ts/components/buttons/PanelIconButton.tsx
+++ b/ts/components/buttons/PanelIconButton.tsx
@@ -12,7 +12,8 @@ interface PanelIconButton extends Omit<PanelButtonProps, 'children'> {
 
 const IconContainer = styled.div`
   flex-shrink: 0;
-  width: var(--toggle-width);
+  margin: 0 var(--margins-lg) 0 var(--margins-sm);
+  padding: 0;
 `;
 
 export const PanelIconButton = (props: PanelIconButton) => {
@@ -22,7 +23,7 @@ export const PanelIconButton = (props: PanelIconButton) => {
     <PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId}>
       <StyledContent disabled={disabled}>
         <IconContainer>
-          <SessionIcon iconType={iconType} iconColor={color} iconSize="medium" />
+          <SessionIcon iconType={iconType} iconColor={color} iconSize="large" />
         </IconContainer>
         <PanelButtonText text={text} subtitle={subtitle} color={color} />
       </StyledContent>
diff --git a/ts/components/buttons/PanelRadioButton.tsx b/ts/components/buttons/PanelRadioButton.tsx
index af7936bb3..6f0cb2c41 100644
--- a/ts/components/buttons/PanelRadioButton.tsx
+++ b/ts/components/buttons/PanelRadioButton.tsx
@@ -7,13 +7,6 @@ const StyledPanelButton = styled(PanelButton)`
   padding-top: var(--margins-lg);
   padding-bottom: var(--margins-lg);
   text-align: left;
-
-  div {
-    span {
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-    }
-  }
 `;
 
 const StyledCheckContainer = styled.div`
diff --git a/ts/components/conversation/SessionConversation.tsx b/ts/components/conversation/SessionConversation.tsx
index b81fc485a..77dfe2865 100644
--- a/ts/components/conversation/SessionConversation.tsx
+++ b/ts/components/conversation/SessionConversation.tsx
@@ -250,7 +250,7 @@ export class SessionConversation extends React.Component<Props, State> {
       // return an empty message view
       return <MessageView />;
     }
-    // TODOLATER break showMessageDetails & selectionMode into it's own container component so we can use hooks to fetch relevant state from the store
+    // TODOLATER break selectionMode into it's own container component so we can use hooks to fetch relevant state from the store
     const selectionMode = selectedMessages.length > 0;
 
     const bannerText =
diff --git a/ts/components/conversation/header/ConversationHeaderTitle.tsx b/ts/components/conversation/header/ConversationHeaderTitle.tsx
index 179f55a7e..d496b846a 100644
--- a/ts/components/conversation/header/ConversationHeaderTitle.tsx
+++ b/ts/components/conversation/header/ConversationHeaderTitle.tsx
@@ -1,14 +1,13 @@
-import { isNumber } from 'lodash';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useDisappearingMessageSettingText } from '../../../hooks/useParamSelector';
 import { useIsRightPanelShowing } from '../../../hooks/useUI';
-import { TimerOptions } from '../../../session/disappearing_messages/timerOptions';
 import { closeRightPanel, openRightPanel } from '../../../state/ducks/conversations';
 import { resetRightOverlayMode, setRightOverlayMode } from '../../../state/ducks/section';
 import {
   useSelectedConversationDisappearingMode,
   useSelectedConversationKey,
-  useSelectedExpireTimer,
   useSelectedIsGroup,
   useSelectedIsKickedFromGroup,
   useSelectedIsNoteToSelf,
@@ -47,7 +46,10 @@ export const ConversationHeaderTitle = () => {
   const members = useSelectedMembers();
 
   const expirationMode = useSelectedConversationDisappearingMode();
-  const expireTimer = useSelectedExpireTimer();
+  const disappearingMessageSubtitle = useDisappearingMessageSettingText({
+    convoId,
+    abbreviate: true,
+  });
 
   const [visibleSubtitle, setVisibleSubtitle] = useState<SubtitleStringsType>(
     'disappearingMessages'
@@ -81,39 +83,20 @@ export const ConversationHeaderTitle = () => {
     return null;
   }, [i18n, isGroup, isKickedFromGroup, isPublic, members.length, subscriberCount]);
 
-  // TODO legacy messages support will be removed in a future release
-  // NOTE If disappearing messages is defined we must show it first
-  const disappearingMessageSubtitle = useMemo(() => {
-    const disappearingMessageSettingText =
-      expirationMode === 'deleteAfterRead'
-        ? window.i18n('disappearingMessagesModeAfterRead')
-        : expirationMode === 'deleteAfterSend'
-        ? window.i18n('disappearingMessagesModeAfterSend')
-        : expirationMode === 'legacy'
-        ? isMe || (isGroup && !isPublic)
-          ? window.i18n('disappearingMessagesModeAfterSend')
-          : window.i18n('disappearingMessagesModeAfterRead')
-        : null;
-
-    const abbreviatedExpireTime = isNumber(expireTimer)
-      ? TimerOptions.getAbbreviated(expireTimer)
-      : null;
-
-    return expireTimer && disappearingMessageSettingText
-      ? `${disappearingMessageSettingText}${
-          abbreviatedExpireTime ? ` - ${abbreviatedExpireTime}` : ''
-        }`
-      : null;
-  }, [expirationMode, expireTimer, isGroup, isMe, isPublic]);
-
   const handleRightPanelToggle = () => {
     if (isRightPanelOn) {
       dispatch(closeRightPanel());
       return;
     }
 
+    // NOTE If disappearing messages is defined we must show it first
     if (visibleSubtitle === 'disappearingMessages') {
-      dispatch(setRightOverlayMode({ type: 'disappearing_messages', params: null }));
+      dispatch(
+        setRightOverlayMode({
+          type: 'disappearing_messages',
+          params: null,
+        })
+      );
     } else {
       dispatch(resetRightOverlayMode());
     }
@@ -122,7 +105,7 @@ export const ConversationHeaderTitle = () => {
 
   useEffect(() => {
     if (visibleSubtitle !== 'disappearingMessages') {
-      if (disappearingMessageSubtitle) {
+      if (!isEmpty(disappearingMessageSubtitle)) {
         setVisibleSubtitle('disappearingMessages');
       } else {
         setVisibleSubtitle('notifications');
diff --git a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx
index 7d15923a6..578e22fd1 100644
--- a/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx
+++ b/ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx
@@ -7,6 +7,7 @@ import styled from 'styled-components';
 import { Data } from '../../../../data/data';
 import { SessionIconButton } from '../../../icon';
 
+import { useDisappearingMessageSettingText } from '../../../../hooks/useParamSelector';
 import { useIsRightPanelShowing } from '../../../../hooks/useUI';
 import {
   deleteAllMessagesByConvoIdWithConfirmation,
@@ -216,6 +217,10 @@ export const OverlayRightPanelSettings = () => {
   const isGroup = useSelectedIsGroup();
   const isPublic = useSelectedIsPublic();
   const weAreAdmin = useSelectedWeAreAdmin();
+  const disappearingMessagesSubtitle = useDisappearingMessageSettingText({
+    convoId: selectedConvoKey,
+    separator: ': ',
+  });
 
   useEffect(() => {
     let isCancelled = false;
@@ -322,7 +327,7 @@ export const OverlayRightPanelSettings = () => {
 
         {showUpdateGroupMembersButton && (
           <PanelIconButton
-            iconType={'groupMembers'}
+            iconType={'group'}
             text={window.i18n('groupMembers')}
             onClick={() => {
               void showUpdateGroupMembersByConvoId(selectedConvoKey);
@@ -334,6 +339,7 @@ export const OverlayRightPanelSettings = () => {
           <PanelIconButton
             iconType={'timer50'}
             text={window.i18n('disappearingMessages')}
+            subtitle={disappearingMessagesSubtitle}
             onClick={() => {
               dispatch(setRightOverlayMode({ type: 'disappearing_messages', params: null }));
             }}
diff --git a/ts/components/icon/Icons.tsx b/ts/components/icon/Icons.tsx
index 86b2d917d..78967591e 100644
--- a/ts/components/icon/Icons.tsx
+++ b/ts/components/icon/Icons.tsx
@@ -33,7 +33,6 @@ export type SessionIconType =
   | 'fullscreen'
   | 'gear'
   | 'group'
-  | 'groupMembers'
   | 'hangup'
   | 'image'
   | 'info'
@@ -230,13 +229,6 @@ export const icons: Record<string, { path: string; viewBox: string; ratio: numbe
     viewBox: '0 0 27 23',
     ratio: 1.17,
   },
-  // NOTE this is a temporary icon until the closed group rebuild is done
-  groupMembers: {
-    path:
-      'M19.0674 11.1167C22.141 11.1167 24.647 8.6258 24.647 5.55835C24.647 2.4909 22.1466 0 19.0674 0C15.9882 0 13.4878 2.4909 13.4878 5.55835C13.4878 8.6258 15.9882 11.1167 19.0674 11.1167ZM19.0674 2.24461C20.9048 2.24461 22.3994 3.73355 22.3994 5.56395C22.3994 7.39434 20.9048 8.88329 19.0674 8.88329C17.23 8.88329 15.7354 7.39434 15.7354 5.56395C15.7354 3.73355 17.23 2.24461 19.0674 2.24461ZM19.0674 12.9415C14.7015 12.9415 11.0098 15.2757 9.82422 18.4719C9.5489 19.2108 10.0771 20 10.8693 20C11.3582 20 11.7684 19.681 11.9369 19.222C12.7966 16.8934 15.6623 15.1805 19.0674 15.1805C22.4724 15.1805 25.3381 16.899 26.1978 19.222C26.3664 19.6754 26.7766 20 27.2654 20C28.0577 20 28.5858 19.2108 28.3105 18.4719C27.1249 15.2757 23.4333 12.9415 19.0674 12.9415ZM30.5581 10.8928C33.0136 10.8928 35.0139 8.90009 35.0139 6.44836C35.0139 3.99664 33.0136 2.00952 30.5581 2.00952C28.1026 2.00952 26.1023 4.00224 26.1023 6.44836C26.1023 8.89449 28.1026 10.8928 30.5581 10.8928ZM30.5581 3.80073C32.0247 3.80073 33.2215 4.9874 33.2215 6.45396C33.2215 7.92051 32.0303 9.1072 30.5581 9.1072C29.086 9.1072 27.8947 7.91492 27.8947 6.45396C27.8947 4.993 29.086 3.80073 30.5581 3.80073ZM7.45314 10.8928C9.90861 10.8928 11.9089 8.90009 11.9089 6.44836C11.9089 3.99664 9.90861 2.00952 7.45314 2.00952C4.99766 2.00952 2.99731 4.00224 2.99731 6.44836C2.99731 8.89449 4.99766 10.8928 7.45314 10.8928ZM7.45314 3.80073C8.91968 3.80073 10.1165 4.9874 10.1165 6.45396C10.1165 7.92051 8.9253 9.1072 7.45314 9.1072C5.98097 9.1072 4.78976 7.91492 4.78976 6.45396C4.78976 4.993 5.98097 3.80073 7.45314 3.80073ZM37.9415 16.7702C36.9919 14.2177 34.042 12.3481 30.5526 12.3481C28.9681 12.3481 27.4959 12.7344 26.271 13.3949C26.8217 13.7699 27.333 14.1897 27.7881 14.6487C28.6141 14.3241 29.5525 14.1338 30.5526 14.1338C33.2722 14.1338 35.5647 15.5052 36.2502 17.3635C36.3851 17.7274 36.711 17.9849 37.1043 17.9849C37.7392 17.9849 38.1607 17.3523 37.9415 16.7646V16.7702ZM11.8021 13.4397C10.5604 12.7568 9.06572 12.3538 7.44747 12.3538C3.95811 12.3538 1.00817 14.2233 0.0585709 16.7758C-0.160568 17.3691 0.260847 17.9961 0.895787 17.9961C1.28349 17.9961 1.61501 17.7386 1.74987 17.3748C2.43538 15.5164 4.7279 14.145 7.44747 14.145C8.48697 14.145 9.45904 14.3465 10.3075 14.6935C10.757 14.2345 11.2571 13.8203 11.8021 13.4397Z',
-    viewBox: '0 0 38 20',
-    ratio: 1.5,
-  },
   ellipses: {
     path:
       'M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z',
diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx
index 2b7d6fecd..ac2ea11b2 100644
--- a/ts/components/settings/SettingsThemeSwitcher.tsx
+++ b/ts/components/settings/SettingsThemeSwitcher.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { switchThemeTo } from '../../themes/switchTheme';
+import { getPrimaryColor } from '../../state/selectors/primaryColor';
 import { getTheme } from '../../state/selectors/theme';
-import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio';
-import { SpacerLG, SpacerMD } from '../basic/Text';
-import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem';
 import {
+  StyleSessionSwitcher,
   getPrimaryColors,
   getThemeColors,
-  StyleSessionSwitcher,
 } from '../../themes/constants/colors';
 import { switchPrimaryColorTo } from '../../themes/switchPrimaryColor';
-import { getPrimaryColor } from '../../state/selectors/primaryColor';
+import { switchThemeTo } from '../../themes/switchTheme';
+import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio';
+import { SpacerLG, SpacerMD } from '../basic/Text';
+import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem';
 
 const StyledSwitcherContainer = styled.div`
   font-size: var(--font-size-md);
@@ -99,6 +99,7 @@ const Themes = () => {
             label={''}
             value={theme.id}
             inputName={'theme-switcher'}
+            style={{ padding: '0 0 0 var(--margins-lg)' }}
           />
         </ThemeContainer>
       ))}
diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts
index b71b9be71..2a8734406 100644
--- a/ts/hooks/useParamSelector.ts
+++ b/ts/hooks/useParamSelector.ts
@@ -379,3 +379,44 @@ export function useSortedGroupMembers(convoId: string | undefined): Array<string
   // we need to clone the array before being able to call sort() it
   return compact(convoProps.members?.slice()?.sort()) || [];
 }
+
+export function useDisappearingMessageSettingText({
+  convoId,
+  abbreviate,
+  separator = ' - ',
+}: {
+  convoId?: string;
+  abbreviate?: boolean;
+  separator?: string;
+}): string {
+  const convoProps = useConversationPropsById(convoId);
+  if (!convoProps) {
+    return '';
+  }
+
+  const { expirationMode, expireTimer, isMe, isPublic } = convoProps;
+
+  const isGroup = !convoProps.isPrivate && !convoProps.isPublic;
+
+  // TODO legacy messages support will be removed in a future release
+  const expirationModeText =
+    expirationMode === 'deleteAfterRead'
+      ? window.i18n('disappearingMessagesModeAfterRead')
+      : expirationMode === 'deleteAfterSend'
+      ? window.i18n('disappearingMessagesModeAfterSend')
+      : expirationMode === 'legacy'
+      ? isMe || (isGroup && !isPublic)
+        ? window.i18n('disappearingMessagesModeAfterSend')
+        : window.i18n('disappearingMessagesModeAfterRead')
+      : null;
+
+  const expireTimerText = isNumber(expireTimer)
+    ? abbreviate
+      ? TimerOptions.getAbbreviated(expireTimer)
+      : TimerOptions.getName(expireTimer)
+    : null;
+
+  return expireTimer && expirationModeText
+    ? `${expirationModeText}${expireTimerText ? `${separator}${expireTimerText}` : ''}`
+    : '';
+}
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index 6727a8171..aa6fdd60b 100644
--- a/ts/themes/globals.tsx
+++ b/ts/themes/globals.tsx
@@ -36,7 +36,6 @@ export type ThemeGlobals = {
   '--main-view-header-height': string;
   '--composition-container-height': string;
   '--search-input-height': string;
-  '--toggle-width': string;
 
   /* Animations */
   '--default-duration': string;
@@ -122,7 +121,6 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--main-view-header-height': '68px',
   '--composition-container-height': '60px',
   '--search-input-height': '34px',
-  '--toggle-width': '51px',
 
   '--default-duration': '0.25s',