diff --git a/Client/src/Components/Button/index.css b/Client/src/Components/Button/Button.css
similarity index 100%
rename from Client/src/Components/Button/index.css
rename to Client/src/Components/Button/Button.css
diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/Button.jsx
similarity index 50%
rename from Client/src/Components/Button/index.jsx
rename to Client/src/Components/Button/Button.jsx
index 66a345746..727a3d941 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/Button.jsx
@@ -18,23 +18,47 @@ const levelConfig = {
     variant: "contained",
     color: "error",
   },
+  imagePrimary: {
+    color: "primary",
+    variant: "text",
+  },
+  imageSecondary: {
+    color: "secondary",
+    variant: "text",
+  },
+  imageTertiary: {
+    color: "tertiary",
+    variant: "text",
+  },
 };
 
 /**
  * @param {Object} props
- * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The level of the button
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error' | 'imagePrimary' | 'imageSecondary' | 'imageTertiary'} props.level - The level of the button
  * @param {string} props.label - The label of the button
+ * @param {React.ReactNode} props.img - Image for button
  * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @param {Object} prps.sx - Styles for the button
  * @returns {JSX.Element}
  * @example
  * // Render an error button
- * <Button level="error" label="Error" disabled />
+ * <Button level="error" label="Error" disabled sx={{marginTop: "1rem"}}/>
  */
 
