diff --git a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
index 85739b38e4c..057890f6b46 100644
--- a/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/Tokens/__snapshots__/index.test.tsx.snap
@@ -321,7 +321,8 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                               Object {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "marginLeft": 16,
+                                "justifyContent": "space-between",
+                                "marginHorizontal": 16,
                                 "marginVertical": 24,
                               }
                             }
@@ -339,21 +340,20 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                             >
                               0 USD
                             </Text>
-                            <TouchableOpacity
+                            <Button
+                              endIconName="Export"
+                              label="Portfolio"
                               onPress={[Function]}
+                              size="40"
                               style={
                                 Object {
-                                  "marginLeft": 8,
+                                  "marginVertical": 5,
                                 }
                               }
                               testID="portfolio-button"
-                            >
-                              <Icon
-                                color="Primary"
-                                name="Diagram"
-                                size="20"
-                              />
-                            </TouchableOpacity>
+                              variant="Secondary"
+                              width="full"
+                            />
                           </View>
                         }
                         data={
@@ -415,7 +415,8 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                 Object {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "marginLeft": 16,
+                                  "justifyContent": "space-between",
+                                  "marginHorizontal": 16,
                                   "marginVertical": 24,
                                 }
                               }
@@ -436,25 +437,54 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                activeOpacity={0.5}
                                 onPress={[Function]}
+                                onPressIn={[Function]}
+                                onPressOut={[Function]}
                                 style={
                                   Object {
-                                    "marginLeft": 8,
+                                    "alignItems": "center",
+                                    "alignSelf": "stretch",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#0376C9",
+                                    "borderRadius": 20,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "height": 40,
+                                    "justifyContent": "center",
+                                    "marginVertical": 5,
+                                    "paddingHorizontal": 16,
                                   }
                                 }
                                 testID="portfolio-button"
+                                variant="Secondary"
                               >
+                                <Text
+                                  style={
+                                    Object {
+                                      "color": "#0376C9",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                    }
+                                  }
+                                >
+                                  Portfolio
+                                </Text>
                                 <SvgMock
                                   color="#0376C9"
-                                  height={20}
-                                  name="Diagram"
+                                  height={16}
+                                  name="Export"
                                   style={
                                     Object {
-                                      "height": 20,
-                                      "width": 20,
+                                      "height": 16,
+                                      "marginLeft": 8,
+                                      "width": 16,
                                     }
                                   }
-                                  width={20}
+                                  width={16}
                                 />
                               </TouchableOpacity>
                             </View>
@@ -1276,7 +1306,8 @@ exports[`Tokens should render correctly 1`] = `
                               Object {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "marginLeft": 16,
+                                "justifyContent": "space-between",
+                                "marginHorizontal": 16,
                                 "marginVertical": 24,
                               }
                             }
@@ -1294,21 +1325,20 @@ exports[`Tokens should render correctly 1`] = `
                             >
                               0 USD
                             </Text>
-                            <TouchableOpacity
+                            <Button
+                              endIconName="Export"
+                              label="Portfolio"
                               onPress={[Function]}
+                              size="40"
                               style={
                                 Object {
-                                  "marginLeft": 8,
+                                  "marginVertical": 5,
                                 }
                               }
                               testID="portfolio-button"
-                            >
-                              <Icon
-                                color="Primary"
-                                name="Diagram"
-                                size="20"
-                              />
-                            </TouchableOpacity>
+                              variant="Secondary"
+                              width="full"
+                            />
                           </View>
                         }
                         data={
@@ -1370,7 +1400,8 @@ exports[`Tokens should render correctly 1`] = `
                                 Object {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "marginLeft": 16,
+                                  "justifyContent": "space-between",
+                                  "marginHorizontal": 16,
                                   "marginVertical": 24,
                                 }
                               }
@@ -1391,25 +1422,54 @@ exports[`Tokens should render correctly 1`] = `
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                activeOpacity={0.5}
                                 onPress={[Function]}
+                                onPressIn={[Function]}
+                                onPressOut={[Function]}
                                 style={
                                   Object {
-                                    "marginLeft": 8,
+                                    "alignItems": "center",
+                                    "alignSelf": "stretch",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#0376C9",
+                                    "borderRadius": 20,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "height": 40,
+                                    "justifyContent": "center",
+                                    "marginVertical": 5,
+                                    "paddingHorizontal": 16,
                                   }
                                 }
                                 testID="portfolio-button"
+                                variant="Secondary"
                               >
+                                <Text
+                                  style={
+                                    Object {
+                                      "color": "#0376C9",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                    }
+                                  }
+                                >
+                                  Portfolio
+                                </Text>
                                 <SvgMock
                                   color="#0376C9"
-                                  height={20}
-                                  name="Diagram"
+                                  height={16}
+                                  name="Export"
                                   style={
                                     Object {
-                                      "height": 20,
-                                      "width": 20,
+                                      "height": 16,
+                                      "marginLeft": 8,
+                                      "width": 16,
                                     }
                                   }
-                                  width={20}
+                                  width={16}
                                 />
                               </TouchableOpacity>
                             </View>
@@ -2231,7 +2291,8 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                               Object {
                                 "alignItems": "center",
                                 "flexDirection": "row",
-                                "marginLeft": 16,
+                                "justifyContent": "space-between",
+                                "marginHorizontal": 16,
                                 "marginVertical": 24,
                               }
                             }
