diff --git a/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx b/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
index 82ce98fdb..b4899ea1d 100644
--- a/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdateDetailPageLoader.tsx
@@ -22,13 +22,16 @@ import { UpdateDetailPageSkeleton } from "./UpdateDetailPageSkeleton";
 
 export default function UpdateDetailPageLoader() {
   const { updateId } = useParams<{ updateId: string }>();
-  const [queryRef, loadQuery] = useQueryLoader<UpdateDetailPageQuery>(updateDetailPageQuery);
+  const [queryRef, loadQuery, disposeQuery] = useQueryLoader<UpdateDetailPageQuery>(updateDetailPageQuery);
 
+  // Dispose on updateId change so navigating between updates shows the skeleton
+  // during the transition instead of the previous update's content.
   useEffect(() => {
     if (updateId) {
       loadQuery({ updateId });
     }
-  }, [loadQuery, updateId]);
+    return () => disposeQuery();
+  }, [loadQuery, disposeQuery, updateId]);
 
   if (!queryRef) {
     return <UpdateDetailPageSkeleton />;
diff --git a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
index 7e98df5cc..c21eef5ce 100644
--- a/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
+++ b/apps/compliance-portal/src/pages/updates/UpdatesPageSkeleton.tsx
@@ -19,8 +19,7 @@ import { ComplianceArticleItemSkeleton } from "#/components/ComplianceArticleIte
 import { HeaderBand } from "#/components/HeaderBand/HeaderBand";
 
 import { updatesList } from "./_components/variants";
-
-const ROW_COUNT = 10;
+import { UPDATES_PAGE_SIZE } from "./_lib/constants";
 
 export function UpdatesPageSkeleton() {
   const { card, rows } = updatesList();
@@ -36,7 +35,7 @@ export function UpdatesPageSkeleton() {
         <div className="flex w-full max-w-5xl flex-col gap-8">
           <div className={card()} aria-hidden>
             <div className={rows()}>
-              {Array.from({ length: ROW_COUNT }, (_, index) => (
+              {Array.from({ length: UPDATES_PAGE_SIZE }, (_, index) => (
                 <ComplianceArticleItemSkeleton key={index} />
               ))}
             </div>
diff --git a/packages/ui/src/v2/Pagination/Pagination.tsx b/packages/ui/src/v2/Pagination/Pagination.tsx
index ea1c1605d..b7545834a 100644
--- a/packages/ui/src/v2/Pagination/Pagination.tsx
+++ b/packages/ui/src/v2/Pagination/Pagination.tsx
@@ -71,7 +71,7 @@ export function Pagination(props: PaginationProps) {
         variant="ghost"
         color="neutral"
         size={2}
-        iconStart={<CaretRightIcon />}
+        iconEnd={<CaretRightIcon />}
         aria-label={nextLabel}
         className={hasNext ? undefined : "invisible"}
         onClick={onNext}
diff --git a/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx b/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
index 1bb47bc38..86fafd20b 100644
--- a/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
+++ b/packages/ui/src/v2/Pagination/PaginationSkeleton.tsx
@@ -12,14 +12,19 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.
 
+import type { ComponentProps } from "react";
+
 import { pagination } from "./variants";
 
+export type PaginationSkeletonProps = Omit<ComponentProps<"div">, "children">;
+
 // Loading placeholder paired with Pagination: two pulse arrow blocks.
-export function PaginationSkeleton() {
+export function PaginationSkeleton(props: PaginationSkeletonProps) {
+  const { className, ...rest } = props;
   const { root, buttonPlaceholder } = pagination();
 
   return (
-    <div className={root()} aria-hidden>
+    <div className={root({ className })} {...rest} aria-hidden>
       <div className={buttonPlaceholder()} />
       <div className={buttonPlaceholder()} />
     </div>