diff --git a/frontend/src/helperComponents/Anime.svelte b/frontend/src/helperComponents/Anime.svelte
index c55576d..bc2c6da 100644
--- a/frontend/src/helperComponents/Anime.svelte
+++ b/frontend/src/helperComponents/Anime.svelte
@@ -484,7 +484,9 @@
                 }
               }}
               disabled={currentAniListAnime.data.MediaList.progress <= 0}
-              class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+              class={currentAniListAnime.data.MediaList.progress <= 0
+                ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
             >
               <svg
                 class="w-3 h-3 text-white"
@@ -552,7 +554,17 @@
                     currentAniListAnime.data.MediaList.media.nextAiringEpisode
                       .episode -
                       2)}
-              class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+              class={(currentAniListAnime.data.MediaList.media.episodes > 0 &&
+                currentAniListAnime.data.MediaList.progress >=
+                  currentAniListAnime.data.MediaList.media.episodes) ||
+              (currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                .episode > 0 &&
+                currentAniListAnime.data.MediaList.progress >
+                  currentAniListAnime.data.MediaList.media.nextAiringEpisode
+                    .episode -
+                    2)
+                ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+                : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
             >
               <svg
                 class="w-3 h-3 text-white"
diff --git a/frontend/src/helperComponents/Pagination.svelte b/frontend/src/helperComponents/Pagination.svelte
index 326c3e1..0acaf50 100644
--- a/frontend/src/helperComponents/Pagination.svelte
+++ b/frontend/src/helperComponents/Pagination.svelte
@@ -157,7 +157,9 @@
           type="button"
           id="decrement-button"
           on:click={() => ChangeWatchListPage(page - 1)}
-          class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+          class={page <= 1
+            ? "border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
           disabled={page <= 1}
         >
           <svg
@@ -195,7 +197,9 @@
           type="button"
           id="increment-button"
           on:click={() => ChangeWatchListPage(page + 1)}
-          class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+          class={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage
+            ? "border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+            : "bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"}
           disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
         >
           <svg
@@ -218,4 +222,3 @@
     </div>
   </div>
 </div>
-