diff --git a/frontend/__snapshots__/components-playlist--default--dark.png b/frontend/__snapshots__/components-playlist--default--dark.png
new file mode 100644
index 0000000000000..88b23fc64f8e8
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--default--dark.png differ
diff --git a/frontend/__snapshots__/components-playlist--default--light.png b/frontend/__snapshots__/components-playlist--default--light.png
new file mode 100644
index 0000000000000..8a46d7ab3637f
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--default--light.png differ
diff --git a/frontend/__snapshots__/components-playlist--multiple-sections--dark.png b/frontend/__snapshots__/components-playlist--multiple-sections--dark.png
new file mode 100644
index 0000000000000..c32bc9749df03
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--multiple-sections--dark.png differ
diff --git a/frontend/__snapshots__/components-playlist--multiple-sections--light.png b/frontend/__snapshots__/components-playlist--multiple-sections--light.png
new file mode 100644
index 0000000000000..a5efa06274e97
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--multiple-sections--light.png differ
diff --git a/frontend/__snapshots__/components-playlist--with-footer--dark.png b/frontend/__snapshots__/components-playlist--with-footer--dark.png
new file mode 100644
index 0000000000000..88b23fc64f8e8
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--with-footer--dark.png differ
diff --git a/frontend/__snapshots__/components-playlist--with-footer--light.png b/frontend/__snapshots__/components-playlist--with-footer--light.png
new file mode 100644
index 0000000000000..8a46d7ab3637f
Binary files /dev/null and b/frontend/__snapshots__/components-playlist--with-footer--light.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png
index a820c399ecbf2..f427261f0c801 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png and b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--dark.png differ
diff --git a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png
index 1276a2564f958..fa79b1b313e1d 100644
Binary files a/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png and b/frontend/__snapshots__/exporter-exporter--funnel-historical-trends-insight--light.png differ
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png
index 688871da10a15..7c36f82f3c19e 100644
Binary files a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png and b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--dark.png differ
diff --git a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png
index 1b812d9edd438..e07d3b8776663 100644
Binary files a/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png and b/frontend/__snapshots__/replay-player-failure--recent-recordings-404--light.png differ
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss b/frontend/src/lib/components/Playlist/Playlist.scss
similarity index 75%
rename from frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
rename to frontend/src/lib/components/Playlist/Playlist.scss
index a7df986ce52db..292fe2f7b3629 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.scss
+++ b/frontend/src/lib/components/Playlist/Playlist.scss
@@ -1,7 +1,7 @@
 @import '../../../styles/mixins';
 @import '../../../styles/vars';
 
