diff --git a/public/play-button.png b/public/play-button.png
new file mode 100644
index 0000000..b46f038
Binary files /dev/null and b/public/play-button.png differ
diff --git a/src/App.css b/src/App.css
index d9deba6..214f685 100644
--- a/src/App.css
+++ b/src/App.css
@@ -100,11 +100,12 @@ header nav ul li {
 .movie h2 {
   font-size: 15px;
   margin: 0.5rem 0;
+  color: white;
 }
 
 .movie p {
   font-size: 14px;
-  color: #555;
+  color: #c1bdbd;
 }
 
 .movie button {
diff --git a/src/components/MovieList.js b/src/components/MovieList.js
index 9de3f35..4806e0d 100644
--- a/src/components/MovieList.js
+++ b/src/components/MovieList.js
@@ -62,7 +62,15 @@ function MovieList({ searchTerm }) {
   ); 
 
   return (
-    <div className="movie-list mt-20">
+    <div className='flex flex-col bg-slate-700 justify-center my-24'>
+      <div className='flex justify-start gap-3 w-[40%] ml-8 mt-8 p-2'>
+        <img src='/play-button.png' className='w-16 h-16 '></img>
+        <div className='w-72 p-1 text-left'>
+          <h3 className='text-md font-semibold tracking-widest text-white'>PREMIERE</h3>
+          <p className='text-sm text-zinc-300'>Watch new movies at home ,every Friday</p>
+        </div>
+      </div>
+      <div className="movie-list">
       {filteredMovies.map((movie, index) => (
         <Movie
           key={index}
@@ -75,6 +83,7 @@ function MovieList({ searchTerm }) {
         />
       ))}
     </div>
+    </div>
   );
 }