diff --git a/front/src/view/LogoutButton.js b/front/src/view/LogoutButton.js
new file mode 100644
index 0000000000000000000000000000000000000000..70ff41df02661ab0c7ed0685432eb788ec4b58c5
--- /dev/null
+++ b/front/src/view/LogoutButton.js
@@ -0,0 +1,25 @@
+import React,{Component} from 'react';
+import {Button, Icon} from 'semantic-ui-react';
+import env from '../.env';
+
+
+class LogoutButton extends Component {
+
+    logOut() {
+        localStorage.removeItem("token");
+        window.location=`${env.logOutURL}?redirect_logout=${env.frontURL}`
+    }
+    render() {
+        return <Button
+        style={this.props.style}
+        onClick={this.logOut}
+        color="violet"
+        icon>
+        <Icon name="power" style={{ paddingRight:"2em" }}/>
+        Déconexion
+        </Button>
+    }    
+}
+
+
+export default LogoutButton
\ No newline at end of file
diff --git a/front/src/view/mainPage.js b/front/src/view/mainPage.js
index 520479709d7dd182429ef69b935a26e98727a984..f094c3def4d147ade3747c8914eacb952ae9a253 100644
--- a/front/src/view/mainPage.js
+++ b/front/src/view/mainPage.js
@@ -1,15 +1,17 @@
 import React, {Component} from 'react';
 import {Segment} from 'semantic-ui-react';
 import ToucanTable from './showToucan/ToucanTable';
-import FormToucan from './FormToucan'
+import FormToucan from './FormToucan';
+import LogoutButton from './LogoutButton';
 
 
 class MainPage extends Component {
 
     render(){
         return (
-            <Segment.Group  >
+            <Segment.Group >
             <Segment padded style={{margin:"3%"}}>
+            <LogoutButton style={{float:"right"}}/>
             <h2 style={{textAlign:"center"}}>Rajout de Toucan</h2>
                 <FormToucan />
             </Segment>