diff --git a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
index f9688eb4..d3dd7046 100644
--- a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
+++ b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-list-item.tsx
@@ -1,5 +1,4 @@
 import { RdxBadge } from "@repo/rdx-ui/components";
-import { Card, CardContent } from "@repo/shadcn-ui/components";
 import { CalendarClockIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";
@@ -48,120 +47,116 @@ export const PaymentTermListItem = ({
   const formatLocalizedDueDays = (value: number) => formatPaymentTermDueDays(value, t);
 
   return (
-    <Card className="border-border/70 shadow-none">
-      <CardContent className="flex flex-col gap-5 p-4 sm:gap-6 sm:p-5">
-        <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
-          <div className="flex min-w-0 items-start gap-3 sm:gap-4">
-            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-muted/40 text-primary sm:size-11">
-              <CalendarClockIcon aria-hidden className="size-5" />
-            </div>
+    <div className="flex flex-col gap-5 rounded-xl border border-border/70 bg-card p-4 sm:gap-6 sm:p-5">
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+        <div className="flex min-w-0 items-start gap-3 sm:gap-4">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-border/70 bg-muted/40 text-primary sm:size-11">
+            <CalendarClockIcon aria-hidden className="size-5" />
+          </div>
 
-            <div className="min-w-0 space-y-2">
-              <div className="flex flex-wrap items-center gap-2">
-                <h3 className="text-sm font-semibold text-foreground sm:text-base">
-                  {paymentTerm.name}
-                </h3>
+          <div className="min-w-0 space-y-2">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="text-sm font-semibold text-foreground sm:text-base">
+                {paymentTerm.name}
+              </h3>
 
-                <RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}>
-                  {paymentTerm.isActive
-                    ? t("settings.paymentTerms.status.active")
-                    : t("settings.paymentTerms.status.inactive")}
-                </RdxBadge>
+              <RdxBadge variant={paymentTerm.isActive ? "outline" : "secondary"}>
+                {paymentTerm.isActive
+                  ? t("settings.paymentTerms.status.active")
+                  : t("settings.paymentTerms.status.inactive")}
+              </RdxBadge>
 
-                {paymentTerm.isSystem ? (
-                  <RdxBadge variant="secondary">
-                    {t("settings.paymentTerms.status.system")}
-                  </RdxBadge>
-                ) : null}
-              </div>
-
-              {paymentTerm.description ? (
-                <p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
+              {paymentTerm.isSystem ? (
+                <RdxBadge variant="secondary">{t("settings.paymentTerms.status.system")}</RdxBadge>
               ) : null}
             </div>
-          </div>
 
-          <PaymentTermRowActions
-            activeDisabledReason={activeDisabledReason}
-            deleteDisabledReason={deleteDisabledReason}
-            isTogglingActive={isTogglingActive}
-            onDelete={onDelete}
-            onEdit={onEdit}
-            onToggleActive={onToggleActive}
-            paymentTerm={paymentTerm}
-          />
-        </div>
-
-        <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
-          <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              {t("settings.paymentTerms.summary.installmentsLabel")}
-            </p>
-            <p className="text-sm font-semibold text-foreground">
-              {t("settings.paymentTerms.summary.installmentsCount", { count: installmentCount })}
-            </p>
-          </div>
-
-          <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              {t("settings.paymentTerms.summary.lastInstallmentLabel")}
-            </p>
-            <p className="text-sm font-semibold text-foreground">
-              {lastDueDays === null ? "-" : formatLocalizedDueDays(lastDueDays)}
-            </p>
-          </div>
-
-          <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3 md:col-span-2 xl:col-span-1">
-            <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              {t("settings.paymentTerms.summary.distributionLabel")}
-            </p>
-            <p className="text-sm font-semibold text-foreground">
-              {percentageDistribution.map(formatLocalizedPercentage).join(" / ")}
-            </p>
+            {paymentTerm.description ? (
+              <p className="max-w-3xl text-sm text-muted-foreground">{paymentTerm.description}</p>
+            ) : null}
           </div>
         </div>
 
-        <div className="space-y-4">
-          <div className="space-y-3">
-            <h4 className="text-sm font-semibold text-foreground">
-              {t("settings.paymentTerms.details.title")}
-            </h4>
+        <PaymentTermRowActions
+          activeDisabledReason={activeDisabledReason}
+          deleteDisabledReason={deleteDisabledReason}
+          isTogglingActive={isTogglingActive}
+          onDelete={onDelete}
+          onEdit={onEdit}
+          onToggleActive={onToggleActive}
+          paymentTerm={paymentTerm}
+        />
+      </div>
 
-            <div className="grid gap-3 md:grid-cols-2">
-              {sortedDueRules.map((rule, index) => (
-                <div
-                  className="rounded-lg border border-border/60 bg-background px-4 py-3"
-                  key={`${paymentTerm.id}-${rule.dueDays}-${rule.percentage}`}
-                >
-                  <div className="flex items-start gap-3">
-                    <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
-                      {index + 1}
-                    </div>
+      <div className="grid gap-3 sm:gap-4 md:grid-cols-2 xl:grid-cols-3">
+        <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {t("settings.paymentTerms.summary.installmentsLabel")}
+          </p>
+          <p className="text-sm font-semibold text-foreground">
+            {t("settings.paymentTerms.summary.installmentsCount", { count: installmentCount })}
+          </p>
+        </div>
 
-                    <div className="space-y-1">
-                      <p className="text-sm font-medium text-foreground tabular-nums">
-                        {formatLocalizedPercentage(rule.percentage)} ·{" "}
-                        {formatLocalizedDueDays(rule.dueDays)}
-                      </p>
-                      <p className="text-xs text-muted-foreground">
-                        {rule.dueDays === 0
-                          ? t("settings.paymentTerms.details.sameDay")
-                          : t("settings.paymentTerms.details.baseDate")}
-                      </p>
-                    </div>
+        <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {t("settings.paymentTerms.summary.lastInstallmentLabel")}
+          </p>
+          <p className="text-sm font-semibold text-foreground">
+            {lastDueDays === null ? "-" : formatLocalizedDueDays(lastDueDays)}
+          </p>
+        </div>
+
+        <div className="space-y-1 rounded-lg border border-border/60 bg-muted/20 px-4 py-3 md:col-span-2 xl:col-span-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {t("settings.paymentTerms.summary.distributionLabel")}
+          </p>
+          <p className="text-sm font-semibold text-foreground">
+            {percentageDistribution.map(formatLocalizedPercentage).join(" / ")}
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-3">
+          <h4 className="text-sm font-semibold text-foreground">
+            {t("settings.paymentTerms.details.title")}
+          </h4>
+
+          <div className="grid gap-3 md:grid-cols-2">
+            {sortedDueRules.map((rule, index) => (
+              <div
+                className="rounded-lg border border-border/60 bg-background px-4 py-3"
+                key={`${paymentTerm.id}-${rule.dueDays}-${rule.percentage}`}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold text-muted-foreground">
+                    {index + 1}
+                  </div>
+
+                  <div className="space-y-1">
+                    <p className="text-sm font-medium text-foreground tabular-nums">
+                      {formatLocalizedPercentage(rule.percentage)} ·{" "}
+                      {formatLocalizedDueDays(rule.dueDays)}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {rule.dueDays === 0
+                        ? t("settings.paymentTerms.details.sameDay")
+                        : t("settings.paymentTerms.details.baseDate")}
+                    </p>
                   </div>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
-
-          <PaymentTermSegmentedBar
-            formatDueDays={formatLocalizedDueDays}
-            formatPercentage={formatLocalizedPercentage}
-            segments={segments}
-          />
         </div>
-      </CardContent>
-    </Card>
+
+        <PaymentTermSegmentedBar
+          formatDueDays={formatLocalizedDueDays}
+          formatPercentage={formatLocalizedPercentage}
+          segments={segments}
+        />
+      </div>
+    </div>
   );
 };
diff --git a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-row-actions.tsx b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-row-actions.tsx
index b2654981..ebcce09c 100644
--- a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-row-actions.tsx
+++ b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-term-row-actions.tsx
@@ -1,12 +1,6 @@
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  Spinner,
-} from "@repo/shadcn-ui/components";
-import { MoreHorizontalIcon } from "lucide-react";
+import { type RdxRowAction, RdxRowActions } from "@repo/rdx-ui/components";
+import { Spinner } from "@repo/shadcn-ui/components";
+import { PencilIcon, PowerIcon, PowerOffIcon, Trash2Icon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";
 import type { PaymentTermListRow } from "../../../../payment-terms/shared";
@@ -36,68 +30,50 @@ export const PaymentTermRowActions = ({
   const toggleDisabled = paymentTerm.isSystem || isTogglingActive;
   const deleteDisabled = paymentTerm.isSystem;
 
+  const primaryActions: RdxRowAction[] = [
+    {
+      id: "edit",
+      label: t("settings.paymentTerms.actions.edit"),
+      icon: <PencilIcon aria-hidden className="size-4" />,
+      disabled: editDisabled,
+      disabledReason: editDisabled ? t("settings.paymentTerms.protections.systemEdit") : undefined,
+      onSelect: () => onEdit(paymentTerm),
+    },
+    {
+      id: "toggle-active",
+      label: paymentTerm.isActive
+        ? t("settings.paymentTerms.actions.disable")
+        : t("settings.paymentTerms.actions.enable"),
+      icon: isTogglingActive ? (
+        <Spinner aria-hidden className="size-4" />
+      ) : paymentTerm.isActive ? (
+        <PowerOffIcon aria-hidden className="size-4" />
+      ) : (
+        <PowerIcon aria-hidden className="size-4" />
+      ),
+      disabled: toggleDisabled,
+      disabledReason: toggleDisabled ? activeDisabledReason : undefined,
+      onSelect: () => onToggleActive(paymentTerm),
+    },
+  ];
+
+  const overflowActions: RdxRowAction[] = [
+    {
+      id: "delete",
+      label: t("settings.paymentTerms.actions.delete"),
+      icon: <Trash2Icon aria-hidden className="size-4" />,
+      destructive: true,
+      disabled: deleteDisabled,
+      disabledReason: deleteDisabled ? deleteDisabledReason : undefined,
+      onSelect: () => onDelete(paymentTerm),
+    },
+  ];
+
   return (
-    <div className="flex w-full flex-wrap items-center gap-2 xl:w-auto xl:justify-end">
-      <Button
-        aria-label={t("settings.paymentTerms.actions.edit")}
-        className="flex-1 sm:flex-none"
-        disabled={editDisabled}
-        onClick={() => onEdit(paymentTerm)}
-        size="sm"
-        title={editDisabled ? t("settings.paymentTerms.protections.systemEdit") : undefined}
-        variant="outline"
-      >
-        {t("settings.paymentTerms.actions.edit")}
-      </Button>
-
-      <Button
-        aria-busy={isTogglingActive}
-        aria-label={
-          paymentTerm.isActive
-            ? t("settings.paymentTerms.actions.disable")
-            : t("settings.paymentTerms.actions.enable")
-        }
-        className="flex-1 sm:flex-none"
-        disabled={toggleDisabled}
-        onClick={() => onToggleActive(paymentTerm)}
-        size="sm"
-        title={toggleDisabled ? activeDisabledReason : undefined}
-        variant="outline"
-      >
-        {isTogglingActive ? <Spinner aria-hidden className="mr-2 size-4" /> : null}
-        {paymentTerm.isActive
-          ? t("settings.paymentTerms.actions.disable")
-          : t("settings.paymentTerms.actions.enable")}
-      </Button>
-
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={
-            <Button
-              aria-label={t("settings.paymentTerms.actions.more")}
-              className="shrink-0"
-              size="icon"
-              variant="ghost"
-            >
-              <MoreHorizontalIcon className="size-4" />
-            </Button>
-          }
-        />
-        <DropdownMenuContent
-          align="end"
-          className="w-48"
-          render={
-            <DropdownMenuItem
-              disabled={deleteDisabled}
-              onClick={() => onDelete(paymentTerm)}
-              title={deleteDisabled ? deleteDisabledReason : undefined}
-              variant="destructive"
-            >
-              {t("settings.paymentTerms.actions.delete")}
-            </DropdownMenuItem>
-          }
-        />
-      </DropdownMenu>
-    </div>
+    <RdxRowActions
+      overflowActions={overflowActions}
+      overflowLabel={t("settings.paymentTerms.actions.more")}
+      primaryActions={primaryActions}
+    />
   );
 };
diff --git a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-terms-empty-state.tsx b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-terms-empty-state.tsx
index 1d6131c4..da6aaf7e 100644
--- a/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-terms-empty-state.tsx
+++ b/modules/catalogs/src/web/settings/payment-terms/ui/components/payment-terms-empty-state.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@repo/shadcn-ui/components";
+import { CirclePlusIcon } from "lucide-react";
 
 import { useTranslation } from "../../../../i18n";
 
@@ -6,17 +7,18 @@ export const PaymentTermsEmptyState = ({ onCreate }: { onCreate: () => void }) =
   const { t } = useTranslation();
 
   return (
-    <div className="rounded-xl border border-dashed border-border bg-muted/20 p-8 text-center">
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold">{t("settings.paymentTerms.empty.title")}</h3>
-        <p className="text-sm text-muted-foreground">
-          {t("settings.paymentTerms.empty.description")}
-        </p>
-      </div>
-
-      <Button className="mt-6" onClick={onCreate}>
-        {t("settings.paymentTerms.actions.create")}
-      </Button>
-    </div>
+    <Button
+      className="h-auto min-h-28 w-full flex-col gap-2 whitespace-normal rounded-xl border-dashed px-4 py-6 text-center shadow-none transition-colors hover:bg-muted/50"
+      onClick={onCreate}
+      variant="outline"
+    >
+      <span className="flex items-center justify-center gap-2">
+        <CirclePlusIcon aria-hidden className="size-5 text-muted-foreground" />
+        {t("settings.paymentTerms.empty.title")}
+      </span>
+      <span className="text-sm font-normal text-muted-foreground">
+        {t("settings.paymentTerms.empty.description")}
+      </span>
+    </Button>
   );
 };
diff --git a/modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx b/modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx
index 64212044..3c5b0ab9 100644
--- a/modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx
+++ b/modules/catalogs/src/web/settings/payment-terms/ui/pages/payment-terms-settings-page.tsx
@@ -1,7 +1,10 @@
 import { PageErrorState } from "@erp/core/components";
-import { RdxPageContainer, RdxPageHeader, RdxPageStack } from "@repo/rdx-ui/components";
+import { RdxPageContainer } from "@repo/rdx-ui/components";
 import {
   Button,
+  Card,
+  CardContent,
+  CardHeader,
   Input,
   Select,
   SelectContent,
@@ -10,7 +13,7 @@ import {
   SelectValue,
   Spinner,
 } from "@repo/shadcn-ui/components";
-import { PlusIcon, SearchIcon } from "lucide-react";
+import { CalendarClockIcon, PlusIcon, SearchIcon } from "lucide-react";
 import type { ChangeEvent } from "react";
 
 import { useTranslation } from "../../../../i18n";
@@ -85,144 +88,156 @@ export const PaymentTermsSettingsPage = () => {
   };
 
   return (
-    <RdxPageContainer width="full">
-      <RdxPageStack className="mx-auto w-full max-w-6xl" spacing="default">
-        <RdxPageHeader
-          actions={
-            <Button className="w-full sm:w-auto" onClick={featureCtrl.openCreateDialog}>
-              <PlusIcon aria-hidden className="mr-2 size-4" />
-              {t("settings.paymentTerms.actions.create")}
-            </Button>
-          }
-          description={t("settings.paymentTerms.description")}
-          title={t("settings.paymentTerms.title")}
-        />
-
-        <div className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-4 shadow-none md:p-5 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
-            <div className="relative w-full lg:w-96 xl:w-[30rem]">
-              <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                aria-label={t("settings.paymentTerms.toolbar.searchPlaceholder")}
-                className="pl-9 pr-10"
-                onChange={handleSearchChange}
-                placeholder={t("settings.paymentTerms.toolbar.searchPlaceholder")}
-                value={ctrl.search}
-              />
-              {ctrl.isBackgroundFetching ? (
-                <Spinner
-                  aria-hidden
-                  className="absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
+    <>
+      <Card>
+        <CardHeader className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-start gap-4">
+            <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <CalendarClockIcon aria-hidden className="size-6" />
+            </div>
+            <div className="min-w-0 space-y-1">
+              <h2 className="text-2xl font-semibold tracking-tight">
+                {t("settings.paymentTerms.title")}
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {t("settings.paymentTerms.description")}
+              </p>
+            </div>
+          </div>
+          <Button className="shrink-0 self-start" onClick={featureCtrl.openCreateDialog}>
+            <PlusIcon aria-hidden className="size-4" />
+            {t("settings.paymentTerms.actions.create")}
+          </Button>
+        </CardHeader>
+        <CardContent className="@container space-y-4">
+          <div className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-4 shadow-none lg:flex-row lg:items-center lg:justify-between">
+            <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
+              <div className="relative w-full lg:w-96 xl:w-[30rem]">
+                <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  aria-label={t("settings.paymentTerms.toolbar.searchPlaceholder")}
+                  className="pl-9 pr-10"
+                  onChange={handleSearchChange}
+                  placeholder={t("settings.paymentTerms.toolbar.searchPlaceholder")}
+                  value={ctrl.search}
                 />
-              ) : null}
+                {ctrl.isBackgroundFetching ? (
+                  <Spinner
+                    aria-hidden
+                    className="absolute top-1/2 right-3 size-4 -translate-y-1/2 text-muted-foreground"
+                  />
+                ) : null}
+              </div>
+
+              <div className="grid gap-2 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center">
+                <span className="text-sm font-medium text-muted-foreground sm:whitespace-nowrap">
+                  {t("settings.paymentTerms.toolbar.statusLabel")}
+                </span>
+                <Select onValueChange={handleStatusChange} value={ctrl.status}>
+                  <SelectTrigger
+                    aria-label={t("settings.paymentTerms.toolbar.statusLabel")}
+                    className="w-full sm:min-w-44 lg:w-44"
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">
+                      {t("settings.paymentTerms.toolbar.statusOptions.all")}
+                    </SelectItem>
+                    <SelectItem value="active">
+                      {t("settings.paymentTerms.toolbar.statusOptions.active")}
+                    </SelectItem>
+                    <SelectItem value="inactive">
+                      {t("settings.paymentTerms.toolbar.statusOptions.inactive")}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
             </div>
 
-            <div className="grid gap-2 sm:grid-cols-[auto_minmax(0,1fr)] sm:items-center">
-              <span className="text-sm font-medium text-muted-foreground sm:whitespace-nowrap">
-                {t("settings.paymentTerms.toolbar.statusLabel")}
+            <div className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end">
+              {ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null}
+              <span>
+                {t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}
               </span>
-              <Select onValueChange={handleStatusChange} value={ctrl.status}>
-                <SelectTrigger
-                  aria-label={t("settings.paymentTerms.toolbar.statusLabel")}
-                  className="w-full sm:min-w-44 lg:w-44"
-                >
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">
-                    {t("settings.paymentTerms.toolbar.statusOptions.all")}
-                  </SelectItem>
-                  <SelectItem value="active">
-                    {t("settings.paymentTerms.toolbar.statusOptions.active")}
-                  </SelectItem>
-                  <SelectItem value="inactive">
-                    {t("settings.paymentTerms.toolbar.statusOptions.inactive")}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
             </div>
           </div>
 
-          <div className="flex items-center gap-2 text-sm text-muted-foreground lg:justify-end">
-            {ctrl.isBackgroundFetching ? <Spinner aria-hidden className="size-4" /> : null}
-            <span>{t("settings.paymentTerms.toolbar.totalCount", { count: ctrl.totalItems })}</span>
-          </div>
-        </div>
+          {ctrl.hasEmptyState ? (
+            <PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} />
+          ) : ctrl.hasNoResults ? (
+            <PaymentTermsNoResultsState onClear={ctrl.clearFilters} />
+          ) : (
+            <div aria-busy={ctrl.isBackgroundFetching} className="space-y-4">
+              {ctrl.list.map((paymentTerm) => (
+                <PaymentTermListItem
+                  activeDisabledReason={activeDisabledReason(paymentTerm.isSystem)}
+                  deleteDisabledReason={deleteDisabledReason(paymentTerm.isSystem)}
+                  isTogglingActive={featureCtrl.isTogglingActive}
+                  key={paymentTerm.id}
+                  onDelete={featureCtrl.openDeleteDialog}
+                  onEdit={featureCtrl.openEditDialog}
+                  onToggleActive={(item) => {
+                    if (item.isActive) {
+                      featureCtrl.disable(item);
+                      return;
+                    }
 
-        {ctrl.hasEmptyState ? (
-          <PaymentTermsEmptyState onCreate={featureCtrl.openCreateDialog} />
-        ) : ctrl.hasNoResults ? (
-          <PaymentTermsNoResultsState onClear={ctrl.clearFilters} />
-        ) : (
-          <div aria-busy={ctrl.isBackgroundFetching} className="space-y-4">
-            {ctrl.list.map((paymentTerm) => (
-              <PaymentTermListItem
-                activeDisabledReason={activeDisabledReason(paymentTerm.isSystem)}
-                deleteDisabledReason={deleteDisabledReason(paymentTerm.isSystem)}
-                isTogglingActive={featureCtrl.isTogglingActive}
-                key={paymentTerm.id}
-                onDelete={featureCtrl.openDeleteDialog}
-                onEdit={featureCtrl.openEditDialog}
-                onToggleActive={(item) => {
-                  if (item.isActive) {
-                    featureCtrl.disable(item);
-                    return;
-                  }
+                    featureCtrl.enable(item);
+                  }}
+                  paymentTerm={paymentTerm}
+                />
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
 
-                  featureCtrl.enable(item);
-                }}
-                paymentTerm={paymentTerm}
-              />
-            ))}
-          </div>
-        )}
+      <PaymentTermFormDialog
+        description={t("settings.paymentTerms.create.description")}
+        form={featureCtrl.form}
+        formId={featureCtrl.formId}
+        isEditMode={false}
+        isSubmitting={featureCtrl.isSaving}
+        onSubmit={featureCtrl.onSubmit}
+        open={featureCtrl.isCreateOpen}
+        openChange={(open) => {
+          if (!open) {
+            featureCtrl.closeCreateDialog();
+          }
+        }}
+        submitLabel={t("settings.paymentTerms.actions.create")}
+        title={t("settings.paymentTerms.create.title")}
+      />
 
-        <PaymentTermFormDialog
-          description={t("settings.paymentTerms.create.description")}
-          form={featureCtrl.form}
-          formId={featureCtrl.formId}
-          isEditMode={false}
-          isSubmitting={featureCtrl.isSaving}
-          onSubmit={featureCtrl.onSubmit}
-          open={featureCtrl.isCreateOpen}
-          openChange={(open) => {
-            if (!open) {
-              featureCtrl.closeCreateDialog();
-            }
-          }}
-          submitLabel={t("settings.paymentTerms.actions.create")}
-          title={t("settings.paymentTerms.create.title")}
-        />
+      <PaymentTermFormDialog
+        description={t("settings.paymentTerms.edit.description")}
+        form={featureCtrl.form}
+        formId={`${featureCtrl.formId}-edit`}
+        isEditMode
+        isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingPaymentTermLoading}
+        onSubmit={featureCtrl.onSubmit}
+        open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading}
+        openChange={(open) => {
+          if (!open) {
+            featureCtrl.closeEditDialog();
+          }
+        }}
+        submitLabel={t("settings.paymentTerms.actions.save")}
+        title={t("settings.paymentTerms.edit.title")}
+      />
 
-        <PaymentTermFormDialog
-          description={t("settings.paymentTerms.edit.description")}
-          form={featureCtrl.form}
-          formId={`${featureCtrl.formId}-edit`}
-          isEditMode
-          isSubmitting={featureCtrl.isSaving || featureCtrl.isEditingPaymentTermLoading}
-          onSubmit={featureCtrl.onSubmit}
-          open={Boolean(featureCtrl.editingPaymentTerm) || featureCtrl.isEditingPaymentTermLoading}
-          openChange={(open) => {
-            if (!open) {
-              featureCtrl.closeEditDialog();
-            }
-          }}
-          submitLabel={t("settings.paymentTerms.actions.save")}
-          title={t("settings.paymentTerms.edit.title")}
-        />
-
-        <DeletePaymentTermDialog
-          isSubmitting={featureCtrl.isDeleting}
-          onConfirm={featureCtrl.confirmDelete}
-          onOpenChange={(open) => {
-            if (!open) {
-              featureCtrl.closeDeleteDialog();
-            }
-          }}
-          open={Boolean(featureCtrl.deletingPaymentTerm)}
-          target={featureCtrl.deletingPaymentTerm}
-        />
-      </RdxPageStack>
-    </RdxPageContainer>
+      <DeletePaymentTermDialog
+        isSubmitting={featureCtrl.isDeleting}
+        onConfirm={featureCtrl.confirmDelete}
+        onOpenChange={(open) => {
+          if (!open) {
+            featureCtrl.closeDeleteDialog();
+          }
+        }}
+        open={Boolean(featureCtrl.deletingPaymentTerm)}
+        target={featureCtrl.deletingPaymentTerm}
+      />
+    </>
   );
 };