diff --git a/packages/components/assets/icons/contact.svg b/packages/components/assets/icons/contact.svg
new file mode 100644
index 0000000000..3f22e48aaa
--- /dev/null
+++ b/packages/components/assets/icons/contact.svg
@@ -0,0 +1,11 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_667_3614)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2523 1.23408C15.5126 1.49443 15.5126 1.91654 15.2523 2.17689L7.91895 9.51022C7.65861 9.77057 7.2365 9.77057 6.97615 9.51022C6.7158 9.24987 6.7158 8.82776 6.97615 8.56741L14.3095 1.23408C14.5698 0.973731 14.9919 0.973731 15.2523 1.23408Z" fill="#1B1B1B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2523 1.2341C15.4334 1.41519 15.4947 1.68401 15.4101 1.92574L10.7435 15.2591C10.6532 15.5171 10.4145 15.6938 10.1414 15.7049C9.86828 15.7161 9.61603 15.5594 9.50501 15.3096L6.94248 9.54391L1.17679 6.98138C0.927008 6.87036 0.770299 6.61811 0.781441 6.34499C0.792584 6.07188 0.96932 5.83323 1.22732 5.74293L14.5607 1.07626C14.8024 0.991661 15.0712 1.05301 15.2523 1.2341ZM3.25494 6.44591L7.71831 8.42963C7.86913 8.49666 7.98973 8.61726 8.05676 8.76808L10.0405 13.2315L13.6942 2.79215L3.25494 6.44591Z" fill="#1B1B1B"/>
+</g>
+<defs>
+<clipPath id="clip0_667_3614">
+<rect width="16" height="16" fill="white" transform="translate(0.114258 0.372192)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/components/src/ButtonIcon/ButtonIcon.stories.tsx b/packages/components/src/ButtonIcon/ButtonIcon.stories.tsx
new file mode 100644
index 0000000000..6e3a61d1ae
--- /dev/null
+++ b/packages/components/src/ButtonIcon/ButtonIcon.stories.tsx
@@ -0,0 +1,12 @@
+import { ButtonIcon } from './ButtonIcon'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Map/ButtonIcon',
+  component: ButtonIcon,
+} as Meta<typeof ButtonIcon>
+
+export const WithClose: StoryFn<typeof ButtonIcon> = () => (
+  <ButtonIcon icon="close" />
+)
diff --git a/packages/components/src/ButtonIcon/ButtonIcon.tsx b/packages/components/src/ButtonIcon/ButtonIcon.tsx
new file mode 100644
index 0000000000..1a16f5b074
--- /dev/null
+++ b/packages/components/src/ButtonIcon/ButtonIcon.tsx
@@ -0,0 +1,22 @@
+import { Button } from 'theme-ui'
+
+import { Icon } from '../Icon/Icon'
+
+import type { ThemeUIStyleObject } from 'theme-ui'
+import type { IGlyphs } from '../Icon/types'
+
+export interface IProps extends React.ButtonHTMLAttributes<HTMLElement> {
+  icon: keyof IGlyphs
+  sx?: ThemeUIStyleObject | undefined
+}
+
+export const ButtonIcon = (props: IProps) => {
+  return (
+    <Button
+      {...props}
+      sx={{ background: 'white', borderRadius: 99, padding: 1, ...props.sx }}
+    >
+      <Icon glyph={props.icon} size={18} />
+    </Button>
+  )
+}
diff --git a/packages/components/src/CardList/CardList.stories.tsx b/packages/components/src/CardList/CardList.stories.tsx
index cca6c07228..f04d3ee589 100644
--- a/packages/components/src/CardList/CardList.stories.tsx
+++ b/packages/components/src/CardList/CardList.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Layout/CardList',
+  title: 'Map/CardList',
   component: CardList,
 } as Meta<typeof CardList>
 
diff --git a/packages/components/src/CardList/CardList.tsx b/packages/components/src/CardList/CardList.tsx
index 0b1bb24b72..9de5e9ef70 100644
--- a/packages/components/src/CardList/CardList.tsx
+++ b/packages/components/src/CardList/CardList.tsx
@@ -5,13 +5,13 @@ import { CardListItem } from '../CardListItem/CardListItem'
 import { Icon } from '../Icon/Icon'
 import { Loader } from '../Loader/Loader'
 
