diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index 4a4ccbce2..4783e363c 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -65,6 +65,9 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 display: props.alwaysDisplayToolbar ? 'flex' : 'none',
               },
               '@mdDown': { px: '15px' },
+              '@media (max-width: 300px)': {
+                display: 'none',
+              },
             }}
           >
             {props.children}
@@ -76,6 +79,9 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
                 '@lgDown': {
                   display: 'none',
                 },
+                '@media (max-width: 300px)': {
+                  display: 'flex',
+                },
               }}
             >
               <ControlButtonBox {...props} />