diff --git a/README.md b/README.md
index a4e2dcf..2561822 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,8 @@
-les stars / têtes d’affiche,
-les catégories, la note TMDB et le nombre de personnes ayant noté le
-film.
-- En dessous des informations du film, on souhaite pouvoir laisser des
-commentaires. Réalisez un formulaire contenant les champs suivants (à
-stocker dans le local storage) et listez les commentaires du plus récent au
-plus ancien :
-- Nom d’utilisateur
-- Chaîne de caractères alphas
-- Longueur minimum de 3 caractères
-- Longueur maximum de 50 caractères
-- Champs requis
-- Message
-- Chaîne de caractères alphanumérique
-- Longueur minimum de 3 caractères
-- Longueur maximum de 500 caractères
-- Champs requis
-- L’utilisation d’un Wysiwyg tel que TinyMCE est un plus
-- Note du film
-- Valeur numérique de 1 à 10
-Indications :
-- Les variables doivent être typées et les SFC doivent être réalisés en utilisant la
-Composition API et TypeScript.
-- L’utilisation de NuxtJS, Vuetify, TailwindCSS, SCSS, Vuelidate, VueUse est un
-plus
-- L’installation d’outils de lint, de tests, de stores est un plus
-- Une présentation graphique attirante contenant de possibles animations est un plus
-- L’ajout de skeletons est un plus
-- N’hésitez pas à commenter votre code et créer des commits sur Git au fur et à
-mesure de votre progression
\ No newline at end of file
+- tinymce
+- style
+- variables typées
+- Vuetify
+- Vuelidate
+- tests
+- animations
+- skeletons
diff --git a/components/comment/form.vue b/components/comment/form.vue
new file mode 100644
index 0000000..f35c1df
--- /dev/null
+++ b/components/comment/form.vue
@@ -0,0 +1,23 @@
+<template>
+  <form @submit.prevent="sendComment()" class="flex flex-col">
+    <input v-model="username" type="text" placeholder="username" min="3" max="50" required id="username">
+    <textarea v-model="message" type="textarea" placeholder="message" min="3" max="500" required id="message" />
+    <input type="range" name="score" min="1" max="10" id="score">
+    <button type="submit">envoyer</button>
+  </form>
+</template>
+
+<script setup lang="ts">
+const store = useCommentStore()
+const props = defineProps(['filmId'])
+
+const sendComment = () => {
+  store.add({
+    username: username.value,
+    message: message.value,
+    score: document.getElementById('score').value,
+    film: props.filmId,
+    added: Date.now(),
+  })
+}
+</script>
diff --git a/components/comment/list.vue b/components/comment/list.vue
new file mode 100644
index 0000000..39b1458
--- /dev/null
+++ b/components/comment/list.vue
@@ -0,0 +1,13 @@
+<template>
+  <ul>
+    <li v-for="comment in store.orderedComment">
+      {{ comment.username }}
+      {{ comment.added }}
+      {{ comment.message }}
+    </li>
+  </ul>
+  <div class="mt-24"></div>
+</template>
+<script setup>
+const store = useCommentStore()
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e703db3..af8d880 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,10 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
-
+  modules: [
+    '@pinia/nuxt',
+    '@vueuse/nuxt',
+  ],
   postcss: {
     plugins: {
       tailwindcss: {},
@@ -25,4 +28,5 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: '2024-10-06',
+  modules: ['@pinia/nuxt'],
 })
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 94bcf18..6f96d97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@pinia/nuxt": "^0.5.5",
         "axios": "^1.7.7",
         "node-fetch": "^3.3.2",
         "nuxt": "^3.12.3",
