diff --git a/Front-End/src/app/[locale]/admin/structure/SchoolClassManagement/page.js b/Front-End/src/app/[locale]/admin/structure/SchoolClassManagement/page.js
index 7d1f4d1..1c3d26a 100644
--- a/Front-End/src/app/[locale]/admin/structure/SchoolClassManagement/page.js
+++ b/Front-End/src/app/[locale]/admin/structure/SchoolClassManagement/page.js
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Plus, Users, Layers } from 'lucide-react';
+import { Plus, Users, Layers, CheckCircle } from 'lucide-react';
 import Table from '@/components/Table';
 import MultiSelect from '@/components/MultiSelect';
 import InputText from '@/components/InputText';
@@ -27,9 +27,31 @@ export default function Page() {
   });
   const [popupVisible, setPopupVisible] = useState(false);
   const [popupMessage, setPopupMessage] = useState('');
+  const [selectedLevels, setSelectedLevels] = useState([]); // Par défaut, tous les niveaux sont sélectionnés
+  const [filteredStudents, setFilteredStudents] = useState([]);
+
+  useEffect(() => {
+    // Initialiser les niveaux sélectionnés avec tous les niveaux disponibles
+    if (classe?.levels?.length > 0) {
+      const initialLevels = getNiveauxLabels(classe.levels);
+      setSelectedLevels(initialLevels);
+    }
+  }, [classe]);
+
+  useEffect(() => {
+    // Filtrer les élèves en fonction des niveaux sélectionnés
+    if (selectedLevels.length > 0) {
+      const filtered = classe.students.filter((student) =>
+        selectedLevels.includes(getNiveauLabel(student.level))
+      );
+      setFilteredStudents(filtered);
+    } else {
+      setFilteredStudents([]); // Aucun élève si aucun niveau n'est sélectionné
+    }
+  }, [selectedLevels, classe]);
 
   const handleCreateGroup = () => {
-    if (!newGroup.name || !newGroup.level || newGroup.students.length === 0) {
+    if (!newGroup.name || !newGroup.level || !newGroup.students.length) {
       setPopupMessage(
         'Tous les champs doivent être remplis pour créer un groupe.'
       );
@@ -42,6 +64,15 @@ export default function Page() {
     setNewGroup({ name: '', level: null, students: [] });
   };
 
+  const handleLevelClick = (label) => {
+    setSelectedLevels(
+      (prev) =>
+        prev.includes(label)
+          ? prev.filter((level) => level !== label) // Retirer le niveau si déjà sélectionné
+          : [...prev, label] // Ajouter le niveau si non sélectionné
+    );
+  };
+
   const requestErrorHandler = (err) => {
     logger.error('Error fetching data:', err);
   };
@@ -51,6 +82,7 @@ export default function Page() {
       .then((classeData) => {
         logger.debug('Classes récupérées :', classeData);
         setClasse(classeData);
+        setFilteredStudents(classeData.students);
       })
       .catch(requestErrorHandler);
   }, []);
@@ -59,43 +91,62 @@ export default function Page() {
     <div className="p-6 space-y-6">
       <h1 className="text-2xl font-bold">{classe?.atmosphere_name}</h1>
 
-      {/* Section Niveaux */}
-      <div className="bg-white p-4 rounded-lg shadow-md">
-        <h2 className="text-xl font-semibold mb-4 flex items-center">
-          <Layers className="w-6 h-6 mr-2" />
-          Niveaux
-        </h2>
-        <div className="flex flex-wrap gap-2">
-          {classe?.levels?.length > 0 ? (
-            getNiveauxLabels(classe.levels).map((label, index) => (
-              <span
-                key={index} // Utilisez un index si les IDs ne sont pas disponibles
-                className="px-3 py-1 bg-gray-200 rounded-full text-gray-800"
-              >
-                {label}
-              </span>
-            ))
-          ) : (
-            <span className="text-gray-500">Aucun niveau associé</span>
-          )}
+      {/* Section Niveaux et Enseignants */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* Section Niveaux */}
+        <div className="bg-white p-4 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4 flex items-center">
+            <Layers className="w-6 h-6 mr-2" />
+            Niveaux
+          </h2>
+          <p className="text-sm text-gray-500 mb-4">
+            Filtrer les élèves par niveau
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {classe?.levels?.length > 0 ? (
+              getNiveauxLabels(classe.levels).map((label, index) => (
+                <span
+                  key={index}
+                  onClick={() => handleLevelClick(label)} // Gérer le clic sur un niveau
+                  className={`px-4 py-2 rounded-full cursor-pointer border transition-all duration-200 ${
+                    selectedLevels.includes(label)
+                      ? 'bg-emerald-200 text-emerald-800 border-emerald-300 shadow-md'
+                      : 'bg-gray-200 text-gray-800 border-gray-300 hover:bg-gray-300'
+                  }`}
+                >
+                  {selectedLevels.includes(label) ? (
+                    <span className="flex items-center gap-2">
+                      <CheckCircle className="w-4 h-4 text-emerald-600" />
+                      {label}
+                    </span>
+                  ) : (
+                    label
+                  )}
+                </span>
+              ))
+            ) : (
+              <span className="text-gray-500">Aucun niveau associé</span>
+            )}
+          </div>
         </div>
-      </div>
 
-      {/* Section Enseignants */}
-      <div className="bg-white p-4 rounded-lg shadow-md">
-        <h2 className="text-xl font-semibold mb-4 flex items-center">
-          <Users className="w-6 h-6 mr-2" />
-          Enseignants
-        </h2>
-        <div className="flex flex-wrap gap-2">
-          {classe?.teachers_details?.map((teacher) => (
-            <span
-              key={teacher.id}
-              className="px-3 py-1 bg-emerald-200 rounded-full text-emerald-800"
-            >
-              {teacher.last_name} {teacher.first_name}
-            </span>
-          ))}
+        {/* Section Enseignants */}
+        <div className="bg-white p-4 rounded-lg shadow-md">
+          <h2 className="text-xl font-semibold mb-4 flex items-center">
+            <Users className="w-6 h-6 mr-2" />
+            Enseignants
+          </h2>
+          <p className="text-sm text-gray-500 mb-4">Liste des enseignants</p>
+          <div className="flex flex-wrap gap-2">
+            {classe?.teachers_details?.map((teacher) => (
+              <span
+                key={teacher.id}
+                className="px-3 py-1 bg-emerald-200 rounded-full text-emerald-800"
+              >
+                {teacher.last_name} {teacher.first_name}
+              </span>
+            ))}
+          </div>
         </div>
       </div>
 
@@ -103,7 +154,7 @@ export default function Page() {
       <div className="bg-white p-4 rounded-lg shadow-md">
         <h2 className="text-xl font-semibold mb-4 flex items-center">
           <Users className="w-6 h-6 mr-2" />
-          Eleves
+          Élèves
         </h2>
         <Table
           columns={[
@@ -113,7 +164,7 @@ export default function Page() {
                 <div className="flex justify-center items-center">
                   {row.photo ? (
                     <a
-                      href={`${BASE_URL}${row.photo}`} // Lien vers la photo
+                      href={`${BASE_URL}${row.photo}`}
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -138,69 +189,10 @@ export default function Page() {
             { name: 'Prénom', transform: (row) => row.first_name },
             { name: 'Niveau', transform: (row) => getNiveauLabel(row.level) },
           ]}
-          data={classe.students}
+          data={filteredStudents} // Utiliser les élèves filtrés
         />
       </div>
 
-      {/* Section Groupes */}
-      {/* <div className="bg-white p-4 rounded-lg shadow-md">
-        <h2 className="text-xl font-semibold mb-4 flex items-center">
-          <Layers className="w-6 h-6 mr-2" />
-          groups
-        </h2>
-        <div className="space-y-4">
-          {groups.map((group, index) => (
-            <div key={group.name || index} className="p-4 bg-gray-100 rounded-lg shadow-sm">
-              <h3 className="text-lg font-semibold">{group.name}</h3>
-              <p className="text-sm text-gray-600">level: {group.level.name}</p>
-              <div className="flex flex-wrap gap-2 mt-2">
-                {group.students.map((student) => (
-                  <span
-                    key={student.id}
-                    className="px-3 py-1 bg-blue-200 rounded-full text-blue-800"
-                  >
-                    {student.last_name} {student.first_name}
-                  </span>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div> */}
-
-      {/* Formulaire de création de groupe */}
-      {/* <div className="mt-6">
-          <h3 className="text-lg font-semibold">createGroup</h3>
-          <div className="space-y-4">
-            <InputText
-              name="groupName"
-              value={newGroup.name}
-              onChange={(e) => setNewGroup({ ...newGroup, name: e.target.value })}
-              placeholder='groupName'
-            />
-            <MultiSelect
-              name="groupLevel"
-              label='selectLevel'
-              options={classe?.levels || []}
-              selectedOptions={newGroup.level ? [newGroup.level] : []}
-              onChange={(selected) => setNewGroup({ ...newGroup, level: selected[0] })}
-            />
-            <MultiSelect
-              name="groupStudents"
-              label='selectStudents'
-              options={students}
-              selectedOptions={newGroup.students}
-              onChange={(selected) => setNewGroup({ ...newGroup, students: selected })}
-            />
-            <button
-              onClick={handleCreateGroup}
-              className="px-4 py-2 bg-emerald-500 text-white rounded-md shadow-sm hover:bg-emerald-600"
-            >
-              create
-            </button>
-          </div>
-        </div>
-      </div> */}
-
       {/* Popup */}
       <Popup
         visible={popupVisible}