diff --git a/src/API.ts b/src/API.ts
index 1526a7a41ed3e80f9ebceedae62b001fd3e08acc..be154814f05a71dba5e49347cbada6db07101444 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -1,11 +1,28 @@
-import { useQuery } from '@tanstack/react-query'
 import axios, { AxiosRequestConfig } from 'axios'
 import { toast } from 'react-toastify'
+import { ICustomPopup } from './models/customPopup.model'
+import { IPartnersInfo } from './models/partnersInfo.model'
 import { User } from './models/user.model'
 
-const fetchWhoAmI = async () => {
+const endpoints = {
+  /** public endpoints */
+  common: {
+    WhoAmI: '/api/common/WhoAmI',
+    partnersInfo: '/api/common/partnersInfo',
+    customPop: '/api/common/customPopup',
+    logout: '/Logout',
+  },
+  /** animator role required endpoints */
+  animator: {
+    partnersInfo: '/api/animator/partnersInfo',
+    imageNames: '/api/animator/imageNames',
+    savePartnersInfo: '/api/animator/savePartnersInfo',
+  },
+} as const
+
+export const fetchWhoAmI = async () => {
   try {
-    const { data } = await axios.get<User | null>('/api/common/WhoAmI')
+    const { data } = await axios.get<User | null>(endpoints.common.WhoAmI)
     return data
   } catch (error) {
     console.error('error whoami', error)
@@ -13,18 +30,8 @@ const fetchWhoAmI = async () => {
   }
 }
 
-export const useWhoAmI = () => {
-  return useQuery({
-    queryKey: ['WhoAmI'],
-    queryFn: fetchWhoAmI,
-    retry: false,
-
-    refetchOnMount: false,
-  })
-}
-
 export const fetchLogout = async () => {
-  return await axios.get('/Logout')
+  return await axios.get(endpoints.common.WhoAmI)
 }
 
 export const fetchEcogestureImages = async (
@@ -39,3 +46,49 @@ export const fetchEcogestureImages = async (
   }
   return []
 }
+
+export const fetchPartnersIssue = async () => {
+  try {
+    const { data } = await axios.get<IPartnersInfo>(
+      endpoints.common.partnersInfo
+    )
+    return data
+  } catch (error) {
+    console.error('error partnersInfo', error)
+    toast.error('Accès refusé, veuillez vous connecter')
+    throw error
+  }
+}
+
+export const savePartnersInfo = async (
+  partnersInfo: IPartnersInfo,
+  axiosHeaders: AxiosRequestConfig
+) => {
+  try {
+    await axios.put<IPartnersInfo>(
+      endpoints.animator.partnersInfo,
+      {
+        grdf_failure: partnersInfo.grdf_failure,
+        enedis_failure: partnersInfo.enedis_failure,
+        egl_failure: partnersInfo.egl_failure,
+        notification_activated: partnersInfo.notification_activated,
+      },
+      axiosHeaders
+    )
+    toast.success('Information des partenaires mises à jour !')
+  } catch (error) {
+    toast.error('Erreur lors de la mise à jour des information des partenaires')
+    console.error(error)
+  }
+}
+
+export const fetchCustomPopup = async (): Promise<ICustomPopup> => {
+  try {
+    const { data } = await axios.get<ICustomPopup>(endpoints.common.customPop)
+    return data
+  } catch (error) {
+    console.error('error customPopup', error)
+    toast.error('Accès refusé, veuillez vous connecter')
+    throw error
+  }
+}
diff --git a/src/components/Consents/Consents.tsx b/src/components/Consents/Consents.tsx
index 95e12e6c60e437bc24954b9253c3a52fe2563fa6..886f81cd7095e431c744fac023d11591e49d52f6 100644
--- a/src/components/Consents/Consents.tsx
+++ b/src/components/Consents/Consents.tsx
@@ -9,8 +9,8 @@ import {
 import { AgGridReact } from 'ag-grid-react'
 import { DateTime } from 'luxon'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useWhoAmI } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { IGrdfConsent, grdfColumnDef } from '../../models/grdfConsent'
 import { ISgeConsent, sgeColumnDefs } from '../../models/sgeConsent.model'
 import { GrdfConsentService } from '../../services/grdfConsent.service'
diff --git a/src/components/ImagePicker/ImagePicker.tsx b/src/components/ImagePicker/ImagePicker.tsx
index 87e990e28b5c17ecf99126708629d3fdc0959e1b..9ec4dbb6e83c553208f07c1ca9134eb6a994d836 100644
--- a/src/components/ImagePicker/ImagePicker.tsx
+++ b/src/components/ImagePicker/ImagePicker.tsx
@@ -1,8 +1,9 @@
 import { Button, Dialog, Pagination } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
 import React, { useState } from 'react'
-import { fetchEcogestureImages, useWhoAmI } from '../../API'
+import { fetchEcogestureImages } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import SingleImage from './SingleImage'
 
 const IMAGES_PER_PAGE = 15
diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx
index 9ecedf91638a7aaf76b679c84d4322dabfbe87ad..22d3f1872f1ff2fe385cca45f66649c80334e9a5 100644
--- a/src/components/Newsletter/Newsletter.tsx
+++ b/src/components/Newsletter/Newsletter.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog } from '@mui/material'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { useWhoAmI } from '../../API'
 import { getAxiosXSRFHeader } from '../../axios.config'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { IMailSubject } from '../../models/mailSubject.model'
 import { IMonthlyInfo } from '../../models/monthlyInfo.model'
 import { IMonthlyNews } from '../../models/monthlyNews.model'
diff --git a/src/components/Popups/Popups.tsx b/src/components/Popups/CustomPopup.tsx
similarity index 63%
rename from src/components/Popups/Popups.tsx
rename to src/components/Popups/CustomPopup.tsx
index 853e91f2218bc3e9eb212d8f83fbb94f34528cdd..df9394a7b1c4d4998f9b04e92b8ed122b198cd1e 100644
--- a/src/components/Popups/Popups.tsx
+++ b/src/components/Popups/CustomPopup.tsx
@@ -8,11 +8,12 @@ import {
   TextField,
 } from '@mui/material'
 import { DateTime } from 'luxon'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import { useWhoAmI } from '../../API'
+import { Link } from 'react-router-dom'
 import { getAxiosXSRFHeader } from '../../axios.config'
-import { CheckboxType } from '../../enum/checkboxType.enum'
+import { usePartnersIssue } from '../../hooks/usePartnersIssue'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { ICustomPopup, PopupDuration } from '../../models/customPopup.model'
 import {
   Option,
@@ -20,14 +21,13 @@ import {
   durationType,
   mapDuration,
 } from '../../models/durationOptions.model'
-import { IPartnersInfo } from '../../models/partnersInfo.model'
 import { CustomPopupService } from '../../services/customPopup.service'
-import { PartnersInfoService } from '../../services/partnersInfo.service'
 import { convertStringToEditorState } from '../../utils/editorStateManagement'
 import { getFilenameFromPath } from '../../utils/imagesUrlsGetter'
 import ImagePicker from '../ImagePicker/ImagePicker'
 import Loader from '../Loader/Loader'
 import CustomEditor from '../Newsletter/CustomEditor'
+import { links } from '../Routes/Router'
 import './popups.scss'
 
 const OPTIONS: Option[] = [
@@ -45,18 +45,13 @@ const OPTIONS: Option[] = [
   },
 ]
 
-const Popups: React.FC = () => {
+export const CustomPopup: React.FC = () => {
   const { data: user } = useWhoAmI()
+  const { partnersIssue } = usePartnersIssue()
   const defaultIcon = '/assets/ecogesture/bullhorn.png'
 
   const [refreshData, setRefreshData] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
-  const [partnersInfo, setPartnersInfo] = useState<IPartnersInfo>({
-    grdf_failure: false,
-    enedis_failure: false,
-    egl_failure: false,
-    notification_activated: false,
-  })
   const [previousEndDate, setPreviousEndDate] = useState<string>()
   const [popupDuration, setPopupDuration] = useState<PopupDuration>({
     type: durationEnum.infinite,
@@ -71,43 +66,22 @@ const Popups: React.FC = () => {
   })
 
   const isPartnerNotificationOn = () =>
-    partnersInfo.enedis_failure ||
-    partnersInfo.egl_failure ||
-    partnersInfo.grdf_failure
+    Boolean(
+      partnersIssue.data &&
+        (partnersIssue.data.enedis_failure ||
+          partnersIssue.data.egl_failure ||
+          partnersIssue.data.grdf_failure)
+    )
 
   /** Only one type of popup can be enabled */
   const isPageValid = () =>
     !(isPartnerNotificationOn() && customPopup.popupEnabled)
 
-  const handleCheckboxChange = (value: boolean, type: CheckboxType): void => {
-    switch (type) {
-      case CheckboxType.GRDF:
-        setPartnersInfo(prevPartnersInfo => ({
-          ...prevPartnersInfo,
-          grdf_failure: value,
-        }))
-        break
-      case CheckboxType.ENEDIS:
-        setPartnersInfo(prevPartnersInfo => ({
-          ...prevPartnersInfo,
-          enedis_failure: value,
-        }))
-        break
-      case CheckboxType.EGL:
-        setPartnersInfo(prevPartnersInfo => ({
-          ...prevPartnersInfo,
-          egl_failure: value,
-        }))
-        break
-      case CheckboxType.CUSTOM:
-        setCustomPopup(prev => ({
-          ...prev,
-          popupEnabled: value,
-        }))
-        break
-      default:
-        throw new Error('Unknown checkbox type')
-    }
+  const toggleCustomPopup = (value: boolean): void => {
+    setCustomPopup(prev => ({
+      ...prev,
+      popupEnabled: value,
+    }))
   }
 
   const handlePopupChange = (
@@ -120,37 +94,15 @@ const Popups: React.FC = () => {
     }))
   }
 
-  // clean this
-  const handleCancel = useCallback(() => {
-    setRefreshData(true)
-  }, [setRefreshData])
-
-  const resetFields = useCallback(() => {
-    setPartnersInfo({
-      grdf_failure: false,
-      enedis_failure: false,
-      egl_failure: false,
-      notification_activated: false,
-    })
-  }, [setPartnersInfo])
-
   useEffect(() => {
     let subscribed = true
-    resetFields()
     setIsLoading(true)
 
-    async function loadSettings() {
+    async function loadCustomPopup() {
       if (user) {
-        const partnersInfoService = new PartnersInfoService()
         const customPopupService = new CustomPopupService()
-        const previousPartnersInfo = await partnersInfoService.getPartnersInfo()
         const previousPopup = await customPopupService.getCustomPopupInfo()
 
-        if (previousPartnersInfo) {
-          setPartnersInfo({
-            ...previousPartnersInfo,
-          })
-        }
         if (previousPopup) {
           const isOutdated = isPopupOutdated(previousPopup.endDate)
           /** If outdated, set value to false, otherwise, set it to its value */
@@ -173,29 +125,18 @@ const Popups: React.FC = () => {
       setIsLoading(false)
     }
     if (subscribed) {
-      loadSettings()
+      loadCustomPopup()
     }
     return () => {
       subscribed = false
       setRefreshData(false)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user, refreshData, setPartnersInfo, setCustomPopup, resetFields])
+  }, [user, refreshData, setCustomPopup])
 
   const handleSave = async (): Promise<void> => {
     if (user) {
-      const partnersInfoService = new PartnersInfoService()
       const customPopupService = new CustomPopupService()
-      const updatedPartnersInfo = {
-        egl_failure: partnersInfo.egl_failure,
-        enedis_failure: partnersInfo.enedis_failure,
-        grdf_failure: partnersInfo.grdf_failure,
-        notification_activated: isPartnerNotificationOn(),
-      }
-      await partnersInfoService.savePartnersInfo(
-        updatedPartnersInfo,
-        getAxiosXSRFHeader(user.xsrftoken)
-      )
       await customPopupService.saveCustomPopup(
         {
           ...customPopup,
@@ -229,7 +170,7 @@ const Popups: React.FC = () => {
     }
     setCustomPopup(prev => ({
       ...prev,
-      endDate: newDate.toISO() || '',
+      endDate: newDate.toISO() ?? '',
     }))
   }, [popupDuration])
 
@@ -264,63 +205,6 @@ const Popups: React.FC = () => {
         {isLoading && <Loader />}
         {!isLoading && (
           <>
-            <div className="partnersInfo">
-              <h3>Affichage des pop-up de panne</h3>
-              <div>
-                <p>Services concernés</p>
-                <FormGroup style={{ flexDirection: 'row' }}>
-                  <FormControlLabel
-                    label="Panne Enedis"
-                    labelPlacement="top"
-                    control={
-                      <Switch
-                        disabled={customPopup.popupEnabled}
-                        checked={partnersInfo.enedis_failure}
-                        onChange={event => {
-                          handleCheckboxChange(
-                            event.target.checked,
-                            CheckboxType.ENEDIS
-                          )
-                        }}
-                      />
-                    }
-                  />
-                  <FormControlLabel
-                    label="Panne EGL"
-                    labelPlacement="top"
-                    control={
-                      <Switch
-                        disabled={customPopup.popupEnabled}
-                        checked={partnersInfo.egl_failure}
-                        onChange={event => {
-                          handleCheckboxChange(
-                            event.target.checked,
-                            CheckboxType.EGL
-                          )
-                        }}
-                      />
-                    }
-                  />
-                  <FormControlLabel
-                    label="Panne GRDF"
-                    labelPlacement="top"
-                    control={
-                      <Switch
-                        disabled={customPopup.popupEnabled}
-                        checked={partnersInfo.grdf_failure}
-                        onChange={event => {
-                          handleCheckboxChange(
-                            event.target.checked,
-                            CheckboxType.GRDF
-                          )
-                        }}
-                      />
-                    }
-                  />
-                </FormGroup>
-              </div>
-            </div>
-
             <div className="customPopup">
               <h3>Affichage de pop-up personnalisée</h3>
               <FormGroup style={{ flexDirection: 'row' }}>
@@ -331,18 +215,25 @@ const Popups: React.FC = () => {
                     <Switch
                       disabled={isPartnerNotificationOn()}
                       checked={customPopup.popupEnabled}
-                      onChange={event => {
-                        handleCheckboxChange(
-                          event.target.checked,
-                          CheckboxType.CUSTOM
-                        )
-                      }}
+                      onChange={event =>
+                        toggleCustomPopup(event.target.checked)
+                      }
                     />
                   }
                 />
                 {customPopup.popupEnabled &&
                   previousEndDate &&
                   getRemainingDuration(previousEndDate)}
+
+                {isPartnerNotificationOn() && (
+                  <p className="singlePopupWarning">
+                    La pop-up personnalisée ne peut pas être activée en même
+                    temps que les{' '}
+                    <Link to={links.partnersIssue.path}>
+                      pannes des partenaires
+                    </Link>
+                  </p>
+                )}
               </FormGroup>
 
               <div className="popupEndDate">
@@ -427,7 +318,7 @@ const Popups: React.FC = () => {
             </div>
 
             <div className="buttons">
-              <Button variant="outlined" onClick={handleCancel}>
+              <Button variant="outlined" onClick={() => setRefreshData(true)}>
                 Annuler
               </Button>
               <Button disabled={!isPageValid()} onClick={handleSave}>
@@ -440,5 +331,3 @@ const Popups: React.FC = () => {
     </>
   )
 }
-
-export default Popups
diff --git a/src/components/Popups/PartnersIssue.tsx b/src/components/Popups/PartnersIssue.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..078a02c8dcc65fc5f5b37b6285b01853aa333943
--- /dev/null
+++ b/src/components/Popups/PartnersIssue.tsx
@@ -0,0 +1,124 @@
+import { FormControlLabel, FormGroup, Switch } from '@mui/material'
+import { Link } from 'react-router-dom'
+import { getAxiosXSRFHeader } from '../../axios.config'
+import { useCustomPopup } from '../../hooks/useCustomPopup'
+import { usePartnersIssue } from '../../hooks/usePartnersIssue'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
+import Loader from '../Loader/Loader'
+import { links } from '../Routes/Router'
+import './popups.scss'
+
+export const PartnersIssue = () => {
+  const { data: user } = useWhoAmI()
+  const { partnersIssue, savePartnersIssue } = usePartnersIssue()
+  const { customPopup } = useCustomPopup()
+
+  const isCustomPopupEnabled = customPopup.data?.popupEnabled
+
+  const handlePartnerIssue = (
+    value: boolean,
+    type: 'enedis_failure' | 'egl_failure' | 'grdf_failure'
+  ) => {
+    if (partnersIssue.data && user) {
+      const updatedNotification = {
+        egl_failure: partnersIssue.data.egl_failure,
+        enedis_failure: partnersIssue.data.enedis_failure,
+        grdf_failure: partnersIssue.data.grdf_failure,
+        [type]: value,
+      }
+
+      savePartnersIssue(
+        {
+          ...partnersIssue.data,
+          [type]: value,
+          notification_activated: Object.values(updatedNotification).some(
+            v => v
+          ),
+        },
+        getAxiosXSRFHeader(user.xsrftoken)
+      )
+    }
+  }
+
+  return (
+    <>
+      <div className="header">
+        <h1>Création de Pop-up</h1>
+      </div>
+      <div className="content popups">
+        <div className="partnersInfo">
+          <h3>Affichage des pop-up de panne</h3>
+          <div>
+            {partnersIssue.isPending && <Loader />}
+            {partnersIssue.isError && <p>Erreur</p>}
+            {partnersIssue.data && (
+              <div>
+                <p>Services concernés</p>
+                <FormGroup style={{ flexDirection: 'row' }}>
+                  <FormControlLabel
+                    label={'Panne Enedis'}
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={isCustomPopupEnabled}
+                        checked={partnersIssue.data.enedis_failure}
+                        onChange={event => {
+                          handlePartnerIssue(
+                            event.target.checked,
+                            'enedis_failure'
+                          )
+                        }}
+                      />
+                    }
+                  />
+                  <FormControlLabel
+                    label={'Panne EGL'}
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={isCustomPopupEnabled}
+                        checked={partnersIssue.data.egl_failure}
+                        onChange={event => {
+                          handlePartnerIssue(
+                            event.target.checked,
+                            'egl_failure'
+                          )
+                        }}
+                      />
+                    }
+                  />
+                  <FormControlLabel
+                    label={'Panne GRDF'}
+                    labelPlacement="top"
+                    control={
+                      <Switch
+                        disabled={isCustomPopupEnabled}
+                        checked={partnersIssue.data.grdf_failure}
+                        onChange={event => {
+                          handlePartnerIssue(
+                            event.target.checked,
+                            'grdf_failure'
+                          )
+                        }}
+                      />
+                    }
+                  />
+                </FormGroup>
+
+                {isCustomPopupEnabled && (
+                  <p className="singlePopupWarning">
+                    La maintenance des partenaires ne peut pas être activée en
+                    même temps que la{' '}
+                    <Link to={links.customPopup.path}>
+                      pop-ups personnalisée
+                    </Link>
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/Popups/popups.scss b/src/components/Popups/popups.scss
index f106a5253f22e3c517fca73cf93d8fd6b3d02790..aca1d5f23288e6d5fadab720fb0b4bccfd335bec 100644
--- a/src/components/Popups/popups.scss
+++ b/src/components/Popups/popups.scss
@@ -37,4 +37,10 @@
     text-transform: uppercase;
     margin-top: 1rem;
   }
+
+  .singlePopupWarning,
+  .singlePopupWarning a {
+    font-weight: bold;
+    color: #df4646;
+  }
 }
diff --git a/src/components/Prices/PriceSection.tsx b/src/components/Prices/PriceSection.tsx
index 84b364ca50a911d66678db601feebbffd27f8553..693d3424803d48ccf595b771d9e7c132c8a4d0cf 100644
--- a/src/components/Prices/PriceSection.tsx
+++ b/src/components/Prices/PriceSection.tsx
@@ -4,11 +4,11 @@ import timezone from 'dayjs/plugin/timezone'
 import utc from 'dayjs/plugin/utc'
 import React, { useCallback, useEffect, useState } from 'react'
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
-import { useWhoAmI } from '../../API'
 import arrowDown from '../../assets/icons/down-arrow.png'
 import { getAxiosXSRFHeader } from '../../axios.config'
 import { FluidType } from '../../enum/fluidTypes'
 import { FrequencyInMonth } from '../../enum/frequency.enum'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { IPrice } from '../../models/price.model'
 import { PricesService } from '../../services/prices.service'
 import Loader from '../Loader/Loader'
diff --git a/src/components/Routes/Router.tsx b/src/components/Routes/Router.tsx
index 85051f1b76835a79c69b0d2e68ab390160ac0bba..bd4fe74e0cd792766e6882eea450273e7865378d 100644
--- a/src/components/Routes/Router.tsx
+++ b/src/components/Routes/Router.tsx
@@ -1,10 +1,11 @@
 import { Navigate, Route, Routes } from 'react-router-dom'
-import { useWhoAmI } from '../../API'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { Consents } from '../Consents/Consents'
 import Loader from '../Loader/Loader'
 import Login from '../Login/Login'
 import Newsletter from '../Newsletter/Newsletter'
-import Popups from '../Popups/Popups'
+import { CustomPopup } from '../Popups/CustomPopup'
+import { PartnersIssue } from '../Popups/PartnersIssue'
 import Prices from '../Prices/Prices'
 import SideBar from '../SideBar/SideBar'
 
@@ -16,9 +17,13 @@ export const links: Record<
     label: 'Newsletter',
     path: '/newsletter',
   },
-  popups: {
-    label: 'Pop-ups',
-    path: '/popups',
+  partnersIssue: {
+    label: 'Panne des partenaires',
+    path: '/popups/partners',
+  },
+  customPopup: {
+    label: 'Pop-up personnalisée',
+    path: '/popups/custom',
   },
   prices: {
     label: 'Prix',
@@ -55,7 +60,11 @@ const Router = () => {
           <Routes>
             <Route path={links.newsletter.path} element={<Newsletter />} />
             <Route path={links.prices.path} element={<Prices />} />
-            <Route path="/popups" element={<Popups />} />
+            <Route
+              path={links.partnersIssue.path}
+              element={<PartnersIssue />}
+            />
+            <Route path={links.customPopup.path} element={<CustomPopup />} />
             {user.isAdmin && (
               <>
                 <Route
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
index eca3afdd4e025062eaad2c517e42e25f46233c1d..9e38fc0c9bbb81a0c8efc39441499670a16674dd 100644
--- a/src/components/SideBar/SideBar.tsx
+++ b/src/components/SideBar/SideBar.tsx
@@ -2,8 +2,9 @@ import { Button } from '@mui/material'
 import { useMutation } from '@tanstack/react-query'
 import React from 'react'
 import { NavLink } from 'react-router-dom'
-import { fetchLogout, useWhoAmI } from '../../API'
+import { fetchLogout } from '../../API'
 import logo from '../../assets/icons/ecolyo-logo.svg'
+import { useWhoAmI } from '../../hooks/useWhoAmI'
 import { routes } from '../Routes/Router'
 import './sidebar.scss'
 
diff --git a/src/hooks/query-keys.ts b/src/hooks/query-keys.ts
new file mode 100644
index 0000000000000000000000000000000000000000..87dd134dad27599786c53c7d1f99b435d9c5adc6
--- /dev/null
+++ b/src/hooks/query-keys.ts
@@ -0,0 +1,5 @@
+export const queryKeys = {
+  WhoAmI: 'WhoAmI',
+  partnersInfo: 'partnersInfo',
+  customPopup: 'customPopup',
+} as const
diff --git a/src/hooks/useCustomPopup.tsx b/src/hooks/useCustomPopup.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..6bdc99da450ee21da65aa90ba5d9676e4a4c7b1d
--- /dev/null
+++ b/src/hooks/useCustomPopup.tsx
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchCustomPopup } from '../API'
+import { queryKeys } from './query-keys'
+
+export const useCustomPopup = () => {
+  const customPopup = useQuery({
+    queryKey: [queryKeys.customPopup],
+    queryFn: fetchCustomPopup,
+  })
+
+  return { customPopup }
+}
diff --git a/src/hooks/usePartnersIssue.tsx b/src/hooks/usePartnersIssue.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2328addad514b62090bf853b3c0520b7c2ab4603
--- /dev/null
+++ b/src/hooks/usePartnersIssue.tsx
@@ -0,0 +1,35 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { AxiosRequestConfig } from 'axios'
+import { fetchPartnersIssue, savePartnersInfo } from '../API'
+import { IPartnersInfo } from '../models/partnersInfo.model'
+import { queryKeys } from './query-keys'
+
+export const usePartnersIssue = () => {
+  const queryClient = useQueryClient()
+
+  const partnersIssue = useQuery({
+    queryKey: [queryKeys.partnersInfo],
+    queryFn: fetchPartnersIssue,
+  })
+
+  const mutation = useMutation<
+    void,
+    unknown,
+    { customPopup: IPartnersInfo; axiosHeaders: AxiosRequestConfig }
+  >({
+    mutationFn: ({ customPopup, axiosHeaders }) =>
+      savePartnersInfo(customPopup, axiosHeaders),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [queryKeys.partnersInfo] })
+    },
+  })
+
+  const savePartnersIssue = (
+    customPopup: IPartnersInfo,
+    axiosHeaders: AxiosRequestConfig
+  ) => {
+    mutation.mutate({ customPopup, axiosHeaders })
+  }
+
+  return { partnersIssue, savePartnersIssue }
+}
diff --git a/src/hooks/useWhoAmI.tsx b/src/hooks/useWhoAmI.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4df593555b215e244936a45f2775dbb41a983cd0
--- /dev/null
+++ b/src/hooks/useWhoAmI.tsx
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query'
+import { fetchWhoAmI } from '../API'
+import { queryKeys } from './query-keys'
+
+export const useWhoAmI = () => {
+  return useQuery({
+    queryKey: [queryKeys.WhoAmI],
+    queryFn: fetchWhoAmI,
+    retry: false,
+    refetchOnMount: false,
+  })
+}
diff --git a/src/services/partnersInfo.service.ts b/src/services/partnersInfo.service.ts
deleted file mode 100644
index 0f9a5174b0066df6ec598adb7695c982fc11a3f9..0000000000000000000000000000000000000000
--- a/src/services/partnersInfo.service.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import axios, { AxiosRequestConfig } from 'axios'
-import { toast } from 'react-toastify'
-import { IPartnersInfo } from '../models/partnersInfo.model'
-export class PartnersInfoService {
-  /**
-   * Save the partnersInfo
-   * @param partnersInfo
-   * @param axiosHeaders
-   */
-  public savePartnersInfo = async (
-    partnersInfo: IPartnersInfo,
-    axiosHeaders: AxiosRequestConfig
-  ): Promise<void> => {
-    try {
-      await axios.put(
-        `/api/animator/partnersInfo`,
-        {
-          grdf_failure: partnersInfo.grdf_failure,
-          enedis_failure: partnersInfo.enedis_failure,
-          egl_failure: partnersInfo.egl_failure,
-          notification_activated: partnersInfo.notification_activated,
-        },
-        axiosHeaders
-      )
-      toast.success('Information des partenaires mises à jour !')
-    } catch (e) {
-      toast.error(
-        'Erreur lors de la mise à jour des information des partenaires'
-      )
-      console.error(e)
-    }
-  }
-
-  /**
-   * Gets the partners information
-   */
-  public getPartnersInfo = async (): Promise<IPartnersInfo | null> => {
-    try {
-      const { data } = await axios.get(`/api/common/partnersInfo`)
-      return data as IPartnersInfo
-    } catch (e) {
-      console.error('error', e)
-      return null
-    }
-  }
-}