diff --git a/web/components/widgets/share-profile-button.tsx b/web/components/widgets/share-profile-button.tsx
index 5c0450d1..e911ff90 100644
--- a/web/components/widgets/share-profile-button.tsx
+++ b/web/components/widgets/share-profile-button.tsx
@@ -1,11 +1,15 @@
 import {ENV_CONFIG} from 'common/envs/constants'
-import {Button} from 'web/components/buttons/button'
+import {Button, ColorType} from 'web/components/buttons/button'
 import {CopyLinkOrShareButton} from 'web/components/buttons/copy-link-button'
 import {useUser} from 'web/hooks/use-user'
 import {useT} from 'web/lib/locale'
 
-export const ShareProfileButton = (props: {username: string; className?: string}) => {
-  const {username, className} = props
+export const ShareProfileButton = (props: {
+  username: string
+  className?: string
+  color?: ColorType
+}) => {
+  const {username, className, color} = props
   const currentUser = useUser()
   const t = useT()
   const shareUrl =
@@ -18,7 +22,7 @@ export const ShareProfileButton = (props: {username: string; className?: string}
       className={className}
       url={shareUrl}
       eventTrackingName="shareprofile"
-      color={'gray-outline'}
+      color={color}
     >
       <div className="ml-2 text-sm">{t('button.share.label', 'Copy sharing link')}</div>
     </CopyLinkOrShareButton>
diff --git a/web/pages/onboarding/soft-gate.tsx b/web/pages/onboarding/soft-gate.tsx
index 49ebb130..17fce35f 100644
--- a/web/pages/onboarding/soft-gate.tsx
+++ b/web/pages/onboarding/soft-gate.tsx
@@ -61,7 +61,7 @@ export default function SoftGatePage() {
               <Row className={'gap-4'}>
                 <ShareProfileOnXButton username={user?.username} />
                 <ShareProfileOnLinkedinButton username={user?.username} />
-                <ShareProfileButton username={user?.username} className={''} />
+                <ShareProfileButton username={user?.username} color={'gray-outline'} />
               </Row>
             </Col>
           )}