diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css
index 0777b29e2..1e8e4e354 100644
--- a/Client/src/Components/Inputs/Select/index.css
+++ b/Client/src/Components/Inputs/Select/index.css
@@ -1,13 +1,17 @@
-.select-component > .MuiSelect-select {
+.select-wrapper .select-component > .MuiSelect-select {
+  padding: 0 10px;
   height: 34px !important;
   display: flex !important;
   align-items: center;
+  text-transform: capitalize;
+  line-height: 1;
 }
-.MuiInputBase-root:has(> .MuiSelect-select) {
+.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select) {
   min-width: 150px;
 }
-.MuiInputBase-root:has(> .MuiSelect-select),
-.MuiMenu-List .MuiMenuItem-root {
+.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select),
+.MuiMenu-List .MuiMenuItem-root,
+.select-wrapper h3.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
 }
diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx
index 76feb6daa..9e637f8d1 100644
--- a/Client/src/Components/Inputs/Select/index.jsx
+++ b/Client/src/Components/Inputs/Select/index.jsx
@@ -1,6 +1,11 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { MenuItem, Select as MuiSelect } from "@mui/material";
+import {
+  MenuItem,
+  Select as MuiSelect,
+  Stack,
+  Typography,
+} from "@mui/material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 import "./index.css";
@@ -9,6 +14,7 @@ import "./index.css";
  * @component
  * @param {object} props
  * @param {string} props.id - The ID attribute for the select element.
+ * @param {string} props.placeholder - The label of the select element.
  * @param {string} props.placeholder - The placeholder text when no option is selected.
  * @param {boolean} props.isHidden - Whether the placeholder should be hidden.
  * @param {string} props.value - The currently selected value.
@@ -20,7 +26,16 @@ import "./index.css";
  * @returns {JSX.Element}
  */
 
