diff --git a/frontend/src/views/Detection.jsx b/frontend/src/views/Detection.jsx
new file mode 100644
index 000000000..c2711b45d
--- /dev/null
+++ b/frontend/src/views/Detection.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Container, Box, TextField, Switch, Card, CardContent, IconButton, Typography, Button } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import { styled } from '@mui/system';
+
+const ConnectedButton = styled(Button)({
+  backgroundColor: 'red',
+  color: 'white',
+});
+
+const RuleCard = ({ ruleName, description }) => (
+  <Card variant="outlined" sx={{ mb: 2 }}>
+    <CardContent>
+    <div style = {{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+      <Typography variant="h6">{ruleName}</Typography>
+      <div style ={{ display: 'flex', alignItems: 'center'}}>
+          <IconButton >
+            <EditIcon />
+          </IconButton>
+          <Switch defaultChecked />
+        </div>
+        </div>
+      <Typography variant="body2" style = {{marginTop: '2%'}}>{description}</Typography>
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {/* we need icons here ??? */}
+        </Box>
+      </Box>
+    </CardContent>
+  </Card>
+);
+
+const Detection = () => {
+  return (
+    <Container sx={{ mt: 4 }}>
+      <Box sx={{ border: '1px solid #ccc', borderRadius: 2, p: 3 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" component="div">
+            Group 1 Title
+          </Typography>
+          <ConnectedButton variant="contained">Not Connected to SIEM</ConnectedButton>
+        </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+          <TextField label="Search rules" variant="outlined" size="small" />
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Typography variant="body2" sx={{ mr: 1 }}>Global disable/enable</Typography>
+            <Switch defaultChecked />
+          </Box>
+        </Box>
+        <RuleCard ruleName="Rule Name" description="this is the random text generated by me to check how this looks in the ui" />
+        <RuleCard ruleName="Rule Name" description="Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum Lorum Ipsum" />
+        <RuleCard ruleName="Rule Name" description="LorumIpsumLorumIpsumLorumIpsumLorumIpsumLorumIpsum" />
+      </Box>
+    </Container>
+  );
+};
+
+export default Detection;