diff --git a/src/pages/portfolio/AccountDetailsAndHistory.tsx b/src/pages/portfolio/AccountDetailsAndHistory.tsx
index d68e04141..b06cd8a4e 100644
--- a/src/pages/portfolio/AccountDetailsAndHistory.tsx
+++ b/src/pages/portfolio/AccountDetailsAndHistory.tsx
@@ -102,8 +102,13 @@ export const AccountDetailsAndHistory = () => {
   const selectedLocale = useAppSelector(getSelectedLocale);
   const onboardingState = useAppSelector(getOnboardingState);
 
-  const { buyingPower, equity, freeCollateral, leverage, marginUsage } =
-    useAppSelector(getSubaccount, shallowEqual) ?? {};
+  const {
+    buyingPower,
+    equity,
+    freeCollateral: availableBalance,
+    leverage,
+    marginUsage,
+  } = useAppSelector(getSubaccount, shallowEqual) ?? {};
 
   const [tooltipContext, setTooltipContext] = useState<TooltipContextType<PnlDatum>>();
 
@@ -124,10 +129,10 @@ export const AccountDetailsAndHistory = () => {
       value: marginUsage?.current,
     },
     !isTablet && {
-      key: 'FreeCollateral',
-      labelKey: STRING_KEYS.FREE_COLLATERAL,
+      key: 'AvailableBalance',
+      labelKey: STRING_KEYS.AVAILABLE_BALANCE,
       type: OutputType.Fiat,
-      value: freeCollateral?.current,
+      value: availableBalance?.current,
     },
     {
       key: 'Leverage',
@@ -214,7 +219,7 @@ const $AccountDetailsAndHistory = styled.div<{ isSidebarOpen?: boolean }>`
   display: grid;
   grid-template:
     'PortfolioValue PortfolioValue Chart'
-    'MarginUsage FreeCollateral Chart'
+    'MarginUsage AvailableBalance Chart'
     'Leverage BuyingPower Chart'
     / 9.375rem 9.375rem 1fr;
 
diff --git a/src/views/AccountInfo/AccountInfoConnectedState.tsx b/src/views/AccountInfo/AccountInfoConnectedState.tsx
index 9c9c1482d..b740b2aeb 100644
--- a/src/views/AccountInfo/AccountInfoConnectedState.tsx
+++ b/src/views/AccountInfo/AccountInfoConnectedState.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import { shallowEqual } from 'react-redux';
 import styled, { css } from 'styled-components';
 
@@ -28,7 +30,6 @@ import { calculateIsAccountLoading } from '@/state/accountCalculators';
 import { getSubaccount } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
 import { openDialog } from '@/state/dialogs';
-import { getInputErrors } from '@/state/inputsSelectors';
 
 import { isNumber, MustBigNumber } from '@/lib/numbers';
 import { getTradeStateWithDoubleValuesHasDiff } from '@/lib/tradeData';
@@ -36,8 +37,8 @@ import { getTradeStateWithDoubleValuesHasDiff } from '@/lib/tradeData';
 import { AccountInfoDiffOutput } from './AccountInfoDiffOutput';
 
 enum AccountInfoItem {
-  BuyingPower = 'buying-power',
-  MarginUsage = 'margin-usage',
+  AvailableBalance = 'available-balance',
+  PortfolioValue = 'portfolio-value',
 }
 
 const getUsageValue = (value: Nullable<TradeState<number>>) => {
@@ -56,21 +57,26 @@ export const AccountInfoConnectedState = () => {
 
   const { dydxAccounts } = useAccounts();
 
-  const inputErrors = useAppSelector(getInputErrors, shallowEqual);
   const subAccount = useAppSelector(getSubaccount, shallowEqual);
   const isLoading = useAppSelector(calculateIsAccountLoading);
-  const listOfErrors = inputErrors?.map(({ code }: { code: string }) => code);
 
-  const { freeCollateral, marginUsage } = subAccount ?? {};
+  const { freeCollateral: availableBalance, marginUsage } = subAccount ?? {};
+  const portfolioValue = subAccount?.equity;
 
   const hasDiff =
-    (!!marginUsage?.postOrder && getTradeStateWithDoubleValuesHasDiff(marginUsage)) ||
-    (!!freeCollateral?.postOrder && getTradeStateWithDoubleValuesHasDiff(freeCollateral));
-
-  const isAccountMarginUsageError = listOfErrors?.[0] === 'INVALID_NEW_ACCOUNT_MARGIN_USAGE';
+    !!availableBalance?.postOrder && getTradeStateWithDoubleValuesHasDiff(availableBalance);
 
   const showHeader = !hasDiff && !isTablet;
 
+  const isPostOrderTradeStateNegative = useCallback(
+    (tradeStateValue: Nullable<TradeState<number>>) => {
+      return (
+        isNumber(tradeStateValue?.postOrder) && MustBigNumber(tradeStateValue?.postOrder).lt(0)
+      );
+    },
+    []
+  );
+
   return (
     <$ConnectedAccountInfoContainer $showHeader={showHeader}>
       {!showHeader ? null : (
@@ -125,60 +131,52 @@ export const AccountInfoConnectedState = () => {
         <$Details
           items={[
             {
-              key: AccountInfoItem.MarginUsage,
-              hasError: isAccountMarginUsageError,
-              tooltip: 'cross-margin-usage',
-              isPositive: !MustBigNumber(marginUsage?.postOrder).gt(
-                MustBigNumber(marginUsage?.current)
+              key: AccountInfoItem.PortfolioValue,
+              hideDiff: true,
+              hasError: false,
+              isPositive: MustBigNumber(portfolioValue?.postOrder).gt(
+                MustBigNumber(portfolioValue?.current)
               ),
-              label: stringGetter({ key: STRING_KEYS.CROSS_MARGIN_USAGE }),
-              type: OutputType.Percent,
-              value: marginUsage,
-              slotRight: <MarginUsageRing value={getUsageValue(marginUsage)} />,
+              label: stringGetter({ key: STRING_KEYS.PORTFOLIO_VALUE }),
+              type: OutputType.Fiat,
+              value: portfolioValue,
             },
             {
-              key: AccountInfoItem.BuyingPower,
-              hasError:
-                isNumber(freeCollateral?.postOrder) &&
-                MustBigNumber(freeCollateral?.postOrder).lt(0),
-              tooltip: 'cross-free-collateral',
-              isPositive: MustBigNumber(freeCollateral?.postOrder).gt(
-                MustBigNumber(freeCollateral?.current)
+              key: AccountInfoItem.AvailableBalance,
+              hasError: isPostOrderTradeStateNegative(availableBalance),
+              isPositive: MustBigNumber(availableBalance?.postOrder).gt(
+                MustBigNumber(availableBalance?.current)
               ),
-              label: stringGetter({ key: STRING_KEYS.CROSS_FREE_COLLATERAL }),
+              label: stringGetter({ key: STRING_KEYS.AVAILABLE_BALANCE }),
               type: OutputType.Fiat,
               value:
-                MustBigNumber(freeCollateral?.current).lt(0) && freeCollateral?.postOrder === null
+                MustBigNumber(availableBalance?.current).lt(0) &&
+                availableBalance?.postOrder === null
                   ? undefined
-                  : freeCollateral,
+                  : availableBalance,
+              slotRight: (
+                <WithTooltip tooltip="cross-margin-usage">
+                  <MarginUsageRing value={getUsageValue(marginUsage)} />
+                </WithTooltip>
+              ),
             },
           ].map(
-            ({
-              key,
-              hasError,
-              tooltip = undefined,
-              isPositive,
-              label,
-              type,
-              value,
-              slotRight,
-            }) => ({
+            ({ key, hasError, hideDiff = false, isPositive, label, type, value, slotRight }) => ({
               key,
               label: (
-                <WithTooltip tooltip={tooltip}>
-                  <$WithUsage>
-                    {label}
-                    {hasError ? (
-                      <Icon iconName={IconName.CautionCircle} tw="text-color-error" />
-                    ) : (
-                      slotRight
-                    )}
-                  </$WithUsage>
-                </WithTooltip>
+                <$WithUsage>
+                  {label}
+                  {hasError ? (
+                    <Icon iconName={IconName.CautionCircle} tw="text-color-error" />
+                  ) : (
+                    slotRight
+                  )}
+                </$WithUsage>
               ),
               value: (
                 <AccountInfoDiffOutput
                   hasError={hasError}
+                  hideDiff={hideDiff}
                   isPositive={isPositive}
                   type={type}
                   value={value}
@@ -229,12 +227,23 @@ const $Details = styled(Details)<{ showHeader?: boolean }>`
   font: var(--font-mini-book);
 
   > * {
-    height: ${({ showHeader }) =>
-      !showHeader
-        ? `calc(var(--account-info-section-height))`
-        : `calc((var(--account-info-section-height) - var(--tabs-height)))`};
-
-    padding: 0.625rem 1rem;
+    ${({ showHeader }) =>
+      showHeader
+        ? css`
+            height: calc((var(--account-info-section-height) - var(--tabs-height)));
+            padding: 0.625rem 1rem;
+          `
+        : css`
+            height: calc(var(--account-info-section-height));
+            padding: 1.25rem 1rem 0.6rem;
+          `}
+    display: flex;
+    flex-direction: column;
+
+    & > :last-child {
+      flex-grow: 1;
+      align-items: center;
+    }
   }
 
   @media ${breakpoints.tablet} {