5 files changed, 26 insertions, 43 deletions
diff --git a/src/app/movies/components/popular.jsx b/src/app/movies/components/popular.jsx
index d2d5e36..3ef0501 100644
--- a/src/app/movies/components/popular.jsx
+++ b/src/app/movies/components/popular.jsx
@@ -10,7 +10,7 @@ export default async function POPULAR_MOVIES() {
 
 	return (
 		<main className={styles.Main}>
-			<h1>Popular Movies</h1>
+			<h2>Popular Movies</h2>
 			<section className={styles.MovieContainer}>
 				{data &&
 					data.results &&
@@ -23,21 +23,12 @@ export default async function POPULAR_MOVIES() {
 							}}
 							key={index}
 						>
-							<div
-								style={{
-									borderRadius: "0.5rem",
-									overflow: "hidden",
-									backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.backdrop_path})`,
-									backgroundRepeat: "no-repeat",
-									backgroundSize: "cover",
-								}}
-								className={styles.MovieEntryPrev}
-							>
+							<div className={styles.MovieEntryPrev}>
 								<div className={styles.MovieEntry}>
 									<Image
 										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
-										width={167}
-										height={247}
+										width={180}
+										height={300}
 										alt="Movie Poster"
 										priority
 									></Image>
diff --git a/src/app/movies/components/search.jsx b/src/app/movies/components/search.jsx
index 6514b76..dca163a 100644
--- a/src/app/movies/components/search.jsx
+++ b/src/app/movies/components/search.jsx
@@ -19,7 +19,7 @@ export default function SEARCH_COMPONENT() {
 				<FaSearch
 					color="white"
 					className={styles.SearchIcon}
-					size={17}
+					size={22}
 				/>
 				<input
 					placeholder="Enter movie title here"
diff --git a/src/app/movies/components/trending.jsx b/src/app/movies/components/trending.jsx
index 5436dfa..8e20ba1 100644
--- a/src/app/movies/components/trending.jsx
+++ b/src/app/movies/components/trending.jsx
@@ -10,7 +10,7 @@ export default async function TREDNING_MOVIES() {
 
 	return (
 		<main className={styles.Main}>
-			<h1>Trending Movies</h1>
+			<h2>Trending Movies</h2>
 			<section className={styles.MovieContainer}>
 				{data &&
 					data.results &&
@@ -23,21 +23,12 @@ export default async function TREDNING_MOVIES() {
 							}}
 							key={index}
 						>
-							<div
-								style={{
-									borderRadius: "0.5rem",
-									overflow: "hidden",
-									backgroundImage: `url(https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.backdrop_path})`,
-									backgroundRepeat: "no-repeat",
-									backgroundSize: "cover",
-								}}
-								className={styles.MovieEntryPrev}
-							>
+							<div className={styles.MovieEntryPrev}>
 								<div className={styles.MovieEntry}>
 									<Image
 										src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=https://image.tmdb.org/t/p/original${item.poster_path}`}
-										width={167}
-										height={247}
+										width={180}
+										height={300}
 										alt="Movie Poster"
 									></Image>
 									<p>{item.title}</p>
diff --git a/src/app/movies/styles/pop_trend.module.css b/src/app/movies/styles/pop_trend.module.css
index 2e9ebd9..362debd 100644
--- a/src/app/movies/styles/pop_trend.module.css
+++ b/src/app/movies/styles/pop_trend.module.css
@@ -4,22 +4,16 @@
 	margin-right: 0.2rem;
 }
 
-.Main h1 {
-	margin: 0 0 0.5rem 0;
-	text-align: center;
-	color: transparent;
-	background: linear-gradient(90deg,
-			var(--neon-green) 40%,
-			var(--light-green) 60%,
-			var(--neon-yellow) 80%,
-			var(--soft-purple) 100%);
-	background-size: 60% 50%;
-	background-clip: text;
+.Main h2 {
+	color: white;
+	margin: 0.4rem 0 0 0;
+	text-transform: uppercase;
+	font-size: 30px;
 }
 
 .MovieContainer {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 	grid-gap: 0.5rem;
 	align-items: center;
 }
@@ -34,11 +28,12 @@
 
 .MovieContainer:hover .MovieEntryPrev:hover {
 	opacity: 1;
-	scale: 1.015;
+	transform: translateY(-5px) scale(1.02);
+	
 }
 
 .MovieEntryPrev {
-	transition: opacity 200ms ease, scale 200ms ease;
+	transition: opacity 200ms ease, transform 200ms ease;
 }
 
 .MovieEntry {
@@ -51,6 +46,8 @@
 	flex-direction: column;
 	cursor: pointer;
 	backdrop-filter: blur(10px);
+	border-radius: 0.5rem;
+	overflow: hidden;
 }
 
 .MovieEntry img {
@@ -58,6 +55,7 @@
 	box-shadow: 0px 0px 10px 8px rgb(32, 32, 32);
 }
 
+
 .MovieEntry p {
 	width: 160px;
 	overflow: hidden;
diff --git a/src/app/movies/styles/search.module.css b/src/app/movies/styles/search.module.css
index ea81e3f..d3b1a75 100644
--- a/src/app/movies/styles/search.module.css
+++ b/src/app/movies/styles/search.module.css
@@ -5,10 +5,12 @@
 .InputContainer {
 	display: flex;
 	align-items: center;
-	background-color: #121212;
-	/* padding: 0.2rem; */
+	background-color: #1f1f1f;
+	padding: 0.4rem;
 	width: 40vw;
 	border-radius: 0.5rem;
+
+
 }
 
 .SearchIcon {
@@ -25,6 +27,7 @@
 	font-size: large;
 	color: white;
 	width: 100%;
+	font-size: 20px;
 }
 
 /* Search Results */