diff --git a/frontend/app/package-lock.json b/frontend/app/package-lock.json
index f11c5d1..e7f79a1 100644
--- a/frontend/app/package-lock.json
+++ b/frontend/app/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.14.9",
+        "@mui/lab": "^5.0.0-alpha.165",
         "@mui/material": "^5.14.11",
         "@mui/x-date-pickers": "^6.14.0",
         "@react-keycloak/web": "^3.4.0",
@@ -3784,6 +3785,46 @@
         }
       }
     },
+    "node_modules/@mui/lab": {
+      "version": "5.0.0-alpha.165",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.165.tgz",
+      "integrity": "sha512-8/zJStT10nh9yrAzLOPTICGhpf5YiGp/JpM0bdTP7u5AE+YT+X2u6QwMxuCrVeW8/WVLAPFg0vtzyfgPcN5T7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.36",
+        "@mui/system": "^5.15.9",
+        "@mui/types": "^7.2.13",
+        "@mui/utils": "^5.15.9",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": ">=5.15.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.15.10",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.10.tgz",
diff --git a/frontend/app/package.json b/frontend/app/package.json
index ea6dfdc..bf9cb0c 100644
--- a/frontend/app/package.json
+++ b/frontend/app/package.json
@@ -6,6 +6,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.9",
+    "@mui/lab": "^5.0.0-alpha.165",
     "@mui/material": "^5.14.11",
     "@mui/x-date-pickers": "^6.14.0",
     "@react-keycloak/web": "^3.4.0",
diff --git a/frontend/app/src/App.css b/frontend/app/src/App.css
index bec71f7..8ec3c9b 100644
--- a/frontend/app/src/App.css
+++ b/frontend/app/src/App.css
@@ -6,11 +6,11 @@
 }
 
 .form > div {
-  margin: 1rem;
+  margin-top: 1rem;
 }
 
