diff --git a/examples/crm/src/contacts/ContactAside.tsx b/examples/crm/src/contacts/ContactAside.tsx
index 6e7af8d67f..f0ed014fad 100644
--- a/examples/crm/src/contacts/ContactAside.tsx
+++ b/examples/crm/src/contacts/ContactAside.tsx
@@ -66,33 +66,31 @@ export const ContactAside = ({ link = 'edit' }: { link?: 'edit' | 'show' }) => {
                     />
                 </Stack>
             )}
-            {record.phone_number1 && (
+            {record.phone_number1.number && (
                 <Stack direction="row" alignItems="center" gap={1}>
                     <PhoneIcon color="disabled" fontSize="small" />
                     <Box>
-                        <TextField source="phone_number1" />{' '}
-                        <Typography
-                            variant="body2"
-                            color="textSecondary"
-                            component="span"
-                        >
-                            Work
-                        </Typography>
+                        <TextField source="phone_number1.number" />{' '}
+                        {record.phone_number1.type !== 'Other' && (
+                            <TextField
+                                source="phone_number1.type"
+                                color="textSecondary"
+                            />
+                        )}
                     </Box>
                 </Stack>
             )}
-            {record.phone_number2 && (
+            {record.phone_number2.number && (
                 <Stack direction="row" alignItems="center" gap={1}>
                     <PhoneIcon color="disabled" fontSize="small" />
                     <Box>
-                        <TextField source="phone_number2" />{' '}
-                        <Typography
-                            variant="body2"
-                            color="textSecondary"
-                            component="span"
-                        >
-                            Home
-                        </Typography>
+                        <TextField source="phone_number2.number" />{' '}
+                        {record.phone_number2.type !== 'Other' && (
+                            <TextField
+                                source="phone_number2.type"
+                                color="textSecondary"
+                            />
+                        )}
                     </Box>
                 </Stack>
             )}
diff --git a/examples/crm/src/contacts/ContactCreate.tsx b/examples/crm/src/contacts/ContactCreate.tsx
index f3b0393d29..5e5497447e 100644
--- a/examples/crm/src/contacts/ContactCreate.tsx
+++ b/examples/crm/src/contacts/ContactCreate.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CreateBase, Form, Toolbar, useGetIdentity } from 'react-admin';
-import { Card, CardContent, Box, Avatar } from '@mui/material';
+import { Card, CardContent, Box } from '@mui/material';
 
 import { ContactInputs } from './ContactInputs';
 import { Contact } from '../types';
@@ -22,14 +22,7 @@ export const ContactCreate = () => {
                     <Form defaultValues={{ sales_id: identity?.id }}>
                         <Card>
                             <CardContent>
-                                <Box>
-                                    <Box display="flex">
-                                        <Box mr={2}>
-                                            <Avatar />
-                                        </Box>
-                                        <ContactInputs />
-                                    </Box>
-                                </Box>
+                                <ContactInputs />
                             </CardContent>
                             <Toolbar />
                         </Card>
diff --git a/examples/crm/src/contacts/ContactEdit.tsx b/examples/crm/src/contacts/ContactEdit.tsx
index fc9336a9e6..d906d325f5 100644
--- a/examples/crm/src/contacts/ContactEdit.tsx
+++ b/examples/crm/src/contacts/ContactEdit.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { EditBase, Form, Toolbar, useEditContext } from 'react-admin';
 import { Card, CardContent, Box } from '@mui/material';
 
-import { Avatar } from './Avatar';
 import { ContactInputs } from './ContactInputs';
 import { ContactAside } from './ContactAside';
 import { Contact } from '../types';
@@ -22,14 +21,7 @@ const ContactEditContent = () => {
                 <Form>
                     <Card>
                         <CardContent>
-                            <Box>
-                                <Box display="flex">
-                                    <Box mr={2}>
-                                        <Avatar />
-                                    </Box>
-                                    <ContactInputs />
-                                </Box>
-                            </Box>
+                            <ContactInputs />
                         </CardContent>
                         <Toolbar />
                     </Card>
diff --git a/examples/crm/src/contacts/ContactInputs.tsx b/examples/crm/src/contacts/ContactInputs.tsx
index fc90156ca7..ccd0d9d7e7 100644
--- a/examples/crm/src/contacts/ContactInputs.tsx
+++ b/examples/crm/src/contacts/ContactInputs.tsx
@@ -10,16 +10,25 @@ import {
     useCreate,
     useGetIdentity,
     useNotify,
+    RadioButtonGroupInput,
 } from 'react-admin';
-import { Divider, Box, Stack } from '@mui/material';
+import {
+    Divider,
+    Stack,
+    Typography,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 import { useConfigurationContext } from '../root/ConfigurationContext';
+import { Avatar } from './Avatar';
+import { Sale } from '../types';
 
 const isLinkedinUrl = (url: string) => {
     if (!url) return;
     try {
         // Parse the URL to ensure it is valid
         const parsedUrl = new URL(url);
-        if (!parsedUrl.hostname.includes('linkedin.com')) {
+        if (!parsedUrl.hostname.startsWith('https://linkedin.com/')) {
             return 'URL must be from linkedin.com';
         }
     } catch (e) {
@@ -29,7 +38,64 @@ const isLinkedinUrl = (url: string) => {
 };
 
 export const ContactInputs = () => {
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
+    return (
+        <Stack gap={4} p={1}>
+            <Stack gap={2}>
+                <Avatar />
+                <Stack gap={4} flexDirection={isMobile ? 'column' : 'row'}>
+                    <ContactIdentityInputs />
+                    <Divider
+                        orientation={isMobile ? 'horizontal' : 'vertical'}
+                        flexItem
+                    />
+                    <ContactPositionInputs />
+                </Stack>
+            </Stack>
+
+            <Stack gap={4} flexDirection={isMobile ? 'column' : 'row'}>
+                <ContactPersonalInformationInputs />
+                <Divider
+                    orientation={isMobile ? 'horizontal' : 'vertical'}
+                    flexItem
+                />
+                <ContactMiscInputs />
+            </Stack>
+        </Stack>
+    );
+};
+
+const ContactIdentityInputs = () => {
     const { contactGender } = useConfigurationContext();
+    return (
+        <Stack gap={1} flex={1}>
+            <Typography variant="h6">Identity</Typography>
+            <RadioButtonGroupInput
+                label={false}
+                source="gender"
+                choices={contactGender}
+                helperText={false}
+                optionText="label"
+                optionValue="value"
+                sx={{ '& .MuiRadio-root': { paddingY: 0 } }}
+            />
+            <TextInput
+                source="first_name"
+                validate={required()}
+                helperText={false}
+            />
+            <TextInput
+                source="last_name"
+                validate={required()}
+                helperText={false}
+            />
+        </Stack>
+    );
+};
+
+const ContactPositionInputs = () => {
     const [create] = useCreate();
     const { identity } = useGetIdentity();
     const notify = useNotify();
@@ -55,87 +121,89 @@ export const ContactInputs = () => {
         }
     };
     return (
-        <Box flex="1" mt={-1}>
-            <Stack direction="row" width={430} gap={1}>
-                <TextInput
-                    source="first_name"
+        <Stack gap={1} flex={1}>
+            <Typography variant="h6">Position</Typography>
+            <TextInput source="title" helperText={false} />
+            <ReferenceInput source="company_id" reference="companies">
+                <AutocompleteInput
+                    optionText="name"
                     validate={required()}
+                    onCreate={handleCreateCompany}
                     helperText={false}
                 />
+            </ReferenceInput>
+        </Stack>
+    );
+};
+
+const ContactPersonalInformationInputs = () => {
+    return (
+        <Stack gap={1} flex={1}>
+            <Typography variant="h6">Personal info</Typography>
+            <TextInput source="email" helperText={false} validate={email()} />
+            <Stack gap={1} flexDirection="row">
                 <TextInput
-                    source="last_name"
-                    validate={required()}
+                    source="phone_number1.number"
+                    label="Phone number 1"
                     helperText={false}
                 />
+                <SelectInput
+                    source="phone_number1.type"
+                    label="Type"
+                    helperText={false}
+                    optionText={choice => choice.id}
+                    choices={[{ id: 'Work' }, { id: 'Home' }, { id: 'Other' }]}
+                />
             </Stack>
-            <Stack direction="row" width={430} gap={1}>
-                <TextInput source="title" helperText={false} />
-                <ReferenceInput source="company_id" reference="companies">
-                    <AutocompleteInput
-                        optionText="name"
-                        validate={required()}
-                        onCreate={handleCreateCompany}
-                        helperText={false}
-                    />
-                </ReferenceInput>
-            </Stack>
-            <Divider sx={{ my: 2 }} />
-            <Box width={430}>
+            <Stack gap={1} flexDirection="row">
                 <TextInput
-                    source="email"
+                    source="phone_number2.number"
+                    label="Phone number 2"
                     helperText={false}
-                    validate={email()}
                 />
-                <Stack direction="row" gap={1}>
-                    <TextInput source="phone_number1" helperText={false} />
-                    <TextInput source="phone_number2" helperText={false} />
-                </Stack>
-            </Box>
-            <Divider sx={{ my: 2 }} />
-            <Box width={430}>
-                <TextInput
-                    source="background"
-                    label="Background info (bio, how you met, etc)"
-                    multiline
+                <SelectInput
+                    source="phone_number2.type"
+                    label="Type"
+                    helperText={false}
+                    optionText={choice => choice.id}
+                    choices={[{ id: 'Work' }, { id: 'Home' }, { id: 'Other' }]}
                 />
-                <TextInput
-                    source="linkedin_url"
-                    label="Linkedin URL"
+            </Stack>
+            <TextInput
+                source="linkedin_url"
+                label="Linkedin URL"
+                helperText={false}
+                validate={isLinkedinUrl}
+            />
+        </Stack>
+    );
+};
+
+const ContactMiscInputs = () => {
+    return (
+        <Stack gap={1} flex={1}>
+            <Typography variant="h6">Misc</Typography>
+            <TextInput
+                source="background"
+                label="Background info (bio, how you met, etc)"
+                multiline
+                helperText={false}
+            />
+            <BooleanInput source="has_newsletter" helperText={false} />
+            <ReferenceInput
+                reference="sales"
+                source="sales_id"
+                sort={{ field: 'last_name', order: 'ASC' }}
+            >
+                <SelectInput
                     helperText={false}
-                    validate={isLinkedinUrl}
+                    label="Account manager"
+                    optionText={saleOptionRenderer}
                 />
-                <Stack direction="row" gap={1} alignItems="center">
-                    <SelectInput
-                        source="gender"
-                        choices={contactGender}
-                        helperText={false}
-                        optionText="label"
-                        optionValue="value"
-                    />
-                    <BooleanInput
-                        source="has_newsletter"
-                        sx={{
-                            width: '100%',
-                            label: { justifyContent: 'center' },
-                        }}
-                        helperText={false}
-                    />
-                </Stack>
-            </Box>
-            <Divider sx={{ my: 2 }} />
-            <Box width={430}>
-                <ReferenceInput
-                    reference="sales"
-                    source="sales_id"
-                    sort={{ field: 'last_name', order: 'ASC' }}
-                >
-                    <SelectInput
-                        helperText={false}
-                        label="Account manager"
-                        sx={{ width: 210 }}
-                    />
-                </ReferenceInput>
-            </Box>
-        </Box>
+            </ReferenceInput>
+        </Stack>
     );
 };
+
+const saleOptionRenderer = (choice: Sale) =>
+    `${choice.first_name} ${choice.last_name}`;
diff --git a/examples/crm/src/dataGenerator/contacts.ts b/examples/crm/src/dataGenerator/contacts.ts
index 6a572d9925..a1fc07e38c 100644
--- a/examples/crm/src/dataGenerator/contacts.ts
+++ b/examples/crm/src/dataGenerator/contacts.ts
@@ -66,8 +66,14 @@ export const generateContacts = (db: Db): Contact[] => {
             company_id: company.id,
             company_name: company.name,
             email,
-            phone_number1: phone.phoneNumber(),
-            phone_number2: phone.phoneNumber(),
+            phone_number1: {
+                number: phone.phoneNumber(),
+                type: random.arrayElement(['Work', 'Home', 'Other']),
+            },
+            phone_number2: {
+                number: phone.phoneNumber(),
+                type: random.arrayElement(['Work', 'Home', 'Other']),
+            },
             background: lorem.sentence(),
             acquisition: random.arrayElement(['inbound', 'outbound']),
             avatar,
diff --git a/examples/crm/src/types.ts b/examples/crm/src/types.ts
index 0fc65b9f81..8d4374feae 100644
--- a/examples/crm/src/types.ts
+++ b/examples/crm/src/types.ts
@@ -56,6 +56,8 @@ export interface Contact extends RaRecord {
     nb_notes: number;
     status: string;
     background: string;
+    phone_number1: { number: string; type: 'Work' | 'Home' | 'Other' };
+    phone_number2: { number: string; type: 'Work' | 'Home' | 'Other' };
 }
 
 export interface ContactNote extends RaRecord {