-const Button = ({ level, label, disabled }) => {
+const Button = ({ level, label, disabled, img, sx }) => {
   const { variant, color } = levelConfig[level];
+  console.log(img);
   return (
-    <MuiButton variant={variant} color={color} disabled={disabled}>
+    <MuiButton
+      variant={variant}
+      color={color}
+      disabled={disabled}
+      sx={{
+        textTransform: "none",
+        ...sx,
+      }}
+    >
+      {img && img}
       {label}
     </MuiButton>
   );
@@ -43,6 +67,8 @@ const Button = ({ level, label, disabled }) => {
 Button.propTypes = {
   level: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
+  img: PropTypes.node,
+  sx: PropTypes.object,
   disabled: PropTypes.bool,
 };
 
diff --git a/Client/src/Components/Section/Section.jsx b/Client/src/Components/Section/Section.jsx
new file mode 100644
index 000000000..978ae72b4
--- /dev/null
+++ b/Client/src/Components/Section/Section.jsx
@@ -0,0 +1,112 @@
+import PropTypes from "prop-types";
+import {
+  Box,
+  Container,
+  useTheme,
+  Typography,
+  TextField,
+  Switch,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import Button from "../Button/Button";
+import AddIcon from "@mui/icons-material/Add";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param { Array} props.montitors - Array of monitors associated with the section
+ * @returns {JSX.Element}
+ * @example
+ * // Renders a section component with a list of monitors
+ * <Section monitors={monitors} />
+ */
+
+const Section = ({ monitors }) => {
+  console.log(monitors);
+  const theme = useTheme();
+  return (
+    <>
+      <Container
+        disableGutters
+        sx={{
+          border: `1px solid ${theme.palette.section.borderColor}`,
+          borderRadius: `${theme.shape.borderRadius}px`,
+        }}
+      >
+        <Box
+          sx={{
+            textAlign: "left",
+            padding: `${theme.spacing(2)}`,
+            bgcolor: `${theme.palette.section.bgColor}`,
+            borderBottom: `1px solid ${theme.palette.section.borderColor}`,
+          }}
+        >
+          <Typography>Section Name</Typography>
+          <TextField
+            placeholder="Service Name"
+            sx={{
+              "& input": {
+                width: "320px",
+                height: "34px",
+                padding: "10px 14px 10px 14px",
+              },
+            }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "start",
+            textAlign: "left",
+            padding: `${theme.spacing(2)}`,
+            gap: 2,
+          }}
+        >
+          <Typography>Servers List</Typography>
+          <Button level="primary" label="Add new" />
+          {monitors.map((monitor) => {
+            return (
+              <Box
+                key={monitor.id}
+                sx={{
+                  boxSizing: "border-box",
+                  width: "100%",
+                  padding: "10px 14px 10px 14px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  border: `1px solid ${theme.palette.section.borderColor}`,
+                  borderRadius: `${theme.shape.borderRadius}px`,
+                  bgcolor: `${theme.palette.section.bgColor}`,
+                }}
+              >
+                <MenuIcon
+                  sx={{ color: `${theme.palette.section.borderColor}` }}
+                />
+                <Switch checked={monitor.isActive} />
+                <Typography sx={{ flexGrow: 1 }}>{monitor.name}</Typography>
+                <DeleteOutlineIcon
+                  sx={{ color: `${theme.palette.section.borderColor}` }}
+                />
+              </Box>
+            );
+          })}
+        </Box>
+      </Container>
+      <Button
+        sx={{ marginTop: theme.spacing(2) }}
+        level="imageSecondary"
+        label="Add new section"
+        img={<AddIcon />}
+      />
+    </>
+  );
+};
+
+Section.propTypes = {
+  monitors: PropTypes.array,
+};
+
+export default Section;
diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx
index b5771ab46..ad97bb0e8 100644
--- a/Client/src/Pages/Demo/Demo.jsx
+++ b/Client/src/Pages/Demo/Demo.jsx
@@ -1,9 +1,8 @@
 import React from "react";
-import Button from "../../Components/Button";
+import Button from "../../Components/Button/Button";
 import Link from "../../Components/Link";
 import ColoredLabel from "../../Components/Label/ColoredLabel";
 import {
-  Box,
   useTheme,
   Switch,
   Checkbox,
@@ -19,11 +18,13 @@ import StatusLabel from "../../Components/Label/StautsLabel";
 import Avatar from "../../Components/Avatar/Avatar";
 import ProgressStepper from "../../Components/ProgressStepper/ProgressStepper";
 import avatarImage from "../../assets/Images/avatar_placeholder.png";
+import Section from "../../Components/Section/Section";
 import { DataGrid } from "@mui/x-data-grid";
 
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import AddIcon from "@mui/icons-material/Add";
 
 const cols = [
   {
@@ -84,6 +85,12 @@ const steps = [
   { label: "Invite your team", content: "Start collaborating with your team" },
 ];
 
+const monitors = [
+  { id: 0, name: "Google", isActive: true },
+  { id: 1, name: "Yahoo", isActive: false },
+  { id: 2, name: "Reddit", isActive: true },
+];
+
 const Demo = () => {
   const [radio, setRadio] = React.useState(1);
   const [tab, setTab] = React.useState("departments");
@@ -121,6 +128,7 @@ const Demo = () => {
         <Button level="secondary" label="Secondary" disabled />
         <Button level="tertiary" label="Tertiary" disabled />
         <Button level="error" label="Error" disabled />
+        <Button level="imageTertiary" label="Image Button" img={<AddIcon />} />
       </div>
       <div>
         <Link
@@ -224,6 +232,9 @@ const Demo = () => {
       <div>
         <ProgressStepper steps={steps}></ProgressStepper>
       </div>
+
+      <h4>Section</h4>
+      <Section monitors={monitors} />
     </div>
   );
 };
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index c24b18242..99a442dfb 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -12,6 +12,10 @@ const labelGray = "#475467";
 const labelPurple = "#6941C6";
 const labelGreen = "#067647";
 const labelRed = "#F04438";
+
+//Section colros
+const sectionBorder = "#D0D5DD";
+const sectionBg = "#F8F9F8";
 const theme = createTheme({
   palette: {
     primary: {
@@ -39,6 +43,13 @@ const theme = createTheme({
     labelRed: {
       color: labelRed,
     },
+    section: {
+      borderColor: sectionBorder,
+      bgColor: sectionBg,
+    },
+  },
+  shape: {
+    borderRadius: 4,
   },
 });