-const Select = ({ id, placeholder, isHidden, value, items, onChange, sx }) => {
+const Select = ({
+  id,
+  label,
+  placeholder,
+  isHidden,
+  value,
+  items,
+  onChange,
+  sx,
+}) => {
   const theme = useTheme();
   const itemStyles = {
     fontSize: "var(--env-var-font-size-medium)",
@@ -31,61 +46,66 @@ const Select = ({ id, placeholder, isHidden, value, items, onChange, sx }) => {
   };
 
   return (
-    <MuiSelect
-      id={id}
-      className="select-component"
-      value={value}
-      onChange={onChange}
-      displayEmpty
-      MenuProps={{
-        PaperProps: {
-          style: {
-            marginTop: theme.gap.xs,
+    <Stack gap={theme.gap.xs} className="select-wrapper">
+      {label && <Typography component="h3">{label}</Typography>}
+      <MuiSelect
+        className="select-component"
+        value={value}
+        onChange={onChange}
+        displayEmpty
+        inputProps={{ id: id }}
+        MenuProps={{
+          PaperProps: {
+            className: "select-dropdown",
+            style: {
+              marginTop: theme.gap.xs,
+            },
           },
-        },
-        MenuListProps: {
-          style: { padding: 0 },
-        },
-      }}
-      IconComponent={KeyboardArrowDownIcon}
-      sx={{ ...sx }}
-    >
-      {placeholder && (
-        <MenuItem
-          className="select-placeholder"
-          value="0"
-          sx={{
-            display: isHidden ? "none" : "flex",
-            visibility: isHidden ? "none" : "visible",
-            ...itemStyles,
-          }}
-        >
-          {placeholder}
-        </MenuItem>
-      )}
-      {items.map((item) => (
-        <MenuItem
-          value={item._id}
-          key={`${id}-${item._id}`}
-          sx={{
-            ...itemStyles,
-          }}
-        >
-          {item.name}
-        </MenuItem>
-      ))}
-    </MuiSelect>
+          MenuListProps: {
+            style: { padding: 0 },
+          },
+        }}
+        IconComponent={KeyboardArrowDownIcon}
+        sx={{ ...sx }}
+      >
+        {placeholder && (
+          <MenuItem
+            className="select-placeholder"
+            value="0"
+            sx={{
+              display: isHidden ? "none" : "flex",
+              visibility: isHidden ? "none" : "visible",
+              ...itemStyles,
+            }}
+          >
+            {placeholder}
+          </MenuItem>
+        )}
+        {items.map((item) => (
+          <MenuItem
+            value={item._id}
+            key={`${id}-${item._id}`}
+            sx={{
+              ...itemStyles,
+            }}
+          >
+            {item.name}
+          </MenuItem>
+        ))}
+      </MuiSelect>
+    </Stack>
   );
 };
 
 Select.propTypes = {
   id: PropTypes.string.isRequired,
+  label: PropTypes.string,
   placeholder: PropTypes.string,
   isHidden: PropTypes.bool,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      _id: PropTypes.string.isRequired,
+      _id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
       name: PropTypes.string.isRequired,
     })
   ).isRequired,
diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
index a2ebebd97..699624528 100644
--- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx
+++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx
@@ -5,9 +5,7 @@ import {
   ButtonGroup,
   Divider,
   IconButton,
-  MenuItem,
   Modal,
-  Select,
   Stack,
   TextField,
   Typography,
@@ -18,12 +16,12 @@ import { useEffect, useState } from "react";
 import EditSvg from "../../../assets/icons/edit.svg?react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import axiosInstance from "../../../Utils/axiosConfig";
 import { createToast } from "../../../Utils/toastUtils";
 import { useSelector } from "react-redux";
 import BasicTable from "../../BasicTable";
 import Remove from "../../../assets/icons/trash-bin.svg?react";
+import Select from "../../Inputs/Select";
 
 /**
  * TeamPanel component manages the organization and team members,
@@ -44,7 +42,7 @@ const TeamPanel = () => {
   });
   const [toInvite, setToInvite] = useState({
     email: "",
-    role: [""],
+    role: ["0"],
   });
   const [tableData, setTableData] = useState({});
   const [members, setMembers] = useState([]);
@@ -202,7 +200,7 @@ const TeamPanel = () => {
   };
   const closeInviteModal = () => {
     setIsOpen(false);
-    setToInvite({ email: "", role: [""] });
+    setToInvite({ email: "", role: ["0"] });
     setErrors({});
   };
 
@@ -377,6 +375,8 @@ const TeamPanel = () => {
           />
           <Select
             id="team-member-role"
+            placeholder="Select role"
+            isHidden={true}
             value={toInvite.role[0]}
             onChange={(event) =>
               setToInvite((prev) => ({
@@ -384,46 +384,11 @@ const TeamPanel = () => {
                 role: [event.target.value],
               }))
             }
-            displayEmpty
-            MenuProps={{
-              PaperProps: {
-                style: {
-                  marginTop: theme.gap.xs,
-                },
-              },
-              MenuListProps: {
-                style: { padding: 0 },
-              },
-            }}
-            IconComponent={KeyboardArrowDownIcon}
-            sx={{ mt: theme.gap.xs }}
-          >
-            <MenuItem disableRipple id="role-default" value="">
-              Select role
-            </MenuItem>
-            <MenuItem
-              disableRipple
-              value="admin"
-              sx={{
-                fontSize: "13px",
-                borderRadius: `${theme.shape.borderRadius}px`,
-                margin: theme.gap.xs,
-              }}
-            >
-              Admin
-            </MenuItem>
-            <MenuItem
-              disableRipple
-              value="user"
-              sx={{
-                fontSize: "13px",
-                borderRadius: `${theme.shape.borderRadius}px`,
-                margin: theme.gap.xs,
-              }}
-            >
-              User
-            </MenuItem>
-          </Select>
+            items={[
+              { _id: "admin", name: "admin" },
+              { _id: "user", name: "user" },
+            ]}
+          />
           <Stack
             direction="row"
             gap={theme.gap.small}
diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css
index beb655815..ee28b1c30 100644
--- a/Client/src/Pages/Account/index.css
+++ b/Client/src/Pages/Account/index.css
@@ -67,23 +67,6 @@
   align-items: center;
 }
 
-#select-actions,
-#select-role {
-  padding: 5px 0;
-  padding-left: 15px;
-  padding-right: 50px;
-  line-height: 1.75;
-}
-.MuiInputBase-root:has(#select-actions) fieldset,
-.MuiInputBase-root:has(#select-role) fieldset {
-  border-color: #a1a7b1;
-  margin: -1px;
-  border-width: 1px;
-}
-.MuiInputBase-root:has(#select-actions):hover fieldset,
-.MuiInputBase-root:has(#select-role):hover fieldset {
-  border-color: var(--env-var-color-2);
-}
 
 /* for testing, will remove later */
 @media only screen and (max-width: 1600px) {
@@ -111,23 +94,6 @@
   margin: 0;
 }
 
-#role-default {
-  display: none;
-  visibility: none;
-}
-.MuiInputBase-root:has(#team-member-role) {
-  height: 34px;
-}
-#team-member-role {
-  padding: 0 10px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-.MuiInputBase-root:not(.Mui-focused):has(#team-member-role):hover fieldset {
-  border-color: var(--env-var-color-29);
-}
-
 .edit-organization-form {
   display: flex;
   align-items: center;
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index f4895f3f0..3c760564e 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -119,7 +119,6 @@ const Incidents = () => {
           value={selectedMonitor}
           onChange={handleSelect}
           items={Object.values(monitors)}
-          field="name"
         />
         <ButtonGroup sx={{ ml: "auto" }}>
           <Button
diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css
index 693e9f804..3d3ed04f2 100644
--- a/Client/src/Pages/Monitors/Configure/index.css
+++ b/Client/src/Pages/Monitors/Configure/index.css
@@ -69,4 +69,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--env-var-spacing-4);
+}
+
+body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root,
+.configure-monitor .select-wrapper .select-component > .MuiSelect-select {
+  text-transform: lowercase;
 }
\ No newline at end of file
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index c6ce13f89..159751544 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -5,15 +5,15 @@ import { useEffect, useState } from "react";
 import Button from "../../../Components/Button";
 import Field from "../../../Components/Inputs/Field";
 import RadioButton from "../../../Components/RadioButton";
-import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { Box, MenuItem, Stack, Typography } from "@mui/material";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import GreenCheck from "../../../assets/icons/checkbox-green.svg?react";
 import RedCheck from "../../../assets/icons/checkbox-red.svg?react";
 import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 
 import "./index.css";
 import { monitorValidation } from "../../../Validation/validation";
+import Select from "../../../Components/Inputs/Select";
 
 const formatDurationRounded = (ms) => {
   const seconds = Math.floor(ms / 1000);
@@ -119,7 +119,13 @@ const Configure = () => {
     // TODO
   };
 
-  const frequencies = [1, 2, 3, 4, 5];
+  const frequencies = [
+    { _id: 1, name: "1 minute" },
+    { _id: 2, name: "2 minutes" },
+    { _id: 3, name: "3 minutes" },
+    { _id: 4, name: "4 minutes" },
+    { _id: 5, name: "5 minutes" },
+  ];
 
   return (
     <div
@@ -284,40 +290,13 @@ const Configure = () => {
             <Typography component="h2">Advanced settings</Typography>
           </Box>
           <Stack gap={theme.gap.xl}>
-            <Box>
-              <Typography component="p" mb={theme.gap.small}>
-                Check frequency
-              </Typography>
-              <Select
-                id="monitor-interval"
-                value={monitor?.interval || 1}
-                inputProps={{ id: "monitor-interval-select" }}
-                MenuProps={{
-                  PaperProps: {
-                    style: {
-                      marginTop: "10px",
-                    },
-                  },
-                }}
-                IconComponent={KeyboardArrowDownIcon}
-                onChange={(event) => handleChange(event, "interval")}
-              >
-                {frequencies.map((freq) => (
-                  <MenuItem
-                    key={`port-${freq}`}
-                    value={freq}
-                    disableRipple
-                    sx={{
-                      fontSize: "13px",
-                      borderRadius: `${theme.shape.borderRadius}px`,
-                      margin: theme.gap.xs,
-                    }}
-                  >
-                    {freq} {freq === 1 ? "minute" : "minutes"}
-                  </MenuItem>
-                ))}
-              </Select>
-            </Box>
+            <Select
+              id="monitor-interval-configure"
+              label="Check frequency"
+              value={monitor?.interval || 1}
+              onChange={(event) => handleChange(event, "interval")}
+              items={frequencies}
+            />
           </Stack>
         </Stack>
         <Stack direction="row" justifyContent="flex-end">
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index 59745a6cd..7454973d5 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -10,14 +10,12 @@
   font-size: var(--env-var-font-size-large);
 }
 .create-monitor p.MuiTypography-root,
-.create-monitor button.MuiButtonBase-root,
-#monitor-frequencies {
+.create-monitor button.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
 }
 .create-monitor h2.MuiTypography-root,
 .create-monitor h6.MuiTypography-root,
-.create-monitor p.MuiTypography-root,
-#monitor-frequencies {
+.create-monitor p.MuiTypography-root {
   color: var(--env-var-color-2);
 }
 .create-monitor h6.MuiTypography-root {
@@ -36,21 +34,6 @@
   position: absolute;
   top: 0;
 }
-.create-monitor .MuiSelect-select.MuiSelect-outlined.MuiInputBase-input {
-  padding: var(--env-var-spacing-1);
-}
-.create-monitor .MuiInputBase-root:has(#monitor-frequencies) {
-  min-width: 300px;
-  width: 100%;
-  height: 34px;
-  border: 1px solid var(--env-var-color-4);
-  border-radius: var(--env-var-radius-1);
-  overflow: hidden;
-}
-.create-monitor .MuiInputBase-root:has(#monitor-frequencies) fieldset {
-  outline: none;
-  border: none;
-}
 .create-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) {
   position: relative;
 }
@@ -75,4 +58,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--env-var-spacing-4);
+}
+
+body:has(.create-monitor) .select-dropdown .MuiMenuItem-root,
+.create-monitor .select-wrapper .select-component > .MuiSelect-select {
+  text-transform: lowercase;
 }
