diff --git a/src/components/Pagination.astro b/src/components/Pagination.astro
index fb64089..4cea6fc 100644
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@@ -12,31 +12,39 @@ const { currentPage, totalPages, prevUrl, nextUrl } = Astro.props;
 
 const prev = currentPage > 1 ? "" : "disabled";
 const next = currentPage < totalPages ? "" : "disabled";
+const isPrevDisabled = prev === "disabled";
+const isNextDisabled = next === "disabled";
 ---
 
 {
   totalPages > 1 && (
     <nav class="pagination-wrapper" aria-label="Pagination">
       <LinkButton
-        disabled={prev === "disabled"}
+        disabled={isPrevDisabled}
         href={prevUrl}
         className={`mr-4 select-none ${prev}`}
         ariaLabel="Previous"
       >
-        <svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class:list={[{ "disabled-svg": isPrevDisabled }]}
+        >
           <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
         </svg>
         Prev
       </LinkButton>
       {currentPage} / {totalPages}
       <LinkButton
-        disabled={next === "disabled"}
+        disabled={isNextDisabled}
         href={nextUrl}
         className={`ml-4 select-none ${next}`}
         ariaLabel="Next"
       >
         Next
-        <svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class:list={[{ "disabled-svg": isNextDisabled }]}
+        >
           <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
         </svg>
       </LinkButton>