diff --git a/web/src/models/Webauthn.ts b/web/src/models/Webauthn.ts
index 24dc3b6b7..e76d7c212 100644
--- a/web/src/models/Webauthn.ts
+++ b/web/src/models/Webauthn.ts
@@ -131,17 +131,17 @@ export interface AssertionPublicKeyCredentialResultJSON {
 }
 
 export interface WebauthnDevice {
-   id: string;
-   created_at: Date;
-   last_used_at?: Date;
-   rpid: string;
-   username: string;
-   description: string;
-   kid: string;
-   public_key: Uint8Array;
-   attestation_type: string;
-   transport: string;
-   aaguid: string;
-   sign_count: number;
-   clone_warning: boolean;
+    id: string;
+    created_at: Date;
+    last_used_at?: Date;
+    rpid: string;
+    username: string;
+    description: string;
+    kid: string;
+    public_key: Uint8Array;
+    attestation_type: string;
+    transport: string;
+    aaguid: string;
+    sign_count: number;
+    clone_warning: boolean;
 }
diff --git a/web/src/services/UserWebauthnDevices.ts b/web/src/services/UserWebauthnDevices.ts
index ca0dd49a1..abfe4ca0f 100644
--- a/web/src/services/UserWebauthnDevices.ts
+++ b/web/src/services/UserWebauthnDevices.ts
@@ -1,9 +1,9 @@
 import { WebauthnDevice } from "@root/models/Webauthn";
+
 import { WebauthnDevicesPath } from "./Api";
 import { Get } from "./Client";
 
-
 // getWebauthnDevices returns the list of webauthn devices for the authenticated user.
 export async function getWebauthnDevices(): Promise<WebauthnDevice[]> {
     return Get<WebauthnDevice[]>(WebauthnDevicesPath);
-}
\ No newline at end of file
+}
diff --git a/web/src/views/Settings/AddSecurityDialog.tsx b/web/src/views/Settings/AddSecurityDialog.tsx
index b39dc8950..3cda17d6e 100644
--- a/web/src/views/Settings/AddSecurityDialog.tsx
+++ b/web/src/views/Settings/AddSecurityDialog.tsx
@@ -1,28 +1,36 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogProps, DialogTitle, TextField } from "@mui/material";
 import React from "react";
 
-interface Props extends DialogProps {};
+import {
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogProps,
+    DialogTitle,
+    TextField,
+} from "@mui/material";
+
+interface Props extends DialogProps {}
 
 export default function AddSecurityKeyDialog(props: Props) {
     const handleAddClick = () => {
         if (props.onClose) {
             props.onClose({}, "backdropClick");
         }
-    }
+    };
 
     const handleCancelClick = () => {
         if (props.onClose) {
             props.onClose({}, "backdropClick");
         }
-    }
+    };
 
     return (
         <Dialog {...props}>
             <DialogTitle>Add new Security Key</DialogTitle>
             <DialogContent>
-                <DialogContentText>
-                    Provide the details for the new security key.
-                </DialogContentText>
+                <DialogContentText>Provide the details for the new security key.</DialogContentText>
                 <TextField
                     autoFocus
                     margin="dense"
@@ -39,4 +47,4 @@ export default function AddSecurityKeyDialog(props: Props) {
             </DialogActions>
         </Dialog>
     );
-}
\ No newline at end of file
+}
diff --git a/web/src/views/Settings/SettingsView.tsx b/web/src/views/Settings/SettingsView.tsx
index 645a2ae73..50df8c50c 100644
--- a/web/src/views/Settings/SettingsView.tsx
+++ b/web/src/views/Settings/SettingsView.tsx
@@ -1,11 +1,36 @@
 import React, { useEffect, useState } from "react";
 
-import { AppBar, Box, Button, Drawer, Grid, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Paper, Stack, Switch, Table, TableBody, TableCell, TableHead, TableRow, Toolbar, Tooltip, Typography } from "@mui/material";
-import SystemSecurityUpdateGoodIcon from '@mui/icons-material/SystemSecurityUpdateGood';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import { getWebauthnDevices } from "@root/services/UserWebauthnDevices";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import SystemSecurityUpdateGoodIcon from "@mui/icons-material/SystemSecurityUpdateGood";
+import {
+    AppBar,
+    Box,
+    Button,
+    Drawer,
+    Grid,
+    IconButton,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Paper,
+    Stack,
+    Switch,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Toolbar,
+    Tooltip,
+    Typography,
+} from "@mui/material";
+
 import { WebauthnDevice } from "@root/models/Webauthn";
+import { getWebauthnDevices } from "@root/services/UserWebauthnDevices";
+
 import AddSecurityKeyDialog from "./AddSecurityDialog";
 
 interface Props {}