@@ -2249,21 +2310,20 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                             >
                               0 USD
                             </Text>
-                            <TouchableOpacity
+                            <Button
+                              endIconName="Export"
+                              label="Portfolio"
                               onPress={[Function]}
+                              size="40"
                               style={
                                 Object {
-                                  "marginLeft": 8,
+                                  "marginVertical": 5,
                                 }
                               }
                               testID="portfolio-button"
-                            >
-                              <Icon
-                                color="Primary"
-                                name="Diagram"
-                                size="20"
-                              />
-                            </TouchableOpacity>
+                              variant="Secondary"
+                              width="full"
+                            />
                           </View>
                         }
                         data={
@@ -2333,7 +2393,8 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 Object {
                                   "alignItems": "center",
                                   "flexDirection": "row",
-                                  "marginLeft": 16,
+                                  "justifyContent": "space-between",
+                                  "marginHorizontal": 16,
                                   "marginVertical": 24,
                                 }
                               }
@@ -2354,25 +2415,54 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                                 0 USD
                               </Text>
                               <TouchableOpacity
+                                activeOpacity={0.5}
                                 onPress={[Function]}
+                                onPressIn={[Function]}
+                                onPressOut={[Function]}
                                 style={
                                   Object {
-                                    "marginLeft": 8,
+                                    "alignItems": "center",
+                                    "alignSelf": "stretch",
+                                    "backgroundColor": "transparent",
+                                    "borderColor": "#0376C9",
+                                    "borderRadius": 20,
+                                    "borderWidth": 1,
+                                    "flexDirection": "row",
+                                    "height": 40,
+                                    "justifyContent": "center",
+                                    "marginVertical": 5,
+                                    "paddingHorizontal": 16,
                                   }
                                 }
                                 testID="portfolio-button"
+                                variant="Secondary"
                               >
+                                <Text
+                                  style={
+                                    Object {
+                                      "color": "#0376C9",
+                                      "fontFamily": "Euclid Circular B",
+                                      "fontSize": 14,
+                                      "fontWeight": "400",
+                                      "letterSpacing": 0,
+                                      "lineHeight": 22,
+                                    }
+                                  }
+                                >
+                                  Portfolio
+                                </Text>
                                 <SvgMock
                                   color="#0376C9"
-                                  height={20}
-                                  name="Diagram"
+                                  height={16}
+                                  name="Export"
                                   style={
                                     Object {
-                                      "height": 20,
-                                      "width": 20,
+                                      "height": 16,
+                                      "marginLeft": 8,
+                                      "width": 16,
                                     }
                                   }
-                                  width={20}
+                                  width={16}
                                 />
                               </TouchableOpacity>
                             </View>
diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx
index ea54f3e0b35..b7923cecc24 100644
--- a/app/components/UI/Tokens/index.tsx
+++ b/app/components/UI/Tokens/index.tsx
@@ -72,11 +72,7 @@ import SkeletonText from '../../../components/UI/FiatOnRampAggregator/components
 import Routes from '../../../constants/navigation/Routes';
 import { TOKEN_BALANCE_LOADING, TOKEN_RATE_UNDEFINED } from './constants';
 import AppConstants from '../../../core/AppConstants';
-import Icon, {
-  IconColor,
-  IconName,
-  IconSize,
-} from '../../../component-library/components/Icons/Icon';
+import { IconName } from '../../../component-library/components/Icons/Icon';
 
 import {
   PORTFOLIO_BUTTON,
@@ -455,17 +451,16 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
         >
           {fiatBalance}
         </Text>
-        <TouchableOpacity
+        <Button
+          variant={ButtonVariants.Secondary}
+          size={ButtonSize.Md}
+          width={ButtonWidthTypes.Full}
+          style={styles.buyButton}
           onPress={onOpenPortfolio}
-          style={styles.portfolioLink}
+          label={strings('asset_overview.portfolio_button')}
           {...generateTestId(Platform, PORTFOLIO_BUTTON)}
-        >
-          <Icon
-            color={IconColor.Primary}
-            name={IconName.Diagram}
-            size={IconSize.Md}
-          />
-        </TouchableOpacity>
+          endIconName={IconName.Export}
+        />
       </View>
     );
   };
diff --git a/app/components/UI/Tokens/styles.ts b/app/components/UI/Tokens/styles.ts
index d349d941850..a67b68273d3 100644
--- a/app/components/UI/Tokens/styles.ts
+++ b/app/components/UI/Tokens/styles.ts
@@ -89,7 +89,8 @@ const createStyles = (colors: Colors) =>
     networth: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginLeft: 16,
+      marginHorizontal: 16,
+      justifyContent: 'space-between',
       marginVertical: 24,
     },
     fiatBalance: {