diff --git a/packages/blocks-editor/src/Editor/BlocksEditor.tsx b/packages/blocks-editor/src/Editor/BlocksEditor.tsx
index ecdd4cd7e..ecd3eeeea 100644
--- a/packages/blocks-editor/src/Editor/BlocksEditor.tsx
+++ b/packages/blocks-editor/src/Editor/BlocksEditor.tsx
@@ -30,6 +30,8 @@ import FloatingTextFormatToolbarPlugin from '../Lexical/Plugins/FloatingTextForm
 import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugin';
 import {truncateString} from './Utils';
 import {SuperEditorContentId} from './Constants';
+import {classNames} from '@standardnotes/utils';
+import {EditorLineHeight} from '@standardnotes/snjs';
 
 type BlocksEditorProps = {
   onChange: (value: string, preview: string) => void;
@@ -38,6 +40,7 @@ type BlocksEditorProps = {
   previewLength: number;
   spellcheck?: boolean;
   ignoreFirstChange?: boolean;
+  lineHeight?: EditorLineHeight;
 };
 
 export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
@@ -47,6 +50,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
   previewLength,
   spellcheck,
   ignoreFirstChange = false,
+  lineHeight,
 }) => {
   const [didIgnoreFirstChange, setDidIgnoreFirstChange] = useState(false);
   const handleChange = useCallback(
@@ -98,7 +102,11 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
             <div className="editor" ref={onRef}>
               <ContentEditable
                 id={SuperEditorContentId}
-                className={`ContentEditable__root overflow-y-auto ${className}`}
+                className={classNames(
+                  'ContentEditable__root overflow-y-auto',
+                  lineHeight && `leading-${lineHeight.toLowerCase()}`,
+                  className,
+                )}
                 spellCheck={spellcheck}
               />
             </div>
diff --git a/packages/web/src/javascripts/Utils/ConcatenateClassNames.ts b/packages/utils/src/Domain/Utils/ClassNames.ts
similarity index 100%
rename from packages/web/src/javascripts/Utils/ConcatenateClassNames.ts
rename to packages/utils/src/Domain/Utils/ClassNames.ts
diff --git a/packages/utils/src/Domain/index.ts b/packages/utils/src/Domain/index.ts
index 7db6f5e1e..2099f52be 100644
--- a/packages/utils/src/Domain/index.ts
+++ b/packages/utils/src/Domain/index.ts
@@ -1,4 +1,5 @@
 export * from './Utils/Utils'
+export * from './Utils/ClassNames'
 export * from './Uuid/UuidGenerator'
 export * from './Uuid/UuidMap'
 export * from './Uuid/Utils'
diff --git a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
index eacdd2b0f..75afaa6d8 100644
--- a/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
+++ b/packages/web/src/javascripts/Components/Button/RoundIconButton.tsx
@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef, MouseEventHandler } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   onClick: () => void
diff --git a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index 1f149f89f..89a81d031 100644
--- a/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx
@@ -20,7 +20,7 @@ import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
 import { ChallengeModalValues } from './ChallengeModalValues'
 import { InputValue } from './InputValue'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx b/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx
index 141d181e7..7cd78b738 100644
--- a/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx
+++ b/packages/web/src/javascripts/Components/ClearInputButton/ClearInputButton.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import Icon from '../Icon/Icon'
 
diff --git a/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx b/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx
index 5c07f0118..829f03f73 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Calendar/InfiniteCalendar.tsx
@@ -6,7 +6,7 @@ import { CalendarMonth } from './CalendarMonth'
 import { CalendarMonths } from './Constants'
 import { insertMonths, insertMonthsWithTarget } from './CalendarUtilts'
 import { InfiniteScrollerInterface, InfinteScroller } from '../InfiniteScroller/InfiniteScroller'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { LoggingDomain, log } from '@/Logging'
 import { usePrevious } from './usePrevious'
 import { isMobileScreen } from '@/Utils'
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
index eceac56be..323d8606e 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentList.tsx
@@ -11,7 +11,7 @@ import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
 import { ElementIds } from '@/Constants/ElementIDs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ContentType, SNTag } from '@standardnotes/snjs'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
index 1dd175139..f14063967 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ContentListView.tsx
@@ -30,7 +30,7 @@ import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import SearchBar from '../SearchBar/SearchBar'
 import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
 import { LinkingController } from '@/Controllers/LinkingController'
diff --git a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
index 04d541906..cbac4e18d 100644
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
@@ -9,7 +9,7 @@ import { DisplayableListItemProps } from './Types/DisplayableListItemProps'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
 import { useApplication } from '../ApplicationView/ApplicationProvider'
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
index 63d1b709d..696bf510c 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/ContentListHeader.tsx
@@ -1,7 +1,7 @@
 import { WebApplication } from '@/Application/Application'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import Icon from '../../Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Popover from '@/Components/Popover/Popover'
 import DisplayOptionsMenu from './DisplayOptionsMenu'
 import { NavigationMenuButton } from '@/Components/NavigationMenu/NavigationMenu'
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
index 94d3ba531..66e3d8f99 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/DisplayOptionsMenu.tsx
@@ -20,7 +20,7 @@ import { DisplayOptionsMenuProps } from './DisplayOptionsMenuProps'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
 import NewNotePreferences from './NewNotePreferences'
 import { PreferenceMode } from './PreferenceMode'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import NoSubscriptionBanner from '@/Components/NoSubscriptionBanner/NoSubscriptionBanner'
 
 const DailyEntryModeEnabled = true
diff --git a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
index 1618fde48..5245df319 100644
--- a/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx
@@ -9,7 +9,7 @@ import { AnyTag } from '@/Controllers/Navigation/AnyTagType'
 import { PreferenceMode } from './PreferenceMode'
 import dayjs from 'dayjs'
 import { EditorOption, getDropdownItemsForAllEditors } from '@/Utils/DropdownItemsForEditors'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { NoteTitleFormatOptions } from './NoteTitleFormatOptions'
 
 const PrefChangeDebounceTimeInMs = 25
diff --git a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
index 41d30249e..e11bf8da4 100644
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -13,7 +13,7 @@ import { useContextMenuEvent } from '@/Hooks/useContextMenuEvent'
 import ListItemNotePreviewText from './ListItemNotePreviewText'
 import { ListItemTitle } from './ListItemTitle'
 import { log, LoggingDomain } from '@/Logging'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getIconAndTintForNoteType } from '@/Utils/Items/Icons/getIconAndTintForNoteType'
 
 const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
