diff --git a/Client/src/Components/DashboardSettingsIcon/index.css b/Client/src/Components/DashboardSettingsIcon/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/DashboardSettingsIcon/index.jsx b/Client/src/Components/DashboardSettingsIcon/index.jsx
new file mode 100644
index 000000000..e1f1d59da
--- /dev/null
+++ b/Client/src/Components/DashboardSettingsIcon/index.jsx
@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import Tooltip from '@mui/material/Tooltip';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import SvgIcon from '@mui/material/SvgIcon';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { useTheme } from '@mui/material/styles';
+
+const settings = ['Open Site', 'Detailed View', 'Incidents', 'Configure', 'Remove'];
+
+/**
+ * DashboardSettings component
+ *
+ * A component that provides a settings menu accessible from an icon.
+ *
+ * @component
+ * @example
+ * return (
+ *
+ * )
+ */
+function DashboardSettings() {
+ const theme = useTheme();
+ const [anchorElUser, setAnchorElUser] = useState(null);
+
+ /**
+ * Handles opening the user menu.
+ *
+ * @param {React.MouseEvent} event - The event triggered by clicking the user menu button.
+ */
+ const handleOpenUserMenu = (event) => {
+ setAnchorElUser(event.currentTarget);
+ };
+
+ /**
+ * Handles closing the user menu.
+ */
+ const handleCloseUserMenu = () => {
+ setAnchorElUser(null);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DashboardSettings;
diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Layouts/HomeLayout/index.jsx
index bb37d4768..ed1d06fe6 100644
--- a/Client/src/Layouts/HomeLayout/index.jsx
+++ b/Client/src/Layouts/HomeLayout/index.jsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router'
import Home from '../../Pages/Home'
import './index.css'
import ChartsOverviewDemo from '../../Components/DashboardProgressBars'
+import DashboardSettings from '../../Components/DashboardSettingsIcon'
const HomeLayout = () => {
@@ -12,6 +13,7 @@ const HomeLayout = () => {
+
>
)
}