@@ -17,22 +42,22 @@ export default function SettingsView(props: Props) {
     const [addKeyOpen, setAddKeyOpen] = useState<boolean>(false);
 
     useEffect(() => {
-        (async function() {
+        (async function () {
             const devices = await getWebauthnDevices();
             setWebauthnDevices(devices);
-        })()
+        })();
     }, []);
 
     const handleKeyClose = () => {
         setAddKeyOpen(false);
-    }
+    };
 
     const handleAddKeyButtonClick = () => {
         setAddKeyOpen(true);
-    }
+    };
 
     return (
-        <Box sx={{ display: 'flex' }}>
+        <Box sx={{ display: "flex" }}>
             <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
                 <Toolbar variant="dense">
                     <Typography style={{ flexGrow: 1 }}>Settings</Typography>
@@ -41,13 +66,13 @@ export default function SettingsView(props: Props) {
             <Drawer
                 variant="permanent"
                 sx={{
-                width: drawerWidth,
-                flexShrink: 0,
-                [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+                    width: drawerWidth,
+                    flexShrink: 0,
+                    [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: "border-box" },
                 }}
             >
                 <Toolbar variant="dense" />
-                <Box sx={{ overflow: 'auto' }}>
+                <Box sx={{ overflow: "auto" }}>
                     <List>
                         <ListItem disablePadding>
                             <ListItemButton selected={true}>
@@ -67,7 +92,9 @@ export default function SettingsView(props: Props) {
                     </Grid>
                     <Grid item xs={12}>
                         <Stack spacing={1} direction="row">
-                            <Button color="primary" variant="contained" onClick={handleAddKeyButtonClick}>Add</Button>
+                            <Button color="primary" variant="contained" onClick={handleAddKeyButtonClick}>
+                                Add
+                            </Button>
                         </Stack>
                     </Grid>
                     <Grid item xs={12}>
@@ -79,36 +106,48 @@ export default function SettingsView(props: Props) {
                                         <TableCell>Enabled</TableCell>
                                         <TableCell>Activation</TableCell>
                                         <TableCell>Public Key</TableCell>
-                                        <TableCell>Actions</TableCell> 
+                                        <TableCell>Actions</TableCell>
                                     </TableRow>
                                 </TableHead>
                                 <TableBody>
-                                    {webauthnDevices ? webauthnDevices.map((x, idx) => {
-                                        return (
-                                            <TableRow key={x.description}>
-                                                <TableCell>{x.description}</TableCell>
-                                                <TableCell><Switch defaultChecked={false} size="small" /></TableCell>
-                                                <TableCell><Typography>{(false) ? "<ADATE>" : "Not enabled"}</Typography></TableCell>
-                                                <TableCell>
-                                                    <Tooltip title={x.public_key}>
-                                                    <div style={{overflow: "hidden", textOverflow: "ellipsis", width: '300px'}}>
-                                                        <Typography noWrap>{x.public_key}</Typography>
-                                                    </div>
-                                                    </Tooltip>
-                                                </TableCell>
-                                                <TableCell>
-                                                    <Stack direction="row" spacing={1}>
-                                                        <IconButton aria-label="edit">
-                                                            <EditIcon />
-                                                        </IconButton>
-                                                        <IconButton aria-label="delete">
-                                                            <DeleteIcon />
-                                                        </IconButton>
-                                                    </Stack>
-                                                </TableCell>
-                                            </TableRow>
-                                        ) 
-                                    }) : null}
+                                    {webauthnDevices
+                                        ? webauthnDevices.map((x, idx) => {
+                                              return (
+                                                  <TableRow key={x.description}>
+                                                      <TableCell>{x.description}</TableCell>
+                                                      <TableCell>
+                                                          <Switch defaultChecked={false} size="small" />
+                                                      </TableCell>
+                                                      <TableCell>
+                                                          <Typography>{false ? "<ADATE>" : "Not enabled"}</Typography>
+                                                      </TableCell>
+                                                      <TableCell>
+                                                          <Tooltip title={x.public_key}>
+                                                              <div
+                                                                  style={{
+                                                                      overflow: "hidden",
+                                                                      textOverflow: "ellipsis",
+                                                                      width: "300px",
+                                                                  }}
+                                                              >
+                                                                  <Typography noWrap>{x.public_key}</Typography>
+                                                              </div>
+                                                          </Tooltip>
+                                                      </TableCell>
+                                                      <TableCell>
+                                                          <Stack direction="row" spacing={1}>
+                                                              <IconButton aria-label="edit">
+                                                                  <EditIcon />
+                                                              </IconButton>
+                                                              <IconButton aria-label="delete">
+                                                                  <DeleteIcon />
+                                                              </IconButton>
+                                                          </Stack>
+                                                      </TableCell>
+                                                  </TableRow>
+                                              );
+                                          })
+                                        : null}
                                 </TableBody>
                             </Table>
                         </Paper>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 87fc61750..8231f84a3 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -58,6 +58,13 @@ export default defineConfig(({ mode }) => {
             port: 3000,
             open: false,
         },
-        plugins: [/* eslintPlugin({ cache: false }) */, htmlPlugin(), istanbulPlugin, react(), svgr(), tsconfigPaths()],
+        plugins: [
+            ,
+            /* eslintPlugin({ cache: false }) */ htmlPlugin(),
+            istanbulPlugin,
+            react(),
+            svgr(),
+            tsconfigPaths(),
+        ],
     };
 });