diff --git a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
index 1e869a29603..fc86a78ccc8 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/PaymentBuilderForm/partials/PaymentBuilderPayoutsTotal/PaymentBuilderPayoutsTotal.tsx
@@ -89,7 +89,7 @@ const PaymentBuilderTokensTotal: FC<PaymentBuilderPayoutsTotalProps> = ({
         )}
       >
         <Numeral value={payout.amount} decimals={tokenData?.decimals} />
-        <div className="flex items-center gap-1">
+        <div className="flex items-center justify-start gap-1">
           <TokenAvatar
             tokenAddress={tokenData.tokenAddress}
             tokenAvatarSrc={tokenData.avatar ?? undefined}
diff --git a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
index ac4546f41ad..f6bc11e0eef 100644
--- a/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/forms/StagedPaymentForm/partials/StagedPaymentRecipientsField/hooks.tsx
@@ -86,7 +86,7 @@ export const useStagedPaymentRecipientsTableColumns = (
         }),
         columnHelper.display({
           id: 'amount',
-          staticSize: '216px',
+          staticSize: '210px',
           header: () => formatText({ id: 'table.row.amount' }),
           cell: ({ row }) => (
             <AmountField
diff --git a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
index ce5e89d9d59..9d1fdb90473 100644
--- a/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
+++ b/src/components/v5/common/CompletedAction/partials/PaymentBuilder/partials/StagedPaymentTable/StagedPaymentTable.tsx
@@ -5,7 +5,7 @@ import { defineMessages } from 'react-intl';
 
 import { ADDRESS_ZERO } from '~constants';
 import { useStagedPaymentContext } from '~context/StagedPaymentContext/StagedPaymentContext.ts';
-import { useMobile, useTablet } from '~hooks';
+import { useTablet } from '~hooks';
 import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
 import useWrapWithRef from '~hooks/useWrapWithRef.ts';
 import { type Expenditure } from '~types/graphql.ts';
@@ -54,7 +54,7 @@ const useStagedPaymentTableColumns = ({
     useStagedPaymentContext();
   const dataRef = useWrapWithRef(data);
   const hasMoreThanOneToken = dataRef.current.length > 1;
-  const isMobile = useMobile();
+  const isTablet = useTablet();
   const { stagedExpenditureAddress } = useEnabledExtensions();
   const hasMoreThanOneMilestone =
     dataRef.current.filter((item) => !item.isClaimed).length > 1;
@@ -68,6 +68,17 @@ const useStagedPaymentTableColumns = ({
       const columnHelper =
         createColumnHelper<StagedPaymentRecipientsFieldModel>();
 
+      const releaseTableSpacer = isTablet
+        ? []
+        : [
+            columnHelper.display({
+              id: 'release',
+              staticSize: '60px',
+              enableSorting: false,
+              cell: () => null,
+            }),
+          ];
+
       return [
         columnHelper.accessor('milestone', {
           header: () => formatText({ id: 'table.row.milestone' }),
@@ -101,7 +112,7 @@ const useStagedPaymentTableColumns = ({
             : undefined,
         }),
         columnHelper.accessor('amount', {
-          staticSize: '180px',
+          staticSize: '210px',
           enableSorting: false,
           header: () => formatText({ id: 'table.row.amount' }),
           cell: ({ row }) => (
@@ -112,29 +123,31 @@ const useStagedPaymentTableColumns = ({
               isLoading={isLoading}
             />
           ),
-          footer: hasMoreThanOneToken
-            ? () => (
-                <>
-                  <PaymentBuilderPayoutsTotal
-                    data={dataRef.current}
-                    itemClassName="justify-end md:justify-start"
-                    buttonClassName="justify-end md:justify-start"
-                  />
-                  {isMobile &&
-                    isPaymentStep &&
-                    hasMoreThanOneMilestone &&
-                    isCorrectExtensionInstalled && (
-                      <ReleaseAllButton items={dataRef.current} />
-                    )}
-                </>
-              )
-            : undefined,
+          ...((!isTablet || !isPaymentStep) && {
+            footer: hasMoreThanOneToken
+              ? () => {
+                  return (
+                    <div
+                      className={clsx({
+                        'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                      })}
+                    >
+                      <PaymentBuilderPayoutsTotal
+                        data={dataRef.current}
+                        itemClassName={clsx({ 'justify-end': isTablet })}
+                        buttonClassName="justify-end md:justify-start"
+                      />
+                    </div>
+                  );
+                }
+              : undefined,
+          }),
         }),
         ...(isPaymentStep
           ? [
               columnHelper.display({
                 id: 'release',
-                staticSize: '96px',
+                staticSize: '60px',
                 enableSorting: false,
                 cell: ({ row }) => {
                   const { original } = row;
@@ -144,7 +157,11 @@ const useStagedPaymentTableColumns = ({
                   const isClaimed = currentMilestone?.isClaimed;
 
                   return isClaimed ? (
-                    <div className="flex items-center justify-end">
+                    <div
+                      className={clsx('flex items-center', {
+                        'justify-end': !isTablet,
+                      })}
+                    >
                       <PillsBase
                         className={clsx(
                           'bg-teams-blue-50 text-sm font-medium text-teams-blue-400',
@@ -156,7 +173,7 @@ const useStagedPaymentTableColumns = ({
                   ) : (
                     <>
                       {isCorrectExtensionInstalled ? (
-                        <div className="flex items-center justify-end gap-3">
+                        <div className="flex items-center gap-3 md:justify-end">
                           <ReleaseButton
                             description={MSG.payNow}
                             items={currentMilestone ? [currentMilestone] : []}
@@ -171,21 +188,55 @@ const useStagedPaymentTableColumns = ({
                     </>
                   );
                 },
-                footer:
-                  !isMobile &&
-                  hasMoreThanOneMilestone &&
-                  isCorrectExtensionInstalled
-                    ? () => <ReleaseAllButton items={dataRef.current} />
-                    : undefined,
+                ...(hasMoreThanOneToken && {
+                  footer:
+                    hasMoreThanOneMilestone && isCorrectExtensionInstalled
+                      ? () => (
+                          <div
+                            className={clsx({
+                              'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                            })}
+                          >
+                            {isTablet && (
+                              <div className="">
+                                <PaymentBuilderPayoutsTotal
+                                  data={dataRef.current}
+                                  itemClassName="justify-end md:justify-start"
+                                  buttonClassName="justify-end md:justify-start"
+                                />
+                              </div>
+                            )}
+
+                            <ReleaseAllButton items={dataRef.current} />
+                          </div>
+                        )
+                      : () =>
+                          isTablet ? (
+                            <div
+                              className={clsx({
+                                'w-[calc(200%+35px)] min-w-[120px]': isTablet,
+                              })}
+                            >
+                              {isTablet && (
+                                <div className="">
+                                  <PaymentBuilderPayoutsTotal
+                                    data={dataRef.current}
+                                    itemClassName="justify-end md:justify-start"
+                                    buttonClassName="justify-end md:justify-start"
+                                  />
+                                </div>
+                              )}
+                            </div>
+                          ) : undefined,
+                }),
               }),
             ]
-          : []),
+          : releaseTableSpacer),
       ];
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       hasMoreThanOneToken,
       isPaymentStep,
-      isMobile,
       hasMoreThanOneMilestone,
       isCorrectExtensionInstalled,
       isLoading,
@@ -194,6 +245,7 @@ const useStagedPaymentTableColumns = ({
       // Even though this is not directly used, it is needed to refresh the ReleaseButton
       isPendingStagesRelease,
       allMilestonesSlotIdsAwaitingRelease.length,
+      isTablet,
     ]);
 
   return columns;