diff --git a/public/css/filmList.css b/public/css/filmList.css
index 64daea74dbf1841732072c73d1563fcded693e36..90b6f2a502703e62784d2adbc3cc18b8dbb434c0 100644
--- a/public/css/filmList.css
+++ b/public/css/filmList.css
@@ -6,12 +6,17 @@
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
-    border-radius: 32px;
-    background: var(--neutral-grey-base, #404650);
 }
 
 .search-filter {
     display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+#search-input {
+    border-radius: 32px;
+    margin-top: 0;
 }
 
 .film-page-container {
@@ -26,6 +31,9 @@
 .sort-filter {
     display: flex;
     gap: 12px;
+    align-items: center;
+    margin-right: 2%;
+
 }
 
 .film-card-container {
@@ -67,4 +75,46 @@
     line-height: normal;
     flex: 1 0 0;
     padding: 12px;
+}
+
+#pagination-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.page-number {
+    font-style: normal;
+    font-weight: bold;
+    font-size: large;
+    font-family: Poppins, sans-serif;
+    color: white;
+    border-color: #5360DC;
+    border-style: solid;
+    border-radius: 4px;
+    border: 1px solid #5360DC;
+    padding: 11px 18px 11px 18px;
+    margin-right: 5px;
+    text-decoration: none;
+}
+
+
+.page-number.active {
+    font-style: normal;
+    font-weight: bold;
+    font-size: large;
+    font-family: Poppins, sans-serif;
+    color: white;
+    background-color: #5360DC;
+    border-radius: 4px;
+    padding: 11px 18px 11px 18px;
+    text-decoration: none;
+
+}
+
+.header {
+    display: flex;
+    justify-content: center;
+    font-weight: bold;
+    padding: 2% 0 0 0;
 }
\ No newline at end of file
diff --git a/public/js/filmList.js b/public/js/filmList.js
index d54e89d45b73f33d664b96014faed35ade0dc475..cea5a9ef7db656f0b7e09000b5ef7f13d5dfe13d 100644
--- a/public/js/filmList.js
+++ b/public/js/filmList.js
@@ -39,11 +39,12 @@ function generatePaginationLinks() {
 
   for (let i = 1; i <= totalPageCount; i++) {
     const pageLink = document.createElement("a");
+    pageLink.setAttribute("class", "page-number");
     pageLink.textContent = i;
     pageLink.href = `?page=${i}`;
     pageLink.classList.add("page-number");
     if (i === currentPage) {
-      pageLink.classList.add("active");
+      pageLink.setAttribute("class", "page-number active");
     }
     pageLink.addEventListener("click", (e) => {
       e.preventDefault();
@@ -61,11 +62,12 @@ function updateFilmCards(films) {
   film_cards.innerHTML = films
     .map(
       (film) => `
+      <a href='/film-details?film_id=${film.film_id}'>
         <div class='film-card'>
-            <a href='/film-details?film_id=${film.film_id}'>
             <div class='film-image' style="background-image: url('public/${film.image_path}');"></div>
             <div class='film-title'>${film.title}</div>
         </div>
+      </a>
     `
     )
     .join("");
diff --git a/src/repositories/FilmRepository.php b/src/repositories/FilmRepository.php
index 2b8fb7f0a023d85895523c1b13c96cb93362539d..578361e84b293b784b2cb0962ac987b1840bcb3e 100644
--- a/src/repositories/FilmRepository.php
+++ b/src/repositories/FilmRepository.php
@@ -37,7 +37,7 @@ class FilmRepository extends BaseRepository
     $released_year = 'all',
     $pageNo = 1,
     $limit = 10,
-    $isInitialSync = "no"
+    $isInitialSync = "yes"
   ) {
     $where = [];
 
@@ -52,7 +52,6 @@ class FilmRepository extends BaseRepository
     }
 
     $data = $this->findAll($where, $order, $pageNo, $limit, $isDesc, $isInitialSync);
-    error_log(count($data));
 
     return $this->findAll($where, $order, $pageNo, $limit, $isDesc, $isInitialSync);
   }
diff --git a/views/films.php b/views/films.php
index 59d37cb5f73e67481d524586ab3acbf9beae9303..a31dde1cc7f51610cd8bad1d6433bd5a40d14639 100644
--- a/views/films.php
+++ b/views/films.php
@@ -1,3 +1,6 @@
+<div class='header'>
+    <h1>Film List</h1>
+</div>
 <div class="film-page-container">
     <div class="search-filter">
         <div class="search-bar" id="search-bar">
@@ -36,7 +39,14 @@
                 }
                 ?>
             </select>
+
+
         </div>
+        <?
+        if (isset($_SESSION['role']) && $_SESSION['role'] == 'admin') {
+            echo "<a href='/add-film'><button class='button'>add film</button></a>";
+        }
+        ?>
     </div>
 
 
@@ -45,12 +55,15 @@
         <?php
         if (isset($data['films'])) {
             foreach ($data['films'] as $film) {
-                echo "<div class='film-card'>
-                    <a href='/film-details?film_id=$film->film_id'>
+                echo "
+                <a href='/film-details?film_id=$film->film_id'>
+                <div class='film-card'>
+                    
                     <div class='film-image' style='background-image: url(public/$film->image_path);'></div>
                     <div class='film-title'> $film->title </div>
-                    </a>
-                </div>";
+                    
+                </div>
+                </a>";
             }
         }
         ?>