diff --git a/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx b/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
index 4910c913d..f6bb1cda1 100644
--- a/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
+++ b/packages/web/src/javascripts/Components/FileDragNDropProvider/FileDragNDropProvider.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { isHandlingFileDrag } from '@/Utils/DragTypeCheck'
 import { StreamingFileReader } from '@standardnotes/filepicker'
 import { FileItem } from '@standardnotes/snjs'
diff --git a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
index 24b8c5b9d..67a1f8a0a 100644
--- a/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/AccountMenuButton.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useRef } from 'react'
 import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
 import Icon from '../Icon/Icon'
diff --git a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
index a618788f0..02dae59a0 100644
--- a/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
+++ b/packages/web/src/javascripts/Components/Footer/QuickSettingsButton.tsx
@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useRef } from 'react'
 import Icon from '../Icon/Icon'
 import Popover from '../Popover/Popover'
diff --git a/packages/web/src/javascripts/Components/Icon/Icon.tsx b/packages/web/src/javascripts/Components/Icon/Icon.tsx
index aa9921324..df6d6be5a 100644
--- a/packages/web/src/javascripts/Components/Icon/Icon.tsx
+++ b/packages/web/src/javascripts/Components/Icon/Icon.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { LexicalIconName, LexicalIconNameToSvgMapping } from './LexicalIcons'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
index 04beefc1d..e52f75947 100644
--- a/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconPicker.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { EmojiString, Platform, VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { FunctionComponent, useMemo, useRef, useState } from 'react'
 import Dropdown from '../Dropdown/Dropdown'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
index d97a158b5..3a7a4da23 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
@@ -11,7 +11,7 @@ import {
 import { Disclosure, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import { observer } from 'mobx-react-lite'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import LinkedItemSearchResults from './LinkedItemSearchResults'
 import { LinkingController } from '@/Controllers/LinkingController'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
index 6a7c33573..dbcc7a28e 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -1,5 +1,5 @@
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { observer } from 'mobx-react-lite'
 import { KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
index 31ec4f92f..4a6d57b26 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -5,7 +5,7 @@ import LinkedItemBubble from './LinkedItemBubble'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ContentType } from '@standardnotes/snjs'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
 import { ItemLink } from '@/Utils/Items/Search/ItemLink'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
index b1b298aea..f0c56eabd 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemMeta.tsx
@@ -1,5 +1,5 @@
 import { splitQueryInString } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getTitleForLinkedTag } from '@/Utils/Items/Display/getTitleForLinkedTag'
 import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
index d6bbb7e23..3d4d7a58b 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Icon from '../Icon/Icon'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
index a1048345e..115400757 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx
@@ -2,7 +2,7 @@ import { FeatureName } from '@/Controllers/FeatureName'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
 import { observer } from 'mobx-react-lite'
 import { ChangeEventHandler, useEffect, useRef, useState } from 'react'
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
index 7f3f71dcd..b294451ee 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemsSectionItem.tsx
@@ -1,6 +1,6 @@
 import { FilesController } from '@/Controllers/FilesController'
 import { LinkingController } from '@/Controllers/LinkingController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { getIconForItem } from '@/Utils/Items/Icons/getIconForItem'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
diff --git a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
index 15fa53400..78f4880ac 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -6,7 +6,7 @@ import { IconType } from '@standardnotes/snjs'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 import { MenuItemType } from './MenuItemType'
 import RadioIndicator from '../Radio/RadioIndicator'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 
diff --git a/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx b/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx
index 4aac02512..e419c18b6 100644
--- a/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx
+++ b/packages/web/src/javascripts/Components/NoSubscriptionBanner/NoSubscriptionBanner.tsx
@@ -1,5 +1,5 @@
 import { WebApplication } from '@/Application/Application'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import Button from '../Button/Button'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx b/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
index dfddabf23..5fa2c9c30 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteStatusIndicator.tsx
@@ -1,6 +1,6 @@
 import { ElementIds } from '@/Constants/ElementIDs'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ReactNode, useCallback, useState } from 'react'
 import { IconType, PrefKey } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'
diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 403b6d79d..00f5b6803 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -10,7 +10,7 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { StringDeleteNote, STRING_DELETE_LOCKED_ATTEMPT, STRING_DELETE_PLACEHOLDER_ATTEMPT } from '@/Constants/Strings'
 import { log, LoggingDomain } from '@/Logging'
 import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import {
   ApplicationEvent,
   ComponentArea,
diff --git a/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx b/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx
index e806748c6..ee4053099 100644
--- a/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/PlainEditor/PlainEditor.tsx
@@ -5,7 +5,7 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { log, LoggingDomain } from '@/Logging'
 import { Disposer } from '@/Types/Disposer'
 import { EditorEventSource } from '@/Types/EditorEventSource'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { getPlaintextFontSize } from '@/Utils/getPlaintextFontSize'
 import {
   ApplicationEvent,
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts
index 422e3684d..fb1f58a49 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ClassNames.ts
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export const PopoverClassNames = classNames(
   'z-dropdown-menu w-full',
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
index f6cbbd58c..ba4aa35f3 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx
@@ -1,6 +1,6 @@
 import { WebApplication } from '@/Application/Application'
-import { isPayloadSourceRetrieved } from '@standardnotes/snjs'
-import { FunctionComponent, useCallback, useEffect, useRef } from 'react'
+import { ApplicationEvent, EditorLineHeight, isPayloadSourceRetrieved, PrefKey } from '@standardnotes/snjs'
+import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
 import { BlocksEditor, BlocksEditorComposer } from '@standardnotes/blocks-editor'
 import { ItemSelectionPlugin } from './Plugins/ItemSelectionPlugin/ItemSelectionPlugin'
 import { FileNode } from './Plugins/EncryptedFilePlugin/Nodes/FileNode'
@@ -22,6 +22,7 @@ import {
   ChangeEditorFunction,
 } from './Plugins/ChangeContentCallback/ChangeContentCallback'
 import PasswordPlugin from './Plugins/PasswordPlugin/PasswordPlugin'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
 
 const NotePreviewCharLimit = 160
 
@@ -44,6 +45,8 @@ export const SuperEditor: FunctionComponent<Props> = ({
   const changeEditorFunction = useRef<ChangeEditorFunction>()
   const ignoreNextChange = useRef(false)
 
+  const [lineHeight, setLineHeight] = useState<EditorLineHeight>(PrefDefaults[PrefKey.EditorLineHeight])
+
   const handleChange = useCallback(
     async (value: string, preview: string) => {
       if (ignoreNextChange.current === true) {
@@ -90,6 +93,20 @@ export const SuperEditor: FunctionComponent<Props> = ({
     return disposer
   }, [controller, controller.item.uuid])
 
+  const reloadPreferences = useCallback(() => {
+    const lineHeight = application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight])
+
+    setLineHeight(lineHeight)
+  }, [application])
+
+  useEffect(() => {
+    reloadPreferences()
+
+    return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
+      reloadPreferences()
+    })
+  }, [reloadPreferences, application])
+
   return (
     <div className="relative h-full w-full">
       <ErrorBoundary>
@@ -106,6 +123,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
                 className="relative h-full resize-none px-6 py-4 text-base focus:shadow-none focus:outline-none"
                 previewLength={NotePreviewCharLimit}
                 spellcheck={spellcheck}
+                lineHeight={lineHeight}
               >
                 <ItemSelectionPlugin currentNote={note.current} />
                 <FilePlugin />
diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
index 14f212790..ed56ec1dd 100644
--- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx
@@ -105,7 +105,7 @@ export const SuperNoteImporter: FunctionComponent<Props> = ({ note, application,
               <BlocksEditor
                 onChange={handleChange}
                 ignoreFirstChange={false}
-                className="relative relative resize-none text-base focus:shadow-none focus:outline-none"
+                className="relative resize-none text-base focus:shadow-none focus:outline-none"
                 previewLength={NotePreviewCharLimit}
                 spellcheck={note.spellcheck}
               >
diff --git a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
index 52a5ad0d5..7303dd36d 100644
--- a/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
@@ -24,7 +24,7 @@ import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils'
 import { shareSelectedNotes } from '@/NativeMobileWeb/ShareSelectedNotes'
 import { downloadSelectedNotesOnAndroid } from '@/NativeMobileWeb/DownloadSelectedNotesOnAndroid'
 import ProtectedUnauthorizedLabel from '../ProtectedItemOverlay/ProtectedUnauthorizedLabel'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 
diff --git a/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx b/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx
index 9365e038e..2224bb565 100644
--- a/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx
+++ b/packages/web/src/javascripts/Components/PanelResizer/PanelResizer.tsx
@@ -1,6 +1,6 @@
 import { Component, createRef, MouseEventHandler } from 'react'
 import { debounce } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export type ResizeFinishCallback = (
   lastWidth: number,
diff --git a/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx b/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
index dc0e898c5..d837b2eee 100644
--- a/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
+++ b/packages/web/src/javascripts/Components/PinNoteButton/PinNoteButton.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useCallback, useMemo } from 'react'
 import Icon from '@/Components/Icon/Icon'
 import { NotesController } from '@/Controllers/NotesController/NotesController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { keyboardStringForShortcut, PIN_NOTE_COMMAND } from '@standardnotes/ui-services'
 import { useCommandService } from '../ApplicationView/CommandProvider'
 
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index 01c0b8a85..7da8124af 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -1,6 +1,6 @@
 import { useDocumentRect } from '@/Hooks/useDocumentRect'
 import { useAutoElementRect } from '@/Hooks/useElementRect'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useCallback, useLayoutEffect, useState } from 'react'
 import Icon from '../Icon/Icon'
 import Portal from '../Portal/Portal'
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx
new file mode 100644
index 000000000..570f62a57
--- /dev/null
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx
@@ -0,0 +1,57 @@
+import { WebApplication } from '@/Application/Application'
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import { PrefDefaults } from '@/Constants/PrefDefaults'
+import { EditorLineHeight, PrefKey } from '@standardnotes/snjs'
+import { useMemo, useState } from 'react'
+import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
+
+type Props = {
+  application: WebApplication
+}
+
+const EditorDefaults = ({ application }: Props) => {
+  const [lineHeight, setLineHeight] = useState(() =>
+    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
+  )
+
+  const handleLineHeightChange = (value: string) => {
+    setLineHeight(value as EditorLineHeight)
+    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
+  }
+
+  const lineHeightDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorLineHeight).map((lineHeight) => ({
+        label: lineHeight,
+        value: lineHeight,
+      })),
+    [],
+  )
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Editor Defaults</Title>
+        <div>
+          <div>
+            <Subtitle>Line height</Subtitle>
+            <Text>Sets the line height (leading) in plaintext & Super notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-line-height"
+                label="Select the line height for plaintext notes"
+                items={lineHeightDropdownOptions}
+                value={lineHeight}
+                onChange={handleLineHeightChange}
+              />
+            </div>
+          </div>
+        </div>
+      </PreferencesSegment>
+    </PreferencesGroup>
+  )
+}
+
+export default EditorDefaults
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
index 2c2483ce5..96af163ed 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx
@@ -11,6 +11,7 @@ import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 import PlaintextDefaults from './PlaintextDefaults'
 import Persistence from './Persistence'
 import SmartViews from './SmartViews/SmartViews'
+import EditorDefaults from './EditorDefaults'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -22,6 +23,7 @@ const General: FunctionComponent<Props> = ({ viewControllerManager, application,
   <PreferencesPane>
     <Persistence application={application} />
     <PlaintextDefaults application={application} />
+    <EditorDefaults application={application} />
     <Defaults application={application} />
     <Tools application={application} />
     <SmartViews application={application} featuresController={viewControllerManager.featuresController} />
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx
index a11f61ea7..78507ed40 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/General/PlaintextDefaults.tsx
@@ -3,7 +3,7 @@ import Dropdown from '@/Components/Dropdown/Dropdown'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs'
+import { EditorFontSize, PrefKey } from '@standardnotes/snjs'
 import { useMemo, useState } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
@@ -23,24 +23,6 @@ const PlaintextDefaults = ({ application }: Props) => {
     application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont).catch(console.error)
   }
 
-  const [lineHeight, setLineHeight] = useState(() =>
-    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
-  )
-
-  const handleLineHeightChange = (value: string) => {
-    setLineHeight(value as EditorLineHeight)
-    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
-  }
-
-  const lineHeightDropdownOptions = useMemo(
-    () =>
-      Object.values(EditorLineHeight).map((lineHeight) => ({
-        label: lineHeight,
-        value: lineHeight,
-      })),
-    [],
-  )
-
   const [fontSize, setFontSize] = useState(() =>
     application.getPreference(PrefKey.EditorFontSize, PrefDefaults[PrefKey.EditorFontSize]),
   )
@@ -72,20 +54,6 @@ const PlaintextDefaults = ({ application }: Props) => {
             <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
           </div>
           <HorizontalSeparator classes="my-4" />
-          <div>
-            <Subtitle>Line height</Subtitle>
-            <Text>Sets the line height (leading) in plaintext notes</Text>
-            <div className="mt-2">
-              <Dropdown
-                id="def-line-height"
-                label="Select the line height for plaintext notes"
-                items={lineHeightDropdownOptions}
-                value={lineHeight}
-                onChange={handleLineHeightChange}
-              />
-            </div>
-          </div>
-          <HorizontalSeparator classes="my-4" />
           <div>
             <Subtitle>Font size</Subtitle>
             <Text>Sets the font size in plaintext notes</Text>
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/BiometricsLock.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/BiometricsLock.tsx
index bd551a435..fb9246782 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/BiometricsLock.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/BiometricsLock.tsx
@@ -7,7 +7,7 @@ import PreferencesSegment from '@/Components/Preferences/PreferencesComponents/P
 import { Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import PreferencesGroup from '@/Components/Preferences/PreferencesComponents/PreferencesGroup'
 import Button from '@/Components/Button/Button'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
index f56b6b984..4a50b9f9a 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
@@ -20,7 +20,7 @@ import Button from '@/Components/Button/Button'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 import DecoratedPasswordInput from '@/Components/Input/DecoratedPasswordInput'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   application: WebApplication
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index acc163e5c..7b9513978 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FunctionComponent, MouseEventHandler, ReactNode } from 'react'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index 71be20162..7db66032a 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
@@ -6,7 +6,7 @@ import PreferencesCanvas from './PreferencesCanvas'
 import { PreferencesProps } from './PreferencesProps'
 import { isIOS } from '@/Utils'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 import { ESCAPE_COMMAND } from '@standardnotes/ui-services'
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
index 94ed4e63b..227d14128 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/FocusModeSwitch.tsx
@@ -2,7 +2,7 @@ import { WebApplication } from '@/Application/Application'
 import { FunctionComponent, MouseEventHandler, useCallback, useMemo } from 'react'
 import Switch from '@/Components/Switch/Switch'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { TOGGLE_FOCUS_MODE_COMMAND } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
index 07ad14c93..643303c29 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx
@@ -21,7 +21,7 @@ import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 export const focusModeAnimationDuration = 1255
 
diff --git a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
index 5c98937e2..3fa4b2dd1 100644
--- a/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/packages/web/src/javascripts/Components/QuickSettingsMenu/ThemesMenuButton.tsx
@@ -8,7 +8,7 @@ import { ThemeItem } from './ThemeItem'
 import RadioIndicator from '../Radio/RadioIndicator'
 import { PremiumFeatureIconClass, PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import { isMobileScreen } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   item: ThemeItem
diff --git a/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx b/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
index 0f6e5a2b5..7de076718 100644
--- a/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
+++ b/packages/web/src/javascripts/Components/Radio/StyledRadioInput.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import RadioIndicator from './RadioIndicator'
 
diff --git a/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx b/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx
index e3f833de9..748375a11 100644
--- a/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx
+++ b/packages/web/src/javascripts/Components/ResponsivePane/ResponsivePaneContent.tsx
@@ -1,6 +1,6 @@
 import { useMemo, ReactNode } from 'react'
 import { AppPaneId } from './AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useResponsiveAppPane } from './ResponsivePaneProvider'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
index f0ab50cb0..fa9f04aeb 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx
@@ -1,5 +1,5 @@
 import { getPlatformString } from '@/Utils'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { DialogOverlay, DialogContent } from '@reach/dialog'
 import { ReactNode } from 'react'
 
diff --git a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
index 25352934b..1afe8d12c 100644
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialogContent.tsx
@@ -6,7 +6,7 @@ import HistoryModalFooter from './HistoryModalFooter'
 import HistoryModalContentPane from './HistoryModalContentPane'
 import { NoteHistoryController } from '@/Controllers/NoteHistory/NoteHistoryController'
 import Icon from '../Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { HistoryModalMobileTab } from './utils'
 
 const HistoryModalDialogContent = ({
diff --git a/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx b/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
index 2417cb1e9..48531d78d 100644
--- a/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
+++ b/packages/web/src/javascripts/Components/Shared/CopyableCodeBlock.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { addToast, ToastType } from '@standardnotes/toast'
 import { useRef, useState } from 'react'
 import Icon from '../Icon/Icon'
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
index 94809eea4..d9b8d6845 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
+++ b/packages/web/src/javascripts/Components/Shared/ModalDialog.tsx
@@ -1,6 +1,6 @@
 import { useRef, ReactNode } from 'react'
 import { AlertDialogContent, AlertDialogOverlay } from '@reach/alert-dialog'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   children: ReactNode
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
index d4e1efb57..f27732be1 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
+++ b/packages/web/src/javascripts/Components/Shared/ModalDialogButtons.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { Fragment, FunctionComponent, ReactNode } from 'react'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx b/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx
index bffbcbc79..057a5e2ab 100644
--- a/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx
+++ b/packages/web/src/javascripts/Components/Shared/ModalDialogLabel.tsx
@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode, useEffect } from 'react'
 import { AlertDialogLabel } from '@reach/alert-dialog'
 import Icon from '@/Components/Icon/Icon'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useAndroidBackHandler } from '@/NativeMobileWeb/useAndroidBackHandler'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
index b4e4a7260..4e50f9b17 100644
--- a/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
+++ b/packages/web/src/javascripts/Components/SmartViewBuilder/AddSmartViewModal.tsx
@@ -17,7 +17,7 @@ import { useTabState } from '../Tabs/useTabState'
 import TabsContainer from '../Tabs/TabsContainer'
 import CopyableCodeBlock from '../Shared/CopyableCodeBlock'
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 
 type Props = {
   controller: AddSmartViewModalController
diff --git a/packages/web/src/javascripts/Components/Tabs/Tab.tsx b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
index e7830abac..8062a8a90 100644
--- a/packages/web/src/javascripts/Components/Tabs/Tab.tsx
+++ b/packages/web/src/javascripts/Components/Tabs/Tab.tsx
@@ -1,4 +1,4 @@
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { ComponentPropsWithoutRef } from 'react'
 import { useTabStateContext } from './useTabState'
 
diff --git a/packages/web/src/javascripts/Components/Tags/Navigation.tsx b/packages/web/src/javascripts/Components/Tags/Navigation.tsx
index 8b16dff49..65a601b0e 100644
--- a/packages/web/src/javascripts/Components/Tags/Navigation.tsx
+++ b/packages/web/src/javascripts/Components/Tags/Navigation.tsx
@@ -8,7 +8,7 @@ import { FunctionComponent, useCallback, useEffect, useMemo, useState } from 're
 import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '@/Components/PanelResizer/PanelResizer'
 import ResponsivePaneContent from '@/Components/ResponsivePane/ResponsivePaneContent'
 import { AppPaneId } from '@/Components/ResponsivePane/AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import UpgradeNow from '../Footer/UpgradeNow'
 import RoundIconButton from '../Button/RoundIconButton'
diff --git a/packages/web/src/javascripts/Components/Tags/RootTagDropZone.tsx b/packages/web/src/javascripts/Components/Tags/RootTagDropZone.tsx
index ac1438fd4..9f86b1c65 100644
--- a/packages/web/src/javascripts/Components/Tags/RootTagDropZone.tsx
+++ b/packages/web/src/javascripts/Components/Tags/RootTagDropZone.tsx
@@ -1,6 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { observer } from 'mobx-react-lite'
 import { DragEventHandler, FunctionComponent, useCallback, useState } from 'react'
 import { TagDragDataFormat } from './DragNDrop'
diff --git a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
index 9cd86125b..cde78ddb3 100644
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -15,7 +15,7 @@ import {
 } from 'react'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 
 type Props = {
diff --git a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
index 6b9064820..9a75fe9bd 100644
--- a/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
@@ -21,7 +21,7 @@ import {
 } from 'react'
 import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
 import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
-import { classNames } from '@/Utils/ConcatenateClassNames'
+import { classNames } from '@standardnotes/utils'
 import { useFileDragNDrop } from '../FileDragNDropProvider/FileDragNDropProvider'
 import { LinkingController } from '@/Controllers/LinkingController'
 import { TagListSectionType } from './TagListSection'