diff --git a/apps/cyberstorm-remix/app/commonComponents/PaginatedDependencies/PaginatedDependencies.tsx b/apps/cyberstorm-remix/app/commonComponents/PaginatedDependencies/PaginatedDependencies.tsx
index bf2c2008e..9b9d409cb 100644
--- a/apps/cyberstorm-remix/app/commonComponents/PaginatedDependencies/PaginatedDependencies.tsx
+++ b/apps/cyberstorm-remix/app/commonComponents/PaginatedDependencies/PaginatedDependencies.tsx
@@ -1,175 +1,69 @@
-import { memo, Suspense, useEffect, useMemo, useRef, useState } from "react";
 import "./PaginatedDependencies.css";
-import { Heading, NewPagination, SkeletonBox } from "@thunderstore/cyberstorm";
+import { Heading, NewPagination } from "@thunderstore/cyberstorm";
 import { ListingDependency } from "../ListingDependency/ListingDependency";
-import { Await, useNavigationType, useSearchParams } from "react-router";
-import { useDebounce } from "use-debounce";
-import type { getPackageVersionDetails } from "@thunderstore/dapper-ts/src/methods/packageVersion";
-import type { getPackageVersionDependencies } from "@thunderstore/dapper-ts/src/methods/package";
-import { setParamsBlobValue } from "cyberstorm/utils/searchParamsUtils";
+import { useSearchParams } from "react-router";
+import { type PackageVersionDependency } from "@thunderstore/thunderstore-api";
+
+interface DependencyResponse {
+  results: PackageVersionDependency[];
+  count: number;
+}
 
 interface Props {
-  version:
-    | Awaited<ReturnType<typeof getPackageVersionDetails>>
-    | ReturnType<typeof getPackageVersionDetails>;
-  dependencies:
-    | Awaited<ReturnType<typeof getPackageVersionDependencies>>
-    | ReturnType<typeof getPackageVersionDependencies>;
+  dependencies: DependencyResponse;
   pageSize?: number;
   siblingCount?: number;
 }
 
