diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx
index ba9270a42d3f6..e71f8320051e4 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePerson.tsx
@@ -1,9 +1,9 @@
 import { createPostHogWidgetNode } from 'scenes/notebooks/Nodes/NodeWrapper'
 import { NotebookNodeType, PropertyDefinitionType } from '~/types'
-import { useValues } from 'kea'
+import { useActions, useValues } from 'kea'
 import { LemonDivider } from '@posthog/lemon-ui'
 import { urls } from 'scenes/urls'
-import { PersonDisplay, TZLabel } from '@posthog/apps-common'
+import { PersonIcon, TZLabel } from '@posthog/apps-common'
 import { personLogic } from 'scenes/persons/personLogic'
 import { PropertiesTable } from 'lib/components/PropertiesTable'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
@@ -11,6 +11,9 @@ import { notebookNodeLogic } from './notebookNodeLogic'
 import { NotebookNodeViewProps } from '../Notebook/utils'
 import { asDisplay } from 'scenes/persons/person-utils'
 import { useEffect } from 'react'
+import { PropertyIcon } from 'lib/components/PropertyIcon'
+import clsx from 'clsx'
+import { NodeKind } from '~/queries/schema'
 
 const Component = (props: NotebookNodeViewProps<NotebookNodePersonAttributes>): JSX.Element => {
     const { id } = props.attributes
@@ -18,7 +21,7 @@ const Component = (props: NotebookNodeViewProps<NotebookNodePersonAttributes>):
     const logic = personLogic({ id })
     const { person, personLoading } = useValues(logic)
     const { expanded } = useValues(notebookNodeLogic)
-    // const { setActions, insertAfter } = useActions(notebookNodeLogic)
+    const { setExpanded, setActions, insertAfter } = useActions(notebookNodeLogic)
 
     const title = person ? `Person: ${asDisplay(person)}` : 'Person'
 
@@ -28,17 +31,38 @@ const Component = (props: NotebookNodeViewProps<NotebookNodePersonAttributes>):
         }, 0)
     }, [title])
 
-    // useEffect(() => {
-    //     setActions([
-    //         {
-    //             text: "Events",
-    //             onClick: () => {
-    //                 insertAfter({
-    //                     type: NotebookNodeType.Events,
-    //                 })
-    //         }
-    //     ])
-    // }, [person])
+    useEffect(() => {
+        setActions([
+            {
+                text: 'Events',
+                onClick: () => {
+                    setExpanded(false)
+                    insertAfter({
+                        type: NotebookNodeType.Query,
+                        attrs: {
+                            title: `Events for ${title}`,
+                            query: {
+                                kind: NodeKind.DataTableNode,
+                                source: {
+                                    kind: NodeKind.EventsQuery,
+                                    select: [
+                                        '*',
+                                        'event',
+                                        'person',
+                                        'coalesce(properties.$current_url, properties.$screen_name) -- Url / Screen',
+                                        'properties.$lib',
+                                        'timestamp',
+                                    ],
+                                    personId: person?.uuid,
+                                    after: '-24h',
+                                },
+                            },
+                        },
+                    })
+                },
+            },
+        ])
+    }, [person])
 
     useEffect(() => {
         props.updateAttributes({
@@ -46,16 +70,57 @@ const Component = (props: NotebookNodeViewProps<NotebookNodePersonAttributes>):
         })
     }, [person])
 
