diff --git a/packages/ui/src/common/components/icons/socials/Twitter.tsx b/packages/ui/src/common/components/icons/socials/Twitter.tsx
index b5e425cae8..8fc2b3bbc3 100644
--- a/packages/ui/src/common/components/icons/socials/Twitter.tsx
+++ b/packages/ui/src/common/components/icons/socials/Twitter.tsx
@@ -2,11 +2,15 @@ import React from 'react'
 
 export const TwitterIcon = ({ className }: { className?: string }) => {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className={className}>
-      <path
-        d="M24 4.3C23.1 4.7 22.2 5 21.2 5.1C22.2 4.5 23 3.5 23.4 2.4C22.4 3 21.4 3.4 20.3 3.6C19.4 2.6 18.1 2 16.7 2C14 2 11.8 4.2 11.8 6.9C11.8 7.3 11.8 7.7 11.9 8C7.7 7.8 4.1 5.8 1.7 2.8C1.2 3.6 1 4.4 1 5.3C1 7 1.9 8.5 3.2 9.4C2.4 9.4 1.6 9.2 1 8.8C1 8.8 1 8.8 1 8.9C1 11.3 2.7 13.3 4.9 13.7C4.5 13.8 4.1 13.9 3.6 13.9C3.3 13.9 3 13.9 2.7 13.8C3.3 15.8 5.1 17.2 7.3 17.2C5.6 18.5 3.5 19.3 1.2 19.3C0.8 19.3 0.4 19.3 0 19.2C2.2 20.6 4.8 21.4 7.5 21.4C16.6 21.4 21.5 13.9 21.5 7.4C21.5 7.2 21.5 7 21.5 6.8C22.5 6.1 23.3 5.2 24 4.3Z"
-        fill="#C4CAD6"
-      />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={className}
+    >
+      <path d="M 2.3671875 3 L 9.4628906 13.140625 L 2.7402344 21 L 5.3808594 21 L 10.644531 14.830078 L 14.960938 21 L 21.871094 21 L 14.449219 10.375 L 20.740234 3 L 18.140625 3 L 13.271484 8.6875 L 9.2988281 3 L 2.3671875 3 z M 6.2070312 5 L 8.2558594 5 L 18.033203 19 L 16.001953 19 L 6.2070312 5 z"></path>
     </svg>
   )
 }
diff --git a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx
index eaae77886c..91099ece0c 100644
--- a/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx
+++ b/packages/ui/src/memberships/components/MemberProfile/MemberDetails.tsx
@@ -12,13 +12,13 @@ import {
   SidePaneLabel,
   EmptyBody,
 } from '@/common/components/SidePane'
-import { capitalizeFirstLetter } from '@/common/helpers'
 import { useIsMyMembership } from '@/memberships/hooks/useIsMyMembership'
 import { useMemberExtraInfo } from '@/memberships/hooks/useMemberExtraInfo'
 
 import { useMember } from '../../hooks/useMembership'
 import { Member } from '../../types'
 import { MemberInfo } from '../MemberInfo'
+import { socialTitle } from '../SocialMediaTile/SocialMediaTile'
 import { TransferInviteButton } from '../TransferInviteButton'
 
 type Props = { member: Member }
@@ -131,7 +131,7 @@ export const MemberDetails = React.memo(({ member }: Props) => {
       {memberDetails?.externalResources &&
         memberDetails.externalResources.map((externalResource) => (
           <SidePaneRow key={`${externalResource.source}-externalResources`}>
-            <SidePaneLabel text={capitalizeFirstLetter(externalResource.source.toLowerCase())} />
+            <SidePaneLabel text={socialTitle(externalResource.source)} />
             <SidePaneText>{externalResource.value}</SidePaneText>
           </SidePaneRow>
         ))}
diff --git a/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx b/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
index 4e9cc2e30d..7f30a82a61 100644
--- a/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
+++ b/packages/ui/src/memberships/components/SocialMediaSelector/SocialMediaSelector.tsx
@@ -5,10 +5,11 @@ import styled from 'styled-components'
 
 import { InputComponent, InputText } from '@/common/components/forms'
 import { TextBig, TextMedium } from '@/common/components/typography'
-import { capitalizeFirstLetter } from '@/common/helpers'
 import { socialMediaList, SocialMediaTile, Socials } from '@/memberships/components/SocialMediaTile/SocialMediaTile'
 import { MemberFormFields } from '@/memberships/modals/BuyMembershipModal/BuyMembershipFormModal'
 
+import { socialTitle } from '../SocialMediaTile/SocialMediaTile'
+
 const socialToPlaceholder: Record<Socials, string> = {
   HYPERLINK: 'Enter URL',
   WECHAT: 'Enter Username',
@@ -80,7 +81,7 @@ export const SocialMediaSelector = ({ initialSocials }: Props) => {
           id={social + 1}
           inputSize="m"
           name={`externalResources.${social}`}
-          label={capitalizeFirstLetter(social.toLowerCase())}
+          label={socialTitle(social)}
         >
           <InputText
             id={`${social.toLowerCase()}-input`}
diff --git a/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx b/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
index 7ce862932f..78b32e2cc0 100644
--- a/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
+++ b/packages/ui/src/memberships/components/SocialMediaTile/SocialMediaTile.tsx
@@ -47,12 +47,22 @@ export interface SocialMediaTileProps {
   id: string
 }
 
+export const socialTitle = (social: Socials) => {
+  switch (social) {
+    case 'TWITTER':
+      return 'X'
+
+    default:
+      return capitalizeFirstLetter(social.toLowerCase())
+  }
+}
+
 export const SocialMediaTile = React.memo(({ social, onClick, active, id }: SocialMediaTileProps) => {
   return (
     <Wrapper id={id} onClick={onClick} active={active}>
       <RowGapBlock align="center" gap={2}>
         {socialToIcon[social]}
-        <TextMedium value>{capitalizeFirstLetter(social.toLowerCase())}</TextMedium>
+        <TextMedium value>{socialTitle(social)}</TextMedium>
       </RowGapBlock>
     </Wrapper>
   )