diff --git a/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap
index 779b19059..4b25ac0a2 100644
--- a/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap
+++ b/dev-client/__tests__/integration/__snapshots__/CreateProjectScreen-test.tsx.snap
@@ -1012,134 +1012,102 @@ exports[`renders correctly 1`] = `
                                                are visible to anyone on the LandPKS data portal.
                                             </Text>
                                             <View
+                                              accessibilityRole="button"
+                                              accessibilityState={
+                                                {
+                                                  "busy": undefined,
+                                                  "checked": undefined,
+                                                  "disabled": undefined,
+                                                  "expanded": undefined,
+                                                  "selected": undefined,
+                                                }
+                                              }
+                                              accessibilityValue={
+                                                {
+                                                  "max": undefined,
+                                                  "min": undefined,
+                                                  "now": undefined,
+                                                  "text": undefined,
+                                                }
+                                              }
+                                              accessible={true}
+                                              collapsable={false}
+                                              colorScheme="primary"
+                                              dataSet={{}}
+                                              focusable={true}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onResponderGrant={[Function]}
+                                              onResponderMove={[Function]}
+                                              onResponderRelease={[Function]}
+                                              onResponderTerminate={[Function]}
+                                              onResponderTerminationRequest={[Function]}
+                                              onStartShouldSetResponder={[Function]}
+                                              role="link"
                                               style={
                                                 {
-                                                  "paddingHorizontal": 11,
-                                                  "paddingVertical": 8,
+                                                  "alignItems": "center",
+                                                  "alignSelf": "flex-start",
+                                                  "backgroundColor": "#00000000",
+                                                  "borderRadius": 4,
+                                                  "flexDirection": "row",
+                                                  "justifyContent": "center",
+                                                  "paddingBottom": 6,
+                                                  "paddingLeft": 16,
+                                                  "paddingRight": 16,
+                                                  "paddingTop": 6,
                                                 }
                                               }
                                             >
                                               <View
-                                                accessibilityState={
-                                                  {
-                                                    "busy": undefined,
-                                                    "checked": undefined,
-                                                    "disabled": undefined,
-                                                    "expanded": undefined,
-                                                    "selected": undefined,
-                                                  }
-                                                }
-                                                accessibilityValue={
+                                                dataSet={{}}
+                                                style={
                                                   {
-                                                    "max": undefined,
-                                                    "min": undefined,
-                                                    "now": undefined,
-                                                    "text": undefined,
+                                                    "alignItems": "center",
+                                                    "flexDirection": "row",
                                                   }
                                                 }
-                                                accessible={true}
-                                                collapsable={false}
-                                                focusable={true}
-                                                onBlur={[Function]}
-                                                onClick={[Function]}
-                                                onFocus={[Function]}
-                                                onResponderGrant={[Function]}
-                                                onResponderMove={[Function]}
-                                                onResponderRelease={[Function]}
-                                                onResponderTerminate={[Function]}
-                                                onResponderTerminationRequest={[Function]}
-                                                onStartShouldSetResponder={[Function]}
+                                                test={true}
                                               >
                                                 <View
+                                                  dataSet={{}}
                                                   style={{}}
                                                 >
-                                                  <View
+                                                  <Text
+                                                    dataSet={{}}
                                                     style={
-                                                      [
-                                                        {
-                                                          "flexDirection": "row",
-                                                        },
-                                                        {
-                                                          "alignItems": "center",
-                                                        },
-                                                      ]
+                                                      {
+                                                        "backgroundColor": undefined,
+                                                        "color": "#028843",
+                                                        "fontFamily": undefined,
+                                                        "fontSize": 14,
+                                                        "fontStyle": "normal",
+                                                        "fontWeight": "500",
+                                                        "letterSpacing": 0.4,
+                                                        "lineHeight": 24,
+                                                        "textDecorationLine": undefined,
+                                                        "textTransform": "uppercase",
+                                                      }
                                                     }
                                                   >
-                                                    <Text
-                                                      letterSpacing="0.15px"
-                                                      lineHeight="24px"
-                                                      style={
-                                                        [
-                                                          {
-                                                            "marginRight": 4,
-                                                            "verticalAlign": "middle",
-                                                          },
-                                                          {
-                                                            "color": "#028843",
-                                                            "fontSize": 16,
-                                                            "fontWeight": "400",
-                                                            "textTransform": "uppercase",
-                                                          },
-                                                        ]
-                                                      }
-                                                    >
-                                                      LandPKS Data Portal
-                                                    </Text>
-                                                    <View
-                                                      accessibilityRole="button"
-                                                      accessibilityState={
-                                                        {
-                                                          "busy": undefined,
-                                                          "checked": undefined,
-                                                          "disabled": undefined,
-                                                          "expanded": undefined,
-                                                          "selected": undefined,
-                                                        }
-                                                      }
-                                                      accessibilityValue={
-                                                        {
-                                                          "max": undefined,
-                                                          "min": undefined,
-                                                          "now": undefined,
-                                                          "text": undefined,
-                                                        }
-                                                      }
-                                                      accessible={true}
-                                                      collapsable={false}
-                                                      colorScheme="primary"
-                                                      dataSet={{}}
-                                                      focusable={true}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onResponderGrant={[Function]}
-                                                      onResponderMove={[Function]}
-                                                      onResponderRelease={[Function]}
-                                                      onResponderTerminate={[Function]}
-                                                      onResponderTerminationRequest={[Function]}
-                                                      onStartShouldSetResponder={[Function]}
-                                                      style={
-                                                        {
-                                                          "alignItems": "center",
-                                                          "borderRadius": 4,
-                                                          "flexDirection": "row",
-                                                          "justifyContent": "center",
-                                                          "paddingBottom": 4,
-                                                          "paddingLeft": 4,
-                                                          "paddingRight": 4,
-                                                          "paddingTop": 4,
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        color="#028843"
-                                                        name="open-in-new"
-                                                        size={24}
-                                                        style={{}}
-                                                      />
-                                                    </View>
-                                                  </View>
+                                                    LandPKS Data Portal
+                                                  </Text>
                                                 </View>
+                                                <View
+                                                  dataSet={{}}
+                                                  style={
+                                                    {
+                                                      "width": 6,
+                                                    }
+                                                  }
+                                                />
+                                                <Icon
+                                                  color="#028843"
+                                                  name="open-in-new"
+                                                  size={20}
+                                                  style={{}}
+                                                />
                                               </View>
                                             </View>
                                             <Text
diff --git a/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap
index 00bc8b04f..6001657da 100644
--- a/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap
+++ b/dev-client/__tests__/integration/__snapshots__/CreateSiteScreen-test.tsx.snap
@@ -1253,134 +1253,102 @@ exports[`renders correctly 1`] = `
                                            are visible to anyone on the LandPKS data portal.
                                         </Text>
                                         <View
