diff --git a/backend/views/routes/Electives.js b/backend/views/routes/Electives.js
index 1e51562f..02d3cb40 100644
--- a/backend/views/routes/Electives.js
+++ b/backend/views/routes/Electives.js
@@ -4,6 +4,6 @@ const electivesController =  require('../../controllers/ElectiveControllers')
 
 router.post("/createElective", electivesController.createElective);
 router.delete("/deleteElective", electivesController.deleteElective);
-router.post("/electives", electivesController.listElectives)
+router.get("/electives", electivesController.listElectives)
 
 module.exports = router; 
diff --git a/frontend/src/pages/ElectivesExclusion/index.js b/frontend/src/pages/ElectivesExclusion/index.js
index a0c558ba..c506bc2c 100644
--- a/frontend/src/pages/ElectivesExclusion/index.js
+++ b/frontend/src/pages/ElectivesExclusion/index.js
@@ -21,40 +21,86 @@ import {
 ;
 
 const ElectivesList = () => {
- 
+  const [eletivas, setEletivas] = useState([]);
+  const [eletivasSelecionadas, setEletivasSelecionadas] = useState([]);
+
+  useEffect(() => {
+    async function fetchEletivas() {
+      try {
+        const response = await axios.get('http://localhost:3001/elective/electives'); // Endpoint para buscar trilhas
+        setEletivas(response.data); // Define as trilhas na state 'trilhas'
+      } catch (error) {
+        console.error('Erro ao buscar trilhas:', error);
+      }
+    }
+    fetchEletivas();
+  }, []);
+
+  const handleCheckboxChange = (id) => {
+    const isSelected = eletivasSelecionadas.includes(id);
+
+    if (isSelected) {
+      // Se já estiver selecionado, remova da lista de selecionados
+      setEletivasSelecionadas(eletivasSelecionadas.filter((eleId) => eleId !== id));
+    } else {
+      // Se não estiver selecionado, adicione à lista de selecionados
+      setEletivasSelecionadas([...eletivasSelecionadas, id]);
+    }
+
+    console.log(eletivasSelecionadas)
+  };
+
+  const handleExcluirClick = async () => {
+    try {
+      // Enviar uma solicitação para excluir as eletivas selecionadas
+      eletivasSelecionadas.map(async (eletiva)  => {
+        await axios.delete('http://localhost:3001/elective/deleteElective', {
+          data: { id: eletiva },
+        });
+      })
+  
+      // Atualizar a lista de eletivas após a exclusão
+      const response = await axios.get('http://localhost:3001/elective/electives');
+      setEletivas(response.data);
+  
+      // Limpar a lista de eletivas selecionadas
+      setEletivasSelecionadas([]);
+    } catch (error) {
+      console.error('Erro ao excluir eletivas:', error);
+    }
+  };
 
-  const dados = [{"nomeTrilha": "teste", "anoTrilha": 2}]
 
   return (
     <ChakraProvider>
       <Header></Header>
       <Flex align="center" justifyContent="center">
-        <Box width="60vh" marginTop="3vh" marginBottom="-9vh" paddingLeft="2vh" paddingRight="2vh" paddingTop="2vh" borderWidth={1} borderRadius={8} boxShadow="lg">
+        <Box width="100vh" marginTop="3vh" marginBottom="-9vh" paddingLeft="2vh" paddingRight="2vh" paddingTop="2vh" borderWidth={1} borderRadius={8} boxShadow="lg">
         <Box textAlign="center">
-          <Heading color= '#243A69'>Exclusão de Trilhas</Heading>
+          <Heading color= '#243A69'>Exclusão de Eletivas</Heading>
         </Box>
           <TableContainer>
             <Table variant='simple'>
               <Thead>
                 <Tr>
-                  <Th>Nome da trilha</Th>
+                  <Th>Nome da eletiva</Th>
                   <Th>Ano letivo</Th>
                   <Th></Th>
                 </Tr>
               </Thead>
               <Tbody>
-                {dados.map((linha, index) => (
-                  <Tr key={index}>
-                    <Td>{linha.nomeTrilha}</Td>
-                    <Td>{linha.anoTrilha}</Td>
-                    <Td><Checkbox colorScheme='red' defaultChecked></Checkbox></Td>
+                {eletivas.map((linha) => (
+                  <Tr>
+                    <Td>{linha.name}</Td>
+                    <Td>{linha.school_year}</Td>
+                    <Td><Checkbox colorScheme='red' onChange={() => handleCheckboxChange(linha.id)}></Checkbox></Td>
                   </Tr>
                 ))}
               </Tbody>
             </Table>
           </TableContainer>
           <Box display="flex" justifyContent="center">
-          <Button color="#243A69" variant='solid' margin="2vh">Excluir</Button>
+          <Button color="#243A69" variant='solid' margin="2vh" onClick={handleExcluirClick}>Excluir eletivas selecionadas</Button>
           </Box>
         </Box>
       </Flex>
@@ -63,4 +109,4 @@ const ElectivesList = () => {
   );
 };
 
-export default TrilhasList;
+export default ElectivesList;
diff --git a/frontend/src/routes/index.js b/frontend/src/routes/index.js
index 3b5d3020..17220626 100644
--- a/frontend/src/routes/index.js
+++ b/frontend/src/routes/index.js
@@ -5,6 +5,7 @@ import Home from "../pages/Home";
 import Signin from "../pages/Signin";
 import Signup from "../pages/Signup";
 import TrilhasList from "../pages/PathExclusion";
+import ElectivesList from "../pages/ElectivesExclusion"
 
 const Private = ({ Item }) => {
   const { signed } = useAuth();
@@ -22,6 +23,7 @@ const RoutesApp = () => {
           <Route exact path="/signup" element={<Signup />} />
           <Route path="*" element={<Signin />} />
           <Route path="/trilhas" element={<TrilhasList />} />
+          <Route path="/eletivas" element={<ElectivesList />} />
         </Routes>
       </Fragment>
     </BrowserRouter>