diff --git a/rev.txt b/rev.txt
new file mode 100644
index 0000000..7b3dbca
--- /dev/null
+++ b/rev.txt
@@ -0,0 +1,284 @@
+<script setup>
+// Import `ref` to create reactive variables
+import { ref } from 'vue'
+
+// Import images
+import socksGreenImage from '../assets/images/socks_green.jpeg'
+import socksBlueImage from '../assets/images/socks_blue.jpeg'
+
+// Import child components
+import ProductDetails from "@/components/ProductDetails.vue";
+import ReviewForm from "@/components/ReviewForm.vue";
+
+// Reactive product name using ref()
+const product = ref('Socks')
+
+// Reactive array of product details
+const details = ref(['50% cotton', '30% wool', '20% polyester'])
+
+// Reactive list of variants
+const variants = ref([
+  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
+  { id: 1, color: 'blue',  image: socksBlueImage, quantity: 20, onSale: false},
+])
+
+// More reactive values
+const brand = ref('CPNV')
+const selectedVariant = ref(0)
+const shipping = ref(null)
+
+// Define incoming props using <script setup>
+const props = defineProps({
+  premium: {
+    type: Boolean,
+    required: true
+  }
+})
+
+// Define events emitted by the component
+// ⚠️ There is a syntax error in your original code.
+// Correct usage: one array listing all emitted events.
+const emit = defineEmits(['add-to-cart', 'remove-from-cart'])
+
+// Returns "est en action!" if the selected variant is on sale
+function sale(){
+  if (variants.value[selectedVariant.value].onSale) {
+    return " est en action !"
+  }
+}
+
+// Returns current variant image
+function image() {
+  return variants.value[selectedVariant.value].image
+}
+
+// Checks if quantity > 0
+function inStock() {
+  return variants.value[selectedVariant.value].quantity > 0
+}
+
+// Computes full product name (brand + product)
+function brandedProduct() {
+  return brand.value + ' ' + product.value
+}
+
+// Updates selected index when user hovers over variant color
+function updateVariant(variantId) {
+  selectedVariant.value = variantId
+}
+
+// Computes shipping cost based on `premium` prop
+function shippingCost(){
+  if (props.premium){
+    shipping.value = 'Free'
+  } else {
+    shipping.value = 5.99
+  }
+  return shipping.value
+}
+
+// Emit event to parent to add current variant to cart
+function addToCart() {
+  emit('add-to-cart', variants.value[selectedVariant.value].id)
+}
+
+// Emit event to parent to remove current variant from cart
+function removeFromCart() {
+  emit('remove-from-cart', variants.value[selectedVariant.value].id)
+}
+</script>
+<template>
+  <div class="product-display">
+    <div class="product-container">
+
+      <!-- PRODUCT IMAGE ---------------------------------------------------->
+      <div class="product-image">
+        <!-- If in stock: normal image -->
+        <img v-if="inStock()" :src="image()" alt="Socks"/>
+
+        <!-- If out of stock: add special CSS class -->
+        <img v-else :src="image()" alt="Socks" class="out-of-stock-img"/>
+      </div>
+
+      <!-- PRODUCT INFO ----------------------------------------------------->
+      <div class="product-info">
+
+        <!-- Brand + Product name -->
+        <h1>{{ brandedProduct() }}</h1>
+
+        <!-- On sale text -->
+        <p>{{ sale() }}</p>
+
+        <!-- Stock status -->
+        <p v-if="inStock()">In Stock</p>
+        <p v-else>Out of Stock</p>
+
+        <!-- Child component receiving props -->
+        <ProductDetails :details="details"></ProductDetails>
+
+        <!-- Shipping cost text -->
+        <p>{{ shippingCost() }}</p>
+
+        <!-- VARIANT COLOR SELECTOR ------------------------------------------>
+        <div class="color-circle"
+             v-for="(variant, index) in variants"
+             :key="variant.id"
+             :style="{ backgroundColor: variant.color }"
+             @mouseover="updateVariant(index)"
+        >
+        </div>
+
+        <!-- Add to cart button -->
+        <button v-if="inStock()" @click="addToCart()">Ajouter</button>
+
+        <!-- Disabled add button -->
+        <button v-else class="disabledButton">Ajouter</button>
+
+        <!-- Remove from cart button -->
+        <button @click="removeFromCart()">Enlever du panier</button>
+
+        <!-- Review form (child component) -->
+        <ReviewForm :form="form" @on-submit="onSubmit"></ReviewForm>
+
+        <!-- To display user review (probably missing a ref in script) -->
+        <p>{{ productReview }}</p>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+🔑 Key Vue Concepts Explained
+1. Reactivity — ref()
+
+ref() creates a reactive variable:
+
+const product = ref('Socks')
+
+
+You access/update it with .value inside <script setup> but without .value in the template.
+
+2. Props — defineProps()
+
+Used in <script setup> to declare what data the parent passes to the component:
+
+const props = defineProps({
+  premium: Boolean
+})
+
+3. Events — defineEmits()
+
+Defines events the component can send to parent:
+
+const emit = defineEmits(['add-to-cart', 'remove-from-cart'])
+
+
+Then you call them like:
+
+emit('add-to-cart', variantId)
+
+4. Computed logic inside functions
+
+In Composition API, instead of computed properties, you can use functions:
+
+function inStock() { ... }
+
+
+These can be called directly in the template.
+
+5. v-for rendering
+
+Loops over variants:
+
+v-for="(variant, index) in variants"
+
+6. Dynamic styling
+
+Binding an object to :style:
+
+:style="{ backgroundColor: variant.color }"
+
+7. Child components
+
+You pass data via props:
+
+<ProductDetails :details="details"/>
+
+
+And listen to emitted events:
+
+<ReviewForm @on-submit="onSubmit"/>
+
+
+8. other
+Event handling
+<button @click="addToCart">Add</button>
+
+Conditional rendering
+<p v-if="inStock">In Stock</p>
+
+Binding
+<img :src="image" :alt="title">
+
+List rendering
+<li v-for="item in items" :key="item.id">{{ item.name }}</li>
+
+Navigation:
+<router-link to="/products">Products</router-link>
+
+4. Lifecycle Hooks
+
+Used in <script setup> by directly importing:
+
+import { onMounted, onUpdated, onUnmounted } from 'vue'
+
+onMounted(() => console.log("Component mounted"))
+onUpdated(() => console.log("DOM updated"))
+onUnmounted(() => console.log("Component removed"))
+
+
+Most used:
+
+onMounted() → fetch data, init components
+
+onUnmounted() → cleanup
+
+onUpdated() → DOM-related updates
+
+6. Composables (Reusable Functions)
+
+Reusable logic extracted into functions that use Vue reactivity.
+
+useCart.js:
+
+import { ref } from "vue"
+
+export function useCart() {
+  const cart = ref([])
+
+  function add(item) {
+    cart.value.push(item)
+  }
+
+  return { cart, add }
+}
+const { cart, add } = useCart()
+
+8. Routing (Vue Router)
+import { createRouter, createWebHistory } from "vue-router"
+
+const routes = [
+  { path: '/products', component: Products },
+  { path: '/product/:id', component: ProductDetails }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+10. Handling Forms (v-model)
+
+Two-way binding:
+
+<input v-model="name" />
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index d725b7d..c97f47c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,21 @@
 <script setup>
 import { ref } from 'vue'
-import ProductDisplay from '@/components/ProductDisplay.vue'
+import ProductDisplay from './components/ProductDisplay.vue'
 
 const cart = ref([])
-const premium = ref(true)
-
+const premium = ref(1)
 const updateCart = (id) => {
   cart.value.push(id)
 }
+const removeFromCart = (id) => {
+  const index = cart.value.indexOf(id)
+  if (index !== -1) {
+    cart.value.splice(index, 1)
+  }
+}
 </script>
-  
 <template>
   <div class="nav-bar"></div>
   <div class="cart">Cart({{ cart.length }})</div>
-  <ProductDisplay :premium="premium" @add-to-cart="updateCart"></ProductDisplay>
+  <ProductDisplay :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart" />
 </template>
\ No newline at end of file
diff --git a/src/components/ProductDetails.vue b/src/components/ProductDetails.vue
new file mode 100644
index 0000000..63f0439
--- /dev/null
+++ b/src/components/ProductDetails.vue
@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  details: {
+    type: Array,
+    required: true
+  }
+})
+</script>
+<template>
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+</template>
diff --git a/src/components/ProductDisplay.vue b/src/components/ProductDisplay.vue
index ba746db..c35e336 100644
--- a/src/components/ProductDisplay.vue
+++ b/src/components/ProductDisplay.vue
@@ -1,9 +1,21 @@
 <script setup>