-import type { ListItem } from '../CardListItem/types'
+import type { MapListItem } from '../types/common'
 
 export interface IProps {
   columnsCountBreakPoints?: { [key: number]: number }
   dataCy: string
-  filteredList: ListItem[] | null
-  list: ListItem[]
+  filteredList: MapListItem[] | null
+  list: MapListItem[]
 }
 
 export const EMPTY_LIST = 'Oh nos! Nothing to show!'
diff --git a/packages/components/src/CardListItem/CardListItem.stories.tsx b/packages/components/src/CardListItem/CardListItem.stories.tsx
index 2349c8ae9a..f1413a02db 100644
--- a/packages/components/src/CardListItem/CardListItem.stories.tsx
+++ b/packages/components/src/CardListItem/CardListItem.stories.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Components/CardListItem',
+  title: 'Map/CardListItem',
   component: CardListItem,
 } as Meta<typeof CardListItem>
 
diff --git a/packages/components/src/CardListItem/CardListItem.tsx b/packages/components/src/CardListItem/CardListItem.tsx
index d469551839..b70b264485 100644
--- a/packages/components/src/CardListItem/CardListItem.tsx
+++ b/packages/components/src/CardListItem/CardListItem.tsx
@@ -1,22 +1,14 @@
-import { Flex } from 'theme-ui'
-
 import { CardButton } from '../CardButton/CardButton'
+import { CardProfile } from '../CardProfile/CardProfile'
 import { InternalLink } from '../InternalLink/InternalLink'
-import { CardDetailsFallback } from './CardDetailsFallback'
-import { CardDetailsMemberProfile } from './CardDetailsMemberProfile'
-import { CardDetailsSpaceProfile } from './CardDetailsSpaceProfile'
 
-import type { ListItem } from './types'
+import type { MapListItem } from '../types/common'
 
 export interface IProps {
-  item: ListItem
+  item: MapListItem
 }
 
 export const CardListItem = ({ item }: IProps) => {
-  const { creator } = item
-
-  const isMember = creator?.profileType === 'member'
-
   return (
     <InternalLink
       data-cy="CardListItem"
@@ -28,15 +20,7 @@ export const CardListItem = ({ item }: IProps) => {
       }}
     >
       <CardButton>
-        <Flex sx={{ gap: 2, alignItems: 'stretch', alignContent: 'stretch' }}>
-          {isMember && <CardDetailsMemberProfile creator={creator} />}
-
-          {!isMember && creator && (
-            <CardDetailsSpaceProfile creator={creator} />
-          )}
-
-          {!creator && <CardDetailsFallback item={item} />}
-        </Flex>
+        <CardProfile item={item} />
       </CardButton>
     </InternalLink>
   )
diff --git a/packages/components/src/CardListItem/types.ts b/packages/components/src/CardListItem/types.ts
deleted file mode 100644
index df5cc0470a..0000000000
--- a/packages/components/src/CardListItem/types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { IProfileCreator, ProfileTypeName } from 'oa-shared'
-
-export interface ListItem {
-  _id: string
-  type: ProfileTypeName
-  isVerified?: boolean
-  isSupporter?: boolean
-  subType?: string
-  creator?: IProfileCreator
-}
diff --git a/packages/components/src/CardListItem/CardDetailsFallback.tsx b/packages/components/src/CardProfile/CardDetailsFallback.tsx
similarity index 94%
rename from packages/components/src/CardListItem/CardDetailsFallback.tsx
rename to packages/components/src/CardProfile/CardDetailsFallback.tsx
index 13fbd0e5fc..be256dd874 100644
--- a/packages/components/src/CardListItem/CardDetailsFallback.tsx
+++ b/packages/components/src/CardProfile/CardDetailsFallback.tsx
@@ -4,10 +4,10 @@ import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { Username } from '../Username/Username'
 
