74 files changed, 545 insertions, 392 deletions

diff --git a/src/components/AppUpdateInfoBar.tsx b/src/components/AppUpdateInfoBar.tsx
index 103bd2900..7bba8053a 100644
--- a/src/components/AppUpdateInfoBar.tsx
+++ b/src/components/AppUpdateInfoBar.tsx
@@ -1,12 +1,12 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import { mdiInformation } from '@mdi/js';
-import { MouseEventHandler } from 'react';
+import type { MouseEventHandler } from 'react';
 import InfoBar from './ui/InfoBar';
 import Icon from './ui/icon';
 
-import { onAuthGoToReleaseNotes } from '../helpers/update-helpers';
 import { isWinPortable } from '../environment';
+import { onAuthGoToReleaseNotes } from '../helpers/update-helpers';
 
 const messages = defineMessages({
   updateAvailable: {
diff --git a/src/components/auth/AuthLayout.tsx b/src/components/auth/AuthLayout.tsx
index eeb93b83b..67e898318 100644
--- a/src/components/auth/AuthLayout.tsx
+++ b/src/components/auth/AuthLayout.tsx
@@ -1,24 +1,24 @@
+import { mdiFlash } from '@mdi/js';
+import type { Response } from 'electron';
+import { TitleBar } from 'electron-react-titlebar/renderer';
+import { observer } from 'mobx-react';
 import {
-  cloneElement,
   Component,
-  MouseEventHandler,
-  ReactElement,
+  type MouseEventHandler,
+  type ReactElement,
+  cloneElement,
 } from 'react';
-import { observer } from 'mobx-react';
-import { TitleBar } from 'electron-react-titlebar/renderer';
-import { injectIntl, WrappedComponentProps } from 'react-intl';
-import { mdiFlash } from '@mdi/js';
-import { Response } from 'electron';
-import Link from '../ui/Link';
-import InfoBar from '../ui/InfoBar';
+import { type WrappedComponentProps, injectIntl } from 'react-intl';
+import { serverName } from '../../api/apiBase';
+import { GITHUB_FERDIUM_URL } from '../../config';
+import { isWindows } from '../../environment';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
 import { updateVersionParse } from '../../helpers/update-helpers';
 import globalMessages from '../../i18n/globalMessages';
-import { isWindows } from '../../environment';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
-import { GITHUB_FERDIUM_URL } from '../../config';
+import InfoBar from '../ui/InfoBar';
+import Link from '../ui/Link';
 import Icon from '../ui/icon';
-import { serverName } from '../../api/apiBase';
 
 export interface IProps extends WrappedComponentProps {
   children: ReactElement;
diff --git a/src/components/auth/ChangeServer.tsx b/src/components/auth/ChangeServer.tsx
index c49e52673..665e8f6f9 100644
--- a/src/components/auth/ChangeServer.tsx
+++ b/src/components/auth/ChangeServer.tsx
@@ -1,19 +1,23 @@
-import { Component, FormEvent, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { Component, type FormEvent, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config';
+import { url, required } from '../../helpers/validation-helpers';
+import globalMessages from '../../i18n/globalMessages';
 import Form from '../../lib/Form';
-import Input from '../ui/input/index';
+import Infobox from '../ui/Infobox';
+import Link from '../ui/Link';
 import Select from '../ui/Select';
 import Button from '../ui/button';
-import Link from '../ui/Link';
-import Infobox from '../ui/Infobox';
-import { url, required } from '../../helpers/validation-helpers';
-import { LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../config';
-import globalMessages from '../../i18n/globalMessages';
 import { H1 } from '../ui/headline';
 import Icon from '../ui/icon';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/Invite.tsx b/src/components/auth/Invite.tsx
index 0d39d861a..93441abe3 100644
--- a/src/components/auth/Invite.tsx
+++ b/src/components/auth/Invite.tsx
@@ -1,16 +1,20 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import { noop } from 'lodash';
-import Infobox from '../ui/Infobox';
-import Appear from '../ui/effects/Appear';
-import Form from '../../lib/Form';
+import { observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { Link } from 'react-router-dom';
 import { email, required } from '../../helpers/validation-helpers';
-import Input from '../ui/input/index';
+import Form from '../../lib/Form';
+import Infobox from '../ui/Infobox';
 import Button from '../ui/button';
+import Appear from '../ui/effects/Appear';
 import { H1 } from '../ui/headline';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   settingsHeadline: {
diff --git a/src/components/auth/Locked.tsx b/src/components/auth/Locked.tsx
index 34d010782..46ce24a2e 100644
--- a/src/components/auth/Locked.tsx
+++ b/src/components/auth/Locked.tsx
@@ -1,13 +1,17 @@
 import { systemPreferences } from '@electron/remote';
-import { Component } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { isMac } from '../../environment';
 import Form from '../../lib/Form';
-import Input from '../ui/input/index';
 import Button from '../ui/button';
 import { H1 } from '../ui/headline';
-import { isMac } from '../../environment';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
index 9bad731c8..37ce595eb 100644
--- a/src/components/auth/Login.tsx
+++ b/src/components/auth/Login.tsx
@@ -1,19 +1,23 @@
-import { Component, FormEvent, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { noop } from 'lodash';
-import Icon from '../ui/icon';
+import { observer } from 'mobx-react';
+import { Component, type FormEvent, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import type { GlobalError } from '../../@types/ferdium-components.types';
+import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
 import { LIVE_FRANZ_API } from '../../config';
 import { API_VERSION } from '../../environment-remote';
-import { serverBase } from '../../api/apiBase'; // TODO: Remove this line after fixing password recovery in-app
+import { email, required } from '../../helpers/validation-helpers';
 import Form from '../../lib/Form';
-import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/input/index';
-import Button from '../ui/button';
 import Link from '../ui/Link';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
-import { GlobalError } from '../../@types/ferdium-components.types';
+import Icon from '../ui/icon';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/Password.tsx b/src/components/auth/Password.tsx
index 03adc3859..6f398c3fb 100644
--- a/src/components/auth/Password.tsx
+++ b/src/components/auth/Password.tsx
@@ -1,16 +1,20 @@
-import { Component, FormEvent } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component, type FormEvent } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 
 import { noop } from 'lodash';
+import { email, required } from '../../helpers/validation-helpers';
+import globalMessages from '../../i18n/globalMessages';
 import Form from '../../lib/Form';
-import { required, email } from '../../helpers/validation-helpers';
-import Input from '../ui/input/index';
-import Button from '../ui/button';
-import Link from '../ui/Link';
 import Infobox from '../ui/Infobox';
-import globalMessages from '../../i18n/globalMessages';
+import Link from '../ui/Link';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/SetupAssistant.tsx b/src/components/auth/SetupAssistant.tsx
index c25495471..c1965dbb4 100644
--- a/src/components/auth/SetupAssistant.tsx
+++ b/src/components/auth/SetupAssistant.tsx
@@ -1,17 +1,21 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import Input from '../ui/input/index';
-import Button from '../ui/button';
-import Badge from '../ui/badge';
-import Modal from '../ui/Modal';
+import { observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import { CDN_URL } from '../../config';
+import globalMessages from '../../i18n/globalMessages';
 import Infobox from '../ui/Infobox';
+import Modal from '../ui/Modal';
+import Badge from '../ui/badge';
+import Button from '../ui/button';
 import Appear from '../ui/effects/Appear';
-import globalMessages from '../../i18n/globalMessages';
-import { CDN_URL } from '../../config';
 import { H1, H2 } from '../ui/headline';
+import Input from '../ui/input/index';
 
 const SLACK_ID = 'slack';
 
diff --git a/src/components/auth/Signup.tsx b/src/components/auth/Signup.tsx
index 06a9774aa..84974fd07 100644
--- a/src/components/auth/Signup.tsx
+++ b/src/components/auth/Signup.tsx
@@ -1,18 +1,22 @@
-import { Component } from 'react';
-import { observer, inject } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiArrowLeftCircle } from '@mdi/js';
 import { noop } from 'lodash';
+import { inject, observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import type { GlobalError } from '../../@types/ferdium-components.types';
+import type { Actions } from '../../actions/lib/actions';
+import { serverBase } from '../../api/apiBase';
+import { email, minLength, required } from '../../helpers/validation-helpers';
 import Form from '../../lib/Form';
-import { required, email, minLength } from '../../helpers/validation-helpers';
-import Input from '../ui/input/index';
-import Button from '../ui/button';
 import Link from '../ui/Link';
-import Icon from '../ui/icon';
-import { serverBase } from '../../api/apiBase';
+import Button from '../ui/button';
 import { H1 } from '../ui/headline';
-import { GlobalError } from '../../@types/ferdium-components.types';
-import { Actions } from '../../actions/lib/actions';
+import Icon from '../ui/icon';
+import Input from '../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/auth/Welcome.tsx b/src/components/auth/Welcome.tsx
index c1a2db386..ec1c167c0 100644
--- a/src/components/auth/Welcome.tsx
+++ b/src/components/auth/Welcome.tsx
@@ -1,14 +1,18 @@
-import { Component, ReactElement } from 'react';
-import { observer, inject } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { noop } from 'lodash';
-import serverlessLogin from '../../helpers/serverless-helpers';
-import shuffleArray from '../../helpers/array-helpers';
+import { inject, observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import type { StoresProps } from '../../@types/ferdium-components.types';
 import { serverName } from '../../api/apiBase';
+import shuffleArray from '../../helpers/array-helpers';
+import serverlessLogin from '../../helpers/serverless-helpers';
+import type RecipePreview from '../../models/RecipePreview';
 import Link from '../ui/Link';
 import { H1 } from '../ui/headline';
-import { StoresProps } from '../../@types/ferdium-components.types';
-import RecipePreview from '../../models/RecipePreview';
 
 const messages = defineMessages({
   signupButton: {
diff --git a/src/components/downloadManager/DownloadManagerDashboard.tsx b/src/components/downloadManager/DownloadManagerDashboard.tsx
index 25e73d48f..490be269d 100644
--- a/src/components/downloadManager/DownloadManagerDashboard.tsx
+++ b/src/components/downloadManager/DownloadManagerDashboard.tsx
@@ -1,29 +1,29 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
-import { IntlShape, defineMessages, injectIntl } from 'react-intl';
-import { shell } from 'electron';
-import prettyBytes from 'pretty-bytes';
+import { mdiDownload } from '@mdi/js';
+import CancelIcon from '@mui/icons-material/Cancel';
+import ClearAllIcon from '@mui/icons-material/ClearAll';
+import DeleteIcon from '@mui/icons-material/Delete';
+import FolderIcon from '@mui/icons-material/Folder';
+import PauseIcon from '@mui/icons-material/Pause';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import {
-  Typography,
+  Box,
   Card,
   CardContent,
-  LinearProgress,
-  Box,
   IconButton,
+  LinearProgress,
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  Typography,
 } from '@mui/material';
-import { mdiDownload } from '@mdi/js';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import PauseIcon from '@mui/icons-material/Pause';
-import CancelIcon from '@mui/icons-material/Cancel';
-import FolderIcon from '@mui/icons-material/Folder';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ClearAllIcon from '@mui/icons-material/ClearAll';
+import { shell } from 'electron';
 import { round } from 'lodash';
-import { RealStores } from '../../stores';
-import { Actions } from '../../actions/lib/actions';
+import { observer } from 'mobx-react';
+import prettyBytes from 'pretty-bytes';
+import { Component } from 'react';
+import { type IntlShape, defineMessages, injectIntl } from 'react-intl';
+import type { Actions } from '../../actions/lib/actions';
+import type { RealStores } from '../../stores';
 import Icon from '../ui/icon';
 
 const messages = defineMessages({
diff --git a/src/components/downloadManager/DownloadManagerLayout.tsx b/src/components/downloadManager/DownloadManagerLayout.tsx
index 1e018cfb8..08c0ace1e 100644
--- a/src/components/downloadManager/DownloadManagerLayout.tsx
+++ b/src/components/downloadManager/DownloadManagerLayout.tsx
@@ -1,14 +1,19 @@
-import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import type React from 'react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
-import { Actions } from '../../actions/lib/actions';
+import type { Actions } from '../../actions/lib/actions';
 import { isEscKeyPress } from '../../jsUtils';
 import Appear from '../ui/effects/Appear';
-import ErrorBoundary from '../util/ErrorBoundary';
 import Icon from '../ui/icon';
+import ErrorBoundary from '../util/ErrorBoundary';
 
 const messages = defineMessages({
   closeSettings: {
diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx
index 97795212a..160664c20 100644
--- a/src/components/layout/AppLayout.tsx
+++ b/src/components/layout/AppLayout.tsx
@@ -1,28 +1,33 @@
-import React, { Component, PropsWithChildren } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { TitleBar } from 'electron-react-titlebar/renderer';
-import injectSheet, { WithStylesProps } from 'react-jss';
 import { ipcRenderer } from 'electron';
+import { TitleBar } from 'electron-react-titlebar/renderer';
+import { observer } from 'mobx-react';
+import type React from 'react';
+import { Component, type PropsWithChildren } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import injectSheet, { type WithStylesProps } from 'react-jss';
 
 import { mdiFlash, mdiPowerPlug } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
-import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
-import { Component as QuickSwitch } from '../../features/quickSwitch';
 import { Component as PublishDebugInfo } from '../../features/publishDebugInfo';
-import ErrorBoundary from '../util/ErrorBoundary';
+import { Component as QuickSwitch } from '../../features/quickSwitch';
 import { updateVersionParse } from '../../helpers/update-helpers';
+import InfoBar from '../ui/InfoBar';
+import ErrorBoundary from '../util/ErrorBoundary';
 
 import { isMac, isWindows } from '../../environment';
-import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import Todos from '../../features/todos/containers/TodosScreen';
 import { workspaceStore } from '../../features/workspaces';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
-import Todos from '../../features/todos/containers/TodosScreen';
 import Icon from '../ui/icon';
 
 import LockedScreen from '../../containers/auth/LockedScreen';
-import SettingsStore from '../../stores/SettingsStore';
+import type SettingsStore from '../../stores/SettingsStore';
 
 const messages = defineMessages({
   servicesUpdated: {
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 1106113f0..a927d5745 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,7 +1,3 @@
-import { Component } from 'react';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { inject, observer } from 'mobx-react';
 import {
   mdiBell,
   mdiBellOff,
@@ -9,14 +5,22 @@ import {
   mdiChevronDown,
   mdiChevronRight,
   mdiCog,
+  mdiDownload,
   mdiLock,
   mdiMenu,
   mdiPlusBox,
   mdiViewGrid,
   mdiViewSplitVertical,
-  mdiDownload,
 } from '@mdi/js';
-import Tabbar from '../services/tabs/Tabbar';
+import { inject, observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import type { Actions } from '../../actions/lib/actions';
 import {
   addNewServiceShortcutKey,
   downloadsShortcutKey,
@@ -30,10 +34,10 @@ import {
 import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 import globalMessages from '../../i18n/globalMessages';
+import type Service from '../../models/Service';
+import type { RealStores } from '../../stores';
+import Tabbar from '../services/tabs/Tabbar';
 import Icon from '../ui/icon';
-import { Actions } from '../../actions/lib/actions';
-import { RealStores } from '../../stores';
-import Service from '../../models/Service';
 
 const messages = defineMessages({
   addNewService: {
diff --git a/src/components/services/content/ConnectionLostBanner.tsx b/src/components/services/content/ConnectionLostBanner.tsx
index 7040337f0..04e62ff6b 100644
--- a/src/components/services/content/ConnectionLostBanner.tsx
+++ b/src/components/services/content/ConnectionLostBanner.tsx
@@ -1,8 +1,12 @@
-import { Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiAlert } from '@mdi/js';
+import { observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
 import { LIVE_API_FERDIUM_WEBSITE } from '../../../config';
 import Icon from '../../ui/icon';
 
diff --git a/src/components/services/content/ServiceDisabled.tsx b/src/components/services/content/ServiceDisabled.tsx
index 2f0d439ec..9b9f377b1 100644
--- a/src/components/services/content/ServiceDisabled.tsx
+++ b/src/components/services/content/ServiceDisabled.tsx
@@ -1,6 +1,10 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
diff --git a/src/components/services/content/ServiceView.tsx b/src/components/services/content/ServiceView.tsx
index d89cd0610..577473b5d 100644
--- a/src/components/services/content/ServiceView.tsx
+++ b/src/components/services/content/ServiceView.tsx
@@ -1,18 +1,18 @@
-import { Component } from 'react';
-import { autorun, IReactionDisposer } from 'mobx';
-import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
+import { type IReactionDisposer, autorun } from 'mobx';
+import { inject, observer } from 'mobx-react';
+import { Component } from 'react';
 import TopBarProgress from 'react-topbar-progress-indicator';
-import ServiceModel from '../../../models/Service';
+import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
+import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
+import type ServiceModel from '../../../models/Service';
+import type { RealStores } from '../../../stores';
 import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 import WebviewLoader from '../../ui/WebviewLoader';
-import WebviewCrashHandler from './WebviewCrashHandler';
-import WebviewErrorHandler from './WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceWebview from './ServiceWebview';
-import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
-import { CUSTOM_WEBSITE_RECIPE_ID } from '../../../config';
-import { RealStores } from '../../../stores';
+import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './WebviewErrorHandler';
 
 interface IProps {
   service: ServiceModel;
diff --git a/src/components/services/content/ServiceWebview.tsx b/src/components/services/content/ServiceWebview.tsx
index c598d4be6..0cf34c14b 100644
--- a/src/components/services/content/ServiceWebview.tsx
+++ b/src/components/services/content/ServiceWebview.tsx
@@ -1,9 +1,9 @@
 import { join } from 'node:path';
-import { Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
 import { action, makeObservable, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
 import ElectronWebView from 'react-electron-web-view';
-import ServiceModel from '../../../models/Service';
+import type ServiceModel from '../../../models/Service';
 
 const debug = require('../../../preload-safe-debug')('Ferdium:Services');
 
diff --git a/src/components/services/content/Services.tsx b/src/components/services/content/Services.tsx
index 5766e0d75..65359d0b4 100644
--- a/src/components/services/content/Services.tsx
+++ b/src/components/services/content/Services.tsx
@@ -1,13 +1,17 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import Confetti from 'react-confetti';
 import ms from 'ms';
-import withStyles, { WithStylesProps } from 'react-jss';
-import ServiceView from './ServiceView';
+import { Component, type ReactElement } from 'react';
+import Confetti from 'react-confetti';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import { Link } from 'react-router-dom';
+import type Service from '../../../models/Service';
 import Appear from '../../ui/effects/Appear';
-import Service from '../../../models/Service';
+import ServiceView from './ServiceView';
 
 const messages = defineMessages({
   getStarted: {
diff --git a/src/components/services/content/WebviewCrashHandler.tsx b/src/components/services/content/WebviewCrashHandler.tsx
index 91c9cf927..0306dcbda 100644
--- a/src/components/services/content/WebviewCrashHandler.tsx
+++ b/src/components/services/content/WebviewCrashHandler.tsx
@@ -1,7 +1,11 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import ms from 'ms';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
diff --git a/src/components/services/content/WebviewErrorHandler.tsx b/src/components/services/content/WebviewErrorHandler.tsx
index b99c15006..1d33ae117 100644
--- a/src/components/services/content/WebviewErrorHandler.tsx
+++ b/src/components/services/content/WebviewErrorHandler.tsx
@@ -1,7 +1,11 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import withStyles, { WithStylesProps } from 'react-jss';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
 
diff --git a/src/components/services/tabs/TabBarSortableList.tsx b/src/components/services/tabs/TabBarSortableList.tsx
index a30587470..2f76c17f1 100644
--- a/src/components/services/tabs/TabBarSortableList.tsx
+++ b/src/components/services/tabs/TabBarSortableList.tsx
@@ -1,9 +1,9 @@
-import { Component } from 'react';
 import { observer } from 'mobx-react';
+import { Component } from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 
+import type Service from '../../../models/Service';
 import TabItem from './TabItem';
-import Service from '../../../models/Service';
 
 interface IProps {
   showMessageBadgeWhenMutedSetting: boolean;
diff --git a/src/components/services/tabs/TabItem.tsx b/src/components/services/tabs/TabItem.tsx
index 804efe8a5..bf193e136 100644
--- a/src/components/services/tabs/TabItem.tsx
+++ b/src/components/services/tabs/TabItem.tsx
@@ -1,19 +1,23 @@
-import { app, dialog, Menu } from '@electron/remote';
+import { Menu, app, dialog } from '@electron/remote';
+import { mdiExclamation, mdiVolumeSource } from '@mdi/js';
+import classnames from 'classnames';
 import { noop } from 'lodash';
-import { Component } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { autorun, makeObservable, observable, reaction } from 'mobx';
 import { inject, observer } from 'mobx-react';
-import classnames from 'classnames';
-import { SortableElement } from 'react-sortable-hoc';
-import injectSheet, { WithStylesProps } from 'react-jss';
 import ms from 'ms';
-import { autorun, makeObservable, observable, reaction } from 'mobx';
-import { mdiExclamation, mdiVolumeSource } from '@mdi/js';
-import Service from '../../../models/Service';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import injectSheet, { type WithStylesProps } from 'react-jss';
+import { SortableElement } from 'react-sortable-hoc';
+import type { Stores } from '../../../@types/stores.types';
 import { altKey, cmdOrCtrlShortcutKey, shiftKey } from '../../../environment';
 import globalMessages from '../../../i18n/globalMessages';
+import type Service from '../../../models/Service';
 import Icon from '../../ui/icon';
-import { Stores } from '../../../@types/stores.types';
 import MenuItemConstructorOptions = Electron.MenuItemConstructorOptions;
 import { acceleratorString } from '../../../jsUtils';
 
diff --git a/src/components/services/tabs/Tabbar.tsx b/src/components/services/tabs/Tabbar.tsx
index d19a4b8de..164051aae 100644
--- a/src/components/services/tabs/Tabbar.tsx
+++ b/src/components/services/tabs/Tabbar.tsx
@@ -1,8 +1,8 @@
-import { Component } from 'react';
 import { observer } from 'mobx-react';
+import { Component } from 'react';
 
+import type Service from '../../../models/Service';
 import TabBarSortableList from './TabBarSortableList';
-import Service from '../../../models/Service';
 
 interface IProps {
   useHorizontalStyle: boolean;
diff --git a/src/components/settings/SettingsLayout.tsx b/src/components/settings/SettingsLayout.tsx
index f96ad7394..17f8c3e33 100644
--- a/src/components/settings/SettingsLayout.tsx
+++ b/src/components/settings/SettingsLayout.tsx
@@ -1,12 +1,16 @@
-import { Component, PropsWithChildren, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiClose } from '@mdi/js';
+import { observer } from 'mobx-react';
+import { Component, type PropsWithChildren, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { Outlet } from 'react-router-dom';
-import ErrorBoundary from '../util/ErrorBoundary';
+import { isEscKeyPress } from '../../jsUtils';
 import Appear from '../ui/effects/Appear';
 import Icon from '../ui/icon';
-import { isEscKeyPress } from '../../jsUtils';
+import ErrorBoundary from '../util/ErrorBoundary';
 
 const messages = defineMessages({
   closeSettings: {
diff --git a/src/components/settings/account/AccountDashboard.tsx b/src/components/settings/account/AccountDashboard.tsx
index eab019084..76b4ce14e 100644
--- a/src/components/settings/account/AccountDashboard.tsx
+++ b/src/components/settings/account/AccountDashboard.tsx
@@ -1,18 +1,22 @@
-import { Component } from 'react';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 import { H1, H2 } from '../../ui/headline';
 
-import Loader from '../../ui/loader';
-import Button from '../../ui/button';
-import Infobox from '../../ui/infobox/index';
 import {
   DEFAULT_LOADER_COLOR,
-  LOCAL_SERVER,
   LIVE_FRANZ_API,
+  LOCAL_SERVER,
 } from '../../../config';
-import User from '../../../models/User';
+import type User from '../../../models/User';
+import Button from '../../ui/button';
+import Infobox from '../../ui/infobox/index';
+import Loader from '../../ui/loader';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/settings/navigation/SettingsNavigation.tsx b/src/components/settings/navigation/SettingsNavigation.tsx
index 66763c6a6..0504b6553 100644
--- a/src/components/settings/navigation/SettingsNavigation.tsx
+++ b/src/components/settings/navigation/SettingsNavigation.tsx
@@ -1,12 +1,16 @@
-import { Component } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { inject, observer } from 'mobx-react';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { NavLink } from 'react-router-dom';
-import { StoresProps } from '../../../@types/ferdium-components.types';
+import type { StoresProps } from '../../../@types/ferdium-components.types';
 import {
-  LOCAL_SERVER,
   LIVE_FERDIUM_API,
   LIVE_FRANZ_API,
+  LOCAL_SERVER,
 } from '../../../config';
 import globalMessages from '../../../i18n/globalMessages';
 
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
index 9b17e551c..1afc17491 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -1,7 +1,7 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
-import { IntlShape, defineMessages, injectIntl } from 'react-intl';
 import Markdown from 'markdown-to-jsx';
+import { observer } from 'mobx-react';
+import { Component } from 'react';
+import { type IntlShape, defineMessages, injectIntl } from 'react-intl';
 import { ferdiumVersion } from '../../../environment-remote';
 import {
   getFerdiumVersion,
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
index 4a6fe54f4..23db7141e 100644
--- a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -1,14 +1,18 @@
-import { Component } from 'react';
 import { inject, observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
 import { Outlet } from 'react-router-dom';
-import ErrorBoundary from '../../util/ErrorBoundary';
+import type { Actions } from '../../../actions/lib/actions';
+import { isEscKeyPress } from '../../../jsUtils';
 import Appear from '../../ui/effects/Appear';
 import Icon from '../../ui/icon';
-import { isEscKeyPress } from '../../../jsUtils';
-import { Actions } from '../../../actions/lib/actions';
+import ErrorBoundary from '../../util/ErrorBoundary';
 
 const messages = defineMessages({
   closeSettings: {
diff --git a/src/components/settings/services/EditServiceForm.tsx b/src/components/settings/services/EditServiceForm.tsx
index 520cb3c46..69893c16c 100644
--- a/src/components/settings/services/EditServiceForm.tsx
+++ b/src/components/settings/services/EditServiceForm.tsx
@@ -1,25 +1,29 @@
-import { Component, FormEvent, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiInformation } from '@mdi/js';
 import { noop } from 'lodash';
-import Form from '../../../lib/Form';
-import Tabs from '../../ui/Tabs/Tabs';
-import TabItem from '../../ui/Tabs/TabItem';
-import Input from '../../ui/input/index';
-import Toggle from '../../ui/toggle';
-import Slider from '../../ui/Slider';
-import Button from '../../ui/button';
-import ImageUpload from '../../ui/imageUpload';
-import Select from '../../ui/Select';
+import { observer } from 'mobx-react';
+import { Component, type FormEvent, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { Link } from 'react-router-dom';
 import { isMac } from '../../../environment';
+import { normalizedUrl } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
-import Icon from '../../ui/icon';
+import type Form from '../../../lib/Form';
+import type { IRecipe } from '../../../models/Recipe';
+import type Service from '../../../models/Service';
+import Select from '../../ui/Select';
+import Slider from '../../ui/Slider';
+import TabItem from '../../ui/Tabs/TabItem';
+import Tabs from '../../ui/Tabs/Tabs';
+import Button from '../../ui/button';
 import { H3 } from '../../ui/headline';
-import { IRecipe } from '../../../models/Recipe';
-import Service from '../../../models/Service';
-import { normalizedUrl } from '../../../helpers/url-helpers';
+import Icon from '../../ui/icon';
+import ImageUpload from '../../ui/imageUpload';
+import Input from '../../ui/input/index';
+import Toggle from '../../ui/toggle';
 
 const messages = defineMessages({
   saveService: {
diff --git a/src/components/settings/services/ServiceError.tsx b/src/components/settings/services/ServiceError.tsx
index 87efdeb96..426565547 100644
--- a/src/components/settings/services/ServiceError.tsx
+++ b/src/components/settings/services/ServiceError.tsx
@@ -1,7 +1,11 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import Infobox from '../../ui/Infobox';
 import Button from '../../ui/button';
 
diff --git a/src/components/settings/services/ServiceItem.tsx b/src/components/settings/services/ServiceItem.tsx
index 35b63b160..7df59f1d2 100644
--- a/src/components/settings/services/ServiceItem.tsx
+++ b/src/components/settings/services/ServiceItem.tsx
@@ -1,10 +1,14 @@
-import { Component, ReactElement } from 'react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { Tooltip as ReactTooltip } from 'react-tooltip';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
 import { mdiBellOff, mdiMessageBulletedOff, mdiPower } from '@mdi/js';
-import ServiceModel from '../../../models/Service';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
+import type ServiceModel from '../../../models/Service';
 import Icon from '../../ui/icon';
 
 const messages = defineMessages({
diff --git a/src/components/settings/services/ServicesDashboard.tsx b/src/components/settings/services/ServicesDashboard.tsx
index b8c3ce3f0..e63898ae5 100644
--- a/src/components/settings/services/ServicesDashboard.tsx
+++ b/src/components/settings/services/ServicesDashboard.tsx
@@ -1,16 +1,20 @@
-import { Component, ReactElement } from 'react';
+import type { To } from 'history';
 import { observer } from 'mobx-react';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { Link } from 'react-router-dom';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import { To } from 'history';
-import SearchInput from '../../ui/SearchInput';
-import Infobox from '../../ui/Infobox';
-import Loader from '../../ui/loader';
+import type Service from '../../../models/Service';
 import FAB from '../../ui/FAB';
-import ServiceItem from './ServiceItem';
+import Infobox from '../../ui/Infobox';
+import SearchInput from '../../ui/SearchInput';
 import Appear from '../../ui/effects/Appear';
 import { H1 } from '../../ui/headline';
-import Service from '../../../models/Service';
+import Loader from '../../ui/loader';
+import ServiceItem from './ServiceItem';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/settings/settings/EditSettingsForm.tsx b/src/components/settings/settings/EditSettingsForm.tsx
index 81cfe8b12..598158e20 100644
--- a/src/components/settings/settings/EditSettingsForm.tsx
+++ b/src/components/settings/settings/EditSettingsForm.tsx
@@ -1,31 +1,20 @@
 import { systemPreferences } from '@electron/remote';
-import { Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import prettyBytes from 'pretty-bytes';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiGithub, mdiOpenInNew, mdiPowerPlug } from '@mdi/js';
 import { noop } from 'lodash';
-import Form from '../../../lib/Form';
-import Button from '../../ui/button';
-import Toggle from '../../ui/toggle';
-import Select from '../../ui/Select';
-import Input from '../../ui/input/index';
-import ColorPickerInput from '../../ui/colorPickerInput';
-import Infobox from '../../ui/Infobox';
-import { H1, H2, H3, H5 } from '../../ui/headline';
+import { observer } from 'mobx-react';
+import prettyBytes from 'pretty-bytes';
+import { Component, type ReactElement } from 'react';
 import {
-  ferdiumVersion,
-  userDataCertsPath,
-  userDataPath,
-  userDataRecipesPath,
-} from '../../../environment-remote';
-import { updateVersionParse } from '../../../helpers/update-helpers';
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import {
   DEFAULT_ACCENT_COLOR,
   DEFAULT_APP_SETTINGS,
   FERDIUM_TRANSLATION,
-  GITHUB_FRANZ_URL,
   GITHUB_FERDIUM_URL,
+  GITHUB_FRANZ_URL,
   SPLIT_COLUMNS_MAX,
   SPLIT_COLUMNS_MIN,
 } from '../../../config';
@@ -35,10 +24,25 @@ import {
   isWindows,
   lockFerdiumShortcutKey,
 } from '../../../environment';
+import {
+  ferdiumVersion,
+  userDataCertsPath,
+  userDataPath,
+  userDataRecipesPath,
+} from '../../../environment-remote';
+import { updateVersionParse } from '../../../helpers/update-helpers';
 import { openExternalUrl, openPath } from '../../../helpers/url-helpers';
 import globalMessages from '../../../i18n/globalMessages';
-import Icon from '../../ui/icon';
+import type Form from '../../../lib/Form';
+import Infobox from '../../ui/Infobox';
+import Select from '../../ui/Select';
 import Slider from '../../ui/Slider';
+import Button from '../../ui/button';
+import ColorPickerInput from '../../ui/colorPickerInput';
+import { H1, H2, H3, H5 } from '../../ui/headline';
+import Icon from '../../ui/icon';
+import Input from '../../ui/input/index';
+import Toggle from '../../ui/toggle';
 
 const debug = require('../../../preload-safe-debug')(
   'Ferdium:EditSettingsForm',
diff --git a/src/components/settings/team/TeamDashboard.tsx b/src/components/settings/team/TeamDashboard.tsx
index 96613373e..b2d5aa6d5 100644
--- a/src/components/settings/team/TeamDashboard.tsx
+++ b/src/components/settings/team/TeamDashboard.tsx
@@ -1,16 +1,20 @@
 // TODO: Is this feature even being used? If not, then we can cleanup this code
 
-import { Component, ReactElement } from 'react';
+import classnames from 'classnames';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
-import withStyles, { WithStylesProps } from 'react-jss';
-import classnames from 'classnames';
-import Loader from '../../ui/loader';
-import Button from '../../ui/button';
+import { DEFAULT_LOADER_COLOR, LIVE_FRANZ_API } from '../../../config';
 import Infobox from '../../ui/Infobox';
+import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';
-import { DEFAULT_LOADER_COLOR, LIVE_FRANZ_API } from '../../../config';
+import Loader from '../../ui/loader';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/settings/user/EditUserForm.tsx b/src/components/settings/user/EditUserForm.tsx
index 5a2a5a83e..f4b84166a 100644
--- a/src/components/settings/user/EditUserForm.tsx
+++ b/src/components/settings/user/EditUserForm.tsx
@@ -1,14 +1,23 @@
-import { Component, FormEvent, FormEventHandler, ReactElement } from 'react';
+import { noop } from 'lodash';
 import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import {
+  Component,
+  type FormEvent,
+  type FormEventHandler,
+  type ReactElement,
+} from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { Link } from 'react-router-dom';
-import { noop } from 'lodash';
-import Input from '../../ui/input/index';
-import Form from '../../../lib/Form';
-import Button from '../../ui/button';
-import Radio from '../../ui/Radio';
+import type Form from '../../../lib/Form';
 import Infobox from '../../ui/Infobox';
+import Radio from '../../ui/Radio';
+import Button from '../../ui/button';
 import { H2 } from '../../ui/headline';
+import Input from '../../ui/input/index';
 
 const messages = defineMessages({
   headline: {
diff --git a/src/components/ui/AppLoader/index.tsx b/src/components/ui/AppLoader/index.tsx
index 4b5828ef4..a2133e174 100644
--- a/src/components/ui/AppLoader/index.tsx
+++ b/src/components/ui/AppLoader/index.tsx
@@ -1,9 +1,9 @@
-import { Component, ReactElement } from 'react';
 import classnames from 'classnames';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { Theme } from '../../../themes';
-import FullscreenLoader from '../FullscreenLoader';
+import { Component, type ReactElement } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
 import shuffleArray from '../../../helpers/array-helpers';
+import type { Theme } from '../../../themes';
+import FullscreenLoader from '../FullscreenLoader';
 
 import styles from './styles';
 
diff --git a/src/components/ui/FAB.tsx b/src/components/ui/FAB.tsx
index acb0f690e..b4eeace8b 100644
--- a/src/components/ui/FAB.tsx
+++ b/src/components/ui/FAB.tsx
@@ -1,7 +1,7 @@
-import { Component, ReactElement, ReactNode } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { Component, type ReactElement, type ReactNode } from 'react';
 
 interface IProps {
   className: string;
diff --git a/src/components/ui/FullscreenLoader/index.tsx b/src/components/ui/FullscreenLoader/index.tsx
index 09c1d5fbb..40b04abe8 100644
--- a/src/components/ui/FullscreenLoader/index.tsx
+++ b/src/components/ui/FullscreenLoader/index.tsx
@@ -1,11 +1,11 @@
-import { Component, ReactElement, ReactNode } from 'react';
-import { observer } from 'mobx-react';
-import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
+import { Component, type ReactElement, type ReactNode } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import type { Theme } from '../../../themes';
+import { H1 } from '../headline';
 import Loader from '../loader/index';
 import styles from './styles';
-import { H1 } from '../headline';
-import { Theme } from '../../../themes';
 
 interface IProps extends WithStylesProps<typeof styles> {
   className?: string;
diff --git a/src/components/ui/InfoBar.tsx b/src/components/ui/InfoBar.tsx
index f3f1adbe7..5fd27f61a 100644
--- a/src/components/ui/InfoBar.tsx
+++ b/src/components/ui/InfoBar.tsx
@@ -1,14 +1,18 @@
-import { Component, MouseEventHandler, ReactNode } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { observer } from 'mobx-react';
+import { Component, type MouseEventHandler, type ReactNode } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 
 import { mdiClose } from '@mdi/js';
 import { noop } from 'lodash';
-import Loader from './loader/index';
+import { DEFAULT_LOADER_COLOR } from '../../config';
 import Appear from './effects/Appear';
 import Icon from './icon';
-import { DEFAULT_LOADER_COLOR } from '../../config';
+import Loader from './loader/index';
 
 const messages = defineMessages({
   hide: {
diff --git a/src/components/ui/Infobox.tsx b/src/components/ui/Infobox.tsx
index 14e1a581c..fc88c4654 100644
--- a/src/components/ui/Infobox.tsx
+++ b/src/components/ui/Infobox.tsx
@@ -1,12 +1,21 @@
-import { Component, MouseEventHandler, ReactElement, ReactNode } from 'react';
-import classnames from 'classnames';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
 import { mdiAlert, mdiCheckboxMarkedCircleOutline, mdiClose } from '@mdi/js';
+import classnames from 'classnames';
 import { noop } from 'lodash';
 import { observer } from 'mobx-react';
-import Loader from './loader/index';
-import Icon from './icon';
+import {
+  Component,
+  type MouseEventHandler,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
 import { DEFAULT_LOADER_COLOR } from '../../config';
+import Icon from './icon';
+import Loader from './loader/index';
 
 const icons = {
   'checkbox-marked-circle-outline': mdiCheckboxMarkedCircleOutline,
diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx
index f9fdd57f9..816798d79 100644
--- a/src/components/ui/Link.tsx
+++ b/src/components/ui/Link.tsx
@@ -1,9 +1,14 @@
-import { Component, CSSProperties, ReactNode, MouseEvent } from 'react';
-import { inject, observer } from 'mobx-react';
 import classnames from 'classnames';
+import { inject, observer } from 'mobx-react';
+import {
+  type CSSProperties,
+  Component,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import type { StoresProps } from '../../@types/ferdium-components.types';
 import matchRoute from '../../helpers/routing-helpers';
 import { openExternalUrl } from '../../helpers/url-helpers';
-import { StoresProps } from '../../@types/ferdium-components.types';
 
 interface IProps extends Partial<StoresProps> {
   children: ReactNode;
@@ -54,7 +59,6 @@ class Link extends Component<IProps> {
     });
 
     return (
-      // biome-ignore lint/a11y/useValidAnchor: <explanation>
       <a
         href={router.history.createHref(to)}
         className={linkClasses}
diff --git a/src/components/ui/Modal/index.tsx b/src/components/ui/Modal/index.tsx
index 154beef0c..15326a289 100644
--- a/src/components/ui/Modal/index.tsx
+++ b/src/components/ui/Modal/index.tsx
@@ -1,8 +1,8 @@
-import { Component, ReactNode } from 'react';
-import ReactModal from 'react-modal';
-import classnames from 'classnames';
-import injectCSS, { WithStylesProps } from 'react-jss';
 import { mdiClose } from '@mdi/js';
+import classnames from 'classnames';
+import { Component, type ReactNode } from 'react';
+import injectCSS, { type WithStylesProps } from 'react-jss';
+import ReactModal from 'react-modal';
 
 import Icon from '../icon';
 import styles from './styles';
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index 901958c78..b556eb4ca 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -1,7 +1,7 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import FieldInterface from 'mobx-react-form/lib/models/FieldInterface';
+import { observer } from 'mobx-react';
+import type FieldInterface from 'mobx-react-form/lib/models/FieldInterface';
+import { Component } from 'react';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from './error';
 
diff --git a/src/components/ui/SearchInput.tsx b/src/components/ui/SearchInput.tsx
index b2caaa1de..2e70d1b35 100644
--- a/src/components/ui/SearchInput.tsx
+++ b/src/components/ui/SearchInput.tsx
@@ -1,8 +1,8 @@
-import { ChangeEvent, Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
+import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js';
 import classnames from 'classnames';
 import { debounce, noop } from 'lodash';
-import { mdiCloseCircleOutline, mdiMagnify } from '@mdi/js';
+import { observer } from 'mobx-react';
+import { type ChangeEvent, Component, type ReactElement } from 'react';
 import Icon from './icon';
 
 interface IProps {
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
index a2ed4216f..4abed849d 100644
--- a/src/components/ui/Select.tsx
+++ b/src/components/ui/Select.tsx
@@ -1,14 +1,14 @@
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
 import {
-  createRef,
+  type ChangeEvent,
   Component,
-  ReactElement,
-  RefObject,
-  ChangeEvent,
-  ReactNode,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
+  createRef,
 } from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Field } from '../../@types/mobx-form.types';
+import type { Field } from '../../@types/mobx-form.types';
 
 interface IProps {
   field: Field;
diff --git a/src/components/ui/ServiceIcon.tsx b/src/components/ui/ServiceIcon.tsx
index 6920611d0..03a345c23 100644
--- a/src/components/ui/ServiceIcon.tsx
+++ b/src/components/ui/ServiceIcon.tsx
@@ -1,8 +1,8 @@
-import { Component, ReactNode } from 'react';
-import { observer } from 'mobx-react';
-import withStyles, { WithStylesProps } from 'react-jss';
 import classnames from 'classnames';
-import ServiceModel from '../../models/Service';
+import { observer } from 'mobx-react';
+import { Component, type ReactNode } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import type ServiceModel from '../../models/Service';
 
 const styles = theme => ({
   root: {
diff --git a/src/components/ui/Slider.tsx b/src/components/ui/Slider.tsx
index aa351ccd2..4f22290ef 100644
--- a/src/components/ui/Slider.tsx
+++ b/src/components/ui/Slider.tsx
@@ -1,7 +1,7 @@
-import { ChangeEvent, Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { noop } from 'lodash';
+import { observer } from 'mobx-react';
+import { type ChangeEvent, Component, type ReactElement } from 'react';
 
 interface IProps {
   field: any;
diff --git a/src/components/ui/StatusBarTargetUrl.tsx b/src/components/ui/StatusBarTargetUrl.tsx
index d969267eb..92cb6c36d 100644
--- a/src/components/ui/StatusBarTargetUrl.tsx
+++ b/src/components/ui/StatusBarTargetUrl.tsx
@@ -1,6 +1,6 @@
-import { Component } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
+import { observer } from 'mobx-react';
+import { Component } from 'react';
 import Appear from './effects/Appear';
 
 interface IProps {
diff --git a/src/components/ui/Tabs/TabItem.tsx b/src/components/ui/Tabs/TabItem.tsx
index 55dee42c6..df99a8bfb 100644
--- a/src/components/ui/Tabs/TabItem.tsx
+++ b/src/components/ui/Tabs/TabItem.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactElement } from 'react';
+import { Fragment, type ReactElement } from 'react';
 
 export interface IProps {
   children:
diff --git a/src/components/ui/Tabs/Tabs.tsx b/src/components/ui/Tabs/Tabs.tsx
index d7f75c8b8..a5ec148aa 100644
--- a/src/components/ui/Tabs/Tabs.tsx
+++ b/src/components/ui/Tabs/Tabs.tsx
@@ -1,7 +1,12 @@
-import { Children, Component, ReactElement, ReactPortal } from 'react';
-import { observer } from 'mobx-react';
 import classnames from 'classnames';
-import { IProps as TabItemProps } from './TabItem';
+import { observer } from 'mobx-react';
+import {
+  Children,
+  Component,
+  type ReactElement,
+  type ReactPortal,
+} from 'react';
+import type { IProps as TabItemProps } from './TabItem';
 
 interface IProps {
   children:
diff --git a/src/components/ui/WebviewLoader/index.tsx b/src/components/ui/WebviewLoader/index.tsx
index c4e9c724c..53e10d3b9 100644
--- a/src/components/ui/WebviewLoader/index.tsx
+++ b/src/components/ui/WebviewLoader/index.tsx
@@ -1,7 +1,11 @@
-import { Component, ReactElement } from 'react';
 import { observer } from 'mobx-react';
-import injectSheet, { WithStylesProps } from 'react-jss';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { Component, type ReactElement } from 'react';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import injectSheet, { type WithStylesProps } from 'react-jss';
 import FullscreenLoader from '../FullscreenLoader';
 
 const messages = defineMessages({
diff --git a/src/components/ui/badge/ProBadge.tsx b/src/components/ui/badge/ProBadge.tsx
index a5947d3a8..fd5752ed0 100644
--- a/src/components/ui/badge/ProBadge.tsx
+++ b/src/components/ui/badge/ProBadge.tsx
@@ -1,9 +1,9 @@
 import { mdiStar } from '@mdi/js';
 import classnames from 'classnames';
 import { Component } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 import Icon from '../icon';
 import Badge from './index';
 
diff --git a/src/components/ui/badge/index.tsx b/src/components/ui/badge/index.tsx
index 44fbf2d4a..e464c07ec 100644
--- a/src/components/ui/badge/index.tsx
+++ b/src/components/ui/badge/index.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
-import { Component, ReactNode } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import { Component, type ReactNode } from 'react';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 const badgeStyles = (theme: Theme) => {
   const styles = {};
diff --git a/src/components/ui/button/index.tsx b/src/components/ui/button/index.tsx
index 3247072a9..5c606f274 100644
--- a/src/components/ui/button/index.tsx
+++ b/src/components/ui/button/index.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable no-use-before-define */
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { noop } from 'lodash';
-import { Component, MouseEventHandler } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import Loader from '../loader/index';
-import { Theme } from '../../../themes';
-import { IFormField } from '../typings/generic';
+import { Component, type MouseEventHandler } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
 import { DEFAULT_LOADER_COLOR } from '../../../config';
+import type { Theme } from '../../../themes';
+import Loader from '../loader/index';
+import type { IFormField } from '../typings/generic';
 
 type ButtonType =
   | 'primary'
@@ -206,7 +206,6 @@ class ButtonComponent extends Component<IProps, IState> {
     );
 
     const wrapperComponent = href ? (
-      // biome-ignore lint/a11y/useValidAnchor: <explanation>
       <a
         href={href}
         target={target}
diff --git a/src/components/ui/colorPickerInput/index.tsx b/src/components/ui/colorPickerInput/index.tsx
index 39fd0220a..4870a3675 100644
--- a/src/components/ui/colorPickerInput/index.tsx
+++ b/src/components/ui/colorPickerInput/index.tsx
@@ -1,15 +1,15 @@
+import classnames from 'classnames';
+import { noop } from 'lodash';
+import { observer } from 'mobx-react';
 import {
-  ChangeEvent,
+  type ChangeEvent,
   Component,
+  type InputHTMLAttributes,
+  type RefObject,
   createRef,
-  InputHTMLAttributes,
-  RefObject,
 } from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import { Color, ColorResult, SliderPicker } from 'react-color';
-import { noop } from 'lodash';
-import { FormFields } from '../../../@types/mobx-form.types';
+import { type Color, type ColorResult, SliderPicker } from 'react-color';
+import type { FormFields } from '../../../@types/mobx-form.types';
 
 interface IProps extends InputHTMLAttributes<HTMLInputElement>, FormFields {
   onColorChange: (event: ChangeEvent<HTMLInputElement>) => void;
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index 06f63a029..c32c339fd 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useEffect, useState } from 'react';
+import { type ReactElement, type ReactNode, useEffect, useState } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 interface IProps {
diff --git a/src/components/ui/error/index.tsx b/src/components/ui/error/index.tsx
index 01fb5ca27..d0008529f 100644
--- a/src/components/ui/error/index.tsx
+++ b/src/components/ui/error/index.tsx
@@ -1,4 +1,4 @@
-import { Classes } from 'jss';
+import type { Classes } from 'jss';
 import { Component } from 'react';
 import injectSheet from 'react-jss';
 
diff --git a/src/components/ui/error/styles.ts b/src/components/ui/error/styles.ts
index 9da95705a..ac781052f 100644
--- a/src/components/ui/error/styles.ts
+++ b/src/components/ui/error/styles.ts
@@ -1,4 +1,4 @@
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 export default (theme: Theme) => ({
   message: {
diff --git a/src/components/ui/headline/index.tsx b/src/components/ui/headline/index.tsx
index 8e40fa896..2070745bb 100644
--- a/src/components/ui/headline/index.tsx
+++ b/src/components/ui/headline/index.tsx
@@ -1,15 +1,15 @@
 import classnames from 'classnames';
 import {
   Component,
+  type MouseEventHandler,
+  type ReactElement,
+  type ReactNode,
   createElement,
-  MouseEventHandler,
-  ReactElement,
-  ReactNode,
 } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 
-import { Theme } from '../../../themes';
-import { Omit } from '../typings/generic';
+import type { Theme } from '../../../themes';
+import type { Omit } from '../typings/generic';
 
 const styles = (theme: Theme) => ({
   headline: {
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 04a00d0e0..ad9f43730 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -1,9 +1,9 @@
 import MdiIcon from '@mdi/react';
 import classnames from 'classnames';
-import { Component, ReactElement } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import { Component, type ReactElement } from 'react';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 const styles = (theme: Theme) => ({
   icon: {
diff --git a/src/components/ui/imageUpload/index.tsx b/src/components/ui/imageUpload/index.tsx
index 3b164ed41..876572484 100644
--- a/src/components/ui/imageUpload/index.tsx
+++ b/src/components/ui/imageUpload/index.tsx
@@ -1,11 +1,11 @@
-import { Component, ReactElement } from 'react';
-import { observer } from 'mobx-react';
-import classnames from 'classnames';
-import Dropzone from 'react-dropzone';
 import { mdiDelete, mdiFileImage } from '@mdi/js';
+import classnames from 'classnames';
+import { observer } from 'mobx-react';
 import prettyBytes from 'pretty-bytes';
-import Icon from '../icon';
+import { Component, type ReactElement } from 'react';
+import Dropzone from 'react-dropzone';
 import { isWindows } from '../../../environment';
+import Icon from '../icon';
 
 interface IProps {
   field: any;
diff --git a/src/components/ui/infobox/index.tsx b/src/components/ui/infobox/index.tsx
index a1c4f9d21..36ea6a59f 100644
--- a/src/components/ui/infobox/index.tsx
+++ b/src/components/ui/infobox/index.tsx
@@ -2,9 +2,9 @@
 import { mdiClose } from '@mdi/js';
 import classnames from 'classnames';
 import { noop } from 'lodash';
-import { Component, ReactElement, ReactNode } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { Theme } from '../../../themes';
+import { Component, type ReactElement, type ReactNode } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import type { Theme } from '../../../themes';
 import Icon from '../icon';
 
 const buttonStyles = (theme: Theme) => {
diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx
index 68cc9ee22..c61efe570 100644
--- a/src/components/ui/input/index.tsx
+++ b/src/components/ui/input/index.tsx
@@ -1,22 +1,26 @@
 import { mdiEye, mdiEyeOff } from '@mdi/js';
 import classnames from 'classnames';
+import { noop } from 'lodash';
+import { observer } from 'mobx-react';
 import {
   Component,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  type ReactElement,
+  type RefObject,
   createRef,
-  InputHTMLAttributes,
-  ReactElement,
-  RefObject,
-  KeyboardEvent,
 } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { noop } from 'lodash';
-import { observer } from 'mobx-react';
-import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
-import Icon from '../icon';
-import { IFormField } from '../typings/generic';
+import {
+  type WrappedComponentProps,
+  defineMessages,
+  injectIntl,
+} from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
+import Icon from '../icon';
 import Label from '../label';
+import type { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 import { scorePasswordFunc } from './scorePassword';
 import styles from './styles';
diff --git a/src/components/ui/input/styles.ts b/src/components/ui/input/styles.ts
index ebae0e40d..580c72889 100644
--- a/src/components/ui/input/styles.ts
+++ b/src/components/ui/input/styles.ts
@@ -1,6 +1,6 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 const prefixStyles = (theme: Theme) => ({
   background: theme.inputPrefixBackground,
diff --git a/src/components/ui/label/index.tsx b/src/components/ui/label/index.tsx
index 5f5cc5c8e..c0a3903b0 100644
--- a/src/components/ui/label/index.tsx
+++ b/src/components/ui/label/index.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
-import { Component, LabelHTMLAttributes } from 'react';
-import injectSheet, { WithStylesProps } from 'react-jss';
+import { Component, type LabelHTMLAttributes } from 'react';
+import injectSheet, { type WithStylesProps } from 'react-jss';
 
-import { IFormField } from '../typings/generic';
+import type { IFormField } from '../typings/generic';
 
 import styles from './styles';
 
diff --git a/src/components/ui/label/styles.ts b/src/components/ui/label/styles.ts
index faa44ae5b..fecfa1816 100644
--- a/src/components/ui/label/styles.ts
+++ b/src/components/ui/label/styles.ts
@@ -1,4 +1,4 @@
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 export default (theme: Theme) => ({
   content: {},
diff --git a/src/components/ui/loader/index.tsx b/src/components/ui/loader/index.tsx
index c0ae15028..8757985b9 100644
--- a/src/components/ui/loader/index.tsx
+++ b/src/components/ui/loader/index.tsx
@@ -1,9 +1,9 @@
 import classnames from 'classnames';
+import { inject } from 'mobx-react';
 import { Component } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 import { Oval } from 'react-loader-spinner';
-import { inject } from 'mobx-react';
-import { FerdiumStores } from '../../../@types/stores.types';
+import type { FerdiumStores } from '../../../@types/stores.types';
 import { DEFAULT_LOADER_COLOR } from '../../../config';
 
 const styles = () => ({
diff --git a/src/components/ui/select/index.tsx b/src/components/ui/select/index.tsx
index 0d8520f58..2716ebc2d 100644
--- a/src/components/ui/select/index.tsx
+++ b/src/components/ui/select/index.tsx
@@ -5,14 +5,19 @@ import {
 } from '@mdi/js';
 import Icon from '@mdi/react';
 import classnames from 'classnames';
-import { ChangeEvent, Component, createRef, ReactElement } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
 import { noop } from 'lodash';
-import { Theme } from '../../../themes';
-import { IFormField } from '../typings/generic';
+import {
+  type ChangeEvent,
+  Component,
+  type ReactElement,
+  createRef,
+} from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import type { Theme } from '../../../themes';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
 import Label from '../label';
+import type { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 let popupTransition: string = 'none';
diff --git a/src/components/ui/textarea/index.tsx b/src/components/ui/textarea/index.tsx
index 0967c4c25..4a0e77afe 100644
--- a/src/components/ui/textarea/index.tsx
+++ b/src/components/ui/textarea/index.tsx
@@ -1,9 +1,9 @@
 import classnames from 'classnames';
-import { Component, createRef, TextareaHTMLAttributes } from 'react';
-import injectSheet, { WithStylesProps } from 'react-jss';
+import { Component, type TextareaHTMLAttributes, createRef } from 'react';
+import injectSheet, { type WithStylesProps } from 'react-jss';
 
 import { noop } from 'lodash';
-import { IFormField } from '../typings/generic';
+import type { IFormField } from '../typings/generic';
 
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
diff --git a/src/components/ui/textarea/styles.ts b/src/components/ui/textarea/styles.ts
index 36fc2a82e..c4c27b95d 100644
--- a/src/components/ui/textarea/styles.ts
+++ b/src/components/ui/textarea/styles.ts
@@ -1,6 +1,6 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 
-import { Theme } from '../../../themes';
+import type { Theme } from '../../../themes';
 
 export default (theme: Theme) => ({
   label: {
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index 878ffecdc..dc426b3a1 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,13 +1,13 @@
 import classnames from 'classnames';
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { noop } from 'lodash';
-import { Component, InputHTMLAttributes, ReactElement } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { Theme } from '../../../themes';
+import { Component, type InputHTMLAttributes, type ReactElement } from 'react';
+import withStyles, { type WithStylesProps } from 'react-jss';
+import type { Theme } from '../../../themes';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 import Error from '../error';
 import Label from '../label';
-import { IFormField } from '../typings/generic';
+import type { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 const buttonTransition: string = window?.matchMedia(
diff --git a/src/components/ui/wrapper/index.tsx b/src/components/ui/wrapper/index.tsx
index 450d09fd1..081b13b36 100644
--- a/src/components/ui/wrapper/index.tsx
+++ b/src/components/ui/wrapper/index.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { Component, ReactNode } from 'react';
-import injectStyle, { WithStylesProps } from 'react-jss';
+import { Component, type ReactNode } from 'react';
+import injectStyle, { type WithStylesProps } from 'react-jss';
 
 // eslint-disable-next-line no-use-before-define
 interface IProps extends WithStylesProps<typeof styles> {
diff --git a/src/components/util/ErrorBoundary/index.tsx b/src/components/util/ErrorBoundary/index.tsx
index 66f860835..a37d1b33a 100644
--- a/src/components/util/ErrorBoundary/index.tsx
+++ b/src/components/util/ErrorBoundary/index.tsx
@@ -1,6 +1,6 @@
-import { Component, ReactNode } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
-import { defineMessages, injectIntl, IntlShape } from 'react-intl';
+import { Component, type ReactNode } from 'react';
+import { type IntlShape, defineMessages, injectIntl } from 'react-intl';
+import withStyles, { type WithStylesProps } from 'react-jss';
 
 import Button from '../../ui/button';
 import { H1 } from '../../ui/headline';