-.SessionRecordingsPlaylist {
+.Playlist {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -11,7 +11,7 @@
     border: 1px solid var(--border);
     border-radius: var(--radius);
 
-    .SessionRecordingsPlaylist__list {
+    .Playlist__list {
         position: relative;
         display: flex;
         flex-direction: column;
@@ -19,7 +19,7 @@
         height: 100%;
         overflow: hidden;
 
-        &:not(.SessionRecordingsPlaylist__list--collapsed) {
+        &:not(.Playlist__list--collapsed) {
             width: 25%;
             min-width: 305px;
             max-width: 350px;
@@ -30,18 +30,11 @@
         }
     }
 
-    .SessionRecordingsPlaylist__player {
+    .Playlist__main {
         flex: 1;
         width: 100%;
         height: 100%;
         overflow: hidden;
-
-        .SessionRecordingsPlaylist__loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-top: 10rem;
-        }
     }
 
     &--embedded {
@@ -49,7 +42,7 @@
     }
 
     &--wide {
-        .SessionRecordingsPlaylist__player {
+        .Playlist__main {
             flex: 1;
             height: 100%;
         }
diff --git a/frontend/src/lib/components/Playlist/Playlist.stories.tsx b/frontend/src/lib/components/Playlist/Playlist.stories.tsx
new file mode 100644
index 0000000000000..0fdc98cd1d4bc
--- /dev/null
+++ b/frontend/src/lib/components/Playlist/Playlist.stories.tsx
@@ -0,0 +1,79 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
+import { range } from 'lib/utils'
+
+import { Playlist, PlaylistProps } from './Playlist'
+
+type Story = StoryObj<typeof Playlist>
+const meta: Meta<typeof Playlist> = {
+    title: 'Components/Playlist',
+    component: Playlist,
+}
+export default meta
+
+type ObjectType = { id: string | number }
+
+const ListItem = ({ item }: { item: ObjectType }): JSX.Element => <div className="p-1">Object {item.id}</div>
+
+const Template: StoryFn<typeof Playlist> = (props: Partial<PlaylistProps<any>>) => {
+    const mainContent = ({ activeItem }: { activeItem: ObjectType }): JSX.Element => (
+        <div className="flex items-center justify-center h-full">
+            {activeItem ? `Object ${activeItem.id} selected` : 'Select an item from the list'}
+        </div>
+    )
+
+    return (
+        <div className="h-96 min-w-[40rem]">
+            <Playlist
+                title="Title"
+                sections={[]}
+                listEmptyState={<div>No items</div>}
+                content={mainContent}
+                {...props}
+            />
+        </div>
+    )
+}
+
+export const Default: Story = Template.bind({})
+Default.args = {
+    sections: [
+        {
+            key: 'default',
+            title: 'Default section',
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}
+
+export const MultipleSections: Story = Template.bind({})
+MultipleSections.args = {
+    sections: [
+        {
+            key: 'one',
+            title: 'First section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+            initiallyOpen: true,
+        },
+        {
+            key: 'two',
+            title: 'Second section',
+            items: range(0, 5).map((idx) => ({ id: idx })),
+            render: ListItem,
+        },
+    ],
+}
+
+export const WithFooter: Story = Template.bind({})
+WithFooter.args = {
+    sections: [
+        {
+            key: 'default',
+            title: 'Section with footer',
+            items: range(0, 100).map((idx) => ({ id: idx })),
+            render: ListItem,
+            footer: <div className="px-1 py-3">Section footer</div>,
+        },
+    ],
+}
diff --git a/frontend/src/lib/components/Playlist/Playlist.tsx b/frontend/src/lib/components/Playlist/Playlist.tsx
new file mode 100644
index 0000000000000..42acac30276b0
--- /dev/null
+++ b/frontend/src/lib/components/Playlist/Playlist.tsx
@@ -0,0 +1,309 @@
+import './Playlist.scss'
+
+import { IconCollapse } from '@posthog/icons'
+import { LemonButton, LemonButtonProps, LemonCollapse, LemonSkeleton, Tooltip } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
+import { IconChevronRight } from 'lib/lemon-ui/icons'
+import { LemonTableLoader } from 'lib/lemon-ui/LemonTable/LemonTableLoader'
+import { range } from 'lib/utils'
+import { useEffect, useRef, useState } from 'react'
+import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
+
+import { Resizer } from '../Resizer/Resizer'
+
+const SCROLL_TRIGGER_OFFSET = 100
+
+export type PlaylistSection<T> = {
+    key: string
+    title?: string
+    items: T[]
+    render: ({ item, isActive }: { item: T; isActive: boolean }) => JSX.Element
+    initiallyOpen?: boolean
+    footer?: JSX.Element
+}
+
+type PlaylistHeaderAction = Pick<LemonButtonProps, 'icon' | 'tooltip' | 'children'> & {
+    key: string
+    content: React.ReactNode
+}
+
+export type PlaylistProps<T> = {
+    sections: PlaylistSection<T>[]
+    listEmptyState: JSX.Element
+    content: ({ activeItem }: { activeItem: T | null }) => JSX.Element
+    title?: string
+    notebooksHref?: string
+    embedded?: boolean
+    loading?: boolean
+    headerActions?: PlaylistHeaderAction[]
+    onScrollListEdge?: (edge: 'top' | 'bottom') => void
+    onSelect?: (item: T) => void
+    'data-attr'?: string
+    activeItemId?: string
+}
+
+const CounterBadge = ({ children }: { children: React.ReactNode }): JSX.Element => (
+    <span className="rounded py-1 px-2 mr-1 text-xs bg-border-light font-semibold select-none">{children}</span>
+)
+
+export function Playlist<
+    T extends {
+        id: string | number // accepts any object as long as it conforms to the interface of having an `id`
+        [key: string]: any
+    }
+>({
+    title,
+    notebooksHref,
+    loading,
+    embedded = false,
+    activeItemId: propsActiveItemId,
+    content,
+    sections,
+    headerActions = [],
+    onScrollListEdge,
+    listEmptyState,
+    onSelect,
+    'data-attr': dataAttr,
+}: PlaylistProps<T>): JSX.Element {
+    const [controlledActiveItemId, setControlledActiveItemId] = useState<T['id'] | null>(null)
+    const [listCollapsed, setListCollapsed] = useState<boolean>(false)
+    const playlistListRef = useRef<HTMLDivElement>(null)
+    const { ref: playlistRef, size } = useResizeBreakpoints({
+        0: 'small',
+        750: 'medium',
+    })
+
+    const onChangeActiveItem = (item: T): void => {
+        setControlledActiveItemId(item.id)
+        onSelect?.(item)
+    }
+
+    const activeItemId = propsActiveItemId === undefined ? controlledActiveItemId : propsActiveItemId
+
+    const activeItem = sections.flatMap((s) => s.items).find((i) => i.id === activeItemId) || null
+
+    return (
+        <div
+            ref={playlistRef}
+            data-attr={dataAttr}
+            className={clsx('Playlist', {
+                'Playlist--wide': size !== 'small',
+                'Playlist--embedded': embedded,
+            })}
+        >
+            <div ref={playlistListRef} className={clsx('Playlist__list', listCollapsed && 'Playlist__list--collapsed')}>
+                {listCollapsed ? (
+                    <CollapsedList onClickOpen={() => setListCollapsed(false)} />
+                ) : (
+                    <List
+                        title={title}
+                        notebooksHref={notebooksHref}
+                        loading={loading}
+                        sections={sections}
+                        headerActions={headerActions}
+                        onScrollListEdge={onScrollListEdge}
+                        onClickCollapse={() => setListCollapsed(true)}
+                        activeItemId={activeItemId}
+                        setActiveItemId={onChangeActiveItem}
+                        emptyState={listEmptyState}
+                    />
+                )}
+                <Resizer
+                    logicKey="playlist-list"
+                    placement="right"
+                    containerRef={playlistListRef}
+                    closeThreshold={100}
+                    onToggleClosed={(value) => setListCollapsed(value)}
+                    onDoubleClick={() => setListCollapsed(!listCollapsed)}
+                />
+            </div>
+            <div className="Playlist__main">{content({ activeItem })}</div>
+        </div>
+    )
+}
+
+const CollapsedList = ({ onClickOpen }: { onClickOpen: () => void }): JSX.Element => (
+    <div className="flex items-start h-full bg-bg-light border-r p-1">
+        <LemonButton size="small" icon={<IconChevronRight />} onClick={onClickOpen} />
+    </div>
+)
+
+function List<
+    T extends {
+        id: string | number
+        [key: string]: any
+    }
+>({
+    title,
+    notebooksHref,
+    onClickCollapse,
+    setActiveItemId,
+    headerActions = [],
+    sections,
+    activeItemId,
+    onScrollListEdge,
+    loading,
+    emptyState,
+}: {
+    title: PlaylistProps<T>['title']
+    notebooksHref: PlaylistProps<T>['notebooksHref']
+    onClickCollapse: () => void
+    activeItemId: T['id'] | null
+    setActiveItemId: (item: T) => void
+    headerActions: PlaylistProps<T>['headerActions']
+    sections: PlaylistProps<T>['sections']
+    onScrollListEdge: PlaylistProps<T>['onScrollListEdge']
+    loading: PlaylistProps<T>['loading']
+    emptyState: PlaylistProps<T>['listEmptyState']
+}): JSX.Element {
+    const [activeHeaderActionKey, setActiveHeaderActionKey] = useState<string | null>(null)
+    const lastScrollPositionRef = useRef(0)
+    const contentRef = useRef<HTMLDivElement | null>(null)
+
+    useEffect(() => {
+        if (contentRef.current) {
+            contentRef.current.scrollTop = 0
+        }
+    }, [activeHeaderActionKey])
+
+    const handleScroll = (e: React.UIEvent<HTMLDivElement>): void => {
+        // If we are scrolling down then check if we are at the bottom of the list
+        if (e.currentTarget.scrollTop > lastScrollPositionRef.current) {
+            const scrollPosition = e.currentTarget.scrollTop + e.currentTarget.clientHeight
+            if (e.currentTarget.scrollHeight - scrollPosition < SCROLL_TRIGGER_OFFSET) {
+                onScrollListEdge?.('bottom')
+            }
+        }
+
+        // Same again but if scrolling to the top
+        if (e.currentTarget.scrollTop < lastScrollPositionRef.current) {
+            if (e.currentTarget.scrollTop < SCROLL_TRIGGER_OFFSET) {
+                onScrollListEdge?.('top')
+            }
+        }
+
+        lastScrollPositionRef.current = e.currentTarget.scrollTop
+    }
+
+    const itemsCount = sections.flatMap((s) => s.items).length
+    const actionContent = headerActions?.find((a) => activeHeaderActionKey === a.key)?.content
+    const initiallyOpenSections = sections.filter((s) => s.initiallyOpen).map((s) => s.key)
+
+    return (
+        <div className="flex flex-col w-full bg-bg-light overflow-hidden border-r h-full">
+            <DraggableToNotebook href={notebooksHref}>
+                <div className="shrink-0 relative flex justify-between items-center p-1 gap-1 whitespace-nowrap border-b">
+                    <LemonButton size="small" icon={<IconCollapse className="rotate-90" />} onClick={onClickCollapse} />
+                    <span className="py-1 flex flex-1 gap-2">
+                        {title ? (
+                            <span className="font-bold uppercase text-xs my-1 tracking-wide flex gap-1 items-center">
+                                {title}
+                            </span>
+                        ) : null}
+                        <Tooltip
+                            placement="bottom"
+                            title={
+                                <>
+                                    Showing {itemsCount} results.
+                                    <br />
+                                    Scrolling to the bottom or the top of the list will load older or newer results
+                                    respectively.
+                                </>
+                            }
+                        >
+                            <span>
+                                <CounterBadge>{Math.min(999, itemsCount)}+</CounterBadge>
+                            </span>
+                        </Tooltip>
+                    </span>
+                    {headerActions.map(({ key, icon, tooltip, children }) => (
+                        <LemonButton
+                            key={key}
+                            icon={icon}
+                            tooltip={tooltip}
+                            size="small"
+                            active={activeHeaderActionKey === key}
+                            onClick={() => setActiveHeaderActionKey(activeHeaderActionKey === key ? null : key)}
+                        >
+                            {children}
+                        </LemonButton>
+                    ))}
+                    <LemonTableLoader loading={loading} />
+                </div>
+            </DraggableToNotebook>
+
+            <div className="overflow-y-auto" onScroll={handleScroll} ref={contentRef}>
+                {actionContent && <div className="bg-bg-3000">{actionContent}</div>}
+
+                {sections.flatMap((s) => s.items).length ? (
+                    <>
+                        {sections.length > 1 ? (
+                            <LemonCollapse
+                                defaultActiveKeys={initiallyOpenSections}
+                                panels={sections.map((s) => ({
+                                    key: s.key,
+                                    header: s.title,
+                                    content: (
+                                        <ListSection {...s} activeItemId={activeItemId} onClick={setActiveItemId} />
+                                    ),
+                                    className: 'p-0',
+                                }))}
+                                multiple
+                                embedded
+                                size="small"
+                            />
+                        ) : (
+                            <ListSection {...sections[0]} activeItemId={activeItemId} onClick={setActiveItemId} />
+                        )}
+                    </>
+                ) : loading ? (
+                    <LoadingState />
+                ) : (
+                    emptyState
+                )}
+            </div>
+        </div>
+    )
+}
+
+export function ListSection<
+    T extends {
+        id: string | number
+        [key: string]: any
+    }
+>({
+    items,
+    render,
+    footer,
+    onClick,
+    activeItemId,
+}: PlaylistSection<T> & {
+    onClick: (item: T) => void
+    activeItemId: T['id'] | null
+}): JSX.Element {
+    return (
+        <>
+            {items.length &&
+                items.map((item) => (
+                    <div key={item.id} className="border-b" onClick={() => onClick(item)}>
+                        {render({ item, isActive: item.id === activeItemId })}
+                    </div>
+                ))}
+            {footer}
+        </>
+    )
+}
+
+const LoadingState = (): JSX.Element => {
+    return (
+        <>
+            {range(20).map((i) => (
+                <div key={i} className="p-4 space-y-2">
+                    <LemonSkeleton className="w-1/2 h-4" />
+                    <LemonSkeleton className="w-1/3 h-4" />
+                </div>
+            ))}
+        </>
+    )
+}
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
index 01aa63775fcf9..6e7dfba7a766c 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.scss
@@ -5,6 +5,11 @@
     overflow: hidden;
     border: 1px solid var(--border);
     border-radius: var(--radius);
+
+    &--embedded {
+        border: none;
+        border-radius: 0;
+    }
 }
 
 .LemonCollapsePanel {
diff --git a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
index 55b9743c907bd..96e8105c60133 100644
--- a/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
+++ b/frontend/src/lib/lemon-ui/LemonCollapse/LemonCollapse.tsx
@@ -21,6 +21,7 @@ interface LemonCollapsePropsBase<K extends React.Key> {
     panels: (LemonCollapsePanel<K> | null | false)[]
     className?: string
     size?: LemonButtonProps['size']
+    embedded?: boolean
 }
 
 interface LemonCollapsePropsSingle<K extends React.Key> extends LemonCollapsePropsBase<K> {
@@ -43,6 +44,7 @@ export function LemonCollapse<K extends React.Key>({
     panels,
     className,
     size,
+    embedded,
     ...props
 }: LemonCollapseProps<K>): JSX.Element {
     let isPanelExpanded: (key: K) => boolean
@@ -72,7 +74,7 @@ export function LemonCollapse<K extends React.Key>({
     }
 
     return (
-        <div className={clsx('LemonCollapse', className)}>
+        <div className={clsx('LemonCollapse', embedded && 'LemonCollapse--embedded', className)}>
             {(panels.filter(Boolean) as LemonCollapsePanel<K>[]).map(({ key, ...panel }) => (
                 <LemonCollapsePanel
                     key={key}
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
index 95d80a623be5c..01a34e228013c 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -1,23 +1,13 @@
-import './SessionRecordingsPlaylist.scss'
-
-import { IconCollapse, IconFilter, IconGear } from '@posthog/icons'
-import { LemonButton, Link } from '@posthog/lemon-ui'
-import clsx from 'clsx'
-import { range } from 'd3'
+import { IconFilter, IconGear } from '@posthog/icons'
+import { LemonButton, Link, Spinner } from '@posthog/lemon-ui'
 import { BindLogic, useActions, useValues } from 'kea'
 import { EmptyMessage } from 'lib/components/EmptyMessage/EmptyMessage'
+import { Playlist, PlaylistSection } from 'lib/components/Playlist/Playlist'
 import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo'
-import { Resizer } from 'lib/components/Resizer/Resizer'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver'
-import { IconChevronRight, IconWithCount } from 'lib/lemon-ui/icons'
+import { IconWithCount } from 'lib/lemon-ui/icons'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
-import { LemonTableLoader } from 'lib/lemon-ui/LemonTable/LemonTableLoader'
-import { Spinner } from 'lib/lemon-ui/Spinner'
-import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
-import React, { useEffect, useRef } from 'react'
-import { DraggableToNotebook } from 'scenes/notebooks/AddToNotebook/DraggableToNotebook'
 import { useNotebookNode } from 'scenes/notebooks/Nodes/NotebookNodeContext'
 import { urls } from 'scenes/urls'
 
@@ -26,410 +16,245 @@ import { ReplayTabs, SessionRecordingType } from '~/types'
 import { RecordingsUniversalFilters } from '../filters/RecordingsUniversalFilters'
 import { SessionRecordingsFilters } from '../filters/SessionRecordingsFilters'
 import { SessionRecordingPlayer } from '../player/SessionRecordingPlayer'
-import { SessionRecordingPreview, SessionRecordingPreviewSkeleton } from './SessionRecordingPreview'
+import { SessionRecordingPreview } from './SessionRecordingPreview'
 import {
     DEFAULT_RECORDING_FILTERS,
-    RECORDINGS_LIMIT,
     SessionRecordingPlaylistLogicProps,
     sessionRecordingsPlaylistLogic,
 } from './sessionRecordingsPlaylistLogic'
 import { SessionRecordingsPlaylistSettings } from './SessionRecordingsPlaylistSettings'
 import { SessionRecordingsPlaylistTroubleshooting } from './SessionRecordingsPlaylistTroubleshooting'
 
-const SCROLL_TRIGGER_OFFSET = 100
-
-const CounterBadge = ({ children }: { children: React.ReactNode }): JSX.Element => (
-    <span className="rounded py-1 px-2 mr-1 text-xs bg-border-light font-semibold select-none">{children}</span>
-)
-
-function UnusableEventsWarning(props: { unusableEventsInFilter: string[] }): JSX.Element {
-    // TODO add docs on how to enrich custom events with session_id and link to it from here
-    return (
-        <LemonBanner type="warning">
-            <p>Cannot use these events to filter for session recordings:</p>
-            <li className="my-1">
-                {props.unusableEventsInFilter.map((event) => (
-                    <span key={event}>"{event}"</span>
-                ))}
-            </li>
-            <p>
-                Events have to have a <PropertyKeyInfo value="$session_id" /> to be used to filter recordings. This is
-                added automatically by{' '}
-                <Link to="https://posthog.com/docs/libraries/js" target="_blank">
-                    the Web SDK
-                </Link>
-                ,{' '}
-                <Link to="https://posthog.com/docs/libraries/android" target="_blank">
-                    the Android SDK
-                </Link>
-            </p>
-        </LemonBanner>
-    )
-}
-
-function PinnedRecordingsList(): JSX.Element | null {
-    const { setSelectedRecordingId } = useActions(sessionRecordingsPlaylistLogic)
-    const { activeSessionRecordingId, pinnedRecordings } = useValues(sessionRecordingsPlaylistLogic)
-
-    const { featureFlags } = useValues(featureFlagLogic)
-    const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
-
-    const description = isTestingSaved ? 'Saved' : 'Pinned'
-
-    if (!pinnedRecordings.length) {
-        return null
+export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicProps): JSX.Element {
+    const logicProps: SessionRecordingPlaylistLogicProps = {
+        ...props,
+        autoPlay: props.autoPlay ?? true,
     }
-
-    return (
-        <>
-            <div className="flex justify-between items-center pl-3 pr-1 py-2 text-muted-alt border-b uppercase font-semibold text-xs">
-                {description} recordings
-            </div>
-            {pinnedRecordings.map((rec) => (
-                <div key={rec.id} className="border-b">
-                    <SessionRecordingPreview
-                        recording={rec}
-                        onClick={() => setSelectedRecordingId(rec.id)}
-                        isActive={activeSessionRecordingId === rec.id}
-                        pinned={true}
-                    />
-                </div>
-            ))}
-        </>
-    )
-}
-
-function RecordingsLists(): JSX.Element {
+    const logic = sessionRecordingsPlaylistLogic(logicProps)
     const {
         filters,
-        advancedFilters,
-        simpleFilters,
-        hasNext,
         pinnedRecordings,
-        otherRecordings,
-        sessionRecordingsResponseLoading,
-        activeSessionRecordingId,
-        showFilters,
-        showSettings,
         totalFiltersCount,
-        sessionRecordingsAPIErrored,
-        unusableEventsInFilter,
-        logicProps,
-        showOtherRecordings,
-        recordingsCount,
-        isRecordingsListCollapsed,
-        sessionSummaryLoading,
         useUniversalFiltering,
-    } = useValues(sessionRecordingsPlaylistLogic)
+        matchingEventsMatchType,
+        sessionRecordingsResponseLoading,
+        otherRecordings,
+        sessionSummaryLoading,
+        advancedFilters,
+        simpleFilters,
+        activeSessionRecordingId,
+        hasNext,
+    } = useValues(logic)
     const {
+        maybeLoadSessionRecordings,
+        summarizeSession,
         setSelectedRecordingId,
         setAdvancedFilters,
         setSimpleFilters,
-        maybeLoadSessionRecordings,
-        setShowFilters,
-        setShowSettings,
         resetFilters,
-        toggleShowOtherRecordings,
-        toggleRecordingsListCollapsed,
-        summarizeSession,
-    } = useActions(sessionRecordingsPlaylistLogic)
-
-    const onRecordingClick = (recording: SessionRecordingType): void => {
-        setSelectedRecordingId(recording.id)
-    }
-
-    const onSummarizeClick = (recording: SessionRecordingType): void => {
-        summarizeSession(recording.id)
-    }
-
-    const lastScrollPositionRef = useRef(0)
-    const contentRef = useRef<HTMLDivElement | null>(null)
-
-    const handleScroll = (e: React.UIEvent<HTMLDivElement>): void => {
-        // If we are scrolling down then check if we are at the bottom of the list
-        if (e.currentTarget.scrollTop > lastScrollPositionRef.current) {
-            const scrollPosition = e.currentTarget.scrollTop + e.currentTarget.clientHeight
-            if (e.currentTarget.scrollHeight - scrollPosition < SCROLL_TRIGGER_OFFSET) {
-                maybeLoadSessionRecordings('older')
-            }
-        }
-
-        // Same again but if scrolling to the top
-        if (e.currentTarget.scrollTop < lastScrollPositionRef.current) {
-            if (e.currentTarget.scrollTop < SCROLL_TRIGGER_OFFSET) {
-                maybeLoadSessionRecordings('newer')
-            }
-        }
+    } = useActions(logic)
 
-        lastScrollPositionRef.current = e.currentTarget.scrollTop
-    }
+    const { featureFlags } = useValues(featureFlagLogic)
+    const isTestingSaved = featureFlags[FEATURE_FLAGS.SAVED_NOT_PINNED] === 'test'
 
-    useEffect(() => {
-        if (contentRef.current) {
-            contentRef.current.scrollTop = 0
-        }
-    }, [showFilters, showSettings])
+    const pinnedDescription = isTestingSaved ? 'Saved' : 'Pinned'
 
     const notebookNode = useNotebookNode()
 
-    return isRecordingsListCollapsed ? (
-        <div className="flex items-start h-full bg-bg-light border-r p-1">
-            <LemonButton size="small" icon={<IconChevronRight />} onClick={() => toggleRecordingsListCollapsed()} />
-        </div>
-    ) : (
-        <div className="flex flex-col w-full bg-bg-light overflow-hidden border-r h-full">
-            <DraggableToNotebook href={urls.replay(ReplayTabs.Recent, filters)}>
-                <div className="shrink-0 relative flex justify-between items-center p-1 gap-1 whitespace-nowrap border-b">
-                    <LemonButton
-                        size="small"
-                        icon={<IconCollapse className="rotate-90" />}
-                        onClick={() => toggleRecordingsListCollapsed()}
-                    />
-                    <span className="py-1 flex flex-1 gap-2">
-                        {!notebookNode ? (
-                            <span className="font-bold uppercase text-xs my-1 tracking-wide flex gap-1 items-center">
-                                Recordings
-                            </span>
-                        ) : null}
-                        <Tooltip
-                            placement="bottom"
-                            title={
-                                <>
-                                    Showing {recordingsCount} results.
-                                    <br />
-                                    Scrolling to the bottom or the top of the list will load older or newer recordings
-                                    respectively.
-                                </>
-                            }
-                        >
-                            <span>
-                                <CounterBadge>{Math.min(999, recordingsCount)}+</CounterBadge>
-                            </span>
-                        </Tooltip>
-                    </span>
-                    {(!useUniversalFiltering || notebookNode) && (
-                        <LemonButton
-                            tooltip="Filter recordings"
-                            size="small"
-                            active={showFilters}
-                            icon={
-                                <IconWithCount count={totalFiltersCount}>
-                                    <IconFilter />
-                                </IconWithCount>
-                            }
-                            onClick={() => {
-                                if (notebookNode) {
-                                    notebookNode.actions.toggleEditing()
-                                } else {
-                                    setShowFilters(!showFilters)
-                                }
-                            }}
-                        >
-                            Filter
-                        </LemonButton>
-                    )}
-                    <LemonButton
-                        tooltip="Playlist settings"
-                        size="small"
-                        active={showSettings}
-                        icon={<IconGear />}
-                        onClick={() => setShowSettings(!showSettings)}
-                    />
-                    <LemonTableLoader loading={sessionRecordingsResponseLoading} />
-                </div>
-            </DraggableToNotebook>
+    const sections: PlaylistSection<SessionRecordingType>[] = []
+    const headerActions = []
 
-            <div className={clsx('overflow-y-auto')} onScroll={handleScroll} ref={contentRef}>
-                {!notebookNode && showFilters ? (
-                    <div className="bg-bg-3000 border-b">
-                        <SessionRecordingsFilters
-                            advancedFilters={advancedFilters}
-                            simpleFilters={simpleFilters}
-                            setAdvancedFilters={setAdvancedFilters}
-                            setSimpleFilters={setSimpleFilters}
-                            hideSimpleFilters={logicProps.hideSimpleFilters}
-                            showPropertyFilters={!logicProps.personUUID}
-                            onReset={resetFilters}
-                        />
-                    </div>
-                ) : showSettings ? (
-                    <SessionRecordingsPlaylistSettings />
-                ) : null}
+    const onSummarizeClick = (recording: SessionRecordingType): void => {
+        summarizeSession(recording.id)
+    }
 
-                {pinnedRecordings.length || otherRecordings.length ? (
-                    <ul>
-                        <PinnedRecordingsList />
+    if (!useUniversalFiltering || notebookNode) {
+        headerActions.push({
+            key: 'filters',
+            tooltip: 'Filter recordings',
+            content: (
+                <SessionRecordingsFilters
+                    advancedFilters={advancedFilters}
+                    simpleFilters={simpleFilters}
+                    setAdvancedFilters={setAdvancedFilters}
+                    setSimpleFilters={setSimpleFilters}
+                    hideSimpleFilters={props.hideSimpleFilters}
+                    showPropertyFilters={!props.personUUID}
+                    onReset={resetFilters}
+                />
+            ),
+            icon: (
+                <IconWithCount count={totalFiltersCount}>
+                    <IconFilter />
+                </IconWithCount>
+            ),
+            children: 'Filter',
+        })
+    }
 
-                        {pinnedRecordings.length ? (
-                            <div className="flex justify-between items-center pl-3 pr-1 py-2 text-muted-alt border-b uppercase font-semibold text-xs">
-                                Other recordings
-                                <LemonButton size="xsmall" onClick={() => toggleShowOtherRecordings()}>
-                                    {showOtherRecordings ? 'Hide' : 'Show'}
-                                </LemonButton>
-                            </div>
-                        ) : null}
+    headerActions.push({
+        key: 'settings',
+        tooltip: 'Playlist settings',
+        content: <SessionRecordingsPlaylistSettings />,
+        icon: <IconGear />,
+    })
 
-                        <>
-                            {showOtherRecordings
-                                ? otherRecordings.map((rec) => (
-                                      <div key={rec.id} className="border-b">
-                                          <SessionRecordingPreview
-                                              recording={rec}
-                                              onClick={() => onRecordingClick(rec)}
-                                              isActive={activeSessionRecordingId === rec.id}
-                                              pinned={false}
-                                              summariseFn={onSummarizeClick}
-                                              sessionSummaryLoading={sessionSummaryLoading}
-                                          />
-                                      </div>
-                                  ))
-                                : null}
+    if (pinnedRecordings.length) {
+        sections.push({
+            key: 'pinned',
+            title: `${pinnedDescription} recordings`,
+            items: pinnedRecordings,
+            render: ({ item, isActive }) => (
+                <SessionRecordingPreview recording={item} isActive={isActive} pinned={true} />
+            ),
+            initiallyOpen: true,
+        })
+    }
 
-                            <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
-                                {!showOtherRecordings && totalFiltersCount ? (
-                                    <>Filters do not apply to pinned recordings</>
-                                ) : sessionRecordingsResponseLoading ? (
-                                    <>
-                                        <Spinner textColored /> Loading older recordings
-                                    </>
-                                ) : hasNext ? (
-                                    <LemonButton onClick={() => maybeLoadSessionRecordings('older')}>
-                                        Load more
-                                    </LemonButton>
-                                ) : (
-                                    'No more results'
-                                )}
-                            </div>
-                        </>
-                    </ul>
-                ) : sessionRecordingsResponseLoading ? (
+    sections.push({
+        key: 'other',
+        title: 'Other recordings',
+        items: otherRecordings,
+        render: ({ item, isActive }) => (
+            <SessionRecordingPreview
+                recording={item}
+                isActive={isActive}
+                pinned={false}
+                summariseFn={onSummarizeClick}
+                sessionSummaryLoading={sessionSummaryLoading}
+            />
+        ),
+        footer: (
+            <div className="m-4 h-10 flex items-center justify-center gap-2 text-muted-alt">
+                {sessionRecordingsResponseLoading ? (
                     <>
-                        {range(RECORDINGS_LIMIT).map((i) => (
-                            <SessionRecordingPreviewSkeleton key={i} />
-                        ))}
+                        <Spinner textColored /> Loading older recordings
                     </>
+                ) : hasNext ? (
+                    <LemonButton onClick={() => maybeLoadSessionRecordings('older')}>Load more</LemonButton>
                 ) : (
-                    <div className="p-3 text-sm text-muted-alt">
-                        {sessionRecordingsAPIErrored ? (
-                            <LemonBanner type="error">Error while trying to load recordings.</LemonBanner>
-                        ) : unusableEventsInFilter.length ? (
-                            <UnusableEventsWarning unusableEventsInFilter={unusableEventsInFilter} />
-                        ) : (
-                            <div className="flex flex-col items-center space-y-2">
-                                {filters.date_from === DEFAULT_RECORDING_FILTERS.date_from ? (
-                                    <>
-                                        <span>No matching recordings found</span>
-                                        <LemonButton
-                                            type="secondary"
-                                            data-attr="expand-replay-listing-from-default-seven-days-to-twenty-one"
-                                            onClick={() => {
-                                                setAdvancedFilters({
-                                                    date_from: '-30d',
-                                                })
-                                            }}
-                                        >
-                                            Search over the last 30 days
-                                        </LemonButton>
-                                    </>
-                                ) : (
-                                    <SessionRecordingsPlaylistTroubleshooting />
-                                )}
-                            </div>
-                        )}
-                    </div>
+                    'No more results'
                 )}
             </div>
-        </div>
-    )
-}
-
-export function SessionRecordingsPlaylist(props: SessionRecordingPlaylistLogicProps): JSX.Element {
-    const logicProps: SessionRecordingPlaylistLogicProps = {
-        ...props,
-        autoPlay: props.autoPlay ?? true,
-    }
-    const playlistRecordingsListRef = useRef<HTMLDivElement>(null)
-    const logic = sessionRecordingsPlaylistLogic(logicProps)
-    const {
-        activeSessionRecording,
-        activeSessionRecordingId,
-        matchingEventsMatchType,
-        pinnedRecordings,
-        isRecordingsListCollapsed,
-        useUniversalFiltering,
-    } = useValues(logic)
-    const { toggleRecordingsListCollapsed } = useActions(logic)
-
-    const { ref: playlistRef, size } = useResizeBreakpoints({
-        0: 'small',
-        750: 'medium',
+        ),
     })
 
-    const notebookNode = useNotebookNode()
-
     return (
         <BindLogic logic={sessionRecordingsPlaylistLogic} props={logicProps}>
             <div className="h-full space-y-2">
                 {useUniversalFiltering && <RecordingsUniversalFilters />}
-
-                <div
-                    ref={playlistRef}
+                <Playlist
                     data-attr="session-recordings-playlist"
-                    className={clsx('SessionRecordingsPlaylist', {
-                        'SessionRecordingsPlaylist--wide': size !== 'small',
-                        'SessionRecordingsPlaylist--embedded': notebookNode,
-                    })}
-                >
-                    <div
-                        ref={playlistRecordingsListRef}
-                        className={clsx(
-                            'SessionRecordingsPlaylist__list',
-                            isRecordingsListCollapsed && 'SessionRecordingsPlaylist__list--collapsed'
-                        )}
-                    >
-                        <RecordingsLists />
-                        <Resizer
-                            logicKey="player-recordings-list"
-                            placement="right"
-                            containerRef={playlistRecordingsListRef}
-                            closeThreshold={100}
-                            onToggleClosed={(shouldBeClosed) => toggleRecordingsListCollapsed(shouldBeClosed)}
-                            onDoubleClick={() => toggleRecordingsListCollapsed()}
-                        />
-                    </div>
-                    <div className="SessionRecordingsPlaylist__player">
-                        {!activeSessionRecordingId ? (
-                            <div className="mt-20">
-                                <EmptyMessage
-                                    title="No recording selected"
-                                    description="Please select a recording from the list on the left"
-                                    buttonText="Learn more about recordings"
-                                    buttonTo="https://posthog.com/docs/user-guides/recordings"
-                                />
-                            </div>
-                        ) : (
+                    notebooksHref={urls.replay(ReplayTabs.Recent, filters)}
+                    title={!notebookNode ? 'Recordings' : undefined}
+                    embedded={!!notebookNode}
+                    sections={sections}
+                    headerActions={headerActions}
+                    loading={sessionRecordingsResponseLoading}
+                    onScrollListEdge={(edge) => {
+                        if (edge === 'top') {
+                            maybeLoadSessionRecordings('newer')
+                        } else {
+                            maybeLoadSessionRecordings('older')
+                        }
+                    }}
+                    listEmptyState={<ListEmptyState />}
+                    onSelect={(item) => setSelectedRecordingId(item.id)}
+                    activeItemId={activeSessionRecordingId}
+                    content={({ activeItem }) =>
+                        activeItem ? (
                             <SessionRecordingPlayer
                                 playerKey={props.logicKey ?? 'playlist'}
-                                sessionRecordingId={activeSessionRecordingId}
+                                sessionRecordingId={activeItem.id}
                                 matchingEventsMatchType={matchingEventsMatchType}
                                 playlistLogic={logic}
                                 noBorder
-                                pinned={!!pinnedRecordings.find((x) => x.id === activeSessionRecordingId)}
+                                pinned={!!pinnedRecordings.find((x) => x.id === activeItem.id)}
                                 setPinned={
                                     props.onPinnedChange
                                         ? (pinned) => {
-                                              if (!activeSessionRecording?.id) {
+                                              if (!activeItem.id) {
                                                   return
                                               }
-                                              props.onPinnedChange?.(activeSessionRecording, pinned)
+                                              props.onPinnedChange?.(activeItem, pinned)
                                           }
                                         : undefined
                                 }
                             />
-                        )}
-                    </div>
-                </div>
+                        ) : (
+                            <div className="mt-20">
+                                <EmptyMessage
+                                    title="No recording selected"
+                                    description="Please select a recording from the list on the left"
+                                    buttonText="Learn more about recordings"
+                                    buttonTo="https://posthog.com/docs/user-guides/recordings"
+                                />
+                            </div>
+                        )
+                    }
+                />
             </div>
         </BindLogic>
     )
 }
+
+const ListEmptyState = (): JSX.Element => {
+    const { filters, sessionRecordingsAPIErrored, unusableEventsInFilter } = useValues(sessionRecordingsPlaylistLogic)
+    const { setAdvancedFilters } = useActions(sessionRecordingsPlaylistLogic)
+
+    return (
+        <div className="p-3 text-sm text-muted-alt">
+            {sessionRecordingsAPIErrored ? (
+                <LemonBanner type="error">Error while trying to load recordings.</LemonBanner>
+            ) : unusableEventsInFilter.length ? (
+                <UnusableEventsWarning unusableEventsInFilter={unusableEventsInFilter} />
+            ) : (
+                <div className="flex flex-col items-center space-y-2">
+                    {filters.date_from === DEFAULT_RECORDING_FILTERS.date_from ? (
+                        <>
+                            <span>No matching recordings found</span>
+                            <LemonButton
+                                type="secondary"
+                                data-attr="expand-replay-listing-from-default-seven-days-to-twenty-one"
+                                onClick={() => {
+                                    setAdvancedFilters({
+                                        date_from: '-30d',
+                                    })
+                                }}
+                            >
+                                Search over the last 30 days
+                            </LemonButton>
+                        </>
+                    ) : (
+                        <SessionRecordingsPlaylistTroubleshooting />
+                    )}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function UnusableEventsWarning(props: { unusableEventsInFilter: string[] }): JSX.Element {
+    // TODO add docs on how to enrich custom events with session_id and link to it from here
+    return (
+        <LemonBanner type="warning">
+            <p>Cannot use these events to filter for session recordings:</p>
+            <li className="my-1">
+                {props.unusableEventsInFilter.map((event) => (
+                    <span key={event}>"{event}"</span>
+                ))}
+            </li>
+            <p>
+                Events have to have a <PropertyKeyInfo value="$session_id" /> to be used to filter recordings. This is
+                added automatically by{' '}
+                <Link to="https://posthog.com/docs/libraries/js" target="_blank">
+                    the Web SDK
+                </Link>
+                ,{' '}
+                <Link to="https://posthog.com/docs/libraries/android" target="_blank">
+                    the Android SDK
+                </Link>
+            </p>
+        </LemonBanner>
+    )
+}
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx
index b9a504d182821..01be80946d2c8 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistScene.tsx
@@ -1,5 +1,3 @@
-import './SessionRecordingsPlaylist.scss'
-
 import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { EditableField } from 'lib/components/EditableField/EditableField'
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
index be48802d9c7c4..972628dd0032b 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -12,7 +12,7 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
     const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
 
     return (
-        <div className="relative flex flex-col gap-2 p-3 bg-bg-3000 border-b">
+        <div className="relative flex flex-col gap-2 p-3 border-b">
             <Tooltip
                 title={
                     <div className="text-center">
diff --git a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
index bf0807e092fac..0b66d4bb34062 100644
--- a/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
+++ b/frontend/src/scenes/session-recordings/playlist/sessionRecordingsPlaylistLogic.ts
@@ -25,7 +25,6 @@ import {
     RecordingDurationFilter,
     RecordingFilters,
     RecordingUniversalFilters,
-    ReplayTabs,
     SessionRecordingId,
     SessionRecordingsResponse,
     SessionRecordingType,
@@ -186,7 +185,6 @@ export interface SessionRecordingPlaylistLogicProps {
     onFiltersChange?: (filters: RecordingFilters) => void
     pinnedRecordings?: (SessionRecordingType | string)[]
     onPinnedChange?: (recording: SessionRecordingType, pinned: boolean) => void
-    currentTab?: ReplayTabs
 }
 
 export interface SessionSummaryResponse {
@@ -201,6 +199,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         (props: SessionRecordingPlaylistLogicProps) =>
             `${props.logicKey}-${props.personUUID}-${props.updateSearchParams ? '-with-search' : ''}`
     ),
+
     connect({
         actions: [
             eventUsageLogic,
@@ -215,6 +214,7 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
             ['autoplayDirection', 'hideViewedRecordings'],
         ],
     }),
+
     actions({
         setUniversalFilters: (filters: Partial<RecordingUniversalFilters>) => ({ filters }),
         setAdvancedFilters: (filters: Partial<RecordingFilters>) => ({ filters }),
@@ -234,7 +234,6 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
         loadNext: true,
         loadPrev: true,
         toggleShowOtherRecordings: (show?: boolean) => ({ show }),
-        toggleRecordingsListCollapsed: (override?: boolean) => ({ override }),
     }),
     propsChanged(({ actions, props }, oldProps) => {
         if (!objectsEqual(props.advancedFilters, oldProps.advancedFilters)) {
@@ -514,13 +513,6 @@ export const sessionRecordingsPlaylistLogic = kea<sessionRecordingsPlaylistLogic
                 loadPrev: () => false,
             },
         ],
-        isRecordingsListCollapsed: [
-            false,
-            { persist: true },
-            {
-                toggleRecordingsListCollapsed: (state, { override }) => override ?? !state,
-            },
-        ],
     })),
     listeners(({ props, actions, values }) => ({
         loadAllRecordings: () => {