diff --git a/.storybook/storybook.requires.js b/.storybook/storybook.requires.js
index b2fdc79d50a4..906409277994 100644
--- a/.storybook/storybook.requires.js
+++ b/.storybook/storybook.requires.js
@@ -116,6 +116,8 @@ const getStories = () => {
     './app/component-library/components-temp/TagColored/TagColored.stories.tsx': require('../app/component-library/components-temp/TagColored/TagColored.stories.tsx'),
     './app/components/UI/Name/Name.stories.tsx': require('../app/components/UI/Name/Name.stories.tsx'),
     "./app/components/UI/SimulationDetails/SimulationDetails.stories.tsx": require("../app/components/UI/SimulationDetails/SimulationDetails.stories.tsx"),
+    './app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories': require('../app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories.js'),
+    './app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories': require('../app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories.js'),
   };
 };
 
diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories.js b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories.js
new file mode 100644
index 000000000000..d9706d5e2e64
--- /dev/null
+++ b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import AggregatedPercentage from './AggregatedPercentage';
+import { createStore } from 'redux';
+import initialBackgroundState from '../../../../util/test/initial-background-state.json';
+
+const mockInitialState = {
+  wizard: {
+    step: 1,
+  },
+  engine: {
+    backgroundState: initialBackgroundState,
+  },
+};
+
+const rootReducer = (state = mockInitialState) => state;
+const store = createStore(rootReducer);
+
+export default {
+  title: 'Component Library / AggregatedPercentage',
+  component: AggregatedPercentage,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+};
+
+const Template = (args) => <AggregatedPercentage {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  ethFiat: 1000,
+  tokenFiat: 500,
+  tokenFiat1dAgo: 950,
+  ethFiat1dAgo: 450,
+};
+
+export const NegativePercentageChange = Template.bind({});
+NegativePercentageChange.args = {
+  ethFiat: 900,
+  tokenFiat: 400,
+  tokenFiat1dAgo: 950,
+  ethFiat1dAgo: 1000,
+};
+
+export const PositivePercentageChange = Template.bind({});
+PositivePercentageChange.args = {
+  ethFiat: 1100,
+  tokenFiat: 600,
+  tokenFiat1dAgo: 500,
+  ethFiat1dAgo: 1000,
+};
+
+export const MixedPercentageChange = Template.bind({});
+MixedPercentageChange.args = {
+  ethFiat: 1050,
+  tokenFiat: 450,
+  tokenFiat1dAgo: 500,
+  ethFiat1dAgo: 1000,
+};
diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx
new file mode 100644
index 000000000000..818ecc2f591f
--- /dev/null
+++ b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import AggregatedPercentage from './AggregatedPercentage';
+import { mockTheme } from '../../../../util/theme';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+describe('AggregatedPercentage', () => {
+  beforeEach(() => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectCurrentCurrency) return 'USD';
+    });
+  });
+  afterEach(() => {
+    (useSelector as jest.Mock).mockClear();
+  });
+  it('should render correctly', () => {
+    const { toJSON } = render(
+      <AggregatedPercentage
+        ethFiat={100}
+        tokenFiat={100}
+        tokenFiat1dAgo={90}
+        ethFiat1dAgo={90}
+      />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders positive percentage change correctly', () => {
+    const { getByText } = render(
+      <AggregatedPercentage
+        ethFiat={200}
+        tokenFiat={300}
+        tokenFiat1dAgo={250}
+        ethFiat1dAgo={150}
+      />,
+    );
+
+    expect(getByText('(+25.00%)')).toBeTruthy();
+    expect(getByText('+100 USD')).toBeTruthy();
+
+    expect(getByText('(+25.00%)').props.style).toMatchObject({
+      color: mockTheme.colors.success.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('renders negative percentage change correctly', () => {
+    const { getByText } = render(
+      <AggregatedPercentage
+        ethFiat={150}
+        tokenFiat={200}
+        tokenFiat1dAgo={300}
+        ethFiat1dAgo={200}
+      />,
+    );
+
+    expect(getByText('(-30.00%)')).toBeTruthy();
+    expect(getByText('-150 USD')).toBeTruthy();
+
+    expect(getByText('(-30.00%)').props.style).toMatchObject({
+      color: mockTheme.colors.error.default,
+      textTransform: 'uppercase',
+    });
+  });
+});
diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx
new file mode 100644
index 000000000000..bb037f3824fb
--- /dev/null
+++ b/app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { fontStyles } from '../../../../styles/common';
+import Text from '../../../../component-library/components/Texts/Text';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../util/theme';
+import { Colors } from '../../../../util/theme/models';
+import { renderFiat } from '../../../../util/number';
+import { useSelector } from 'react-redux';
+import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    wrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    balanceZeroStyle: {
+      color: colors.text.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+    balancePositiveStyle: {
+      color: colors.success.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+    balanceNegativeStyle: {
+      color: colors.error.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+  });
+
+const isValidAmount = (amount: number | null | undefined): boolean =>
+  amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+const AggregatedPercentage = ({
+  ethFiat,
+  tokenFiat,
+  tokenFiat1dAgo,
+  ethFiat1dAgo,
+}: {
+  ethFiat: number;
+  tokenFiat: number;
+  tokenFiat1dAgo: number;
+  ethFiat1dAgo: number;
+}) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const DECIMALS_TO_SHOW = 2;
+
+  const totalBalance = ethFiat + tokenFiat;
+  const totalBalance1dAgo = ethFiat1dAgo + tokenFiat1dAgo;
+
+  const amountChange = totalBalance - totalBalance1dAgo;
+
+  const percentageChange =
+    ((totalBalance - totalBalance1dAgo) / totalBalance1dAgo) * 100 || 0;
+
+  let percentageStyle = styles.balanceZeroStyle;
+
+  if (percentageChange === 0) {
+    percentageStyle = styles.balanceZeroStyle;
+  } else if (percentageChange > 0) {
+    percentageStyle = styles.balancePositiveStyle;
+  } else {
+    percentageStyle = styles.balanceNegativeStyle;
+  }
+
+  const formattedPercentage = isValidAmount(percentageChange)
+    ? `(${(percentageChange as number) >= 0 ? '+' : ''}${(
+        percentageChange as number
+      ).toFixed(2)}%)`
+    : '';
+
+  const formattedValuePrice = isValidAmount(amountChange)
+    ? `${(amountChange as number) >= 0 ? '+' : ''}${renderFiat(
+        amountChange,
+        currentCurrency,
+        DECIMALS_TO_SHOW,
+      )} `
+    : '';
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={percentageStyle}>{formattedValuePrice}</Text>
+      <Text style={percentageStyle}>{formattedPercentage}</Text>
+    </View>
+  );
+};
+
+export default AggregatedPercentage;
diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap b/app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap
new file mode 100644
index 000000000000..0466373e38f6
--- /dev/null
+++ b/app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AggregatedPercentage should render correctly 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "flexDirection": "row",
+    }
+  }
+>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1c8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    +20 USD 
+  </Text>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1c8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    (+11.11%)
+  </Text>
+</View>
+`;
diff --git a/app/component-library/components-temp/Price/AggregatedPercentage/index.ts b/app/component-library/components-temp/Price/AggregatedPercentage/index.ts
new file mode 100644
index 000000000000..3e7965d02fa3
--- /dev/null
+++ b/app/component-library/components-temp/Price/AggregatedPercentage/index.ts
@@ -0,0 +1 @@
+export { default } from './AggregatedPercentage';
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories.js b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories.js
new file mode 100644
index 000000000000..59612dcf9ba2
--- /dev/null
+++ b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import PercentageChange from './PercentageChange';
+import { createStore } from 'redux';
+import initialBackgroundState from '../../../../util/test/initial-background-state.json';
+
+const mockInitialState = {
+  wizard: {
+    step: 1,
+  },
+  engine: {
+    backgroundState: initialBackgroundState,
+  },
+};
+
+const rootReducer = (state = mockInitialState) => state;
+const store = createStore(rootReducer);
+
+export default {
+  title: 'Component Library / PercentageChange',
+  component: PercentageChange,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    ),
+  ],
+};
+
+const Template = (args) => <PercentageChange {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  value: 0,
+};
+
+export const PositiveChange = Template.bind({});
+PositiveChange.args = {
+  value: 5.5,
+};
+
+export const NegativeChange = Template.bind({});
+NegativeChange.args = {
+  value: -3.75,
+};
+
+export const NoChange = Template.bind({});
+NoChange.args = {
+  value: 0,
+};
+
+export const InvalidValue = Template.bind({});
+InvalidValue.args = {
+  value: null,
+};
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.test.tsx b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.test.tsx
new file mode 100644
index 000000000000..043aaf7e19db
--- /dev/null
+++ b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import PercentageChange from './PercentageChange';
+import { mockTheme } from '../../../../util/theme';
+
+describe('PercentageChange', () => {
+  it('should render correctly', () => {
+    const { toJSON } = render(<PercentageChange value={5.5} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+  it('displays a positive value correctly', () => {
+    const { getByText } = render(<PercentageChange value={5.5} />);
+    const positiveText = getByText('+5.50%');
+    expect(positiveText).toBeTruthy();
+    expect(positiveText.props.style).toMatchObject({
+      color: mockTheme.colors.success.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('displays a negative value correctly', () => {
+    const { getByText } = render(<PercentageChange value={-3.25} />);
+    const negativeText = getByText('-3.25%');
+    expect(negativeText).toBeTruthy();
+    expect(negativeText.props.style).toMatchObject({
+      color: mockTheme.colors.error.default,
+      textTransform: 'uppercase',
+    });
+  });
+
+  it('handles null value correctly', () => {
+    const { queryByText } = render(<PercentageChange value={null} />);
+    expect(queryByText(/\+/)).toBeNull();
+    expect(queryByText(/-/)).toBeNull();
+  });
+
+  it('handles undefined value correctly', () => {
+    const { queryByText } = render(<PercentageChange value={undefined} />);
+    expect(queryByText(/\+/)).toBeNull();
+    expect(queryByText(/-/)).toBeNull();
+  });
+});
diff --git a/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx
new file mode 100644
index 000000000000..1f051a4391d4
--- /dev/null
+++ b/app/component-library/components-temp/Price/PercentageChange/PercentageChange.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { fontStyles } from '../../../../styles/common';
+import Text from '../../../../component-library/components/Texts/Text';
+import { View, StyleSheet } from 'react-native';
+import { useTheme } from '../../../../util/theme';
+import { Colors } from '../../../../util/theme/models';
+
+const createStyles = (colors: Colors) =>
+  StyleSheet.create({
+    balancePositiveStyle: {
+      color: colors.success.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+    balanceNegativeStyle: {
+      color: colors.error.default,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
+  });
+
+const PercentageChange = ({ value }: { value: number | null | undefined }) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const percentageStyle =
+    value && value >= 0
+      ? styles.balancePositiveStyle
+      : styles.balanceNegativeStyle;
+
+  const isValidAmount = (amount: number | null | undefined): boolean =>
+    amount !== null && amount !== undefined && !Number.isNaN(amount);
+
+  const formattedValue = isValidAmount(value)
+    ? `${(value as number) >= 0 ? '+' : ''}${(value as number).toFixed(2)}%`
+    : '';
+
+  return (
+    <View>
+      <Text style={percentageStyle}>{formattedValue}</Text>
+    </View>
+  );
+};
+
+export default PercentageChange;
diff --git a/app/component-library/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap b/app/component-library/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap
new file mode 100644
index 000000000000..6433cce265cf
--- /dev/null
+++ b/app/component-library/components-temp/Price/PercentageChange/__snapshots__/PercentageChange.test.tsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PercentageChange should render correctly 1`] = `
+<View>
+  <Text
+    accessibilityRole="text"
+    style={
+      {
+        "color": "#1c8234",
+        "fontFamily": "EuclidCircularB-Regular",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "letterSpacing": 0,
+        "lineHeight": 22,
+        "textTransform": "uppercase",
+      }
+    }
+  >
+    +5.50%
+  </Text>
+</View>
+`;
diff --git a/app/component-library/components-temp/Price/PercentageChange/index.ts b/app/component-library/components-temp/Price/PercentageChange/index.ts
new file mode 100644
index 000000000000..6a3f076bb2ae
--- /dev/null
+++ b/app/component-library/components-temp/Price/PercentageChange/index.ts
@@ -0,0 +1 @@
+export { default } from './PercentageChange';
diff --git a/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap
index 5704e5960e90..99fc71bcbfce 100644
--- a/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/AssetElement/__snapshots__/index.test.tsx.snap
@@ -14,5 +14,15 @@ exports[`AssetElement should render correctly 1`] = `
     }
   }
   testID="asset-DAI"
-/>
+>
+  <View
+    style={
+      {
+        "alignItems": "flex-end",
+        "alignSelf": "flex-end",
+        "flex": 1,
+      }
+    }
+  />
+</TouchableOpacity>
 `;