\ No newline at end of file
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 16b002abc..e8b2a5034 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -2,7 +2,7 @@ import "./index.css";
 import React, { useState } from "react";
 import RadioButton from "../../../Components/RadioButton";
 import Button from "../../../Components/Button";
-import { Box, MenuItem, Select, Stack, Typography } from "@mui/material";
+import { Box, MenuItem, Stack, Typography } from "@mui/material";
 import { useSelector, useDispatch } from "react-redux";
 import { monitorValidation } from "../../../Validation/validation";
 import { createMonitor } from "../../../Features/Monitors/monitorsSlice";
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { useTheme } from "@emotion/react";
 import WestRoundedIcon from "@mui/icons-material/WestRounded";
 import Field from "../../../Components/Inputs/Field";
+import Select from "../../../Components/Inputs/Select";
 
 const CreateMonitor = () => {
   const MS_PER_MINUTE = 60000;
@@ -125,7 +126,13 @@ const CreateMonitor = () => {
 
   //select values
   // const ports = ["Port 1", "Port 2", "Port 3"];
-  const frequencies = [1, 2, 3, 4, 5];
+  const frequencies = [
+    { _id: 1, name: "1 minute" },
+    { _id: 2, name: "2 minutes" },
+    { _id: 3, name: "3 minutes" },
+    { _id: 4, name: "4 minutes" },
+    { _id: 5, name: "5 minutes" },
+  ];
 
   return (
     <div
@@ -308,41 +315,15 @@ const CreateMonitor = () => {
             <Typography component="h2">Advanced settings</Typography>
           </Box>
           <Stack gap={theme.gap.large}>
-            {/* TODO - refactor select component */}
-            <Box>
-              <Typography component="p" mb={theme.gap.small}>
-                Check frequency
-              </Typography>
-              <Select
-                id="monitor-frequencies"
-                value={advancedSettings.interval || 1}
-                inputProps={{ id: "monitor-frequencies-select" }}
-                onChange={(event) =>
-                  handleChange(event, "interval", setAdvancedSettings)
-                }
-                MenuProps={{
-                  PaperProps: {
-                    style: {
-                      marginTop: "10px",
-                    },
-                  },
-                }}
-              >
-                {frequencies.map((freq) => (
-                  <MenuItem
-                    key={`port-${freq}`}
-                    value={freq}
-                    sx={{
-                      fontSize: "13px",
-                      borderRadius: `${theme.shape.borderRadius}px`,
-                      margin: "5px",
-                    }}
-                  >
-                    {freq} {freq === 1 ? "minute" : "minutes"}
-                  </MenuItem>
-                ))}
-              </Select>
-            </Box>
+            <Select
+              id="monitor-interval"
+              label="Check frequency"
+              value={advancedSettings.interval || 1}
+              onChange={(event) =>
+                handleChange(event, "interval", setAdvancedSettings)
+              }
+              items={frequencies}
+            />
             {/* TODO */}
             {/* <FlexibileTextField
               id="monitor-settings-retries"
diff --git a/Client/src/Pages/Settings/index.jsx b/Client/src/Pages/Settings/index.jsx
index 40cca5e66..346875235 100644
--- a/Client/src/Pages/Settings/index.jsx
+++ b/Client/src/Pages/Settings/index.jsx
@@ -1,10 +1,11 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Button from "../../Components/Button";
-
-import "./index.css";
 import Field from "../../Components/Inputs/Field";
 import Link from "../../Components/Link";
+import Select from "../../Components/Inputs/Select";
+
+import "./index.css";
 
 const Settings = () => {
   const theme = useTheme();
@@ -37,22 +38,19 @@ const Settings = () => {
             </Typography>
           </Box>
           <Stack gap={theme.gap.xl}>
-            {/* TODO - build select component */}
-            <Field
-              type="text"
+            <Select
               id="display-timezone"
               label="Display timezone"
-              placeholder="America / Toronto"
-              value=""
-              onChange={() => console.log("Disabled")}
+              value="est"
+              onChange={() => console.log("disabled")}
+              items={[{ _id: "est", name: "America / Toronto" }]}
             />
-            <Field
-              type="text"
+            <Select
               id="server-timezone"
               label="Server timezone"
-              placeholder="America / Toronto"
-              value=""
-              onChange={() => console.log("Disabled")}
+              value="est"
+              onChange={() => console.log("disabled")}
+              items={[{ _id: "est", name: "America / Toronto" }]}
             />
           </Stack>
         </Stack>