-import { ref, computed } from 'vue'
-import ReviewForm from '@/components/ReviewForm.vue'
-import ReviewList from '@/components/ReviewList.vue'
-import socksGreenImage from '@/assets/images/socks_green.jpeg'
-import socksBlueImage from '@/assets/images/socks_blue.jpeg'
+import { ref } from 'vue'
+import socksGreenImage from '../assets/images/socks_green.jpeg'
+import socksBlueImage from '../assets/images/socks_blue.jpeg'
+import ProductDetails from "@/components/ProductDetails.vue";
+import ReviewForm from "@/components/ReviewForm.vue";
+import ReviewList from "@/components/ReviewList.vue";
+
+const product = ref('Socks')
+const details = ref(['50% cotton', '30% wool', '20% polyester'])
+const variants = ref([
+  { id: 0, color: 'green', image: socksGreenImage, quantity: 10, onSale: true},
+  { id: 1, color: 'blue', image: socksBlueImage, quantity: 20, onSale: false},
+])
+const brand = ref('CPNV')
+const selectedVariant = ref(0)
+const shipping = ref(null)
+const reviewList = ref([])
 
 const props = defineProps({
   premium: {
@@ -12,89 +24,72 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['add-to-cart'])
-
-const product = ref('Socks')
-const brand = ref('Vue Mastery')
-
-const selectedVariant = ref(0)
-  
-const details = ref(['50% cotton', '30% wool', '20% polyester'])
-
-const variants = ref([
-  { id: 2234, color: 'green', image: socksGreenImage, quantity: 50 },
-  { id: 2235, color: 'blue', image: socksBlueImage, quantity: 0 },
-])
-
-const reviews = ref([])
-
-const title = computed(() => {
-  return brand.value + ' ' + product.value
-})
+const emit = defineEmits(['add-to-cart'],[remove-from-cart])
 
-const image = computed(() => {
+function sale(){
+  if (variants.value[selectedVariant.value].onSale) {
+    return " est en action !"  }
+}
+function image() {
   return variants.value[selectedVariant.value].image
-})
-
-const inStock = computed(() => {
+}
+function inStock() {
   return variants.value[selectedVariant.value].quantity > 0
-})
-
-const shipping = computed(() => {
-  if (props.premium) {
-    return 'Free'
+}
+function brandedProduct() {
+  return brand.value + ' ' + product.value
+}
+function updateVariant(variantId) {
+  selectedVariant.value = variantId
+}
+function shippingCost(){
+  if (props.premium){
+    shipping.value = 'Free'
   }
-  else {
-    return 2.99
+  else{
+    shipping.value = 5.99
   }
-})
-
-const addToCart = () => {
+  return shipping.value
+}
+function addReview(review){
+  reviewList.value.push(review)
+}
+function addToCart() {
   emit('add-to-cart', variants.value[selectedVariant.value].id)
 }
-
-const updateVariant = (index) => {
-  selectedVariant.value = index
+function removeFromCart() {
+  emit('remove-from-cart', variants.value[selectedVariant.value].id)
 }
 
-const addReview = (review) => {
-  reviews.value.push(review)
-}
 </script>
-
 <template>
   <div class="product-display">
     <div class="product-container">
-      <div class="product-image">    
-        <img v-bind:src="image">
+      <div class="product-image">
+        <img v-if="inStock()" v-bind:src="image()" alt="Socks"/>
+        <img v-else v-bind:src="image()" alt="Socks" class="out-of-stock-img"/>
       </div>
       <div class="product-info">
-        <h1>{{ title }}</h1>
-        <p v-if="inStock">In Stock</p>
+        <h1>{{ brandedProduct() }}</h1>
+        <p>{{ sale() }}</p>
+        <p v-if="inStock()">In Stock</p>
         <p v-else>Out of Stock</p>
-        <p>Shipping: {{ shipping }}</p>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
-        <div 
-          v-for="(variant, index) in variants" 
-          :key="variant.id"
-          @mouseover="updateVariant(index)"
-          class="color-circle"
-          :style="{ backgroundColor: variant.color }"
+        <ProductDetails :details="details"></ProductDetails>
+        <p>{{shippingCost()}}</p>
+        <div class="color-circle"
+             v-for="(variant, index) in variants"
+             :key="variant.id"
+             :style="{ backgroundColor: variant.color }"
+             @mouseover="updateVariant(index)"
         >
         </div>
-        <button
-          class="button" 
-          :class="{ disabledButton: !inStock }"
-          :disabled="!inStock"
-          v-on:click="addToCart"
-        >
-          Add to cart
-        </button>
+        <button v-if="inStock()" @click="addToCart()" >Ajouter</button>
+        <button v-else class="disabledButton">Ajouter</button>
+        <button @click="removeFromCart()">Enlever du panier</button>
+        <ReviewForm @review-submitted="addReview"></ReviewForm>
+        <ReviewList :reviewList="reviewList" />
+        <!-- reviewList est une donnée dynamique -->
       </div>
     </div>
-    <ReviewList v-if="reviews.length > 0" :reviews="reviews"></ReviewList>
-    <ReviewForm @review-submitted="addReview"></ReviewForm>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/ReviewForm.vue b/src/components/ReviewForm.vue
index edaaf4b..6d02ad4 100644
--- a/src/components/ReviewForm.vue
+++ b/src/components/ReviewForm.vue
@@ -1,51 +1,41 @@
 <script setup>
-import { reactive } from 'vue'
+import { ref } from 'vue'
 
-const emit = defineEmits(['review-submitted'])
-
-const review = reactive({
-  name: '',
-  content: '',
-  rating: null
-})
+const name = ref('')
+const review = ref('')
+const rating = ref(null)
 
-const onSubmit = () => {
-  if (review.name === '' || review.content === '' || review.rating === null) {
-    alert('Review is incomplete. Please fill out every field.')
-    return
-  }
+const emit = defineEmits(['review-submitted'])
 
+function onSubmit() {
   const productReview = {
-    name: review.name,
-    content: review.content,
-    rating: review.rating
+    name: name.value,
+    review: review.value,
+    rating: rating.value
   }
+  console.log(productReview)
   emit('review-submitted', productReview)
 
-  review.name = ''
-  review.content = ''
-  review.rating = null
+  // remettre les valeurs par défaut après submit review
+  name.value = ''
+  review.value = ''
+  rating.value = null
 }
 </script>
-
 <template>
   <form class="review-form" @submit.prevent="onSubmit">
-    <h3>Leave a review</h3>
-    <label for="name">Name:</label>
-    <input id="name" v-model="review.name">
+    <h3>Laissez un commentaire</h3>
+    <label for="name">Nom:</label>
+    <input id="name" v-model="name"/>
 
-    <label for="review">Review:</label>      
-    <textarea id="review" v-model="review.content"></textarea>
+    <label for="review">Commentaire:</label>
+    <textarea id="review" v-model="review"></textarea>
 
-    <label for="rating">Rating:</label>
-    <select id="rating" v-model.number="review.rating">
-      <option>5</option>
-      <option>4</option>
-      <option>3</option>
-      <option>2</option>
-      <option>1</option>
+    <label for="rating">Note:</label>
+    <select id="rating" v-model.number="rating">
+      <option v-for="n in 5" :key="n">{{ n }}</option>
     </select>
 
-    <input class="button" type="submit" value="Submit">
+    <input class="button" type="submit" value="Valider"/>
   </form>
 </template>
\ No newline at end of file
diff --git a/src/components/ReviewList.vue b/src/components/ReviewList.vue
index c06103d..d92019c 100644
--- a/src/components/ReviewList.vue
+++ b/src/components/ReviewList.vue
@@ -1,21 +1,30 @@
 <script setup>
-defineProps({
-  reviews: {
+
+const props = defineProps({
+  reviewList: {
     type: Array,
     required: true
   }
 })
+
 </script>
 
 <template>
   <div class="review-container">
-    <h3>Reviews:</h3>
-    <ul>
-      <li v-for="(review, index) in reviews" :key="index">
-        <span>{{ review.name }} gave this {{ review.rating }} stars</span>
-        <br/>
-        <span>"{{ review.content }}"</span>
+    <h3>Commentaires:</h3>
+
+    <ul v-if="props.reviewList.length">
+      <li v-for="(r, index) in props.reviewList" :key="index">
+        <p><strong>{{ index + 1 }}</strong></p>
+        <p><strong>name</strong> {{ r.name }}</p>
+        <p><strong>review</strong> {{ r.review }}</p>
+        <p><strong>rating</strong> {{ r.rating }}</p>
       </li>
     </ul>
+    <p v-else>Aucun commentaire.</p>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 90e6400..0483056 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,4 +3,4 @@ import App from './App.vue'
 
 import './assets/main.css'
 
-createApp(App).mount('#app')
+createApp(App).mount('#app')
\ No newline at end of file