diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png
index 7d5857c234223..0cd9c156ed787 100644
Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png
index 287a3cbef91e0..07f7adc141c90 100644
Binary files a/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png and b/frontend/__snapshots__/scenes-app-insights-error-empty-states--long-loading--light.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--dark.png b/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--dark.png
new file mode 100644
index 0000000000000..d6fe88cab16e5
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--light.png b/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--light.png
new file mode 100644
index 0000000000000..50e2dea81e948
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--empty-thread-loading--light.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--thread--dark.png b/frontend/__snapshots__/scenes-app-max-ai--thread--dark.png
new file mode 100644
index 0000000000000..b6706129af789
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--thread--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--thread--light.png b/frontend/__snapshots__/scenes-app-max-ai--thread--light.png
new file mode 100644
index 0000000000000..c28a32b736a5e
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--thread--light.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--welcome--dark.png b/frontend/__snapshots__/scenes-app-max-ai--welcome--dark.png
new file mode 100644
index 0000000000000..023ee3bb7c7cb
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--welcome--dark.png differ
diff --git a/frontend/__snapshots__/scenes-app-max-ai--welcome--light.png b/frontend/__snapshots__/scenes-app-max-ai--welcome--light.png
new file mode 100644
index 0000000000000..38686893a504a
Binary files /dev/null and b/frontend/__snapshots__/scenes-app-max-ai--welcome--light.png differ
diff --git a/frontend/src/layout/navigation-3000/Navigation.scss b/frontend/src/layout/navigation-3000/Navigation.scss
index f1dafe9a8df79..882e4c5acac7f 100644
--- a/frontend/src/layout/navigation-3000/Navigation.scss
+++ b/frontend/src/layout/navigation-3000/Navigation.scss
@@ -48,6 +48,7 @@
 
     &.Navigation3000__scene--raw {
         --scene-padding: 0px;
+        --scene-padding-bottom: 0px;
 
         display: flex;
         flex-direction: column;
diff --git a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
index c9fb0932a05d7..026a450acca42 100644
--- a/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
+++ b/frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx
@@ -838,9 +838,11 @@ export class HedgehogActor {
                         ))}
                         {this.overlayAnimation ? (
                             <div
-                                className={`absolute top-0 left-0 w-[${SPRITE_SIZE}px] h-[${SPRITE_SIZE}px] rendering-pixelated`}
+                                className="absolute top-0 left-0 rendering-pixelated"
                                 // eslint-disable-next-line react/forbid-dom-props
                                 style={{
+                                    width: SPRITE_SIZE,
+                                    height: SPRITE_SIZE,
                                     backgroundImage: `url(${spriteOverlayUrl(this.overlayAnimation.spriteInfo.img)})`,
                                     backgroundPosition: `-${
                                         (this.overlayAnimation.frame % X_FRAMES) * SPRITE_SIZE
diff --git a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
index bc4d03cf12559..31dc3dc1d6489 100644
--- a/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTextArea/LemonTextArea.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import React, { useRef } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-export interface LemonTextAreaProps
+interface LemonTextAreaPropsBase
     extends Pick<
         React.TextareaHTMLAttributes<HTMLTextAreaElement>,
         'onFocus' | 'onBlur' | 'maxLength' | 'autoFocus' | 'onKeyDown'
@@ -18,9 +18,6 @@ export interface LemonTextAreaProps
     disabled?: boolean
     ref?: React.Ref<HTMLTextAreaElement>
     onChange?: (newValue: string) => void
-    /** Callback called when Cmd + Enter (or Ctrl + Enter) is pressed.
-     * This checks for Cmd/Ctrl, as opposed to LemonInput, to avoid blocking multi-line input. */
-    onPressCmdEnter?: (newValue: string) => void
     minRows?: number
     maxRows?: number
     rows?: number
@@ -29,9 +26,22 @@ export interface LemonTextAreaProps
     'data-attr'?: string
 }
 
+interface LemonTextAreaWithCmdEnterProps extends LemonTextAreaPropsBase {
+    /** Callback for when Cmd/Ctrl + Enter is pressed. In this case, the user adds new lines with Enter like always. */
+    onPressCmdEnter?: (currentValue: string) => void
+    onPressEnter?: never
+}
+
+interface LemonTextAreaWithEnterProps extends LemonTextAreaPropsBase {
+    /** Callback for when Enter is pressed. In this case, to add a new line the user must press Cmd + Enter. */
+    onPressEnter: (currentValue: string) => void
+    onPressCmdEnter?: never
+}
+export type LemonTextAreaProps = LemonTextAreaWithEnterProps | LemonTextAreaWithCmdEnterProps
+
 /** A `textarea` component for multi-line text. */
 export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextAreaProps>(function _LemonTextArea(
-    { className, onChange, onPressCmdEnter: onPressEnter, minRows = 3, onKeyDown, stopPropagation, ...textProps },
+    { className, onChange, onPressEnter, onPressCmdEnter, minRows = 3, onKeyDown, stopPropagation, ...textProps },
     ref
 ): JSX.Element {
     const _ref = useRef<HTMLTextAreaElement | null>(null)
@@ -46,10 +56,29 @@ export const LemonTextArea = React.forwardRef<HTMLTextAreaElement, LemonTextArea
                 if (stopPropagation) {
                     e.stopPropagation()
                 }
-                if (onPressEnter && e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-                    onPressEnter(textProps.value?.toString() ?? '')
+                if (e.key === 'Enter') {
+                    const target = e.currentTarget
+                    if (e.metaKey || e.ctrlKey) {
+                        if (onPressEnter) {
+                            // When onPressEnter is defined, Cmd/Ctrl + Enter adds a new line, like Enter normally does.
+                            // This does not happen by default for Enter presses with Cmd/Ctrl, so we need to simulate it.
+                            const selectionStartBeforeChange = target.selectionStart
+                            const selectionEndBeforeChange = target.selectionEnd
+                            target.value =
+                                target.value.substring(0, selectionStartBeforeChange) +
+                                '\n' +
+                                target.value.substring(selectionEndBeforeChange)
+                            target.selectionStart = target.selectionEnd = selectionStartBeforeChange + 1
+                            onChange?.(target.value)
+                        } else if (onPressCmdEnter) {
+                            onPressCmdEnter(target.value)
+                            e.preventDefault()
+                        }
+                    } else if (onPressEnter) {
+                        onPressEnter?.(target.value)
+                        e.preventDefault()
+                    }
                 }
-
                 onKeyDown?.(e)
             }}
             onChange={(event) => {
diff --git a/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss b/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss
index a3d281eceaaea..2f71c1fb79d00 100644
--- a/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss
+++ b/frontend/src/lib/lemon-ui/LoadingBar/LoadingBar.scss
@@ -18,4 +18,9 @@
     left: 0;
     height: 100%;
     background: var(--primary-3000-active);
+
+    .storybook-test-runner & {
+        // When taking UI snapshots, we hard-code progress width to 50%
+        width: 50% !important;
+    }
 }
diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
index 5ac9451001c14..15e23154d2fef 100644
--- a/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
+++ b/frontend/src/scenes/insights/EmptyStates/EmptyStates.stories.tsx
@@ -130,11 +130,7 @@ export const LongLoading: StoryFn = () => {
             ],
         },
         post: {
-            '/api/projects/:team_id/insights/trend/': (_, __, ctx) => [
-                ctx.delay(86400000),
-                ctx.status(200),
-                ctx.json({ result: insight.result }),
-            ],
+            '/api/projects/:team_id/query/': (_, __, ctx) => [ctx.delay('infinite')],
         },
     })
     useEffect(() => {
diff --git a/frontend/src/scenes/max/Intro.tsx b/frontend/src/scenes/max/Intro.tsx
new file mode 100644
index 0000000000000..c714495b72f86
--- /dev/null
+++ b/frontend/src/scenes/max/Intro.tsx
@@ -0,0 +1,51 @@
+import { useValues } from 'kea'
+import { HedgehogBuddy } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
+import { hedgehogBuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogBuddyLogic'
+import { useMemo } from 'react'
+
+import { maxLogic } from './maxLogic'
+
+const HEADLINES = [
+    'How can I help you build?',
+    'What are you curious about?',
+    'How can I help you understand users?',
+    'What do you want to know today?',
+]
+
+export function Intro(): JSX.Element {
+    const { hedgehogConfig } = useValues(hedgehogBuddyLogic)
+    const { sessionId } = useValues(maxLogic)
+
+    const headline = useMemo(() => {
+        return HEADLINES[parseInt(sessionId.split('-').at(-1) as string, 16) % HEADLINES.length]
+    }, [])
+
+    return (
+        <>
+            <div className="flex">
+                <HedgehogBuddy
+                    static
+                    hedgehogConfig={{
+                        ...hedgehogConfig,
+                        walking_enabled: false,
+                        controls_enabled: false,
+                    }}
+                    onClick={(actor) => {
+                        if (Math.random() < 0.01) {
+                            actor.setOnFire()
+                        } else {
+                            actor.setRandomAnimation()
+                        }
+                    }}
+                    onActorLoaded={(actor) => setTimeout(() => actor.setAnimation('wave'), 100)}
+                />
+            </div>
+            <div className="text-center mb-2">
+                <h2 className="text-2xl font-bold mb-2 text-balance">{headline}</h2>
+                <span className="text-muted">
+                    I'm Max, here to help you build a succesful product. Ask me about your product and your users.
+                </span>
+            </div>
+        </>
+    )
+}
diff --git a/frontend/src/scenes/max/Max.stories.tsx b/frontend/src/scenes/max/Max.stories.tsx
new file mode 100644
index 0000000000000..812c87f0fd423
--- /dev/null
+++ b/frontend/src/scenes/max/Max.stories.tsx
@@ -0,0 +1,74 @@
+import { Meta, StoryFn } from '@storybook/react'
+import { BindLogic, useActions } from 'kea'
+import { useEffect } from 'react'
+
+import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
+
+import chatResponse from './__mocks__/chatResponse.json'
+import { MaxInstance } from './Max'
+import { maxLogic } from './maxLogic'
+
+const meta: Meta = {
+    title: 'Scenes-App/Max AI',
+    decorators: [
+        mswDecorator({
+            post: {
+                '/api/projects/:team_id/query/chat/': chatResponse,
+            },
+        }),
+    ],
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        mockDate: '2023-01-28', // To stabilize relative dates
+    },
+}
+export default meta
+
+const Template = ({ sessionId }: { sessionId: string }): JSX.Element => {
+    return (
+        <div className="relative flex flex-col h-fit">
+            <BindLogic logic={maxLogic} props={{ sessionId }}>
+                <MaxInstance />
+            </BindLogic>
+        </div>
+    )
+}
+
+export const Welcome: StoryFn = () => {
+    const sessionId = 'd210b263-8521-4c5b-b3c4-8e0348df574b'
+    return <Template sessionId={sessionId} />
+}
+
+export const Thread: StoryFn = () => {
+    const sessionId = 'd210b263-8521-4c5b-b3c4-8e0348df574b'
+
+    const { askMax } = useActions(maxLogic({ sessionId }))
+    useEffect(() => {
+        askMax('What are my most popular pages?')
+    }, [])
+
+    return <Template sessionId={sessionId} />
+}
+
+export const EmptyThreadLoading: StoryFn = () => {
+    useStorybookMocks({
+        post: {
+            '/api/projects/:team_id/query/chat/': (_req, _res, ctx) => [ctx.delay('infinite')],
+        },
+    })
+
+    const sessionId = 'd210b263-8521-4c5b-b3c4-8e0348df574b'
+
+    const { askMax } = useActions(maxLogic({ sessionId }))
+    useEffect(() => {
+        askMax('What are my most popular pages?')
+    }, [])
+
+    return <Template sessionId={sessionId} />
+}
+EmptyThreadLoading.parameters = {
+    testOptions: {
+        waitForLoadersToDisappear: false,
+    },
+}
diff --git a/frontend/src/scenes/max/Max.tsx b/frontend/src/scenes/max/Max.tsx
index 65909db171a5a..4b01c0d03e4ba 100644
--- a/frontend/src/scenes/max/Max.tsx
+++ b/frontend/src/scenes/max/Max.tsx
@@ -1,161 +1,58 @@
 import './Max.scss'
 
-import { LemonButton, LemonInput, Spinner } from '@posthog/lemon-ui'
-import clsx from 'clsx'
-import { useActions, useValues } from 'kea'
-import { HedgehogBuddy } from 'lib/components/HedgehogBuddy/HedgehogBuddy'
-import { hedgehogBuddyLogic } from 'lib/components/HedgehogBuddy/hedgehogBuddyLogic'
+import { BindLogic, useValues } from 'kea'
+import { NotFound } from 'lib/components/NotFound'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { uuid } from 'lib/utils'
-import React, { useState } from 'react'
+import { useMemo } from 'react'
 import { SceneExport } from 'scenes/sceneTypes'
 
-import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
-import { Query } from '~/queries/Query/Query'
-import { NodeKind } from '~/queries/schema'
-
+import { Intro } from './Intro'
 import { maxLogic } from './maxLogic'
+import { QuestionInput } from './QuestionInput'
+import { QuestionSuggestions } from './QuestionSuggestions'
+import { Thread } from './Thread'
 
 export const scene: SceneExport = {
     component: Max,
-    logic: maxLogic,
 }
 
-function Message({
-    role,
-    children,
-    className,
-}: React.PropsWithChildren<{ role: 'user' | 'assistant'; className?: string }>): JSX.Element {
-    return (
-        <div
-            className={clsx(
-                'border p-2 rounded',
-                role === 'user' ? 'bg-accent-3000 self-end' : 'bg-bg-light self-start w-2/3',
-                className
-            )}
-        >
-            {children}
-        </div>
-    )
-}
-
-export function Max(): JSX.Element | null {
+export function Max(): JSX.Element {
     const { featureFlags } = useValues(featureFlagLogic)
-    const { hedgehogConfig } = useValues(hedgehogBuddyLogic)
-
-    const logic = maxLogic({
-        sessionId: uuid(),
-    })
-    const { thread, threadLoading } = useValues(logic)
-    const { askMax } = useActions(logic)
 
-    const [question, setQuestion] = useState('')
+    const sessionId = useMemo(() => uuid(), [])
 
     if (!featureFlags[FEATURE_FLAGS.ARTIFICIAL_HOG]) {
-        return null
+        return <NotFound object="page" caption="You don't have access to AI features yet." />
     }
 
     return (
-        <>
-            <div className="flex flex-col gap-4 grow p-4">
-                {thread.map((message, index) => {
-                    if (message.role === 'user' || typeof message.content === 'string') {
-                        return (
-                            <Message
-                                key={index}
-                                role={message.role}
-                                className={message.status === 'error' ? 'border-danger' : undefined}
-                            >
-                                {message.content || <i>No text</i>}
-                            </Message>
-                        )
-                    }
+        <BindLogic logic={maxLogic} props={{ sessionId }}>
+            <MaxInstance />
+        </BindLogic>
+    )
+}
 
-                    const query = {
-                        kind: NodeKind.InsightVizNode,
-                        source: message.content?.answer,
-                    }
+export function MaxInstance(): JSX.Element {
+    const { thread } = useValues(maxLogic)
 
-                    return (
-                        <React.Fragment key={index}>
-                            {message.content?.reasoning_steps && (
-                                <Message role={message.role}>
-                                    <ul className="list-disc ml-4">
-                                        {message.content.reasoning_steps.map((step, index) => (
-                                            <li key={index}>{step}</li>
-                                        ))}
-                                    </ul>
-                                </Message>
-                            )}
-                            {message.status === 'completed' && message.content?.answer && (
-                                <Message role={message.role}>
-                                    <div className="h-96 flex">
-                                        <Query query={query} readOnly embedded />
-                                    </div>
-                                    <LemonButton
-                                        className="mt-4 w-fit"
-                                        type="primary"
-                                        to={`/insights/new#filters=${JSON.stringify(
-                                            queryNodeToFilter(message.content.answer)
-                                        )}`}
-                                        targetBlank
-                                    >
-                                        Edit Query
-                                    </LemonButton>
-                                </Message>
-                            )}
-                        </React.Fragment>
-                    )
-                })}
-                {threadLoading && (
-                    <Message role="assistant" className="w-fit select-none">
-                        <div className="flex items-center gap-2">
-                            Let me think…
-                            <Spinner className="text-xl" />
-                        </div>
-                    </Message>
-                )}
-            </div>
-            <div className="relative flex items-start px-4">
-                <div className="flex -my-4 -ml-4">
-                    <HedgehogBuddy
-                        static
-                        hedgehogConfig={{
-                            ...hedgehogConfig,
-                            walking_enabled: false,
-                            controls_enabled: false,
-                        }}
-                        onClick={(actor) => actor.setAnimation('wave')}
-                        onActorLoaded={(actor) => actor.setAnimation('wave')}
-                    />
+    return (
+        <>
+            {!thread.length ? (
+                <div className="relative flex flex-col gap-4 px-4 items-center grow justify-center">
+                    <Intro />
+                    <div className="flex flex-col gap-3 items-center w-[min(40rem,100%)]">
+                        <QuestionInput />
+                        <QuestionSuggestions />
+                    </div>
                 </div>
-                <LemonInput
-                    value={question}
-                    onChange={(value) => setQuestion(value)}
-                    placeholder="Hey, I'm Max! What would you like to know about your product?"
-                    fullWidth
-                    size="large"
-                    autoFocus
-                    onPressEnter={() => {
-                        askMax(question)
-                        setQuestion('')
-                    }}
-                    disabled={threadLoading}
-                    suffix={
-                        <LemonButton
-                            type="primary"
-                            onClick={() => {
-                                askMax(question)
-                                setQuestion('')
-                            }}
-                            disabledReason={threadLoading ? 'Thinking…' : undefined}
-                        >
-                            Ask Max
-                        </LemonButton>
-                    }
-                />
-            </div>
+            ) : (
+                <>
+                    <Thread />
+                    <QuestionInput />
+                </>
+            )}
         </>
     )
 }
diff --git a/frontend/src/scenes/max/QuestionInput.tsx b/frontend/src/scenes/max/QuestionInput.tsx
new file mode 100644
index 0000000000000..e5ad12a6562dc
--- /dev/null
+++ b/frontend/src/scenes/max/QuestionInput.tsx
@@ -0,0 +1,59 @@
+import { IconArrowRight } from '@posthog/icons'
+import { LemonButton, LemonTextArea } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useActions, useValues } from 'kea'
+import { useEffect, useRef } from 'react'
+
+import { maxLogic } from './maxLogic'
+
+export function QuestionInput(): JSX.Element {
+    const { question, thread, threadLoading } = useValues(maxLogic)
+    const { askMax, setQuestion } = useActions(maxLogic)
+
+    const textAreaRef = useRef<HTMLTextAreaElement | null>(null)
+
+    const isFloating = thread.length > 0
+
+    useEffect(() => {
+        if (!threadLoading) {
+            textAreaRef.current?.focus() // Auto focus, both on mount and when Max finishes thinking
+        }
+    }, [threadLoading])
+
+    return (
+        <div
+            className={clsx(
+                'w-full',
+                !isFloating
+                    ? 'relative'
+                    : 'max-w-200 sticky z-10 self-center p-1 mx-3 mb-3 bottom-3 border border-[var(--glass-border-3000)] rounded-[0.625rem] backdrop-blur bg-[var(--glass-bg-3000)]'
+            )}
+        >
+            <LemonTextArea
+                ref={textAreaRef}
+                value={question}
+                onChange={(value) => setQuestion(value)}
+                placeholder={threadLoading ? 'Thinking…' : isFloating ? 'Ask follow-up' : 'Ask away'}
+                onPressEnter={() => {
+                    if (question) {
+                        askMax(question)
+                    }
+                }}
+                disabled={threadLoading}
+                minRows={1}
+                maxRows={10}
+                className={clsx('p-3', isFloating && 'border-border-bold')}
+            />
+            <div className={clsx('absolute top-0 bottom-0 flex items-center', isFloating ? 'right-3' : 'right-2')}>
+                <LemonButton
+                    type={isFloating && !question ? 'secondary' : 'primary'}
+                    onClick={() => askMax(question)}
+                    tooltip="Let's go!"
+                    disabledReason={!question ? 'I need some input first' : threadLoading ? 'Thinking…' : undefined}
+                    size="small"
+                    icon={<IconArrowRight />}
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/scenes/max/QuestionSuggestions.tsx b/frontend/src/scenes/max/QuestionSuggestions.tsx
new file mode 100644
index 0000000000000..d0a80350c7b02
--- /dev/null
+++ b/frontend/src/scenes/max/QuestionSuggestions.tsx
@@ -0,0 +1,27 @@
+import { IconArrowUpRight } from '@posthog/icons'
+import { LemonButton } from '@posthog/lemon-ui'
+import { useActions } from 'kea'
+
+import { maxLogic } from './maxLogic'
+
+export function QuestionSuggestions(): JSX.Element {
+    const { askMax } = useActions(maxLogic)
+
+    const suggestions = ['What are my most popular pages?', 'Who are my top users?', 'Which features see most usage?']
+
+    return (
+        <div className="flex gap-2 w-[min(40rem,100%)] items-center justify-center">
+            {suggestions.map((suggestion, index) => (
+                <LemonButton
+                    key={index}
+                    onClick={() => askMax(suggestion)}
+                    size="xsmall"
+                    type="secondary"
+                    sideIcon={<IconArrowUpRight />}
+                >
+                    {suggestion}
+                </LemonButton>
+            ))}
+        </div>
+    )
+}
diff --git a/frontend/src/scenes/max/Thread.tsx b/frontend/src/scenes/max/Thread.tsx
new file mode 100644
index 0000000000000..df081358aa3b9
--- /dev/null
+++ b/frontend/src/scenes/max/Thread.tsx
@@ -0,0 +1,88 @@
+import { LemonButton, Spinner } from '@posthog/lemon-ui'
+import clsx from 'clsx'
+import { useValues } from 'kea'
+import React from 'react'
+
+import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeToFilter'
+import { Query } from '~/queries/Query/Query'
+import { NodeKind } from '~/queries/schema'
+
+import { maxLogic } from './maxLogic'
+
+export function Thread(): JSX.Element | null {
+    const { thread, threadLoading } = useValues(maxLogic)
+
+    return (
+        <div className="flex flex-col items-stretch w-full max-w-200 self-center gap-2 grow m-4">
+            {thread.map((message, index) => {
+                if (message.role === 'user' || typeof message.content === 'string') {
+                    return (
+                        <Message
+                            key={index}
+                            role={message.role}
+                            className={message.status === 'error' ? 'border-danger' : undefined}
+                        >
+                            {message.content || <i>No text</i>}
+                        </Message>
+                    )
+                }
+
+                const query = {
+                    kind: NodeKind.InsightVizNode,
+                    source: message.content?.answer,
+                }
+
+                return (
+                    <React.Fragment key={index}>
+                        {message.content?.reasoning_steps && (
+                            <Message role={message.role}>
+                                <ul className="list-disc ml-4">
+                                    {message.content.reasoning_steps.map((step, index) => (
+                                        <li key={index}>{step}</li>
+                                    ))}
+                                </ul>
+                            </Message>
+                        )}
+                        {message.status === 'completed' && message.content?.answer && (
+                            <Message role={message.role}>
+                                <div className="h-96 flex">
+                                    <Query query={query} readOnly embedded />
+                                </div>
+                                <LemonButton
+                                    className="mt-4 w-fit"
+                                    type="primary"
+                                    to={`/insights/new#filters=${JSON.stringify(
+                                        queryNodeToFilter(message.content.answer)
+                                    )}`}
+                                    targetBlank
+                                >
+                                    Edit Query
+                                </LemonButton>
+                            </Message>
+                        )}
+                    </React.Fragment>
+                )
+            })}
+            {threadLoading && (
+                <Message role="assistant" className="w-fit select-none">
+                    <div className="flex items-center gap-2">
+                        Let me think…
+                        <Spinner className="text-xl" />
+                    </div>
+                </Message>
+            )}
+        </div>
+    )
+}
+
+function Message({
+    role,
+    children,
+    className,
+}: React.PropsWithChildren<{ role: 'user' | 'assistant'; className?: string }>): JSX.Element {
+    if (role === 'user') {
+        return <h2 className={clsx('mt-1 mb-3 text-2xl font-medium', className)}>{children}</h2>
+    }
+
+    return <div className={clsx('border p-2 rounded bg-bg-light', className)}>{children}</div>
+}
diff --git a/frontend/src/scenes/max/__mocks__/chatResponse.json b/frontend/src/scenes/max/__mocks__/chatResponse.json
new file mode 100644
index 0000000000000..8be5242f5b6a6
--- /dev/null
+++ b/frontend/src/scenes/max/__mocks__/chatResponse.json
@@ -0,0 +1,66 @@
+{
+    "reasoning_steps": [
+        "The user's query is to identify the most popular pages.",
+        "To determine the most popular pages, we should analyze the '$pageview' event as it tracks when a user loads or reloads a page.",
+        "We need to use the '$current_url' property from the event properties to identify different pages.",
+        "Since the user didn't specify a date range, a reasonable default would be the last 30 days to get recent insights.",
+        "We should use a breakdown on the '$current_url' to see the popularity of each page URL.",
+        "A bar chart would be suitable for visualizing the most popular pages as it's categorical data.",
+        "Filter out internal and test users by default unless specified otherwise."
+    ],
+    "answer": {
+        "aggregation_group_type_index": null,
+        "breakdownFilter": {
+            "breakdown_hide_other_aggregation": null,
+            "breakdown_histogram_bin_count": null,
+            "breakdown_limit": null,
+            "breakdowns": [
+                {
+                    "group_type_index": null,
+                    "histogram_bin_count": null,
+                    "normalize_url": null,
+                    "property": "$current_url",
+                    "type": "event"
+                }
+            ]
+        },
+        "compareFilter": null,
+        "dateRange": { "date_from": "-30d", "date_to": null, "explicitDate": false },
+        "filterTestAccounts": true,
+        "interval": "day",
+        "kind": "TrendsQuery",
+        "properties": [],
+        "samplingFactor": null,
+        "series": [
+            {
+                "custom_name": "Pageviews",
+                "event": "$pageview",
+                "fixedProperties": null,
+                "kind": "EventsNode",
+                "math": "total",
+                "math_group_type_index": null,
+                "math_property": null,
+                "name": null,
+                "orderBy": null,
+                "properties": null,
+                "response": null
+            }
+        ],
+        "trendsFilter": {
+            "aggregationAxisFormat": "numeric",
+            "aggregationAxisPostfix": null,
+            "aggregationAxisPrefix": null,
+            "breakdown_histogram_bin_count": null,
+            "decimalPlaces": null,
+            "display": "ActionsBar",
+            "formula": null,
+            "hiddenLegendIndexes": null,
+            "showLabelsOnSeries": null,
+            "showLegend": false,
+            "showPercentStackView": false,
+            "showValuesOnSeries": false,
+            "smoothingIntervals": 1,
+            "yAxisScaleType": null
+        }
+    }
+}
diff --git a/frontend/src/scenes/max/maxLogic.ts b/frontend/src/scenes/max/maxLogic.ts
index a0a863e98e0eb..e3fb7f47e1225 100644
--- a/frontend/src/scenes/max/maxLogic.ts
+++ b/frontend/src/scenes/max/maxLogic.ts
@@ -1,4 +1,4 @@
-import { actions, kea, listeners, path, props, reducers } from 'kea'
+import { actions, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import api from 'lib/api'
 
 import { ExperimentalAITrendsQuery } from '~/queries/schema'
@@ -23,14 +23,23 @@ export interface ThreadMessage {
 export const maxLogic = kea<maxLogicType>([
     path(['scenes', 'max', 'maxLogic']),
     props({} as MaxLogicProps),
+    key(({ sessionId }) => sessionId),
     actions({
         askMax: (prompt: string) => ({ prompt }),
-        setThreadLoaded: true,
+        setThreadLoaded: (testOnlyOverride = false) => ({ testOnlyOverride }),
         addMessage: (message: ThreadMessage) => ({ message }),
         replaceMessage: (index: number, message: ThreadMessage) => ({ index, message }),
         setMessageStatus: (index: number, status: ThreadMessage['status']) => ({ index, status }),
+        setQuestion: (question: string) => ({ question }),
     }),
     reducers({
+        question: [
+            '',
+            {
+                setQuestion: (_, { question }) => question,
+                askMax: () => '',
+            },
+        ],
         thread: [
             [] as ThreadMessage[],
             {
@@ -54,7 +63,7 @@ export const maxLogic = kea<maxLogicType>([
             false,
             {
                 askMax: () => true,
-                setThreadLoaded: () => false,
+                setThreadLoaded: (_, { testOnlyOverride }) => testOnlyOverride,
             },
         ],
     }),
@@ -109,6 +118,9 @@ export const maxLogic = kea<maxLogicType>([
             actions.setThreadLoaded()
         },
     })),
+    selectors({
+        sessionId: [(_, p) => [p.sessionId], (sessionId) => sessionId],
+    }),
 ])
 
 /**
diff --git a/frontend/src/scenes/scenes.ts b/frontend/src/scenes/scenes.ts
index 06be59255b361..82ea4775cb01c 100644
--- a/frontend/src/scenes/scenes.ts
+++ b/frontend/src/scenes/scenes.ts
@@ -261,7 +261,7 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
     },
     [Scene.Max]: {
         projectBased: true,
-        name: 'Max',
+        name: 'Max AI',
         layout: 'app-raw',
         hideProjectNotice: true, // FIXME: Currently doesn't render well...
     },