diff --git a/frontend/__snapshots__/scenes-app-surveys--survey-view.png b/frontend/__snapshots__/scenes-app-surveys--survey-view.png
index 418de31110ebf..4fd6630f9ddd5 100644
Binary files a/frontend/__snapshots__/scenes-app-surveys--survey-view.png and b/frontend/__snapshots__/scenes-app-surveys--survey-view.png differ
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx
index fc71b627e76e2..d81b615a5adde 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.tsx
+++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx
@@ -65,8 +65,8 @@ let uniqueNode = 0
 
 export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }: DataTableProps): JSX.Element {
     const uniqueNodeKey = useState(() => uniqueNode++)
-    const [vizKey] = useState(() => `DataTable.${uniqueKey || uniqueNodeKey}`)
     const [dataKey] = useState(() => `DataNode.${uniqueKey || uniqueNodeKey}`)
+    const [vizKey] = useState(() => `DataTable.${uniqueNodeKey}`)
 
     const dataNodeLogicProps: DataNodeLogicProps = {
         query: query.source,
@@ -374,9 +374,9 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         <HogQLQueryEditor query={query.source} setQuery={setQuerySource} />
                     ) : null}
                     {showFirstRow && (
-                        <div className="flex gap-4 items-center">
+                        <div className="flex gap-4 items-center flex-wrap">
                             {firstRowLeft}
-                            <div className="flex-1" />
+                            {firstRowLeft.length > 0 && firstRowRight.length > 0 ? <div className="flex-1" /> : null}
                             {firstRowRight}
                             {showOpenEditorButton && inlineEditorButtonOnRow === 1 && !isReadOnly ? (
                                 <OpenEditorButton query={query} />
@@ -387,7 +387,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                     {showSecondRow && (
                         <div className="flex gap-4 items-center">
                             {secondRowLeft}
-                            <div className="flex-1" />
+                            {secondRowLeft.length > 0 && secondRowRight.length > 0 ? <div className="flex-1" /> : null}
                             {secondRowRight}
                             {showOpenEditorButton && inlineEditorButtonOnRow === 2 && !isReadOnly ? (
                                 <OpenEditorButton query={query} />
diff --git a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
index 5642f184dcfbc..de26425709f08 100644
--- a/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/EditorFilters.scss
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins';
-@import '../../../styles/mixins';
 
 .EditorFiltersWrapper {
     flex-shrink: 0;
@@ -48,38 +47,6 @@
                 display: block;
                 padding-right: 1rem;
             }
-            &.anim--enter {
-                width: 0px;
-
-                .EditorFilters {
-                    transform: translateX(calc(-1 * var(--editor-panel-width)));
-                }
-            }
-
-            &.anim--enter-active {
-                width: var(--editor-panel-width);
-                transition: width 250ms;
-                .EditorFilters {
-                    transform: translateX(0px);
-                    transition: transform 250ms;
-                }
-            }
-
-            &.anim--exit {
-                width: var(--editor-panel-width);
-                .EditorFilters {
-                    transform: translateX(0px);
-                }
-            }
-
-            &.anim--exit-active {
-                width: 0px;
-                transition: width 250ms;
-                .EditorFilters {
-                    transform: translateX(calc(-1 * var(--editor-panel-width)));
-                    transition: transform 250ms;
-                }
-            }
         }
 
         .EditorFilters {
@@ -95,4 +62,15 @@
             }
         }
     }
+
+    &.EditorFiltersWrapper--embedded {
+        margin-right: 0rem;
+
+        @include screen($xl) {
+            .EditorFilters {
+                width: 100%;
+                padding-right: 0rem;
+            }
+        }
+    }
 }
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.scss b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.scss
new file mode 100644
index 0000000000000..d9f57009fa37b
--- /dev/null
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.scss
@@ -0,0 +1,25 @@
+@import '../../../styles/mixins';
+
+// Here we override based on NotebookNode the ph-query styling, so
+// as to not change the global styling. We need the extra nesting to ensure we
+// are more specific than the other insights css
+
+.NotebookNode.ph-query {
+    .insights-graph-container {
+        .ant-card-body {
+            padding: 0;
+        }
+
+        .RetentionContainer {
+            .LineGraph {
+                position: relative;
+            }
+        }
+    }
+
+    .funnel-insights-container {
+        &.non-empty-state {
+            min-height: initial;
+        }
+    }
+}
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
index 8391561a29078..3616fe485725a 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodeQuery.tsx
@@ -11,6 +11,8 @@ import { IconSettings } from 'lib/lemon-ui/icons'
 import { urls } from 'scenes/urls'
 import api from 'lib/api'
 
+import './NotebookNodeQuery.scss'
+
 const DEFAULT_QUERY: QuerySchema = {
     kind: NodeKind.DataTableNode,
     source: {
@@ -35,7 +37,7 @@ const Component = (props: NotebookNodeViewProps<NotebookNodeQueryAttributes>): J
             modifiedQuery.full = false
             modifiedQuery.showHogQLEditor = false
             modifiedQuery.embedded = true
-        } else if (NodeKind.InsightVizNode === modifiedQuery.kind) {
+        } else if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = false
             modifiedQuery.showHeader = false
             modifiedQuery.showTable = false
@@ -75,8 +77,9 @@ export const Settings = ({
             modifiedQuery.showOpenEditorButton = false
             modifiedQuery.showHogQLEditor = true
             modifiedQuery.showResultsTable = false
-            modifiedQuery.showReload = true
-        } else if (NodeKind.InsightVizNode === modifiedQuery.kind) {
+            modifiedQuery.showReload = false
+            modifiedQuery.showElapsedTime = false
+        } else if (NodeKind.InsightVizNode === modifiedQuery.kind || NodeKind.SavedInsightNode === modifiedQuery.kind) {
             modifiedQuery.showFilters = true
             modifiedQuery.showResults = false
             modifiedQuery.embedded = true
@@ -111,7 +114,9 @@ export const NotebookNodeQuery = createPostHogWidgetNode<NotebookNodeQueryAttrib
         let title = 'HogQL'
         if (NodeKind.SavedInsightNode === query.kind) {
             const response = await api.insights.loadInsight(query.shortId)
-            title = response.results[0].name || 'Saved insight'
+            title = response.results[0].name?.length
+                ? response.results[0].name
+                : response.results[0].derived_name || 'Saved insight'
         } else if (NodeKind.DataTableNode === query.kind) {
             if (query.source.kind) {
                 title = query.source.kind.replace('Node', '').replace('Query', '')
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index 58f2852c22991..589e733a028c2 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -142,6 +142,11 @@
         position: sticky;
         align-self: flex-start;
         top: 65px;
+
+        &__content {
+            max-height: calc(100vh - 220px);
+            overflow: scroll;
+        }
     }
 
     .LemonTable__content > table > thead {
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx
index bdef0cbe9507f..a8dff38c32c28 100644
--- a/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx
+++ b/frontend/src/scenes/notebooks/Notebook/NotebookSidebar.tsx
@@ -34,7 +34,9 @@ export const Widgets = ({ logic }: { logic: BuiltLogic<notebookNodeLogicType> })
         <div className="NotebookNodeSettings__widgets space-y-2 w-full">
             {widgets.map(({ key, label, Component }) => (
                 <LemonWidget key={key} title={label} onClose={() => setWidgetsVisible(false)}>
-                    <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
+                    <div className="NotebookNodeSettings__widgets__content">
+                        <Component attributes={nodeAttributes} updateAttributes={updateAttributes} />
+                    </div>
                 </LemonWidget>
             ))}
         </div>
diff --git a/frontend/src/scenes/notebooks/NotebookCommentButton/notebookCommentButtonLogic.ts b/frontend/src/scenes/notebooks/NotebookCommentButton/notebookCommentButtonLogic.ts
new file mode 100644
index 0000000000000..519f41368af29
--- /dev/null
+++ b/frontend/src/scenes/notebooks/NotebookCommentButton/notebookCommentButtonLogic.ts
@@ -0,0 +1,84 @@
+import { actions, events, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { loaders } from 'kea-loaders'
+import { NotebookListItemType, NotebookNodeType } from '~/types'
+
+import api from 'lib/api'
+
+import type { notebookCommentButtonLogicType } from './notebookCommentButtonLogicType'
+
+export interface NotebookCommentButtonProps {
+    sessionRecordingId: string
+    startVisible: boolean
+}
+
+export const notebookCommentButtonLogic = kea<notebookCommentButtonLogicType>([
+    path((key) => ['scenes', 'session-recordings', 'NotebookCommentButton', 'multiNotebookCommentButtonLogic', key]),
+    props({} as NotebookCommentButtonProps),
+    key((props) => props.sessionRecordingId || 'no recording id yet'),
+    actions({
+        setShowPopover: (visible: boolean) => ({ visible }),
+        setSearchQuery: (query: string) => ({ query }),
+        loadContainingNotebooks: true,
+        loadAllNotebooks: true,
+    }),
+    reducers(({ props }) => ({
+        searchQuery: [
+            '',
+            {
+                setSearchQuery: (_, { query }) => query,
+            },
+        ],
+        showPopover: [
+            props.startVisible,
+            {
+                setShowPopover: (_, { visible }) => visible,
+            },
+        ],
+    })),
+    listeners(({ actions }) => ({
+        setSearchQuery: () => {
+            actions.loadAllNotebooks()
+            actions.loadContainingNotebooks()
+        },
+    })),
+    loaders(({ props, values }) => ({
+        allNotebooks: [
+            [] as NotebookListItemType[],
+            {
+                loadAllNotebooks: async (_, breakpoint) => {
+                    breakpoint(100)
+                    const response = await api.notebooks.list(undefined, undefined, values.searchQuery ?? undefined)
+                    // TODO for simplicity we'll assume the results will fit into one page
+                    return response.results
+                },
+            },
+        ],
+        containingNotebooks: [
+            [] as NotebookListItemType[],
+            {
+                loadContainingNotebooks: async (_, breakpoint) => {
+                    breakpoint(100)
+                    const response = await api.notebooks.list(
+                        [{ type: NotebookNodeType.Recording, attrs: { id: props.sessionRecordingId } }],
+                        undefined,
+                        values.searchQuery ?? undefined
+                    )
+                    // TODO for simplicity we'll assume the results will fit into one page
+                    return response.results
+                },
+            },
+        ],
+    })),
+    events(({ actions }) => ({
+        afterMount: () => {
+            actions.loadAllNotebooks()
+            actions.loadContainingNotebooks()
+        },
+    })),
+    selectors(() => ({
+        notebooksLoading: [
+            (s) => [s.allNotebooksLoading, s.containingNotebooksLoading],
+            (allNotebooksLoading, containingNotebooksLoading) => allNotebooksLoading || containingNotebooksLoading,
+        ],
+    })),
+])
diff --git a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png
index 3b185216c6362..ab79c58ee2eaf 100644
Binary files a/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png and b/playwright/e2e-vrt/layout/Navigation.spec.ts-snapshots/Navigation-App-Page-With-Side-Bar-Hidden-Mobile-1-chromium-linux.png differ