diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index e5ee49a..0ffd0c0 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -4,7 +4,7 @@ import { AiFillLinkedin, AiFillGithub, AiFillRocket } from 'react-icons/ai';
 
 function Footer() {
   return (
-    <div className="min-h-100 py-8 text-center bg-transparent">
+    <div className="h-[300px] py-8 text-center flex flex-col justify-center items-center bg-transparent">
       <p
         className="text-md
       "
diff --git a/frontend/src/components/MediaCard.jsx b/frontend/src/components/MediaCard.jsx
index c870231..12605b2 100644
--- a/frontend/src/components/MediaCard.jsx
+++ b/frontend/src/components/MediaCard.jsx
@@ -56,7 +56,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             </picture>
           </div>
         </div>
-        <div className="max-w-[1000px] mx-auto">
+        <div className="max-w-[1100px] mx-auto">
           <div className="top-container relative pt-24 px-4">
             <div className="media-heading w-full flex flex-col justify-center content-center md:flex-row">
               <div className="media-image mx-auto">
@@ -170,7 +170,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                 <span className="font-bold ">Overview: </span>
                 {mediaArr.overview ? mediaArr.overview : 'No overview found'}
               </div>
-              <div className="side-info-container flex flex-row justify-evenly items-center md:flex-col md:justify-center min-w-[250px] md:w-full my-8 bg-slate-900 rounded-2xl font-thin w-full p-2 md:py-0">
+              <div className="side-info-container flex flex-row justify-evenly items-center md:flex-col md:justify-center min-w-[250px] md:max-w-[350px] md:w-full my-8 bg-slate-900 rounded-2xl font-thin w-full p-2 md:py-0">
                 <div className="user-rating max-w-[140px] mx-auto flex justify-around items-center py-4">
                   <ReviewBar vote={mediaArr.vote_average} />
                   <h2>User Rating</h2>
@@ -196,7 +196,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             <div className="mid-container my-2 w-full md:flex md:justify-between">
               <div className="credits-container text-center md:w-full">
                 {/* Media cast */}
-                <h2 className="text-start font-bold mb-2">Casting</h2>
+                <h2 className="text-start pb-4 text-2xl font-bold">Casting</h2>
                 {credits.length === 0 ? (
                   <div className="h-[250px] w-full flex justify-center items-center">
                     <h2> No Cast Members</h2>
@@ -236,7 +236,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                             srcSet={`${credit.profile_path === null ? NOIMAGE : POSTER_IMG + credit.profile_path}.jpeg`}
                           />
                           <img
-                            className="object-cover mx-auto w-[161px] h-[250px]"
+                            className="object-cover mx-auto w-full h-[250px]"
                             loading="lazy"
                             srcSet={`
                           ${credit.profile_path === null ? NOIMAGE : POSTER_IMG + credit.profile_path}.jpg?width=100 100w,
@@ -274,7 +274,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
             {/* Media suggest */}
             <div className="bottom-container w-full md:flex my-8 border-t-[.001px] py-8 border-gray-100">
               <div className="suggestion-container text-center w-full">
-                <h2 className="text-start font-bold mb-2">Suggestions</h2>
+                <h2 className="text-start pb-4 text-2xl font-bold">Suggestions</h2>
                 {suggested.length === 0 ? (
                   <div className="h-[200px] flex justify-center items-center">
                     <h2> No Suggested Movies</h2>
@@ -314,7 +314,7 @@ function MediaCard({ mediaArr, genres, media, credits, suggested, addMedia, trai
                               srcSet={`${media.backdrop_path === null ? NOIMAGE : BACKDROP_IMG + media.backdrop_path}.jpeg`}
                             />
                             <img
-                              className="object-cover w-[230px] h-[200px]"
+                              className="object-cover w-full h-[200px]"
                               loading="lazy"
                               srcSet={`
                           ${media.backdrop_path === null ? NOIMAGE : BACKDROP_IMG + media.backdrop_path}.jpg?width=100 100w,
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index 87f7ebc..f7e19b9 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from 'react-router-dom';
 import { AiOutlineClose, AiOutlineMenu, AiOutlineKey } from 'react-icons/ai';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import SearchBar from './home components/SearchBar';
+import SearchBar from '../components/SearchBar';
 import { useSelector, useDispatch } from 'react-redux';
 import { logout } from '../features/auth/authSlice';
 
@@ -76,10 +76,7 @@ function Navbar() {
             >
               Home
             </li>
-            <li
-              className="p-4 text-white font-semibold cursor-pointer group block"
-              onClick={() => navigate('/')}
-            >
+            <li className="p-4 text-white font-semibold cursor-pointer group block">
               Movies
               <div
                 className="dropdown-movie hidden group-hover:block relative"
@@ -116,10 +113,7 @@ function Navbar() {
                 </ul>
               </div>
             </li>
-            <li
-              className="p-4 text-white font-semibold cursor-pointer group block"
-              onClick={() => navigate('/')}
-            >
+            <li className="p-4 text-white font-semibold cursor-pointer group block">
               TV
               <div
                 className="dropdown-tv  hidden group-hover:block relative"
diff --git a/frontend/src/components/home components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
similarity index 95%
rename from frontend/src/components/home components/SearchBar.jsx
rename to frontend/src/components/SearchBar.jsx
index f513feb..0b76729 100644
--- a/frontend/src/components/home components/SearchBar.jsx	
+++ b/frontend/src/components/SearchBar.jsx
@@ -33,7 +33,7 @@ function SearchBar({ handleSearch, handleSearchRoute }) {
 
   return (
     <div
-      className="z-40 search-bar h-screen absolute top-0 left-0 w-full opacity-[85%] bg-black"
+      className="z-40 search-bar h-screen absolute top-0 left-0 w-full opacity-[95%] bg-black"
       data-test="searchbar"
     >
       <div
@@ -70,7 +70,8 @@ function SearchBar({ handleSearch, handleSearchRoute }) {
         <ul className="movie-container max-h-[400px] overflow-y-scroll">
           {movieData.map((data) => (
             <li
-              className="card-container bg-gray-900 border-t border-gray-500 items-center hover:bg-gray-800 opacity-[80%]"
+              key={data.id}
+              className="card-container bg-gray-900 border-t border-gray-500 items-center hover:bg-gray-800 opacity-[95%]"
               onClick={() => handleSearchRoute(`/${typeParam}/${data.id}`)}
             >
               <div className="title p-1">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 75c0f44..ffe6b37 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,12 +5,21 @@
 html {
   -webkit-tap-highlight-color: transparent;
 }
-
+.swiper-button-next {
+  background-color: white;
+  opacity: 70%;
+  border-radius: 100%;
+}
+.swiper-button-prev {
+  background-color: white;
+  opacity: 70%;
+  border-radius: 100%;
+}
 .swiper-button-next::after {
-  font-size: 40px !important;
-  color: white;
+  font-size: 30px !important;
+  color: black;
 }
 .swiper-button-prev::after {
-  font-size: 40px !important;
-  color: white;
+  font-size: 30px !important;
+  color: black;
 }
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index dfc95e4..6d55d1a 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Header from '../components/home components/Header';
-import NowPlaying from '../components/home components/NowPlaying';
-import TrendingMovieCarousel from '../components/home components/TrendingMovieCarousel';
-import TrendingTvCarousel from '../components/home components/TrendingTvCarousel';
-import ScifiMovieCarousel from '../components/home components/ScifiMovieCarousel';
-import FamilyMovieCarousel from '../components/home components/FamilyMovieCarousel';
+import Header from '../views/Header';
+import NowPlaying from '../views/NowPlaying';
+import TrendingMovieCarousel from '../views/TrendingMovieCarousel';
+import TrendingTvCarousel from '../views/TrendingTvCarousel';
+import ScifiMovieCarousel from '../views/ScifiMovieCarousel';
+import FamilyMovieCarousel from '../views/FamilyMovieCarousel';
 
 function MovieHome() {
   return (
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 45dd74a..569e96f 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -16,7 +16,6 @@ function LogIn() {
     email: '',
     password: '',
   });
-  const [showPassword, setShowPassword] = useState(false);
   const { email, password } = form;
 
   // Updates data if any fields are changed.
@@ -64,25 +63,21 @@ function LogIn() {
             value={email}
             onChange={handleChange}
             placeholder="Email"
+            autoComplete="email"
             className="p-1.5"
             required
           />
           <input
             data-test="pwd-input"
-            type={showPassword ? 'text' : 'password'}
+            type="password"
             name="password"
             value={password}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="current-password"
             className="p-1.5"
             required
           />
-          <button
-            className="text-gray-400 p-2 right-0 absolute"
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button>
           <input data-test="submit-button" type="submit" className="p-1.5 bg-red-700 text-white" />
         </form>
         <button
diff --git a/frontend/src/pages/MovieHome.jsx b/frontend/src/pages/MovieHome.jsx
index 507c173..eaea7d9 100644
--- a/frontend/src/pages/MovieHome.jsx
+++ b/frontend/src/pages/MovieHome.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useParams, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import MovieAndTvSkeleton from './MovieAndTvSkeleton';
+import MovieAndTvSkeleton from './skeletons/MovieAndTvSkeleton';
 
 const MovieHome = () => {
   const [moviesArr, setMoviesArr] = useState([]);
diff --git a/frontend/src/pages/MoviePage.jsx b/frontend/src/pages/MoviePage.jsx
index aaf9e02..987363d 100644
--- a/frontend/src/pages/MoviePage.jsx
+++ b/frontend/src/pages/MoviePage.jsx
@@ -8,7 +8,7 @@ import 'swiper/css';
 import 'swiper/css/free-mode';
 import Spinner from '../components/Spinner';
 import MediaCard from '../components/MediaCard';
-import MediaSkeleton from '../components/MediaSkeleton';
+import MediaSkeleton from '../views/skeletons/MediaSkeleton';
 
 function MoviePage() {
   const dispatch = useDispatch();
diff --git a/frontend/src/pages/SignUp.jsx b/frontend/src/pages/SignUp.jsx
index 83f140d..8bb32e1 100644
--- a/frontend/src/pages/SignUp.jsx
+++ b/frontend/src/pages/SignUp.jsx
@@ -87,6 +87,7 @@ function SignUp() {
             value={username}
             onChange={handleChange}
             placeholder="Username"
+            autoComplete="username"
             className="p-1.5"
             required
           />
@@ -97,6 +98,7 @@ function SignUp() {
             value={email}
             onChange={handleChange}
             placeholder="Email"
+            autoComplete="email"
             className="p-1.5"
             required
           />
@@ -107,6 +109,7 @@ function SignUp() {
             value={password}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="new-password"
             className="p-1.5"
             required
           />
@@ -117,23 +120,10 @@ function SignUp() {
             value={confirmPassword}
             onChange={handleChange}
             placeholder="Password"
+            autoComplete="new-password"
             className="p-1.5"
             required
           />
-          {/* <button
-
-            className='text-gray-400 p-2 right-0 absolute'
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button>
-
-          <button
-            className='text-gray-400 p-2 right-0 bottom-12 absolute'
-            onClick={() => setShowPassword(!showPassword)}
-          >
-            Show
-          </button> */}
           <input data-test="submit-button" type="submit" className="p-1.5 bg-red-700 text-white" />
         </form>
         <button
diff --git a/frontend/src/pages/TvHome.jsx b/frontend/src/pages/TvHome.jsx
index dd69f41..924110a 100644
--- a/frontend/src/pages/TvHome.jsx
+++ b/frontend/src/pages/TvHome.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useParams, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import MovieAndTvSkeleton from './MovieAndTvSkeleton';
+import MovieAndTvSkeleton from './skeletons/MovieAndTvSkeleton';
 
 const TvHome = () => {
   const [tvShowArr, setTvShowArr] = useState([]);
diff --git a/frontend/src/pages/TvPage.jsx b/frontend/src/pages/TvPage.jsx
index 0b3e6df..d1d9fe9 100644
--- a/frontend/src/pages/TvPage.jsx
+++ b/frontend/src/pages/TvPage.jsx
@@ -7,7 +7,7 @@ import { toast } from 'react-toastify';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import MediaCard from '../components/MediaCard';
-import MediaSkeleton from '../components/MediaSkeleton';
+import MediaSkeleton from '../views/skeletons/MediaSkeleton';
 
 function TvPage() {
   const dispatch = useDispatch();
diff --git a/frontend/src/pages/Watchlist.jsx b/frontend/src/pages/Watchlist.jsx
index 74d57bd..8a12df0 100644
--- a/frontend/src/pages/Watchlist.jsx
+++ b/frontend/src/pages/Watchlist.jsx
@@ -3,8 +3,8 @@ import { useSelector, useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { getWatchlists } from '../features/watchlist/watchlistSlice';
 import { logout } from '../features/auth/authSlice';
-import EmptyWatchlist from '../components/EmptyWatchlist';
-import WatchlistMovies from '../components/WatchlistMovies';
+import EmptyWatchlist from '../views/WatchlistMovies';
+import WatchlistMovies from '../views/EmptyWatchlist';
 
 function Watchlist() {
   // Pull user/isLoading from state
diff --git a/frontend/src/pages/MovieAndTvSkeleton.jsx b/frontend/src/pages/skeletons/MovieAndTvSkeleton.jsx
similarity index 100%
rename from frontend/src/pages/MovieAndTvSkeleton.jsx
rename to frontend/src/pages/skeletons/MovieAndTvSkeleton.jsx
diff --git a/frontend/src/components/EmptyWatchlist.jsx b/frontend/src/views/EmptyWatchlist.jsx
similarity index 100%
rename from frontend/src/components/EmptyWatchlist.jsx
rename to frontend/src/views/EmptyWatchlist.jsx
diff --git a/frontend/src/components/home components/FamilyMovieCarousel.jsx b/frontend/src/views/FamilyMovieCarousel.jsx
similarity index 81%
rename from frontend/src/components/home components/FamilyMovieCarousel.jsx
rename to frontend/src/views/FamilyMovieCarousel.jsx
index 965ff97..e2761e9 100644
--- a/frontend/src/components/home components/FamilyMovieCarousel.jsx	
+++ b/frontend/src/views/FamilyMovieCarousel.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import { ReviewBarABS } from '../../util/utils';
+import { ReviewBarABS } from '../util/utils';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper';
-import CardSkeleton from './CardSkeleton';
+import CardSkeleton from './skeletons/CardSkeleton';
 
 function FamilyMovieCarousel() {
   const API_KEY = process.env.REACT_APP_TMDB_KEY;
@@ -42,8 +42,8 @@ function FamilyMovieCarousel() {
   };
 
   return (
-    <div className="trending-container h-[338px] py-5">
-      <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
+    <div className="trending-container mx-auto max-w-[1200px] h-[338px] p-6">
+      <h1 className="pb-4 text-2xl font-bold">Family Movies</h1>
       {/* Swiper configuration settings for carousel */}
       <div className="">
         {loading ? (
@@ -51,34 +51,22 @@ function FamilyMovieCarousel() {
         ) : (
           <Swiper
             slidesPerView={2}
-            spaceBetween={15}
+            spaceBetween={10}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
             breakpoints={{
               510: {
                 slidesPerView: 3,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
               768: {
                 slidesPerView: 4,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
-              1024: {
+              900: {
                 slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1300: {
-                slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1500: {
-                slidesPerView: 8,
-                spaceBetween: 20,
-              },
-              2000: {
-                slidesPerView: 10,
-                spaceBetween: 25,
+                spaceBetween: 10,
               },
             }}
           >
@@ -86,7 +74,7 @@ function FamilyMovieCarousel() {
               {trendingFamilyData.map(({ id, poster_path, original_title, vote_average }) => (
                 <SwiperSlide key={id}>
                   <Link to={`/movie/${id}`}>
-                    <picture>
+                    <picture className="group block">
                       <source
                         type="image/webp"
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.webp`}
@@ -96,7 +84,7 @@ function FamilyMovieCarousel() {
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.jpeg`}
                       />
                       <img
-                        className="object-cover w-[167px] h-[250px]"
+                        className="object-cover w-full h-[250px]"
                         loading="lazy"
                         fetchpriority="low"
                         srcSet={`
@@ -110,6 +98,9 @@ function FamilyMovieCarousel() {
                             : `${original_title} image`
                         }`}
                       />
+                      <div className="absolute hidden inset-0 group-hover:flex items-center justify-center cursor-pointer bg-slate-800/90">
+                        <p className="font-semibold text-xl text-center px-2">{original_title}</p>
+                      </div>
                     </picture>
 
                     <ReviewBarABS vote={vote_average} />
diff --git a/frontend/src/components/home components/Header.jsx b/frontend/src/views/Header.jsx
similarity index 70%
rename from frontend/src/components/home components/Header.jsx
rename to frontend/src/views/Header.jsx
index 7f3f5eb..928d5a0 100644
--- a/frontend/src/components/home components/Header.jsx	
+++ b/frontend/src/views/Header.jsx
@@ -5,8 +5,8 @@ import { FreeMode } from 'swiper';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import { useSelector, useDispatch } from 'react-redux';
-import { getWatchlists } from '../../features/watchlist/watchlistSlice';
-import EmptyWatchlist from '../EmptyWatchlist';
+import { getWatchlists } from '../features/watchlist/watchlistSlice';
+import EmptyWatchlist from '../views/EmptyWatchlist';
 
 function Header() {
   const { user } = useSelector((state) => state.auth);
@@ -76,23 +76,24 @@ function Header() {
           )}
         </div>
       ) : (
-        <div className="title p-5 text-center h-[400px]">
-          <h1 className="my-2 text-6xl font-bold uppercase text-red-700">Welcome</h1>
-          <h2 className="my-2 text-xl uppercase">Grab some popcorn and</h2>
-          <h3 className="my-2 text-xl uppercase">
-            <span className="text-4xl uppercase text-red-700 font-semibold">Browse</span>
-            through your favorite movies and shows
-          </h3>
-          <h2 className="my-2 text-xl uppercase">
-            Create your own
-            <span className="text-4xl uppercase text-red-700 font-semibold">Watchlist</span>
-          </h2>
-          <button
-            className="p-3 my-2 border-2 border-red-700 hover:bg-red-700 uppercase"
-            onClick={() => navigate('/users/signup')}
-          >
-            Sign up
-          </button>
+        <div className="title relative text-center h-[400px] max-w-[1200px] mx-auto overflow-hidden">
+          <img
+            className="absolute top-0 h-[300px] object-cover object-center w-full blur-[2px] opacity-80"
+            src="https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt=""
+          />
+          <div className="absolute top-[5%] my-2 text-center right-0 left-0">
+            <h2 className="text-3xl lg:text-6xl font-bold">Your Ticket to the Best Films!</h2>
+            <p className="text-lg md:text-xl lg:text-3xl">Join Our Exclusive Movie Watchlist</p>
+          </div>
+          <div className="absolute bottom-[5%] left-0 right-0">
+            <button
+              className=" p-3 my-2 bg-red-700 hover:bg-red-700/80 uppercase"
+              onClick={() => navigate('/users/signup')}
+            >
+              Sign up
+            </button>
+          </div>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/home components/NowPlaying.jsx b/frontend/src/views/NowPlaying.jsx
similarity index 98%
rename from frontend/src/components/home components/NowPlaying.jsx
rename to frontend/src/views/NowPlaying.jsx
index 06399e9..bf5e83c 100644
--- a/frontend/src/components/home components/NowPlaying.jsx	
+++ b/frontend/src/views/NowPlaying.jsx
@@ -6,7 +6,7 @@ import 'swiper/css';
 import 'swiper/css/scrollbar';
 import 'swiper/css/effect-fade';
 import { EffectFade, Autoplay, Scrollbar } from 'swiper';
-import HeroSkeleton from './HeroSkeleton';
+import HeroSkeleton from './skeletons/HeroSkeleton';
 
 function NowPlaying() {
   const API_NOW_PLAYING_URL = 'https://api.themoviedb.org/3/movie/now_playing';
diff --git a/frontend/src/components/home components/ScifiMovieCarousel.jsx b/frontend/src/views/ScifiMovieCarousel.jsx
similarity index 81%
rename from frontend/src/components/home components/ScifiMovieCarousel.jsx
rename to frontend/src/views/ScifiMovieCarousel.jsx
index bfc37f6..0e8726b 100644
--- a/frontend/src/components/home components/ScifiMovieCarousel.jsx	
+++ b/frontend/src/views/ScifiMovieCarousel.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import { ReviewBarABS } from '../../util/utils';
+import { ReviewBarABS } from '../util/utils';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper';
-import CardSkeleton from './CardSkeleton';
+import CardSkeleton from './skeletons/CardSkeleton';
 
 function ScifiMovieCarousel() {
   const API_KEY = process.env.REACT_APP_TMDB_KEY;
@@ -43,8 +43,8 @@ function ScifiMovieCarousel() {
   };
 
   return (
-    <div className="trending-container h-[338px] py-5">
-      <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
+    <div className="trending-container mx-auto max-w-[1200px] h-[338px] p-6">
+      <h1 className="pb-4 text-2xl font-bold">SciFi Movies</h1>
       <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
@@ -52,34 +52,22 @@ function ScifiMovieCarousel() {
         ) : (
           <Swiper
             slidesPerView={2}
-            spaceBetween={15}
+            spaceBetween={10}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
             breakpoints={{
               510: {
                 slidesPerView: 3,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
               768: {
                 slidesPerView: 4,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
-              1024: {
+              900: {
                 slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1300: {
-                slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1500: {
-                slidesPerView: 8,
-                spaceBetween: 20,
-              },
-              2000: {
-                slidesPerView: 10,
-                spaceBetween: 25,
+                spaceBetween: 10,
               },
             }}
           >
@@ -87,7 +75,7 @@ function ScifiMovieCarousel() {
               {trendingScifiData.map(({ id, poster_path, original_title, vote_average }) => (
                 <SwiperSlide key={id}>
                   <Link to={`/movie/${id}`}>
-                    <picture>
+                    <picture className="group block">
                       <source
                         type="image/webp"
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.webp`}
@@ -97,7 +85,7 @@ function ScifiMovieCarousel() {
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.jpeg`}
                       />
                       <img
-                        className="object-cover w-[167px] h-[250px]"
+                        className="object-cover w-full h-[250px]"
                         loading="lazy"
                         fetchpriority="low"
                         srcSet={`
@@ -111,6 +99,9 @@ function ScifiMovieCarousel() {
                             : `${original_title} image`
                         }`}
                       />
+                      <div className="absolute hidden inset-0 group-hover:flex items-center justify-center cursor-pointer bg-slate-800/90">
+                        <p className="font-semibold text-xl text-center px-2">{original_title}</p>
+                      </div>
                     </picture>
 
                     <ReviewBarABS vote={vote_average} />
diff --git a/frontend/src/components/home components/TrendingMovieCarousel.jsx b/frontend/src/views/TrendingMovieCarousel.jsx
similarity index 81%
rename from frontend/src/components/home components/TrendingMovieCarousel.jsx
rename to frontend/src/views/TrendingMovieCarousel.jsx
index 7e20461..206b4d1 100644
--- a/frontend/src/components/home components/TrendingMovieCarousel.jsx	
+++ b/frontend/src/views/TrendingMovieCarousel.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
-import { ReviewBarABS } from '../../util/utils';
+import { ReviewBarABS } from '../util/utils';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper';
-import CardSkeleton from './CardSkeleton';
+import CardSkeleton from './skeletons/CardSkeleton';
 
 function TrendingMovieCarousel() {
   const API_KEY = process.env.REACT_APP_TMDB_KEY;
@@ -41,8 +41,8 @@ function TrendingMovieCarousel() {
   };
 
   return (
-    <div className="trending-container h-[338px] py-5">
-      <h1 className="pb-4 text-2xl">{'Trending Movies'}</h1>
+    <div className="trending-container mx-auto max-w-[1200px] h-[338px] p-6">
+      <h1 className="pb-4 text-2xl font-bold">Trending Movies</h1>
       <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
@@ -50,34 +50,22 @@ function TrendingMovieCarousel() {
         ) : (
           <Swiper
             slidesPerView={2}
-            spaceBetween={15}
+            spaceBetween={10}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
             breakpoints={{
               510: {
                 slidesPerView: 3,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
               768: {
                 slidesPerView: 4,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
-              1024: {
+              900: {
                 slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1300: {
-                slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1500: {
-                slidesPerView: 8,
-                spaceBetween: 20,
-              },
-              2000: {
-                slidesPerView: 10,
-                spaceBetween: 25,
+                spaceBetween: 10,
               },
             }}
           >
@@ -85,7 +73,7 @@ function TrendingMovieCarousel() {
               {trendingMovieData.map(({ id, poster_path, original_title, vote_average }) => (
                 <SwiperSlide key={id}>
                   <Link to={`/movie/${id}`}>
-                    <picture>
+                    <picture className="group block">
                       <source
                         type="image/webp"
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.webp`}
@@ -95,7 +83,7 @@ function TrendingMovieCarousel() {
                         srcSet={`${poster_path === null ? NOIMAGE : API_IMG + poster_path}.jpeg`}
                       />
                       <img
-                        className="object-cover w-[167px] h-[250px]"
+                        className="object-cover w-full h-[250px]"
                         loading="lazy"
                         fetchpriority="low"
                         srcSet={`
@@ -109,6 +97,9 @@ function TrendingMovieCarousel() {
                             : `${original_title} image`
                         }`}
                       />
+                      <div className="absolute hidden inset-0 group-hover:flex items-center justify-center cursor-pointer bg-slate-800/90">
+                        <p className="font-semibold text-xl text-center px-2">{original_title}</p>
+                      </div>
                     </picture>
 
                     <ReviewBarABS vote={vote_average} />
diff --git a/frontend/src/components/home components/TrendingTvCarousel.jsx b/frontend/src/views/TrendingTvCarousel.jsx
similarity index 76%
rename from frontend/src/components/home components/TrendingTvCarousel.jsx
rename to frontend/src/views/TrendingTvCarousel.jsx
index 349c21c..d45f22e 100644
--- a/frontend/src/components/home components/TrendingTvCarousel.jsx	
+++ b/frontend/src/views/TrendingTvCarousel.jsx
@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { ReviewBarABS } from '../../util/utils';
+import { ReviewBarABS } from '../util/utils';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import axios from 'axios';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import { Navigation } from 'swiper';
-import CardSkeleton from './CardSkeleton';
+import CardSkeleton from './skeletons/CardSkeleton';
 
 function TrendingTvCarousel() {
   const API_KEY = process.env.REACT_APP_TMDB_KEY;
@@ -41,8 +41,8 @@ function TrendingTvCarousel() {
   };
 
   return (
-    <div className="trending-container h-[338px]">
-      <h1 className="pb-4 text-2xl">Trending Shows</h1>
+    <div className="trending-container mx-auto max-w-[1200px] p-6 h-[338px]">
+      <h1 className="pb-4 text-2xl font-bold">Trending Shows</h1>
       <div className="">
         {/* Swiper configuration settings for carousel */}
         {loading ? (
@@ -50,42 +50,30 @@ function TrendingTvCarousel() {
         ) : (
           <Swiper
             slidesPerView={2}
-            spaceBetween={15}
+            spaceBetween={10}
             navigation={true}
             modules={[Navigation]}
             className="mySwiper"
             breakpoints={{
               510: {
                 slidesPerView: 3,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
               768: {
                 slidesPerView: 4,
-                spaceBetween: 15,
+                spaceBetween: 10,
               },
-              1024: {
+              900: {
                 slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1300: {
-                slidesPerView: 6,
-                spaceBetween: 20,
-              },
-              1500: {
-                slidesPerView: 8,
-                spaceBetween: 20,
-              },
-              2000: {
-                slidesPerView: 10,
-                spaceBetween: 25,
+                spaceBetween: 10,
               },
             }}
           >
             <div className="relative md:overflow-x-auto">
-              {trendingTvData.map(({ id, poster_path, title, vote_average }) => (
+              {trendingTvData.map(({ id, poster_path, original_name, vote_average }) => (
                 <SwiperSlide key={id}>
                   <Link to={`tv/${id}`}>
-                    <picture>
+                    <picture className="group block">
                       <source
                         type="image/webp"
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.webp`}
@@ -95,7 +83,7 @@ function TrendingTvCarousel() {
                         srcSet={`${poster_path == null ? NOIMAGE : API_IMG + poster_path}.jpeg`}
                       />
                       <img
-                        className="object-cover w-[1] h-[250px]"
+                        className="object-cover w-full h-[250px]"
                         loading="lazy"
                         fetchpriority="low"
                         srcSet={`
@@ -103,8 +91,11 @@ function TrendingTvCarousel() {
                   ${poster_path == null ? NOIMAGE : API_IMG + poster_path}.jpg?width=200 200w`}
                         src={`
               ${poster_path == null ? NOIMAGE : API_IMG + poster_path}`}
-                        alt={`${title === undefined ? 'No title image' : `${title} image`}`}
+                        alt={`${original_name === undefined ? 'No title image' : `${original_name} image`}`}
                       />
+                      <div className="absolute hidden inset-0 group-hover:flex items-center justify-center cursor-pointer bg-slate-800/90">
+                        <p className="font-semibold text-xl text-center px-2">{original_name}</p>
+                      </div>
                     </picture>
                     <ReviewBarABS vote={vote_average} />
                   </Link>
diff --git a/frontend/src/components/WatchlistMovies.jsx b/frontend/src/views/WatchlistMovies.jsx
similarity index 100%
rename from frontend/src/components/WatchlistMovies.jsx
rename to frontend/src/views/WatchlistMovies.jsx
diff --git a/frontend/src/components/home components/CardSkeleton.jsx b/frontend/src/views/skeletons/CardSkeleton.jsx
similarity index 100%
rename from frontend/src/components/home components/CardSkeleton.jsx
rename to frontend/src/views/skeletons/CardSkeleton.jsx
diff --git a/frontend/src/components/home components/HeroSkeleton.jsx b/frontend/src/views/skeletons/HeroSkeleton.jsx
similarity index 100%
rename from frontend/src/components/home components/HeroSkeleton.jsx
rename to frontend/src/views/skeletons/HeroSkeleton.jsx
diff --git a/frontend/src/components/MediaSkeleton.jsx b/frontend/src/views/skeletons/MediaSkeleton.jsx
similarity index 100%
rename from frontend/src/components/MediaSkeleton.jsx
rename to frontend/src/views/skeletons/MediaSkeleton.jsx