@@ -15,6 +16,8 @@
         "vue-router": "^4.4.0"
       },
       "devDependencies": {
+        "@vueuse/core": "^11.1.0",
+        "@vueuse/nuxt": "^11.1.0",
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.39",
         "sass": "^1.77.6",
@@ -727,9 +730,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.4.15",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -1173,6 +1176,18 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/@pinia/nuxt": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@pinia/nuxt/-/nuxt-0.5.5.tgz",
+      "integrity": "sha512-wjxS7YqIesh4OLK+qE3ZjhdOJ5pYZQ+VlEmZNtTwzQn1Kavei/khovx7mzXVXNA/mvSPXVhb9xBzhyS3XMURtw==",
+      "dependencies": {
+        "@nuxt/kit": "^3.9.0",
+        "pinia": "^2.2.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -1357,9 +1372,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
-      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
+      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
@@ -1451,6 +1466,12 @@
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "dev": true
+    },
     "node_modules/@unhead/dom": {
       "version": "1.9.16",
       "resolved": "https://registry.npmjs.org/@unhead/dom/-/dom-1.9.16.tgz",
@@ -1922,6 +1943,193 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.31.tgz",
       "integrity": "sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA=="
     },
+    "node_modules/@vueuse/core": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+      "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+      "dev": true,
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "11.1.0",
+        "@vueuse/shared": "11.1.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+      "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/nuxt": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/nuxt/-/nuxt-11.1.0.tgz",
+      "integrity": "sha512-ZPYigcqgPPe9vk9nBHLF8p0zshX8qvWV/ox1Y4GdV4k2flPiw7+2THNTpU2NZDBXSOXlhB2sao+paGCsvJm/Qw==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/kit": "^3.13.2",
+        "@vueuse/core": "11.1.0",
+        "@vueuse/metadata": "11.1.0",
+        "local-pkg": "^0.5.0",
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "nuxt": "^3.0.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/@nuxt/kit": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.13.2.tgz",
+      "integrity": "sha512-KvRw21zU//wdz25IeE1E5m/aFSzhJloBRAQtv+evcFeZvuroIxpIQuUqhbzuwznaUwpiWbmwlcsp5uOWmi4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@nuxt/schema": "3.13.2",
+        "c12": "^1.11.2",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "globby": "^14.0.2",
+        "hash-sum": "^2.0.0",
+        "ignore": "^5.3.2",
+        "jiti": "^1.21.6",
+        "klona": "^2.0.6",
+        "knitwork": "^1.1.0",
+        "mlly": "^1.7.1",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.6.3",
+        "ufo": "^1.5.4",
+        "unctx": "^2.3.1",
+        "unimport": "^3.12.0",
+        "untyped": "^1.4.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/@nuxt/schema": {
+      "version": "3.13.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.13.2.tgz",
+      "integrity": "sha512-CCZgpm+MkqtOMDEgF9SWgGPBXlQ01hV/6+2reDEpJuqFPGzV8HYKPBcIFvn7/z5ahtgutHLzjP71Na+hYcqSpw==",
+      "dev": true,
+      "dependencies": {
+        "compatx": "^0.1.8",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "hookable": "^5.5.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.0",
+        "scule": "^1.3.0",
+        "std-env": "^3.7.0",
+        "ufo": "^1.5.4",
+        "uncrypto": "^0.1.3",
+        "unimport": "^3.12.0",
+        "untyped": "^1.4.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@vueuse/nuxt/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+      "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+      "dev": true,
+      "dependencies": {
+        "vue-demi": ">=0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -2422,9 +2630,9 @@
       }
     },
     "node_modules/c12": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.1.tgz",
-      "integrity": "sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==",
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-1.11.2.tgz",
+      "integrity": "sha512-oBs8a4uvSDO9dm8b7OCFW7+dgtVrwmwnrVXYzLm43ta7ep2jCn/0MhoUFygIWtxhyy6+/MG7/agvpY0U1Iemew==",
       "dependencies": {
         "chokidar": "^3.6.0",
         "confbox": "^0.1.7",
@@ -2436,7 +2644,7 @@
         "ohash": "^1.1.3",
         "pathe": "^1.1.2",
         "perfect-debounce": "^1.0.0",
-        "pkg-types": "^1.1.1",
+        "pkg-types": "^1.2.0",
         "rc9": "^2.1.2"
       },
       "peerDependencies": {
@@ -4034,9 +4242,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
-      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "engines": {
         "node": ">= 4"
       }
@@ -4557,11 +4765,11 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.10",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
-      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.15"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
     "node_modules/magic-string-ast": {
@@ -5545,6 +5753,56 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.2.4.tgz",
+      "integrity": "sha512-K7ZhpMY9iJ9ShTC0cR2+PnxdQRuwVIsXDO/WIEV/RnMC/vmSoKDTKW/exNQYPI+4ij10UjXqdNiEHwn47McANQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -5555,9 +5813,9 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.3.tgz",
-      "integrity": "sha512-+JrgthZG6m3ckicaOB74TwQ+tBWsFl3qVQg7mN8ulwSOElJ7gBhKzj2VkCPnZ4NlF6kEquYU+RIYNVAvzd54UA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
+      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
       "dependencies": {
         "confbox": "^0.1.7",
         "mlly": "^1.7.1",
@@ -6496,9 +6754,9 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g=="
     },
     "node_modules/semver": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
-      "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -7211,9 +7469,9 @@
       }
     },
     "node_modules/ufo": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
-      "integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw=="
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
+      "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ=="
     },
     "node_modules/ultrahtml": {
       "version": "1.5.3",
@@ -7324,23 +7582,34 @@
       }
     },
     "node_modules/unimport": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.7.2.tgz",