-import type { ListItem } from './types'
+import type { MapListItem } from '../types/common'
 
 interface IProps {
-  item: ListItem
+  item: MapListItem
 }
 
 export const CardDetailsFallback = ({ item }: IProps) => {
diff --git a/packages/components/src/CardListItem/CardDetailsMemberProfile.tsx b/packages/components/src/CardProfile/CardDetailsMemberProfile.tsx
similarity index 99%
rename from packages/components/src/CardListItem/CardDetailsMemberProfile.tsx
rename to packages/components/src/CardProfile/CardDetailsMemberProfile.tsx
index 71c865d9ec..d21c25dec0 100644
--- a/packages/components/src/CardListItem/CardDetailsMemberProfile.tsx
+++ b/packages/components/src/CardProfile/CardDetailsMemberProfile.tsx
@@ -12,6 +12,7 @@ interface IProps {
 
 export const CardDetailsMemberProfile = ({ creator }: IProps) => {
   const { _id, badges, countryCode, profileType, userImage } = creator
+
   return (
     <Flex
       sx={{
diff --git a/packages/components/src/CardListItem/CardDetailsSpaceProfile.tsx b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
similarity index 76%
rename from packages/components/src/CardListItem/CardDetailsSpaceProfile.tsx
rename to packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
index 6ea364c676..9bf254cf03 100644
--- a/packages/components/src/CardListItem/CardDetailsSpaceProfile.tsx
+++ b/packages/components/src/CardProfile/CardDetailsSpaceProfile.tsx
@@ -1,4 +1,4 @@
-import { Flex, Image, Text } from 'theme-ui'
+import { Box, Flex, Image, Text } from 'theme-ui'
 
 import { Category } from '../Category/Category'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
@@ -20,7 +20,7 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%' }}>
       {coverImage && (
-        <Flex sx={{ flexDirection: 'column' }}>
+        <>
           <Flex sx={{ aspectRatio: 16 / 6, overflow: 'hidden' }}>
             <Image
               src={coverImage}
@@ -31,25 +31,31 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
               }}
             />
           </Flex>
-          <MemberBadge
-            profileType={profileType}
-            size={40}
+          <Box
             sx={{
-              alignSelf: 'flex-end',
-              transform: 'translateY(-20px)',
-              marginX: 2,
+              position: 'relative',
+              height: 0,
+              top: '-20px',
+              width: '100%',
             }}
-          />
-        </Flex>
+          >
+            <MemberBadge
+              profileType={profileType}
+              size={40}
+              sx={{
+                float: 'right',
+                marginX: 2,
+              }}
+            />
+          </Box>
+        </>
       )}
       <Flex
         sx={{
           alignItems: 'flex-start',
           flexDirection: 'column',
           gap: 1,
-          transform: coverImage ? 'translateY(-20px)' : '',
-          paddingX: 2,
-          paddingY: coverImage ? 0 : 2,
+          padding: 2,
         }}
       >
         <Flex sx={{ gap: 2 }}>
@@ -67,7 +73,9 @@ export const CardDetailsSpaceProfile = ({ creator }: IProps) => {
         </Flex>
         {subType && (
           <Category
-            category={{ label: 'Wants to get started' }}
+            category={{
+              label: subType.charAt(0).toUpperCase() + subType.slice(1),
+            }}
             sx={{
               border: '1px solid #0087B6',
               backgroundColor: '#ECFAFF',
diff --git a/packages/components/src/CardProfile/CardProfile.tsx b/packages/components/src/CardProfile/CardProfile.tsx
new file mode 100644
index 0000000000..2fe3311b3c
--- /dev/null
+++ b/packages/components/src/CardProfile/CardProfile.tsx
@@ -0,0 +1,25 @@
+import { Flex } from 'theme-ui'
+
+import { CardDetailsFallback } from './CardDetailsFallback'
+import { CardDetailsMemberProfile } from './CardDetailsMemberProfile'
+import { CardDetailsSpaceProfile } from './CardDetailsSpaceProfile'
+
+import type { MapListItem } from '../types/common'
+
+export interface IProps {
+  item: MapListItem
+}
+
+export const CardProfile = ({ item }: IProps) => {
+  const { creator } = item
+
+  const isMember = creator?.profileType === 'member'
+
+  return (
+    <Flex sx={{ alignItems: 'stretch', alignContent: 'stretch' }}>
+      {isMember && <CardDetailsMemberProfile creator={creator} />}
+      {!isMember && creator && <CardDetailsSpaceProfile creator={creator} />}
+      {!creator && <CardDetailsFallback item={item} />}
+    </Flex>
+  )
+}
diff --git a/packages/components/src/CardProfile/types.ts b/packages/components/src/CardProfile/types.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/components/src/FilterList/FilterList.stories.tsx b/packages/components/src/FilterList/FilterList.stories.tsx
index 7385651904..cf9195c2fc 100644
--- a/packages/components/src/FilterList/FilterList.stories.tsx
+++ b/packages/components/src/FilterList/FilterList.stories.tsx
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react'
 import type { ProfileTypeName } from 'oa-shared'
 
 export default {
-  title: 'Components/FilterList',
+  title: 'Map/FilterList',
   component: FilterList,
 } as Meta<typeof FilterList>
 
diff --git a/packages/components/src/FilterList/FilterList.tsx b/packages/components/src/FilterList/FilterList.tsx
index 871b83773b..38ef63ccb3 100644
--- a/packages/components/src/FilterList/FilterList.tsx
+++ b/packages/components/src/FilterList/FilterList.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { Flex, Text } from 'theme-ui'
 
-import { Button } from '../Button/Button'
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon'
 import { CardButton } from '../CardButton/CardButton'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 
@@ -130,25 +130,22 @@ export const FilterList = (props: IProps) => {
             zIndex: 2,
             paddingX: 2,
             position: 'relative',
-            top: '-65px',
+            top: '-62px',
             height: 0,
           }}
         >
-          <Button
+          <ButtonIcon
             onClick={() => handleHorizantalScroll(-10)}
             icon="chevron-left"
             disabled={disableLeftArrow}
-            sx={{ borderRadius: 99 }}
-            showIconOnly
-            small
+            sx={{ height: '28px', borderColor: 'grey' }}
           />
-          <Button
+          <ButtonIcon
+            data-cy="FilterList-ButtonRight"
             onClick={() => handleHorizantalScroll(10)}
             icon="chevron-right"
             disabled={disableRightArrow}
-            sx={{ borderRadius: 99, zIndex: 2 }}
-            showIconOnly
-            small
+            sx={{ height: '28px', borderColor: 'grey' }}
           />
         </Flex>
       )}
diff --git a/packages/components/src/Icon/Icon.tsx b/packages/components/src/Icon/Icon.tsx
index fd08d1f8b9..994abaab28 100644
--- a/packages/components/src/Icon/Icon.tsx
+++ b/packages/components/src/Icon/Icon.tsx
@@ -16,7 +16,6 @@ import { MdAdd } from '@react-icons/all-files/md/MdAdd'
 import { MdArrowBack } from '@react-icons/all-files/md/MdArrowBack'
 import { MdArrowForward } from '@react-icons/all-files/md/MdArrowForward'
 import { MdCheck } from '@react-icons/all-files/md/MdCheck'
-import { MdClose } from '@react-icons/all-files/md/MdClose'
 import { MdEdit } from '@react-icons/all-files/md/MdEdit'
 import { MdFileDownload } from '@react-icons/all-files/md/MdFileDownload'
 import { MdImage } from '@react-icons/all-files/md/MdImage'
@@ -66,12 +65,13 @@ export const glyphs: IGlyphs = {
   'arrow-full-up': iconMap.arrowFullUp,
   bazar: iconMap.bazar,
   comment: iconMap.comment,
+  contact: iconMap.contact,
   check: <MdCheck />,
   'chevron-down': <FaChevronDown />,
   'chevron-left': iconMap.chevronLeft,
   'chevron-right': iconMap.chevronRight,
   'chevron-up': <FaChevronUp />,
-  close: <MdClose />,
+  close: iconMap.close,
   delete: iconMap.delete,
   difficulty: <FaSignal />,
   discord: iconMap.discord,
diff --git a/packages/components/src/Icon/svgs.tsx b/packages/components/src/Icon/svgs.tsx
index 5ffd9947f5..4ab1481a20 100644
--- a/packages/components/src/Icon/svgs.tsx
+++ b/packages/components/src/Icon/svgs.tsx
@@ -2,6 +2,8 @@ import accountSVG from '../../assets/icons/account.svg'
 import arrowCurvedBottomRightSVG from '../../assets/icons/arrow-curved-bottom-right.svg'
 import chevronLeftSVG from '../../assets/icons/chevron-left.svg'
 import chevronRightSVG from '../../assets/icons/chevron-right.svg'
+import contactSVG from '../../assets/icons/contact.svg'
+import closeSVG from '../../assets/icons/cross-close.svg'
 import deleteSVG from '../../assets/icons/delete.svg'
 import employeeSVG from '../../assets/icons/employee.svg'
 import eyeSVG from '../../assets/icons/eye.svg'
@@ -55,7 +57,9 @@ export const iconMap = {
   bazar: <ImageIcon src={bazarSVG} />,
   chevronLeft: <ImageIcon src={chevronLeftSVG} />,
   chevronRight: <ImageIcon src={chevronRightSVG} />,
+  close: <ImageIcon src={closeSVG} />,
   comment: <ImageIcon src={commentSVG} />,
+  contact: <ImageIcon src={contactSVG} />,
   delete: <ImageIcon src={deleteSVG} />,
   discord: <ImageIcon src={discordSVG} />,
   emailOutline: <ImageIcon src={emailOutlineSVG} />,
diff --git a/packages/components/src/Icon/types.ts b/packages/components/src/Icon/types.ts
index 60ef2de980..eb7e8ef070 100644
--- a/packages/components/src/Icon/types.ts
+++ b/packages/components/src/Icon/types.ts
@@ -16,6 +16,7 @@ export type availableGlyphs =
   | 'chevron-up'
   | 'close'
   | 'comment'
+  | 'contact'
   | 'discord'
   | 'delete'
   | 'difficulty'
diff --git a/packages/components/src/Map/Map.stories.tsx b/packages/components/src/Map/Map.stories.tsx
index 475ca96dba..f75428f78a 100644
--- a/packages/components/src/Map/Map.stories.tsx
+++ b/packages/components/src/Map/Map.stories.tsx
@@ -5,7 +5,7 @@ import { Map } from './Map'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/Map',
+  title: 'Map/Map',
   component: Map,
 } as Meta<typeof Map>
 
diff --git a/packages/components/src/MapMemberCard/MapMemberCard.stories.tsx b/packages/components/src/MapMemberCard/MapMemberCard.stories.tsx
index a0bbd87fe7..da0140b779 100644
--- a/packages/components/src/MapMemberCard/MapMemberCard.stories.tsx
+++ b/packages/components/src/MapMemberCard/MapMemberCard.stories.tsx
@@ -5,7 +5,7 @@ import { MapMemberCard } from './MapMemberCard'
 import type { Meta } from '@storybook/react'
 
 export default {
-  title: 'Layout/MapMemberCard',
+  title: 'Map/MapMemberCard',
   component: MapMemberCard,
 } as Meta<typeof MapMemberCard>
 
diff --git a/packages/components/src/MapWithPin/MapPin.stories.tsx b/packages/components/src/MapWithPin/MapPin.stories.tsx
index 7aff225c5e..f9bcd27225 100644
--- a/packages/components/src/MapWithPin/MapPin.stories.tsx
+++ b/packages/components/src/MapWithPin/MapPin.stories.tsx
@@ -3,7 +3,7 @@ import { MapPin } from './MapPin'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/MapPin',
+  title: 'Map/MapPin',
   component: MapPin,
 } as Meta<typeof MapPin>
 
diff --git a/packages/components/src/MapWithPin/MapWithPin.stories.tsx b/packages/components/src/MapWithPin/MapWithPin.stories.tsx
index 4977ce25db..7b9273c667 100644
--- a/packages/components/src/MapWithPin/MapWithPin.stories.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.stories.tsx
@@ -3,7 +3,7 @@ import { MapWithPin } from './MapWithPin'
 import type { Meta, StoryFn } from '@storybook/react'
 
 export default {
-  title: 'Components/MapWithPin',
+  title: 'Map/MapWithPin',
   component: MapWithPin,
 } as Meta<typeof MapWithPin>
 
diff --git a/packages/components/src/PinProfile/PinProfile.stories.tsx b/packages/components/src/PinProfile/PinProfile.stories.tsx
new file mode 100644
index 0000000000..b636057075
--- /dev/null
+++ b/packages/components/src/PinProfile/PinProfile.stories.tsx
@@ -0,0 +1,61 @@
+import { faker } from '@faker-js/faker'
+
+import { PinProfile } from './PinProfile'
+
+import type { Meta, StoryFn } from '@storybook/react'
+import type { ProfileTypeName } from 'oa-shared'
+
+export default {
+  title: 'Map/PinProfile',
+  component: PinProfile,
+} as Meta<typeof PinProfile>
+
+export const DefaultMember: StoryFn<typeof PinProfile> = () => {
+  const item = {
+    _id: 'not-selected-onload',
+    type: 'member' as ProfileTypeName,
+    creator: {
+      _id: 'member_no2',
+      _lastActive: 'string',
+      countryCode: 'br',
+      userImage: faker.image.avatar(),
+      displayName: 'member_no1',
+      isContactableByPublic: false,
+      profileType: 'member' as ProfileTypeName,
+    },
+  }
+
+  return (
+    <div style={{ width: '230px', position: 'fixed' }}>
+      <PinProfile item={item} onClose={() => console.log()} />
+    </div>
+  )
+}
+
+export const DefaultSpace: StoryFn<typeof PinProfile> = () => {
+  const item = {
+    _id: 'not-selected-onload',
+    type: 'workspace' as ProfileTypeName,
+    creator: {
+      _id: 'string',
+      _lastActive: 'string',
+      about:
+        'Lorem ipsum odor amet, consectetuer adipiscing elit. Lorem ipsum odor amet, consectetuer adipiscing elit.',
+      badges: {
+        supporter: true,
+        verified: false,
+      },
+      countryCode: 'uk',
+      displayName: 'user',
+      isContactableByPublic: true,
+      profileType: 'workspace' as ProfileTypeName,
+      subType: 'Sheetpress',
+    },
+  }
+
+  return (
+    <div style={{ width: '230px', position: 'fixed' }}>
+      <PinProfile item={item} onClose={() => console.log()} />
+    </div>
+  )
+}
diff --git a/packages/components/src/PinProfile/PinProfile.tsx b/packages/components/src/PinProfile/PinProfile.tsx
new file mode 100644
index 0000000000..b4d5bf282d
--- /dev/null
+++ b/packages/components/src/PinProfile/PinProfile.tsx
@@ -0,0 +1,51 @@
+import { Box, Flex } from 'theme-ui'
+
+import { Button } from '../Button/Button'
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon'
+import { CardButton } from '../CardButton/CardButton'
+import { CardProfile } from '../CardProfile/CardProfile'
+import { InternalLink } from '../InternalLink/InternalLink'
+
+import type { MapListItem } from '../types/common'
+
+export interface IProps {
+  item: MapListItem
+  onClose: () => void
+}
+
+export const PinProfile = (props: IProps) => {
+  const { item, onClose } = props
+  const { creator } = item
+
+  const isMember = creator?.profileType === 'member'
+
+  return (
+    <CardButton sx={{ '&:hover': 'none' }} data-cy="PinProfile">
+      <Box sx={{ position: 'absolute', width: '100%' }}>
+        <Box sx={{ float: 'right', marginTop: 1, marginRight: 2 }}>
+          <ButtonIcon
+            data-cy="PinProfileCloseButton"
+            icon="close"
+            onClick={() => onClose()}
+            sx={{ borderWidth: 0, height: 'auto' }}
+          />
+        </Box>
+      </Box>
+
+      <CardProfile item={item} />
+
+      {!isMember && creator?.isContactableByPublic && (
+        <Flex sx={{ justifyContent: 'flex-end' }}>
+          <InternalLink
+            to={`/u/${creator._id}`}
+            data-cy="PinProfileMessageLink"
+          >
+            <Button icon="contact" sx={{ margin: 1 }} small>
+              Send Message
+            </Button>
+          </InternalLink>
+        </Flex>
+      )}
+    </CardButton>
+  )
+}
diff --git a/packages/components/src/Username/Username.tsx b/packages/components/src/Username/Username.tsx
index 11ebd69d4d..fd8d658196 100644
--- a/packages/components/src/Username/Username.tsx
+++ b/packages/components/src/Username/Username.tsx
@@ -24,6 +24,7 @@ export const Username = ({ user, sx, isLink = true }: IProps) => {
 
   const UserNameBody = (
     <Flex
+      data-cy="Username"
       sx={{
         fontFamily: 'body',
         alignItems: 'center',
@@ -80,7 +81,6 @@ export const Username = ({ user, sx, isLink = true }: IProps) => {
 
   return (
     <InternalLink
-      data-cy="Username"
       to={`/u/${userName}`}
       sx={{
         border: '1px solid transparent',
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 9beaf8c80d..dd676714ba 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -3,10 +3,12 @@ export { Banner } from './Banner/Banner'
 export { BlockedRoute } from './BlockedRoute/BlockedRoute'
 export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs'
 export { Button } from './Button/Button'
+export { ButtonIcon } from './ButtonIcon/ButtonIcon'
 export { ButtonShowReplies } from './ButtonShowReplies/ButtonShowReplies'
 export { CardButton } from './CardButton/CardButton'
 export { CardList } from './CardList/CardList'
 export { CardListItem } from './CardListItem/CardListItem'
+export { CardProfile } from './CardProfile/CardProfile'
 export { Category } from './Category/Category'
 export { ContentStatistics } from './ContentStatistics/ContentStatistics'
 export { CommentItem } from './CommentItem/CommentItem'
@@ -50,6 +52,7 @@ export { MoreContainer } from './MoreContainer/MoreContainer'
 export { NotificationItem } from './NotificationItem/NotificationItem'
 export { NotificationList } from './NotificationList/NotificationList'
 export { OsmGeocoding } from './OsmGeocoding/OsmGeocoding'
+export { PinProfile } from './PinProfile/PinProfile'
 export { ProfileLink } from './ProfileLink/ProfileLink'
 export { ResearchEditorOverview } from './ResearchEditorOverview/ResearchEditorOverview'
 export { Select } from './Select/Select'
diff --git a/packages/components/src/types/common.ts b/packages/components/src/types/common.ts
index fa7c2b0866..065ca58a77 100644
--- a/packages/components/src/types/common.ts
+++ b/packages/components/src/types/common.ts
@@ -1,6 +1,17 @@
+import type { IProfileCreator, ProfileTypeName } from 'oa-shared'
+
 export type User = {
   userName: string
   countryCode?: string | null
   isSupporter?: boolean
   isVerified?: boolean
 }
+
+export interface MapListItem {
+  _id: string
+  type: ProfileTypeName
+  isVerified?: boolean
+  isSupporter?: boolean
+  subType?: string
+  creator?: IProfileCreator
+}
diff --git a/packages/cypress/src/integration/map.spec.ts b/packages/cypress/src/integration/map.spec.ts
index 46a5bcb5c5..111c103729 100644
--- a/packages/cypress/src/integration/map.spec.ts
+++ b/packages/cypress/src/integration/map.spec.ts
@@ -56,17 +56,24 @@ describe('[Map]', () => {
 
     cy.step('New map pins can be clicked on')
     cy.get(`[data-cy=pin-${userId}]`).click()
-    cy.get('[data-cy=MapMemberCard]').within(() => {
+    cy.get('[data-cy=PinProfile]').within(() => {
       cy.get('[data-cy=Username]').contains(userId)
+      cy.contains('Wants to get started')
     })
     cy.url().should('include', `#${userId}`)
 
-    cy.step('New map pins can be hidden')
-    cy.get('.markercluster-map').click(0, 0)
-    cy.get('[data-cy=MapMemberCard]').should('not.exist')
+    cy.step('New map pins can be hidden with the cross button')
+    cy.get('[data-cy=PinProfileCloseButton]').click()
+    cy.get('[data-cy=PinProfile]').should('not.exist')
     cy.url().should('not.include', `#${userId}`)
 
-    cy.step('Mobile list view can be shown/hidden')
+    cy.step('New map pins can be hidden by clicking the map')
+    cy.get(`[data-cy=pin-${userId}]`).click()
+    cy.get('[data-cy=PinProfile]').should('be.visible')
+    cy.get('.markercluster-map').click(0, 0)
+    cy.get('[data-cy=PinProfile]').should('not.exist')
+
+    cy.step('Mobile list view can be shown')
     cy.viewport('samsung-note9')
     cy.get('[data-cy="CardList-desktop"]').should('not.be.visible')
     cy.get('[data-cy="CardList-mobile"]').should('not.be.visible')
@@ -81,7 +88,10 @@ describe('[Map]', () => {
         .should('have.attr', 'href')
         .and('include', `/u/${userId}`)
     })
+    cy.get('[data-cy=FilterList-ButtonRight]').last().click().click().click()
+    cy.get('[data-cy=MapListFilter]').last().click()
 
+    cy.step('Mobile list view can be hidden')
     cy.get('[data-cy="ShowMapButton"]').click()
     cy.get('[data-cy="CardList-mobile"]').should('not.be.visible')
   })
diff --git a/src/pages/Maps/Content/MapView/MapWithList.tsx b/src/pages/Maps/Content/MapView/MapWithList.tsx
index 995b8a03c9..8bf11cbbba 100644
--- a/src/pages/Maps/Content/MapView/MapWithList.tsx
+++ b/src/pages/Maps/Content/MapView/MapWithList.tsx
@@ -218,7 +218,14 @@ export const MapWithList = (props: IProps) => {
           )}
         </Flex>
         <Clusters pins={pins} onPinClick={onPinClicked} prefix="new" />
-        {activePin && <Popup activePin={activePin} mapRef={mapRef} />}
+        {activePin && (
+          <Popup
+            activePin={activePin}
+            mapRef={mapRef}
+            onClose={onBlur}
+            newMap
+          />
+        )}
       </Map>
     </Flex>
   )
diff --git a/src/pages/Maps/Content/MapView/Popup.tsx b/src/pages/Maps/Content/MapView/Popup.tsx
index bc6654fc56..1fe8717387 100644
--- a/src/pages/Maps/Content/MapView/Popup.tsx
+++ b/src/pages/Maps/Content/MapView/Popup.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { Popup as LeafletPopup } from 'react-leaflet'
 import L from 'leaflet'
-import { MapMemberCard } from 'oa-components'
+import { MapMemberCard, PinProfile } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 
@@ -13,12 +13,14 @@ import './popup.css'
 interface IProps {
   activePin: IMapPin | IMapPinWithDetail
   mapRef: React.RefObject<Map>
+  newMap?: boolean
+  onClose?: () => void
 }
 
 export const Popup = (props: IProps) => {
   const leafletRef = useRef<LeafletPopup>(null)
   const activePin = props.activePin as IMapPinWithDetail
-  const { mapRef } = props
+  const { mapRef, newMap, onClose } = props
 
   useEffect(() => {
     openPopup()
@@ -52,23 +54,26 @@ export const Popup = (props: IProps) => {
         minWidth={230}
         maxWidth={230}
       >
-        <MapMemberCard
-          loading={!activePin.detail}
-          imageUrl={activePin.detail?.heroImageUrl}
-          comments={
-            activePin.comments &&
-            activePin.moderation === IModerationStatus.IMPROVEMENTS_NEEDED
-              ? activePin.comments
-              : null
-          }
-          description={activePin.detail?.shortDescription}
-          user={{
-            isVerified: !!activePin.detail?.verifiedBadge,
-            userName: activePin.detail?.name,
-            countryCode: activePin.detail?.country?.toLowerCase(),
-          }}
-          heading={getHeading(activePin)}
-        />
+        {newMap && onClose && <PinProfile item={activePin} onClose={onClose} />}
+        {!newMap && (
+          <MapMemberCard
+            loading={!activePin.detail}
+            imageUrl={activePin.detail?.heroImageUrl}
+            comments={
+              activePin.comments &&
+              activePin.moderation === IModerationStatus.IMPROVEMENTS_NEEDED
+                ? activePin.comments
+                : null
+            }
+            description={activePin.detail?.shortDescription}
+            user={{
+              isVerified: !!activePin.detail?.verifiedBadge,
+              userName: activePin.detail?.name,
+              countryCode: activePin.detail?.country?.toLowerCase(),
+            }}
+            heading={getHeading(activePin)}
+          />
+        )}
       </LeafletPopup>
     )
   )