diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 853beeb..076eb8d 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -213,6 +213,19 @@ const Header = () => {
           >
             À Propos
           </Button>
+          <Button
+            component={Link}
+            to="/bureauEtude"
+            color="inherit"
+            sx={{
+              fontWeight: location.pathname === "/bureauEtude" ? "bold" : "normal",
+              textDecoration:
+                location.pathname === "/bureauEtude" ? "underline" : "none",
+              ...commonButtonStyles,
+            }}
+          >
+            Bureau d'étude
+          </Button>
           <Button
             component={Link}
             to="/contact"
diff --git a/frontend/src/components/Pages/BureauEtude.jsx b/frontend/src/components/Pages/BureauEtude.jsx
new file mode 100644
index 0000000..5fe5179
--- /dev/null
+++ b/frontend/src/components/Pages/BureauEtude.jsx
@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Typography,
+  Grid,
+  Card,
+  CardContent,
+  Button,
+} from "@mui/material";
+import api from "../../api";
+
+const BureauEtudes = () => {
+  const [pageData, setPageData] = useState(null);
+
+  useEffect(() => {
+    const fetchPageData = async () => {
+      try {
+        const response = await api.get("wp/v2/pages/272?_fields=acf"); // Remplace XXX par l'ID WordPress de la page
+        setPageData(response.data.acf);
+      } catch (error) {
+        console.error(
+          "Erreur lors de la récupération des données ACF :",
+          error
+        );
+      }
+    };
+
+    fetchPageData();
+  }, []);
+
+  if (!pageData) {
+    return <Typography>Chargement...</Typography>;
+  }
+
+  return (
+    <Box sx={{}}>
+      {/* Section Héros avec Image de Fond */}
+      <Box
+        sx={{
+          backgroundImage: "url('https://picsum.photos/1920/600.webp')",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          minHeight: "60vh",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          textAlign: "center",
+          px: 4,
+        }}
+      >
+
+      {/* Présentation Générale */}
+      <Box sx={{ mt: 6, textAlign: "center", px: 4 }}>
+        <Typography variant="h1" sx={{
+          fontSize: { xs: "3rem", md: "3rem", lg: "3.5rem" }, // Responsive 
+          fontWeight: "bold", 
+          mb: 2,
+          }}>
+          Notre Bureau d'Études
+        </Typography>
+        <Typography variant="body2" sx={{ maxWidth: "900px", mx: "auto" }}>
+          {pageData.introduction}
+        </Typography>
+      </Box>
+      </Box>
+      {/* Domaines d'Intervention */}
+      <Box sx={{ mt: 6, px: 4 }}>
+        <Typography variant="h2" sx={{ 
+          fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive 
+          fontWeight: "bold", 
+          textAlign: "center", 
+          mb: 3 }}>
+          Nos Domaines d'Intervention
+        </Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {pageData.liste_des_competences?.map((competence, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <Card
+                sx={{
+                  textAlign: "center",
+                  padding: 3,
+                  transition: "transform 0.3s, box-shadow 0.3s",
+                  "&:hover": {
+                    transform: "scale(1.05)",
+                    boxShadow: "0px 10px 20px rgba(0, 0, 0, 0.2)",
+                  },
+                }}
+              >
+                <CardContent>
+                  <Typography variant="h3" sx={{ 
+                    fontWeight: "bold", 
+                    mb: 1,
+                    fontSize: { xs: "1.8rem", md: "1.8rem", lg: "1.8rem" }, // Responsive 
+                    }}>
+                    {competence.comp_titre}
+                  </Typography>
+                  <Typography variant="body2" sx={{
+                    textAlign:"center"
+                  }}>{competence.comp_description}</Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+
+      {/* Compétences Spécifiques */}
+      <Box sx={{ mt: 6, textAlign: "center", px: 4 }}>
+        <Typography variant="h2" sx={{
+          fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive 
+          fontWeight: "bold", 
+          mb: 3 
+          }}>
+          Nos Compétences
+        </Typography>
+        <Typography variant="body1" sx={{ maxWidth: "900px", mx: "auto" }}>
+          {pageData.methodologie}
+        </Typography>
+      </Box>
+
+      {/* Engagement et Accompagnement */}
+      <Box
+        sx={{
+          mt: 6,
+          py: 6,
+          px: 4,
+          textAlign: "center",
+          background: "linear-gradient(to bottom, #0e467f, #ffffff)",
+          color: "white",
+        }}
+      >
+        <Typography variant="h2" sx={{
+          fontSize: { xs: "2.5rem", md: "2.5rem", lg: "2.5rem" }, // Responsive 
+          fontWeight: "bold", 
+          mb: 3 
+          }}>
+          Engagement et Accompagnement
+        </Typography>
+        <Grid container spacing={4} justifyContent="center">
+          {pageData.expertises_specifiques?.map((expertise, index) => (
+            <Grid item xs={12} sm={6} md={4} key={index}>
+              <Card
+                sx={{
+                  textAlign: "center",
+                  padding: 3,
+                  backgroundColor: "rgba(255, 255, 255, 0.1)",
+                  backdropFilter: "blur(10px)",
+                  transition: "transform 0.3s, box-shadow 0.3s",
+                  "&:hover": {
+                    transform: "scale(1.05)",
+                    boxShadow: "0px 10px 20px rgba(255, 255, 255, 0.2)",
+                  },
+                }}
+              >
+                <CardContent>
+                  <Typography variant="h3" sx={{
+                    fontSize: { xs: "1.8rem", md: "1.8rem", lg: "1.8rem" }, // Responsive                  
+                    fontWeight: "bold", 
+                    mb: 1 }}>
+                    {expertise.expertise_nom}
+                  </Typography>
+                  <Typography variant="body2">{expertise.expertise_details}</Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+
+      {/* Call-To-Action */}
+      <Box sx={{ mt: 6, textAlign: "center", mb: 6 }}>
+        <Button
+          variant="contained"
+          color="primary"
+          href="/contact"
+          sx={{
+            padding: "12px 24px",
+            fontSize: "1.2rem",
+            fontWeight: "bold",
+            borderRadius: "8px",
+            transition: "background-color 0.3s, transform 0.3s",
+            "&:hover": {
+              backgroundColor: "#0a3b6b",
+              transform: "scale(1.05)",
+            },
+          }}
+        >
+          Nous Contacter
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default BureauEtudes;
\ No newline at end of file
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 4c89bf2..d08292a 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -13,6 +13,7 @@ const About = lazy(() => import('./components/Pages/About'));
 const Contact = lazy(() => import('./components/Pages/Contact'));
 const Post = lazy(() => import('./components/Pages/Post'));
 const Search = lazy(() => import('./components/Pages/Search')); // Nouveau composant pour la recherche
+const BureauEtude = lazy(() => import('./components/Pages/BureauEtude'));
 
 // Import des services
 import ServiceUn from "./components/Pages/ServiceUn.jsx";
@@ -31,6 +32,7 @@ function YourApp() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/posts" element={<Post />} />
+          <Route path="/bureauEtude" element={<BureauEtude />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
           <Route path="/search" element={<Search />} /> {/* Route pour les recherches */}