-      "integrity": "sha512-91mxcZTadgXyj3lFWmrGT8GyoRHWuE5fqPOjg5RVtF6vj+OfM5G6WCzXjuYtSgELE5ggB34RY4oiCSEP8I3AHw==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.13.1.tgz",
+      "integrity": "sha512-nNrVzcs93yrZQOW77qnyOVHtb68LegvhYFwxFMfuuWScmwQmyVCG/NBuN8tYsaGzgQUVYv34E/af+Cc9u4og4A==",
       "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
-        "acorn": "^8.11.3",
+        "@rollup/pluginutils": "^5.1.2",
+        "acorn": "^8.12.1",
         "escape-string-regexp": "^5.0.0",
         "estree-walker": "^3.0.3",
         "fast-glob": "^3.3.2",
         "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.10",
-        "mlly": "^1.7.0",
+        "magic-string": "^0.30.11",
+        "mlly": "^1.7.1",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.1",
+        "pkg-types": "^1.2.0",
         "scule": "^1.3.0",
         "strip-literal": "^2.1.0",
-        "unplugin": "^1.10.1"
+        "unplugin": "^1.14.1"
+      }
+    },
+    "node_modules/unimport/node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
     "node_modules/universalify": {
@@ -7352,17 +7621,23 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.11.0.tgz",
-      "integrity": "sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
+      "integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
       "dependencies": {
-        "acorn": "^8.11.3",
-        "chokidar": "^3.6.0",
-        "webpack-sources": "^3.2.3",
-        "webpack-virtual-modules": "^0.6.1"
+        "acorn": "^8.12.1",
+        "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "webpack-sources": "^3"
+      },
+      "peerDependenciesMeta": {
+        "webpack-sources": {
+          "optional": true
+        }
       }
     },
     "node_modules/unplugin-vue-router": {
@@ -7393,6 +7668,17 @@
         }
       }
     },
+    "node_modules/unplugin/node_modules/acorn": {
+      "version": "8.12.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
+      "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/unstorage": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.10.2.tgz",
@@ -8057,14 +8343,16 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
       "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "optional": true,
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
     },
     "node_modules/webpack-virtual-modules": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
-      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="
     },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
diff --git a/package.json b/package.json
index 07fd9a0..e14ca31 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@pinia/nuxt": "^0.5.5",
     "axios": "^1.7.7",
     "node-fetch": "^3.3.2",
     "nuxt": "^3.12.3",
@@ -18,9 +19,11 @@
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
+    "@vueuse/core": "^11.1.0",
+    "@vueuse/nuxt": "^11.1.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
     "sass": "^1.77.6",
     "tailwindcss": "^3.4.4"
   }
-}
+}
\ No newline at end of file
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index 67c4ad4..643cca5 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -15,11 +15,11 @@
           {{ genre.name }}
         </li>
       </ul>
-      <!-- {{ film.vote_count }} -->
-      <!-- {{ film.release_date }} -->
       {{ film.vote_average }}
       {{ film.vote_count }}
     </span>
+    <CommentForm :filmId="film.id" />
+    <CommentList :filmId="film.id" />
   </section>
 </template>
 
diff --git a/stores/comment.ts b/stores/comment.ts
new file mode 100644
index 0000000..3b90e30
--- /dev/null
+++ b/stores/comment.ts
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import { useLocalStorage } from '@vueuse/core'
+
+export const useCommentStore = defineStore('comment', {
+  state: () => ({
+    comment: useLocalStorage('comment', [])
+  }),
+  hydrate(state, initialState) {
+    state.comment = useLocalStorage('comment', [])
+  },
+  actions: {
+    add(newComment) {
+      this.comment.push(newComment)
+      useLocalStorage('comment', this.comment)
+    },
+  },
+  getters: {
+    orderedComment: (state) => state.comment.sort((a, b) => b.added - a.added)
+  }
+})