+                                          accessibilityRole="button"
+                                          accessibilityState={
+                                            {
+                                              "busy": undefined,
+                                              "checked": undefined,
+                                              "disabled": undefined,
+                                              "expanded": undefined,
+                                              "selected": undefined,
+                                            }
+                                          }
+                                          accessibilityValue={
+                                            {
+                                              "max": undefined,
+                                              "min": undefined,
+                                              "now": undefined,
+                                              "text": undefined,
+                                            }
+                                          }
+                                          accessible={true}
+                                          collapsable={false}
+                                          colorScheme="primary"
+                                          dataSet={{}}
+                                          focusable={true}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onResponderGrant={[Function]}
+                                          onResponderMove={[Function]}
+                                          onResponderRelease={[Function]}
+                                          onResponderTerminate={[Function]}
+                                          onResponderTerminationRequest={[Function]}
+                                          onStartShouldSetResponder={[Function]}
+                                          role="link"
                                           style={
                                             {
-                                              "paddingHorizontal": 11,
-                                              "paddingVertical": 8,
+                                              "alignItems": "center",
+                                              "alignSelf": "flex-start",
+                                              "backgroundColor": "#00000000",
+                                              "borderRadius": 4,
+                                              "flexDirection": "row",
+                                              "justifyContent": "center",
+                                              "paddingBottom": 6,
+                                              "paddingLeft": 16,
+                                              "paddingRight": 16,
+                                              "paddingTop": 6,
                                             }
                                           }
                                         >
                                           <View
