diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 4d88159bf..6686baf50 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -30,5 +30,14 @@ module.exports = {
                 },
             },
         ],
+        "sort-imports": [
+            "error",
+            {
+                ignoreCase: false,
+                ignoreDeclarationSort: true,
+                ignoreMemberSort: false,
+                allowSeparatedGroups: false,
+            },
+        ],
     },
 };
diff --git a/web/src/App.tsx b/web/src/App.tsx
index b9e609540..77ea8aff7 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useEffect, Suspense } from "react";
+import React, { Suspense, useEffect, useState } from "react";
 
 import createCache from "@emotion/cache";
 import { CacheProvider } from "@emotion/react";
 import { config as faConfig } from "@fortawesome/fontawesome-svg-core";
 import { CssBaseline, ThemeProvider } from "@mui/material";
-import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
 
 import NotificationBar from "@components/NotificationBar";
 import {
@@ -13,8 +13,8 @@ import {
     LogoutRoute,
     RegisterOneTimePasswordRoute,
     RegisterWebauthnRoute,
-    ResetPasswordStep2Route,
     ResetPasswordStep1Route,
+    ResetPasswordStep2Route,
 } from "@constants/Routes";
 import NotificationsContext from "@hooks/NotificationsContext";
 import { Notification } from "@models/Notifications";
diff --git a/web/src/components/NotificationBar.tsx b/web/src/components/NotificationBar.tsx
index 4453d171a..5781e2b8e 100644
--- a/web/src/components/NotificationBar.tsx
+++ b/web/src/components/NotificationBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Alert, Slide, SlideProps, Snackbar } from "@mui/material";
 
diff --git a/web/src/components/TimerIcon.tsx b/web/src/components/TimerIcon.tsx
index dec5548a4..0446deaab 100644
--- a/web/src/components/TimerIcon.tsx
+++ b/web/src/components/TimerIcon.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import PieChartIcon from "@components/PieChartIcon";
 
