diff --git a/front/src/App.js b/front/src/App.js
index 835635c5a102c5a136aabc737f1e9731c9b38bc6..2ae55663b39df71e70cda50f161dc61587aadf3c 100644
--- a/front/src/App.js
+++ b/front/src/App.js
@@ -1,15 +1,17 @@
 import React from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import './App.css';
-import MainPage from './view/mainPage';
+import AdminPage from './view/AdminPage/AdminPage';
+import AllToucanPage from './view/AllToucanPage/AllToucanPage';
 import Login from './view/Login';
-import env from './.env'
+import env from './.env';
 import isLogged from './utils/Oauth';
 
 function App() {
   return (
       <Router >
-        <Route exact path='/' render={()=>isLogged() ? <MainPage/> : window.location=`${env.backURL}/oauth/login`}/>
+        <Route exact path='/' component={AllToucanPage} />
+        <Route exact path='/admin' render={()=>isLogged() ? <AdminPage/> : window.location=`${env.backURL}/oauth/login`}/>
         <Route exact path='/login/:token' component={Login} />
       </Router>
   );
diff --git a/front/src/view/mainPage.js b/front/src/view/AdminPage/AdminPage.js
similarity index 95%
rename from front/src/view/mainPage.js
rename to front/src/view/AdminPage/AdminPage.js
index df66d09dd6e22dc3ab5e9aeeff5e93d63b6e4a1f..744bc65a15a6e69ec3943d2033b07eba1d79598b 100644
--- a/front/src/view/mainPage.js
+++ b/front/src/view/AdminPage/AdminPage.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Segment} from 'semantic-ui-react';
 import ToucanTable from './showToucan/ToucanTable';
 import FormToucan from './FormToucan';
-import LogoutButton from './LogoutButton';
+import LogoutButton from '../LogoutButton';
 
 
 class MainPage extends Component {
diff --git a/front/src/view/FormToucan.js b/front/src/view/AdminPage/FormToucan.js
similarity index 99%
rename from front/src/view/FormToucan.js
rename to front/src/view/AdminPage/FormToucan.js
index 3d961a1f4f491d2c39518033c65361a484d5277a..53ae661308445e8acbfd06de6158f7b26d4aa42b 100644
--- a/front/src/view/FormToucan.js
+++ b/front/src/view/AdminPage/FormToucan.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import {Form, Message} from 'semantic-ui-react'
-import env from '../.env'
+import env from '../../.env'
 class FormToucan extends Component {
     
     constructor(props) {
diff --git a/front/src/view/showToucan/ModalSuppression.js b/front/src/view/AdminPage/showToucan/ModalSuppression.js
similarity index 97%
rename from front/src/view/showToucan/ModalSuppression.js
rename to front/src/view/AdminPage/showToucan/ModalSuppression.js
index 81823ea19462f718c919367d319d0abfaab4af61..95ae2b8a2cae5b97fa102449b92e10430329fbf6 100644
--- a/front/src/view/showToucan/ModalSuppression.js
+++ b/front/src/view/AdminPage/showToucan/ModalSuppression.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react'
 import {Modal, Button, Image,Message} from 'semantic-ui-react'
-import env from '../../.env'
+import env from '../../../.env'
 
 class ModalSupression extends Component {
     state = {error:''};
diff --git a/front/src/view/showToucan/ToucanLine.js b/front/src/view/AdminPage/showToucan/ToucanLine.js
similarity index 97%
rename from front/src/view/showToucan/ToucanLine.js
rename to front/src/view/AdminPage/showToucan/ToucanLine.js
index 612220605bb9e8e0d97a788d26fdd5e07d66a74c..5a7a8ce7a93726c102c5364c196c36691514e103 100644
--- a/front/src/view/showToucan/ToucanLine.js
+++ b/front/src/view/AdminPage/showToucan/ToucanLine.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import {Table, Image, Button} from 'semantic-ui-react'
 import ModalSuppression from './ModalSuppression'
-import env from '../../.env'
+import env from '../../../.env'
 
 class ToucanLine extends Component {
     constructor(props) {
diff --git a/front/src/view/showToucan/ToucanTable.js b/front/src/view/AdminPage/showToucan/ToucanTable.js
similarity index 97%
rename from front/src/view/showToucan/ToucanTable.js
rename to front/src/view/AdminPage/showToucan/ToucanTable.js
index 289b9a022a397743e6984bb7bffe1c343f7d8c94..24ff85addcc84a6c74f767e2ffa73af621324806 100644
--- a/front/src/view/showToucan/ToucanTable.js
+++ b/front/src/view/AdminPage/showToucan/ToucanTable.js
@@ -1,7 +1,7 @@
 import React, {Component} from 'react'
 import {Table} from 'semantic-ui-react'
 import ToucanLine from './ToucanLine'
-import env from '../../.env'
+import env from '../../../.env'
 
 class ToucanTable extends Component{
     constructor(){
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
new file mode 100644
index 0000000000000000000000000000000000000000..e8a963c9d18fdc756f5013faae194541b95dc375
--- /dev/null
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -0,0 +1,41 @@
+import React, {Component} from 'react'
+import {Card} from 'semantic-ui-react'
+import ToucanCard from './ToucanCard'
+import env from '../../.env'
+
+
+
+class AllToucan extends Component {
+    constructor(){
+        super();
+        this.state = {
+            toucans: [],
+        }
+    }
+
+    componentDidMount(){
+        fetch(`${env.backURL}/toucan/toucans`)
+        .then(result => {
+            return result.json()
+        })
+        .then(toucans => {
+            this.setState({toucans})
+            console.log(toucans)
+            })
+       .catch(err => console.log(err))
+    }
+    render(){
+        return (
+            <Card.Group>
+                {this.state.toucans.map( toucan => {
+                    return <ToucanCard
+                    image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
+                    link={`${env.backURL}/toucan/pdf/${toucan["_id"]}`}
+                    header={toucan.title}
+                    />
+             })}
+            </Card.Group>
+        )}
+}
+
+export default AllToucan
\ No newline at end of file
diff --git a/front/src/view/AllToucanPage/ToucanCard.js b/front/src/view/AllToucanPage/ToucanCard.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ce6d5db2cc5b24f2f37376970ceadd08eb37d43
--- /dev/null
+++ b/front/src/view/AllToucanPage/ToucanCard.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import {Card, Image} from 'semantic-ui-react'
+
+const ToucanCard = ({...props}) => {
+    return (
+        <Card
+        href={props.link}
+        >
+            <Image src={props.image} size="small"/>
+            <Card.Content>
+            <Card.Header content="HDNZIDJZEP"/>
+            </Card.Content>
+        </Card>
+    )
+}
+
+export default ToucanCard
\ No newline at end of file