diff --git a/src/Router.js b/src/Router.js
index 81e3782702f4a997031b4e8cd477bfe00181e372..64b8bfdae36c26faf57f62e5ac8b95c40af60011 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -9,6 +9,7 @@ export default class Router {
 		if (route) {
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
+			route.page.mount?.(this.contentElement);
 		}
 	}
 
diff --git a/src/main.js b/src/main.js
index d5b527b99954efdcddfc6dafe792a4020efe52fb..0cedb90df6eaf87a0aebceeaaaf4377833a7ea45 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,17 +2,14 @@ import Router from './Router';
 import data from './data';
 import PizzaList from './pages/PizzaList';
 import Component from './components/Component';
+import PizzaForm from './pages/PizzaForm';
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
 
 const pizzaList = new PizzaList([]),
-	aboutPage = new Component('section', null, 'Ce site est génial'),
-	pizzaForm = new Component(
-		'section',
-		null,
-		'Ici vous pourrez ajouter une pizza'
-	);
+	aboutPage = new Component('p', null, 'ce site est génial'),
+	pizzaForm = new PizzaForm();
 Router.routes = [
 	{ path: '/', page: pizzaList, title: 'La carte' },
 	{ path: '/a-propos', page: aboutPage, title: 'À propos' },
diff --git a/src/pages/Page.js b/src/pages/Page.js
new file mode 100644
index 0000000000000000000000000000000000000000..ff66805143ca0f46ba50c8063d24fcf5a673925f
--- /dev/null
+++ b/src/pages/Page.js
@@ -0,0 +1,12 @@
+import Component from '../components/Component';
+
+export default class Page extends Component {
+	element;
+
+	constructor(className, children) {
+		super('section', { name: 'class', value: className }, children);
+	}
+	mount(element) {
+		this.element = element;
+	}
+}
\ No newline at end of file
diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js
new file mode 100644
index 0000000000000000000000000000000000000000..20438f790a0df777de55c9fb1e8dc869ed63195c
--- /dev/null
+++ b/src/pages/PizzaForm.js
@@ -0,0 +1,20 @@
+import Page from './Page.js';
+
+export default class PizzaForm extends Page {
+	render() {
+		return /*html*/ `
+			<form class="pizzaForm">
+				<label>
+					Nom :
+					<input type="text" name="name">
+				</label>
+				<button type="submit">Ajouter</button>
+			</form>`;
+	}
+
+	mount(element) {
+		super.mount(element);
+	}
+
+	submit(event) {}
+}
\ No newline at end of file
diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js
index fcaedaf6bc1e55e9595774b5bd9ba88be2346d94..fc695330d0185dec7966f06532237b6402682323 100644
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
@@ -1,11 +1,12 @@
 import Component from '../components/Component.js';
 import PizzaThumbnail from '../components/PizzaThumbnail.js';
+import Page from './Page.js';
 
-export default class PizzaList extends Component {
+export default class PizzaList extends Page {
 	#pizzas;
 
 	constructor(pizzas) {
-		super('section', { name: 'class', value: 'pizzaList' });
+		super('pizzaList');// on pase juste la classe CSS souhaitée
 		this.pizzas = pizzas;
 	}