diff --git a/web/src/hooks/IntermittentClass.ts b/web/src/hooks/IntermittentClass.ts
index 4cb028d63..01832b567 100644
--- a/web/src/hooks/IntermittentClass.ts
+++ b/web/src/hooks/IntermittentClass.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export function useIntermittentClass(
     classname: string,
diff --git a/web/src/hooks/Mounted.ts b/web/src/hooks/Mounted.ts
index 96efb7c2b..0dd27d53c 100644
--- a/web/src/hooks/Mounted.ts
+++ b/web/src/hooks/Mounted.ts
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function useIsMountedRef() {
     const isMountedRef = useRef(false);
diff --git a/web/src/hooks/RemoteCall.ts b/web/src/hooks/RemoteCall.ts
index b0ac5598d..1efec701f 100644
--- a/web/src/hooks/RemoteCall.ts
+++ b/web/src/hooks/RemoteCall.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, DependencyList } from "react";
+import { DependencyList, useCallback, useState } from "react";
 
 type PromisifiedFunction<Ret> = (...args: any) => Promise<Ret>;
 
diff --git a/web/src/hooks/Timer.ts b/web/src/hooks/Timer.ts
index 63515f36b..d4b889f67 100644
--- a/web/src/hooks/Timer.ts
+++ b/web/src/hooks/Timer.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 export function useTimer(timeoutMs: number): [number, () => void, () => void] {
     const Interval = 100;
diff --git a/web/src/layouts/LoginLayout.tsx b/web/src/layouts/LoginLayout.tsx
index 56744cd6d..9dd15e09d 100644
--- a/web/src/layouts/LoginLayout.tsx
+++ b/web/src/layouts/LoginLayout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from "react";
 
-import { Grid, Container, Link, Theme } from "@mui/material";
+import { Container, Grid, Link, Theme } from "@mui/material";
 import { grey } from "@mui/material/colors";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
diff --git a/web/src/services/Configuration.ts b/web/src/services/Configuration.ts
index bf8117e8a..7c00851f8 100644
--- a/web/src/services/Configuration.ts
+++ b/web/src/services/Configuration.ts
@@ -1,7 +1,7 @@
 import { Configuration } from "@models/Configuration";
 import { ConfigurationPath } from "@services/Api";
 import { Get } from "@services/Client";
-import { toEnum, Method2FA } from "@services/UserInfo";
+import { Method2FA, toEnum } from "@services/UserInfo";
 
 interface ConfigurationPayload {
     available_methods: Method2FA[];
diff --git a/web/src/services/Consent.ts b/web/src/services/Consent.ts
index 716224861..a3a26380e 100644
--- a/web/src/services/Consent.ts
+++ b/web/src/services/Consent.ts
@@ -1,5 +1,5 @@
 import { ConsentPath } from "@services/Api";
-import { Post, Get } from "@services/Client";
+import { Get, Post } from "@services/Client";
 
 interface ConsentPostRequestBody {
     client_id: string;
diff --git a/web/src/services/PushNotification.ts b/web/src/services/PushNotification.ts
index f76e22e02..2a7e40872 100644
--- a/web/src/services/PushNotification.ts
+++ b/web/src/services/PushNotification.ts
@@ -1,7 +1,7 @@
 import {
+    CompleteDuoDeviceSelectionPath,
     CompletePushNotificationSignInPath,
     InitiateDuoDeviceSelectionPath,
-    CompleteDuoDeviceSelectionPath,
 } from "@services/Api";
 import { Get, PostWithOptionalResponse } from "@services/Client";
 
diff --git a/web/src/services/RegisterDevice.ts b/web/src/services/RegisterDevice.ts
index e4f9397e2..431b336af 100644
--- a/web/src/services/RegisterDevice.ts
+++ b/web/src/services/RegisterDevice.ts
@@ -1,4 +1,4 @@
-import { InitiateTOTPRegistrationPath, CompleteTOTPRegistrationPath, WebauthnIdentityStartPath } from "@services/Api";
+import { CompleteTOTPRegistrationPath, InitiateTOTPRegistrationPath, WebauthnIdentityStartPath } from "@services/Api";
 import { Post, PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateTOTPRegistrationProcess() {
diff --git a/web/src/services/ResetPassword.ts b/web/src/services/ResetPassword.ts
index 02cdb9181..105292815 100644
--- a/web/src/services/ResetPassword.ts
+++ b/web/src/services/ResetPassword.ts
@@ -1,4 +1,4 @@
-import { InitiateResetPasswordPath, CompleteResetPasswordPath, ResetPasswordPath } from "@services/Api";
+import { CompleteResetPasswordPath, InitiateResetPasswordPath, ResetPasswordPath } from "@services/Api";
 import { PostWithOptionalResponse } from "@services/Client";
 
 export async function initiateResetPasswordProcess(username: string) {
diff --git a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
index 9c34acdb3..9940a5d5a 100644
--- a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
+++ b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { IconDefinition, faCopy, faKey, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Typography, Button, IconButton, Link, CircularProgress, TextField, Theme } from "@mui/material";
+import { Button, CircularProgress, IconButton, Link, TextField, Theme, Typography } from "@mui/material";
 import { red } from "@mui/material/colors";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";
diff --git a/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx b/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx
index 3ee651c05..66bbb0e59 100644
--- a/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx
+++ b/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
diff --git a/web/src/views/LoginPortal/ConsentView/ConsentView.tsx b/web/src/views/LoginPortal/ConsentView/ConsentView.tsx
index e0167de56..1eb3f6625 100644
--- a/web/src/views/LoginPortal/ConsentView/ConsentView.tsx
+++ b/web/src/views/LoginPortal/ConsentView/ConsentView.tsx
@@ -1,18 +1,18 @@
-import React, { useEffect, Fragment, ReactNode, useState } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 
 import { AccountBox, Autorenew, CheckBox, Contacts, Drafts, Group } from "@mui/icons-material";
 import {
     Button,
+    Checkbox,
+    FormControlLabel,
     Grid,
     List,
     ListItem,
     ListItemIcon,
     ListItemText,
+    Theme,
     Tooltip,
     Typography,
-    Checkbox,
-    FormControlLabel,
-    Theme,
 } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
@@ -24,7 +24,7 @@ import { useNotifications } from "@hooks/NotificationsContext";
 import { useRedirector } from "@hooks/Redirector";
 import { useUserInfoGET } from "@hooks/UserInfo";
 import LoginLayout from "@layouts/LoginLayout";
-import { acceptConsent, ConsentGetResponseBody, getConsentResponse, rejectConsent } from "@services/Consent";
+import { ConsentGetResponseBody, acceptConsent, getConsentResponse, rejectConsent } from "@services/Consent";
 import LoadingPage from "@views/LoadingPage/LoadingPage";
 
 export interface Props {}
diff --git a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
index d462b55b6..1db551228 100644
--- a/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
+++ b/web/src/views/LoginPortal/FirstFactor/FirstFactorForm.tsx
@@ -1,6 +1,6 @@
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
 
-import { Grid, Button, FormControlLabel, Checkbox, Link, Theme } from "@mui/material";
+import { Button, Checkbox, FormControlLabel, Grid, Link, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
diff --git a/web/src/views/LoginPortal/SecondFactor/DeviceSelectionContainer.tsx b/web/src/views/LoginPortal/SecondFactor/DeviceSelectionContainer.tsx
index 6e60d9c44..6decec943 100644
--- a/web/src/views/LoginPortal/SecondFactor/DeviceSelectionContainer.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/DeviceSelectionContainer.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
-import { Typography, Grid, Button, Container, Theme } from "@mui/material";
+import { Button, Container, Grid, Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 
 import PushNotificationIcon from "@components/PushNotificationIcon";
diff --git a/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx b/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx
index 184637916..326065daa 100644
--- a/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx
@@ -1,6 +1,6 @@
-import React, { ReactNode, Fragment } from "react";
+import React, { Fragment, ReactNode } from "react";
 
-import { Typography, Link, Theme, Box } from "@mui/material";
+import { Box, Link, Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";
diff --git a/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx b/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx
index d4c92e175..93a85c0d9 100644
--- a/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 
-import { Dialog, Grid, DialogContent, Button, DialogActions, Typography, useTheme, Theme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, Grid, Theme, Typography, useTheme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 
diff --git a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
index 1efd9a087..ecccb345e 100644
--- a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useRef, useState, ReactNode } from "react";
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 import { Button, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
@@ -10,15 +10,15 @@ import { useIsMountedRef } from "@hooks/Mounted";
 import { useRedirectionURL } from "@hooks/RedirectionURL";
 import { useWorkflow } from "@hooks/Workflow";
 import {
-    completePushNotificationSignIn,
-    completeDuoDeviceSelectionProcess,
     DuoDevicePostRequest,
+    completeDuoDeviceSelectionProcess,
+    completePushNotificationSignIn,
     initiateDuoDeviceSelectionProcess,
 } from "@services/PushNotification";
 import { AuthenticationLevel } from "@services/State";
 import DeviceSelectionContainer, {
-    SelectedDevice,
     SelectableDevice,
+    SelectedDevice,
 } from "@views/LoginPortal/SecondFactor/DeviceSelectionContainer";
 import MethodContainer, { State as MethodContainerState } from "@views/LoginPortal/SecondFactor/MethodContainer";
 
diff --git a/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx b/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
index 0611737d6..dde55deac 100644
--- a/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { Route, Routes, useNavigate } from "react-router-dom";
 
 import {
-    LogoutRoute as SignOutRoute,
     SecondFactorPushSubRoute,
     SecondFactorTOTPSubRoute,
     SecondFactorWebauthnSubRoute,
+    LogoutRoute as SignOutRoute,
 } from "@constants/Routes";
 import { useNotifications } from "@hooks/NotificationsContext";
 import LoginLayout from "@layouts/LoginLayout";
diff --git a/web/src/views/LoginPortal/SignOut/SignOut.tsx b/web/src/views/LoginPortal/SignOut/SignOut.tsx
index 9ea9b5bdb..204b69a7e 100644
--- a/web/src/views/LoginPortal/SignOut/SignOut.tsx
+++ b/web/src/views/LoginPortal/SignOut/SignOut.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 
 import { Theme, Typography } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
diff --git a/web/src/views/ResetPassword/ResetPasswordStep1.tsx b/web/src/views/ResetPassword/ResetPasswordStep1.tsx
index e7a2ad4a4..3e1dd8263 100644
--- a/web/src/views/ResetPassword/ResetPasswordStep1.tsx
+++ b/web/src/views/ResetPassword/ResetPasswordStep1.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { Grid, Button, Theme } from "@mui/material";
+import { Button, Grid, Theme } from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";