diff --git a/components/alet.js b/components/alet.js
new file mode 100644
index 0000000..a1285d8
--- /dev/null
+++ b/components/alet.js
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types'
+import {
+  Button,
+  Dialog,
+  Typography,
+  DialogContent,
+  DialogTitle,
+  DialogActions
+} from '@material-ui/core'
+
+export default function Alet({esOuve, meteEsOuve, handleKonfime}) {
+  const handleFemen = () => {
+    meteEsOuve(false)
+  }
+
+  return (
+    <div>
+      <Dialog
+        open={esOuve}
+        aria-labelledby='alet-dialog'
+        aria-describedby='alet-deskripsyon'
+        onClose={handleFemen}
+      >
+        <DialogTitle style={{textAlign: 'center'}} id='alet-dialog'>Dékoneksyon</DialogTitle>
+        <DialogContent>
+          <Typography id='alet-deskripsyon'>
+            Souhaitez-vous vraiement vous déconnecter ?
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button fullWidth autoFocus color='primary' variant='contained' onClick={handleFemen}>
+            Annuler
+          </Button>
+          <Button fullWidth color='secondary' variant='contained' onClick={handleKonfime}>
+            Se déconnecter
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  )
+}
+
+Alet.propTypes = {
+  esOuve: PropTypes.bool.isRequired,
+  meteEsOuve: PropTypes.func.isRequired,
+  handleKonfime: PropTypes.func.isRequired
+}