-.form-select-list {
-  width: 10rem;
+.popin-form > div {
+  margin-top: 1rem;
 }
 
 .card-clickable > *:hover {
@@ -50,6 +50,7 @@
 .lot__package__description {
   font-size: x-small;
   grid-area: description;
+  white-space:pre-wrap;
 }
 
 .lot__package__net-weight {
diff --git a/frontend/app/src/api/mock/MockApiProductions.ts b/frontend/app/src/api/mock/MockApiProductions.ts
index a58b74d..81a3e14 100644
--- a/frontend/app/src/api/mock/MockApiProductions.ts
+++ b/frontend/app/src/api/mock/MockApiProductions.ts
@@ -27,7 +27,9 @@ export class MockApiProductions {
         return {
             id: 1,
             animalIdentifier: '1234',
+            birthDate: '2022-10-01T10:00:00',
             slaughterDate: '2023-10-01T10:00:00',
+            cuttingDate: '2024-10-01T10:00:00',
             warmCarcassWeight: 450,
             animalType: 'BEEF_COW',
             lots: [
diff --git a/frontend/app/src/domains/production/ProductionController.tsx b/frontend/app/src/domains/production/ProductionController.tsx
index 6237b4c..c7da641 100644
--- a/frontend/app/src/domains/production/ProductionController.tsx
+++ b/frontend/app/src/domains/production/ProductionController.tsx
@@ -1,24 +1,32 @@
 import React from 'react'
 import { useState } from 'react'
 import BeefProductionCreator from './views/beefProductionCreator/BeefProductionCreator.tsx'
-import PackageLotsCreator from './views/PackageLotsCreator.js'
+import PackageLotsCreator from './views/PackageLotsCreator.tsx'
 import ProductionsList from './views/ProductionsList.tsx'
+import BeefProductionView from './views/BeefProductionView.tsx'
 
 export default function ProductionController() {
 
     const BEEF_PRODUCTION_CREATION = 'BEEF_PRODUCTION_CREATION'
-    const BEEF_PRODUCTION_PACKAGE_MODIFICATION = 'BEEF_PRODUCTION_PACKAGE_MODIFICATION'
+    const BEEF_PRODUCTION_VIEW = 'BEEF_PRODUCTION_VIEW'
     const PRODUCTIONS_LIST = 'PRODUCTIONS_LIST'
 
     const [currentAction, setCurrentAction] = useState(PRODUCTIONS_LIST)
+    const [context, setContext] = useState(undefined)
 
     return <>{getContent()}</>
 
     function getContent() {
         switch (currentAction) {
-            case PRODUCTIONS_LIST: return <ProductionsList createBeefProductionCallback={() => setCurrentAction(BEEF_PRODUCTION_CREATION)}></ProductionsList>
+            case PRODUCTIONS_LIST: return <ProductionsList 
+                                                createBeefProductionCallback={() => setCurrentAction(BEEF_PRODUCTION_CREATION)}
+                                                viewBeefProductionCallback={(production) => {
+                                                    setContext(production)
+                                                    setCurrentAction(BEEF_PRODUCTION_VIEW)}}/>
             case BEEF_PRODUCTION_CREATION: return <BeefProductionCreator callback={(action) => {setCurrentAction(action)}} />
-            case BEEF_PRODUCTION_PACKAGE_MODIFICATION: return <PackageLotsCreator></PackageLotsCreator>
+            case BEEF_PRODUCTION_VIEW: return <BeefProductionView beefProduction={context} backCallback={() => {
+                                                    setCurrentAction(PRODUCTIONS_LIST)
+                                                    setContext(undefined)}}/>
         }
     }
 }
\ No newline at end of file
diff --git a/frontend/app/src/domains/production/components/BeefProductionCard.tsx b/frontend/app/src/domains/production/components/BeefProductionCard.tsx
index 69419fe..19d803a 100644
--- a/frontend/app/src/domains/production/components/BeefProductionCard.tsx
+++ b/frontend/app/src/domains/production/components/BeefProductionCard.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import { useEffect, useState } from 'react';
+import { Button, Card, CardActionArea, CardActions, CardContent, Typography } from "@mui/material"
+import { useEffect, useState } from 'react'
 import { useKeycloak } from '@react-keycloak/web'
-import { Button, Card, CardActions, CardContent, Typography } from "@mui/material"
 import { ApiBuilder } from '../../../api/ApiBuilder.ts'
 import dayjs from 'dayjs'
 
 export default function BeefProductionCard({
     production: production, 
     showActions: showActions, 
-    setPackageModificationLayoutContent: setPackageModificationLayoutContent}) {
+    viewBeefProductionCallback: viewBeefProductionCallback}) {
 
     const [beefProduction, setBeefProduction] = useState(production)
     const { keycloak, initialized } = useKeycloak()
@@ -31,17 +31,19 @@ export default function BeefProductionCard({
 
     return (
         <Card>
-            <CardContent>
-                <Typography color="text.secondary" gutterBottom>
-                    Abattage bovin
-                </Typography>
-                <Typography variant="subtitle1" component="div">
-                    Abattage le {dayjs(beefProduction.slaughterDate).format('DD/MM/YYYY')}
-                </Typography>
-                <Typography component="div">
-                    Poids de carcasse chaude : {beefProduction.warmCarcassWeight} kg
-                </Typography>
-            </CardContent>
+            <CardActionArea onClick={() => viewBeefProductionCallback(beefProduction)}>
+                <CardContent>
+                    <Typography color="text.secondary" gutterBottom>
+                        Abattage bovin
+                    </Typography>
+                    <Typography variant="subtitle1" component="div">
+                        Abattage le {dayjs(beefProduction.slaughterDate).format('DD/MM/YYYY')}
+                    </Typography>
+                    <Typography component="div">
+                        Poids de carcasse chaude : {beefProduction.warmCarcassWeight} kg
+                    </Typography>
+                </CardContent>
+            </CardActionArea>
             {getActions()}
         </Card>
     )
@@ -51,7 +53,7 @@ export default function BeefProductionCard({
             return <CardActions>
                 <Button size="small">Mettre en vente</Button>
                 <Button size="small">Ajuster le poids vif</Button>
-                <Button size="small" onClick={() => setPackageModificationLayoutContent(production)}>Modifier les produits</Button>
+                <Button size="small" onClick={() => viewBeefProductionCallback(beefProduction)}>Modifier les produits</Button>
             </CardActions>
         }
     }
diff --git a/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx b/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
index fd1aa9e..f87f7ca 100644
--- a/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
+++ b/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
@@ -1,87 +1,96 @@
 import React from 'react'
 import { useState } from "react"
 import EditIcon from '@mui/icons-material/Edit';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"
-import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui';
+import { Button, ButtonGroup, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"
+import { FormContainer, TextFieldElement, TextareaAutosizeElement, useForm } from 'react-hook-form-mui';
 
 /**
  * 
  * @param {PackageLot} lot 
  * @returns 
  */
-export default function PackageLotConfigurator({packageLot: packageLot, changeCallback: changeCallback}) {
+export default function PackageLotConfigurator({ packageLot: packageLot, changeCallback: changeCallback }) {
     const [quantity, setQuantity] = useState<number>(packageLot.quantity)
     const [editionPopinOpen, setEditionPopinOpen] = useState<boolean>(false)
-    const form = useForm({defaultValues: packageLot})
+    const form = useForm({
+        defaultValues: {
+            label: packageLot.label,
+            description: packageLot.description,
+            netWeight: packageLot.netWeight,
+            unitPrice: packageLot.unitPrice
+        }
+    })
 
     return <div>
-        <div class="lot">
-            <div class="lot__package">
-                <div class="lot__package__name"><span>{packageLot.label}</span><EditIcon className="lot__package__edit" onClick={openEditionPopin}/></div>
-                <div class="lot__package__description">{packageLot.description}</div>
-                <div class="lot__package__net-weight">{packageLot.netWeight} kg</div>
-                <div class="lot__package__unit-price">{packageLot.unitPrice} € <sup>TTC</sup>/kg</div>
+        <div className="lot">
+            <div className="lot__package">
+                <div className="lot__package__name"><span>{packageLot.label}</span><EditIcon className="lot__package__edit" onClick={openEditionPopin} /></div>
+                <div className="lot__package__description">{packageLot.description}</div>
+                <div className="lot__package__net-weight">{packageLot.netWeight} kg</div>
+                <div className="lot__package__unit-price">{packageLot.unitPrice} € <sup>TTC</sup>/kg</div>
             </div>
-            <div class="lot__quantity-actions-remove">
+            <div className="lot__quantity-actions-remove">
                 <Button variant="contained" onClick={() => removePackages(10)}>-10</Button>
                 <Button variant="contained" onClick={() => removePackages(1)} > -1</Button>
             </div >
-            <div class="lot__summary">
-                <div class="lot__summary__package-number">{quantity}</div>
-                <div class="lot__summary__label">colis mis en vente</div>
-                <div class="lot__summary__total-quantity">{quantity * packageLot.netWeight} kg</div>
-                <div class="lot__summary__total-price">{quantity * packageLot.netWeight * packageLot.unitPrice} € <sup>TTC</sup></div>
+            <div className="lot__summary">
+                <div className="lot__summary__package-number">{quantity}</div>
+                <div className="lot__summary__label">colis mis en vente</div>
+                <div className="lot__summary__total-quantity">{quantity * packageLot.netWeight} kg</div>
+                <div className="lot__summary__total-price">{quantity * packageLot.netWeight * packageLot.unitPrice} € <sup>TTC</sup></div>
             </div>
-            <div class="lot__quantity-actions-add">
+            <div className="lot__quantity-actions-add">
                 <Button variant="contained" onClick={() => addPackages(10)}>+10</Button>
                 <Button variant="contained" onClick={() => addPackages(1)}> +1</Button >
             </div>
         </div>
         <Dialog
             open={editionPopinOpen}
-            onClose={closeEditionPopin}
-            PaperProps={{
-                component: 'form',
-                onSubmit: validForm,
-              }}>
-            <DialogTitle>Modification du colis</DialogTitle>
-            <DialogContent>
-                <FormContainer onSuccess={validForm} formContext={form}>
+            onClose={cancelForm}>
+            <FormContainer onSuccess={validForm} formContext={form}>
+                <DialogTitle>Caractéristiques du colis</DialogTitle>
+                <DialogContent>
                     <TextFieldElement
                         autoFocus
-                        required
+                        validation={{ required: 'Champ obligatoire' }}
                         name="label"
                         label="Nom du colis"
                         fullWidth
                         variant="standard"
+                        margin="normal"
                     />
-                    <TextFieldElement
-                        required
+                    <TextareaAutosizeElement
+                        validation={{ required: 'Champ obligatoire' }}
                         name="description"
                         label="Description du colis"
                         fullWidth
                         variant="standard"
+                        margin="normal"
                     />
                     <TextFieldElement
-                        required
+                        validation={{ required: 'Champ obligatoire' }}
                         name="unitPrice"
-                        label="prix au kilo"
+                        label="prix au kilo (€/kg)"
                         fullWidth
                         variant="standard"
+                        margin="normal"
                     />
                     <TextFieldElement
-                        required
+                        validation={{ required: 'Champ obligatoire' }}
                         name="netWeight"
-                        label="poids net"
+                        label="poids net (kg)"
                         fullWidth
                         variant="standard"
+                        margin="normal"
                     />
-                </FormContainer>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={closeEditionPopin}>Annuler</Button>
-                <Button type="submit">Valider</Button>
-            </DialogActions>
+                </DialogContent>
+                <DialogActions>
+                    <ButtonGroup>
+                        <Button variant="contained" size="small" type="submit">Valider</Button>
+                        <Button size="small" onClick={cancelForm}>Annuler</Button>
+                    </ButtonGroup>
+                </DialogActions>
+            </FormContainer>
         </Dialog>
     </div>
 
@@ -104,6 +113,7 @@ export default function PackageLotConfigurator({packageLot: packageLot, changeCa
     }
 
     function openEditionPopin() {
+        //form.reset()
         setEditionPopinOpen(true)
     }
 
@@ -111,11 +121,22 @@ export default function PackageLotConfigurator({packageLot: packageLot, changeCa
         setEditionPopinOpen(false)
     }
 
+    function cancelForm(formData) {
+        form.reset({
+            label: packageLot.label,
+            description: packageLot.description,
+            netWeight: packageLot.netWeight,
+            unitPrice: packageLot.unitPrice
+        })
+        closeEditionPopin()
+    }
+
     function validForm(formData) {
         packageLot.label = formData.label
         packageLot.description = formData.description
         packageLot.unitPrice = formData.unitPrice
         packageLot.netWeight = formData.netWeight
+        changeCallback(packageLot)
         closeEditionPopin()
     }
 
diff --git a/frontend/app/src/domains/production/components/ProductionCard.tsx b/frontend/app/src/domains/production/components/ProductionCard.tsx
index b30d4ba..151fcc2 100644
--- a/frontend/app/src/domains/production/components/ProductionCard.tsx
+++ b/frontend/app/src/domains/production/components/ProductionCard.tsx
@@ -4,7 +4,7 @@ import BeefProductionCard from "./BeefProductionCard.tsx"
 export default function ProductionCard({
     production: production, 
     showActions: showActions,
-    setPackageModificationLayoutContent: setPackageModificationLayoutContent
+    viewBeefProductionCallback: viewBeefProductionCallback
 }) {
 
     switch (production.productionType) {
@@ -13,7 +13,7 @@ export default function ProductionCard({
                         key={production.id}
                         production={production} 
                         showActions={showActions}
-                        setPackageModificationLayoutContent={setPackageModificationLayoutContent}>
+                        viewBeefProductionCallback={viewBeefProductionCallback}>
                     </BeefProductionCard>
         default :
             return <></>
diff --git a/frontend/app/src/domains/production/views/BeefProductionView.tsx b/frontend/app/src/domains/production/views/BeefProductionView.tsx
new file mode 100644
index 0000000..ca2cfa4
--- /dev/null
+++ b/frontend/app/src/domains/production/views/BeefProductionView.tsx
@@ -0,0 +1,53 @@
+import { Typography, ButtonGroup, Button, Tab, Tabs } from '@mui/material'
+import React from 'react'
+import { useEffect, useState } from 'react'
+import { useKeycloak } from '@react-keycloak/web'
+import { ApiBuilder } from '../../../api/ApiBuilder.ts'
+import BreedingPropertiesForm from './beefProductionCreator/forms/BreedingPropertiesForm.tsx'
+import SlaughterPropertiesForm from './beefProductionCreator/forms/SlaughterPropertiesForm.tsx'
+import CuttingPropertiesForm from './beefProductionCreator/forms/CuttingPropertiesForm.tsx'
+import TabContext from '@mui/lab/TabContext';
+import TabList from '@mui/lab/TabList';
+import TabPanel from '@mui/lab/TabPanel';
+
+
+export default function BeefProductionView({ beefProduction: beefProduction, backCallback: backCallback }) {
+
+    const [currentTab, setCurrentTab] = React.useState('1');
+
+    const changeTab = (event: React.SyntheticEvent, newValue: string) => {
+        setCurrentTab(newValue);
+    };
+
+
+    return <>
+        <Typography variant="h6">Abattage bovin</Typography>
+        <TabContext value={currentTab}>
+            <TabList onChange={changeTab}>
+                <Tab label="Elevage" value="1" />
+                <Tab label="Abattage" value="2" />
+                <Tab label="Découpe" value="3" />
+                <Tab label="Colis" value="4" />
+            </TabList>
+            <TabPanel value="1">
+                <BreedingPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
+            </TabPanel>
+            <TabPanel value="2">
+                <SlaughterPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
+            </TabPanel>
+            <TabPanel value="3">
+                <CuttingPropertiesForm beefProduction={beefProduction} validFormCallback={undefined} cancelFormCallback={undefined} />
+            </TabPanel>
+            <TabPanel value="4">
+            </TabPanel>
+        </TabContext>
+
+        <div>
+            <ButtonGroup>
+                <Button variant="contained" size="small" onClick={() => backCallback()}>Retour</Button>
+                <Button variant="outlined" size="small" >Modifier</Button>
+                <Button variant="outlined" size="small" >Supprimer</Button>
+            </ButtonGroup>
+        </div>
+    </>
+}
\ No newline at end of file
diff --git a/frontend/app/src/domains/production/views/PackageLotsCreator.js b/frontend/app/src/domains/production/views/PackageLotsCreator.tsx
similarity index 100%
rename from frontend/app/src/domains/production/views/PackageLotsCreator.js
rename to frontend/app/src/domains/production/views/PackageLotsCreator.tsx
diff --git a/frontend/app/src/domains/production/views/ProductionsList.tsx b/frontend/app/src/domains/production/views/ProductionsList.tsx
index cfef1ba..64d85fd 100644
--- a/frontend/app/src/domains/production/views/ProductionsList.tsx
+++ b/frontend/app/src/domains/production/views/ProductionsList.tsx
@@ -8,7 +8,9 @@ import { Button, Typography } from "@mui/material"
 
 import ProductionCard from '../components/ProductionCard.tsx'
 
-export default function ProductionsList({createBeefProductionCallback: createBeefProductionCallback}) {
+export default function ProductionsList({
+    createBeefProductionCallback: createBeefProductionCallback,
+    viewBeefProductionCallback: viewBeefProductionCallback}) {
 
     const [productions, setProductions] = useState([])
     const { keycloak, initialized } = useKeycloak()
@@ -46,7 +48,7 @@ export default function ProductionsList({createBeefProductionCallback: createBee
         return productions.map(production => <ProductionCard 
                                                 production={production} 
                                                 showActions={true} 
-                                                setPackageModificationLayoutContent={createBeefProductionCallback}>    
+                                                viewBeefProductionCallback={viewBeefProductionCallback}> 
                                             </ProductionCard>)
     }
 }
\ No newline at end of file
diff --git a/frontend/app/src/domains/production/views/beefProductionCreator/BeefProductionCreator.tsx b/frontend/app/src/domains/production/views/beefProductionCreator/BeefProductionCreator.tsx
index dbc7247..5933971 100644
--- a/frontend/app/src/domains/production/views/beefProductionCreator/BeefProductionCreator.tsx
+++ b/frontend/app/src/domains/production/views/beefProductionCreator/BeefProductionCreator.tsx
@@ -10,7 +10,7 @@ import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction.js"
 import { ApiBuilder } from '../../../../api/ApiBuilder.ts'
 import { useKeycloak } from '@react-keycloak/web'
 
-import PackageLotsCreator from "../PackageLotsCreator.js"
+import PackageLotsCreator from "../PackageLotsCreator.tsx"
 import BreedingPropertiesForm from "./forms/BreedingPropertiesForm.tsx"
 import SlaughterPropertiesForm from "./forms/SlaughterPropertiesForm.tsx"
 import CuttingPropertiesForm from "./forms/CuttingPropertiesForm.tsx"
@@ -24,8 +24,7 @@ export default function BeefProductionCreator({ callback }) {
     const PRODUCTS_STEP = 3
 
     const { keycloak } = useKeycloak()
-    //const [ activeStep, setActiveStep ] = useState<number>(BREEDING_PROPERTIES_STEP)
-    const [ activeStep, setActiveStep ] = useState<number>(PRODUCTS_STEP)
+    const [ activeStep, setActiveStep ] = useState<number>(BREEDING_PROPERTIES_STEP)
     const [ beefProduction, setBeefProduction] = useState<BeefProduction>({ productionType: "BeefProduction"})
     const [completedSteps, setCompletedSteps] = useState<Array<number>>([])
     const apiBuilder = new ApiBuilder()
diff --git a/frontend/app/src/domains/production/views/beefProductionCreator/forms/BreedingPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProductionCreator/forms/BreedingPropertiesForm.tsx
index 7496d64..a368881 100644
--- a/frontend/app/src/domains/production/views/beefProductionCreator/forms/BreedingPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProductionCreator/forms/BreedingPropertiesForm.tsx
@@ -4,6 +4,7 @@ import { Button, ButtonGroup } from "@mui/material"
 import { CheckboxElement, DatePickerElement, FormContainer, SelectElement, SubmitHandler, TextFieldElement, useForm } from 'react-hook-form-mui'
 
 import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction"
+import dayjs from "dayjs"
 
 export default function BreedingPropertiesForm({
     beefProduction: beefProduction, 
@@ -22,7 +23,12 @@ export default function BreedingPropertiesForm({
         { id: 'CHAROLAISE', label: 'charolaise' }
     ]
 
-    const form = useForm<BeefProduction>({defaultValues: beefProduction})
+    const form = useForm<BeefProduction>({defaultValues: {
+        ...beefProduction,
+        birthDate: dayjs(beefProduction.birthDate),
+        slaughterDate: dayjs(beefProduction.slaughterDate),
+        cuttingDate: dayjs(beefProduction.cuttingDate)
+    }})
 
     return <FormContainer onSuccess={validFormCallback} formContext={form}>
 
@@ -57,7 +63,7 @@ export default function BreedingPropertiesForm({
             <div>
                 <SelectElement 
                     name='animalType'
-                    className="form-select-list" 
+                    fullWidth
                     validation={{ required: 'Champ obligatoire' }} 
                     label="Type d'animal" 
                     variant="standard" 
@@ -66,7 +72,7 @@ export default function BreedingPropertiesForm({
             <div>
                 <SelectElement 
                     name='cattleBreed' 
-                    className="form-select-list" 
+                    fullWidth
                     validation={{ required: 'Champ obligatoire' }} 
                     label="Race bovine" 
                     variant="standard" 
diff --git a/frontend/app/src/domains/production/views/beefProductionCreator/forms/CuttingPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProductionCreator/forms/CuttingPropertiesForm.tsx
index 2a10880..5925cc9 100644
--- a/frontend/app/src/domains/production/views/beefProductionCreator/forms/CuttingPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProductionCreator/forms/CuttingPropertiesForm.tsx
@@ -3,14 +3,20 @@ import { ButtonGroup, Button } from '@mui/material'
 import { FormContainer, DatePickerElement, TextFieldElement, useForm } from 'react-hook-form-mui'
 
 import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction"
+import dayjs from 'dayjs'
 
 export default function CuttingPropertiesForm({
     beefProduction: beefProduction, 
     validFormCallback: validFormCallback, 
     cancelFormCallback: cancelFormCallback}) {
 
-    const form = useForm<BeefProduction>({defaultValues: beefProduction})
-
+    const form = useForm<BeefProduction>({defaultValues: {
+        ...beefProduction,
+        birthDate: dayjs(beefProduction.birthDate),
+        slaughterDate: dayjs(beefProduction.slaughterDate),
+        cuttingDate: dayjs(beefProduction.cuttingDate)
+    }})
+    
     return <FormContainer onSuccess={validFormCallback} formContext={form}>
         <div className="form">
             <div>
diff --git a/frontend/app/src/domains/production/views/beefProductionCreator/forms/SlaughterPropertiesForm.tsx b/frontend/app/src/domains/production/views/beefProductionCreator/forms/SlaughterPropertiesForm.tsx
index d8438de..67e76dd 100644
--- a/frontend/app/src/domains/production/views/beefProductionCreator/forms/SlaughterPropertiesForm.tsx
+++ b/frontend/app/src/domains/production/views/beefProductionCreator/forms/SlaughterPropertiesForm.tsx
@@ -4,13 +4,20 @@ import { DatePickerElement, FormContainer, SliderElement, TextFieldElement, useF
 
 import BeefProduction from "viandeendirect_eu/dist/model/BeefProduction"
 import { BeefProductionService } from '../../../service/BeefProductionService.ts'
+import dayjs from 'dayjs'
 
 export default function SlaughterPropertiesForm({
     beefProduction: beefProduction, 
     validFormCallback: validFormCallback, 
     cancelFormCallback: cancelFormCallback }) {
 
-    const form = useForm<BeefProduction>({defaultValues: beefProduction})
+    const form = useForm<BeefProduction>({defaultValues: {
+        ...beefProduction,
+        birthDate: dayjs(beefProduction.birthDate),
+        slaughterDate: dayjs(beefProduction.slaughterDate),
+        cuttingDate: dayjs(beefProduction.cuttingDate)
+    }})
+
     const warmCarcassWeight = form.watch('warmCarcassWeight')