diff --git a/src/components/castCard/castCard.tsx b/src/components/castCard/castCard.tsx
new file mode 100644
index 0000000..efbecc6
--- /dev/null
+++ b/src/components/castCard/castCard.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Image from 'next/image';
+
+interface ICastCard {
+  name: string;
+  character: string;
+  profile_path: string;
+}
+
+const CastCard: React.FC<ICastCard> = ({ name, character, profile_path }) => {
+  return (
+    <div className="flex flex-row items-center gap-2">
+      <Image
+        src={`https://image.tmdb.org/t/p/w500${profile_path}`}
+        alt={name}
+        width={100}
+        height={100}
+        className="rounded-xl"
+      />
+      <div className="flex flex-col">
+        <p className="font-semibold">{name}</p>
+        <p className="text-slate-300">{character}</p>
+      </div>
+    </div>
+  );
+};
+
+export default CastCard;
diff --git a/src/components/topCast/topCast.tsx b/src/components/topCast/topCast.tsx
new file mode 100644
index 0000000..01a7c80
--- /dev/null
+++ b/src/components/topCast/topCast.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Image from 'next/image';
+import { Cast } from '@/constant/detailMovie';
+import CastCard from '../castCard/castCard';
+
+interface ITopCast {
+  cast: Cast[];
+}
+
+const TopCast: React.FC<ITopCast> = ({ cast }) => {
+  return (
+    <div className="mx-28 flex flex-col items-center justify-center px-10 py-5 text-white">
+      <h1 className="text-3xl font-bold">Top Casts</h1>
+      <div className="mt-8 grid grid-cols-4 grid-rows-3 gap-4">
+        {cast.slice(0, 12).map((cast, index) => (
+          <CastCard
+            name={cast.name}
+            character={cast.character}
+            profile_path={cast.profile_path}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default TopCast;
diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
index 0ba792c..16d23e2 100644
--- a/src/modules/detailMovie/detailMovie.tsx
+++ b/src/modules/detailMovie/detailMovie.tsx
@@ -10,6 +10,7 @@ import Rating from '@/components/rating/rating';
 import Genres from '@/components/genres/genres';
 import YearRuntime from '@/components/yearRuntime/yearRuntime';
 import CrewList from '@/components/crewList/crewList';
+import TopCast from '@/components/topCast/topCast';
 
 interface IDetailMovieModule {
   id: string;
@@ -54,55 +55,32 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
           onLoad={() => setIsLoading(false)}
         />
 
-        {movie && (
-          <div className="absolute bottom-0 left-32 right-52 z-30 flex flex-row rounded-lg pb-8">
-            {/* poster */}
-            <Image
-              src={`https://image.tmdb.org/t/p/original${movie?.poster_path}`}
-              alt={movie?.title}
-              width={200}
-              height={500}
-              className="rounded-lg border border-slate-800 shadow-2xl drop-shadow-2xl"
-            />
+        <div className="absolute bottom-0 left-32 right-52 z-30 flex flex-row rounded-lg pb-8">
+          {/* poster */}
+          <Image
+            src={`https://image.tmdb.org/t/p/original${movie?.poster_path}`}
+            alt={movie?.title}
+            width={200}
+            height={500}
+            className="rounded-lg border border-slate-800 shadow-2xl drop-shadow-2xl"
+          />
 
-            <div className="ml-5 mt-3 flex max-h-[24rem] flex-col gap-3 overflow-hidden text-white">
-              <YearRuntime
-                release_date={movie.release_date}
-                runtime={movie.runtime}
-              />
-              <h1 className="text-3xl font-bold">{movie.title}</h1>
-              <p className="overflow-y-auto">{movie.overview}</p>
-              <Genres genres={movie.genres} />
-              <Rating rating={movie.vote_average} />
-            </div>
+          <div className="ml-5 mt-3 flex max-h-[24rem] flex-col gap-3 overflow-hidden text-white">
+            <YearRuntime
+              release_date={movie.release_date}
+              runtime={movie.runtime}
+            />
+            <h1 className="text-3xl font-bold">{movie.title}</h1>
+            <p className="overflow-y-auto">{movie.overview}</p>
+            <Genres genres={movie.genres} />
+            <Rating rating={movie.vote_average} />
           </div>
-        )}
+        </div>
       </div>
 
       <CrewList job="Director" crew={movie.credits.crew} />
       <CrewList job="Writer" crew={movie.credits.crew} />
-
-      {/* casts */}
-      <div className="flex flex-col items-center justify-center px-10 py-5 text-white">
-        <h1 className="text-3xl font-bold">Top Casts</h1>
-        <div className="mt-8 grid grid-cols-4 grid-rows-3 gap-4">
-          {movie.credits.cast.slice(0, 12).map((cast, index) => (
-            <div className="flex flex-row items-center gap-2">
-              <Image
-                src={`https://image.tmdb.org/t/p/w500${cast.profile_path}`}
-                alt={cast.name}
-                width={100}
-                height={100}
-                className="rounded-xl"
-              />
-              <div className="flex flex-col">
-                <p className="font-semibold">{cast.name}</p>
-                <p className="text-slate-300">{cast.character}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      <TopCast cast={movie.credits.cast} />
     </div>
   );
 };