-export const PaginatedDependencies = memo(function PaginatedDependencies(
-  props: Props
-) {
-  const navigationType = useNavigationType();
-
+export function PaginatedDependencies({
+  dependencies,
+  pageSize = 20, // Default page size from backend
+  siblingCount = 4,
+}: Props) {
   const [searchParams, setSearchParams] = useSearchParams();
+  const page = Number(searchParams.get("page") ?? 1);
 
-  const initialParams = searchParamsToBlob(searchParams);
-
-  const [searchParamsBlob, setSearchParamsBlob] =
-    useState<SearchParamsType>(initialParams);
-
-  const [currentPage, setCurrentPage] = useState(
-    searchParams.get("page") ? Number(searchParams.get("page")) : 1
-  );
-
-  const [debouncedSearchParamsBlob] = useDebounce(searchParamsBlob, 300, {
-    maxWait: 300,
-  });
-
-  const searchParamsBlobRef = useRef(debouncedSearchParamsBlob);
+  const handlePageChange = (nextPage: number) => {
+    const next = new URLSearchParams(searchParams);
 
-  const searchParamsRef = useRef(searchParams);
-  useEffect(() => {
-    if (navigationType === "POP") {
-      if (searchParamsRef.current !== searchParams) {
-        const spb = searchParamsToBlob(searchParams);
-        setSearchParamsBlob(spb);
-        setCurrentPage(spb.page);
-        searchParamsRef.current = searchParams;
-      }
-      searchParamsBlobRef.current = searchParamsToBlob(searchParams);
+    if (nextPage === 1) {
+      next.delete("page");
+    } else {
+      next.set("page", String(nextPage));
     }
-  }, [searchParams]);
 
-  useEffect(() => {
-    if (
-      navigationType !== "POP" ||
-      (navigationType === "POP" &&
-        searchParamsBlobRef.current !== debouncedSearchParamsBlob)
-    ) {
-      if (searchParamsBlobRef.current !== debouncedSearchParamsBlob) {
-        const oldPage = searchParams.get("page")
-          ? Number(searchParams.get("page"))
-          : 1;
-        // Page number
-        if (oldPage !== debouncedSearchParamsBlob.page) {
-          if (debouncedSearchParamsBlob.page === 1) {
-            searchParams.delete("page");
-            setCurrentPage(1);
-          } else {
-            searchParams.set("page", String(debouncedSearchParamsBlob.page));
-            setCurrentPage(debouncedSearchParamsBlob.page);
-          }
-        }
-        const uncommittedSearchParams = searchParamsToBlob(searchParams);
-
-        if (
-          navigationType !== "POP" ||
-          (navigationType === "POP" &&
-            !compareSearchParamBlobs(
-              uncommittedSearchParams,
-              searchParamsBlobRef.current
-            ) &&
-            compareSearchParamBlobs(
-              uncommittedSearchParams,
-              debouncedSearchParamsBlob
-            ))
-        ) {
-          setSearchParams(searchParams, { preventScrollReset: true });
-        }
-        searchParamsBlobRef.current = debouncedSearchParamsBlob;
-      }
-    }
-  }, [debouncedSearchParamsBlob]);
-
-  const versionAndDependencies = useMemo(
-    () => Promise.all([props.version, props.dependencies]),
-    [currentPage]
-  );
+    setSearchParams(next, { preventScrollReset: true });
+  };
 
   return (
     <div className="paginated-dependencies">
-      <Suspense
-        fallback={<SkeletonBox className="paginated-dependencies__skeleton" />}
-      >
-        <Await
-          resolve={versionAndDependencies}
-          errorElement={
-            <div>Error occurred while loading required dependencies</div>
-          }
-        >
-          {(resolvedValue) => {
-            return (
-              <>
-                <div className="paginated-dependencies__title">
-                  <Heading csLevel="3" csSize="3">
-                    Required mods ({resolvedValue[0].dependency_count})
-                  </Heading>
-                  <span className="paginated-dependencies__description">
-                    This package requires the following packages to work.
-                  </span>
-                </div>
-                <div className="paginated-dependencies__body">
-                  {resolvedValue[1].results.map((dep, key) => {
-                    return <ListingDependency key={key} dependency={dep} />;
-                  })}
-                </div>
-                <NewPagination
-                  currentPage={currentPage}
-                  pageSize={props.pageSize ?? 20}
-                  totalCount={resolvedValue[0].dependency_count}
-                  onPageChange={setParamsBlobValue(
-                    setSearchParamsBlob,
-                    searchParamsBlob,
-                    "page"
-                  )}
-                  siblingCount={props.siblingCount ?? 4}
-                />
-              </>
-            );
-          }}
-        </Await>
-      </Suspense>
+      <div className="paginated-dependencies__title">
+        <Heading csLevel="3" csSize="3">
+          Required mods ({dependencies.count})
+        </Heading>
+        <span className="paginated-dependencies__description">
+          This package requires the following packages to work.
+        </span>
+      </div>
+
+      <div className="paginated-dependencies__body">
+        {dependencies.results.map((dep, idx: number) => (
+          <ListingDependency
+            key={`${dep.name}-${dep.version_number}-${idx}`}
+            dependency={dep}
+          />
+        ))}
+      </div>
+
+      <NewPagination
+        currentPage={page}
+        pageSize={pageSize}
+        totalCount={dependencies.count}
+        onPageChange={handlePageChange}
+        siblingCount={siblingCount}
+      />
     </div>
   );
-});
+}
 
 PaginatedDependencies.displayName = "PaginatedDependencies";
-
-export type SearchParamsType = {
-  page: number;
-};
-
-export const compareSearchParamBlobs = (
-  b1: SearchParamsType,
-  b2: SearchParamsType
-) => {
-  if (b1.page !== b2.page) return false;
-  return true;
-};
-
-export const searchParamsToBlob = (searchParams: URLSearchParams) => {
-  const initialPage = searchParams.get("page");
-
-  return {
-    page:
-      initialPage &&
-      !Number.isNaN(Number.parseInt(initialPage)) &&
-      Number.isSafeInteger(Number.parseInt(initialPage))
-        ? Number.parseInt(initialPage)
-        : 1,
-  };
-};
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionRequired.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionRequired.tsx
index 8cf870a3a..bd8d99c21 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionRequired.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionRequired.tsx
@@ -1,11 +1,13 @@
+import { Suspense } from "react";
 import { type LoaderFunctionArgs } from "react-router";
-import { useLoaderData } from "react-router";
+import { useLoaderData, Await } from "react-router";
 import { DapperTs } from "@thunderstore/dapper-ts";
+import { SkeletonBox } from "@thunderstore/cyberstorm";
+import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
-import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId && params.packageVersion) {
@@ -66,11 +68,22 @@ export async function clientLoader({ params, request }: LoaderFunctionArgs) {
 }
 
 export default function PackageVersionRequired() {
-  const { version, dependencies } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { dependencies } = useLoaderData();
 
   return (
-    <PaginatedDependencies version={version} dependencies={dependencies} />
+    <Suspense
+      fallback={<SkeletonBox className="paginated-dependencies__skeleton" />}
+    >
+      <Await
+        resolve={dependencies}
+        errorElement={
+          <div>Error occurred while loading required dependencies</div>
+        }
+      >
+        {(resolvedDependencies) => (
+          <PaginatedDependencies dependencies={resolvedDependencies} />
+        )}
+      </Await>
+    </Suspense>
   );
 }
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionWithoutCommunityRequired.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionWithoutCommunityRequired.tsx
index 592621ac2..af6cdd0ac 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionWithoutCommunityRequired.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/PackageVersionWithoutCommunityRequired.tsx
@@ -1,11 +1,13 @@
+import { Suspense } from "react";
 import { type LoaderFunctionArgs } from "react-router";
-import { useLoaderData } from "react-router";
+import { useLoaderData, Await } from "react-router";
 import { DapperTs } from "@thunderstore/dapper-ts";
+import { SkeletonBox } from "@thunderstore/cyberstorm";
+import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
-import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   if (params.namespaceId && params.packageId && params.packageVersion) {
@@ -66,11 +68,22 @@ export async function clientLoader({ params, request }: LoaderFunctionArgs) {
 }
 
 export default function PackageVersionWithoutCommunityRequired() {
-  const { version, dependencies } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { dependencies } = useLoaderData();
 
   return (
-    <PaginatedDependencies version={version} dependencies={dependencies} />
+    <Suspense
+      fallback={<SkeletonBox className="paginated-dependencies__skeleton" />}
+    >
+      <Await
+        resolve={dependencies}
+        errorElement={
+          <div>Error occurred while loading required dependencies</div>
+        }
+      >
+        {(resolvedDependencies) => (
+          <PaginatedDependencies dependencies={resolvedDependencies} />
+        )}
+      </Await>
+    </Suspense>
   );
 }
diff --git a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
index be62cd526..64d76108c 100644
--- a/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
+++ b/apps/cyberstorm-remix/app/p/tabs/Required/Required.tsx
@@ -1,11 +1,13 @@
+import { Suspense } from "react";
 import { type LoaderFunctionArgs } from "react-router";
-import { useLoaderData } from "react-router";
+import { useLoaderData, Await } from "react-router";
 import { DapperTs } from "@thunderstore/dapper-ts";
+import { SkeletonBox } from "@thunderstore/cyberstorm";
+import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 import {
   getPublicEnvVariables,
   getSessionTools,
 } from "cyberstorm/security/publicEnvVariables";
-import { PaginatedDependencies } from "~/commonComponents/PaginatedDependencies/PaginatedDependencies";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   if (params.communityId && params.namespaceId && params.packageId) {
@@ -76,11 +78,22 @@ export async function clientLoader({ params, request }: LoaderFunctionArgs) {
 }
 
 export default function PackageVersionRequired() {
-  const { version, dependencies } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
+  const { dependencies } = useLoaderData();
 
   return (
-    <PaginatedDependencies version={version} dependencies={dependencies} />
+    <Suspense
+      fallback={<SkeletonBox className="paginated-dependencies__skeleton" />}
+    >
+      <Await
+        resolve={dependencies}
+        errorElement={
+          <div>Error occurred while loading required dependencies</div>
+        }
+      >
+        {(resolvedDependencies) => (
+          <PaginatedDependencies dependencies={resolvedDependencies} />
+        )}
+      </Await>
+    </Suspense>
   );
 }