diff --git a/components/session/confirmation-alert.js b/components/session/confirmation-alert.js
new file mode 100644
index 0000000..91c91a9
--- /dev/null
+++ b/components/session/confirmation-alert.js
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+
+export default function ConfirmationAlert({title, description, isOpen, setIsOpen, handleConfirmation}) {
+  return (
+    <Dialog
+      open={isOpen}
+      aria-labelledby={title}
+      aria-describedby={description}
+      onClose={() => setIsOpen(false)}
+    >
+      <DialogTitle id={title}>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText sx={{color: 'white'}} id={description}>
+          {description}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='contained' color='success' onClick={() => setIsOpen(false)}>Annuler</Button>
+        <Button autoFocus variant='contained' color='error' onClick={handleConfirmation}>
+          Valider
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+ConfirmationAlert.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  handleConfirmation: PropTypes.func.isRequired
+}
diff --git a/components/session/sign.js b/components/session/sign.js
index 1f1a6b0..1e142ee 100644
--- a/components/session/sign.js
+++ b/components/session/sign.js
@@ -1,6 +1,7 @@
 'use client'
 
 import PropTypes from 'prop-types'
+import {useState} from 'react'
 import {signOut} from 'next-auth/react'
 import {useRouter} from 'next/navigation'
 import Box from '@mui/material/Box'
@@ -11,6 +12,7 @@ import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import LogoutIcon from '@mui/icons-material/Logout'
 import LoginIcon from '@mui/icons-material/Login'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
+import ConfirmationAlert from './confirmation-alert.js'
 
 const LightTooltip = styled(({className, ...props}) => (
   <Tooltip {...props} classes={{popper: className}} />
@@ -25,30 +27,45 @@ const LightTooltip = styled(({className, ...props}) => (
 
 export default function Sign({session}) {
   const router = useRouter()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleSignout = () => {
+    setIsOpen(false)
+    signOut()
+  }
 
   return (
-    <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
-      {session ? (
-        <LightTooltip title='Se déconnecter' placement='right'>
-          <Fab size='large' color='error' onClick={() => signOut()}>
-            <LogoutIcon fontSize='large' />
-          </Fab>
-        </LightTooltip>
-      ) : (
-        <Stack direction='row' spacing={2}>
-          <LightTooltip title='Se connecter' placement='left'>
-            <Fab size='large' color='success' onClick={() => router.push('/login')}>
-              <LoginIcon fontSize='large' />
+    <>
+      <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
+        {session ? (
+          <LightTooltip title='Se déconnecter' placement='right'>
+            <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
+              <LogoutIcon fontSize='large' />
             </Fab>
           </LightTooltip>
-          <LightTooltip title='S’enregistrer' placement='right'>
-            <Fab size='large' color='success' onClick={() => router.push('/register')}>
-              <PersonAddIcon fontSize='large' />
-            </Fab>
-          </LightTooltip>
-        </Stack>
-      )}
-    </Box>
+        ) : (
+          <Stack direction='row' spacing={2}>
+            <LightTooltip title='Se connecter' placement='left'>
+              <Fab size='large' color='success' onClick={() => router.push('/login')}>
+                <LoginIcon fontSize='large' />
+              </Fab>
+            </LightTooltip>
+            <LightTooltip title='S’enregistrer' placement='right'>
+              <Fab size='large' color='success' onClick={() => router.push('/register')}>
+                <PersonAddIcon fontSize='large' />
+              </Fab>
+            </LightTooltip>
+          </Stack>
+        )}
+      </Box>
+      <ConfirmationAlert
+        title='Se déconnecter'
+        description='Vous êtes sur le point de vous déconnecter. Voulez-vous continuer ?'
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        handleConfirmation={handleSignout}
+      />
+    </>
   )
 }