diff --git a/README.md b/README.md
index 8cedaed..88fd97c 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,7 @@ Additionally, if you want to extend your project you might want read the code in
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/10/files
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/11/files
 - https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/12/files
+- https://github.com/jorgecortesdev/cf-3-myFlix-client/pull/13/files
 
 #### Branches
 
diff --git a/src/components/Cards/MiniMovieCard/MiniMovieCard.jsx b/src/components/Cards/MiniMovieCard/MiniMovieCard.jsx
index e8077b8..f25ad52 100644
--- a/src/components/Cards/MiniMovieCard/MiniMovieCard.jsx
+++ b/src/components/Cards/MiniMovieCard/MiniMovieCard.jsx
@@ -7,7 +7,8 @@ import { moviePropTypes } from '../../../propTypes';
 
 import './MiniMovieCard.scss';
 
-// TODO: add the movie length to the API and implement it here.
+import { toHoursAndMinutes } from '../../../utils/movies';
+
 export const MiniMovieCard = ({ movie }) => {
   return (
     <div className="movie-information">
@@ -28,7 +29,7 @@ export const MiniMovieCard = ({ movie }) => {
             <div>
               <span className="movie-details__rating">{movie.MPA}</span>
               <ul className="movie-details__list">
-                <li>1h 56m</li>
+                <li>{toHoursAndMinutes(movie.Runtime)}</li>
                 <li>{movie.ReleaseYear}</li>
               </ul>
             </div>
diff --git a/src/pages/HomePage/HomePage.jsx b/src/pages/HomePage/HomePage.jsx
index 9d18239..89a6627 100644
--- a/src/pages/HomePage/HomePage.jsx
+++ b/src/pages/HomePage/HomePage.jsx
@@ -43,6 +43,7 @@ export const HomePage = () => {
             Genre: movie.Genre,
             Director: movie.Director,
             Actors: movie.Actors,
+            Runtime: movie.Runtime,
           };
         });
 
diff --git a/src/pages/MoviePage/MoviePage.jsx b/src/pages/MoviePage/MoviePage.jsx
index 6a66b21..b36c4fa 100644
--- a/src/pages/MoviePage/MoviePage.jsx
+++ b/src/pages/MoviePage/MoviePage.jsx
@@ -9,6 +9,8 @@ import { MoviesSlider } from '../../components/MoviesSlider';
 import { GenreBadge } from '../../components/Badges';
 import { DirectorLink, ActorLink } from '../../components/Links';
 
+import { toHoursAndMinutes } from '../../utils/movies';
+
 export const MoviePage = () => {
   const { movieId } = useParams();
 
@@ -31,8 +33,9 @@ export const MoviePage = () => {
             <h1 className="mb-0">{movie.Title}</h1>
             <div className="d-flex justify-content-between align-items-end">
               <div className="d-flex gap-2 align-items-center">
-                <span className="fs-6 text-body-secondary">{movie.ReleaseYear}</span>&bull;
-                <span className="fs-6 text-body-secondary">{movie.MPA}</span>
+                <span className="fs-6 text-body-secondary">{movie.MPA}</span>&bull;
+                <span className="fs-6 text-body-secondary">{toHoursAndMinutes(movie.Runtime)}</span>&bull;
+                <span className="fs-6 text-body-secondary">{movie.ReleaseYear}</span>
               </div>
               <GenreBadge genre={movie.Genre} />
             </div>
diff --git a/src/propTypes.js b/src/propTypes.js
index b360acf..aa0315a 100644
--- a/src/propTypes.js
+++ b/src/propTypes.js
@@ -30,4 +30,5 @@ export const moviePropTypes = PropTypes.shape({
   Genre: genrePropTypes.isRequired,
   Director: directorPropTypes.isRequired,
   Actors: PropTypes.arrayOf(actorPropTypes),
+  Runtime: PropTypes.number.isRequired,
 });
diff --git a/src/utils/movies.js b/src/utils/movies.js
new file mode 100644
index 0000000..6842f3c
--- /dev/null
+++ b/src/utils/movies.js
@@ -0,0 +1,5 @@
+export const toHoursAndMinutes = (totalMinutes) => {
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
+};