diff --git a/packages/web/components/templates/article/FontFamiliesOptions.tsx b/packages/web/components/templates/article/FontFamiliesOptions.tsx
index c38ad1ebb..a12c6a1e7 100644
--- a/packages/web/components/templates/article/FontFamiliesOptions.tsx
+++ b/packages/web/components/templates/article/FontFamiliesOptions.tsx
@@ -32,7 +32,7 @@ function FontOption(props: FontOptionProps):JSX.Element {
   return (
     <HStack distribution='between' alignment='start' css={{width: '100%', pt: '14px'}}>
       <StyledText
-        css={{ m: '0px', fontSize: 16, fontWeight: isSelected ? 'bold' : 'regular', fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
+        css={{ m: '0px', fontSize: 16, fontFamily: props.family, textTransform: 'capitalize', cursor: 'pointer' }}
         onClick={() => props.onSelect(props.family)}
       >
         {props.family}
@@ -58,7 +58,7 @@ export function FontFamiliesOptions(props: FontFamiliesListProps): JSX.Element {
             <Box css={{position: 'relative', top: 2, right: 5}}>
               <CaretLeft color={theme.colors.textSubtle.toString()} size={15} />
             </Box>
-            <StyledText css={{m: 0, pt: 4, fontSize: 12, fontWeight: '600', color: theme.colors.textSubtle.toString()}}>
+            <StyledText css={{m: 0, pt: 4, fontSize: 12, color: theme.colors.textSubtle.toString()}}>
               Back
             </StyledText>
           </HStack>
diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx
index b2ac1b8b4..6f8b2cd9a 100644
--- a/packages/web/components/templates/article/ReaderSettingsControl.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx
@@ -3,7 +3,7 @@ import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
 import { styled, theme } from '../../tokens/stitches.config'
 import { useEffect, useState } from 'react'
-import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight } from 'phosphor-react'
+import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHorizontal, CaretRight, Cursor } from 'phosphor-react'
 import { TickedRangeSlider } from '../../elements/TickedRangeSlider'
 import { showSuccessToast } from '../../../lib/toastHelpers'
 import { FontFamiliesOptions } from './FontFamiliesOptions'
@@ -69,24 +69,16 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element {
             py: '12px',
             width: '100%',
             height: '44px',
-            verticalAlign: 'baseline'
+            verticalAlign: 'baseline',
+            cursor: 'pointer',
           }}
+          onClick={() => setShowFontOptions(true)}
         >
           <StyledText css={{ m: '0px' }}>Font:</StyledText>
-          <HStack
-            alignment='center'
-            css={{cursor: 'pointer', marginLeft: 'auto' }}
-            onClick={() => setShowFontOptions(true)}
-          >
-            <StyledText
-              css={{ m: '0px', fontFamily: readeringSettings.fontFamily, textTransform: 'capitalize' }}
-            >
-              {readeringSettings.fontFamily}
-            </StyledText>
-            <Box css={{  }}>
-              <CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
-            </Box>
-          </HStack>
+          <StyledText css={{ m: '0px', marginLeft: 'auto', pr: '4px', fontFamily: readeringSettings.fontFamily, textTransform: 'capitalize' }}>
+            {readeringSettings.fontFamily}
+          </StyledText>
+          <CaretRight width={16} height={16} color={theme.colors.grayTextContrast.toString()}/>
         </HStack>
         <HorizontalDivider css={{
           '@smDown': {