diff --git a/front/src/utils/yearSelector.js b/front/src/utils/yearSelector.js
new file mode 100644
index 0000000000000000000000000000000000000000..368117eb9f11da170fcb55b1ada2775709242030
--- /dev/null
+++ b/front/src/utils/yearSelector.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import {Dropdown} from 'semantic-ui-react'
+
+
+  
+
+function SelectYear(props) {
+
+	const years = []
+
+	for (let year = props.beginYear; year >= 2018; year -= 1) {
+		years.push({
+			text: `${year.toString()}-${(year+1).toString()}`,
+			value: year,
+			key: year
+		});
+	}
+	return(
+		<Dropdown
+		selection
+		placeholder="value"
+		options = {years}
+		defaultValue = {props.beginYear}
+		onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
+		/>
+	)
+}
+
+export default SelectYear;
\ No newline at end of file
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index b05614f520f43ac09093a862dbc3cdeef239c5f3..0fd0ba5d1689985967308e908f57c4ee3b83a3b4 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,20 +1,24 @@
 import React, {Component} from 'react'
 import {Card, Segment} from 'semantic-ui-react'
+import SelectYear from '../../utils/yearSelector'
 import ToucanCard from './ToucanCard'
 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: [],
-        }
-    }
+			toucans: [],
+			before: (new Date(beginYear+1,7,31)).getTime(),
+			after: (new  Date(beginYear,8,1)).getTime(),
+		}
+	}
 
-    componentDidMount(){
-        fetch(`${env.backURL}/toucan/toucans`)
+    updateToucan(){
+        fetch(`${env.backURL}/toucan/toucans?before=${this.state.before}&after=${this.state.after}`)
         .then(result => {
             return result.json()
         })
@@ -22,21 +26,46 @@ class AllToucan extends Component {
             this.setState({toucans})
             })
        .catch(err => console.log(err))
-    }
+	}
+
+	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())
+	}
+	
+	componentDidMount(){
+		this.updateToucan()
+	}
     render(){
         return (
             <Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
-            <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}
-                    date={(new Date(toucan.date).toLocaleDateString())}
-                    key={toucan._id}
-                    />
-             })}
-            </Card.Group>
+				<SelectYear
+					beginYear={beginYear}
+					updateFrame = {this.updateFrame.bind(this)}
+				/>
+				{/* <Dropdown
+					selection
+					placeholder="value"
+					options = {years}
+					defaultValue = {beginYear}
+					onChange = {(_,props) => this.setState({
+						before : (new Date(props.value+1,7,31)).getTime(),
+						after : (new  Date(props.value,8,1)).getTime()
+					}, () => this.updateToucan())}
+				/> */}
+				<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}
+						date={(new Date(toucan.date).toLocaleDateString())}
+						key={toucan._id}
+						/>
+				})}
+				</Card.Group>
             </Segment>
         )}
 }