diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
index 65f9eaf04..445b9a9a0 100644
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
@@ -98,7 +98,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
               onBlur={handleFileNameInputBlur}
             />
           ) : (
-            <div className="break-word mb-1 text-sm">
+            <div className="break-word mb-1 text-mobile-menu-item md:text-sm">
               <span className="align-middle">{file.name}</span>
               {file.protected && (
                 <Icon type="lock-filled" className="ml-2 inline align-middle text-neutral" size="small" />
diff --git a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
index d6d3218dd..6eb4b7cd9 100644
--- a/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
+++ b/packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
@@ -40,7 +40,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
       </button>
       <Popover anchorElement={menuButtonRef.current} open={isOpen} togglePopover={toggleMenu} className="py-2">
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             previewHandler(file)
             closeMenu()
@@ -51,7 +51,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
         </button>
         {isAttachedToNote ? (
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
             onClick={() => {
               handleFileAction({
                 type: PopoverFileItemActionType.DetachFileToNote,
@@ -65,7 +65,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
           </button>
         ) : (
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
             onClick={() => {
               handleFileAction({
                 type: PopoverFileItemActionType.AttachFileToNote,
@@ -80,7 +80,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
         )}
         <HorizontalSeparator classes="my-1" />
         <button
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             handleFileAction({
               type: PopoverFileItemActionType.ToggleFileProtection,
@@ -103,7 +103,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
         </button>
         <HorizontalSeparator classes="my-1" />
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             handleFileAction({
               type: PopoverFileItemActionType.DownloadFile,
@@ -116,7 +116,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
           Download
         </button>
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             setIsRenamingFile(true)
             closeMenu()
@@ -126,7 +126,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
           Rename
         </button>
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             handleFileAction({
               type: PopoverFileItemActionType.DeleteFile,
diff --git a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
index 9a6665743..62334b75d 100644
--- a/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
+++ b/packages/web/src/javascripts/Components/FileContextMenu/FileMenuOptions.tsx
@@ -1,8 +1,6 @@
 import { FunctionComponent, useCallback, useMemo } from 'react'
 import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
-import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import Icon from '@/Components/Icon/Icon'
-import Switch from '@/Components/Switch/Switch'
 import { observer } from 'mobx-react-lite'
 import { FilesController } from '@/Controllers/FilesController'
 import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
@@ -10,6 +8,8 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
+import MenuItem from '../Menu/MenuItem'
+import { MenuItemType } from '../Menu/MenuItemType'
 
 type Props = {
   closeMenu: () => void
@@ -78,74 +78,56 @@ const FileMenuOptions: FunctionComponent<Props> = ({
 
   return (
     <>
-      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        onClick={onPreview}
-      >
+      <MenuItem onClick={onPreview}>
         <Icon type="file" className="mr-2 text-neutral" />
         Preview file
-      </button>
+      </MenuItem>
       {selectedFiles.length === 1 && (
         <>
           {isFileAttachedToNote ? (
-            <button
-              className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-              onClick={onDetach}
-            >
+            <MenuItem onClick={onDetach}>
               <Icon type="link-off" className="mr-2 text-neutral" />
               Detach from note
-            </button>
+            </MenuItem>
           ) : shouldShowAttachOption ? (
-            <button
-              className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-              onClick={onAttach}
-            >
+            <MenuItem onClick={onAttach}>
               <Icon type="link" className="mr-2 text-neutral" />
               Attach to note
-            </button>
+            </MenuItem>
           ) : null}
         </>
       )}
       <HorizontalSeparator classes="my-1" />
-      <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
-        onClick={() => {
-          void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
+      <MenuItem
+        type={MenuItemType.SwitchButton}
+        checked={hasProtectedFiles}
+        onChange={(hasProtectedFiles) => {
+          void filesController.setProtectionForFiles(hasProtectedFiles, selectionController.selectedFiles)
         }}
       >
-        <span className="flex items-center">
-          <Icon type="password" className="mr-2 text-neutral" />
-          Password protection
-        </span>
-        <Switch
-          className="pointer-events-none px-0"
-          tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
-          checked={hasProtectedFiles}
-        />
-      </button>
+        <Icon type="password" className="mr-2 text-neutral" />
+        Password protection
+      </MenuItem>
       <HorizontalSeparator classes="my-1" />
-      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+      <MenuItem
         onClick={() => {
           void filesController.downloadFiles(selectionController.selectedFiles)
         }}
       >
         <Icon type="download" className="mr-2 text-neutral" />
         Download
-      </button>
+      </MenuItem>
       {shouldShowRenameOption && (
-        <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        <MenuItem
           onClick={() => {
             renameToggleCallback?.(true)
           }}
         >
           <Icon type="pencil" className="mr-2 text-neutral" />
           Rename
-        </button>
+        </MenuItem>
       )}
-      <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+      <MenuItem
         onClick={() => {
           closeMenuAndToggleFilesList()
           void filesController.deleteFilesPermanently(selectionController.selectedFiles)
@@ -153,7 +135,7 @@ const FileMenuOptions: FunctionComponent<Props> = ({
       >
         <Icon type="trash" className="mr-2 text-danger" />
         <span className="text-danger">Delete permanently</span>
-      </button>
+      </MenuItem>
       <HorizontalSeparator classes="my-2" />
       <div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
         {!hasSelectedMultipleFiles && (
diff --git a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
index 906e03555..d28d4dac6 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -8,8 +8,8 @@ import { MenuItemType } from './MenuItemType'
 import RadioIndicator from '../RadioIndicator/RadioIndicator'
 
 type MenuItemProps = {
-  type: MenuItemType
   children: ReactNode
+  type?: MenuItemType
   onClick?: MouseEventHandler<HTMLButtonElement>
   onChange?: SwitchProps['onChange']
   onBlur?: (event: { relatedTarget: EventTarget | null }) => void
@@ -28,7 +28,7 @@ const MenuItem = forwardRef(
       onChange,
       onBlur,
       className = '',
-      type,
+      type = MenuItemType.IconButton,
       checked,
       icon,
       iconClassName,
@@ -59,7 +59,7 @@ const MenuItem = forwardRef(
           ref={ref}
           role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
           tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
-          className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none ${className}`}
+          className={`flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item ${className}`}
           onClick={onClick}
           onBlur={onBlur}
           {...(type === MenuItemType.RadioButton ? { 'aria-checked': checked } : {})}
diff --git a/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx b/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
index c08c1aa67..702626f70 100644
--- a/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
+++ b/packages/web/src/javascripts/Components/NoteTags/NoteTagsPanel.tsx
@@ -33,7 +33,7 @@ const ListItem = ({
   return isSearching ? (
     <button
       onClick={handleSearchResultClick}
-      className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop"
+      className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
     >
       {splitQueryInString(longTitle, autocompleteSearchQuery).map((substring, index) => (
         <span
@@ -49,7 +49,7 @@ const ListItem = ({
       ))}
     </button>
   ) : (
-    <div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text">
+    <div className="max-w-80 flex w-full items-center justify-between border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text md:text-menu-item">
       <span className="overflow-hidden overflow-ellipsis whitespace-nowrap">{longTitle}</span>
       <button
         onClick={handleNoteTagRemove}
@@ -150,7 +150,7 @@ const NoteTagsPanel = ({
               onClick={async () => {
                 await noteTagsController.createAndAddNewTag()
               }}
-              className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop"
+              className="max-w-80 flex w-full items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-info-backdrop focus:bg-info-backdrop md:text-menu-item"
             >
               <span>Create new tag:</span>
               <span className="ml-2 flex items-center rounded bg-contrast py-1 pl-1 pr-2 text-xs text-text">
diff --git a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
index 264903255..d36e95e90 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/AddTagOption.tsx
@@ -33,7 +33,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
           }
         }}
         ref={buttonRef}
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
       >
         <div className="flex items-center">
           <Icon type="hashtag" className="mr-2 text-neutral" />
@@ -52,7 +52,7 @@ const AddTagOption: FunctionComponent<Props> = ({ navigationController, notesCon
         {navigationController.tags.map((tag) => (
           <button
             key={tag.uuid}
-            className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="max-w-80 flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
             onClick={() => {
               notesController.isTagInSelectedNotes(tag)
                 ? notesController.removeTagFromSelectedNotes(tag).catch(console.error)
diff --git a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
index 9ed3b0a51..6eb80a295 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ChangeEditorOption.tsx
@@ -30,7 +30,7 @@ const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({ applic
           }
         }}
         ref={buttonRef}
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
       >
         <div className="flex items-center">
           <Icon type="dashboard" className="mr-2 text-neutral" />
diff --git a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
index 89814d1f0..1c3daf094 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/ListedActionsOption.tsx
@@ -31,7 +31,7 @@ const ListedActionsOption: FunctionComponent<Props> = ({ application, note }) =>
           }
         }}
         ref={buttonRef}
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
       >
         <div className="flex items-center">
           <Icon type="listed" className="mr-2 text-neutral" />
diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
index 431401144..2b5150d4f 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -25,7 +25,7 @@ type DeletePermanentlyButtonProps = {
 
 const DeletePermanentlyButton = ({ onClick }: DeletePermanentlyButtonProps) => (
   <button
-    className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+    className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
     onClick={onClick}
   >
     <Icon type="close" className="mr-2 text-danger" />
@@ -137,7 +137,7 @@ const SpellcheckOptions: FunctionComponent<{
   return (
     <div className="flex flex-col">
       <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={() => {
           notesController.toggleGlobalSpellcheckForNote(note).catch(console.error)
         }}
@@ -271,7 +271,7 @@ const NotesOptions = ({
       {notes.length === 1 && (
         <>
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
             onClick={openRevisionHistoryModal}
           >
             <Icon type="history" className={iconClass} />
@@ -281,7 +281,7 @@ const NotesOptions = ({
         </>
       )}
       <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={() => {
           notesController.setLockSelectedNotes(!locked)
         }}
@@ -293,7 +293,7 @@ const NotesOptions = ({
         <Switch className="px-0" checked={locked} />
       </button>
       <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={() => {
           notesController.setHideSelectedNotePreviews(!hidePreviews)
         }}
@@ -305,7 +305,7 @@ const NotesOptions = ({
         <Switch className="px-0" checked={!hidePreviews} />
       </button>
       <button
-        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={() => {
           notesController.setProtectSelectedNotes(!protect).catch(console.error)
         }}
@@ -332,7 +332,7 @@ const NotesOptions = ({
       )}
       {unpinned && (
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
           onClick={() => {
             notesController.setPinSelectedNotes(true)
           }}
@@ -343,7 +343,7 @@ const NotesOptions = ({
       )}
       {pinned && (
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
           onClick={() => {
             notesController.setPinSelectedNotes(false)
           }}
@@ -353,7 +353,7 @@ const NotesOptions = ({
         </button>
       )}
       <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={() => {
           application.isNativeMobileWeb() ? shareSelectedNotes(application, notes) : downloadSelectedItems()
         }}
@@ -363,7 +363,7 @@ const NotesOptions = ({
       </button>
       {application.platform === Platform.Android && (
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
           onClick={() => downloadSelectedNotesOnAndroid(application, notes)}
         >
           <Icon type="download" className={iconClass} />
@@ -371,7 +371,7 @@ const NotesOptions = ({
         </button>
       )}
       <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
         onClick={duplicateSelectedItems}
       >
         <Icon type="copy" className={iconClass} />
@@ -379,7 +379,7 @@ const NotesOptions = ({
       </button>
       {unarchived && (
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
           onClick={async () => {
             await notesController.setArchiveSelectedNotes(true).catch(console.error)
             closeMenuAndToggleNotesList()
@@ -391,7 +391,7 @@ const NotesOptions = ({
       )}
       {archived && (
         <button
-          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
           onClick={async () => {
             await notesController.setArchiveSelectedNotes(false).catch(console.error)
             closeMenuAndToggleNotesList()
@@ -411,7 +411,7 @@ const NotesOptions = ({
           />
         ) : (
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
             onClick={async () => {
               await notesController.setTrashSelectedNotes(true)
               closeMenuAndToggleNotesList()
@@ -424,7 +424,7 @@ const NotesOptions = ({
       {trashed && (
         <>
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
             onClick={async () => {
               await notesController.setTrashSelectedNotes(false)
               closeMenuAndToggleNotesList()
@@ -440,7 +440,7 @@ const NotesOptions = ({
             }}
           />
           <button
-            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+            className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-menu-item"
             onClick={async () => {
               await notesController.emptyTrash()
               closeMenuAndToggleNotesList()
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
index 878530337..be3440468 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -142,7 +142,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
     <div ref={mainRef}>
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Themes</div>
       <button
-        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+        className="flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
         onClick={toggleDefaultTheme}
         ref={defaultThemeButtonRef}
       >
@@ -156,7 +156,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ application, quickSet
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Tools</div>
       {toggleableComponents.map((component) => (
         <button
-          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none"
+          className="flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none md:text-sm"
           onClick={() => {
             toggleComponent(component)
           }}
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index d52c5bf16..71f60c186 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -49,7 +49,7 @@ const ThemesMenuButton: FunctionComponent<Props> = ({ application, item }) => {
   return (
     <button
       className={
-        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-sm text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2'
+        'group flex w-full cursor-pointer items-center justify-between border-0 bg-transparent px-3 py-1.5 text-left text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none disabled:bg-default disabled:text-passive-2 md:text-sm'
       }
       disabled={item.identifier === FeatureIdentifier.DynamicTheme && isMobile}
       onClick={toggleTheme}
diff --git a/packages/web/tailwind.config.js b/packages/web/tailwind.config.js
index c8d1d4787..102361dd8 100644
--- a/packages/web/tailwind.config.js
+++ b/packages/web/tailwind.config.js
@@ -83,6 +83,7 @@ module.exports = {
       },
       fontSize: {
         'menu-item': '0.813rem',
+        'mobile-menu-item': '0.9rem',
         editor: 'var(--sn-stylekit-font-size-editor)',
       },
       screens: {