diff --git a/frontend/app/src/domains/production/ProductionController.tsx b/frontend/app/src/domains/production/ProductionController.tsx
new file mode 100644
index 0000000..6237b4c
--- /dev/null
+++ b/frontend/app/src/domains/production/ProductionController.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useState } from 'react'
+import BeefProductionCreator from './views/beefProductionCreator/BeefProductionCreator.tsx'
+import PackageLotsCreator from './views/PackageLotsCreator.js'
+import ProductionsList from './views/ProductionsList.tsx'
+
+export default function ProductionController() {
+
+    const BEEF_PRODUCTION_CREATION = 'BEEF_PRODUCTION_CREATION'
+    const BEEF_PRODUCTION_PACKAGE_MODIFICATION = 'BEEF_PRODUCTION_PACKAGE_MODIFICATION'
+    const PRODUCTIONS_LIST = 'PRODUCTIONS_LIST'
+
+    const [currentAction, setCurrentAction] = useState(PRODUCTIONS_LIST)
+
+    return <>{getContent()}</>
+
+    function getContent() {
+        switch (currentAction) {
+            case PRODUCTIONS_LIST: return <ProductionsList createBeefProductionCallback={() => setCurrentAction(BEEF_PRODUCTION_CREATION)}></ProductionsList>
+            case BEEF_PRODUCTION_CREATION: return <BeefProductionCreator callback={(action) => {setCurrentAction(action)}} />
+            case BEEF_PRODUCTION_PACKAGE_MODIFICATION: return <PackageLotsCreator></PackageLotsCreator>
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx b/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
new file mode 100644
index 0000000..fd1aa9e
--- /dev/null
+++ b/frontend/app/src/domains/production/components/PackageLotConfigurator.tsx
@@ -0,0 +1,122 @@
+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';
+
+/**
+ * 
+ * @param {PackageLot} lot 
+ * @returns 
+ */
+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})
+
+    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>
+            <div class="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>
+            <div class="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}>
+                    <TextFieldElement
+                        autoFocus
+                        required
+                        name="label"
+                        label="Nom du colis"
+                        fullWidth
+                        variant="standard"
+                    />
+                    <TextFieldElement
+                        required
+                        name="description"
+                        label="Description du colis"
+                        fullWidth
+                        variant="standard"
+                    />
+                    <TextFieldElement
+                        required
+                        name="unitPrice"
+                        label="prix au kilo"
+                        fullWidth
+                        variant="standard"
+                    />
+                    <TextFieldElement
+                        required
+                        name="netWeight"
+                        label="poids net"
+                        fullWidth
+                        variant="standard"
+                    />
+                </FormContainer>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={closeEditionPopin}>Annuler</Button>
+                <Button type="submit">Valider</Button>
+            </DialogActions>
+        </Dialog>
+    </div>
+
+    /**
+     * @param {number} quantity 
+     */
+    function addPackages(quantity) {
+        packageLot.quantity += quantity
+        setQuantity(packageLot.quantity)
+        changeCallback(packageLot)
+    }
+
+    /**
+     * @param {number} quantity 
+     */
+    function removePackages(quantity) {
+        packageLot.quantity -= Math.min(quantity, packageLot.quantity)
+        setQuantity(packageLot.quantity)
+        changeCallback(packageLot)
+    }
+
+    function openEditionPopin() {
+        setEditionPopinOpen(true)
+    }
+
+    function closeEditionPopin() {
+        setEditionPopinOpen(false)
+    }
+
+    function validForm(formData) {
+        packageLot.label = formData.label
+        packageLot.description = formData.description
+        packageLot.unitPrice = formData.unitPrice
+        packageLot.netWeight = formData.netWeight
+        closeEditionPopin()
+    }
+
+}
\ No newline at end of file