diff --git a/src/pages/home/movies/[id].astro b/src/pages/home/movies/[id].astro
index 5a54344..c653df5 100644
--- a/src/pages/home/movies/[id].astro
+++ b/src/pages/home/movies/[id].astro
@@ -1,7 +1,6 @@
 ---
-import { FaEye } from "react-icons/fa";
 import HomeLayout from "../../../layouts/HomeLayout.astro";
-import type { Movie } from "../../../types";
+import type { Movie, MovieDetail } from "../../../types";
 
 const jwt = Astro.cookies.get("jwt")?.value as string;
 const { id } = Astro.params;
@@ -14,17 +13,17 @@ const res = await fetch(`${import.meta.env.API_URL}/movies/${id}`, {
 	},
 });
 
-const movie = (await res.json()).movie as Movie;
+const item = (await res.json()).movie as MovieDetail;
 ---
 
-<HomeLayout title={movie.title}>
+<HomeLayout title={item.movie.title}>
 	<>
-		<h1>{movie.title}</h1>
+		<h1>{item.movie.title}</h1>
 		<div class="card">
 			<div
 				class="card-body"
 				style={{
-					background: `linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(${movie.backdrop_path})`,
+					background: `linear-gradient(to left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url(${item.movie.backdrop_path})`,
 					backgroundPosition: "center",
 					backgroundSize: "cover",
 					minHeight: "512px",
@@ -32,12 +31,12 @@ const movie = (await res.json()).movie as Movie;
 			>
 				<div class="row" style={{ height: "512px" }}>
 					<div class="col align-self-center">
-						<p>{movie.overview}</p>
+						<p>{item.movie.overview}</p>
 					</div>
 					<div class="col align-self-center">
 						<div class="d-grid">
 							<a
-								href={`/home/movies/${movie.id}`}
+								href={`/home/movies/${item.movie.id}`}
 								class="btn btn-primary"
 							>
 								Watch
@@ -47,7 +46,7 @@ const movie = (await res.json()).movie as Movie;
 
 						<div class="d-grid">
 							<a
-								href={`/home/movies/${movie.id}`}
+								href={`/home/movies/${item.movie.id}`}
 								class="btn btn-secondary"
 							>
 								Share