diff --git a/services/web/frontend/js/features/chat/context/chat-context.js b/services/web/frontend/js/features/chat/context/chat-context.js
index a7472bc3d9..d49357d8b2 100644
--- a/services/web/frontend/js/features/chat/context/chat-context.js
+++ b/services/web/frontend/js/features/chat/context/chat-context.js
@@ -13,7 +13,7 @@ import { useApplicationContext } from '../../../shared/context/application-conte
 import { useEditorContext } from '../../../shared/context/editor-context'
 import { getJSON, postJSON } from '../../../infrastructure/fetch-json'
 import { appendMessage, prependMessages } from '../utils/message-list-appender'
-import useBrowserWindow from '../../../infrastructure/browser-window-hook'
+import useBrowserWindow from '../../../shared/hooks/use-browser-window'
 import { useLayoutContext } from '../../../shared/context/layout-context'
 
 const PAGE_SIZE = 50
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-folder.js b/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
index 4afd540b2a..0bcbd1a211 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-folder.js
@@ -12,7 +12,7 @@ import { useDroppable } from '../contexts/file-tree-draggable'
 
 import FileTreeItemInner from './file-tree-item/file-tree-item-inner'
 import FileTreeFolderList from './file-tree-folder-list'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 function FileTreeFolder({ name, id, folders, docs, files }) {
   const { t } = useTranslation()
diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
index 9b1f3987ca..9c8e372f2e 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-name.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { useRefWithAutoFocus } from '../../../../infrastructure/auto-focus'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 import { useFileTreeActionable } from '../../contexts/file-tree-actionable'
 
diff --git a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js
index 70d0a8fe50..2bd8fb5ccf 100644
--- a/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js
+++ b/services/web/frontend/js/features/file-tree/components/modals/file-tree-modal-create-folder.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { Button, Modal } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { useRefWithAutoFocus } from '../../../../infrastructure/auto-focus'
+import { useRefWithAutoFocus } from '../../../../shared/hooks/use-ref-with-auto-focus'
 
 import AccessibleModal from '../../../../shared/components/accessible-modal'
 
diff --git a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
index 3a1a27d5bb..f7bb61709d 100644
--- a/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
+++ b/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
@@ -13,7 +13,7 @@ import classNames from 'classnames'
 import { findInTree } from '../util/find-in-tree'
 import { useFileTreeMutable } from './file-tree-mutable'
 import { useFileTreeMainContext } from './file-tree-main'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 const FileTreeSelectableContext = createContext()
 
diff --git a/services/web/frontend/js/features/preview/components/preview-logs-pane.js b/services/web/frontend/js/features/preview/components/preview-logs-pane.js
index af91260206..60e801ff6e 100644
--- a/services/web/frontend/js/features/preview/components/preview-logs-pane.js
+++ b/services/web/frontend/js/features/preview/components/preview-logs-pane.js
@@ -7,7 +7,7 @@ import PreviewValidationIssue from './preview-validation-issue'
 import PreviewDownloadFileList from './preview-download-file-list'
 import PreviewError from './preview-error'
 import Icon from '../../../shared/components/icon'
-import usePersistedState from '../../../infrastructure/persisted-state-hook'
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
 
 function PreviewLogsPane({
   logEntries = { all: [], errors: [], warnings: [], typesetting: [] },
diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js
index a4785d7fdf..fb79229ccc 100644
--- a/services/web/frontend/js/shared/context/editor-context.js
+++ b/services/web/frontend/js/shared/context/editor-context.js
@@ -2,7 +2,7 @@ import React, { createContext, useCallback, useContext } from 'react'
 import PropTypes from 'prop-types'
 import useScopeValue from './util/scope-value-hook'
 import { useApplicationContext } from './application-context'
-import useBrowserWindow from '../../infrastructure/browser-window-hook'
+import useBrowserWindow from '../hooks/use-browser-window'
 
 export const EditorContext = createContext()
 
diff --git a/services/web/frontend/js/infrastructure/browser-window-hook.js b/services/web/frontend/js/shared/hooks/use-browser-window.js
similarity index 100%
rename from services/web/frontend/js/infrastructure/browser-window-hook.js
rename to services/web/frontend/js/shared/hooks/use-browser-window.js
diff --git a/services/web/frontend/js/infrastructure/persisted-state-hook.js b/services/web/frontend/js/shared/hooks/use-persisted-state.js
similarity index 90%
rename from services/web/frontend/js/infrastructure/persisted-state-hook.js
rename to services/web/frontend/js/shared/hooks/use-persisted-state.js
index 928a314231..3cc8f95e29 100644
--- a/services/web/frontend/js/infrastructure/persisted-state-hook.js
+++ b/services/web/frontend/js/shared/hooks/use-persisted-state.js
@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react'
-import localStorage from './local-storage'
+import localStorage from '../../infrastructure/local-storage'
 
 function usePersistedState(key, defaultValue) {
   const [value, setValue] = useState(() => {
diff --git a/services/web/frontend/js/infrastructure/auto-focus.js b/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js
similarity index 55%
rename from services/web/frontend/js/infrastructure/auto-focus.js
rename to services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js
index f4ad8624f7..c537b78be5 100644
--- a/services/web/frontend/js/infrastructure/auto-focus.js
+++ b/services/web/frontend/js/shared/hooks/use-ref-with-auto-focus.js
@@ -1,12 +1,14 @@
-import { createRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 
 export function useRefWithAutoFocus() {
-  const autoFocusedRef = createRef()
+  const autoFocusedRef = useRef()
 
   useEffect(() => {
     if (autoFocusedRef.current) {
       window.requestAnimationFrame(() => {
-        if (autoFocusedRef.current) autoFocusedRef.current.focus()
+        if (autoFocusedRef.current) {
+          autoFocusedRef.current.focus()
+        }
       })
     }
   }, [autoFocusedRef])