diff --git a/dev-client/src/components/tooltips/Tooltip.tsx b/dev-client/src/components/tooltips/Tooltip.tsx
index 561168d1a..5c8d0ed36 100644
--- a/dev-client/src/components/tooltips/Tooltip.tsx
+++ b/dev-client/src/components/tooltips/Tooltip.tsx
@@ -19,6 +19,8 @@ import {memo} from 'react';
 
 import {IPopoverProps, Popover} from 'native-base';
 
+import {Text} from 'terraso-mobile-client/components/NativeBaseAdapters';
+
 type TooltipProps = React.PropsWithChildren<{
   trigger: IPopoverProps['trigger'];
 }>;
@@ -26,15 +28,16 @@ type TooltipProps = React.PropsWithChildren<{
 export const Tooltip = memo(({trigger, children}: TooltipProps) => {
   return (
     <Popover trigger={trigger}>
-      <Popover.Content bg="grey.800" p="0px" shadow="0">
-        <Popover.Arrow bg="grey.800" shadow="0" />
-        <Popover.Body
-          bg="grey.800"
-          px="8px"
-          py="4px"
-          shadow="0"
-          _text={{color: 'primary.contrast', fontSize: '16px'}}>
-          {children}
+      <Popover.Content
+        borderWidth="0px"
+        borderRadius="4px"
+        mx="16px"
+        maxWidth="328px">
+        <Popover.Arrow bg="grey.900" borderColor="grey.900" />
+        <Popover.Body bg="grey.900" px="8px" py="4px">
+          <Text color="primary.contrast" variant="tooltip-label">
+            {children}
+          </Text>
         </Popover.Body>
       </Popover.Content>
     </Popover>
diff --git a/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx b/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx
index c8d55f353..2c1f2dfa7 100644
--- a/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx
+++ b/dev-client/src/screens/CreateSiteScreen/components/CreateSiteForm.tsx
@@ -108,9 +108,7 @@ export const CreateSiteForm = ({
                 {t('site.create.add_to_project_label')}
                 <HelpContentSpacer />
                 <HelpButton>
-                  <Text color="primary.contrast" variant="body1">
-                    {t('site.create.add_to_project_tooltip')}
-                  </Text>
+                  {t('site.create.add_to_project_tooltip')}
                 </HelpButton>
               </FormLabel>
               <ProjectSelect
diff --git a/dev-client/src/theme.ts b/dev-client/src/theme.ts
index 3af13f0bb..9f9f737f3 100644
--- a/dev-client/src/theme.ts
+++ b/dev-client/src/theme.ts
@@ -67,6 +67,7 @@ export const theme = extendTheme({
       300: '#E0E0E0',
       700: '#616161',
       800: '#424242',
+      900: '#212121',
     },
     action: {
       active: '#1A202C',
@@ -428,6 +429,11 @@ export const theme = extendTheme({
           lineHeight: '18px',
           letterSpacing: '0.16px',
         },
+        'tooltip-label': {
+          fontSize: '12px',
+          lineHeight: '14px',
+          fontWeight: 500,
+        },
       },
     },
     Heading: {