Some more improvements

src/pages/Actor.jsx

@@ -41,7 +41,9 @@ const Actor = () => {
             )
             const data = await response.json()
             setCredits(
-                data.cast.map((movie) => ({
+                data.cast
+                    .filter((movie) => movie.poster_path)
+                    .map((movie) => ({
                         id: movie.id,
                         overview: movie.overview,
                         adult: movie.adult,
@@ -67,28 +69,40 @@ const Actor = () => {
             <TopBar />
             <div className={styles.Container}>
                 <div className={styles.Top}>
+                    <img
+                        src={`https://image.tmdb.org/t/p/w300${images?.profiles[0]?.file_path}`}
+                        alt={`Image of ${actor?.name}`}
+                        className={styles.Thumb}
+                    />
+                    <div className={styles.Right}>
                         <h1 className={styles.Name}>{actor?.name}</h1>
                         <div className={styles.Section}>
-                        <h2>Biography</h2>
+                            <h1>Biography</h1>
                             <div>
                                 {actor?.biography ? (
                                     <a
                                         href="#"
                                         className={styles.Collapse}
                                         onClick={() =>
-                                        setCollapsed((collapsed) => !collapsed)
+                                            setCollapsed(
+                                                (collapsed) => !collapsed
+                                            )
                                         }
                                     >
                                         <p
                                             className={`${
-                                            collapsed ? styles.Collapsed : ""
+                                                collapsed
+                                                    ? styles.Collapsed
+                                                    : ""
                                             } ${styles.Biography}`}
                                         >
                                             {actor.biography}
                                         </p>
 
                                         <p className={styles.ReadMore}>
-                                        {collapsed ? "Read More" : "Read Less"}
+                                            {collapsed
+                                                ? "Read More"
+                                                : "Read Less"}
                                         </p>
                                     </a>
                                 ) : (
@@ -97,9 +111,9 @@ const Actor = () => {
                             </div>
                         </div>
                     </div>
-
+                </div>
                 <div className={styles.Section}>
-                    <h2>Movies</h2>
+                    <h1>Movies</h1>
                     <div className={styles.Credits}>
                         {credits?.map((movie) => (
                             <Link
@@ -108,13 +122,13 @@ const Actor = () => {
                                 className={styles.Movie}
                             >
                                 <img src={movie.posterUrl} />
-                                <span>{movie.title}</span>
+                                <h3>{movie.title}</h3>
                             </Link>
                         ))}
                     </div>
                 </div>
                 <div className={styles.Section}>
-                    <h2>Images</h2>
+                    <h1>Images</h1>
                     <div className={styles.Images}>
                         {images?.profiles.map((image) => (
                             <img

src/pages/Movie.jsx

@@ -79,11 +79,10 @@ const Movie = () => {
                                 width="30"
                                 height="30"
                                 fill="currentColor"
-                                class="bi bi-chevron-down"
                                 viewBox="0 0 16 16"
                             >
                                 <path
-                                    fill-rule="evenodd"
+                                    fillRule="evenodd"
                                     d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
                                 />
                             </svg>

src/styles/Actor.module.css

@@ -5,8 +5,18 @@
     color: white;
 }
 
+.Top {
+    display: flex;
+    gap: 20px;
+}
+
+.Thumb {
+    height: 450px;
+}
+
 .Name {
     margin-top: 10px;
+    font-size: 3em;
 }
 
 .Biography {
@@ -29,8 +39,10 @@
     height: 100%;
 }
 
-.Section div {
-    margin-left: 10px;
+.Right {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .Collapsed {