diff --git a/components/list.vue b/components/list.vue
index 3a3d288..712d4a3 100644
--- a/components/list.vue
+++ b/components/list.vue
@@ -10,14 +10,15 @@
           {{ films.length }}
         </b>
       </nav>
-      <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + 'id'"
+      <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + film.id"
         class="hover:bg-slate-200 w-full p-4 flex-col border-b-2 border-GREY-100">
-        <img :src="imgUrl + film.poster_path" alt="">
+        <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
         <span class="flex flex-row">
           {{ film.title }}
           {{ film.original_title }}
           {{ film.vote_count }}
           {{ film.release_date }}
+          {{ film.id }}
         </span>
       </NuxtLink>
     </div>
@@ -25,8 +26,7 @@
 </template>
 
 <script setup lang="ts">
-const imgUrl = 'https://media.themoviedb.org/t/p/w220_and_h330_face/'
-
+const config = useRuntimeConfig()
 const terms = ref('')
 const films = ref([])
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 326fae5..fd14b82 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -17,5 +17,10 @@ export default defineNuxtConfig({
     }
   },
 
-  compatibilityDate: '2024-07-10'
+  runtimeConfig: {
+    API_BEARER: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2MmVmZmYzYWU2YWYyNWQ0NTY4OGY3OTkxYjgyNmNhOCIsIm5iZiI6MTcyODA1NTIwMy4wNzcyNywic3ViIjoiNjcwMDA2ZjQ5ZWJlYTE5MDA2ZjgxZmJhIiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.XuH-_0UggmULCgQQajKc-QsmlRYW2rqSenyhguE6wRU',
+    public: {
+      IMG_BASE_URL: 'https://media.themoviedb.org/t/p/w220_and_h330_face/',
+    }
+  },
 })
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index e241c69..2b4076e 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -1,12 +1,25 @@
 <template>
   <section>
-    {{ filmId }}
+    <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
+    <span class="flex flex-row">
+      {{ film.title }}
+      {{ film.original_title }}
+      {{ film.vote_count }}
+      {{ film.release_date }}
+      {{ film.id }}
+    </span>
   </section>
 </template>
 
 <script setup lang="ts">
+const config = useRuntimeConfig()
+const film = ref()
 const route = useRoute()
 const filmId = ref('')
-
 filmId.value = route.params.id
+
+if (filmId.value !== '') {
+  const { data } = await useFetch(`/api/details/${filmId.value}`)
+  film.value = data.value
+}
 </script>
diff --git a/server/api/details/[id].ts b/server/api/details/[id].ts
new file mode 100644
index 0000000..f0db726
--- /dev/null
+++ b/server/api/details/[id].ts
@@ -0,0 +1,13 @@
+import fetch from 'node-fetch'
+
+export default eventHandler(async (req) => {
+  const id = req.context.params?.id || ''
+  const url = `https://api.themoviedb.org/3/movie/${id}`
+  const config = useRuntimeConfig(req)
+
+  const response = await fetch(url, {
+    method: 'get',
+    headers: { 'Content-Type': 'application/json', 'Authorization': config.API_BEARER }
+  })
+  return await response.json()
+})