diff --git a/next.config.js b/next.config.js
index a9b57e513..d2fa5073c 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,6 +12,14 @@ module.exports = {
     });
     return config;
   },
+  webpackDevMiddleware: (config) => {
+    // Enable hot reloading
+    config.watchOptions = {
+      poll: 1000,
+      aggregateTimeout: 300,
+    };
+    return config;
+  },
   experimental: { esmExternals: false },
   eslint: {
     // ESLint is already called before building with nextJS. So no need here.
diff --git a/server/controllers/classroom.ts b/server/controllers/classroom.ts
index 6ab290520..e78a00193 100644
--- a/server/controllers/classroom.ts
+++ b/server/controllers/classroom.ts
@@ -75,6 +75,7 @@ classroomController.post({ path: '', userType: UserType.TEACHER }, async (req: R
   if (!createClassroomValidator(data)) {
     sendInvalidDataError(createClassroomValidator);
   }
+
   if (!req.user) {
     throw new AppError('Forbidden', ErrorCode.UNKNOWN);
   }
diff --git a/server/controllers/user.ts b/server/controllers/user.ts
index baa4aa950..a912beee8 100644
--- a/server/controllers/user.ts
+++ b/server/controllers/user.ts
@@ -824,17 +824,36 @@ userController.delete({ path: '/:userId/linked-students/:studentId' }, async (re
 });
 
 // Get the visibility parameters for Family members
-userController.get({ path: '/visibility-params', userType: UserType.FAMILY }, async (req: Request, res: Response) => {
+userController.get({ path: '/:id/visibility-params/', userType: UserType.FAMILY }, async (req: Request, res: Response) => {
   if (!req.user) {
     throw new AppError('Forbidden', ErrorCode.UNKNOWN);
   }
-  const visibilityParams = await AppDataSource.getRepository(UserToStudent)
-    .createQueryBuilder('userStudent')
-    .innerJoinAndSelect('userStudent.student', 'student')
-    .innerJoinAndSelect('student.classroom', 'classroom')
-    .where('userStudent.user = :familyId', { familyId: req.user.id })
-    .getRawMany(); //* Here it's getRawMany because for some reason we lost 2 attributes otherwise classroom.userId and classroom.villageId
-  res.json(visibilityParams);
+  const id = parseInt(req.params.id, 10) || 0;
+  const user = await AppDataSource.getRepository(User).findOne({ where: { id }, relations: ['userToStudents', 'userToStudents.student'] });
+
+  if (user && user.type === UserType.TEACHER) {
+    const teacherClassroom = await AppDataSource.getRepository(Classroom).findOne({
+      where: { user: { id: user.id } },
+    });
+    return res.json(teacherClassroom);
+  }
+
+  if (user && user.type === UserType.FAMILY) {
+    const classrooms = [];
+
+    for (const student of user.userToStudents) {
+      const classroom = await AppDataSource.getRepository(Classroom).findOne({
+        where: { students: { id: student.student.id } },
+      });
+      if (classroom) {
+        classrooms.push(classroom);
+      }
+    }
+
+    return res.json(classrooms);
+  }
+
+  return res.json([]);
 });
 
 userController.get({ path: '/get-student-vp', userType: UserType.FAMILY }, async (req: Request, res: Response) => {
diff --git a/src/api/user/user.get.ts b/src/api/user/user.get.ts
index d98dfcc98..f9496c8c2 100644
--- a/src/api/user/user.get.ts
+++ b/src/api/user/user.get.ts
@@ -1,5 +1,7 @@
 import { axiosRequest } from 'src/utils/axiosRequest';
 import type { Student } from 'types/student.type';
+import type { User } from 'types/user.type';
+import { UserType } from 'types/user.type';
 
 export const getUsers = async () => {
   const response = await axiosRequest({
@@ -25,3 +27,15 @@ export const getLinkedStudentsToUser = async (userId: number) => {
   }
 };
 
+export const getUserVisibilityFamilyParams = async (user: User) => {
+  if (user.type === UserType.FAMILY || user.type === UserType.TEACHER) {
+    const response = await axiosRequest({
+      method: 'GET',
+      url: `/users/${user.id}/visibility-params`,
+    });
+    if (response.error) return null;
+    console.log('User visibility params: ', response.data);
+    return response.data;
+  }
+  return [];
+};
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index aee363a0e..3f2a1897d 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,16 +1,16 @@
 // import SearchIcon from '@mui/icons-material/Search';
 
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useEffect } from 'react';
+
 import SettingsIcon from '@mui/icons-material/Settings';
 import { Button, FormControl, InputLabel, Select } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 // import InputBase from '@mui/material/InputBase';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import React, { useEffect } from 'react';
 
-import AccessControl from './AccessControl';
 import { getClassroomOfStudent } from 'src/api/student/student.get';
 import { getLinkedStudentsToUser } from 'src/api/user/user.get';
 import { updateUser } from 'src/api/user/user.put';
@@ -32,7 +32,7 @@ export const Header = () => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
   const open = Boolean(anchorEl);
-  
+
   //* NOTE: might be interesting to make a hook for this below
   const isPelico =
     (user !== null && user.type === UserType.MEDIATOR) ||
@@ -85,12 +85,12 @@ export const Header = () => {
         setUser({ ...user, country: { isoCode: classroomOfStudent?.country?.isoCode, name: '' } });
 
         // updateUser(user?.id, {country:  });
-      } catch (err) { }
+      } catch (err) {}
     }
     setIsModalOpen(false);
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     console.log('user ===', user);
   }, [user]);
 
@@ -187,9 +187,7 @@ export const Header = () => {
               >
                 <MenuItem onClick={() => goToPage('/mon-compte')}>Mon compte</MenuItem>
                 {user.type !== UserType.FAMILY && <MenuItem onClick={() => goToPage('/mes-videos')}>Mes vidéos</MenuItem>}
-                <AccessControl featureName="id-family" key={user?.id || 'default'}>
-                  {user.type === UserType.TEACHER ? <MenuItem onClick={() => goToPage('/familles/1')}>Mes familles</MenuItem> : null}{' '}
-                </AccessControl>
+                {user.type === UserType.TEACHER ? <MenuItem onClick={() => goToPage('/familles/1')}>Mes familles</MenuItem> : null}{' '}
                 <MenuItem onClick={logout}>
                   <span className="text text--alert">Se déconnecter</span>
                 </MenuItem>
@@ -206,8 +204,8 @@ export const Header = () => {
                     {selectedStudent
                       ? `${selectedStudent.firstname} ${selectedStudent.lastname}`
                       : linkedStudents.length > 0
-                        ? `${linkedStudents[0].firstname} ${linkedStudents[0].lastname}`
-                        : 'Eleve non selectionne'}
+                      ? `${linkedStudents[0].firstname} ${linkedStudents[0].lastname}`
+                      : 'Eleve non selectionne'}
                   </span>
                   <Button variant="contained" color="secondary" size="small" style={{ margin: '-1px -1px 0 0' }} onClick={showSelectStudentModal}>
                     {linkedStudents?.length > 0 ? 'Changer' : 'Choisir un élève'}
@@ -288,9 +286,7 @@ export const Header = () => {
               >
                 <MenuItem onClick={() => goToPage('/mon-compte')}>Mon compte</MenuItem>
                 {user.type !== UserType.FAMILY && <MenuItem onClick={() => goToPage('/mes-videos')}>Mes vidéos</MenuItem>}
-                <AccessControl featureName="id-family" key={user?.id || 'default'}>
-                  {user.type === UserType.TEACHER ? <MenuItem onClick={() => goToPage('/familles/1')}>Mes familles</MenuItem> : null}{' '}
-                </AccessControl>
+                {user.type === UserType.TEACHER ? <MenuItem onClick={() => goToPage('/familles/1')}>Mes familles</MenuItem> : null}{' '}
                 <MenuItem onClick={logout}>
                   <span className="text text--alert">Se déconnecter</span>
                 </MenuItem>
diff --git a/src/components/accueil/Accueil.tsx b/src/components/accueil/Accueil.tsx
index c039bb978..a27abc2bb 100644
--- a/src/components/accueil/Accueil.tsx
+++ b/src/components/accueil/Accueil.tsx
@@ -4,6 +4,7 @@ import { Button } from '@mui/material';
 
 import { filterActivitiesByTerm, filterActivitiesWithLastMimicGame } from './Filters/FilterActivities';
 import { LinkChild } from './LinkChild';
+import { getUserVisibilityFamilyParams } from 'src/api/user/user.get';
 import { Base } from 'src/components/Base';
 import { KeepRatio } from 'src/components/KeepRatio';
 import { WorldMap } from 'src/components/WorldMap';
@@ -86,6 +87,10 @@ export const Accueil = () => {
     );
   }
 
+  if ((user && user.type === UserType.FAMILY) || (user && user.type === UserType.TEACHER)) {
+    getUserVisibilityFamilyParams(user);
+  }
+
   return (
     <Base showSubHeader>
       {village && selectedPhase <= village.activePhase ? (
diff --git a/src/contexts/classroomContext.tsx b/src/contexts/classroomContext.tsx
index c3e7ccf47..478069f46 100644
--- a/src/contexts/classroomContext.tsx
+++ b/src/contexts/classroomContext.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { UserContext } from './userContext';
 import { VillageContext } from './villageContext';
@@ -284,6 +284,10 @@ export const ClassroomContextProvider = ({ children }: ClassroomContextProviderP
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [createClassroom, fetchClassroom, getStudents, user]);
 
+  useEffect(() => {
+    console.log('classroom ===', classroom);
+  }, [classroom]);
+
   const value = React.useMemo(
     () => ({
       classroom,
diff --git a/src/contexts/userContext.tsx b/src/contexts/userContext.tsx
index 47efd8ef1..139385223 100644
--- a/src/contexts/userContext.tsx
+++ b/src/contexts/userContext.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { axiosRequest } from 'src/utils/axiosRequest';
 import type { Student } from 'types/student.type';
@@ -10,7 +10,7 @@ type UserContextFunc = Promise<{ success: boolean; errorCode: number }>;
 
 interface UserContextValue {
   user: User | null;
-  selectedStudent: Student | null;
+  selectedStudent: number;
   isLoggedIn: boolean;
   login(username: string, password: string, remember: boolean): UserContextFunc;
   loginWithSso(code: string): UserContextFunc;
@@ -31,7 +31,7 @@ interface UserContextValue {
 
 export const UserContext = React.createContext<UserContextValue>({
   user: null,
-  selectedStudent: null,
+  selectedStudent: 1,
   isLoggedIn: false,
   login: async () => ({ success: false, errorCode: 0 }),
   loginWithSso: async () => ({ success: false, errorCode: 0 }),
@@ -57,9 +57,7 @@ interface UserContextProviderProps {
 
 export const UserContextProvider = ({ user, setUser, children }: React.PropsWithChildren<UserContextProviderProps>) => {
   const router = useRouter();
-  const [selectedStudent, setSelectedStudent] = React.useState<Student | null>(null);
-
-  // const [linkedStudents, setLinkedStudents] = React.useState<Student[]>([]);
+  const [selectedStudent, setSelectedStudent] = React.useState<number>(1);
 
   React.useEffect(() => {
     if (
@@ -351,6 +349,10 @@ export const UserContextProvider = ({ user, setUser, children }: React.PropsWith
     [user],
   );
 
+  useEffect(() => {
+    console.log('user===', user);
+  }, [user]);
+
   const value = React.useMemo(
     () => ({
       user,
diff --git a/src/pages/familles/1.tsx b/src/pages/familles/1.tsx
index ca43e67bb..e68154f3b 100644
--- a/src/pages/familles/1.tsx
+++ b/src/pages/familles/1.tsx
@@ -3,7 +3,6 @@ import React, { useContext, useEffect, useReducer } from 'react';
 
 import { Button, CircularProgress, FormControl, FormControlLabel, Radio, RadioGroup, TextField } from '@mui/material';
 
-import AccessControl from 'src/components/AccessControl';
 import { Base } from 'src/components/Base';
 import OverflowContainer from 'src/components/OverflowContainer';
 import { Steps } from 'src/components/Steps';
@@ -292,142 +291,140 @@ const ClassroomParamStep1 = () => {
 
   return (
     <Base>
-      <AccessControl featureName="id-family" redirectToWIP>
-        <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
-          <BackButton href="/" />
-          <Steps
-            steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
-            urls={['/familles/1?edit', '/familles/2', '/familles/3', '/familles/4']}
-            activeStep={0}
-          />
+      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+        <BackButton href="/" />
+        <Steps
+          steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
+          urls={['/familles/1?edit', '/familles/2', '/familles/3', '/familles/4']}
+          activeStep={0}
+        />
 
-          {/* Main  */}
-          <div className="width-900">
-            <h1>Choisissez ce que voient les familles</h1>
-            <p className="text">
-              Vous allez inviter les familles de vos élèves à se connecter à 1Village. Ainsi, elles pourront observer les échanges qui ont lieu en
-              ligne. Vous avez la possibilité de définir ce que les familles voient sur la plateforme. Choisissez parmi ces 4 options :
-            </p>
-            <FormControl>
-              <RadioGroup aria-label="visibility" onChange={handleRadioSelect} value={radioValue}>
-                <FormControlLabel
-                  value="default"
-                  name="default"
-                  control={<Radio />}
-                  label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication"
-                  onFocus={() => handleSelectionVisibility('default')}
-                  style={radioValue !== 'default' ? { color: '#CCC' } : {}}
-                />
-                <FormControlLabel
-                  value="timeDelay"
-                  name="timeDelay"
-                  control={<Radio />}
-                  label={
-                    <TextnInputContainer
-                      {...content1}
-                      onChange={(event) => handleDaysDelay('timeDelay', event)}
-                      onBlur={() => handleSelectionVisibility('timeDelay')}
-                      value={state.timeDelay.delayedDays}
-                      disabled={radioValue !== 'timeDelay'}
-                    />
-                  }
-                  onClick={() => toggleInput('timeDelay', false)}
-                  disabled={isDisabled?.timeDelay}
-                  style={radioValue !== 'timeDelay' ? { color: '#CCC' } : {}}
-                />
-                <FormControlLabel
-                  value="ownClass"
-                  name="ownClass"
-                  control={<Radio />}
-                  label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication, mais seulement celles publiées par notre classe"
-                  onFocus={() => handleSelectionVisibility('ownClass')}
-                  style={radioValue !== 'ownClass' ? { color: '#CCC' } : {}}
-                />
-                <FormControlLabel
-                  value="ownClassTimeDelay"
-                  name="ownClassTimeDelay"
-                  control={<Radio />}
-                  label={
-                    <TextnInputContainer
-                      {...content2}
-                      onChange={(event) => handleDaysDelay('ownClassTimeDelay', event)}
-                      onBlur={() => handleSelectionVisibility('ownClassTimeDelay')}
-                      value={state.ownClassTimeDelay.delayedDays}
-                      disabled={radioValue !== 'ownClassTimeDelay'}
-                    />
-                  }
-                  onClick={() => toggleInput('ownClassTimeDelay', false)}
-                  disabled={isDisabled?.ownClassTimeDelay}
-                  style={radioValue !== 'ownClassTimeDelay' ? { color: '#CCC' } : {}}
-                />
-              </RadioGroup>
-            </FormControl>
-            <div style={{ margin: '-1rem 0' }}>
-              <StepsButton next={onNext} />
-            </div>
-
-            {/* Activity Container */}
-            <p className="text">
-              Indépendamment de ce réglage, vous pouvez réglez individuellement la visibilité des activités déjà publiées en ligne.
-            </p>
-            {/* phase is set to 4 to match the array with ALL activities */}
-            <Filters countries={filterCountries} filters={filters} onChange={setFilters} phase={selectedPhase} isMesFamilles />
-            <OverflowContainer
-              style={{
-                height: '30vh',
-                overflowY: 'scroll',
-                marginBottom: '3rem',
-                border: '1px solid rgba(76, 62, 217, 0.5)',
-                borderRadius: '3px',
-                padding: '1rem 0 1rem .5rem',
-              }}
-            >
-              {isLoading ? (
-                <div className="loading-spinner">
-                  <CircularProgress />
-                  <p>Loading activities...</p>
-                </div>
-              ) : (
-                <>
-                  {sortedActivities
-                    .map((activity) => (
-                      <Button
-                        key={activity.id}
-                        sx={{
-                          display: 'flex',
-                          gap: '2rem',
-                          justifyContent: 'space-evenly',
-                          width: '99%',
-                          padding: '0 1rem',
-                          marginBottom: '1rem',
-                          filter: activity.isVisibleToParent ? 'grayscale(0)' : 'grayscale(1)',
-                          backgroundColor: activity.isVisibleToParent ? '' : 'rgba(76, 62, 217, 0.37)',
-                        }}
-                        onClick={() => handleActivityVisibility(activity.id)}
-                      >
-                        {/* UI logic for activity disable */}
-                        {activity.isVisibleToParent ? (
-                          <EyeVisibility style={{ width: '8%', height: 'auto' }} />
-                        ) : (
-                          <EyeClosed style={{ width: '8%', height: 'auto' }} />
-                        )}
-                        <div style={{ width: '100%' }}>
-                          <ActivityCard
-                            activity={activity}
-                            isSelf={user !== null && activity.userId === user.id}
-                            user={userMap[activity.userId] !== undefined ? users[userMap[activity.userId]] : undefined}
-                            noButtons={true}
-                          />
-                        </div>
-                      </Button>
-                    ))
-                    .reverse()}
-                </>
-              )}
-            </OverflowContainer>
+        {/* Main  */}
+        <div className="width-900">
+          <h1>Choisissez ce que voient les familles</h1>
+          <p className="text">
+            Vous allez inviter les familles de vos élèves à se connecter à 1Village. Ainsi, elles pourront observer les échanges qui ont lieu en
+            ligne. Vous avez la possibilité de définir ce que les familles voient sur la plateforme. Choisissez parmi ces 4 options :
+          </p>
+          <FormControl>
+            <RadioGroup aria-label="visibility" onChange={handleRadioSelect} value={radioValue}>
+              <FormControlLabel
+                value="default"
+                name="default"
+                control={<Radio />}
+                label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication"
+                onFocus={() => handleSelectionVisibility('default')}
+                style={radioValue !== 'default' ? { color: '#CCC' } : {}}
+              />
+              <FormControlLabel
+                value="timeDelay"
+                name="timeDelay"
+                control={<Radio />}
+                label={
+                  <TextnInputContainer
+                    {...content1}
+                    onChange={(event) => handleDaysDelay('timeDelay', event)}
+                    onBlur={() => handleSelectionVisibility('timeDelay')}
+                    value={state.timeDelay.delayedDays}
+                    disabled={radioValue !== 'timeDelay'}
+                  />
+                }
+                onClick={() => toggleInput('timeDelay', false)}
+                disabled={isDisabled?.timeDelay}
+                style={radioValue !== 'timeDelay' ? { color: '#CCC' } : {}}
+              />
+              <FormControlLabel
+                value="ownClass"
+                name="ownClass"
+                control={<Radio />}
+                label="les familles peuvent voir toutes les activités publiées sur 1Village, dès leur publication, mais seulement celles publiées par notre classe"
+                onFocus={() => handleSelectionVisibility('ownClass')}
+                style={radioValue !== 'ownClass' ? { color: '#CCC' } : {}}
+              />
+              <FormControlLabel
+                value="ownClassTimeDelay"
+                name="ownClassTimeDelay"
+                control={<Radio />}
+                label={
+                  <TextnInputContainer
+                    {...content2}
+                    onChange={(event) => handleDaysDelay('ownClassTimeDelay', event)}
+                    onBlur={() => handleSelectionVisibility('ownClassTimeDelay')}
+                    value={state.ownClassTimeDelay.delayedDays}
+                    disabled={radioValue !== 'ownClassTimeDelay'}
+                  />
+                }
+                onClick={() => toggleInput('ownClassTimeDelay', false)}
+                disabled={isDisabled?.ownClassTimeDelay}
+                style={radioValue !== 'ownClassTimeDelay' ? { color: '#CCC' } : {}}
+              />
+            </RadioGroup>
+          </FormControl>
+          <div style={{ margin: '-1rem 0' }}>
+            <StepsButton next={onNext} />
           </div>
+
+          {/* Activity Container */}
+          <p className="text">
+            Indépendamment de ce réglage, vous pouvez réglez individuellement la visibilité des activités déjà publiées en ligne.
+          </p>
+          {/* phase is set to 4 to match the array with ALL activities */}
+          <Filters countries={filterCountries} filters={filters} onChange={setFilters} phase={selectedPhase} isMesFamilles />
+          <OverflowContainer
+            style={{
+              height: '30vh',
+              overflowY: 'scroll',
+              marginBottom: '3rem',
+              border: '1px solid rgba(76, 62, 217, 0.5)',
+              borderRadius: '3px',
+              padding: '1rem 0 1rem .5rem',
+            }}
+          >
+            {isLoading ? (
+              <div className="loading-spinner">
+                <CircularProgress />
+                <p>Loading activities...</p>
+              </div>
+            ) : (
+              <>
+                {sortedActivities
+                  .map((activity) => (
+                    <Button
+                      key={activity.id}
+                      sx={{
+                        display: 'flex',
+                        gap: '2rem',
+                        justifyContent: 'space-evenly',
+                        width: '99%',
+                        padding: '0 1rem',
+                        marginBottom: '1rem',
+                        filter: activity.isVisibleToParent ? 'grayscale(0)' : 'grayscale(1)',
+                        backgroundColor: activity.isVisibleToParent ? '' : 'rgba(76, 62, 217, 0.37)',
+                      }}
+                      onClick={() => handleActivityVisibility(activity.id)}
+                    >
+                      {/* UI logic for activity disable */}
+                      {activity.isVisibleToParent ? (
+                        <EyeVisibility style={{ width: '8%', height: 'auto' }} />
+                      ) : (
+                        <EyeClosed style={{ width: '8%', height: 'auto' }} />
+                      )}
+                      <div style={{ width: '100%' }}>
+                        <ActivityCard
+                          activity={activity}
+                          isSelf={user !== null && activity.userId === user.id}
+                          user={userMap[activity.userId] !== undefined ? users[userMap[activity.userId]] : undefined}
+                          noButtons={true}
+                        />
+                      </div>
+                    </Button>
+                  ))
+                  .reverse()}
+              </>
+            )}
+          </OverflowContainer>
         </div>
-      </AccessControl>
+      </div>
     </Base>
   );
 };
diff --git a/src/pages/familles/2.tsx b/src/pages/familles/2.tsx
index 4e944c3a6..4c7aa76bf 100644
--- a/src/pages/familles/2.tsx
+++ b/src/pages/familles/2.tsx
@@ -1,14 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
+import { useRouter } from 'next/router';
+import React, { useState, useEffect } from 'react';
+
 import ModeEditOutlineRoundedIcon from '@mui/icons-material/ModeEditOutlineRounded';
 import { TextField } from '@mui/material';
 import Button from '@mui/material/Button';
-import { useRouter } from 'next/router';
-import React, { useState, useEffect } from 'react';
 
 import { editStudent } from 'src/api/classroom/student.put';
-import AccessControl from 'src/components/AccessControl';
 import { Base } from 'src/components/Base';
 import { Modal } from 'src/components/Modal';
 import { Steps } from 'src/components/Steps';
@@ -203,168 +203,166 @@ const ClassroomParamStep2 = () => {
 
   return (
     <Base>
-      <AccessControl featureName="id-family" redirectToWIP>
-        <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
-          <Steps
-            steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
-            urls={['/familles/1?edit', '/familles/2', '/familles/3', '/familles/4']}
-            activeStep={1}
-          />
-          <div className="width-900">
-            <h1>Ajouter un identifiant par élève</h1>
-            <p className="text">
-              Pour sécuriser la connexion des familles, nous allons créer{' '}
-              <span style={{ fontWeight: 'bold' }}>un identifiant unique à chaque élève de votre classe. </span> <br></br>Ensuite chaque famille
-              pourra créer jusqu&apos;à 5 accès avec ce même identifiant unique: ainsi les parents divorcés, les grands-parents, les grands-frères ou
-              les grandes-soeurs pourront accéder à 1Village. <br></br>
-              <br></br>Vous devez donc créer autant d&apos;identifiants qu&apos;il y a d&apos;élèves dans votre classe. Vous pourrez rajouter des
-              identifiants en cours d&apos;années, lorsqu&apos;un nouvel élève arrive dans votre classe.
-            </p>
-
-            <form onSubmit={handleSubmit}>
-              <label>
-                <TextField
-                  variant="standard"
-                  size="small"
-                  placeholder="Prénom"
-                  type="firstname"
-                  onChange={handleChange}
-                  inputRef={firstnameRef}
-                  sx={{
-                    marginRight: 1,
-                  }}
-                />
-              </label>
-              <label>
-                <TextField
-                  variant="standard"
-                  size="small"
-                  placeholder="Nom"
-                  type="lastname"
-                  onChange={handleChange}
-                  inputRef={lastnameRef}
-                  sx={{
-                    marginRight: 1,
-                  }}
-                />
-              </label>
-              <Button type="submit" variant="outlined" disabled={isDisabled} style={{ marginBottom: '20px' }}>
-                Ajouter un élève
-              </Button>
-            </form>
-            {isDuplicateModalOn && (
-              <Modal
-                onClose={() => {
-                  setIsDuplicateModalOn(false);
+      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+        <Steps
+          steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
+          urls={['/familles/1?edit', '/familles/2', '/familles/3', '/familles/4']}
+          activeStep={1}
+        />
+        <div className="width-900">
+          <h1>Ajouter un identifiant par élève</h1>
+          <p className="text">
+            Pour sécuriser la connexion des familles, nous allons créer{' '}
+            <span style={{ fontWeight: 'bold' }}>un identifiant unique à chaque élève de votre classe. </span> <br></br>Ensuite chaque famille pourra
+            créer jusqu&apos;à 5 accès avec ce même identifiant unique: ainsi les parents divorcés, les grands-parents, les grands-frères ou les
+            grandes-soeurs pourront accéder à 1Village. <br></br>
+            <br></br>Vous devez donc créer autant d&apos;identifiants qu&apos;il y a d&apos;élèves dans votre classe. Vous pourrez rajouter des
+            identifiants en cours d&apos;années, lorsqu&apos;un nouvel élève arrive dans votre classe.
+          </p>
+
+          <form onSubmit={handleSubmit}>
+            <label>
+              <TextField
+                variant="standard"
+                size="small"
+                placeholder="Prénom"
+                type="firstname"
+                onChange={handleChange}
+                inputRef={firstnameRef}
+                sx={{
+                  marginRight: 1,
                 }}
-                ariaLabelledBy={''}
-                ariaDescribedBy={''}
-                onConfirm={onModalConfirm}
-                confirmLabel="confirmer"
-                title="Elève déjà existant"
-              >
-                Un élève que vous avez ajouté possède déjà ce nom. <br />
-                Souhaitez-vous ajouter un autre élève à ce nom ?
-              </Modal>
-            )}
-            {isDuplicateWarningModal && (
-              <Modal
-                onClose={() => {
-                  setIsDuplicateWarningModal(false);
+              />
+            </label>
+            <label>
+              <TextField
+                variant="standard"
+                size="small"
+                placeholder="Nom"
+                type="lastname"
+                onChange={handleChange}
+                inputRef={lastnameRef}
+                sx={{
+                  marginRight: 1,
                 }}
-                ariaLabelledBy={''}
-                ariaDescribedBy={''}
-                onConfirm={onEditModalConfirm}
-                confirmLabel="confirmer"
-                title="Elève déjà existant"
-              >
-                Attention !! <br />
-                Un élève de votre classe possède déjà ce nom / prénom <br />
-                S&apos;il s&apos;agit d&apos;une erreur veuillez supprimer le nouvel élève.
-              </Modal>
-            )}
-
-            <div className="students-list" style={{ display: 'flex', flexDirection: 'column', width: '72%', minWidth: '350px' }}>
-              {students.length > 0 &&
-                students
-                  .map((student) => (
-                    <span key={student.id} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '10px' }}>
-                      {editableStudent === student ? (
-                        <form onSubmit={(e) => handleSave(e, student)} style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
-                          <TextField
-                            variant="standard"
-                            size="small"
-                            placeholder="Prénom"
-                            type="firstname"
-                            defaultValue={student.firstname}
-                            style={{ flex: 1, marginRight: '10px' }}
-                            error={inputError}
-                            onChange={() => {
-                              setInputError(false);
+              />
+            </label>
+            <Button type="submit" variant="outlined" disabled={isDisabled} style={{ marginBottom: '20px' }}>
+              Ajouter un élève
+            </Button>
+          </form>
+          {isDuplicateModalOn && (
+            <Modal
+              onClose={() => {
+                setIsDuplicateModalOn(false);
+              }}
+              ariaLabelledBy={''}
+              ariaDescribedBy={''}
+              onConfirm={onModalConfirm}
+              confirmLabel="confirmer"
+              title="Elève déjà existant"
+            >
+              Un élève que vous avez ajouté possède déjà ce nom. <br />
+              Souhaitez-vous ajouter un autre élève à ce nom ?
+            </Modal>
+          )}
+          {isDuplicateWarningModal && (
+            <Modal
+              onClose={() => {
+                setIsDuplicateWarningModal(false);
+              }}
+              ariaLabelledBy={''}
+              ariaDescribedBy={''}
+              onConfirm={onEditModalConfirm}
+              confirmLabel="confirmer"
+              title="Elève déjà existant"
+            >
+              Attention !! <br />
+              Un élève de votre classe possède déjà ce nom / prénom <br />
+              S&apos;il s&apos;agit d&apos;une erreur veuillez supprimer le nouvel élève.
+            </Modal>
+          )}
+
+          <div className="students-list" style={{ display: 'flex', flexDirection: 'column', width: '72%', minWidth: '350px' }}>
+            {students.length > 0 &&
+              students
+                .map((student) => (
+                  <span key={student.id} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', marginBottom: '10px' }}>
+                    {editableStudent === student ? (
+                      <form onSubmit={(e) => handleSave(e, student)} style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                        <TextField
+                          variant="standard"
+                          size="small"
+                          placeholder="Prénom"
+                          type="firstname"
+                          defaultValue={student.firstname}
+                          style={{ flex: 1, marginRight: '10px' }}
+                          error={inputError}
+                          onChange={() => {
+                            setInputError(false);
+                          }}
+                        />
+                        <TextField
+                          variant="standard"
+                          size="small"
+                          placeholder="Nom"
+                          type="lastname"
+                          defaultValue={student.lastname}
+                          style={{ flex: 1, marginRight: '10px' }}
+                          error={inputError}
+                          onChange={() => {
+                            setInputError(false);
+                          }}
+                        />
+                        <Button type="submit" variant="outlined" style={{ margin: '5px' }}>
+                          Enregistrer
+                        </Button>
+
+                        <Button type="button" variant="outlined" onClick={handleCancel} style={{ margin: '5px' }}>
+                          Annuler
+                        </Button>
+                      </form>
+                    ) : (
+                      <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}>
+                        <div style={{ width: '400px', marginRight: '10px' }}>
+                          {student.firstname} {student.lastname}
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center' }}>
+                          <button
+                            style={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              justifyContent: 'center',
+                              width: '31.6px',
+                              height: '31,6px',
+                              padding: '3px',
+                              border: '1px solid currentColor',
+                              borderRadius: '50%',
+                              borderColor: '#4c3ed9',
                             }}
-                          />
-                          <TextField
-                            variant="standard"
-                            size="small"
-                            placeholder="Nom"
-                            type="lastname"
-                            defaultValue={student.lastname}
-                            style={{ flex: 1, marginRight: '10px' }}
-                            error={inputError}
-                            onChange={() => {
-                              setInputError(false);
+                          >
+                            <ModeEditOutlineRoundedIcon color="primary" onClick={() => handleEdit(student)} />
+                          </button>
+
+                          <DeleteButton
+                            onDelete={() => {
+                              deleteStudent(student.id);
                             }}
+                            confirmLabel="Êtes-vous sûre de vouloir supprimer l'élève ?"
+                            confirmTitle="Supprimer l'élève"
+                            style={{ backgroundColor: bgPage, marginLeft: '0.5rem' }}
                           />
-                          <Button type="submit" variant="outlined" style={{ margin: '5px' }}>
-                            Enregistrer
-                          </Button>
-
-                          <Button type="button" variant="outlined" onClick={handleCancel} style={{ margin: '5px' }}>
-                            Annuler
-                          </Button>
-                        </form>
-                      ) : (
-                        <div style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}>
-                          <div style={{ width: '400px', marginRight: '10px' }}>
-                            {student.firstname} {student.lastname}
-                          </div>
-                          <div style={{ display: 'flex', alignItems: 'center' }}>
-                            <button
-                              style={{
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                width: '31.6px',
-                                height: '31,6px',
-                                padding: '3px',
-                                border: '1px solid currentColor',
-                                borderRadius: '50%',
-                                borderColor: '#4c3ed9',
-                              }}
-                            >
-                              <ModeEditOutlineRoundedIcon color="primary" onClick={() => handleEdit(student)} />
-                            </button>
-
-                            <DeleteButton
-                              onDelete={() => {
-                                deleteStudent(student.id);
-                              }}
-                              confirmLabel="Êtes-vous sûre de vouloir supprimer l'élève ?"
-                              confirmTitle="Supprimer l'élève"
-                              style={{ backgroundColor: bgPage, marginLeft: '0.5rem' }}
-                            />
-                          </div>
                         </div>
-                      )}
-                    </span>
-                  ))
-                  .reverse()}
-            </div>
-
-            <StepsButton prev={'/familles/1?edit'} next={onNext} />
+                      </div>
+                    )}
+                  </span>
+                ))
+                .reverse()}
           </div>
+
+          <StepsButton prev={'/familles/1?edit'} next={onNext} />
         </div>
-      </AccessControl>
+      </div>
     </Base>
   );
 };
diff --git a/src/pages/familles/3.tsx b/src/pages/familles/3.tsx
index bf53d0081..58c0bb4e2 100644
--- a/src/pages/familles/3.tsx
+++ b/src/pages/familles/3.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react';
 
 import { Box, Button } from '@mui/material';
 
-import AccessControl from 'src/components/AccessControl';
 import { Base } from 'src/components/Base';
 import { Modal } from 'src/components/Modal';
 import { Steps } from 'src/components/Steps';
@@ -115,56 +114,54 @@ const ClassroomParamStep3 = () => {
 
   return (
     <Base>
-      <AccessControl featureName="id-family" redirectToWIP>
-        <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
-          <Steps
-            steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
-            urls={['/familles/1', '/familles/2', '/familles/3', '/familles/4']}
-            activeStep={2}
+      <div style={{ width: '100%', padding: '0.5rem 1rem 1rem 1rem' }}>
+        <Steps
+          steps={['Visibilité', 'Identifiants', 'Communication', 'Gestion']}
+          urls={['/familles/1', '/familles/2', '/familles/3', '/familles/4']}
+          activeStep={2}
+        />
+        <div className="width-900">
+          <h1> Communiquer les identifiants aux familles</h1>
+          <p className="text">
+            Pour inviter les familles à se connecter, nous avons préparé un texte de présentation, que vous pouvez modifier, ou traduire dans une
+            autre langue.
+          </p>
+          <p>
+            Comme vous pourrez le constater, ce texte contient le mot-variable <span style={{ fontWeight: 'bold' }}>%identifiant</span> : vous devez
+            le laisser sous ce format.{' '}
+          </p>
+          <p>
+            Ainsi, vous pourrez générer autant de textes de présentation que d’élèves dans votre classe : à vous ensuite de les imprimer et les
+            transmettre aux familles. Dans chaque texte, le mot-variable <span style={{ fontWeight: 'bold' }}>%identifiant</span> aura été remplacé
+            automatiquement par l’identifiant unique généré à l’étape précédente.
+          </p>
+          <TextEditor
+            inlineToolbar
+            error={false || !keywordPresence}
+            withBorder
+            value={textDefaultValue}
+            onChange={(value) => {
+              setTextValue(value);
+            }}
           />
-          <div className="width-900">
-            <h1> Communiquer les identifiants aux familles</h1>
-            <p className="text">
-              Pour inviter les familles à se connecter, nous avons préparé un texte de présentation, que vous pouvez modifier, ou traduire dans une
-              autre langue.
-            </p>
-            <p>
-              Comme vous pourrez le constater, ce texte contient le mot-variable <span style={{ fontWeight: 'bold' }}>%identifiant</span> : vous devez
-              le laisser sous ce format.{' '}
-            </p>
-            <p>
-              Ainsi, vous pourrez générer autant de textes de présentation que d’élèves dans votre classe : à vous ensuite de les imprimer et les
-              transmettre aux familles. Dans chaque texte, le mot-variable <span style={{ fontWeight: 'bold' }}>%identifiant</span> aura été remplacé
-              automatiquement par l’identifiant unique généré à l’étape précédente.
-            </p>
-            <TextEditor
-              inlineToolbar
-              error={false || !keywordPresence}
-              withBorder
-              value={textDefaultValue}
-              onChange={(value) => {
-                setTextValue(value);
-              }}
-            />
-            <Box marginTop="10px" textAlign="center">
-              <Button id="myButton" onClick={onPrint} variant="outlined">
-                Imprimer
-              </Button>
-            </Box>
-            <Modal
-              open={isModalOpen}
-              onClose={() => setIsModalOpen(false)}
-              ariaDescribedBy={'activate-phase-desc'}
-              ariaLabelledBy={'activate-phase'}
-              noTitle
-              confirmLabel="confirmer"
-            >
-              <div>Votre message doit contenir l&apos;identifiant enfant suivant: %identifiant</div>
-            </Modal>
-            <StepsButton prev="/familles/2" next={onNext} />
-          </div>
+          <Box marginTop="10px" textAlign="center">
+            <Button id="myButton" onClick={onPrint} variant="outlined">
+              Imprimer
+            </Button>
+          </Box>
+          <Modal
+            open={isModalOpen}
+            onClose={() => setIsModalOpen(false)}
+            ariaDescribedBy={'activate-phase-desc'}
+            ariaLabelledBy={'activate-phase'}
+            noTitle
+            confirmLabel="confirmer"
+          >
+            <div>Votre message doit contenir l&apos;identifiant enfant suivant: %identifiant</div>
+          </Modal>
+          <StepsButton prev="/familles/2" next={onNext} />
         </div>
-      </AccessControl>
+      </div>
     </Base>
   );
 };
diff --git a/src/services/useActivities.ts b/src/services/useActivities.ts
index db14cbb04..99ab20d81 100644
--- a/src/services/useActivities.ts
+++ b/src/services/useActivities.ts
@@ -2,13 +2,12 @@ import React from 'react';
 import type { QueryFunction } from 'react-query';
 import { useQuery } from 'react-query';
 
-import { getLinkedStudentsToUser } from 'src/api/user/user.get';
+import { getUserVisibilityFamilyParams } from 'src/api/user/user.get';
 import { UserContext } from 'src/contexts/userContext';
 import { VillageContext } from 'src/contexts/villageContext';
 import { serializeToQueryUrl } from 'src/utils';
 import { axiosRequest } from 'src/utils/axiosRequest';
 import type { Activity } from 'types/activity.type';
-import type { Student } from 'types/student.type';
 import type { UserParamClassroom } from 'types/user.type';
 import { UserType } from 'types/user.type';
 
@@ -22,23 +21,13 @@ export type Args = {
   status?: number;
   phase?: number;
   responseActivityId?: number;
-  selectedStudent?: Student | null;
+  selectedStudent?: number;
 };
 
 export const useActivities = ({ pelico, countries = [], userId, type, ...args }: Args) => {
   const { village } = React.useContext(VillageContext);
   const { user, selectedStudent } = React.useContext(UserContext);
 
-  const getVisibilityFamilyParams = React.useCallback(async () => {
-    if (user && user.type !== UserType.FAMILY) return [];
-    const response = await axiosRequest({
-      method: 'GET',
-      url: '/users/visibility-params',
-    });
-    if (response.error) return null;
-    return response.data;
-  }, [user]);
-
   const villageId = village ? village.id : null;
 
   const getActivities: QueryFunction<Activity[]> = React.useCallback(async () => {
@@ -46,19 +35,19 @@ export const useActivities = ({ pelico, countries = [], userId, type, ...args }:
       return [];
     }
 
-    const students = await getLinkedStudentsToUser(user?.id || 0);
-
-    // console.log('useQuery students', students);
+    const visibilityFamily = (await getUserVisibilityFamilyParams(user)) as [UserParamClassroom];
 
-    const visibilityFamily = (await getVisibilityFamilyParams()) as [UserParamClassroom];
+    console.log('visibilityFamily ===', visibilityFamily);
 
-    // console.log('selectedStudent (useActivity)', selectedStudent);
+    const classroomData = visibilityFamily[selectedStudent || 1];
 
-    const classroomData = visibilityFamily.find((classroom) => classroom.userStudent_studentId === selectedStudent?.id);
+    console.log('classroomData === ', classroomData);
 
     // console.log('data', classroomData);
     const familyConditions = user.type === UserType.FAMILY && visibilityFamily.length > 0;
 
+    console.log('family conditions', familyConditions);
+
     const query: {
       [key: string]: string | number | boolean | undefined;
     } = {
@@ -89,7 +78,7 @@ export const useActivities = ({ pelico, countries = [], userId, type, ...args }:
     }
 
     return response.data;
-  }, [user, getVisibilityFamilyParams, args, type, villageId, countries, pelico, userId, selectedStudent]);
+  }, [user, args, type, villageId, countries, pelico, userId, selectedStudent]);
 
   const { data, isLoading, error, refetch } = useQuery<Activity[], unknown>(
     ['activities', { ...args, type, userId, selectedStudent, countries, pelico, villageId }],