-                                            accessibilityState={
-                                              {
-                                                "busy": undefined,
-                                                "checked": undefined,
-                                                "disabled": undefined,
-                                                "expanded": undefined,
-                                                "selected": undefined,
-                                              }
-                                            }
-                                            accessibilityValue={
+                                            dataSet={{}}
+                                            style={
                                               {
-                                                "max": undefined,
-                                                "min": undefined,
-                                                "now": undefined,
-                                                "text": undefined,
+                                                "alignItems": "center",
+                                                "flexDirection": "row",
                                               }
                                             }
-                                            accessible={true}
-                                            collapsable={false}
-                                            focusable={true}
-                                            onBlur={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onResponderGrant={[Function]}
-                                            onResponderMove={[Function]}
-                                            onResponderRelease={[Function]}
-                                            onResponderTerminate={[Function]}
-                                            onResponderTerminationRequest={[Function]}
-                                            onStartShouldSetResponder={[Function]}
+                                            test={true}
                                           >
                                             <View
+                                              dataSet={{}}
                                               style={{}}
                                             >
-                                              <View
+                                              <Text
+                                                dataSet={{}}
                                                 style={
-                                                  [
-                                                    {
-                                                      "flexDirection": "row",
-                                                    },
-                                                    {
-                                                      "alignItems": "center",
-                                                    },
-                                                  ]
+                                                  {
+                                                    "backgroundColor": undefined,
+                                                    "color": "#028843",
+                                                    "fontFamily": undefined,
+                                                    "fontSize": 14,
+                                                    "fontStyle": "normal",
+                                                    "fontWeight": "500",
+                                                    "letterSpacing": 0.4,
+                                                    "lineHeight": 24,
+                                                    "textDecorationLine": undefined,
+                                                    "textTransform": "uppercase",
+                                                  }
                                                 }
                                               >
-                                                <Text
-                                                  letterSpacing="0.15px"
-                                                  lineHeight="24px"
-                                                  style={
-                                                    [
-                                                      {
-                                                        "marginRight": 4,
-                                                        "verticalAlign": "middle",
-                                                      },
-                                                      {
-                                                        "color": "#028843",
-                                                        "fontSize": 16,
-                                                        "fontWeight": "400",
-                                                        "textTransform": "uppercase",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  LandPKS Data Portal
-                                                </Text>
-                                                <View
-                                                  accessibilityRole="button"
-                                                  accessibilityState={
-                                                    {
-                                                      "busy": undefined,
-                                                      "checked": undefined,
-                                                      "disabled": undefined,
-                                                      "expanded": undefined,
-                                                      "selected": undefined,
-                                                    }
-                                                  }
-                                                  accessibilityValue={
-                                                    {
-                                                      "max": undefined,
-                                                      "min": undefined,
-                                                      "now": undefined,
-                                                      "text": undefined,
-                                                    }
-                                                  }
-                                                  accessible={true}
-                                                  collapsable={false}
-                                                  colorScheme="primary"
-                                                  dataSet={{}}
-                                                  focusable={true}
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onResponderGrant={[Function]}
-                                                  onResponderMove={[Function]}
-                                                  onResponderRelease={[Function]}
-                                                  onResponderTerminate={[Function]}
-                                                  onResponderTerminationRequest={[Function]}
-                                                  onStartShouldSetResponder={[Function]}
-                                                  style={
-                                                    {
-                                                      "alignItems": "center",
-                                                      "borderRadius": 4,
-                                                      "flexDirection": "row",
-                                                      "justifyContent": "center",
-                                                      "paddingBottom": 4,
-                                                      "paddingLeft": 4,
-                                                      "paddingRight": 4,
-                                                      "paddingTop": 4,
-                                                    }
-                                                  }
-                                                >
-                                                  <Icon
-                                                    color="#028843"
-                                                    name="open-in-new"
-                                                    size={24}
-                                                    style={{}}
-                                                  />
-                                                </View>
-                                              </View>
+                                                LandPKS Data Portal
+                                              </Text>
                                             </View>
+                                            <View
+                                              dataSet={{}}
+                                              style={
+                                                {
+                                                  "width": 6,
+                                                }
+                                              }
+                                            />
+                                            <Icon
+                                              color="#028843"
+                                              name="open-in-new"
+                                              size={20}
+                                              style={{}}
+                                            />
                                           </View>
                                         </View>
                                         <Text
diff --git a/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap b/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap
index fec1a7373..a7f038cc6 100644
--- a/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap
+++ b/dev-client/__tests__/integration/__snapshots__/ProjectViewScreen-test.tsx.snap
@@ -1422,134 +1422,102 @@ exports[`renders correctly 1`] = `
                                                        are visible to anyone on the LandPKS data portal.
                                                     </Text>
                                                     <View
+                                                      accessibilityRole="button"
+                                                      accessibilityState={
+                                                        {
+                                                          "busy": undefined,
+                                                          "checked": undefined,
+                                                          "disabled": undefined,
+                                                          "expanded": undefined,
+                                                          "selected": undefined,
+                                                        }
+                                                      }
+                                                      accessibilityValue={
+                                                        {
+                                                          "max": undefined,
+                                                          "min": undefined,
+                                                          "now": undefined,
+                                                          "text": undefined,
+                                                        }
+                                                      }
+                                                      accessible={true}
+                                                      collapsable={false}
+                                                      colorScheme="primary"
+                                                      dataSet={{}}
+                                                      focusable={true}
+                                                      onBlur={[Function]}
+                                                      onClick={[Function]}
+                                                      onFocus={[Function]}
+                                                      onResponderGrant={[Function]}
+                                                      onResponderMove={[Function]}
+                                                      onResponderRelease={[Function]}
+                                                      onResponderTerminate={[Function]}
+                                                      onResponderTerminationRequest={[Function]}
+                                                      onStartShouldSetResponder={[Function]}
+                                                      role="link"
                                                       style={
                                                         {
-                                                          "paddingHorizontal": 11,
-                                                          "paddingVertical": 8,
+                                                          "alignItems": "center",
+                                                          "alignSelf": "flex-start",
+                                                          "backgroundColor": "#00000000",
+                                                          "borderRadius": 4,
+                                                          "flexDirection": "row",
+                                                          "justifyContent": "center",
+                                                          "paddingBottom": 6,
+                                                          "paddingLeft": 16,
+                                                          "paddingRight": 16,
+                                                          "paddingTop": 6,
                                                         }
                                                       }
                                                     >
                                                       <View
-                                                        accessibilityState={
-                                                          {
-                                                            "busy": undefined,
-                                                            "checked": undefined,
-                                                            "disabled": undefined,
-                                                            "expanded": undefined,
-                                                            "selected": undefined,
-                                                          }
-                                                        }
-                                                        accessibilityValue={
+                                                        dataSet={{}}
+                                                        style={
                                                           {
-                                                            "max": undefined,
-                                                            "min": undefined,
-                                                            "now": undefined,
-                                                            "text": undefined,
+                                                            "alignItems": "center",
+                                                            "flexDirection": "row",
                                                           }
                                                         }
-                                                        accessible={true}
-                                                        collapsable={false}
-                                                        focusable={true}
-                                                        onBlur={[Function]}
-                                                        onClick={[Function]}
-                                                        onFocus={[Function]}
-                                                        onResponderGrant={[Function]}
-                                                        onResponderMove={[Function]}
-                                                        onResponderRelease={[Function]}
-                                                        onResponderTerminate={[Function]}
-                                                        onResponderTerminationRequest={[Function]}
-                                                        onStartShouldSetResponder={[Function]}
+                                                        test={true}
                                                       >
                                                         <View
+                                                          dataSet={{}}
                                                           style={{}}
                                                         >
-                                                          <View
+                                                          <Text
+                                                            dataSet={{}}
                                                             style={
-                                                              [
-                                                                {
-                                                                  "flexDirection": "row",
-                                                                },
-                                                                {
-                                                                  "alignItems": "center",
-                                                                },
-                                                              ]
+                                                              {
+                                                                "backgroundColor": undefined,
+                                                                "color": "#028843",
+                                                                "fontFamily": undefined,
+                                                                "fontSize": 14,
+                                                                "fontStyle": "normal",
+                                                                "fontWeight": "500",
+                                                                "letterSpacing": 0.4,
+                                                                "lineHeight": 24,
+                                                                "textDecorationLine": undefined,
+                                                                "textTransform": "uppercase",
+                                                              }
                                                             }
                                                           >
-                                                            <Text
-                                                              letterSpacing="0.15px"
-                                                              lineHeight="24px"
-                                                              style={
-                                                                [
-                                                                  {
-                                                                    "marginRight": 4,
-                                                                    "verticalAlign": "middle",
-                                                                  },
-                                                                  {
-                                                                    "color": "#028843",
-                                                                    "fontSize": 16,
-                                                                    "fontWeight": "400",
-                                                                    "textTransform": "uppercase",
-                                                                  },
-                                                                ]
-                                                              }
-                                                            >
-                                                              LandPKS Data Portal
-                                                            </Text>
-                                                            <View
-                                                              accessibilityRole="button"
-                                                              accessibilityState={
-                                                                {
-                                                                  "busy": undefined,
-                                                                  "checked": undefined,
-                                                                  "disabled": undefined,
-                                                                  "expanded": undefined,
-                                                                  "selected": undefined,
-                                                                }
-                                                              }
-                                                              accessibilityValue={
-                                                                {
-                                                                  "max": undefined,
-                                                                  "min": undefined,
-                                                                  "now": undefined,
-                                                                  "text": undefined,
-                                                                }
-                                                              }
-                                                              accessible={true}
-                                                              collapsable={false}
-                                                              colorScheme="primary"
-                                                              dataSet={{}}
-                                                              focusable={true}
-                                                              onBlur={[Function]}
-                                                              onClick={[Function]}
-                                                              onFocus={[Function]}
-                                                              onResponderGrant={[Function]}
-                                                              onResponderMove={[Function]}
-                                                              onResponderRelease={[Function]}
-                                                              onResponderTerminate={[Function]}
-                                                              onResponderTerminationRequest={[Function]}
-                                                              onStartShouldSetResponder={[Function]}
-                                                              style={
-                                                                {
-                                                                  "alignItems": "center",
-                                                                  "borderRadius": 4,
-                                                                  "flexDirection": "row",
-                                                                  "justifyContent": "center",
-                                                                  "paddingBottom": 4,
-                                                                  "paddingLeft": 4,
-                                                                  "paddingRight": 4,
-                                                                  "paddingTop": 4,
-                                                                }
-                                                              }
-                                                            >
-                                                              <Icon
-                                                                color="#028843"
-                                                                name="open-in-new"
-                                                                size={24}
-                                                                style={{}}
-                                                              />
-                                                            </View>
-                                                          </View>
+                                                            LandPKS Data Portal
+                                                          </Text>
                                                         </View>
+                                                        <View
+                                                          dataSet={{}}
+                                                          style={
+                                                            {
+                                                              "width": 6,
+                                                            }
+                                                          }
+                                                        />
+                                                        <Icon
+                                                          color="#028843"
+                                                          name="open-in-new"
+                                                          size={20}
+                                                          style={{}}
+                                                        />
                                                       </View>
                                                     </View>
                                                     <Text
diff --git a/dev-client/src/components/buttons/TextButton.tsx b/dev-client/src/components/buttons/TextButton.tsx
new file mode 100644
index 000000000..394ba1f61
--- /dev/null
+++ b/dev-client/src/components/buttons/TextButton.tsx
@@ -0,0 +1,103 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import {useState} from 'react';
+import {AccessibilityProps} from 'react-native';
+import {PressableProps} from 'react-native-paper/lib/typescript/components/TouchableRipple/Pressable';
+
+import {Button} from 'native-base';
+
+import {Icon, IconName} from 'terraso-mobile-client/components/icons/Icon';
+
+export type TextButtonType = 'default' | 'error';
+
+export type TextButtonProps = {
+  label: string;
+  type?: TextButtonType;
+  role: AccessibilityProps['role'];
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  disabled?: boolean;
+  onPress?: PressableProps['onPress'];
+};
+
+export const TextButton = ({
+  label,
+  type = 'default',
+  role,
+  leftIcon,
+  rightIcon,
+  disabled,
+  onPress,
+}: TextButtonProps) => {
+  const [pressed, setPressed] = useState(false);
+  const colors = disabled ? COLORS.disabled : COLORS[type];
+
+  return (
+    <Button
+      size="md"
+      alignSelf="flex-start"
+      background="transparent"
+      _text={{
+        textTransform: 'uppercase',
+        textDecoration: 'none',
+        color: colors.default,
+      }}
+      _pressed={{
+        background: 'transparent',
+        _text: {textDecoration: 'none', color: colors.pressed},
+      }}
+      leftIcon={
+        leftIcon && (
+          <Icon
+            name={leftIcon}
+            color={!pressed ? colors.default : colors.pressed}
+          />
+        )
+      }
+      rightIcon={
+        rightIcon && (
+          <Icon
+            name={rightIcon}
+            color={!pressed ? colors.default : colors.pressed}
+          />
+        )
+      }
+      disabled={disabled}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      onPress={onPress}
+      role={role}>
+      {label}
+    </Button>
+  );
+};
+
+export const COLORS = {
+  default: {
+    default: 'primary.main',
+    pressed: 'primary.dark',
+  },
+  error: {
+    default: 'error.main',
+    pressed: 'error.content',
+  },
+  disabled: {
+    default: 'text.disabled',
+    pressed: 'text.disabled',
+  },
+};
diff --git a/dev-client/src/components/links/ExternalLink.tsx b/dev-client/src/components/links/ExternalLink.tsx
index 002fa0943..25a30303a 100644
--- a/dev-client/src/components/links/ExternalLink.tsx
+++ b/dev-client/src/components/links/ExternalLink.tsx
@@ -15,17 +15,10 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, {useCallback, useMemo} from 'react';
-import {Linking, Pressable, StyleSheet, View} from 'react-native';
+import {useCallback, useMemo} from 'react';
+import {Linking} from 'react-native';
 
-import {IconButton as NativeIconButton} from 'native-base';
-
-import {Icon} from 'terraso-mobile-client/components/icons/Icon';
-import {
-  Box,
-  Row,
-  Text,
-} from 'terraso-mobile-client/components/NativeBaseAdapters';
+import {TextButton} from 'terraso-mobile-client/components/buttons/TextButton';
 import {validateUrl} from 'terraso-mobile-client/util';
 
 export type ExternalLinkProps = {
@@ -33,44 +26,18 @@ export type ExternalLinkProps = {
   url: string;
 };
 
-export const ExternalLink = React.forwardRef(
-  ({label, url}: ExternalLinkProps, ref: React.Ref<unknown>) => {
-    const isValidUrl = useMemo(() => validateUrl(url), [url]);
-    const openUrl = useCallback(() => Linking.openURL(url), [url]);
-
-    return (
-      isValidUrl && (
-        <View style={styles.container}>
-          <Pressable onPress={openUrl}>
-            <Box>
-              <Row alignItems="center">
-                <Text
-                  color="primary.main"
-                  fontSize="md"
-                  textTransform="uppercase"
-                  style={styles.label}>
-                  {label}
-                </Text>
-                <NativeIconButton
-                  ref={ref}
-                  icon={<Icon name="open-in-new" />}
-                />
-              </Row>
-            </Box>
-          </Pressable>
-        </View>
-      )
-    );
-  },
-);
+export const ExternalLink = ({label, url}: ExternalLinkProps) => {
+  const isValidUrl = useMemo(() => validateUrl(url), [url]);
+  const openUrl = useCallback(() => Linking.openURL(url), [url]);
 
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 11,
-    paddingVertical: 8,
-  },
-  label: {
-    marginRight: 4,
-    verticalAlign: 'middle',
-  },
-});
+  return (
+    isValidUrl && (
+      <TextButton
+        role="link"
+        label={label}
+        rightIcon="open-in-new"
+        onPress={openUrl}
+      />
+    )
+  );
+};