diff --git a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
index de6e1d022896f..c074b490fb35a 100644
--- a/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
+++ b/frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx
@@ -11,7 +11,7 @@ import { CopyToClipboardInline } from '../CopyToClipboard'
 import { useValues } from 'kea'
 import { propertyDefinitionsModel } from '~/models/propertyDefinitionsModel'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { NewPropertyComponent } from 'scenes/persons/NewPropertyComponent'
+import { NewProperty } from 'scenes/persons/NewProperty'
 import { LemonCheckbox, LemonInput, Link } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { PropertyDefinitionType } from '~/types'
@@ -351,7 +351,7 @@ export function PropertiesTable({
                             )}
                         </span>
 
-                        {onEdit && <NewPropertyComponent editProperty={onEdit} />}
+                        {onEdit && <NewProperty onSave={onEdit} />}
                     </div>
                 )}
 
diff --git a/frontend/src/scenes/persons/NewProperty.tsx b/frontend/src/scenes/persons/NewProperty.tsx
new file mode 100644
index 0000000000000..b0ddfda001016
--- /dev/null
+++ b/frontend/src/scenes/persons/NewProperty.tsx
@@ -0,0 +1,129 @@
+import { useState } from 'react'
+import { LemonButton } from 'lib/lemon-ui/LemonButton'
+import { LemonInput, LemonLabel, LemonModal, LemonSegmentedButton } from '@posthog/lemon-ui'
+
+interface NewPropertyInterface {
+    creating: boolean
+    propertyType: 'string' | 'boolean'
+    key?: string | null
+    value?: string | number
+}
+
+export interface NewPropertyProps {
+    onSave: (key: string, newValue?: string | number) => void
+}
+
+export function NewProperty({ onSave }: NewPropertyProps): JSX.Element {
+    const initialState = { creating: false, propertyType: 'string', value: '' } as NewPropertyInterface
+    const [state, setState] = useState(initialState)
+
+    const saveProperty = (): void => {
+        if (state.key && state.value !== undefined) {
+            onSave(state.key, state.value)
+            setState(initialState)
+        }
+    }
+
+    return (
+        <>
+            <LemonButton
+                data-attr="add-prop-button"
+                onClick={() => setState({ ...state, creating: true })}
+                type="primary"
+            >
+                New property
+            </LemonButton>
+            <LemonModal
+                isOpen={state.creating}
+                onClose={() => setState(initialState)}
+                title="Add new property"
+                footer={
+                    <LemonButton
+                        disabledReason={(!state.key || state.value === undefined) && 'Set a key and a value'}
+                        type="secondary"
+                        onClick={saveProperty}
+                    >
+                        Save
+                    </LemonButton>
+                }
+            >
+                <div className="space-y-2">
+                    <div>
+                        <LemonLabel>Key</LemonLabel>
+                        <LemonInput
+                            id="propertyKey"
+                            autoFocus
+                            placeholder="try email, first_name, is_verified, membership_level, total_revenue"
+                            onChange={(key) => setState({ ...state, key: key })}
+                            autoComplete="off"
+                            autoCapitalize="off"
+                        />
+                    </div>
+                    <div>
+                        <LemonLabel>Type of Property</LemonLabel>
+                        <LemonSegmentedButton
+                            onChange={(value: 'string' | 'boolean') =>
+                                setState({
+                                    ...state,
+                                    propertyType: value,
+                                    value: value === 'string' ? '' : 'true',
+                                })
+                            }
+                            value={state.propertyType}
+                            options={[
+                                {
+                                    value: 'string',
+                                    label: 'Text or Number',
+                                },
+                                {
+                                    value: 'boolean',
+                                    label: 'Boolean or Null',
+                                },
+                            ]}
+                            fullWidth
+                        />
+                    </div>
+                    <div>
+                        <LemonLabel>Value</LemonLabel>
+                        {state.propertyType === 'boolean' ? (
+                            <LemonSegmentedButton
+                                onChange={(value) =>
+                                    setState({
+                                        ...state,
+                                        value: value,
+                                    })
+                                }
+                                fullWidth
+                                value={state.value}
+                                options={[
+                                    {
+                                        value: 'true',
+                                        label: 'True',
+                                    },
+                                    {
+                                        value: 'false',
+                                        label: 'False',
+                                    },
+                                    {
+                                        value: 'null',
+                                        label: 'Null',
+                                    },
+                                ]}
+                                size="small"
+                            />
+                        ) : (
+                            <LemonInput
+                                id="propertyValue"
+                                placeholder="try email@example.com, gold, 1"
+                                onChange={(value) => setState({ ...state, value: value })}
+                                onKeyDown={(e) => e.key === 'Enter' && saveProperty()}
+                                autoComplete="off"
+                                autoCapitalize="off"
+                            />
+                        )}
+                    </div>
+                </div>
+            </LemonModal>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/persons/NewPropertyComponent.tsx b/frontend/src/scenes/persons/NewPropertyComponent.tsx
deleted file mode 100644
index ccef80b506090..0000000000000
--- a/frontend/src/scenes/persons/NewPropertyComponent.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { useState } from 'react'
-import { Input, Radio } from 'antd'
-// eslint-disable-next-line no-restricted-imports
-import { SaveOutlined, StopOutlined, CheckOutlined } from '@ant-design/icons'
-import Modal from 'antd/lib/modal/Modal'
-import { LemonButton } from 'lib/lemon-ui/LemonButton'
-import { IconClose } from 'lib/lemon-ui/icons'
-
-interface NewPropertyInterface {
-    creating: boolean
-    propertyType: 'string' | 'boolean'
-    key?: string | null
-    value?: string | number | boolean | null
-}
-
-export interface NewPropertyComponentProps {
-    editProperty: (key: string, newValue?: string | number | boolean | null) => void
-}
-
-export function NewPropertyComponent({ editProperty }: NewPropertyComponentProps): JSX.Element {
-    const initialState = { creating: false, propertyType: 'string' } as NewPropertyInterface
-    const [state, setState] = useState(initialState)
-
-    const saveProperty = (): void => {
-        if (state.key && state.value !== undefined) {
-            editProperty(state.key, state.value)
-            setState(initialState)
-        }
-    }
-
-    return (
-        <>
-            <LemonButton
-                data-attr="add-prop-button"
-                onClick={() => setState({ ...state, creating: true })}
-                type="primary"
-            >
-                New property
-            </LemonButton>
-            <Modal
-                visible={state.creating}
-                destroyOnClose
-                onCancel={() => setState(initialState)}
-                title="Adding new property"
-                okText={
-                    <>
-                        <SaveOutlined style={{ marginRight: 4 }} />
-                        Save Property
-                    </>
-                }
-                okButtonProps={{ disabled: !state.key || state.value === undefined }}
-                onOk={saveProperty}
-            >
-                <div className="input-set">
-                    <label htmlFor="propertyKey">Key</label>
-                    <Input
-                        id="propertyKey"
-                        autoFocus
-                        placeholder="try email, first_name, is_verified, membership_level, total_revenue"
-                        onChange={(e) => setState({ ...state, key: e.target.value })}
-                        autoComplete="off"
-                        autoCapitalize="off"
-                    />
-                </div>
-                <div className="input-set">
-                    <label htmlFor="propertyType">Type of Property</label>
-                    <div>
-                        <Radio.Group
-                            value={state.propertyType}
-                            onChange={(e) =>
-                                setState({
-                                    ...state,
-                                    propertyType: e.target.value,
-                                    value: e.target.value === 'string' ? undefined : 'true',
-                                })
-                            }
-                            id="propertyType"
-                            buttonStyle="solid"
-                        >
-                            <Radio.Button value="string">Text or Number</Radio.Button>
-                            <Radio.Button value="boolean">Boolean or Null</Radio.Button>
-                        </Radio.Group>
-                    </div>
-                </div>
-
-                <div className="input-set">
-                    <label htmlFor="propertyValue">Value</label>
-                    {state.propertyType === 'boolean' ? (
-                        <div>
-                            <Radio.Group
-                                value={state.value}
-                                onChange={(e) =>
-                                    setState({
-                                        ...state,
-                                        value: e.target.value,
-                                    })
-                                }
-                                id="propertyValue"
-                                buttonStyle="solid"
-                            >
-                                <Radio.Button value="true" defaultChecked>
-                                    <CheckOutlined /> True
-                                </Radio.Button>
-                                <Radio.Button value="false">
-                                    <IconClose /> False
-                                </Radio.Button>
-                                <Radio.Button value="null">
-                                    <StopOutlined /> Null
-                                </Radio.Button>
-                            </Radio.Group>
-                        </div>
-                    ) : (
-                        <Input
-                            placeholder="try email@example.com, gold, 1"
-                            onChange={(e) => setState({ ...state, value: e.target.value })}
-                            id="propertyValue"
-                            onKeyDown={(e) => e.key === 'Enter' && saveProperty()}
-                            autoComplete="off"
-                            autoCapitalize="off"
-                        />
-                    )}
-                </div>
-            </Modal>
-        </>
-    )
-}