diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index e8a963c9d18fdc756f5013faae194541b95dc375..e3d4e9a1f4dfc9a3a55bd3bffc5f5cd0da8cc3df 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react'
-import {Card} from 'semantic-ui-react'
+import {Card, Segment} from 'semantic-ui-react'
 import ToucanCard from './ToucanCard'
 import env from '../../.env'
 
@@ -26,15 +26,18 @@ class AllToucan extends Component {
     }
     render(){
         return (
+            <Segment style={{margin:"3em",padding:"2em"}}>
             <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}
+                    date={(new Date(toucan.date).toLocaleDateString())}
                     />
              })}
             </Card.Group>
+            </Segment>
         )}
 }
 
diff --git a/front/src/view/AllToucanPage/ToucanCard.js b/front/src/view/AllToucanPage/ToucanCard.js
index 0ce6d5db2cc5b24f2f37376970ceadd08eb37d43..a94c2ebe0a1363b0b4e055638da11f9ae5eb48ed 100644
--- a/front/src/view/AllToucanPage/ToucanCard.js
+++ b/front/src/view/AllToucanPage/ToucanCard.js
@@ -3,14 +3,18 @@ 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>
+            <Card
+                href={props.link}
+                link
+                style={{margin:"1em"}}
+                description="On test"
+            >
+                <Card.Content>
+                <Card.Header content={props.header}/>
+                <Card.Meta content={props.date} textAlign="right"/>
+                </Card.Content>
+                <Image src={props.image}/>
+            </Card>
     )
 }