diff --git a/frontend/public/images/noImage.png b/frontend/public/images/noImage.png
new file mode 100644
index 0000000..1de3f30
Binary files /dev/null and b/frontend/public/images/noImage.png differ
diff --git a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx
index 5948099..1e4de6a 100644
--- a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx
+++ b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx
@@ -5,7 +5,7 @@ export const DirectorWriters = styled.div`
   padding: 2rem;
   align-self: flex-end;
   font-size: var(--paragraph);
-  color: #0c3675;
+  color:var(--secondary-color-light);
   text-align: left;
   margin-top: 1rem;
 `;
diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx
index 6d1995f..974010e 100644
--- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx
+++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx
@@ -2,12 +2,14 @@ import { Link } from 'react-router-dom';
 
 import { Carousel } from 'react-responsive-carousel';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
+import defaultAvatar from '../../../../../../public/images/noImage.png';
 import {
   CastCard,
   CastName,
   CastChar,
   CastImg,
   arrowStyles,
+  HorizontalLine,
 } from './MovieCastCarouselStyles';
 
 const MovieCastCarousel = ({ movie }) => {
@@ -20,37 +22,41 @@ const MovieCastCarousel = ({ movie }) => {
   }
   return (
     <div>
+       <HorizontalLine/>
       <Carousel
         showArrows={true}
+        infiniteLoop={true}
         showThumbs={false}
         showStatus={false}
         showIndicators={false}
         renderArrowPrev={(onClickHandler, hasPrev, label) =>
-          hasPrev && (
+         
             <button
               type="button"
               onClick={onClickHandler}
               title={label}
-              style={{ ...arrowStyles, left: 15 }}
+              style={{ ...arrowStyles, left: 50 }}
             >
               &lt;
             </button>
-          )
+         
         }
         renderArrowNext={(onClickHandler, hasNext, label) =>
-          hasNext && (
+         
             <button
               type="button"
               onClick={onClickHandler}
               title={label}
-              style={{ ...arrowStyles, right: 15 }}
+              style={{ ...arrowStyles, right: 48 }}
             >
               &gt;
             </button>
-          )
+          
         }
       >
+        
         {chunks.map((chunk, index) => (
+
           <div key={index}>
             {chunk.map(element => (
               <div
@@ -58,10 +64,14 @@ const MovieCastCarousel = ({ movie }) => {
                 style={{ display: 'inline-block', margin: '2px' }}
               >
                 <Link to="">
+                 
                   <CastCard>
                     <CastImg
                       src={`${imageBaseURL}${element.image}`}
                       alt={element.name}
+                      onError={e => {
+                        e.target.src = defaultAvatar;
+                      }}
                     />
                     <CastName>{element.name}</CastName>
 
diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx
index f96b9fc..16e5084 100644
--- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx
+++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
 export const CastCard = styled.div`
-  margin-top: 3rem;
+  margin-top: 5rem;
   width: 160px;
   height: 330px;
-  background-color: #49bcec;
+  background-color:var(--secondary-color);
 
   border-radius: 20px;
-  margin-left: 10px;
+  margin-left: 8px;
   box-shadow: 0 8px 6px -6px grey;
   margin-bottom: 60px;
 `;
@@ -16,7 +16,7 @@ export const CastName = styled.h3`
   justify-content: left;
   font-size: 15px;
   margin-left: 10px;
-  color: black;
+  color:var(--primary-color);
   font-weight: bold;
   font-weight: 400;
 `;
@@ -25,7 +25,7 @@ export const CastChar = styled.p`
   justify-content: left;
   margin-left: 8px;
 
-  color: red;
+  color:var(--primary-color);
   font-size: 15px;
 `;
 export const CastImg = styled.img`
@@ -38,15 +38,23 @@ export const CastImg = styled.img`
 export const arrowStyles = {
   position: 'absolute',
   zIndex: 2,
-  top: 'calc(60% - 30px)',
+  top: 'calc(60% - 72px)',
 
   width: 30,
   height: 30,
   cursor: 'pointer',
-  background: '#49BCEC',
-  border: 'none',
-  color: '#7AD3F3',
+  background: 'var(--secondary-color-light)',
+    border: 'none',
+    color:  'var(--secondary-color-lightest)',
   borderRadius: '50%',
   fontSize: '30px',
   fontWeight: 'bold',
 };
+export const HorizontalLine = styled.hr`
+  border: 0;
+  height: 1px;
+  background:var(--secondary-color-light);
+  margin-top: 5rem; 
+  margin-left:0.5rem;
+  margin-right:0.5rem;
+`;
\ No newline at end of file
diff --git a/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx b/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx
index c27e6be..fd0e805 100644
--- a/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx
+++ b/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx
@@ -6,7 +6,7 @@ const Reviews = ({ movie }) => {
   return (
   <>
   
-  {reviews && ( <ReviewsCarousel reviews={reviews} />)};
+  {reviews && ( <ReviewsCarousel reviews={reviews} />)}
   </>
     
     );
diff --git a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx
index 85f902a..d56565d 100644
--- a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx
+++ b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import  { useState } from 'react';
 import { Carousel } from 'react-responsive-carousel';
 import 'react-responsive-carousel/lib/styles/carousel.min.css';
 import './reviews.css';
@@ -23,14 +23,14 @@ const ReviewsCarousel = ({ reviews }) => {
     position: 'absolute',
     zIndex: 2,
 
-    top: '50% ',
+    top: '45% ',
 
     width: 30,
     height: 30,
     cursor: 'pointer',
-    background: '#49BCEC',
+    background: 'var(--secondary-color-light)',
     border: 'none',
-    color: '#7AD3F3',
+    color:  'var(--secondary-color-lightest)',
     borderRadius: '50%',
     fontSize: '30px',
     fontWeight: 'bold',
@@ -39,32 +39,33 @@ const ReviewsCarousel = ({ reviews }) => {
   return (
     <Carousel
       showArrows={true}
+      infiniteLoop={true}
       showThumbs={false}
       showStatus={false}
       showIndicators={false}
-      renderArrowPrev={(onClickHandler, hasPrev, label) =>
-        hasPrev && (
+      renderArrowPrev={(onClickHandler, label) =>
+       
           <button
             type="button"
             onClick={onClickHandler}
             title={label}
-            style={{ ...arrowStyles, left: 18 }}
+            style={{ ...arrowStyles, left: 105}}
           >
             &lt;
           </button>
-        )
+        
       }
-      renderArrowNext={(onClickHandler, hasNext, label) =>
-        hasNext && (
+      renderArrowNext={(onClickHandler, label) =>
+       
           <button
             type="button"
             onClick={onClickHandler}
             title={label}
-            style={{ ...arrowStyles, right: 18 }}
+            style={{ ...arrowStyles, right: 100}}
           >
             &gt;
           </button>
-        )
+        
       }
     >
       {reviews.map((review, index) => (
@@ -73,7 +74,7 @@ const ReviewsCarousel = ({ reviews }) => {
           <p>
             {renderReviewContent(review.content, index)}
             {review.content.split(' ').length > 50 && (
-              <button onClick={() => toggleExpand(index)} className="show-more">
+              <button onClick={() => toggleExpand(index)} className="show-more"  >
                 {expandedReviewIndex === index ? 'Show Less' : 'Show More'}
               </button>
             )}
diff --git a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css
index 7f0a1ee..54941c6 100644
--- a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css
+++ b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css
@@ -1,20 +1,20 @@
 .carousel-slide-2 {
-  margin-left: 2rem;
+  margin-left: 8rem;
   margin-right: 2rem;
   margin-top: 2rem;
   padding-left: 2rem;
   text-align: left;
   position: relative;
   min-height: 100px;
-  color: #2a6496;
+  color:var(--secondary-color-light);
   font-size: 15px;
   font-weight: 400;
   width: 80%;
 }
 .carousel-slide-2 p {
   margin-left: 50px;
-  border-left: 2px solid #49bcec;
-  border-right: 2px solid #49bcec;
+  border-left: 2px solid var(--secondary-color-light);
+  border-right: 2px solid var(--secondary-color-light);
   padding-left: 20px;
   padding-right: 20px;
   @media screen and (max-width: 500px) {
@@ -23,8 +23,9 @@
   }
 }
 .show-more {
+  cursor:pointer;
   background: none;
   border: none;
-  color: #195b97;
+  color:var(--primary-color);
   font-weight: bold;
 }
diff --git a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx
index 72f33ae..4110a02 100644
--- a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx
+++ b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx
@@ -20,6 +20,13 @@ const TrailerWidget = ({ movie }) => {
   const openModal = () => setIsOpen(true);
   const closeModal = () => setIsOpen(false);
 
+  const correctTrailerUrl = (url) => {
+    const urlParts = url.split('watch?v==');
+    if (urlParts.length === 2) {
+      return `https://www.youtube.com/embed/${urlParts[1]}`;
+    }
+    return url; 
+  };
   return (
     <>
       <WidgetContainer backgroundImage={movie.poster} onClick={openModal}>
@@ -97,7 +104,7 @@ const TrailerWidget = ({ movie }) => {
             {movie.trailers.map((trailer, index) => (
               <StyledCarouselDiv key={index}>
                 <StyledIframe
-                  src={`https://www.youtube.com/embed/${trailer.key}`}
+                   src={correctTrailerUrl(trailer)}
                   allowFullScreen
                 ></StyledIframe>
               </StyledCarouselDiv>
diff --git a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx
index 78dc61b..84e6f1f 100644
--- a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx
+++ b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx
@@ -9,9 +9,9 @@ export const WidgetContainer = styled.div`
   background-size: contain;
   background-repeat: no-repeat;
   width: 25rem;
-  height: 25rem;
+  height: 30rem;
   top: 50%;
-  left: 83%;
+  left: 85%;
 
   z-index: 1;
   transition: transform 0.5s ease;
diff --git a/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx b/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx
index c653528..94e1574 100644
--- a/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx
+++ b/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx
@@ -48,17 +48,17 @@ const MovieDetails = ({ movie }) => {
     
    {movie.ratings && ( 
       <RatingRow>
-    {movie.ratings.imdb && (  <RatingPair>
+    {movie.ratings.imdb && !isNaN(parseFloat(movie.ratings.imdb)) &&(  <RatingPair>
           <LogoImage src={imdbIcon} alt="IMDb" />
           <RatingText>{movie.ratings.imdb}</RatingText>
         </RatingPair>)}
 
-      {movie.ratings.tmdb && (  <RatingPair>
+      {movie.ratings.tmdb && !isNaN(parseFloat(movie.ratings.tmbd)) && (  <RatingPair>
           <LogoImage src={redTomatoesIcon} alt="Rotten Tomatoes" />
           <RatingText>{movie.ratings.tmdb}</RatingText>
         </RatingPair>)}
 
-       {movie.ratings.metaCritic && ( <RatingPair>
+       {movie.ratings.metaCritic && !isNaN(parseFloat(movie.ratings.metaCritic)) &&( <RatingPair>
           <LogoImage src={metaIcon} alt="Metacritic" />
           <RatingText>{movie.ratings.metaCritic}</RatingText>
         </RatingPair>)}
diff --git a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx
index eb0efb9..15c4561 100644
--- a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx
+++ b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx
@@ -5,10 +5,10 @@ export const DetailContainer = styled.div`
   background: rgba(0, 0, 0, 0.5);
   text-align: center;
   height: fit-content;
-  margin-top: 1rem;
+  margin-top: 2.5em;
   border-radius: 8px;
   padding: 2rem 4rem;
-  color: #69bada;
+  color: var(--primary-color);
   @media screen and (max-width: 500px) {
     padding: 2rem 4rem;
     width: 100vw;
diff --git a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx
index 3c28271..864cecd 100644
--- a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx
+++ b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx
@@ -8,7 +8,7 @@ export const TagPlotContainer = styled.div`
   padding: 2rem;
   align-self: flex-start;
   font-size: var(--paragraph);
-  color: #0c3675;
+  color:var(--secondary-color-light);
   text-align: left;
 
   @media screen and (max-width: 500px) {
diff --git a/frontend/src/pages/moviePage/MoviePage.jsx b/frontend/src/pages/moviePage/MoviePage.jsx
index c587ff4..ee2726e 100644
--- a/frontend/src/pages/moviePage/MoviePage.jsx
+++ b/frontend/src/pages/moviePage/MoviePage.jsx
@@ -36,8 +36,8 @@ const MoviePage = () => {
     <div>
       {Movie && (
         <PageContainer>
-          <TrailerWidget movie={Movie} />
-          <MovieContainer>
+         <TrailerWidget movie={Movie} />  
+          <MovieContainer >
             <OverlayContainer poster={Movie.backdrop}>
               <MovieDetails movie={Movie} />
             </OverlayContainer>
diff --git a/frontend/src/pages/moviePage/MoviePageStyles.jsx b/frontend/src/pages/moviePage/MoviePageStyles.jsx
index 5f0c608..23be48f 100644
--- a/frontend/src/pages/moviePage/MoviePageStyles.jsx
+++ b/frontend/src/pages/moviePage/MoviePageStyles.jsx
@@ -1,8 +1,9 @@
 import styled from 'styled-components';
 export const PageContainer = styled.div`
-  padding: 0vw 10vw;
+  padding: 0vw 14vw;
   overflow: hidden;
-  background: linear-gradient(to right, #141e30, #456181);
+  background-color:var(--secondary-color);
+  /* background: linear-gradient(to right, #141e30, #456181); */
   @media screen and (max-width: 1200px) {
     padding: 0 10vw;
   }
@@ -12,8 +13,8 @@ export const PageContainer = styled.div`
 `;
 
 export const MovieContainer = styled.div`
-  position: relative;
-  background-color: #79d3f3;
+  padding-top:4vw;
+  background-color:var(--primary-color);
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
 
   @media only screen and (max-width: 500px) {
@@ -47,8 +48,8 @@ export const OverlayContainer = styled.div`
       props.poster
         ? `url(https://image.tmdb.org/t/p/w1280/${props.poster})`
         : null};
-    background-size: cover;
-    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-repeat:cover;
     background-position: center;
   }
 `;