1 files changed, 14 insertions, 3 deletions
diff --git a/web/src/layouts/SettingsLayout.tsx b/web/src/layouts/SettingsLayout.tsx
index 5f540954b..7e00ce9fa 100644
--- a/web/src/layouts/SettingsLayout.tsx
+++ b/web/src/layouts/SettingsLayout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, SyntheticEvent, useCallback, useEffect, useState } from "react";
 
-import { Close, Dashboard, Menu, SystemSecurityUpdateGood } from "@mui/icons-material";
+import { Close, Dashboard, Menu, Security, SystemSecurityUpdateGood } from "@mui/icons-material";
 import {
     AppBar,
     Box,
@@ -17,7 +17,12 @@ import {
 import IconButton from "@mui/material/IconButton";
 import { useTranslation } from "react-i18next";
 
-import { IndexRoute, SettingsRoute, SettingsTwoFactorAuthenticationSubRoute } from "@constants/Routes";
+import {
+    IndexRoute,
+    SecuritySubRoute,
+    SettingsRoute,
+    SettingsTwoFactorAuthenticationSubRoute,
+} from "@constants/Routes";
 import { useRouterNavigate } from "@hooks/RouterNavigate";
 
 export interface Props {
@@ -127,7 +132,7 @@ const SettingsLayout = function (props: Props) {
                     {drawer}
                 </SwipeableDrawer>
             </Box>
-            <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+            <Box component="main" sx={{ flexGrow: 1, p: { xs: 0, sm: 3 } }}>
                 <Toolbar />
                 {props.children}
             </Box>
@@ -145,6 +150,12 @@ interface NavItem {
 const navItems: NavItem[] = [
     { keyname: "overview", text: "Overview", pathname: SettingsRoute, icon: <Dashboard color={"primary"} /> },
     {
+        keyname: "security",
+        text: "Security",
+        pathname: `${SettingsRoute}${SecuritySubRoute}`,
+        icon: <Security color={"primary"} />,
+    },
+    {
         keyname: "twofactor",
         text: "Two-Factor Authentication",
         pathname: `${SettingsRoute}${SettingsTwoFactorAuthenticationSubRoute}`,