+    const iconPropertyKeys = ['$geoip_country_code', '$browser', '$device_type', '$os']
+    const iconProperties = person?.properties || {}
+
+    const propertyIcons = (
+        <div className="flex flex-row flex-nowrap shrink-0 gap-1 h-4 ph-no-capture">
+            {!personLoading ? (
+                iconPropertyKeys.map((property) => {
+                    let value = iconProperties?.[property]
+                    if (property === '$device_type') {
+                        value = iconProperties?.['$device_type'] || iconProperties?.['$initial_device_type']
+                    }
+
+                    let tooltipValue = value
+                    if (property === '$geoip_country_code') {
+                        tooltipValue = `${iconProperties?.['$geoip_country_name']} (${value})`
+                    }
+
+                    return (
+                        <PropertyIcon
+                            key={property}
+                            className={'text-muted-alt'}
+                            property={property}
+                            value={value}
+                            tooltipTitle={() => (
+                                <div className="text-center">
+                                    <span className="font-medium">{tooltipValue ?? 'N/A'}</span>
+                                </div>
+                            )}
+                        />
+                    )
+                })
+            ) : (
+                <LemonSkeleton className="w-18 my-1" />
+            )}
+        </div>
+    )
+
     return (
         <div className="flex flex-col overflow-hidden">
-            <div className="p-4 flex-0 flex gap-2 justify-between">
+            <div className={clsx('p-4 flex-0 flex gap-2 justify-between ', !expanded && 'cursor-pointer')}>
                 {personLoading ? (
                     <LemonSkeleton className="h-6" />
                 ) : (
                     <>
-                        <span className="font-semibold">
-                            <PersonDisplay withIcon person={person} noLink noPopover />
-                        </span>
+                        <div className="flex gap-2">
+                            <PersonIcon person={person} size="xl" />
+                            <div>
+                                <div className="font-semibold">{asDisplay(person)}</div>
+                                <div>{propertyIcons}</div>
+                            </div>
+                        </div>
 
                         {person ? (
                             <div>
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
index aed37034404a6..37015d2dbb177 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
@@ -24,10 +24,6 @@ export function NotebookPopoverCard(): JSX.Element | null {
 
     const editable = visibility !== 'hidden' && !notebook?.is_template
 
-    if (droppedResource) {
-        return null
-    }
-
     const { ref, size } = useResizeBreakpoints({
         0: 'small',
         832: 'medium',
@@ -35,6 +31,10 @@ export function NotebookPopoverCard(): JSX.Element | null {
 
     const contentWidthHasEffect = useMemo(() => fullScreen && size === 'medium', [fullScreen, size])
 
+    if (droppedResource) {
+        return null
+    }
+
     return (
         <div ref={ref} className="NotebookPopover__content__card">
             <header className="flex items-center justify-between gap-2 font-semibold shrink-0 p-1 border-b">
diff --git a/frontend/src/scenes/persons/PersonDisplay.tsx b/frontend/src/scenes/persons/PersonDisplay.tsx
index 9a8464a06b89b..0bc990b360b31 100644
--- a/frontend/src/scenes/persons/PersonDisplay.tsx
+++ b/frontend/src/scenes/persons/PersonDisplay.tsx
@@ -20,10 +20,11 @@ export interface PersonDisplayProps {
     noPopover?: boolean
 }
 
-export function PersonDisplay({ person, withIcon, noEllipsis, noPopover, noLink }: PersonDisplayProps): JSX.Element {
-    const href = asLink(person)
+export function PersonIcon({
+    person,
+    ...props
+}: Pick<PersonDisplayProps, 'person'> & Omit<ProfilePictureProps, 'name' | 'email'>): JSX.Element {
     const display = asDisplay(person)
-    const [visible, setVisible] = useState(false)
 
     const email: string | undefined = useMemo(() => {
         // The email property could be correct but it could also be set strangely such as an array or not even a string
@@ -33,11 +34,17 @@ export function PersonDisplay({ person, withIcon, noEllipsis, noPopover, noLink
         return typeof possibleEmail === 'string' ? possibleEmail : undefined
     }, [person?.properties?.email])
 
+    return <ProfilePicture {...props} name={display} email={email} />
+}
+
+export function PersonDisplay({ person, withIcon, noEllipsis, noPopover, noLink }: PersonDisplayProps): JSX.Element {
+    const href = asLink(person)
+    const display = asDisplay(person)
+    const [visible, setVisible] = useState(false)
+
     let content = (
         <span className="flex items-center">
-            {withIcon && (
-                <ProfilePicture name={display} email={email} size={typeof withIcon === 'string' ? withIcon : 'md'} />
-            )}
+            {withIcon && <PersonIcon person={person} size={typeof withIcon === 'string' ? withIcon : 'md'} />}
             <span className={clsx('ph-no-capture', !noEllipsis && 'truncate')}>{display}</span>
         </span>
     )