diff --git a/app/components/UI/AssetElement/index.tsx b/app/components/UI/AssetElement/index.tsx
index e95c3a3a1f66..fdf638bb1256 100644
--- a/app/components/UI/AssetElement/index.tsx
+++ b/app/components/UI/AssetElement/index.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { TouchableOpacity, StyleSheet, Platform } from 'react-native';
+import { TouchableOpacity, StyleSheet, Platform, View } from 'react-native';
 import Text, {
   TextVariant,
 } from '../../../component-library/components/Texts/Text';
@@ -12,15 +12,20 @@ import {
   TOKEN_BALANCE_LOADING,
   TOKEN_RATE_UNDEFINED,
 } from '../Tokens/constants';
+import { Colors } from '../../../util/theme/models';
+import { fontStyles } from '../../../styles/common';
+import { useTheme } from '../../../util/theme';
+
 interface AssetElementProps {
   children?: React.ReactNode;
   asset: TokenI;
   onPress?: (asset: TokenI) => void;
   onLongPress?: ((asset: TokenI) => void) | null;
   balance?: string;
+  mainBalance?: string | null;
 }
 
-const createStyles = () =>
+const createStyles = (colors: Colors) =>
   StyleSheet.create({
     itemWrapper: {
       flex: 1,
@@ -32,6 +37,7 @@ const createStyles = () =>
     arrow: {
       flex: 1,
       alignSelf: 'flex-end',
+      alignItems: 'flex-end',
     },
     arrowIcon: {
       marginTop: 16,
@@ -39,6 +45,12 @@ const createStyles = () =>
     skeleton: {
       width: 50,
     },
+    balanceFiat: {
+      color: colors.text.alternative,
+      paddingHorizontal: 0,
+      ...fontStyles.normal,
+      textTransform: 'uppercase',
+    },
   });
 
 /**
@@ -48,10 +60,12 @@ const AssetElement: React.FC<AssetElementProps> = ({
   children,
   balance,
   asset,
+  mainBalance = null,
   onPress,
   onLongPress,
 }) => {
-  const styles = createStyles();
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
 
   const handleOnPress = () => {
     onPress?.(asset);
@@ -70,21 +84,32 @@ const AssetElement: React.FC<AssetElementProps> = ({
     >
       {children}
 
-      {balance && (
-        <Text
-          variant={
-            asset?.balanceError || asset.balanceFiat === TOKEN_RATE_UNDEFINED
-              ? TextVariant.BodySM
-              : TextVariant.BodyLGMedium
-          }
-        >
-          {balance === TOKEN_BALANCE_LOADING ? (
-            <SkeletonText thin style={styles.skeleton} />
-          ) : (
-            balance
-          )}
-        </Text>
-      )}
+      <View style={styles.arrow}>
+        {balance && (
+          <Text
+            variant={
+              asset?.balanceError || asset.balanceFiat === TOKEN_RATE_UNDEFINED
+                ? TextVariant.BodySM
+                : TextVariant.BodyLGMedium
+            }
+          >
+            {balance === TOKEN_BALANCE_LOADING ? (
+              <SkeletonText thin style={styles.skeleton} />
+            ) : (
+              balance
+            )}
+          </Text>
+        )}
+        {mainBalance ? (
+          <Text variant={TextVariant.BodyMD} style={styles.balanceFiat}>
+            {mainBalance === TOKEN_BALANCE_LOADING ? (
+              <SkeletonText thin style={styles.skeleton} />
+            ) : (
+              mainBalance
+            )}
+          </Text>
+        ) : null}
+      </View>
     </TouchableOpacity>
   );
 };
diff --git a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
index 4aaccc2fc586..eda582ee8983 100644
--- a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
@@ -782,22 +782,22 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                     />
                                   </View>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -828,21 +828,48 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                 ETH
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                   ETH
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -1021,22 +1048,22 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                     Bat
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -1067,21 +1094,48 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                &lt; 0.00001 BAT
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  &lt; 0.00001 BAT
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -1956,22 +2010,22 @@ exports[`Tokens should render correctly 1`] = `
                                     />
                                   </View>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -2002,21 +2056,48 @@ exports[`Tokens should render correctly 1`] = `
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                 ETH
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                   ETH
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -2195,22 +2276,22 @@ exports[`Tokens should render correctly 1`] = `
                                     Bat
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -2241,21 +2322,48 @@ exports[`Tokens should render correctly 1`] = `
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                &lt; 0.00001 BAT
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  &lt; 0.00001 BAT
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -3138,22 +3246,22 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                     />
                                   </View>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -3184,21 +3292,48 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                 ETH
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                   ETH
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -3377,22 +3512,22 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                     Bat
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -3423,21 +3558,48 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                &lt; 0.00001 BAT
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  &lt; 0.00001 BAT
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
@@ -3616,22 +3778,22 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                     Link
                                   </Text>
                                 </View>
-                                <Text
-                                  accessibilityRole="text"
-                                  style={
-                                    {
-                                      "color": "#6a737d",
-                                      "fontFamily": "EuclidCircularB-Regular",
-                                      "fontSize": 14,
-                                      "fontWeight": "400",
-                                      "letterSpacing": 0,
-                                      "lineHeight": 22,
-                                      "textTransform": "uppercase",
+                                <View>
+                                  <Text
+                                    accessibilityRole="text"
+                                    style={
+                                      {
+                                        "color": "#d73847",
+                                        "fontFamily": "EuclidCircularB-Regular",
+                                        "fontSize": 14,
+                                        "fontWeight": "400",
+                                        "letterSpacing": 0,
+                                        "lineHeight": 22,
+                                        "textTransform": "uppercase",
+                                      }
                                     }
-                                  }
-                                >
-                                  &lt; $0.01
-                                </Text>
+                                  />
+                                </View>
                               </View>
                               <Modal
                                 animationType="none"
@@ -3662,21 +3824,48 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 transparent={true}
                                 visible={false}
                               />
-                              <Text
-                                accessibilityRole="text"
+                              <View
                                 style={
                                   {
-                                    "color": "#141618",
-                                    "fontFamily": "Euclid Circular B",
-                                    "fontSize": 16,
-                                    "fontWeight": "500",
-                                    "letterSpacing": 0,
-                                    "lineHeight": 24,
+                                    "alignItems": "flex-end",
+                                    "alignSelf": "flex-end",
+                                    "flex": 1,
                                   }
                                 }
                               >
-                                0 LINK
-                              </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#141618",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 16,
+                                      "fontWeight": "500",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 24,
+                                    }
+                                  }
+                                >
+                                  0 LINK
+                                </Text>
+                                <Text
+                                  accessibilityRole="text"
+                                  style={
+                                    {
+                                      "color": "#6a737d",
+                                      "fontFamily": "EuclidCircularB-Regular",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                      "paddingHorizontal": 0,
+                                      "textTransform": "uppercase",
+                                    }
+                                  }
+                                >
+                                  &lt; $0.01
+                                </Text>
+                              </View>
                             </TouchableOpacity>
                           </View>
                           <View
diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
index 5e81b74159e5..3f24c9879279 100644
--- a/app/components/UI/Tokens/index.tsx
+++ b/app/components/UI/Tokens/index.tsx
@@ -68,7 +68,6 @@ import Button, {
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import createStyles from './styles';
-import SkeletonText from '../Ramp/components/SkeletonText';
 import Routes from '../../../constants/navigation/Routes';
 import { TOKEN_BALANCE_LOADING, TOKEN_RATE_UNDEFINED } from './constants';
 import AppConstants from '../../../core/AppConstants';
@@ -104,6 +103,9 @@ import Box from '../../UI/Ramp/components/Box';
 import SheetHeader from '../../../../app/component-library/components/Sheet/SheetHeader';
 import { isPortfolioUrl } from '../../../../app/util/url';
 import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
+import { zeroAddress } from 'ethereumjs-util';
+import PercentageChange from '../../../component-library/components-temp/Price/PercentageChange';
+import AggregatedPercentage from '../../../component-library/components-temp/Price/AggregatedPercentage';
 
 const Tokens: React.FC<TokensI> = ({ tokens }) => {
   const { colors } = useTheme();
@@ -135,6 +137,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
   );
   const { data: tokenBalances } = useTokenBalancesController();
   const tokenExchangeRates = useSelector(selectContractExchangeRates);
+
   const hideZeroBalanceTokens = useSelector(
     // TODO: Replace "any" with type
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -367,6 +370,10 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
     const { balanceFiat, balanceValueFormatted } = handleBalance(asset);
 
+    const pricePercentChange1d = itemAddress
+      ? tokenExchangeRates?.[itemAddress as `0x${string}`]?.pricePercentChange1d
+      : tokenExchangeRates?.[zeroAddress()]?.pricePercentChange1d;
+
     // render balances according to primary currency
     let mainBalance, secondaryBalance;
     mainBalance = TOKEN_BALANCE_LOADING;
@@ -434,6 +441,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         onLongPress={asset.isETH ? null : showRemoveMenu}
         asset={asset}
         balance={secondaryBalance}
+        mainBalance={mainBalance}
       >
         <BadgeWrapper
           badgeElement={
@@ -469,14 +477,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
             {/** Add button link to Portfolio Stake if token is mainnet ETH */}
             {asset.isETH && isMainnet && renderStakeButton(asset)}
           </View>
-
-          <Text variant={TextVariant.BodyMD} style={styles.balanceFiat}>
-            {mainBalance === TOKEN_BALANCE_LOADING ? (
-              <SkeletonText thin style={styles.skeleton} />
-            ) : (
-              mainBalance
-            )}
-          </Text>
+          <PercentageChange value={pricePercentChange1d} />
         </View>
 
         {renderScamWarningIcon(asset)}
@@ -622,12 +623,21 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
     return (
       <View style={styles.networth}>
-        <Text
-          style={styles.fiatBalance}
-          {...generateTestId(Platform, TOTAL_BALANCE_TEXT)}
-        >
-          {fiatBalance}
-        </Text>
+        <View>
+          <Text
+            style={styles.fiatBalance}
+            {...generateTestId(Platform, TOTAL_BALANCE_TEXT)}
+          >
+            {fiatBalance}
+          </Text>
+
+          <AggregatedPercentage
+            ethFiat={balance?.ethFiat}
+            tokenFiat={balance?.tokenFiat}
+            tokenFiat1dAgo={balance?.tokenFiat1dAgo}
+            ethFiat1dAgo={balance?.ethFiat1dAgo}
+          />
+        </View>
         <Button
           variant={ButtonVariants.Secondary}
           size={ButtonSize.Md}
diff --git a/app/core/Engine.ts b/app/core/Engine.ts
index 0330aa4a14d8..f5f6d2ef6924 100644
--- a/app/core/Engine.ts
+++ b/app/core/Engine.ts
@@ -203,6 +203,7 @@ import { selectSwapsChainFeatureFlags } from '../reducers/swaps';
 import { SmartTransactionStatuses } from '@metamask/smart-transactions-controller/dist/types';
 import { submitSmartTransactionHook } from '../util/smart-transactions/smart-publish-hook';
 import { SmartTransactionsControllerState } from '@metamask/smart-transactions-controller/dist/SmartTransactionsController';
+import { zeroAddress } from 'ethereumjs-util';
 
 const NON_EMPTY = 'NON_EMPTY';
 
@@ -1498,6 +1499,8 @@ class Engine {
   getTotalFiatAccountBalance = (): {
     ethFiat: number;
     tokenFiat: number;
+    tokenFiat1dAgo: number;
+    ethFiat1dAgo: number;
   } => {
     const {
       CurrencyRateController,
@@ -1525,9 +1528,12 @@ class Engine {
 
     const { accountsByChainId } = AccountTrackerController.state;
     const { tokens } = TokensController.state;
+    const { marketData: tokenExchangeRates } = TokenRatesController.state;
 
     let ethFiat = 0;
+    let ethFiat1dAgo = 0;
     let tokenFiat = 0;
+    let tokenFiat1dAgo = 0;
     const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
     if (accountsByChainId?.[toHexadecimal(chainId)]?.[selectedAddress]) {
       ethFiat = weiToFiatNumber(
@@ -1536,6 +1542,15 @@ class Engine {
         decimalsToShow,
       );
     }
+
+    ethFiat1dAgo =
+      ethFiat +
+        (ethFiat *
+          tokenExchangeRates?.[toHexadecimal(chainId)]?.[
+            zeroAddress() as `0x${string}`
+          ]?.pricePercentChange1d) /
+          100 || 0;
+
     if (tokens.length > 0) {
       const { contractBalances: tokenBalances } = TokenBalancesController.state;
       const { marketData } = TokenRatesController.state;
@@ -1544,8 +1559,9 @@ class Engine {
         (item: { address: string; balance?: string; decimals: number }) => {
           const exchangeRate =
             tokenExchangeRates && item.address in tokenExchangeRates
-              ? tokenExchangeRates[item.address as Hex]
+              ? tokenExchangeRates[item.address as Hex].price
               : undefined;
+
           const tokenBalance =
             item.balance ||
             (item.address in tokenBalances
@@ -1562,14 +1578,25 @@ class Engine {
             exchangeRate,
             decimalsToShow,
           );
+
+          const tokenBalance1dAgo =
+            tokenBalanceFiat +
+              (tokenBalanceFiat *
+                tokenExchangeRates?.[item.address as `0x${string}`]
+                  ?.pricePercentChange1d) /
+                100 || 0;
+
           tokenFiat += tokenBalanceFiat;
+          tokenFiat1dAgo += tokenBalance1dAgo;
         },
       );
     }
 
     return {
       ethFiat: ethFiat ?? 0,
+      ethFiat1dAgo: ethFiat1dAgo ?? 0,
       tokenFiat: tokenFiat ?? 0,
+      tokenFiat1dAgo: tokenFiat1dAgo ?? 0,
     };
   };
 
diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js
index df37be67be64..15d350c0261a 100644
--- a/storybook/storyLoader.js
+++ b/storybook/storyLoader.js
@@ -78,6 +78,8 @@ function loadStories() {
   require('../app/component-library/components-temp/Contracts/ContractBox/ContractBox.stories');
   require('../app/component-library/components-temp/CustomSpendCap/CustomSpendCap.stories');
   require('../app/component-library/components-temp/TagColored/TagColored.stories');
+  require('../app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories');
+  require('../app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories');
 }
 
 const stories = [
@@ -155,6 +157,8 @@ const stories = [
   '../app/component-library/components-temp/Contracts/ContractBox/ContractBox.stories',
   '../app/component-library/components-temp/CustomSpendCap/CustomSpendCap.stories',
   '../app/component-library/components-temp/TagColored/TagColored.stories',
+  '../app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.stories.js',
+  '../app/component-library/components-temp/Price/PercentageChange/PercentageChange.stories.js',
 ];
 
 module.exports = {