diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index 3f3de7f564fa07c9d82eee9f8a103292e0b1c270..111ab5e88ba36ecf781b6fd6a68f9d82517cea2e 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react'
+import React, {useState, useEffect} from 'react'
 import {Card, Segment} from 'semantic-ui-react'
 import SelectYear from '../../utils/yearSelector'
 import ToucanCard from './ToucanCard'
@@ -7,61 +7,53 @@ import env from '../../.env'
 const date = new Date()
 const beginYear = 1900 + (date.getMonth() < 8 ? date.getYear()-1 : date.getYear());
 
-class AllToucan extends Component {
-    constructor(){
-        super();
-        this.state = {
-			toucans: [],
-			before: (new Date(beginYear+1,7,31)).getTime(),
-			after: (new  Date(beginYear,8,1)).getTime(),
-		}
-	}
-
-    updateToucan(){
-        fetch(`${env.backURL}/toucan/toucans?before=${this.state.before}&after=${this.state.after}`)
-        .then(result => {
-            return result.json()
-        })
-        .then(toucans => {
-            this.setState({toucans})
-            })
-       .catch(err => console.log(err))
-	}
+function AllToucan(props){
+	const [toucans,setToucans] = useState([]);
+	const [before,setBefore] = useState((new Date(beginYear+1,7,31)).getTime());
+	const [after, setAfter] = useState((new  Date(beginYear,8,1)).getTime());
+		
+		useEffect(()=>{
+			fetch(`${env.backURL}/toucan/toucans?before=${before}&after=${after}`)
+			.then(result => {
+				return result.json()
+			})
+			.then(toucans => {
+				setToucans(toucans)
+				})
+		   .catch(err => console.log(err))
+		},[before,after]
+	)
 
-	updateFrame(value){
+	function updateFrame(value){
 		var before = (new Date(value+1,7,31)).getTime()
 		var after = (new Date(value,8,1)).getTime()
-
-		this.setState({before, after},()=> this.updateToucan())
+		setBefore(before)
+		setAfter(after)
 	}
 	
-	componentDidMount(){
-		this.updateToucan()
-	}
-    render(){
-        return (
-            <Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
-
-				<SelectYear
-					style={{marginBottom:"2em"}}
-					beginYear={beginYear}
-					updateFrame = {this.updateFrame.bind(this)}
-				/>
-				<Card.Group centered >
-					{this.state.toucans.map( toucan => {
-						return <ToucanCard
-						image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
-						link={`${env.backURL}/toucan/pdf/${toucan["_id"]}.pdf`}
-						header={toucan.title}
-						toucanId={toucan._id}
-						isAdmin={this.props.isAdmin}
-						date={(new Date(toucan.date).toLocaleDateString())}
-						key={toucan._id}
-						/>
-				})}
-				</Card.Group>
-            </Segment>
-        )}
-}
+	return (
+		<Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
+		
+		<SelectYear
+		style={{marginBottom:"2em"}}
+		beginYear={beginYear}
+		updateFrame = {updateFrame}
+		/>
+		<Card.Group centered >
+		{toucans.map( toucan => {
+			return <ToucanCard
+			image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
+			link={`${env.backURL}/toucan/pdf/${toucan["_id"]}.pdf`}
+			header={toucan.title}
+			toucanId={toucan._id}
+			isAdmin={props.isAdmin}
+			date={(new Date(toucan.date).toLocaleDateString())}
+			key={toucan._id}
+			/>
+		})}
+		</Card.Group>
+		</Segment>
+		)}
+		
 
 export default AllToucan
\ No newline at end of file